/* ============================================================================
   ARTICLE — the components an article has that a legal page does not.

   Loaded ON TOP of prose.css, which owns typography, measure and rhythm. This
   file adds only the furniture: the hero image, the stat callout, the pull
   quote, figures, code blocks and the subscribe band.

   Nothing here re-states a type size or a colour that prose.css already sets,
   and nothing uses an accent rail down the left edge of a card — that device
   is the most recognisable tell of generated design, and it encodes nothing,
   since the bar is identical whatever the box contains. Emphasis comes from
   surface, scale and type weight instead.
   ============================================================================ */

/* ── hero ─────────────────────────────────────────────────────────────────
   Breaks the reading measure, because a photograph at 68ch looks like a
   thumbnail someone forgot to size. Capped by aspect so a tall source image
   cannot push the article's first paragraph off the screen. */
.art-hero {
  margin: 0 auto 44px;
  /* The COLUMN, not a number of its own. At 1000px against an 861px column the hero broke
     out past the text it introduces, which read as two layouts stacked rather than one. */
  max-width: var(--measure);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-sunken);
}
.art-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.art-hero figcaption,
.art-fig figcaption {
  padding: 10px 2px 0;
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* ── figures inside the body ─────────────────────────────────────────────── */
.art-fig {
  margin: 34px 0;
}
.art-fig img {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* ── the stat callout ─────────────────────────────────────────────────────
   The one number an article is built around. It earns the largest type on the
   page after the headline, because on this site the figure IS the argument. */
/* Horizontal. Stacked, the figure and its label occupied the top-left corner of a
   full-width box and the rest was empty -- the block read as a placeholder. Side by side, the
   number is the anchor and the words fill the line beside it, which is the shape this element
   has in every newspaper that uses one. */
.art-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 30px;
  margin: 38px 0;
  padding: 26px 30px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), transparent 60%),
    var(--surface-raised, var(--surface));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent) inset,
              0 20px 38px -30px rgba(0,0,0,.85);
}
.art-stat-val {
  font-size: clamp(38px, 7vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.art-stat-label {
  margin-top: 10px;
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.art-stat-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--text-faint);
}

/* ── pull quote ───────────────────────────────────────────────────────────
   A sentence lifted OUT of the flow, so it is set larger and tighter rather
   than indented behind a bar. */
/* `.prose blockquote` sets a left accent rail and outranks a single class, so this has to
   match its specificity to cancel it — otherwise the pull quote quietly grows back the exact
   device this file exists to avoid. */
.prose .art-pull {
  margin: 40px 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.art-pull p {
  margin: 0;
  padding: 26px 0;
  font-size: clamp(22px, 3.1vw, 28px);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--text);
  /* PRETTY, not BALANCE. Balance equalises line lengths, which on a three-line quote means
     deliberately NOT using the full width -- it was the reason this block sat short of the
     column it lives in. Pretty only prevents a one-word last line. */
  text-wrap: pretty;
}

/* ── rules and code ───────────────────────────────────────────────────────── */
.art-rule {
  margin: 44px auto;
  width: 64px;
  height: 1px;
  border: 0;
  background: var(--border-strong);
}
.art-code {
  margin: 26px 0;
  padding: 18px 20px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-sunken);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.art-code code { background: none; padding: 0; font-size: inherit; }

/* The capture block is a SIBLING of <article>, so it never entered the three-column grid that
   centres the prose -- it spanned the whole page while the article sat in a centred column,
   which read as two different pages stacked. Give it the same measure and centre it on the
   same axis. Text inside stays left-aligned; it is the BLOCK that was misplaced, not the
   alignment of its contents. */
.prose-page .dl-capture {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* ── subscribe band ───────────────────────────────────────────────────────
   The one ask on the page, at the point where someone has finished reading and
   is deciding whether this was worth their time. */
.art-sub {
  max-width: 68ch;
  margin: 72px auto 0;
  padding: 32px 30px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), transparent 62%),
    var(--surface-raised, var(--surface));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent) inset;
}
.art-sub h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}
.art-sub p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 52ch;
}
.art-sub-form {
  display: flex;
  gap: 10px;
  margin: 20px 0 10px;
  flex-wrap: wrap;
}
.art-sub-form input {
  flex: 1 1 240px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}
.art-sub-form input::placeholder { color: var(--text-faint); }
.art-sub-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.art-sub-form button {
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .18s ease;
}
.art-sub-form button:hover { filter: brightness(1.08); }
.art-sub-form button:disabled { opacity: .6; cursor: default; }
.art-sub-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}

@media (max-width: 640px) {
  .art-hero { margin-bottom: 32px; border-radius: 8px; }
  .art-stat { padding: 22px 20px; }
  .art-sub { padding: 26px 20px; }
}

/* ══ reading furniture ══════════════════════════════════════════════════════
   Added by assets/js/article-reading.js. Every rule here is for something the
   script creates or a class it sets, so a page without the script is unchanged
   rather than half-styled. */

