/* A single stationary wall belongs to the whole dark journey. */
.continuous-room { position: relative; z-index: 1; isolation: isolate; overflow: clip; background: #080808; }
/* A clean black field with one soft lift behind the figure; no photographed wall. */
.room-backdrop { position: sticky; z-index: 0; top: 0; width: 100%; height: 100svh; margin-bottom: -100svh; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 46% 64% at 73% 44%,#151515 0%,#0c0c0c 48%,#060606 100%); }
.continuous-room .opening-sequence { z-index: 2; pointer-events: none; }
.continuous-room .opening-stage { pointer-events: auto; }
.continuous-room .opening-stage { background: transparent; }
.continuous-room .introduction { background: transparent; }
.intro-world { position: relative; height: 100%; min-height: inherit; isolation: isolate; }
.continuous-room .introduction::after { display: none; }
.continuous-room .intro-visual { mask-image: none; }
.continuous-room .intro-camera { mask-image: url('/assets/motion/introduction-matte-desktop.png'); mask-size: cover; mask-position: 72% 40%; mask-repeat: no-repeat; }
.continuous-room .background { position: relative; z-index: 1; background: transparent; }
/* The opaque dark page leaves in front of the stationary white closing poster. */
body[data-page="home"] .contact { position: relative; z-index: 0; background: #fff; color: #111; }
.room-passage { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.room-passage-ring { opacity: 0; }
.has-passage + .work-gallery { margin-top: -100svh; }
.has-passage .room-passage { position: fixed; height: 100svh; }
@media(min-width:1000px) and (min-height:720px) and (min-aspect-ratio:1.3/1) and (prefers-reduced-motion:no-preference) {
  .opening-sequence.is-enhanced { height: 325svh; }
  .is-enhanced .intro-anchor { top: 110svh; }
}

.work-gallery { position: relative; z-index: 1; overflow: clip; color: #efefed; background: transparent; --work-inset: var(--full-bleed-gutter); --entrance-top: clamp(72px,9svh,125px); --entrance-size: clamp(36px,3.5vw,60px); scroll-margin-top: -88px; }
.work-entrance { position: absolute; z-index: 2; left: var(--work-inset); top: var(--entrance-top); pointer-events: none; }
.work-entrance h2 { max-width: 11ch; color: #b9b9b9; font-size: var(--entrance-size); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; }
.work-entrance h2 span { display: block; color: #f8f8f8; font-weight: 500; }
.work-composition { position: relative; min-height: 100svh; --work-drift: 0px; }
.work-name { position: absolute; z-index: 2; font-weight: 500; font-size: min(13.3vw,22svh,224px); line-height: .96; letter-spacing: -.06em; }
.work-name-main { display: block; text-indent: -.045em; }
.work-name-detail { display: block; margin-top: .34em; text-indent: -.015em; font-size: clamp(28px,2.7vw,44px); font-weight: 400; line-height: 1.1; letter-spacing: -.035em; color: #bdbdbd; }
.work-role { position: absolute; z-index: 2; font-size: clamp(14px,1.04vw,18px); line-height: 1.65; letter-spacing: -.015em; }
.work-role span { display: block; color: #a8a8a8; }
.work-role .work-status { margin-top: 14px; color: #b8b8b8; font-size: .9em; }
.work-description { position: absolute; z-index: 2; max-width: 31ch; font-size: clamp(18px,1.4vw,23px); line-height: 1.5; letter-spacing: -.025em; color: #dedede; }
.work-description > span { display: block; color: #9b9b9b; margin-top: .55em; }
.work-study { position: absolute; z-index: 1; margin: 0; transform: translateY(var(--work-drift)); pointer-events: none; }
.work-study canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .4s ease; }
.work-study .work-drawing { display: block; width: 100%; height: 100%; }
.work-sculpture .work-drawing { position: absolute; inset: 0; opacity: .8; transition: opacity .4s ease; }
.work-sculpture.is-ready canvas { opacity: 1; }
.work-sculpture.is-ready .work-drawing { opacity: 0; }
.orrery-figure.is-ready .work-drawing { pointer-events: none; }
/* All three compositions share one pattern: name high, study in the field,
   role low left and description low right on a shared baseline.
   Orrery's name sits one measured gap below the two-line entrance heading. */
.work-orrery .work-name { left: calc(var(--work-inset) - .02em); top: calc(var(--entrance-top) + var(--entrance-size) * 2.16 + clamp(52px,8svh,110px)); font-size: min(12.5vw,19svh,212px); }
.work-orrery .work-role { left: var(--work-inset); bottom: 10svh; width: 290px; }
.work-orrery .work-description { right: var(--work-inset); bottom: 10svh; width: 355px; }
.work-orrery .work-study { inset: 9svh 1vw 22svh 40vw; }
.work-orrery .orrery-figure { inset: 3svh -1vw 14svh 34vw; }
/* The canvas is a bounded pointer surface; the page retains native scrolling. */
.orrery-figure { pointer-events: auto; touch-action: pan-y; cursor: crosshair; }
.orrery-figure:focus-visible { outline: 1px solid #9d7a55; outline-offset: -8px; border-radius: 12px; }
.orrery-guidance { position: absolute; right: 10%; bottom: 3%; color: #b5a08b; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.orrery-figure.is-ready .orrery-guidance { opacity: .75; }
.orrery-figure[data-guided="true"] .orrery-guidance { opacity: .35; }
.orrery-guide-touch { display: none; }
.orrery-axes { display: none; position: absolute; inset: 0; pointer-events: none; }
.orrery-figure.is-ready .orrery-axes { display: block; }
.orrery-axes span { position: absolute; transform: translate(-50%,-50%); font: 500 10px/1 ui-monospace,monospace; letter-spacing: .04em; opacity: .8; }
.orrery-axes [data-axis="x"] { color: #ca9a70; }
.orrery-axes [data-axis="y"] { color: #9ab0b4; }
.orrery-axes [data-axis="z"] { color: #c4b99f; }
@media(pointer:coarse) { .orrery-guide-pointer { display: none; } .orrery-guide-touch { display: inline; } }
.work-solvynth { min-height: 120svh; --solvynth-title-size: min(12.5vw,22svh,218px); --solvynth-art-gap: clamp(104px,13svh,148px); }
.work-solvynth .work-name { left: calc(var(--work-inset) - .025em); top: 14svh; font-size: var(--solvynth-title-size); }
.work-solvynth .work-role { right: var(--work-inset); top: 42svh; width: 300px; }
.work-solvynth .work-description { right: var(--work-inset); top: calc(42svh + 126px); width: 300px; }
.work-solvynth .work-study { inset: 36svh 31vw 11svh 2vw; }
.work-solvynth .solvynth-system { inset: calc(14svh + var(--solvynth-title-size) * .96 + var(--solvynth-art-gap)) 25vw 6svh calc(var(--work-inset) + 1.5vw); pointer-events: auto; touch-action: pan-y; }
.solvynth-system.is-ready .work-drawing { pointer-events: none; }
.solvynth-system:focus-visible { outline: 1px solid #868686; outline-offset: -10px; border-radius: 12px; }
/* ACES reads as one name, with its material and copy on a shared baseline. */
.work-aces { min-height: 100svh; }
.work-aces .work-name { left: calc(var(--work-inset) - .035em); top: 13svh; font-size: min(11.8vw,19svh,196px); white-space: nowrap; }
.work-aces .work-study { inset: 28svh 0 19svh 22vw; }
.work-aces .work-role { left: var(--work-inset); bottom: 10svh; width: 290px; }
.work-aces .work-description { right: var(--work-inset); bottom: 10svh; width: 355px; }
.work-ribbon-lines { transform-origin: 50% 50%; }
.work-drawing path { vector-effect: non-scaling-stroke; }
@media(min-width:1000px) and (max-height:800px) {
  .work-gallery { --entrance-top: 8svh; --entrance-size: 42px; }
  .work-description { font-size: 18px; }
  .work-solvynth .work-role,.work-solvynth .work-description { width: 270px; }
}
@media(max-width:999px),(max-height:719px),(max-aspect-ratio:1.3/1) {
  .work-entrance { position: relative; left: auto; top: auto; padding: 72px var(--work-inset) 20px; }
  .work-entrance h2 { font-size: clamp(36px,6.7vw,60px); }
  .work-composition,.work-solvynth,.work-aces { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr); padding: 70px var(--work-inset) 100px; }
  .work-composition .work-name { position: relative; inset: auto; grid-row: 1; font-size: clamp(64px,16vw,118px); text-align: left; }
  .work-name-detail { font-size: clamp(25px,4vw,36px); margin-top: .3em; }
  .work-composition .work-role { position: relative; inset: auto; grid-row: 2; width: auto; margin-top: 28px; font-size: 15px; text-align: left; }
  .work-role .work-status { margin-top: 8px; }
  .work-composition .work-study { position: relative; inset: auto; grid-row: 3; width: 100%; height: clamp(300px,54vw,520px); margin: 20px 0 24px; }
  .work-orrery .orrery-figure { height: clamp(380px,65vw,620px); margin-top: 0; margin-bottom: 8px; }
  .orrery-guidance { right: 5%; bottom: 0; }
  .work-composition .work-description { position: relative; inset: auto; grid-row: 4; width: auto; max-width: 34ch; font-size: 19px; margin-top: 12px; }
  .work-solvynth .work-name { text-align: left; font-size: clamp(62px,14.8vw,112px); }
  .work-solvynth .work-role { grid-row: 3; justify-self: start; text-align: left; margin-top: 12px; }
  .work-solvynth .work-description { justify-self: start; text-align: left; }
  .work-solvynth .solvynth-system { grid-row: 2; height: clamp(290px,48vw,480px); width: 100%; left: 2vw; margin: 80px 0 16px; }
  .work-aces .work-name { font-size: clamp(58px,13vw,105px); }
  .work-aces .work-study { height: clamp(280px,50vw,460px); width: calc(100% + 8vw); margin-left: -4vw; }
}
@media(max-width:760px) {
  .continuous-room .intro-visual { mask-image: linear-gradient(0deg,transparent,#000 15%); }
  .continuous-room .intro-camera { mask-image: url('/assets/motion/introduction-matte-mobile.png'); mask-position: center 22%; }
  .room-backdrop { background: radial-gradient(ellipse 80% 42% at 50% 24%,#151515 0%,#0c0c0c 50%,#060606 100%); }
  .continuous-room .intro-visual::after { display: none; }
  .intro-world { height: auto; min-height: 0; }
}
@media(max-width:600px) {
  .work-gallery { --work-inset: 6vw; }
  .work-entrance { padding-top: 64px; padding-bottom: 12px; }
  .work-entrance h2 { font-size: clamp(34px,9.5vw,47px); }
  .work-composition { padding-top: 62px; padding-bottom: 78px; }
  .work-composition .work-name { font-size: clamp(66px,20vw,112px); }
  .work-composition.work-solvynth .work-name { font-size: clamp(56px,17.2vw,94px); }
  .work-name-detail { font-size: 27px; }
  .work-composition .work-role { margin-top: 23px; font-size: 14px; line-height: 1.6; }
  .work-composition .work-study { height: 300px; width: calc(100% + 4vw); margin-left: -2vw; margin-top: 10px; margin-bottom: 14px; }
  .work-orrery .orrery-figure { height: 420px; width: calc(100% + 8vw); margin-left: -4vw; margin-top: 0; margin-bottom: 0; }
  .work-composition .work-description { font-size: 18px; max-width: 29ch; line-height: 1.5; margin-top: 12px; }
  .work-aces .work-name { font-size: clamp(50px,15vw,84px); letter-spacing: -.055em; }
  .work-aces .work-study { height: 250px; width: calc(100% + 10vw); margin-left: -5vw; }
  .work-solvynth .solvynth-system { height: clamp(230px,70vw,330px); width: 100%; left: 2vw; margin: 72px 0 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .work-study { transform: none; }
  .room-passage { display: none; }
  .work-study canvas,.work-sculpture .work-drawing { transition: none; }
}

.aces-mechanism { pointer-events: auto; touch-action: pan-y; }
.aces-mechanism:focus-visible { outline: 1px solid #777; outline-offset: -8px; }
.aces-mechanism.is-ready .work-drawing { pointer-events: none; }