:root{
  --paper:#e9e1cd;          /* warm manila */
  --panel:#f3eddd;          /* lighter card stock */
  --panel2:#e0d7bf;         /* recessed strip */
  --ink:#221c14;            /* warm near-black */
  --ink2:#6c6250;           /* muted */
  --ink3:#9a9079;           /* faint */
  --t1:#d2402b;             /* track 1 — red */
  --t2:#e09a23;             /* track 2 — gold */
  --t3:#2f9266;             /* track 3 — green */
  --t4:#2c5c9e;             /* track 4 — blue */
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Courier Prime',ui-monospace,monospace;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
/* paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image: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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

/* registration crosshairs, page corners */
.reg{position:fixed;width:16px;height:16px;z-index:40;pointer-events:none;opacity:.5}
.reg::before,.reg::after{content:"";position:absolute;background:var(--ink2)}
.reg::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)}
.reg::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)}
.reg.tl{top:14px;left:14px}.reg.tr{top:14px;right:14px}.reg.bl{bottom:14px;left:14px}.reg.br{bottom:14px;right:14px}
@media(max-width:680px){.reg{display:none}}

/* type */
.disp{font-family:'Saira Condensed',sans-serif;font-weight:800;line-height:.95;letter-spacing:.005em;text-transform:uppercase}
.h1{font-family:'Saira Condensed',sans-serif;font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:0;
  font-size:clamp(3rem,9vw,6.4rem)}
.h2{font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;line-height:.96;letter-spacing:.005em;
  font-size:clamp(2.1rem,5.2vw,3.6rem)}
.lead{font-family:'Courier Prime',monospace;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.62;color:var(--ink)}
.stamp{font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}
.dim{color:var(--ink2)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
section{padding:clamp(58px,8vw,104px) 0;border-top:2px solid var(--ink)}
.hero{border-top:none}

/* ticket-stub divider strip between sections */
.rule-strip{height:14px;background-image:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px);opacity:.5}

