/* ============================================================
   $ABNI
   Concept: a banknote proof sheet that went through a proofreader.
   Two ink system: plate black for the document, correction red for
   the marks. Intaglio green appears only on money figures.

   Four voices of type:
   display  League Gothic   the overprint (hero + denomination only)
   text     Public Sans     the US government's own document face
   mono     Courier Prime   the typewriter of memos and filings
   hand     Caveat          the proofreader (five marks, never more)
   ============================================================ */

/* Display: ATF Alternate Gothic revival. The overprint voice.
   Used exactly twice: the hero and the denomination. */
@font-face {
  font-family: "League Gothic";
  src: url("fonts/league-gothic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Text: the US federal government's document face (USWDS). */
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Mono: the typewriter of memos and filings. */
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Self hosted so the handwriting never silently falls back.
   The marks are the whole idea, they cannot render as generic italic. */
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat.woff2") format("woff2-variations"),
       url("fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* paper stock */
  --stock:    #F6F5F1;
  --stock-2:  #EFEEE8;
  --rule:     #DBDAD2;
  --rule-2:   #E8E7E0;

  /* engraving plate ink. plate-3 is the lightest READING ink and
     holds 4.5:1 on the stock; faint is decorative only (microrule,
     register mark), never for text that must be read. */
  --plate:    #171916;
  --plate-2:  #62645D;
  --plate-3:  #6E706A;
  --faint:    #96988F;

  /* the only two accents */
  --red:      #C8322A;   /* proofreader's correction ink */
  --intaglio: #1F5D46;   /* historical banknote green, not crypto neon */

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 33rem;
  --margin-col: 13rem;
  /* The text column is sized to the copy, not to the viewport. A
     proofreader's note sits beside the line it corrects, so the
     margin has to be adjacent. Let this stretch to 1fr and the
     correction drifts hundreds of pixels away from its subject. */
  --text-col: 35rem;

  --display: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --sans: "Public Sans", "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --t-xs: 0.71875rem;   /* 11.5px, Courier runs optically small */
  --t-sm: 0.84375rem;   /* 13.5px, same reason */
  --t-bd: 1rem;
  --t-md: 1.25rem;
  --t-lg: 1.75rem;
  --t-hero: clamp(3.25rem, 14vw, 11rem);  /* condensed face buys the size */
}

@media (prefers-color-scheme: dark) {
  :root {
    --stock: #131412;   --stock-2: #1A1B18;
    --rule: #2E2F2B;    --rule-2: #232420;
    --plate: #EAEAE4;   --plate-2: #93958C;
    --plate-3: #82847C; --faint: #64665F;
    --red: #F4574A;     --intaglio: #4FBF92;
  }
}
:root[data-theme="dark"] {
  --stock: #131412;   --stock-2: #1A1B18;
  --rule: #2E2F2B;    --rule-2: #232420;
  --plate: #EAEAE4;   --plate-2: #93958C;
  --plate-3: #82847C; --faint: #64665F;
  --red: #F4574A;     --intaglio: #4FBF92;
}
:root[data-theme="light"] {
  --stock: #F6F5F1;   --stock-2: #EFEEE8;
  --rule: #DBDAD2;    --rule-2: #E8E7E0;
  --plate: #171916;   --plate-2: #62645D;
  --plate-3: #6E706A; --faint: #96988F;
  --red: #C8322A;     --intaglio: #1F5D46;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--stock);
  color: var(--plate);
  font-family: var(--sans);
  font-size: var(--t-bd);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

/* Rag paper has tooth. One static veil of fibre over the stock,
   quiet enough that you cannot swear it is there until it is gone. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .04;
}
@media (prefers-color-scheme: dark) { body::before { mix-blend-mode: screen; opacity: .05; } }
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .05; }
:root[data-theme="light"] body::before { mix-blend-mode: multiply; opacity: .04; }

.sheet { max-width: 60rem; margin: 0 auto; padding: 0 var(--pad); }

/* ---------- document head ---------- */

.dochead {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2.5rem;
  padding: 1.5rem 0 1rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--plate-3);
}
.dochead span { display: flex; gap: .55rem; }
.dochead b { color: var(--plate); font-weight: 400; }

/* Serial numbers on real notes are a second letterpress pass in
   green ink, visibly not the black of the engraving. */
.dochead .serial b { font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--intaglio); }

/* Registration mark: the second colour pass has to land on the first.
   This page has two ink passes, so the mark is earned. */
.dochead .reg { margin-left: auto; display: flex; align-items: center; color: var(--faint); }
@media (max-width: 40rem) { .dochead .reg { display: none; } }

/* The rule under the head is microprinted text, like the hairlines
   on a note that resolve into words when you lean in. */
.microrule {
  font-family: var(--mono);
  font-size: 5px;
  line-height: 1;
  letter-spacing: .22em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--faint);
  padding-bottom: 2px;
  user-select: none;
}

