/* ==========================================================================
   article.html: Act IX with "Show the receipt" (direction.md 5.3)
   Page-only CSS on top of shared/ratc.css. No animation library.
   The finished, still page is the default. Motion lives in the MOTION block
   at the end, inside prefers-reduced-motion: no-preference and not Still.
   The words never move: only the tab, the receipt panel, the drawn box,
   the reading thread and the lead line do.
   ========================================================================== */

/* Metric-matched stand-ins while the web fonts load, so the headline does not re-wrap
   (and push the page down) when Anton arrives. Measured 9 Oct: Impact runs 1.5% wider
   than Anton, Arial Narrow 0.6% narrower than Archivo Narrow. */
@font-face { font-family: "Anton Fallback"; src: local("Impact"); size-adjust: 98.5%; }
@font-face { font-family: "Archivo Narrow Fallback"; src: local("Arial Narrow"); size-adjust: 100.6%; }
:root {
  --font-display: "Anton", "Anton Fallback", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-body: "Archivo Narrow", "Archivo Narrow Fallback", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --panel-w: 440px;
  --wrap-left: max(var(--gutter), (100vw - var(--wrap)) / 2);
  --thread-x: 40px;          /* how far left of the text the reading thread runs */
  --tab-room: 150px;         /* right margin kept for the folder tabs (desktop 1280 and up) */
  --text-max: 602px;         /* 66ch of Archivo Narrow at 20px */
  --thread-room: 56px;
  overflow-anchor: none;     /* opening a receipt must never scroll the page */
  /* Review, 9 Oct: keyboard focus must never land behind the phone bottom bar or the review pill
     (shared bug, reported). The browser keeps a focused element above this padding. */
  scroll-padding-bottom: calc(var(--bar-h) + 76px);
}

/* ---------- 2. Title card ------------------------------------------------ */
.title-card { padding-block: clamp(3rem, 5vw, 4.5rem) clamp(3rem, 4.5vw, 4rem); }
.title-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: end;
}
.title-card__text { display: grid; gap: 20px; align-content: end; }
.title-card__text--ix { view-transition-name: act-ix; }   /* Act IX on both homepages grows into this block (README, polish 9 Oct); only the Act IX story carries the name (10 Oct), or every story would morph from the Act IX stop */
.title-card__kicker { margin: 0; }
.title-card__kicker a, .title-card__date a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--mustard); text-underline-offset: .3em; }
.title-card__h { margin: 0; max-width: 7.7em; }   /* em, not ch: the same breaks in the stand-in font */
.title-card__date { margin: 0; color: var(--lift-teal); }
.title-card__artwrap { position: relative; align-self: end; margin-bottom: 4px; }
.title-card__artwrap.needs-call::after { position: static; transform: none; display: block; width: auto; max-width: none; margin-top: 12px; }
.title-card__art img { aspect-ratio: 16 / 9; object-fit: cover; }
.title-card__art picture { display: block; }   /* polish 9 Oct: phones get the 800px copy (42 KB, not 129 KB) */

/* ---------- 3. Series strip ---------------------------------------------- */
.series { padding: 30px 0 34px; }
.series__wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.series__frame, .series__head { min-width: 0; }
.series__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0; font-weight: 400; }
.series__head .label { color: var(--bone); text-decoration-thickness: 2px; text-decoration-color: var(--mustard); text-underline-offset: .3em; }
.series__name { font: 400 clamp(1.25rem, 1.05rem + .7vw, 1.625rem)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--bone); }
.series__frame { position: relative; }
.series__scroller { position: relative; }
.series__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.4fr) minmax(0, 1.4fr);
  border-top: 2px solid var(--dusk-violet);
}
.series__item { min-width: 0; display: flex; }
.series__cell {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 8px 12px 10px;
  border-right: 1px solid var(--dusk-violet);
  color: var(--cream); text-decoration: none;
}
.series__item:first-child .series__cell { padding-left: 0; }
.series__item:last-child .series__cell { border-right: 0; }
a.series__cell:hover { background: var(--wine); }
a.series__cell:hover .series__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
a.series__cell:focus-visible { outline-offset: -2px; }
.series__no { font: 600 .875rem/1.2 var(--font-mono); letter-spacing: .06em; color: var(--lift-teal); }
.series__label { font: 600 .875rem/1.25 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); }
.series__years { font-size: 1rem; line-height: 1.3; color: var(--cream); }
.series__line { font-size: 1rem; line-height: 1.3; font-style: italic; }
.series__item.is-current .series__cell {     /* the lit tab */
  position: relative;
  margin-top: -2px; padding-left: 14px;
  background: var(--mustard);
  color: var(--ink-plum); border-right: 0;
}
.series__item.is-current .series__no,
.series__item.is-current .series__label,
.series__item.is-current .series__years,
.series__item.is-current .series__line { color: var(--ink-plum); }

