:root{
  --ink:#0b0a09; --ink-2:#14120f; --paper:#ede8df; --paper-dim:rgba(237,232,223,.62); --line:rgba(237,232,223,.18);
  --amber:#e9a54b; --oxblood:#a3261a; --tungsten:#f3d9a8; --accent:var(--amber);
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,56px);
  --ease-tape:cubic-bezier(.7,0,.2,1);
  --grain:.085;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--paper);-webkit-font-smoothing:antialiased;scroll-behavior:auto;overscroll-behavior-y:none}
body{background:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.4;overflow-x:hidden}
img,video,svg{display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--ink)}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.9}
.serif{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em;font-weight:400}
.h2{font-size:clamp(44px,8.2vw,132px)}
.body{font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.25;max-width:22em}
.kicker{color:var(--accent);margin-bottom:18px;transition:color .6s}

/* ---------- texture ---------- */
.grain-defs{position:absolute}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:90;opacity:var(--grain);mix-blend-mode:overlay;animation:grain .5s steps(6) infinite}
.grain svg{width:100%;height:100%}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(-2%,6%)}}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:89;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
.dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:88;opacity:.55}

/* ---------- top bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:18px var(--gutter);pointer-events:none}
.topbar>*{pointer-events:auto}
.topbar-logo img{height:26px;width:auto;opacity:.92}
.topbar-nav{display:flex;gap:26px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.topbar-nav a{text-decoration:none;color:var(--paper-dim);transition:color .2s}
.topbar-nav a:hover{color:var(--paper)}
.topbar-cta{border:1px solid var(--line);padding:9px 14px;color:var(--paper)!important}
.topbar-cta:hover{border-color:var(--accent);background:var(--accent);color:var(--ink)!important}
@media (max-width:640px){.topbar-nav a:not(.topbar-cta){display:none}}

/* ---------- hero (opening frame of the compressor) ---------- */
.hero{display:flex;flex-direction:column;gap:10px;top:clamp(64px,8vh,100px)}
.hero-logo img{width:clamp(200px,23vw,380px);height:auto;filter:drop-shadow(0 4px 30px rgba(0,0,0,.6))}
.hero-tag{font-size:clamp(26px,3.6vw,56px);text-shadow:0 2px 24px rgba(0,0,0,.7)}
.hero-sub{color:var(--paper-dim)}
.topbar-logo{transition:opacity .4s}
body.at-hero .topbar-logo{opacity:0;pointer-events:none}
.rec{position:absolute;z-index:3;bottom:clamp(84px,12vh,120px);left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;color:var(--paper-dim)}
.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--oxblood);box-shadow:0 0 10px var(--oxblood);animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

/* ---------- chapters ---------- */
.chapter{position:relative;height:var(--len)}
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);height:max(100vh,56.25vw);transform:translate(-50%,-50%);will-change:transform}
.stage .film,.stage .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.still-end{opacity:0}
.film-dissect{opacity:0}
.shade{position:absolute;pointer-events:none}
.shade-top{inset:0 0 auto 0;height:38%;background:linear-gradient(rgba(11,10,9,.78),transparent)}
.shade-left{inset:0 auto 0 0;width:52%;background:linear-gradient(90deg,rgba(11,10,9,.82),rgba(11,10,9,.35) 60%,transparent)}
.shade-bottom{inset:auto 0 0 0;height:46%;background:linear-gradient(transparent,rgba(11,10,9,.88))}
.copy{position:absolute;z-index:3;padding:0 var(--gutter)}
.sticky .h2,.sticky .body,.sticky .silk{text-shadow:0 2px 24px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.5)}
.copy-top{top:clamp(80px,12vh,140px);left:0}
.copy-right{left:auto;right:0;text-align:right}
.copy-left{top:clamp(84px,13vh,150px);left:0;width:min(48vw,680px)}
.copy-left .h2{position:absolute;left:var(--gutter);right:0;top:1.2em;font-size:clamp(40px,6vw,100px)}
.copy-left .woofer-h-c{font-size:clamp(34px,4.4vw,70px);right:auto;width:min(34vw,500px)}
.copy-left .kicker{position:relative}
.copy-bottom{position:absolute;z-index:3;left:var(--gutter);bottom:clamp(90px,14vh,150px)}
[data-reveal]{opacity:0;transform:translateY(24px)}
.silk{position:absolute;z-index:3;left:50%;bottom:clamp(96px,15vh,160px);transform:translateX(-50%);display:flex;gap:clamp(14px,3vw,48px);list-style:none;color:var(--paper)}
.silk li span{display:block;color:var(--accent);margin-bottom:6px}
#compressor .copy-bottom{left:auto;right:var(--gutter);text-align:right;bottom:clamp(160px,26vh,260px)}
.meter-glow{position:absolute;left:47.75%;top:54.2%;width:22%;height:36%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,176,82,.55),rgba(255,140,50,.12) 55%,transparent 75%);mix-blend-mode:screen;opacity:0;pointer-events:none}