/* ---------- clause grid: body plus proofing margin ---------- */

.clause {
  display: grid;
  grid-template-columns: minmax(0, var(--text-col)) var(--margin-col);
  gap: 0 3.25rem;
  align-items: start;
  padding: clamp(2.5rem, 5.5vh, 4.25rem) 0;
  border-bottom: 1px solid var(--rule);
}
.body { min-width: 0; }

.mark { padding-top: .3rem; }

/* The proofreader writes the symbol by hand too, so it gets the
   same ink as the note. A boxed label would read as a UI badge. */
.mark-sym {
  display: inline-block;
  font-family: var(--hand);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 1.5px solid var(--red);
  padding-bottom: .1rem;
  margin-bottom: .7rem;
  opacity: .85;
}
/* Caveat runs small on the body, so it needs more size than a
   text face at the same optical weight. */
.mark-txt {
  font-family: var(--hand);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: .005em;
  color: var(--red);
  margin: 0;
}
/* The proofreader marks italics by underlining the word, and
   Caveat has no italic face: a synthesized slant would be fake
   handwriting. The underline is the historically exact gesture. */
.mark-txt em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

@media (max-width: 58rem) {
  .clause { grid-template-columns: 1fr; gap: 2.25rem 0; }
  .mark-txt { max-width: 24rem; }
}

/* ---------- shared type ---------- */

.cl-no {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--plate-3);
  margin: 0 0 1.75rem;
}

h2 {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.14;
  margin: 0 0 1.35rem;
  max-width: 20ch;
  text-wrap: balance;
}

p { margin: 0 0 1rem; max-width: var(--measure); color: var(--plate-2); }
p:last-child { margin-bottom: 0; }
strong { color: var(--plate); font-weight: 600; }

/* ---------- hero: the cancelled overprint ---------- */

.hero { padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(2rem, 4.5vh, 3rem); }

h1 {
  font-family: var(--display);
  font-size: var(--t-hero);
  font-weight: 400;              /* League Gothic ships one weight; enough at this size */
  line-height: .88;
  letter-spacing: .012em;        /* condensed gothics never get negative tracking */
  text-transform: uppercase;
  margin: 0;
}
.h1-2 { display: block; }

/* The press printed "not" in plate ink like every other word.
   Only the proofreader's pen is red: strokes and pools carry the
   correction ink, the word itself never does. */
.over { position: relative; display: inline-block; }

/* <del>: the browser's own dele. Screen readers announce the
   deletion, so AT hears the corrected sentence. The SVG strokes
   are the strike, so the default line-through goes. */
.over > del { text-decoration: none; animation: concede .3s ease-out 1.38s forwards; }
@keyframes concede { to { opacity: .46; } }

/* Overshoots the word on both sides. Nobody strikes a word out
   and stops neatly at the last letter. */
/* Asymmetric overshoot. A hand starts the stroke early, in the space
   before the word, and lifts sooner than it began. Weighting it left
   also keeps the strike clear of ISSUED, which sits close in a
   condensed face. */
.over svg {
  position: absolute;
  left: -17%; top: -20%;
  width: 122%; height: 140%;
  overflow: visible;
  pointer-events: none;
}

/* One pen, two strokes, in sequence. Dwell then flick: heavy
   ease-in, released at speed, the round cap leaves the paper. */
.over path {
  fill: none;
  stroke: var(--red);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: ink .24s cubic-bezier(.66, .02, .9, .36) .66s forwards;
}
.over path:nth-of-type(2) {
  stroke-width: 6;
  animation: ink .2s cubic-bezier(.66, .02, .9, .36) 1.13s forwards;
}
@keyframes ink { to { stroke-dashoffset: 0; } }

