/* ============================================================
   SOOT STUDIO — animaton-e-house stylesheet (1934)
   Flat ink & paper only: no blur, no glass, no colour slops.
   ============================================================ */
:root{
  --paper:#f0e5cc;  --paper2:#e8dab8;  --cream:#f7f0dd;
  --ink:#211a12;    --red:#c23b22;     --gold:#d9a441;  --teal:#48766b;
  --rail:78px;
  --sh:6px 6px 0 var(--ink);
  --bezier:cubic-bezier(.34,1.56,.44,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Special Elite","Courier New",monospace;
  font-size:16px;line-height:1.55;
  overflow:hidden;                       /* film never rolls vertically */
  /* the dip pen rides the pointer everywhere; hotspot sits on the nib tip */
  cursor:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><line x1='9.5' y1='9.5' x2='26' y2='26' stroke='%23f7f0dd' stroke-width='8' stroke-linecap='round'/><line x1='9.5' y1='9.5' x2='26' y2='26' stroke='%23211a12' stroke-width='5' stroke-linecap='round'/><line x1='17.8' y1='24.2' x2='24.2' y2='17.8' stroke='%23c23b22' stroke-width='2.6'/><path d='M2 2 L12.5 6.5 L6.5 12.5 Z' fill='%23211a12' stroke='%23f7f0dd' stroke-width='1.3'/><circle cx='9.4' cy='9.4' r='1.4' fill='%23f7f0dd'/></svg>") 2 2, crosshair;
}
img{display:block;max-width:100%;-webkit-user-drag:none}
a{color:inherit;text-decoration:none;cursor:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:inherit}
::selection{background:var(--red);color:var(--cream)}

/* ---------- film grain (feTurbulence, not a gradient) ---------- */
.grain{
  position:fixed;inset:-50%;z-index:120;pointer-events:none;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-2%)}75%{transform:translate(-2%,-4%)}100%{transform:translate(0,0)}
}

/* ============================================================
   SIDE RAIL — the header stands up on the left
   ============================================================ */
.rail{
  position:fixed;top:0;bottom:0;left:0;width:var(--rail);z-index:500;
  background:var(--ink);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;
  border-right:4px solid var(--red);
  overflow:hidden;                          /* never spill, never squeeze */
}
.rail-logo{flex-shrink:0}
.rail::after{
  content:"";position:absolute;right:-11px;top:0;bottom:0;width:4px;
  background:repeating-linear-gradient(180deg,var(--ink) 0 10px,transparent 10px 20px);
}
.rail-logo{
  width:54px;height:54px;margin:10px 0 6px;border-radius:50%;background:var(--cream);
  color:var(--ink);display:grid;place-items:center;
  font-family:"Bevan",serif;font-size:20px;border:3px solid var(--red);
  transition:transform .35s var(--bezier);
}
.rail-logo:hover{transform:rotate(-14deg) scale(1.12)}
.rail-nav{
  flex:1 1 auto;width:100%;display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:12px 0;min-height:0;
  overflow-y:auto;scrollbar-width:none;     /* extreme short windows: nav scrolls */
}
.rail-nav::-webkit-scrollbar{display:none}
.rail-nav a{
  position:relative;display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:#cfc4a6;padding:4px 6px;
  transform:rotate(180deg);
  transition:transform .3s var(--bezier),color .2s;
}
.rail-nav a i{
  font-style:normal;font-size:10px;color:var(--red);border:1px solid var(--red);
  padding:2px 1px;border-radius:50%;
}
.rail-nav a::before{
  content:"";position:absolute;top:-3px;bottom:-3px;right:-7px;width:4px;border-radius:2px;
  background:var(--red);transform:scaleY(0);transition:transform .25s var(--bezier);
}
.rail-nav a:hover{color:var(--cream);transform:rotate(180deg) translateX(4px)}
.rail-nav a:hover::before{transform:scaleY(1)}
.rail-nav a.is-active{color:var(--cream);border:2px solid #5a4f3d;border-radius:6px}
.rail-nav a.is-active i{background:var(--red);color:var(--cream)}
.rail-tail{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:10px 0 14px;
}
.rail-reel{
  writing-mode:horizontal-tb;transform:none;
  font-size:9px;letter-spacing:.1em;white-space:nowrap;color:#cfc4a6;
}
.rail-reel i{font-style:normal;color:var(--red)}
.rail-pinky{
  position:relative;width:36px;height:36px;border-radius:50%;
  border:2px dashed #8a7a5f;background:var(--paper2);
  overflow:hidden;opacity:.42;pointer-events:auto;cursor:pointer;
  transition:opacity .3s,transform .3s var(--bezier),border-color .2s;
}
.rail-pinky.on{opacity:1;border-color:var(--red);animation:pinkySpin 2.4s linear infinite}
.rail-pinky img{width:120%;height:120%;object-fit:contain}
.rail-pinky:hover{transform:scale(1.25) rotate(12deg);border-color:var(--red)}
@keyframes pinkySpin{to{transform:rotate(360deg)}}

/* ============================================================
   TRACK & PANELS
   ============================================================ */
.track{
  position:fixed;top:0;left:var(--rail);bottom:0;right:0;
  display:flex;will-change:transform;touch-action:none;cursor:grab;
}
.track.is-drag{cursor:grabbing}
.panel{
  position:relative;flex:0 0 auto;width:100%;height:100%;
  padding:96px 84px 120px 72px;
  border-right:4px dashed var(--ink);
  overflow-x:hidden;overflow-y:auto;      /* vertical roll inside the reel */
  display:flex;flex-direction:column;
  scrollbar-color:var(--red) var(--paper2);scrollbar-width:thin;
}
.panel-wide{width:100%;background:var(--paper2)}
.panel--work{width:max-content;background:var(--paper2)}
.panel-no{
  position:absolute;top:26px;right:34px;right:112px;z-index:2;text-align:right;
  font-family:"Bevan",serif;font-size:44px;line-height:.85;color:transparent;
  -webkit-text-stroke:2px var(--ink);
}
.panel-no em{
  display:block;margin-top:4px;font-family:"Special Elite",monospace;font-style:normal;
  font-size:11px;letter-spacing:.3em;color:var(--red);-webkit-text-stroke:0;
}
.p-head{position:relative;z-index:3}
.p-title{
  font-family:"Bevan",serif;font-size:clamp(40px,6.2vw,72px);line-height:1;
  text-transform:uppercase;text-shadow:4px 4px 0 var(--red);
}
.p-title small{
  display:block;font-family:"Limelight",serif;font-size:.46em;letter-spacing:.18em;
  margin-top:10px;text-shadow:none;
}
.p-lede{margin-top:16px;max-width:56ch;font-size:15px}

/* --- reveal on scroll (tilt keeps landing on its own tilt) --- */
.rv{
  opacity:0;transform:translateY(26px) rotate(var(--tilt,0deg)) scale(.97);
  transition:opacity .5s var(--bezier) var(--d,0s),transform .55s var(--bezier) var(--d,0s);
}
.rv.is-in{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg)) scale(1)}

