/* Luterson NIL v2 — the Interlock.
   Tokens are 03-DESIGN-DIRECTION.md verbatim; that file is the source of truth.
   Structure is 05-DESIGN-PLAN.md D1–D7. Light throughout, no dark band anywhere. */

:root {
  --bg-a: #f5f1e6;   /* talent column — warm paper */
  --bg-b: #e3dcc8;   /* brand column — deeper parchment, same family */
  --ink: #1b1912;
  --muted: #5f5849;  /* 14px+ only */
  --accent: #c97a1f; /* fills and >=24px display ONLY — 2.96:1 as small text */

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-md: clamp(1.1875rem, 1vw + 1rem, 1.4375rem);
  --text-lg: clamp(1.75rem, 2.5vw + 1.125rem, 2.5rem);
  --text-xl: clamp(3.5rem, 7vw + 1.5rem, 6.5rem);
  --text-2xl: clamp(4.5rem, 9vw + 1.5rem, 9.75rem); /* signature moment, once */

  --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;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-xs: 160ms; --dur-sm: 320ms; --dur-md: 620ms; --dur-lg: 900ms;

  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --ui: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-a);
  color: var(--ink);
  font: 400 var(--text-base)/1.6 var(--ui);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden; /* the crossing translates past the seam by design */
}

h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; line-height: 1.02; }
p { text-wrap: pretty; margin: 0; }
a { color: inherit; }

:focus-visible {
  /* --ink, not --accent: the accent is 2.96:1 and fails the 3:1 non-text floor. */
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--bg-a);
  padding: var(--s-3) var(--s-5); font-size: var(--text-sm);
  transition: top var(--dur-xs) var(--ease-in-out);
}
.skip:focus { top: var(--s-4); }

/* --- the spine ------------------------------------------------------------
   Two full-height columns running the whole scroll. Every section contributes
   one talent cell and one brand cell to the same grid, so the two background
   bands read as continuous verticals rather than stacked sections. */

.spine {
  display: grid;
  /* minmax(0,…) not 1fr: a bare 1fr is minmax(auto,1fr), so ONE long word
     anywhere below can push the track wider than the viewport and give the whole
     page a horizontal scrollbar. The guard belongs on the grid, not on each word. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.cell { padding: var(--s-9) clamp(var(--s-5), 4vw, var(--s-8)); }
.cell--talent { background: var(--bg-a); }
.cell--brand  { background: var(--bg-b); }
.cell--span   { grid-column: 1 / -1; }

.measure { max-width: 64ch; }

/* --- hero ----------------------------------------------------------------- */

.hero {
  grid-column: 1 / -1;
  /* The seam is visible in the first pixel: the concept states itself before
     the copy has to explain it. */
  background: linear-gradient(to right, var(--bg-a) 0 50%, var(--bg-b) 50% 100%);
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: var(--s-6) clamp(var(--s-5), 4vw, var(--s-8)) 0;
  gap: var(--s-6);
}

.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-5); flex-wrap: wrap;
  font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}

/* D7: awaiting-client slots are weight 200 with a visible mark.
   Thin = not yet. Art-directed absence, never a dashed grey box. */
.awaiting {
  font-family: var(--display); font-weight: 200;
  font-size: var(--text-md); text-transform: none; letter-spacing: 0;
  color: var(--muted);
  border-bottom: 1px dotted var(--muted);
  padding-bottom: 2px;
}
.awaiting::after {
  content: ' ' attr(data-mark);
  font-family: var(--ui); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  vertical-align: super;
}

.hero__body { align-self: center; }

.hero h1 {
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.hero__line { display: block; }

.hero__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
}
.hero__sub { font-size: var(--text-md); color: var(--ink); max-width: 46ch; }
.hero__not { font-size: var(--text-base); color: var(--muted); max-width: 46ch; }

/* the two columns visibly beginning beneath the hero copy */
.hero__entries { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.entry { padding: var(--s-6) 0 var(--s-7); display: grid; gap: var(--s-4); align-content: end; }
.entry--brand { padding-left: clamp(var(--s-5), 4vw, var(--s-8)); }
/* Capped so the heading cannot run into the seam — the gutter is crossed in
   exactly one place on this page, and that place is the signature moment. */
.entry h2 { font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; max-width: 20ch; }
.entry p { font-size: var(--text-base); color: var(--muted); max-width: 34ch; }

.eyebrow {
  display: block;
  font-family: var(--ui); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s-4);
}

