/* Slow Reel Recorders (fictional). v4 type voice: STENCIL display (Stardos Stencil) + TYPEWRITER text (Special Elite),
   the lettering of flight cases, tape boxes and patch labels. Ground unchanged: tape box yellow + solid black hardware
   panels, red only as the record lamp / meter peak. Hardware is rendered as material (layered shadows, key travel,
   lit knob, glass on the VU): ui-ux-pro-max "Skeuomorphism"; photos carry film grain: "Vintage Analog / Retro Film".
   Skills applied + forbidden list: research/templates/studio/refs.md */
@font-face{font-family:"Stardos Stencil";src:url("../fonts/stardos-stencil-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Special Elite";src:url("../fonts/special-elite-400.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
  --y:#F2B705;--y-hi:#FFD84A;--y-lo:#B88A00;--ink:#17150F;--panel:#17150F;--well:#2A261A;--keycap:#4A4530;--lamp:#E8341F;
  --stencil:"Stardos Stencil","Rockwell","Courier New",serif;--type:"Special Elite","Courier New",monospace;
  /* type scale (rem, ratio about 1.25): caption .8125 / data .875 / body 1 / sub 1.25 / title 1.69 / display 2.1 */
  --t-cap:.8125rem;--t-data:.875rem;--t-body:1rem;--t-sub:1.25rem;--t-title:1.69rem;--t-disp:2.1rem;
  --pad:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--type);font-weight:400;font-synthesis:none;font-kerning:normal;font-size:var(--t-body);line-height:1.5;color:var(--ink);background:var(--y);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:3px solid var(--lamp);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.pr{font-family:var(--type);text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-cap);line-height:1}
h1,h2,.st-face{font-family:var(--stencil);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;text-wrap:balance}

/* ---------- header: black panel, stencilled wordmark ---------- */
.label{background:var(--y)}
.label-top{display:flex;align-items:center;justify-content:space-between;height:54px;background:var(--panel);color:var(--y);margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--stencil);font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:.02em;line-height:1;white-space:nowrap}
.mark svg{width:28px;height:28px;flex:none}
.book{font-family:var(--type);text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-cap);text-decoration:none;color:var(--y);border-bottom:2px solid var(--y);padding:3px 0 0;line-height:1.2;white-space:nowrap}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding-top:8px}
.fields div{display:flex;align-items:center;gap:7px;height:25px}
.fields .pr{background:var(--ink);color:var(--y);padding:6px 5px 3px}
.fields b{font-weight:400;font-size:var(--t-data);white-space:nowrap;padding-top:3px}

