/* ==========================================================================
   Interaction layer: intro, cursor, depth, interlude, essentials, split title,
   drag rail, reading header, 3D card, hand-over. Colours come from world tokens.
   ========================================================================== */

/* ---------- 1 · intro ---------- */
.fx-loader{position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:var(--fx-loader-bg,#e9e7e1);color:var(--fx-loader-fg,#1f1f1c);pointer-events:none}
html.fx-ready .fx-loader{pointer-events:auto}
.fx-loader-in{display:grid;justify-items:center;gap:22px}
.fx-loader-mark{display:flex;gap:.02em;font:400 clamp(30px,4.4vw,64px)/1 "Fraunces",Georgia,serif;letter-spacing:.14em;overflow:hidden;padding-bottom:.06em}
.fx-loader-mark span{display:inline-block}
.fx-loader-sub{font:600 9px/1 "Manrope",system-ui,sans-serif;letter-spacing:.42em;text-transform:uppercase;opacity:.7}
.fx-loader-count{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));font:300 clamp(44px,7vw,110px)/.8 "Fraunces",Georgia,serif;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.fx-loader-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left}
html:not(.fx-ready) .fx-loader,html.fx-skip .fx-loader{display:none}

/* world change wipe */
.fx-wipe{position:fixed;inset:0;z-index:390;display:grid;place-items:center;pointer-events:none;visibility:hidden;background:var(--fx-wipe-bg);color:var(--fx-wipe-fg)}
.fx-wipe-name{font:400 clamp(44px,7vw,120px)/1 var(--fx-wipe-face,"Fraunces",serif);letter-spacing:-.01em;overflow:hidden;padding:.08em 0;text-align:center}
.fx-wipe-name span{display:block}
.fx-wipe small{position:absolute;left:50%;bottom:calc(36px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font:600 10px/1 "Manrope",sans-serif;letter-spacing:.32em;text-transform:uppercase;opacity:.7;white-space:nowrap}

/* hero headline before its entrance */
html.fx-hold #world-hero h1,html.fx-hold #world-hero .hero-copy>*:not(h1),html.fx-hold #world-hero .door-copy>*:not(h1),html.fx-hold #world-hero .hero-copy,html.fx-hold .folio-hero .hero-copy>*{opacity:0}
.fx-char{display:inline-block;will-change:transform}

/* ---------- 2 · cursor ---------- */
.fx-cursor{position:fixed;left:0;top:0;z-index:350;pointer-events:none;width:0;height:0}
.fx-cursor-dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--fg);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--bg) 75%,transparent);transition:transform .35s var(--ease),opacity .3s}
.fx-cursor.is-link .fx-cursor-dot{background:color-mix(in srgb,var(--fg) 22%,transparent);box-shadow:0 0 0 .5px var(--fg)}
.fx-cursor-ring{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 86%,transparent);color:var(--fg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:scale(0);opacity:0;transition:transform .45s var(--ease),opacity .3s}
.fx-cursor-ring span{font:600 10px/1.2 var(--label);letter-spacing:.16em;text-transform:uppercase;text-align:center;max-width:70px}
.fx-cursor.is-label .fx-cursor-ring{transform:scale(1);opacity:1}
.fx-cursor.is-label .fx-cursor-dot{opacity:0}
.fx-cursor.is-link .fx-cursor-dot{transform:scale(4.5)}
.fx-cursor.is-down .fx-cursor-ring{transform:scale(.88)}
.fx-cursor.is-hidden{opacity:0}
html.fx-cursor-on body:not(.modal-open),html.fx-cursor-on body:not(.modal-open) *{cursor:none!important}
html.fx-cursor-on body:not(.modal-open) :is(input,textarea,select){cursor:auto!important}
body.modal-open .fx-cursor{display:none}

/* ---------- 3 · depth ---------- */
.chapter .m,.plate .m-frame,.fx-side,.fx-ess-img,.spaces-rail .m{overflow:hidden}
.chapter .m img,.chapter .m video,.plate .m-frame img,.plate .m-frame video{transform-origin:50% 50%;will-change:transform}