/* --- inside a column ------------------------------------------------------
   The direction's rule: if a column feels empty, widen the whitespace inside
   it — never add content. The width is already handled by the skeleton. */

.section-h { font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; }
.section-p { margin-top: var(--s-5); font-size: var(--text-md); }
.note { margin-top: var(--s-6); font-size: var(--text-base); color: var(--muted); }

.groups { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-5); }
.groups li {
  display: grid; grid-template-columns: 1fr; gap: var(--s-2);
  padding-top: var(--s-5); border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
/* Proximity language, not place names — design plan D1 amendment 2. The place
   itself is Luterson's to supply and stays an awaiting slot until he does. */
.tag {
  font-family: var(--ui); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.group { font-family: var(--display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; }

.cta {
  justify-self: start;
  display: inline-block;
  font-family: var(--ui); font-size: var(--text-base); font-weight: 500;
  padding: var(--s-4) var(--s-6);
  min-height: 44px;
  background: var(--accent);   /* fill, not text — 5.26:1 for ink on accent */
  color: var(--ink);
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: background var(--dur-xs) var(--ease-in-out),
              color var(--dur-xs) var(--ease-in-out);
}
.cta:hover { background: var(--ink); color: var(--bg-a); }

/* --- how it works: three steps per side, never a shared block -------------- */

.steps { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-7); }
.steps li { display: grid; gap: var(--s-3); max-width: 52ch; }
.steps__n {
  font-family: var(--ui); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.14em; color: var(--muted);
}
.steps h3 { font-weight: 800; font-size: var(--text-md); letter-spacing: -0.01em; }
.steps p { color: var(--muted); }

/* --- the crossing: the one signature moment, and the one place content
       crosses the gutter --------------------------------------------------- */

.cross {
  grid-column: 1 / -1;
  background: linear-gradient(to right, var(--bg-a) 0 50%, var(--bg-b) 50% 100%);
  /* Scroll range to scrub through. The viewport is never pinned — a pinned
     crossing is the highest comprehension-risk pattern on a phone, and
     comprehension is this page's ceiling (D5, rejected alternative). */
  height: 220vh;
  position: relative;
}
.cross__stage {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center; justify-items: center;
  gap: var(--s-5);
  padding: var(--s-7) clamp(var(--s-5), 4vw, var(--s-8));
  overflow: hidden;
}

/* --t runs 0 -> 1 -> 0 across the section: converge, overlap, separate. */
.cross__track {
  font-family: var(--display); font-weight: 200;
  font-size: var(--text-lg); letter-spacing: -0.01em; line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  will-change: transform;
}
.cross__track--talent { justify-self: start; transform: translateX(calc(var(--t, 0) * 16vw)); }
.cross__track--brand  { justify-self: end;   transform: translateX(calc(var(--t, 0) * -16vw)); }

.cross__line {
  font-weight: 800;
  font-size: var(--text-2xl);   /* the only --text-2xl on the page */
  letter-spacing: -0.04em;
  text-align: center;
  opacity: var(--t, 0);
  /* The accent is a FILL here, not the text colour. As text it measures 2.96:1
     on --bg-a and 2.44:1 on --bg-b, which fails the 3:1 large-text floor even at
     this size — the direction's contrast table permits it as "large" text, and
     that permission does not survive measurement. Ink on accent is 5.26:1.
     This is also the one bold move: a solid slab of gold where the sides meet. */
  background: var(--accent);
  color: var(--ink);
  padding: 0.04em 0.1em 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cross__note {
  max-width: 56ch; text-align: center; color: var(--muted);
  opacity: var(--t, 0);
}

/* --- forms ---------------------------------------------------------------- */

.form { margin-top: var(--s-7); display: grid; gap: var(--s-6); max-width: 44ch; }
.cell--brand .form { margin-left: 0; }

/* The honeypot must be reachable by a bot parsing the DOM and invisible and
   unfocusable to a person — display:none would let smarter bots skip it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; }
.field > label, .field legend {
  font-family: var(--ui); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  padding: 0;
}
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; }

.field input[type='text'],
.field input[type='email'],
.field textarea {
  font: 400 var(--text-base)/1.5 var(--ui);
  color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 2px solid var(--ink);
  padding: var(--s-3) 0;
  min-height: 44px;
  width: 100%;
  border-radius: 0;
  transition: border-color var(--dur-xs) var(--ease-in-out);
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 2px; }

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

.form__status { font-size: var(--text-sm); color: var(--muted); min-height: 1.4em; }
.form__status[data-state='error'] {
  color: var(--ink);
  background: var(--bg-b);
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--ink);
}
.cell--brand .form__status[data-state='error'] { background: var(--bg-a); }
.field.is-bad input, .field.is-bad textarea { border-bottom-color: var(--ink); border-bottom-width: 3px; }
.field__err { font-size: var(--text-sm); color: var(--ink); }

.form.is-sending .cta { opacity: 0.55; pointer-events: none; }

/* Motion idea 3 — the submit confirmation ink-mark. Fires only on a real
   successful POST, never on load. */
.inkmark { display: block; width: 56px; height: 40px; margin-bottom: var(--s-3); }
.inkmark path {
  fill: none; stroke: var(--ink); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 80; stroke-dashoffset: 80;
}
.form.is-done .inkmark path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-lg) var(--ease-out);
}
.form__done { display: grid; }
.form__done h3 { font-weight: 800; font-size: var(--text-md); }
.form__done p { color: var(--muted); margin-top: var(--s-2); }

/* --- footer: two registers held, shared line centred ---------------------- */

.foot {
  grid-column: 1 / -1;
  background: linear-gradient(to right, var(--bg-a) 0 50%, var(--bg-b) 50% 100%);
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--s-8) clamp(var(--s-5), 4vw, var(--s-8)) var(--s-7);
  gap: var(--s-7);
}
.foot__side { display: grid; gap: var(--s-3); align-content: start; }
.foot__side--brand { justify-items: end; text-align: right; }
.foot__side a { font-size: var(--text-base); }
.foot__legal {
  grid-column: 1 / -1; text-align: center;
  display: grid; gap: var(--s-3); justify-items: center;
  padding-top: var(--s-7);
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.foot__fine { font-size: var(--text-sm); color: var(--muted); max-width: 64ch; }

/* --- 375: alternating bands with a persistent edge-rail (D3, amendment 3) --- */

@media (max-width: 767px) {
  .spine, .hero__cols, .hero__entries, .hero { grid-template-columns: minmax(0, 1fr); }

  .hero {
    background: var(--bg-a);
    min-height: auto;
    /* No horizontal padding: the bands must reach the viewport edge or the
       edge-rail is not on an edge. The inset moves to the text children. */
    padding: var(--s-6) 0 var(--s-7);
    gap: var(--s-6);
  }
  .masthead, .hero__body, .hero__cols { padding-inline: var(--s-5); }
  .hero h1 { max-width: none; }

  /* At 375 the two entry points come BEFORE the explanatory paragraphs, so a
     visitor sees what this is and a button to act on it inside the first
     screen. On desktop both already fit; here they cannot, and the plan's
     promise is that the action stays one tap away. */
  .hero__entries { order: 3; }
  .hero__cols { order: 4; gap: var(--s-5); }

  /* The rail is --ink (15.58:1), not --accent (2.96:1): at this width the rail
     and its tag are the only things saying which side a band belongs to, which
     makes them meaningful UI rather than decoration. */
  .cell, .entry {
    border-left: 4px solid var(--ink);
    padding: var(--s-7) var(--s-5);
    margin: 0;
  }
  .entry { padding-block: var(--s-6); }
  .cell--brand, .entry--brand {
    border-left: 0; border-right: 4px solid var(--ink);
    background: var(--bg-b);
    text-align: right;
  }
  .entry--talent { background: var(--bg-a); }
  .cell--brand .measure, .entry--brand p { margin-left: auto; }
  .entry--brand .cta { justify-self: end; }
  .cell--span { border: 0; }

  /* right-aligned brand bands: pull their own content to the rail */
  .cell--brand .steps li,
  .cell--brand .form { margin-left: auto; justify-items: end; }
  .cell--brand .choices { justify-items: end; }
  .cell--brand .choice { flex-direction: row-reverse; }
  .cell--brand .field > label,
  .cell--brand .field legend,
  .cell--brand .field input,
  .cell--brand .field textarea { text-align: right; }
  .cell--brand .cta { justify-self: end; }

  /* The crossing becomes an interleave: no side-by-side to cross, so the two
     registers shuffle into strict alternation and the meaning — co-presence —
     survives in a form a phone can render (D3, amendment 3). */
  .cross { height: auto; background: var(--bg-a); border-block: 4px solid var(--ink); }
  .cross__stage { position: static; height: auto; padding-block: var(--s-9); gap: var(--s-6); }
  .cross__track { white-space: normal; text-align: center; transform: none; font-size: var(--text-md); }
  .cross__track--talent, .cross__track--brand { justify-self: center; }
  .cross__track--brand { color: var(--muted); }
  .cross__line, .cross__note { opacity: 1; }
  .cross__line { font-size: var(--text-xl); }

  /* footer stacks but keeps left/right registers */
  .foot { grid-template-columns: 1fr; background: var(--bg-a); padding-inline: var(--s-5); }
  .foot__legal { padding-top: var(--s-6); }
}

/* The --text-xl floor (3.5rem) is set for a phone-sized column, but "marketplace."
   at 56px is wider than a 320–400px screen minus its gutters. The contract
   supports 320px, so the hero headline — and only it — scales below that floor.
   The token itself is unchanged; everything else still uses it as specified. */
@media (max-width: 420px) {
  .hero h1 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
  /* the superscript mark wraps mid-phrase at this width; give it its own line */
  .awaiting::after { display: block; margin-top: 2px; vertical-align: baseline; }
}

/* --- motion --------------------------------------------------------------- */

/* Reveals are opt-in behind the .js class set before first paint: with JS off
   this rule never applies and nothing is left at opacity 0. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
}

/* Kinetic headline entrance: talent register from the left with more travel and
   looser timing, brand register from the right, tighter. */
.js .hero__line { opacity: 0; }
.js .hero__line--talent { transform: translateX(-4rem); }
.js .hero__line--brand  { transform: translateX(2rem); }
.js .is-loaded .hero__line { opacity: 1; transform: none; }
.js .is-loaded .hero__line--talent { transition: opacity var(--dur-lg) var(--ease-out), transform var(--dur-lg) var(--ease-out); }
.js .is-loaded .hero__line--brand  { transition: opacity var(--dur-md) var(--ease-out) 120ms, transform var(--dur-md) var(--ease-out) 120ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .hero__line { opacity: 1; transform: none; transition: none; }
  /* The crossing renders as a designed still — the crossed position, held —
     not as a disabled animation (D5). */
  .cross { --t: 1; height: auto; }
  .cross__stage { position: static; height: auto; padding-block: var(--s-10); }
  .inkmark path { stroke-dashoffset: 0; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- sign in --------------------------------------------------------------- */

.signin {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: var(--s-6);
  background: linear-gradient(to right, var(--bg-a) 0 50%, var(--bg-b) 50% 100%);
}
.signin__card {
  width: min(38ch, 100%);
  background: var(--bg-a);
  border: 2px solid var(--ink);
  padding: var(--s-8) var(--s-7);
}
.signin h1 { font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; }
.signin__sub { margin-top: var(--s-4); color: var(--muted); font-size: var(--text-base); }
.signin .form { margin-top: var(--s-7); max-width: none; }

/* --- dashboard: the same skeleton, the same three words -------------------- */

.dash { background: var(--bg-a); }
.dash [data-dashboard-shell] {
  max-width: 1600px; margin: 0 auto;
  padding: var(--s-7) clamp(var(--s-5), 4vw, var(--s-8)) var(--s-9);
  display: grid; gap: var(--s-9);
}

.dash__bar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-5); flex-wrap: wrap;
  padding-bottom: var(--s-5); border-bottom: 2px solid var(--ink);
}
.dash__bar h1 { font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; }
.dash__bar-actions { display: flex; gap: var(--s-5); align-items: center; }
.dash__link {
  font: 500 var(--text-sm)/1 var(--ui);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  background: none; border: 0; padding: var(--s-3) 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}
.dash__link:hover { color: var(--ink); }

/* D1 surface 8 — the counts render as the two columns filling. */
.dash__counts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.count { padding: var(--s-7) var(--s-6); }
.count--talent { background: var(--bg-a); border: 2px solid var(--ink); border-right-width: 1px; }
.count--brand { background: var(--bg-b); border: 2px solid var(--ink); border-left-width: 1px; }
.count__n {
  font-family: var(--display); font-weight: 800;
  font-size: var(--text-xl); line-height: 0.9; letter-spacing: -0.04em;
  margin-top: var(--s-3);
}
/* thin = not yet real, exactly as on the public page */
.count__n.is-zero { font-weight: 200; color: var(--muted); }
.count__split { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.count__split li { font-size: var(--text-base); color: var(--muted); }
.count__split span { font-weight: 500; color: var(--ink); }
.count__note { margin-top: var(--s-5); font-size: var(--text-base); color: var(--muted); }

.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-weight: 800; font-size: var(--text-md); letter-spacing: -0.01em; }
.dash__trend .count__note { margin-top: 0; }

.trend {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-3);
}
.trend li { display: grid; gap: var(--s-2); justify-items: center; }
.trend__bars {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  height: 72px; width: 100%;
  border-bottom: 2px solid var(--ink);
}
.trend__bar { width: 12px; min-height: 0; }
.trend__bar--talent { background: var(--ink); }
.trend__bar--brand { background: var(--accent); }
.trend__day, .trend__n { font-size: var(--text-sm); color: var(--muted); }
.trend__n { font-weight: 500; color: var(--ink); }

