/* ==========================================================================
   THE DAILY SIGNAL — ARTICLE VISUAL GRAMMAR   (approved A1-A3; library round A4)
   ==========================================================================

   This is a GRAMMAR, not a template. It gives an article a vocabulary of
   editorial components and a set of rules about how they may be combined. The
   content of each story decides which ones it uses and where. Two articles
   built from this file should not look like the same page with different words
   in it.

   It belongs to the same publication as the Current Edition and the Archive:
   the same four type families, the same colour tokens, the same readability
   floors, the same number-motion contract, the same reduced-motion promise.

   It deliberately does NOT import the Current Edition's card system. An
   article is a place to read for eight minutes; a card is a place to decide
   in two seconds. Stacking cards down a page is the failure this round exists
   to fix, not the fix.

   Everything here is scoped under .da-article so it can never leak into the
   nav, the Kit signup, or anything else the page shares with the site.
   ========================================================================== */

/* ---- 1. Fonts. Same five faces as the publication, self-hosted, no external
        request. The production article pages pull Inter and Space Grotesk from
        Google Fonts today; these are the identical files the Current Edition
        already embeds, served same-origin and preloaded. ------------------ */

@font-face{font-family:'DS Inter';src:url('/news/assets/fonts/font-inter.c9407645.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'DS Space Grotesk';src:url('/news/assets/fonts/font-spacegrotesk.a0d054c4.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:'DS Playfair';src:url('/news/assets/fonts/font-playfair.5d91eb5d.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:'DS Playfair';src:url('/news/assets/fonts/font-playfair-italic.3308a003.woff2') format('woff2');
  font-weight:400 900;font-style:italic;font-display:swap;}
@font-face{font-family:'DS Bebas';src:url('/news/assets/fonts/font-bebas.441b026d.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}

/* ---- 2. Tokens --------------------------------------------------------

   THE PALETTE LIVES ON :root, NOT ON .da-article.

   This is the bug that made the A2 progress bar invisible, and it is worth
   stating plainly because the failure mode is silent. The tokens used to be
   declared on `.da-article`. The progress bar is a SIBLING of the article, not a
   descendant, so `var(--teal)` inside its rule resolved to nothing, the whole
   `background` declaration was dropped as invalid, and the bar painted no colour
   at all. The audit still passed, because it measured the transform - the
   mechanism was working perfectly and painting nothing.

   A metric that can be satisfied without satisfying the requirement is the wrong
   metric. The audit now reads the computed background and box-shadow. */

:root{
  --ink:#050d0a;
  --surface:#16211f;
  --surface-2:#1c2b28;
  --surface-3:#2d4440;
  --rule:rgba(100,255,218,.22);
  --rule-soft:rgba(233,226,211,.14);
  --teal:#64ffda;
  --violet:#a78bfa;
  --yellow:#f5e400;
  --ember:#ff7a45;
  --paper:#e9e2d3;
  --text:#eef3f0;
  --text-dim:#9db0a8;
  --text-faint-raised:#a8bdb2;
}

.da-article{
  /* surfaces and ink — the publication's own values, not a second palette */
  --ink:#050d0a;
  --surface:#16211f;
  --surface-2:#1c2b28;
  --surface-3:#2d4440;
  --rule:rgba(100,255,218,.22);
  --rule-soft:rgba(233,226,211,.14);
  --teal:#64ffda;
  --violet:#a78bfa;
  --yellow:#f5e400;
  --ember:#ff7a45;
  --paper:#e9e2d3;
  --text:#eef3f0;
  --text-dim:#9db0a8;
  --text-faint-raised:#a8bdb2;

  --font-body:'DS Inter',ui-sans-serif,system-ui,sans-serif;
  --font-brand:'DS Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-serif:'DS Playfair',ui-serif,Georgia,serif;
  --font-poster:'DS Bebas',ui-sans-serif,system-ui,sans-serif;

  /* each article sets --accent to its story's approved Current Edition accent */
  --accent:var(--teal);

  /* READABILITY FLOORS. The production article template sets body copy at a
     flat 15.5px and metadata at 11px, both under the publication's own floors.
     An article is the single longest reading act on this site, so it gets the
     body scale, not a smaller one. */
  --a-body:clamp(17px,1.02vw,18.5px);
  --a-body-sm:clamp(16px,.95vw,17px);
  --a-meta:13px;
  --a-micro:12.5px;

  --measure:66ch;

  /* vertical rhythm. One scale. Nothing is measured off a specific block. */
  --sp-tight:18px;
  --sp-block:34px;
  --sp-module:56px;
  --sp-section:88px;
}

/* MARGIN COLLAPSING DOES NOT HAPPEN BETWEEN GRID ROWS. Every module below
   therefore owns its TOP gutter and nothing else; a `margin: X 0` pair renders
   as 2X here, which is how the first build ended up with 176px between the
   Honest Caveat and What This Means For You. One gutter, one value, one owner.
   Same rule the Current Edition uses, for the same reason. */

/* ---- 3. The page grid --------------------------------------------------
   A three-track editorial grid: a reading measure in the middle, a wide track
   either side that a figure may break into, and a full-bleed track beyond it.
   Every component declares which track it lives in, so "wide" and "full" are
   compositional decisions rather than negative margins bolted on later. */

.da-article{
  display:grid;
  grid-template-columns:
    [full-start] minmax(18px,1fr)
    [wide-start] minmax(0,110px)
    [text-start] min(100% - 36px, 680px) [text-end]
    minmax(0,110px) [wide-end]
    minmax(18px,1fr) [full-end];
  font-family:var(--font-body);
  color:var(--text);
  font-size:var(--a-body);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  padding-bottom:96px;
}
.da-article > *{grid-column:text;}
.da-wide{grid-column:wide;}
.da-full{grid-column:full;}
.da-article *{box-sizing:border-box;}

/* ---- 4. Shared primitives --------------------------------------------- */

.da-eyebrow{
  font-family:var(--font-brand);font-weight:700;font-size:var(--a-meta);
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:0 0 14px;display:block;
}
.da-label{                                   /* module labels: SHORT VERSION etc */
  font-family:var(--font-brand);font-weight:700;font-size:var(--a-meta);
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;display:block;
}
/* ---- the caption system ------------------------------------------------
   Every image answers WHAT / WHO / WHERE / RIGHTS / CONTEXT, in that order and
   in that visual hierarchy. Research and institutional imagery states its full
   provenance; stock and illustrative photography gets the quieter variant,
   because an Unsplash sauna does not need a licence deed under it. The context
   note ALWAYS renders: it is what stops a reader taking a contextual image for
   the output of the work being reported. */
.da-cap{font-size:var(--a-body-sm);color:var(--text-dim);line-height:1.55;margin:0;}
.da-credits{
  margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;
  font-family:var(--font-brand);font-size:var(--a-micro);letter-spacing:.05em;
  line-height:1.5;color:var(--text-faint-raised);
}
.da-credits > * + *::before{content:"·";margin-right:8px;color:var(--text-faint-raised);
  opacity:.6;}
.da-credit{text-transform:uppercase;letter-spacing:.09em;color:var(--text-dim);}
.da-src{font-family:var(--font-body);letter-spacing:0;}
/* A licence deed link is a peripheral inline credit, the same family as a source
   link inside a sentence, so it is held to WCAG 2.5.8's 24px rather than to the
   44px control floor - inflating it would wreck the caption's line rhythm. */
.da-lic{font-family:var(--font-brand);text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent) !important;display:inline-block;padding:5px 0;min-height:24px;}
.da-credits--quiet{gap:0 6px;}
.da-credits--quiet .da-credit{text-transform:uppercase;color:var(--text-faint-raised);}
/* a rebuilt figure states its provenance in two halves that must never blur:
   who produced the numbers, and who drew the picture */
.da-figmeta{
  margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 20px;
  font-family:var(--font-brand);font-size:var(--a-micro);letter-spacing:.05em;
  line-height:1.5;color:var(--text-faint-raised);
}
.da-figmeta b{font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--text-dim);margin-right:6px;}
.da-note{                                    /* contextNote — always renders */
  font-size:var(--a-micro);color:var(--text-faint-raised);line-height:1.6;
  font-style:italic;
}
.da-article a{color:var(--accent);text-decoration:none;
  text-underline-offset:3px;text-decoration-thickness:1px;}
.da-article a:hover{text-decoration:underline;}
.da-article a:focus-visible,
.da-article summary:focus-visible,
.da-article button:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;
}
.da-rule{border:0;border-top:.5px solid var(--rule-soft);margin:var(--sp-module) 0;}

/* ---- 5. OPENINGS ------------------------------------------------------
   Four of them. An article picks ONE. They are not variants of each other —
   they put a different thing first, which is the point: the reader's first
   two seconds should already tell them what kind of story this is. */

.da-open{margin-top:26px;}
.da-back{
  font-family:var(--font-brand);font-size:var(--a-meta);letter-spacing:.06em;
  color:var(--text-dim) !important;display:inline-flex;gap:8px;align-items:center;
  padding:14px 0;margin-bottom:16px;    /* clears the 44px control floor */
}
.da-back:hover{color:var(--accent) !important;}

.da-kicker{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:var(--sp-block) 0 18px;}
/* after a full-bleed hero the kicker needs the module gutter, not the block one:
   the caption and credit stack directly above it */
.da-hero-photo + .da-kicker{margin-top:var(--sp-module);}
.da-kicker .da-eyebrow{margin:0;}
.da-kicker .da-date{
  font-family:var(--font-brand);font-size:var(--a-meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint-raised);
}

.da-h1{
  font-family:var(--font-serif);font-weight:800;
  font-size:clamp(33px,5.4vw,56px);line-height:1.06;letter-spacing:-.015em;
  margin:0 0 20px;text-wrap:balance;color:var(--text);
}
.da-standfirst{                              /* the article's own opening paragraph */
  font-size:clamp(18px,1.32vw,20px);line-height:1.62;color:var(--text);
  margin:0 0 26px;max-width:60ch;
}
.da-byline{
  font-family:var(--font-brand);font-size:var(--a-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint-raised);margin:0;
  padding-top:18px;border-top:.5px solid var(--rule-soft);
}

/* 5a. PHOTO HERO — the photograph goes first, full bleed, and the headline
       lands beneath it in the reading column where its contrast is guaranteed.
       No text is ever set over the photograph, because a hero crop that works
       at 1440 and a hero crop that works at 390 are not the same crop. */
.da-hero-photo{margin:0;}
.da-hero-photo figcaption{max-width:716px;margin:14px auto 0;padding:0 18px;}
/* A hero that stepped down to `wide` or the reading measure is still the opening
   image: it keeps the opening position, it is centred, and it gets the module
   gutter beneath it that a full-bleed band does not need. */
.da-hero-photo.da-g--wide,
.da-hero-photo.da-g--text-width{margin:0 auto;}
.da-hero-photo.da-g--wide figcaption,
.da-hero-photo.da-g--text-width figcaption{padding:0;}

/* 5b. TYPOGRAPHIC OPEN — no image above the fold at all. The headline is the
       visual event. Used where the story is an argument rather than an object. */
.da-open--type .da-h1{font-size:clamp(36px,6.4vw,64px);}
.da-open--type .da-standfirst{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(20px,1.7vw,25px);line-height:1.5;color:var(--paper);
  border-left:2px solid var(--accent);padding-left:20px;margin-left:-22px;
}
@media(max-width:640px){.da-open--type .da-standfirst{margin-left:0;}}

/* 5c. DATA OPEN — a verified scalar the story is built around, set at poster
       scale before anything else. It carries its own scope line, so the number
       can never be read wider than the finding. */
.da-open--data .da-h1{font-size:clamp(30px,4.4vw,46px);}
.da-dataopen{
  display:grid;grid-template-columns:auto 1fr;gap:0 32px;align-items:center;
  margin:var(--sp-block) 0 0;padding:30px 0;
  border-top:1px solid var(--accent);border-bottom:.5px solid var(--rule-soft);
}
.da-dataopen .da-num{
  font-family:var(--font-poster);font-size:clamp(84px,15vw,168px);line-height:.8;
  color:var(--accent);letter-spacing:.005em;white-space:nowrap;
}
.da-dataopen .da-num .da-unit{font-size:.36em;vertical-align:.5em;letter-spacing:.01em;}
.da-dataopen .da-scope{
  font-family:var(--font-brand);font-weight:700;font-size:clamp(14px,1.1vw,16px);
  line-height:1.45;letter-spacing:.06em;text-transform:uppercase;color:var(--text);
}
.da-dataopen .da-scope small{
  display:block;margin-top:10px;font-size:var(--a-micro);letter-spacing:.04em;
  font-weight:400;text-transform:none;color:var(--text-faint-raised);
  font-family:var(--font-body);line-height:1.6;
}
@media(max-width:640px){
  .da-dataopen{grid-template-columns:1fr;gap:14px;}
  .da-dataopen .da-num{font-size:clamp(76px,26vw,120px);}
}

/* ---- 6. THE SHORT VERSION --------------------------------------------
   Kept exactly where it is and word for word. What changed is that it stopped
   being a rounded card with a gradient chip on every line — that treatment is
   card chrome, and card chrome in an article is what makes an article look
   like a feed. It is now a field with one accent edge, set at reading size,
   with a hanging rule per point so it still scans in three seconds. */

.da-short{
  margin:var(--sp-block) 0 0;
  padding:26px 0 26px 26px;
  border-left:2px solid var(--accent);
  background:linear-gradient(90deg,var(--surface),transparent 92%);
}
.da-short .da-label{color:var(--accent);}
.da-short ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;}
.da-short li{
  position:relative;padding-left:26px;font-size:var(--a-body-sm);line-height:1.62;
  color:var(--text);
}
.da-short li::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:1.5px;
  background:var(--accent);opacity:.85;
}

