/* ==========================================================================
   Four worlds. Each sets its tokens, type behaviour, hero and chapter layouts.
   ========================================================================== */

/* ---------------- shared hero scaffold ---------------- */
.hero{position:relative;min-height:100svh;display:grid;overflow:hidden}
.hero .m{position:absolute;inset:0;z-index:0;background:#222}
.hero::after{z-index:1!important}
.hero-copy{align-self:end;padding:calc(var(--header-h) + 40px) var(--pad) clamp(28px,5vw,64px);display:grid;gap:18px;max-width:1100px}
.hero h1{font-size:clamp(64px,10.5vw,184px)}
.hero .sub{font-size:clamp(16px,1.3vw,20px);margin:0;max-width:40ch}
.hero-foot{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;padding:18px var(--pad) calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid color-mix(in srgb,currentColor 30%,transparent);font:500 11px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase}
.hero-foot a{text-decoration:none}

/* ---------------- spatial tokens default ---------------- */
body{--sp-bg:var(--bg-2);--sp-surface:var(--bg);--sp-ink:var(--fg);--sp-line:var(--line);--sp-mute:var(--soft);--sp-accent:var(--accent);--sp-glass:var(--bg)}
.spatial-section{border-top:1px solid var(--line)}
.spatial-intro h2,#spatial-title{font-family:var(--display);font-weight:var(--display-weight,300)}
.spatial-intro h2 em,#spatial-title em{font-style:italic}

/* =====================================================================
   THE LONG SUMMER · Mediterranean Modern
   One day. Scroll sets the hour; colour, light and shade follow.
   ===================================================================== */
body[data-world="summer"]{
  --bg:#f4f0e8;--bg-2:#e9dfcd;--fg:#2a2c22;--soft:#6e6a55;--line:#ddd2bf;--accent:#b0623e;--invert:#2e3127;--invert-fg:#f1ebdf;
  --display:"Fraunces",Georgia,serif;--body:"Manrope",system-ui,sans-serif;--label:"Manrope",system-ui,sans-serif;
  --display-weight:300;--display-track:-.03em;--header-fg:#fff;
}
body[data-world="summer"] .display,body[data-world="summer"] .chapter-kicker .time,body[data-world="summer"] .hero h1{font-variation-settings:"SOFT" 100,"opsz" 144,"WONK" 0}
body[data-world="summer"] .hero{color:#fff}
body[data-world="summer"] .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(30,28,20,.34),rgba(30,28,20,0) 58%),linear-gradient(180deg,rgba(30,28,20,.28),rgba(30,28,20,0) 26%,rgba(30,28,20,0) 52%,rgba(30,28,20,.5))}
body[data-world="summer"] .hero .label{color:rgba(255,255,255,.85)}
.summer-switch{display:flex;flex-wrap:wrap;gap:8px 28px;padding:22px var(--pad);border-bottom:1px solid var(--line);align-items:center}
.summer-switch .label{margin-right:auto}

/* chapter layouts */
.sun-wide .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,28px);max-width:var(--max);margin:clamp(40px,6vw,90px) auto 0;align-items:end}
.sun-wide .m.main{grid-column:1/-1;aspect-ratio:16/9}
.sun-wide .m.detail{grid-column:8/12;aspect-ratio:3/4;margin-top:calc(-1 * clamp(80px,14vw,220px));box-shadow:0 30px 60px -30px rgba(40,30,10,.35);z-index:2}
.sun-wide .body{grid-column:2/7;align-self:start;margin-top:24px}

.sun-table .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,28px);max-width:var(--max);margin:clamp(40px,6vw,90px) auto 0}
.sun-table .m.main{grid-column:1/7;grid-row:1/3;aspect-ratio:4/5}
.sun-table .m.detail{grid-column:8/12;grid-row:1;aspect-ratio:3/4;align-self:start}
.sun-table .body{grid-column:8/12;grid-row:2;align-self:end}
.sun-table .m.s1{grid-column:2/8;aspect-ratio:3/2;margin-top:clamp(20px,4vw,60px)}
.sun-table .m.s2{grid-column:9/13;aspect-ratio:4/5;margin-top:clamp(80px,12vw,180px)}

