/* Template scaffolding — page layout and web-scale sizing only; every color,
   font, radius and shadow comes from ../../styles.css. The voice is the
   deck's, re-derived for a scrolling page: newsprint — hierarchy
   from the serif scale and NEGATIVE SPACE alone (this system draws no
   boxes, and no rules BETWEEN sections — the head rules around the
   dateline rail are the one exception: front-page furniture, not
   dividers), justified body in columns with real hyphenation,
   process color used small and deliberately, the photograph printed as
   its four process plates.

   THE RHYTHM: a 28px leading unit (17px Source Serif body at ~1.65), 14px
   half-step; line-heights and block margins in unit multiples, heads
   cap-trimmed, ?baselines/B to review. The deck's seat-pinning relaxes to
   per-block discipline on a fluid page. The system's own interface
   components (nav, buttons, inputs) keep their styles.css leading.

   THE LANDING LAWS (shared by all six systems' landing templates):
   #1 display headers break per sentence (.line spans); #2 the landing
   advertises an invented product played straight — broadsheet's is
   Daybreak, a five-minute morning news digest, written like the paper it
   is; #3 spacing is cluster-scoped (display leading ratio-governed ≈1.08
   for the serif's long extenders — the display-block lattice exemption —
   tight single-unit gaps inside a cluster, the air between sections); #4
   no hero eyebrow — the nav brand names the product.

   Optical left alignment: the deck's measured Source Serif 4 value
   carries verbatim (-0.035em where caps lead a display line). */
:root {
  /* Monies Wealth brand palette mapped onto the system's token roles: deep navy
     is the interactive accent, warm gold the rarer second spot color, slate
     blue-gray the subheading ink, warm off-white the paper, charcoal the body. */
  --color-bg: #faf9f6;
  --color-surface: #ffffff;
  --color-text: #2b2b2b;
  --color-divider: color-mix(in srgb, #5a6b85 28%, transparent);
  --color-slate: #5a6b85;
  --color-accent: #113f67;
  --color-accent-100: #e3ebf3; --color-accent-200: #c1d2e2; --color-accent-300: #9bb4cb;
  --color-accent-400: #5c7fa3; --color-accent-500: #113f67; --color-accent-600: #0e3557;
  --color-accent-700: #0b2a45; --color-accent-800: #081f33; --color-accent-900: #051523;
  --color-accent-2: #c9a227;
  --color-accent-2-100: #f8f1d8; --color-accent-2-200: #eedda4; --color-accent-2-300: #dfc76d;
  --color-accent-2-400: #d4b446; --color-accent-2-500: #c9a227; --color-accent-2-600: #a8871f;
  --color-accent-2-700: #7d6416; --color-accent-2-800: #5c4a10; --color-accent-2-900: #3d310a;

  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
/* the component demo pads the masthead with its own spacing; on the page the
   masthead's contents take the page gutter and sit on the wrap's text axis
   (padding-only — full-width paint such as a masthead rule is untouched) */
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav a[aria-current='location'] { color: var(--color-accent-700); } /* in-page anchor,
   not a page link — 'location' is the truthful value. The 700 step, not the
   base accent: at 13px this is small text, where the base cyan's 3.7:1
   large-text value does not reach (the same call as .ix-num.spot) */
@media (max-width: 480px) { .nav a { display: none; } } /* phone width: the
   masthead keeps brand + the one action; the section links return with room
   (layout-only — the component's look is untouched) */

/* — kicker (a section slug in ink — the newspaper's own furniture. The
   deck cut eyebrow kickers because a slide's title carries the slide; a
   scrolling page has no such carrier between sections, so the slug earns
   its place as wayfinding — and the hero still takes none, per the laws) — */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); /* small-text ink on the
     paper ground: 70% measures 5.8:1 (55% is the deck's 24px large-text
     furniture convention; at 13px the 4.5:1 bar applies and 55% is 3.7:1) */
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — hero — */
.hero { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6vw, 80px);
  line-height: clamp(45.5px, 6.5vw, 86.5px); /* law #3: ratio-governed ≈1.08 —
     the serif's ascenders/descenders need a hair more lead than the sans
     systems; the display-block lattice exemption */
  letter-spacing: -0.02em; margin: 0;
  margin-left: -0.035em; /* optical left alignment — the deck's measured Source Serif 4 value */
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; } /* law #1 */
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic; }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* — the front page's head furniture (this system diverges from the shared
   stat-row chassis here): a dateline rail seated between newspaper rules —
   the head pair is 2px over 1px, full-strength ink, because head furniture
   prints black, never the divider gray — and the morning's claims set as an
   INDEX with dot leaders, the way a front page points into its own pages.
   Rhythm: the rail is 1.5 units tall (half-step leading + half-step padding
   each side), index rows run one unit each, rules sit on the seams. — */
