/* ============================================================
   DESIGN 5 — "HEXAHORIZON" · printed-newspaper front page
   Reference: ft.com, pushed toward the printed FT rather than
   the website. The web edition sets body copy in a grotesque;
   the paper sets everything in serif, justified, in narrow
   columns, with drop caps, halftone pictures, double rules and
   folio furniture. This follows the paper.

   BRAND-BRIEF.md is deliberately NOT followed here (per request):
   FT pink newsprint, teal/claret accents, news serif + grotesque
   rather than Horizon Green / Brass Gold / Cormorant + Jost.

   Honesty note: every headline describes Hexahorizon itself. The
   utility strip and footer both state this is a company
   publication, not a news service.
   ============================================================ */

:root{
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",system-ui,Helvetica,Arial,sans-serif;
  --gut:1.15rem;
}

/* --- Day edition (default) --- */
:root,
:root[data-theme="light"]{
  --paper:#FBEFE2;          /* newsprint, a shade warmer than ft.com */
  --paper-2:#F5E7D9;
  --card:#FFFAF4;
  --ink:#22201E;            /* warm near-black, not pure */
  --ink-2:#3D3936;
  --ink-3:#6B635C;
  --rule:#B9AB9D;
  --rule-2:#D8C9B9;
  --teal:#0A5F68;
  --claret:#8C0E38;
  --black:#1A1817;
  --black-ink:#F2E5DA;
  --ph-a:#BFB1A3; --ph-b:#7A6E62;
  --on-accent:#FFFFFF;
  --strip-muted:#9E948C; --strip-rule:#3A3330; --strip-up:#6FC38C;
  --grain:.055;
}

/* --- Night edition: Horizon Green ground, Brass Gold accents ---
   The only place design5 touches the brand palette. Gold carries the
   accents that claret carries by day; pale gold carries the links. */
:root[data-theme="dark"]{
  --paper:#14331F;          /* Horizon Green */
  --paper-2:#193C26;
  --card:#1B4029;
  --ink:#FAF8F3;            /* Ivory */
  --ink-2:#DDE4DD;
  --ink-3:#A6B2A9;
  --rule:#2F4E39;
  --rule-2:#26412F;
  --teal:#E8CE7A;           /* pale gold — links        8.9:1 on green */
  --claret:#D8B234;         /* Brass Gold — accents     6.8:1 on green */
  --on-accent:#14331F;      /* text on a gold ground */
  --black:#0C2013;          /* deeper green for strips  */
  --black-ink:#FAF8F3;
  --strip-muted:#93A697; --strip-rule:#25402E; --strip-up:#D8B234;
  --ph-a:#4C6552; --ph-b:#25392B;
  --grain:.035;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --paper:#14331F; --paper-2:#193C26; --card:#1B4029;
    --ink:#FAF8F3; --ink-2:#DDE4DD; --ink-3:#A6B2A9;
    --rule:#2F4E39; --rule-2:#26412F;
    --teal:#E8CE7A; --claret:#D8B234; --on-accent:#14331F;
    --black:#0C2013; --black-ink:#FAF8F3;
    --strip-muted:#93A697; --strip-rule:#25402E; --strip-up:#D8B234;
    --ph-a:#4C6552; --ph-b:#25392B; --grain:.035;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:clamp(15px,0.86rem + 0.22vw,18px)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-serif);font-size:16px;line-height:1.44;
  font-variant-numeric:oldstyle-nums;text-rendering:optimizeLegibility}

/* Paper grain. Fixed overlay so every band picks it up, including the
   dark ones. pointer-events:none keeps it out of the way of clicks. */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){body::after{mix-blend-mode:screen}}
:root[data-theme="dark"] body::after{mix-blend-mode:screen}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 .7em}
h1,h2,h3,h4{margin:0;font-family:var(--font-serif);font-weight:700;
  line-height:1.08;letter-spacing:-.014em}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--claret);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;z-index:200;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(.85rem,2vw,1.5rem)}

/* ---------- Utility strip ---------- */
.topbar{background:var(--black);color:var(--black-ink);font-size:.66rem;
  font-family:var(--font-sans)}
