/* =====================================================================
   CALAVERAS CANTINA — SD PRESENTATION
   Design system: espresso suede + gold foil + cinematic 3D motion
   ===================================================================== */

:root{
  --espresso:#241b14;
  --espresso-deep:#180f0a;
  --void:#0a0603;
  --copper:#6e3f2a;
  --oxblood:#4a1f1c;
  --gold:#c5984e;
  --gold-soft:#b8924f;
  --gold-bright:#e4b86a;
  --bone:#e9dcc5;
  --bone-dim:#c9b89a;
  --ash:#8a7c68;

  --serif:"Cormorant Garamond", Georgia, serif;
  --serif-display:"Cormorant", "Cormorant Garamond", Georgia, serif;
  --sans:"Jost", "Futura", "Avenir Next", sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--espresso-deep)}

/* ---- shared label / type devices ---- */
.label{
  font-family:var(--sans);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold-soft);
}
.star{color:var(--gold);display:inline-block}

/* ---- atmosphere overlays ---- */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.vignette{
  position:fixed;inset:0;z-index:8999;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* =====================================================================
   INTRO — THE ENVELOPE (scroll-driven 3D)
   ===================================================================== */
/* taller now — the extra height is the reading beat for the mission card */
.intro-scroll{height:700vh;position:relative;background:var(--void)}
.intro-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(110% 90% at 50% 42%, #1f150d 0%, var(--void) 78%);
}
.env3d-scene{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  perspective:1500px;
}
.env3d{
  position:relative;width:min(62vw,760px);aspect-ratio:3/2;
  transform-style:preserve-3d;will-change:transform;
}
.env-shell{position:absolute;inset:0;transform-style:preserve-3d}

/* body */
.env-back{
  position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(rgba(28,19,12,.35),rgba(14,9,5,.55)), url("../img/texture-espresso.jpg") center/cover;
  box-shadow:0 70px 140px rgba(0,0,0,.75), inset 0 0 70px rgba(0,0,0,.45);
}

/* interior void behind the front — a shallow box, not a flat black hole */
.env-interior{
  position:absolute;inset:2.5%;border-radius:6px;overflow:hidden;
  background:#0a0604;transform:translateZ(1px);
}
/* inner walls catching light — top lip, side falloffs, floor shadow */
.env-interior::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(122,82,52,.5) 0%, rgba(70,44,26,.18) 5%, transparent 14%),
    linear-gradient(to right,  rgba(96,62,38,.35) 0%, transparent 7%),
    linear-gradient(to left,   rgba(96,62,38,.35) 0%, transparent 7%),
    linear-gradient(to top,    rgba(40,24,12,.5)  0%, transparent 12%);
}
/* suede texture ghosting in the walls */
.env-interior::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:url("../img/texture-espresso.jpg") center/cover;
  mix-blend-mode:overlay;
}
.env-interior .glow{
  position:absolute;inset:-25%;
  background:radial-gradient(circle,
    rgba(232,196,128,.6) 0%,
    rgba(206,128,62,.28) 30%,
    rgba(146,68,34,.14) 50%,
    transparent 66%);
  opacity:.14;transform:scale(.55);will-change:transform,opacity;
}

/* ---- the front: Mark's envelope photo sliced at the flap seam ----
   Closed = the photo as-is. Opening = top panel lifts up-back on the
   envelope's top edge, bottom panel folds down-forward on the bottom edge.
   Each panel: .out = its slice of the photo, .in = copper lining
   (.in is pre-flipped 180° so it shows once the panel passes 90°).  */
.env-panel{position:absolute;left:0;right:0;transform-style:preserve-3d;will-change:transform}
.env-panel .face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
/* round only the OUTER corners — the seam edges must be dead straight */
.panel-top .face{border-radius:8px 8px 0 0}
.panel-bottom .face{border-radius:0 0 8px 8px}
.env-panel .face.in{
  background:linear-gradient(rgba(40,18,8,.32),rgba(18,7,3,.6)), url("../img/texture-copper.jpg") center/cover;
}

/* seam at the flap edge in the photo — runs through the wax seal's center,
   so opening the gate breaks the seal in half (real wax behavior) */
