/* SKYLER JADE v4 — THE HOUSE
   color law: red is light, purple is ink. they never gradient into each other. */

@font-face{font-family:'General Sans';src:url('../assets/fonts/GeneralSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('../assets/fonts/GeneralSans-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url('../assets/fonts/FragmentMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --soot:#0d0a0b;
  --soot-2:#151013;
  --red:#e0202e;
  --ember:#5a0b06;
  --glow:#f3592c;
  --cream:#f2e2af;
  --violet:#513a60;
  --indigo:#231c58;
  --mauve:#916267;
  --paper:#e7e5db;
  --body:#c9c4bb;
  --atmo:13,10,11; /* rgb of current atmosphere, tweened toward violet in the archive */
  --vh100:100dvh;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--soot);color:var(--paper);scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
  font-family:'General Sans',sans-serif;font-weight:500;
  font-size:16px;line-height:1.55;
  background:var(--soot);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:var(--soot)}

.mono{font-family:'Fragment Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
/* one global keyboard-focus ring — red reads on both the soot ground and the paper
   ticket. :focus-visible only fires for keyboard nav, so mouse clicks stay ring-free.
   !important so it wins over the many component `outline:0` rules without editing each. */
:focus-visible{outline:2px solid var(--red)!important;outline-offset:3px!important;border-radius:2px}

#spacer{height:1150vh}

/* ── stage ─────────────────────────────────────────── */
#stage{
  position:fixed;inset:0;z-index:2;
  background:rgb(var(--atmo));
  box-shadow:0 26px 46px -8px rgba(9,6,7,.85);
  overflow:hidden;
  
}
.scene{position:absolute;inset:0;display:grid;place-items:center;visibility:hidden}
.scene-tag{color:#a87b80}

#dust{position:absolute;inset:0;pointer-events:none;z-index:3}
#fogcue{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:5;pointer-events:none;opacity:0;visibility:hidden;
  color:#6c655f;letter-spacing:.3em;
}
#fog{
  position:absolute;inset:-20%;z-index:4;pointer-events:none;opacity:0;
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(21,16,19,.9), transparent 70%),
    radial-gradient(50% 60% at 72% 60%, rgba(24,18,22,.85), transparent 70%),
    rgb(var(--atmo));
}

/* ── HUD ───────────────────────────────────────────── */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.hud-c{position:absolute;line-height:1.35}
.hud-tl{top:calc(14px + env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left))}
.hud-tr{top:calc(14px + env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.hud-bl{bottom:calc(14px + env(safe-area-inset-bottom));left:16px;color:#6c655f}
.hud-br{bottom:calc(14px + env(safe-area-inset-bottom));right:16px;text-align:right;color:#6c655f}
#hudlogo{
  display:block;height:30px;width:auto;
  filter:drop-shadow(0 0 12px rgba(90,11,6,.5));
  opacity:0; /* revealed by the timeline once the sign is left behind */
}
html:not(.js) #hudlogo,html.reduced #hudlogo{opacity:1}
.hud-tr{display:flex;gap:9px;align-items:center}
.navmenu-btn{
  pointer-events:auto;
  font-family:'Fragment Mono',monospace;font-size:11px;letter-spacing:.18em;
  color:var(--paper);border:1px solid rgba(231,229,219,.28);
  padding:14px 14px 13px;background:rgba(13,10,11,.5);
}
.navmenu-btn:hover,.navmenu-btn:focus-visible,.navmenu-btn.on{border-color:var(--paper);outline:0}
#navpanel{
  position:fixed;z-index:7;top:calc(60px + env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));
  display:flex;flex-direction:column;min-width:230px;
  background:rgba(13,10,11,.94);border:1px solid rgba(231,229,219,.16);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
#navpanel.open{opacity:1;transform:none;pointer-events:auto}
.nav-item{
  display:flex;align-items:center;gap:12px;text-align:left;
  font-family:'General Sans',sans-serif;font-weight:500;font-size:15px;color:var(--paper);
  padding:15px 18px;border-bottom:1px solid rgba(231,229,219,.08);
}
.nav-item:last-child{border-bottom:0}
.nav-item:hover,.nav-item:focus-visible{background:rgba(231,229,219,.06);outline:0}
.nav-no{color:var(--mauve);font-size:10px}
.nav-book{color:var(--red)}
.nav-book .nav-no{color:var(--red)}
.bookchip{
  pointer-events:auto;
  font-family:'Fragment Mono',monospace;font-size:11px;letter-spacing:.18em;
  color:var(--red);border:1px solid rgba(224,32,46,.55);
  padding:16px 20px 15px;
  background:rgba(13,10,11,.55);
}
.bookchip:hover,.bookchip:focus-visible{background:var(--red);color:var(--soot);outline:0}

/* ── grain ─────────────────────────────────────────── */
#grain{
  position:fixed;inset:-100px;z-index:6;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:250px 250px;
  animation:grainjit .9s steps(6) infinite;
}
@keyframes grainjit{
  0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:30px -70px}
  60%{background-position:-40px -20px}80%{background-position:70px 50px}100%{background-position:0 0}
}

