/* ============================================================
   Verbunk public site — direction A hero, B type system, C proof.
   One file, no build step, matching the existing site's approach.
   Tokens are the console's (11-console-design-system.md) with more
   air, so the marketing pages read as adjacent to the product.
   ============================================================ */
:root{
  --night:#07090c; --night-2:#0d1218; --night-3:#141b23;
  --paper:#f7f6f3; --paper-2:#efede8; --card:#fff;
  --ink:#14161a; --ink-2:#4c525c; --ink-3:#646a72;
  --gi:#f2f6fb; --gi-2:#94a2b4; --gi-3:#7e8996;
  --acc:#3ddba4; --acc-ink:#04150f;
  /* THE GROUND IS PART OF THE NAME. Every contrast defect found on 18 August
     was one ink used on the ground it was not chosen for: --acc is 11:1 on the
     console and 1.77:1 on a white card; --brick is the link colour and it is a
     LIGHT-surface colour, 3.52:1 on a card. The palette recorded the colour and
     not the ground, so choosing wrongly looked like choosing. These names make
     it a naming error instead, and scripts/lib/site-audit.mjs §3 enforces the
     pairing on every run. */
  --acc-on-light:#0b6a49;      /* 6.62 on white, 6.16 on the accent tint */
  --brick-on-dark:#e0674a;     /* 5.60 on the card ground; --brick is 3.52 */
  --brick-on-dark-hover:#f08a6b;
  --gi-4:#8d99a8;              /* captions on the DARKEST card, 6.55 */
  --warn:#ffbe3d; --brick:#b8442e;
  --line:#dfdbd2; --line-dk:rgba(255,255,255,.09);
  /* NO WEBFONT. Hanken Grotesk came from a render-blocking Google Fonts sheet;
     with the host unreachable, first paint was 77.2s. The name is removed as well
     as the link: leaving a family nothing supplies would say the site uses a
     typeface it no longer loads, and render differently for the few who happen to
     have it installed. */
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;letter-spacing:-.035em;line-height:1.02;text-wrap:balance;font-weight:800}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
/* A FOCUS RING NOBODY CAN SEE IS NOT A FOCUS RING. --acc measures 1.64:1 on the
   paper ground and 1.51 on a band; WCAG 1.4.11 asks 3:1. So on every light page
   a keyboard user had no indication whatever of where they were — and the ring
   looked deliberate because on the night ground, where it was designed, it is
   11.27. The ground is part of the name here exactly as it is for ink.
   --acc-on-light is 6.13 on paper and only 2.84 on a dark card, so this is a
   base plus an override, not a swap. */