.topbar .in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.38rem;flex-wrap:wrap}
.ticker{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:baseline;min-width:0}
.ticker b{font-weight:600;letter-spacing:.05em}
.ticker span{color:var(--strip-muted)}
.ticker .up{color:var(--strip-up)}
.topbar .util{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap}
.topbar .util a{color:var(--strip-muted)}
.topbar .util a:hover{color:var(--black-ink)}
.topbar .stamp{color:var(--strip-muted);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Masthead: nameplate with flanking furniture ---------- */
.masthead{padding-block:.9rem .55rem;
  border-bottom:4px double var(--ink)}
.masthead .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.mhbox{font-family:var(--font-sans);font-size:.6rem;line-height:1.7;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.mhbox b{display:block;color:var(--ink);font-weight:700;letter-spacing:.14em}
.mhbox.r{text-align:right}
.mhtitle{font-family:var(--font-serif);font-weight:700;text-align:center;
  font-size:clamp(2rem,7.6vw,5rem);letter-spacing:-.02em;line-height:.92;
  white-space:nowrap;font-variant-numeric:lining-nums}
.mhtitle a{display:block}
.mhrule{display:flex;align-items:center;gap:.8rem;margin-top:.45rem}
.mhrule::before,.mhrule::after{content:"";flex:1;height:1px;background:var(--ink)}
.mhsub{font-family:var(--font-sans);font-size:.58rem;text-transform:uppercase;
  letter-spacing:.24em;color:var(--ink-2);white-space:nowrap}
.pill{font-family:var(--font-sans);border:1px solid var(--ink);padding:.28rem .65rem;
  font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.pill.solid{background:var(--claret);border-color:var(--claret);color:var(--on-accent)}
.themetoggle{display:inline-flex;align-items:center;gap:.35rem;background:transparent;
  border:1px solid var(--rule);padding:.26rem .55rem;cursor:pointer;
  font-family:var(--font-sans);font-size:.62rem;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.1em}
.themetoggle:hover{color:var(--ink);border-color:var(--ink)}
.themetoggle svg{display:block;flex:none}
/* Mounted in the black strip, so it takes the strip's colours. */
.topbar .themetoggle{color:var(--black-ink);border-color:var(--strip-rule);padding:.28rem .6rem}
.topbar .themetoggle:hover{color:var(--black-ink);border-color:var(--black-ink);background:rgba(255,255,255,.1)}
.topbar .themetoggle svg{opacity:.95}

/* ---------- Section belt ---------- */
.secnav{border-bottom:1px solid var(--ink);background:var(--paper);
  position:sticky;top:0;z-index:80}
.secnav .in{display:flex;gap:1.05rem;overflow-x:auto;padding-block:.45rem;align-items:center;
  scrollbar-width:none;-ms-overflow-style:none}
.secnav .in::-webkit-scrollbar{display:none}
.secnav a{font-family:var(--font-sans);font-size:.68rem;font-weight:600;white-space:nowrap;
  color:var(--ink);text-transform:uppercase;letter-spacing:.1em;
  padding-bottom:.12rem;border-bottom:2px solid transparent}
.secnav a:hover{color:var(--claret)}
.secnav a.here{border-bottom-color:var(--claret)}
.navlogo{display:flex;align-items:center;flex:none;padding-right:1rem;margin-right:.15rem;
  border-right:1px solid var(--rule);border-bottom:0;position:sticky;left:0;
  background:var(--paper);z-index:1}
.navlogo img{width:clamp(92px,10.5vw,118px);height:auto}
.navlogo:hover{border-bottom:0}
.logo-on-dark{display:none}
:root[data-theme="dark"] .logo-on-light{display:none}
:root[data-theme="dark"] .logo-on-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .logo-on-light{display:none}
  :root:not([data-theme]) .logo-on-dark{display:block}
}

/* ---------- Editorial primitives ---------- */
.kicker{font-family:var(--font-sans);font-size:.6rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--claret);display:block;margin-bottom:.28rem}
.kicker.teal{color:var(--teal)}
.byline{font-family:var(--font-sans);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);margin:.45rem 0;
  padding-block:.28rem;border-block:1px solid var(--rule-2)}
.standfirst{font-size:.92rem;color:var(--ink-2);line-height:1.42;margin-top:.4rem;font-style:italic}
.tag{display:inline-block;font-family:var(--font-sans);font-size:.56rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--claret);
  color:var(--claret);padding:.08rem .3rem;margin-top:.45rem}
.cap{font-size:.72rem;font-style:italic;color:var(--ink-3);margin-top:.3rem;line-height:1.35;
  padding-top:.28rem;border-top:1px solid var(--rule-2)}
.jump{font-family:var(--font-sans);font-size:.62rem;font-style:normal;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--claret);margin-top:.5rem;display:block}
.jump::after{content:" ▸"}

/* Body text set as the paper sets it: serif, justified, hyphenated. */
.article{font-size:.9rem;line-height:1.44;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.article p{margin:0 0 .55em}
.cols2{column-count:2;column-gap:1.15rem;column-rule:1px solid var(--rule-2)}
.cols3{column-count:3;column-gap:1.15rem;column-rule:1px solid var(--rule-2)}
.dropcap::first-letter{float:left;font-family:var(--font-serif);font-weight:700;
  font-size:3.5em;line-height:.78;padding:.04em .07em 0 0;color:var(--ink)}

/* Centred small-caps section label, ruled both sides — the paper's device. */
.rulehead{display:flex;align-items:center;gap:.85rem;margin:0 0 .8rem}
.rulehead::before,.rulehead::after{content:"";flex:1;height:3px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.rulehead span{font-family:var(--font-sans);font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--ink)}
.blockhead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-top:3px solid var(--ink);padding-top:.4rem;margin-bottom:.8rem;flex-wrap:wrap}
.blockhead h2{font-family:var(--font-sans);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em}
.blockhead a{font-family:var(--font-sans);font-size:.62rem;color:var(--claret);
  font-weight:600;text-transform:uppercase;letter-spacing:.08em}

/* ---------- Halftone plates (stand-ins for photography) ---------- */
.ph{position:relative;overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(140deg,var(--ph-a),var(--ph-b));
  filter:grayscale(.9) contrast(1.12);border:1px solid var(--rule-2)}
.ph::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(0,0,0,.55) 1.05px,transparent 1.15px);
  background-size:3.5px 3.5px;opacity:.85}
.ph::after{content:attr(data-n);position:absolute;right:.45rem;bottom:.2rem;
  font-family:var(--font-serif);font-weight:700;font-size:1.8rem;
  color:rgba(255,255,255,.42);line-height:1}
