/* ==========================================================================
   Sponsor Roster — the produx register (12-DESIGN-PLAN-V2.md)

   One typeface + one monospace. One weight (400). Letter-spacing 0 on display
   type. Zero shadows anywhere. 2px corners. Body 17px.

   Palette settled by Ethan 2026-08-10 (V2 §9, D6). Ratios below are computed;
   every one is re-measured on RENDERED PIXELS in the verification loop, because
   a ratio read off a stylesheet is not evidence (vpp/CLAUDE.md §9).

   Seamlessness is carried by four things, not by a picture (V2 §3b):
     1. momentum scroll (Lenis, app.js)
     2. sections that bleed — no section has a background, so none has an edge
     3. one easing curve and one duration set for every movement on the page
     4. no blank or white frame at any transition
   ========================================================================== */

:root {
  /* --- colour. Ratios are against --ground. --------------------------- */
  --ground:  #08110c;            /* very dark green, near-black          */
  --text:    #edebdd;            /* warm off-white          16.00 : 1    */
  --muted:   #8e9186;            /* secondary text           5.97 : 1    */
  --line:    #6e7268;            /* control boundaries       3.90 : 1    */
  --gold:    #c9a227;            /* the one accent           7.92 : 1    */
  --on-gold: #08110c;            /* text on a gold fill      7.92 : 1    */
  --hair:    rgb(237 235 221 / 9%);  /* decorative rules only            */

  /* --- type. Weight 400 only, letter-spacing 0 on display. ------------ */
  --display: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t-hero:  clamp(2.6rem, 7vw, 6.4rem);      /* 41.6 → 102px            */
  --t-h2:    clamp(2rem, 3.4vw, 2.875rem);    /* 32 → 46px               */
  --t-h3:    clamp(1.25rem, 1.5vw, 1.5rem);   /* 20 → 24px               */
  --t-lede:  clamp(1.1875rem, 1.1vw + 1rem, 1.375rem);
  --t-body:  17px;                            /* the floor, not a choice */
  --t-mono:  13px;

  /* --- space ---------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --rail-x: clamp(18px, 3.2vw, 56px);
  --edge:   clamp(20px, 3.4vw, 60px);
  --pad-l:  calc(var(--rail-x) + clamp(22px, 2.6vw, 48px));

  --r: 2px;

  /* --- motion. ONE curve, four durations. Nothing else, anywhere. ----- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-1: 160ms; --d-2: 320ms; --d-3: 620ms; --d-4: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--ground);       /* no white frame, ever — including
                                      before the stylesheet finishes */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: transparent;         /* .ground paints it, and never scrolls */
  color: var(--text);
  font: 400 var(--t-body)/1.62 var(--display);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
em { font-style: normal; color: var(--gold); }

:focus-visible {
  outline: 2px solid var(--gold);  /* 7.92:1 — clears the 3:1 non-text floor */
  outline-offset: 3px;
}

.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.num { color: var(--gold); margin-right: 0.6em; }

.skip {
  position: fixed; left: var(--s-4); top: -100px; z-index: 60;
  background: var(--gold); color: var(--on-gold);
  padding: var(--s-3) var(--s-5); border-radius: var(--r);
  font-size: var(--t-mono); font-family: var(--mono); text-transform: uppercase;
  transition: top var(--d-1) var(--ease);
}
.skip:focus { top: var(--s-4); }

/* --- the ground -----------------------------------------------------------
   Fixed, so it never scrolls and never repaints. Every section is transparent,
   which is why no section can show an edge. This is rule 2 of seamlessness,
   done structurally instead of by matching paddings. */

.ground {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 78% at 50% -12%, #0e1c14 0%, rgb(8 17 12 / 0%) 62%),
    radial-gradient(84% 56% at 104% 104%, #0c1710 0%, rgb(8 17 12 / 0%) 58%),
    var(--ground);
}

/* --- the rail -------------------------------------------------------------
   The only element continuous from the first pixel to the last. Its gold fill
   is scroll progress, written by app.js as one transform — compositor work,
   no layout, so it cannot cost a scroll frame. */

.rail {
  position: fixed; left: var(--rail-x); top: 0; bottom: 0; width: 1px;
  background: var(--hair); z-index: 2; pointer-events: none;
}
.rail__fill {
  display: block; height: 100%; width: 100%;
  background: var(--gold); opacity: 0.75;
  transform: scaleY(var(--p, 0)); transform-origin: top;
}

/* --- shared band skeleton -------------------------------------------------
   Label column left (sticky, so the section names itself the whole time it is
   on screen), body right. minmax(0,…) on both tracks: a bare 1fr is
   minmax(auto,1fr) and one long word can widen the page. */

.masthead,
.band, .hero, .foot {
  padding-left: var(--pad-l);
  padding-right: var(--edge);
}

/* One column on a phone. A fixed 190px label track left the body column 101px
   wide at 375 — every grid inside it collapsed and the page scrolled sideways.
   The label track only exists where there is width to spend on it. */
.band, .foot {
  display: grid;
  gap: var(--s-6) clamp(24px, 3.4vw, 64px);
  padding-block: clamp(var(--s-9), 11vh, 168px);
}
@media (min-width: 1000px) {
  .band, .foot {
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    gap: 0 clamp(24px, 3.4vw, 64px);
  }
  .band__label { position: sticky; top: var(--s-8); align-self: start; }
}
.band__body  { min-width: 0; }
.band__h     { font-size: var(--t-h2); line-height: 1.06; max-width: 20ch; }

.lede  { font-size: var(--t-lede); line-height: 1.5; max-width: 46ch; }
.note  { font-size: var(--t-body); color: var(--muted); max-width: 52ch; }
.split { display: grid; gap: clamp(var(--s-6), 4vw, var(--s-9)); margin-top: var(--s-7); }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.band .note { margin-top: var(--s-7); }
.split .note { margin-top: 0; }
.note--right { border-top: 1px solid var(--hair); padding-top: var(--s-5); }

/* One side of a two-sided section. The gold label above each half is the same
   object in three places — one rule, three names. */
.side { display: grid; gap: var(--s-5); align-content: start; }
.side .ledger { margin-top: var(--s-2); }
.who, .does__who, .formcol__who { color: var(--gold); }

/* --- masthead ------------------------------------------------------------- */

.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-5); flex-wrap: wrap;
  padding-block: var(--s-6) 0;
  position: relative; z-index: 3;
}
.masthead .mono:first-child { color: var(--text); letter-spacing: 0.1em; }
.masthead__state { text-align: right; }

