/* NOISE news components. Tokens live only in themes/noise.css, generated
   from resources/design/tokens.edn; news.css owns the site's layout.
   Reading sits on sage at night and paper by day, on the house texture: a
   still two-ink dither in the page's own inks. Structure is ink rules and
   column guides; display and statements set in the wordmark's cut; lime is
   kept for live things and the one primary action. */

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
/* The texture rides the canvas with the ground, so it runs the full page on
   short pages too. One css px per dot; never scaled. Bands, plates and
   prints lie on top of it untextured. */
html{background:var(--ground);color:var(--ink);font:400 var(--type-read)/1.5 var(--sans);font-variant-numeric:tabular-nums;font-optical-sizing:auto;-webkit-text-size-adjust:100%;font-synthesis:none}
body{min-width:300px;min-height:100vh;color:var(--ink)}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--mute);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::selection{background:var(--lime);color:var(--on-lime)}
h1,h2,h3{font-weight:500;line-height:1.15}
h2{font-size:var(--type-head)}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
.mono{font:var(--type-caption)/1.5 var(--mono)}
.mute{color:var(--mute)}
.tnum{font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;top:0;left:-9999px;z-index:var(--layer-toast);padding:var(--space-2) var(--space-3);background:var(--ground);color:var(--ink);outline:1px solid var(--ink)}
.skip-link:focus{top:var(--space-3);left:var(--space-3)}
.wrap{width:min(100%,1080px);margin:0 auto;padding:0 var(--margin) var(--space-7)}

/* The display cut: the wordmark's own voice, Bricolage at 800 and 75%
   width. Every display and statement role sets in it. */
.mast,.display,.statement,.static-h,.desk-title,.front-game-board>summary,.sports-board-top h3{font-family:var(--sans);font-weight:var(--cut-weight);font-stretch:var(--cut-stretch);letter-spacing:var(--cut-tracking)}

/* Masthead: the wordmark, the edition stamp and the theme toggle. */
.mast-lockup{display:block;color:var(--ink);text-decoration:none}
.mast{display:inline-block;font-size:var(--type-title);line-height:1;color:var(--ink);text-decoration:none}
.top{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-6);padding:var(--space-5) 0 0}
.slug{font-weight:400;font-stretch:100%;letter-spacing:0;font-size:var(--type-read);margin-left:.5em}
.stamp{display:flex;flex-wrap:wrap;gap:0 var(--space-4);align-items:baseline;margin-left:auto;font:400 var(--type-read)/1.5 var(--sans);color:var(--ink)}
/* The theme toggle is an act on this page: a 1px outline, no underline. */
.theme-toggle{padding:0 var(--space-2);font:400 var(--type-small)/1.6 var(--sans);color:var(--ink);outline:1px solid var(--ink);outline-offset:-1px;white-space:nowrap}
.tagline{display:block;color:var(--mute);padding:var(--space-2) 0 0}

/* Pipe lists wrap with the document, including on phones. The pipe is
   drawn, not written, and trails each item except the last, so a wrapped row
   never opens with a separator. Nav links navigate: the mute underline at
   rest, ink on hover; the current page is 600 over a 2px ink underline. */
.nav,.news-nav{display:flex;flex-wrap:wrap;gap:var(--space-1) 0;list-style:none}
.nav,.news-nav{padding:var(--space-4) 0 var(--space-3);border-bottom:1px solid var(--ink)}
.news-nav .nav{padding:0;border-bottom:0}
.nav li:not(:last-child)::after,.foot .links li:not(:last-child)::after{content:"|";color:var(--mute);margin:0 .6em}
.nav a[aria-current="page"]{font-weight:600;text-decoration-color:var(--ink);text-decoration-thickness:2px}

/* Static: the chip is a lime fill with on-lime text in both themes, the
   band is the deep ground with a still dithered edge across its top, and
   the headline sets at statement size. */
.static-chip{display:inline-block;padding:var(--space-1) var(--space-2);background:var(--lime);color:var(--on-lime);font:600 var(--type-small)/1 var(--sans);font-stretch:100%;letter-spacing:0;vertical-align:.32em}
.static-h{font-size:var(--type-statement);line-height:var(--leading-statement);overflow-wrap:anywhere}
.static-h .static-chip{margin-right:var(--space-2)}
.story-context .static-chip{vertical-align:baseline}

/* Lead and reading. The only display headline belongs to the page's lead,
   sized by its own column: 12.5% of the copy's inline size, 48 to 80 px. */