.frontpage { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.rule-head { height: 5px; border: 0; margin: 0;
  border-top: 2px solid var(--color-text);
  border-bottom: 1px solid var(--color-text); }
.rule-cut { height: 0; border: 0; border-top: 1px solid var(--color-text); margin: 0; }
.dateline { display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--half) var(--leading); margin: 0; padding: var(--half) 0;
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  font-feature-settings: "pnum" 1;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); /* 5.8:1 — see .kicker */ }
.index { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--half) calc(2.5 * var(--leading));
  padding: calc(var(--leading) - var(--half)) 0 var(--leading); }
.ix { display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-size: 15.5px; line-height: var(--leading); }
.ix-leader { flex: 1; min-width: 28px; align-self: flex-end; margin-bottom: 0.34em;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-text) 45%, transparent); }
  /* the leader dots sit decoratively below the baseline run; the 45% mix keeps
     them quieter than the entries they join */
.ix-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; font-feature-settings: "pnum" 1; }
  /* index figures are page-number furniture, not display numerals — body-adjacent
     scale, proportional digits per the figure policy */
.ix-num.spot { color: var(--color-accent-700); } /* the one process-color figure
     the deck spends per page. At 17px this is small text, so the base cyan's
     3.7:1 large-text value does not reach — the 700 step measures 5.7:1 on
     the paper ground */

/* — feature columns (the deck's own column grammar: JUSTIFIED serif copy
   with real hyphenation, whitespace between columns — no rules, no cards;
   serif heads at body-adjacent scale) — */
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.5 * var(--leading)) clamp(28px, 4vw, 64px);
  margin-top: calc(var(--leading) - var(--half)); }
.features .cols { grid-template-columns: repeat(2, 1fr); }
.col h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0; text-box: trim-both cap alphabetic; }
.col p { font-size: 15.5px; line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3; /* the paper's own setting */
  text-box: trim-both cap alphabetic; }

/* — imagery split (review round 2 of the divergence, Barron's call: the
   photograph takes the system's showcase treatment — figure.cmyk with a
   .print wrapper, the four process plates run live by the compound filter
   the system ships in print-plates.js (inlined in the page's bundle). One
   swappable image. Round 3, also Barron: hover gathers the plates into
   register (the press driver in print-plates.js — the old :hover was a
   hard cut), the pointer leans the registration a breath as it roams,
   and the figure lets the sheet edges overhang (overflow below) instead
   of cropping them flat. Round 4, also Barron: no films-lift at the end
   of the gather — the driver purifies the plate inks on the same ease,
   so the converged merge IS the photograph and nothing swaps. .halftone stays the
   system's simpler screen for interface imagery, per
   foundations/image.html) — */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.015em;
  margin: 0; text-box: trim-both cap alphabetic; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch;
  text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  text-box: trim-both cap alphabetic; }
.split-figure { margin: 0; }
.split-figure.cmyk { overflow: visible; } /* divergence round 3 (Barron: "it
   crops the effect") — the rebuilt #sep-all clips each plate to its own
   sheet (print-plates.js), so nothing solid paints outside them and the
   misregistered sheet edges can overhang the box instead of being
   guillotined flat; the dot screen stays on the box, the films sticking
   out from under it unscreened */
.split-figure .print { aspect-ratio: 986 / 660; } /* the bundled color
   photograph's natural ratio pins the box, so a swapped image cover-crops
   into the same frame (cover framing is the component's own; width and
   slot sizing come with .cmyk .print in styles.css) */

/* — pull quote (the serif's TRUE ITALIC — the paper's voice for quotes,
   never a synthesized oblique; hangs at the deck's measured advances) — */