/* schematic */
.schematic{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.schematic .lead{fill:none;stroke:var(--paper);stroke-width:1.2;opacity:.9}
.schematic .tick{fill:var(--accent)}
.schematic .lbl{font-family:var(--mono);font-size:15px;letter-spacing:.14em;fill:var(--paper);text-transform:uppercase}
.schematic .lbl tspan.n{fill:var(--accent)}
.schematic .gloss{font-family:var(--serif);font-style:italic;font-size:17px;fill:var(--paper-dim)}
.schematic .dim{stroke:var(--accent);stroke-width:1;fill:none;stroke-dasharray:3 5;opacity:.7}
.schematic .part{opacity:0}
.schematic .dot{fill:var(--accent)}
.schematic .dotn{font-family:var(--mono);font-size:13px;fill:var(--ink);text-anchor:middle;dominant-baseline:central;font-weight:700}
.legend{display:none}
.titleblock{position:absolute;z-index:3;left:var(--gutter);bottom:clamp(90px,13vh,140px);display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:rgba(11,10,9,.55);backdrop-filter:blur(3px)}
.titleblock div{padding:8px 12px;border:1px solid var(--line);font-size:10px}
.titleblock span{display:block;color:var(--accent);font-size:9px;margin-bottom:3px}

/* tape counter */
.tape-counter{position:absolute;z-index:3;left:50%;bottom:clamp(96px,15vh,150px);transform:translateX(-50%);display:flex;gap:12px;align-items:baseline;padding:10px 16px;border:1px solid var(--line);background:rgba(11,10,9,.6)}
.tc-label{color:var(--accent)}
.tc-num{font-size:20px;letter-spacing:.12em;color:var(--paper);min-width:5.2ch;text-align:right}
.tc-dir{color:var(--amber);width:1.2em}
#tape .copy-bottom{bottom:clamp(160px,22vh,220px);max-width:20em}

/* ---------- sections ---------- */
.section-head{padding:0 var(--gutter);margin-bottom:clamp(36px,6vw,80px)}
.work,.chain,.contact{position:relative;padding:clamp(120px,18vh,200px) 0 clamp(80px,12vh,140px)}
.work{background:linear-gradient(var(--ink),var(--ink-2) 30%,var(--ink))}

/* work grid — big preview cards */
.reel-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,36px);padding:0 var(--gutter)}
.reel{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer}
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05) brightness(.8);transition:filter .4s,transform 1s var(--ease-tape)}
.thumb iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity .4s}
.thumb.is-playing iframe{opacity:1}
.thumb::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(0,0,0,.55)}
.thumb-tc{position:absolute;z-index:2;left:14px;top:12px;color:var(--paper);opacity:.8}
.thumb-play{position:absolute;z-index:2;right:14px;bottom:12px;color:var(--paper);padding:7px 11px;border:1px solid rgba(237,232,223,.4);background:rgba(11,10,9,.45);transition:opacity .3s,background .3s,color .3s}
.reel:hover .thumb img,.reel:focus-visible .thumb img{filter:none;transform:scale(1.03)}
.reel:hover .thumb-play,.reel:focus-visible .thumb-play{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.thumb.is-playing .thumb-play{opacity:.9}
.reel:focus-visible{outline:1px solid var(--amber);outline-offset:6px}
.reel-meta{display:flex;align-items:baseline;gap:14px;padding:14px 2px 0;border-bottom:1px solid var(--line);padding-bottom:12px}
.reel-meta .brand{font-family:var(--display);font-size:clamp(24px,2.6vw,40px);text-transform:uppercase;line-height:1}
.reel-meta .title{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.8vw,26px);color:var(--paper-dim)}
.reel-meta .len{margin-left:auto;color:var(--paper-dim)}
.reel:hover .reel-meta .len{color:var(--amber)}
@media (max-width:760px){.reel-grid{grid-template-columns:1fr}}

