/* Sideplane — site styles. Tokens sourced from kit-backup/brand_palette.json (source of truth). */

/* ---------- fonts (self-hosted from the kit) ---------- */
@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2');font-weight:600 800;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#0B1020; --ink-lo:#080B16; --ink-hi:#0C1430;
  --teal:#34E0C4; --teal-2:#16B7A0; --indigo:#8AA0FF; --amber:#FFC24B; --rose:#F38BB3;
  --ring:#33507c; --spark:#EAFFFB; --text:#EAF1FB; --muted:#9DB0CC;
  --card:#111A30; --stroke:#283555; --stroke-hover:#34557a; --cta-fill:#0E2230;

  --bg:var(--ink); --field-bg:#0A0E1E;
  --accent:var(--teal); --accent-ink:var(--teal); --hairline:var(--stroke);
  --hero-img:url('../img/hero-dark.png');

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Space Grotesk',var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1080px; --edge:clamp(1.25rem,6vw,5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="light"]{
  --ink:#F4F7FC; --ink-lo:#EEF2FB; --ink-hi:#E7EDF8;
  --text:#0F1830; --muted:#55627E; --spark:#0B1020;
  --card:#FFFFFF; --stroke:#DBE2F0; --stroke-hover:#9fb0d8; --cta-fill:#EAF3F1;
  --bg:var(--ink); --field-bg:#F4F7FC;
  --accent-ink:#0C7263;   /* teal as INK: 5.4:1 on the light ground (teal-2 was 2.35:1) */
  --hero-img:url('../img/hero-light.png');
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
::selection{background:color-mix(in srgb,var(--teal) 30%,transparent); color:var(--spark)}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:3px}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--edge)}
.skip{position:absolute; left:-999px} .skip:focus{left:var(--edge); top:.6rem; z-index:60; background:var(--card); padding:.5rem .8rem; border:1px solid var(--stroke)}

/* ---------- kicker (deck grammar: teal rect + tracked uppercase) ---------- */
.kicker{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 1.1rem}
.kicker::before{content:""; width:22px; height:12px; background:var(--teal); display:inline-block; border-radius:1px;
  box-shadow:0 0 18px color-mix(in srgb,var(--teal) 60%,transparent)}

/* ---------- header ---------- */
.site-head{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:.85rem var(--edge); backdrop-filter:blur(9px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--stroke) 60%,transparent)}
.brand{display:inline-flex; align-items:center; gap:.6rem; color:var(--text)}
.brand .mark{width:26px; height:26px; color:var(--text)}
.brand b{font-family:var(--display); font-weight:700; letter-spacing:.04em; font-size:1.02rem}
.head-right{display:flex; align-items:center; gap:1.1rem}
.head-mail{font-family:var(--mono); font-size:.8rem; color:var(--muted)}
.head-mail:hover{color:var(--text)}
.toggle{display:inline-flex; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  border:1px solid var(--stroke); border-radius:999px; overflow:hidden}
.toggle button{appearance:none; background:transparent; color:var(--muted); border:0; padding:.34rem .6rem; cursor:pointer; letter-spacing:inherit; font:inherit}
.toggle button[aria-pressed="true"]{background:color-mix(in srgb,var(--teal) 14%,transparent); color:var(--text)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  background:var(--field-bg)}
.hero-field{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
.hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, var(--bg) 6%, color-mix(in srgb,var(--bg) 70%,transparent) 42%, transparent 72%)}
.hero-inner{position:relative; z-index:2; width:100%; padding-block:8rem 6rem}
.hero h1{font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(2.2rem, 1.1rem + 4vw, 4.4rem); margin:0; max-width:19ch}
.hero .sub{margin:1.5rem 0 0; max-width:48ch; font-size:clamp(1rem, .95rem + .4vw, 1.18rem); color:var(--muted)}
.hero .sub b{color:var(--text); font-weight:600}
.hero-cta{margin-top:2.2rem; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.86rem;
  color:var(--text); background:var(--cta-fill); border:1px solid var(--teal); border-radius:999px;
  padding:.62rem 1.05rem; transition:background .18s var(--ease),transform .18s var(--ease)}
.pill:hover{background:color-mix(in srgb,var(--teal) 10%,var(--cta-fill)); transform:translateY(-1px)}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal)}
.hero-note{margin-top:3rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--muted)}
.hero-note a{color:var(--accent-ink)}
.hero-note a:hover{color:var(--text)}

