/* OTHR V5 · shared style.
   The look: a worn case file (generated plates) under a clean overlay (code-drawn figures).
   Layer stack, bottom to top (VISUALS-PLAN.md ▸ Layering):
     0 ground · 1 plate · 2 shade · 3 figure · 4 text · 5 chrome
   Text only ever sits on a plate's quiet zone, a shade or a panel. Figures that cross a busy
   part of a plate carry a dark halo (.halo) or sit on a panel. Phones stack: plate above text. */

@font-face{font-family:'Michroma';font-display:swap;src:url(fonts/michroma.woff2) format('woff2')}
@font-face{font-family:'Plex';font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono.woff2) format('woff2')}
@font-face{font-family:'Plex';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-1.woff2) format('woff2')}
@font-face{font-family:'Plex';font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-2.woff2) format('woff2')}

:root{
  --ground:#050505; --fig:#f2f2f2; --body:#d2d2d2; --mute:#8e8e8e; --dim:#5c5c5c;
  --struct:#262626; --line:rgba(242,242,242,.16); --tan:#bfae8e; --dev:#D85A2A;
  --panel:rgba(5,5,5,.86);
  --gut:clamp(20px,5vw,96px); --max:1440px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --display:'Michroma',system-ui,sans-serif; --mono:'Plex',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--ground);color:var(--body);-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.65 var(--mono);background:var(--ground);overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--fig);color:var(--ground)}
:focus-visible{outline:2px solid var(--dev);outline-offset:3px}