/* buttons — chunky hardware, hard print shadow */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.04em;padding:13px 22px;border:2px solid var(--ink);background:var(--panel);color:var(--ink);
  text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .06s, box-shadow .06s}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn-rec{background:var(--t1);color:#fff6ef;box-shadow:4px 4px 0 var(--ink)}
.btn-rec .dot{width:11px;height:11px;border-radius:50%;background:#fff6ef;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.btn .sub{display:block;font-family:'Courier Prime',monospace;font-weight:400;font-size:.58rem;letter-spacing:.06em;line-height:1;opacity:.85;text-transform:uppercase}
.btn .main{display:block;font-size:1.05rem;line-height:1.05}
a:focus-visible,.btn:focus-visible,.drop:focus-visible{outline:3px solid var(--t4);outline-offset:2px}

/* nav — faceplate bar */
nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:11px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.logo .meter{display:flex;align-items:flex-end;gap:3px;height:22px}
.logo .meter i{width:5px;border:1.5px solid var(--ink)}
.logo .meter i:nth-child(1){height:9px;background:var(--t1)}
.logo .meter i:nth-child(2){height:17px;background:var(--t2)}
.logo .meter i:nth-child(3){height:12px;background:var(--t3)}
.logo .meter i:nth-child(4){height:22px;background:var(--t4)}
.logo .name{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1.08rem;text-transform:uppercase;letter-spacing:.02em}
.nav-cta{padding:9px 16px;font-size:.92rem}
@media(max-width:560px){.logo .name{display:none}}

/* hero */
.hero{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(48px,7vw,88px)}
.hero .stamp{margin-bottom:18px;color:var(--t1)}
.hero-h1{position:relative;display:inline-block;max-width:15ch}
.hero-h1::before{content:attr(data-text);position:absolute;left:3px;top:3px;color:var(--t1);z-index:-1;opacity:.85}
.hero .lead{margin-top:24px;max-width:48ch}
.hero .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:18px;font-family:'Courier Prime',monospace;font-size:.82rem;color:var(--ink2);letter-spacing:.02em}

.hero-visual{margin-top:clamp(42px,6vw,72px);display:grid;grid-template-columns:1.1fr auto .9fr;gap:clamp(18px,3vw,40px);align-items:center}
@media(max-width:860px){.hero-visual{grid-template-columns:1fr;gap:28px}}
.vs{display:grid;place-items:center;gap:7px}
.vs .ln{width:2px;height:40px;background:var(--ink);opacity:.4}
.vs .w{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1.1rem;text-transform:uppercase;color:var(--ink2)}
@media(max-width:860px){.vs{grid-auto-flow:column}.vs .ln{width:50px;height:2px}}

/* cassette graveyard */
.crate{border:2px solid var(--ink);background:var(--panel2);box-shadow:5px 5px 0 var(--ink);padding:14px}
.crate-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;padding-bottom:9px;border-bottom:1.5px dashed var(--ink2)}
.crate-hd .t{font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:1rem;color:var(--ink)}
.crate-hd .n{font-family:'Courier Prime',monospace;font-size:.72rem;color:var(--ink2)}
.crate-stack{display:flex;flex-direction:column;gap:8px}
.cass{border:2px solid var(--ink);background:var(--panel);padding:7px 9px;display:flex;flex-direction:column;gap:6px}
.cass .lab{font-family:'Courier Prime',monospace;font-size:.82rem;color:var(--ink2);border-bottom:1px solid var(--ink3);padding-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cass .win{display:flex;align-items:center;gap:10px}
.cass .reel{width:15px;height:15px;border:2px solid var(--ink);border-radius:50%;position:relative;flex:none}
.cass .reel::after{content:"";position:absolute;inset:4px;border:1.5px solid var(--ink2);border-radius:50%}
.cass .tape{flex:1;height:7px;background:repeating-linear-gradient(90deg,var(--ink3) 0 3px,transparent 3px 6px);opacity:.7}
.cass .dur{font-family:'Courier Prime',monospace;font-size:.7rem;color:var(--ink3)}
.crate-fade{margin-top:9px;text-align:center;font-family:'Courier Prime',monospace;font-size:.72rem;color:var(--ink2);letter-spacing:.04em}

/* taped photo print (screenshots) */
.print{position:relative;background:#fbfaf3;border:1px solid var(--ink);padding:9px 9px 12px;box-shadow:5px 6px 0 rgba(34,28,20,.5);max-width:290px;margin:0 auto}
.print::before,.print::after{content:"";position:absolute;top:-9px;width:64px;height:22px;background:rgba(214,196,150,.55);border:1px solid rgba(34,28,20,.18)}
.print::before{left:14px;transform:rotate(-4deg)}
.print::after{right:14px;transform:rotate(3deg)}
.print .cap{font-family:'Courier Prime',monospace;font-size:.72rem;color:var(--ink2);text-align:center;margin-top:8px}
.drop{position:relative;overflow:hidden;background:var(--panel2);aspect-ratio:9/19.5;display:grid;place-items:center;cursor:pointer;border:1px solid var(--ink3)}
.drop img{width:100%;height:100%;object-fit:cover;display:none}
.drop.has-img img{display:block}
.drop.has-img .ph{display:none}
.drop.drag{outline:2px dashed var(--t1);outline-offset:-5px}
.drop input{display:none}
.ph{text-align:center;padding:18px;color:var(--ink2)}
.ph .ico{display:inline-block;width:30px;height:30px;border:2px solid var(--ink);font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1.1rem;line-height:26px;margin-bottom:11px}
.ph .lbl{display:block;font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:.82rem;color:var(--ink)}
.ph .fn{display:block;font-family:'Courier Prime',monospace;font-size:.68rem;color:var(--t1);margin-top:8px;word-break:break-all}
.ph .what{display:block;font-family:'Courier Prime',monospace;font-size:.66rem;margin-top:5px;line-height:1.4;color:var(--ink2)}
.drop:hover .ph .ico{background:var(--ink);color:var(--paper)}

/* the gap — three channel strips */
.gap-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:clamp(34px,4vw,52px);align-items:stretch}
@media(max-width:760px){.gap-grid{grid-template-columns:1fr}}
.strip{border:2px solid var(--ink);background:var(--panel);padding:0 0 22px;box-shadow:4px 4px 0 var(--ink)}
.strip .top{padding:9px 16px;border-bottom:2px solid var(--ink);font-family:'Courier Prime',monospace;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.strip .top .led{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);background:var(--ink3)}
.strip .bd{padding:18px 16px 0}
.strip h3{font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.32rem;line-height:1.02;margin-bottom:9px}
.strip p{font-family:'Courier Prime',monospace;font-size:.92rem;color:var(--ink2);line-height:1.55}
.strip.cold{background:var(--panel2)}
.strip.cold .top{color:var(--ink2)}
.strip.warm{box-shadow:5px 5px 0 var(--t1)}
.strip.warm .top{background:var(--t1);color:#fff6ef;border-bottom-color:var(--ink)}
.strip.warm .top .led{background:#fff6ef;border-color:#fff6ef;animation:blink 1.4s steps(1) infinite}
.strip.warm h3{color:var(--ink)}
@keyframes blink{50%{opacity:.25}}

/* steps — the 4-track sheet */
.sheet{margin-top:clamp(34px,4vw,52px);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.lane{display:grid;grid-template-columns:64px 1fr 300px;gap:0;border-bottom:2px solid var(--ink);background:var(--panel)}
.lane:last-child{border-bottom:none}
.lane:nth-child(even){background:var(--panel2)}
.lane-no{border-right:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 6px}
.lane-no .big{font-family:'Saira Condensed',sans-serif;font-weight:900;font-size:2.1rem;line-height:.8;color:#fff6ef;width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--ink)}
.lane-no .tk{writing-mode:vertical-rl;font-family:'Courier Prime',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.lane-body{padding:24px 26px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.lane-body h3{font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1;margin-bottom:12px}
.lane-body p{font-family:'Courier Prime',monospace;font-size:.96rem;color:var(--ink);line-height:1.55;max-width:42ch}
.lane-body .pin{margin-top:14px;align-self:flex-start;font-family:'Courier Prime',monospace;font-size:.74rem;color:var(--ink2);border:1.5px solid var(--ink2);padding:4px 10px}
.lane-shot{padding:22px 26px 22px 0;display:flex;align-items:center;justify-content:center}
.lane-shot .print{max-width:210px}
.t1 .lane-no{background:var(--t1)} .t1 .lane-no .big{background:var(--t1)}
.t2 .lane-no{background:var(--t2)} .t2 .lane-no .big{background:var(--t2)} .t2 .lane-no .big{color:var(--ink)} .t2 .lane-no .tk{color:rgba(34,28,20,.7)}
.t3 .lane-no{background:var(--t3)} .t3 .lane-no .big{background:var(--t3)}
.t4 .lane-no{background:var(--t4)} .t4 .lane-no .big{background:var(--t4)}
.t1 .lane-no .tk,.t3 .lane-no .tk,.t4 .lane-no .tk{color:rgba(255,255,255,.8)}
@media(max-width:820px){
  .lane{grid-template-columns:52px 1fr}
  .lane-shot{grid-column:1 / -1;padding:0 22px 24px;justify-content:flex-start}
  .lane-no .tk{display:none}
}

/* engineering — service manual */
.manual{margin-top:clamp(32px,4vw,48px);border:2px solid var(--ink)}
.man-row{display:grid;grid-template-columns:200px 1fr;gap:0;border-bottom:2px solid var(--ink)}
.man-row:last-child{border-bottom:none}
.man-k{border-right:2px solid var(--ink);background:var(--panel2);padding:24px 18px;font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:.92rem;letter-spacing:.04em;color:var(--ink2);line-height:1.1}
.man-b{padding:24px 26px;background:var(--panel)}
.man-b h3{font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.02;margin-bottom:12px}
.man-b p{font-family:'Courier Prime',monospace;font-size:.94rem;color:var(--ink);line-height:1.55;max-width:56ch;margin-bottom:11px}
.man-b p:last-of-type{margin-bottom:0}
.note{margin-top:15px;border-left:4px solid var(--t1);background:rgba(210,64,43,.06);padding:11px 14px;max-width:56ch}
.note p{font-family:'Courier Prime',monospace;font-style:italic;font-size:.9rem;color:var(--ink2);margin:0;max-width:none}
@media(max-width:700px){.man-row{grid-template-columns:1fr}.man-k{border-right:none;border-bottom:2px solid var(--ink);padding:14px 18px}}

/* tools — function buttons */
.tools-head{display:grid;grid-template-columns:1fr 280px;gap:44px;align-items:center}
@media(max-width:820px){.tools-head{grid-template-columns:1fr}}
.tool-grid{margin-top:clamp(30px,4vw,46px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:720px){.tool-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.tool-grid{grid-template-columns:1fr}}
.fn{border:2px solid var(--ink);background:var(--panel);box-shadow:4px 4px 0 var(--ink);padding:0 18px 18px}
.fn .bar{height:8px;margin:0 -18px 16px;border-bottom:2px solid var(--ink)}
.fn .tk{font-family:'Courier Prime',monospace;font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.fn h4{font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.18rem;line-height:1;margin-bottom:7px}
.fn p{font-family:'Courier Prime',monospace;font-size:.86rem;color:var(--ink2);line-height:1.5}
.fn:nth-child(1) .bar{background:var(--t1)} .fn:nth-child(2) .bar{background:var(--t2)} .fn:nth-child(3) .bar{background:var(--t3)}
.fn:nth-child(4) .bar{background:var(--t4)} .fn:nth-child(5) .bar{background:var(--t1)} .fn:nth-child(6) .bar{background:var(--t2)}

/* reassurance + founder */
.assure{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.tag{font-family:'Courier Prime',monospace;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);border:2px solid var(--ink);padding:7px 13px;background:var(--panel)}
.liner{margin-top:40px;max-width:60ch;border:2px solid var(--ink);background:var(--panel);box-shadow:5px 5px 0 var(--t2);padding:22px 24px;position:relative}
.liner::before{content:"FROM THE BUILDER";position:absolute;top:-11px;left:18px;background:var(--paper);padding:0 8px;font-family:'Courier Prime',monospace;font-weight:700;font-size:.66rem;letter-spacing:.16em;color:var(--ink2)}
.liner p{font-family:'Courier Prime',monospace;font-size:1rem;line-height:1.62;color:var(--ink)}
.liner .by{margin-top:13px;font-size:.78rem;color:var(--ink2)}

/* close */
.close{text-align:left}
.close .h2{max-width:18ch;margin-bottom:24px}
.close .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.close .hero-note{margin-top:18px}

footer{border-top:2px solid var(--ink);padding:30px 0;background:var(--panel2)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:0 26px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-family:'Courier Prime',monospace;font-size:.76rem;color:var(--ink2)}
.foot-in a{color:var(--ink);text-decoration:none;margin-left:16px}
.foot-in a:hover{color:var(--t1)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}