:root {
  color-scheme: light;
  --paper: #d8d8d4;
  --paper-deep: #cecfcb;
  --ink: #111211;
  --muted: #655e54;
  --rule: rgba(17, 18, 17, .55);
  --accent: #625b52;
  --mono: "DM Mono", monospace;
  --display: "Barlow Condensed", Impact, sans-serif;
  --serif: "Bodoni Moda", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--display); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--ink); color: var(--paper); }

.topbar { position: absolute; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 21px 4.2vw; border-bottom: 1px solid var(--rule); background: var(--paper); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 700 18px var(--serif); letter-spacing: -.055em; }
.slash { color: var(--accent); margin: 0 1px; }
.door-mark { width: 18px; height: 23px; border: 1px solid var(--ink); display: inline-flex; align-items: flex-end; padding: 3px; }
.door-mark i { display: block; width: 1px; height: 16px; background: var(--ink); margin-left: 4px; }
.topbar nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 52px); font: 9px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.topbar nav a { transition: opacity .2s ease; }
.topbar nav a:hover { opacity: .55; }
.nav-book { padding: 11px 13px; border: 1px solid var(--ink); }
.nav-book span { margin-left: 17px; font-size: 8px; }
.concept-tag { position: absolute; left: 50%; transform: translateX(-50%); font: 7px var(--mono); letter-spacing: .1em; }

.cover { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: 98px 8.4vw 28px; overflow: hidden; background-color: var(--paper); background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(8.333vw - 1px), rgba(17,18,17,.055) calc(8.333vw - 1px), rgba(17,18,17,.055) 8.333vw); border-bottom: 1px solid var(--ink); }
.cover-meta, .cover-bottom { display: flex; justify-content: space-between; gap: 20px; font: 7px var(--mono); letter-spacing: .11em; }
.cover-meta { border-bottom: 1px solid var(--ink); padding: 0 0 9px; }
.cover-layout { flex: 1; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 5vw; position: relative; }
.cover-copy { position: relative; z-index: 2; padding: 25px 0 10px; }
.cover-copy > .eyebrow { font-size: 8px; }
.cover-lockup { display: flex; align-items: center; gap: 12px; margin: 24px 0 23px -4px; }
.cover-lockup h1 { margin: 0 0 0 -3px; font: 500 clamp(54px, 6.7vw, 96px)/.75 var(--serif); letter-spacing: -.1em; }
.cover-lockup h1 span { color: var(--accent); }
.cover-copy h2 { margin: 0; font: 600 clamp(47px, 6.3vw, 88px)/.75 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.cover-copy h2 em { font: 500 .81em/.88 var(--serif); letter-spacing: -.06em; }
.cover-description { max-width: 270px; margin: 21px 0 23px; color: #4f504d; font: 13px/1.4 var(--serif); }
.cover-enter { display: inline-flex; justify-content: space-between; gap: 38px; min-width: 200px; padding: 11px 12px; border: 1px solid var(--ink); font: 8px var(--mono); letter-spacing: .1em; }
.cover-enter span { color: var(--accent); }
.cover-art { position: relative; width: min(100%, 570px); height: min(67vh, 690px); margin: 0 auto; padding: 8px; border: 1px solid var(--ink); background: var(--paper); }
.cover-art::before { content: ""; position: absolute; z-index: 1; inset: 0; border: 1px solid var(--ink); transform: translate(8px, 8px); pointer-events: none; }
.cover-art img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.sculpture-art { position: relative; width: 100%; height: 100%; overflow: hidden; background: #e8e6df; perspective: 900px; cursor: grab; }
.sculpture-art.is-dragging { cursor: grabbing; }
.sculpture-art.is-dragging img { animation-play-state: paused; }
.sculpture-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: grayscale(1) contrast(1.06); animation: sculpture-drift 14s ease-in-out infinite alternate; }
.orbit { position: absolute; border: 1px solid rgba(18,18,18,.6); border-radius: 50%; pointer-events: none; transform-origin: center; animation: orbit-spin 24s linear infinite; }
.orbit-a { width: 120%; height: 44%; left: -10%; top: 28%; transform: rotate(-18deg); }
.orbit-b { width: 78%; height: 116%; left: 10%; top: -8%; transform: rotate(24deg); animation-duration: 32s; animation-direction: reverse; }
.orbit-star { position: absolute; color: #171717; font: 20px/1 var(--serif); animation: star-pulse 3.8s ease-in-out infinite; }
.star-a { top: 16%; left: 13%; }
.star-b { right: 12%; bottom: 16%; animation-delay: -1.8s; }
@keyframes sculpture-drift { from { transform: scale(1) translate3d(-.6%,0,0); } to { transform: scale(1.06) translate3d(.8%,-.8%,0); } }
@keyframes orbit-spin { to { transform: rotate(342deg); } }
@keyframes star-pulse { 0%,100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.18); } }
.cover-art figcaption { position: absolute; z-index: 2; bottom: 13px; left: 14px; right: 14px; display: flex; justify-content: space-between; color: white; font: 7px var(--mono); letter-spacing: .09em; mix-blend-mode: difference; }
.cover-art[data-crumble-frame]::after { content: "010011 001101 110010 011001 101100"; position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 18%; color: var(--ink); background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(17,18,17,.08) 3px 4px); font: 10px/2 var(--mono); letter-spacing: .22em; opacity: 0; pointer-events: none; mix-blend-mode: multiply; transition: opacity .2s ease; }
.cover-art[data-crumble-frame].is-crumbling::after { opacity: .82; }
.cover-side-label { position: absolute; right: 1vw; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font: 7px var(--mono); letter-spacing: .16em; }
.cover-bottom { border-top: 1px solid var(--ink); padding-top: 9px; }

