/* LATENT — darkroom. One easing curve, every size a clamp, height-aware hero. */
:root{
  --ground:#0A0908; --panel:#12100E; --panel2:#171410; --rule:#2A2521; --hair:#1E1A16;
  --ink:#E8E6E1; --mute:#8A8378; --faint:#5E574E;
  --safe:#FF6B2C; --safe-deep:#B8351A; --silver:#CFD4DA;
  --display:"Bodoni Moda",Didot,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --ease:cubic-bezier(.16,1,.3,1);

  --h1:clamp(38px,5.6vw,90px);
  --h2:clamp(26px,3.1vw,46px);
  --h3:clamp(17px,1.35vw,22px);
  --body:clamp(15px,1.06vw,17px);
  --small:clamp(12px,.83vw,13.5px);
  --gut:clamp(20px,4.4vw,88px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ground); color:var(--ink); font-family:var(--display);
  font-size:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* grain: stops a flat dark ground banding, costs no request */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the safelight, the only hue on the page */
body::before{
  content:""; position:fixed; z-index:0; pointer-events:none;
  left:50%; top:-28vh; width:120vw; height:80vh; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,107,44,.13) 0%, rgba(184,53,26,.05) 42%, rgba(10,9,8,0) 72%);
  animation:breathe 13s var(--ease) infinite;
}
@keyframes breathe{0%,100%{opacity:.72}50%{opacity:1}}

a{color:inherit}
:focus-visible{outline:2px solid var(--safe); outline-offset:3px; border-radius:2px}
.mono{font-family:var(--mono)}
.wrap{max-width:1360px; margin:0 auto; padding:0 var(--gut); position:relative; z-index:1}

/* base state is VISIBLE; the keyframes do the hiding, so an animation that
   never runs can't leave the page blank */
.appear{opacity:1}
.run .appear{animation:rise .95s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.d1{animation-delay:.07s}.d2{animation-delay:.15s}.d3{animation-delay:.24s}
.d4{animation-delay:.34s}.d5{animation-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .run .appear{animation:none}
  body::before{animation:none}
  *{transition:none!important}
}

/* ───────── nav */
nav{
  position:sticky; top:0; z-index:8; backdrop-filter:blur(14px);
  background:rgba(10,9,8,.72); border-bottom:1px solid var(--hair);
}
nav .bar{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-family:var(--mono); font-size:13px; letter-spacing:.34em; text-transform:uppercase}
.brand b{color:var(--safe); font-weight:500}
.tabs{display:flex; gap:clamp(14px,1.8vw,30px); font-family:var(--mono);
      font-size:var(--small); letter-spacing:.14em; text-transform:uppercase}
.tabs a{color:var(--mute); text-decoration:none; padding:6px 0; border-bottom:1px solid transparent;
        transition:color .4s var(--ease), border-color .4s var(--ease)}
.tabs a:hover,.tabs a[aria-current="true"]{color:var(--ink); border-color:var(--safe)}

/* ───────── hero */
.hero{min-height:calc(100svh - 64px); display:grid; align-items:center;
      grid-template-columns:1.06fr .94fr; gap:clamp(28px,4.4vw,80px); padding:clamp(28px,5vh,72px) 0}
.eyebrow{font-family:var(--mono); font-size:var(--small); letter-spacing:.26em;
         text-transform:uppercase; color:var(--safe); margin-bottom:clamp(14px,1.6vh,26px)}
h1{font-size:var(--h1); line-height:.98; font-weight:400; letter-spacing:-.022em; text-wrap:balance}
h1 em{font-style:italic; color:var(--silver)}
.lede{margin-top:clamp(16px,2vh,28px); max-width:46ch; color:var(--mute); font-size:clamp(15px,1.16vw,19px)}
.lede strong{color:var(--ink); font-weight:400}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(20px,2.6vh,36px)}
.btn{font-family:var(--mono); font-size:var(--small); letter-spacing:.16em; text-transform:uppercase;
     padding:13px 22px; border:1px solid var(--rule); background:transparent; color:var(--ink);
     cursor:pointer; text-decoration:none; display:inline-block;
     transition:border-color .45s var(--ease), background .45s var(--ease), color .45s var(--ease)}
