/* =====================================================================
   The Good Times — IHT homage (Direction D) · shared stylesheet
   Used by the edition front and story pages. See SPEC.md.
   Fonts (load in <head>):
   https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=UnifrakturMaguntia&display=swap
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* colour */
  --paper:#e8e6df;      /* newsprint, grey-warm (not cream) */
  --ink:#161616;        /* headlines, rules, nameplate */
  --ink-2:#2b2a27;      /* body copy */
  --mute:#55534d;       /* kickers, captions, attributions */
  --hair:#8b887f;       /* hairline column/section rules */
  --photo-bg:#cfccc4;   /* image placeholder / missing photo */

  /* type families */
  --f-plate:"UnifrakturMaguntia","Old English Text MT",serif;
  --f-head:"Libre Bodoni","Bodoni 72",Didot,"Times New Roman",serif;
  --f-text:"PT Serif",Georgia,"Times New Roman",serif;

  /* spacing scale (4px base) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;

  /* rules */
  --rule-hair:1px solid var(--hair);
  --rule-ink:1px solid var(--ink);
  --rule-heavy:2px solid var(--ink);
  --rule-double:3px double var(--ink);

  /* grid */
  --cols:6;--gap:24px;--pad:64px;--max:1440px;
  --measure:35.5rem;     /* former story body measure (568px ≈ 64–68ch); outer story now uses 60rem */
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--f-text);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;font-kerning:normal;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:9;background:var(--ink);color:var(--paper);padding:var(--s2) var(--s3)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap)}
/* hairline column rule, centred in the gutter to the LEFT of an item */
.cr{position:relative}
.cr::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:0;bottom:0;width:1px;background:var(--hair)}