/* ── loader ────────────────────────────────────────── */
#loader{position:fixed;inset:0;z-index:9;background:var(--soot);display:grid;place-items:center}
#loadticker{color:var(--cream);letter-spacing:.3em;font-size:12px}

/* ── CH.1 THE SIGN ─────────────────────────────────── */
#sc-sign .sign{position:relative;text-align:center;padding:0 20px}
.sign-glow{
  position:absolute;left:50%;top:50%;width:130vmin;height:80vmin;
  transform:translate(-50%,-50%);
  background:radial-gradient(48% 42% at 50% 48%, rgba(31,107,83,.20), rgba(35,28,88,.16) 46%, transparent 72%);
  mix-blend-mode:screen;
}
.sign-name{display:grid;place-items:center}
#wordmark{
  display:block;width:min(88vw,820px);height:auto;
  filter:drop-shadow(0 0 26px rgba(60,150,120,.26)) drop-shadow(0 0 80px rgba(35,28,88,.5));
}
.enter-cue{position:absolute;bottom:calc(54px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:#8a8478}

/* ── CH.3 THE TABLE ────────────────────────────────── */
.table-felt{
  position:absolute;inset:0;
  background:url('../assets/img/felt.jpg') 50% 62%/cover no-repeat var(--soot);
  
}
.table-felt::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(95% 80% at 50% 44%, transparent 40%, rgba(13,10,11,.72) 88%, rgba(13,10,11,.92));
}
/* felt swept away: what's left floats in the dark */
#sc-table.felt-out .titem-card,
#sc-table.felt-out .titem-chip,
#sc-table.felt-out .titem-slip{box-shadow:0 0 34px rgba(0,0,0,.35)}
#sc-table.felt-out .titem-die{filter:drop-shadow(0 0 18px rgba(0,0,0,.4))}
.table-tag{
  position:absolute;top:13vh;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:3;pointer-events:none;
  color:var(--cream);text-shadow:0 1px 10px rgba(13,10,11,.85);
}
#tablebox{position:absolute;inset:0}
#tablecanvas{position:absolute;inset:0}
#tableitems{position:absolute;inset:0}
.titem{
  position:absolute;top:0;left:0;cursor:grab;
  user-select:none;-webkit-user-select:none;touch-action:none;
}
.titem.dragging{cursor:grabbing}
.titem-card{
  width:124px;height:166px;
  background-size:cover;background-position:center;
  border-radius:5px;
  box-shadow:0 10px 24px rgba(0,0,0,.55);
}
/* narrow: smaller cards so the four-card fan clears both edges on a phone
   (must match the `tiny` card width in js/table.js so physics ≈ visual). */
@media (max-width:640px){ .titem-card{width:104px;height:139px} }
.titem-chip{
  width:68px;height:68px;border-radius:50%;
  background:url('../assets/img/chip.jpg') center/cover;
  box-shadow:0 10px 20px rgba(0,0,0,.6);
}
.titem-die{
  width:52px;height:52px;
  background:url('../assets/img/die.webp') center/contain no-repeat;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.55));
}
.titem-slip{
  background:var(--paper);color:var(--soot);padding:8px 12px;
  font-family:'Fragment Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  box-shadow:0 8px 18px rgba(0,0,0,.5);white-space:nowrap;
}
.titem-slip em{font-style:normal;color:var(--ember)}
.table-deck{
  position:absolute;right:9%;top:47%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-decoration:none;pointer-events:auto;
}
.deck-stack{position:relative;width:92px;height:113px;display:block;transition:transform .2s ease}
.deck-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px;box-shadow:0 8px 18px rgba(0,0,0,.55)}
.deck-stack img:nth-child(1){transform:rotate(-6deg) translateY(3px)}
.deck-stack img:nth-child(2){transform:rotate(3deg)}
.deck-stack img:nth-child(3){transform:rotate(-1deg) translateY(-2px)}
.table-deck:hover .deck-stack,.table-deck:focus-visible .deck-stack{transform:translateY(-5px)}
.deck-label{color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.85)}
.table-deck:hover .deck-label,.table-deck:focus-visible .deck-label{color:var(--red);outline:0}
@media (max-width:700px){.table-deck{right:7%;top:auto;bottom:24vh;transform:none}.deck-stack{width:74px;height:91px}}
.press-line{
  position:absolute;bottom:9vh;left:50%;transform:translateX(-50%);
  color:#e2dccb;text-shadow:0 1px 10px rgba(8,10,7,.8);
  display:flex;gap:14px;align-items:center;justify-content:center;
  flex-wrap:wrap;width:90vw;text-align:center;
}
.press-line i{font-style:normal;color:var(--red)}