.journey { height: 520vh; position: relative; }
.mobile-journey { display: none; }
.journey-stage { height: 100svh; min-height: 650px; position: sticky; top: 0; overflow: hidden; background: var(--paper); isolation: isolate; }
.journey-atmosphere { position: absolute; z-index: 1; inset: -12%; overflow: hidden; pointer-events: none; }
.atmosphere-grid { position: absolute; inset: -10%; opacity: .66; background-image: linear-gradient(rgba(17,18,17,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,17,.055) 1px, transparent 1px); background-size: 8.333vw 8.333vw; transform: perspective(700px) rotateX(7deg) scale(1.08); transform-origin: center; }
.orbit-drawing { position: absolute; width: min(130vw, 1500px); height: 120%; top: -10%; left: 17%; overflow: visible; fill: none; stroke: rgba(17,18,17,.36); stroke-width: 1; vector-effect: non-scaling-stroke; }
.orbit-drawing .orbit-node { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; }
.atmosphere-coordinate { position: absolute; top: 50%; color: rgba(17,18,17,.56); font: 7px var(--mono); letter-spacing: .13em; writing-mode: vertical-rl; }
.coordinate-left { left: 3.6%; transform: translateY(-50%) rotate(180deg); }
.coordinate-right { right: 3.6%; transform: translateY(-50%); }
.scene { position: absolute; z-index: 2; inset: 12vh 10vw 11vh 43vw; background-size: cover; background-position: center; opacity: 0; transform: translate3d(100vw, 0, 0) scale(1.08); filter: grayscale(1) contrast(1.08); border: 1px solid var(--ink); will-change: transform, opacity; }
.scene-entry { background-image: url("assets/room-entry-anchor.webp"); }
.scene-flash { background-image: url("assets/flash-wall.webp"); }
.scene-artist { background-image: url("assets/artist-portrait.webp"); background-position: 50% 34%; }
.scene-chair { background-image: url("assets/appointment-chair.webp"); background-position: center 55%; }
.scene.is-active { opacity: 1; }
.scene-shade { z-index: 3; position: absolute; inset: 12vh 10vw 11vh 43vw; background: linear-gradient(0deg, rgba(0,0,0,.3), transparent 28%, transparent 74%, rgba(0,0,0,.12)); pointer-events: none; }
.grain { z-index: 4; position: absolute; inset: 0; opacity: .08; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.scene-copy { position: absolute; z-index: 5; left: 8.4vw; top: 50%; width: 38vw; transform: translateY(-43%) translateX(34px); opacity: 0; visibility: hidden; transition: opacity .4s ease, transform .62s cubic-bezier(.2,.7,.2,1), visibility .4s; }
.scene-copy.is-active { opacity: 1; visibility: visible; transform: translateY(-43%) translateX(0); }
.eyebrow { font: 9px var(--mono); letter-spacing: .12em; line-height: 1.6; }
.hero-lockup { display: flex; align-items: center; gap: 13px; margin: 28px 0 0 -4px; }
.hero-symbol { width: 31px; height: 42px; border: 1px solid var(--ink); display: flex; align-items: flex-end; padding: 4px; }
.hero-symbol i { height: 31px; width: 1px; background: var(--ink); margin-left: 7px; }
h1, h2, p { margin-top: 0; }
.hero-lockup h1 { font: 500 clamp(70px, 8.2vw, 118px)/.76 var(--serif); letter-spacing: -.105em; margin: 0 0 0 -4px; }
.hero-lockup h1 span { color: var(--accent); }
.hero-line { font: 500 clamp(24px, 3vw, 42px)/.94 var(--display); letter-spacing: -.02em; margin: 30px 0 0 2px; text-transform: uppercase; }
.scroll-cue { display: flex; align-items: center; gap: 11px; margin-top: clamp(40px, 8vh, 70px); font: 8px var(--mono); letter-spacing: .14em; }
.scroll-line { height: 31px; width: 1px; background: var(--accent); transform-origin: top; animation: scroll-pulse 1.5s ease-in-out infinite; }
@keyframes scroll-pulse { 50% { transform: scaleY(.4); opacity: .4; } }
.scene-copy h2 { margin: 21px 0; font: 600 clamp(68px, 8vw, 112px)/.76 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.scene-copy h2 em, .section-heading h2 em, .artist-info h2 em, .booking-content h2 em { font: 500 .82em/.9 var(--serif); letter-spacing: -.06em; text-transform: uppercase; }
.style-list { display: grid; grid-template-columns: max-content max-content; gap: 9px 20px; margin-top: 24px; font: 8px var(--mono); letter-spacing: .04em; }
.artist-caption { display: flex; gap: 21px; margin: 23px 0 0; font: 9px var(--mono); letter-spacing: .08em; }
.artist-caption span:first-child { font: 500 21px var(--serif); letter-spacing: -.02em; }
.fictional-note { color: var(--muted); font: 8px var(--mono); margin-top: 8px; }
.scene-description { max-width: 245px; color: #4f504d; font: 13px/1.4 var(--serif); }
.big-link { display: inline-flex; gap: 28px; align-items: center; margin-top: 18px; border-bottom: 1px solid var(--ink); padding: 0 0 7px; font: 13px var(--serif); }
.big-link span { font: 8px var(--mono); }
.scene-index { position: absolute; z-index: 6; right: 4.2vw; bottom: 33px; display: flex; align-items: center; gap: 12px; font: 9px var(--mono); }
.index-current { color: var(--accent); font-size: 13px; }
.index-rule { width: 72px; height: 1px; background: rgba(17,18,17,.24); position: relative; overflow: hidden; }
.index-rule::after { content: ""; position: absolute; inset: 0; width: 100%; background: var(--accent); transform: scaleX(var(--journey-progress, 0)); transform-origin: left; }
.vertical-word { position: absolute; z-index: 6; left: 4vw; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font: 8px var(--mono); letter-spacing: .19em; }

.artwork-sequence { height: 330vh; position: relative; background: var(--paper-deep); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.artwork-sticky { position: sticky; top: 0; height: 100svh; min-height: 650px; overflow: hidden; padding: 27px 4.2vw 29px; }
.artwork-head, .artwork-footer { display: flex; justify-content: space-between; gap: 20px; font: 7px var(--mono); letter-spacing: .1em; }
.artwork-track { height: calc(100% - 24px); display: flex; align-items: center; gap: 0; width: max-content; padding: 4vh 0 7vh; transform: translate3d(0,0,0); will-change: transform; }
.art-card { width: 100vw; position: relative; padding: 0 8vw; }
.art-card-image { height: 70vh; border: 12px solid var(--ink); padding: 0; background: var(--paper); background-size: cover; background-position: center; filter: grayscale(1) contrast(1.04); box-shadow: none; }
.art-card-flash .art-card-image { background-image: url("assets/room-artbook-collage.webp"); }
.art-card-entry .art-card-image { background-image: url("assets/artist-nova.webp"); }
.art-card-chair .art-card-image { background-image: url("assets/artist-echo.webp"); }
.art-card p { margin: 17px 0 8px; font: 8px var(--mono); letter-spacing: .1em; }
.art-card h2 { margin: 0; font: 600 clamp(54px, 7vw, 104px)/.75 var(--display); letter-spacing: -.04em; }
.art-card h2 em { font: 500 .78em/.9 var(--serif); letter-spacing: -.07em; }
.artwork-progress { display: block; height: 1px; flex: 1; max-width: 230px; background: linear-gradient(90deg, var(--accent) var(--artwork-progress, 0%), rgba(17,18,17,.24) var(--artwork-progress, 0%)); }

.ai-artists { display: grid; grid-template-columns: minmax(220px,.8fr) repeat(2, minmax(220px, .6fr)); gap: 3.6vw; padding: 130px 8.4vw 145px; background: var(--paper); border-bottom: 1px solid var(--ink); align-items: end; }
.ai-artists-intro { padding-bottom: 20px; }
.ai-artists-intro h2 { margin: 25px 0; font: 600 clamp(67px, 8vw, 104px)/.76 var(--display); letter-spacing: -.045em; }
.ai-artists-intro h2 em { font: 500 .82em/.9 var(--serif); color: var(--accent); }
.ai-artists-intro > p:last-child { max-width: 270px; color: #4f504d; font: 14px/1.45 var(--serif); }
.artist-card { min-width: 0; }
.artist-card-image { position: relative; aspect-ratio: 2 / 3; border: 1px solid var(--ink); padding: 8px; background: var(--paper-deep); overflow: hidden; }
.artist-card-image::after { content: "AI STUDY / FICTIONAL"; position: absolute; left: 17px; bottom: 15px; padding: 6px 8px; color: var(--paper); background: var(--ink); font: 7px var(--mono); letter-spacing: .08em; }
.artist-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.artist-card-meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; font: 8px var(--mono); letter-spacing: .08em; }
.artist-card-meta strong { font-weight: 400; text-align: right; }

[data-scroll-reveal] { opacity: 0; transform: translateY(42px); transition: opacity .8s ease, transform 1s cubic-bezier(.18,.65,.25,1); }
[data-scroll-reveal].is-inview { opacity: 1; transform: translateY(0); }
.flash-feature[data-scroll-reveal] { transition-delay: .12s; }
.artist-info[data-scroll-reveal], .booking-content[data-scroll-reveal] { transition-delay: .1s; }

.after-room { padding: 142px 10vw 150px; display: grid; grid-template-columns: minmax(220px,.8fr) minmax(350px,1.2fr); gap: 5vw; align-items: center; background: var(--paper); border-top: 1px solid var(--ink); }
.section-heading h2, .artist-info h2, .booking-content h2 { font: 600 clamp(67px, 8vw, 104px)/.76 var(--display); letter-spacing: -.045em; margin: 25px 0; text-transform: uppercase; }
.section-heading > p:last-child { max-width: 320px; color: #4f504d; font: 16px/1.35 var(--serif); }
.flash-feature { position: relative; border: 1px solid var(--ink); padding: 9px; background: var(--paper); }
.flash-feature::before, .flash-feature::after { position: absolute; z-index: 2; font: 24px var(--serif); color: var(--accent); }
.flash-feature::before { content: "+"; top: -18px; left: -17px; }
.flash-feature::after { content: "✳"; top: -14px; right: -15px; font-size: 18px; }
.flash-feature img { width: 100%; display: block; filter: grayscale(1) contrast(1.1); }
.flash-label { display: flex; justify-content: space-between; gap: 20px; padding: 10px 1px 1px; color: #4b4c49; font: 8px var(--mono); letter-spacing: .08em; }
.style-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; margin-top: -30px; }
.style-tags span { border: 1px solid var(--ink); padding: 8px 10px; font: 8px var(--mono); letter-spacing: .07em; }

.artist-panel { display: grid; grid-template-columns: minmax(300px,.95fr) minmax(280px,1.05fr); min-height: 760px; background: var(--paper-deep); color: var(--ink); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.artist-image-wrap { position: relative; min-height: 700px; overflow: hidden; margin: 4.5vw; border: 1px solid var(--ink); padding: 8px; background: var(--paper); }
.artist-image-wrap img { width: 100%; height: 100%; position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; object-position: center 30%; filter: grayscale(1) contrast(1.05); }
.image-index { position: absolute; bottom: 17px; left: 17px; padding: 7px 9px; color: var(--paper); background: var(--ink); font: 8px var(--mono); letter-spacing: .08em; }
.artist-info { padding: clamp(55px, 8vw, 120px) clamp(38px, 8vw, 110px); align-self: center; }
.artist-info .eyebrow { color: #4b4b49; }
.artist-info h2 em { color: var(--accent); }
.artist-specialty { margin: 36px 0 21px; font: 500 20px/1.45 var(--serif); }
.artist-description { max-width: 350px; color: #4f504d; font: 14px/1.48 var(--serif); }
.artist-pair { position: relative; width: min(260px, 70%); margin-top: 28px; border: 1px solid var(--ink); padding: 6px; background: var(--paper); }
.artist-pair img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.artist-pair span { position: absolute; left: 12px; bottom: 12px; padding: 6px 8px; color: var(--paper); background: var(--ink); font: 7px var(--mono); letter-spacing: .08em; }
.text-link { display: inline-flex; gap: 24px; border-bottom: 1px solid var(--ink); padding-bottom: 7px; margin-top: 18px; font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.text-link span { color: var(--accent); }

.booking { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-bottom: 1px solid var(--ink); }
.booking-image { position: relative; min-height: 820px; overflow: hidden; padding: 4.5vw; }
.booking-image img { position: absolute; inset: 4.5vw; width: calc(100% - 9vw); height: calc(100% - 9vw); object-fit: cover; filter: grayscale(1) contrast(1.08); border: 1px solid var(--ink); }
.booking-image::after { content: ""; position: absolute; inset: 4.5vw; border: 1px solid var(--ink); pointer-events: none; }
.booking-image-title { position: absolute; z-index: 1; left: calc(4.5vw + 19px); right: calc(4.5vw + 19px); bottom: calc(4.5vw + 19px); display: flex; align-items: flex-end; justify-content: space-between; color: white; }
.booking-image-title span { font: 8px var(--mono); letter-spacing: .12em; }
.booking-image-title strong { font: 600 clamp(70px, 9vw, 120px)/.72 var(--display); letter-spacing: -.04em; }
.booking-content { padding: clamp(50px, 8vw, 120px) clamp(35px, 7vw, 100px); align-self: center; }
.booking-content h2 { font-size: clamp(62px, 7vw, 94px); }
.booking-content h2 em { color: var(--accent); }
.booking-intro { max-width: 440px; color: #4f504d; font: 14px/1.45 var(--serif); margin: 0 0 28px; }
#concept-form { display: grid; }
#concept-form label { margin: 15px 0 6px; color: #444541; font: 8px var(--mono); letter-spacing: .1em; }
#concept-form input, #concept-form select, #concept-form textarea { width: 100%; border: 0; border-bottom: 1px solid #767772; border-radius: 0; padding: 10px 0; outline: 0; background: transparent; color: var(--ink); font: 15px var(--serif); resize: vertical; }
#concept-form input:focus, #concept-form select:focus, #concept-form textarea:focus { border-color: var(--accent); }
#concept-form input::placeholder, #concept-form textarea::placeholder { color: #777873; }
#concept-form select { color: #555651; }
#concept-form select option { background: var(--paper); color: var(--ink); }
#concept-form button { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; padding: 16px 17px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; text-align: left; font: 8px var(--mono); letter-spacing: .12em; transition: color .2s, background .2s; }
#concept-form button:hover { color: var(--ink); background: transparent; }
#concept-form button span { color: #d1a19b; font-size: 8px; }
.form-message { min-height: 18px; margin: 11px 0 0; color: #444541; font: 9px var(--mono); }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 4.2vw; border-top: 1px solid var(--ink); background: var(--paper); }
.footer p, .footer > a:last-child { margin: 0; color: #41423e; font: 8px var(--mono); letter-spacing: .1em; }
.footer-mark { font-size: 14px; }
.footer-mark .door-mark { width: 15px; height: 19px; }
.footer-mark .door-mark i { height: 13px; }

@media (max-width: 760px) {
  html { scroll-behavior: smooth; }
  .topbar { position: absolute; padding: 16px 19px; }
  .topbar nav { gap: 14px; font-size: 7px; }
  .nav-book { padding: 9px 8px; }
  .nav-book span { margin-left: 5px; }
  .concept-tag { display: block; left: 47%; font-size: 5px; letter-spacing: .07em; }
  .cover { min-height: 100svh; padding: 82px 20px 18px; }
  .cover-meta, .cover-bottom { font-size: 6px; gap: 9px; }
  .cover-meta span:last-child { text-align: right; }
  .cover-layout { grid-template-columns: 1fr; gap: 14px; align-content: center; padding: 12px 0 16px; }
  .cover-copy { padding: 0; }
  .cover-copy > .eyebrow { font-size: 6px; margin-bottom: 8px; }
  .cover-lockup { gap: 9px; margin: 7px 0 11px -2px; }
  .cover-lockup .hero-symbol { width: 21px; height: 28px; }
  .cover-lockup .hero-symbol i { height: 20px; }
  .cover-lockup h1 { font-size: clamp(45px, 13vw, 65px); }
  .cover-copy h2 { font-size: clamp(39px, 11vw, 56px); }
  .cover-description { font-size: 11px; margin: 10px 0; max-width: 245px; }
  .cover-enter { min-width: 175px; padding: 8px 10px; font-size: 7px; }
  .cover-art { width: 68%; height: 37svh; margin: 0 0 0 auto; padding: 5px; }
  .cover-art::before { transform: translate(5px, 5px); }
  .cover-art figcaption { font-size: 6px; }
  .cover-side-label { right: 5px; font-size: 6px; }
  .sculpture-art { min-height: 0; }
  .journey { display: none; }
  .artwork-sequence { height: auto; }
  .artwork-sticky { position: relative; height: auto; min-height: 0; padding: 25px 20px 28px; }
  .artwork-track { display: grid; width: auto; gap: 38px; padding: 36px 0 45px; transform: none !important; }
  .art-card { width: 100%; }
  .art-card-image { height: 68vw; }
  .art-card h2 { font-size: clamp(58px, 17vw, 88px); }
  .artwork-progress { display: none; }
  .mobile-journey { display: block; }
  .mobile-scene { position: relative; min-height: 90svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 22px 45px; background-color: var(--paper); background-repeat: no-repeat; background-size: 88% auto; background-position: center 4%; border-bottom: 1px solid var(--ink); overflow: hidden; }
  .mobile-scene::before { content: ""; position: absolute; inset: 17px; border: 1px solid var(--ink); pointer-events: none; }
  .mobile-scene::after { content: ""; position: absolute; z-index: 0; inset: -28%; pointer-events: none; opacity: .42; background: repeating-radial-gradient(ellipse at 76% 28%, transparent 0 54px, rgba(17,18,17,.23) 55px, transparent 56px 106px); animation: mobile-orbit-drift 34s linear infinite; }
  .mobile-scene > * { position: relative; z-index: 1; }
  .mobile-entry { justify-content: flex-end; min-height: 100svh; background-image: url("assets/room-entry-anchor.webp"); background-size: 100% 60%; background-position: center 0; padding-top: 64svh; }
  .mobile-flash { background-image: url("assets/flash-wall.webp"); }
  .mobile-artist { background-image: url("assets/artist-portrait.webp"); background-size: auto 60%; background-position: center 1%; }
  .mobile-chair { background-image: url("assets/appointment-chair.webp"); background-size: 100% 59%; background-position: center 0; }
  .mobile-scene .eyebrow { margin: 0 0 13px; font-size: 7px; }
  .mobile-scene h2 { margin: 4px 0 15px; font-size: clamp(60px, 18vw, 94px); }
  .mobile-entry .scroll-cue { margin-top: 18px; }
  .mobile-scene .style-list { grid-template-columns: 1fr 1fr; gap: 8px; font-size: 7px; margin-top: 15px; }
  .mobile-scene .artist-caption { gap: 12px; font-size: 7px; }
  .mobile-scene .artist-caption span:first-child { font-size: 17px; }
  .mobile-scene .fictional-note { font-size: 7px; }
  .mobile-scene .big-link { font-size: 12px; margin-top: 4px; }
  .after-room { display: block; padding: 83px 22px 88px; }
  .section-heading h2 { font-size: 70px; }
  .section-heading > p:last-child { font-size: 15px; }
  .flash-feature { margin-top: 38px; padding: 6px; }
  .flash-label { font-size: 6px; }
  .style-tags { margin: 18px 0 0; }
  .style-tags span { font-size: 7px; }
  .artist-panel { grid-template-columns: 1fr; min-height: unset; }
  .artist-image-wrap { min-height: 112vw; margin: 22px; }
  .artist-info { padding: 55px 25px 67px; }
  .artist-info h2 { font-size: 78px; }
  .artist-pair { width: 62%; }
  .booking { grid-template-columns: 1fr; }
  .booking-image { min-height: 105vw; padding: 19px; }
  .booking-image img, .booking-image::after { inset: 19px; width: calc(100% - 38px); height: calc(100% - 38px); }
  .booking-image-title { left: 34px; right: 34px; bottom: 35px; }
  .booking-image-title strong { font-size: 82px; }
  .booking-content { padding: 60px 24px 73px; }
  .booking-content h2 { font-size: 61px; }
  .footer { flex-wrap: wrap; padding: 22px; }
  .footer p { order: 3; width: 100%; }
  .ai-artists { display: block; padding: 82px 22px 91px; }
  .ai-artists-intro h2 { font-size: 76px; }
  .ai-artists-intro > p:last-child { font-size: 15px; }
  .artist-card { margin-top: 38px; }
  .artist-card-meta { font-size: 7px; }
  [data-scroll-reveal] { transform: translateY(24px); }
}

@keyframes mobile-orbit-drift { to { transform: rotate(360deg) translate3d(2%, -1%, 0); } }

@media (max-width: 360px) {
  .concept-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-scroll-reveal] { opacity: 1; transform: none; }
}

/* ROOM/01 revision: full-bleed opening, horizontal image journey, paired artists. */
.cover { 
  min-height: 100svh;
  height: 100svh;
  padding: 82px 3vw 18px;
  background-image: none;
  isolation: isolate;
  background-color: var(--paper);
}
.cover::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35%;
  pointer-events: none;
  opacity: .54;
  background:
    repeating-radial-gradient(ellipse at 72% 42%, transparent 0 68px, rgba(17,18,17,.18) 69px, transparent 70px 126px),
    repeating-linear-gradient(90deg, transparent 0 8.25vw, rgba(17,18,17,.09) 8.3vw, transparent 8.36vw);
  animation: cover-lines-drift 46s linear infinite;
}
.cover-meta, .cover-bottom { position: relative; z-index: 4; }
.cover-meta { border-color: rgba(17,18,17,.5); }
.cover-layout { display: none; }
.cover-art {
  position: absolute;
  z-index: 1;
  inset: 67px 2vw 45px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: none !important;
}
.cover-art::before { inset: 0; border: 1px solid rgba(17,18,17,.76); transform: none; }
.cover-art figcaption { left: 19px; right: 19px; bottom: 15px; color: var(--ink); mix-blend-mode: normal; }
.sculpture-art { background: var(--paper); touch-action: none; }
.sculpture-art img {
  z-index: 1;
  object-fit: cover;
  object-position: center 22%;
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.04);
  animation: sculpture-drift 16s ease-in-out infinite alternate;
  transition: filter .25s ease;
}
.sculpture-art.is-dragging img { filter: grayscale(1) contrast(1.16) drop-shadow(0 16px 12px rgba(0,0,0,.18)); }
.sculpture-art .orbit { z-index: 2; border-color: rgba(17,18,17,.42); }
.orbit-a { width: 118%; height: 60%; left: -9%; top: 19%; animation: orbit-sweep-a 31s linear infinite; }
.orbit-b { width: 77%; height: 130%; left: 12%; top: -15%; animation: orbit-sweep-b 39s linear infinite; }
.orbit-star { z-index: 3; }
.cover-lockup { position: absolute; z-index: 4; left: 5vw; top: 15vh; display: block; color: var(--ink); text-shadow: 0 1px 10px rgba(239,238,233,.7); }
.cover-lockup h1 { margin: 0; font: 500 clamp(48px, 6.4vw, 100px)/.78 var(--serif); letter-spacing: -.1em; }
.cover-lockup h1 span { color: var(--accent); }
.cover-lockup p { margin: 0 0 4px; font: 8px var(--mono); letter-spacing: .12em; }
.cover-bottom { margin-top: auto; border-color: rgba(17,18,17,.5); }
.cover-art[data-crumble-frame]::after { content: "010011 101001 010110 110010 001101 101100"; font-size: clamp(10px, 1.1vw, 16px); background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(17,18,17,.15) 2px 3px); }

.artwork-sequence { height: 400vh; background: var(--paper); border: 0; }
.artwork-sticky { position: sticky; height: 100svh; min-height: 560px; padding: 0; background: var(--paper); }
.artwork-head, .artwork-footer { position: absolute; z-index: 5; left: 24px; right: 24px; font-size: 7px; }
.artwork-head { top: 16px; }
.artwork-footer { bottom: 16px; align-items: center; }
.artwork-track { position: absolute; inset: 0; height: 100%; display: flex; align-items: stretch; gap: 0; width: max-content; padding: 0; }
.art-card { flex: 0 0 100vw; width: 100vw; height: 100svh; padding: 0; overflow: hidden; background: var(--paper); }
.art-card-image {
  position: absolute;
  inset: 7px;
  height: auto;
  border: 1px solid var(--ink);
  background-color: var(--paper);
  background-size: cover;
  background-position: center;
  box-shadow: none;
  transform: scale(var(--panel-scale, .9));
  transform-origin: center;
  will-change: transform;
}
.art-card-entry .art-card-image { background-image: url("https://d8j0ntlcm91z4.cloudfront.net/user_308jkig6aEzv7bCZoa2OzQl6aoq/hf_20260929_142112_e0436b1e-01aa-45db-b89a-f28c4ebdf9b1.png"); }
.art-card-wall .art-card-image { background-image: url("https://d8j0ntlcm91z4.cloudfront.net/user_308jkig6aEzv7bCZoa2OzQl6aoq/hf_20260929_144143_3dcb0920-1d53-48a8-8433-e79ef48b844e.png"); }
.art-card-closeup-one .art-card-image { background-image: url("https://d8j0ntlcm91z4.cloudfront.net/user_308jkig6aEzv7bCZoa2OzQl6aoq/hf_20260929_144143_9a709953-07a5-4312-971f-70c64a0d0644.png"); }
.art-card-closeup-two .art-card-image { background-image: url("https://d8j0ntlcm91z4.cloudfront.net/user_308jkig6aEzv7bCZoa2OzQl6aoq/hf_20260929_144144_2a3576a0-4768-4a34-9325-a792bfda3ddc.png"); }
.art-card p { position: absolute; z-index: 2; left: clamp(25px, 5vw, 76px); bottom: clamp(38px, 7vh, 75px); margin: 0; padding: 8px 10px; color: var(--paper); background: var(--ink); font-size: 8px; }
.art-card h2 { display: none; }
.panel-line-field { position: absolute; z-index: 1; inset: -20%; pointer-events: none; opacity: .38; background: repeating-radial-gradient(ellipse at 71% 41%, transparent 0 82px, rgba(17,18,17,.24) 83px, transparent 84px 150px); animation: cover-lines-drift 38s linear infinite reverse; }
.artwork-track { z-index: 2; }

.artist-panel { display: block; min-height: unset; padding: clamp(54px, 8vw, 112px) 8vw; background: var(--paper-deep); }
.artist-heading { margin: 0 0 42px; }
.artist-heading h2 { margin: 18px 0 0; font: 600 clamp(58px, 7vw, 96px)/.78 var(--display); letter-spacing: -.045em; }
.artist-heading h2 em { font: 500 .82em/.9 var(--serif); color: var(--accent); }
.artist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 46px); max-width: 1220px; margin: 0 auto; }
.artist-profile { min-width: 0; }
.artist-image-wrap { position: relative; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--ink); background: var(--paper); }
.artist-image-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.artist-profile:nth-child(2) .artist-image-wrap img { object-position: center 31%; }
.image-index { z-index: 2; bottom: 12px; left: 12px; }
.artist-profile-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; }
.artist-profile-meta h3 { margin: 0; font: 600 clamp(30px, 4vw, 52px)/.85 var(--display); }
.artist-profile-meta p { margin: 0; text-align: right; font: 7px var(--mono); letter-spacing: .08em; }
.artist-note { max-width: 1220px; margin: 22px auto 0; font: 8px var(--mono); letter-spacing: .08em; }

@keyframes cover-lines-drift { to { transform: translate3d(8%, -6%, 0) rotate(13deg); } }
@keyframes orbit-sweep-a { to { transform: rotate(342deg); } }
@keyframes orbit-sweep-b { to { transform: rotate(-336deg); } }

@media (max-width: 760px) {
  .cover { padding: 77px 14px 15px; }
  .cover-art { inset: 62px 8px 42px; }
  .cover-lockup { left: 21px; bottom: 8vh; display: block; }
  .cover-lockup { top: 13vh; bottom: auto; }
  .cover-lockup h1 { font-size: clamp(53px, 15vw, 82px); }
  .cover-lockup p { margin-top: 8px; }
  .cover-art figcaption { left: 11px; right: 11px; bottom: 9px; font-size: 6px; }
  .artwork-sequence { height: 400svh; }
  .artwork-sticky { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; padding: 0; }
  .artwork-head { display: flex; left: 13px; right: 13px; font-size: 6px; }
  .artwork-footer { display: flex; left: 13px; right: 13px; font-size: 6px; }
  .artwork-track { position: absolute; inset: 0; display: flex; width: max-content; height: 100%; transform: translate3d(0,0,0); }
  .art-card { position: relative; flex: 0 0 100vw; width: 100vw; height: 100svh; min-height: 0; }
  .art-card-image { inset: 6px; transform: scale(var(--panel-scale,.9)); background-position: center; }
  .art-card p { left: 22px; bottom: 28px; }
  .panel-line-field { position: absolute; }
  .artist-panel { padding: 74px 20px 82px; }
  .artist-grid { gap: 12px; }
  .artist-heading { margin-bottom: 29px; }
  .artist-profile-meta { display: block; }
  .artist-profile-meta h3 { font-size: 32px; }
  .artist-profile-meta p { margin-top: 7px; text-align: left; font-size: 6px; }
  .image-index { left: 8px; bottom: 8px; font-size: 6px; }
  .artist-note { font-size: 7px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .cover::before, .panel-line-field, .orbit-a, .orbit-b, .sculpture-art img { animation: none !important; }
}

@keyframes sculpture-drift {
  from { translate: -.6% 0; }
  to { translate: .8% -.8%; }
}

/* Entrance motion pass. The longer outer section gives the artwork time to break apart before the next section arrives. */
.cover {
  position: relative;
  height: 180svh;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
.cover::before { content: none; }
.cover-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  padding: 82px 3vw 18px;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.cover-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35%;
  pointer-events: none;
  opacity: .54;
  background:
    repeating-radial-gradient(ellipse at 72% 42%, transparent 0 68px, rgba(17,18,17,.18) 69px, transparent 70px 126px),
    repeating-linear-gradient(90deg, transparent 0 8.25vw, rgba(17,18,17,.09) 8.3vw, transparent 8.36vw);
  animation: cover-lines-drift 46s linear infinite;
}
.cover-stage > .cover-meta,
.cover-stage > .cover-bottom { position: relative; z-index: 5; }
.cover-art {
  position: absolute;
  z-index: 1;
  inset: 67px 2vw 45px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.cover-art::before { inset: 0; border: 1px solid rgba(17,18,17,.76); transform: none; }
.cover-art[data-crumble-frame]::after { content: none; }
.cover-art figcaption { z-index: 5; color: var(--ink); mix-blend-mode: normal; }
.cover-lockup { position: absolute; z-index: 5; left: 5vw; top: 15vh; display: block; color: var(--ink); text-shadow: 0 1px 10px rgba(239,238,233,.7); }
.sculpture-art { background: var(--paper); touch-action: auto; }
.sculpture-art > img.orbit-backdrop {
  z-index: 0;
  object-fit: cover;
  object-position: center 22%;
  transform: none;
  animation: none;
  mix-blend-mode: multiply;
  opacity: 1;
}
.sculpture-art > img.sculpture-foreground {
  z-index: 1;
  object-fit: cover;
  object-position: center 22%;
  transform: none;
  animation: none;
  mix-blend-mode: multiply;
  opacity: 1;
  transition: opacity .08s linear;
}
.sculpture-art .orbit { z-index: 0; border-color: rgba(17,18,17,.56); }
.orbit-a { width: 118%; height: 60%; left: -9%; top: 19%; animation: orbit-sweep-a 31s linear infinite; }
.orbit-b { width: 77%; height: 130%; left: 12%; top: -15%; animation: orbit-sweep-b 39s linear infinite; }
.orbit-star { z-index: 3; }
.sculpture-art { overflow: visible; }
.butterfly-field { position: absolute; z-index: 4; inset: 0; overflow: visible; pointer-events: none; }
.sun-spinner {
  position: absolute;
  z-index: 3;
  left: 72%;
  top: 18%;
  width: clamp(100px, 14vw, 220px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  animation: sun-turn 66s linear infinite;
  transition: opacity .08s linear;
  pointer-events: none;
}
.sun-spinner::before { content: none; }
.sun-spinner svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.sun-spinner .sun-rays { fill: none; stroke: rgba(17,18,17,.72); stroke-width: 1.5; }
.sun-spinner .sun-core { fill: var(--paper); stroke: rgba(17,18,17,.8); stroke-width: 1.3; }
.sun-spinner .sun-core-detail { fill: none; stroke: rgba(17,18,17,.46); stroke-width: .8; }
.butterfly { position: absolute; z-index: 4; width: clamp(17px, 2.4vw, 35px); height: auto; color: #171817; cursor: pointer; transform-origin: center; filter: drop-shadow(0 1px 1px rgba(242,240,234,.65)); pointer-events: auto; will-change: transform, opacity; animation: butterfly-hover 5s ease-in-out var(--hover-delay, 0s) infinite alternate; }
.butterfly svg { display: block; width: 100%; overflow: visible; }
.butterfly .wing { fill: rgba(239,238,233,.58); stroke: currentColor; stroke-width: 1.8; transform-box: fill-box; transform-origin: center; animation: wing-flutter .23s ease-in-out infinite alternate; }
.butterfly .wing-back { animation-delay: -.12s; }
.butterfly .body { fill: currentColor; }
.butterfly.is-flying { animation: butterfly-escape .86s cubic-bezier(.2,.8,.2,1) forwards; pointer-events: none; }
@keyframes sun-turn { to { rotate: 360deg; } }
@keyframes wing-flutter { to { scale: .18 1; } }
@keyframes butterfly-hover { to { translate: var(--float-x, 10px) var(--float-y, -8px); } }
@keyframes butterfly-escape { to { translate: var(--escape-x, 36vw) var(--escape-y, -28vh); rotate: var(--escape-rotate, 34deg); scale: .42; opacity: 0; } }

@media (max-width: 760px) {
  .cover { height: 180svh; }
  .cover-stage { min-height: 0; padding: 77px 14px 15px; }
  .cover-art { inset: 62px 8px 42px; }
  .cover-lockup { left: 21px; top: 13vh; }
  .cover-lockup h1 { font-size: clamp(53px, 15vw, 82px); }
  .cover-lockup p { margin-top: 8px; }
  .cover-art figcaption { left: 11px; right: 11px; bottom: 9px; font-size: 6px; }
  .sun-spinner { left: 69%; top: 18%; width: clamp(100px, 22vw, 155px); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-stage::before, .sun-spinner, .butterfly, .butterfly .wing { animation: none !important; }
}

/* One sculpture renderer, with an opaque texture and lit stone edges. */
.stone-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sculpture-art { background: transparent; cursor: default; }
.sculpture-art > img.sculpture-foreground { object-fit: contain; object-position: center; mix-blend-mode: normal; transition: none; }
.sculpture-art.has-stone-renderer > img.sculpture-foreground { inset: auto; left: 50%; top: 50%; max-width: none; transform: translate(-50%,-50%); }
.sculpture-art.has-stone-renderer.is-fracturing > img.sculpture-foreground { visibility: hidden; }
.sculpture-art > img.orbit-backdrop { opacity: var(--scene-remnant, 1); }
.cover-art::before, .cover-art figcaption,
.sculpture-art .orbit, .sculpture-art .orbit-star,
.cover-line-field { opacity: var(--scene-remnant, 1); }
.cover-stage::before { opacity: calc(var(--scene-remnant, 1) * .54); }
.sun-spinner { animation: none; }
.sun-spinner svg { animation: sun-turn 66s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .sun-spinner svg, .orbit-star { animation: none !important; }
}

/* Keep the approved engraving; only its original wings and sun move. */
.butterfly { aspect-ratio: 138 / 85; mix-blend-mode: multiply; filter: none; }
.original-wing { position: absolute; inset: 0; transform-origin: 50% 50%; }
.original-wing svg { width: 100%; height: 100%; }
.original-wing-left { clip-path: inset(0 49% 0 0); animation: original-left-flap .4s ease-in-out infinite alternate; }
.original-wing-right { clip-path: inset(0 0 0 49%); animation: original-right-flap .4s ease-in-out infinite alternate; }
@keyframes original-left-flap { to { transform: rotateY(64deg); } }
@keyframes original-right-flap { to { transform: rotateY(-64deg); } }
.sun-spinner { mix-blend-mode: multiply; }
/* 43% centred on the sun keeps every ray and cuts the two orbit lines that sat at the old 49% edge. */
.sun-spinner svg { clip-path: circle(43% at 48.8% 50%); }
.sculpture-art > img.sculpture-foreground { filter: grayscale(1); }
.sculpture-art .orbit, .sculpture-art .orbit-star, .cover-line-field { opacity: 1; }
.cover-stage::before { opacity: .54; }

/* The first artwork opens in place while the final stone pieces leave. Its
   matching panel is already beneath the cover, so there is no downward slide. */
.cover { z-index: 3; pointer-events: none; }
.cover-stage { pointer-events: auto; border-bottom: 0; }
.cover-lockup, .cover-meta, .cover-bottom { opacity: var(--cover-copy-opacity, 1); }
.artwork-sequence { position: relative; z-index: 2; margin-top: -100svh; }
.artist-panel, .booking-experience, .footer { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .original-wing { animation: none; }
}

/* Six independently drifting engravings; pointer escape stays inside the cover. */
.butterfly { left:0;top:0;animation:none;translate:none;transition:none; }
.cover-stage > .cover-meta { opacity:var(--meta-opacity,1);transition:opacity .12s linear; }

/* Fixed source frames keep the studio architecture stable during the entry sequence. */
.cover { height: 240svh; }
.sculpture-art { background: var(--paper); }
/* Starts exactly as the cover ends (cover 240svh, stage pinned for 140svh). */
.entry-film { height: 620svh; margin-top:-100svh; position: relative; z-index: 2; background: var(--paper); }
.entry-film-sticky { position: sticky; top: 0; height: 100svh; min-height: 500px; overflow: hidden; isolation: isolate; background: var(--paper); }
.entry-film-caption { position: absolute; z-index: 4; top: 22px; left: 4vw; right: 4vw; display:flex; justify-content:space-between; gap:18px; padding-bottom:10px; border-bottom:1px solid rgba(17,18,17,.55); font:8px var(--mono); letter-spacing:.1em; pointer-events:none; }
.entry-film-progress { position:absolute; z-index:4; bottom:0; left:0; width:calc(var(--entry-film-progress,0) * 100%); height:3px; background:var(--ink); }
.studio-details { position:relative; display:grid; grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr); gap:clamp(22px,5vw,76px); padding:clamp(64px,9vw,130px) 7vw; background:var(--paper); }
.studio-detail-heading { grid-column:1; align-self:start; position:sticky; top:100px; }
.studio-detail-heading h2 { margin:20px 0 0; font:600 clamp(50px,7vw,92px)/.78 var(--display); letter-spacing:-.04em; }
.studio-detail-heading h2 em { font:500 .82em/.9 var(--serif); }
.studio-detail { grid-column:2; margin:0; min-width:0; }
.studio-detail-wall { width:100%; }
.studio-detail-station { width:80%; margin:clamp(28px,6vw,90px) 0 0 auto; }
.studio-detail img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(1) contrast(1.04); border:1px solid var(--ink); }
.studio-detail figcaption { padding-top:9px; font:8px var(--mono); letter-spacing:.09em; }
@media(max-width:760px){
 .cover { height:220svh; }
 .entry-film { height:560svh; }
 .entry-film-caption { top:15px; left:14px; right:14px; font-size:6px; }
 .studio-details { grid-template-columns:1fr; gap:24px; padding:66px 18px; }
 .studio-detail-heading { grid-column:1; position:relative; top:auto; }
 .studio-detail { grid-column:1; }
 .studio-detail-station { width:90%; }
}
@media(prefers-reduced-motion:reduce){
 .entry-film { height:100svh; margin-top:0; z-index:2; }
 .entry-film-sticky { position:relative; }
 .studio-detail-heading { position:relative; top:auto; }
}
.entry-film-caption { z-index:4; }

/* From 30% of the break the entrance flies in behind the stone fragments
   (layer 2, painted before the fragment canvas) and fills the screen at 100%,
   where it is pixel-identical to the first frame of the pinned camera move. */
.entry-portal { position:absolute; z-index:2; inset:0; pointer-events:none; opacity:var(--entry-opacity,0); }
.stone-canvas { opacity:var(--stone-fade,1) !important; }
/* Entrance scene: one canvas per scene (see createScene in script.js). */
.entry-scene-host { position:absolute; inset:0; overflow:hidden; background:transparent; }
.entry-scene-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .4s ease; }
.entry-scene-host.is-ready .entry-scene-canvas { opacity:1; }
.entry-portal .entry-scene-host { background:transparent; }
/* Invisible click areas over Nova's and Hiro's frames, which are part of the wall image. */
.wall-artist { position:absolute; z-index:2; padding:0; border:0; background:transparent; cursor:pointer; pointer-events:none; outline:1px solid rgba(255,255,255,0); outline-offset:6px; transition:outline-color .3s ease, box-shadow .3s ease; }
.wall-artist-tag { position:absolute; left:50%; top:100%; transform:translate(-50%,calc(-50% + 6px)); padding:4px 8px; background:#efeee9; color:#111; font:500 10px/1 var(--mono); letter-spacing:.16em; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.18); opacity:0; transition:opacity .4s ease, transform .4s ease, background .2s, color .2s; }
.is-at-wall .wall-artist { pointer-events:auto; animation:wall-artist-call 1.8s ease .2s 1; }
/* The tag sits on the frame's bottom edge, so it never covers the stencil sheets below. */
.is-at-wall .wall-artist-tag { opacity:1; transform:translate(-50%,-50%); }
.is-at-wall .wall-artist:hover, .is-at-wall .wall-artist:focus-visible { outline-color:rgba(17,18,17,.9); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.wall-artist:hover .wall-artist-tag, .wall-artist:focus-visible .wall-artist-tag { background:#111; color:#efeee9; }
@keyframes wall-artist-call { 0%,100% { outline-color:rgba(17,18,17,0); } 40% { outline-color:rgba(17,18,17,.85); } }

/* Floating artist card */
.artist-card-dialog { width:min(420px,calc(100vw - 32px)); max-height:none; padding:0; border:0; background:transparent; overflow:visible; perspective:1600px; }
.artist-card-dialog::backdrop { background:rgba(17,18,17,.55); backdrop-filter:blur(3px); }
.artist-card-dialog[open] { animation:artist-card-in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes artist-card-in { from { opacity:0; transform:translateY(24px) scale(.94); } }
.artist-card { position:relative; display:grid; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.artist-card.is-flipped { transform:rotateY(180deg); }
.artist-card-face { grid-area:1/1; position:relative; display:flex; flex-direction:column; background:var(--paper); color:var(--ink); border:1px solid var(--ink); backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.artist-card-back { transform:rotateY(180deg); }
.artist-card-portrait { display:block; width:100%; aspect-ratio:4/4.4; object-fit:cover; object-position:50% 20%; filter:grayscale(1) contrast(1.04); border-bottom:1px solid var(--ink); }
.artist-card-body { padding:18px 20px 6px; }
.artist-card-label { margin:0 0 8px; font:500 9px/1.4 var(--mono); letter-spacing:.14em; }
.artist-card-body h3 { margin:0; font:600 44px/.9 var(--display); letter-spacing:-.02em; text-transform:uppercase; }
.artist-card-body h4 { margin:0; font:600 30px/.95 var(--display); text-transform:uppercase; }
.artist-card-style { margin:6px 0 0; font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.artist-card-note { margin:10px 0 0; font:400 15px/1.45 var(--serif); }
.artist-card-fiction { margin:12px 0 14px; font:400 9px/1.4 var(--mono); opacity:.7; }
.artist-card-flip, .artist-card-choose, .artist-card-unflip { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; margin-top:16px; padding:14px 16px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); font:500 11px/1 var(--mono); letter-spacing:.12em; text-decoration:none; cursor:pointer; box-sizing:border-box; }
.artist-card-unflip { margin-top:8px; background:transparent; color:var(--ink); justify-content:center; }
.artist-card-flip:hover, .artist-card-choose:hover { background:#2b2b2b; }
.artist-card-close { position:absolute; z-index:2; top:12px; right:12px; padding:8px 10px; border:1px solid var(--ink); background:var(--paper); color:var(--ink); font:500 9px/1 var(--mono); letter-spacing:.14em; cursor:pointer; }
.artist-card-flash { display:block; width:calc(100% - 40px); margin:14px 20px 0; aspect-ratio:1; object-fit:cover; border:1px solid var(--ink); filter:grayscale(1) contrast(1.04); }
.artist-card-actions { padding:0 20px 20px; }
@media (max-width:760px) { .artist-card-body h3 { font-size:36px; } .artist-card-portrait { aspect-ratio:1; } }
@media (prefers-reduced-motion:reduce) { .artist-card, .artist-card-dialog[open], .is-at-wall .wall-artist, .entry-scene-canvas { transition:none; animation:none; } }

/* Concrete page: the storefront's concrete texture (assets/concrete-tile.webp), a soft light
   falloff and fine film grain, fixed to the screen so the page scrolls over it.
   The cover stage repeats the same fixed background so artwork blended with
   multiply inside it (orbit lines, sun) sits on the grain, not on transparency. */
:root { --page-grain:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.32'/></svg>"),
    radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,.07) 100%),
    url("assets/concrete-tile.webp?v=20261002b") 0 0 / 520px auto repeat; }
html { background:#d8d8d4; }
body, .cover-stage { background:var(--page-grain); background-attachment:fixed; }
.sculpture-art, .entry-film, .entry-film-sticky, .booking.booking-experience { background-color:transparent; }
/* room01-orbit-ink.webp is the approved orbit artwork as black ink on transparency
   (made from room01-orbit-background.png), so it sits on the grain with no blending. */
.sculpture-art > img.orbit-backdrop { filter:none; mix-blend-mode:normal; }
/* ROOM/01 sits higher and slightly smaller so it clears the stars in the artwork below it. */
.cover-lockup { top:max(11.6vh, 100px); }
.cover-lockup h1 { font-size:clamp(44px, 5.7vw, 90px); }
@media (max-width:760px) { .cover-lockup { top:11vh; } }

/* Floating scroll cue on the opening screen; fades with the cover copy once the break starts. */
.scroll-cue { position:absolute; z-index:6; left:50%; bottom:clamp(44px, 7vh, 72px); display:flex; flex-direction:column; align-items:center; gap:10px; transform:translateX(-50%); opacity:var(--cover-copy-opacity,1); pointer-events:none; animation:scroll-cue-float 2.6s ease-in-out infinite; }
.scroll-cue span { padding:9px 16px 9px 20px; border:1px solid var(--ink); background:rgba(216,216,212,.82); backdrop-filter:blur(4px); color:var(--ink); font:500 11px/1 var(--mono); letter-spacing:.42em; }
.scroll-cue i { position:relative; width:1px; height:34px; background:rgba(17,18,17,.35); overflow:hidden; }
.scroll-cue i::after { content:""; position:absolute; left:-1px; top:-10px; width:3px; height:10px; background:var(--ink); animation:scroll-cue-drop 1.6s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes scroll-cue-float { 0%,100% { translate:0 0; } 50% { translate:0 -6px; } }
@keyframes scroll-cue-drop { 0% { top:-10px; } 100% { top:34px; } }
@media (prefers-reduced-motion:reduce) { .scroll-cue, .scroll-cue i::after { animation:none; } }
@media (max-width:760px) { .wall-artist-tag { padding:3px 6px; font-size:8px; letter-spacing:.12em; } .scroll-cue span { font-size:10px; } }

/* Double doors: the cover's grain splits along the centre line and slides apart. */
.cover-door { position:absolute; inset:0; background:var(--page-grain); will-change:transform; }
.cover-door-left { clip-path:inset(0 50% 0 0); transform:translateX(calc(var(--door,0) * -50.5%)); }
.cover-door-right { clip-path:inset(0 0 0 50%); transform:translateX(calc(var(--door,0) * 50.5%)); }
/* A very soft edge on each half, no hard line, so the doors simply glide apart. */
.cover-door::after { content:""; position:absolute; top:0; bottom:0; width:140px; pointer-events:none; }
.cover-door-left::after { left:calc(50% - 140px); background:linear-gradient(90deg,transparent,rgba(17,18,17,.04)); }
.cover-door-right::after { left:50%; background:linear-gradient(270deg,transparent,rgba(17,18,17,.04)); }
/* Storefront behind the doors settles from soft focus and a 6% zoom to sharp. */
.entry-portal .entry-scene-canvas { filter:blur(var(--focus-blur,0px)); transform:scale(var(--focus-scale,1)); }
@media (prefers-reduced-motion:reduce) { .cover-door { display:none; } }

/* Booking slides up over the held wall until it fills the screen. */
#booking.booking-experience { position:relative; z-index:4; margin-top:-100svh; background:var(--page-grain); background-attachment:fixed; box-shadow:0 -28px 60px rgba(0,0,0,.28); border-top:1px solid var(--ink); }
@media (prefers-reduced-motion:reduce) { #booking.booking-experience { margin-top:0; } }