/* ---------- 4. Body ------------------------------------------------------ */
.story__body { position: relative; padding: clamp(3.25rem, 5.5vw, 5rem) 0 clamp(4rem, 7vw, 6rem); }
.essay {
  position: relative;
  width: min(100% - 2 * var(--gutter) - var(--thread-room), 66ch);
  margin-inline: auto;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--cream);
}
.essay > p { position: relative; margin: 0 0 1.15em; }
.essay > p:first-of-type::first-letter {
  float: left;
  margin: .1em .12em 0 -.02em;
  font: 400 4.6em/.8 var(--font-display);
  color: var(--bone);
}
.essay a { color: var(--cream); }
.essay a.fn {
  color: var(--lift-teal);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  white-space: nowrap;
}
.essay a.fn:hover { text-decoration-thickness: 2px; }

/* claim sentences: a dotted mustard rule; highlighted while their receipt is open */
.claim {
  text-decoration: underline dotted var(--mustard);
  text-decoration-thickness: 2px;
  text-underline-offset: .32em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.claim.is-open {
  background: rgb(217 140 66 / .2);
  text-decoration-style: solid;
}

/* images from the live post, with their captions */
.essay__fig { margin: 2.25em 0 2.4em; }
.essay__fig img {   /* width comes from the width attribute, so the space is reserved before the photo loads */
  max-width: 100%; height: auto;
  border: 2px solid var(--bone); border-radius: var(--radius-img);
  background: var(--night-plum);
}
.essay__fig--tall img { max-width: min(100%, 420px); }
.essay__fig figcaption {
  margin-top: 12px; padding-left: 14px;
  border-left: 2px solid var(--mustard);
  font-size: 1rem; line-height: 1.5; font-style: italic; color: var(--cream);
}
.essay__rule { border: 0; border-top: 2px solid var(--dusk-violet); margin: 2.6em 0 2em; }
.essay__note { margin: 0 0 1.1em; font-size: 1.0625rem; line-height: 1.6; color: var(--cream); }

/* the reading thread down the left margin (decoration: aria-hidden) */
.thread {
  position: absolute; top: 0; bottom: 0;
  left: calc(-1 * var(--thread-x) - 7px); width: 14px;
  pointer-events: none;
  overflow: clip; overflow-clip-margin: 8px;
}
.thread__track, .thread__fill { position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; }
.thread__track { background: repeating-linear-gradient(to bottom, var(--dusk-violet) 0 6px, transparent 6px 12px); }
.thread__fill { display: none; background: rgb(232 195 146 / .4); transform-origin: 50% 0; }
.thread__run { display: none; position: absolute; inset: 0; }
.thread__bead { position: absolute; left: 3px; top: -4px; width: 8px; height: 8px; background: var(--bone); }
.thread__tick {
  position: absolute; left: 1px; width: 12px; height: 12px; margin-top: -6px;
  border: 2px solid var(--mustard); background: var(--ink-plum);
}
.thread__tick.is-open { background: var(--mustard); }

/* ---------- 5. The folder tab ("Show the receipt") ----------------------- */
.rtab {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; margin: -6px 0 -6px 8px; padding: 5px 16px 4px 14px;
  vertical-align: .08em;
  background: none; border: 0;
  font: 600 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-plum); white-space: nowrap;
}
.rtab::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--mustard);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}
.rtab:hover::before, .rtab[aria-expanded="true"]::before { background: var(--bone); }
.rtab svg { width: 14px; height: 14px; flex: none; }
.rtab__t { display: inline; }
.rtab__l { display: inline; }
.rtab__file { display: none; }               /* the closed folder: desktop evidence column only */
html:not(.js) .rtab { display: none; }       /* scripts off: every receipt is already open below its paragraph */