/* ---------- 3. Shared text styles ---------- */
.kick{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.lab{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.hed{font-family:var(--f-head);font-weight:700;letter-spacing:-.005em;word-spacing:.05em;text-wrap:balance}
.hed--it{font-style:italic;padding-left:.03em;padding-right:.12em} /* optical: italic overhang never crosses a rule */
.hed a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.12em;transition:text-decoration-color .15s}
.hed a:hover,.hed a:focus-visible{text-decoration-color:currentColor}
.dek{font-size:15px;line-height:24px;color:var(--ink-2)}
.jump{font-style:italic;font-weight:700;font-size:14px;line-height:20px}
.jump a{border-bottom:var(--rule-hair)}
.jump a:hover,.jump a:focus-visible{border-bottom-color:var(--ink)}
.dl{font-weight:700;letter-spacing:.04em;color:var(--ink)} /* dateline "WASHINGTON —" */

/* ---------- 4. Nameplate, ears, folio ---------- */
.np{padding-top:var(--s5);align-items:center}
.np-ear{font-size:11px;line-height:16px;color:var(--ink-2)}
.np-ear--l{grid-column:1;border:var(--rule-ink);padding:var(--s2) var(--s3);text-align:center}
.np-ear--l b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.np-ear--r{grid-column:-2/-1}
.np-ear--r a{display:flex;align-items:baseline;gap:var(--s1)}
.np-ear--r a::after{content:"";order:1;flex:1;border-bottom:1px dotted var(--hair);transform:translateY(-3px)}
.np-ear--r a b{order:2;font-variant-numeric:tabular-nums}
.np-ear--r a:hover,.np-ear--r a:focus-visible{text-decoration:underline}
.np-plate{grid-column:2/-2;text-align:center}
.np-the{font-family:var(--f-head);font-weight:700;font-size:22px;line-height:24px;letter-spacing:.18em;text-transform:uppercase;margin-left:.18em}
.np-title{font-family:var(--f-plate);font-weight:400;font-size:clamp(64px,7.4vw,112px);line-height:1;margin-top:var(--s1);display:flex;justify-content:center;align-items:center;gap:.14em;white-space:nowrap}
.np-title a:hover,.np-title a:focus-visible{opacity:.8}
.np-emblem{height:.76em;width:auto;flex:none;transform:translateY(-.1em)}
/* LEGACY (do not remove): the SVG globe used by the No. 39 pages (2026-09-27/*, and any earlier IHT page) that share this
   stylesheet. No. 40 onward uses .np-emblem above. */
.np-globe{width:.62em;height:.62em;flex:none;transform:translateY(.04em)}
/* ---- THE centred on the emblem (No. 40 fix; Nina, 2026-09-28) ----
   The plate becomes a 3-track grid (auto auto auto, centred) whose tracks are
   shared with the title via subgrid: track 1 = "Good", 2 = emblem, 3 = "Times".
   Title stays centred as a whole (same as the old flex centring); THE sits in
   track 2, so its centre is the emblem's centre at every width. THE is given
   width:0 so it never widens the emblem track; its text overflows equally both
   sides. Scoped with :has(.np-emblem) so the LEGACY .np-globe pages (No. 39,
   2026-09-27/*) keep their old nameplate. Browsers without subgrid or :has()
   keep the old layout. Keep exactly three direct children in .np-title
   (Good / img.np-emblem / Times). */
@supports (grid-template-columns:subgrid) and selector(:has(a)){
  .np-plate:has(>.np-title>.np-emblem),.sbar__plate:has(>.np-title>.np-emblem){display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-items:center}
  .np-plate:has(>.np-title>.np-emblem)>.np-the,.sbar__plate:has(>.np-title>.np-emblem)>.np-the{grid-column:2;justify-self:center;width:0;display:flex;justify-content:center;white-space:nowrap;margin-left:0;padding-left:.18em}
  .np-plate>.np-title:has(>.np-emblem),.sbar__plate>.np-title:has(>.np-emblem){grid-column:1/-1;display:grid;grid-template-columns:subgrid;gap:0;align-items:center}
  .np-plate .np-emblem,.sbar__plate .np-emblem{margin:0 .14em}
}
.np-pub{grid-column:1/-1;text-align:center;font-family:var(--f-head);font-weight:700;font-size:18px;line-height:24px;margin-top:var(--s2)}
.folio{margin-top:var(--s3);border-top:var(--rule-heavy);border-bottom:var(--rule-ink);padding:var(--s1) 0;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline}
.folio--thin{display:block;padding:0;height:5px;margin-top:var(--s2)}
.folio__c{text-align:center}.folio__r{text-align:right}
.folio__c::before,.folio__c::after{content:"★★";letter-spacing:.1em;font-size:9px;margin:0 var(--s5);color:var(--ink-2);vertical-align:1px}
.index-line{display:none;padding:var(--s2) 0;border-bottom:var(--rule-hair);font-size:12px;line-height:20px;text-align:center;color:var(--ink-2)}
.index-line b{letter-spacing:.08em;text-transform:uppercase;margin-right:var(--s2)}
.index-line a{white-space:nowrap}
.index-line a+a::before{content:"·";margin:0 var(--s2);color:var(--hair)}
.index-line a:hover,.index-line a:focus-visible{text-decoration:underline}

/* ---------- 5. Front: lead ---------- */
.front{padding-top:var(--s5)}
.lead{grid-column:1/span 4;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto auto auto 1fr;align-content:start}
.lead>*{grid-column:1/-1}
.lead .kick{margin-bottom:var(--s2)}
.lead__hed{font-size:clamp(36px,3.8vw,56px);line-height:1.03;letter-spacing:-.012em;text-wrap:wrap}
.lead__sub{margin-top:var(--s3);font-family:var(--f-head);font-style:italic;font-weight:700;font-size:20px;line-height:28px;padding-right:.12em}
.photo{margin-top:var(--s5)}
.photo__fr{aspect-ratio:1920/994;overflow:hidden;background:var(--photo-bg)}
.photo__fr img{display:block;width:100%;height:100%;object-fit:cover}
.photo--front .photo__fr img{filter:grayscale(1) contrast(1.06);transition:filter .5s ease}
.photo--front a:hover img,.photo--front a:focus-visible img{filter:none}
.photo figcaption{margin-top:var(--s2);font-size:13px;line-height:20px;color:var(--ink-2)}
.photo figcaption b{letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.photo--front figcaption{padding-bottom:var(--s3);border-bottom:var(--rule-hair)}
.lead__cols{display:grid;grid-template-columns:subgrid;margin-top:var(--s4)}
.lead__body{grid-column:1/span 2;display:flex;flex-direction:column;color:var(--ink-2)}
.lead__body p+p{text-indent:1.5em}
.lead__body .jump{margin-top:auto;padding-top:var(--s3);text-indent:0}
.inside{grid-column:3/span 2;display:flex;flex-direction:column}
.box{border:var(--rule-ink);padding:var(--s3) var(--s4) var(--s4)}
.box>.lab{text-align:center;padding-bottom:var(--s2);border-bottom:var(--rule-ink);margin-bottom:var(--s3)}
.inside .box{flex:1}
.bul li{font-size:14px;line-height:20px;padding-left:var(--s4);position:relative}
.bul li+li{margin-top:var(--s2)}
.bul li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;background:var(--ink)}
.bul a:hover,.bul a:focus-visible{text-decoration:underline}
.bul .pg{font-style:italic;color:var(--mute);white-space:nowrap}

/* ---------- 6. Front: Latest Briefings rail + opinion ---------- */
.rail{grid-column:5/span 2;display:flex;flex-direction:column}
.rail>.lab{padding-bottom:var(--s2);border-bottom:var(--rule-heavy)}
.brief{padding:var(--s4) 0}
.brief .hed{margin-top:var(--s2)}
.brief .dek{margin-top:var(--s2)}
.brief .jump{margin-top:var(--s2)}
.brief--r2 .hed{font-size:clamp(30px,2.9vw,40px);line-height:1.05}
.brief--r3 .hed,.brief--r4 .hed{font-size:clamp(22px,1.9vw,26px);line-height:1.1}
.rail .brief:last-of-type{border-bottom:0}
.rail__fill{flex:1 0 0}
.opinion__q{font-family:var(--f-head);font-style:italic;font-size:21px;line-height:28px;text-wrap:pretty;padding-right:.1em}
.opinion__a{margin-top:var(--s2);font-size:13px;line-height:20px;color:var(--mute)}

/* ---------- 7. Front: Also today (05–06) ---------- */
.also{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto auto auto auto;margin-top:var(--s5);border-top:var(--rule-heavy)}
.also>.lab{grid-column:1/-1;padding:var(--s2) 0}
.quiet{grid-row:2/span 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--s4) 0 var(--s5)}
.quiet>*{grid-column:1/-1}
.quiet .hed{margin-top:var(--s2);font-size:clamp(24px,2vw,28px);line-height:1.1}
.quiet .dek{grid-column:1/span 2;margin-top:var(--s2);font-size:16px}
.quiet .jump{margin-top:var(--s2)}
.quiet--05{grid-column:1/span 3}.quiet--06{grid-column:4/span 3}