.panel-top{top:0;height:45.9%;transform-origin:50% 0;transform:translateZ(3px)}
.panel-top .face.out{
  background-image:url("../img/envelope-front.jpg");
  background-size:100% auto;background-position:0 0;
}
.panel-top .face.in{transform:rotateX(180deg)}
.panel-top .face.in::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.45), transparent 40%)}

/* starts a hair above the seam — the overlap hides any subpixel gap and is
   covered by panel-top (higher translateZ), so the seal reads whole when closed */
.panel-bottom{top:45.65%;bottom:0;transform-origin:50% 100%;transform:translateZ(2.5px)}
.panel-bottom .face.out{
  background-image:url("../img/envelope-front.jpg");
  background-size:100% auto;background-position:0 100%;
}
.panel-bottom .face.in{transform:rotateX(180deg)}
.panel-bottom .face.in::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.45), transparent 40%)}

/* (no seam shadow — the photo's own flap shadow does the work; anything
   painted here would draw a line across the wax seal) */

/* the void we pass into */
.intro-void{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(90% 70% at 50% 50%, #160e07 0%, var(--void) 75%);
  will-change:opacity;
}

/* scroll hint */
.intro-hint{
  position:absolute;bottom:6vh;left:0;right:0;text-align:center;z-index:5;
}
.hint-text{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--gold-soft);
}
.hint-line{
  display:block;width:1px;height:44px;margin:14px auto 0;
  background:linear-gradient(var(--gold), transparent);
  animation:hintPulse 2.4s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.25;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* =====================================================================
   THE MISSION — revealed in the middle of the opened card, read, then it
   expands & diffuses as you dive through to the menu (timeline-driven)
   ===================================================================== */
.mission-layer{
  position:absolute;left:50%;top:50%;z-index:6;
  transform:translate(-50%,-50%);
  width:min(92vw,1120px);
  opacity:0;pointer-events:none;
  will-change:opacity,transform,filter;
}
.mission-card{
  position:relative;overflow:hidden;border-radius:10px;
  padding:clamp(2.2rem,5.5vh,4rem) clamp(1.8rem,5vw,4.4rem);
  background:
    linear-gradient(152deg, rgba(86,44,23,.6) 0%, rgba(28,15,8,.82) 100%),
    url("../img/texture-copper.jpg") center/cover;
  border:1px solid rgba(197,152,78,.22);
  box-shadow:
    0 60px 130px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(228,184,106,.16),
    inset 0 0 90px rgba(0,0,0,.4);
}
/* soft inner vignette so the body copy stays legible over the clay */
.mission-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, transparent 45%, rgba(12,7,3,.45) 100%);
}
.mission-title{
  position:relative;z-index:2;
  font-family:var(--serif-display);font-weight:500;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;color:var(--bone);
  text-align:right;margin-bottom:clamp(1.1rem,3vh,1.9rem);
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.mission-title span{color:var(--gold)}
.mission-body{
  position:relative;z-index:2;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1rem,1.5vw,1.32rem);
  color:#f3e7d2;max-width:64ch;
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.mission-body p{line-height:1.42}
.mission-body p + p{margin-top:1.05em}
.mission-body em{font-style:italic;color:var(--gold-bright)}
@media(max-width:680px){
  .mission-title{text-align:center;font-size:clamp(2rem,9vw,3rem)}
  .mission-body{font-size:1rem}
  .mission-body p{line-height:1.4}
}

/* =====================================================================
   THE SPACE — menu floating in 3D, inside the pinned intro
   ===================================================================== */
.space-scene{
  position:absolute;inset:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(110% 95% at 50% 38%, #18100a 0%, var(--void) 80%);
  opacity:0;pointer-events:none;   /* the intro timeline brings it alive */
}
.space-scene.live{pointer-events:auto}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* light pooling on the unseen floor beneath the panel */
.floor-pool{
  position:absolute;left:50%;bottom:5%;width:74%;height:20%;
  transform:translateX(-50%) scaleY(.42);
  background:radial-gradient(ellipse at 50% 50%, rgba(197,152,78,.16) 0%, rgba(197,152,78,.05) 45%, transparent 70%);
  filter:blur(26px);pointer-events:none;will-change:opacity;
}
.space-watermark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--serif-display);font-weight:600;letter-spacing:.18em;
  font-size:clamp(6rem,17vw,15rem);color:rgba(201,158,86,.13);
  text-shadow:0 0 40px rgba(197,152,78,.12);
  white-space:nowrap;pointer-events:none;user-select:none;will-change:transform;
}
.space-glow{
  position:absolute;left:50%;top:52%;width:min(70vw,900px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;will-change:transform;
  background:radial-gradient(circle, rgba(197,152,78,.13) 0%, rgba(197,152,78,.04) 42%, transparent 65%);
}

.float-wrap{
  position:relative;z-index:3;perspective:1300px;
  width:100%;display:flex;align-items:center;justify-content:center;
  padding:7vh 5vw;
}
.float-panel{
  width:min(800px,94vw);
  padding:clamp(1.6rem,3.6vh,2.8rem) clamp(1.6rem,4vw,3.2rem);
  display:flex;gap:clamp(1.2rem,3vw,2.4rem);align-items:stretch;
  border-radius:16px;position:relative;
  background:linear-gradient(168deg, rgba(38,26,17,.78) 0%, rgba(22,14,9,.86) 100%);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(197,152,78,.22);
  box-shadow:
    0 60px 120px rgba(0,0,0,.6),
    0 18px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(228,184,106,.18);
  transform-style:preserve-3d;will-change:transform;
}
/* gold hairline glint along the top edge */
.float-panel::before{
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(228,184,106,.55), transparent);
}
/* faint reflection on the floor below — sells the "object in a room" read */
.float-panel{
  -webkit-box-reflect:below 22px linear-gradient(to bottom, transparent 76%, rgba(255,255,255,.05));
}