/* --- 00 · hero ------------------------------------------------------------ */

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--s-6);
  padding-block: clamp(var(--s-8), 12vh, 150px) clamp(var(--s-7), 7vh, 96px);
}
.hero__index { align-self: start; }
.hero__h {
  align-self: center;
  font-size: var(--t-hero);
  line-height: 1.05;
  max-width: 15ch;
  text-wrap: initial;
}
.hero__h .line { display: block; }

.hero__foot {
  display: grid; gap: var(--s-6);
  border-top: 1px solid var(--hair); padding-top: var(--s-6);
}
@media (min-width: 900px) {
  .hero__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end; gap: var(--s-8);
  }
}
.hero__sub { font-size: var(--t-lede); line-height: 1.5; max-width: 44ch; }
.hero__acts { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero__fine { font-size: var(--t-mono); font-family: var(--mono); color: var(--muted);
              max-width: 62ch; line-height: 1.7; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r);
  background: transparent; color: var(--text);
  font: 400 var(--t-body)/1 var(--display); letter-spacing: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--d-2) var(--ease),
              border-color var(--d-2) var(--ease),
              color var(--d-2) var(--ease);
}
.btn:hover  { border-color: var(--gold); color: var(--gold); }
.btn--gold  { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--text); border-color: var(--text); color: var(--on-gold); }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: var(--t-mono);
           font-family: var(--mono); text-transform: uppercase; }

/* --- 01 · the ledger ------------------------------------------------------ */

