/* ============================================================
TYPOGRAPHY — PETER LAURA PHOTOGRAPHY
Place this file in the same folder as your HTML files.
Link it in every HTML page inside :
============================================================ */
/* ── FONT SMOOTHING ──────────────────────────────────────────
'auto' uses subpixel rendering which makes Helvetica appear at
its correct weight rather than the artificially thinned
antialiased look. */
body {
-webkit-font-smoothing: auto;
}
/* ── FONT OVERRIDE — Helvetica Regular + Bold ───────────────
Regular at 400 for body text, Bold at 500 for nav elements.
No synthesis, no artificial thickening. */
@font-face {
font-family: 'Helvetica';
src: url('fonts/Helvetica.woff2') format('woff2'),
url('fonts/Helvetica.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica';
src: url('fonts/Helvetica-Light.woff2') format('woff2'),
url('fonts/Helvetica-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica';
src: url('fonts/Helvetica-Bold.woff2') format('woff2'),
url('fonts/Helvetica-Bold.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* ── IMAGE ALT TEXT SUPPRESSION ──────────────────────────────
Hide alt text and broken-image icons during loading or if an
image fails. The alt attribute still works for screen readers,
SEO, and accessibility — only the visible rendering of the
text inside the image box is suppressed. */
img {
color: transparent;
font-size: 0;
}
/* ── WIDOW & ORPHAN CONTROL ──────────────────────────────────
widows: minimum lines allowed at the TOP of a new column
orphans: minimum lines allowed at the BOTTOM of a column
Both set to 3 = no single or double stray lines. */
p, li, blockquote, dd {
widows: 3;
orphans: 3;
}
/* ── BALANCED LINE LENGTHS ────────────────────────────────────
text-wrap: balance distributes text more evenly across lines,
reducing widows in short text blocks like the footer columns.
Supported in Chrome 114+, Safari 17.4+, Firefox 121+. */
p, .prose p, .col-prose p, .fl {
text-wrap: balance;
}
/* ── HYPHENS — disabled ──────────────────────────────────────
Words always wrap whole; never broken across lines with a
hyphen. overflow-wrap kept as a safety net for unbreakable
strings (URLs, etc.) that exceed the column width. */
p, .prose p, .col-prose p, .fl {
hyphens: none;
-webkit-hyphens: none;
overflow-wrap: break-word;
}
/* ── INLINE LINKS — no break at end of line ──────────────────
Targets only inline text links (inside paragraphs and the
footer), not block-level brand or button elements. */
p a, .fl a {
white-space: nowrap;
}
strong, em {
white-space: nowrap;
}
/* ── FOOTER & CONTENT ALIGNMENT — tablet zone (769–1024px) ──
The 4-column grid gets crushed in this range. Restructure to
2 columns: paragraph spans both rows on the left, the other
short blocks stack on the right. */
@media (max-width: 1024px) and (min-width: 769px) {
.content-grid,
.overline,
.headline-row,
footer {
grid-template-columns: 1fr 1fr !important;
gap: 28px 60px !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
/* Headline still spans full width when collapsed */
.headline-row .headline-block { grid-column: 1 / -1; }
/* Overline: only show 2 bars in the tablet 2-col layout */
.overline span:nth-child(3),
.overline span:nth-child(4) { display: none; }
/* Content grid: paragraphs stack on left, col 2 right is empty */
.content-grid .col-prose:not(.col-prose-right) { grid-column: 1; }
.content-grid .col-prose-right { grid-column: 2; max-width: 100% !important; }
.content-grid .col-spacer { display: none; }
/* Footer: studio + paragraph stack on left; contact + location stack on right */
footer .fl:nth-child(1) { grid-column: 1; grid-row: 1; }
footer .fl:nth-child(2) { grid-column: 1; grid-row: 2; max-width: 520px; }
footer .fl:nth-child(3) { grid-column: 2; grid-row: 1; }
footer .fl:nth-child(4) { grid-column: 2; grid-row: 2; }
}
/* ── PHONE NUMBER & COORDINATES — slight letter-spacing ──────
Numeric content in the footer reads tight by default. Letter-
spacing relaxes the digits and improves legibility. Coordinates
wrap their numeric portion in so the city
and state names beside them keep their default spacing. */
.fl a[href^="tel:"],
.fl .coord {
letter-spacing: 0.06em;
}
/* ── NAV — Bold weight (500) ─────────────────────────────────
The "Photography Atelier — Peter Laura" top nav button. */
.snbtn {
font-weight: 500;
}