.quote { padding: calc(2.5 * var(--leading)) 0 calc(3.5 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-style: italic; font-weight: 400; /* the body weight —
     the serif's true italic is loaded at 400, never a synthesized oblique */
  font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.01em; max-width: 34ch; margin: 0;
  text-indent: -0.475em; /* hang the opening “ (the deck's measured advance in the italic) */
  text-box: trim-both cap alphabetic;
}
.quote figcaption { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); /* 5.8:1 — see .kicker */
  margin: calc(2 * var(--leading) - 1cap) 0 0; /* two grid units below the quote's
     last baseline — one reads as part of the quote block; the attribution needs air */
  text-indent: -1.045em; /* hang the leading em-dash + space (measured in the Regular) */
  text-box: trim-both cap alphabetic; }

@media (max-width: 720px) {
  /* the phone gutter (--edge bottoms out at 20px) is narrower than the hung
     marks' measured advances, so a hung “ or em-dash would press into or past
     the viewport edge — seat the quote flush below this width; the hang
     returns with the wider gutter */
  .quote blockquote, .quote figcaption { text-indent: 0; }
}

/* — close (paper stays paper: no bands, no fields — the close is a serif
   statement with the signup beneath, parted from the page by air alone) — */
.close { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.close h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.close .sub { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.signup { display: flex; gap: var(--space-3); align-items: stretch; max-width: 480px;
  margin-top: var(--leading); }
.signup .input { flex: 1; }
.signup .input, .signup .btn { min-height: 36px; } /* one control height floor; the row
  stretches, so whichever of the pair is taller sets both and they read as one row */
footer { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); /* 5.8:1 — see .kicker */ }


/* — the numbered reasons (a second column grammar, distinct from .features:
   figures lead each reason as page furniture, one spot-color plate each) — */
.whys { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(1.5 * var(--leading)) clamp(28px, 4vw, 64px);
  margin-top: calc(var(--leading) - var(--half)); }
.why-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15.5px; line-height: var(--leading); letter-spacing: 0.08em; font-feature-settings: "tnum" 1; display: block; }
.why h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0; text-box: trim-both cap alphabetic; }
.why p { font-size: 15.5px; line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  text-box: trim-both cap alphabetic; }

/* the meet-the-principal split runs figure-first (the headshot leads on the
   left), the mirror of the .split section above it */
.split.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split.rev .split-figure { grid-column: 1; grid-row: 1; }
.split.rev .split-copy { grid-column: 2; grid-row: 1; }
.split-copy .link { display: inline-block; font-size: 15.5px; line-height: var(--leading);
  margin-top: calc(var(--leading) - 1cap); color: var(--color-accent-700);
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.split-copy .link:hover { color: var(--color-accent-900); }
.close .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
.close .fine { font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0; }
footer .disc { max-width: 68ch; margin: 0; }
footer .disc + .disc { margin-top: var(--half); }
footer a { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
footer a:hover { color: var(--color-accent-700); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-900); }

/* — brand color placements (gold is the action fill per the brand guide; the
   navy accent stays the link and focus ink) — */
.btn-primary { background: var(--color-accent-2); color: var(--color-accent-800); }
.btn-primary:hover { background: var(--color-accent-2-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-2-700); color: var(--color-bg); }
.nav a.nav-brand { font-size: 18px; color: var(--color-accent); }
.nav a[aria-current='page'] { color: var(--color-accent-700); }
.nav-brand { color: var(--color-accent); }
.kicker { color: var(--color-slate); }
.why-num { color: var(--color-accent-2-700); }

/* — responsive collapse — */
@media (max-width: 1080px) {
  /* three justified columns fall under ~30ch here and the word spaces open
     into rivers; two columns hold the measure at ~40ch+ until the phone
     single column takes over. The odd third column spans the full row at
     the body measure — a wide bottom item, not an orphan beside a hole */
  .cols, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .col:last-child, .why:last-child { grid-column: 1 / -1; }
  .features .cols .col:last-child { grid-column: auto; }
  .col:last-child p, .why:last-child p { max-width: var(--measure); }
}

@media (max-width: 720px) {
  .hero { padding-top: calc(2.5 * var(--leading)); }
  .index { grid-template-columns: 1fr; }
  .cols, .why-grid { grid-template-columns: 1fr; }
  .split, .split.rev { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
  .split.rev .split-figure, .split.rev .split-copy { grid-column: 1; grid-row: auto; }
}

/* Review aid: the 28px rhythm drawn as hairlines — debug chrome, toggled by
   ?baselines or the B key, never part of the look. */
body[data-baselines] { position: relative; }
body[data-baselines]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--color-accent) 35%, transparent) 0 1px,
      transparent 1px var(--leading)),
    repeating-linear-gradient(to bottom,
      transparent 0 var(--half),
      color-mix(in srgb, var(--color-accent) 16%, transparent) var(--half) calc(var(--half) + 1px),
      transparent calc(var(--half) + 1px) var(--leading));
}