:focus-visible{outline:2px solid var(--acc-on-light);outline-offset:3px;border-radius:4px}
.night :focus-visible{outline-color:var(--acc)}
/* CLIPPED, NOT SHOVED OFF-SCREEN. left:-9999px leaves a full-size element in
   the layout with real ink on a real ground — the gallery measured this link at
   3.71:1 on the auth pages the moment it existed, which is a true reading of
   something no one can ever see. A 1px clipped box is the same visual result,
   cannot push the page sideways, does not break in RTL, and is small enough
   that a renderer measuring what a visitor sees correctly ignores it. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;left:12px;top:12px;z-index:99;background:var(--acc);color:var(--acc-ink);padding:10px 16px;border-radius:6px;font-weight:700}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:.92rem;font-weight:700;padding:12px 22px;border-radius:99px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;min-height:48px}
.btn-acc{background:var(--acc);color:var(--acc-ink)}
.btn-acc:hover{background:#5ae7b6}
.btn-ghost{border-color:rgba(255,255,255,.22);color:var(--gi)}
.btn-ghost:hover{border-color:rgba(255,255,255,.45)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#25282e}

/* ================= NIGHT SHELL (direction A) ================= */
.night{background:var(--night);color:var(--gi)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 0;border-bottom:1px solid var(--line-dk)}
.wm{font-weight:800;letter-spacing:.24em;font-size:.78rem;text-decoration:none;color:var(--gi)}
.wm i{color:var(--acc);font-style:normal}
.nav-links{display:none;gap:26px;font-size:.9rem;color:var(--gi-2)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--gi)}
@media(min-width:900px){.nav-links{display:flex}}
.nav-end{display:flex;align-items:center;gap:14px}
.nav-end a.plain{font-size:.9rem;color:var(--gi-2);text-decoration:none}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-photo{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(115% 85% at 76% 16%, rgba(61,219,164,.15), transparent 58%),
    radial-gradient(95% 75% at 10% 92%, rgba(77,163,255,.13), transparent 62%),
    linear-gradient(#0c1219, var(--night) 72%)}
/* Placeholder for the darkened venue photograph. Marked as a placeholder rather
   than dressed up as a texture — see docs/16-public-site-direction.md §3.
   ALIGNED TO THE FOOT OF THE HERO, NOT ITS CENTRE. It sits at z-index -2 and
   is therefore behind the hero copy, which reads as an overlap rather than as
   depth the moment the copy is tall enough to reach the middle — at 375px it
   ran a line of grey monospace straight through a sentence on /work/. The
   centre of a hero is where the text is; the foot is where the text is not. */
.hero-photo::after{content:"PHOTOGRAPH · VENUE EXTERIOR AT DUSK · 70% DARKENED";
  position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:14px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:rgba(255,255,255,.11);
  background:linear-gradient(200deg,rgba(255,255,255,.03),transparent 46%)}
.hero-grid{display:grid;gap:36px;grid-template-columns:1fr;padding:60px 0 52px;align-items:end}
@media(min-width:960px){.hero-grid{grid-template-columns:1.35fr .65fr;padding:96px 0 76px}}
.hero h1{font-size:clamp(2.5rem,6.6vw,4.6rem);max-width:15ch}
.hero .lede{color:var(--gi-2);font-size:clamp(1.02rem,1.7vw,1.2rem);max-width:44ch;margin-top:18px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- live readiness card ---------- */
.hud{border:1px solid var(--line-dk);border-radius:14px;background:rgba(12,17,23,.72);
  backdrop-filter:blur(16px);padding:18px 19px;display:flex;flex-direction:column;gap:12px}
.hud .lab{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gi-2)}
.hud .score{font-family:var(--mono);font-size:3.4rem;font-weight:700;line-height:.95;
  letter-spacing:-.04em;color:var(--acc);font-variant-numeric:tabular-nums}
.spark{display:flex;align-items:flex-end;gap:3px;height:30px}
.spark i{flex:1;background:rgba(255,255,255,.13);border-radius:2px 2px 0 0;display:block}
.spark i.now{background:var(--acc)}
.hud .bl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:.8rem;color:var(--gi-2);padding-top:10px;border-top:1px solid var(--line-dk)}
.hud .bl b{font-family:var(--mono);color:var(--warn);font-weight:700;font-variant-numeric:tabular-nums}
.hud .foot{font-size:.72rem;color:var(--gi-3)}

/* ---------- proof strip ---------- */
.strip{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line-dk)}
@media(min-width:820px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip div{padding:20px 22px;border-right:1px solid var(--line-dk);border-bottom:1px solid var(--line-dk)}
.strip b{display:block;font-family:var(--mono);font-size:1.6rem;font-weight:700;
  letter-spacing:-.03em;color:var(--gi);font-variant-numeric:tabular-nums}
.strip span{font-size:.8rem;color:var(--gi-2)}

/* ================= PAPER SECTIONS (direction B) ================= */
section{padding:76px 0}
.sec-head{max-width:56ch;margin-bottom:38px}
.sec-head .eyebrow{color:var(--brick);margin-bottom:12px;display:block}
.sec-head h2{font-size:clamp(1.9rem,4.4vw,3rem);text-transform:uppercase}
.sec-head p{color:var(--ink-2);margin-top:16px;font-size:1.04rem}

/* call sheet */
.sheet{border-top:2px solid var(--ink);font-family:var(--mono);font-size:.8rem;overflow-x:auto}
.sr{display:grid;grid-template-columns:74px minmax(150px,1fr) 84px 92px;gap:12px;
  padding:11px 4px;border-bottom:1px solid var(--line);align-items:center;min-width:420px}
.sr.h{background:var(--ink);color:var(--paper);font-weight:700;letter-spacing:.09em;
  border-bottom:0;padding-left:10px;padding-right:10px}
.sr b{font-weight:700}
.st{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ok{color:#1f7a55}.bad{color:var(--brick)}.wait{color:#8a6a12}

/* three audiences */
.aud{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:820px){.aud{grid-template-columns:repeat(3,1fr)}}
.aud a{display:flex;flex-direction:column;gap:10px;padding:26px 24px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:14px}
.aud a:hover{border-color:var(--ink-3)}
.aud h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:-.02em}
.aud p{font-size:.92rem;color:var(--ink-2)}
.aud .go{font-family:var(--mono);font-size:.76rem;color:var(--brick);letter-spacing:.06em;margin-top:auto;padding-top:8px}

/* ================= PROOF (direction C) ================= */
.proof{background:var(--paper-2)}
.proof-grid{display:grid;gap:34px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.proof-grid{grid-template-columns:1.02fr .98fr}}
.proof h2{font-size:clamp(1.8rem,3.9vw,2.6rem);text-transform:none;letter-spacing:-.03em;max-width:16ch}
.proof p.l{color:var(--ink-2);margin-top:16px;max-width:46ch}
.doc{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 26px 60px rgba(20,22,26,.13)}
.doc .dh{background:var(--paper);border-bottom:1px solid var(--line);padding:13px 17px;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;color:var(--ink-3)}
.doc .db{padding:17px;display:flex;flex-direction:column;gap:11px;font-size:.86rem}
.dl{display:flex;justify-content:space-between;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--paper-2)}
.dl:last-of-type{border-bottom:0;padding-bottom:0}
.dl span{color:var(--ink-2)}
.dl b{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.seal{display:flex;align-items:center;gap:9px;margin-top:6px;padding-top:13px;
  border-top:1px dashed var(--line);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.05em;color:#1f7a55}

/* ================= FOOTER ================= */
.foot{background:var(--night);color:var(--gi-2);padding:52px 0 40px;font-size:.88rem}
.foot-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot h4{margin:0 0 12px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gi-3);font-family:var(--mono);font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--gi)}
.foot .end{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-dk);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--gi-3)}