/* ── CH.4 ON CAMERA ────────────────────────────────── */
.parlor-tag{position:absolute;top:14vh;left:50%;transform:translateX(-50%)}
.reel-press{
  position:absolute;left:50%;bottom:calc(9vh + env(safe-area-inset-bottom));transform:translateX(-50%);
  color:#8a8478;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;width:90vw;text-align:center;
}
.reel-press a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(242,226,175,.4);display:inline-block;padding:12px 4px 3px;margin:-12px 0 -3px}
.reel-press a:hover,.reel-press a:focus-visible{color:var(--red);border-color:var(--red);outline:0}
.reel-press i{font-style:normal;color:var(--mauve)}
/* projector cone from above — ties the screen into the room */
.beam{
  position:absolute;left:50%;top:0;height:52%;width:min(94vw,860px);
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(242,226,175,.11), rgba(243,89,44,.05) 55%, transparent);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
  mix-blend-mode:screen;opacity:0;pointer-events:none;
}
.reel{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  width:min(88vw,780px);aspect-ratio:16/9;
  background:
    radial-gradient(70% 90% at 50% 20%, rgba(90,11,6,.35), transparent 70%),
    var(--soot-2);
  border:1px solid rgba(231,229,219,.16);
  opacity:0;
}
.reel iframe{width:100%;height:100%;border:0;display:block}
.reel-play{position:absolute;inset:0;display:grid;place-items:center;width:100%}
.reel-thumb{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.04) brightness(.86);
}
.reel-tri{
  position:relative;width:0;height:0;z-index:1;
  border-left:26px solid var(--red);border-top:16px solid transparent;border-bottom:16px solid transparent;
  filter:drop-shadow(0 4px 14px rgba(13,10,11,.7));
  transition:transform .18s ease;
}
.reel-play:hover .reel-tri,.reel-play:focus-visible .reel-tri{transform:scale(1.15)}
.reel-play:focus-visible{outline:1px solid var(--red);outline-offset:-1px}
.hands{position:absolute;inset:0;pointer-events:none}
.hand{
  position:absolute;top:50%;width:min(82vw,94vh);aspect-ratio:688/768;height:auto;transform:translateY(-50%);
  background-image:url('../assets/img/hands.jpg');background-size:200% 100%;
  background-repeat:no-repeat;
  mix-blend-mode:screen;opacity:0;
}
.hand-l,.hand-r{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 24%,#000 74%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 20%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 24%,#000 74%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.hand-l{left:0;background-position:0 50%;transform:translate(-70%,-50%)}
.hand-r{right:0;background-position:100% 50%;transform:translate(70%,-50%)}
#burst{position:absolute;inset:0;pointer-events:none}

/* ── CH.5 THE ARCHIVE ──────────────────────────────── */
.arch-wrap{position:relative;width:min(92vw,980px);height:min(80dvh,740px)}
.arch-tag{position:absolute;top:0;left:0;color:#a99fbb;z-index:4;text-shadow:0 1px 12px rgba(13,10,11,.92)}
.arch-a{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.arch-a .exhibit{position:absolute;}
.headshot{
  position:relative;flex:0 0 132px;aspect-ratio:3/4;
  background:rgba(231,229,219,.04);
  border:1px dashed rgba(231,229,219,.28);
  display:grid;place-items:center;text-align:center;
  transform:rotate(-2.2deg);
}
.headshot-note{color:#6c655f;font-size:9px;line-height:1.8}
.headshot::before,.headshot::after{
  content:'';position:absolute;width:34px;height:12px;
  background:rgba(231,229,219,.1);transform:rotate(-40deg);
}
.headshot::before{top:-6px;left:-10px}
.headshot::after{bottom:-6px;right:-10px;transform:rotate(-40deg)}
.arch-bio{
  max-width:480px;color:var(--body);
  font-weight:500;
  font-size:clamp(14.5px,2vw,17px);line-height:1.65;
}
.exhibit{
  position:relative;z-index:2;width:min(78vw,340px);
  background:linear-gradient(160deg, rgb(30,23,50), rgb(16,12,18) 70%);
  border:1px solid rgba(81,58,96,.6);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  padding:16px 18px 14px;
  color:var(--paper);
}
.ex-no{color:#a99fbb;margin-bottom:10px}
.ex-name{font-family:'General Sans',sans-serif;font-weight:600;letter-spacing:-.015em;font-size:clamp(21px,3.4vw,30px);line-height:1.05}
.ex-desc{color:var(--body);margin-top:10px;font-size:15px}
.ex-meta{color:#a99fbb;margin-top:14px}
/* phone: shorter cards so the upright three-stack fits below the tag without overflow */
@media (max-width:700px){
  .exhibit{width:min(86vw,330px);padding:13px 16px 12px}
  .ex-no{margin-bottom:6px}
  .ex-name{font-size:19px}
  .ex-desc{font-size:13px;line-height:1.5;margin-top:8px}
  .ex-meta{font-size:10px;margin-top:10px}
}
#exB .harmonograph{position:absolute;left:50%;top:50%;width:min(58vw,380px);height:auto;transform:translate(-50%,-50%);opacity:.24;z-index:0}
.harmonograph path{stroke:var(--violet);stroke-width:.7}
.arch-foot{position:absolute;z-index:1;bottom:0;right:0;text-align:right;color:#a99fbb;line-height:1.7}

/* ── CH.5 ABOUT — a card floating in space ─────────── */
.bio-ghost{
  position:absolute;left:50%;top:50%;width:min(130vw,1500px);height:auto;
  transform:translate(-50%,-50%) rotate(-8deg);
  opacity:.05;filter:blur(2px);pointer-events:none;
}
.bio-props{position:absolute;inset:0;pointer-events:none}
.bp{position:absolute;height:auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.55))}
.bp-1{right:14%;top:19%;width:108px;transform:rotate(-9deg)}
.bp-2{left:12%;bottom:17%;width:88px;transform:rotate(12deg)}
.bp-3{left:20%;top:15%;width:66px;opacity:.82;transform:rotate(-4deg)}
@media (max-width:560px){
  .bp-1{right:6%;top:14%;width:76px}
  .bp-2{left:6%;bottom:12%;width:60px}
  .bp-3{display:none}
}
.bio-persp{perspective:950px;display:grid;place-items:center}
.bio-rig{}
.bio-card{
  display:flex;gap:26px;align-items:flex-start;
  width:min(90vw,600px);padding:34px 34px 30px;
  background:linear-gradient(160deg, rgb(30,23,50), rgb(16,12,18) 72%);
  border:1px solid rgba(81,58,96,.65);
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 4px 18px rgba(0,0,0,.4);
  transform-style:preserve-3d;
}
.bio-tag{color:#a87b80;margin-bottom:12px}
.bio-copy{flex:1}
@media (max-width:560px){
  .bio-card{flex-direction:column;gap:18px;padding:24px 22px}
  .bio-card .headshot{flex-basis:auto;width:104px}
}

/* ── CH.6 THE ORACLE ───────────────────────────────── */
.oracle-tag{position:absolute;top:12vh;left:50%;transform:translateX(-50%)}
.ball-rig{position:relative;transform:translateY(-4vh)}
.eightball{position:relative;width:min(72vw,400px);aspect-ratio:1;}
.ball-body{
  position:absolute;inset:-12%;border-radius:50%;
  background:url('../assets/img/ball.jpg') center/cover;
  mix-blend-mode:screen;
}
.ball-spec{
  position:absolute;inset:2%;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(20% 14% at 33% 22%, rgba(255,255,255,.22), transparent 72%),
    radial-gradient(42% 30% at 70% 86%, rgba(81,58,96,.3), transparent 74%);
  mix-blend-mode:screen;
}
.ball-window{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 46% 40%, #1d1836, var(--indigo) 24%, #100c22 76%);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:inset 0 8px 22px rgba(0,0,0,.8);
}
.ball-window p{
  width:82%;text-align:center;
  font-family:'Fragment Mono',monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cream);line-height:1.42;
  max-height:94%;overflow:hidden;
}
.ball-shadow{
  position:absolute;left:50%;bottom:-9%;transform:translateX(-50%);
  width:58%;height:8%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent 72%);
  filter:blur(7px);
}
.oracle-form{
  position:absolute;bottom:13vh;left:50%;transform:translateX(-50%);
  width:min(86vw,420px);display:flex;gap:8px;
}
.oracle-form .txt{flex:1}
.oracle-go{
  border:1px solid rgba(224,32,46,.55);color:var(--red);padding:0 18px;
  letter-spacing:.18em;
}
.oracle-go:hover,.oracle-go:focus-visible{background:var(--red);color:var(--soot);outline:0}

/* ── living atmosphere layers (transform-only, cheap) ── */
.atmo{position:absolute;inset:-12%;pointer-events:none;overflow:hidden}
.atmo::before,.atmo::after{
  content:'';position:absolute;width:75vmax;height:75vmax;border-radius:50%;
  mix-blend-mode:screen;
}
.atmo-table::before{
  top:-22%;left:-14%;
  background:radial-gradient(closest-side, rgba(145,98,103,.09), transparent 72%);
  animation:drift-a 47s ease-in-out infinite alternate;
}
.atmo-table::after{
  bottom:-28%;right:-16%;
  background:radial-gradient(closest-side, rgba(90,11,6,.13), transparent 70%);
  animation:drift-b 61s ease-in-out infinite alternate;
}
.atmo-arch::before{
  top:-18%;right:-12%;
  background:radial-gradient(closest-side, rgba(81,58,96,.13), transparent 72%);
  animation:drift-b 53s ease-in-out infinite alternate;
}
.atmo-arch::after{
  bottom:-24%;left:-18%;
  background:radial-gradient(closest-side, rgba(35,28,88,.12), transparent 70%);
  animation:drift-a 67s ease-in-out infinite alternate;
}
.atmo-oracle::before{
  bottom:-40%;left:50%;margin-left:-37vmax;
  background:radial-gradient(closest-side, rgba(90,11,6,.15), transparent 70%);
  animation:breathe 9s ease-in-out infinite alternate;
}
.atmo-oracle::after{
  top:-26%;right:-20%;
  background:radial-gradient(closest-side, rgba(145,98,103,.07), transparent 72%);
  animation:drift-a 59s ease-in-out infinite alternate;
}
@keyframes drift-a{to{transform:translate(7vw,5vh) scale(1.18)}}
@keyframes drift-b{to{transform:translate(-6vw,-7vh) scale(1.12)}}
@keyframes breathe{to{transform:scale(1.14)}}
html.reduced .atmo::before,html.reduced .atmo::after{animation:none}
@media (prefers-reduced-motion:reduce){.atmo::before,.atmo::after{animation:none}}

/* ── inputs (shared) ───────────────────────────────── */
.txt{
  width:100%;background:rgba(231,229,219,.045);color:var(--paper);
  border:1px solid rgba(231,229,219,.22);border-radius:0;
  padding:12px 14px;font:inherit;font-size:16px;
}
.txt::placeholder{color:#6c655f}
.txt:focus{outline:0;border-color:var(--paper)}
textarea.txt{resize:vertical;min-height:88px}

/* ── the oracle, folded into the booking room ─────── */
.bo-oracle{
  display:flex;gap:20px;align-items:center;
  padding:6px 0 18px;margin-bottom:6px;
  border-bottom:1px dashed rgba(231,229,219,.16);
}
.bo-oracle .ball-rig{flex:0 0 auto;transform:none}
.bo-oracle .eightball{width:118px}
.bo-oracle .ball-shadow{bottom:-7%}
.bo-oracle-copy{flex:1;min-width:0}
.bo-oracle-tag{color:var(--mauve);margin-bottom:12px}
.bo-oracle .oracle-form{position:static;transform:none;left:auto;bottom:auto;width:100%;display:flex;gap:8px}
.bo-oracle .oracle-form .txt{flex:1}
.bo-oracle-readout{
  color:var(--cream);margin-top:12px;min-height:3.8em;
  letter-spacing:.04em;line-height:1.5;text-transform:none;font-size:12.5px;
}
@media (max-width:560px){
  .bo-oracle{flex-direction:column;text-align:center;gap:14px}
  .bo-oracle-tag{margin-bottom:8px}
}

/* ── BOX OFFICE ────────────────────────────────────── */
#boxoffice{
  position:fixed;inset:0;z-index:1;
  overscroll-behavior:contain;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(90,11,6,.28), transparent 60%),
    #090607;
  /* block (not flex) scroll container: a flex column that centers an overflowing
     child with margin:auto CLIPS the ends and the bottom ("next") becomes
     unreachable. Block overflow always scrolls to the content's bottom. */
  display:block;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  visibility:hidden;
}
#boxoffice.open{visibility:visible;z-index:8}
.bo-close{
  display:none;
  position:fixed;top:calc(14px + env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:9;
  color:var(--paper);letter-spacing:.18em;padding:14px 16px;
  background:rgba(13,10,11,.6);border:1px solid rgba(231,229,219,.25);
}
.bo-close:hover,.bo-close:focus-visible{border-color:var(--red);color:var(--red);outline:0}
#boxoffice.open .bo-close{display:block}
.bo-legal{display:flex;gap:14px}
.bo-legal a{color:#8a8478;text-decoration:none;display:inline-block;padding:13px 6px;margin:-13px -2px}
.bo-legal a:hover{color:var(--paper)}
.bo-signin{border:1px solid rgba(231,229,219,.2);padding:12px 10px;margin:-8px 0}
.bo-room{
  width:100%;max-width:560px;margin-inline:auto;box-sizing:border-box;
  /* min-height fills the viewport so it reads centered when it fits, but grows past
     it (and #boxoffice scrolls) when the form is taller than the screen. */
  min-height:100%;
  padding:calc(26px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.bo-kicker{color:var(--red)}
.bo-title{font-family:'General Sans',sans-serif;font-weight:600;letter-spacing:-.015em;font-size:clamp(32px,7vw,48px);margin-top:8px}
.bo-sub{color:var(--body);margin-top:12px;font-size:15px;max-width:44ch}
.slip{accent-color:var(--red);
  position:relative;background:var(--paper);color:var(--soot);
  padding:30px 26px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.65);
}
.slip-edge{
  position:absolute;left:0;right:0;top:-7px;height:8px;
  background:var(--paper);
  clip-path:polygon(0 100%,2.5% 0,5% 100%,7.5% 0,10% 100%,12.5% 0,15% 100%,17.5% 0,20% 100%,22.5% 0,25% 100%,27.5% 0,30% 100%,32.5% 0,35% 100%,37.5% 0,40% 100%,42.5% 0,45% 100%,47.5% 0,50% 100%,52.5% 0,55% 100%,57.5% 0,60% 100%,62.5% 0,65% 100%,67.5% 0,70% 100%,72.5% 0,75% 100%,77.5% 0,80% 100%,82.5% 0,85% 100%,87.5% 0,90% 100%,92.5% 0,95% 100%,97.5% 0,100% 100%);
}
.step{border:0}
.slip legend{color:#5c574e;margin-bottom:20px}
.q{margin-bottom:22px}
.q-label{font-weight:600;font-size:15.5px;margin-bottom:10px}
.q-label .opt{font-weight:500;color:#5c574e;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  border:1px solid #b9b4a8;padding:13px 16px;font-size:14.5px;font-weight:500;
  background:transparent;border-radius:0;
}
.chip:hover{border-color:var(--soot)}
.chip:focus-visible{border-color:var(--soot);outline:0}
.chip.on{background:var(--soot);color:var(--paper);border-color:var(--soot)}
.check{display:flex;gap:10px;align-items:center;padding:12px 0;margin-top:2px;font-size:14px;color:#5c574e}
/* custom checkbox that matches the ticket — soot fill, cream check, no raw native box */
.check input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;width:18px;height:18px;
  border:1px solid #b9b4a8;background:transparent;cursor:pointer;position:relative;border-radius:0;
}
.check input[type="checkbox"]:checked{background:var(--soot);border-color:var(--soot)}
.check input[type="checkbox"]:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:2px solid var(--paper);border-top:0;border-left:0;transform:rotate(45deg)}
.slip .txt{background:transparent;border-color:#b9b4a8;color:var(--soot)}
.slip .txt::placeholder{color:#6c655f}
.slip .txt:focus{border-color:var(--soot)}
/* the native date control on the paper stub: match font + tame the picker glyph */
.slip input[type="date"]{font-family:'Fragment Mono',monospace;font-size:13px;letter-spacing:.03em;color:var(--soot)}
.slip input[type="date"]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;filter:saturate(0)}
.slip input[type="date"]::-webkit-datetime-edit-fields-wrapper{color:var(--soot)}
.step-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;border-top:1px dashed #b9b4a8;padding-top:18px}
.navbtn{color:#5c574e;padding:13px 10px;min-height:44px;display:inline-flex;align-items:center}
.navbtn:hover,.navbtn:focus-visible{color:var(--soot);outline:0}
.dots{color:#5c574e;letter-spacing:.3em}
.sendbtn{
  background:var(--red);color:var(--paper);
  font-family:'General Sans',sans-serif;font-weight:600;font-size:16px;letter-spacing:.02em;
  padding:16px 26px;flex:1;
}
.sendbtn:hover,.sendbtn:focus-visible{background:#c11824;outline:0}
.sendbtn[disabled]{opacity:.6;cursor:wait}
.formerr{color:var(--red);margin-top:10px}
.hp{position:absolute;left:-9999px;top:-9999px}
.bookdone{text-align:center;padding:40px 0}
.bookdone h3{font-family:'General Sans',sans-serif;font-weight:600;letter-spacing:-.015em;font-size:clamp(24px,6vw,36px);margin:14px 0 10px}
.bookdone p{color:var(--body)}
.done-ref{color:var(--red)}
.done-alt{margin-top:16px;color:#6c655f}
.done-alt a{color:var(--paper)}
.site-foot{
  width:100%;margin-top:auto;
  display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;
  color:#8a8478;
  border-top:1px solid rgba(231,229,219,.1);
  background:rgba(13,10,11,.4);
  padding:16px max(22px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}
.sf-credit{flex-basis:100%;text-align:center;color:#5c574e;margin-top:2px;letter-spacing:.06em}
.sf-credit a{color:#8a8478;text-decoration:none}
.sf-credit a:hover,.sf-credit a:focus-visible{color:var(--paper)}
.bo-socials{display:flex;gap:14px}
.bo-socials a{color:var(--body);text-decoration:none;display:inline-block;padding:13px 6px;margin:-13px -2px}
.bo-socials a:hover{color:var(--red)}

/* ── review block ──────────────────────────────────── */
.review{border-top:1px dashed #b9b4a8;margin-top:4px;padding-top:12px}
.review .rrow{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:3px 0}
.review .rk{color:#8a8478;font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.review .rv{text-align:right}

/* ── narrow phones ── */
@media (max-width:560px){
  .enter-cue{bottom:calc(72px + env(safe-area-inset-bottom))}
  .table-deck{
  position:absolute;right:9%;top:47%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-decoration:none;pointer-events:auto;
}
.deck-stack{position:relative;width:92px;height:113px;display:block;transition:transform .2s ease}
.deck-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px;box-shadow:0 8px 18px rgba(0,0,0,.55)}
.deck-stack img:nth-child(1){transform:rotate(-6deg) translateY(3px)}
.deck-stack img:nth-child(2){transform:rotate(3deg)}
.deck-stack img:nth-child(3){transform:rotate(-1deg) translateY(-2px)}
.table-deck:hover .deck-stack,.table-deck:focus-visible .deck-stack{transform:translateY(-5px)}
.deck-label{color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.85)}
.table-deck:hover .deck-label,.table-deck:focus-visible .deck-label{color:var(--red);outline:0}
@media (max-width:700px){.table-deck{right:7%;top:auto;bottom:24vh;transform:none}.deck-stack{width:74px;height:91px}}
.press-line{bottom:calc(5vh + env(safe-area-inset-bottom));row-gap:6px}
  #hudlogo{height:24px}
  #grain{animation-duration:1.8s}
  .eightball{width:min(70vw,330px)}
    .headshot{flex-basis:96px}
  .site-foot{justify-content:center;text-align:center}
  .arch-foot{display:none}
}

/* ── desktop ───────────────────────────────────────── */
@media (min-width:820px){
  .hud-tl{left:26px;top:22px}
  .hud-tr{right:26px;top:22px}
  #navpanel{right:26px}  /* match the HUD's desktop inset so the panel aligns to BOOK */
  .hud-bl{left:26px;bottom:22px}
  .hud-br{right:26px;bottom:22px}
  .titem-card{width:156px;height:209px}
    .bo-room{max-width:620px}
  .arch-wrap{height:min(72dvh,640px)}
}

/* ── static fallback: no JS, or reduced motion ─────── */
html:not(.js) #spacer,html.reduced #spacer{display:none}
html:not(.js) #stage,html.reduced #stage{position:static;overflow:visible}
html:not(.js) .scene,html.reduced .scene{position:relative;visibility:visible;min-height:100dvh}
html:not(.js) #boxoffice,html.reduced #boxoffice{position:static;visibility:visible;min-height:100dvh}
html:not(.js) #loader,html.reduced #loader,
html:not(.js) #fog,html.reduced #fog,
html:not(.js) #dust,html.reduced #dust{display:none}
html:not(.js) .hand,html.reduced .hand{opacity:.5;transform:translateY(-50%)}
html:not(.js) .arch-wrap,html.reduced .arch-wrap{height:auto;padding:12vh 0}
html:not(.js) .arch-a,html.reduced .arch-a,
html:not(.js) .arch-b,html.reduced html:not(.js) .arch-a,html.reduced .arch-a{display:flex;flex-direction:column;gap:14px;align-items:center}
html:not(.js) .arch-a .exhibit,html.reduced .arch-a .exhibit{position:relative}
html:not(.js) .beam,html.reduced .beam{opacity:.6}
html:not(.js) .reel,html.reduced .reel{opacity:1;pointer-events:auto}
html:not(.js) .reel-press,html.reduced .reel-press{position:relative;bottom:auto;transform:none;margin:20px auto 0}
html:not(.js) .step[hidden]{display:block}
html.reduced #grain{animation:none}
@media (prefers-reduced-motion:reduce){#grain{animation:none}}