/* headline switcher — temporary chooser, removable */
.hsw{display:inline-flex; align-items:center; gap:.55rem; margin-top:2.4rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; color:var(--muted)}
.hsw span{opacity:.7}
.hsw button{appearance:none; background:transparent; border:1px solid var(--stroke); color:var(--muted);
  width:24px; height:24px; border-radius:50%; cursor:pointer; font:inherit; transition:.18s var(--ease)}
.hsw button[aria-pressed="true"]{border-color:var(--teal); color:var(--text); background:color-mix(in srgb,var(--teal) 12%,transparent)}

/* ---------- section ---------- */
.section{padding-block:clamp(4.5rem,9vw,8rem); position:relative}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem}
.section-head .stamp{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--muted)}
.hairline-top{border-top:1px solid var(--hairline)}

/* ---------- work cards ---------- */
.cards{display:grid; gap:1.1rem; grid-template-columns:repeat(3,1fr)}
.card{position:relative; background:var(--card); border:1px solid var(--stroke); border-radius:14px;
  padding:1.4rem 1.45rem 1.5rem; overflow:hidden; transition:transform .2s var(--ease),border-color .2s var(--ease)}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--bar,var(--teal));
  box-shadow:0 0 22px -2px color-mix(in srgb,var(--bar,var(--teal)) 55%,transparent); transition:width .2s var(--ease),filter .2s var(--ease)}
.card:hover{transform:translateY(-2px); border-color:var(--stroke-hover)}
.card:hover::before{width:7px; filter:brightness(1.14)}
.card[data-bar="teal"]{--bar:var(--teal)} .card[data-bar="indigo"]{--bar:var(--indigo)} .card[data-bar="amber"]{--bar:var(--amber)}
.card .meta{display:flex; justify-content:flex-start; margin-bottom:.85rem}
.chip{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--stroke); border-radius:999px; padding:.18rem .5rem}
a.chip:hover{border-color:var(--stroke-hover); color:var(--text)}
.card h3{font-family:var(--display); font-weight:700; letter-spacing:-.01em; font-size:1.16rem; line-height:1.18; margin:0 0 .55rem}
.card p{margin:0; color:var(--text); font-size:.96rem; line-height:1.6}
.card p a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--stroke-hover)}
.card p a:hover{color:var(--accent-ink,var(--teal))}
.card.held{grid-column:1/-1; background:color-mix(in srgb,var(--card) 70%,var(--bg))}
.card.held h3{color:var(--text)}
@media (max-width:760px){.cards{grid-template-columns:1fr} .card.held{grid-column:auto}}

.work-tail{margin-top:1.25rem; font-family:var(--sans); font-size:.85rem; line-height:1.55; color:var(--muted)}
.work-tail a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--stroke-hover)}
.work-tail a:hover{color:var(--text)}
.card[id],.section[id]{scroll-margin-top:5.5rem}

/* prose band ("what we do") */
.prose{max-width:62ch}
.prose .lead-p{font-family:var(--display); font-weight:500; letter-spacing:-.01em; color:var(--text);
  font-size:clamp(1.25rem, 1.05rem + 1vw, 1.85rem); line-height:1.34; margin:0 0 1.2rem}
.prose .muted-p{margin:0; color:var(--muted); font-size:1.02rem; line-height:1.6; max-width:58ch}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--hairline); padding-block:2.4rem 3rem}
.site-foot .row{display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.78rem; color:var(--muted); flex-wrap:wrap}
.site-foot .row a{color:var(--text)} .site-foot .row a:hover{color:var(--teal)}
.site-foot .fine{margin-top:.7rem; font-family:var(--mono); font-size:.72rem; color:var(--muted); opacity:.72; max-width:60ch; line-height:1.6}
.site-foot .mark{width:22px;height:22px;color:var(--muted)}

/* ---------- reveal (hidden state only when JS is present; no-JS gets full content) ---------- */
.js .reveal{opacity:0; transform:translateY(14px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none} .pill,.card{transition:none}}

/* ---------- interior-page header nav ---------- */
.head-nav{font-family:var(--mono); font-size:.8rem; color:var(--muted)}
.head-nav:hover{color:var(--text)}

