/* Toll landing — direction "B×C" (docs/design/20-design-system.md, dir B "Warmblood").
   Bricolage Grotesque display + system text. Zero mono. Graph-paper depth, radial glow,
   stamp-cards, real 3D buttons. Hairlines + gradients are the depth language. */

@font-face{
  font-family:"Bricolage";
  src:url("fonts/bricolage-800.woff2") format("woff2");
  font-weight:800;font-display:swap;
}

:root{
  color-scheme:dark;

  --bg:#0C0A08;--surface:#171310;--hairline:#2A241E;--hairline-strong:#756B62;
  --text:#F4EFE8;--text-2:#9C938A;
  --hot:#FF4526;--hot-deep:#A62B00;   /* button side / press ink */
  --bloom:#FFD9C2;--ash:#8A8178;--cold:#57B8CC;
  --paper:#F6F1E7;--ink:#17120E;--ink-stamp:#B93000;

  --disp:"Bricolage",system-ui,"Arial Narrow",sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;

  --sp-0:4px;--sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:40px;--sp-5:64px;--sp-6:96px;--sp-7:144px;
  --gutter:24px;

  --fs-body:17px;
  --fs-lede:clamp(19px,17.6px + .6vw,22px);
  --fs-title:clamp(24px,21px + 1.2vw,28px);
  --fs-cry-mid:clamp(40px,12vw,72px);
  --fs-cry:clamp(50px,14vw,88px);

  --grid:rgba(244,239,232,.026);
  --expo:cubic-bezier(.16,1,.3,1);
  --ui:cubic-bezier(.22,1,.36,1);
  --r:0px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  max-width:640px;margin:0 auto;
  padding-inline:var(--gutter);
  padding-bottom:env(safe-area-inset-bottom,0px);
  /* depth: тонкая клетка как тетрадь + мягкие радиальные градиенты (fixed) */
  background-image:
    radial-gradient(72% 50% at 88% 3%, #1C1712 0%, transparent 55%),
    radial-gradient(58% 44% at -8% 40%, #17110D 0%, transparent 50%),
    radial-gradient(60% 40% at 50% 100%, #14100C 0%, transparent 55%),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:auto,auto,auto,34px 34px,34px 34px;
  background-attachment:fixed;
}

.disp{font-family:var(--disp);font-weight:800}
.hot{color:var(--hot)}
.dim{color:var(--ash)}

/* ---------- MOTION PRIMITIVES ---------- */
.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--expo),transform .6s var(--expo)}
.js-reveal .reveal.in{opacity:1;transform:none}
.js-reveal [data-stagger] .reveal{transition-delay:calc(var(--i,0) * 70ms)}
/* hero line-mask reveal */
.cry .line{display:block;overflow:hidden}
.cry .line>span{display:block;transform:translateY(112%);transition:transform .8s var(--expo)}
.js-reveal .cry.in .line>span{transform:translateY(0)}
.cry.in .line:nth-child(2)>span{transition-delay:.08s}
.cry.in .line:nth-child(3)>span{transition-delay:.16s}
.cry.in .line:nth-child(4)>span{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal,.cry .line>span{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- SECTIONS ---------- */
section{padding:var(--sp-6) 0;border-bottom:1px solid var(--hairline)}
section:last-of-type{border-bottom:none}
.hero{padding:84px 0 var(--sp-6)}
.join{padding-top:var(--sp-7)}

.eyebrow{font-family:var(--disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:24px}
.section-title{
  display:flex;align-items:center;gap:var(--sp-2);
  font-family:var(--disp);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:var(--sp-4);
}
.section-title::after{content:"";flex:1;border-top:1px solid var(--hairline)}

/* ---------- HERO ---------- */
.stamp-mark{
  display:inline-grid;place-items:center;width:46px;height:46px;padding-top:1px;
  border:2px solid var(--hot);color:var(--hot);
  font-family:var(--disp);font-weight:800;font-size:26px;
  transform:rotate(-4deg);margin-bottom:var(--sp-3);
}
.cry{font-family:var(--disp);font-weight:800;font-size:var(--fs-cry);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;margin-bottom:28px}
.cry.mid{font-size:var(--fs-cry-mid)}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--text-2);max-width:33ch;margin-bottom:var(--sp-4)}
.lede strong{color:var(--text)}
.fineprint{font-size:13px;line-height:1.45;color:var(--ash);margin-top:var(--sp-2)}

/* ---------- 3D BUTTONS ---------- */
.btn{
  display:block;width:100%;min-height:56px;
  padding:16px var(--sp-3);
  font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.01em;text-transform:uppercase;
  color:var(--ink);background:var(--hot);
  border:none;border-radius:var(--r);cursor:pointer;text-align:center;text-decoration:none;
  /* real depth: side wall (thickness) + cast shadow — always on, not just hover */
  box-shadow:0 6px 0 0 var(--hot-deep), 0 10px 18px rgba(0,0,0,.5);
  transition:transform .13s var(--ui),box-shadow .13s var(--ui);
}
a.btn{display:inline-block;width:auto}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 0 var(--hot-deep),0 15px 26px rgba(0,0,0,.55)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 0 var(--hot-deep),0 3px 8px rgba(0,0,0,.45)}
.btn:disabled{background:var(--surface);color:var(--ash);box-shadow:0 4px 0 0 #100D0A,0 6px 12px rgba(0,0,0,.4);cursor:default}
/* ghost: recessed slab, subtler depth */
.btn-ghost{
  background:var(--surface);color:var(--text-2);
  border:1px solid var(--hairline-strong);
  box-shadow:0 4px 0 0 #000,0 8px 14px rgba(0,0,0,.4);
  margin-top:var(--sp-2);text-transform:none;font-weight:800;
}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:0 6px 0 0 #000,0 12px 20px rgba(0,0,0,.45)}
.btn-ghost:active{transform:translateY(4px);box-shadow:0 1px 0 0 #000,0 2px 6px rgba(0,0,0,.4)}
.btn-inline{display:inline;width:auto;min-height:0;padding:0;background:none;border:none;box-shadow:none;
  color:var(--text);text-decoration:underline;font:inherit;text-transform:none;cursor:pointer}
.btn-inline:hover,.btn-inline:active{transform:none;box-shadow:none}
@media (min-width:640px){a.btn,.btn:not(.btn-inline){max-width:360px}}

/* ---------- LEDGER (the bill — grotesk numbers, no mono) ---------- */
.ledger-list{display:grid;grid-template-columns:max-content 1fr;column-gap:var(--gutter)}
.ledger-row{
  grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:baseline;
  row-gap:var(--sp-0);padding:var(--sp-3) 0;border-bottom:1px solid var(--hairline);
}
.fig{grid-column:1;font-family:var(--disp);font-weight:800;font-size:clamp(28px,7vw,36px);letter-spacing:-.02em;color:var(--hot);white-space:nowrap}
.fig.dim{color:var(--ash)}
.ledger-row .desc{grid-column:2;font-size:16px;line-height:1.5;max-width:60ch}
.ledger-row .desc em{color:var(--text);font-style:italic}
.ledger-row .src{grid-column:2;font-family:var(--disp);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
@supports not (grid-template-columns:subgrid){
  .ledger-list{display:block}.ledger-row{grid-template-columns:max-content 1fr;column-gap:var(--gutter)}
}
.ledger-total{grid-column:1 / -1;padding-top:var(--sp-3);border-top:1px solid var(--hairline);position:relative;margin-top:3px}
.ledger-total::before{content:"";position:absolute;top:-3px;left:0;right:0;border-top:1px solid var(--hairline)}
.ledger-total .desc{font-family:var(--disp);font-size:18px;color:var(--text)}

/* ---------- STEPS ---------- */
.steps{list-style:none;display:grid;gap:var(--sp-4)}
.steps li{display:grid;grid-template-columns:48px 1fr;column-gap:var(--sp-2)}
.step-n{grid-row:1 / span 2;font-family:var(--disp);font-weight:800;font-size:18px;color:var(--hot);padding-top:3px}
.steps h3,.steps p{grid-column:2}
.steps h3{font-family:var(--disp);font-weight:800;font-size:20px;margin-bottom:6px}
.steps p{color:var(--text-2);font-size:16px}
.steps strong{color:var(--text)}

/* ---------- TWIST — deep card ---------- */
.twist{
  margin-top:var(--sp-5);padding:var(--sp-3);
  border:1px solid var(--hairline);border-left:3px solid var(--hot);
  background:radial-gradient(130% 120% at 0% 0%, #201A15 0%, var(--bg) 72%);
}
.twist-label{font-family:var(--disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--hot);margin-bottom:var(--sp-1)}
.twist-body{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.35}
.twist-body strong{color:var(--text)}
.twist-note{margin-top:var(--sp-2);color:var(--text-2);font-style:italic}

/* ---------- SCIENCE — stamp cards ---------- */
.sci-list{display:grid;gap:16px}
.card{
  position:relative;padding:26px 24px;
  border:1px solid var(--hairline);
  background:radial-gradient(130% 120% at 100% 0%, #1B1611 0%, var(--bg) 72%);
}
.stamp{
  display:inline-block;font-family:var(--disp);font-weight:800;
  font-size:clamp(34px,9vw,42px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);background:var(--hot);padding:8px 16px;margin-bottom:18px;
  transform:rotate(-1.5deg);
}
.stamp.dim{color:var(--text);background:#2A241E}
/* stamp "presses in" when its card reveals — brand signature (the toll stamp) */
.js-reveal .card.reveal .stamp{transform:rotate(-6deg) scale(1.28);opacity:0;transition:transform .5s cubic-bezier(.2,1.3,.35,1) .18s,opacity .3s linear .18s}
.js-reveal .card.reveal.in .stamp{transform:rotate(-1.5deg) scale(1);opacity:1}
.claim{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.32;letter-spacing:-.01em;max-width:42ch}
.claim .reg{font-family:var(--sans);font-weight:400;color:var(--text-2);display:block;margin-top:7px;font-size:16px;line-height:1.5}
.card .src{display:block;margin-top:16px;font-family:var(--disp);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}

/* ---------- JOIN / PANELS ---------- */
.panel{margin-top:var(--sp-4)}
.panel-in{animation:panelIn .5s var(--expo) both}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel-in{animation:none}}
.panel-label{font-family:var(--disp);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:var(--sp-2)}
.panel-title{font-family:var(--disp);font-weight:800;font-size:26px;margin-bottom:var(--sp-2)}
.panel-body{color:var(--text-2);margin-bottom:var(--sp-3)}
.panel-body strong{color:var(--text)}
.panel-body em{color:var(--text);font-style:italic}

input[type="email"]{
  width:100%;min-height:56px;padding:16px var(--sp-2);
  background:var(--surface);color:var(--text);
  border:1px solid var(--hairline-strong);border-radius:var(--r);
  font:inherit;margin-bottom:var(--sp-2);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4);   /* recessed field = tactile counterpart to the raised button */
}
input[type="email"]:focus{outline:2px solid var(--hot);outline-offset:-1px}
input[type="email"]::placeholder{color:var(--ash)}
.form-error{color:var(--hot);font-size:14px;margin-top:var(--sp-1)}

.privacy-note{padding:var(--sp-2);margin-bottom:var(--sp-3);border:1px dashed var(--hairline-strong);font-size:14px;color:var(--text-2)}
.privacy-note strong{color:var(--text)}

/* ---------- CAMERA ---------- */
.cam-wrap{position:relative;margin-top:var(--sp-3);background:#000;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--hairline)}
#video,#overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
/* depth gauge — the whole point of the skeleton: you can SEE how deep is deep enough.
   Fills bottom-up; the notch is the line that counts; above it is headroom, so crossing
   the mark is unambiguous instead of "did I reach the top of the bar or not". */
.depth-bar{
  position:absolute;left:var(--sp-2);top:var(--sp-2);bottom:104px;width:12px;
  background:var(--surface);border:1px solid var(--hairline-strong);
}
.depth-fill{position:absolute;inset:auto 0 0 0;height:0;background:var(--ash);transition:height .09s linear,background-color .12s linear}
.depth-bar.is-deep .depth-fill{background:var(--hot)}
/* the notch is the line that counts. --mark is written by app.js from DEPTH_MAX (squat.js),
   so the scale and the notch can never drift apart; the literal is only a dev fallback. */
.depth-mark{position:absolute;left:-4px;right:-4px;bottom:var(--mark,83.33%);border-top:2px solid var(--hairline-strong)}
.depth-bar.is-deep .depth-mark{border-color:var(--hot)}
@media (prefers-reduced-motion:reduce){.depth-fill{transition:none}}

.cam-hud{position:absolute;inset:auto 0 0 0;padding:var(--sp-2);display:flex;justify-content:space-between;align-items:flex-end;background:linear-gradient(to top,rgba(12,10,8,.92),transparent)}
.rep-counter{font-family:var(--disp);font-weight:800;line-height:1}
#rep-count{font-size:64px;color:var(--hot);display:inline-block}
.rep-goal{font-size:28px;color:var(--ash)}
.rep-pop{animation:repPop .28s var(--ui)}
@keyframes repPop{0%{transform:scale(1.35)}100%{transform:scale(1)}}
.cam-status{font-size:13px;color:var(--text-2);text-align:right;max-width:55%}
.cam-status.is-tracking{color:var(--hot)}
@keyframes bloom{from{background:var(--bloom)}to{background:transparent}}
.cam-wrap.rep-hit::after{content:"";position:absolute;inset:0;animation:bloom .26s ease-out;pointer-events:none}
.cam-wrap.rep-final::after{content:"";position:absolute;inset:0;background:var(--hot);opacity:.16}
@media (prefers-reduced-motion:reduce){.rep-pop{animation:none}.cam-wrap.rep-hit::after{animation:none}}

/* ---------- RECEIPT — the ceremony, kept ---------- */
.receipt{background:var(--paper);color:var(--ink);padding:var(--sp-3);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.receipt-head{font-family:var(--disp);font-weight:800;letter-spacing:.16em;font-size:13px;padding-bottom:var(--sp-2);border-bottom:1px solid rgba(23,18,14,.2);margin-bottom:var(--sp-2)}
.receipt-line{display:flex;justify-content:space-between;gap:var(--sp-2);padding:6px 0;font-size:15px}
.receipt-line span:first-child{color:#6E655D}
.receipt-line span:last-child{font-family:var(--disp);font-weight:800;overflow-wrap:anywhere;text-align:right}
.receipt-rule{border-top:3px double rgba(23,18,14,.35);margin:var(--sp-2) 0}
.receipt-stamp{
  display:inline-block;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--paper);background:var(--ink-stamp);padding:6px 14px;transform:rotate(-3deg);margin:var(--sp-1) 0;
}
.receipt-foot{margin-top:var(--sp-2);font-size:13px;color:#6E655D}
.receipt .btn-ghost{background:transparent;border-color:rgba(23,18,14,.25);color:var(--ink);box-shadow:0 3px 0 0 rgba(23,18,14,.35)}
.receipt .btn-ghost:hover{box-shadow:0 5px 0 0 rgba(23,18,14,.35)}

/* perforated bottom edge — a real receipt tears off */
.receipt::after{content:"";display:block;height:12px;margin:var(--sp-3) -24px -24px;
  background:radial-gradient(circle at 6px -2px, transparent 6px, var(--paper) 7px) repeat-x;
  background-size:16px 12px;background-position:0 0}

footer{padding:var(--sp-5) 0 var(--sp-6);color:var(--ash);font-size:14px}
footer p:first-child{font-family:var(--disp);font-weight:800;color:var(--text-2);margin-bottom:var(--sp-1)}