/* ============================================================
TYPOGRAPHY — NO WIDOWS OR ORPHANS
Place this file in the same folder as your HTML files.
Link it in every HTML page inside :
============================================================ */
/* ── 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
right-aligned to match Hatch Media'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-RIGHT (Hatch style) */
footer > div:last-child {
grid-column: 1 / -1;
grid-row: 3;
justify-self: end !important;
align-self: start !important;
margin-top: 12px;
}
}
/* ── NAV ELEMENTS — Medium weight (500) ─────────────────────
Applies to all navigation text across every page. */
.snbtn,
.strip-label,
.mlink,
.close-btn,
.close-default,
.btn-prev,
.btn-next,
.pipe-l,
.pipe-r {
font-weight: 500;
}