/* ---------- motion ----------
   Written against THIS page's markup rather than the older pages': the v2
   homepage has no .bar and no .live-dot, it has .spark i and .st. A rule aimed
   at a class the page does not use styles nothing, which is how the first
   contrast fix in this project went into a stylesheet nobody loads.

   Two moments, both carrying meaning. The sparkline draws up to the readiness
   it is claiming, so the number is watched arriving rather than found sitting
   there. And the one post that is DARK pulses — not every marker, because a
   page where everything blinks says nothing is urgent. */
@keyframes spark-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes marker-pulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}
.spark i{transform-origin:bottom center;animation:spark-rise .7s cubic-bezier(.22,.61,.36,1) both}
.spark i:nth-child(1){animation-delay:.02s}
.spark i:nth-child(2){animation-delay:.06s}
.spark i:nth-child(3){animation-delay:.10s}
.spark i:nth-child(4){animation-delay:.14s}
.spark i:nth-child(5){animation-delay:.18s}
.spark i:nth-child(6){animation-delay:.22s}
.spark i:nth-child(7){animation-delay:.26s}
.spark i:nth-child(8){animation-delay:.30s}

/* The dark post, and only the dark post. */
.st.bad::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  flex:none;animation:marker-pulse 1.6s ease-in-out infinite}

.logo{text-transform:uppercase}

@media (prefers-reduced-motion: reduce){
  .spark i{animation:none}
  .st.bad::before{animation:none}
}