/* ---------- 8. Sports ---------- */
.sports{border-top:var(--rule-double);padding-top:var(--s2);grid-template-rows:auto auto auto auto auto}
.sports__flag{grid-column:1/-1;display:flex;align-items:center;gap:var(--s4);padding:var(--s2) 0 var(--s3)}
.sports__flag::before,.sports__flag::after{content:"";flex:1;height:1px;background:var(--ink)}
.sports__flag h2{font-family:var(--f-head);font-weight:700;font-size:26px;line-height:32px;letter-spacing:.24em;text-transform:uppercase;margin-right:-.24em}
.slead{grid-column:1/span 3;grid-row:2/span 4;display:grid;grid-template-rows:subgrid;padding:var(--s3) 0 var(--s5)}
.slead .hed{margin-top:var(--s2);font-size:clamp(32px,3vw,42px);line-height:1.05;text-wrap:wrap}
.slead__deck{margin-top:var(--s3);font-family:var(--f-head);font-style:italic;font-weight:700;font-size:19px;line-height:28px;color:var(--ink-2);text-wrap:pretty;padding-right:.1em}
.slead .jump{margin-top:var(--s3)}
.short{grid-row:2/span 4;display:grid;grid-template-rows:subgrid;padding:var(--s3) 0 var(--s5)}
.short--1{grid-column:4}.short--2{grid-column:5}.short--3{grid-column:6}
/* short sports day: 2 shorts -> lead spans 1-4; 1 short -> lead 1-4, short 5-6 */
/* one- and two-short sports layouts: §16 F3 (keyed on :has(), >1180px only) */
.short .hed{margin-top:var(--s2);font-size:21px;line-height:24px}
.short .dek{margin-top:var(--s2);font-size:14px;line-height:20px}
.short .jump{margin-top:var(--s2);font-size:13px}