.dash__controls { display: grid; gap: var(--s-5); }
.dash__filters { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
.dash__filters select, .dash__filters input {
  font: 400 var(--text-base)/1.4 var(--ui);
  color: var(--ink); background: var(--bg-a);
  border: 2px solid var(--ink); border-radius: 0;
  padding: var(--s-3) var(--s-4); min-height: 44px;
}
.dash__filters input { min-width: 26ch; flex: 1 1 26ch; }
.cta--sm { padding: var(--s-3) var(--s-5); font-size: var(--text-sm); }

.dash__empty {
  /* thin = not yet. An honest sentence, never a zero styled as data. */
  font-family: var(--display); font-weight: 200;
  font-size: var(--text-md); color: var(--muted);
  margin-top: var(--s-6); max-width: 56ch;
}

.table { width: 100%; border-collapse: collapse; margin-top: var(--s-6); font-size: var(--text-base); }
.table th {
  text-align: left; font: 500 var(--text-sm)/1.4 var(--ui);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.table td {
  padding: var(--s-4) var(--s-4) var(--s-4) 0; vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.table tr:hover td { background: var(--bg-b); }

.pill {
  display: inline-block; font: 500 var(--text-sm)/1 var(--ui);
  letter-spacing: 0.06em; padding: var(--s-2) var(--s-3);
  border: 2px solid var(--ink); white-space: nowrap;
}
.pill--brand { background: var(--accent); } /* ink on accent, 5.26:1 */

/* Long values truncate with the full text on hover; emails wrap instead of
   overflowing, because a cut-off email is useless (D7). */
.row__trunc { display: inline-block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.row__email { overflow-wrap: anywhere; }
.row__sub { display: block; font-size: var(--text-sm); color: var(--muted); }
.row__note { display: inline-block; max-width: 40ch; color: var(--muted); }

.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;
}

@media (max-width: 900px) {
  .dash__counts { grid-template-columns: minmax(0, 1fr); }
  .count--talent { border-right-width: 2px; border-bottom-width: 1px; }
  .count--brand { border-left-width: 2px; border-top-width: 1px; }

  /* A six-column table is not readable on a phone. Each row becomes a labelled
     card — the spec's bar is "readable at 375", not "is a table at 375". */
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    border: 2px solid var(--ink);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-5);
    background: var(--bg-a);
  }
  .table td { border: 0; padding: var(--s-2) 0; display: grid; grid-template-columns: 11ch 1fr; gap: var(--s-4); }
  .table td::before {
    content: attr(data-label);
    font: 500 var(--text-sm)/1.5 var(--ui);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  }
  .table td:empty, .table td:has(.row__note:empty) { display: none; }
  .row__trunc, .row__note { max-width: none; white-space: normal; overflow: visible; }
  .dash__filters input { min-width: 0; }
}

/* --- the plain confirmation page served to no-JS form posts ---------------- */

.plainpage {
  background: var(--bg-a);
  display: grid; place-items: center; min-height: 100svh;
  padding: var(--s-6);
}
.plainpage main { max-width: 48ch; }
.plainpage h1 { font-weight: 800; font-size: var(--text-lg); margin-bottom: var(--s-5); }