/* =====================================================================
   HFC NEWSROOM  (/news/news.css)
   The /news/ index and every story page under /news/<slug>/.
   Load order: /fonts/hfc-display.css, /system.css (tokens, .card, .chip,
   .btn-*, .link), this file, then /chrome.css (nav, sheet, footer).
   HFC Display Bold for headlines, Skinny for labels, letter-spacing 0
   and no synthetic bold or slant; Titillium Web for reading. Gold only
   for the ticket button and the live on-sale chip; machine stories carry
   their livery colours (the --livery-* tokens).
   ===================================================================== */
:root{color-scheme:dark}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text-2);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:var(--lh-body)}
.nx-main{display:block}
.nx-main img{display:block;max-width:100%}
.nx-wrap{box-sizing:content-box;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}   /* content-box: text starts on the nav logo's left edge */
.nx-nw{white-space:nowrap}
.nx-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* skip link: off screen until focused */
.nx-skip{position:fixed;left:var(--gutter);top:8px;z-index:200;transform:translateY(-200%);
  padding:10px 16px;background:var(--surface-raised);color:var(--text);text-decoration:none;
  font-family:var(--font-skinny);font-size:14px;line-height:1.2;letter-spacing:0;text-transform:uppercase;font-synthesis:none;
  clip-path:var(--clip-s)}
.nx-skip:focus{transform:none;outline:2px solid var(--focus);outline-offset:-4px}

/* ---------- shared type ---------- */
.nx-label,.nx-meta{font-family:var(--font-skinny);font-size:var(--t-label);font-weight:400;font-style:normal;line-height:1.3;
  letter-spacing:0;text-transform:uppercase;font-synthesis:none;color:var(--text-muted)}
.nx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.nx-meta .nx-cat{color:var(--text)}
.nx-sep{display:block;flex:none;width:3px;height:3px;background:currentColor}
.nx-h1,.nx-sec-h,.nx-card-h,.art-h1,.art-body h2,.art-cta-h,.nx-wire-h{font-family:var(--font-display);font-weight:400;font-style:normal;
  letter-spacing:0;text-transform:uppercase;font-synthesis:none;color:var(--text);text-wrap:balance}
.nx-h1,.art-h1{font-size:var(--t-h1);line-height:var(--lh-heading)}
/* --fit (set per heading) is its widest word in ems: on narrow screens the heading shrinks so that word fits */
.nx-h1,.art-h1{font-size:min(var(--t-h1),calc((100vw - 2 * var(--gutter)) / var(--fit,1)))}
.nx-sec-h{font-size:clamp(22px,calc(1.4vw + 14px),36px);line-height:var(--lh-heading)}

/* livery swatches: a square per machine, as on the bracket. --lv paints the swatch, --lvc is the solid colour */
.lv-adrius{--lv:var(--livery-adrius);--lvc:var(--livery-adrius)}
.lv-troy{--lv:var(--livery-troy);--lvc:var(--livery-troy)}
.lv-adesan-x{--lv:var(--livery-adesan-x);--lvc:var(--livery-adesan-x)}
.lv-bang-bang{--lv:var(--livery-bang-bang);--lvc:var(--livery-bang-bang)}
.lv-mighty-mech{--lv:var(--livery-mighty-mech);--lvc:var(--livery-mighty-mech)}
.lv-vulcan{--lv:linear-gradient(135deg,var(--livery-vulcan) 50%,var(--livery-vulcan-2) 50%);--lvc:var(--livery-vulcan)}
.lv-rampage{--lv:var(--livery-rampage);--lvc:var(--livery-rampage)}
.lv-neon{--lv:var(--livery-neon);--lvc:var(--livery-neon)}
.lv{display:inline-flex;align-items:center;gap:3px;flex:none}
.lv > i{display:block;width:8px;height:8px;background:var(--lv)}
@media (forced-colors:active){.lv > i{background:CanvasText}}