/* ---------- living characters ---------- */
.anim-bob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-13px) rotate(-2deg)}70%{transform:translateY(-3px) rotate(1.5deg)}}
.anim-march{animation:march .62s steps(2) infinite}
@keyframes march{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-7px) rotate(2.5deg)}
  100%{transform:translateY(0) rotate(0)}
}
.anim-float{animation:floaty 3.4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
.anim-blink{animation:blink 5s steps(1) infinite}
@keyframes blink{0%,41%,61%,100%{filter:none}45%,55%{filter:brightness(1.25)}}

/* ============================================================
   01 MAIN
   ============================================================ */
.panel--main{justify-content:center}
.hero{position:relative;z-index:3;max-width:620px}
.hero-kicker{font-size:13px;letter-spacing:.5em;color:var(--red);text-transform:uppercase}
.hero-title{margin:14px 0 18px;font-family:"Bevan",serif;line-height:.9;text-transform:uppercase}
.hero-soot{display:block;font-size:clamp(84px,14vw,180px)}
.hero-band{
  display:inline-block;margin-top:10px;background:var(--ink);color:var(--cream);
  font-family:"Limelight",serif;font-size:clamp(20px,3.4vw,32px);
  letter-spacing:.5em;padding:10px 26px 6px 36px;transform:rotate(-1.2deg);
}
.hero-tag{max-width:46ch;font-size:16px}
.hero-cta{margin-top:30px;display:flex;gap:18px;flex-wrap:wrap}
.hero-cast{
  position:absolute;right:16px;bottom:96px;width:min(420px,36vw);z-index:2;
  display:flex;align-items:flex-end;justify-content:center;gap:14px;
}
.cast-cup{width:52%;flex:0 0 52%}
.cast-mug{position:static;width:38%;flex:0 0 38%;margin-bottom:2px}
.hero-stamp{position:absolute;top:-30px;right:-6px;width:118px;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-cue{
  position:absolute;bottom:16px;left:84px;display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.34em;z-index:4;
}
.cue-line{width:70px;height:12px;border:2px solid var(--ink);position:relative;overflow:hidden}
.cue-line::after{
  content:"";position:absolute;top:1px;bottom:1px;left:-16px;width:10px;background:var(--red);
  animation:cue 1.6s linear infinite;
}
@keyframes cue{to{left:100%}}
.ticker{
  position:absolute;left:0;right:0;bottom:52px;border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);background:var(--ink);color:var(--cream);
  overflow:hidden;z-index:4;
}
.ticker-strip{
  display:flex;width:max-content;white-space:nowrap;
  font-family:"Limelight",serif;font-size:15px;letter-spacing:.24em;
  padding:10px 0;animation:tick 22s linear infinite;
}
@keyframes tick{to{transform:translateX(-50%)}}

/* page-entry stagger (plays after ink curtain) */
.enter-stage .rv{transition-delay:calc(var(--d,0s) + .1s)}

/* ============================================================
   02 WORK — showreel of real studio pictures
   ============================================================ */
.work-ribbon{display:flex;align-items:flex-start;gap:36px;margin-top:50px;padding:24px 0 10px;position:relative;z-index:3;width:100%}
.film{
  position:relative;flex:1 1 288px;max-width:420px;min-width:250px;
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  transform:rotate(var(--tilt,0deg));transition:transform .38s var(--bezier),box-shadow .3s;
  padding:14px 14px 16px;
}
.film:nth-child(odd){margin-top:30px}
.film:nth-child(even){margin-top:64px}
.film:hover{transform:rotate(0) translateY(-12px);box-shadow:10px 12px 0 var(--ink);z-index:5}
.film-frame{position:relative;border:2px solid var(--ink);aspect-ratio:16/9;background:var(--paper);overflow:hidden}
.film-frame img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--bezier)}
.film:hover .film-frame img{transform:scale(1.07)}
.film-play{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;background:var(--red);border:3px solid var(--ink);
  display:grid;place-items:center;color:var(--cream);font-size:18px;
  box-shadow:3px 3px 0 var(--ink);
  opacity:.92;transition:transform .3s var(--bezier);
}
.film:hover .film-play{transform:scale(1.18) rotate(-8deg)}
.film-title{margin-top:14px;font-family:"Limelight",serif;font-size:17px;line-height:1.25}
.film-kind{margin-top:6px;font-size:12px;color:var(--red)}
.film-studio{margin-top:4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5a4f3d}
.film-badge{
  position:absolute;top:-12px;left:-10px;background:var(--gold);border:2px solid var(--ink);
  font-size:10px;letter-spacing:.14em;padding:3px 8px;transform:rotate(-7deg);
}
.film .stamp{
  position:absolute;top:6px;right:6px;padding:7px 9px;border:3px solid var(--red);
  border-radius:50%;color:var(--red);font-family:"Bevan",serif;font-size:12px;
  transform:rotate(-14deg) scale(0);opacity:0;background:var(--paper);transition:.28s var(--bezier);
}
.film:hover .stamp{transform:rotate(-10deg) scale(1);opacity:1}
.film--vault{background:var(--ink);color:var(--cream)}
.film--vault .film-kind{color:var(--gold)}
.film--vault .film-studio{color:#b3a88d}
.film--vault .film-title{color:var(--cream)}
.card-video{width:100%;aspect-ratio:16/9;background:var(--ink);border:0;outline:2px solid var(--ink)}
.film-row{display:flex;gap:14px;align-items:baseline;margin-top:8px}
.film-watch,
.film-case{
  font-size:11px;letter-spacing:.18em;color:var(--red);
  border-bottom:2px solid var(--red);cursor:pointer;
}
.film-watch:hover,.film-case:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.film-frame{position:relative;cursor:pointer}
.film-player{width:100%;height:100%;border:0;display:block;background:var(--ink)}
.film-case::after{content:"";display:none}
.work-quote{
  margin-top:auto;max-width:64ch;font-size:14px;color:#4a4033;position:relative;z-index:3;
  border-top:3px solid var(--ink);padding-top:14px;
}

/* ============================================================
   03 ABOUT
   ============================================================ */
.panel--about .about-grid{
  display:grid;grid-template-columns:minmax(330px,1.1fr) minmax(300px,.9fr);
  gap:46px;margin-top:30px;align-items:start;position:relative;z-index:3;
}
.about-copy p{margin-bottom:14px;font-size:15px}
.about-copy b{color:var(--red)}
.about-facts{display:flex;gap:26px;margin:22px 0 6px;flex-wrap:wrap}
.about-facts li{
  border:3px solid var(--ink);padding:12px 16px 10px;background:var(--cream);
  box-shadow:var(--sh);transform:rotate(-2deg);transition:transform .3s var(--bezier);
}
.about-facts li:nth-child(2){transform:rotate(2deg)}
.about-facts li:hover{transform:rotate(0) translateY(-6px)}
.about-facts b{display:block;font-family:"Bevan",serif;font-size:26px;color:var(--red)}
.about-facts span{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.about-rule{
  margin-top:26px;padding:14px 18px;border-left:6px solid var(--red);background:var(--paper2);
  font-size:14px;max-width:56ch;
}
.about-rule em{color:var(--red);font-style:normal;text-decoration:underline}
.about-photo{
  width:100%;background:var(--cream);border:3px solid var(--ink);padding:12px 12px 10px;
  box-shadow:var(--sh);transform:rotate(var(--tilt,0deg));transition:transform .35s var(--bezier);
}
.about-photo:hover{transform:rotate(0) scale(1.02)}
.about-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--ink)}
.about-photo figcaption{margin-top:8px;font-size:12px}
.about-photo figcaption i{font-style:normal;color:var(--red);font-family:"Bevan",serif;margin-right:6px}
.about-team{display:flex;gap:30px;margin-top:40px;align-items:flex-end;position:relative;z-index:3;width:100%}
.mate{
  flex:1 1 148px;max-width:230px;background:var(--cream);border:3px solid var(--ink);padding:8px 8px 10px;
  box-shadow:var(--sh);transform:rotate(var(--tilt,0deg));transition:transform .32s var(--bezier);
}
.mate:hover{transform:rotate(0) translateY(-10px) scale(1.04);z-index:4}
.mate img{width:100%;aspect-ratio:.8;object-fit:contain;background:var(--paper);border:2px solid var(--ink)}
.mate--plant{flex-basis:180px}
.mate--plant img{aspect-ratio:.72}
.mate figcaption{margin-top:8px;font-size:11px;letter-spacing:.1em}
.mate b{display:block;font-size:13px;letter-spacing:.2em;color:var(--red)}
.mate figcaption span{color:#5a4f3d}
.pantheon{
  margin-top:40px;position:relative;z-index:3;border:3px solid var(--ink);
  background:var(--cream);box-shadow:var(--sh);padding:16px 20px;
  transform:rotate(-.6deg);
}
.pantheon b{
  font-family:"Bevan",serif;font-size:13px;letter-spacing:.3em;color:var(--red);
  text-transform:uppercase;
}
.pantheon ul{display:flex;gap:34px;margin-top:10px;flex-wrap:wrap}
.pantheon li{font-size:13px}
.pantheon li i{font-style:normal;color:var(--red)}

/* ============================================================
   04 CAPABILITIES
   ============================================================ */
.panel--cap{width:100%;background:var(--paper2)}
.cap-chain{
  margin-top:56px;display:flex;align-items:flex-start;position:relative;z-index:3;
  width:100%;
}
.cap{
  position:relative;flex:1 1 206px;max-width:320px;text-align:center;
  padding:0 12px 20px;transform:rotate(var(--tilt,0deg));
  transition:transform .3s var(--bezier);
}
.cap:nth-child(even){margin-top:52px}
.cap:nth-child(n+2)::before{                 /* dashed strip between nodes */
  content:"";position:absolute;top:46px;right:100%;width:26px;height:0;
  border-top:4px dashed var(--ink);
}
.cap:hover{transform:rotate(0) translateY(-10px)}
.cap-dot{
  position:relative;z-index:2;display:grid;place-items:center;margin:0 auto;
  width:94px;height:94px;border-radius:50%;background:var(--cream);
  border:3px solid var(--ink);box-shadow:var(--sh);overflow:hidden;
  transition:transform .3s var(--bezier),background .3s;
}
.cap:hover .cap-dot{transform:scale(1.14) rotate(-8deg);background:var(--gold)}
.cap-dot img{width:60%;height:60%;object-fit:contain;pointer-events:none}
.cap b{display:block;margin-top:14px;font-size:12px;letter-spacing:.16em}
.cap-note{display:block;margin-top:4px;font-size:11px;color:#5a4f3d}
.how{
  display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:28px;
  margin-top:64px;position:relative;z-index:3;
}
.step{
  border:3px solid var(--ink);background:var(--cream);box-shadow:var(--sh);
  padding:18px 20px 16px;transform:rotate(var(--tilt,0deg));transition:transform .3s var(--bezier);
}
.step:hover{transform:rotate(0) translateY(-8px)}
.step b{
  display:inline-block;font-family:"Bevan",serif;font-size:15px;letter-spacing:.08em;
  background:var(--ink);color:var(--cream);padding:4px 10px;margin-bottom:10px;
}
.step p{font-size:13px}
.step i{display:block;font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--red);margin-top:8px}
.cap-foot{margin-top:auto;font-size:14px;position:relative;z-index:3}
.panel-foot{margin-top:26px;font-size:14px;position:relative;z-index:3}
.cap-foot a{color:var(--red);border-bottom:2px solid var(--red)}
.cap-foot a:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ============================================================
   01 MAIN — extra program panels
   ============================================================ */
.minitriplet{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:44px}
.minitriplet .card{
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  padding:18px 18px 16px;transform:rotate(var(--tilt,0deg));transition:transform .3s var(--bezier);
}
.minitriplet .card:hover{transform:rotate(0) translateY(-8px)}
.minitriplet b{display:block;font-family:"Bevan",serif;font-size:15px;letter-spacing:.08em;margin-bottom:8px;color:var(--red)}
.minitriplet p{font-size:13px}
.minitriplet i{display:block;font-style:normal;margin-top:10px;font-size:11px;letter-spacing:.2em;color:#5a4f3d}
.easel{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:36px}
.ease{
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  padding:12px 12px 10px;transform:rotate(var(--tilt,0deg));transition:transform .3s var(--bezier);
}
.ease:hover{transform:rotate(0) translateY(-8px)}
.ease img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--paper);border:2px solid var(--ink)}
.ease figcaption{margin-top:8px;font-size:11px;letter-spacing:.08em}
.ease b{display:block;font-size:12px;letter-spacing:.14em;color:var(--red)}
.ease figcaption span{color:#5a4f3d}
.stamp-wall{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:26px;margin-top:44px}
.wall-card{background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);padding:16px 18px 14px;transform:rotate(var(--tilt,0deg));transition:transform .3s var(--bezier)}
.wall-card:hover{transform:rotate(0) translateY(-6px)}
.wall-card b{display:block;font-family:"Bevan",serif;font-size:12px;letter-spacing:.16em;color:var(--red);margin-bottom:8px}
.wall-card p{font-size:13px}
.wall-wide{grid-column:1/-1;display:flex;gap:22px;align-items:center}
.wall-wide img{width:130px;flex:0 0 130px;border:2px solid var(--ink);background:var(--paper2)}
.wall-wide b{margin-bottom:6px}