.btn:hover{border-color:var(--safe); color:var(--safe)}
.btn.solid{background:var(--safe); border-color:var(--safe); color:#140A04}
.btn.solid:hover{filter:brightness(1.12); color:#140A04}
.btn:disabled{opacity:.34; cursor:not-allowed; border-color:var(--hair); color:var(--faint)}

.plateWrap{position:relative; display:flex; align-items:center; justify-content:center}
.plateFrame{position:relative; width:min(100%,460px); aspect-ratio:1;
            border:1px solid var(--rule); background:var(--panel);
            box-shadow:0 0 0 1px rgba(255,107,44,.05), 0 40px 90px -40px rgba(184,53,26,.4)}
.plateFrame svg{width:100%; height:100%; display:block}
.plateTag{position:absolute; left:-1px; bottom:-30px; font-family:var(--mono);
          font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}

@media (min-width:981px) and (max-height:880px){:root{--h1:56px; --h2:32px}}
@media (min-width:981px) and (max-height:740px){:root{--h1:44px; --h2:28px}.lede{display:none}}
@media (max-width:980px){
  html,body{height:auto}
  .hero{grid-template-columns:1fr; min-height:0; padding:clamp(30px,6vh,56px) 0 44px}
  .plateWrap{order:-1}
  .tabs a:not(.keep){display:none}
}

/* ───────── sections */
section{padding:clamp(60px,9vh,132px) 0; border-top:1px solid var(--hair)}
.kicker{font-family:var(--mono); font-size:var(--small); letter-spacing:.24em;
        text-transform:uppercase; color:var(--safe); margin-bottom:18px}
h2{font-size:var(--h2); font-weight:400; letter-spacing:-.016em; line-height:1.1; max-width:20ch; text-wrap:balance}
.sub{margin-top:16px; color:var(--mute); max-width:62ch}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
       gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:clamp(32px,4.4vh,56px)}
.step{background:var(--panel); padding:clamp(22px,2.4vw,34px); transition:background .5s var(--ease)}
.step:hover{background:var(--panel2)}
.step .n{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--safe)}
.step h3{font-size:var(--h3); font-weight:400; margin:14px 0 10px}
.step p{color:var(--mute); font-size:var(--small); line-height:1.75}

/* ───────── darkroom */
.room{display:grid; grid-template-columns:1fr 430px; gap:clamp(26px,3.4vw,54px);
      margin-top:clamp(30px,4vh,52px); align-items:start}
@media (max-width:980px){.room{grid-template-columns:1fr}}
.console{border:1px solid var(--rule); background:var(--panel)}
.readouts{display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--hair)}
.ro{padding:16px clamp(12px,1.4vw,20px); border-right:1px solid var(--hair)}
.ro:last-child{border-right:0}
.ro .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
       text-transform:uppercase; color:var(--faint)}
.ro .v{font-family:var(--mono); font-size:clamp(17px,1.5vw,23px); margin-top:7px;
       font-variant-numeric:tabular-nums; color:var(--ink)}
.ro .v.warn{color:var(--safe)}
.meterWrap{padding:clamp(18px,2vw,26px)}
.meterLabel{display:flex; justify-content:space-between; font-family:var(--mono);
            font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.meter{height:5px; background:#221E19; margin-top:10px; overflow:hidden}
.meter i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--safe-deep),var(--safe));
         transition:width .5s var(--ease)}
.tape{font-family:var(--mono); font-size:11.5px; line-height:1.95; color:var(--faint);
      padding:0 clamp(18px,2vw,26px) clamp(18px,2vw,26px); max-height:168px; overflow:auto}
.tape b{color:var(--mute); font-weight:400}
.tape .hit{color:var(--safe)}
.controls{display:flex; gap:10px; flex-wrap:wrap; padding:0 clamp(18px,2vw,26px) clamp(20px,2.4vw,28px)}

/* ───────── gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
         gap:clamp(12px,1.4vw,20px); margin-top:clamp(30px,4vh,50px)}
.gcard{border:1px solid var(--rule); background:var(--panel); padding:10px}
.gcard svg{width:100%; height:auto; display:block}
.gcard .cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
            text-transform:uppercase; color:var(--faint); margin-top:10px; display:flex; justify-content:space-between}

/* ───────── docs */
.docs{display:grid; grid-template-columns:200px 1fr; gap:clamp(24px,3.4vw,60px); margin-top:clamp(28px,3.6vh,48px)}
@media (max-width:980px){.docs{grid-template-columns:1fr}}
.toc{position:sticky; top:84px; align-self:start; font-family:var(--mono);
     font-size:var(--small); line-height:2.3; border-left:1px solid var(--hair); padding-left:16px}
.toc a{display:block; color:var(--mute); text-decoration:none; transition:color .4s var(--ease)}
.toc a:hover{color:var(--safe)}
.doc h3{font-size:var(--h3); font-weight:400; margin:34px 0 12px; scroll-margin-top:86px}
.doc h3:first-child{margin-top:0}
.doc p{color:var(--mute); max-width:70ch; margin-bottom:12px}
.doc code{font-family:var(--mono); font-size:.88em; background:var(--panel2);
          border:1px solid var(--hair); padding:1.5px 6px; color:var(--silver)}
pre{font-family:var(--mono); font-size:12.5px; line-height:1.75; background:var(--panel);
    border:1px solid var(--hair); border-left:2px solid var(--safe-deep);
    padding:16px 18px; overflow-x:auto; color:var(--silver); margin:14px 0}
table{width:100%; border-collapse:collapse; margin:16px 0; font-size:var(--small)}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--hair); vertical-align:top}
th{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
td.m{font-family:var(--mono); color:var(--silver); white-space:nowrap}
td:last-child{color:var(--mute)}
.note{border:1px solid var(--rule); border-left:2px solid var(--safe); background:var(--panel);
      padding:16px 18px; margin:18px 0; color:var(--mute); font-size:var(--small)}
.note b{color:var(--ink); font-weight:400}

footer{border-top:1px solid var(--hair); padding:clamp(34px,4.6vh,58px) 0 clamp(40px,5vh,64px)}
.fbar{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:baseline;
      font-family:var(--mono); font-size:var(--small); letter-spacing:.1em; color:var(--faint)}
.fbar a{color:var(--mute); text-decoration:none}
.fbar a:hover{color:var(--safe)}