/* ---- 7. BODY ---------------------------------------------------------- */

.da-body{margin-top:var(--sp-module);}
/* The body block owns the gutter after a module. Its first child must not add a
   second one - an h2 arriving straight after a giant number was spending 56px
   twice and reading as a hole rather than as calm. */
.da-body > :first-child{margin-top:0;}
.da-body:first-of-type{margin-top:0;}
.da-body:empty{margin:0;}
.da-body p{margin:0 0 var(--sp-tight);max-width:var(--measure);}
/* Every block-level module clears the marginal floats (.da-pull, .da-inset).
   A float that runs past its own paragraph and into the next heading drags the
   heading's rule across it — found on the first build, fixed here rather than
   by shortening the quote, because the next quote would be long again. */
.da-body h2,.da-fig,.da-split,.da-giant,.da-design,.da-compare,.da-seq,
.da-aside,.da-caveat,.da-means,.da-sources,.da-faq,.da-related,.da-rule{
  clear:both;
}
.da-body h2{
  font-family:var(--font-brand);font-weight:700;
  font-size:clamp(21px,1.8vw,26px);line-height:1.25;letter-spacing:-.005em;
  margin:var(--sp-module) 0 var(--sp-tight);color:var(--text);
  padding-top:20px;border-top:.5px solid var(--rule-soft);
  text-wrap:balance;
}
.da-body h2::before{
  content:"";display:block;width:34px;height:2px;background:var(--accent);
  margin-bottom:16px;
}
.da-body h3{font-family:var(--font-brand);font-weight:700;font-size:18px;
  margin:var(--sp-block) 0 10px;}