/* ============================================================
   FILM CASE FILE page
   ============================================================ */
.case-grid{
  display:grid;grid-template-columns:minmax(430px,1.25fr) minmax(240px,.55fr);
  gap:34px;margin-top:30px;align-items:start;position:relative;z-index:3;
}
.case-next{display:flex;flex-direction:column;gap:16px}
.case-next b{
  font-family:"Bevan",serif;font-size:13px;letter-spacing:.24em;color:var(--red);
  text-transform:uppercase;margin-bottom:2px;
}
.next-card{
  display:flex;gap:12px;align-items:center;background:var(--cream);
  border:3px solid var(--ink);box-shadow:var(--sh);padding:8px 10px;
  transform:rotate(var(--tilt,0deg));transition:transform .28s var(--bezier);cursor:pointer;
}
.next-card:hover{transform:rotate(0) translateY(-5px)}
.next-card img{width:64px;height:44px;object-fit:cover;border:2px solid var(--ink)}
.next-card span{font-size:12px;line-height:1.3}
.next-card i{font-style:normal;color:var(--red);font-size:10px;letter-spacing:.16em;display:block;margin-top:2px}
.case-fact{
  border:3px dashed var(--teal);color:var(--teal);padding:12px 14px;font-size:12px;
  transform:rotate(-1.4deg);background:var(--cream);
}