/* contact slip */
.slip{position:relative;margin:0 auto;width:min(860px,calc(100% - 2*var(--gutter)));background:var(--paper);color:var(--ink);padding:clamp(22px,4vw,48px);transform:rotate(-1.2deg);box-shadow:0 30px 80px rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.2);
  -webkit-mask:linear-gradient(#000,#000) content-box,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/14px 100% repeat-x;
  -webkit-mask-composite:source-over;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/14px 100% repeat-x}
.slip::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 31px,rgba(11,10,9,.07) 31px 32px);mix-blend-mode:multiply}
.slip-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:22px}
.slip-head img{height:clamp(34px,5vw,54px);width:auto}
.slip-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:10px}
.slip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(11,10,9,.5)}
.slip-grid label{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid rgba(11,10,9,.35)}
.slip-grid label.full{grid-column:1/-1}
.slip-grid .mono{font-size:9.5px;color:rgba(11,10,9,.62)}
.slip input,.slip select,.slip textarea{font-family:var(--serif);font-size:21px;border:0;background:transparent;color:var(--ink);outline:none;width:100%;resize:vertical}
.slip input:focus,.slip select:focus,.slip textarea:focus{background:rgba(163,38,26,.06)}
.btn{margin-top:24px;display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);border:0;padding:16px 26px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;transition:background .2s,transform .15s}
.btn:hover{background:var(--oxblood)}
.btn:active{transform:translateY(1px)}
.slip-note{margin-top:14px;font-size:10px;color:var(--oxblood);min-height:1em}
@media (max-width:640px){.slip-grid{grid-template-columns:1fr 1fr}.slip-grid label:nth-child(3){grid-column:1/-1}.slip{transform:rotate(-.6deg)}}

.footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:40px var(--gutter) 110px;color:var(--paper-dim);border-top:1px solid var(--line)}