/* ---- 8. VISUAL EVENTS -------------------------------------------------
   Each of these is an interruption in the reading column. The audit counts
   how far apart they land; the grammar does not require any particular one. */

/* 8a. WIDE RESEARCH IMAGE / FIGURE */
.da-fig{margin:var(--sp-module) 0 0;}
/* <picture> is display:inline by default, which makes a full-bleed figure an
   oversized inline box inside a grid item. Every wrapper is made a block. */
.da-fig picture,.da-inset picture,.da-split picture,.da-hero-photo picture{display:block;}
.da-fig img,.da-fig svg{display:block;width:100%;height:auto;}
.da-fig figcaption{margin-top:14px;max-width:var(--measure);}

/* ---- THE IMAGE GEOMETRY CONTRACT, round A5 ---------------------------------
   ONE rule shapes every image on the page, and it is driven by two custom
   properties the BUILD sets from the asset's own measured profile:

       --ar    the rendered aspect ratio, clamped into the range this asset can
               reach without exceeding the crop budget for its kind
       --pos   the focal point, where centre is not where the subject is

   `height:auto` is load-bearing and is the single line that fixes the defect
   Sama caught. AN ASPECT RATIO ONLY COMPUTES A SIZE WHEN THE OTHER DIMENSION IS
   AUTO. In A4 the <img> carried a height ATTRIBUTE (the derivative's intrinsic
   height, e.g. 731) which supplies a definite height, so `aspect-ratio` was
   ignored entirely and a 1.5:1 photograph rendered 200px wide by 731px tall.

   There is no fixed pixel height anywhere in this block, and there must never be
   one again: a fixed height applied to an unknown asset IS the bug. */
.da-pic{display:block;}
.da-pic img{
  display:block;width:100%;height:auto;
  aspect-ratio:var(--ar);
  object-position:var(--pos,center);
}
.da-pic[data-fit="cover"] img{object-fit:cover;}
/* A figure is never cropped. Its --ar IS its intrinsic ratio, so `contain`
   letterboxes nothing; it is here so that a rounding error can only ever add a
   hairline of background, never slice a label off a diagram. */
.da-pic[data-fit="contain"] img{object-fit:contain;background:var(--ink);}

.da-g--full-bleed{grid-column:full;}
.da-g--wide{grid-column:wide;}
.da-g--text-width{grid-column:text;}
/* A step-down below the reading measure has to narrow the PICTURE too. Without
   this a figure that stepped to `inset` still rendered 680px wide and only its
   aspect changed, which is half a fix. */
.da-fig.da-g--split .da-pic{max-width:500px;}
.da-fig.da-g--square .da-pic{max-width:340px;}
.da-fig.da-g--inset .da-pic{max-width:320px;}
.da-fig.da-g--thumb .da-pic{max-width:220px;}
.da-fig.da-g--full-bleed figcaption{max-width:716px;margin:14px auto 0;padding:0 18px;}

/* 8b. INSET IMAGE — small, beside the argument, never the argument */
.da-inset{
  grid-column:text;float:right;width:min(46%,320px);
  margin:8px -110px 22px 32px;
}
@media(min-width:1180px){.da-inset{margin-right:-140px;}}
.da-inset .da-pic img{display:block;width:100%;}
.da-inset figcaption{margin-top:10px;}
.da-inset .da-cap{font-size:var(--a-micro);line-height:1.55;}
@media(max-width:820px){
  .da-inset{float:none;width:100%;margin:var(--sp-block) 0;}
}