/* ---------- 5. The receipt (inline by default; a fixed side panel at 1280 and up) */
/* It is built from spans so it can sit inside the paragraph, right after its claim sentence. */
.rcpt, .rcpt__body, .rcpt__page, .rcpt__scan, .rcpt__paper, .rcpt__passage, .rcpt__words,
.rcpt__source, .rcpt__meta { display: block; }
.rcpt {
  --ground: var(--night-plum);
  --label: var(--bone);
  position: relative;
  margin: 1.9em 0 2.3em;
  background: var(--night-plum);
  border: 2px solid var(--bone);
  border-radius: 0;
  font-size: 1rem; line-height: 1.5;
}
.js .rcpt:not(.is-open) { display: none; }
.rcpt:focus { outline: none; }
.rcpt:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

.rcpt__top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 0 12px 0 0;
  border-bottom: 3px solid var(--mustard);
}
.rcpt__tab {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; margin-top: 10px; padding: 7px 22px 6px 18px;
  font: 600 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-plum);
}
.rcpt__tab::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--mustard);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
.rcpt__tab svg { width: 14px; height: 14px; flex: none; }
.rcpt__close { margin-top: 8px; min-height: 40px; }
.js .rcpt__close { display: inline-flex; }
html:not(.js) .rcpt__close { display: none; }
.rcpt__body { position: relative; padding: 22px 22px 26px; }

/* the rubber stamp: what kind of receipt this is */
.rcpt__kindwrap { display: inline-block; margin: 6px 0 14px 6px; }
.rcpt__kindwrap + .rcpt__paper { margin-top: 14px; }
.rcpt__kind { margin: 0; }
/* review tags inside the receipt flow below their item instead of floating over the panel */
.rcpt .needs-call::after {
  position: static; transform: none; display: block;
  margin-top: 10px; max-width: none; width: auto;
}
/* the same in the tip line: the tag sits under its item, never over a heading */
.tipline .needs-call::after {
  position: static; transform: none; display: block;
  width: auto; max-width: 60ch; margin-top: 14px;
}

/* the verified government page, with the mustard box drawn around it */
.rcpt__page { position: relative; margin: 28px 10px 34px; }
.rcpt__scan { position: relative; padding: 9px 11px; background: var(--cream); border-radius: 1px; }
.rcpt__scan img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); mix-blend-mode: multiply; }
.rcpt__box {
  position: absolute; left: -10px; top: -10px;
  width: calc(100% + 20px); height: calc(100% + 20px); max-width: none;
  overflow: visible; pointer-events: none;
  transform: rotate(-.5deg);
}
.rcpt__box-line {
  x: 1.5px; y: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px);
  fill: none; stroke: var(--mustard); stroke-width: 3;
  stroke-linejoin: miter; stroke-linecap: square;
  stroke-dasharray: 1 1; stroke-dashoffset: 0;
}
html:not(.js) .rcpt__box { display: none; }
html:not(.js) .rcpt__scan { outline: 3px solid var(--mustard); outline-offset: 8px; }

/* Polish, 9 Oct: the page image is a link that opens the full-size crop in a new tab, with a visible label.
   The link carries the page's margins; the page and its drawn box sit inside it unchanged. */
.rcpt__open { display: block; margin: 28px 10px 30px; color: var(--mustard); text-decoration: none; }
.rcpt__open .rcpt__page { margin: 0; }
.rcpt__open-l {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font: 600 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.rcpt__open-i { width: 15px; height: 15px; flex: none; }
.rcpt__open:hover .rcpt__open-l > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.rcpt__open:hover .rcpt__open-l { color: var(--bone); }
.rcpt__open:focus { outline: none; }
.rcpt__open:focus-visible { outline: 2px solid var(--bone); outline-offset: 14px; }

/* the record's words, on cream paper with a torn foot */
.rcpt__paper { padding: 20px 20px 34px; }
.rcpt__passage { margin: 0 0 16px; padding-left: 14px; border-left: 4px solid var(--mustard); }
.rcpt__words { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-plum); }
.rcpt__source { margin: 0; font-size: 1rem; line-height: 1.45; }
.rcpt__source a { color: var(--ink-plum); text-decoration-thickness: 1px; }
.rcpt__source a:hover { text-decoration-thickness: 2px; }
.rcpt__meta { margin: 10px 0 0; color: var(--ink-plum); }
.rcpt__close--end { display: inline-flex; }
.rcpt__close--end { margin-top: 22px; }