/* ---------- transport ---------- */
.transport{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;align-items:center;gap:20px;padding:14px var(--gutter);background:linear-gradient(transparent,rgba(11,10,9,.85) 45%)}
.transport-track{position:relative;flex:1;height:22px}
.transport-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.transport-fill{position:absolute;left:0;top:50%;height:1px;background:var(--accent);width:0;transition:background .6s}
.transport-track a{position:absolute;top:0;transform:translateX(-50%);text-decoration:none;color:var(--paper-dim);display:flex;flex-direction:column;align-items:center}
.transport-track a i{width:7px;height:7px;margin-top:7px;background:var(--ink);border:1px solid var(--paper-dim);transform:rotate(45deg);transition:all .3s}
.transport-track a b{font-weight:400;font-size:9px;margin-top:4px;opacity:0;transition:opacity .2s}
.transport-track a:hover b,.transport-track a.on b{opacity:1}
.transport-track a.on i{background:var(--accent);border-color:var(--accent)}
.transport-tc{color:var(--paper);min-width:9ch;text-align:right}
@media (max-width:640px){.transport-tc{display:none}.transport{gap:12px}}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:150;background:rgba(5,5,4,.92);display:grid;place-items:center;padding:var(--gutter)}
.modal[hidden]{display:none}
.modal-inner{width:min(1200px,100%);position:relative}
.modal-frame{position:relative;aspect-ratio:16/9;background:#000}
.modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal-close{position:absolute;right:0;top:-34px;background:none;border:0;color:var(--paper)}
body.modal-open .grain{z-index:160;opacity:.05}

/* ---------- accents per chapter ---------- */
body[data-accent=oxblood]{--accent:#d0432f}
body[data-accent=tungsten]{--accent:var(--tungsten)}

/* ---------- mobile schematic ---------- */
@media (max-width:820px),(max-aspect-ratio:1/1){
  .schematic .lbl,.schematic .gloss,.schematic .lead,.schematic .tick{display:none}
  .legend{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);bottom:84px;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;list-style:none;font-size:9.5px;opacity:0;padding:12px;background:rgba(11,10,9,.72);border:1px solid var(--line)}
  .legend b{color:var(--accent);font-weight:400;margin-right:6px}
  .titleblock{display:none}
  .stage-woofer{height:84vh;width:149.3vh;top:57%}
  .copy-left{width:100%;top:clamp(76px,11vh,120px)}
  .copy-left .h2{top:1.6em;font-size:clamp(38px,11vw,64px)}
  .copy-left .woofer-h-c{font-size:clamp(28px,8vw,44px);width:calc(100% - 2*var(--gutter))}
  .shade-left{width:100%;height:46%;background:linear-gradient(rgba(11,10,9,.85),transparent)}
  .silk{flex-wrap:wrap;justify-content:center;width:calc(100% - 2*var(--gutter));gap:14px 22px}
  #compressor .copy-bottom{left:var(--gutter);right:var(--gutter);text-align:left;bottom:clamp(190px,30vh,280px)}
  .hero-logo img{width:min(64vw,320px)}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
}

/* ---------- monochrome toggle ---------- */
.mono-toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);color:var(--paper-dim);padding:7px 11px;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:border-color .2s,color .2s}
.mono-toggle:hover{color:var(--paper);border-color:var(--paper-dim)}
.mt-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--paper) 50%,#3a3733 50%);box-shadow:0 0 0 1px var(--paper-dim)}
.mono-toggle[aria-pressed=true]{color:var(--paper);border-color:var(--paper)}
body.is-mono{--amber:#d9d4cb;--oxblood:#8a8680;--tungsten:#e8e4dc;--accent:#e8e4dc}
body.is-mono[data-accent]{--accent:#e8e4dc}
body.is-mono .stage,body.is-mono .thumb,body.is-mono .modal-frame,body.is-mono .slip-head img{filter:grayscale(1) contrast(1.08)}
body.is-mono .meter-glow{filter:grayscale(1)}
body.is-mono .rec-dot{background:var(--paper);box-shadow:none}
.stage,.thumb{transition:filter .6s}

/* direct email */
.contact-direct{text-align:center;margin-top:48px;color:var(--paper-dim)}
.contact-direct a,.footer .email-link{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;transition:color .2s}
.contact-direct a:hover,.footer .email-link:hover{color:var(--accent)}
.footer .email-link{color:var(--paper-dim);border-bottom-color:var(--line)}

/* form states */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn[disabled]{opacity:.6;pointer-events:none}
.slip.is-sent .slip-grid,.slip.is-sent .btn,.slip.is-sent .slip-note{display:none}
.slip-done{padding:28px 0 10px}
.slip-done-h{font-size:clamp(34px,5vw,64px);color:var(--ink)}
.slip-done-sub{margin-top:12px;font-size:10px;color:rgba(11,10,9,.6)}