.sun-pause{text-align:center}
.sun-pause .chapter-head{justify-items:center}
.sun-pause .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,28px);max-width:var(--max);margin:clamp(40px,6vw,90px) auto 0;align-items:center}
.sun-pause .m.main{grid-column:4/10;aspect-ratio:4/5}
.sun-pause .m.s1{grid-column:10/13;aspect-ratio:4/5;margin-top:40%}

.sun-dusk{padding-inline:0;color:#f4ecdf}
.sun-dusk .chapter-head{padding-inline:var(--pad)}
.sun-dusk .chapter-kicker .time{color:#e2a56f}
.sun-dusk .label{color:rgba(244,236,223,.75)}
.sun-dusk .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(40px,6vw,90px)}
.sun-dusk .m.main{grid-column:1/-1;aspect-ratio:16/8}
.sun-dusk .m.s1{grid-column:2/6;aspect-ratio:4/5;margin-top:calc(-1 * clamp(120px,18vw,300px));z-index:2}

/* =====================================================================
   THE SALON · Contemporary Parisian
   An evening in four acts. Magazine spreads; a sheer curtain between acts.
   ===================================================================== */
body[data-world="salon"]{
  --bg:#f2ede4;--bg-2:#e7dfd2;--fg:#1b1e24;--soft:#5d6670;--line:#d8d0c2;--accent:#6b2230;--invert:#1b1e24;--invert-fg:#f2ede4;
  --display:"Instrument Serif","Times New Roman",serif;--body:"Jost",Futura,system-ui,sans-serif;--label:"Jost",Futura,system-ui,sans-serif;
  --display-weight:400;--display-track:-.012em;--display-em:#6b2230;--header-fg:#1b1e24;
  --line-style:italic 400 clamp(22px,2vw,30px)/1.3 "Instrument Serif","Times New Roman",serif;
}
body[data-world="salon"] .hero{color:var(--fg)}
body[data-world="salon"] .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(242,237,228,.92),rgba(242,237,228,.55) 42%,rgba(242,237,228,0) 70%)}
body[data-world="salon"] .hero .label{color:var(--soft)}
.salon-accent{font:italic 400 clamp(26px,2.4vw,38px)/1 "Instrument Serif","Times New Roman",serif;color:var(--accent)}
body[data-world="salon"] .display{line-height:.92}
body[data-world="salon"] .hero h1{font-size:clamp(76px,11vw,196px)}
body[data-world="salon"] .chapter h2{font-size:clamp(50px,7.4vw,124px)}
.spread .chapter-kicker{gap:22px}
.spread .act{font:500 12px/1 var(--label);letter-spacing:.22em;text-transform:uppercase}
.spread .chapter-kicker .time{font-weight:400;font-size:clamp(28px,3vw,44px);color:var(--soft)}
.spread .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,28px);max-width:var(--max);margin:clamp(40px,6vw,90px) auto 0}
.spread .m{border:1px solid #d3c9b8;padding:clamp(6px,.6vw,10px);background:#fbf8f2}
.spread .m.has-cap figcaption{background:transparent;padding:10px 2px 2px}
.spread .m.main{grid-column:1/8;aspect-ratio:3/2}
.spread .m.s1{grid-column:9/13;aspect-ratio:4/5;margin-top:clamp(60px,9vw,140px)}
.spread .m.s2{grid-column:3/7;aspect-ratio:4/5;margin-top:clamp(-60px,-4vw,-20px)}
.spread.flip .m.main{grid-column:6/13}
.spread.flip .m.s1{grid-column:1/5;grid-row:1}
.spread.flip .m.s2{grid-column:7/11}
.spread figcaption::before{content:attr(data-fig) " — ";color:var(--accent)}
.curtain{position:fixed;inset:0;z-index:80;pointer-events:none;visibility:hidden;
  background:repeating-linear-gradient(90deg,rgba(246,241,233,.0) 0,rgba(246,241,233,.62) 2.5%,rgba(238,230,218,.78) 6%,rgba(246,241,233,.55) 9.5%,rgba(246,241,233,.0) 12%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

/* =====================================================================
   THE PRIVATE RESIDENCE · Modern Heritage
   Behind the walnut door. A dark monograph grid.
   ===================================================================== */
body[data-world="residence"]{
  --bg:#121110;--bg-2:#1d1915;--fg:#e6dccb;--soft:#a79c88;--line:#33291f;--accent:#a3854f;--invert:#e6dccb;--invert-fg:#121110;
  --display:"Archivo",system-ui,sans-serif;--body:"Newsreader",Georgia,serif;--label:"Archivo",system-ui,sans-serif;
  --display-weight:300;--display-track:.02em;--display-em:#a3854f;--header-fg:#e6dccb;
  --line-style:italic 300 clamp(20px,1.8vw,26px)/1.4 "Newsreader",Georgia,serif;
  color-scheme:dark;
}
body[data-world="residence"] .display{font-stretch:125%;text-transform:uppercase;line-height:1}
body[data-world="residence"] .display em{font-family:"Newsreader",Georgia,serif;text-transform:none;font-stretch:100%;font-weight:300;letter-spacing:0}
body[data-world="residence"] .label{color:var(--accent)}
body[data-world="residence"] .lede{font-size:clamp(17px,1.35vw,21px)}
body[data-world="residence"] .wordmark span{font-family:"Archivo",sans-serif;font-stretch:125%;font-size:17px;letter-spacing:.18em}
.door-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:100svh;color:var(--fg);background:var(--bg)}
.door-stage{position:relative;overflow:hidden;min-height:100svh;background:#0b0a09}
.door-stage .m{position:absolute;inset:0}
.door-stage .door-half{position:absolute;inset:0;z-index:2;overflow:hidden;will-change:transform}
.door-stage .door-half img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover}
.door-stage .door-half.l{right:50%}
.door-stage .door-half.l img{left:0}
.door-stage .door-half.r{left:50%}
.door-stage .door-half.r img{right:0}
.door-copy{align-self:end;padding:calc(var(--header-h) + 40px) var(--pad) clamp(40px,7vw,100px);display:grid;gap:22px}
.door-copy h1{font-size:clamp(54px,7.4vw,128px)}
.grid-chapter .numeral{font:200 clamp(64px,8vw,140px)/.8 "Archivo",sans-serif;font-stretch:125%;color:var(--accent)}
.grid-chapter .chapter-head{grid-template-columns:auto minmax(0,1fr);column-gap:clamp(20px,4vw,64px);align-items:end}
.grid-chapter .chapter-head>*:not(.numeral){grid-column:2}
.grid-chapter .chapter-head .numeral{grid-row:1/5}
.grid-chapter h2{font-size:clamp(28px,3.6vw,58px)}
.grid-chapter .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;max-width:var(--max);margin:clamp(40px,6vw,90px) auto 0}
.grid-chapter .m{aspect-ratio:4/5}
.grid-chapter .m.main{grid-column:1/8;aspect-ratio:3/2}
.grid-chapter .m.s1{grid-column:8/13}
.grid-chapter .m.s2{grid-column:1/5}
.grid-chapter .m.s3{grid-column:5/13;aspect-ratio:16/10}
.grid-chapter .m figcaption{background:var(--bg);color:var(--soft);font-family:"Archivo",sans-serif;font-stretch:112%}

/* =====================================================================
   THE COLLECTED HOME · English Collected
   A collector's folio of numbered plates.
   ===================================================================== */
body[data-world="collected"]{
  --bg:#efe7d6;--bg-2:#e4d9c3;--fg:#3b2c22;--soft:#6e6152;--line:#d6cbb4;--accent:#4a2a3a;--invert:#3b2c22;--invert-fg:#efe7d6;
  --display:"Libre Caslon Display",Caslon,Georgia,serif;--body:"Libre Caslon Text",Georgia,serif;--label:"EB Garamond",Garamond,Georgia,serif;
  --display-weight:400;--display-track:-.01em;--display-em:#4a2a3a;--header-fg:#3b2c22;
  --line-style:italic 400 clamp(19px,1.7vw,24px)/1.4 "Libre Caslon Text",Georgia,serif;
}
body[data-world="collected"] .label{font-variant-caps:all-small-caps;text-transform:none;font-size:15px;letter-spacing:.14em;font-weight:500}
body[data-world="collected"] .text-link{font-family:"EB Garamond",serif;font-variant-caps:all-small-caps;text-transform:none;font-size:16px;letter-spacing:.1em}
body[data-world="collected"] .wordmark span{font-family:"Libre Caslon Display",serif}
.folio-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(24px,5vw,80px);align-items:center;min-height:100svh;padding:calc(var(--header-h) + 30px) var(--pad) 40px}
.folio-hero h1{font-size:clamp(52px,7vw,116px)}
.plate{margin:0;background:#f8f3e8;border:1px solid var(--line);padding:clamp(10px,1.2vw,18px) clamp(10px,1.2vw,18px) 14px}
.plate .m-frame{aspect-ratio:var(--ar,4/5);overflow:hidden;background:var(--bg-2)}
.plate figcaption{display:flex;gap:12px;align-items:baseline;padding-top:12px;font:italic 400 13px/1.4 "Libre Caslon Text",Georgia,serif;color:var(--soft);text-transform:none;letter-spacing:0;background:transparent}
.plate figcaption b{font:500 13px/1 "EB Garamond",serif;font-variant-caps:all-small-caps;letter-spacing:.12em;font-style:normal;color:var(--fg)}
.plates .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,3vw,44px);max-width:var(--max);margin:clamp(40px,6vw,90px) auto 0;align-items:start}
.plates .plate:nth-child(1){grid-column:1/8;--ar:3/2}
.plates .plate:nth-child(2){grid-column:8/13;margin-top:clamp(60px,10vw,160px)}
.plates .plate:nth-child(3){grid-column:2/7}
.plates .plate:nth-child(4){grid-column:7/12;--ar:3/2;margin-top:clamp(40px,6vw,100px)}
.plates .chapter-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
.plates .chapter-head .label{grid-column:1/-1}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .sun-wide .m.detail{grid-column:6/13;margin-top:-60px}
  .sun-wide .body{grid-column:1/-1}
  .sun-table .m.main{grid-column:1/-1;grid-row:auto}
  .sun-table .m.detail{grid-column:1/8;grid-row:auto;margin-top:-40px;z-index:2}
  .sun-table .body{grid-column:1/-1;grid-row:auto}
  .sun-table .m.s1{grid-column:1/-1}
  .sun-table .m.s2{grid-column:5/13;margin-top:-30px}
  .sun-pause .m.main{grid-column:1/11}
  .sun-pause .m.s1{grid-column:7/13;margin-top:-40px;z-index:2}
  .sun-dusk .m.main{aspect-ratio:4/5}
  .sun-dusk .m.s1{grid-column:6/13;margin-top:-80px}
  .spread .m.main,.spread.flip .m.main{grid-column:1/-1}
  .spread .m.s1,.spread.flip .m.s1{grid-column:5/13;grid-row:auto;margin-top:-30px}
  .spread .m.s2,.spread.flip .m.s2{grid-column:1/8;margin-top:0}
  .door-hero,.folio-hero{grid-template-columns:1fr}
  .door-stage{min-height:72svh}
  .grid-chapter .chapter-head{grid-template-columns:1fr}
  .grid-chapter .chapter-head>*{grid-column:1!important}
  .grid-chapter .chapter-head .numeral{grid-row:auto}
  .grid-chapter .m.main,.grid-chapter .m.s3{grid-column:1/-1;aspect-ratio:4/5}
  .grid-chapter .m.s1,.grid-chapter .m.s2{grid-column:span 6}
  .plates .chapter-head{grid-template-columns:1fr}
  .plates .plate:nth-child(n){grid-column:1/-1;margin-top:0}
}

/* ---------------- 3D explorer and plans, per world ---------------- */
#spatial-open-render{position:relative;overflow:hidden}
#spatial-open-render .spatial-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
#spatial-open-render[data-film="true"] span{z-index:2}
#spatial-open-render[data-film="true"]::after{content:"Concept film";position:absolute;left:10px;top:10px;z-index:2;font:600 9px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(20,20,18,.42);padding:6px 8px;border-radius:2px}
body[data-world="residence"] .map-wrap iframe{filter:invert(.9) grayscale(1) sepia(.35) contrast(.9) brightness(.9)}
body[data-world="salon"] .map-wrap iframe{filter:grayscale(1) sepia(.08) hue-rotate(180deg) contrast(.95)}
body[data-world="collected"] .map-wrap iframe{filter:grayscale(.7) sepia(.45) contrast(.95)}