/* 8c. SPLIT — one section balanced against one visual */
.da-split{
  grid-column:wide;display:grid;grid-template-columns:1fr 1fr;gap:36px;
  align-items:center;margin:var(--sp-module) 0 0;
}
.da-split .da-pic img{display:block;width:100%;}
.da-split figcaption{margin-top:12px;}
.da-split .da-cap{font-size:var(--a-micro);line-height:1.55;}
@media(max-width:820px){.da-split{grid-template-columns:1fr;gap:22px;}}

/* 8d. GIANT NUMBER — one per article, maximum. A scalar only; a comparison
       never gets this treatment, for the reason in the number-motion contract. */
.da-giant{
  grid-column:wide;margin:var(--sp-module) 0 0;padding:34px 0;
  border-top:1px solid var(--accent);border-bottom:.5px solid var(--rule-soft);
  display:grid;grid-template-columns:auto 1fr;gap:0 34px;align-items:center;
}
.da-giant .da-num{
  font-family:var(--font-poster);font-size:clamp(90px,13vw,180px);line-height:.78;
  color:var(--accent);
}
/* The unit sits ON the numeral's own baseline at a fixed fraction of its size.
   As a <sup> with a length vertical-align it was displaced by 0.85em of its OWN
   size - 46px on a 168px numeral - and read as a detached symbol. */
.da-giant .da-num .da-unit{font-size:.36em;vertical-align:.5em;letter-spacing:.01em;}
.da-giant .da-say{
  font-family:var(--font-brand);font-weight:700;font-size:clamp(15px,1.2vw,18px);
  letter-spacing:.05em;text-transform:uppercase;line-height:1.4;color:var(--text);
}
.da-giant .da-say small{
  display:block;margin-top:12px;font-family:var(--font-body);font-weight:400;
  font-size:var(--a-body-sm);letter-spacing:0;text-transform:none;
  color:var(--text-dim);line-height:1.6;
}
@media(max-width:700px){
  .da-giant{grid-template-columns:1fr;gap:16px;}
  .da-giant .da-num{font-size:clamp(84px,28vw,140px);}
}

/* 8e. STUDY DESIGN PANEL — what the study actually was, in four facts */
.da-design{
  grid-column:wide;margin:var(--sp-module) 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--rule);border-bottom:.5px solid var(--rule-soft);
}
.da-design > div{padding:24px 22px;border-left:.5px solid var(--rule-soft);}
.da-design > div:first-child{border-left:0;padding-left:0;}
.da-design dt{
  font-family:var(--font-poster);font-size:clamp(34px,3.6vw,48px);line-height:.9;
  color:var(--text);margin-bottom:10px;
}
.da-design dd{
  margin:0;font-family:var(--font-brand);font-weight:700;font-size:var(--a-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint-raised);
  line-height:1.5;
}
.da-design .da-hot dt{color:var(--accent);}
@media(max-width:700px){
  .da-design{grid-template-columns:1fr 1fr;}
  .da-design > div{padding:18px 16px;border-top:.5px solid var(--rule-soft);}
  .da-design > div:nth-child(-n+2){border-top:0;}
  .da-design > div:nth-child(odd){border-left:0;padding-left:0;}
}

/* 8f. COMPARISON PANEL — two or three measured things beside each other.
       Only where the article itself makes the comparison. */
