/* ==========================================================================
   CHÂTEAU D'ARTOIS — multi-floor site
   Cinematic freeze-frame. Warm-dark château chrome, Fraunces titles,
   DM Mono telemetry labels, brass hotspots, wine floor names, film grain.
   ========================================================================== */

:root {
  --ink:#0c0a08; --ink-2:#16120d;
  --parchment:#efe6d4; --parchment-dim:#b8ad97;
  --brass:#c9a24b; --brass-lite:#e6c877;
  --wine:#7e1f34; --wine-lite:#a83e54;
  --cream:#efe6cf; --brownline:#5a3a24;   /* facade drawing palette */
  --ease:cubic-bezier(0.22,1,0.36,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  background:var(--ink); color:var(--parchment);
  font-family:"Fraunces",Georgia,serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; min-height:100vh;
}

/* ---- view switching -------------------------------------------------- */
.view { display:none; }
body[data-view="map"]   #view-map   { display:block; }
body[data-view="floor"] #view-floor { display:block; }

/* ---- top chrome ------------------------------------------------------ */
.chrome {
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2.4vw,26px) clamp(18px,4vw,46px); pointer-events:none;
  background:linear-gradient(180deg,rgba(6,4,3,0.55),transparent);
}
.chrome>*{ pointer-events:auto; }
.brand { font-family:"DM Mono",monospace; font-size:0.7rem; letter-spacing:0.34em; text-transform:uppercase; color:var(--parchment-dim); }
.brand b{ color:var(--parchment); font-weight:500; }
.controls{ display:flex; gap:10px; align-items:center; }
.seg{ display:inline-flex; border:1px solid rgba(201,162,75,0.35); border-radius:2px; overflow:hidden;
  font-family:"DM Mono",monospace; font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; }
.seg button{ background:transparent; color:var(--parchment-dim); border:0; padding:7px 11px; cursor:pointer; transition:.25s; }
.seg button[aria-pressed="true"]{ background:var(--brass); color:var(--ink); }
.seg button:hover{ color:var(--parchment); }
.toggle{ background:transparent; border:1px solid rgba(201,162,75,0.35); border-radius:2px;
  color:var(--parchment-dim); font-family:"DM Mono",monospace; font-size:0.6rem; letter-spacing:0.16em;
  text-transform:uppercase; padding:7px 11px; cursor:pointer; transition:.25s; }
.toggle[aria-pressed="true"]{ background:var(--wine); color:var(--parchment); border-color:var(--wine); }
.toggle:hover{ color:var(--parchment); }

