/* ============================================================================
TABHI — Site-Wide Breathing-Room Layer
----------------------------------------------------------------------------
This file cascades AFTER system.css and adds vertical breathing room to
long-form content. Every rule is additive — more space, never less — and
targets only typography/spacing, never colors or structure.
Safe to remove if the new rhythm doesn't suit: just delete the tags
from each page's and this file. system.css is untouched.
============================================================================ */
/* ----- 1. Long-form prose: more generous line-height ---------------------- */
/* system.css sets line-height: 1.7 on .t-body. We lift to 1.78 specifically on
editorial prose, where the longer line measure benefits from more leading. */
.t-body,
.ed-prose,
.lead {
line-height: 1.78;
}
/* ----- 2. Paragraph rhythm in editorial bodies ---------------------------- */
/* system.css uses var(--s-16) (16px) between consecutive paragraphs. That feels
tight on text-heavy pages like our-story and london-bourne. We lift to
var(--s-24) (24px) — a 50% increase — only in editorial contexts. */
.t-body p + p,
.ed-prose p + p {
margin-top: var(--s-24);
}
/* ----- 3. Editorial section gaps ------------------------------------------ */
/* Consecutive editorial sections sometimes butt up directly. Add a quiet gap
between them without changing their internal padding. */
.ed-section + .ed-section,
.ed-article + .ed-section {
padding-top: var(--s-64);
}
/* ----- 4. Pull quotes — more vertical room -------------------------------- */
/* Editorial pull quotes carry rhetorical weight. Give them air on both sides. */
.ed-pullquote {
margin-block: var(--s-96);
}
/* ----- 5. Editorial dividers — more breathing room ------------------------ */
.ed-divider {
margin-block: var(--s-64);
}
/* ----- 6. Headings inside prose: lift the start of each new section ------- */
/* Headings that follow body text benefit from more pre-space than post-space.
The :not(:first-child) excludes the first heading at the top of an article. */
.ed-prose h2:not(:first-child),
.ed-prose .ed-h2:not(:first-child),
.ed-prose h3:not(:first-child),
.ed-prose .ed-subhead:not(:first-child),
.ed-prose .ed-kicker:not(:first-child) {
margin-top: var(--s-64);
}
/* ----- 7. End-of-article whitespace --------------------------------------- */
/* Articles often end flush against the next section. Add room below. */
.ed-article {
padding-bottom: var(--s-96);
}
/* ----- 8. Lead paragraphs: more space before the body ascendant ----------- */
/* When a .lead is followed by body prose, the transition can feel abrupt. */
.lead + .t-body,
.lead + .ed-prose,
.lead + p {
margin-top: var(--s-40);
}
/* ----- 9. Figures inside editorial prose: room above and below ------------ */
.ed-prose .ed-fig-full,
.ed-prose .ed-fig-left,
.ed-prose .ed-fig-right {
margin-block: var(--s-40);
}
/* ----- 10. Generic children: respect content rhythm ---------------- */
/* For any page that doesn't use the editorial classes, still give consecutive
sections breathing room. */
main > section + section,
main > article + section,
main > section + article {
margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
/* ============================================================================
End breathing-room layer.
============================================================================ */