/* ——— shared page furniture for the interior pages ——— */
.page-head { padding: calc(3 * var(--leading)) 0 calc(1.5 * var(--leading)); }
.page-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.02em;
  margin: 0; margin-left: -0.035em; text-box: trim-both cap alphabetic; }
.page-title .line { display: block; }
.standfirst { font-size: 19px; line-height: calc(1.25 * var(--leading));
  max-width: var(--measure); margin: calc(1.25 * var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  text-box: trim-both cap alphabetic; }
.band { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 2.8vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em; margin: 0; text-box: trim-both cap alphabetic; }
.h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
  text-box: trim-both cap alphabetic; }
.body { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
  text-box: trim-both cap alphabetic; }
.body.just { text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3; }
.body + .body { margin-top: var(--leading); }
.small { font-size: 15.5px; line-height: var(--leading); color: var(--color-slate);
  max-width: var(--measure); margin: calc(var(--leading) - 1cap) 0 0; }
/* itemised copy: an em-dash lead in the slate ink, hung so the text block stays flush */
.list { list-style: none; padding: 0; margin: var(--half) 0 0; max-width: 62ch; }
.list li { font-size: 15.5px; line-height: var(--leading); margin-top: var(--half);
  padding-left: 1.35em; text-indent: -1.35em; }
.list li::before { content: "—"; color: var(--color-slate); margin-right: 0.45em; }
.list li b { font-weight: var(--font-heading-weight); }
/* credential groups: three columns of term/detail pairs, no rules */
.dlgrid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(1.5 * var(--leading)) clamp(28px, 4vw, 64px);
  margin-top: calc(var(--leading) - var(--half)); }
.dl { margin: 0; }
.dl dt { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15.5px; line-height: var(--leading); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-slate); }
.dl dd { margin: var(--half) 0 0; font-size: 15.5px; line-height: var(--leading); }
.dl dd i { font-style: italic; }
/* media placeholders — an embed keeps the sheet's paper ground, marked by its ratio */
.embed { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 900px;
  margin: var(--leading) 0 0; background: color-mix(in srgb, var(--color-slate) 12%, transparent);
  border-radius: var(--radius-sm); display: grid; place-items: center; }
.embed span { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-slate); text-align: center; padding: var(--space-3); }
.embed.map { aspect-ratio: 3 / 2; max-width: 560px; }
.caption { font-size: 13px; line-height: var(--leading); color: var(--color-slate);
  max-width: 56ch; margin: var(--half) 0 0; }