/* ---------- hero: meter bridge + transport on one black fascia ---------- */
.sheet{padding:12px 0 20px}
.sheet h1{font-size:clamp(1.95rem, 8.4vw, 2.1rem)}
.rack{margin-top:11px;background:var(--panel);padding:8px 8px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 5px 0 #000,0 10px 12px rgba(0,0,0,.25)}
.tracks{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.trk{background:var(--well);display:flex;flex-direction:column;align-items:center;box-shadow:inset 0 2px 3px rgba(0,0,0,.55)}
.trk .n{width:100%;text-align:center;padding:3px 0 2px;background:var(--y);color:var(--ink);font-family:var(--stencil);font-weight:700;font-size:var(--t-data);letter-spacing:.03em;line-height:1}
.trk .nm{width:100%;text-align:center;padding:7px 0 0;color:var(--y);font-size:.78rem;line-height:1;letter-spacing:.04em}
.trk .m{display:flex;flex-direction:column-reverse;gap:2px;padding:5px 0 6px;width:100%;align-items:center}
.trk .m i{display:block;width:60%;height:8px;background:#39341F}
.deck{margin-top:9px;display:flex;align-items:stretch;gap:8px}
.keys{display:flex;gap:6px;padding-bottom:4px}
.key{--dn:0;width:50px;height:44px;background:var(--keycap);display:grid;place-items:center;transform:translateY(calc(var(--dn) * 3px));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.28),0 calc(4px - var(--dn) * 3px) 0 #000,0 calc(7px - var(--dn) * 4px) 7px rgba(0,0,0,.4)}
.key svg{width:18px;height:18px;fill:var(--y)}
.key.play{background:var(--y)}.key.play svg{fill:var(--ink)}
.deck.is-playing .key.play{background:var(--y-lo)}
.counter{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 9px;background:#000;color:var(--y);margin-bottom:4px;box-shadow:inset 0 3px 5px rgba(0,0,0,.9),inset 0 0 0 1px #3a3524}
.counter .time{font-size:1.25rem;line-height:1;font-variant-numeric:tabular-nums;margin-top:5px;letter-spacing:.02em}
.counter .st{display:flex;align-items:center;gap:6px}
.lamp{width:9px;height:9px;border-radius:50%;background:var(--keycap);flex:none;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.deck.is-playing .lamp{background:var(--lamp);box-shadow:0 0 0 2px rgba(232,52,31,.35),0 0 8px rgba(232,52,31,.8)}
.vu{flex:none;width:94px;background:var(--y-hi);margin-bottom:4px;position:relative;box-shadow:inset 0 3px 6px rgba(0,0,0,.45),inset 0 0 0 2px #000}
.vu::after{content:"";position:absolute;left:8%;top:0;width:26%;height:100%;background:rgba(255,255,255,.22);transform:skewX(-24deg)}   /* glass reflection */
.vu svg{display:block;width:100%;height:100%}

/* ---------- rooms: black panel section ---------- */
.rooms{background:var(--panel);color:var(--y);padding:24px 0 26px}
h2{font-size:clamp(1.56rem, 6.7vw, 2.5rem)}
.note{margin-top:8px;max-width:38ch;line-height:1.55}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px;padding-bottom:9px}
.seg button{height:42px;background:var(--keycap);color:var(--y);display:flex;align-items:center;gap:6px;padding:2px 6px 0;font-family:var(--stencil);font-weight:700;text-transform:uppercase;font-size:var(--t-data);letter-spacing:.03em;white-space:nowrap;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.3),0 3px 0 #000}
.seg button u{text-decoration:none;display:grid;place-items:center;width:19px;height:19px;background:var(--y);color:var(--ink);font-size:var(--t-data);flex:none;margin-top:-2px}
.seg button.is-on{background:var(--y);color:var(--ink);box-shadow:inset 0 2px 3px rgba(0,0,0,.35),0 1px 0 #000;transform:translateY(2px)}
.seg button.is-on u{background:var(--ink);color:var(--y)}
.seg .thumb{position:absolute;left:0;bottom:0;height:4px;width:calc((100% - 12px) / 3);background:var(--lamp)}
.room{margin-top:8px}
.room-shot{margin:0 calc(var(--pad) * -1)}
.room-photo{position:relative;aspect-ratio:390/176;overflow:hidden;background:#000}
.room-photo .imgs{position:absolute;inset:0}
.room-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0)}
.room-photo img.is-on{clip-path:inset(0 0 0 0)}
.room-photo .edge{position:absolute;top:0;bottom:0;width:5px;background:var(--y);left:0;opacity:0}
.room-tag{background:var(--y);color:var(--ink);padding:8px var(--pad) 3px;font-size:var(--t-data);line-height:1.1;white-space:nowrap;overflow:hidden}
.room-info{margin-top:11px}
.room-name{font-family:var(--stencil);font-weight:700;text-transform:uppercase;font-size:var(--t-sub);line-height:1.1;letter-spacing:.01em}
.inputs{width:100%;border-collapse:separate;border-spacing:0 3px;margin-top:4px;font-size:var(--t-data)}
.inputs th{font-family:var(--type);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-cap);text-align:left;padding:3px 0 0 8px;color:var(--y-lo)}
.inputs td{padding:7px 0 1px 8px;background:var(--well);white-space:nowrap;line-height:1.2}
.inputs td:first-child{width:34px;background:var(--y);color:var(--ink);padding-left:0;text-align:center;font-family:var(--stencil);font-weight:700;letter-spacing:.03em}
.inputs th:first-child{width:34px;padding-left:0;text-align:center}
.inputs td:nth-child(2){width:36%;text-transform:uppercase;letter-spacing:.08em}

/* ---------- board tape band ---------- */
.band{background:#000}
.band-shot{overflow:hidden;position:relative}
.band img{width:100%;height:230px;object-fit:cover}
.tape{position:absolute;left:-6px;right:8px;top:34px;transform:rotate(-2.2deg);background:var(--y);color:var(--ink);height:38px;display:flex;align-items:center;justify-content:space-around;font-family:var(--stencil);font-weight:700;text-transform:uppercase;font-size:var(--t-data);letter-spacing:0;box-shadow:0 3px 0 rgba(0,0,0,.6),0 8px 10px rgba(0,0,0,.4)}
.tape span{border-left:3px solid var(--ink);padding:3px 0 0 5px;flex:1;margin-left:4px}
.band p{color:var(--y);padding:12px var(--pad) 16px;max-width:44ch;line-height:1.55}

/* ---------- sessions: yellow ground, black selector panel, black note strips ---------- */
.sessions{padding:26px 0 64px}
.sel{position:relative;margin-top:12px;display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center;background:var(--panel);padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 5px 0 #000,0 10px 12px rgba(0,0,0,.25)}
.knob{position:relative;width:118px;height:118px}
.knob .ring{position:absolute;inset:0;border-radius:50%;border:2px dashed var(--y-lo)}
.knob .cap{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 34% 28%,var(--y-hi) 0 18%,var(--y) 52%,#D49E00 100%);
  box-shadow:inset 0 -4px 6px rgba(0,0,0,.28),inset 0 2px 2px rgba(255,255,255,.5),0 5px 0 #000,0 9px 10px rgba(0,0,0,.55)}
.knob .ptr{position:absolute;inset:14px;border-radius:50%}
.knob .ptr::after{content:"";position:absolute;left:50%;top:5px;width:7px;height:32px;margin-left:-3.5px;background:var(--ink)}
.chips{display:grid;gap:7px}
.chips button{height:33px;display:flex;align-items:center;gap:9px;padding:2px 9px 0;background:var(--keycap);color:var(--y);font-family:var(--stencil);font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:.03em;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.3),0 3px 0 #000}
.chips button::before{content:"";width:9px;height:9px;border-radius:50%;background:#17150F;margin-top:-2px;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.chips button.is-on{background:var(--y);color:var(--ink);box-shadow:inset 0 2px 3px rgba(0,0,0,.35),0 1px 0 #000;transform:translateY(2px)}
.chips button.is-on::before{background:var(--lamp);box-shadow:0 0 6px rgba(232,52,31,.9)}
.panel{margin-top:16px}
.panel-head{font-family:var(--stencil);font-weight:700;text-transform:uppercase;font-size:var(--t-sub);line-height:1.1;min-height:1.4rem;letter-spacing:.01em}
.panel-len{margin-top:3px;font-size:var(--t-data);min-height:1.3rem;line-height:1.3}
.steps{list-style:none;margin-top:5px;display:grid;gap:3px}
.steps li{display:flex;align-items:center;background:var(--panel);color:var(--y);font-size:var(--t-data);height:30px;white-space:nowrap}
.steps li em{padding:5px 0 0 9px}
.steps li span{font-family:var(--stencil);font-weight:700;font-size:var(--t-data);letter-spacing:.03em;padding-top:2px;flex:none;width:30px;height:30px;display:grid;place-items:center;background:var(--well);color:var(--y);border-right:3px solid var(--y)}

/* ---------- visit: black panel + footer on yellow ---------- */
.visit{background:var(--panel);color:var(--y);padding:28px 0 32px}
.visit p{margin-top:10px;max-width:38ch;line-height:1.55}
.cta{display:inline-flex;align-items:center;height:50px;padding:3px 20px 0;background:var(--y);color:var(--ink);font-family:var(--stencil);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.25rem;text-decoration:none;margin-top:16px;white-space:nowrap;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.2),0 4px 0 #000,0 8px 9px rgba(0,0,0,.4)}
.cta:active{transform:translateY(3px);box-shadow:inset 0 2px 3px rgba(0,0,0,.3),0 1px 0 #000}
.facts{margin-top:24px;display:grid;gap:3px}
.facts div{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--well);padding:0 9px 0 0;height:32px;font-size:var(--t-data);white-space:nowrap}
.facts dt{background:var(--y);color:var(--ink);height:100%;display:grid;place-items:center;width:62px;flex:none;padding-top:3px}
.facts dd{padding-top:4px}
footer{background:var(--y);color:var(--ink);padding:18px 0 26px;font-size:var(--t-data);line-height:1.55}
footer p{max-width:70ch}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- desktop ---------- */
@media (min-width:900px){
  :root{--pad:48px}
  .label{position:relative}
  .label::before{content:"";position:absolute;left:0;right:0;top:0;height:68px;background:var(--panel)}
  .label-top{position:relative;height:68px;margin:0;padding:0;background:none}.mark{font-size:var(--t-title)}.mark svg{width:34px;height:34px}.book{font-size:var(--t-data)}
  .fields{grid-template-columns:repeat(4,1fr)}
  .sheet{padding:44px 0 64px}
  .sheet h1{font-size:clamp(3rem, 5.6vw, 4.6rem)}
  .rack{margin-top:28px;padding:14px;max-width:760px}.trk .m i{height:10px}.trk .n{font-size:1rem}.trk .nm{font-size:.875rem}
  .rooms,.visit{padding:64px 0}.sessions{padding:64px 0 80px}
  .seg{max-width:560px}.seg button{font-size:1rem}
  .room{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start;margin-top:18px}
  .room-shot{margin:0}.room-photo{aspect-ratio:16/10}.room-tag{padding-left:12px}
  .room-info{margin-top:0}.room-name{font-size:2.1rem}.inputs{font-size:1rem}.inputs td{padding:11px 0 5px 12px}
  .band img{height:440px}.tape{top:70px;height:56px;font-size:var(--t-title);right:-6px}.band p{padding:18px var(--pad) 22px;max-width:60ch;margin:0 auto;text-align:center}
  .note,.visit p{font-size:1.125rem;max-width:48ch}
  .sess-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .sel{max-width:460px}.panel{margin-top:0}.panel-head{font-size:2.1rem;min-height:2.4rem}.steps li{font-size:1rem;height:40px}.steps li span{width:40px;height:40px}
  .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end}
  .facts div{font-size:1rem;height:40px}
}