/* ======================= /news/ INDEX ======================= */
.nx-ihead{padding-top:var(--space-48);padding-bottom:var(--space-32)}
.nx-ihead .nx-h1{margin-top:var(--space-12)}
.nx-lede{margin-top:var(--space-16);max-width:56ch;font-size:var(--t-lead);line-height:1.55;color:var(--text-2);text-wrap:pretty}

/* filter chips: shown by /news/news.js (without it the page is the full list) */
.nx-filter{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-24)}
.nx-filter[hidden]{display:none}
/* phones: one row that scrolls sideways, edge to edge */
@media (max-width:699px){
  .nx-filter{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .nx-filter::-webkit-scrollbar{display:none}
  .nx-chip{flex:none}
}
.nx-chip{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 var(--space-16);
  font-family:var(--font-skinny);font-size:14px;font-weight:400;font-style:normal;line-height:1.1;letter-spacing:0;text-transform:uppercase;font-synthesis:none;
  white-space:nowrap;color:var(--text-2);background:var(--surface-raised);border:0;border-radius:0;cursor:pointer;
  clip-path:var(--clip-s);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.nx-chip[hidden]{display:none}   /* a category with no story in view for now */
.nx-chip[aria-pressed="true"]{color:var(--bg);background:var(--text)}
.nx-chip:focus-visible{outline:2px solid var(--focus);outline-offset:-5px}
.nx-chip[aria-pressed="true"]:focus-visible{outline-color:var(--bg)}
.nx-chip:active{transform:scale(.98)}
@media (hover:hover){.nx-chip:not([aria-pressed="true"]):hover{color:var(--text);background:#22242A}}
@media (pointer:coarse){.nx-chip{min-height:44px}}
@media (forced-colors:active){.nx-chip{border:1px solid ButtonText}.nx-chip[aria-pressed="true"]{border-width:3px}}

/* the story grid: the first story in view is the lead, across the whole row */
.nx-feed{padding-bottom:var(--sec-compact)}
.nx-grid{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24)}
@media (min-width:700px){.nx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.nx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nx-grid > li{display:flex;min-width:0}
.nx-grid > li[hidden]{display:none}
.nx-grid > li.is-lead{grid-column:1 / -1}

/* ---------- story card ---------- */
.nx-card.card{display:flex;flex-direction:column;width:100%;min-width:0;padding:0;overflow:hidden}
.nx-media{position:relative;flex:none;aspect-ratio:3 / 2;overflow:hidden;background:var(--surface-raised)}
.nx-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
/* portraits (machine renders, tape art): the whole figure, on its livery */
.nx-media--fit{background:radial-gradient(70% 80% at 50% 40%,color-mix(in srgb,var(--lvc,#2A78D6) 42%,transparent),transparent 72%),var(--surface-raised)}
.nx-media--fit img{object-fit:contain;padding-top:var(--space-12)}
/* a machine render: cropped to the helmet and shoulders in a card (and in a stacked lead); in the side-by-side lead the
   whole machine stands at full height, its studio grey fading at the sides into a matching grey lit in its livery */
.nx-media--portrait img{object-position:50% 12%}
@media (min-width:900px){
  .is-lead .nx-media--portrait{background:radial-gradient(38% 80% at 50% 55%,color-mix(in srgb,var(--lvc,#2A78D6) 16%,#000),#000 72%)}
  .is-lead .nx-media--portrait img{width:auto;margin:0 auto;object-fit:contain;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
}
/* a machine story's liveries, along the foot of its picture */
.nx-lvbar{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;height:4px}
.nx-lvbar > i{flex:1;background:var(--lv)}
.nx-card-body{display:flex;flex:1;flex-direction:column;gap:var(--space-12);padding:var(--space-24);container-type:inline-size}
.nx-card-h{font-size:min(clamp(20px,calc(.5vw + 16px),24px),calc(100cqi / var(--fit,1)));line-height:1.1}
.nx-card-h a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.nx-card-h a::after{content:"";position:absolute;inset:0;z-index:2}   /* the whole card is the link */
.nx-card-h a:focus-visible{outline:none}
.nx-card-h a:focus-visible::after{outline:2px solid var(--focus);outline-offset:-5px}
.nx-card-dek{font-size:15px;line-height:1.5;color:var(--text-2);text-wrap:pretty}
/* a card's meta is the category and the date (as on the homepage cards), on one line, so the headlines in a row line up;
   the lead and the story page keep the reading time. In a very narrow card the category takes its own line. */
.nx-card .nx-meta > :nth-last-child(-n+2){display:none}
.is-lead .nx-card .nx-meta > :nth-last-child(-n+2){display:block}
@container (max-width:265px){
  .nx-card .nx-meta .nx-cat{flex-basis:100%}
  .nx-card .nx-meta .nx-cat + .nx-sep{display:none}
}
.nx-read{display:none;align-items:center;gap:var(--space-8);margin-top:auto;padding-top:var(--space-8);
  font-family:var(--font-skinny);font-size:14px;line-height:1.1;letter-spacing:0;text-transform:uppercase;font-synthesis:none;color:var(--text)}
.nx-read svg{flex:none;width:12px;height:10px}
@media (hover:hover){
  .nx-card.card:hover{background:var(--surface-raised)}
  .nx-card.card:hover::before{background:var(--line-strong)}
  .nx-card:hover .nx-media img{transform:scale(1.03)}
  .nx-card:hover .nx-card-h a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
}
.nx-card:active .nx-card-h a::after{background:var(--surface-hover)}

/* the lead story */
.is-lead .nx-card-h{font-size:min(clamp(26px,calc(1.3vw + 18px),40px),calc(100cqi / var(--fit,1)));line-height:var(--lh-heading)}
.is-lead .nx-card-dek{font-size:16px;line-height:1.55}
.is-lead .nx-read{display:inline-flex}
@media (min-width:900px){.is-lead .nx-read{margin-top:var(--space-8)}}
@media (min-width:900px){
  .is-lead .nx-card.card{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .is-lead .nx-media{aspect-ratio:auto;height:100%;min-height:440px}
  .is-lead .nx-media img{position:absolute;inset:0}   /* the text sets the row height, never the picture */
  .is-lead .nx-card-body{justify-content:flex-end;gap:var(--space-16);padding:var(--space-48) var(--space-32) var(--space-32)}
  .is-lead .nx-card-dek{font-size:var(--t-lead)}
}

/* ---------- in brief: the dated wire ---------- */
.nx-briefs{padding-bottom:var(--sec)}
.nx-briefs[hidden]{display:none}
.nx-briefs-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-8) var(--space-16)}
.nx-wire{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--space-32);margin-top:var(--space-24)}
@media (min-width:700px){.nx-wire{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.nx-wire{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nx-wire > li{min-width:0;border-top:1px solid var(--line)}
.nx-wire > li[hidden]{display:none}
.nx-wire a{display:flex;flex-direction:column;gap:var(--space-8);height:100%;padding:var(--space-16) 0 var(--space-24);color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.nx-wire a:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.nx-wire-h{font-size:clamp(18px,calc(.4vw + 15px),21px);line-height:1.12}
.nx-wire p:not(.nx-meta){font-size:15px;line-height:1.5;color:var(--text-2);text-wrap:pretty}   /* not the meta line: it keeps the 12px muted label */
.nx-wire .nx-meta time{color:var(--text)}
@media (hover:hover){.nx-wire a:hover .nx-wire-h{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}}

/* ======================= STORY PAGE ======================= */
.art-head{padding-top:var(--space-48)}
.art-kicker.chip{color:var(--text);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-fast) var(--ease)}
.art-kicker.chip:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}   /* inside: the chip's clip-path cuts off anything drawn outside it */
@media (hover:hover){.art-kicker.chip:hover{background:#22242A}}
@media (pointer:coarse){.art-kicker.chip{min-height:44px;padding:0 var(--space-16)}}   /* a 44px tap target, as the /news/ chips */
.art-h1{max-width:20ch;margin-top:var(--space-16)}
.art-dek{max-width:58ch;margin-top:var(--space-16);font-size:clamp(18px,calc(.4vw + 16px),21px);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.art-head .nx-meta{margin-top:var(--space-24)}

/* the hero: full bleed on phones, a chamfered frame on the wrap from 700px */
.art-hero{position:relative;overflow:hidden;margin:var(--space-32) calc(-1 * var(--gutter)) 0;aspect-ratio:3 / 2;background:var(--surface)}
.art-hero img{width:100%;height:100%;object-fit:cover}
@media (min-width:700px){.art-hero{margin-left:0;margin-right:0;aspect-ratio:16 / 9;clip-path:var(--clip-l)}}
@media (min-width:1000px){.art-hero{aspect-ratio:2 / 1}}
/* a portrait: the whole machine on its livery */
.art-hero--fit{aspect-ratio:4 / 5;background:radial-gradient(60% 75% at 50% 45%,color-mix(in srgb,var(--lvc,#2A78D6) 45%,transparent),transparent 75%),var(--surface)}
.art-hero--fit img{object-fit:contain;padding-top:var(--space-24)}
@media (min-width:700px){.art-hero--fit{aspect-ratio:16 / 9}}
@media (min-width:1000px){.art-hero--fit{aspect-ratio:2 / 1}}
/* a machine render is a full portrait on a black backdrop, not a cut-out, so contained it would show as a black box on
   the livery. Phones: it fills the 4:5 frame. Wider frames: it stands in the middle at full height and its edges fade at
   the sides into the same black, lit faintly in the machine's livery */
.art-hero--fit:has(> img[src*="/img/machine-"]){background:radial-gradient(38% 80% at 50% 55%,color-mix(in srgb,var(--lvc,#2A78D6) 16%,#000),#000 72%)}
.art-hero--fit > img[src*="/img/machine-"]{object-fit:cover;object-position:50% 0;padding-top:0}
@media (min-width:700px){
  .art-hero--fit > img[src*="/img/machine-"]{width:auto;margin:0 auto;object-fit:contain;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
}
/* the wordmark: contained on a dark plate */
.art-hero--mark{aspect-ratio:16 / 9;background:repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 6px),var(--surface)}
.art-hero--mark img{object-fit:contain;padding:0 24%}
@media (min-width:1000px){.art-hero--mark{aspect-ratio:2 / 1}}

/* body and key facts: the facts first on phones, a sticky column beside the text from 1000px */
.art-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32);padding-top:var(--space-32);padding-bottom:var(--sec-compact)}
@media (min-width:1000px){
  .art-layout{grid-template-columns:minmax(0,1fr) minmax(260px,300px);column-gap:var(--space-64);padding-top:var(--space-48)}
  .art-body{grid-column:1;grid-row:1}
  .art-facts{grid-column:2;grid-row:1;position:sticky;top:96px;align-self:start}
}
.art-facts.card{padding:var(--space-24)}
.art-facts-h{margin-bottom:var(--space-12)}
.art-facts ul{list-style:none}
.art-facts li{display:flex;gap:var(--space-12);padding:10px 0;border-top:1px solid var(--line);
  font-family:var(--font-body);font-size:15px;line-height:1.45;color:var(--text)}
.art-facts li:first-child{padding-top:0;border-top:0}
.art-facts li:last-child{padding-bottom:0}
.art-facts li::before{content:"";flex:none;width:6px;height:6px;margin-top:.55em;background:var(--text-muted)}
/* tablets: the box spans the wrap above the text, so the facts sit two to a row (a shorter box, the story starts sooner) */
@media (min-width:700px) and (max-width:999px){
  .art-facts ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-32)}
  .art-facts li:nth-child(2){padding-top:0;border-top:0}
  .art-facts li:nth-last-child(2):nth-child(odd){padding-bottom:0}
}

/* the measure: Titillium's "0" (1ch) is wide, so 53ch sets about 70 characters to a line (66ch set about 87) */
.art-body{max-width:53ch;font-size:17px;line-height:1.7;color:var(--text-2)}
@media (min-width:700px){.art-body{font-size:18px}}
.art-body p{text-wrap:pretty}
.art-body > p:first-child{color:var(--text)}
.art-body p + p{margin-top:1.1em}
.art-body h2{margin:1.9em 0 .6em;font-size:clamp(20px,calc(.8vw + 15px),28px);line-height:1.1;scroll-margin-top:96px}
.art-body > h2:first-child{margin-top:0}
.art-body .link{color:var(--text)}
/* a machine's own section: its livery on the left edge and its head */
.art-body h2.art-m{display:flex;align-items:center;gap:var(--space-12);padding-left:var(--space-12);border-left:4px solid var(--lvc)}
.art-m img{flex:none;width:44px;height:44px;object-fit:cover;background:var(--surface-raised);clip-path:var(--clip-s)}
/* a quarterfinal: the two corners' swatches before the pairing, beside its first line when a long pairing wraps */
.art-body h2.art-qf{display:flex;align-items:flex-start;gap:var(--space-12)}
.art-qf .lv{margin-top:calc((1.1em - 10px) / 2)}
.art-qf .lv > i{width:10px;height:10px}
.art-qf > span:last-child{flex:1 1 auto;min-width:0}

/* share */
.art-share{margin-top:var(--space-48);padding-top:var(--space-24);border-top:1px solid var(--line)}
.art-body .art-share-h{margin:0;font-family:var(--font-skinny);font-size:var(--t-label);line-height:1.3;color:var(--text-muted)}
.art-share-row{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-12)}
.art-share-row svg{flex:none;width:16px;height:16px}
.art-share-row [hidden]{display:none}
@media (pointer:coarse){.art-share-row .btn-s{--_h:44px}}
/* phones: WhatsApp and X become square icon buttons (each keeps its aria-label), so the row stays on one line */
@media (max-width:479px){
  .art-share-row a.btn-s{--_px:0;width:var(--_h)}
  .art-share-row a.btn-s > span{display:none}
}
.art-share-status{min-height:1.5em;margin-top:var(--space-8);font-size:var(--t-small);line-height:1.5;color:var(--text-2)}

/* the one call to action */
.art-cta-sec{padding-bottom:var(--sec-compact)}
.art-cta.card{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);align-items:center;padding:clamp(24px,4vw,48px)}
@media (min-width:800px){.art-cta.card{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-48)}}
.art-cta-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-12)}
.art-cta-top .chip[hidden]{display:none}
.art-cta-h{margin-top:var(--space-12);font-size:clamp(24px,calc(1.6vw + 14px),40px);line-height:var(--lh-heading)}
.art-cta-p{max-width:52ch;margin-top:var(--space-8);font-size:16px;line-height:1.55;color:var(--text-2)}
.art-cta .btn-l{width:100%}
@media (min-width:800px){.art-cta .btn-l{width:auto;white-space:nowrap}}
.btn-arr{flex:none;display:block;width:.75em;height:.625em;overflow:visible}

/* more from the championship: a snap rail below 900px, three across above */
.art-more{padding-bottom:var(--sec)}
.art-more-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-12) var(--space-24);margin-bottom:var(--space-24)}
.nx-all{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-skinny);font-size:14px;line-height:1.1;letter-spacing:0;text-transform:uppercase;font-synthesis:none}
.nx-rail{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24)}
.nx-rail > li{display:flex;min-width:0}
@media (max-width:899px){
  .nx-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:var(--space-16);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) var(--space-8);scrollbar-width:none}
  .nx-rail::-webkit-scrollbar{display:none}
  .nx-rail > li{scroll-snap-align:start}
}
@media (min-width:600px) and (max-width:899px){.nx-rail{grid-auto-columns:46%}}

@media (prefers-reduced-motion:reduce){
  .nx-media img,.nx-chip,.art-kicker.chip{transition:none}
  .nx-card:hover .nx-media img{transform:none}
  .nx-chip:active{transform:none}
  .nx-rail{scroll-behavior:auto}
}
@media (forced-colors:active){
  .nx-card-h a:focus-visible::after{outline-color:Highlight}
  .art-body h2.art-m{border-left-color:CanvasText}
}

/* ---------- v10 (18 Oct 2026): the founder's top stories ----------
   Six stories lead /news/ (and the homepage). Every picture is landscape; until a story's picture arrives it shows a
   plain "image to come" panel (.nx-ph). Copy still to come is a dashed note (.nx-todo, data-placeholder). On wide
   screens the top stories under the lead fill whole rows: threes, the last two or four in pairs (news.js sets --w on
   a six-column grid); on tablets pairs, an odd last one across the row. The older stories follow under More stories. */
.nx-ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 9px),linear-gradient(160deg,#1A1B20,#0F1013)}
.nx-ph::before{content:"";width:min(30%,200px);aspect-ratio:1265 / 261;background:url(/img/hfc-wordmark.png) center / contain no-repeat;opacity:.09}
.nx-ph-l{position:absolute;top:12px;left:12px;padding:4px 8px;border:1px dashed rgba(237,234,227,.22);
  font-family:var(--font-skinny);font-size:11px;font-weight:400;font-style:normal;line-height:1.2;letter-spacing:0;text-transform:uppercase;color:var(--text-muted);font-synthesis:none}
.nx-media--ph,.art-hero--ph{background:#121317}
.art-hero--ph .nx-ph-l{top:auto;bottom:16px;left:16px;font-size:12px}
.nx-cur{font-family:'Titillium Web',Inter,sans-serif;font-weight:700;font-style:italic;font-synthesis:style}   /* the HFC faces have no $ */
.nx-card .nx-meta > .nx-cat:only-child{display:block}   /* a card meta with the category alone (no date yet) */
.nx-todo{margin-top:1.1em;padding:var(--space-12) var(--space-16);border:1px dashed rgba(237,234,227,.25);
  font-family:var(--font-skinny);font-size:13px;font-weight:400;line-height:1.5;letter-spacing:0;text-transform:uppercase;color:var(--text-muted);font-synthesis:none}
.art-body > .nx-todo:first-child{margin-top:0}
.nx-todo-i{padding:2px 6px;border:1px dashed rgba(237,234,227,.25);color:var(--text-muted)}
.nx-topsec{padding-bottom:var(--space-48)}
.nx-top > li:not(.is-lead) .nx-media{aspect-ratio:16 / 9}   /* the top stories' pictures are landscape, 16:9 */
.nx-more-h{margin-bottom:var(--space-24)}
@media (min-width:700px) and (max-width:999px){.nx-top > li.is-row2{grid-column:1 / -1}}
@media (min-width:1000px){
  .nx-top{grid-template-columns:repeat(6,minmax(0,1fr))}
  .nx-top > li{grid-column:span var(--w,2)}
  .nx-top > li.is-lead{grid-column:1 / -1}
}
/* 21 Oct: the teaser story plays its video in the hero. The official thumbnail with a play button is a link to the video on
   YouTube; with news.js the first tap swaps in the player (youtube-nocookie), so nothing from YouTube loads until then. */
.art-hero.art-hero--video{aspect-ratio:16 / 9}
.art-video{position:absolute;inset:0;display:block;color:var(--text)}
.art-video img{width:100%;height:100%;object-fit:cover}
/* the play button sits in the bottom corner, clear of the title lettering in the thumbnail */
.art-play{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;
  font-family:var(--font-skinny);font-size:15px;line-height:1;letter-spacing:0;text-transform:uppercase;
  background:rgba(10,10,11,.78);border:1px solid var(--line-strong);clip-path:var(--clip-s);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.art-play svg{width:20px;height:20px;flex:none}
.art-play-t{color:var(--text-muted);font-variant-numeric:tabular-nums}
@media (hover:hover){.art-video:hover .art-play{background:rgba(10,10,11,.88);border-color:var(--text)}}
.art-video:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.art-hero--video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:699px){.art-play{right:12px;bottom:12px;height:42px;padding:0 14px 0 12px;gap:8px;font-size:13px}.art-play svg{width:16px;height:16px}}