/* Ink pools at pen-down: the pen dwells a frame before it moves. */
.pool { fill: var(--red); opacity: 0; animation: pool .09s ease-out .62s forwards; }
.pool-2 { animation-delay: 1.09s; }
@keyframes pool { to { opacity: .9; } }

.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, var(--text-col)) var(--margin-col);
  gap: 0 3.25rem;
  align-items: end;
  margin-top: clamp(1.75rem, 3.5vh, 2.5rem);
}
@media (max-width: 58rem) { .hero-foot { grid-template-columns: 1fr; gap: 2rem 0; } }

.lede {
  font-size: var(--t-md);
  line-height: 1.42;
  letter-spacing: -.008em;
  color: var(--plate);
  max-width: 28ch;
  margin: 0;
}

/* The proofreader writes the symbol first, then the note. */
.hero-mark .mark-sym,
.hero-mark .mark-txt { opacity: 0; animation: rise .38s cubic-bezier(.2, .7, .3, 1) forwards; }
.hero-mark .mark-sym { animation-delay: 1.48s; }
.hero-mark .mark-txt { animation-delay: 1.64s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}


/* ---------- ledger panel ---------- */

/* The counterfoil: the stub of a certificate that carries the
   registered figures. Ruled like a ledger, not boxed like a card,
   so it belongs to the document instead of floating on top of it. */
.ledger {
  border-top: 1px solid var(--plate-2);
  border-bottom: 1px solid var(--rule);
  padding: .9rem 0 1.1rem;
}
.ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--plate-3);
  padding-bottom: .9rem;
}
.ledger-title { color: var(--plate); }
.ledger-live { display: flex; align-items: center; gap: .45rem; }
.ledger-live i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--intaglio);
  animation: tick 2.6s ease-in-out infinite;
}
@keyframes tick { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }

.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem 1.75rem;
  margin: 0;
}
/* Contract takes three of the four columns so the ticker completes
   the first row and the four money figures fill the second. No half
   empty row at the bottom of a ledger. */
.fig-wide { grid-column: span 3; }
@media (max-width: 52rem) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig-wide { grid-column: span 2; }
}

.fig dt {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--plate-3);
  margin-bottom: .3rem;
}
.fig dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--plate);
}
/* Only money that already left the contract is printed in the
   second ink. Market cap and holder count are not payouts. */
.fig-paid dd { color: var(--intaglio); }

.fig-addr { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.copy {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plate-3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 1px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.copy:hover { color: var(--plate); border-bottom-color: var(--plate-2); }
.copy.is-done { color: var(--intaglio); border-bottom-color: var(--intaglio); }

.ledger-foot {
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--plate-3);
  margin: 1.1rem 0 0;
  max-width: 46ch;
}

/* ---------- evidence exhibits ---------- */

/* Hand-lapped ring: the end overshoots the start, nobody closes
   a circle exactly. Drawn once when Clause 1 enters the viewport. */
.ring { position: relative; display: inline-block; padding: 0 .08em; }
.ring svg {
  position: absolute;
  left: -.3em; right: -.3em; top: -.32em; bottom: -.24em;
  width: calc(100% + .6em); height: calc(100% + .56em);
  overflow: visible;
  pointer-events: none;
}
.ring path {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.8px;           /* constant thanks to non-scaling-stroke */
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.ring.drawn path {
  /* a circling gesture: steadier than a flick, still accelerates out */
  animation: ink .42s cubic-bezier(.5, .05, .7, .4) forwards;
}

/* An exhibit is a document attached to the proof sheet, not an
   embedded social card. It keeps the page's ink and stock, so the
   quotation reads as evidence rather than as a widget. */
.exhibit { margin: 1.5rem 0 0; }
.ex-tag {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--plate-3);
  padding-bottom: .55rem;
}
.tweet {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--plate-2);
  background: var(--stock-2);
  padding: 1rem 1.15rem .9rem;
}
.tw-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .7rem; }
.tw-av {
  flex: none;
  width: 1.9rem; height: 1.9rem;
  border: 1px solid var(--plate-2);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .04em;
  color: var(--plate-2);
}
.tw-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tw-who b { font-size: var(--t-sm); font-weight: 600; }
.tw-who span {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--plate-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-body {
  font-size: var(--t-bd);
  line-height: 1.5;
  color: var(--plate);
  margin: 0 0 .7rem;
  max-width: none;
}
.tw-body b { font-weight: 600; box-shadow: inset 0 -.42em 0 color-mix(in srgb, var(--red) 13%, transparent); }
.tw-meta {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--plate-3);
  margin: 0;
  max-width: none;
}
.tw-meta a { color: var(--plate-2); text-underline-offset: 3px; text-decoration-color: var(--rule); }
.tw-meta a:hover { color: var(--plate); text-decoration-color: currentColor; }