/* ---------- interior-page headline + section title (only .hero h1 / .card h3 existed) ---------- */
.page-h1{font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.1; max-width:20ch;
  font-size:clamp(1.9rem, 1.35rem + 1.6vw, 2.7rem); margin:.5rem 0 0; color:var(--text)}
.section-head h2{font-family:var(--display); font-weight:700; letter-spacing:-.01em; font-size:1.3rem; margin:0; color:var(--text)}

/* ---------- video embed (16:9) ---------- */
.media{aspect-ratio:16/9; width:100%; margin-top:1.3rem; border:1px solid var(--stroke); border-radius:14px; overflow:hidden; background:var(--ink-lo)}
.media video{display:block; width:100%; height:100%; object-fit:cover}

/* ---------- code block (card surface, no accent bar) ---------- */
pre.code{font-family:var(--mono); font-size:.82rem; line-height:1.6; color:var(--text); white-space:pre; overflow-x:auto;
  background:var(--card); border:1px solid var(--stroke); border-radius:14px; padding:1.05rem 1.2rem; margin:1rem 0 0}
pre.code .c{color:var(--muted)}

/* ---------- bend (/bend) — fd- class prefix is historical ---------- */
.fd-stage{position:relative; height:100vh; height:100svh; min-height:540px; overflow:hidden; background:var(--field-bg); border-bottom:1px solid var(--hairline); cursor:crosshair}

/* ---------- the homepage takeover: the hero becomes the game in place ---------- */
.fd-takeover{position:absolute; inset:0; z-index:3; height:auto; min-height:0; border-bottom:0;
  opacity:0; pointer-events:none; transition:opacity .55s var(--ease); background:transparent}
.bend-live .fd-takeover{opacity:1; pointer-events:auto}
.bend-live .hero-inner,.bend-live .hero-scrim{opacity:0; pointer-events:none}
.hero-inner,.hero-scrim{transition:opacity .55s var(--ease)}
@media (prefers-reduced-motion:reduce){.fd-takeover,.hero-inner,.hero-scrim{transition:none}}
.fd-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:inherit; transition:filter .3s var(--ease)}
@media (prefers-reduced-motion:reduce){.fd-canvas{transition:none}}
.fd-stage.is-dim .fd-canvas{filter:brightness(.55) saturate(.85)}   /* paused/end calm the arena under the panel */
.fd-stage.is-end .fd-hud-left,.fd-stage.is-end .fd-time,.fd-stage.is-end .fd-heatbar{opacity:.35}
.fd-hud{position:absolute; left:0; right:0; top:4.4rem; display:flex; justify-content:space-between; align-items:center;
  padding:0 var(--edge); font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; color:var(--muted); pointer-events:none}
.fd-hud b{color:var(--text); font-size:1.05rem; font-weight:500; font-variant-numeric:tabular-nums}
.fd-hud-left,.fd-hud-right{display:flex; align-items:center; gap:.7rem}
.fd-label{font-size:.62rem; letter-spacing:.2em}   /* no opacity on small text — it sank below AA on the light ground */
.fd-mult{color:var(--accent-ink); border:1px solid color-mix(in srgb,var(--teal) 40%,transparent); border-radius:999px; padding:.05rem .45rem; font-size:.68rem}
.fd-time{font-variant-numeric:tabular-nums}
.fd-heatbar{width:86px; height:5px; border:1px solid var(--stroke); border-radius:999px; overflow:hidden; display:inline-block;
  background:color-mix(in srgb,var(--stroke) 30%,transparent)}
.fd-heatbar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal),var(--amber),var(--rose)); transition:width .18s var(--ease)}
.fd-heatbar.warn{border-color:var(--rose); animation:fd-warn 1s infinite}
@keyframes fd-warn{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 12px 0 color-mix(in srgb,var(--rose) 60%,transparent)}}
@media (prefers-reduced-motion:reduce){.fd-heatbar.warn{animation:none}}
.fd-mute{position:relative; pointer-events:auto; appearance:none; background:transparent; border:1px solid var(--stroke); color:var(--muted);
  border-radius:999px; padding:.2rem .6rem; font:inherit; font-size:.66rem; letter-spacing:.12em; cursor:pointer}