/* vertical MENU lockup down the left (per Mark's menu artwork) */
.menu-mark{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  padding-right:clamp(1rem,2.4vw,2rem);border-right:1px solid rgba(197,152,78,.18);
  transform:translateZ(30px);
}
/* Mark's real MENU lockup (extracted from the artwork), centered, a touch smaller */
.mm-img{
  height:clamp(15rem,46vh,25rem);width:auto;display:block;
  filter:drop-shadow(0 0 26px rgba(197,152,78,.16));
}
/* big interlocking MENU — letters overlap vertically like Mark's artwork */
.mm-stack{
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--serif-display);font-weight:500;color:var(--gold);
  font-size:clamp(5rem,19vh,13rem);letter-spacing:.01em;
  text-shadow:0 0 34px rgba(197,152,78,.22);
}
.mm-stack span{display:block;line-height:.92;margin-top:-.36em}  /* the overlap */
.mm-stack span:first-child{margin-top:0}
.mm-tag{
  font-family:var(--serif-display);font-style:italic;font-size:.74rem;line-height:1.3;
  color:var(--bone-dim);text-align:center;
}
.mm-tag i{font-size:.66rem;color:var(--ash)}

.arc-content{flex:1 1 auto;min-width:0}
@media(max-width:540px){ .menu-mark{display:none} }  /* hide the lockup only on phones */
.arc-head{text-align:center;margin-bottom:1.7vh;transform:translateZ(46px)}
.arc-title{
  font-family:var(--serif-display);font-weight:600;
  font-size:clamp(1.7rem,4vw,2.7rem);letter-spacing:.06em;color:var(--gold);
  text-transform:uppercase;line-height:1;
  text-shadow:0 0 34px rgba(197,152,78,.25);
}
.arc-sub{font-family:var(--sans);font-size:.64rem;letter-spacing:.42em;text-transform:uppercase;color:var(--bone-dim);margin-top:.75rem}
.arc-note{
  font-style:italic;color:var(--ash);margin-top:1.5vh;font-size:.92rem;text-align:center;
  transform:translateZ(26px);
}

