/* ============================================================
TYPOGRAPHY — NO WIDOWS OR ORPHANS
Place this file in the same folder as your HTML files.
Link it in every HTML page inside :
============================================================ */
/* ── FONT SMOOTHING ──────────────────────────────────────────
Override the inline antialiased setting. 'auto' uses subpixel
rendering which makes Helvetica Neue 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-Bold.woff2') format('woff2'),
url('fonts/Helvetica-Bold.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* ── WIDOW & ORPHAN CONTROL ──────────────────────────────────
widows: minimum lines allowed at the TOP of a new column/page
orphans: minimum lines allowed at the BOTTOM of a column/page
Both set to 3 = no single or double stray lines ever appear. */
p, li, blockquote, dd {
widows: 3;
orphans: 3;
}
/* ── HEADINGS — never break away from the paragraph below ────
Keeps a heading and its first line of body text together. */
h1, h2, h3, h4, h5, h6 {
break-after: avoid;
page-break-after: avoid; /* legacy fallback */
}
/* ── FIGURES, IMAGES, CAPTIONS — keep together ───────────────
Prevents a caption appearing on a different page to its image */
figure, .svc-item, .grid-item, .rel-item {
break-inside: avoid;
page-break-inside: avoid;
}
/* ── BALANCED LINE LENGTHS ────────────────────────────────────
text-wrap: balance distributes text more evenly across lines,
which naturally reduces widows in short text blocks like
captions, labels, and metadata.
Supported in Chrome 114+, Safari 17.4+, Firefox 121+. */
p, .proj-body, .side-desc, .proj-desc,
.svc-desc, .profile-col, .meta-val,
.grid-desc, .rel-desc, .pdesc {
text-wrap: balance;
}
/* ── HOME PAGE PROJECT DESCRIPTIONS (.pdesc) ─────────────────
Caps line length so descriptions break naturally instead of
stretching across the full column. Works WITHOUT manual
tags in the markup — remove all
from .pdesc paragraphs
and let CSS handle the wrap.
~28em = ~22-24 words per line, comfortable read. */
.pdesc {
max-width: 16em;
hyphens: manual;
-webkit-hyphens: manual;
}
/* ── HEADINGS & SHORT LABELS — always balance ──────────────── */
h1, h2, h3, h4, h5, h6,
.phead, .side-label, .meta-label,
.svc-title, .grid-title, .rel-title,
.related-label, .services-label,
.profile-label, .list-heading,
.filter-line, .close-btn {
text-wrap: balance;
}
/* ── LAST LINE PROTECTION ────────────────────────────────────
text-wrap: pretty is handled by typography.js instead,
which works reliably across all browsers and correctly
handles em dashes and other special characters. */
/* ── HYPHENS — soft, language-aware ─────────────────────────
Allows the browser to break long words gracefully rather than
overflow or create very ragged right edges. */
p, li, .proj-body, .side-desc, .svc-desc,
.profile-col, .meta-val, .grid-desc, .rel-desc {
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
}
/* ── INLINE ELEMENTS — no break at end of line ───────────────
Targets only inline text links (inside paragraphs), not
block-level elements like grid items or nav links. */
p a, li a, .profile-col a, .hero-contact a, .fl a, .fr a {
white-space: nowrap;
}
strong, em {
white-space: nowrap;
}
/* ── FOOTER — tablet zone (769–1024px) ──────────────────────
Default footer uses a 4-column grid (auto auto auto 1fr).
Between mobile and full desktop, the paragraph column gets
crushed into single-word stacking. Restructure to 2 columns
in this range — paragraph on the left, address+contact
stacked on the right, logo on its own full-width row below
left-aligned to match Peter Laura Design's footer style. */
@media (max-width: 1024px) and (min-width: 769px) {
footer {
grid-template-columns: 1fr 1fr !important;
gap: 28px 60px !important;
padding: 60px 32px !important;
}
/* Address (col 1) → right column, top */
footer .fl:nth-child(1) {
grid-column: 2;
grid-row: 1;
}
/* Contact (col 2) → right column, below address */
footer .fl:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
/* Paragraph (col 3) → left column, spans both rows */
footer .fl:nth-child(3) {
grid-column: 1;
grid-row: 1 / span 2;
max-width: 520px;
}
/* Logo → full-width new row, flush-LEFT (PLD style) */
footer > div:last-child {
grid-column: 1 / -1;
grid-row: 3;
justify-self: start !important;
align-self: start !important;
margin-top: 12px;
}
footer > div:last-child img {
object-position: left;
}
}
/* ── RELATED / FROM THE STUDIO — ink color ───────────────────
Override muted grey on related project titles and descriptions
to match body text color. */
.rel-desc, .rel-title {
color: var(--ink);
}
/* ── PROJECT HEADINGS (.phead) ───────────────────────────────
Uppercase project titles on the home page. Exactly one point
smaller than .pdesc (clamp 14/1.2vw/18) at every viewport.
Regular weight — not Bold. */
.phead {
font-size: clamp(13px, 1.1vw, 17px);
font-weight: 400;
letter-spacing: .1em;
}
/* ── PROJECTS TOGGLE — Bold weight ──────────────────────────
The "Projects ▾" button stays Bold like the rest of nav. */
.proj-toggle {
font-weight: 500;
}
/* ── NAV ELEMENTS — Bold weight (500) ───────────────────────
Top nav, close buttons, prev/next arrows. */
.snbtn,
.strip-label,
.mlink,
.close-btn,
.close-default,
.btn-prev,
.btn-next,
.pipe-l,
.pipe-r {
font-weight: 500;
}