.fd-mute::after{content:""; position:absolute; inset:-11px -4px; border-radius:999px}   /* ~44px touch target; -4px sides keep neighbours disjoint */
.fd-mute:hover{color:var(--text); border-color:var(--stroke-hover)}
.fd-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:.1rem; padding:5rem var(--edge) 2rem;
  background:radial-gradient(ellipse at center, color-mix(in srgb,var(--field-bg) 36%,transparent) 0%, transparent 70%)}
.fd-overlay[hidden]{display:none}
.fd-panel{width:min(620px,100%); display:flex; flex-direction:column; align-items:center; padding:clamp(1.25rem,2.8vw,2rem);
  border:1px solid color-mix(in srgb,var(--stroke) 72%,transparent); border-radius:18px;
  background:color-mix(in srgb,var(--field-bg) 90%,transparent); box-shadow:0 24px 80px rgba(0,0,0,.18);
  backdrop-filter:blur(8px)}
.fd-kicker{font-family:var(--mono); font-size:.68rem; letter-spacing:.24em; color:var(--accent-ink); margin:0}
.fd-sub{max-width:46ch; color:var(--muted); font-size:.98rem; line-height:1.6; margin:.6rem 0 0}
.fd-best{font-family:var(--mono); font-size:.78rem; color:var(--text); margin:.9rem 0 0; letter-spacing:.06em}
.fd-final{font-family:var(--display); font-weight:700; font-size:clamp(2.6rem, 2rem + 3vw, 4.2rem); color:var(--text); margin:.2rem 0 0; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.fd-final-label{margin:.9rem 0 0; color:var(--muted); font-family:var(--mono)}
.fd-newbest{color:var(--accent-ink)}
#how-to-play .cards{align-items:start}
.fd-glyphs{font-size:1.15rem; letter-spacing:.35em; margin:.5rem 0 0; color:var(--accent-ink)}
.fd-tally{font-family:var(--mono); font-size:.72rem; color:var(--muted); margin:.5rem 0 0; letter-spacing:.08em}
.fd-btns{display:flex; gap:.8rem; margin-top:1.3rem; flex-wrap:wrap; justify-content:center}
.fd-panel>.pill{margin-top:1.6rem}   /* the lone Play button; .fd-btns rows space themselves */
button.pill{appearance:none; cursor:pointer}
.fd-panel .pill{min-height:44px; padding-block:.72rem}
.fd-coach{position:absolute; z-index:4; left:50%; bottom:1.35rem; transform:translateX(-50%); display:flex; align-items:center;
  gap:.62rem; max-width:min(92vw,620px); margin:0; padding:.5rem .78rem; pointer-events:none; white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--teal) 38%,var(--stroke)); border-radius:999px;
  background:color-mix(in srgb,var(--field-bg) 86%,transparent); color:var(--text); backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.055em; box-shadow:0 10px 32px rgba(0,0,0,.16)}
.fd-coach::before{content:""; width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal)}
.fd-coach[hidden]{display:none}
.fd-coach b{color:var(--accent-ink); font-weight:500; letter-spacing:.12em}
.fd-hint{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--muted); margin:1.1rem 0 0}
.fd-hint a{text-decoration:underline; text-underline-offset:3px}
.fd-reduced{position:absolute; left:0; right:0; bottom:1.1rem; text-align:center; font-family:var(--mono); font-size:.72rem; color:var(--muted); padding:0 var(--edge); margin:0}
@media (max-width:560px){
  .fd-hud{top:3.9rem; font-size:.7rem}
  .fd-heatbar{width:76px; height:6px}
  .fd-stage{min-height:480px}
  .fd-glyphs{letter-spacing:.22em}
  /* panels sit above the arena on phones so the demo/sun stay visible */
  .fd-overlay{justify-content:flex-start; padding:7.5rem 1rem 2rem}
  .fd-panel{padding:1.15rem .9rem}
  /* coach at the top: the drag hand lives at the bottom and was covering it */
  .fd-coach{bottom:auto; top:6.1rem; width:calc(100% - 1rem); justify-content:center; white-space:normal; text-align:center; line-height:1.35; font-size:.62rem}
}

/* ---------- mobile ---------- */
@media (max-width:430px){
  /* email lives in the hero pill / contact link on phones; keep Research + Tools reachable */
  .head-mail{display:none}
  .head-right{gap:.9rem}
}