.arc-list{display:flex;flex-direction:column;transform:translateZ(34px)}
.arc-item{
  display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:1.2rem;
  padding:clamp(.42rem,.9vh,.62rem) .5rem;text-decoration:none;color:var(--bone);
  border-bottom:1px solid rgba(197,152,78,.13);cursor:pointer;
  transition:padding-left .5s var(--ease),color .4s,background .4s;
  border-radius:6px;
}
.arc-item:hover{padding-left:1.3rem;color:#fff;background:rgba(197,152,78,.06)}
.arc-idx{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;color:var(--gold-soft);opacity:.7}
.arc-name{font-family:var(--serif-display);font-style:italic;font-weight:500;font-size:clamp(1.15rem,2.3vw,1.5rem)}
.arc-room-label{font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-dim);text-align:right}
.arc-mid{display:flex;flex-direction:column;justify-content:center;gap:.12rem}
.arc-en{font-family:var(--sans);font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);opacity:.7}
.arc-item:hover .arc-name{color:var(--gold-bright)}
.arc-item:hover .arc-en{opacity:1}

/* =====================================================================
   ARCHETYPE — the cactus queen mirrored, quote in the red clay
   ===================================================================== */
/* the void space above the scene lives as the section's own padding (no extra block,
   no junction to mismatch) */
.archetype{position:relative;overflow:hidden;background:var(--void);padding-top:14vh}

/* the mirror: image + its reflection, in its own box so the quote sits at the TRUE seam */
.arch-mirror{position:relative}

/* ONE overlay does the whole top transition: pure void at the section top, fully OPAQUE
   past the photo's top edge (so that edge can never show), then dissolving to transparent
   down into the photo's own blue sky. The blue you see IS the photo emerging — there is
   no second colour and no second element, so a seam is physically impossible. */
.arch-skyveil{
  position:absolute;left:0;right:0;top:0;height:34vh;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,
    var(--void) 0%, var(--void) 46%, rgba(10,6,3,.4) 70%, rgba(10,6,3,.12) 88%, transparent 100%);
}

/* the AI-widened Cactus Queen shown WHOLE, then MIRRORED below — red clay meets clay at
   the centre seam to form one band; the quote sits IN that band. The mirror is
   pixel-symmetric at the seam, so the junction is seamless — no veil needed there. */
.arch-img{position:relative;width:100%;aspect-ratio:1672/941;overflow:hidden}
.arch-img .bg{
  position:absolute;inset:0;
  background:url("../img/cactus-queen-wide.jpg") center/cover no-repeat;
}
/* the mirror — flipped; a gradient (transparent AT the seam) dims it toward the bottom
   like a real water reflection, with no brightness step at the join */
.arch-bottom{transform:scaleY(-1)}
.arch-bottom::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(10,6,4,0) 0%, rgba(10,6,4,.16) 46%, rgba(10,6,4,.32) 100%);
}

/* the ONLY edge veil now: the reflected sky at the very bottom melts into La Entrada,
   ending on espresso-deep (the next hero's top colour) so that seam is invisible too. */
.arch-fade{position:absolute;left:0;right:0;z-index:2;pointer-events:none}
.fade-bottom{
  bottom:0;height:34%;
  /* fully opaque for the last stretch — the mirrored blue sky must be completely
     extinguished before the welcome gate's warm espresso begins (cold-vs-warm
     hue shift reads as a seam otherwise) */
  background:linear-gradient(to top,
    var(--espresso-deep) 0%, var(--espresso-deep) 14%, rgba(20,13,9,.95) 30%,
    rgba(20,13,9,.66) 50%, rgba(22,15,10,.32) 72%, rgba(24,16,11,.12) 88%, transparent 100%);
}

/* the quote sits in the clay band at the mirror seam, between the two halves */
.arch-quote{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;text-align:center;width:min(90vw,980px);
}
.arch-star{display:block;color:var(--gold);font-size:1.4rem;margin-bottom:1.8rem;text-shadow:0 0 18px rgba(197,152,78,.5)}
.arch-quote p{
  font-family:var(--serif-display);font-style:italic;font-weight:400;
  font-size:clamp(2rem,4.8vw,4rem);line-height:1.35;
  color:#fdfaf3;
  text-shadow:0 2px 44px rgba(0,0,0,.72), 0 1px 10px rgba(0,0,0,.55);
}
/* per-letter spans (split by app.js) — letters surface from the clay on scroll;
   .qw keeps each word unbreakable so lines wrap at spaces only */