.da-compare{
  grid-column:wide;margin:var(--sp-module) 0 0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  background:var(--rule-soft);
}
.da-compare > div{background:var(--ink);padding:26px 24px;}
.da-compare .da-cnum{
  font-family:var(--font-poster);font-size:clamp(46px,5vw,68px);line-height:.88;
  color:var(--accent);display:block;margin-bottom:12px;
}
.da-compare .da-cflat{color:var(--text-dim);}
.da-compare .da-clab{
  font-family:var(--font-brand);font-weight:700;font-size:var(--a-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin:0 0 8px;
}
.da-compare .da-csub{margin:0;font-size:var(--a-body-sm);color:var(--text-dim);
  line-height:1.55;}
/* The scope line belongs to the panel above it: 14px, not a module gutter, and
   never a negative one - the first version pulled it up through the columns. */
.da-scopeline{
  grid-column:wide-start / wide-end;margin:14px 0 0;max-width:74ch;
  font-size:var(--a-micro);line-height:1.6;color:var(--text-faint-raised);
  font-style:italic;
}

/* 8g. SEQUENCE / TIMELINE — where the story genuinely has ordered stages */
.da-seq{grid-column:wide;margin:var(--sp-module) 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;}
.da-seq > div{padding:0 20px 0 0;position:relative;}
.da-seq > div::before{
  content:"";position:absolute;left:0;top:9px;right:0;height:1px;
  background:var(--rule-soft);
}
.da-seq > div::after{
  content:"";position:absolute;left:0;top:5px;width:9px;height:9px;
  border-radius:50%;background:var(--ink);border:1.5px solid var(--accent);
}
.da-seq .da-sq-hi::after{background:var(--accent);}
.da-seq dt{
  padding-top:32px;font-family:var(--font-brand);font-weight:700;
  font-size:var(--a-micro);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.da-seq dd{margin:0;font-size:var(--a-body-sm);color:var(--text);line-height:1.5;}
@media(max-width:700px){
  .da-seq{grid-template-columns:1fr;gap:0;}
  .da-seq > div{padding:0 0 22px 26px;}
  .da-seq > div::before{left:4px;top:6px;right:auto;bottom:-6px;width:1px;height:auto;}
  .da-seq > div:last-child::before{display:none;}
  .da-seq > div::after{left:0;top:4px;}
  .da-seq dt{padding-top:0;}
}

/* 8g-bis. REBUILT FIGURES — real text in real boxes, never an SVG with a fixed
   viewBox. An SVG scales its type with its container, so a figure that reads at
   1440 is guaranteed to break the 12.4px floor at 390. These reflow instead. */

.da-chart{grid-column:wide-start / wide-end;}

/* --- the AQI scale. Band widths are true to the 0-500 scale. --- */
.da-aqi-scale{position:relative;padding-top:58px;}
.da-aqi-mark{position:absolute;top:0;left:var(--x);transform:translateX(-50%);
  display:grid;justify-items:center;gap:2px;white-space:nowrap;}
.da-aqi-mark::after{content:"";position:absolute;top:100%;left:50%;width:2px;
  height:20px;background:var(--accent);}
.da-aqi-mlab{font-family:var(--font-brand);font-size:var(--a-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint-raised);}
.da-aqi-mnum{font-family:var(--font-poster);font-size:clamp(38px,4vw,54px);
  line-height:.86;color:var(--accent);}
.da-aqi-bands{display:flex;margin-top:20px;}
.da-aqi-band{flex:0 0 var(--w);min-width:0;position:relative;
  padding:34px 6px 0 7px;}
.da-aqi-band::before{content:"";position:absolute;top:0;left:0;right:1px;
  height:26px;background:var(--accent);opacity:var(--op);}
.da-aqi-range{display:block;font-family:var(--font-brand);font-weight:700;
  font-size:var(--a-meta);color:var(--text-faint-raised);margin-bottom:4px;}
.da-aqi-name{display:block;font-family:var(--font-body);font-size:var(--a-micro);
  line-height:1.35;color:#7c9788;}
.da-aqi-band.is-live .da-aqi-range,
.da-aqi-band.is-live .da-aqi-name{color:var(--accent);font-weight:700;}


/* Below 780px six labels cannot share one row at a legible size, so the scale
   turns 90 degrees: the ramp becomes a column, each band keeps its true share
   of the height, and every name is set at full size beside it. */
@media(max-width:780px){
  .da-aqi-scale{padding-top:0;}
  .da-aqi-bands{flex-direction:column;margin-top:0;}
  .da-aqi-band{flex:0 0 auto;padding:0 0 0 60px;min-height:48px;
    display:flex;align-items:center;gap:12px;}
  .da-aqi-band::before{top:2px;bottom:2px;left:0;width:44px;right:auto;height:auto;}
  /* range and name are flex siblings on mobile, not an absolutely positioned
     label over a padded box: "301-500" is twice the width of "0" and overlapped
     its band name the moment the top band printed its upper bound. */
  .da-aqi-range{flex:0 0 auto;min-width:58px;margin:0;}
  .da-aqi-name{flex:1 1 auto;font-size:var(--a-body-sm);}
  .da-aqi-mark{position:static;transform:none;justify-items:start;
    margin-bottom:18px;}
  .da-aqi-mark::after{display:none;}
  .da-aqi-band.is-live::after{content:"";position:absolute;left:0;top:0;bottom:0;
    width:44px;border:2px solid var(--accent);}
}

/* --- the mechanism chain --- */
.da-chain{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,.86fr) 34px minmax(0,1.25fr);
  align-items:center;gap:0;}
.da-ch-node{background:var(--surface);border:1px solid var(--surface-3);
  padding:18px 18px 16px;}
.da-ch-node b{display:block;font-family:var(--font-brand);font-weight:700;
  font-size:clamp(14px,1.05vw,16px);letter-spacing:.04em;line-height:1.25;
  color:var(--text);margin-bottom:8px;}
.da-ch-sub span{display:block;font-size:var(--a-micro);line-height:1.5;
  color:var(--text-dim);}
.da-ch-cause,.da-ch-hinge{border-color:var(--accent);}
.da-ch-cause b,.da-ch-hinge b{color:var(--accent);}
.da-ch-arrow{position:relative;height:1.4px;background:var(--accent);}
.da-ch-arrow::after{content:"";position:absolute;right:0;top:50%;
  width:7px;height:7px;border-top:1.4px solid var(--accent);
  border-right:1.4px solid var(--accent);transform:translateY(-50%) rotate(45deg);}
.da-ch-effs{display:grid;gap:10px;}
@media(max-width:860px){
  .da-chain{grid-template-columns:1fr;justify-items:stretch;}
  .da-ch-arrow{height:26px;width:1.4px;justify-self:center;background:var(--accent);}
  .da-ch-arrow::after{right:auto;left:50%;top:auto;bottom:0;
    transform:translateX(-50%) rotate(135deg);}
}

/* 8h. PULL / CALLOUT — an existing sentence promoted to a visual event.
       The words are the article's own, verbatim; the audit proves it.

       It sits in the LEFT margin and the text wraps around it, which is the
       only placement that works: a pull quote set in flow directly beneath the
       paragraph it was pulled from does not read as a pull quote, it reads as
       the same sentence printed twice. Beside the column it reads as a pull.
       The inset image floats right, so the two marginal objects never stack
       down the same edge. */
.da-pull{
  grid-column:text;float:left;width:min(44%,300px);
  margin:10px 34px 22px -190px;padding:2px 0 2px 22px;
  border-left:2px solid var(--accent);
  font-family:var(--font-serif);font-weight:400;font-style:italic;
  font-size:clamp(20px,1.75vw,26px);line-height:1.34;color:var(--paper);
}
@media(min-width:1240px){.da-pull{margin-left:-230px;width:min(46%,330px);}}
@media(max-width:900px){
  .da-pull{float:none;width:auto;margin:var(--sp-module) 0;padding-left:22px;
    font-size:clamp(21px,3.4vw,27px);}
}

/* 8i. SIDE-SIGNAL-LIKE MOMENT — calm state only, and only when the research
       itself contains something genuinely surprising. No box, one hairline,
       real air, italic serif lead. Never manufactured to break up a page. */
.da-aside{
  grid-column:wide;margin:var(--sp-module) 0 0;padding:30px 0 14px;
  border-top:.5px solid var(--rule-soft);
}
.da-aside .da-label{color:var(--text-faint-raised);}
.da-aside .da-as-lead{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(22px,2.1vw,29px);line-height:1.34;color:var(--paper);
  margin:0 0 16px;max-width:24ch;
}
.da-aside .da-as-body{font-size:var(--a-body-sm);color:var(--text-dim);
  max-width:62ch;margin:0;line-height:1.7;}
.da-aside .da-as-src{margin-top:14px;}

/* ---- 9. HONEST CAVEAT -------------------------------------------------
   Wording untouched. It stops being a small purple rounded box with 14px grey
   text — the treatment that quietly said "skip me" — and becomes a full-width
   field with rules top and bottom, set at reading size. Serious, not
   decorated. Its label is yellow because yellow means attention and caution in
   this publication, which is exactly what this section is. */

.da-caveat{
  grid-column:full;margin:var(--sp-section) 0 0;
  background:var(--surface-2);
  border-top:2px solid var(--yellow);border-bottom:.5px solid var(--rule-soft);
}
.da-caveat > div{
  /* 680 reading column + the grid's own 18px page gutters, so the caveat's copy
     starts on exactly the same vertical as every paragraph above it */
  max-width:716px;margin:0 auto;padding:38px 18px 42px;
}
.da-caveat .da-label{color:var(--yellow);}
.da-caveat h2{
  font-family:var(--font-serif);font-weight:800;font-size:clamp(24px,2.4vw,32px);
  line-height:1.18;margin:0 0 18px;color:var(--text);
}
.da-caveat p{margin:0;font-size:var(--a-body);line-height:1.72;color:var(--text);
  max-width:64ch;}

/* ---- 10. WHAT THIS MEANS FOR YOU --------------------------------------
   The reader-translation section. Distinct from the caveat (a field) and from
   the Short Version (a list at the top): this is the editor turning to face
   you, so it is a rail, set slightly larger, with the accent on the left. */

.da-means{
  grid-column:wide;margin:var(--sp-section) 0 0;
  padding:4px 0 4px 30px;border-left:2px solid var(--accent);
}
.da-means .da-label{color:var(--accent);}
.da-means h2{
  font-family:var(--font-brand);font-weight:700;font-size:clamp(22px,2vw,28px);
  line-height:1.22;margin:0 0 var(--sp-tight);color:var(--text);
}
.da-means p{margin:0 0 var(--sp-tight);font-size:clamp(17.5px,1.1vw,19px);
  line-height:1.7;max-width:62ch;}
.da-means p:last-child{margin-bottom:0;}
@media(max-width:640px){.da-means{padding-left:20px;}}

/* ---- 11. PRIMARY SOURCES ----------------------------------------------
   Evidence, not a footnote. Every link preserved, every citation preserved,
   at 16px instead of 13.5px, with the publication or institution pulled out
   as the first thing the eye lands on. */

.da-sources{grid-column:wide;margin:var(--sp-section) 0 0;}
.da-sources h2{
  font-family:var(--font-brand);font-weight:700;font-size:var(--a-meta);
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:0 0 6px;padding-bottom:18px;border-bottom:1px solid var(--accent);
}
.da-sources ol{list-style:none;margin:0;padding:0;counter-reset:src;}
.da-sources li{
  counter-increment:src;position:relative;
  padding:22px 0 22px 46px;border-bottom:.5px solid var(--rule-soft);
  font-size:var(--a-body-sm);line-height:1.62;color:var(--text);
}
.da-sources li::before{
  content:counter(src);position:absolute;left:0;top:22px;
  font-family:var(--font-poster);font-size:26px;line-height:1;
  color:var(--text-faint-raised);
}
.da-sources li em{font-style:italic;color:var(--paper);}
.da-sources li a{
  display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-family:var(--font-brand);font-weight:700;font-size:var(--a-micro);
  letter-spacing:.1em;text-transform:uppercase;
  min-height:24px;
}

/* ---- 12. COMMON QUESTIONS ---------------------------------------------
   Same questions, same answers, same <details> accordion, same FAQPage
   structured data. Restyled from a stack of ten small cards into hairline
   rows, so the FAQ reads as the end of an article instead of a widget. */

.da-faq{grid-column:wide;margin:var(--sp-module) 0 0;}
.da-faq h2{
  font-family:var(--font-brand);font-weight:700;font-size:var(--a-meta);
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:0 0 6px;padding-bottom:18px;border-bottom:1px solid var(--accent);
}
.da-faq details{border-bottom:.5px solid var(--rule-soft);}
.da-faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:22px 44px 22px 0;min-height:44px;
  font-family:var(--font-brand);font-weight:700;
  font-size:clamp(16.5px,1.15vw,18px);line-height:1.4;color:var(--text);
}
.da-faq summary::-webkit-details-marker{display:none;}
.da-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  margin-top:-6px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/13px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 13px no-repeat;
  transition:transform .25s ease;
}
.da-faq details[open] summary::after{transform:rotate(45deg);}
.da-faq summary:hover{color:var(--accent);}
.da-faq details p{
  margin:0 0 24px;font-size:var(--a-body-sm);line-height:1.7;color:var(--text-dim);
  max-width:64ch;
}