.lead{padding:var(--space-5) 0 var(--space-6);border-bottom:1px solid var(--rule)}
.story-context{display:block;margin-bottom:var(--space-2);color:var(--mute)}
.story-desk{font:400 var(--type-read)/1.5 var(--sans);color:var(--mute)}
.story-update{font:400 var(--type-small)/1.5 var(--sans);color:var(--mute)}
.lead .story-copy{container-type:inline-size}
.display{font-size:clamp(48px,12.5cqi,80px);line-height:var(--leading-display);color:var(--ink);margin:var(--space-2) 0 var(--space-5);overflow-wrap:anywhere}
.statement{font-size:var(--type-statement);line-height:var(--leading-statement);color:var(--ink);overflow-wrap:anywhere}
/* A headline is its own cue that it goes to the story: its size and weight
   carry it at rest, and the underline arrives in ink on hover (or while its
   register row is open). */
.headline-link{color:var(--ink);text-decoration:none}
.headline-link:hover{text-decoration:underline;text-decoration-color:var(--ink)}
.blurb{max-width:66ch;font-size:var(--type-read);line-height:1.5;color:var(--ink)}
.copy-unavailable,.story-followup{margin-top:var(--space-3);color:var(--mute);font-size:var(--type-small)}

/* Sourcing: one outlet column beside each reporting title. */
.story-sourcing{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--space-4) var(--space-7);margin-top:var(--space-5);max-width:960px}
.source-group{min-width:0}
.source-group-label{display:block;color:var(--mute);padding-bottom:var(--space-2);border-bottom:1px solid var(--rule);margin-bottom:var(--space-2)}
.links{margin:0;padding:0;list-style:none}
.source-group .links{display:flex;flex-direction:column}
.source-group .links a{display:grid;grid-template-columns:6em minmax(0,1fr);gap:var(--space-3);padding:var(--space-1) 0;font-size:var(--type-small);min-width:0;text-decoration:none}
.links a b{font-weight:400;text-decoration:underline;text-decoration-color:var(--mute);text-decoration-thickness:1px;text-underline-offset:.18em}
.links a:hover b{text-decoration-color:var(--ink)}
.source-title{color:var(--mute)}
.links a b,.source-title{overflow-wrap:anywhere}

/* Instruments: the Signal read and a monochrome market table. Signal read
   draws as density, two-ink dither patches from sparse (calm) to dense
   (chaotic), so levels read as tone rather than height. Today is framed
   with a 2px ink outline and named in words, never marked by colour. */
.instruments{display:grid;grid-template-columns:1fr;gap:var(--space-5);padding:var(--space-5) 0;border-bottom:1px solid var(--rule)}
.temp-label{color:var(--mute)}
.temp-level{display:block;font:600 var(--type-title)/1.05 var(--sans);margin:var(--space-1) 0 var(--space-2)}
.temp-read{max-width:56ch;display:block}
.meter,.plate-meter{display:flex;align-items:center;gap:var(--space-2)}
.meter{margin-top:var(--space-4)}
.meter i,.plate-meter i{display:block;flex:0 0 auto;width:24px;height:24px;background-color:var(--deep)}
.plate-meter i{width:16px;height:16px}
.meter .lv-calm,.plate-meter .lv-calm{background-image:var(--density-1)}
.meter .lv-steady,.plate-meter .lv-steady{background-image:var(--density-2)}
.meter .lv-busy,.plate-meter .lv-busy{background-image:var(--density-3)}
.meter .lv-heavy,.plate-meter .lv-heavy{background-image:var(--density-4)}
.meter .lv-tense,.plate-meter .lv-tense{background-image:var(--density-5)}
.meter .lv-turbulent,.plate-meter .lv-turbulent{background-image:var(--density-6)}
.meter .lv-chaotic,.plate-meter .lv-chaotic{background-image:var(--density-7)}
/* An unscaled reading, a label outside the seven levels, is an empty
   outlined patch. */
.meter .lv-unscaled{background:none;outline:1px solid var(--rule);outline-offset:-1px}
.meter i.now,.plate-meter i.now{outline:2px solid var(--ink);outline-offset:2px}