/* The progress line. Fixed under the nav, painted from a custom property the
   script writes inside rAF -- a transform on a full-width element would be
   cheaper still, but a width on a 2px bar costs nothing and avoids the blurry
   edge scaleX gives at this height. */
.read-bar {
  position: fixed;
  /* Top of the VIEWPORT and above the nav. Anchored to --nav-h at z-index 60 it sat behind the
     bar, and the nav condenses on scroll -- moving down and shrinking -- so the line disappeared
     under it at exactly the moment it starts to mean something. */
  top: 0;
  left: 0;
  height: 2px;
  width: var(--p, 0%);
  background: var(--accent);
  z-index: 120;
  pointer-events: none;
  transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) { .read-bar { transition: none; } }

/* Heading anchors: present, quiet, and out of the way until wanted. Positioned
   in the margin so appearing does not move the heading. */
.prose h2, .prose h3 { position: relative; }
/* A section link, the way documentation and most news sites do it: invisible until you are
   on the heading, then a quiet mark in the margin that copies a link straight to that section.

   It inherited the heading's 28px and 700 weight, which is why it read as part of the headline
   popping into existence rather than as a small affordance appearing beside it. It is now set
   at its own size and weight, and it fades to a muted grey rather than to full strength. */
.h-anchor {
  position: absolute;
  left: -.78em;
  top: 0;
  width: .6em;
  text-align: center;
  font-size: .62em;
  font-weight: 400;
  line-height: inherit;
  color: var(--text-faint);
  text-decoration: none;
  opacity: 0;
  transition: opacity .16s ease, color .16s ease;
}
.prose h2:hover .h-anchor,
.prose h3:hover .h-anchor { opacity: .5; }
.h-anchor:hover { opacity: 1; color: var(--accent); }
/* Keyboard only. A mouse click gives :focus but not :focus-visible, so the mark does not
   stay stuck on screen after someone clicks the heading. */
.h-anchor:focus-visible { opacity: 1; color: var(--accent); }
.h-anchor:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ── the contents rail ─────────────────────────────────────────────────────
   THE ARTICLE IS CENTRED ON THE PAGE, and the rail lives in the margin beside it.

   The previous version made a two-column grid and centred the PAIR, which meant
   the article itself sat right of centre by half the rail's width -- the page
   read as lopsided, and the rail was pushing the content rather than sitting
   next to it.

   Three columns fixes it: two equal flexible margins with the article between
   them, so the article is centred on the page whatever the rail does. The rail
   goes in the left margin, pushed to its inner edge, and cannot overlap
   anything because it is still a grid column.

   1360px, not 1100px: the rail needs to fit in the left margin WITHOUT moving
   the article, which takes half the column plus the gap plus the rail on each
   side. Below that there is no margin to put it in, so it stays in the flow
   where it reads perfectly well. */
@media (min-width: 1360px) {
  .prose-page.has-rail article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr);
    align-items: start;
  }
  .prose-page.has-rail .prose-toc {
    grid-column: 1;
    /* The content rows are implicit, so `1 / -1` resolves to the end of the EXPLICIT grid --
       row 1 -- and collapses the rail to the height of the first item. A large span instead. */
    grid-row: 1 / span 99;
    justify-self: end;
    width: var(--rail, 212px);
    margin-right: 52px;
    position: sticky;
    top: calc(var(--nav-h, 64px) + 34px);
    align-self: start;
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 15px;
    background: none;
    border: 0;
    border-left: 1px solid var(--border);
    max-height: calc(100vh - var(--nav-h, 64px) - 120px);
    overflow-y: auto;
  }
  .prose-page.has-rail .prose-head,
  .prose-page.has-rail .art-hero,
  .prose-page.has-rail .prose { grid-column: 2; margin-left: 0; margin-right: 0; }
  .prose-page.has-rail .art-hero { max-width: none; }

  /* The inline list sets two columns, right across a full measure and wrong in a 212px rail. */
  .prose-page.has-rail .prose-toc ol { padding-left: 0; list-style: none; columns: 1; }
  .prose-page.has-rail .prose-toc li { margin-bottom: 11px; }
  .prose-page.has-rail .prose-toc a {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-faint);
    text-decoration: none;
    transition: color .15s ease;
  }
  .prose-page.has-rail .prose-toc a:hover { color: var(--text-muted); }
  .prose-page.has-rail .prose-toc a[aria-current="true"] { color: var(--text); font-weight: 600; }
}


/* ── stat block, laid out ──────────────────────────────────────────────────
   The figure holds the left column; the label and note stack in the right one,
   which is what stops a wide box being mostly empty. */
.art-stat-val { grid-row: 1 / span 2; align-self: center; }
.art-stat-label {
  grid-column: 2;
  align-self: end;
  margin-top: 0;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
}
.art-stat-note {
  grid-column: 2;
  align-self: start;
  margin-top: 7px;
  padding-top: 0;
  border-top: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Below 640 the two columns become one: a 54px figure beside two lines of text in 340px of
   screen leaves the text about nine characters wide. */
@media (max-width: 640px) {
  .art-stat { display: block; }
  .art-stat-label { margin-top: 10px; }
}