/* ---- 13. EDITORIAL RECOMMENDATIONS ------------------------------------

   TWO TYPES, and the reader must know which one they are clicking BEFORE they
   click it:

     .da-rec--next    CONTINUE READING - another Daily Signal story. A news row:
                      kind, category, headline, dek, thumbnail if the story owns
                      a canonical image. It reads like more of the same thing.
     .da-rec--guide   RELATED GUIDE - a deeper Sama Says review or explainer.
                      A filled panel with an accent rail and an explicit call to
                      action. It reads like a door to somewhere else.

   Same type system, same spacing, same tactile response, deliberately different
   silhouette. At most two per article, and there is no grid.

   Each is ONE <a> wrapping everything, so the whole surface is the target,
   Enter works natively, and there are zero nested interactive elements. */

.da-recs{
  grid-column:wide-start / wide-end;margin:var(--sp-section) 0 0;
  display:grid;gap:18px;
}
.da-rec{
  display:flex;gap:26px;align-items:stretch;text-decoration:none !important;
  color:inherit !important;position:relative;
  border:1px solid var(--rule-soft);background:var(--surface);
  padding:26px 28px;overflow:hidden;
  /* the tactile response. Compositor properties only: transform cannot reflow
     text, resize a track or change a row's height, so there is nothing to
     exempt and no geometry to protect. */
  transform:translateZ(0);
  transition:transform .19s cubic-bezier(.22,.61,.36,1),
             box-shadow .19s cubic-bezier(.22,.61,.36,1),
             border-color .19s ease, background-color .19s ease;
  will-change:transform;
}
.da-rec-body{display:flex;flex-direction:column;gap:9px;flex:1 1 auto;min-width:0;}
.da-rec-kind{
  font-family:var(--font-brand);font-weight:700;font-size:var(--a-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.da-rec-cat{
  font-family:var(--font-brand);font-size:var(--a-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-faint-raised);margin-top:-4px;
}
.da-rec-head{
  font-family:var(--font-serif);font-weight:800;
  font-size:clamp(20px,1.85vw,25px);line-height:1.22;color:var(--text);
  transition:color .19s ease;text-wrap:balance;
}
.da-rec-dek{
  font-size:var(--a-body-sm);line-height:1.6;color:var(--text-dim);
  max-width:56ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.da-rec-go{
  margin-top:4px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-brand);font-weight:700;font-size:var(--a-meta);
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.da-rec-go i{
  width:16px;height:1.5px;background:currentColor;position:relative;
  transition:transform .19s cubic-bezier(.22,.61,.36,1);
}
.da-rec-go i::after{
  content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

/* CONTINUE READING — a news row. The thumbnail is the story's own canonical
   image or nothing; there is no image picker here either. */
.da-rec--next{border-color:var(--rule-soft);background:transparent;
  border-left:0;border-right:0;padding-left:0;padding-right:0;}
/* THE RECOMMENDATION IS A CONTINUATION CUE, NOT A SECOND ARTICLE HERO.
   Its height is governed by the TEXT. The thumbnail is a bounded object beside
   that text: `--tw` is the width the build chose from the asset's aspect class,
   `--ar` is the ratio the asset can actually carry, and both are capped so no
   picture can ever stretch the row and leave a field of empty black beneath a
   three-line dek. That is precisely what A4 did - a 200px column 731px tall,
   with ~500px of nothing under the words. */
.da-rec{align-items:center;}
.da-rec--next .da-rec-thumb{
  flex:0 0 var(--tw,200px);align-self:center;overflow:hidden;
  border-radius:3px;
}
.da-rec--next .da-rec-thumb .da-pic img{
  max-height:152px;                 /* the ceiling, restated where it is enforced */
  transition:transform .19s cubic-bezier(.22,.61,.36,1),filter .19s ease;
}
/* A diagram is shown whole on a padded field rather than cropped into a news row. */
.da-rt--figure .da-pic img{
  background:var(--surface);padding:8px;border:.5px solid var(--rule-soft);
  border-radius:3px;
}
/* No thumbnail at all: the row closes up rather than reserving an empty column. */
.da-rec--textled .da-rec-body{max-width:none;}

/* RELATED GUIDE — a door. Filled field, accent rail, no thumbnail. */
.da-rec--guide{
  background:var(--surface);border-color:var(--rule-soft);
  border-left:2px solid var(--accent);
}
.da-rec--guide .da-rec-head{font-family:var(--font-brand);font-weight:700;
  font-size:clamp(18px,1.5vw,22px);line-height:1.28;}

/* ---- the tactile response --------------------------------------------
   Restrained and physical: it should read as "this is a thing you can press",
   not as an animation. -3px, 1.007, a real shadow, and the accent answering.
   Hover only where a pointer can actually hover, so a tap can never leave a
   state stuck on. :focus-visible gets the identical treatment plus a ring. */
@media (hover:hover) and (pointer:fine){
  .da-rec:hover{
    transform:translateY(-3px) scale(1.007);
    border-color:var(--accent);
    box-shadow:0 14px 34px rgba(0,0,0,.42);
  }
  /* the row stays a row. Filling it on hover gave it the guide's silhouette,
     which is the one thing the two types must not share. Its response is the
     lift, the rules going to accent, and the headline. */
  .da-rec:hover .da-rec-head{color:var(--accent);}
  .da-rec:hover .da-rec-go i{transform:translateX(5px);}
  .da-rec--next:hover .da-rec-thumb .da-pic img{transform:scale(1.03);}
}
.da-rec:focus-visible{
  transform:translateY(-3px) scale(1.007);
  border-color:var(--accent);
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  outline:2px solid var(--accent);outline-offset:4px;
}
.da-rec:focus-visible .da-rec-head{color:var(--accent);}
.da-rec:focus-visible .da-rec-go i{transform:translateX(5px);}
.da-rec:focus-visible .da-rec-thumb .da-pic img{transform:scale(1.03);}

/* THE MOVEMENT GOES, THE AFFORDANCE STAYS. Colour and depth are not motion, so
   a reader who asked for less motion still gets a surface that answers. */
@media (prefers-reduced-motion:reduce){
  .da-rec,.da-rec-go i,.da-rec-thumb .da-pic img{transition:none !important;}
  .da-rec:hover,.da-rec:focus-visible{transform:none;}
  .da-rec:hover .da-rec-go i,.da-rec:focus-visible .da-rec-go i{transform:none;}
  .da-rec:hover .da-rec-thumb .da-pic img,
  .da-rec:focus-visible .da-rec-thumb .da-pic img{transform:none;}
}

@media(max-width:700px){
  .da-rec{flex-direction:column;gap:18px;padding:24px 20px;}
  .da-rec--next{padding-left:0;padding-right:0;}
  /* On a phone the thumbnail goes ABOVE the text and spans the row, but it is
     still bounded: a recommendation may not occupy half a phone screen. The
     aspect stays the asset's own, so nothing is re-cropped for mobile. */
  .da-rec--next .da-rec-thumb{flex:0 0 auto;order:-1;width:100%;}
  .da-rec--next .da-rec-thumb .da-pic img{max-height:210px;}
  .da-rec--guide{padding-left:20px;}
}

/* ---- tags / taxonomy --------------------------------------------------- */

.da-tags{margin-top:var(--sp-module);display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;}
.da-tags .da-tag{
  font-family:var(--font-brand);font-size:var(--a-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-faint-raised);
  padding:8px 0;border-bottom:1px solid var(--rule-soft);
}
.da-tags .da-tag + .da-tag{margin-left:2px;}
/* flex-wrap with a gap, not margin-right: a trailing margin on the last inline
   span pushed it 15px past the viewport at 390 and gave the page a horizontal
   scrollbar. A gap cannot do that. */
.da-hashtags{margin-top:16px;font-size:var(--a-micro);color:var(--text-dim);
  display:flex;flex-wrap:wrap;gap:6px 14px;}
.da-hashtags span{color:var(--accent);}

/* ---- STAY CURIOUS ------------------------------------------------------
   The publication's own approved signup, and the last major block on the page.
   Exactly one per article: never two, never a second visual treatment, and
   never another CTA after it. The copy and the endpoint are the production
   article's; the treatment is the Current Edition's, so all three surfaces end
   the same way. */

.da-signup{
  grid-column:wide-start / wide-end;margin:var(--sp-section) 0 0;
  padding:46px 0 8px;border-top:1px solid var(--rule-soft);text-align:center;
}
.da-signup h3{
  font-family:var(--font-serif);font-weight:800;font-size:clamp(26px,2.5vw,32px);
  line-height:1.16;margin:0 0 12px;color:var(--text);
}
.da-signup p{
  font-size:var(--a-body-sm);color:var(--text-dim);max-width:52ch;
  margin:0 auto 22px;line-height:1.65;
}
.da-signup-form{display:flex;justify-content:center;gap:0;max-width:400px;
  margin:0 auto;}
.da-signup-form input{
  flex:1 1 auto;min-width:0;min-height:48px;
  background:var(--surface-2);border:1px solid var(--rule-soft);border-right:0;
  padding:12px 15px;color:var(--text);font-family:var(--font-body);
  font-size:var(--a-body-sm);
}
.da-signup-form input::placeholder{color:var(--text-faint-raised);}
.da-signup-form input:focus-visible{outline:2px solid var(--accent);
  outline-offset:-2px;}
.da-signup-form button{
  flex:0 0 auto;min-height:48px;background:var(--yellow);color:var(--ink);
  border:0;font-family:var(--font-brand);font-weight:700;font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;padding:0 22px;cursor:pointer;
  transition:filter .18s ease;
}
.da-signup-form button:hover{filter:brightness(1.08);}
.da-signup-form button:disabled{cursor:default;filter:none;opacity:.75;}
@media(max-width:520px){
  .da-signup-form{flex-direction:column;gap:10px;}
  .da-signup-form input{border-right:1px solid var(--rule-soft);}
}

/* ---- the reading progress bar ------------------------------------------

   THIS IS THE PUBLICATION'S PROGRESS BAR, NOT A NEW ONE.

   Copied from the live Current Edition and the live Archive, where the rule is
   identical in both (news/index.html and news/archive/index.html, `.progress-bar`).
   Everything visual and mechanical is theirs: 3px, the yellow-to-ember gradient,
   the 10px yellow glow, `width` rather than transform, the .1s linear catch-up,
   the 81px offset under the site nav, and z-index 100 so the nav and its
   dropdowns always sit above it.

   The A2 version was a different object wearing the same dimensions: a
   scaleX transform, a faint translucent track, and the STORY's accent instead of
   the publication's fixed gradient - which on four of the five prototypes meant a
   3px teal, ember or violet line with no glow, sitting directly on the nav's own
   hairline border. Technically present, perceptually part of the nav.

   Only the measurement range is adapted, and that happens in progress.js. */

.progress-bar{
  position:fixed;top:var(--da-nav-h,81px);left:0;height:3px;width:0%;z-index:100;
  background:linear-gradient(90deg,var(--yellow),var(--ember));
  box-shadow:0 0 10px var(--yellow);transition:width .1s linear;
  pointer-events:none;
}
/* the .1s catch-up is an animation of its own, so it goes; the bar still tracks
   the reader's scroll exactly, because the scroll is the reader's own movement */
@media(prefers-reduced-motion:reduce){
  .progress-bar{transition:none;}
}

/* the publication's own screen-reader-only utility, for the signup's label */
.da-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---- 8h. SPLIT — one claim balanced against one visual ------------------
   Round A4. The CSS shell existed from A1; the component that fills it did not.
   Text left, picture right, and on a phone the picture goes UNDER the text
   rather than beside it, because a 180px-wide photograph is not a visual event. */
.da-split-txt{align-self:center;}
.da-split-lead{
  font-family:var(--font-display);font-size:clamp(21px,2.3vw,27px);line-height:1.34;
  color:var(--text);margin:12px 0 0;max-width:34ch;
}
.da-split-img figcaption{margin-top:12px;}
@media(max-width:820px){
  .da-split-lead{font-size:20px;max-width:none;}
}

/* ---- 8i. BAR FIGURE — a rebuilt comparison of ONE quantity ---------------
   Real text in real boxes, same reason as the AQI scale and the mechanism
   chain: an SVG scales its type with its box and is guaranteed to break the
   readability floor at some width. Bar lengths are a true proportion of the
   spec's declared `max`, so a two-point comparison cannot be stretched to fill
   the frame and imply a bigger gap than the numbers carry. */
.da-bars{display:grid;gap:22px;}
.da-bar-lab{
  display:block;font-family:var(--font-brand);font-weight:700;
  font-size:var(--a-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:9px;
}
.da-bar.is-hi .da-bar-lab{color:var(--text);}
.da-bar-track{
  display:flex;align-items:center;gap:14px;
}
/* At 390 and 430 the value sits at the end of a bar that is already a true
   percentage of the frame, so a long value ("1,000-1,500") pushed past the
   viewport edge. The value moves ABOVE the bar rather than being shrunk, because
   shrinking it is how a figure quietly drops below the readability floor. */
@media(max-width:560px){
  .da-bar-track{flex-wrap:wrap;gap:6px 12px;}
  .da-bar-val{order:-1;width:100%;}
  .da-bar-fill{max-width:100%;}
}
.da-bar-fill{
  display:block;height:16px;width:var(--w);min-width:2px;flex:0 0 auto;
  background:var(--accent);opacity:.42;border-radius:1px;
}
.da-bar.is-hi .da-bar-fill{opacity:1;}
.da-bar-val{
  font-family:var(--font-poster);font-size:clamp(26px,3vw,38px);line-height:.9;
  color:var(--text-dim);font-weight:400;
}
.da-bar.is-hi .da-bar-val{color:var(--accent);}
.da-bar-sub{
  display:block;margin-top:8px;font-size:var(--a-body-sm);color:var(--text-dim);
  line-height:1.55;max-width:60ch;
}

/* ---- 14. NUMBER MOTION ------------------------------------------------
   Arming styles only. The true value always ships in the markup; the script
   decorates it and removes every one of these on settle. */
.da-count{display:inline-block;text-align:right;font-variant-numeric:tabular-nums;}

@media(prefers-reduced-motion:reduce){
  .da-article *{animation:none !important;transition:none !important;}
}

/* ---- 15. Mobile ------------------------------------------------------
   Not a shrink of the desktop. Hierarchy is preserved: a giant number still
   reads giant, a full-bleed photograph still bleeds, and secondary copy comes
   UP rather than down. Only the compositions that need two columns collapse. */

@media(max-width:640px){
  .da-article{
    --sp-module:44px;--sp-section:60px;--sp-block:28px;
    --a-body-sm:16.5px;      /* secondary copy comes up on mobile, never down */
  }
  .da-short{padding:22px 0 22px 20px;}
  .da-caveat > div{padding:30px 18px 34px;}
  .da-sources li{padding-left:38px;}
  .da-related > div{padding:28px 18px;gap:20px;}
  .da-related .da-cta{width:100%;justify-content:space-between;}
}