/* Memphis pixels thinning upward at the bottom of the folder */
.rcpt__body::after {
  content: ""; display: block; height: 56px; margin: 18px -22px -26px;
  background: var(--dusk-violet);
  -webkit-mask: var(--mp-pixel) 0 100% / 192px 96px repeat-x;
  mask: var(--mp-pixel) 0 100% / 192px 96px repeat-x;
  pointer-events: none;
}


/* ---------- 6. Sources ---------------------------------------------------- */
.sources__inner, .tipline__inner {
  width: min(100% - 2 * var(--gutter) - var(--thread-room), 66ch);
  margin-inline: auto;
}
.sources h2 { margin-bottom: 1.5rem; }
.sources__list { list-style: none; border-top: 2px solid var(--dusk-violet); }
.sources__list li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 10px;
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--dusk-violet);
  font-size: 1.0625rem; line-height: 1.45;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.sources__list li:target { background: rgb(217 140 66 / .16); box-shadow: inset 4px 0 0 var(--mustard); }
.sources__n { padding: .2em 0 0 8px; font: 600 .875rem/1.3 var(--font-mono); letter-spacing: .04em; color: var(--lift-teal); }
.sources__list a { color: var(--cream); }

/* ---------- 7. Tip line ---------------------------------------------------- */
.tipline { padding-block: 4.25rem 4.5rem; }
.tipline__line { margin: 0; max-width: 44ch; font: 700 var(--fs-h3)/1.45 var(--font-body); color: var(--cream); text-wrap: pretty; }
.tipline__line a { color: var(--cream); text-decoration-thickness: 2px; text-underline-offset: .22em; }