/* ---- start overlay --------------------------------------------------- */
.start{ position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  background:radial-gradient(80% 80% at 50% 45%,#120d08 0%,#050403 100%);
  transition:opacity .8s var(--ease),visibility .8s; }
.start.gone{ opacity:0; visibility:hidden; }
.start .plate{ text-align:center; padding:0 24px; }
.start .crest{ font-family:"DM Mono",monospace; font-size:0.66rem; letter-spacing:0.5em; text-transform:uppercase; color:var(--brass); margin-bottom:1.4em; }
.start h1{ font-weight:300; font-size:clamp(2.4rem,8vw,6rem); line-height:0.98; }
.start h1 em{ font-style:italic; color:var(--brass-lite); }
.start .sub{ font-family:"DM Mono",monospace; font-size:0.66rem; letter-spacing:0.32em; text-transform:uppercase; color:var(--parchment-dim); margin-top:1.6em; }
.enter{ margin-top:2.6em; background:transparent; color:var(--parchment); border:1px solid var(--brass); border-radius:2px;
  font-family:"DM Mono",monospace; font-size:0.7rem; letter-spacing:0.28em; text-transform:uppercase; padding:14px 26px; cursor:pointer; transition:.3s var(--ease); }
.enter:hover{ background:var(--brass); color:var(--ink); letter-spacing:0.34em; }

/* ==========================================================================
   MAP VIEW — cutaway façade (placeholder line-drawing until real art)
   ========================================================================== */
#view-map{ min-height:100vh; display:none; place-items:center; overflow-x:hidden;
  background:#fdf7e8; padding:82px 20px 36px; }
body[data-view="map"] #view-map{ display:grid; }
/* map view is light — make the whole page bg cream so no dark shows on narrow screens */
body[data-view="map"]{ background:#fdf7e8; }
/* map view is light → adapt the top chrome to dark ink */
body[data-view="map"] .chrome{ background:linear-gradient(180deg,rgba(235,227,207,0.9),transparent); }
body[data-view="map"] .brand{ color:#8a795a; }
body[data-view="map"] .brand b{ color:#3a2e1c; }
body[data-view="map"] .map-hint{ color:#8a6a4a; }
body[data-view="map"] .toggle{ color:#6a5636; border-color:rgba(90,58,36,0.35); }
body[data-view="map"] .toggle[aria-pressed="true"]{ background:var(--wine); color:var(--cream); border-color:var(--wine); }
body[data-view="map"] .seg{ border-color:rgba(90,58,36,0.35); }
body[data-view="map"] .seg button{ color:#6a5636; }
body[data-view="map"] .seg button[aria-pressed="true"]{ background:var(--wine); color:var(--cream); }
.map-wrap{ text-align:center; }
.map-hint{ font-family:"DM Mono",monospace; font-size:0.62rem; letter-spacing:0.34em; text-transform:uppercase; color:var(--parchment-dim); margin-bottom:18px; }

/* transparent house cutout + calligraphic label rail beside it (flex row on the uniform bg) */
.facade-stage{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:clamp(8px,2.5vw,40px); }
.facade{ display:block; width:auto; height:min(82vh,700px); object-fit:contain; order:2; }
.floor-rail{ order:1; align-self:stretch; height:min(82vh,700px); min-width:170px; padding:3% 0;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; }
.rail-line{ display:flex; align-items:baseline; justify-content:flex-end; }
.rail-line.inline{ gap:8px; }
.rl-sep{ color:#8a6a4a; font-family:"Pinyon Script",cursive; font-size:1.4rem; }
.rail-label{ position:relative; background:transparent; border:0; cursor:pointer; text-align:right;
  font-family:inherit; padding:2px 0; transition:transform .3s var(--ease); }
.rail-label .rl-nm{ display:block; font-family:"Pinyon Script",cursive; color:#5f3a1c; /* warm dark brown */
  font-size:clamp(1.6rem,3vw,2.5rem); font-weight:400; line-height:1; }
.rail-label .rl-lv{ display:block; font-family:"DM Mono",monospace; font-size:0.5rem; letter-spacing:0.22em; text-transform:uppercase; color:#8a6a4a; margin-top:3px; }
.rail-label.minor .rl-nm{ font-size:clamp(0.98rem,1.7vw,1.4rem); }
.rail-label.minor .rl-lv{ font-size:0.46rem; }
.rail-label[data-access="gate"] .rl-nm::after{ content:" ⚿"; color:#8a6a4a; font-size:0.6em; }
.rail-label[data-access="audio"] .rl-nm::after{ content:" ♪"; color:#8a6a4a; font-size:0.6em; }
.rail-label:hover{ transform:translateX(-5px); }
.rail-label:hover .rl-nm{ color:#7d5028; }
.rail-label:focus-visible{ outline:none; }
.rail-label:focus-visible .rl-nm{ color:var(--wine-lite); text-decoration:underline; }
@media (max-width:680px){
  .floor-rail{ min-width:104px; } .rail-label .rl-nm{ font-size:1.35rem; }
  .facade-stage{ gap:6px; }
  /* keep the rail + façade row inside the viewport (was overflowing → dark gap) */
  .facade{ height:auto; width:auto; max-height:74vh; max-width:calc(100vw - 128px); }
}

/* the building: a tall narrow facade, brown line on cream */
.building{
  width:min(360px,86vw); margin:0 auto; position:relative;
  background:linear-gradient(180deg,#f2ead6,#e7dcc2);
  border:2px solid var(--brownline); border-bottom:none;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.8);
  outline:6px solid rgba(90,58,36,0.15); outline-offset:-14px;
}
.building::before{ /* roof pediment */
  content:""; position:absolute; left:-2px; right:-2px; top:-26px; height:26px;
  background:linear-gradient(180deg,#f2ead6,#eaddc4);
  border:2px solid var(--brownline); border-bottom:none;
  clip-path:polygon(8% 100%,50% 0,92% 100%);
}
/* placeholder facade texture: faint brick lines */
.building::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:repeating-linear-gradient(0deg,transparent 0 22px,rgba(90,58,36,0.10) 22px 23px);
}

.floorrow{ display:flex; border-bottom:1.5px solid rgba(90,58,36,0.55); }
.floorrow:last-child{ border-bottom:none; }
.floorband{
  position:relative; flex:1 1 0; min-width:0;
  padding:12px 14px; cursor:pointer; text-align:left; background:transparent;
  display:flex; align-items:center; gap:12px; transition:background .3s var(--ease);
  font-family:inherit;
}
.floorband.split{ flex:1 1 50%; }
.floorband.split.split-r{ border-left:1.5px solid rgba(90,58,36,0.55); }
.floorband.split .windows{ gap:8px; }
.floorband.split .lbl .nm{ font-size:0.9rem; }
.floorband .windows{ display:flex; gap:12px; flex:0 0 auto; }
.floorband .windows i{
  width:20px; height:30px; border:1.5px solid var(--brownline); background:rgba(255,255,255,0.35);
  position:relative; transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.floorband .windows i::after{ content:""; position:absolute; inset:0; border-left:1px solid rgba(90,58,36,0.5); left:50%; }
.floorband .lbl{ flex:1; }
.floorband .lbl .lv{ font-family:"DM Mono",monospace; font-size:0.54rem; letter-spacing:0.2em; text-transform:uppercase; color:#8a6a4a; }
.floorband .lbl .nm{ color:var(--wine); font-size:0.98rem; font-weight:600; line-height:1.15; margin-top:2px; }
.floorband[data-access="gate"] .nm::after{ content:" ⚿"; color:#8a6a4a; }
.floorband:hover{ background:rgba(126,31,52,0.06); }
.floorband:hover .windows i{ background:var(--brass-lite); box-shadow:0 0 14px 2px rgba(230,200,119,0.6); }
.floorband:focus-visible{ outline:2px solid var(--wine); outline-offset:-2px; }

/* ground floor gets a door instead of clean windows */
.floorband.has-door .door{ width:26px; height:40px; border:1.5px solid var(--brownline); background:#2a1c12; position:relative; }
.floorband.has-door .door::after{ content:""; position:absolute; left:50%; top:8px; width:3px; height:3px; border-radius:50%; background:var(--brass-lite); }

/* audio-only floor (click = SFX, no interior) */
.floorband.audio .lbl .nm::after{ content:" ♪"; color:#8a6a4a; font-size:0.8em; }
.floorband.audio:hover .lbl .nm::after{ color:var(--wine-lite); }

/* ivy trailing down (placeholder detail) */
.ivy{ position:absolute; top:-18px; right:6px; width:40px; height:70%; z-index:0; pointer-events:none; opacity:0.5; }
.ivy path{ stroke:#4b5f2a; stroke-width:2; fill:none; }
.ivy circle{ fill:#5c7a34; }
.building .base-rail{ position:absolute; left:-2px; right:-2px; bottom:-14px; height:14px; border:2px solid var(--brownline); border-top:none;
  background:repeating-linear-gradient(90deg,var(--brownline) 0 1.5px,transparent 1.5px 12px); }

/* ==========================================================================
   FLOOR VIEW — the freeze-frame stage (ported from the slice prototype)
   ========================================================================== */
.stage-wrap{ position:relative; height:100vh; width:100%; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 40%,#100c08 0%,#060504 100%); overflow:hidden; }
.stage{ position:relative; width:min(100vw,calc(100vh*16/9)); aspect-ratio:16/9; background:#000;
  box-shadow:0 40px 120px -30px rgba(0,0,0,0.9); }
.stage video,.stage .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.stage .hero-img{ opacity:0; transition:opacity .5s var(--ease); }
.stage.show-hero .hero-img{ opacity:1; }
/* ---- PER-FLOOR GRADE, baked in, always on (no toggle) — Tristan's per-floor calls ---- */
/* basement (studio): grade OFF — just the exposure/sharpen lift */
.stage.floor-basement video, .stage.floor-basement .hero-img{ filter:brightness(1.06) saturate(1.04); }
/* production (1er): grade OFF — no filter */
/* laundromat + control room: global grade ON */
.stage.floor-buanderie video, .stage.floor-buanderie .hero-img,
.stage.floor-controlroom video, .stage.floor-controlroom .hero-img{ filter:contrast(1.06) saturate(0.92) sepia(0.12) brightness(0.98); }
/* library: grade ON (brighter + more contrast) */
.stage.floor-library video, .stage.floor-library .hero-img{ filter:brightness(1.15) contrast(1.16) saturate(0.99) sepia(0.06); }

/* grade colour overlay — shown only on the graded floors */
.stage .grade{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .5s;
  background:linear-gradient(180deg,rgba(120,60,20,0.12),rgba(20,10,40,0.16));
  mix-blend-mode:soft-light; }
.stage.floor-buanderie .grade, .stage.floor-controlroom .grade, .stage.floor-library .grade{ opacity:1; }

.stage::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(130% 100% at 50% 45%,transparent 55%,rgba(0,0,0,0.55) 100%); mix-blend-mode:multiply; }
.grain{ position:absolute; inset:-50%; z-index:4; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .6s steps(3) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

/* CSS push-in: applied to hero-img/video before freeze */
.stage.pushing video,.stage.pushing .hero-img{ animation:pushin 1.25s var(--ease) forwards; transform-origin:50% 46%; }
@keyframes pushin{ from{transform:scale(1.1)} to{transform:scale(1.0)} }

/* title card */
.titlecard{ position:absolute; left:clamp(20px,4vw,64px); bottom:clamp(20px,5vh,60px); z-index:6; opacity:0; transform:translateY(18px); pointer-events:none; text-shadow:0 2px 30px rgba(0,0,0,0.8); }
.is-frozen .titlecard{ animation:rise .9s var(--ease) .15s forwards; }
.titlecard .numeral{ font-size:clamp(2.2rem,6vw,4.4rem); font-weight:300; font-style:italic; color:var(--brass-lite); line-height:0.9; }
.titlecard .ttl{ font-size:clamp(1.5rem,3.4vw,2.8rem); font-weight:600; margin-top:0.1em; }
.titlecard .kicker{ font-family:"DM Mono",monospace; font-size:clamp(0.6rem,1vw,0.76rem); letter-spacing:0.4em; text-transform:uppercase; color:var(--parchment-dim); margin-top:0.9em; }
@keyframes rise{ to{opacity:1; transform:translateY(0)} }

/* placeholder badge */
.ph-badge{ position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:8; opacity:0; transition:opacity .5s .4s;
  font-family:"DM Mono",monospace; font-size:0.54rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--parchment-dim);
  background:rgba(12,10,8,0.7); border:1px solid rgba(201,162,75,0.3); border-radius:2px; padding:5px 10px; }
.is-frozen .ph-badge{ opacity:0.8; }

/* hotspots */
.hotspot{ position:absolute; z-index:7; transform:translate(-50%,-50%); opacity:0; pointer-events:none; background:none; border:0; cursor:pointer; color:var(--parchment); font-family:"DM Mono",monospace; }
.is-frozen .hotspot{ pointer-events:auto; animation:pop .55s var(--ease) forwards; }
.hotspot .ring{ display:block; width:26px; height:26px; border:1.5px solid var(--brass-lite); border-radius:50%; position:relative; transition:transform .35s var(--ease),border-color .35s var(--ease); }
.hotspot .ring::before{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(230,200,119,0.55); animation:pulse 2.6s ease-out infinite; }
.hotspot .ring::after{ content:""; position:absolute; inset:9px; border-radius:50%; background:var(--brass-lite); }
.hotspot[data-type="dungeon"] .ring{ border-color:var(--wine-lite); }
.hotspot[data-type="dungeon"] .ring::after{ background:var(--wine-lite); }
.hotspot:hover .ring,.hotspot:focus-visible .ring{ transform:scale(1.28); border-color:#fff; }
/* hidden easter-egg hotspot (the DUNGEON book): no visible marker, faint reveal only on hover */
.hotspot.hidden .ring{ opacity:0; }
.hotspot.hidden .ring::before{ animation:none; box-shadow:none; }
.hotspot.hidden:hover .ring,.hotspot.hidden:focus-visible .ring{ opacity:0.5; }
.hotspot:focus-visible{ outline:none; }
.hotspot .card{ position:absolute; left:50%; top:calc(50% + 26px); transform:translateX(-50%) translateY(-6px);
  min-width:168px; max-width:250px; background:rgba(12,10,8,0.86); backdrop-filter:blur(8px);
  border:1px solid rgba(201,162,75,0.4); border-radius:3px; padding:10px 12px; opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease),transform .28s var(--ease); text-align:left; }
.hotspot:hover .card,.hotspot:focus-visible .card{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.hotspot .card .lab{ font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass-lite); display:block; }
.hotspot[data-type="dungeon"] .card .lab{ color:var(--wine-lite); }
.hotspot .card .blb{ font-family:"Fraunces",serif; font-size:0.92rem; font-style:italic; color:var(--parchment); margin-top:5px; line-height:1.3; }
.hotspot .card .tag{ font-size:0.58rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--parchment-dim); margin-top:8px; display:block; }
.hotspot .card .badge{ display:inline-block; font-family:"DM Mono",monospace; font-size:0.52rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--brass); border:1px solid rgba(201,162,75,0.5); border-radius:2px; padding:2px 6px; margin-bottom:7px; }
@keyframes pop{ from{opacity:0; transform:translate(-50%,-50%) scale(0.4)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(230,200,119,0.5)} 70%{box-shadow:0 0 0 16px rgba(230,200,119,0)} 100%{box-shadow:0 0 0 0 rgba(230,200,119,0)} }

/* floor nav: up / down / back */
.floornav{ position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(18px,5vh,42px); z-index:14; display:flex; flex-direction:column; gap:8px; opacity:0; visibility:hidden; transition:opacity .5s,visibility .5s; }
.is-frozen .floornav{ opacity:1; visibility:visible; }
.floornav button{ background:rgba(12,10,8,0.72); color:var(--parchment-dim); border:1px solid rgba(201,162,75,0.35); border-radius:2px;
  font-family:"DM Mono",monospace; font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; padding:9px 13px; cursor:pointer; transition:.25s; }
.floornav button:hover:not(:disabled){ color:var(--parchment); border-color:var(--brass); }
.floornav button:disabled{ opacity:0.3; cursor:default; }
.backmap{ position:fixed; left:clamp(16px,3vw,32px); top:clamp(66px,9vh,90px); z-index:14; opacity:0; visibility:hidden; transition:opacity .5s,visibility .5s;
  background:rgba(12,10,8,0.72); color:var(--parchment-dim); border:1px solid rgba(201,162,75,0.35); border-radius:2px;
  font-family:"DM Mono",monospace; font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; padding:9px 13px; cursor:pointer; }
.is-frozen .backmap{ opacity:1; visibility:visible; }
.backmap:hover{ color:var(--parchment); border-color:var(--brass); }

/* ==========================================================================
   GATE (buanderie) — password → 18+ → chair
   ========================================================================== */
.gate{ position:absolute; inset:0; z-index:9; display:grid; place-items:center; }
.gate .panel{ background:rgba(8,6,4,0.82); backdrop-filter:blur(6px); border:1px solid rgba(201,162,75,0.4); border-radius:4px; padding:26px 28px; width:min(420px,86%); text-align:center; }
.gate .panel .lab{ font-family:"DM Mono",monospace; font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--brass-lite); }
.gate .panel h3{ font-weight:400; font-style:italic; font-size:1.3rem; margin:0.5em 0 1em; color:var(--parchment); }
.gate .panel form{ display:flex; gap:8px; }
.gate .panel input{ flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(201,162,75,0.4); border-radius:2px; color:var(--parchment);
  font-family:"DM Mono",monospace; letter-spacing:0.2em; padding:11px 12px; }
.gate .panel input:focus{ outline:1px solid var(--brass); }
.gate .panel button{ background:var(--brass); color:var(--ink); border:0; border-radius:2px; font-family:"DM Mono",monospace; font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; padding:0 16px; cursor:pointer; }
.gate .err{ color:var(--wine-lite); font-family:"DM Mono",monospace; font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; margin-top:12px; min-height:1em; }
.gate.wrong .panel{ animation:shake .4s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }

.adult{ position:absolute; inset:0; z-index:11; display:none; place-items:center; background:rgba(4,3,2,0.92); }
.adult.on{ display:grid; }
.adult .panel{ text-align:center; padding:0 24px; max-width:460px; }
.adult .warn{ color:var(--wine-lite); font-family:"DM Mono",monospace; font-size:0.66rem; letter-spacing:0.34em; text-transform:uppercase; }
.adult h3{ font-weight:300; font-size:2rem; margin:0.6em 0 0.3em; }
.adult p{ color:var(--parchment-dim); font-style:italic; }
.adult .row{ display:flex; gap:10px; justify-content:center; margin-top:1.8em; }
.adult .yes{ background:var(--wine); color:var(--cream); border:0; }
.adult .no{ background:transparent; color:var(--parchment-dim); border:1px solid rgba(184,173,151,0.4); }
.adult .row button{ font-family:"DM Mono",monospace; font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase; padding:13px 20px; border-radius:2px; cursor:pointer; }

/* chair hotspot after unlock (reuses hotspot look, wine) */
.chair-spot{ position:absolute; z-index:8; transform:translate(-50%,-50%); opacity:0; pointer-events:none; background:none; border:0; cursor:pointer; }
.stage.unlocked .chair-spot{ opacity:1; pointer-events:auto; animation:pop .6s var(--ease) .3s both; }
.chair-spot .ring{ display:block; width:30px; height:30px; border:1.5px solid var(--wine-lite); border-radius:50%; position:relative; }
.chair-spot .ring::after{ content:""; position:absolute; inset:10px; border-radius:50%; background:var(--wine-lite); }
.chair-spot .cap{ position:absolute; left:50%; top:calc(50% + 30px); transform:translateX(-50%); white-space:nowrap;
  font-family:"DM Mono",monospace; font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--parchment); text-shadow:0 1px 8px #000; }
/* door-open push-in toward the chair */
.stage.unlocked .hero-img{ animation:doorpush 1.2s var(--ease) forwards; transform-origin:50% 74%; }
@keyframes doorpush{ from{transform:scale(1); filter:brightness(0.9)} to{transform:scale(1.25); filter:brightness(1.05)} }

/* ---- modal ----------------------------------------------------------- */
.modal{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; background:rgba(4,3,2,0.7); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .4s var(--ease),visibility .4s; }
.modal.open{ opacity:1; visibility:visible; }
.modal .panel{ width:min(760px,92vw); background:var(--ink-2); border:1px solid rgba(201,162,75,0.4); border-radius:4px; transform:translateY(16px) scale(0.98); transition:transform .4s var(--ease); overflow:hidden; }
.modal.open .panel{ transform:none; }
.modal .reelframe{ aspect-ratio:16/9; background:repeating-linear-gradient(45deg,#100b06 0 12px,#14100a 12px 24px); display:grid; place-items:center; position:relative; border-bottom:1px solid rgba(201,162,75,0.25); }
.modal .reelframe .play{ width:74px; height:74px; border-radius:50%; border:1.5px solid var(--brass-lite); display:grid; place-items:center; }
.modal .reelframe .play::after{ content:""; border-left:20px solid var(--brass-lite); border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px; }
.modal .meta{ padding:20px 24px 24px; }
.modal .meta .lab{ font-family:"DM Mono",monospace; font-size:0.62rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--brass-lite); }
.modal .meta h3{ font-weight:500; font-size:1.7rem; margin-top:0.3em; }
.modal .meta p{ color:var(--parchment-dim); font-style:italic; margin-top:0.5em; }
.modal .x{ position:absolute; top:14px; right:16px; z-index:3; background:rgba(4,3,2,0.5); width:34px; height:34px; border-radius:50%; border:0; color:var(--parchment); font-size:1.2rem; cursor:pointer; line-height:1; opacity:0.8; }
.modal .x:hover{ opacity:1; }
/* real showreel player (YouTube iframe / Dropbox video) */
.modal .reelframe .reel-embed{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.modal .reelframe .reel-embed.dropbox{ display:flex; align-items:center; justify-content:center; background:#000; overflow:hidden; }
.modal .reelframe .reel-embed.dropbox video{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:#000; }
.modal .reelframe .reel-fallback{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:"DM Mono",monospace; font-size:0.6rem; letter-spacing:0.14em; color:var(--brass-lite); text-decoration:none;
  background:rgba(4,3,2,0.7); padding:5px 10px; border-radius:3px; border:1px solid rgba(201,162,75,0.3); }
.modal .reelframe .reel-fallback:hover{ color:var(--parchment); }
.modal .reelframe.empty .soon{ position:absolute; bottom:20%; left:0; right:0; text-align:center;
  font-family:"DM Mono",monospace; font-size:0.62rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--parchment-dim); }
.modal .reelframe .reel-linkcard{ position:absolute; inset:0; display:grid; place-items:center; color:var(--brass-lite);
  font-family:"DM Mono",monospace; font-size:0.8rem; letter-spacing:0.14em; text-decoration:none; }
.modal .reelframe .reel-linkcard:hover{ color:var(--parchment); }
/* playlist strip (only when a reel has >1 item) */
.modal .reellist{ display:flex; flex-wrap:wrap; gap:6px; padding:12px 16px 0; }
.modal .reellist .reel-item{ background:rgba(255,255,255,0.05); border:1px solid rgba(201,162,75,0.28); border-radius:3px; cursor:pointer;
  color:var(--parchment-dim); font-family:"DM Mono",monospace; font-size:0.58rem; letter-spacing:0.1em; padding:6px 10px; transition:.2s; }
.modal .reellist .reel-item:hover{ color:var(--parchment); border-color:rgba(201,162,75,0.6); }
.modal .reellist .reel-item[aria-current]{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
/* writing-page reel (bougie / félix) */
.modal .reelframe.doc, .modal .reelframe.links{ aspect-ratio:auto; background:var(--ink-2); display:block; }
.modal .reelframe.doc{ max-height:min(60vh,520px); overflow-y:auto; }
.modal .reel-doc{ padding:30px clamp(22px,4vw,44px); }
.modal .reel-doc .doc-intro{ font-family:"Fraunces",serif; font-style:italic; font-size:1.05rem; line-height:1.5; color:var(--brass-lite); margin:0 0 1.2em; }
.modal .reel-doc .doc-body{ font-family:"Fraunces",serif; font-weight:300; font-size:0.98rem; line-height:1.75; color:var(--parchment); white-space:pre-wrap; }
.modal .reel-doc .doc-wip{ font-family:"DM Mono",monospace; font-size:0.66rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--parchment-dim); }
/* link directory reel (labels / built things) */
.modal .reel-links{ display:flex; flex-direction:column; }
.modal .reel-linkrow{ display:flex; align-items:center; justify-content:space-between; gap:14px; text-decoration:none;
  padding:15px clamp(20px,3vw,28px); border-bottom:1px solid rgba(201,162,75,0.16); color:var(--parchment); transition:background .2s; }
.modal .reel-linkrow:last-child{ border-bottom:0; }
.modal .reel-linkrow:hover{ background:rgba(201,162,75,0.08); }
.modal .reel-linkrow .rl-t{ font-family:"Fraunces",serif; font-size:1rem; }
.modal .reel-linkrow .rl-go{ font-family:"DM Mono",monospace; color:var(--brass-lite); }
/* the dungeon scary skin — dark & bloodied */
.modal.dungeon-skin{ background:rgba(2,0,0,0.86); }
.modal.dungeon-skin .panel{ background:#0a0405; border-color:#4a1018; box-shadow:0 0 60px rgba(120,10,20,0.4); }
.modal.dungeon-skin .meta .lab{ color:#8a2028; }
.modal.dungeon-skin .meta h3{ color:#c94b52; font-family:"Fraunces",serif; font-style:italic; }
.modal.dungeon-skin .x{ background:rgba(60,6,10,0.6); color:#c96; }
/* contact form */
.modal .contact-panel .meta{ padding:24px 26px 6px; }
.modal #c-form{ padding:6px 26px 26px; display:flex; flex-direction:column; gap:10px; }
.modal #c-form input, .modal #c-form textarea{ background:rgba(255,255,255,0.05); border:1px solid rgba(201,162,75,0.35); border-radius:3px; color:var(--parchment); padding:11px 13px; font-family:"Fraunces",serif; font-size:0.95rem; width:100%; }
.modal #c-form input::placeholder, .modal #c-form textarea::placeholder{ color:var(--parchment-dim); }
.modal #c-form input:focus, .modal #c-form textarea:focus{ outline:1px solid var(--brass); }
.modal #c-form textarea{ resize:vertical; min-height:92px; }
.modal #c-submit{ background:var(--brass); color:var(--ink); border:0; border-radius:3px; font-family:"DM Mono",monospace; font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; padding:12px; cursor:pointer; margin-top:2px; }
.modal #c-submit:hover{ filter:brightness(1.08); }
.modal #c-submit:disabled{ opacity:0.6; cursor:default; }
.modal .c-status{ font-family:"DM Mono",monospace; font-size:0.7rem; letter-spacing:0.06em; min-height:1.2em; text-align:center; }
.modal .c-status.ok{ color:#8ec98e; }
.modal .c-status.err{ color:#c94b52; }

/* ==========================================================================
   THE DUNGEON — flashlight-cursor easter egg
   ========================================================================== */
#dungeon{ position:fixed; inset:0; z-index:60; display:none; background:#000; --mx:50%; --my:50%; }
#dungeon.on{ display:block; }
#dungeon.on ~ #dungeon-exit{ display:block; }
#dungeon.live{ cursor:none; }                 /* flashlight only once you're inside */
/* the flashlight veil — only in the live room */
#dungeon .veil{ display:none; position:absolute; inset:0; z-index:2;
  background:radial-gradient(circle 150px at var(--mx) var(--my), rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 44%, rgba(0,0,0,0.99) 72%); }
#dungeon.live .veil{ display:block; }
/* filigree dungeon engraving — offset-black line-art decor (revealed by the flashlight in darkweb mode) */
#dungeon .decor{ position:absolute; inset:0; z-index:0; background:url(assets/dungeon/engraving.png) center/cover no-repeat; opacity:0; pointer-events:none; transition:opacity .6s; }
#dungeon.locked .decor, #dungeon.warned .decor{ opacity:0.14; }
#dungeon.nodark .decor{ opacity:0.6; }
#dungeon.live .decor{ opacity:0.9; }   /* under the veil → the white flashlight reveals it */
#dungeon .glyph{ position:absolute; inset:0; display:grid; place-items:center; z-index:1; }
#dungeon .glyph h2{ font-family:"Fraunces",serif; font-style:italic; font-weight:300; letter-spacing:0.08em; font-size:clamp(2rem,7vw,5rem); color:#2a0a0e; text-shadow:0 0 30px #14060a; }
/* LOCKED / WARNED states — dim red room + centred panel, cursor normal */
#dungeon.locked, #dungeon.warned{ background:radial-gradient(circle at 50% 40%, #180507 0%, #000 80%); display:grid; place-items:center; }
#dungeon .dpanel{ position:relative; z-index:5; width:min(440px,88%); text-align:center; background:rgba(10,3,4,0.92);
  border:1px solid #4a1018; border-radius:4px; padding:28px 30px; box-shadow:0 0 60px rgba(120,10,20,0.35); }
#dungeon .dpanel .lab{ font-family:"DM Mono",monospace; font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:#8a2028; }
#dungeon .dpanel h3{ font-family:"Fraunces",serif; font-style:italic; font-weight:300; font-size:1.5rem; color:#c94b52; margin:0.5em 0 0.9em; }
#dungeon .dpanel p{ color:#9a6b6f; font-size:0.9rem; line-height:1.5; margin-bottom:1.2em; }
#dungeon .dpanel form{ display:flex; gap:8px; }
#dungeon .dpanel input{ flex:1; background:rgba(255,255,255,0.05); border:1px solid #4a1018; border-radius:2px; color:#e7d7c9; padding:10px 12px; font-family:"DM Mono",monospace; }
#dungeon .dpanel input:focus{ outline:1px solid #8a2028; }
#dungeon .dpanel button{ background:#6a1018; color:#f0d9d9; border:0; border-radius:2px; font-family:"DM Mono",monospace; font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; padding:0 16px; cursor:pointer; }
#dungeon .dpanel .row{ display:flex; gap:10px; justify-content:center; }
#dungeon .dpanel.warn .yes{ background:#6a1018; color:#f0d9d9; border:0; border-radius:2px; font-family:"DM Mono",monospace; font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; padding:10px 16px; cursor:pointer; }
#dungeon .dpanel.warn .no{ background:transparent; color:#9a6b6f; border:1px solid #4a1018; border-radius:2px; font-family:"DM Mono",monospace; font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; padding:10px 16px; cursor:pointer; }
#dungeon .dpanel .err{ color:#c94b52; font-size:0.72rem; min-height:1em; margin-top:0.6em; }
#dungeon .dpanel.wrong{ animation:shake .4s; }
/* reactive hidden nodes — invisible until the mouse rolls over them */
#dungeon-nodes{ position:absolute; inset:0; z-index:3; display:none; }
#dungeon.live #dungeon-nodes{ display:block; }
#dungeon .dnode{ position:absolute; transform:translate(-50%,-50%); background:none; border:0; cursor:pointer; padding:26px; }
#dungeon .dnode .dnring{ display:block; width:14px; height:14px; border-radius:50%; background:#1a0508; box-shadow:0 0 0 1px #2a0a0e; opacity:0.5; transition:.18s; }
#dungeon .dnode .dnlab{ position:absolute; left:50%; top:calc(50% + 20px); transform:translateX(-50%); white-space:nowrap;
  font-family:"DM Mono",monospace; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:#7a2028; opacity:0; pointer-events:none; transition:.2s; }
#dungeon .dnode:hover{ animation:dnjitter .12s steps(2) infinite; }
#dungeon .dnode:hover .dnring{ opacity:1; background:#7a0f16; box-shadow:0 0 22px 6px rgba(150,15,25,0.7); transform:scale(1.4); }
#dungeon .dnode:hover .dnlab{ opacity:1; color:#c94b52; text-shadow:0 0 14px #4a1018; }
@keyframes dnjitter{ 0%{ transform:translate(calc(-50% - 1px),calc(-50% + 1px)) rotate(var(--jit)); } 100%{ transform:translate(calc(-50% + 1px),calc(-50% - 1px)) rotate(0deg); } }
/* DESIGN PHASE — darkweb OFF: dim-lit room, nodes visible & labelled (no flashlight) */
#dungeon.nodark{ cursor:auto; background:radial-gradient(circle at 50% 34%, #1c080b 0%, #070304 82%); }
#dungeon.nodark .veil{ display:none; }
#dungeon.nodark .glyph{ place-items:start center; padding-top:6vh; }
#dungeon.nodark .glyph h2{ color:#5a141b; font-size:clamp(1.6rem,5vw,3.2rem); }
#dungeon.nodark .dnode:hover{ animation:none; }
#dungeon.nodark .dnode .dnring{ opacity:1; background:#7a0f16; box-shadow:0 0 14px 3px rgba(150,15,25,0.5); }
#dungeon.nodark .dnode .dnlab{ opacity:1; color:#c07680; }
#dungeon.nodark .dnode:hover .dnring{ transform:scale(1.4); box-shadow:0 0 22px 6px rgba(190,28,38,0.85); }
#dungeon.nodark .dnode:hover .dnlab{ color:#e79aa2; }
#dungeon-exit{ display:none; position:fixed; top:18px; right:20px; z-index:61; cursor:pointer;
  background:transparent; border:1px solid #4a1018; color:#7a2028; font-family:"DM Mono",monospace;
  font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; padding:8px 12px; }
#dungeon-exit:hover{ color:#b03a44; border-color:#b03a44; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.08s !important; }
  .grain{ display:none; }
}