.arch-quote .qw{display:inline-block;white-space:nowrap}
.arch-quote .ql{display:inline-block;will-change:opacity,transform}
.arch-attrib{
  display:block;margin-top:1.8rem;font-style:normal;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-soft);text-shadow:0 1px 8px rgba(0,0,0,.6);
}

@media(max-width:600px){
  /* each half gets height on a phone; cover crops toward the centered figure.
     two stacked halves → seam at the section's midpoint, quote stays on it. */
  .archetype{padding-top:10vh}
  .arch-skyveil{height:30vh}
  .arch-img{aspect-ratio:auto;height:46vh}
  .arch-quote{top:50%}
}

/* =====================================================================
   ROOMS
   ===================================================================== */
.room{position:relative}

/* WELCOME gate — the threshold at the top of La Entrada.
   NO image here (the room reveals AFTER the welcome — an image would duplicate
   the hero right below it). Pure gradient passage: starts on espresso-deep
   (= the archetype fade-bottom's end color) and ends on espresso-deep
   (= the hero top veil's start color), so both seams melt. Extra height =
   the breathing beat to read WELCOME before entering. */
.welcome-gate{
  position:relative;height:88vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(85% 55% at 50% 52%, rgba(197,152,78,.08) 0%, rgba(197,152,78,.025) 45%, transparent 70%),
    linear-gradient(to bottom, var(--espresso-deep) 0%, #110a06 48%, var(--espresso-deep) 100%);
}
.welcome-word{
  position:relative;z-index:2;display:flex;margin:0;
  font-family:var(--serif-display);font-weight:500;font-style:normal;
  font-size:clamp(3.2rem,12vw,10rem);letter-spacing:.12em;line-height:1;
  color:var(--gold);text-shadow:0 6px 50px rgba(0,0,0,.55), 0 0 60px rgba(197,152,78,.25);
  will-change:letter-spacing,opacity,transform;
}
.welcome-word span{display:inline-block}
.welcome-cue{
  position:absolute;z-index:2;bottom:8vh;left:0;right:0;text-align:center;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--gold-soft);
}

/* hero */
.room-hero{
  position:relative;height:100vh;overflow:hidden;
  display:flex;align-items:flex-end;
}
.room-hero-bg{
  position:absolute;inset:-10% 0;background-size:cover;background-position:center;
  will-change:transform;
}
.room-hero::after{
  content:"";position:absolute;inset:0;
  /* top veil melts the hero up into whatever came before (room-body or the
     archetype fade — both land on espresso-deep); bottom into the room body.
     No hard scene cuts anywhere. */
  background:
    linear-gradient(to bottom, var(--espresso-deep) 0%, rgba(24,15,10,.55) 12%, rgba(24,15,10,0) 30%),
    linear-gradient(rgba(12,8,5,.15) 0%, rgba(12,8,5,.55) 60%, var(--espresso-deep) 100%);
}
.room-hero-text{position:relative;z-index:2;padding:0 8vw 12vh;max-width:1000px}
.room-idx{
  font-family:var(--serif-display);font-style:italic;color:var(--gold);
  font-size:1.4rem;opacity:.8;margin-bottom:.6rem;
}
/* 3-tier header: English descriptor (kicker) · Spanish name · subtitle */
.room-en{margin-bottom:.6rem}
.room-name{
  font-family:var(--serif-display);font-style:italic;font-weight:500;
  font-size:clamp(3rem,9vw,7rem);line-height:.95;color:var(--bone);margin-bottom:.45rem;
}
.room-sub{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bone-dim);margin-bottom:1.3rem;
}
.room-headline{
  font-family:var(--serif-display);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,3vw,2.2rem);color:var(--gold-soft);max-width:24ch;
}