.ph.tall{aspect-ratio:4/5}
.ph.wide{aspect-ratio:2/1}
.ph.sq{aspect-ratio:1/1}
.ph.v2{--ph-a:#B3A597;--ph-b:#645A50}
.ph.v3{--ph-a:#A8AFA5;--ph-b:#59615A}
.ph.v4{--ph-a:#BFB09B;--ph-b:#72634E}
.ph.v5{--ph-a:#ABA3AF;--ph-b:#5C5661}
.ph.v6{--ph-a:#9CACB0;--ph-b:#536063}

/* ---------- Inside index box ---------- */
.inside{border:1px solid var(--ink);border-top:3px solid var(--ink);
  padding:.6rem .75rem;margin-bottom:.85rem;background:var(--card)}
.inside h4{font-family:var(--font-sans);font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;margin-bottom:.4rem;color:var(--ink-3)}
.inside li{display:flex;justify-content:space-between;gap:.6rem;font-size:.78rem;
  padding-block:.16rem;border-bottom:1px dotted var(--rule-2)}
.inside li:last-child{border-bottom:0}
.inside .pg{font-family:var(--font-sans);font-size:.62rem;color:var(--ink-3);
  letter-spacing:.06em;white-space:nowrap}

/* ---------- At-a-glance table (the paper's market box) ---------- */
.glance{border:1px solid var(--ink);border-top:3px solid var(--ink);background:var(--card)}
.glance h4{font-family:var(--font-sans);font-size:.58rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;padding:.45rem .7rem;border-bottom:1px solid var(--rule);color:var(--ink-3)}
.glance table{width:100%;border-collapse:collapse;font-size:.76rem}
.glance th,.glance td{text-align:left;padding:.3rem .7rem;border-bottom:1px dotted var(--rule-2)}
.glance th{font-family:var(--font-sans);font-size:.56rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3)}
.glance td:last-child{text-align:right;font-family:var(--font-sans);font-size:.66rem;color:var(--ink-2)}
.glance tr:last-child td{border-bottom:0}

/* ---------- Lead block ---------- */
.lead{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:var(--gut);
  padding-block:.9rem;border-bottom:3px solid var(--ink)}
.lead > * + *{border-left:1px solid var(--rule);padding-left:var(--gut)}
.lead h1{font-size:clamp(1.6rem,2.9vw,2.5rem)}
.lead .story + .story{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--rule-2)}
.lead .centre h2{font-size:clamp(1.2rem,1.8vw,1.6rem);margin-top:.5rem}
.lead .rail h3{font-size:1rem}

/* ---------- Story rows ---------- */
.row{display:grid;gap:var(--gut);padding-block:.95rem;border-bottom:1px solid var(--ink)}
.row-5{grid-template-columns:repeat(5,1fr)}
.row-4{grid-template-columns:repeat(4,1fr)}
.row-3{grid-template-columns:repeat(3,1fr)}
.row > .col + .col{border-left:1px solid var(--rule-2);padding-left:var(--gut)}
.col h3{font-size:.98rem;margin-top:.42rem}
.col h3.big{font-size:1.14rem}
.col p{font-size:.8rem;color:var(--ink-2);margin:.28rem 0 0;line-height:1.4}

/* ---------- Bands ---------- */
.spotlight{background:var(--paper-2);border-block:1px solid var(--ink);padding-block:1.1rem}
.spotgrid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:var(--gut);align-items:start}
.spotgrid > * + *{border-left:1px solid var(--rule-2);padding-left:var(--gut)}
.spotgrid h2{font-size:clamp(1.25rem,2vw,1.8rem)}

.withrail{display:grid;grid-template-columns:1fr 15rem;gap:calc(var(--gut) * 1.3);
  padding-block:1rem;border-bottom:1px solid var(--ink)}
.rail{border-left:1px solid var(--rule);padding-left:var(--gut)}
.rail h4{font-family:var(--font-sans);font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;border-top:3px solid var(--ink);padding-top:.4rem;margin-bottom:.6rem}
.mostread li{display:grid;grid-template-columns:1.5rem 1fr;gap:.45rem;
  padding-block:.5rem;border-bottom:1px dotted var(--rule-2);font-size:.8rem;line-height:1.32}
.mostread li:last-child{border-bottom:0}
.mostread .n{font-family:var(--font-serif);font-weight:700;font-size:1.1rem;
  color:var(--claret);line-height:1;font-variant-numeric:lining-nums}
.raillist li{padding-block:.42rem;border-bottom:1px dotted var(--rule-2);font-size:.8rem;line-height:1.35}
.raillist li:last-child{border-bottom:0}
.raillist a:hover{color:var(--claret)}

.opinion{background:var(--card);border-block:1px solid var(--ink);padding-block:1.1rem}
.opgrid{display:grid;grid-template-columns:repeat(3,1fr) 15rem;gap:var(--gut)}
.opgrid > * + *{border-left:1px solid var(--rule-2);padding-left:var(--gut)}
.opcard .mark{width:58px;height:58px;border-radius:50%;overflow:hidden;
  background:linear-gradient(140deg,var(--ph-a),var(--ph-b));display:grid;place-items:center;
  margin-bottom:.5rem;filter:grayscale(.9)}
.opcard .mark img{width:74%;height:auto}
.opcard h3{font-size:1rem;font-style:italic}
.oplist li{padding-block:.45rem;border-bottom:1px dotted var(--rule-2);font-size:.8rem;line-height:1.32}

.secblock{padding-block:1rem;border-bottom:1px solid var(--ink)}
.secbody{display:grid;grid-template-columns:1fr 15rem;gap:calc(var(--gut) * 1.3)}
.feature{position:relative;display:block}
.feature .ph{aspect-ratio:21/8}
.feature .over{position:absolute;left:.9rem;bottom:.9rem;right:.9rem;color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.7)}
.feature .over h3{font-size:clamp(1.15rem,2.1vw,1.8rem);color:#fff}
.substories{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);margin-top:.85rem;
  border-top:1px solid var(--rule);padding-top:.75rem}
.substories > * + *{border-left:1px solid var(--rule-2);padding-left:var(--gut)}
.substories h4{font-family:var(--font-serif);font-size:.9rem;font-weight:700;line-height:1.18}

.videoband{background:var(--black);color:var(--black-ink);padding-block:1.1rem}
.videoband .blockhead{border-top-color:var(--black-ink)}
.videoband .blockhead h2{color:var(--black-ink)}
.videoband .row{border-bottom:0}
.videoband .col + .col{border-left-color:var(--strip-rule)}
.videoband .col h3{color:var(--black-ink);font-size:.92rem}
.videoband .kicker{color:var(--strip-up)}
.arts{background:var(--paper-2);border-block:1px solid var(--ink);padding-block:1.1rem}

.explore{padding-block:1.1rem;border-bottom:3px solid var(--ink)}
.exgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.exgrid > * + *{border-left:1px solid var(--rule-2);padding-left:var(--gut)}
.exgrid h4{font-family:var(--font-sans);font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;margin-bottom:.5rem;color:var(--ink-3)}
.exgrid li{padding-block:.24rem;font-size:.8rem}

/* ---------- Folio ---------- */
.folio{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-sans);font-size:.58rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-3);padding-block:.6rem;border-top:1px solid var(--ink)}