.ex-note {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--plate-3);
  margin: .9rem 0 0;
}
.payoff { margin-top: 1.5rem; color: var(--plate-2); }

/* ---------- reconciliation columns ---------- */

.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; max-width: 100%; }
@media (max-width: 40rem) { .cmp { grid-template-columns: 1fr; gap: 2.25rem 0; } }

.cmp h3 {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--plate-3);
  margin: 0 0 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
}
.cmp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.cmp li { font-size: var(--t-sm); line-height: 1.48; color: var(--plate-2); }
/* Ours is set apart by ink strength, not by a colour accent:
   green stays reserved for money figures. */
.cmp .ours h3 { color: var(--plate); border-bottom-color: var(--plate); }
.cmp .ours li { color: var(--plate); }

/* ---------- steps ---------- */

.steps { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.steps li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0 1.15rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule-2);
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps b { font-family: var(--mono); font-size: var(--t-sm); color: var(--plate-3); font-weight: 400; }
.steps h3 { font-size: var(--t-bd); font-weight: 600; margin: 0 0 .25rem; letter-spacing: -.012em; }
.steps p { font-size: var(--t-sm); margin: 0; }

/* ---------- the close ---------- */

.held { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 1.6rem; font-variant-numeric: tabular-nums; }
/* Second and last appearance of the display face: the struck word
   and the number that never moves, bookends of the joke. */
.held-n { font-family: var(--display); font-size: 3.5rem; line-height: 1; letter-spacing: .01em; color: var(--intaglio); }
.held-l { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--plate-3); }

.acts { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.btn, .btn-2 { cursor: pointer; }
.btn {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .8rem 1.9rem;
  background: var(--plate);
  color: var(--stock);
  border: 1px solid var(--plate);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: transparent; color: var(--plate); }
.btn-2 {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-sm);
  padding: .8rem 1.35rem;
  color: var(--plate-2);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.btn-2:hover { border-color: var(--plate-2); color: var(--plate); }

/* The seal closes the document. It sits alone, centred, with nothing
   printed under it. Overlapping it with the specimen overprint made
   two quiet marks into one loud smudge. */
.seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  padding: clamp(2.5rem, 5vh, 3.75rem) 0 clamp(2rem, 4vh, 3rem);
}
#guilloche { display: block; width: 168px; height: 168px; opacity: .9; }
.seal-cap {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--plate-3);
  margin: 0;
  text-align: center;
}
.seal-cap b { color: var(--intaglio); font-weight: 400; }

a:focus-visible, .btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

footer {
  padding: 2.75rem 0 4rem;
  font-size: var(--t-xs);
  line-height: 1.75;
  color: var(--plate-3);
  max-width: 44rem;
}

/* End state under reduced motion is the settled page: strikes drawn,
   pools present, NOT conceded, notes visible, ring closed. */
@media (prefers-reduced-motion: reduce) {
  .over path, .ring path { animation: none; stroke-dashoffset: 0; }
  .pool { animation: none; opacity: .9; }
  .over > del { animation: none; opacity: .46; }
  .hero-mark .mark-sym,
  .hero-mark .mark-txt { animation: none; opacity: 1; transform: none; }
}

/* The ledger spans the full sheet: it is the certificate stub, not a
   clause, so no proofing margin is reserved beside it. */
.ledger, .seal, footer { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .ledger-live i { animation: none; }
}

/* The comparison now closes Clause 1 instead of standing alone. */
.payoff + .cmp { margin-top: 1.6rem; }

/* Step three is not a step. You do not perform it, it is performed
   on you, so it loses its number and takes the money ink. */
.step-out b { color: var(--intaglio); font-size: 1rem; }
.step-out h3 { color: var(--intaglio); }

/* Our own PSA, set in the same frame as his but signed in the second
   ink. Same format, opposite content. That is the entire joke. */