.ledger { display: grid; }
.ledger li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--hair);
}
.ledger li:last-child { border-bottom: 1px solid var(--hair); }
.ledger__v { font-size: var(--t-h3); line-height: 1.2; text-align: right; }

/* No nowrap on the placeholder itself. The text plus its mark is ~310px as one
   unbreakable box — wider than a 375px phone's content column. It dragged the
   whole document out to 564px and collapsed every grid inside it. Only the
   mark stays unbreakable, and the mark alone fits. */
.awaiting {
  color: var(--muted);
  border-bottom: 1px dotted var(--line);
  padding-bottom: 2px;
}
.awaiting::after {
  content: ' ' attr(data-mark);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold);
  vertical-align: super; white-space: nowrap;
}

/* --- 03 · what signing up does — both sides on screen at once ------------- */

.does { display: grid; gap: clamp(var(--s-8), 5vw, var(--s-10)); margin-top: var(--s-7); }
@media (min-width: 1000px) {
  .does { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.does__who { margin-bottom: var(--s-5); }
.steps { display: grid; gap: var(--s-6); }
.steps li { border-top: 1px solid var(--hair); padding-top: var(--s-5); }
.steps h3 { font-size: var(--t-h3); line-height: 1.15; margin-bottom: var(--s-2); }
.steps p  { color: var(--muted); max-width: 46ch; }

/* --- the onward step ------------------------------------------------------
   The one action, repeated once in the middle of the page. Sits where the
   reader has just finished reading what signing up does. */

.onward {
  display: grid; gap: var(--s-5); justify-items: start;
  margin-top: var(--s-8);
  border-top: 1px solid var(--hair); padding-top: var(--s-6);
}
@media (min-width: 1000px) {
  .onward {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end; gap: var(--s-8);
  }
}

/* --- 03 · forms ----------------------------------------------------------- */

.forms { display: grid; gap: clamp(var(--s-8), 5vw, var(--s-10)); margin-top: var(--s-7); }
@media (min-width: 1000px) {
  .forms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.formcol__who { margin-bottom: var(--s-5);
                border-top: 1px solid var(--hair); padding-top: var(--s-5); }

.form { display: grid; gap: var(--s-6); }
.field { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); padding: 0;
}
/* --line is a boundary colour at 3.90:1 — fine for a rule, below the 4.5 floor
   for 13px text. Measured on rendered pixels at 3.83:1 and 3.90:1. */
.opt { text-transform: none; letter-spacing: 0; color: var(--muted); }

.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=search],
.field textarea,
.dash select {
  width: 100%; min-width: 0;
  background: transparent; color: var(--text);
  font: 400 var(--t-body)/1.5 var(--display);
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: var(--s-3) 0; min-height: 44px;
  transition: border-color var(--d-2) var(--ease);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .dash select:focus { border-bottom-color: var(--gold); }

/* Chrome paints autofilled fields pale blue. No shadow hack — a very long
   background-color transition keeps our own colour without adding a shadow. */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  transition: background-color 600000s 0s, border-color var(--d-2) var(--ease);
}

.choices { display: grid; gap: var(--s-1); margin-top: var(--s-2); }
.choice {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px; cursor: pointer;
  font-family: var(--display); font-size: var(--t-body); letter-spacing: 0;
  text-transform: none; color: var(--text);
}
.choice input { accent-color: var(--gold); width: 18px; height: 18px; flex: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { font-size: var(--t-body); color: var(--muted); min-height: 1.6em; }
.form__status[data-state="error"] { color: var(--gold); }

.form__done h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.form__done p  { color: var(--muted); max-width: 44ch; }
.inkmark {
  display: block; width: 56px; height: 40px; margin-bottom: var(--s-4);
  fill: none; stroke: var(--gold); stroke-width: 3;
  stroke-linecap: square; stroke-linejoin: miter;
  stroke-dasharray: 92; stroke-dashoffset: 92;
}
.is-done .inkmark { stroke-dashoffset: 0; transition: stroke-dashoffset var(--d-4) var(--ease); }
.is-sending button { opacity: 0.55; pointer-events: none; }

/* --- footer --------------------------------------------------------------- */

.foot { padding-block: clamp(var(--s-8), 8vh, 120px) var(--s-9); }
.foot__body { display: grid; gap: var(--s-7); }
@media (min-width: 900px) {
  .foot__body { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-10); align-items: start; }
}
.foot__links { display: grid; gap: var(--s-3); align-content: start; }
/* padding-top brings the tap area to 44px without moving the underline away
   from the text. Measured at 33px before this. */
.foot__links a { text-decoration: none; border-bottom: 1px solid var(--hair);
                 display: block; padding-top: 12px; padding-bottom: 4px;
                 transition: border-color var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.foot__links a:hover { color: var(--gold); border-color: var(--gold); }
.foot__fine { display: grid; gap: var(--s-4); color: var(--muted);
              font-size: var(--t-mono); font-family: var(--mono); line-height: 1.7; }
.foot__fine p { max-width: 68ch; }
.foot__fine a { color: var(--gold); }

/* --- motion ---------------------------------------------------------------
   Every movement on the page uses --ease and one of the four durations. That
   is rule 3 of seamlessness: nothing looks borrowed from somewhere else. */

.js .reveal { opacity: 0; transform: translate3d(0, 14px, 0); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease);
}
/* The sticky section label fades WITHOUT a transform. A transformed ancestor
   becomes a containing block and breaks position:sticky underneath it — the
   label would unstick for the length of every reveal. */
.js .reveal-soft { opacity: 0; }
.js .reveal-soft.is-in { opacity: 1; transition: opacity var(--d-3) var(--ease); }

/* hero entrance, on load */
.js .hero__index,
.js .hero__h .line,
.js .hero__foot,
.js .hero__fine { opacity: 0; transform: translate3d(0, 16px, 0); }
.js body.is-loaded .hero__index,
.js body.is-loaded .hero__h .line,
.js body.is-loaded .hero__foot,
.js body.is-loaded .hero__fine {
  opacity: 1; transform: none;
  transition: opacity var(--d-4) var(--ease), transform var(--d-4) var(--ease);
}
.js body.is-loaded .hero__h .line:nth-child(1) { transition-delay: 90ms; }
.js body.is-loaded .hero__h .line:nth-child(2) { transition-delay: 180ms; }
.js body.is-loaded .hero__foot { transition-delay: 300ms; }
.js body.is-loaded .hero__fine { transition-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in,
  .js .reveal-soft, .js .reveal-soft.is-in,
  .js .hero__index, .js .hero__h .line, .js .hero__foot, .js .hero__fine {
    opacity: 1; transform: none; transition: none;
  }
  .inkmark, .is-done .inkmark { stroke-dashoffset: 0; transition: none; }
  * { animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   The private side — login, dashboard, and the no-JS confirmation page.
   Same tokens, same register, so the two halves of the product agree.
   ========================================================================== */

.plainpage { display: grid; place-items: center; min-height: 100svh; padding: var(--s-8); }
.plainpage main { max-width: 46ch; display: grid; gap: var(--s-5); }
.plainpage h1 { font-size: var(--t-h2); line-height: 1.06; }
.plainpage a { color: var(--gold); }

.signin { display: grid; place-items: center; min-height: 100svh; padding: var(--s-7) var(--s-5); }
.signin__card {
  width: min(100%, 460px); display: grid; gap: var(--s-5);
  border: 1px solid var(--hair); border-radius: var(--r); padding: clamp(var(--s-6), 5vw, var(--s-8));
}
.signin h1 { font-size: var(--t-h2); line-height: 1.06; }
.signin__sub { color: var(--muted); }
.signin__sub a { color: var(--gold); }

/* The gap has to be on the shell, not on <body>. Every section lives inside
   <main data-dashboard-shell>, so a gap on the body applied between its single
   child and nothing — the sections butted together with 0px between them and
   the headings read as jammed into the block above. */
.dash { padding: var(--s-7) var(--edge) var(--s-9); }
.dash [data-dashboard-shell] { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .dash { padding-inline: clamp(32px, 5vw, 88px); } }

.dash__bar {
  display: flex; justify-content: space-between; align-items: end;
  gap: var(--s-5); flex-wrap: wrap;
  border-bottom: 1px solid var(--hair); padding-bottom: var(--s-5);
}
.dash__bar h1 { font-size: var(--t-h2); line-height: 1.06; margin-top: var(--s-2); }
.dash__bar-actions { display: flex; gap: var(--s-5); }
.dash__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  transition: color var(--d-2) var(--ease);
}
.dash__link:hover { color: var(--gold); }

.dash__counts { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .dash__counts { grid-template-columns: 1fr 1fr; } }
/* align-content: start, or the shorter column's rows stretch to match the
   taller one and its big number sits 24px lower than its neighbour. */
.count { border-top: 1px solid var(--hair); padding-top: var(--s-5); display: grid;
         gap: var(--s-3); align-content: start; }
.count .eyebrow, .count .mono { color: var(--gold); }
.count__n { font-size: clamp(3rem, 7vw, 5rem); line-height: 1; }
.count__split { display: grid; gap: var(--s-2); color: var(--muted); font-size: var(--t-body); }
.count__note { color: var(--muted); }

.dash__trend, .dash__list { display: grid; gap: var(--s-5); }
.dash__trend-head { display: flex; justify-content: space-between; align-items: baseline;
                    gap: var(--s-5); flex-wrap: wrap; }
.dash__trend h2, .dash__list h2 { font-size: var(--t-h3); }

/* Class names here are dictated by dashboard.js — it writes this markup. */
.trend { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
         gap: var(--s-3); align-items: end; }
.trend li { display: grid; gap: var(--s-2); justify-items: center; align-content: end; }
.trend__bars { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 96px;
               border-bottom: 1px solid var(--hair); }
.trend__bar { flex: 1; min-height: 2px; border-radius: var(--r) var(--r) 0 0; }
.trend__bar--talent { background: var(--gold); }
.trend__bar--brand  { background: var(--text); }
.trend__day { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
              text-transform: uppercase; color: var(--muted); }
.trend__n   { font-family: var(--mono); font-size: 12px; color: var(--text); }

.dash__controls { display: grid; gap: var(--s-4); }
.dash__filters { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.dash select {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-2) var(--s-4); min-height: 44px; width: auto;
  font-size: var(--t-mono); font-family: var(--mono); text-transform: uppercase;
  color: var(--text); background: transparent;
}
.dash input[type=search] {
  border: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s-2) var(--s-4);
  min-height: 44px; flex: 1 1 220px;
}
.dash__empty { color: var(--muted); border-top: 1px solid var(--hair); padding-top: var(--s-5); }

.table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.table th, .table td {
  text-align: left; padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--hair); vertical-align: top;
}
.table th {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  border-bottom-color: var(--line);
}
.table td { overflow-wrap: anywhere; }
.table time { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

.pill {
  display: inline-block; padding: 3px var(--s-3); border-radius: var(--r);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
}
.pill--talent { background: var(--gold); color: var(--on-gold); }
.pill--brand  { border: 1px solid var(--line); color: var(--text); }

.row__trunc { display: block; max-width: 24ch; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.row__sub   { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.row__email { color: var(--text); text-decoration: none;
              border-bottom: 1px solid var(--hair); }
.row__email:hover { color: var(--gold); border-color: var(--gold); }
.row__note  { display: block; color: var(--muted); max-width: 40ch; }
.count__n.is-zero { color: var(--muted); }

/* The table becomes a stack of records on a phone — no sideways scrolling
   (SC-012). Each cell names its own column, because the header row is gone. */
@media (max-width: 760px) {
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { position: absolute; left: -9999px; }
  .table tr { border-bottom: 1px solid var(--line); padding: var(--s-5) 0;
              display: grid; gap: var(--s-2); }
  .table td { border: 0; padding: 0; }
  .table td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
  }
  .row__trunc { max-width: none; white-space: normal; }
}

.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;
}
.eyebrow {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}