:root{
  --black:#000; --gold:#c9a45c; --rule:#6b5631; --bone:#efe6d2; --well:#1a0f08; --mute:#8f7a52;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --black:#000; } }
:root[data-theme="dark"]{ --black:#000; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--black); color:var(--bone);
  font-family:Digits,"Cormorant Garamond", Georgia, "Times New Roman", serif; font-size:22px; line-height:1.6; overflow-x:hidden; }
a{ color:var(--gold); } a:hover{ color:var(--bone); }
img{ max-width:100%; }
.caps{ font-family:Digits,Cinzel, Georgia, serif; letter-spacing:.16em; }
header{ position:sticky; top:0; z-index:5; background:var(--black); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px;
  padding:28px clamp(20px,5vw,72px); border-bottom:1px solid var(--rule); }
.mark{ position:relative; background:none; border:0; padding:0; cursor:pointer; width:60px; height:60px; }
.mark img{ width:100%; height:100%; display:block; }

nav{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 36px; }
nav .item{ font-family:Digits,Cinzel, Georgia, serif; font-size:18px; letter-spacing:.16em; color:var(--bone);
  background:none; border:0; border-bottom:1px solid transparent; padding:10px 0; cursor:pointer; }
nav .item:hover{ color:var(--gold); }
nav .item[aria-current="page"]{ color:var(--gold); border-bottom-color:var(--gold); }
#mix{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px; background:none; color:var(--gold); border:1px solid var(--gold); font-family:Digits,Cinzel, Georgia, serif; font-size:16px; letter-spacing:.14em; cursor:pointer; }
#mix:hover{ background:var(--gold); color:var(--black); }
#mix svg{ width:12px; height:14px; }
#call{ width:40px; height:44px; display:grid; place-items:center; color:var(--gold); opacity:0; transition:opacity 1.2s ease; }
#call svg{ width:16px; height:28px; }
button:focus-visible, a:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.wrap{ max-width:1320px; margin:0 auto; padding:clamp(48px,7vw,100px) clamp(20px,5vw,72px); }
section + section, footer{ border-top:1px solid var(--rule); }
h1,h2{ font-family:Digits,Cinzel, Georgia, serif; font-weight:400; color:var(--gold); margin:0; }
h2{ font-size:48px; letter-spacing:.08em; }
p{ margin:0; max-width:540px; }
.hero{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr)); gap:56px; align-items:center;
  padding-top:clamp(96px,11vw,170px); }
.medal{ position:relative; width:100%; max-width:580px; aspect-ratio:1/1; justify-self:center; transform-style:preserve-3d; will-change:transform; }
.medal img{ width:100%; height:100%; display:block; }
.sheen{ position:absolute; inset:-12%; pointer-events:none; mix-blend-mode:screen; }
#gate{ background:linear-gradient(100deg, var(--bone) 42%, #fff3cf 50%, var(--bone) 58%); background-size:300% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 9s ease-in-out infinite, throb 7s ease-in-out infinite; }
@keyframes throb{ 0%,60%,100%{ filter:drop-shadow(0 0 0 rgba(232,190,110,0)); } 72%{ filter:drop-shadow(0 0 var(--glow,9px) rgba(232,190,110,.85)); } 84%{ filter:drop-shadow(0 0 2px rgba(232,190,110,.2)); } }
@keyframes shimmer{ 0%,80%{ background-position:100% 0; } 95%,100%{ background-position:0 0; } }
@media (prefers-reduced-motion: reduce){ #gate{ animation:none; } }
.hero .text{ display:flex; flex-direction:column; gap:28px; }
.hero h1{ font-size:clamp(64px,8vw,124px); line-height:.95; letter-spacing:.06em; }
.tag{ font-family:Digits,Cinzel, Georgia, serif; font-size:20px; letter-spacing:.3em; color:var(--gold); }
.lede{ font-size:30px; line-height:1.35; max-width:520px; }
.btns{ display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; }
.btn{ display:inline-flex; align-items:center; gap:14px; min-height:56px; padding:0 30px; text-decoration:none;
  font-family:Digits,Cinzel, Georgia, serif; font-size:17px; letter-spacing:.16em; border:1px solid var(--gold); }
.btn.solid{ background:var(--gold); color:var(--black); font-weight:600; } .btn.solid:hover{ background:var(--bone); border-color:var(--bone); color:var(--black); }
.btn svg{ width:14px; height:24px; }
.two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:48px; }
.col{ display:flex; flex-direction:column; gap:20px; }
.links{ display:flex; flex-wrap:wrap; gap:12px 28px; font-family:Digits,Cinzel, Georgia, serif; font-size:18px; letter-spacing:.12em; }
.links a{ padding:10px 0; }
.dates{ border-top:1px solid var(--rule); }
.dates div{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding:20px 0; border-bottom:1px solid var(--rule); }
.dates span:first-child{ color:var(--gold); }
.head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:40px; }
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:24px; }
.tile{ display:flex; flex-direction:column; gap:14px; }
.ph{ aspect-ratio:4/3; background:var(--well); display:grid; place-items:center; color:var(--mute); padding:20px; text-align:center; }
footer .wrap{ padding-bottom:140px; align-items:end; }
:root{ --beat:.625s; }
/* emblem beat pulse removed at Josh's request; lens flare kept */
@keyframes beat{ 0%{ filter:brightness(1.18) drop-shadow(0 0 10px rgba(232,190,110,.35)); } 35%,100%{ filter:brightness(1) drop-shadow(0 0 0 rgba(232,190,110,0)); } }
@media (prefers-reduced-motion: reduce){ body.playing .medal img, body.playing .mark img{ animation:none; } }
#filmLoop{ position:relative; cursor:ew-resize; overflow:hidden; }
.playhead{ position:absolute; top:0; bottom:0; width:1px; background:var(--gold); left:0; opacity:0; transition:opacity .4s; }
#filmLoop:hover .playhead{ opacity:.8; }
.timeline{ display:flex; gap:28px; overflow-x:auto; cursor:grab; padding:8px 0 24px; margin-top:40px; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; user-select:none; }
.timeline.dragging{ cursor:grabbing; }
.yr{ flex:0 0 min(80vw,320px); border-top:1px solid var(--gold); padding-top:20px; }
.yr h3{ font-family:Digits,Cinzel, Georgia, serif; font-weight:400; font-size:48px; color:var(--gold); margin:0 0 12px; letter-spacing:.06em; }
.yr p{ margin:0 0 8px; }
.page h2{ font-size:34px; margin:56px 0 18px; }
.page p{ margin-bottom:18px; max-width:640px; }
.page h1{ font-size:clamp(48px,6vw,80px); letter-spacing:.1em; margin-bottom:28px; }
#player{ position:fixed; right:28px; bottom:calc(28px + env(safe-area-inset-bottom,0px)); width:64px; height:64px; border-radius:50%;
  background:var(--black); border:1px solid var(--gold); color:var(--gold); display:grid; place-items:center; cursor:pointer; padding:0; }