/* ---------- 8. Next and before ------------------------------------------- */
.nextprev__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.np {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 28px 28px;
  border: 2px solid var(--bone);
  background: var(--ground-black);
  color: var(--cream); text-decoration: none;
}
.np--next { background: var(--wine); }
.np:hover .np__title { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--mustard); text-underline-offset: .18em; }
.np--next:hover .np__title { text-decoration-color: var(--cream); }
.np__dir { color: var(--label); }
.np__act { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.np__line { font-size: 1rem; font-style: italic; }
.np__title { margin-top: 4px; color: var(--display); }
.np__date { margin-top: auto; padding-top: 6px; color: var(--label); }

/* ==========================================================================
   Desktop, 1280px and up, scripts on: the essay sits left, the receipts open
   in a fixed 440px panel on the right that never moves the text column.
   ========================================================================== */
@media (min-width: 1280px) {
  :root {
    --thread-x: 34px;
    --text-w: min(var(--text-max), 100vw - var(--panel-w) - var(--wrap-left) - var(--thread-room) - var(--tab-room));
    --strip-left: calc(var(--wrap-left) + var(--thread-room) + var(--text-w) + var(--tab-room));
  }
  .js .essay, .js .sources__inner, .js .tipline__inner {
    margin-left: calc(var(--wrap-left) + var(--thread-room));
    margin-right: 0;
    width: var(--text-w);
  }
  /* the evidence column: night plum from the folder tabs to the right edge; the receipt opens in it */
  .js .story__body {
    background: linear-gradient(90deg, var(--ink-plum) 0 var(--strip-left), var(--bone) var(--strip-left) calc(var(--strip-left) + 2px), var(--night-plum) calc(var(--strip-left) + 2px));
  }
  .js .story__body.edge-torn::after {
    background-color: transparent;
    background-image: url("../assets/texture/grain-256.webp"), linear-gradient(90deg, var(--ink-plum) 0 var(--strip-left), var(--night-plum) var(--strip-left));
    background-size: 256px 256px, 100% 100%;
    background-blend-mode: overlay, normal;
  }
  .js .story__body::before {     /* Memphis shapes woven into the evidence column, low contrast */
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--strip-left) + 2px);
    pointer-events: none;
    background: linear-gradient(170deg, #4B3745 0 60%, #5E2D36 100%);
    -webkit-mask: var(--mp-scatter) 24px 40px / 240px 240px repeat, linear-gradient(#000 0, #000 260px, transparent 760px, transparent calc(100% - 640px), #000 calc(100% - 120px));
    mask: var(--mp-scatter) 24px 40px / 240px 240px repeat, linear-gradient(#000 0, #000 260px, transparent 760px, transparent calc(100% - 640px), #000 calc(100% - 120px));
    -webkit-mask-composite: source-in; mask-composite: intersect;
    opacity: .55;
  }
  /* the tab sits in the right margin beside its sentence: an index tab sticking out of the evidence column */
  .js .rtab {
    position: absolute; left: auto; right: calc(-1 * var(--tab-room)); margin: -7px 0 0;
    align-items: center; gap: 9px;
    min-height: 48px; padding: 6px 14px 6px 14px;
    white-space: normal; text-align: left;
  }
  .js .rtab::before { clip-path: polygon(0 6px, 100% 0, 100% 100%, 0 calc(100% - 6px)); }
  .js .rtab__t { display: flex; flex-direction: column; line-height: 1.25; }
  .js .rtab__l { display: block; white-space: nowrap; }

  /* Review, 9 Oct: each tab is the edge of a closed folder filed in the evidence column, level with its
     sentence, so the column reads as the case file running beside the essay instead of an empty slab.
     The button spans tab + folder (one big target, one focus ring); the mustard tab is its ::before. */
  :root {
    --tab-w: 132px;
    --file-w: min(420px, 100vw - var(--strip-left) - 36px);
  }
  .js .rtab {
    left: calc(100% + var(--tab-room) - var(--tab-w)); right: auto;
    width: calc(var(--tab-w) + var(--file-w));
    min-height: 62px;
    padding-right: calc(var(--file-w) + 14px);
  }
  .js .rtab::before { right: var(--file-w); }
  .js .rtab__file {
    position: absolute; top: 0; bottom: 0; right: 0; width: var(--file-w);
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    padding: 8px 18px 8px 18px;
    background: var(--ink-plum);
    border: 2px solid var(--mustard); border-left: 0;
    color: var(--cream); text-align: left; text-transform: none; letter-spacing: 0; white-space: normal;
  }
  .js .rtab__file--paper { padding-right: 104px; }
  .js .rtab__kind { font: 600 var(--fs-label)/1.25 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mustard); }
  .js .rtab__ref { font: 400 1rem/1.3 var(--font-body); color: var(--cream); }
  /* a sliver of the government page tucked into the folder, sticking out of its top edge */
  .js .rtab__paper {
    position: absolute; right: 16px; top: -10px; width: 76px; height: 50px;
    background-color: var(--cream);      /* the scan itself is set by article.js once the page has loaded */
    background-position: 3px 2px; background-size: 250px auto; background-repeat: no-repeat;
    background-blend-mode: multiply;
    border-radius: 1px;
    transform: rotate(3deg);
  }
  .js .essay.has-open .rtab { width: var(--tab-w); padding-right: 14px; }
  .js .essay.has-open .rtab::before { right: 0; }
  .js .essay.has-open .rtab__file { display: none; }
  .js .rtab:hover .rtab__file { border-color: var(--bone); }
  .js .rtab:hover .rtab__kind { color: var(--bone); }

  /* the open receipt fills the evidence column (440px at 1280, wider on wider screens, up to 680px),
     so the government page is as large as the column allows. right: 0 keeps it clear of a visible scrollbar. */
  .js .rcpt {
    position: fixed; z-index: 45;
    top: var(--header-h); bottom: 0; left: var(--strip-left); right: 0;
    width: auto; min-width: var(--panel-w); max-width: 680px;
    margin: 0;
    overflow-y: auto; overscroll-behavior: contain;
    border: 0; border-left: 2px solid var(--bone); border-right: 2px solid var(--dusk-violet);
    scrollbar-width: thin; scrollbar-color: var(--dusk-violet) transparent;
  }
  .js .rcpt__top { position: sticky; top: 0; z-index: 2; background: var(--night-plum); }
  .js .rcpt__page { margin-inline: -2px; }
  .js .rcpt__scan { padding: 6px 7px; }
}

/* ---------- tablet and phone --------------------------------------------- */
@media (max-width: 899px) {
  :root { --thread-x: 10px; --thread-room: 0px; }
  .title-card { padding-block: 2.25rem 2.5rem; }
  .title-card__grid { grid-template-columns: 1fr; gap: 24px; }
  .title-card__text { gap: 16px; }
  .title-card__h { max-width: none; }
  .title-card__art img { max-height: 40vh; }
  .series { padding: 22px 0 22px; }
  .series__wrap { width: 100%; }
  .series__head { padding-inline: var(--gutter); }
  .series__frame { margin-inline: var(--gutter); }
  .series__scroller {
    overflow-x: auto; overscroll-behavior-x: contain;   /* no scroll snap: it pulled the last cell (10A) half out of view */
    scrollbar-width: none;
  }
  .series__scroller::-webkit-scrollbar { display: none; }
  /* review, 9 Oct: the lit Act IX cell was wider (172px) than its 128px grid track, so it covered
     "10A Act X Part A" on phone. Each cell now sets its own track width. */
  .series__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; width: max-content; }
  .series__item { width: 128px; }
  .series__item.is-current { width: 172px; }
  .story__body { padding-top: 2.75rem; }
  .essay { width: calc(100% - 2 * var(--gutter)); }
  .essay > p:first-of-type::first-letter { font-size: 4.1em; }
  .essay__fig { margin: 1.9em 0 2em; }
  .rcpt { margin-inline: -6px; }
  .rcpt__body { padding: 18px 16px 22px; }
  .rcpt__page { margin: 24px 0 30px; }
  /* polish 9 Oct: the government page uses the panel's full inside width (it was 38% of its scanned
     size on a 390px phone), and the box is drawn on the paper's margin so it stays inside the panel */
  .rcpt__open { margin: 22px -16px 26px; }
  .rcpt__open .rcpt__scan { padding: 10px; }
  .rcpt__open .rcpt__box { left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: none; }
  .rcpt__open-l { margin: 14px 16px 0; }
  .rcpt__open:focus-visible { outline-offset: 2px; }
  .rcpt__open:focus-visible .rcpt__open-l { color: var(--bone); }
  html:not(.js) .rcpt__open .rcpt__scan { outline-offset: -6px; }
  .rcpt__body::after { margin: 16px -16px -22px; }
  .sources__inner, .tipline__inner { width: calc(100% - 2 * var(--gutter)); }
  .sources__list li { grid-template-columns: 2.5rem minmax(0, 1fr); font-size: 1rem; }
  .nextprev__grid { grid-template-columns: 1fr; }
  .np { padding: 22px 20px 24px; }
}