/* ---------- Footer ---------- */
.foot{background:var(--black);color:var(--black-ink);padding-block:1.8rem 1.3rem;
  font-family:var(--font-sans)}
.footgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem}
.foot h4{font-size:.66rem;font-weight:700;margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.12em}
.foot li{padding-block:.2rem;font-size:.74rem}
.foot a{color:var(--strip-muted)}
.foot a:hover{color:var(--black-ink)}
.footnote{border-top:1px solid var(--strip-rule);margin-top:1.4rem;padding-top:.9rem;
  font-size:.7rem;color:var(--strip-muted);line-height:1.6}
.footnote strong{color:var(--black-ink)}

/* ---------- Inner-page scaffolding ---------- */
.crumb{font-family:var(--font-sans);padding-block:.65rem;font-size:.62rem;color:var(--ink-3);
  border-bottom:1px solid var(--rule);text-transform:uppercase;letter-spacing:.12em}
.crumb a{color:var(--claret);font-weight:600}
.pagehead{padding-block:1.2rem .9rem;border-bottom:4px double var(--ink)}
.pagehead .beat{display:block;font-family:var(--font-sans);font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--claret);margin-bottom:.5rem}
.pagehead h1{font-size:clamp(2rem,4.6vw,3.4rem);max-width:18ch}
.pagehead .plain{font-size:clamp(1rem,1.5vw,1.2rem);font-style:italic;line-height:1.4;
  color:var(--ink-2);margin:.7rem 0 0;max-width:52ch}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 16.5rem;gap:calc(var(--gut) * 1.5);
  padding-block:1.2rem}
.prose{max-width:none}
.prose > p,.prose > ul{font-size:.95rem;line-height:1.5}
.prose h2{font-size:1.4rem;margin:1.8rem 0 .5rem;padding-top:.5rem;border-top:1px solid var(--rule)}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-size:1.06rem;margin:1.25rem 0 .3rem}
.prose ul{list-style:none;padding-left:0;margin-bottom:.9em}
.prose ul li{position:relative;padding-left:1rem;margin-bottom:.32em}
.prose ul li::before{content:"";position:absolute;left:0;top:.66em;width:.55rem;height:1px;background:var(--claret)}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:.15em}
.prose strong{font-weight:700}
.sidebar{border-left:1px solid var(--rule);padding-left:var(--gut);align-self:start;
  position:sticky;top:3rem}
.sidebar h4{font-family:var(--font-sans);font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;border-top:3px solid var(--ink);padding-top:.4rem;margin-bottom:.6rem}
.sidebar dl{margin:0 0 1rem}
.sidebar dt{font-family:var(--font-sans);font-size:.58rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);margin-bottom:.08rem}
.sidebar dd{margin:0 0 .7rem;font-size:.82rem;line-height:1.4}
.sidebar a{color:var(--teal)}
.sidebar li{font-size:.82rem;padding-block:.18rem}
.tbc{font-style:italic;color:var(--claret)}
.muted{color:var(--ink-3)}
.mono{font-family:var(--font-sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}

.short{background:var(--card);border:1px solid var(--ink);border-top:3px solid var(--claret);
  padding:.9rem 1.05rem;margin:0 0 1.4rem}
.short h2{font-family:var(--font-sans)!important;font-size:.6rem!important;text-transform:uppercase;
  letter-spacing:.18em;color:var(--ink-3);margin:0 0 .55rem!important;font-weight:700;
  border-top:0!important;padding-top:0!important}
.short li{position:relative;padding-left:1rem;font-size:.88rem;margin-bottom:.35rem;line-height:1.4}
.short li::before{content:"■";position:absolute;left:0;color:var(--claret);font-size:.5rem;top:.42em}
.short li:last-child{margin-bottom:0}

.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;gap:.7rem;
  padding-block:.7rem;border-top:1px dotted var(--rule-2)}
.steps li:last-child{border-bottom:1px dotted var(--rule-2)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-serif);
  font-weight:700;font-size:1.05rem;color:var(--claret);line-height:1.2;font-variant-numeric:lining-nums}
.steps b{display:block;font-size:.98rem;font-weight:700;margin-bottom:.1rem}
.steps span{font-size:.85rem;color:var(--ink-2)}

.dont{background:var(--card);border:1px solid var(--ink);border-left:3px solid var(--claret);
  padding:.85rem 1.05rem;margin:1.2rem 0}
.dont h3{font-family:var(--font-sans)!important;font-size:.6rem!important;text-transform:uppercase;
  letter-spacing:.18em;color:var(--claret);margin:0 0 .5rem!important;font-weight:700}
.dont li{position:relative;padding-left:1rem;font-size:.85rem;margin-bottom:.28rem}
.dont li::before{content:"×";position:absolute;left:0;color:var(--claret);font-weight:700}
.dont li:last-child{margin-bottom:0}

.qa .q{padding-block:.7rem;border-top:1px dotted var(--rule-2)}
.qa .q:last-child{border-bottom:1px dotted var(--rule-2)}
.qa h3{font-size:.98rem;margin:0 0 .18rem}
.qa p{margin:0;font-size:.85rem;color:var(--ink-2)}
.qa a{color:var(--teal)}

.status{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  border-top:3px solid var(--ink);border-bottom:1px solid var(--rule);
  padding-block:.6rem;margin:1.4rem 0 .8rem}
.status .lbl{font-family:var(--font-sans);font-size:.58rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-3)}
.status .val{font-size:1rem;font-weight:700;font-style:italic}

.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));
  border-top:1px solid var(--ink)}
.dcard{display:flex;flex-direction:column;padding:.9rem var(--gut) 1.05rem;
  border-bottom:1px solid var(--rule);border-left:1px solid var(--rule-2)}
.dcard:hover{background:var(--card)}
.dcard .beat{display:block;font-family:var(--font-sans);font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--claret);margin-bottom:.3rem}
.dcard h3{font-size:1.1rem;margin-bottom:.22rem}
.dcard .for{font-family:var(--font-sans);font-size:.66rem;font-weight:600;color:var(--ink-3);
  margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.06em}