.meter-cap{display:flex;justify-content:space-between;max-width:240px;margin-top:var(--space-2);font:var(--type-caption)/1.5 var(--mono);color:var(--mute)}
.markets{width:100%;table-layout:fixed;font:var(--type-caption)/1.5 var(--mono)}
.markets th.spark-col{width:40%}
.markets th.num{width:16%}
.markets th{text-align:left;font-weight:400;color:var(--mute);padding:0 0 var(--space-2);border-bottom:1px solid var(--ink)}
.markets td{padding:var(--space-1) 0;border-bottom:1px solid var(--guide);vertical-align:middle;font:var(--type-caption)/1.5 var(--mono)}
.markets .market-spark{padding-left:var(--space-3);padding-right:var(--space-6)}
.markets .num{text-align:right}
.markets svg{display:block;width:100%;height:28px;overflow:visible}
.markets polyline{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media (max-width:599px){.markets th.spark-col{width:22%}.markets th.num{width:22%}.markets .market-spark{padding-right:var(--space-3)}}

/* The register: Time, Story, Sources. Every row shows its blurb as a deck
   under the headline. The Sources cell is the row's native disclosure and
   the headline link is its sibling, so nothing interactive nests; the
   follow-up and sourcing sit in a body the open state reveals. The desk is
   named in the section head, and under the time only where desks mix. */
.reghead,.reg .story-row,.reg .body{display:grid;grid-template-columns:6rem minmax(0,1fr) 8rem}
.reghead{padding-top:var(--space-5);color:var(--mute)}
.reghead>span,.reg .story-row>span,.reg summary>span,.reg .body>div{padding:var(--space-3) var(--space-3) var(--space-3) 0;border-left:1px solid var(--guide);padding-left:var(--space-3)}
.reghead>span:first-child,.reg .story-row>span:first-child,.reg .body>div:first-child{border-left:0;padding-left:0}
.reghead>span{padding-top:0;padding-bottom:var(--space-2);border-bottom:1px solid var(--ink)}
.reg .story-row{align-items:start;border-bottom:1px solid var(--rule)}
.reg .story-row>.c1{color:var(--mute);font:var(--type-caption)/1.5 var(--mono);white-space:nowrap;padding-top:calc(var(--space-3) + 4px)}
.reg .row-desk{display:block;margin-top:2px;color:var(--mute);font:400 var(--type-small)/1.5 var(--sans);white-space:normal}
/* The disclosure fills its cell, so the Sources guide runs the row's full height. */
.reg .story-row>details{grid-column:3/4;min-width:0;align-self:stretch}
.reg summary{display:flex;height:100%;cursor:pointer;list-style:none}
.reg summary>.c3{flex:1;padding-top:calc(var(--space-3) + 4px)}
.reg summary::-webkit-details-marker{display:none}
.reg summary .c3::before{content:"";display:inline-block;width:7px;height:8px;margin-right:6px;background:var(--mute);clip-path:polygon(0 0,100% 50%,0 100%)}
.reg details[open] summary .c3::before{clip-path:polygon(0 0,100% 0,50% 100%)}
.reg .c3{color:var(--mute);font:var(--type-caption)/1.5 var(--mono)}
.reg .body{grid-column:1/-1}
.reg .story-row:has(>details:not([open]))>.body{display:none}
.js .reg .story-row{cursor:pointer}
.js .reg .story-row>.body{cursor:auto}
.reg .head{font-size:var(--type-lead);line-height:1.25;font-weight:600;overflow-wrap:anywhere}
.reg .story-row:hover .head,.reg .story-row:has(>details[open]) .head{text-decoration:underline;text-decoration-color:var(--ink)}
.reg .upd{color:var(--ink);font-style:normal;font-weight:400;font-size:var(--type-small);margin-left:.4em;white-space:nowrap}
.reg .body>div{min-width:0;padding-top:0;padding-bottom:var(--space-5);min-height:1px}
.reg .deck{display:block;margin-top:var(--space-2);max-width:62ch;font:400 var(--type-read)/1.5 var(--sans);color:var(--mute)}
.reg .deck-note{font-size:var(--type-small)}
.reg .story-row:has(>details:not([open]))>.c2>.deck{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reg .body .story-followup{margin-top:var(--space-3)}
.reg .body .story-sourcing{margin-top:var(--space-4);max-width:none}
@media (max-width:599px){
  .reghead{display:none}
  .reg .story-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) 0;padding:var(--space-3) 0}
  .reg .story-row>span,.reg summary>span{border-left:0;padding:0}
  .reg .story-row .c2{flex:0 0 100%;order:0}
  .reg .story-row .c1{order:1;padding-top:0;font-size:var(--type-caption)}
  .reg .story-row .c1:not(:empty)::after{content:",";white-space:pre}
  .reg .row-desk{display:inline;margin:0;font-size:var(--type-small)}
  .reg .c1 time+.row-desk::before{content:", ";white-space:pre}
  .reg .story-row>details{order:2;align-self:auto}
  .reg .story-row>.body{order:3;flex:0 0 100%}
  /* Match the time's line box; an inline summary inherits the larger body strut. */
  .reg summary{display:block;height:auto;font:var(--type-caption)/1.5 var(--mono);padding:3px 0;margin:-3px 0 -3px .4em}
  .reg summary>.c3{padding-top:0}
  .reg .body{display:block}
  .reg .body>div{border-left:0;padding:0 0 var(--space-4)}
  .reg .body>div:empty{display:none}
}