/* per-film dossier chips — premiere / technique / music / status */
.case-dossier{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 4px;position:relative;z-index:3}
.case-chip{border:2px solid var(--ink);background:var(--cream);padding:9px 11px 8px;box-shadow:var(--sh)}
.case-chip:nth-child(odd){transform:rotate(-.8deg)}
.case-chip:nth-child(even){transform:rotate(.8deg)}
.case-chip i{display:block;font-style:normal;font-size:9px;letter-spacing:.2em;color:var(--red);text-transform:uppercase;margin-bottom:3px}
.case-chip span{font-size:12px;line-height:1.35}

/* the studio's rubber-stamp verdict at the foot of the sheet */
.case-verdict{margin-top:20px;display:flex;align-items:center;gap:16px;border:3px double var(--red);background:var(--cream);padding:12px 16px;transform:rotate(-1.2deg);box-shadow:var(--sh);position:relative;z-index:3}
.case-verdict .vg{font-family:"Bevan",serif;font-size:38px;line-height:1;color:var(--red);flex:0 0 auto}
.case-verdict i{display:block;font-style:normal;font-family:"Bevan",serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px}
.case-verdict span{font-size:12px;color:#5a4f3d}

/* side column: trivia list + museum placard */
.case-trivia{margin-top:18px;border-left:5px solid var(--gold);background:var(--paper2);padding:11px 13px;transform:rotate(.6deg)}
.case-trivia b{display:block;font-family:"Bevan",serif;font-size:11px;letter-spacing:.2em;color:var(--red);text-transform:uppercase;margin-bottom:2px}
.case-trivia ul{list-style:none;padding:0;margin:0}
.case-trivia li{font-size:12px;line-height:1.5;margin-top:7px;padding-left:14px;position:relative}
.case-trivia li::before{content:"★";position:absolute;left:0;top:2px;font-size:8px;color:var(--gold)}
.case-placard{margin-top:16px;border:2px solid var(--ink);background:var(--cream);padding:9px 10px;text-align:center;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#5a4f3d;transform:rotate(-.6deg);box-shadow:var(--sh)}
.case-placard b{display:block;font-family:"Bevan",serif;font-size:12px;letter-spacing:.16em;color:var(--ink);margin:2px 0}

/* 404 · the lost reel */
.lost-row{display:flex;align-items:center;gap:44px;margin-top:26px;flex-wrap:wrap;position:relative;z-index:3}
.lost-stamp{
  display:grid;place-items:center;width:148px;height:148px;flex:0 0 auto;
  border:5px solid var(--red);border-radius:50%;color:var(--red);
  font-family:"Bevan",serif;font-size:30px;letter-spacing:.12em;
  transform:rotate(-12deg);box-shadow:var(--sh);background:var(--cream);
  animation:lost-pulse 2.6s ease-in-out infinite;
}
@keyframes lost-pulse{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-8deg) scale(1.06)}}
.lost-actions{display:flex;flex-direction:column;gap:14px}
.case-sheet{
  max-width:760px;background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  padding:26px 30px;transform:rotate(-.6deg);margin-top:34px;position:relative;z-index:3;
}
.case-kicker{font-size:12px;letter-spacing:.4em;color:var(--red);text-transform:uppercase}
.case-title{font-family:"Bevan",serif;font-size:clamp(28px,4.4vw,48px);line-height:1.05;margin:10px 0 4px;text-transform:uppercase;text-shadow:3px 3px 0 var(--red)}
.case-meta{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#5a4f3d;margin-bottom:16px}
.case-frame{border:3px solid var(--ink);aspect-ratio:16/9;background:var(--ink);position:relative}
.case-frame img,.case-frame video{width:100%;height:100%;object-fit:cover;display:block}
.case-player{width:100%;height:100%;border:0;background:var(--ink)}
.case-row{display:flex;align-items:center;gap:12px;margin:16px 0 20px;font-size:14px}
.case-body p{margin-bottom:14px;font-size:14px}
.case-body h4{font-family:"Bevan",serif;font-size:14px;letter-spacing:.12em;margin:18px 0 8px;color:var(--red)}
.case-body ul{list-style:none;padding-left:2px}
.case-body li{padding-left:22px;position:relative;margin-bottom:8px;font-size:13px}
.case-body li::before{content:"✦";position:absolute;left:0;color:var(--teal)}
.case-back{margin-top:26px;font-size:13px;position:relative;z-index:3}
.case-back a{color:var(--red);border-bottom:2px solid var(--red)}
.case-back a:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ============================================================
   05 CONTACT
   ============================================================ */
.contact-grid{
  display:grid;grid-template-columns:minmax(330px,1.05fr) minmax(250px,.55fr);
  gap:44px;margin-top:26px;align-items:start;position:relative;z-index:3;
}
.telegraph{
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  padding:22px 24px;transform:rotate(-1deg);
}
.tg-head{
  font-family:"Limelight",serif;font-size:20px;letter-spacing:.3em;text-align:center;
  border-bottom:3px double var(--ink);padding-bottom:10px;margin-bottom:16px;
}
.tg-head em{
  display:block;font-style:normal;font-family:"Special Elite",monospace;font-size:11px;
  letter-spacing:.2em;margin-top:4px;color:var(--red);
}
.telegraph label{display:block;margin-bottom:14px;font-size:11px;letter-spacing:.22em}
.telegraph input,.telegraph textarea{
  display:block;width:100%;margin-top:6px;padding:10px 12px;
  background:var(--paper);border:2px solid var(--ink);
  font:15px "Special Elite",monospace;color:var(--ink);
  caret-color:transparent;                 /* terminal block caret instead */
}
.tt-wrap{position:relative;display:block}
.tt-caret{
  position:absolute;width:11px;height:1.05em;background:var(--ink);
  opacity:0;pointer-events:none;z-index:3;transform:translateY(1px);
}
.tt-caret::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--teal);
}
.tt-caret.on{opacity:1;animation:caretBlink 1.06s steps(1) infinite}
@keyframes caretBlink{0%,55%{opacity:1}56%,100%{opacity:0}}
.tt-mirror{
  position:absolute;visibility:hidden;pointer-events:none;z-index:-1;
  white-space:pre-wrap;overflow:visible;
}
.telegraph input:focus,.telegraph textarea:focus{
  outline:3px solid var(--red);outline-offset:2px;background:#fbf7ea;
}
.tg-send{width:100%}
.tg-ok{
  margin-top:14px;padding:10px 14px;border:3px dashed var(--red);color:var(--red);
  font-size:13px;transform:rotate(-1.5deg);animation:fadeUp .4s var(--bezier);
}
.contact-side{display:flex;flex-direction:column;gap:20px}
.contact-block{
  border:3px solid var(--ink);background:var(--paper2);padding:16px 18px;box-shadow:var(--sh);
  transform:rotate(1.5deg);transition:transform .3s var(--bezier);
}
.contact-block:nth-child(2){transform:rotate(-2deg)}
.contact-block:hover{transform:rotate(0) translateY(-4px)}
.contact-block b{display:block;font-family:"Bevan",serif;font-size:14px;letter-spacing:.14em;color:var(--red);margin-bottom:8px}
.contact-block p{font-size:13px}
.foot{
  margin-top:auto;border-top:3px solid var(--ink);padding-top:14px;
  font-size:11px;letter-spacing:.08em;color:#4a4033;position:relative;z-index:3;
}
.foot b{color:var(--red)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative;display:inline-block;padding:13px 26px 11px;
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  font-family:"Special Elite",monospace;font-size:14px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);
  transition:transform .25s var(--bezier),box-shadow .2s;
}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink);background:var(--gold)}
.btn:active{transform:translate(6px,6px) scale(.94);box-shadow:0 0 0 var(--ink)}
.btn .arr{display:inline-block;transition:transform .25s var(--bezier)}
.btn:hover .arr{transform:translateX(6px)}
.btn::after{
  content:"★";position:absolute;top:-12px;right:-12px;width:24px;height:24px;
  display:grid;place-items:center;background:var(--gold);border:2px solid var(--ink);
  border-radius:50%;font-size:11px;opacity:0;transform:scale(0);transition:.25s var(--bezier);
}
.btn:hover::after{opacity:1;transform:scale(1) rotate(14deg)}
.btn--red{background:var(--red);color:var(--cream)}
.btn--red:hover{background:var(--ink)}