.dcard p{font-size:.83rem;margin-bottom:.6rem;color:var(--ink-2);line-height:1.4}
.dcard .more{margin-top:auto;font-family:var(--font-sans);font-size:.64rem;font-weight:700;
  color:var(--claret);text-transform:uppercase;letter-spacing:.1em}
.dcard .more::after{content:" ▸"}

.btn{display:inline-block;background:var(--claret);color:var(--on-accent);border:1px solid var(--claret);
  padding:.5rem 1.15rem;font-family:var(--font-sans);font-size:.7rem;font-weight:700;
  cursor:pointer;text-transform:uppercase;letter-spacing:.1em}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.fields{display:grid;gap:.85rem;max-width:31rem}
.field label{display:block;font-family:var(--font-sans);font-size:.66rem;font-weight:700;
  margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.08em}
.field .hint{display:block;font-family:var(--font-serif);font-size:.8rem;font-style:italic;
  color:var(--ink-3);margin-bottom:.25rem;text-transform:none;letter-spacing:0;font-weight:400}
.field input,.field select,.field textarea{width:100%;background:var(--card);
  border:1px solid var(--rule);padding:.45rem .55rem;font-family:var(--font-serif);
  font-size:.9rem;color:var(--ink)}
.field select option{background:var(--card);color:var(--ink)}
.field textarea{resize:vertical;min-height:5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--claret)}
.note{font-size:.78rem;font-style:italic;color:var(--ink-3);margin-top:.65rem;max-width:44ch}
.cta{background:var(--card);border-block:3px solid var(--ink);padding-block:1.3rem;text-align:center}
.cta h2{font-size:clamp(1.3rem,2.6vw,2rem);max-width:24ch;margin-inline:auto}
.cta p{font-size:.88rem;font-style:italic;color:var(--ink-2);max-width:52ch;margin:.5rem auto .9rem}
.section{padding-block:1rem;border-bottom:1px solid var(--ink)}
.sectionhead{margin-bottom:.85rem}
.sectionhead h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-top:.25rem}
.sectionhead p{font-size:.86rem;color:var(--ink-2);max-width:56ch;margin:.4rem 0 0}

/* ---------- Directors ----------
   Real photographs, so no halftone screen over them. Cropped to one common
   ratio, hairline-framed, with a ruled caption underneath — the way a paper
   runs a portrait. */
.directors{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut);
  margin:.9rem 0 1.1rem;padding:0}
/* Single director: portrait at a fixed width with the biography alongside. */
.directors.one{grid-template-columns:240px 1fr;gap:clamp(1.25rem,3vw,2.25rem);align-items:start}
.dirbio{border-left:1px solid var(--rule);padding-left:clamp(1rem,2vw,1.6rem)}
.dirbio p{font-size:.95rem;line-height:1.6;color:var(--ink-2);max-width:58ch}
.dirbio p:first-child{font-size:1.02rem;color:var(--ink)}
.dirbio a{color:var(--teal);text-decoration:underline;text-underline-offset:.15em}
@media (max-width:700px){
  .directors.one{grid-template-columns:1fr}
  .dirbio{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:.85rem}
}
.director img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;
  border:1px solid var(--rule);filter:contrast(1.03) saturate(.94)}
.director figcaption{margin-top:.45rem;padding-top:.4rem;border-top:1px solid var(--ink)}
.director b{display:block;font-family:var(--font-serif);font-size:1.05rem;
  font-weight:700;line-height:1.2}
.director .role{display:block;font-family:var(--font-sans);font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--claret);margin-top:.25rem}
.director .din{display:block;font-family:var(--font-sans);font-size:.58rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-top:.18rem}
/* ---------- Front-page divisions grid ----------
   Ported from the supplied section mockup. Tokens remapped onto design5:
   the mockup's --gold becomes --claret, which is claret by day and Brass
   Gold at night, so the accent stays right in both editions. The plates
   are inline SVG drawn in currentColor, so they ink themselves from
   --ink and need no light/dark variants. */
.divisions{padding-block:1.1rem 1.5rem;border-bottom:1px solid var(--ink)}
.divhead{max-width:54ch}
.divhead h2{font-size:clamp(1.55rem,3.1vw,2.5rem);line-height:1.06}
.divhead p{font-size:.95rem;color:var(--ink-2);margin:.55rem 0 0}
.divgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-left:1px solid var(--rule);border-top:1px solid var(--rule);margin-top:1.2rem}

.div-card{position:relative;background:var(--card);cursor:pointer;outline:none;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),
             background .3s ease}
/* Hidden start state only when JS is present to reveal them again. */
.js .div-card{opacity:0;transform:translateY(26px)}
.js .div-card.in{opacity:1;transform:none}
/* Gold rule wipes in from the left on hover, focus or open. */
.div-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--claret);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.div-card:hover::after,.div-card:focus-visible::after,.div-card.open::after{transform:scaleX(1)}
.div-card:hover,.div-card:focus-visible{background:var(--paper-2)}
.div-card:focus-visible{outline:2px solid var(--claret);outline-offset:-2px}

.divisions .plate{aspect-ratio:600/350;overflow:hidden;border-bottom:1px solid var(--rule);
  color:var(--ink);opacity:.82;
  transition:opacity .4s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.divisions .plate svg{display:block;width:100%;height:100%}
.div-card:hover .plate,.div-card:focus-visible .plate{opacity:1;transform:scale(1.03)}

.card-body{padding:1.05rem 1.15rem 1.3rem;position:relative}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.sec{font-family:var(--font-sans);font-size:.56rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.state{font-family:var(--font-sans);font-size:.56rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--claret);border:1px solid currentColor;
  padding:.16rem .5rem;white-space:nowrap}
.card-body h3{font-size:1.4rem;margin:.5rem 0 .35rem;line-height:1.14}
.card-body .stand{color:var(--ink-2);font-size:.94rem;font-style:normal;margin:0;
  padding-right:4.5rem}

.brief{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease,margin .45s ease}
.div-card.open .brief{max-height:360px;opacity:1;margin-top:.9rem}
.brief ul{margin:0 0 .75rem;padding:0;list-style:none;border-top:1px solid var(--rule)}
.brief li{font-family:var(--font-sans);font-size:.78rem;letter-spacing:.03em;
  padding:.45rem 0;border-bottom:1px solid var(--rule-2);color:var(--ink);margin:0}
.brief li::before{content:none}
.caveat{font-size:.87rem;color:var(--ink-2);font-style:italic;margin:0 0 .85rem}
.go{font-family:var(--font-sans);font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--claret);border-bottom:1px solid currentColor;
  padding-bottom:2px}