/* ---------- type ---------- */
.eye{font:500 11px/1.4 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin:0 0 22px}
.eye::before{content:"";display:inline-block;width:34px;height:1px;background:currentColor;vertical-align:middle;margin-right:14px}
h1,h2{font-family:var(--display);font-weight:400;color:var(--fig);margin:0;letter-spacing:-.005em}
h1{font-size:clamp(44px,7.2vw,104px);line-height:1.02}
h2{font-size:clamp(28px,3.6vw,50px);line-height:1.1;margin-bottom:22px}
h3{font:600 12px/1.4 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--fig);margin:0 0 10px}
p{margin:0 0 16px;max-width:34em}
.lead{font-size:clamp(17px,1.35vw,19px);color:var(--fig)}
.lead b,p b{color:var(--fig);font-weight:600}
.mute{color:var(--mute)}
.cur{display:inline-block;width:.48em;height:.09em;background:var(--fig);margin-left:.06em;vertical-align:baseline;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ro{display:flex;flex-wrap:wrap;gap:10px 30px;font:500 11px/1.4 var(--mono);letter-spacing:.2em;color:var(--mute);margin-top:34px}
.ro b{color:var(--fig);font-weight:600}

/* ---------- chrome (layer 5: always on a solid strip) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gut);background:rgba(5,5,5,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.mark{font:400 17px var(--display);letter-spacing:.12em;color:var(--fig);text-decoration:none;white-space:nowrap}
.mark i{font-style:normal;color:#8a8a8a}.mark i+i{color:var(--tan)}.mark i+i+i{color:var(--dev)}
.nav ul{display:flex;gap:clamp(12px,2vw,28px);list-style:none;margin:0;padding:0;font:500 10.5px var(--mono);letter-spacing:.2em}
.nav li a{text-decoration:none;color:var(--mute);padding:6px 0;border-bottom:1px solid transparent}
.nav li a:hover,.nav li a[aria-current]{color:var(--fig);border-color:var(--fig)}
.nav .sealed{color:var(--dim)}
@media (max-width:820px){.nav ul .opt{display:none}}

.regs{position:fixed;inset:56px 0 0 0;pointer-events:none;z-index:40}
.regs i{position:absolute;width:16px;height:16px;opacity:.4}
.regs i::before,.regs i::after{content:"";position:absolute;background:var(--fig)}
.regs i::before{left:7.5px;top:0;width:1px;height:16px}.regs i::after{top:7.5px;left:0;height:1px;width:16px}
.regs .a{left:18px;top:18px}.regs .b{right:18px;top:18px}.regs .c{left:18px;bottom:18px}.regs .d{right:18px;bottom:18px}
@media (max-width:820px){.regs{display:none}}

/* ---------- plates (layers 1-2) ---------- */
.sec{position:relative;padding:clamp(80px,12vh,140px) var(--gut)}
.wrap{max-width:var(--max);margin:0 auto;position:relative}
.plate{position:relative;min-height:100vh;display:flex;align-items:center;padding:96px var(--gut) 72px;overflow:hidden}
.plate>.pl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.plate>.shade{position:absolute;inset:0;z-index:1;pointer-events:none}
.plate.q-left>.shade{background:linear-gradient(90deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.5) 34%,rgba(5,5,5,0) 58%)}
.plate.q-right>.shade{background:linear-gradient(270deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.5) 34%,rgba(5,5,5,0) 58%)}
.plate.q-center>.shade{background:radial-gradient(ellipse at 50% 50%,rgba(5,5,5,.55),rgba(5,5,5,.15) 70%)}
.plate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;background:linear-gradient(0deg,var(--ground),transparent);pointer-events:none}
.plate::before{content:"";position:absolute;left:0;right:0;top:0;height:90px;z-index:1;background:linear-gradient(180deg,var(--ground),transparent);pointer-events:none}
.plate>.fig{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.zone{position:relative;z-index:3;width:min(100%,560px)}
.plate.q-right .zone{margin-left:auto}
.plate.q-center .zone{margin:0 auto;text-align:center}
.plate.q-center p{margin-left:auto;margin-right:auto}

/* phones stack: plate first, text after, on the ground */
@media (max-width:820px){
  .plate{display:block;min-height:0;padding:0 0 56px}
  .plate>.pl{position:relative;height:auto;aspect-ratio:16/10;object-position:var(--focus,70% 50%)}
  .plate>.shade,.plate::before{display:none}
  .plate::after{top:calc(100vw*10/16 - 90px);bottom:auto;height:90px}
  .plate>.fig{inset:0 0 auto 0;height:auto;aspect-ratio:16/10}
  .zone{width:auto;padding:28px var(--gut) 0;margin:0!important;text-align:left!important}
}

/* ---------- figures (layer 3) ---------- */
.fig text,.svgl{font:500 12px var(--mono);letter-spacing:.2em;fill:var(--fig)}
.fig .m{fill:var(--mute)}
.halo{paint-order:stroke;stroke:rgba(5,5,5,.9);stroke-width:5px;stroke-linejoin:round}
.tag rect{fill:var(--panel);stroke:rgba(242,242,242,.28)}
.panel{background:var(--panel);border:1px solid rgba(242,242,242,.2);padding:22px 24px}
.dev{color:var(--dev)}
.chip{display:inline-block;font:500 11px var(--mono);letter-spacing:.2em;border:1px solid rgba(242,242,242,.3);padding:6px 10px;color:var(--fig);background:rgba(5,5,5,.7)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- pinned scroll scenes ---------- */
.scene{position:relative}
.scene>.stick{position:sticky;top:0;height:100vh;overflow:hidden}
.beats{position:relative}
.beat{position:absolute;left:0;top:0;width:100%;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.beat.on{opacity:1;transform:none;pointer-events:auto}
.prog{display:flex;gap:6px;margin-bottom:20px}
.prog i{width:22px;height:2px;background:var(--struct)}
.prog i.on{background:var(--fig)}

/* ---------- footer ---------- */
.next{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.next a{font:400 clamp(20px,2.4vw,30px) var(--display);color:var(--fig);text-decoration:none}
.next a:hover{color:var(--tan)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font:500 10.5px var(--mono);letter-spacing:.2em;color:var(--dim);padding:28px 0 40px}
.foot b{color:var(--mute);font-weight:500}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .cur{opacity:1}
}