/* chez v16 — the stage, rebuilt. Same media, flow, copy, wordmark, fonts and palette.
   The room floats frameless across the screen; an editorial column carries the chapter; tools sit in a floating dock;
   the chapter's thought is set huge behind the room; "Make it yours" happens in a charcoal night studio. Loaded last. */

/* ---------- Stage atmosphere ---------- */
.story-sticky,.story-sticky[data-phase=details]{background:radial-gradient(ellipse 58% 60% at 64% 60%,#fffdf9 0%,#f7f5f1 55%,#f1eee8 100%)!important}
.studio-field{display:none!important}
.cx-night{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--cx-ease-io);
 background:radial-gradient(ellipse 38% 46% at 64% 62%,#5a4b37 0%,#3a342d 38%,#262421 70%,#1d1c1a 100%)}
.cx-night:before{content:'';position:absolute;left:44%;top:-10%;width:40%;height:90%;background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,#f3dfb612 172deg,#f3dfb620 180deg,#f3dfb612 188deg,transparent 200deg);filter:blur(18px)}
.cx-night canvas{position:absolute;inset:0;width:100%;height:100%}
html[data-cx-act="2"] .cx-night{opacity:1}
.cx-floor{position:absolute;z-index:1;left:34%;right:4%;bottom:7%;height:22%;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,#302e2b17,transparent 70%);opacity:var(--studio-visibility,0);transition:background 1s}
html[data-cx-act="2"] .cx-floor{background:radial-gradient(ellipse 50% 50% at 50% 50%,#c9a46a26,transparent 70%)}

/* The chapter's thought, set huge behind the room. */
.growing-words{display:block!important;position:absolute!important;left:30%!important;right:2%!important;top:50%!important;bottom:auto!important;transform:translateY(-54%);z-index:2!important;
 font:italic 400 clamp(64px,8.2vw,150px)/.9 var(--serif)!important;letter-spacing:-.055em!important;text-align:center!important;color:#a780461f!important;text-wrap:balance;pointer-events:none;transition:color 1.2s}
html[data-cx-act="2"] .growing-words{color:#f3dfb60f!important}
.growing-words.cx-swap{animation:cx-words .9s var(--cx-ease) both}
@keyframes cx-words{from{opacity:0;filter:blur(12px);transform:translateY(-50%) scale(1.04)}}

/* ---------- Header and story chrome in the night studio ---------- */
.header .brand-mark b,.header .brand-mark small,.nav-cta{transition:color .8s,background .8s,box-shadow .8s}
html[data-cx-act="2"] .header .brand-mark b{color:#f6f5f2}
html[data-cx-act="2"] .header .brand-mark small{color:#b8b3ab}
html[data-cx-act="2"] .nav-cta{background:#f6f5f2!important;color:var(--cx-ink)!important}
html[data-cx-act="2"] .story-copy .eyebrow{color:#d4b27a!important}
html[data-cx-act="2"] .story-copy h2{color:#f6f5f2!important}
html[data-cx-act="2"] .story-copy h2 em{color:#d4b27a!important}
html[data-cx-act="2"] .story-copy p:not(.eyebrow){color:#b8b3ab!important}
html[data-cx-act="2"] .chapter-action{color:#f6f5f2!important;border-color:#ffffff40!important}
html[data-cx-act="2"] .cx-bignum{-webkit-text-stroke-color:#d4b27a99}
html[data-cx-act="2"] .story-bottom .explore-button,html[data-cx-act="2"] .chapter-navigation button,html[data-cx-act="2"] .chapter-selector select{background:#ffffff12!important;color:#f6f5f2!important;border-color:#ffffff24!important}
html[data-cx-act="2"] .chapter-selector .mono,html[data-cx-act="2"] #chapter-count,html[data-cx-act="2"] .scene-footnote{color:#b8b3ab!important}
html[data-cx-act="2"] .flow-route button{color:#8b857c!important;background:transparent!important}
html[data-cx-act="2"] .flow-route button[aria-current=step]{color:#f6f5f2!important}
html[data-cx-act="2"] .flow-route i{background:#d4b27a!important}
html[data-cx-act="2"] .chapter-track button:before{background:#ffffff26!important}
html[data-cx-act="2"] .editor-selection{background:#ffffff14!important;color:#f6f5f2!important;border-color:#ffffff24!important}
html[data-cx-act="2"] .cx-sweep{background:#d4b27a}

/* ---------- Tool dock: one floating glass bar under the room ---------- */
.phase-tool,.phase-tool.active{transition:background .8s,color .8s,box-shadow .8s,border-color .8s}
html[data-cx-act="2"] .story-sticky .phase-tool,html[data-cx-act="2"] .story-sticky .phase-tool.active{background:#1d1c1acc!important;border-color:#ffffff1a!important;color:#f6f5f2!important;box-shadow:0 30px 80px #0006!important}
html[data-cx-act="2"] .story-sticky .phase-tool>.mono{color:#d4b27a!important}
html[data-cx-act="2"] .story-sticky .phase-tool button{color:#e9e5df!important;border-color:#ffffff1f!important;background:#ffffff0a!important}
html[data-cx-act="2"] .story-sticky .phase-tool button.active,html[data-cx-act="2"] .story-sticky .phase-tool button[aria-pressed=true]{background:#f6f5f2!important;color:var(--cx-ink)!important;border-color:#f6f5f2!important}
html[data-cx-act="2"] .phase-tool small,html[data-cx-act="2"] .interaction-hint,html[data-cx-act="2"] .rail-note{color:#8b857c!important}
html[data-cx-act="2"] .render-footer{color:#b8b3ab}
html[data-cx-act="2"] .story-sticky .colour-options button:not(.active),html[data-cx-act="2"] .story-sticky .floor-options button:not(.active),html[data-cx-act="2"] .story-sticky .chair-options button:not(.active){background:transparent!important}

/* ===================================================================================== */
/* Desktop: the editorial spread                                                          */
/* ===================================================================================== */
@media(min-width:1000px) and (min-height:600px){
 /* The room: frameless, across two thirds of the screen. */
 .story-sticky .inline-editor,.story-sticky[data-phase] .inline-editor{left:27%!important;right:1%!important;top:9%!important;bottom:13%!important;background:transparent!important;border:0!important;box-shadow:none!important}
 .story-sticky[data-phase=details] .inline-editor{left:21%!important;right:33%!important;top:12%!important;bottom:12%!important}
 .editor-view-label{display:block!important;position:absolute!important;left:auto!important;right:3%!important;top:2%!important;font:500 10px var(--sans)!important;letter-spacing:.16em!important;color:var(--ui-ink-3,#8b857c)!important;opacity:.8!important}
 html[data-cx-act="2"] .editor-view-label{color:#8b857c!important}

 /* Editorial column: numeral, kicker, title, thought, action. */
 .cx-bignum{z-index:1!important;left:3.5%!important;right:auto!important;top:13vh!important;bottom:auto!important;font-size:clamp(96px,15vh,170px)!important;-webkit-text-stroke-width:1.2px}
 .story-sticky .story-copy,.story-sticky[data-phase] .story-copy{left:3.5%!important;top:calc(13vh + clamp(86px,13.5vh,152px))!important;width:24%!important;max-width:380px}
 .story-sticky .story-copy .eyebrow{font:500 11px var(--sans)!important;letter-spacing:.18em!important;margin-bottom:18px!important;color:var(--brass-ink,#9c7b4c)!important}
 .story-sticky .story-copy h2,.story-sticky[data-phase=details] .story-copy h2{font-size:clamp(40px,3.9vw,68px)!important;line-height:.98!important;letter-spacing:-.055em!important;max-width:none!important}
 .story-sticky .story-copy h2 br{display:inline!important}
 .story-sticky .story-copy h2 em{margin-left:0!important}
 .story-sticky .story-copy p:not(.eyebrow),.story-sticky[data-phase=details] .story-copy p:not(.eyebrow){font-size:15px!important;line-height:1.65!important;max-width:330px!important;margin-top:22px!important}
 .story-copy .chapter-action{position:static!important;display:inline-flex!important;margin-top:26px!important;font-size:14px!important;transform:none!important}
 .story-sticky[data-phase=details] .story-copy .chapter-action{display:none!important}

 /* Tool dock. */
 .story-sticky .stage-tools{width:auto!important;max-width:none!important;left:27%!important;right:1%!important;top:12vh!important;bottom:92px!important;min-height:0;display:flex!important;justify-content:center;align-items:flex-end;pointer-events:none}
 .story-sticky .phase-tool{max-width:none!important;margin:0!important}
 .story-sticky .phase-tool.active{display:flex!important;align-items:center;gap:22px;width:max-content;max-width:94%!important;padding:10px 12px 10px 22px!important;border-radius:22px!important;background:#ffffffd9!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.3)!important;backdrop-filter:blur(22px) saturate(1.3)!important;box-shadow:0 24px 60px #302e2b1f,0 0 0 1px #302e2b0f!important;border:0!important;animation:cx-dock .8s var(--cx-ease) both!important}
 @keyframes cx-dock{from{opacity:0;transform:translateY(24px) scale(.96)}}
 .story-sticky .phase-tool>.mono{margin:0!important;max-width:110px;font:500 10px/1.45 var(--sans)!important;letter-spacing:.16em!important;color:var(--brass-ink,#9c7b4c)!important;flex:none}
 .story-sticky .phase-tool .rail-note,.story-sticky .phase-tool .interaction-hint{display:none!important}
 .story-sticky .space-metrics{display:flex!important;gap:30px!important;margin:0!important;padding:4px 10px 4px 0}
 .story-sticky .space-metrics span{display:grid!important;gap:4px;border:0!important;padding:0!important;flex:none!important;width:auto!important;min-width:0!important}
 .story-sticky .space-metrics b,.story-sticky .space-metrics small{white-space:nowrap}
 .story-sticky .phase-tool.active>*{flex:none}
 .story-sticky .mini-directions,.story-sticky .chair-options,.story-sticky .colour-options,.story-sticky .floor-options,.story-sticky .tool-row{display:flex!important;gap:6px!important;margin:0!important;flex-wrap:nowrap}
 .story-sticky .adjust-tools .tool-row.secondary{padding-left:10px;border-left:1px solid #302e2b14}
 .story-sticky .auto-prompt{margin:0!important;max-width:280px;padding:0!important;border:0!important;background:none!important}
 .story-sticky .mini-directions button,.story-sticky .tool-row button{height:40px;padding:0 16px!important;border-radius:999px!important;white-space:nowrap}
 .story-sticky .chair-options button,.story-sticky .colour-options button,.story-sticky .floor-options button{border-radius:16px!important;min-width:84px}

 /* Shopping becomes a receipt on the right; the share card floats beside it. */
 .story-sticky .shopping-tools.active{position:absolute!important;right:2%!important;left:auto!important;bottom:auto!important;top:3vh!important;display:block!important;width:340px;padding:22px!important;border-radius:22px!important}
 .story-sticky .shopping-tools.active>.mono{display:block;max-width:none;margin-bottom:14px!important}
 .story-sticky .share-artifact{right:3.5%!important;top:15vh!important;width:330px!important;padding:28px!important;border-radius:24px!important}
 .story-sticky .share-artifact h3{font-size:34px!important;line-height:1!important}

 /* Photo and render: a bigger frame. */
 .story-sticky .render-stage,.story-sticky .render-stage.active{left:27vw!important;width:55%!important;right:auto!important}
 .render-comparison{border-radius:24px!important;box-shadow:0 40px 100px #0000004d!important}

 /* Chapter rail on the right edge: thirteen ticks. */
 .chapter-track{display:flex!important;flex-direction:column;gap:7px!important;position:absolute!important;left:auto!important;right:20px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%);width:auto!important;z-index:20!important;opacity:var(--studio-visibility,0)}
 .chapter-track button{width:26px!important;height:8px!important;flex:none!important;padding:0!important;position:relative;cursor:pointer}
 .chapter-track button:before{left:auto!important;right:0!important;top:3px!important;width:12px!important;height:1.5px!important;transition:width .5s var(--cx-ease),background .3s}
 .chapter-track button.past:before{width:16px!important;background:#a7804680!important}
 .chapter-track button[aria-current=step]:before{width:26px!important;background:var(--cx-brass)!important}
 .chapter-track button:hover:before{width:26px!important}
 .chapter-track button:after{content:attr(aria-label);position:absolute;right:36px;top:50%;transform:translate(6px,-50%);white-space:nowrap;font:500 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cx-ink);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--cx-ease)}
 html[data-cx-act="2"] .chapter-track button:after{color:#f6f5f2}
 .chapter-track button:hover:after,.chapter-track button[aria-current=step]:after{opacity:1;transform:translate(0,-50%)}
 .chapter-track button[aria-current=step]:not(:hover):after{opacity:.0}
 .chapter-track:hover button[aria-current=step]:not(:hover):after{opacity:0}

 /* Acts move to the top centre, beside the logo. */
 .flow-route{position:absolute!important;left:50%!important;right:auto!important;top:26px!important;bottom:auto!important;transform:translateX(-50%);width:auto!important;display:flex!important;gap:26px!important;z-index:21!important;opacity:var(--studio-visibility,0);transition:opacity .4s}
 .flow-route button{min-width:120px;padding:0 0 10px!important;font-size:12px!important}
 .flow-route button small{margin-right:6px}
 .flow-route button:not(:first-child):before{left:-17px!important}

 /* Bottom bar stays, lighter. */
 .story-bottom{bottom:26px!important;left:3.5%!important;right:3.5%!important}
 .scene-footnote{bottom:38px!important;left:50%!important;right:auto!important;width:auto!important;transform:translateX(-50%);white-space:nowrap}
 .scroll-grow{display:none!important}
}

/* ===================================================================================== */
/* The hero, as a spread: huge type left, the room large on the right                    */
/* ===================================================================================== */
@media(min-width:1000px) and (min-height:600px){
 .hero-copy{top:clamp(96px,12vh,130px)!important;left:3.5%!important;right:3.5%!important;padding:0!important;text-align:left!important;transform-origin:0 0!important}
 .hero-copy .eyebrow{justify-content:flex-start!important;margin-bottom:22px!important}
 .hero-copy h1{font-size:clamp(84px,9.4vw,180px)!important;line-height:.88!important;letter-spacing:-.065em!important}
 .hero-copy h1 em{font-size:.9em!important}
 .cx-hero-lower{position:absolute;left:0;top:calc(100% + clamp(28px,6vh,80px));width:min(30vw,400px);pointer-events:auto}
 .cx-hero-lower .hero-subtitle{font-size:20px!important;margin:0 0 14px!important}
 .cx-hero-lower .hero-description{margin:0!important}
 .cx-hero-lower .hero-actions{justify-content:flex-start!important}
 .room-stage{translate:calc(var(--intro-visibility,0)*19vw) calc(var(--intro-visibility,0)*7vh);scale:calc(1 + var(--intro-visibility,0)*.2)}
 .photo-origin{left:auto!important;right:6%!important;top:15vh!important}
 .photo-origin svg{display:none}
 .hero-copy .eyebrow .gold-line{display:none}
}
@media(min-width:1000px) and (max-height:820px){
 .hero-copy h1{font-size:clamp(72px,8vw,150px)!important}
 .cx-hero-lower{top:calc(100% + 24px)}
 .cx-hero-lower .hero-description{display:none}
}

/* ---------- Small screens keep their stacked layout, with the new atmosphere ---------- */
@media(max-width:999px),(max-height:599px){
 .growing-words{left:4%!important;right:4%!important;top:58%!important;font-size:clamp(44px,13vw,80px)!important}
 .cx-floor{display:none}
}

/* ---------- Design lab: the copy goes editorial too ---------- */
.design-copy h2 em,.closing h2 em{color:var(--brass-ink,#9c7b4c)}

@media(prefers-reduced-motion:reduce){
 .cx-night,.growing-words{transition:none}
 .growing-words.cx-swap,.story-sticky .phase-tool.active{animation:none!important}
}

/* ---------- Touch devices: smoother scroll-driven motion ----------
   These elements have their transform/opacity rewritten by journey.js on every scroll frame.
   On phones and tablets, promoting them to their own compositor layer keeps that motion on the
   GPU so native scroll stays smooth, and isolating paint (contain) stops a change in one from
   invalidating the rest of the pinned stage. Desktop (hover + fine pointer) is left untouched. */
@media(hover:none) and (pointer:coarse){
 #room-stage,#inline-editor,#render-stage,#share-artifact,.hero-copy,.story-copy,.photo-origin,.capture-fragment{
  will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
}