.toggle{position:absolute;right:1.15rem;bottom:1.3rem;background:none;border:0;cursor:pointer;
  font-family:var(--font-sans);font-size:.58rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:.45rem;padding:0}
.toggle i{width:9px;height:9px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .35s ease}
.div-card.open .toggle i{transform:rotate(-135deg) translate(-3px,-3px)}
.div-card.open .toggle{color:var(--claret)}

@media (max-width:600px){
  .card-body .stand{padding-right:0}
  .toggle{position:static;margin-top:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .js .div-card{opacity:1;transform:none}
  .div-card::after{transform:scaleX(1)}
}
/* ---------- Division brands ----------
   Two of the six now trade under their own names. Both marks are built
   inside the parent system, so the job here is to identify them, not to
   separate them: the mark, the trading name, and the endorsement line
   "A Hexahorizon company" always together. */

/* On a card: monogram beside the trading name. */
.brandline{display:flex;align-items:flex-start;gap:.55rem;margin:.5rem 0 .15rem}
.brandline img{margin-top:.12em}   /* optical align to the cap height of line one */
/* 32px is the brand spec's minimum screen size for a monogram. */
.brandline img{width:32px;height:32px;flex:none}
.brandline h3{margin:0}
.fn{font-family:var(--font-sans);font-size:.6rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--ink-3);margin:0 0 .45rem}
.fn .endorse{color:var(--claret)}

/* At the head of a division page: the full horizontal lockup. */
.divbrand{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(1rem,3vw,2.5rem);
  flex-wrap:wrap;padding-block:1.1rem .9rem;border-bottom:1px solid var(--rule)}
.divbrand .lock img{width:clamp(210px,28vw,330px);height:auto}
.divbrand .said{font-family:var(--font-sans);font-size:.58rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);line-height:1.9;text-align:right}
.divbrand .said b{display:block;color:var(--claret)}

/* Parent/child explainer strip. */
.parentnote{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--claret);
  padding:.85rem 1.05rem;margin:.9rem 0 0;font-size:.88rem;color:var(--ink-2)}
.parentnote b{color:var(--ink)}

/* The two branded divisions listed side by side. */
.brandpair{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut);margin:1rem 0 .4rem;
  border-top:1px solid var(--rule)}
.brandpair > a{padding-top:.9rem;display:block}
.brandpair > a + a{border-left:1px solid var(--rule-2);padding-left:var(--gut)}
.brandpair img{width:clamp(170px,22vw,240px);height:auto;margin-bottom:.55rem}
.brandpair .fn{margin-bottom:.25rem}
.brandpair p{font-size:.86rem;color:var(--ink-2);margin:0}
@media (max-width:680px){
  .brandpair{grid-template-columns:1fr}
  .brandpair > a + a{border-left:0;padding-left:0;border-top:1px solid var(--rule-2)}
  .divbrand .said{text-align:left}
}
/* ---------- Closing band ----------
   The front page ends on a dark plate: one action and the statutory
   detail. Replaces the old Explore grid, which repeated the footer. */
.closing{background:var(--black);color:var(--black-ink);padding-block:clamp(1.6rem,4vw,2.6rem)}
.closegrid{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.closing h2{font-size:clamp(1.5rem,3vw,2.3rem);margin:.35rem 0 .55rem}
.closing p{color:var(--strip-muted);font-size:.92rem;max-width:46ch}
.closing .kicker{color:var(--strip-up)}
.closing .btn{margin-top:.5rem}
.closing .tbc{color:var(--strip-up);font-style:normal}
.regoffice h4{font-family:var(--font-sans);font-size:.6rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--strip-muted);border-top:2px solid var(--black-ink);
  padding-top:.45rem;margin-bottom:.6rem}
.regoffice p{font-size:.85rem;line-height:1.65}
@media (max-width:680px){.closegrid{grid-template-columns:1fr}}
/* ---------- Directors, front page ----------
   Two portraits at a fixed column width with the governance note beside
   them, so the block reads as a picture story rather than two big cards. */
.dirs{padding-block:1.1rem 1.5rem;border-bottom:1px solid var(--ink)}
.dir-grid{display:grid;grid-template-columns:220px 1fr;gap:clamp(1.25rem,3vw,2.5rem);
  align-items:start;margin-top:.3rem}