/* ==========================================================================
   MOTION. Removing this block leaves the complete, finished page.
   ========================================================================== */
.essay { view-timeline: --essay block; }

@media (prefers-reduced-motion: no-preference) {
  /* folder tab: lifts 3px on hover or focus */
  :root:not([data-motion="still"]) .rtab { transition: transform 150ms var(--ease-out); }
  :root:not([data-motion="still"]) .rtab::before { transition: background-color 150ms ease; }
  :root:not([data-motion="still"]) .rtab:hover,
  :root:not([data-motion="still"]) .rtab:focus-visible { transform: translateY(-3px); }

  /* folder open: the receipt unfolds out of its tab at full size (never squashed,
     so every word in it is readable in every frame), then the box draws round the page */
  :root:not([data-motion="still"]):active-view-transition-type(rcpt-open)::view-transition-old(folder) { animation: none; opacity: 0; }
  :root:not([data-motion="still"]):active-view-transition-type(rcpt-open)::view-transition-new(folder),
  :root:not([data-motion="still"]):active-view-transition-type(rcpt-close)::view-transition-old(folder) {
    animation: none; inline-size: 100%; block-size: 100%; object-fit: none; object-position: left top;
  }
  :root:not([data-motion="still"]):active-view-transition-type(rcpt-close)::view-transition-new(folder) { animation: none; opacity: 0; }

  :root:not([data-motion="still"]) .rcpt.is-open .rcpt__box-line { animation: rcpt-box 600ms cubic-bezier(.5, 1, .89, 1) 240ms both; }

  /* polish 9 Oct: a receipt whose sentence is a screen out of view slides back off to the right at full
     size (no fade, so every word stays readable in every frame); article.js closes it when this ends */
  :root:not([data-motion="still"]) .rcpt.is-leaving { animation: rcpt-away 420ms cubic-bezier(.55, 0, .7, .25) both; pointer-events: none; }

  /* the reading thread fills with your place in the essay (scroll-linked, art layer only) */
  @supports (animation-timeline: view()) {
    :root:not([data-motion="still"]) .thread__fill,
    :root:not([data-motion="still"]) .thread__run {
      display: block;
      animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --essay;
      animation-range: cover 50vh cover calc(100% - 50vh);
    }
    :root:not([data-motion="still"]) .thread__fill { animation-name: thread-fill; }
    :root:not([data-motion="still"]) .thread__run { animation-name: thread-run; }
  }
}
@keyframes rcpt-box { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rcpt-away { to { transform: translateX(calc(100% + 4px)); } }
@keyframes thread-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes thread-run { from { transform: translateY(0); } to { transform: translateY(100%); } }