/* ============================================================
   INTRO (main page only)
   ============================================================ */
.intro{position:fixed;inset:0;z-index:1000;background:var(--paper);display:grid;place-items:center}
.intro::before,.intro::after{
  content:"";position:absolute;left:0;right:0;height:34px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 22px,transparent 22px 44px);
  pointer-events:none;
}
.intro::before{top:0}.intro::after{bottom:0}
.intro-frame{position:relative;text-align:center;padding:0 20px;width:min(920px,94vw)}
.intro-kicker{font-size:13px;letter-spacing:.5em;text-transform:uppercase;animation:fadeDots 1.2s steps(6) both}
.intro-stage{
  position:relative;margin:24px auto 0;height:min(44vh,330px);width:min(560px,88vw);
  filter:drop-shadow(4px 5px 0 #211a1244);
}
.i-hero-wrap{position:absolute;left:0;bottom:6%;width:132px;height:158px;animation:heroIn .55s var(--bezier) .25s both}
.i-hero{width:100%;height:100%;object-fit:contain}
.i-field{position:absolute;left:14%;right:4%;bottom:42%;height:40px}
.i-pea{position:absolute;top:10px;left:0;width:20px;height:20px;border-radius:50%;
  background:#f3d23c;border:3px solid var(--ink);animation:peaFly .42s linear forwards}
@keyframes peaFly{to{left:88%}}
.i-flower-wrap{position:absolute;right:0;bottom:0;width:180px;height:238px}
.i-flower,.i-boom{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.i-flower{animation:flowerIn .45s var(--bezier) .1s both}
.i-flower.shake{animation:shake .3s linear}
.i-boom{width:150%;height:150%;left:-22%;top:-16%;animation:boomPop .12s linear both}
.intro-logo{margin-top:4px;pointer-events:none}
.intro-word{
  display:flex;justify-content:center;gap:.02em;
  font-family:"Bevan",serif;font-size:clamp(64px,13vw,150px);
  line-height:1;text-shadow:5px 5px 0 var(--red);
}
.intro-word span{display:inline-block;opacity:0;transform:translateY(30px) rotate(-6deg) scale(.6)}
.intro-logo.go .intro-word span{animation:stampIn .38s var(--bezier) forwards}
.intro-logo.go .intro-word span:nth-child(2){animation-delay:.09s}
.intro-logo.go .intro-word span:nth-child(3){animation-delay:.18s}
.intro-logo.go .intro-word span:nth-child(4){animation-delay:.27s}
.intro-band{
  display:inline-block;margin-top:6px;background:var(--ink);color:var(--cream);
  font-family:"Limelight",serif;font-size:clamp(18px,3.4vw,30px);letter-spacing:.55em;
  padding:6px 26px 4px 34px;opacity:0;transform:scaleX(0);
}
.intro-logo.go .intro-band{animation:bandIn .4s var(--bezier) .45s forwards}
.intro-sub{margin-top:12px;font-size:13px;letter-spacing:.42em;text-transform:uppercase;opacity:0}
.intro-logo.go .intro-sub{animation:typeIn .5s steps(10) .75s forwards}
.intro-roll{margin-top:22px;opacity:0}
.intro-logo.go .intro-roll{animation:fadeUp .35s var(--bezier) 1.05s forwards}
.intro-skip{
  position:absolute;top:52px;right:26px;z-index:1001;font-size:12px;letter-spacing:.3em;
  border-bottom:2px solid var(--ink);padding-bottom:2px;opacity:.75;
}
.intro-skip:hover{color:var(--red);border-color:var(--red)}
.intro-flash{position:fixed;inset:0;background:#fbf7ea;opacity:0;pointer-events:none;z-index:1001}
.intro-flash.on{animation:flash .18s steps(2) both}
.intro-fadeout{animation:introOut .5s steps(7) both}
@keyframes fadeDots{to{opacity:1}}
@keyframes heroIn{from{transform:translateX(-70px) scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes flowerIn{from{transform:translateX(70px) scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes shake{0%{transform:rotate(0)}25%{transform:rotate(-7deg) translateX(-4px)}50%{transform:rotate(6deg) translateX(4px)}75%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
@keyframes boomPop{from{transform:scale(.4) rotate(-14deg);opacity:1}to{transform:scale(1.05) rotate(4deg);opacity:1}}
@keyframes stampIn{0%{opacity:0;transform:translateY(34px) rotate(-8deg) scale(.55)}60%{opacity:1;transform:translateY(-6px) rotate(2deg) scale(1.08)}100%{opacity:1;transform:none}}
@keyframes bandIn{to{opacity:1;transform:scaleX(1)}}
@keyframes typeIn{from{opacity:0;color:var(--red)}to{opacity:1}}
@keyframes fadeUp{to{opacity:1}}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@keyframes reelShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,4px)}}
.reel-shake{animation:reelShake .34s linear}

/* ============================================================
   INK WIPE between pages
   ============================================================ */
/* width/height are NOT optional: an svg with only a viewBox is a replaced element —
   inset:0 alone sizes it as a w×w SQUARE pinned to the top, leaving the lower screen un-inked */
.wipe{position:fixed;inset:0;width:100%;height:100%;z-index:900;pointer-events:none;display:none}
.wipe.on{display:block}
html.ink-cover{background:var(--ink)}   /* the head inline style is the first paint; this is the backup */
.w-blob,.w-dot{transform-box:fill-box;transform-origin:center}
.wipe--in .w-blob{animation:blobIn .3s steps(5) forwards}
.wipe--in .w-dot1{animation:dotIn .34s linear forwards}
.wipe--in .w-dot2{animation:dotIn .3s linear .04s forwards}
.wipe--out .w-blob{animation:blobOut .36s steps(5) forwards}
.wipe--out .w-dot1{transform:scale(3);animation:dotOut .3s linear forwards}
.wipe--out .w-dot2{transform:scale(3);animation:dotOut .3s linear forwards}
@keyframes blobIn{from{transform:scale(0)}to{transform:scale(3.4) rotate(8deg)}}
@keyframes blobOut{from{transform:scale(3.4) rotate(8deg)}to{transform:scale(0) rotate(30deg)}}
@keyframes dotIn{from{transform:scale(0)}to{transform:scale(3)}}
@keyframes dotOut{from{transform:scale(3)}to{transform:scale(0)}}

/* ============================================================
   EXTRAS — runner · parry bullets · whack · projector · KO · stamps
   ============================================================ */
.film-strip{
  position:fixed;left:var(--rail);right:-48px;bottom:0;height:22px;z-index:460;
  border-top:3px solid var(--ink);background-color:var(--paper2);
  background-image:repeating-linear-gradient(90deg,transparent 0 9px,var(--ink) 9px 23px,transparent 23px 32px);
  background-size:32px 9px;background-repeat:repeat-x;background-position:0 7px;
  pointer-events:none;
}
.film-runner{
  position:fixed;left:0;bottom:-4px;height:58px;z-index:470;
  pointer-events:none;will-change:transform;
}
.film-runner .flip{display:block;height:100%}
.film-runner img{height:100%;width:auto;display:block}
.film-runner.is-run img{animation:march .38s steps(2) infinite}
.film-runner .flip.is-back{transform:scaleX(-1)}
.parry-bullet{
  position:fixed;z-index:600;width:34px;height:34px;padding:0;background:none;border:0;cursor:pointer;
  transition:transform 3.9s linear;
}
.parry-bullet img{width:100%;height:100%;object-fit:contain;animation:pinkySpin 2.2s linear infinite}
.parry-bullet:hover{outline:3px dashed var(--red);outline-offset:4px;border-radius:50%}
.parry-hit{
  position:fixed;z-index:601;pointer-events:none;transform:translate(-50%,-100%);
  font-family:"Bevan",serif;font-size:16px;color:var(--red);white-space:nowrap;
  animation:hitUp .8s var(--bezier) both;
}
@keyframes hitUp{
  0%{opacity:0;transform:translate(-50%,-90%) scale(.5)}
  25%{opacity:1;transform:translate(-50%,-120%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-260%) scale(1)}
}
.whack-tag{
  position:fixed;z-index:650;pointer-events:none;
  font-family:"Bevan",serif;font-size:19px;color:var(--cream);background:var(--red);
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:7px 13px 4px;white-space:nowrap;
  transform:translate(-50%,-50%) rotate(var(--wrot,-6deg));
  animation:whackIn .6s steps(5) both;
}
@keyframes whackIn{
  0%{transform:translate(-50%,-50%) rotate(var(--wrot)) scale(0)}
  40%{transform:translate(-50%,-50%) rotate(var(--wrot)) scale(1.18);opacity:1}
  75%{transform:translate(-50%,-50%) rotate(var(--wrot)) scale(1);opacity:1}
  100%{transform:translate(-50%,-62%) rotate(var(--wrot)) scale(1);opacity:0}
}
.whacked{animation:whackSquash .3s var(--bezier)}
@keyframes whackSquash{
  0%{transform:rotate(var(--tilt,0deg)) scale(1)}
  40%{transform:rotate(calc(var(--tilt,0deg) + 2deg)) scale(1.08,.92)}
  100%{transform:rotate(var(--tilt,0deg)) scale(1)}
}
.ko-screen{position:fixed;inset:0;z-index:950;display:grid;place-items:center;background:rgba(33,26,18,.6)}
.ko-burst{width:min(560px,86vw);height:auto;animation:koPop .45s steps(6) both}
@keyframes koPop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.ko-screen b{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);
  font-family:"Bevan",serif;font-size:clamp(28px,6vw,58px);color:var(--ink);
  text-shadow:3px 3px 0 var(--cream);text-align:center;padding:0 20px;
}
.ko-conf{position:absolute;top:-4vh;font-size:20px;animation:koFall 1.5s linear both}
@keyframes koFall{to{transform:translateY(112vh) rotate(560deg)}}
.ko-out .ko-burst,.ko-out b{animation:koOut .35s steps(4) both}
@keyframes koOut{to{transform:scale(0) rotate(16deg);opacity:0}}
.proj-vig{position:fixed;inset:0;z-index:640;pointer-events:none;display:none;box-shadow:inset 0 0 170px 70px rgba(26,16,5,.55)}
.proj-flick{position:fixed;inset:0;z-index:641;pointer-events:none;display:none;background:var(--ink);animation:flick .21s steps(2) infinite}
@keyframes flick{0%,100%{opacity:0}50%{opacity:.045}}
.proj-scr{position:fixed;top:0;bottom:0;width:2px;z-index:642;display:none;pointer-events:none;background:rgba(247,240,221,.45)}
.proj-scr1{left:30%;animation:scr1 2.7s steps(9) infinite}
.proj-scr2{left:71%;animation:scr2 3.9s steps(11) infinite}
@keyframes scr1{0%,100%{opacity:.5;transform:translateX(0)}30%{opacity:.2;transform:translateX(14px)}60%{opacity:.6;transform:translateX(-9px)}}
@keyframes scr2{0%,100%{opacity:.3;transform:translateX(0)}40%{opacity:.6;transform:translateX(-16px)}70%{opacity:.15;transform:translateX(10px)}}
body.old-proj .panel{filter:sepia(.45) contrast(1.05) brightness(.97)}
body.old-proj .proj-vig,body.old-proj .proj-flick{display:block}
body.old-proj .proj-scr{display:block}
body.old-proj .grain{opacity:.14}
.rail-stamps{display:grid;grid-template-columns:repeat(3,11px);gap:4px;margin:0}
.rail-stamps i{
  width:11px;height:11px;border-radius:50%;display:block;box-sizing:border-box;
  border:2px solid rgba(247,240,221,.45);background:rgba(247,240,221,.1);
}
.rail-stamps i.got{background:var(--gold);border-color:var(--ink);box-shadow:1px 1px 0 var(--ink)}
.rail-proj{
  width:34px;height:26px;border:2px solid #cfc4a6;border-radius:6px;color:#cfc4a6;
  font-size:10px;letter-spacing:.1em;line-height:1;padding:0;
  transition:transform .25s var(--bezier),color .2s,border-color .2s,background .2s;
}
.rail-proj:hover{transform:rotate(-8deg) scale(1.12);color:var(--cream);border-color:var(--cream)}
.rail-proj.on{background:var(--red);border-color:var(--cream);color:var(--cream)}
.stamp-toast{
  position:fixed;left:calc(var(--rail) + 16px);bottom:16px;z-index:930;
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  padding:10px 16px 8px;font-size:12px;letter-spacing:.16em;color:var(--ink);
  transform:translateX(-160%) rotate(-2deg);transition:transform .45s var(--bezier);
}
.stamp-toast.on{transform:translateX(0) rotate(-2deg)}
.rail-dice{
  width:34px;height:26px;display:flex;gap:3px;align-items:center;justify-content:center;
  transition:transform .25s var(--bezier);
}
.rail-dice:hover{transform:rotate(-8deg) scale(1.12)}
.rail-dice:active{transform:scale(.88)}
.die-face{
  width:12px;height:12px;background:var(--cream);border:2px solid var(--ink);border-radius:3px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:1px;box-sizing:border-box;
}
.die-face i{margin:1px;border-radius:50%}
.die-face i.on{background:var(--ink)}
.die-face.rolling{animation:dieTumble .16s linear infinite}
@keyframes dieTumble{
  0%{transform:rotate(0)}
  25%{transform:rotate(10deg) translateY(-2px)}
  50%{transform:rotate(-8deg)}
  75%{transform:rotate(6deg) translateY(-1px)}
  100%{transform:rotate(0)}
}
.dice-verdict{
  position:fixed;left:calc(var(--rail) + 18px);bottom:120px;z-index:930;
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  padding:10px 16px 8px;font-size:10px;letter-spacing:.18em;color:var(--ink);
  transform:translateX(-170%) rotate(-2deg);transition:transform .4s var(--bezier);
}
.dice-verdict.on{transform:translateX(0) rotate(-2deg)}
.dice-verdict b{
  display:block;font-family:"Bevan",serif;font-size:15px;letter-spacing:.06em;
  color:var(--red);margin:4px 0 3px;
}
.dice-verdict i{font-style:normal;color:#5a4f3d;font-size:9px}

@media (max-height:820px){
  .rail-logo{width:44px;height:44px;font-size:16px;margin:8px 0 4px}
  .rail-nav{gap:9px;padding:8px 0}
  .rail-nav a{font-size:11px;letter-spacing:.12em}
  .rail-reel{font-size:8px;letter-spacing:.08em}
  .rail-pinky{width:30px;height:30px}
  .rail-stamps{grid-template-columns:repeat(3,11px);gap:4px}
  .rail-stamps i{width:11px;height:11px}
  .rail-dice{height:22px}
  .die-face{width:10px;height:10px}
  .rail-proj{height:22px}
  .rail-onair{height:22px}
  .rail-onair .lamp{width:7px;height:7px}
  .rail-onair b{font-size:6px}
  .rail-tail{padding:8px 0 10px;gap:5px}
}
/* very short windows: vertical labels alone need ~530px — switch to number chips
   so every page stays reachable; labels stay in the a11y tree */
@media (max-height:740px){
  .rail-nav{gap:8px;padding:6px 0}
  .rail-nav a{writing-mode:horizontal-tb;padding:4px 5px}
  .rail-nav a span{
    position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
}
/* last resort: ~400px-tall windows */
@media (max-height:440px){
  .rail-logo{width:34px;height:34px;font-size:13px;margin:4px 0 2px}
  .rail-nav{gap:6px;padding:3px 0}
  .rail-nav a{padding:2px 4px}
  .rail-tail{gap:3px;padding:4px 0 6px}
  .rail-stamps{grid-template-columns:repeat(3,9px);gap:3px}
  .rail-stamps i{width:9px;height:9px}
}

/* ============================================================
   RESPONSIVE / MOTION
   ============================================================ */
@media (max-width:1100px){
  .panel{padding:88px 54px 110px 48px}
  .hero-cast{width:34vw;right:8px}
  .how{grid-template-columns:1fr;max-width:520px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:30px}
  .about-team{flex-wrap:wrap}
  .panel--cap{width:100%}
}
@media (max-width:820px){
  .rail{width:62px;--rail:62px}
  .rail-nav{gap:10px}
  .rail-nav a{font-size:12px;letter-spacing:.2em}
  .panel{padding:84px 26px 104px 28px}
  .panel--cap{width:100%}
  .hero-cast{opacity:.55;width:44vw}
  .scroll-cue{left:28px}
  /* narrow panes: nothing may be clipped out of reach */
  .panel--about .about-grid{grid-template-columns:1fr;gap:26px}   /* beats the taller-specificity base rule */
  .case-grid{grid-template-columns:1fr;gap:26px}
  .cap-chain{flex-wrap:wrap;column-gap:18px;row-gap:34px}
  .cap-chain .cap::before{display:none}                           /* no dangling dashes between wrapped rows */
  .cap{flex-basis:150px}
  .lost-row{gap:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s !important;transition-duration:.01s !important}
}

/* ============================================================
   12 LIFE — line boil, megaphone, ink trail, cameo, pop stars
   ============================================================ */
@keyframes boil{
  0%{border-radius:0}
  50%{border-radius:2px 1px 2px 1px/1px 2px 1px 2px}
  100%{border-radius:1px 2px 1px 2px/2px 1px 2px 1px}
}
.film,.next-card,.case-chip,.case-fact,.case-trivia,.case-placard,.case-verdict,
.about-facts li,.mate,.case-sheet{animation:boil .46s steps(1) infinite}

/* MR. MEGAPHONE — bottom-right announcer */
.megaphone{
  position:fixed;right:18px;bottom:18px;max-width:272px;z-index:1200;
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  padding:10px 14px 12px;pointer-events:none;
  transform:translateY(160%) rotate(2deg);opacity:0;
  transition:transform .45s var(--bezier),opacity .3s;
}
.megaphone.on{transform:translateY(0) rotate(-1deg);opacity:1}
.megaphone::after{
  content:"";position:absolute;left:30px;bottom:-12px;width:15px;height:15px;
  background:var(--cream);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  transform:rotate(45deg);
}
.megaphone b{display:block;font-family:"Bevan",serif;font-size:10px;letter-spacing:.2em;color:var(--red);margin-bottom:3px}
.megaphone span{font-family:"Courier Prime",monospace;font-size:12px;line-height:1.45}

/* ink trail drops */
.ink-drop{
  position:fixed;z-index:60;width:calc(var(--ir,3px)*2);height:calc(var(--ir,3px)*2);
  margin:calc(var(--ir,3px)*-1) 0 0 calc(var(--ir,3px)*-1);
  border-radius:50%;background:var(--ink);opacity:.5;pointer-events:none;
  animation:inkfade .62s ease-out forwards;
}
@keyframes inkfade{from{transform:scale(.35);opacity:.55}to{transform:scale(1.2);opacity:0}}

/* coffee-break cameo: the runner dashes past once you idle */
.cameo{
  position:fixed;left:0;bottom:7vh;z-index:65;width:118px;pointer-events:none;
  animation:cameo-dash 4.2s linear forwards;
}
.cameo img{width:100%;display:block;animation:cameo-bob .32s ease-in-out infinite alternate}
@keyframes cameo-dash{from{transform:translateX(-130px)}to{transform:translateX(calc(100vw + 150px))}}
@keyframes cameo-bob{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-9px) rotate(4deg)}}

/* typed-secret star burst */
.pop-star{
  position:fixed;top:-34px;z-index:1300;pointer-events:none;
  animation:popfall 1.7s cubic-bezier(.3,.4,.6,1) forwards;
}
@keyframes popfall{from{transform:translateY(0) rotate(0)}to{transform:translateY(108vh) rotate(320deg);opacity:.15}}

/* rail stamps are alive under the cursor */
.rail-stamps i{transition:transform .18s var(--bezier)}
.rail-stamps i:hover{transform:scale(1.45) rotate(-14deg)}

/* night shift: paper darkens a shade after hours */
.night-shift{--paper:#e7dabb;--paper2:#ddcdab;--cream:#efe6cf}

/* ============================================================
   13 EXTRAS — ON AIR lamp, film leader, open-since ledger, King Dice
   ============================================================ */
/* ON AIR: the house jazz lives on a rail lamp (click for the 1917 shellac) */
.rail-onair{
  width:34px;height:26px;border:2px solid #cfc4a6;border-radius:6px;color:#cfc4a6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;
  transition:transform .25s var(--bezier),color .2s,border-color .2s;
}
.rail-onair .lamp{
  width:8px;height:8px;border-radius:50%;background:#8a7f6a;
  box-shadow:inset 0 0 0 1.5px rgba(33,26,18,.35);
}
.rail-onair b{font-size:6.5px;letter-spacing:.06em;line-height:1;font-weight:normal}
.rail-onair:hover{transform:rotate(-8deg) scale(1.12);color:var(--cream);border-color:var(--cream)}
body.onair-armed .rail-onair .lamp{background:#b8724f}
body.onair .rail-onair{color:var(--cream);border-color:var(--cream)}
body.onair .rail-onair .lamp{
  background:var(--red);box-shadow:0 0 9px 2px rgba(194,59,34,.85);
  animation:lamppulse 1.06s steps(2) infinite;
}
@keyframes lamppulse{50%{opacity:.5}}

/* film leader: 3-2-1 while the projector threads */
.leader{
  position:fixed;inset:0;z-index:1500;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  cursor:pointer;transition:opacity .42s var(--bezier);
}
.leader.leader-out{opacity:0;pointer-events:none}
.leader-disc{
  width:210px;height:210px;border-radius:50%;position:relative;flex:none;
  border:3px solid var(--ink);box-shadow:var(--sh);
  display:flex;align-items:center;justify-content:center;
}
.leader-disc::before,.leader-disc::after{content:"";position:absolute;background:var(--ink)}
.leader-disc::before{left:50%;top:-14px;bottom:-14px;width:2px;margin-left:-1px}
.leader-disc::after{top:50%;left:-14px;right:-14px;height:2px;margin-top:-1px}
.leader-disc span{
  position:absolute;inset:10px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(33,26,18,.16) 0 100deg,transparent 100deg 360deg);
  animation:leader-sweep 1.08s linear infinite;
}
@keyframes leader-sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.leader-disc b{position:relative;font-family:"Bevan",serif;font-size:96px;color:var(--ink);line-height:1}
.leader-cap{font-family:"Courier Prime",monospace;font-size:11px;letter-spacing:.3em;color:#5a4f3d}

/* open-since ledger: the house counts its years out loud */
.since{
  margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  padding:12px 18px 10px;max-width:560px;transform:rotate(-.6deg);
}
.since b{font-family:"Bevan",serif;font-size:14px;letter-spacing:.12em;color:var(--red)}
.since span{font-family:"Courier Prime",monospace;font-size:13px;letter-spacing:.06em}
.since i{font-style:italic;font-size:11px;color:#5a4f3d}

/* king dice easter egg: the manager struts across when you type DICE */
.kingdice{
  position:fixed;left:0;bottom:5vh;z-index:70;width:132px;pointer-events:none;
  animation:king-strut 5s linear forwards;
}
.kingdice img{width:100%;display:block;animation:cameo-bob .34s ease-in-out infinite alternate}
@keyframes king-strut{from{transform:translateX(-150px)}to{transform:translateX(calc(100vw + 170px))}}

/* narrow panes: the leader disc shrinks with the room */
@media (max-width:820px){
  .leader-disc{width:150px;height:150px}
  .leader-disc b{font-size:64px}
  .leader-cap{font-size:9px;letter-spacing:.2em;text-align:center;padding:0 18px}
}

/* ============================================================
   14 THE VAULT DESK — wire log + guest № (fed by postgres)
   ============================================================ */
/* the telegraph rack on contact: every wire filed in the vault */
.wire-log{
  margin:26px 0 0;background:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh);
  padding:14px 18px 12px;transform:rotate(.4deg);
}
.wire-log > b{font-family:"Bevan",serif;font-size:14px;letter-spacing:.12em;color:var(--red);display:block;margin-bottom:9px}
.wire-log ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-height:300px;overflow:auto}
.wire-log li{border-top:2px dashed #cfc4a6;padding-top:9px}
.wire-log li:first-child{border-top:0;padding-top:0}
.wire-log li b{font-family:"Courier Prime",monospace;font-size:12px;letter-spacing:.08em;color:var(--ink)}
.wire-log li p{margin:3px 0;font-size:13px;line-height:1.45}
.wire-log li time{font-family:"Courier Prime",monospace;font-size:10px;letter-spacing:.06em;color:#5a4f3d}
.wire-log .wire-empty{font-family:"Courier Prime",monospace;font-size:12px;color:#5a4f3d;border:0;padding:0}
.wire-log > i{display:block;margin-top:9px;font-size:10px;font-style:italic;color:#5a4f3d}
@media (max-width:820px){
  .wire-log{padding:11px 13px 10px}
  .wire-log li p{font-size:12px}
}