.dir{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .dir{opacity:0;transform:translateY(20px)}
.js .dir.in{opacity:1;transform:none}
.portrait{aspect-ratio:4/5;border:1px solid var(--rule);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  filter:contrast(1.03) saturate(.94);transition:filter .4s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.dir:hover .portrait img{transform:scale(1.03);filter:contrast(1.06) saturate(1)}
.dir h3{font-size:1.15rem;margin-top:.6rem;padding-top:.45rem;border-top:1px solid var(--ink)}
.dir .role{font-family:var(--font-sans);font-size:.58rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--claret);margin:.22rem 0 0}
.dirtext{border-left:1px solid var(--rule);padding-left:clamp(1rem,2vw,1.6rem)}
.dirtext h3{font-size:1.3rem;margin-bottom:.5rem}
.dirtext p{font-size:.92rem;color:var(--ink-2)}

/* ---------- Making an enquiry ---------- */
.howto{padding-block:1.1rem 1.5rem;border-bottom:1px solid var(--ink)}
.howgrid{display:grid;grid-template-columns:1fr 15rem;gap:calc(var(--gut) * 1.3)}
.howhead{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:.6rem}
.howto .rail p{max-width:none}

@media (max-width:900px){
  /* One portrait now, so it stacks above the note rather than sitting beside it. */
  .dir-grid{grid-template-columns:1fr}
  .dirtext{grid-column:1 / -1;border-left:0;padding-left:0;
    border-top:1px solid var(--rule);padding-top:.85rem}
  .howgrid{grid-template-columns:1fr}
  .howto .rail{border-left:0;border-top:3px solid var(--ink);padding-left:0;padding-top:.85rem;margin-top:1rem}
}
@media (prefers-reduced-motion:reduce){ .js .dir{opacity:1;transform:none} }
/* Pull quote — fills a column with height rather than words, which is what
   the centre column needs now that the picture has moved to full width. */
.pullquote{margin:.9rem 0 0;padding-block:.75rem;border-block:1px solid var(--ink);
  font-family:var(--font-serif);font-style:italic;font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.22;text-align:center}

/* ---------- Inline figure artwork ----------
   These SVGs are drawn entirely in currentColor with no fixed hex, so they
   ink themselves from the page and need no light/dark variants. Their
   @font-face blocks (86KB each) were stripped on inlining; the labels are
   remapped here onto the page's own faces. Presentation attributes lose to
   a stylesheet rule, so plain attribute selectors are enough. */
.figsvg{display:block;width:100%;height:auto;color:var(--ink)}
.figsvg text[font-family^="Jost"]{font-family:var(--font-sans)}
.figsvg text[font-family^="Cormorant"]{font-family:var(--font-serif)}

/* The dominant front-page picture, full width under the masthead. */
.leadpic{margin:0;padding-block:.85rem .9rem;border-bottom:1px solid var(--rule)}

/* The group-structure explainer, above the Spotlight columns. */
.structfig{margin:0 0 1rem;padding-bottom:.9rem;border-bottom:1px solid var(--rule)}
.structfig .figsvg{max-width:1020px;margin-inline:auto}

/* Spotlight loses its placeholder column once the diagram carries the picture. */
.spotgrid.two{grid-template-columns:1fr 1fr}

/* The three company icons replace three copies of the same monogram, so the
   circular gradient chip that framed a mark is no longer right. */
.opcard .mark{width:54px;height:54px;border:1px solid var(--rule);border-radius:0;
  background:none;filter:none;overflow:visible;display:grid;place-items:center;margin-bottom:.6rem}
.opcard .mark .figsvg{width:100%;height:100%;color:var(--ink)}

@media (max-width:820px){ .spotgrid.two{grid-template-columns:1fr} }
/* ============================================================
   RESPONSIVE LADDER — 320px phone through 4K
   Five newspaper columns at full width, one readable column on a
   phone, stepping through laptop and tablet in between. Column
   rules are re-cut at every step so a wrapped row never shows a
   rule hanging off its first item.
   ============================================================ */

/* Grid and flex children default to min-width:auto, so a single long
   headline can force the whole page to scroll sideways. */
.lead > *,.row > *,.withrail > *,.secbody > *,.opgrid > *,.spotgrid > *,
.substories > *,.exgrid > *,.footgrid > *,.layout > *,.masthead .row > *,
.ticker,.topbar .util{min-width:0}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}

/* --- 1600px+ : don't strand the paper mid-screen on a 4K panel --- */
@media (min-width:1600px){
  .wrap{max-width:1400px}
  .lead{grid-template-columns:1fr 1.85fr 1fr}
  .withrail,.secbody{grid-template-columns:1fr 17rem}
}

/* --- 1180px : laptop. Five across becomes three. --- */
@media (max-width:1180px){
  .row{row-gap:1rem}
  .row-5{grid-template-columns:repeat(3,1fr)}
  .row-5 > .col:nth-child(3n+1){border-left:0;padding-left:0}
  .row-5 > .col:nth-child(n+4){border-top:1px solid var(--rule-2);padding-top:.85rem}
  .substories{grid-template-columns:repeat(2,1fr)}
  .substories > *:nth-child(2n+1){border-left:0;padding-left:0}
  .substories > *:nth-child(n+3){border-top:1px solid var(--rule-2);padding-top:.7rem}
  .footgrid{grid-template-columns:repeat(3,1fr)}
}

/* --- 1080px : small laptop / large tablet. Side rails drop under. --- */
@media (max-width:1080px){
  :root{--gut:1rem}
  .lead{grid-template-columns:1fr 1fr}
  .lead .centre{grid-column:1 / -1;order:-1;border-left:0;padding-left:0}
  .lead .rail{border-left:1px solid var(--rule)}
  .withrail,.secbody{grid-template-columns:1fr}
  .rail{border-left:0;border-top:3px solid var(--ink);padding-left:0;padding-top:.85rem;margin-top:1rem}
  .opgrid{grid-template-columns:1fr 1fr}
  .opgrid > *:nth-child(2n+1){border-left:0;padding-left:0}
  .opgrid > *:nth-child(n+3){border-top:1px solid var(--rule-2);padding-top:.85rem}
  .exgrid{grid-template-columns:repeat(2,1fr)}
  .exgrid > *:nth-child(2n+1){border-left:0;padding-left:0}
  .exgrid > *:nth-child(n+3){border-top:1px solid var(--rule-2);padding-top:.8rem}
  .layout{grid-template-columns:1fr}
  .sidebar{border-left:0;border-top:3px solid var(--ink);padding-left:0;padding-top:.9rem;position:static}
}

/* --- 920px : tablet portrait --- */
@media (max-width:920px){
  /* The strapline is one long nowrap string and overflows below here. */
  .mhsub{white-space:normal;text-align:center;letter-spacing:.16em}
  .mhrule{gap:.6rem}
  .spotgrid{grid-template-columns:1fr}
  .spotgrid > * + *{border-left:0;padding-left:0;border-top:1px solid var(--rule-2);padding-top:.85rem}
  .row-4{grid-template-columns:repeat(2,1fr)}
  .row-4 > .col:nth-child(2n+1){border-left:0;padding-left:0}
  .row-4 > .col:nth-child(n+3){border-top:1px solid var(--rule-2);padding-top:.85rem}
  .cols3{column-count:2}
  .footgrid{grid-template-columns:repeat(2,1fr)}
}