#player svg{ width:20px; height:34px; }
@media (prefers-reduced-motion: reduce){ #call{ transition:none; } }
[hidden]{ display:none !important; }

#mcbar{ position:sticky; top:var(--hh,116px); z-index:4; background:var(--black); border-bottom:1px solid var(--rule); }
#mcbar iframe{ display:block; width:100%; height:60px; border:0; }
.list{ border-top:1px solid var(--rule); margin-top:24px; max-width:760px; }
.list a, .list div{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding:18px 0; border-bottom:1px solid var(--rule); text-decoration:none; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:20px; margin-top:32px; }
.fadeout{ transition:opacity 1.4s ease; opacity:0 !important; }

#rift{ position:fixed; inset:0; width:100%; height:100%; border:0; z-index:60; background:#000; opacity:0; transition:opacity .7s ease; }
#rift.open{ opacity:1; }
#tear{ position:fixed; inset:0; z-index:59; pointer-events:none; }
#tear span{ position:absolute; left:0; right:0; background:rgba(201,164,92,.18); mix-blend-mode:screen; animation:tear .25s steps(2) infinite; }
@keyframes tear{ 0%{ transform:translateX(-6%); } 50%{ transform:translateX(5%); background:rgba(180,83,42,.25); } 100%{ transform:translateX(-2%); } }
body.breaking header, body.breaking main{ animation:breakdown 1.1s steps(9) forwards; }
@keyframes breakdown{
  0%{ transform:none; filter:none; clip-path:inset(0 0 0 0); }
  20%{ transform:translate(-8px,2px) skewX(-2deg); filter:hue-rotate(20deg) contrast(1.4); clip-path:inset(12% 0 30% 0); }
  40%{ transform:translate(10px,-3px); filter:saturate(2) contrast(1.8); clip-path:inset(40% 0 8% 0); }
  60%{ transform:translate(-14px,0) skewX(3deg); filter:invert(.15) contrast(2); clip-path:inset(5% 0 55% 0); }
  80%{ transform:translate(6px,4px); filter:brightness(1.6) contrast(2.4); clip-path:inset(30% 0 30% 0); opacity:.6; }
  100%{ transform:translate(0,0); filter:brightness(0); clip-path:inset(50% 0 50% 0); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ body.breaking header, body.breaking main{ animation:none; } #tear{ display:none; } }
html,body{overflow-x:clip}

/* Works that answer the Threshold: faint brightening, its own 7s breath */
@media (prefers-reduced-motion: no-preference){ .answers{ animation:answer 7s ease-in-out infinite; } }
@keyframes answer{ 0%,70%,100%{ filter:brightness(1); } 82%{ filter:brightness(1.14) saturate(1.08); } }
/* Live state: Threshold glows while Anubis is out playing */
body.live #gate{ color:#E8C46E; text-shadow:0 0 12px rgba(232,196,110,.8),0 0 28px rgba(232,196,110,.45); }
/* Apparitions: Anubis emerging from the site's own darkness */
.appar{ position:fixed; bottom:0; height:72vh; width:auto; pointer-events:none; z-index:30; opacity:0; mix-blend-mode:screen; transition:opacity 2.4s ease;
  -webkit-mask-image:radial-gradient(ellipse 58% 52% at 50% 46%,#000 52%,transparent 100%); mask-image:radial-gradient(ellipse 58% 52% at 50% 46%,#000 52%,transparent 100%); }
.appar.on{ opacity:var(--appar-o,.42); }
.appar.fast{ transition:opacity .5s ease; }

.vwrap{ position:relative; display:block; }
.vsound{ position:absolute; right:10px; bottom:10px; width:40px; height:40px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#E8E1D3; display:grid; place-items:center; cursor:pointer; padding:0; }
.vsound:hover{ background:rgba(0,0,0,.8); color:#E3C276; }
.vsound:focus-visible{ outline:2px solid #E3C276; outline-offset:2px; }
/* full-height numerals everywhere (the serif uses small old-style figures by default) */
html,body,figcaption,h1,h2,h3,p,span,a{font-variant-numeric:lining-nums}

/* Digits only: borrow numerals with a flagged 1 so it never reads as a capital I */
@font-face{font-family:Digits;src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Times"),local("Noto Serif"),local("Liberation Serif"),local("DejaVu Serif");unicode-range:U+0030-0039;size-adjust:92%;}

.vessel-img{float:right;width:min(42%,420px);margin:0 0 24px 40px;border:1px solid rgba(201,162,74,.35)}
@media (max-width:700px){.vessel-img{float:none;width:100%;margin:0 0 24px}}

/* Wordmark: one line, measured to the tagline beneath it */
.hero h1{ white-space:nowrap; position:relative; margin-right:-.06em; }
.hero .tag{ width:fit-content; max-width:100%; margin-right:-.3em; }
/* Opening eyes above the wordmark */
.hero-eyes{ position:absolute; left:50%; bottom:100%; width:62%; aspect-ratio:3/1; transform:translateX(-50%); object-fit:cover; object-position:50% 37%;
  pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity 2.4s ease;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%); mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%); }
.hero-eyes.on{ opacity:.9; }
.hero-eyes.fast{ transition:opacity .5s ease; }
/* Vessel page: the black beside the text, where large apparitions surface */
.vessel-slot{ float:right; position:sticky; top:calc(var(--hh,116px) + 24px); width:min(40%,470px); aspect-ratio:720/1270; margin:0 0 24px 40px; pointer-events:none;
  opacity:calc(.3 + .7 * var(--vp,1)); transition:opacity .8s ease; }
.vessel-pres{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; opacity:0; transition:opacity 2.4s ease;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 46%,#000 55%,transparent 100%); mask-image:radial-gradient(ellipse 60% 55% at 50% 46%,#000 55%,transparent 100%); }
.vessel-pres.on{ opacity:.95; }
/* Visions: standing section index on the left */
.vis{ display:grid; grid-template-columns:150px 1fr; gap:40px; align-items:start; margin-top:32px; }
.vis-nav{ position:sticky; top:calc(var(--hh,116px) + 24px); display:flex; flex-direction:column; gap:4px; }
.vis-nav button{ background:none; border:0; border-left:1px solid var(--rule); color:var(--bone); font:inherit; font-size:18px; letter-spacing:.08em; text-align:left; padding:10px 0 10px 16px; cursor:pointer; transition:color .3s, border-color .3s; }
.vis-nav button:hover, .vis-nav button[aria-current]{ color:var(--gold); border-left-color:var(--gold); }
.vis-nav button[aria-disabled]{ cursor:default; opacity:.45; }
.vis-nav button[aria-disabled]:hover{ color:var(--bone); border-left-color:var(--rule); }
.vis-nav button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.vis-body [id^="vis-"]{ scroll-margin-top:calc(var(--hh,116px) + 24px); }
@media (max-width:900px){
  .vis{ grid-template-columns:1fr; gap:20px; }
  .vis-nav{ flex-direction:row; overflow-x:auto; background:var(--black); z-index:3; padding:6px 0; }
  .vis-nav button{ border-left:0; border-bottom:1px solid var(--rule); padding:10px 14px; white-space:nowrap; }
  .vis-nav button:hover, .vis-nav button[aria-current]{ border-bottom-color:var(--gold); }
}
/* Vessel: his voice shows only while his body is absent */
.vessel-line{ position:absolute; left:8%; right:8%; top:44%; transform:translateY(-50%); margin:0; max-width:none; text-align:center;
  font-family:"Cormorant Garamond", Georgia, serif; font-size:clamp(22px,2vw,30px); line-height:1.4; letter-spacing:.06em; color:var(--gold); opacity:0; transition:opacity 2.2s ease; }
.vessel-line.on{ opacity:.9; }
.vessel-line.quick{ transition:opacity .8s ease; }
/* Vessel on phones: the black bands between passages */
.vband{ position:relative; height:clamp(170px,52vw,240px); margin:8px 0 0; pointer-events:none; }
.vband-v{ position:absolute; left:50%; top:0; height:100%; transform:translateX(-50%); object-fit:cover; mix-blend-mode:screen; opacity:0; transition:opacity 2s ease;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 50%,transparent 100%); mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 50%,transparent 100%); }
.vband-v.fig{ aspect-ratio:720/1270; }
.vband-v.eyes{ width:92%; height:auto; aspect-ratio:3/1; top:50%; transform:translate(-50%,-50%); }
.vband-v.on{ opacity:.95; }
.vband .vessel-line{ top:50%; }
.hero-eyes.at-gate{ transform:translateX(-50%); aspect-ratio:5/1; }

/* Visions: the section labels run along the top of the gallery, at every size */
.vis{ grid-template-columns:1fr; gap:24px; }
.vis-nav{ flex-direction:row; flex-wrap:wrap; gap:0 6px; position:sticky; top:var(--hh,116px); z-index:3; background:var(--black); padding:8px 0; border-bottom:1px solid var(--rule); }
.vis-nav button{ border-left:0; border-bottom:1px solid transparent; padding:10px 16px; white-space:nowrap; }
.vis-nav button:hover, .vis-nav button[aria-current]{ border-left-color:transparent; border-bottom-color:var(--gold); }
.vis-nav button[aria-disabled]:hover{ border-bottom-color:transparent; }

/* Phones: a compact header, so the page starts on the first screen */
@media (max-width:700px){
  header{ gap:10px 14px; padding-top:calc(10px + env(safe-area-inset-top,0px)); padding-bottom:10px; }
  .mark{ width:42px; height:42px; }
  header nav{ flex-wrap:nowrap; overflow-x:auto; gap:0 18px; order:3; width:100%; -webkit-overflow-scrolling:touch; scrollbar-width:none; }   /* header nav only: a bare nav selector also caught the Vision room bar and pushed it to the foot of the page */
  nav::-webkit-scrollbar{ display:none; }
  nav .item{ font-size:14px; letter-spacing:.1em; white-space:nowrap; padding:8px 0; }
  #mix{ min-height:38px; padding:0 12px; font-size:13px; letter-spacing:.1em; }
  .vis-nav{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .vis-nav button{ font-size:15px; padding:10px 12px; }
}

/* alive: warmth by nearness (--w), shared breath when still (--breath) */
.alive{ --w:0; }
header.alive, .list.alive, hr.alive, .vis-nav.alive{ box-shadow:0 1px calc(10px * var(--w)) rgba(255,170,70,calc(.35 * var(--w))); }
img.alive, video.alive{ filter:brightness(calc(1 + .1 * var(--w))) sepia(calc(.14 * var(--w))); }
.btn.alive, #mix.alive{ box-shadow:0 0 calc(16px * var(--w)) rgba(255,170,70,calc(.3 * var(--w))); }
nav .item.alive, .page a.alive, .vis-nav button.alive{ text-shadow:0 0 calc(10px * var(--w)) rgba(255,170,70,calc(.45 * var(--w))); }
.mark, #mix, .btn, .hero h1, .page h1, .tag{ filter:brightness(calc(1 + .16 * var(--b, 0))); }

/* amber is his: the eyes carry it */
.hero-eyes, .appar, .vessel-pres, .vband-v{ filter:sepia(.25) saturate(1.25) hue-rotate(-6deg); }
/* his question, offered from the dark */
.ask-hand{ position:fixed; bottom:0; width:auto; z-index:40; pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity 2.4s ease;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%); mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%); }
.ask{ position:fixed; z-index:41; max-width:min(440px,86vw); opacity:0; transition:opacity 2.4s ease; pointer-events:none; }
.ask.on{ opacity:1; pointer-events:auto; }
.ask p{ margin:0 0 14px; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(22px,2vw,27px); line-height:1.35; color:#E3C276; text-shadow:0 2px 14px #000; }
.ask div{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; }
/* the answers are set like the emblem's tagline: gold capitals, divided by small gold points. No boxes. */
.ask button{ position:relative; background:none; border:0; padding:8px 14px; cursor:pointer; color:#c9a45c; font-family:"Cormorant Garamond", Georgia, serif; font-size:16px; letter-spacing:.24em; text-transform:uppercase;
  transition:color .8s ease, text-shadow .8s ease, opacity 1.4s ease, letter-spacing 1.4s ease, filter 1.4s ease; }
.ask button + button::before{ content:""; position:absolute; left:-2px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:#c9a45c; opacity:.7; }
.ask button:hover, .ask button:focus-visible{ color:#ffb347; text-shadow:0 0 12px rgba(255,170,70,.6); outline:none; }
.ask button.chosen{ color:#E3C276; text-shadow:0 0 16px rgba(227,194,122,.7); }
.ask button.gone{ opacity:0; letter-spacing:1em; filter:blur(3px); pointer-events:none; }

.ask-dark{ position:fixed; inset:0; z-index:39; pointer-events:none; opacity:0; transition:opacity 2s ease; } .ask-dark.on{ opacity:1; }

/* header kept clear: no Guest mix button, no Contact link (the mix is played from home, bookings live elsewhere).
   The mix button stays in the page, hidden, because the player reads its link from it. */
header #mix, header nav .item[data-page="contact"]{ display:none; }
/* the Threshold takes the place the Guest mix button held: far right, in the gold frame */
header nav #gate{ margin-left:auto; display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1px solid var(--gold); }
@media (max-width:700px){ header nav #gate{ min-height:36px; padding:0 12px; } }
header nav #gate{ font-family:Digits, Cinzel, Georgia, serif; font-size:16px; letter-spacing:.14em; color:var(--gold); background:none; }
@media (max-width:700px){ header nav #gate{ font-size:13px; letter-spacing:.1em; } }
/* All mixes: quiet rows; the title in gold, its year, length and sound beneath */
.allmixes{ margin-top:20px; max-width:900px; border-top:1px solid var(--rule); }
.am-row{ border-bottom:1px solid var(--rule); }
.am-play{ display:flex; flex-direction:column; gap:4px; width:100%; text-align:left; background:none; border:0; padding:16px 4px; cursor:pointer; color:var(--bone); font:inherit; }
.am-t{ font-family:"Cormorant Garamond", Georgia, serif; font-size:19px; letter-spacing:.05em; color:var(--gold); transition:color .4s, text-shadow .4s; }
.am-m{ font-size:17px; opacity:.75; }
.am-play:hover .am-t, .am-play:focus-visible .am-t, .am-play[aria-expanded=true] .am-t{ color:#ffb347; text-shadow:0 0 10px rgba(255,170,70,.45); }
.am-play:focus-visible{ outline:1px solid var(--gold); outline-offset:-1px; }
.am-player iframe{ display:block; margin:0 0 14px; }
.am-q{ font-family:"Cormorant Garamond", Georgia, serif; font-size:18px; line-height:1.4; color:#d8c39a; margin-top:4px; }

/* wider on large screens: images, films and galleries use the space; text keeps a comfortable reading width */
.wrap{ max-width:1720px; padding-left:clamp(20px,4vw,96px); padding-right:clamp(20px,4vw,96px); }
@media (min-width:1400px){ .gallery{ gap:clamp(16px,1.4vw,28px); } }
/* the Threshold stands apart from the page links, as the mix button once did */
@media (min-width:701px){ header nav #gate{ margin-left:clamp(28px,5vw,96px); } }
/* make it plain that each title plays */

/* Music: YouTube facades, mix banners, dancefloor */
.yt{ display:block; width:100%; aspect-ratio:16/9; border:0; padding:0; cursor:pointer; background:#000 center/cover no-repeat; position:relative; }
.yt::after{ content:"\25B6"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; line-height:72px; border-radius:50%; text-align:center; font-size:26px; color:var(--gold); background:rgba(0,0,0,.6); border:1px solid var(--gold); transition:color .4s, box-shadow .4s; }
.yt:hover::after, .yt:focus-visible::after{ color:#ffb347; box-shadow:0 0 18px rgba(255,170,70,.45); }
.mixroom{ display:grid; grid-template-columns:minmax(0,900px) minmax(0,1fr); column-gap:clamp(24px,4vw,80px); margin-top:20px; }
.mixroom .tasty-text{ grid-column:1; }
.mixroom .allmixes{ grid-column:1; }
.tasty-h{ font-family:"Cormorant Garamond", Georgia, serif; font-size:19px; letter-spacing:.05em; color:var(--gold); margin:0 0 12px; font-weight:400; }
.dancefloor{ grid-column:2; grid-row:1 / 3; }
.df-stick{ position:sticky; top:calc(var(--hh,116px) + var(--mixbar-height,0px) + 24px); --df-space:calc(100dvh - var(--hh,116px) - var(--mixbar-height,0px) - 56px); display:flex; flex-direction:column; align-items:center; gap:8px; max-width:380px; }
.decks{ display:block; width:100%; max-height:min(36vh,calc(var(--df-space) * .44)); object-fit:contain; background:#000; opacity:.22; filter:saturate(.35); transition:opacity 2s ease, filter 2s ease; }
.decks.awake{ opacity:1; filter:none; }
.dancer{ display:block; width:100%; max-height:min(46vh,calc(var(--df-space) * .56)); object-fit:contain; background:#000; opacity:0; transition:opacity 1.2s ease; }
.dancer.show{ opacity:1; }
@media (max-width:1100px){
  .mixroom{ grid-template-columns:1fr; }
  .dancefloor{ grid-column:1; grid-row:auto; background:#000; height:min(70vw,420px); margin:24px 0 0; }
  .df-stick{ position:static; flex-direction:row; justify-content:center; height:100%; max-width:none; gap:12px; }
  .decks, .dancer{ height:100%; width:auto; max-width:48%; max-height:none; }
}
.am-play{ flex-direction:row; align-items:center; gap:18px; }
.am-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.am-cover{ flex:0 0 auto; width:clamp(72px,9vw,120px); aspect-ratio:1; background:#0b0907; border:1px solid var(--rule); position:relative; overflow:hidden; }
.am-cover img{ width:100%; height:100%; object-fit:contain; padding:8%; box-sizing:border-box; display:block; opacity:0; transition:opacity 1s ease; }
.am-cover.lit img{ opacity:1; }
/* live tiles: one swipe row on every screen; the next tile peeks in, gold dots show where you are */
.live-row{ display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px !important; scrollbar-width:none; cursor:grab; }
.live-row::-webkit-scrollbar{ display:none; }
.live-row > *{ flex:0 0 clamp(240px,27%,420px); scroll-snap-align:start; }
.swipe-dots{ display:flex; justify-content:center; gap:10px; margin-top:14px; }
.swipe-dots i{ width:7px; height:7px; border-radius:50%; background:var(--rule); transition:background .5s; }
.swipe-dots i.on{ background:var(--gold); }
@media (max-width:700px){ .live-row{ gap:12px !important; } .live-row > *{ flex-basis:78%; } }
/* sound icon sits true in the corner: no inline gap under the video, icon centred in its ring */
.vwrap > video{ display:block; }
.vsound svg{ display:block; }
/* play mark sits on the cover, so title, details and quote share one left edge */
.am-cover::after{ content:"\25B6"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:40px; height:40px; line-height:40px; border-radius:50%; text-align:center; font-size:15px; color:var(--gold); background:rgba(0,0,0,.62); border:1px solid var(--gold); transition:color .4s, box-shadow .4s; }
.am-play:hover .am-cover::after, .am-play:focus-visible .am-cover::after{ color:#ffb347; box-shadow:0 0 14px rgba(255,170,70,.4); }
.am-play[aria-expanded=true] .am-cover::after{ content:"\275A\275A"; letter-spacing:-.1em; font-size:13px; color:#ffb347; }
.am-play[aria-expanded=true] .am-cover{ border-color:var(--gold); }
.am-cover.own img{ object-fit:cover; padding:0; }
.tasty-logo{ float:right; width:clamp(110px,22vw,220px); height:auto; margin:4px 0 14px 26px; shape-outside:circle(50%); }
.tasty-text::after{ content:""; display:block; clear:both; }

/* Photographs retain their complete framing; downloads retain original pixels. */
.social-gallery{columns:3 260px;column-gap:22px;margin-top:28px}
.social-gallery>a{display:block;break-inside:avoid;margin:0 0 22px}
.social-gallery img{display:block;width:100%;height:auto}
.wallpaper-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;margin-top:28px}
.wallpaper-gallery figure{margin:0;min-width:0}
.wallpaper-gallery img{display:block;width:100%;height:auto}
.wallpaper-gallery figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:12px;font-size:18px}
.wallpaper-gallery figcaption>span{color:var(--gold)}
.pyramid-art{margin:36px 0 0;max-width:720px}
.pyramid-art img{display:block;width:100%;height:auto}
@media(max-width:680px){.wallpaper-gallery{grid-template-columns:1fr}.social-gallery{columns:2 150px;column-gap:14px}.social-gallery>a{margin-bottom:14px}}

/* Where Love Lives: opener and band */
.wll-open figure,#wll figure{margin:0}
.wll-open img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
#wll img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.wll-open figcaption,#wll figcaption{margin-top:10px}
.wll-q{margin:28px 0 0;padding-left:20px;border-left:1px solid var(--gold);font-size:1.25em;line-height:1.45}
.wll-q cite{display:block;margin-top:12px;font-style:normal;color:var(--gold);font-size:.8em}
.wll-next{margin-top:24px}
.wll-mark{color:var(--gold);text-decoration:none;margin-left:6px}

/* Phones: no emblem, no Threshold in the header; the links sit on one line at full width */
@media (max-width:700px){
  header .mark, header nav #gate, header nav #call{ display:none !important; }
  nav{ justify-content:space-between; gap:0 12px; overflow-x:visible; }
  nav .item{ font-size:clamp(11px,3.6vw,16px); letter-spacing:.03em; }
  nav{ gap:0 8px !important; }
  #gate{ padding:6px 8px; font-size:clamp(10px,3.2vw,14px); }
}

/* Polish: phone first screen shows name and buttons; calmer, larger type; one heading style */
@media (max-width:700px){
  .hero{ gap:20px; }
  .medal{ max-width:min(58vw,260px); }
  .hero .text{ gap:18px; }
  #wll h2, #years h2{ font-size:34px; }
}
#mix{ font-size:15px; }
.vis-nav button{ font-size:16px; }
footer p{ font-size:20px; line-height:1.6; }
.links{ font-size:19px; }
.links a{ color:var(--gold); }
.page h3:not(.yr h3){ font-family:Digits,Cinzel,Georgia,serif; font-weight:400; color:var(--gold); letter-spacing:.06em; font-size:30px; }

/* Music: the neon decks and dancers lose their black box; black falls away to the background, edges feather */
.decks, .dancer{ background:transparent !important; mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 60%,transparent 100%); mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 60%,transparent 100%); }

/* The story: one column, read downward */
.story{ max-width:760px; }
.chap{ margin:56px 0 0; }
.chap-when{ font-family:Digits,Cinzel, Georgia, serif; color:var(--gold); letter-spacing:.14em; font-size:19px; margin:0 0 6px; text-transform:uppercase; }
.chap h3{ font-family:Digits,Cinzel, Georgia, serif; font-weight:400; color:var(--gold); font-size:36px; letter-spacing:.05em; margin:0 0 16px; }
.chap p{ font-size:22px; line-height:1.65; margin:0; }
.chap img, .chap-v{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; margin-top:24px; }
.record{ margin-top:72px; border-top:1px solid rgba(201,162,74,.35); padding-top:20px; }
.record summary{ cursor:pointer; font-family:Digits,Cinzel, Georgia, serif; color:var(--gold); font-size:22px; letter-spacing:.1em; list-style:none; }
.record summary::-webkit-details-marker{ display:none; }
.record summary::after{ content:" +"; } .record[open] summary::after{ content:" \2212"; }
.record h4{ font-family:Digits,Cinzel, Georgia, serif; font-weight:400; color:var(--gold); font-size:26px; margin:32px 0 8px; }
.record ul{ margin:0; padding-left:1.1em; } .record li{ font-size:20px; line-height:1.6; margin:6px 0; }
.prehistory{ margin-top:56px; padding-top:24px; border-top:1px solid rgba(201,162,74,.2); font-size:20px; line-height:1.65; opacity:.85; }
.prehistory .chap-when{ display:block; margin-bottom:6px; }
@media (max-width:700px){ .chap h3{ font-size:30px; } .chap p{ font-size:20px; } }

/* The breath ankh: loop above, tail below; gold when breathing, dim when held */
#breath{ position:absolute; top:50%; transform:translateY(-50%); width:28px; height:44px; color:var(--gold); z-index:6; transition:opacity .8s ease; }
#breath.held{ opacity:.45; }
#breath svg{ width:100%; height:100%; display:block; }
#breath button{ position:absolute; left:-8px; right:-8px; padding:0; border:0; background:transparent; cursor:pointer; }
#breath .b-loop{ top:-4px; height:24px; }
#breath .b-tail{ top:24px; height:24px; }
@media (max-width:700px){ header nav{ padding-left:40px; } #breath{ width:24px; height:38px; } #breath .b-loop{ height:21px; } #breath .b-tail{ top:21px; height:21px; } }

/* Live visuals and the portrait chapter photo */
.vdj-line{ font-size:22px; margin:8px 0 20px; }
.vdj-photo{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; margin-bottom:28px; }
.chap img[src*="duke-2026"], .chap img[src*="john-course"]{ aspect-ratio:4/5; max-width:520px; }

/* Debut clip: portrait, shown near its true size so the phone footage stays sharp */
.chap-v[src*="wll-debut"]{ aspect-ratio:340/496; max-width:340px; }
#wll .chap-v{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }

/* Phone: the playing mix stays at the top like a header, and the dancers open up in the space below it */
@media (max-width:700px){
  .allmixes > *:has(> .am-play[aria-expanded="true"]){ position:sticky; top:var(--hh); z-index:5; background:var(--black); }
  body.inplace .df-stick{ position:fixed; left:0; right:0; top:calc(var(--hh) + var(--rowh,130px)); height:32vh; z-index:4; background:#000; padding:6px 0; }
  body.playing:not(.inplace) .df-stick{ position:fixed; left:0; right:0; top:calc(var(--hh) + var(--mixbar-height,0px)); height:32vh; z-index:4; background:#000; padding:6px 0; }
}

/* Music has its own players: the guest mix bar keeps playing out of sight there */
body.on-music #mcbar{ height:0; overflow:hidden; border:0; }
body.on-music{ --mixbar-height:0px; }

/* Neon Anubis at the decks never fades: he stays lit while the dancers take their turns */
.decks, .decks.awake{ opacity:1 !important; filter:none !important; }

/* Then and now: two pictures side by side in one chapter */
.chap-pair{ display:flex; gap:16px; align-items:flex-start; margin-top:24px; }
.chap-pair > *{ flex:1 1 0; min-width:0; margin-top:0 !important; max-width:none !important; aspect-ratio:4/5 !important; object-fit:cover; }
.chap img[src*="lawn-stage"], .chap img[src*="lawn-gift"]{ aspect-ratio:4/5; max-width:520px; }

.vesper{ margin:0 0 36px; max-width:360px; }
.vesper video{ width:100%; aspect-ratio:464/848; object-fit:cover; display:block; background:#000; }
.vesper figcaption{ margin-top:10px; }

/* 12 Oct batch */
#call{ display:none !important; }
nav #breath{ position:relative !important; top:auto !important; left:auto !important; transform:none !important; margin-left:14px; align-self:center; }
#breath:not(.held) svg{ animation:breathbeat .625s ease-in-out infinite alternate; transform-origin:50% 60%; }
@keyframes breathbeat{ from{ transform:scale(1); opacity:.8; } to{ transform:scale(1.08); opacity:1; } }
@media (prefers-reduced-motion:reduce){ #breath svg{ animation:none !important; } }
@media (max-width:700px){ header nav{ padding-left:0 !important; } nav #breath{ margin-left:6px; } }
#wll .two{ align-items:center; } #wll h2{ margin-top:0; }
.story{ max-width:1180px; }
@media (min-width:900px){
  .chap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:88px; }
  .chap:nth-of-type(even) .chap-t{ order:2; }
  .chap > img, .chap > video, .chap > .chap-pair{ margin-top:0 !important; justify-self:center; }
  .chap:not(:has(img,video)){ grid-template-columns:minmax(0,680px); }
  .record, .prehistory{ max-width:760px; }
}
.live-row video{ aspect-ratio:9/16 !important; }
#mcbar{ background:#000; border-top:1px solid rgba(201,162,74,.45); border-bottom:1px solid rgba(201,162,74,.45); }
.roam{ position:fixed; bottom:8vh; width:150px; z-index:1; pointer-events:none; mix-blend-mode:lighten; opacity:0; transition:opacity 1.2s ease; }
.roam.in{ opacity:.9; }
.book{ text-align:center; max-width:900px; margin:0 auto; }
.book-bio{ font-size:22px; line-height:1.65; max-width:680px; margin:18px auto 30px; }
.book-btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:44px; }
.socials{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:left; max-width:900px; margin:28px auto 0; }
.soc{ align-content:center; }
.soc-h{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:860px){ .socials{ grid-template-columns:1fr; max-width:420px; } }
.soc{ display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; padding:16px 18px; border:1px solid rgba(201,162,74,.35); text-decoration:none; color:inherit; transition:border-color .4s ease; }
.soc:hover{ border-color:var(--gold); }
.soc svg{ grid-row:1/3; width:36px; height:36px; color:var(--gold); }
.soc-n{ font-family:Digits,Cinzel, Georgia, serif; color:var(--gold); font-size:20px; letter-spacing:.06em; }
.soc-h{ font-size:17px; opacity:.8; }

/* With true transparency the figures need no blending or feathering: the background shows straight through */
.alpha .decks, .alpha .dancer, .alpha .roam{ mix-blend-mode:normal !important; -webkit-mask-image:none !important; mask-image:none !important; background:transparent !important; }
.alpha body.inplace .df-stick, .alpha body.playing .df-stick{ background:rgba(0,0,0,.55) !important; }

/* Wide neon crowd for the phone dock */
.crowd{ display:none; }
@media (max-width:700px){ body.inplace .crowd, body.playing .crowd{ display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; mix-blend-mode:lighten; pointer-events:none; }
  body.inplace .df-stick, body.playing .df-stick{ overflow:hidden; } }

/* Lynch's purple field, kept very dark, behind the dancers while a mix plays */
.decks, .dancer{ position:relative; z-index:1; }
body.inplace .df-stick::before, body.playing .df-stick::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 62%, rgba(78,22,118,.30), rgba(40,10,70,.12) 45%, transparent 72%); pointer-events:none; z-index:0; }
.ghostd{ position:absolute; z-index:2; object-fit:contain; pointer-events:none; opacity:0; transition:opacity 1.2s ease; mix-blend-mode:lighten; }
.alpha .ghostd{ mix-blend-mode:normal; }
@media (min-width:701px) and (max-width:1100px){ .df-stick{ position:relative; } }
@media (max-width:700px){ body:not(.inplace):not(.playing) .df-stick{ position:relative; } }
.live-row{ align-items:flex-start !important; } .live-row > .vwrap{ height:auto !important; align-self:flex-start; } 

/* Every live tile the same size, sound or no sound */
.live-row > *{ flex:0 0 clamp(240px,25%,340px) !important; width:auto !important; min-width:0 !important; }
@media (max-width:700px){ .live-row > *{ flex-basis:70% !important; } }
.live-row .vwrap > video{ width:100% !important; height:auto !important; }
.live-row > video{ height:auto !important; }

.chap-fig{ margin:0; justify-self:center; } .chap-fig > img{ margin-top:0 !important; } .chap-cap{ margin-top:10px; font-size:17px; opacity:.85; }
.prehistory p{ font-size:20px; line-height:1.65; margin:10px 0 0; }

/* PASSAGE behind the navigation */
header nav{ position:relative; }
header nav .item{ position:relative; z-index:1; }
#passage{ position:absolute; top:50%; transform:translate(-50%,-50%); left:50%; white-space:nowrap; pointer-events:none; z-index:0; font-family:Digits,Cinzel, Georgia, serif; font-size:30px; letter-spacing:.5em; color:var(--gold); opacity:.04; filter:blur(.4px); user-select:none; }
@media (max-width:700px){ #passage{ font-size:22px; letter-spacing:.35em; } }

/* Light beams over the dance floor while a mix plays: two soft spots, slow sweeps, behind the dancers */
body.inplace .df-stick::after, body.playing .df-stick::after{ content:""; position:absolute; left:50%; top:-10%; width:140%; height:120%; pointer-events:none; z-index:0;
  background:conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgba(227,194,118,.10) 6deg, transparent 12deg, transparent 30deg, rgba(150,80,210,.10) 36deg, transparent 42deg);
  clip-path:inset(8% 14.3% 0 14.3%); transform-origin:50% 0%; transform:translateX(-50%) rotate(-12deg); animation:beams 9.6s ease-in-out infinite alternate; mix-blend-mode:screen; }
@keyframes beams{ from{ transform:translateX(-50%) rotate(-14deg); opacity:.75; } to{ transform:translateX(-50%) rotate(14deg); opacity:1; } }
/* Visible gold focus for keyboard users */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
/* Calm for those who ask for less motion */
@media (prefers-reduced-motion:reduce){ body.inplace .df-stick::after, body.playing .df-stick::after{ animation:none; } .roam, .ghostd{ display:none !important; } #passage{ transition:none; } }

/* Swipe dots: the current one clearly lit */
.swipe-dots{ align-items:center; }
.swipe-dots i{ width:7px; height:7px; background:rgba(201,162,74,.28) !important; transition:background .4s, transform .4s, box-shadow .4s; }
.swipe-dots i.on{ background:#F4D58A !important; transform:scale(1.6); box-shadow:0 0 8px rgba(244,213,138,.8); }

/* The lens flare always sits above the first-arrival film, so the medallion answers the cursor from the first moment */
#medal .sheen{ z-index:2; }

/* On wheels: four clips across on desktop, two by two on tablets and phones, never a gap */
.wheels-grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:999px){ .wheels-grid{ grid-template-columns:repeat(2,1fr); } }

/* Spotlight beams, take two: soft cones that land in round pools, each sweeping and fading on its own rhythm */
body.inplace .df-stick::after, body.playing .df-stick::after{ content:none !important; animation:none !important; }
.beam{ display:none; position:absolute; top:-4%; left:50%; width:58%; height:104%; pointer-events:none; z-index:0; opacity:0; transform-origin:50% 0; mix-blend-mode:screen; }
body.inplace .beam, body.playing .beam{ display:block; }
.beam::before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, var(--c) 0%, var(--c2) 70%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 50% 100% at 50% 100%, #000 0%, #000 30%, transparent 72%); mask-image:radial-gradient(ellipse 50% 100% at 50% 100%, #000 0%, #000 30%, transparent 72%); }
.beam::after{ content:""; position:absolute; left:12%; right:12%; bottom:1%; height:16%; border-radius:50%; background:radial-gradient(ellipse 50% 50% at 50% 50%, var(--c2), transparent 72%); }
.b1{ --c:rgba(240,206,132,.32); --c2:rgba(240,206,132,.11); animation:sweep1 11s ease-in-out infinite alternate, fade1 7.3s ease-in-out infinite; }
.b2{ --c:rgba(166,96,226,.34); --c2:rgba(166,96,226,.12); animation:sweep2 13.7s ease-in-out infinite alternate, fade2 9.1s ease-in-out infinite; }
@keyframes sweep1{ from{ transform:translateX(-50%) rotate(-20deg); } to{ transform:translateX(-50%) rotate(9deg); } }
@keyframes sweep2{ from{ transform:translateX(-50%) rotate(18deg); } to{ transform:translateX(-50%) rotate(-10deg); } }
@keyframes fade1{ 0%,100%{ opacity:0; } 25%,60%{ opacity:1; } }
@keyframes fade2{ 0%{ opacity:.15; } 45%{ opacity:1; } 80%{ opacity:0; } 100%{ opacity:.15; } }
@media (prefers-reduced-motion:reduce){ .beam{ animation:none !important; opacity:.55; } }

/* The tunnel still among the Vessel apparitions: softened at its edges so it rises out of the black */
.vp-still{ object-fit:cover; -webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 45%,transparent 100%); mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 45%,transparent 100%); }

/* Site footer, on every page */
.site-foot{ border-top:1px solid rgba(201,162,74,.3); margin-top:72px; padding:34px 20px calc(30px + env(safe-area-inset-bottom,0px)); }
.sf-in{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; }
.sf-emblem{ width:40px; height:40px; opacity:.85; }
.sf-links{ display:flex; gap:18px; }
.sf-links a{ color:var(--gold); width:32px; height:32px; display:grid; place-items:center; opacity:.8; transition:opacity .3s; }
.sf-links a:hover{ opacity:1; } .sf-links svg{ width:26px; height:26px; }
.sf-text{ display:flex; gap:12px; align-items:center; font-family:Digits,Cinzel, Georgia, serif; letter-spacing:.08em; font-size:18px; }
.sf-text a{ color:var(--gold); text-decoration:none; }
.sf-copy{ width:100%; text-align:center; margin:6px 0 0; font-size:16px; opacity:.6; }
@media (max-width:700px){ .sf-in{ justify-content:center; text-align:center; } }

/* Encounters (coming soon) */
.enc{ display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:40px; align-items:center; }
.enc img{ width:100%; display:block; }
.enc-soon{ font-family:Digits,Cinzel, Georgia, serif; color:var(--gold); letter-spacing:.2em; text-transform:uppercase; font-size:22px; }
.enc-t p{ font-size:21px; line-height:1.6; }
@media (max-width:800px){ .enc{ grid-template-columns:1fr; } }

.ask.note p{ margin:0; }

/* The herald: lives in the gap between the emblem and the nav. A faint mark at rest, so the spot always belongs to it; brighter when something is waiting. */
#herald{ display:flex; align-items:center; justify-content:center; flex:1 1 auto; min-width:24px; position:relative; }
.herald-mark{ width:14px; height:14px; border-radius:50%; border:0; background:none; cursor:pointer; padding:0; position:relative; }
.herald-mark::before{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--gold); opacity:.14; transition:opacity 1.4s ease, box-shadow 1.4s ease; }
.herald-mark.lit::before{ opacity:.85; box-shadow:0 0 10px rgba(227,194,118,.7); animation:heraldbeat 2.6s ease-in-out infinite; }
@keyframes heraldbeat{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }
.herald-msg{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:14px; width:min(380px,84vw); opacity:0; pointer-events:none; transition:opacity .5s ease; z-index:10; background:radial-gradient(ellipse 70% 62% at 50% 50%,rgba(4,3,2,.92) 0%,rgba(4,3,2,.78) 45%,rgba(4,3,2,0) 100%); border:0; padding:34px 44px; text-align:left; text-shadow:0 0 14px #000,0 0 4px #000; }
.herald-msg.on{ opacity:1; pointer-events:auto; }
.herald-msg p{ margin:0 0 12px; font-family:"Cormorant Garamond",Georgia,serif; font-size:19px; line-height:1.4; color:#E3C276; }
.herald-msg div{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.herald-msg button{ background:none; border:0; padding:6px 0; cursor:pointer; color:#c9a45c; font-family:"Cormorant Garamond",Georgia,serif; font-size:15px; letter-spacing:.18em; text-transform:uppercase; }
.herald-msg button:hover, .herald-msg button:focus-visible{ color:#ffb347; outline:none; }
.herald-msg button.gone{ opacity:0; transition:opacity .6s ease; }
.herald-msg button.chosen{ color:#ffb347; }
/* The herald, on a phone: no header gap to live in, so it becomes a mark of its own,
   held at the edge of the screen, and speaks from the bottom rather than a dropdown
   that has nowhere to hang from. Reveal, not announcement, same as everywhere else. */
@media (max-width:700px){
  #herald{ position:fixed; right:calc(14px + env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px));
    z-index:30; flex:none; width:auto; }
  .herald-mark{ width:34px; height:34px; }
  .herald-mark::before{ inset:11px; }
  .herald-msg{ position:fixed; left:0; right:0; bottom:0; top:auto; margin:0; width:auto; max-width:none;
    transform:translateY(100%); border:0; background:linear-gradient(to top,#040302 0,#040302 calc(100% - 70px),rgba(4,3,2,0) 100%);
    padding:84px 22px calc(26px + env(safe-area-inset-bottom,0px)); max-height:62vh; overflow-y:auto;
    transition:transform var(--t-mid,.62s) var(--ease-stone,cubic-bezier(.22,.61,.30,1)); }
  .herald-msg.on{ transform:translateY(0); }
  .herald-msg p{ font-size:21px; }
  .herald-msg button{ padding:10px 0; font-size:16px; }
}

/* Bookings form */
.bf-trap{ position:absolute; left:-9999px; }
.book-form{ max-width:640px; margin:0 auto; text-align:left; }
.bf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin-bottom:16px; }
.book-form label{ display:block; font-size:16px; letter-spacing:.08em; color:#8a7a52; text-transform:uppercase; }
.book-form input, .book-form select, .book-form textarea{ width:100%; margin-top:6px; background:#000; border:1px solid rgba(201,162,74,.4); color:var(--bone); font-family:"Cormorant Garamond",Georgia,serif; font-size:18px; padding:10px 12px; }
.book-form select{ appearance:none; }
.bf-msg{ display:block; margin-bottom:18px; }
.bf-note{ font-size:16px; opacity:.75; margin-top:16px; }
.bf-status{ margin-top:14px; color:var(--gold); font-size:17px; }
@media (max-width:640px){ .bf-grid{ grid-template-columns:1fr; } }

/* Bookings modal */
body.modal-open{ overflow:hidden; }
.bk-modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; }
.bk-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.82); opacity:0; transition:opacity .4s ease; }
.bk-panel{ position:relative; width:min(680px,100%); max-height:88vh; overflow-y:auto; background:#0a0906; border:1px solid rgba(201,162,74,.45); padding:40px 32px; opacity:0; transform:translateY(14px) scale(.98); transition:opacity .4s ease, transform .4s ease; }
.bk-modal.on .bk-backdrop{ opacity:1; } .bk-modal.on .bk-panel{ opacity:1; transform:translateY(0) scale(1); }
.bk-panel h2{ margin-bottom:22px; }
.bk-x{ position:absolute; top:14px; right:16px; background:none; border:0; color:var(--gold); font-size:28px; line-height:1; cursor:pointer; padding:6px; }

/* Quotes: Cazzar and Spiro, side by side on desktop */
.quotes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.quotes-grid .wll-q{ margin:0; }
.quotes-grid .wll-q p{ margin:0 0 12px; }
@media (max-width:800px){ .quotes-grid{ grid-template-columns:1fr; gap:40px; } }

/* ===== ONE PHYSICS =====
   Every timing on the site comes from here, so ten effects read as one room
   rather than ten separate ideas about how things move. Heavier things take longer. */
:root{
  --ease-stone: cubic-bezier(.22,.61,.30,1);   /* mass: quick to start, long to settle */
  --ease-dust:  cubic-bezier(.33,.00,.20,1);   /* light things, no resistance */
  --t-light:  2.2s;    /* light changes slowest of all */
  --t-heavy:  1.15s;   /* stone, medallions, doors */
  --t-mid:     .62s;   /* panels, reveals */
  --t-near:    .28s;   /* things answering a hand */
  --presence: 0; --pace: 0; --depth: 0; --lx: .5; --ly: .35; --atmos: 1;
}

/* ===== LIGHT FALLS FROM SOMEWHERE =====
   The page was evenly lit, which is the main reason it read as a screen rather
   than a space. Light now has a source, and the source is where attention is. */
/* the attention-follows-light job already belongs to the penrose lattice in limen.js; this stayed out of its way rather than laying a second, flatter glow on top of it */
/* and the dark closes in as they go deeper */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120vmax 90vmax at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,calc(.55 * var(--atmos))) 100%);
  opacity:calc(.25 + .75 * var(--depth));
  transition:opacity var(--t-light) linear;
}
body.plain::before, body.plain::after, body.unweighted::before, body.unweighted::after{ content:none; }
.wrap, footer, .page, #home, #other{ position:relative; z-index:1; }   /* header keeps its own sticky + z:5 below, lifting it here collided with that and broke sticky nav */

/* ===== THE PLAIN SITE =====
   A promoter who reaches for the documents gets the facts, fast, and keeps them. */
body.plain .df-stick .beam, body.plain .vessel-pres, body.plain #passage{ display:none !important; }
body.plain *{ animation-duration:.01ms !important; transition-duration:.08s !important; }

/* The scrollbar was the least Egyptian object on the screen */
html{ scrollbar-width:thin; scrollbar-color:rgba(201,162,74,.35) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(201,162,74,.3); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:rgba(201,162,74,.55); }

/* The booth */
.booth{ margin-top:22px; display:grid; gap:14px; }
.booth label{ display:block; font-size:15px; letter-spacing:.08em; color:#8a7a52; text-transform:uppercase; }
.booth input[type=text], .booth textarea{ width:100%; margin-top:6px; background:#000; border:1px solid rgba(201,162,74,.35); color:var(--bone);
  font-family:"Cormorant Garamond",Georgia,serif; font-size:18px; padding:10px 12px; }
.bt-drop{ cursor:pointer; border:1px dashed rgba(201,162,74,.45); padding:26px 18px; text-align:center; text-transform:none !important; letter-spacing:.04em !important;
  font-family:Cinzel,Georgia,serif; color:var(--gold) !important; font-size:17px !important; transition:border-color var(--t-near,.28s) ease, background var(--t-near,.28s) ease; }
.bt-drop:hover{ border-color:var(--gold); background:rgba(201,162,74,.05); }
.bt-prev{ width:100%; max-height:340px; object-fit:contain; background:#000; border:1px solid rgba(201,162,74,.25); }
.bt-ok{ display:flex !important; gap:12px; align-items:flex-start; text-transform:none !important; letter-spacing:0 !important; color:#b8ac90 !important; font-size:16px !important; line-height:1.5; }
.bt-ok input{ margin-top:5px; accent-color:var(--gold); flex:none; }
.booth button[disabled]{ opacity:.35; cursor:not-allowed; }
.bt-status{ color:var(--gold); font-size:17px; margin:0; }
.enc-tag{ margin-top:22px; font-size:16px; opacity:.7; }
.enc-wall{ margin-top:34px; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:18px; }
.enc-item{ margin:0; }
.enc-item img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:#000; }
.enc-item figcaption{ padding-top:10px; font-size:16px; line-height:1.45; color:#b8ac90; }
.enc-item figcaption b{ display:block; color:var(--gold); font-weight:600; font-family:Cinzel,Georgia,serif; letter-spacing:.04em; margin-bottom:4px; }

/* THE ROOM: a doorway that glows with what it hears */
.theroom{ display:grid; place-items:center; padding:36px 0 64px; }
.room-door{ position:relative; width:min(74vw,340px); aspect-ratio:3/5; padding:0; cursor:pointer; border:1px solid rgba(201,162,74,.32); border-radius:170px 170px 3px 3px;
  background:radial-gradient(ellipse 60% 55% at 50% 72%, rgba(227,194,118,calc(.035 + var(--lv,0) * .55)), rgba(227,194,118,0) 72%), #040302;
  transition:border-color 2.4s ease, box-shadow 2.4s ease; }
.room-door::after{ content:""; position:absolute; left:8%; right:8%; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,rgba(227,194,118,calc(.25 + var(--lv,0) * .7)),transparent); }
.room-door:hover{ border-color:rgba(201,162,74,.5); }
.room-door[aria-pressed="true"]{ border-color:rgba(227,194,118,.62); box-shadow:inset 0 0 calc(24px + var(--lv,0) * 140px) rgba(227,194,118,calc(.06 + var(--lv,0) * .3)), 0 0 calc(var(--lv,0) * 60px) rgba(227,194,118,calc(var(--lv,0) * .18)); }
.room-door:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }


/* the light beyond the door, and the figures that pass in front of it */
.room-door{ overflow:hidden; isolation:isolate; }
.room-door::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 5s ease;
  background:radial-gradient(ellipse 55% 48% at 50% 78%, rgba(255,214,150,calc(.30 + var(--lv,0) * .35)), rgba(227,170,90,.10) 55%, rgba(0,0,0,0) 80%); }
.room-door[aria-pressed="true"]::before{ opacity:1; }
.room-fig{ position:absolute; bottom:5%; transform:translateX(-50%); opacity:0; pointer-events:none; mix-blend-mode:multiply;
  transition:opacity 2.4s ease, transform 12s linear; }
.room-fig.in{ opacity:.9; transform:translateX(calc(-50% + var(--dx,0%))); }
.room-fig.out{ opacity:0; transform:translateX(calc(-50% + var(--dx,0%))); }
.room-door video.room-fig, .room-door video.room-fig.alive{ filter:none; }
/* THE ROOM: three doors, each with its own light */
.theroom{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,3.4vw,30px); max-width:640px; margin:0 auto; padding:36px 4px 64px; place-items:stretch; }
.room-door{ width:100%; border-radius:999px 999px 3px 3px; border-color:rgba(var(--c),.26);
  background:radial-gradient(ellipse 60% 55% at 50% 72%, rgba(var(--c),.035), rgba(var(--c),0) 72%), #040302; }
.room-door[data-door="fore"]{ --c:214,88,52; }
.room-door[data-door="up"]{ --c:255,205,130; }
.room-door[data-door="sleep"]{ --c:172,194,236; }
.room-door:hover{ border-color:rgba(var(--c),.45); }
.room-door::before{ background:radial-gradient(ellipse 62% 50% at 50% 78%, rgba(var(--c),calc(.28 + var(--lv,0) * .35)), rgba(var(--c),.08) 55%, rgba(0,0,0,0) 80%); }
.room-door::after{ background:linear-gradient(90deg,transparent,rgba(var(--c),calc(.22 + var(--lv,0) * .6)),transparent); }
.room-door[aria-pressed="true"]{ border-color:rgba(var(--c),.6); box-shadow:inset 0 0 40px rgba(var(--c),.14), 0 0 16px rgba(var(--c),.08); }
.room-door[data-door="sleep"][aria-pressed="true"]::before{ animation:moonbreath 9s ease-in-out infinite; }
@keyframes moonbreath{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.room-door video.room-fig{ transition:none; transform-origin:50% 100%; bottom:4%; height:56%; }
.room-shade{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; background:radial-gradient(ellipse 28% 58% at 50% 72%, rgba(0,0,0,.92), rgba(0,0,0,0) 72%); }
@media (prefers-reduced-motion: reduce){ .room-door[data-door="sleep"][aria-pressed="true"]::before{ animation:none; } }

/* THE JACKAL */
.jackal{ max-width:520px; margin:24px auto 64px; display:grid; gap:22px; justify-items:center; position:relative; }
.jackal svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.j-sun{ width:76px; height:76px; border-radius:50%; padding:0; cursor:pointer; color:#E3C276; border:1px solid rgba(201,162,74,.5); background:radial-gradient(circle, rgba(227,194,118,.22), rgba(0,0,0,0) 70%), #050403; animation:jpulse 3.2s ease-in-out infinite; }
.j-sun svg{ width:56%; height:56%; }
.jackal.on .j-sun{ animation:none; border-color:#E3C276; box-shadow:0 0 34px rgba(227,194,118,.32); }
@keyframes jpulse{ 0%,100%{ box-shadow:0 0 0 rgba(227,194,118,0); } 50%{ box-shadow:0 0 26px rgba(227,194,118,.28); } }
.j-grid{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px; width:100%; }
.j-tile{ aspect-ratio:3/4; padding:0; cursor:pointer; display:grid; place-items:center; border-radius:4px; background:#070605; border:1px solid rgba(201,162,74,.2); color:#c9a24a; transition:background .12s ease, border-color .12s ease; }
.j-tile:nth-child(4n+1){ border-color:rgba(201,162,74,.42); }
.j-tile svg{ width:70%; height:auto; }
.j-tile[data-v="0"]{ color:rgba(201,162,74,.38); }
.j-tile[data-v="2"]{ color:#ffd38a; }
.j-tile[data-v="3"]{ color:#e8b866; }
.j-tile.now{ background:rgba(227,194,118,.16); border-color:#E3C276; box-shadow:0 0 14px rgba(227,194,118,.22); }
.j-tile:focus-visible, .j-ctl > *:focus-visible, .j-sun:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.j-ctl{ display:flex; gap:clamp(10px,3.6vw,22px); justify-content:center; flex-wrap:wrap; }
.j-ctl > *{ width:58px; height:58px; border-radius:50%; padding:0; cursor:pointer; display:grid; place-items:center; color:#c9a24a; background:#060504; border:1px solid rgba(201,162,74,.38); }
.j-ctl svg{ width:62%; height:62%; }
.j-dial{ touch-action:none; }
.j-dial svg{ transition:transform .05s linear; }
.j-seal.stamped{ color:#ffd38a; border-color:#E3C276; box-shadow:0 0 18px rgba(227,194,118,.34); }
.j-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.jackal.still .j-sun{ animation:none; }
/* the doors' names, carved faintly beneath; a name warms when its door is open */
.room-cell{ display:grid; gap:12px; justify-items:center; align-content:start; }
.room-name{ font-family:Cinzel,Georgia,serif; text-transform:uppercase; letter-spacing:.22em; font-size:clamp(10px,2.6vw,13px); color:rgba(201,162,74,.42);
  text-shadow:0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(255,220,160,.06); transition:color 2.4s ease; }
.room-name[data-door="fore"]{ --c:214,88,52; } .room-name[data-door="up"]{ --c:255,205,130; } .room-name[data-door="sleep"]{ --c:172,194,236; }
.room-cell:has(.room-door[aria-pressed="true"]) .room-name{ color:rgba(var(--c),.85); }
/* the Room breathes with its weather; a door you lean into comes closer */
.room-door{ touch-action:pan-y; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; transition:border-color 2.4s ease, box-shadow 2.4s ease, transform .6s ease; }
.room-door::before{ background:radial-gradient(ellipse 62% 50% at 50% 78%, rgba(var(--c),calc((.24 + var(--lv,0) * .35) * (.62 + var(--w,.7) * .55) + var(--near,0) * .3)), rgba(var(--c),calc(.08 * (.62 + var(--w,.7) * .55))) 55%, rgba(0,0,0,0) 80%); }
.room-door.near{ transform:scale(1.03); --near:1; }
/* the Anubiform Field: light rising in the threshold space in front of the doors */
.theroom{ position:relative; }
.theroom .field{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.field-lab{ max-width:640px; margin:-40px auto 30px; padding:10px; font:15px/1.5 ui-monospace,Menlo,Consolas,monospace; color:#E3C276; text-align:center; border:1px dashed rgba(201,162,74,.4); }

.room-door, .room-door[aria-pressed="true"]{ transition:border-color 2.4s ease, transform .6s ease; }
.theroom{ z-index:0; isolation:isolate; }   /* keeps the field beneath the sticky header */
/* the Jackal: runes you can play, and that change by themselves */
.j-tile{ touch-action:none; }
.j-tile.mut{ animation:jmut 1.8s ease-out; }
@keyframes jmut{ 0%{ background:rgba(227,194,118,.45); box-shadow:0 0 22px rgba(227,194,118,.55); } 100%{ background:#070605; box-shadow:none; } }
@media (prefers-reduced-motion: reduce){ .j-tile.mut{ animation:none; outline:1px solid #E3C276; } }
/* tempo: a carved line with a sun for its handle */
.j-tempo{ display:flex; align-items:center; gap:16px; width:min(440px,92%); }
.j-tempo input{ flex:1; -webkit-appearance:none; appearance:none; height:30px; background:transparent; cursor:pointer; }
.j-tempo input::-webkit-slider-runnable-track{ height:2px; background:linear-gradient(90deg,rgba(201,162,74,.15),rgba(201,162,74,.6),rgba(201,162,74,.15)); }
.j-tempo input::-moz-range-track{ height:2px; background:linear-gradient(90deg,rgba(201,162,74,.15),rgba(201,162,74,.6),rgba(201,162,74,.15)); }
.j-tempo input::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-10px; border-radius:50%; background:radial-gradient(circle,#ffd38a 0 3px,#060504 4px); border:1px solid #E3C276; box-shadow:0 0 12px rgba(227,194,118,.35); }
.j-tempo input::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:radial-gradient(circle,#ffd38a 0 3px,#060504 4px); border:1px solid #E3C276; box-shadow:0 0 12px rgba(227,194,118,.35); }
.j-tempo input:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.j-bpm{ min-width:3ch; font-family:Cinzel,Georgia,serif; font-size:18px; letter-spacing:.08em; color:#E3C276; text-align:right; }
/* the Jackal's second row: voice, phaser, tremolo, stone, echo, and the feather for decay */
.j-fx > *{ width:50px; height:50px; }
.j-jar[data-l="0"]{ color:rgba(201,162,74,.38); }
.j-jar[data-l="1"]{ color:#c9a24a; border-color:rgba(201,162,74,.6); }
.j-jar[data-l="2"]{ color:#ffd38a; border-color:#E3C276; box-shadow:0 0 16px rgba(227,194,118,.3); }
/* the record jar: hollow when empty, filled once it holds a voice, glowing while it listens */
.j-rec .j-recdot{ fill:none; }
.j-rec[data-has="1"]{ color:#ffd38a; border-color:#E3C276; }
.j-rec[data-has="1"] .j-recdot{ fill:currentColor; }
.j-rec.rec{ color:#ff8a5c; border-color:#ff8a5c; box-shadow:0 0 22px rgba(255,120,80,.45); animation:jrec .8s ease-in-out infinite alternate; }
.j-rec.rec .j-recdot{ fill:#ff8a5c; }
@keyframes jrec{ from{ box-shadow:0 0 8px rgba(255,120,80,.3); } to{ box-shadow:0 0 26px rgba(255,120,80,.6); } }
@media (prefers-reduced-motion: reduce){ .j-rec.rec{ animation:none; } }
.j-rec{ -webkit-touch-callout:none; user-select:none; }
/* dials show their setting as a ring of light; wander glows by level; everything fits a phone */
.j-dial{ position:relative; }
.j-ring{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); transform:rotate(-90deg); pointer-events:none; }
.j-ring circle{ fill:none; stroke:#E3C276; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:0 100; opacity:.85; transition:stroke-dasharray .15s ease; }
.j-wander[data-l="0"]{ color:rgba(201,162,74,.38); }
.j-wander[data-l="1"]{ color:#c9a24a; border-color:rgba(201,162,74,.6); }
.j-wander[data-l="2"]{ color:#ffd38a; border-color:#E3C276; box-shadow:0 0 16px rgba(227,194,118,.3); }
@media (max-width:520px){ .j-ctl{ gap:9px; } .j-ctl > *{ width:50px; height:50px; } .j-fx > *{ width:44px; height:44px; } }
@media (max-width:520px){ .j-fx{ gap:6px; } .j-fx > *{ width:40px; height:40px; } }
.j-wander[data-l="3"]{ color:#ffd38a; border-color:#E3C276; box-shadow:0 0 18px rgba(227,194,118,.4); animation:jroam 4s ease-in-out infinite; }
@keyframes jroam{ 0%,100%{ box-shadow:0 0 10px rgba(227,194,118,.25); } 50%{ box-shadow:0 0 22px rgba(227,194,118,.5); } }
@media (prefers-reduced-motion: reduce){ .j-wander[data-l="3"]{ animation:none; } }
/* up and down on every adjustable control */
.j-ctl > .j-cell{ width:auto; height:auto; border:0; border-radius:0; background:none; box-shadow:none; padding:0; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:default; }
.j-cell > .j-main{ position:relative; width:58px; height:58px; border-radius:50%; padding:0; cursor:pointer; display:grid; place-items:center; background:#060504; border:1px solid rgba(201,162,74,.38); }
.j-cell > .j-main:not([data-l]){ color:#c9a24a; }
.j-fx .j-cell > .j-main{ width:50px; height:50px; }
.j-arr{ width:34px; height:20px; padding:0; border:0; background:none; cursor:pointer; color:rgba(201,162,74,.5); display:grid; place-items:center; transition:color .2s ease; }
.j-arr svg{ width:22px; height:14px; }
.j-arr:hover, .j-arr:focus-visible{ color:#ffd38a; outline:none; }
.j-arr:active{ color:#fff1c8; }
.j-ctl{ align-items:center; }
@media (max-width:520px){ .j-cell > .j-main{ width:46px; height:46px; } .j-fx .j-cell > .j-main{ width:38px; height:38px; } .j-arr{ width:30px; height:18px; } .j-fx{ gap:4px; } .j-ctl{ gap:7px; } }
.j-arr{ color:rgba(227,194,118,.78); width:38px; height:22px; }
.j-arr svg{ width:26px; height:17px; stroke-width:2.2; }
@media (max-width:520px){ .j-arr{ width:34px; height:20px; } .j-arr svg{ width:24px; height:15px; } }
/* the voice's name surfaces briefly, then sinks back */
.j-name{ min-height:24px; font-family:Cinzel,Georgia,serif; font-size:17px; letter-spacing:.24em; text-transform:uppercase; color:#E3C276; opacity:0; text-shadow:0 0 12px rgba(227,194,118,.35); }
.j-name.show{ animation:jname 2.6s ease forwards; }
@keyframes jname{ 0%{ opacity:0; transform:translateY(4px); } 15%,65%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@media (max-width:520px){ .j-ctl:not(.j-fx){ gap:3px; } .j-ctl:not(.j-fx) .j-cell > .j-main{ width:44px; height:44px; } }
/* the performer's touch: whatever it presses lights up */
.j-main.ghost, .j-scarab.ghost, .j-sun.ghost{ animation:jghost .9s ease-out; }
.j-arr.ghost{ color:#fff1c8; animation:jarr .7s ease-out; }
.j-tile.ghost{ animation:jmut 1.2s ease-out; }
@keyframes jghost{ 0%{ box-shadow:0 0 0 rgba(255,211,138,0); transform:scale(1); } 25%{ box-shadow:0 0 26px rgba(255,211,138,.6); transform:scale(.94); } 100%{ box-shadow:0 0 0 rgba(255,211,138,0); transform:scale(1); } }
@keyframes jarr{ 0%{ transform:scale(1); } 30%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .j-main.ghost, .j-scarab.ghost, .j-sun.ghost, .j-arr.ghost{ animation:none; outline:1px solid #E3C276; } }
/* the plasma theremin */
.plasma{ display:grid; place-items:center; margin:6px auto 72px; }
.plasma canvas{ width:min(240px,62vw); aspect-ratio:1; border-radius:50%; touch-action:none; cursor:pointer; -webkit-touch-callout:none; user-select:none; }
.plasma canvas:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }
/* control names, carved like the door names: readable, quiet */
.j-lab{ font-family:Cinzel,Georgia,serif; text-transform:uppercase; letter-spacing:.12em; font-size:12px; line-height:1.2; color:rgba(227,194,118,.72); text-align:center; white-space:nowrap; margin-top:2px; }
.j-sunlab{ margin-top:-12px; }
.j-gap{ visibility:hidden; pointer-events:none; }
.j-tempo .j-lab{ margin:0; }
.plasma{ gap:10px; }
@media (max-width:520px){ .j-lab{ font-size:10.5px; letter-spacing:.06em; } .j-ctl:not(.j-fx) .j-lab{ font-size:10px; } }
/* rows of seven stay whole on a computer; on a phone the second row splits four and three */
.jackal{ max-width:760px; }
.j-grid, .j-tempo{ max-width:520px; }
.j-ctl{ flex-wrap:wrap; }
@media (min-width:700px){ .j-ctl{ flex-wrap:nowrap; } }
@media (max-width:520px){ .j-fx{ max-width:300px; margin:0 auto; row-gap:10px; } .j-fx .j-lab{ font-size:10px; } }
@media (max-width:520px){ .jackal .j-fx{ max-width:none; width:100%; justify-content:center; } .jackal .j-fx > .j-cell{ flex:0 0 23%; } }
.j-ring{ display:none !important; }   /* no rings: the globes show settings instead */
/* the plasmoids: four small globes, then the theremin */
.plasmoids{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(10px,3vw,26px); margin:10px auto 0; max-width:640px; }
.plasmoids.big-row{ margin:22px auto 72px; }
.plasmoid{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.plasmoid canvas{ width:clamp(70px,20vw,120px); aspect-ratio:1; border-radius:50%; touch-action:none; cursor:crosshair; -webkit-touch-callout:none; user-select:none; }
.plasmoid.big canvas{ width:min(240px,62vw); }
.plasma{ display:none; }

/* THE ANTECHAMBER ON A COMPUTER: one screen. Doors across the top, sized to the window;
   below them the globes, the Jackal and the theremin side by side. Phones keep the stacked layout. */
@media (min-width:1100px){
  #grv-room:not([hidden]){ display:grid; grid-template-columns:minmax(210px,1fr) minmax(470px,560px) minmax(210px,1fr);
    grid-template-areas:"doors doors doors" "pads jackal theremin"; align-items:center; column-gap:clamp(16px,2.5vw,40px); row-gap:clamp(8px,2vh,22px); }
  #grv-room .theroom{ grid-area:doors; width:100%; max-width:calc(29vh * 1.86 + 60px); padding:clamp(8px,2vh,20px) 4px 0; }
  #grv-room .field-lab{ grid-column:1 / -1; margin:0 auto; }
  #grv-room .jackal{ grid-area:jackal; margin:0 auto; max-width:560px; gap:clamp(6px,1.4vh,14px);
    grid-template-columns:auto 1fr; grid-template-areas:"sun grid" "ctl ctl" "fx fx" "name name" "tempo tempo"; align-items:center; }
  #grv-room .j-sun{ grid-area:sun; width:62px; height:62px; }
  #grv-room .j-sunlab{ display:none; }
  #grv-room .j-grid{ grid-area:grid; max-width:none; gap:5px; }
  #grv-room .j-tile{ aspect-ratio:1/1; }
  #grv-room .j-ctl:not(.j-fx){ grid-area:ctl; } #grv-room .j-fx{ grid-area:fx; } #grv-room .j-name{ grid-area:name; min-height:18px; font-size:14px; }
  #grv-room .j-tempo{ grid-area:tempo; max-width:none; width:100%; }
  #grv-room .j-ctl{ gap:clamp(8px,1.4vw,18px); }
  #grv-room .j-cell > .j-main{ width:clamp(40px,5.4vh,52px); height:clamp(40px,5.4vh,52px); }
  #grv-room .j-arr{ height:16px; } #grv-room .j-arr svg{ width:20px; height:12px; }
  #grv-room .plasmoids{ grid-area:pads; display:grid; grid-template-columns:repeat(2,auto); justify-content:center; gap:clamp(8px,1.6vh,18px) clamp(10px,1.4vw,22px); margin:0; }
  #grv-room .plasmoid canvas{ width:clamp(74px,11vh,112px); }
  #grv-room .plasmoids.big-row{ grid-area:theremin; display:flex; margin:0; }
  #grv-room .plasmoid.big canvas{ width:clamp(170px,30vh,250px); }
}
@media (min-width:1100px) and (max-height:820px){
  #grv-room .theroom{ max-width:calc(24vh * 1.86 + 50px); padding-top:6px; }
  #grv-room:not([hidden]){ row-gap:6px; }
  #grv-room .jackal{ gap:5px; }
  #grv-room .j-sun{ width:52px; height:52px; }
  #grv-room .j-grid{ gap:4px; } #grv-room .j-tile{ aspect-ratio:5/4; }
  #grv-room .j-cell{ gap:0; } #grv-room .j-cell > .j-main{ width:40px; height:40px; }
  #grv-room .j-arr{ height:13px; } #grv-room .j-arr svg{ width:18px; height:10px; }
  #grv-room .j-lab{ font-size:10.5px; margin-top:1px; }
  #grv-room .j-tempo input{ height:22px; }
  #grv-room .plasmoid canvas{ width:clamp(64px,10vh,96px); } #grv-room .plasmoid.big canvas{ width:clamp(150px,28vh,210px); }
  #grv-room .room-name{ font-size:11px; }
}

/* ONE SCREEN, revised: three columns, the doors largest in the centre */
@media (min-width:1100px){
  #grv-room:not([hidden]){ grid-template-columns:auto minmax(0,1fr) minmax(400px,460px); grid-template-areas:"pads doors jackal" "theremin doors jackal";
    align-items:center; column-gap:clamp(18px,2.4vw,40px); row-gap:10px; min-height:calc(100vh - var(--hh,117px) - 70px); }
  #grv-room .theroom{ grid-area:doors; align-self:center; width:100%; max-width:calc((100vh - 270px) * 1.8 + 40px); padding:0; }
  #grv-room .room-name{ font-size:12px; }
  #grv-room .plasmoids{ grid-area:pads; align-self:end; }
  #grv-room .plasmoids.big-row{ grid-area:theremin; align-self:start; justify-content:center; }
  #grv-room .plasmoid canvas{ width:clamp(64px,9.5vh,100px); }
  #grv-room .plasmoid.big canvas{ width:clamp(140px,24vh,220px); }
  #grv-room .jackal{ grid-area:jackal; max-width:460px; grid-template-columns:1fr; grid-template-areas:"sun" "grid" "ctl" "fx" "name" "tempo"; }
  #grv-room .j-sun{ justify-self:center; width:54px; height:54px; }
  #grv-room .j-tile{ aspect-ratio:5/4; }
}
@media (min-width:1100px) and (max-height:820px){
  #grv-room .j-sun{ width:46px; height:46px; }
  #grv-room .j-tile{ aspect-ratio:4/3; }
}
/* Vesper, two clips side by side */
.vesper{ max-width:740px; }
.vesper-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* the night journey, beneath the doors */
.theroom .journey{ grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:12px; margin-top:4px; min-height:44px; }
.jy-btn{ width:44px; height:44px; border-radius:50%; padding:0; cursor:pointer; display:grid; place-items:center; color:rgba(201,162,74,.6); background:#060504; border:1px solid rgba(201,162,74,.38); transition:color .6s ease, box-shadow .6s ease, border-color .6s ease; }
.jy-btn svg{ width:60%; height:60%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.jy-btn[aria-pressed="true"]{ color:#ffd38a; border-color:#E3C276; box-shadow:0 0 18px rgba(227,194,118,.35); }
.jy-place{ min-width:12ch; font-family:Cinzel,Georgia,serif; text-transform:uppercase; letter-spacing:.2em; font-size:14px; color:#E3C276; opacity:0; }
.jy-place.show{ animation:jyplace 9s ease forwards; }
@keyframes jyplace{ 0%{ opacity:0; } 12%,70%{ opacity:1; } 100%{ opacity:.35; } }
@media (max-width:520px){ .jy-place{ font-size:12px; letter-spacing:.12em; } }
.plasmoid canvas{ cursor:pointer; }
/* phones: all tabs visible at once, two by two; nothing hides off the edge */
@media (max-width:640px){
  .vis .vis-nav{ display:grid; grid-template-columns:1fr 1fr; overflow:visible; gap:0; padding:4px 0; }
  .vis .vis-nav button{ white-space:normal; text-align:center; padding:11px 6px; font-size:16px; border-bottom:1px solid var(--rule); }
  .vis .vis-nav button[aria-current]{ border-bottom-color:var(--gold); }
}
/* the Antechamber tab carries a small doorway, so it reads as a place to enter */
.grv .vis-nav button[data-to="grv-room"]::before{ content:""; display:inline-block; width:9px; height:13px; margin-right:8px; vertical-align:-1px;
  border:1px solid currentColor; border-bottom:0; border-radius:5px 5px 0 0; box-shadow:inset 0 -6px 6px -4px rgba(227,194,118,.6); }