/* ---------- 9. Today in History, footer ---------- */
.tih{border-top:var(--rule-ink);border-bottom:var(--rule-ink);padding:var(--s3) 0;font-size:14px;line-height:20px;color:var(--ink-2)}
.tih .lab{margin-right:var(--s2)}
.tih__y{font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:15px}
.tih__h{font-family:var(--f-head);font-weight:700;font-style:italic;color:var(--ink);font-size:16px}
.colo{padding:var(--s4) 0 var(--s7);font-size:12px;line-height:16px;color:var(--mute);text-align:center;letter-spacing:.04em}

/* ---------- 10. Story page ---------- */
.sbar{padding-top:var(--s4);align-items:center}
.sbar__back{grid-column:1/span 2;font-size:13px;line-height:20px;font-weight:700}
.sbar__back a{border-bottom:var(--rule-hair)}
.sbar__back a:hover,.sbar__back a:focus-visible{border-bottom-color:var(--ink)}
.sbar__plate{grid-column:3/span 2;text-align:center}
.sbar__plate .np-the{font-size:13px;line-height:16px}
.sbar__plate .np-title{font-size:48px;margin-top:0}
.sbar__date{grid-column:5/span 2;text-align:right;font-size:13px;line-height:20px;font-weight:700}
.story{max-width:calc(60rem + 2 * var(--pad));margin:0 auto;padding:var(--s7) var(--pad) 0}
.story__kick{text-align:left}
.story__hed{margin-top:var(--s3);font-size:clamp(38px,4.6vw,60px);line-height:1.04;letter-spacing:-.012em;text-wrap:wrap}
.story__sub{margin-top:var(--s4);font-family:var(--f-head);font-style:italic;font-weight:700;font-size:22px;line-height:32px;color:var(--ink-2);padding-right:.1em;text-wrap:pretty}
.story__by{margin-top:var(--s5);padding:var(--s2) 0;border-top:var(--rule-ink);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:13px;line-height:20px}
.story__by b{letter-spacing:.06em;text-transform:uppercase}
.story__by span{color:var(--mute)}
.story__art{max-width:calc(60rem + 2 * var(--pad));margin:var(--s6) auto 0;padding:0 var(--pad)}
/* Portrait story art (PHOTO_VARIANT ' photo--portrait', set by the renderer when height > width; No. 41 S5 600x900): no
   landscape crop — natural aspect in a 30rem column (<=720px tall at 2:3), caption at image width, centred. */
.story__art.photo--portrait{max-width:calc(30rem + 2 * var(--pad))}
.story__art.photo--portrait .photo__fr{aspect-ratio:auto;background:none}
.story__art.photo--portrait .photo__fr img{height:auto;max-height:720px;object-fit:contain}
.story__body{font-size:18px;line-height:30px;color:var(--ink-2);margin-top:var(--s6);hyphens:auto}
.story__body p+p{margin-top:0;text-indent:1.5em}
.story__body .cross{margin:var(--s5) 0 var(--s1);text-indent:0;font-family:var(--f-head);font-weight:700;font-size:20px;line-height:28px;color:var(--ink)}
.story__body .cross+p{text-indent:0}
.story__body .dl{font-variant:small-caps;font-weight:700;letter-spacing:.06em;font-size:1.06em}
.story__floor{margin-top:var(--s6);padding-top:var(--s4);border-top:var(--rule-ink);font-style:italic;font-size:15px;line-height:24px;color:var(--ink-2)}
.story__sources{margin-top:var(--s4);font-size:13px;line-height:20px;color:var(--mute)}
.story__sources a{color:var(--ink);border-bottom:var(--rule-hair)}
.story__sources a:hover,.story__sources a:focus-visible{border-bottom-color:var(--ink)}
.story__end{font-family:var(--f-head);text-align:center;font-size:14px;margin-top:var(--s4);color:var(--ink)}
.more{margin-top:var(--s7)}
.more .bul li{font-size:15px;line-height:24px}
.more .bul li::before{top:8px}
.more .bul li+li{margin-top:var(--s2)}
.more .bul .rk{float:right;font-weight:700;font-variant-numeric:tabular-nums;margin-left:var(--s3)}
.sfoot{max-width:calc(60rem + 2 * var(--pad));margin:var(--s7) auto 0;padding:0 var(--pad)}
.sfoot .colo{border-top:var(--rule-ink);padding:var(--s3) 0 var(--s2)}
.sfoot__note{font-size:12px;line-height:16px;color:var(--mute);text-align:center;padding-bottom:var(--s7)}