/* listings are the one place this system draws a box */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  gap: var(--leading); margin-top: var(--leading); }
.form { display: grid; gap: var(--space-3); max-width: 480px; margin-top: var(--leading); }
.form .btn { justify-self: start; }
textarea.input { min-height: calc(3 * var(--leading)); resize: vertical; font: inherit; }
.two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: start; }
@media (max-width: 1080px) { .dlgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .dlgrid { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
}

/* the plan comparison table — the DS table styling, allowed to scroll on
   narrow screens rather than crushing nine rows of figures */
.tablewrap { margin-top: var(--leading); overflow-x: auto; }
.tablewrap .table { min-width: 760px; table-layout: fixed; }
.tablewrap .table th[scope="row"] { font-weight: var(--font-heading-weight); width: 22%; }
.tablewrap .table th[scope="col"] + th[scope="col"] { width: 26%; }
.tablewrap .table td, .tablewrap .table th { font-size: 15.5px; line-height: var(--leading); vertical-align: top; }

/* the wordmark is now the supplied logo file: the overlapping MW monogram
   needs room to breathe, so it sits taller than a text mark would and the
   nav's own type styling is switched off inside it */
/* the supplied logo overlaps its wordmark on the monogram, so it is unreadable
   below ~120px wide. The boxed MW mark carries the identity at nav scale and
   the firm name is set in the site's own serif beside it. */
.nav a.nav-brand, a.nav-brand--solo {
  display: inline-flex; align-items: center; gap: 10px; padding: 0;
  text-decoration: none; color: var(--color-accent);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; letter-spacing: -0.01em; }
.nav a.nav-brand img, a.nav-brand--solo img { display: block; height: 26px; width: auto; }
a.nav-brand--solo { font-size: 21px; }
a.nav-brand--solo img { height: 30px; }
@media (max-width: 720px) {
  .nav a.nav-brand { font-size: 16px; gap: 8px; }
  .nav a.nav-brand img { height: 22px; }
}
/* the lock-up's constraint is WIDTH — its wordmark is horizontal and overlaps
   the monogram — so the footer gets the same mark + serif pairing as the nav,
   legible at small sizes by construction. */
footer .footer-brand { display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--leading); text-decoration: none; color: var(--color-accent);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; letter-spacing: -0.01em; }
footer .footer-brand img { display: block; height: 26px; width: auto; }
footer a.footer-brand:hover { color: var(--color-accent-700); }

/* photographs go in unfiltered: the system's four-plate separation was built
   around true cyan/magenta/yellow inks and fringes olive on a navy/gold
   palette. The frame keeps the crop deliberate — portrait ratio for portraits,
   a wide band for place and interior shots. */
.split-figure.plain { margin: 0; overflow: visible; }
.split-figure.plain .frame { width: 100%; overflow: hidden; background: color-mix(in srgb, var(--color-slate) 10%, transparent); }
.split-figure.plain .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }

/* photographs not yet supplied: the frame stands empty and says what belongs
   in it, rather than shipping a dead <img> that paints a broken-image box */
.frame-pending { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 120px; padding: var(--space-3);
  text-align: center; font-size: 13px; line-height: var(--leading);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-slate);
  background: color-mix(in srgb, var(--color-slate) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-slate) 25%, transparent); }

/* the story's opening line is a quotation now — it carries the section, so it
   sits a step up from body copy without becoming a display quote */
/* the quotation is a change of voice, so it gets a full leading unit of air
   after the heading and the serif's true italic — the system's own convention
   for quoted matter */
.split-copy .note--lead { font-size: 24px; line-height: calc(1.25 * var(--leading));
  letter-spacing: -0.01em; text-wrap: pretty; font-style: italic;
  margin-top: calc(1.75 * var(--leading) - 1cap); }
@media (max-width: 720px) { .split-copy .note--lead { font-size: 21px; } }

/* ——— the contribution-order handout, as a web page ——— */
/* the schematic is a 5:1 band, so on narrow screens it scrolls sideways at a
   legible size rather than shrinking to nothing */
.plumb-scroll { overflow-x: auto; margin: var(--leading) 0 0; }
.plumb-scroll svg { display: block; width: 100%; min-width: 900px; height: auto; }
.plumb-rows { margin-top: var(--leading); border-top: 3px solid var(--color-accent); }
.plumb-r { display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--half) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-slate) 30%, transparent); }
.plumb-r:last-child { border-bottom: 0; }
.plumb-r .bg { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent-2);
  color: var(--color-accent-800); font-size: 15.5px; font-weight: 600; }
.plumb-r .t { flex: 0 0 30%; font-size: 17px; font-weight: 600; line-height: var(--leading);
  color: var(--color-accent); }
.plumb-r .c { flex: 1; font-size: 15.5px; line-height: var(--leading); }
.plumb-r .f { flex: 0 0 auto; font-size: 15.5px; font-weight: 600; line-height: var(--leading);
  color: var(--color-accent-2-700); text-align: right; max-width: 32%; }