/* content band */
.room-body{padding:14vh 8vw;background:var(--espresso-deep);position:relative}
.room-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start;
  max-width:1300px;margin:0 auto;
}
.room-intro .room-subhead{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:1.6rem;
}
.room-intro p.copy{font-size:1.32rem;line-height:1.7;color:var(--bone);margin-bottom:2rem}
.room-touchpoint{
  border-top:1px solid rgba(197,152,78,.22);padding-top:1.4rem;margin-top:1rem;
}
.room-touchpoint .tp-label{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ash);
  display:block;margin-bottom:.5rem;
}
.room-touchpoint .tp-text{font-style:italic;color:var(--bone-dim);font-size:1.05rem}

/* spec list */
.spec-block .spec-title,.mat-block .mat-title{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:1.2rem;
}
.spec-list{list-style:none;margin-bottom:3rem}
.spec-list li{
  font-size:1.02rem;color:var(--bone-dim);padding:.55rem 0 .55rem 1.6rem;position:relative;
  border-bottom:1px dotted rgba(197,152,78,.16);
}
.spec-list li::before{content:"✦";color:var(--gold);position:absolute;left:0;font-size:.7rem;top:.85rem}

/* material swatches */
.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.mat{aspect-ratio:1;border-radius:3px;position:relative;overflow:hidden;border:1px solid rgba(197,152,78,.18)}
.mat .swatch{position:absolute;inset:0}
img.swatch{width:100%;height:100%;object-fit:cover}  /* material photo */
/* empty placeholder swatch — reads as "drop image here", not broken */
.swatch.placeholder{
  background:
    repeating-linear-gradient(45deg, rgba(197,152,78,.05) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, #2a201a, #1a130d);
}
.swatch.placeholder::after{
  content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:300;font-size:1.5rem;color:rgba(197,152,78,.4);
}
.mat .mat-name{
  position:absolute;left:0;right:0;bottom:0;padding:.5rem .6rem;
  font-family:var(--sans);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone);background:linear-gradient(transparent,rgba(0,0,0,.7));
}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;max-width:1300px;margin:5vh auto 0}
.tile{
  position:relative;background:#1e150f;border:1px dashed rgba(197,152,78,.3);border-radius:3px;
  display:flex;align-items:center;justify-content:center;min-height:200px;overflow:hidden;
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.big{grid-column:span 7;min-height:420px}
.tile.tall{grid-column:span 5;min-height:420px}
.tile.third{grid-column:span 4;min-height:240px}
.tile .ph{
  font-family:var(--sans);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash);
  text-align:center;padding:1rem;
}
.tile .ph span{display:block;color:var(--gold-soft);margin-bottom:.4rem;font-size:1.4rem}

/* real-image tiles */
figure.tile{margin:0;border:1px solid rgba(197,152,78,.18);background:#160f0a}
.tile.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease),filter 1.4s var(--ease);filter:saturate(.96) brightness(.92)}
.tile.has-img:hover img{transform:scale(1.05);filter:saturate(1.05) brightness(1)}
.tile-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.4rem 1rem .8rem;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);background:linear-gradient(transparent,rgba(10,6,4,.82));
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease);
}
.tile.has-img:hover .tile-cap{opacity:1;transform:none}

/* elevation / floor-plan tiles — a FULL-WIDTH band whose box matches the sheet's aspect
   ratio (2571×1836), so object-fit:cover fills it edge-to-edge: NO black bars top/sides,
   and NO crop of the drawing. Only the bottom caption overlays it. */