/* ---------- 11. Breakpoints ---------- */
/* 4 columns: 821–1180px */
@media (max-width:1180px){
  :root{--cols:4;--pad:40px}
  .np-title{font-size:clamp(52px,6.6vw,76px)}
  .np-ear--r{font-size:10.5px}
  .lead{grid-column:1/-1;grid-template-rows:none}
  .rail{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto auto auto auto auto;margin-top:var(--s6)}
  .rail.cr::before,.rail__fill{display:none}
  .rail>.lab{grid-column:1/-1}
  .brief{grid-row:2/span 4;display:grid;grid-template-rows:subgrid;border-bottom:0}
  .brief--r2{grid-column:1/span 2}.brief--r3{grid-column:3}.brief--r4{grid-column:4}
  .brief--r3::before,.brief--r4::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:var(--s4);bottom:var(--s4);width:1px;background:var(--hair)}
  .brief{position:relative}
  .brief--r2 .hed{font-size:34px}
  .rail .opinion{grid-column:1/-1;grid-row:6}
  .quiet--05{grid-column:1/span 2}.quiet--06{grid-column:3/span 2}
  .quiet .dek{grid-column:1/-1}
  .sports{grid-template-rows:none}
  .slead{grid-column:1/-1;grid-row:auto;grid-template-columns:subgrid;grid-template-rows:none}
  .slead>*{grid-column:1/span 3}
  .short,.short--1,.short--2,.short--3{grid-column:1/-1;grid-row:auto;grid-template-columns:subgrid;grid-template-rows:auto auto auto;row-gap:0;padding:var(--s4) 0}
  .short.cr::before{display:none}
  .short .kick{grid-column:1/span 2;grid-row:1}
  .short .hed{grid-column:1/span 2;grid-row:2;font-size:22px;line-height:28px}
  .short .dek{grid-column:3/span 2;grid-row:1/span 2;margin-top:0;font-size:15px;line-height:24px}
  .short .jump{grid-column:3/span 2;grid-row:3}
  .sbar__back{grid-column:1}.sbar__plate{grid-column:2/span 2}.sbar__date{grid-column:4}
}
/* 2 columns: 561–820px */
@media (max-width:820px){
  :root{--cols:2;--pad:32px}
  .np-ear{display:none}
  .np-plate{grid-column:1/-1}
  .np-title{font-size:clamp(52px,10vw,80px)}
  .folio__c::before,.folio__c::after{margin:0 var(--s3)}
  .index-line{display:block}
  .lead__body{grid-column:1}.inside{grid-column:2}
  .rail{grid-template-rows:auto auto auto auto auto auto auto auto auto auto}
  .brief--r2{grid-column:1/-1;grid-row:2/span 4}
  .brief--r3{grid-column:1;grid-row:6/span 4}.brief--r4{grid-column:2;grid-row:6/span 4}
  .brief--r3::before{display:none}
  .rail .opinion{grid-row:10}
  .brief--r2 .hed{font-size:34px}
  .quiet--05{grid-column:1}.quiet--06{grid-column:2}
  .quiet .hed{font-size:26px}
  .slead>*{grid-column:1/-1}
  .short .kick,.short .hed{grid-column:1}.short .dek,.short .jump{grid-column:2}
  .sbar__back{grid-column:1;grid-row:2;margin-top:var(--s2)}
  .sbar__plate{grid-column:1/-1;grid-row:1}
  .sbar__date{grid-column:2;grid-row:2;margin-top:var(--s2)}
}
/* 1 column: ≤560px */
@media (max-width:560px){
  :root{--cols:1;--pad:20px;--gap:16px}
  .cr::before,.brief--r3::before,.brief--r4::before{display:none}
  .np{padding-top:var(--s4)}
  .np-the{font-size:16px;line-height:20px}
  .np-title{font-size:clamp(44px,13.4vw,60px)}
  .np-pub{font-size:15px;line-height:20px}
  .folio{grid-template-columns:1fr 1fr;row-gap:var(--s1);font-size:11px}
  .folio__c{grid-column:1/-1;grid-row:1}
  .folio__l,.folio__r{grid-row:2}
  .folio__c::before,.folio__c::after{display:none}
  .index-line{text-align:left;font-size:12px}
  .lead__hed{font-size:38px;line-height:40px}
  .lead__sub{font-size:19px;line-height:28px}
  .photo--front{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
  .photo--front figcaption{padding-left:var(--pad);padding-right:var(--pad)}
  .lead__cols,.rail,.also,.sports{display:block}
  .inside{margin-top:var(--s5)}
  .brief,.quiet{display:block;padding:var(--s4) 0}
  .brief--r2 .hed{font-size:32px}.brief--r3 .hed,.brief--r4 .hed{font-size:24px}
  .rail .opinion{margin-top:var(--s5)}
  .quiet:last-child{border-bottom:0}
  .slead{display:block}
  .short{display:block;padding:var(--s4) 0}
  .short .hed{font-size:22px}
  .short .dek{margin-top:var(--s2)}
  .sbar__back,.sbar__date{grid-column:1;grid-row:auto;text-align:center;margin-top:var(--s1)}
  .sbar__plate .np-title{font-size:40px}
  .story{padding-top:var(--s6)}
  .story__hed{font-size:36px;line-height:40px}
  .story__sub{font-size:19px;line-height:28px}
  .story__art{padding:0}
  .story__art figcaption{padding:0 var(--pad)}
  .story__body{font-size:17px;line-height:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{html{background:#fff}.photo--front .photo__fr img{filter:grayscale(1)}}

/* ---------- 13. Production additions (Henry, 27 Sep 2026) ---------- */
/* SPEC §4: the front photo also returns to colour when the lead headline link has keyboard focus
   (the photo link itself is tabindex=-1, so :focus-visible on it never fires from the keyboard). */
.lead:focus-within .photo--front .photo__fr img{filter:none}
/* SPEC craft floor: the four sports jump lines share the last subgrid row, but the lead's jump has a taller margin
   (12px vs 8px), so the shorts' jump paragraphs were stretched and their text sat 4px higher. Bottom-align them. */
.slead>.jump,.short>.jump{align-self:end}
/* Story page without a photo (SPEC §5: .story__art omitted): the body block then follows the head directly;
   drop its 48px top padding so the byline-to-body gap is the body's own 32px, as with a photo. */
.story+.story{padding-top:0}

/* ---------- 14. Production additions (Henry, 28 Sep 2026, No. 40) ---------- */
/* A bulleted list inside a story body (storyN.md lines starting "- ") renders as ul.bul. The shared .bul is the 14px
   index style; in body copy the items keep the body size and line grid, with the square bullet centred on line one. */
.story__body .bul{margin:var(--s2) 0 var(--s3)}
.story__body .bul li{font-size:inherit;line-height:inherit}
.story__body .bul li::before{top:11px;top:calc(.5lh - 3.5px)}
.story__body .bul+p{text-indent:0}

/* ---------- 15. No Dispatch Opinion: close up the rail (Henry, 28 Sep 2026, No. 40) ---------- */
/* Craft floor: no orphaned space. When an edition has no verbatim quote from the lead, the renderer drops OPINION and
   INSIDE-LEAD and keeps INSIDE-RAIL: the INSIDE box takes the opinion's slot at the foot of the rail (the filler above it
   absorbs any difference, as SPEC §3 does for the opinion), and the lead body, no longer sharing its row with INSIDE,
   runs in two balanced columns across columns 1–4 with a hairline between them. The lead's jump line stays pinned to the
   bottom, so the lead, the rail and the INSIDE box still end on the same pixel. */
.lead__cols:not(:has(.inside)) .lead__body{grid-column:1/-1}
.lead__cols:not(:has(.inside)) .lead__text{column-count:2;column-gap:var(--gap);column-rule:1px solid var(--hair)}
/* Level column ends (Ilias craft floor, No. 41): orphans/widows 2 made Chromium's balancer leave ragged bottoms (No. 40
   @1280: 7/5 lines); at 1 the columns balance to the line. An odd line count still can't balance: the renderer's
   level-column fit picks a whole-sentence cut that ends both columns on the same pixel at 1440 and 1280. */
.lead__cols:not(:has(.inside)) .lead__text{column-fill:balance}
.lead__cols:not(:has(.inside)) .lead__text p{orphans:1;widows:1;break-inside:auto}
/* In-flow jump (T1_JUMP_IN): when the level-column fit needs one more line, "(Continued in the full report ›)" is set as the
   last line of the last column, IHT style, in body type so its line box matches the text lines. */
.lead__text>.jump{margin:0;padding:0;font-size:inherit;line-height:inherit;text-indent:0}
@media (max-width:820px){.lead__text>.jump{line-height:48px}.lead__text>.jump a{vertical-align:top}}   /* 44px tap row = exactly two 24px line slots */
@media (max-width:1180px){.rail>.inside{grid-column:1/-1;grid-row:6;margin-top:var(--s4)}}
@media (max-width:820px){.rail>.inside{grid-row:10}}
@media (max-width:560px){
  .lead__cols:not(:has(.inside)) .lead__text{column-count:auto;column-rule:none}
  .rail>.inside{margin-top:var(--s5)}
}

/* ---------- 16. Post-ship fixes (Nina Forma review 28 Sep 2026, approved by Ilias; Henry, No. 40) ---------- */
/* F7 · Declare light only, so forced-dark browsers (Chrome Android auto-dark, Samsung Internet) don't repaint the page.
   Pages also carry <meta name="color-scheme" content="only light">. */
:root{color-scheme:only light}

/* F1 · Tap targets ≥44px on touch layouts (≤820px). Each story block is the target: its headline link is stretched
   over the block with ::after. Other links inside a block (jump lines, the lead photo, the INSIDE box) sit above
   the stretched link (z-index 1) and get their own 44px box, so nothing is covered. */
@media (max-width:820px){
  .lead,.brief,.quiet,.slead,.short{position:relative}
  .lead__hed a::after,.brief .hed a::after,.quiet .hed a::after,.slead .hed a::after,.short .hed a::after{content:"";position:absolute;inset:0;z-index:0}
  .lead .inside,.lead .photo__fr a,.lead .photo figcaption a{position:relative;z-index:1}
  .lead .jump a,.brief .jump a,.quiet .jump a,.slead .jump a,.short .jump a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px}
  /* "In this edition" index: a grid of 44px rows, no inline separators */
  .index-line{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(44px,auto);padding:0;text-align:center}
  .index-line b{grid-column:1/-1;display:flex;align-items:center;justify-content:center;margin-right:0}
  .index-line a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s2)}
  .index-line a+a::before{content:none}
  /* INSIDE rows (.rail li) and More-from-today rows: each row ≥44px, the whole row is the link */
  .bul li,.rail li{position:relative;min-height:44px}
  .bul li a::after{content:"";position:absolute;inset:0}
  .story__body .bul li{min-height:0}
  .story__body .bul li a::after{content:none}
  /* story bar back link, skip link */
  .sbar__back a,.skip:focus{display:inline-flex;align-items:center;min-height:44px}
  /* the inline-flex back link drew its border-bottom as a rule under the whole 44px box: use a text underline instead */
  .sbar__back a{border-bottom:0;text-decoration:underline 1px var(--hair);text-underline-offset:4px}
  .sbar__back a:hover,.sbar__back a:focus-visible{text-decoration-color:var(--ink)}
  /* story sources: 44px line boxes; vertical padding on the inline links enlarges the hit box without moving the text */
  .story__sources{line-height:44px}
  .story__sources a{padding:13px 0}
}

/* F2 · No lead photo (>1180px): Also Today moves up under the lead (columns 1–4) and the rail spans both rows, so no
   hole opens under the lead. Safety net only: the renderer stops when the lead photo is missing. */
@media (min-width:1181px){
  .front:not(:has(.photo--front)) .rail{grid-row:1/span 2}
  .front:not(:has(.photo--front)) .also{grid-column:1/5;grid-row:2;align-self:end}
  .front:not(:has(.photo--front)) .quiet--05{grid-column:1/span 2}
  .front:not(:has(.photo--front)) .quiet--06{grid-column:3/span 2}
  .front:not(:has(.photo--front)) .quiet .dek{grid-column:1/-1}
}

/* F3 · Sports layouts keyed on the content itself (a wrong or missing SPORTS_VARIANT class can't break them).
   >1180px only: at ≤1180 every sports item already runs full width (§11). Zero shorts: the lead runs full width,
   its text held to four columns. */
@media (min-width:1181px){
  .sports--one .slead,.sports--two .slead,
  .sports:has(.short--1):not(:has(.short--2)) .slead,.sports:has(.short--2):not(:has(.short--3)) .slead{grid-column:1/span 4}
  .sports--one .short--1,.sports:has(.short--1):not(:has(.short--2)) .short--1{grid-column:5/span 2}
  .sports--two .short--1,.sports:has(.short--2):not(:has(.short--3)) .short--1{grid-column:5}
  .sports--two .short--2,.sports:has(.short--2):not(:has(.short--3)) .short--2{grid-column:6}
  .sports:not(:has(.short)) .slead{grid-column:1/-1}
  .sports:not(:has(.short)) .slead>*{max-width:calc((100% - 2 * var(--gap)) * 4 / 6 + var(--gap))}
}

/* F4 · No Latest Briefings: no orphan label over a hole (the renderer requires T2–T4; this is a safety net). */
.rail:not(:has(.brief))>.lab,.rail:not(:has(.brief)) .rail__fill{display:none}

/* §17 · OPTIONAL SEVENTH STORY (from No. 41; Truman, approved Ilias, 29 Sep). Printed only when the pack has story7.md AND a
   HEDS-FINAL S7 block (template blocks S7 + S7-INSIDE). Also Today then carries three teasers: 05, 06, 07. Every rule is keyed
   on :has(.quiet--07) or on a seventh index link, so six-story fronts are untouched.
   >1180px: three equal two-column cells. ≤1180 (4 columns): 05 spans two, 06 and 07 one each (the Latest Briefings pattern).
   ≤820 (2 columns): 05 full width over 06 | 07 (the rail pattern again). ≤560: stacked, as with six.
   Compact index (≤820): seven links fill two full rows, 4 + 3, on a 12-track grid (no orphan cell). */
@media (min-width:1181px){
  .also:has(.quiet--07) .quiet--05{grid-column:1/span 2}
  .also:has(.quiet--07) .quiet--06{grid-column:3/span 2}
  .also:has(.quiet--07) .quiet--07{grid-column:5/span 2}
  .front:not(:has(.photo--front)) .also:has(.quiet--07) .quiet--06{grid-column:3}
  .front:not(:has(.photo--front)) .also:has(.quiet--07) .quiet--07{grid-column:4}
}
@media (max-width:1180px){
  .also:has(.quiet--07) .quiet--06{grid-column:3}
  .also:has(.quiet--07) .quiet--07{grid-column:4}
}
@media (max-width:820px){
  .also:has(.quiet--07){grid-template-rows:repeat(9,auto)}
  .also:has(.quiet--07) .quiet--05{grid-column:1/-1;grid-row:2/span 4}
  .also:has(.quiet--07) .quiet--06{grid-column:1;grid-row:6/span 4}
  .also:has(.quiet--07) .quiet--07{grid-column:2;grid-row:6/span 4}
  .also:has(.quiet--07) .quiet--06.cr::before{display:none}
  .index-line:has(a:nth-of-type(7)){grid-template-columns:repeat(12,minmax(0,1fr))}
  .index-line:has(a:nth-of-type(7)) a{grid-column:span 3;white-space:normal}
  .index-line:has(a:nth-of-type(7)) a:nth-of-type(n+5){grid-column:span 4}
}