/* Game board: hairline rows, with a live square only on live status. The
   whole card is one link, so it carries no resting underline (a card, not a
   line of text); its team or race names underline on hover. */
.sports-board-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-3)}
.sports-board-top h3{font-size:var(--type-head);line-height:1.1}
.sports-board-credit{margin:var(--space-4) 0 0;color:var(--mute);font-size:var(--type-small)}
.sports-board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-6);align-items:start;margin-top:var(--space-2)}
.game-kicker{grid-column:1/-1;margin:var(--space-4) 0 2px;color:var(--mute);font:400 var(--type-read)/1.5 var(--sans)}
.game-kicker-live{color:var(--ink);font-weight:600}
.game-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--rule);color:var(--ink);text-decoration:none}
.game-card-tracked .game-team-name{font-weight:500}
a.game-card:hover .game-team-name,a.game-card:hover .race-name{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
.game-teams{display:grid;gap:var(--space-2);align-content:center;min-width:0}
.game-team{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:0 var(--space-2);align-items:center;color:var(--mute);font-size:var(--type-small)}
.game-team-lead{color:var(--ink);font-weight:600}
.game-team img,.game-logo-blank{width:22px;height:22px;object-fit:contain}
.game-team-name{overflow-wrap:anywhere}
.game-team-score{color:var(--ink);font:var(--type-caption)/1.5 var(--mono)}
.game-side{display:grid;align-content:center;gap:var(--space-1);min-width:96px;max-width:160px}
.game-status{color:var(--ink);font:400 var(--type-small)/1.5 var(--sans)}
/* Live: a lime square edged in ink, beside the word. */
.live::before,.game-status-live::before{content:"";display:inline-block;width:8px;height:8px;background:var(--lime);outline:1px solid var(--ink);margin-right:.5em;vertical-align:baseline}
.game-side-meta{color:var(--mute);font:400 var(--type-small)/1.5 var(--sans)}
.game-source{grid-column:1/-1;margin-top:var(--space-2)}
.game-card-race{grid-row:span 2;grid-template-columns:1fr;align-content:start}
.race-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-1) var(--space-3)}
.race-name{font:500 var(--type-lead)/1.25 var(--sans);overflow-wrap:anywhere}
.race-drivers{margin-top:var(--space-1);color:var(--mute);font:400 var(--type-small)/1.5 var(--sans)}
.race-sessions{margin-top:var(--space-2);font:var(--type-caption)/1.5 var(--mono)}
.race-sessions th,.race-sessions td{padding:3px 0;border-top:1px solid var(--guide);color:var(--mute);font-weight:400}
.race-sessions th{text-align:left}
.race-sessions td{text-align:right}
.race-sessions tr:last-child th,.race-sessions tr:last-child td{color:var(--ink)}
.race-sessions .race-session-past th,.race-sessions .race-session-past td{color:var(--mute)}
@media (max-width:899px){.sports-board-grid{grid-template-columns:1fr;gap:0}.game-card-race{grid-row:auto}}

/* Plates: the edition's one weather plate beside its lead, a two-ink dither
   shown at exactly its pixel size, captioned with the Signal read. */
.art-plate{display:block;background:var(--plate);overflow:hidden}
.plate{display:block;margin:0}
.plate .art-plate img{display:block;image-rendering:pixelated}
.plate .cap{display:block;margin-top:var(--space-3);color:var(--mute);font:var(--type-caption)/1.5 var(--mono)}
.plate .plate-meter{margin:0 0 var(--space-3) 3px}
.plate-caption{display:block}

/* Footer: one ink rule, a colophon sentence and spaced links. */
.foot{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);padding:var(--space-4) 0 var(--space-6);border-top:1px solid var(--ink);margin-top:var(--space-6);color:var(--mute)}
.foot .links{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--space-1) 0}

@media (prefers-reduced-motion:no-preference){a,button,summary span{transition:color var(--motion-color)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media (forced-colors:active){
  /* Fills that carry meaning survive forced palettes: the register's
     disclosure marker, the live square and sparkline strokes. Density
     patches keep their dither; today keeps its frame. */
  .reg summary .c3::before{forced-color-adjust:none;background:CanvasText}
  .live::before,.game-status-live::before{forced-color-adjust:none;background:Highlight}
  .meter i,.plate-meter i{forced-color-adjust:none}
  .markets polyline{stroke:CanvasText}
}
@media print{
  html{background:var(--ground)}
  .theme-toggle{display:none}
}