.gallery figure.tile.plan{grid-column:1 / -1;aspect-ratio:2571 / 1836;min-height:0;align-self:start;background:#0e0a07}
.tile.plan img{object-fit:cover;filter:none}
.tile.plan .tile-cap{opacity:1;background:linear-gradient(transparent,rgba(10,6,4,.55) 68%,rgba(10,6,4,.9))}

/* =====================================================================
   ARTIFACTOS SHELVES — trinkets resting on wooden ledges
   (rows of square tiles; each tile's ledge extends past the column gap so
   adjacent ledges read as one continuous shelf)
   ===================================================================== */
.shelf-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  column-gap:1.6rem;row-gap:4.2rem;
  max-width:1300px;margin:6vh auto 0;padding-bottom:1rem;
}
.trinket{
  position:relative;margin:0;padding-bottom:16px;
}
.trinket img{
  position:relative;z-index:1;display:block;width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:3px;
  filter:saturate(.96) brightness(.94);
  box-shadow:0 18px 22px -10px rgba(0,0,0,.7);
  transition:transform .6s var(--ease),filter .6s var(--ease);
}
.trinket:hover img{transform:translateY(-5px);filter:saturate(1.05) brightness(1.02)}
/* the wooden ledge */
.trinket::after{
  content:"";position:absolute;left:-.9rem;right:-.9rem;bottom:0;height:16px;z-index:2;
  border-radius:2px 2px 3px 3px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 9px, rgba(0,0,0,.08) 9px 12px, transparent 12px 23px),
    linear-gradient(180deg, #6b4628 0%, #54351d 38%, #3a2412 72%, #261507 100%);
  box-shadow:
    0 14px 22px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,220,170,.22),
    inset 0 -2px 3px rgba(0,0,0,.5);
}
/* soft contact shadow where the trinket meets the wood */
.trinket::before{
  content:"";position:absolute;left:6%;right:6%;bottom:12px;height:14px;z-index:1;
  background:radial-gradient(50% 100% at 50% 100%, rgba(0,0,0,.55), transparent 75%);
  filter:blur(3px);
}
@media(max-width:820px){
  .shelf-grid{grid-template-columns:repeat(2,1fr);column-gap:1.1rem;row-gap:3.2rem}
  .trinket::after{left:-.65rem;right:-.65rem}
}

/* divider between rooms */
.room-divider{height:1px;width:0;margin:0 auto;background:var(--gold);opacity:.5}

/* =====================================================================
   CLOSING
   ===================================================================== */
.closing-scene{
  min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle at 50% 40%, #281d14, var(--void) 80%);
}
.closing-kicker{font-family:var(--sans);font-size:.72rem;letter-spacing:.46em;text-transform:uppercase;color:var(--gold-soft)}
.closing-title{
  font-family:var(--serif-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(2.4rem,6.5vw,5rem);line-height:1;color:var(--gold);margin:1.1rem 0 1.3rem;
  text-shadow:0 0 40px rgba(197,152,78,.22);
}
.closing-sub{font-family:var(--sans);font-size:.95rem;letter-spacing:.4em;text-transform:uppercase;color:var(--bone-dim)}
.closing-mark{
  display:block;margin:clamp(2.4rem,5vh,4rem) auto 0;
  width:clamp(172px,22vw,280px);height:auto;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));
}
.closing-studio{
  margin-top:.9rem;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-soft);
}

/* =====================================================================
   PROGRESS RAIL + BACK TO MAP
   ===================================================================== */
.rail{
  position:fixed;right:2.4vw;top:50%;transform:translateY(-50%);z-index:500;
  display:flex;flex-direction:column;gap:.9rem;opacity:0;transition:opacity .6s;
}
.rail.show{opacity:1}
.rail a{width:7px;height:7px;border-radius:50%;background:rgba(233,220,197,.25);transition:all .4s;text-decoration:none}
.rail a:hover{background:var(--gold-soft);transform:scale(1.3)}
.rail a.active{background:var(--gold);box-shadow:0 0 0 4px rgba(197,152,78,.18)}

.to-map{
  position:fixed;left:2.4vw;bottom:3vh;z-index:500;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(197,152,78,.4);
  background:rgba(20,13,9,.6);backdrop-filter:blur(6px);color:var(--gold);
  font-size:1rem;cursor:pointer;opacity:0;transition:opacity .6s,transform .4s var(--ease);
}
.to-map.show{opacity:1}
.to-map:hover{transform:rotate(90deg);background:rgba(197,152,78,.18)}

/* reveal defaults (JS adds .in) */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* static / print mode — fixed flow for capture & PDF export
   (also .no-envelope for prefers-reduced-motion: skip the theatrics,
   keep the menu as a normal first screen) */