/* --- 820px : centre column too narrow for two justified columns --- */
@media (max-width:820px){
  .cols2{column-count:1}
  .row-5{grid-template-columns:repeat(2,1fr)}
  /* Re-arm every rule first: the 1180px step stripped it from each 3rd
     item, and at two columns those items sit in column two. */
  .row-5 > .col{border-left:1px solid var(--rule-2);padding-left:var(--gut)}
  .row-5 > .col:nth-child(2n+1){border-left:0;padding-left:0}
  .row-5 > .col:nth-child(n+3){border-top:1px solid var(--rule-2);padding-top:.85rem}
  .row-3{grid-template-columns:repeat(2,1fr)}
  .row-3 > .col:nth-child(2n+1){border-left:0;padding-left:0}
  .row-3 > .col:nth-child(n+3){border-top:1px solid var(--rule-2);padding-top:.85rem}
  /* Six ticker items wrap into a six-line block; make it one scrolling line. */
  .topbar .in{flex-wrap:nowrap;gap:.75rem}
  .ticker{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .ticker::-webkit-scrollbar{display:none}
  .ticker > span{white-space:nowrap}
  .topbar .util{flex:none}
}

/* --- 680px : phone. Single column throughout. --- */
@media (max-width:680px){
  .lead,.row-5,.row-4,.row-3,.opgrid,.substories,.exgrid,.footgrid{grid-template-columns:1fr}
  .lead > * + *,.row > .col + .col,.opgrid > * + *,.substories > * + *,
  .exgrid > * + *,.footgrid > * + *{
    border-left:0;padding-left:0;border-top:1px solid var(--rule-2);padding-top:.85rem}
  .lead .rail{border-left:0}
  .masthead .row{grid-template-columns:1fr;gap:.5rem}
  .mhbox,.mhbox.r{text-align:center}
  .mhtitle{white-space:normal;font-size:clamp(1.9rem,11vw,2.8rem)}
  .cols2,.cols3{column-count:1}
  /* Justified and hyphenated in a narrow measure produces rivers. */
  .article{text-align:left;hyphens:none;-webkit-hyphens:none}
  .dcard{border-left:0}
  /* An overlaid caption is unreadable on a small picture — drop it below. */
  .feature .over{position:static;color:inherit;text-shadow:none;padding-top:.55rem}
  .feature .over h3{color:inherit;font-size:1.15rem}
  .feature .over .kicker{color:var(--claret)}
  .feature .ph,.ph.wide{aspect-ratio:16/9}
  .ph.tall{aspect-ratio:4/3}
}

/* --- 430px : small phone --- */
@media (max-width:430px){
  :root{--gut:.85rem}
  .wrap{padding-inline:.75rem}
  .masthead{padding-block:.7rem .45rem}
  .mhtitle{font-size:clamp(1.7rem,12vw,2.3rem);letter-spacing:-.015em}
  .mhbox{font-size:.55rem;line-height:1.6}
  .lead h1{font-size:1.45rem}
  .pagehead h1{font-size:1.7rem}
  .dropcap::first-letter{font-size:2.9em}
  .glance th,.glance td{padding-inline:.5rem}
  .folio{gap:.35rem;font-size:.54rem;letter-spacing:.14em}
  .directors{grid-template-columns:1fr}
}

/* --- Landscape phone: a sticky belt eats a short viewport --- */
@media (max-height:520px) and (orientation:landscape){
  .secnav,.sidebar{position:static}
}

/* --- Touch pointers: reach the 44px target guideline --- */
@media (pointer:coarse){
  .secnav .in{padding-block:.35rem}
  .secnav a{padding-block:.6rem}
  .topbar .util a{padding-block:.35rem}
  .mostread li,.raillist li,.inside li,.oplist li{padding-block:.62rem}
  .btn{padding:.7rem 1.3rem}
  .pill{padding:.45rem .8rem}
  /* 16px stops iOS zooming the page when a field takes focus. */
  .field input,.field select,.field textarea{padding:.6rem .65rem;font-size:16px}
}

/* --- Paper: it is a newspaper, so let it print like one --- */
@media print{
  .topbar,.secnav,.videoband,.foot,.themetoggle,.pill,.jump{display:none!important}
  body{background:#fff;color:#000;font-size:9.5pt;line-height:1.32}
  body::after{display:none}
  .wrap{max-width:none;padding:0}
  .masthead{border-bottom:3px double #000}
  .ph{filter:grayscale(1) contrast(1.25)}
  .director img{filter:grayscale(1) contrast(1.15)}
  .directors{break-inside:avoid}
  a{color:#000;text-decoration:none}
  .lead,.row,.secblock,.withrail,.short,.dont,.glance,.inside{break-inside:avoid}
  .folio{border-top:1px solid #000}
}
/* Full desaturation reads as dead grey on the green ground, so the night
   edition keeps part of the cast. */
:root[data-theme="dark"] .ph{filter:grayscale(.45) contrast(1.05) brightness(.92)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .ph{filter:grayscale(.45) contrast(1.05) brightness(.92)}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Steps list: grid-flow fix ----------
   Each <li> is a two-column grid (numeral | text) but carries THREE grid
   children: the ::before numeral, the <b> title and the <span> description.
   The third child wrapped onto row 2 of column 1 — a ~2rem track — which
   set the description one word per line. Pin both text elements to column 2
   so they stack under each other in the wide track. */
.steps b,.steps span{grid-column:2}

/* ---------- Division grid steps ----------
   Six cards, so only 3 / 2 / 1 divide evenly — auto-fill produced a 4+2 row
   with two dead cells once the wrap widened at 1600px. Declared last and
   widest-first: both queries match on a phone, and equal specificity means
   the later rule wins, so the 1-column rule must come after the 2-column one. */
@media (max-width:900px){ .divgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .divgrid{grid-template-columns:1fr} }