@font-face{font-family:Michroma;src:url('assets/fonts/Michroma-Regular.woff2') format('woff2');font-weight:400;font-display:optional}
@font-face{font-family:DINish;src:url('assets/fonts/DINish-Regular.woff2') format('woff2');font-weight:400;font-display:optional}
@font-face{font-family:DINish;src:url('assets/fonts/DINish-SemiBold.woff2') format('woff2');font-weight:600;font-display:optional}

/* Mobile first. Larger screens are layered on in the media queries at the end. */
:root{
  --yellow:#ffd600;--ink:#111;--panel:#141414;
  --g:20px;
  --display:Michroma,"Arial Black",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,0,1);
  --radius:26px;
  color:var(--ink);background:var(--ink);
  font-family:DINish,Bahnschrift,"DIN Alternate",system-ui,sans-serif;font-synthesis:none;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--yellow)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip-link{position:fixed;top:12px;left:12px;z-index:60;padding:12px 16px;border-radius:999px;background:var(--ink);color:var(--yellow);transform:translateY(-200%)}.skip-link:focus{transform:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Top bar: ink over yellow surfaces, yellow over dark ones */
.topbar{position:fixed;z-index:30;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top)) var(--g) 12px;color:var(--ink);pointer-events:none;transition:color .3s}
.topbar.on-dark{color:var(--yellow)}
.topbar a{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:12px;letter-spacing:.02em}
.brand img{width:34px;height:34px;border-radius:8px;box-shadow:0 0 0 1px #11111122}
.topbar-link{font-size:14px;font-weight:600;padding:10px 0}

/* HERO — the city in fog, with the name set large and offset */
.hero{--night:#0b0a09;position:sticky;top:0;height:100svh;min-height:540px;overflow:hidden;background:var(--night);color:var(--yellow);isolation:isolate}
.hero-stage{position:absolute;inset:0;z-index:0}
.hero-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;background:radial-gradient(120% 90% at 50% 40%,transparent 50%,#000000aa 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Dark falloff keeps the yellow wordmark legible over the cloud bank. */
.hero-stage::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,var(--night) 0,var(--night) 20%,#0b0a09cc 34%,#0b0a0900 58%);pointer-events:none}
.hero-stage canvas,.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-stage canvas{opacity:0;transition:opacity 1.4s ease}
.hero-live .hero-stage canvas{opacity:1}
.title{
  --fs:calc((100vw - 2 * var(--g)) / 5.0);
  position:absolute;z-index:2;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));margin:0;
  display:flex;flex-direction:column;font-family:var(--display);font-weight:400;font-size:var(--fs);line-height:1;letter-spacing:-.035em;white-space:nowrap
}
.title .line{display:block;padding:0 var(--g);will-change:transform}
.title .line:last-child{align-self:flex-end}
.title .ch{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.title .ch>span{display:inline-block;transform:translateY(110%);transition:transform 1.4s var(--ease);transition-delay:calc(var(--c) * 50ms + 250ms)}
.ready .title .ch>span{transform:none}
.hero-line{color:#f1ece0;position:absolute;z-index:2;left:var(--g);right:var(--g);bottom:calc(28px + env(safe-area-inset-bottom));margin:0;font-size:17px;font-weight:600;letter-spacing:.01em;opacity:0;transform:translateY(10px);transition:opacity 1s ease .9s,transform 1.2s var(--ease) .9s}
.ready .hero-line{opacity:1;transform:none}
.shade{position:absolute;inset:0;z-index:5;background:#000;opacity:0;pointer-events:none}

/* PANELS — stack over the hero and over each other as you scroll */
.panel{position:sticky;top:var(--stick,0px);z-index:3;min-height:100svh;display:flex;flex-direction:column;padding:calc(84px + env(safe-area-inset-top)) var(--g) 40px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;transform-origin:50% 0;will-change:transform}
.panel--ink{background:var(--panel);color:var(--yellow);box-shadow:inset 0 1px 0 #ffffff1c}
.panel--yellow{background:var(--yellow);color:var(--ink)}
.panel--fit{min-height:0;padding-bottom:28px}
.panel--fit .note{margin-top:0;padding-top:18px}
.eyebrow{display:flex;gap:14px;margin:0 0 28px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.eyebrow span{font-family:var(--display);letter-spacing:0;opacity:.6}
.panel h2{margin:0;max-width:16em;font-family:var(--display);font-weight:400;font-size:clamp(25px,7.2vw,64px);line-height:1.08;letter-spacing:-.03em}
.sub{margin:18px 0 0;max-width:30em;font-size:18px;line-height:1.35;opacity:.86}
.note{margin:auto 0 0;padding-top:28px;font-size:12px;line-height:1.4;opacity:.55}

/* 01 — stats */
.stats{display:grid;gap:0;margin:36px 0 0;border-top:1px solid #ffd60033}
.stats div{display:grid;grid-template-columns:minmax(0,46%) 1fr;align-items:baseline;gap:14px;padding:18px 0;border-bottom:1px solid #ffd60033}
.stats dt{font-family:var(--display);font-size:clamp(34px,10vw,84px);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.stats dt small{font-family:DINish,system-ui,sans-serif;font-weight:600;font-size:.46em;margin-left:.08em;letter-spacing:0}
.stats dd{margin:0;font-size:16px;line-height:1.3;opacity:.86}

/* 02 — the two terminals */
.duel{display:grid;gap:12px;margin:30px 0 0}
.term{margin:0;border-radius:18px;background:var(--ink);color:#e9e5d6;overflow:hidden}
.term figcaption{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #ffffff14;font-size:13px;font-weight:600}
.term figcaption b{font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.term--blocked figcaption b{border:1px solid #ffffff33;color:#ffffff99}
.term--es figcaption{color:var(--yellow)}
.term--es figcaption b{background:var(--yellow);color:var(--ink)}
.term pre{margin:0;padding:14px 16px 18px;min-height:9.6em;font-family:var(--mono);font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.term-body{position:relative}
.term .term-size{visibility:hidden;pointer-events:none;user-select:none}
.term .term-typed{position:absolute;inset:0}
.term .q{color:#ffffffb3}
.term--blocked pre{color:#ffffff80}
.term .x{color:#ffffffd0;text-decoration:line-through;text-decoration-color:#ffffff40}
.term .ok{color:var(--yellow)}
.term [data-type].typing::after{content:"▍";animation:blink 1s steps(1) infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}

/* 03 — contact */
.panel--cta{justify-content:flex-start;padding-bottom:0}
.contact-mark{width:96px;height:96px;margin:auto auto 32px;border-radius:22px}
.cta{display:flex;flex-direction:column;gap:12px;width:100%}
.pill{appearance:none;border:0;margin:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:0 30px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:18px;font-weight:600;text-align:center;transition:background .25s,color .25s,transform .3s var(--ease)}
.pill:hover{transform:translateY(-2px)}.pill:active{transform:scale(.98)}.pill:disabled{cursor:progress;opacity:.75}
.pill--line{background:transparent;color:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--yellow)}
.pill--line:hover{background:var(--yellow);color:var(--ink)}
.nest{margin:22px 0 auto;text-align:center;font-size:14px;opacity:.75}
.nest strong{font-weight:600;letter-spacing:.04em}
.nest a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.nest a:hover{opacity:.8}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-top:40px;padding:20px 0 calc(20px + env(safe-area-inset-bottom));border-top:1px solid #ffd60026;font-size:13px;opacity:.85}
.footer a:hover{text-decoration:underline;text-underline-offset:4px}

/* Lead dialog: a bottom sheet on phones, a centred card on larger screens */
.lead{width:100%;max-width:none;max-height:94dvh;margin:auto 0 0;padding:0;border:0;border-radius:24px 24px 0 0;background:var(--yellow);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.lead::backdrop{background:#111111d9;backdrop-filter:blur(6px)}
html:has(.lead[open]){overflow:hidden}
.lead-body{padding:22px 20px calc(22px + env(safe-area-inset-bottom))}
.lead-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lead h2{margin:0;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:-.01em;line-height:1.2}
.lead-close{appearance:none;flex:none;width:44px;height:44px;border:1px solid #11111166;border-radius:50%;background:none;color:inherit;font:inherit;font-size:24px;line-height:1;cursor:pointer}.lead-close:hover{background:#1111110f}
.lead-intro{margin:10px 0 20px;font-size:16px;line-height:1.35}
.field{margin:0 0 14px}
.field label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}.field label small{font-size:inherit;font-weight:400;opacity:.7}
.field input,.field textarea{display:block;width:100%;min-height:48px;padding:12px 14px;border:1px solid #11111166;border-radius:14px;background:#fff6bf;color:var(--ink);font:inherit;font-size:16px}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.field [aria-invalid=true]{border-color:#8a0017;box-shadow:inset 0 0 0 1px #8a0017}
.field-error{margin:6px 0 0;color:#8a0017;font-size:14px;font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-status{margin:4px 0 14px;font-size:15px;line-height:1.4}.lead-status:empty{display:none}
.lead-status a,.lead-done a:not(.pill){text-decoration:underline;text-underline-offset:3px}
.lead .pill{width:100%;background:var(--ink);color:var(--yellow)}
.lead-badge{display:inline-block;margin:0 0 12px;padding:4px 10px;border:1px dashed var(--ink);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.lead-done{outline:none}.lead-done p{margin:14px 0 22px;font-size:17px;line-height:1.4}

@media (min-width:560px){
  .cta{flex-direction:row;justify-content:center}
  .cta .pill{flex:0 0 min(280px,44%)}
  .lead{width:min(520px,calc(100% - 24px));margin:auto;border-radius:28px;max-height:calc(100dvh - 24px)}
  .lead-body{padding:28px}
}
@media (min-width:801px){
  :root{--g:clamp(24px,3vw,48px);--radius:40px}
  .brand{font-size:14px;gap:12px}.brand img{width:38px;height:38px}
  .topbar{padding-top:18px}
  .title{--fs:min(14vw,25svh);bottom:calc(var(--fs) * .3 + 30px);line-height:.96}
  .title .line:last-child{margin-right:calc(var(--fs) * -.02)}
  .hero-line{left:auto;right:var(--g);bottom:34px;font-size:20px;text-align:right}
  .panel{padding:120px var(--g) 48px}
  .sub{font-size:21px}
  .stats{grid-template-columns:repeat(3,1fr);margin-top:auto;border-top:0}
  .stats div{display:block;padding:24px 28px 0 0;border-bottom:0;border-top:1px solid #ffd60033}
  .stats dd{margin-top:12px;font-size:18px;max-width:14em}
  .note{margin-top:0}
  .duel{grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
  .panel--fit{padding-bottom:40px}
  .term pre{font-size:15px;padding:18px 20px 22px}
  .nest{font-size:15px}
  .contact-mark{width:132px;height:132px;border-radius:30px;margin-bottom:40px}
  .hero-stage::after{background:linear-gradient(to top,var(--night) 0,var(--night) 26%,#0b0a09d9 42%,#0b0a0900 70%)}
}
@media (prefers-reduced-motion:reduce){
  .title .ch>span,.hero-line{transform:none;transition:none;opacity:1}
  .title .line,.panel{transform:none!important}
  .hero-stage canvas{transition:none}
  .term [data-type].typing::after{animation:none}
}

/* Small/touch devices keep the same composition with two composited title lines
   and native sticky panels, avoiding a separate layer for every glyph/panel. */
.lightweight .title .line{will-change:auto;opacity:0;transform:translateY(16px);transition:transform .55s var(--ease),opacity .4s ease}
.lightweight.ready .title .line{opacity:1;transform:none}
.lightweight .title .line:last-child{transition-delay:.08s}
.lightweight .panel{will-change:auto;transform:none!important}
.lightweight .lead::backdrop{backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.lightweight .title .line{opacity:1;transform:none;transition:none}}