body[data-static] .intro-scroll, body.no-envelope .intro-scroll{height:auto}
body[data-static] .intro-sticky, body.no-envelope .intro-sticky{position:relative;height:100vh}
body[data-static] .env3d-scene, body.no-envelope .env3d-scene,
body[data-static] .intro-void,  body.no-envelope .intro-void,
body[data-static] .intro-hint,  body.no-envelope .intro-hint{display:none}
body[data-static] .space-scene, body.no-envelope .space-scene{opacity:1;pointer-events:auto}
/* mission shows as a plain readable block in static / reduced-motion (no dive) */
body[data-static] .mission-layer, body.no-envelope .mission-layer{
  position:relative;left:auto;top:auto;transform:none;
  opacity:1;pointer-events:auto;margin:7vh auto;
  width:min(92vw,1120px);filter:none;
}
body[data-static] .intro-sticky{height:auto;min-height:740px}
body[data-static] .space-scene{position:relative;min-height:740px}
body[data-static] .float-panel{transform:none !important}
body[data-static] .archetype{padding-top:90px}
body[data-static] .arch-skyveil{height:240px}
body[data-static] .arch-img{aspect-ratio:auto;height:380px}
body[data-static] .room-hero{height:640px}
body[data-static] .welcome-gate{height:560px}
body[data-static] .room-body{padding:96px 8vw}
body[data-static] .gallery{margin-top:56px}
body[data-static] .closing-scene{min-height:auto;padding:160px 0}

/* responsive */
@media(max-width:820px){
  .env3d{width:86vw}
  .room-grid{grid-template-columns:1fr;gap:4vh}
  .arc-item{grid-template-columns:1.4rem 1fr;gap:.7rem}
  .arc-room-label{display:none}
  .tile.big,.tile.tall{grid-column:span 12}
  .tile.third{grid-column:span 6}
  .rail{display:none}
  .space-watermark{font-size:5rem}
}

/* =====================================================================
   LIGHTBOX — click any gallery image → near-fullscreen, paginate with arrows
   ===================================================================== */
.tile.has-img{cursor:zoom-in}
/* subtle expand affordance on hover */
.tile.has-img .lb-hint{
  position:absolute;top:.7rem;right:.8rem;z-index:3;
  font-family:var(--sans);font-size:1rem;color:var(--bone);
  opacity:0;transition:opacity .4s;text-shadow:0 1px 6px rgba(0,0,0,.7);pointer-events:none;
}
.tile.has-img:hover .lb-hint{opacity:.85}

.lightbox{
  position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;
  background:rgba(8,5,3,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.lightbox.open{opacity:1;visibility:visible}
.lb-figure{
  position:relative;margin:0;display:flex;flex-direction:column;align-items:center;
  transform:scale(.965);transition:transform .55s var(--ease);
}
.lightbox.open .lb-figure{transform:scale(1)}
.lb-img{
  max-width:92vw;max-height:82vh;object-fit:contain;display:block;
  border:1px solid rgba(197,152,78,.25);box-shadow:0 40px 120px rgba(0,0,0,.7);
}
.lb-cap{
  margin-top:1.1rem;font-family:var(--sans);font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--bone-dim);text-align:center;
}
.lb-count{font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;color:var(--gold-soft);margin-top:.55rem}
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(197,152,78,.4);
  background:rgba(20,13,9,.55);color:var(--gold);font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease);
}
.lb-btn:hover{background:rgba(197,152,78,.18);border-color:var(--gold);transform:translateY(-50%) scale(1.08)}
.lb-prev{left:3vw}
.lb-next{right:3vw}
.lb-close{
  position:absolute;top:3vh;right:3vw;z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(197,152,78,.4);background:rgba(20,13,9,.55);color:var(--gold);
  font-size:1rem;cursor:pointer;transition:all .35s var(--ease);
}
.lb-close:hover{background:rgba(197,152,78,.18);transform:rotate(90deg)}
@media(max-width:600px){
  .lb-prev{left:2vw}.lb-next{right:2vw}.lb-btn{width:44px;height:44px;font-size:1.2rem}
}

/* honor reduced motion */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hint-line{animation:none}
  *{scroll-behavior:auto !important}
}