.reftable { width: 100%; border-collapse: collapse; margin-top: var(--leading); }
.reftable th, .reftable td { text-align: left; vertical-align: top; padding: var(--half) var(--space-3) var(--half) 0;
  line-height: var(--leading); border-bottom: 1px solid color-mix(in srgb, var(--color-slate) 28%, transparent); }
.reftable thead th { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-slate); font-weight: 600; border-bottom: 3px solid var(--color-accent); }
.reftable tbody th { font-size: 17px; font-weight: 600; color: var(--color-accent-2-700); white-space: nowrap; width: 1%; }
.reftable td { font-size: 15.5px; }
.reftable td.sn { font-size: 13px; color: var(--color-slate); white-space: nowrap; width: 1%; text-align: right; padding-right: 0; }
.srclist { margin-top: calc(1.5 * var(--leading)); border-top: 3px solid var(--color-accent-2); padding-top: var(--leading); }
.srcrow { display: flex; gap: var(--space-3); margin: 0 0 var(--half); font-size: 15.5px; line-height: var(--leading); }
.srcrow .sb { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent);
  color: var(--color-bg); font-size: 13px; font-weight: 600; }
.srcrow a { word-break: break-all; }
.srcnote { font-size: 13px; line-height: var(--leading); color: var(--color-slate);
  margin: var(--leading) 0 0; padding-top: var(--half);
  border-top: 1px solid color-mix(in srgb, var(--color-slate) 30%, transparent); }
.updated { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-slate);
  margin: var(--leading) 0 0; }
@media (max-width: 720px) {
  .plumb-r { flex-wrap: wrap; }
  .plumb-r .t, .plumb-r .c, .plumb-r .f { flex: 1 1 100%; text-align: left; max-width: none; }
}

/* — hero as an attributed quote — */
.hero .display.quote { font-style: italic; text-indent: -0.42em; max-width: 30ch;
  padding-top: var(--leading); padding-bottom: 0; }
.hero .display.quote .line { text-indent: 0; }
.hero .attrib { font-size: 17px; line-height: var(--leading); letter-spacing: 0.02em;
  margin: 32px 0 0; color: var(--color-accent-700); }
.hero .attrib b { font-weight: var(--font-heading-weight); }
.hero .attrib span { color: var(--color-slate); }
@media (max-width: 720px) { .hero .display.quote { text-indent: 0; } }

/* the standfirst introduces the columns, so it sits a unit clear of them */
.features .standfirst { margin-bottom: var(--leading); }

#why .why-num { display: none; }
#why .why h3 { margin-top: 0; }

/* Learn guide cards: only one has a figure now, so let each take its own height */
.cards { align-items: start; }
.card:not(:has(.split-figure)) .card-body { flex-grow: 0; }

/* a short image beside a long form: centre it so the column reads deliberately */
.split-figure.self-center { align-self: center; }

/* Learn with Dr. G — homepage library cards: real document covers as paper sheets */
.library { padding: var(--space-6) 0; border-top: 1px solid var(--color-rule, #d8d2c6); }
.lib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-3); }
.lib-card { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; }
.lib-cover { display: block; border: 1px solid color-mix(in srgb, var(--color-slate) 35%, transparent); box-shadow: 0 2px 10px rgba(17, 63, 103, .12); background: #fff; overflow: hidden; aspect-ratio: 5 / 4; }
.lib-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .25s ease; }
.lib-card:hover .lib-cover img { transform: scale(1.02); }
.lib-meta { display: flex; flex-direction: column; gap: 4px; }
.lib-meta b { font-size: 18px; line-height: 1.3; }
.lib-meta > span { font-size: 14.5px; line-height: var(--leading); color: var(--color-ink-soft, #4a4a4a); }
.lib-tag { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gold, #C9A227); margin-left: 6px; vertical-align: 2px; }
.lib-link { font-size: 14px; color: var(--color-navy, #113F67); }
.lib-card:hover .lib-link { text-decoration: underline; }
@media (max-width: 760px) { .lib-grid { grid-template-columns: 1fr; } }

/* Learn/Türkçe cover bands: two columns on desktop, stacked on mobile */
.cov-band { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--space-4); align-items: start; margin-top: var(--leading); }
@media (max-width: 760px) {
  .cov-band { grid-template-columns: 1fr; }
  .cov-band .split-figure { max-width: 300px !important; }
}