.tweet-ours {
  border-left-color: var(--intaglio);
  background: color-mix(in srgb, var(--intaglio) 4%, var(--stock-2));
  margin-bottom: 1.75rem;
}
.tweet-ours .tw-av { border-color: var(--intaglio); color: var(--intaglio); }
.tweet-ours .tw-body b {
  font-weight: 600;
  color: var(--intaglio);
  box-shadow: inset 0 -.42em 0 color-mix(in srgb, var(--intaglio) 12%, transparent);
}
.tweet-ours .tw-meta { color: var(--plate-3); }

/* ---------- the flow ---------- */

/* Buy, hold, earn read as one horizontal movement rather than a
   stacked list. The arrows are drawn in correction ink because they
   are the same hand that struck the word in the hero. */
.flow {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0 1rem;
  counter-reset: none;
}

.flow-step { min-width: 0; }
.flow-n {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  color: var(--plate-3);
  margin-bottom: .55rem;
  min-height: 1em;
}
.flow-step h3 {
  font-family: var(--display);
  font-size: clamp(1.65rem, 3.6vw, 2.5rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .008em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
  color: var(--plate);
}
.flow-step p {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--plate-2);
  margin: 0;
  max-width: 22ch;
}

/* The payout is the only step you do not perform, so it carries the
   money ink instead of the plate ink. */
.is-payout h3 { color: var(--intaglio); }

/* The connector must never outweigh what it connects. */
.flow-arrow {
  align-self: start;
  padding-top: 2rem;
  width: clamp(2rem, 5vw, 3.75rem);
}
.flow-arrow svg {
  display: block;
  width: 100%;
  height: 2.5rem;
  overflow: visible;
}
.fa-line, .fa-head {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Each arrow draws its shaft, then its head, and only once the step
   before it has landed. Nothing moves until the block is on screen. */
.flow.drawn .fa-line { animation: drawflow .34s cubic-bezier(.5,.05,.3,1) forwards; }
.flow.drawn .fa-head { animation: drawflow .16s ease-out forwards; }
.flow.drawn .flow-arrow:nth-of-type(2) .fa-line { animation-delay: .30s; }
.flow.drawn .flow-arrow:nth-of-type(2) .fa-head { animation-delay: .62s; }
.flow.drawn .flow-arrow:nth-of-type(4) .fa-line { animation-delay: .86s; }
.flow.drawn .flow-arrow:nth-of-type(4) .fa-head { animation-delay: 1.18s; }
@keyframes drawflow { to { stroke-dashoffset: 0; } }

/* Hidden only once JS confirms it can reveal them again, and the
   drawn state sets opacity itself. A suspended animation must never
   be the only thing standing between the reader and the content. */
.flow.js-anim .flow-step { opacity: 0; transform: translateY(5px); }
.flow.drawn .flow-step {
  opacity: 1;
  transform: none;
  animation: stepin .34s cubic-bezier(.2,.7,.3,1) backwards;
}
.flow.drawn .flow-step:nth-of-type(1) { animation-delay: 0s; }
.flow.drawn .flow-step:nth-of-type(3) { animation-delay: .56s; }
.flow.drawn .flow-step:nth-of-type(5) { animation-delay: 1.12s; }
@keyframes stepin { to { opacity: 1; transform: none; } }

/* Stacked, the arrows turn to point down the page. */
@media (max-width: 46rem) {
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow-step p { max-width: none; }
  .flow-arrow { padding: .55rem 0; width: 2.75rem; }
  .flow-arrow svg { height: 1.9rem; transform: rotate(90deg); transform-origin: center; }
}

@media (prefers-reduced-motion: reduce) {
  .flow.js-anim .flow-step { opacity: 1; transform: none; }
  .flow .flow-step { animation: none; }
  .flow .fa-line, .flow .fa-head { stroke-dashoffset: 0; animation: none; }
}

/* The live dot stops pulsing and goes to plate ink once the figures
   stop refreshing. The numbers stay, only the claim about them
   changes, because a stale number is still the last true one. */
.ledger[data-state="stale"] .ledger-live i {
  background: var(--plate-3);
  animation: none;
}
.ledger[data-state="stale"] .ledger-live { color: var(--plate-3); }

/* A figure swapping in must not shift the row, so every cell is
   already tabular and the panel is laid out before data arrives. */
.fig dd[data-field] { transition: color .25s ease; }