/* ---------- 4 · interlude (expanding frame) ---------- */
.fx-expand{position:relative;background:inherit}
.fx-expand-pin{position:relative;height:100svh;overflow:hidden}
.fx-expand-frame{position:absolute;inset:0;z-index:1;clip-path:inset(0);background:var(--bg-2);--fx-veil:1}
.fx-expand-frame img,.fx-expand-frame video{width:100%;height:100%;object-fit:cover}
.fx-expand-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55));opacity:var(--fx-veil)}
.fx-expand-title{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) var(--fx-fw,26vw) minmax(0,1fr);align-items:center;column-gap:clamp(20px,2.6vw,44px);padding:0 var(--pad);pointer-events:none}
.fx-expand-title h2{display:contents}
.fx-expand-title .label{position:absolute;left:0;right:0;top:calc(var(--header-h) + 28px);text-align:center}
.fx-expand-a,.fx-expand-b{display:block;font-size:clamp(34px,4.4vw,78px)}
.fx-expand-a{grid-column:1;text-align:right}
.fx-expand-b{grid-column:3;text-align:left}
.fx-expand-out{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,5vw,64px);z-index:3;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:flex-end;justify-content:space-between;color:#fff}
.fx-expand-out p{margin:0;font:var(--line-style,italic 300 clamp(20px,1.9vw,28px)/1.35 var(--display));max-width:32ch;color:#fff}
.fx-expand-out .text-link{color:#fff}
.fx-expand-out .m-badge{position:static}
.fx-expand.is-static .fx-expand-title{display:none}
body[data-world="residence"] .fx-expand-a,body[data-world="residence"] .fx-expand-b{font-size:clamp(26px,2.9vw,50px)}
@media (max-width:900px){
  .fx-expand-title{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) var(--fx-fh,72vw) minmax(0,1fr);text-align:center}
  .fx-expand-a{grid-column:1;grid-row:1;align-self:end;text-align:center;padding-bottom:18px}
  .fx-expand-b{grid-column:1;grid-row:3;align-self:start;text-align:center;padding-top:18px}
  .fx-expand-a,.fx-expand-b{font-size:clamp(32px,8.4vw,52px)}
}

/* ---------- 5 · essentials (pinned slider) ---------- */
.fx-ess{position:relative;border-top:1px solid var(--line);background:var(--bg)}
.fx-ess-pin{height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);overflow:hidden}
.fx-ess-text{position:relative;display:grid;grid-template-rows:auto 1fr auto;padding:calc(var(--header-h) + 34px) var(--pad) clamp(28px,4vw,56px)}
.fx-ess-panels{position:relative;align-self:center;min-height:clamp(260px,34vh,380px)}
.fx-ess-panel{position:absolute;inset:0;display:grid;align-content:center;gap:20px}
.fx-ess-panel h3{margin:0;font-family:var(--display);font-weight:var(--display-weight,300);letter-spacing:var(--display-track,-.02em);font-size:clamp(46px,5.6vw,96px);line-height:.95;text-wrap:balance}
.fx-ess-panel h3 em{font-style:italic;color:var(--display-em,inherit)}
.fx-ess-panel p{margin:0;max-width:38ch;font-size:clamp(16px,1.25vw,19px);color:var(--soft)}
.fx-ess-panel .fx-ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.fx-ess-panel .fx-ln>span{display:block}
.fx-ess-foot{display:flex;align-items:center;gap:18px;font:500 12px/1 var(--label);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.fx-ess-track{flex:1;max-width:220px;height:1px;background:var(--line);position:relative;overflow:hidden}
.fx-ess-track i{position:absolute;inset:0;background:var(--fg);transform:scaleX(.25);transform-origin:left}
.fx-ess-media{position:relative;overflow:hidden;background:var(--bg-2)}
.fx-ess-img{position:absolute;inset:0;margin:0}
.fx-ess-img img{width:100%;height:100%;object-fit:cover}
.fx-ess-img+.fx-ess-img{clip-path:inset(100% 0 0 0)}
.fx-ess-media .concept{position:absolute;right:16px;bottom:14px;z-index:5;color:#fff}
.fx-ess-top{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.fx-ess.is-static .fx-ess-pin{height:auto;display:grid}
.fx-ess.is-static .fx-ess-panels{min-height:0;display:grid;gap:40px}
.fx-ess.is-static .fx-ess-panel{position:static}
.fx-ess.is-static .fx-ess-media{min-height:60vh}
.fx-ess.is-static .fx-ess-img+.fx-ess-img,.fx-ess.is-static .fx-ess-foot{display:none}

/* ---------- 6 · split title (bridge) ---------- */
.bridge{position:relative;overflow:hidden;min-height:96svh;align-content:center}
.fx-side{position:absolute;top:50%;z-index:1;width:clamp(180px,21vw,340px);aspect-ratio:4/5;margin:0;translate:0 -50%;background:var(--bg-2)}
.fx-side img{width:100%;height:100%;object-fit:cover}
.fx-side.l{left:50%}.fx-side.r{right:50%}
.bridge>*:not(.fx-side){position:relative;z-index:6}
.bridge h2{text-shadow:0 0 40px var(--bg)}

/* ---------- 7 · drag rail ---------- */
html.fx-drag .spaces-rail{scroll-snap-type:none;scrollbar-width:none;user-select:none;-webkit-user-select:none}
html.fx-drag .spaces-rail::-webkit-scrollbar{display:none}
.spaces-rail .m{transition:transform .5s var(--ease)}
.spaces-rail img{pointer-events:none;-webkit-user-drag:none}
.fx-rail-foot{display:flex;align-items:center;gap:18px;padding:22px var(--pad) 0;font:500 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.fx-rail-track{flex:1;height:1px;background:var(--line);position:relative}
.fx-rail-track i{position:absolute;left:0;top:-1px;height:3px;background:var(--fg);width:20%}

/* ---------- 8 · reading header + 3D card ---------- */
.header{transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s,transform .6s var(--ease)}
.header.is-away{transform:translateY(-105%)}
.header.on-media{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:transparent!important;color:#fff!important}
.header.on-invert{background:color-mix(in srgb,var(--invert) 92%,transparent)!important;color:var(--invert-fg)!important;border-color:transparent!important}
.fx-3d{position:fixed;left:var(--gutter);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:44;display:grid;grid-template-columns:64px auto;gap:12px;align-items:center;padding:8px 16px 8px 8px;background:color-mix(in srgb,var(--bg) 88%,transparent);color:var(--fg);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:left;transform:translateY(calc(100% + 40px));transition:transform .7s var(--ease)}
.fx-3d.is-on{transform:none}
.fx-3d-thumb{position:relative;width:64px;height:48px;overflow:hidden;background:var(--bg-2)}
.fx-3d-thumb img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:.9;transform:scale(1.5)}
body[data-world="residence"] .fx-3d-thumb img{filter:invert(.88) sepia(.35);mix-blend-mode:normal}
.fx-3d-thumb b{position:absolute;left:5px;top:4px;font:400 15px/1 var(--display)}
.fx-3d small{display:block;font:600 8.5px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-bottom:5px}
.fx-3d-txt{font:500 13px/1.1 var(--label)}

/* ---------- 9 · hand-over ---------- */
#world-hero.fx-stick{position:sticky;top:0}
#world>.chapter,#world>.world-switch,#world>.fx-expand{position:relative;background:inherit}
#world>.world-switch{background:var(--bg)}
#world{background:var(--bg);transition:background-color .6s var(--ease)}

@media (max-width:900px){
  .fx-ess-pin{grid-template-columns:1fr;grid-template-rows:52svh auto}
  .fx-ess-media{grid-row:1}
  .fx-ess-text{grid-row:2;padding-top:24px;grid-template-rows:auto 1fr auto}
  .fx-ess-panels{min-height:220px}
  .fx-ess-panel h3{font-size:clamp(38px,9vw,56px)}
  .fx-side{display:none}
  .bridge{min-height:0}
  .bridge h2{font-size:clamp(38px,9vw,56px)}
  .fx-3d{grid-template-columns:auto;padding:10px 14px}
  .fx-3d-thumb{display:none}
  .fx-3d small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fx-side{display:none}
  #world-hero.fx-stick{position:relative}
}

/* =====================================================================
   PHONE · a full-screen story built for the thumb (body.is-phone, ≤760px)
   ===================================================================== */
.ph-dock{display:none}
body.is-phone{-webkit-tap-highlight-color:transparent}
body.is-phone .world-switch{display:none}
body.is-phone .ph-stack{position:relative;background:inherit}
body.is-phone .ph-card{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:inherit;transform-origin:50% 0;will-change:transform}
body.is-phone .ph-card .ph-media{position:absolute;inset:0;margin:0;background:var(--bg-2);transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(1.06)}
body.is-phone .ph-card .ph-media img,body.is-phone .ph-card .ph-media video{width:100%;height:100%;object-fit:cover}
body.is-phone .ph-card .ph-media .m-badge{bottom:auto;top:calc(var(--header-h) + 10px);right:16px}
body.is-phone .ph-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.32) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 42%,rgba(0,0,0,.66) 100%)}
body.is-phone .ph-dim{position:absolute;inset:0;z-index:7;background:#000;opacity:0;pointer-events:none}
body.is-phone .ph-copy{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:0 max(18px,env(safe-area-inset-right,0px)) calc(108px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));display:grid;gap:12px;color:#fff}
body.is-phone .ph-copy .label{color:rgba(255,255,255,.82)}
body.is-phone .ph-copy .display{color:#fff;font-size:clamp(44px,12.5vw,64px);line-height:.95}
body.is-phone .ph-copy .display em{color:#fff}
body.is-phone .ph-hero .ph-copy .display{font-size:clamp(52px,15vw,78px)}
body.is-phone .ph-copy .line,body.is-phone .ph-copy .sub{margin:0;color:rgba(255,255,255,.9);max-width:30ch}
body.is-phone .ph-copy .line{font-size:clamp(19px,5.2vw,23px)}
body.is-phone .ph-copy .salon-accent{color:#f2d7dc}
body.is-phone .ph-copy .chapter-kicker{display:flex;gap:12px;align-items:baseline;color:#fff}
body.is-phone .ph-copy .chapter-kicker .time{font:300 clamp(34px,10vw,46px)/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
body.is-phone .ph-copy .chapter-kicker .act{font:600 11px/1 var(--label);letter-spacing:.22em;text-transform:uppercase}
body.is-phone .ph-copy .numeral{font:200 52px/.8 "Archivo",sans-serif;font-stretch:125%;color:var(--accent)}
body.is-phone .ph-copy .locate{color:#fff;border-color:rgba(255,255,255,.55);justify-self:start}
body[data-world="residence"].is-phone .ph-copy .display{font-size:clamp(34px,9.6vw,46px)}
body[data-world="collected"].is-phone .ph-veil{background:linear-gradient(180deg,rgba(40,25,15,.25),rgba(40,25,15,0) 30%,rgba(40,25,15,0) 40%,rgba(40,25,15,.7))}
body.is-phone .ph-hero .door-half{z-index:3}
body.is-phone .ph-hero-foot{position:absolute;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:0 18px;border:0;color:#fff}
body.is-phone .ph-hero .ph-copy{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
.ph-dots{display:flex;gap:8px}
.ph-dots button{width:26px;height:26px;display:grid;place-items:center;padding:0}
.ph-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:width .35s var(--ease),background .35s}
.ph-dots button[aria-pressed="true"]::before{width:22px;border-radius:4px;background:#fff}
.ph-swipe{font:500 10px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.ph-quiz{flex-basis:100%;text-align:left;font:500 12px/1.2 var(--label);letter-spacing:.04em;color:#fff;opacity:.9;text-decoration:underline;text-underline-offset:3px;padding:4px 0}
/* swipe strips */
body.is-phone .ph-strip{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:calc(var(--header-h) + 6px) 0 calc(96px + env(safe-area-inset-bottom,0px))}
.ph-strip-head{padding:0 18px;display:grid;gap:8px}
.ph-body{margin:0;font:var(--line-style,italic 300 20px/1.35 var(--display));font-size:clamp(18px,5vw,22px);max-width:30ch;color:var(--fg)}
.ph-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px;scrollbar-width:none;overscroll-behavior-x:contain}
.ph-track::-webkit-scrollbar{display:none}
.ph-slide{flex:0 0 78vw;scroll-snap-align:center}
.ph-slide .m,.ph-slide .plate .m-frame{aspect-ratio:4/5;overflow:hidden}
.ph-slide .m.has-cap{aspect-ratio:auto}
.ph-slide .m.has-cap .m-frame{aspect-ratio:4/5;flex:none}
.ph-slide .plate{padding:10px 10px 12px}
.ph-slide img,.ph-slide video{will-change:transform;transform:scale(1.14)}
.ph-strip-dots{display:flex;gap:6px;justify-content:center}
.ph-strip-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--fg) 25%,transparent);transition:width .35s var(--ease),background .35s}
.ph-strip-dots i.on{width:20px;border-radius:3px;background:var(--fg)}
/* dock */
@media (max-width:760px){
  .ph-dock{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:58;display:flex;align-items:center;gap:6px;padding:6px;border-radius:18px;background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--fg);border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 14px 40px -18px rgba(0,0,0,.5);overflow:hidden;transition:transform .5s var(--ease)}
  body.has-consent .ph-dock,body.modal-open .ph-dock{transform:translateY(140%)}
  .ph-progress{position:absolute;left:0;right:0;top:0;height:2px;background:transparent}
  .ph-progress b{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
  .ph-world{flex:1;min-width:0;display:grid;text-align:left;padding:6px 10px;min-height:44px;align-content:center}
  .ph-world small{font:600 8px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;opacity:.65;margin-bottom:4px}
  .ph-world span{font:500 14px/1.1 var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ph-btn{min-height:44px;padding:0 14px;border-radius:12px;font:600 11px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);white-space:nowrap}
  .ph-btn.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
  .fx-3d{display:none!important}
  .header .world-trigger{display:none}
  .dayline{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  /* touch feel */
  .ph-btn,.ph-world,.locate,.solid-button,.consent-btn,.ob-begin,.ob-answer,.choice,.place,.ph-slide,.spatial-room-item{transition:transform .25s var(--ease)}
  .ph-btn:active,.ph-world:active,.locate:active,.solid-button:active,.consent-btn:active,.ob-begin:active,.ob-answer:active,.choice:active,.place:active,.spatial-room-item:active{transform:scale(.97)}
  .ph-slide:active{transform:scale(.985)}
  /* plan on the phone: chips + bottom sheet */
  .spatial-sidebar{display:flex;flex-direction:column}
  #spatial-room-list{order:-1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 0 10px;margin:0 -2px;scroll-snap-type:x proximity}
  #spatial-room-list::-webkit-scrollbar{display:none}
  #spatial-room-list .spatial-room-item{flex:none;width:auto;display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:999px;white-space:nowrap;scroll-snap-align:start;font-size:13px}
  #spatial-room-list .spatial-room-item[aria-pressed="true"]{background:var(--sp-accent);color:#fff;border-color:var(--sp-accent)}
  #spatial-room-card:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:78svh;overflow:auto;padding:18px 18px calc(22px + env(safe-area-inset-bottom,0px));background:var(--sp-ink);color:var(--sp-bg);border-radius:20px 20px 0 0;display:block!important;box-shadow:0 -20px 60px -20px rgba(0,0,0,.55);animation:sheet-up .45s var(--ease) both}
  #spatial-room-card:not([hidden])::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:color-mix(in srgb,currentColor 30%,transparent);margin:0 auto 14px}
  .sheet-close{position:absolute;right:12px;top:10px;width:40px;height:40px;border-radius:50%;font:300 24px/1 var(--body);display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 25%,transparent)}
  #spatial-room-card #spatial-open-render{display:block;aspect-ratio:16/10;width:100%;margin-bottom:14px}
  #spatial-room-card #spatial-open-render img{width:100%;height:100%;object-fit:cover}
  #spatial-room-card h3{font-size:30px}
  body.sheet-open .ph-dock{transform:translateY(140%)}
}
.sheet-close{display:none}
@media (max-width:760px){.sheet-close{display:grid}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){body.is-phone .ph-card{position:relative;height:auto;min-height:100svh}}
@media (max-width:760px){
  body.is-phone .footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  body.is-phone .location,body.is-phone .ownership{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  body.is-phone .closing-copy{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}

/* ---------------------------------------------- the roof: one more flight */
.fx-roof{position:relative;background:var(--bg)}
.fx-roof-pin{position:relative;height:100svh;overflow:hidden}
.fx-roof-media{position:absolute;inset:0;z-index:1;clip-path:inset(0);background:var(--soft,#ddd);--fx-veil:1}
.fx-roof-media video{width:100%;height:100%;object-fit:cover;transform-origin:50% 100%}
.fx-roof-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.58));opacity:var(--fx-veil);pointer-events:none}
.fx-roof-treads{position:absolute;left:35%;right:35%;bottom:24%;height:22vh;display:flex;flex-direction:column;justify-content:flex-end;gap:2.6vh;z-index:0;pointer-events:none}
.fx-roof-treads i{display:block;height:1px;background:color-mix(in srgb,var(--fg) 38%,transparent)}
.fx-roof-treads i:nth-child(1){margin:0 18%}.fx-roof-treads i:nth-child(2){margin:0 15%}.fx-roof-treads i:nth-child(3){margin:0 12%}.fx-roof-treads i:nth-child(4){margin:0 9%}.fx-roof-treads i:nth-child(5){margin:0 6%}.fx-roof-treads i:nth-child(6){margin:0 3%}
.fx-roof-title{position:absolute;left:var(--pad);right:var(--pad);top:calc(var(--header-h) + 6vh);z-index:2;text-align:center;pointer-events:none;color:var(--fg)}
.fx-roof-title .label{margin-bottom:22px}
.fx-roof-title h2{margin:0;font-size:clamp(46px,7vw,128px);line-height:.95}
.fx-roof-a,.fx-roof-b{display:block}
.fx-roof-out{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,5vw,64px);z-index:3;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:flex-end;justify-content:space-between;color:#fff}
.fx-roof-out p{margin:0;font:var(--line-style,italic 300 clamp(20px,1.9vw,28px)/1.35 var(--display));max-width:34ch;color:#fff}
.fx-roof-out .m-badge{position:static}
.fx-roof.is-static .fx-roof-title,.fx-roof.is-static .fx-roof-treads{display:none}
body[data-world="residence"] .fx-roof-title h2{font-size:clamp(36px,4.6vw,84px)}
.roof-after{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(18px,2.4vw,40px);padding:clamp(48px,7vw,120px) var(--pad) clamp(56px,8vw,130px);align-items:start}
.roof-after .roof-main .m-frame,.roof-after .roof-main>video{aspect-ratio:3/2}
.roof-after .m-frame{overflow:hidden}
.roof-after video,.roof-after img{width:100%;height:100%;object-fit:cover;display:block}
.roof-side{display:grid;gap:clamp(18px,2vw,32px)}
.roof-side .m-frame{aspect-ratio:4/3}
.roof-card{border-top:1px solid var(--line);padding-top:18px}
.roof-card .label{margin-bottom:14px}
.roof-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--line)}
.roof-facts div{display:grid;gap:6px}
.roof-facts dt{font:600 9px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;opacity:.65}
.roof-facts dd{margin:0;font:var(--display-weight,400) clamp(18px,1.6vw,26px)/1.05 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.roof-copy{margin:0 0 16px;font-size:14px;line-height:1.7;max-width:46ch}
.roof-actions{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:14px}
.roof-note{margin:0;font-size:11px;line-height:1.6;opacity:.62;max-width:46ch}
@media(max-width:900px){.roof-after{grid-template-columns:1fr}.fx-roof-treads{left:15%;right:15%}}
/* phone */
.ph-roof .ph-roof-badge{position:static;display:inline-block;margin-top:14px}
.ph-roof-facts{display:flex;align-items:stretch}
.ph-roof-facts .roof-card{background:var(--bg);color:var(--fg);padding:22px 20px;border:1px solid var(--line);width:100%}
.ph-roof-facts .roof-facts dd{font-size:19px}
.ph-roof-facts .roof-actions{flex-direction:column;gap:12px}
.ph-roof .ph-roof-badge{display:inline-flex;width:auto}
.ph-roof-facts .roof-facts{grid-template-columns:1fr;gap:0;padding:0;border:0;margin-bottom:18px}
.ph-roof-facts .roof-facts div{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.ph-roof .ph-copy .ph-roof-badge{max-width:max-content;align-self:flex-start;left:auto;right:auto}