/* Camera-led museum sequence: gallery -> vitrine -> overhead folio -> vector reconstruction. */
.museum-journey {
  --museum-p: 0;
  --approach: 0;
  --overhead: 0;
  --inspect: 0;
  --folio-in: 0;
  --trace: 0;
  --outline: 0;
  --vectorize: 0;
  --match: 0;
  --match-away: 1;
  --resolve: 0;
  --museum-x: 50%;
  --museum-y: 38%;
  --camera-x: 0px;
  --camera-y: 0px;
  position: relative;
  height: 560vh;
  overflow: clip;
  color: #f3ead7;
  background: #050604;
  isolation: isolate;
}

.museum-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: #070806;
}

.museum-scene,
.museum-interface,
.museum-camera {
  position: absolute;
  inset: 0;
}

.museum-scene {
  perspective: 1500px;
  transform-style: preserve-3d;
}

.museum-camera {
  overflow: hidden;
  transform-origin: 50% 47%;
  transform: scale(calc(1 + var(--approach) * .72)) translate3d(0, calc(var(--approach) * 5vh), 0);
  opacity: clamp(0, calc(1.08 - var(--inspect) * 1.22), 1);
  filter: saturate(calc(.72 - var(--approach) * .08)) brightness(calc(.78 - var(--approach) * .18));
  will-change: transform, opacity, filter;
}

.museum-gallery {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  transform: translate3d(var(--camera-x), var(--camera-y), 0);
}

.museum-room-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, transparent 0 15%, rgba(2, 3, 2, .14) 33%, rgba(2, 3, 2, .72) 82%),
    linear-gradient(90deg, rgba(2, 3, 2, .64), transparent 26% 74%, rgba(2, 3, 2, .64));
  opacity: calc(.42 + var(--approach) * .24);
}

.museum-floor-lines {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -16%;
  height: 58%;
  background: repeating-linear-gradient(90deg, transparent 0 11.8%, rgba(220, 194, 128, .13) 12%, transparent 12.2% 24%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  opacity: calc((1 - var(--approach)) * .45);
}

.museum-case-glass {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 31vw;
  height: 17vw;
  min-width: 340px;
  min-height: 190px;
  border: 1px solid rgba(221, 199, 139, .36);
  background: linear-gradient(112deg, transparent 28%, rgba(255, 247, 214, .17) 45%, transparent 59%);
  box-shadow: inset 0 0 50px rgba(210, 180, 111, .07), 0 18px 60px #0008;
  transform: translate(-50%, -50%) scale(calc(1 + var(--approach) * 2.28));
  opacity: clamp(0, calc(1.16 - var(--overhead) * 1.22), 1);
  will-change: transform, opacity;
}

.museum-case-glass::after {
  content: '';
  position: absolute;
  inset: -22%;
  background: radial-gradient(circle 190px at var(--museum-x) var(--museum-y), rgba(255, 236, 184, .16), transparent 72%);
  mix-blend-mode: screen;
}

.museum-folio {
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(91vw, 1320px);
  aspect-ratio: 1200 / 861;
  margin: 0;
  overflow: hidden;
  background: #d9c896;
  box-shadow: 0 34px 120px #000d;
  transform-origin: 50% 50%;
  transform:
    translate3d(-50%, calc(-50% + (1 - var(--overhead)) * 11vh), 80px)
    rotateX(calc((1 - var(--overhead)) * 67deg))
    rotateZ(calc((1 - var(--overhead)) * -1.3deg))
    scale(calc(.16 + var(--overhead) * .28 + var(--inspect) * .67));
  opacity: clamp(0, calc(var(--folio-in) - var(--resolve) * .72), 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.museum-folio > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    sepia(.08)
    saturate(calc(.82 - var(--trace) * .2))
    contrast(calc(1.04 + var(--trace) * .12))
    brightness(calc(1 - var(--trace) * .34));
}

.folio-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(116deg, transparent 22%, rgba(255, 255, 244, .18) 43%, transparent 58%);
  opacity: clamp(0, calc(1.1 - var(--inspect) * 2), .7);
  mix-blend-mode: screen;
}

.folio-analysis-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(8, 12, 10, .08) 0 30%, rgba(5, 8, 7, .5) 82%),
    linear-gradient(180deg, rgba(5, 7, 6, .14), rgba(4, 6, 5, .56));
  opacity: clamp(0, calc((var(--trace) - .04) * 1.45), .72);
  pointer-events: none;
}

.folio-sample-field {
  position: absolute;
  z-index: 3;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 236, 174, .72) 0 1px, transparent 1.25px);
  background-size: 32px 32px;
  opacity: clamp(0, calc((var(--trace) - .08) * 1.4), .24);
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(10% + var(--trace) * 78% - 11%),
    #000 calc(10% + var(--trace) * 78% - 4%),
    transparent calc(10% + var(--trace) * 78% + 9%)
  );
  pointer-events: none;
}

.folio-scan-line {
  position: absolute;
  z-index: 5;
  left: 4%;
  right: 4%;
  top: calc(10% + var(--trace) * 78%);
  height: 2px;
  background: linear-gradient(90deg, transparent, #d5a93f 8%, #fff8d3 50%, #d5a93f 92%, transparent);
  box-shadow:
    0 0 6px 1px rgba(255, 246, 210, .9),
    0 0 26px 6px rgba(224, 183, 77, .55),
    0 0 70px 18px rgba(209, 163, 53, .18);
  opacity: clamp(0, calc(var(--trace) * 5), calc(1 - var(--match) * 1.24 - var(--resolve)));
}

.folio-scan-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 120px;
  background: linear-gradient(180deg, rgba(255, 240, 185, .2), rgba(218, 174, 65, .07) 34%, transparent 100%);
  filter: blur(8px);
  transform: translateY(100%);
}

.folio-scan-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 12px;
  background: radial-gradient(ellipse, rgba(255, 252, 224, .92), rgba(235, 194, 91, .24) 48%, transparent 74%);
  filter: blur(4px);
  transform: translate(-50%, -50%);
}

.folio-vector {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: clamp(0, calc((var(--outline) - .04) * 4.2), calc(1.12 - var(--match) * .92 - var(--resolve) * 1.5));
  clip-path: inset(0 0 calc((1 - var(--trace)) * 92%) 0);
  filter: drop-shadow(0 0 7px rgba(242, 210, 122, .24));
}

.folio-vector path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vector-guides path {
  stroke: rgba(237, 211, 143, .42);
  stroke-width: 1;
  stroke-dasharray: 7 6;
}

.vector-contours path {
  stroke: #ffe6a2;
  stroke-width: 1.7;
  filter:
    drop-shadow(0 0 2px rgba(255, 250, 221, .95))
    drop-shadow(0 0 9px rgba(224, 177, 62, .88))
    drop-shadow(0 0 22px rgba(208, 151, 29, .36));
}

.vector-selections { fill: rgba(227, 186, 78, .035); stroke: rgba(255, 223, 133, .7); stroke-width: 1; stroke-dasharray: 8 7; opacity: clamp(0, calc(var(--outline) * 3), calc(1 - var(--vectorize) * 1.4)); }
.vector-selections path { stroke-dasharray: none; }
.vector-handles { fill: #0a0c0b; stroke: rgba(255, 229, 154, .88); stroke-width: 1; opacity: clamp(0, calc((var(--outline) - .28) * 4), calc(1 - var(--vectorize) * 1.25)); }
.vector-handles path { stroke-dasharray: 4 4; }
.vector-clean-shapes { fill: rgba(240, 190, 67, .23); stroke: #ffe9aa; stroke-width: 1.35; opacity: clamp(0, calc((var(--vectorize) - .06) * 2.8), 1); filter: drop-shadow(0 0 4px rgba(255, 229, 151, .8)) drop-shadow(0 0 20px rgba(214, 155, 31, .32)); }
.vector-clean-shapes path { vector-effect: non-scaling-stroke; }

.vector-points {
  fill: #fff4c8;
  stroke: rgba(224, 176, 60, .8);
  stroke-width: 1.5;
  opacity: clamp(0, calc((var(--outline) - .25) * 4), calc(1 - var(--vectorize) * 1.2));
  filter: drop-shadow(0 0 6px rgba(255, 226, 142, .95));
}

.vector-workbench {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  top: 0;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 14px;
  border-bottom: 1px solid rgba(232, 203, 130, .25);
  color: rgba(246, 231, 196, .64);
  background: rgba(5, 8, 7, .88);
  backdrop-filter: blur(10px);
  font: 700 7px/1 var(--sans);
  letter-spacing: .12em;
  opacity: clamp(0, calc((var(--trace) - .04) * 5), calc(1 - var(--resolve) * 1.5));
}
.workbench-file { margin-right: auto; }
.workbench-mode { padding: 8px 10px; border-left: 1px solid rgba(232, 203, 130, .14); color: rgba(246, 231, 196, .38); }
.mode-reference { color: rgba(246, 231, 196, calc(.9 - var(--outline) * .7)); }
.mode-outline { color: rgba(255, 225, 145, calc(.35 + var(--outline) * .65 - var(--vectorize) * .55)); background: rgba(214, 162, 44, calc(var(--outline) * .09)); }
.mode-result { color: rgba(255, 231, 166, calc(.28 + var(--vectorize) * .72)); background: rgba(214, 162, 44, calc(var(--vectorize) * .12)); }
.mode-match { color: rgba(255, 235, 178, calc(.2 + var(--match) * .8)); background: rgba(214, 162, 44, calc(var(--match) * .16)); }
.workbench-zoom { margin-left: 12px; color: #d7b760; }

.vector-detail {
  position: absolute;
  z-index: 6;
  top: 8%;
  right: 4%;
  width: 34%;
  aspect-ratio: 420 / 250;
  overflow: hidden;
  border: 1px solid rgba(242, 211, 129, .55);
  background-color: #191711;
  background-image: linear-gradient(rgba(4, 7, 6, .36), rgba(4, 7, 6, .58)), url('assets/met-kufic-folio-30-45.jpg');
  background-size: 330%;
  background-position: 54% 34%;
  box-shadow: 0 20px 55px #000b, 0 0 35px rgba(216, 167, 50, .12);
  opacity: clamp(0, calc((var(--outline) - .08) * 4), calc(1.08 - var(--match) * 1.25 - var(--resolve) * 2));
  transform: translateY(calc((1 - var(--outline)) * 18px)) scale(calc(.96 + var(--outline) * .04));
  transform-origin: top right;
}
.vector-detail-head { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: #d9c58f; background: rgba(5, 8, 7, .92); font: 700 7px/1 var(--sans); letter-spacing: .12em; }
.vector-detail-head b { color: #f0cb68; }
.vector-detail svg { position: absolute; inset: 28px 0 22px; width: 100%; height: calc(100% - 50px); filter: drop-shadow(0 0 8px rgba(229, 176, 45, .35)); }
.detail-reference { fill: none; stroke: rgba(255, 249, 223, .35); stroke-width: 16; }
.detail-outline { fill: rgba(223, 173, 48, calc(var(--vectorize) * .3)); stroke: #ffdfa0; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--outline)); }
.detail-handles { fill: #0a0c0b; stroke: #ffe7a6; stroke-width: 1.25; opacity: clamp(0, calc((var(--outline) - .24) * 5), calc(1 - var(--vectorize) * 1.15)); }
.detail-handles path { fill: none; stroke-dasharray: 5 4; }
.vector-cursor { position: absolute; left: calc(29% + var(--outline) * 26%); top: calc(32% + var(--outline) * 18%); width: 13px; height: 13px; border: 1px solid #fff0ba; background: #b98522; transform: rotate(45deg); box-shadow: 0 0 12px #e5b447; opacity: clamp(0, calc(var(--outline) * 4), calc(1 - var(--vectorize) * 1.6)); }
.vector-detail p { position: absolute; left: 10px; right: 10px; bottom: 7px; display: flex; justify-content: space-between; margin: 0; color: rgba(246, 231, 196, .62); font: 700 7px/1 var(--sans); letter-spacing: .11em; }
.vector-detail p b { color: #f0ca64; }

.glyph-match-layer {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  opacity: clamp(0, calc(var(--match) * 4), calc((1 - var(--resolve)) * 1.25));
}

.glyph-match {
  --local: clamp(0, calc((var(--match) - var(--delay)) * 6), 1);
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #ffe7a5;
  opacity: var(--local);
  transform:
    translate3d(calc(var(--match-away) * var(--dx)), calc(var(--match-away) * var(--dy)), 0)
    rotate(calc(var(--match-away) * var(--turn)))
    scale(calc(.78 + var(--local) * .22));
  will-change: transform, opacity;
}

.glyph-match::before,
.glyph-match::after {
  content: '';
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(255, 227, 153, calc((1 - var(--match)) * .88));
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(224, 173, 46, calc((1 - var(--match)) * .28));
}

.glyph-match::after {
  inset: 48% 0 auto;
  height: 1px;
  border: 0;
  border-top: 1px dashed rgba(255, 231, 166, calc((1 - var(--match)) * .74));
  border-radius: 0;
  box-shadow: none;
}

.glyph-match b {
  display: block;
  color: rgba(255, 228, 153, calc(.66 + var(--match) * .34));
  font: 400 clamp(42px, 6.2vw, 92px)/1 KufiLegacy, serif;
  text-shadow:
    0 0 3px rgba(255, 249, 220, .96),
    0 0 15px rgba(234, 187, 69, .9),
    0 0 46px rgba(209, 148, 26, .52);
  filter: brightness(calc(1.34 - var(--match) * .24));
}

.glyph-match i {
  position: absolute;
  left: 50%;
  top: 100%;
  width: max-content;
  padding: 5px 7px;
  color: rgba(255, 237, 190, calc((1 - var(--match)) * .9));
  background: rgba(5, 8, 7, calc((1 - var(--match)) * .74));
  font: normal 700 7px/1 var(--sans);
  letter-spacing: .12em;
  transform: translateX(-50%);
}

.match-waw { left: 55%; top: 76%; }
.match-ha { left: 30%; top: 56%; }
.match-ha-join { left: 52%; top: 46%; }
.match-lam { left: 81%; top: 12%; }

.glyph-match-caption {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  width: max-content;
  padding: 7px 10px;
  border: 1px solid rgba(255, 224, 142, calc((1 - var(--match)) * .5));
  color: rgba(255, 236, 184, calc((1 - var(--match)) * .86));
  background: rgba(6, 9, 7, calc((1 - var(--match)) * .76));
  font: 700 7px/1 var(--sans);
  letter-spacing: .16em;
  transform: translateX(-50%);
}

.vector-note {
  position: absolute;
  z-index: 5;
  padding: 5px 7px;
  border: 1px solid rgba(235, 205, 126, .34);
  color: #f3dfaa;
  background: rgba(10, 12, 10, .72);
  box-shadow: 0 0 18px rgba(221, 174, 54, .12);
  font: 700 8px/1 var(--sans);
  letter-spacing: .13em;
  opacity: clamp(0, calc((var(--outline) - .52) * 5), calc(1.12 - var(--match) * 1.18 - var(--resolve) * 1.4));
  transform: none;
}

.note-baseline { left: 42%; top: 38%; }
.note-terminal { right: 13%; top: 33%; }
.note-join { left: 57%; bottom: 18%; }

.museum-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(210, 174, 89, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210, 174, 89, .12) 1px, transparent 1px);
  background-size: 6vw 6vw;
  opacity: clamp(0, calc((var(--trace) - .12) * 1.35), calc((1 - var(--resolve)) * .3));
  mask-image: radial-gradient(circle at center, #000, transparent 75%);
}

.museum-type-reveal {
  position: absolute;
  z-index: 3;
  left: auto;
  right: max(4vw, calc((100vw - 1520px) / 2));
  top: 25%;
  width: min(48vw, 850px);
  color: #e1bd66;
  text-align: right;
  opacity: clamp(0, calc(var(--resolve) * 2.2), 1);
  transform: translateY(-50%) scale(calc(.94 + var(--resolve) * .06));
  transform-origin: right center;
  text-shadow: 0 16px 55px #000;
  filter: drop-shadow(0 0 22px rgba(210, 159, 39, calc(var(--resolve) * .18)));
}

.museum-type-reveal b {
  position: relative;
  z-index: 1;
  display: block;
  font: clamp(48px, 6vw, 100px)/1.12 KufiLegacy, serif;
  font-weight: 400;
  letter-spacing: .02em;
}

.museum-type-reveal small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 14px;
  font: 700 9px/1 var(--sans);
  letter-spacing: .18em;
  color: rgba(232, 203, 128, .82);
}

.type-guide {
  position: absolute;
  right: 0;
  bottom: 33px;
  display: block;
  width: 112%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 190, 102, .52) 18% 100%);
}

.museum-camera-reticle {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: min(88vw, 1300px);
  height: min(70vh, 760px);
  border: 1px solid rgba(223, 195, 124, .24);
  transform: translate(-50%, -50%);
  opacity: clamp(0, calc(var(--overhead) - var(--trace) * 1.8), .72);
}

.museum-camera-reticle::before,
.museum-camera-reticle::after {
  content: '';
  position: absolute;
  background: rgba(223, 195, 124, .34);
}

.museum-camera-reticle::before { left: 50%; top: -18px; width: 1px; height: 36px; }
.museum-camera-reticle::after { top: 50%; left: -18px; width: 36px; height: 1px; }
.museum-camera-reticle span { position: absolute; right: 0; top: -22px; color: #c7ad70; font: 700 8px/1 var(--sans); letter-spacing: .15em; }

.museum-interface { z-index: 6; pointer-events: none; }
.museum-index { position: absolute; left: max(28px, 4vw); top: 116px; margin: 0; color: #d8bf80; font: 600 9px/1 var(--sans); letter-spacing: .18em; }
.museum-progress { position: absolute; right: 4vw; top: 50%; display: grid; justify-items: center; gap: 10px; transform: translateY(-50%); color: #a89468; font: 8px/1 var(--sans); letter-spacing: .1em; }
.museum-progress::before { content: ''; width: 1px; height: 150px; background: rgba(216, 191, 128, .22); }
.museum-progress i { position: absolute; top: 0; width: 1px; height: 150px; background: #d8b963; transform-origin: top; transform: scaleY(var(--museum-p)); }

.museum-copy { position: absolute; left: max(28px, calc((100vw - 1360px) / 2)); right: 14vw; bottom: 8vh; max-width: 900px; min-height: 330px; }
.museum-copy::before { content: ''; position: absolute; z-index: -1; left: -7vw; right: 0; bottom: -7vh; height: 50vh; min-height: 440px; background: radial-gradient(ellipse at 22% 80%, rgba(3, 4, 3, .96) 0, rgba(3, 4, 3, .8) 35%, rgba(3, 4, 3, .27) 67%, transparent 83%); filter: blur(10px); pointer-events: none; }
.museum-beat { position: absolute; left: 0; bottom: 0; width: min(840px, 70vw); opacity: 0; transform: translateY(30px); transition: opacity .4s ease, transform .62s cubic-bezier(.2, .75, .2, 1); pointer-events: none; }
.museum-beat.is-active { opacity: 1; transform: none; pointer-events: auto; }
.museum-beat h2 { margin: 12px 0 20px; font: clamp(50px, 5.8vw, 92px)/.94 var(--display); letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 10px 38px #000d; }
.museum-beat h2 em { color: #d9b75e; font-weight: 400; }
.museum-beat > p:last-of-type { max-width: 58ch; margin: 0; color: rgba(245, 236, 216, .8); font-size: clamp(14px, 1.25vw, 18px); line-height: 1.72; text-shadow: 0 4px 16px #000; }
.museum-final { width: min(630px, 44vw); }
.museum-final h2 { font-size: clamp(48px, 5vw, 82px); }
.museum-final .actions { display: flex; gap: 12px; margin-top: 28px; pointer-events: auto; }
.museum-button { color: #15150f; background: #d0ad55; border-color: #d0ad55; }
.museum-text-button { color: #f5ead0; border-color: rgba(235, 215, 164, .44); }
.museum-credit { position: absolute; right: 4vw; bottom: 28px; max-width: 410px; color: rgba(239, 225, 192, .58); font: 8px/1.5 var(--sans); letter-spacing: .08em; text-align: right; text-decoration: none; pointer-events: auto; }
.museum-credit:hover,
.museum-credit:focus-visible { color: #ecd69e; }
.museum-scroll-cue { position: absolute; right: 4vw; top: 116px; display: flex; align-items: center; gap: 10px; margin: 0; color: #bda774; font: 8px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: clamp(0, calc(1 - var(--approach) * 6), 1); }
.museum-scroll-cue span { width: 28px; height: 28px; border: 1px solid #b99a4f; border-radius: 50%; animation: museumPulse 2.4s ease-in-out infinite; }
@keyframes museumPulse { 50% { transform: scale(.78); opacity: .5; } }

@media (min-width: 901px) and (max-width: 1200px) {
  .museum-type-reveal { top: 22%; width: 46vw; }
  .museum-type-reveal b { font-size: clamp(46px, 5.7vw, 68px); }
  .museum-type-reveal small { font-size: 7px; }
  .museum-final { width: min(560px, 44vw); }
  .museum-final h2 { font-size: clamp(46px, 5.2vw, 62px); }
}

@media (max-width: 900px) {
  .museum-journey { height: 520svh; background: #070806; }
  .museum-sticky { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0; overflow: hidden; }
  .museum-scene,
  .museum-interface { position: absolute; inset: 0; }
  .museum-camera {
    transform: scale(calc(1 + var(--approach) * .86)) translate3d(0, calc(var(--approach) * 4svh), 0);
    opacity: clamp(0, calc(1.08 - var(--inspect) * 1.22), 1);
    filter: saturate(calc(.68 - var(--approach) * .06)) brightness(calc(.72 - var(--approach) * .19));
  }
  .museum-gallery { inset: -6%; width: 112%; height: 112%; transform: translate3d(var(--camera-x), var(--camera-y), 0); }
  .museum-room-shade { background: radial-gradient(circle at 50% 44%, transparent 0 9%, rgba(2, 3, 2, .18) 34%, rgba(2, 3, 2, .78) 84%), linear-gradient(0deg, rgba(3, 4, 3, .78), transparent 56%); }
  .museum-floor-lines { left: -8%; right: -8%; bottom: -10%; height: 52%; }
  .museum-case-glass { width: 54vw; height: 31vw; min-width: 0; min-height: 0; }
  .museum-folio { top: 45%; width: 96vw; }
  .museum-camera-reticle { width: 90vw; height: 58svh; }
  .museum-grid { background-size: 14vw 14vw; }
  .vector-workbench { height: 28px; padding-inline: 8px; }
  .workbench-mode { display: none; }
  .mode-outline,
  .mode-result { display: block; padding: 7px 8px; }
  .workbench-file { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workbench-zoom { margin-left: 5px; }
  .vector-detail { display: none; }
  .vector-note { font-size: 6px; }
  .note-terminal { right: 5%; }
  .glyph-match { width: 17%; }
  .glyph-match b { font-size: clamp(34px, 12vw, 56px); }
  .glyph-match i { display: none; }
  .glyph-match-caption { bottom: 2%; max-width: 86%; width: max-content; font-size: 6px; text-align: center; white-space: normal; }
  .museum-type-reveal { left: 22px; right: 22px; top: 22%; width: auto; text-align: center; transform-origin: center; }
  .museum-type-reveal b { font-size: clamp(40px, 13vw, 66px); }
  .museum-type-reveal small { font-size: 6px; line-height: 1.6; }
  .type-guide { right: 0; width: 100%; bottom: 27px; }
  .museum-interface { display: block; }
  .museum-index { left: 20px; top: max(86px, calc(env(safe-area-inset-top) + 74px)); font-size: 7px; }
  .museum-progress { display: flex; right: 20px; top: max(88px, calc(env(safe-area-inset-top) + 76px)); align-items: center; gap: 7px; transform: none; }
  .museum-progress::before { width: 82px; height: 1px; }
  .museum-progress i { left: 0; top: 0; width: 82px; height: 1px; transform-origin: left; transform: scaleX(var(--museum-p)); }
  .museum-copy { left: 20px; right: 20px; bottom: max(24px, env(safe-area-inset-bottom)); min-height: 268px; }
  .museum-copy::before { left: -32px; right: -32px; bottom: -40px; height: 54svh; min-height: 0; background: linear-gradient(0deg, rgba(3,4,3,.98) 4%, rgba(3,4,3,.82) 46%, transparent 100%); filter: none; }
  .museum-beat { width: 100%; transform: translateY(22px); }
  .museum-beat h2 { margin: 8px 0 12px; font-size: clamp(36px, 10.4vw, 52px); line-height: .94; }
  .museum-beat > p:last-of-type { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .museum-final { width: 100%; }
  .museum-final h2 { font-size: clamp(34px, 9.8vw, 48px); }
  .museum-final .actions { margin-top: 15px; gap: 8px; }
  .museum-final .button { min-height: 46px; padding: 12px 14px; }
  .museum-credit { right: 20px; bottom: 10px; max-width: 72vw; font-size: 6px; opacity: clamp(0, calc(var(--resolve) * 2), .66); }
  .museum-scroll-cue { right: 20px; top: auto; bottom: 24px; max-width: 120px; font-size: 6px; text-align: right; }
  .museum-scroll-cue span { flex: 0 0 24px; width: 24px; height: 24px; }
}

@media (max-width: 520px) {
  .museum-journey { height: 540svh; }
  .museum-folio { width: 104vw; top: 43%; }
  .museum-camera-reticle { height: 52svh; }
  .vector-note { display: none; }
  .museum-copy { min-height: 252px; }
  .museum-beat h2 { font-size: clamp(34px, 10vw, 43px); }
}

@media (prefers-reduced-motion: reduce) {
  .museum-journey { height: auto; }
  .museum-sticky { position: relative; height: auto; min-height: 0; padding: 100px 24px 70px; }
  .museum-scene { position: relative; height: 70svh; min-height: 540px; overflow: hidden; }
  .museum-camera { transform: none; opacity: .7; filter: saturate(.65) brightness(.58); }
  .museum-gallery { inset: 0; width: 100%; height: 100%; transform: none; }
  .museum-folio { width: min(90vw, 900px); transform: translate3d(-50%, -50%, 0) scale(.72); opacity: .9; }
  .folio-vector { opacity: 1; clip-path: none; }
  .vector-points,
  .vector-note { opacity: 1; transform: none; }
  .museum-grid,
  .museum-type-reveal,
  .glyph-match-layer,
  .museum-camera-reticle,
  .vector-workbench,
  .vector-detail,
  .museum-progress,
  .museum-scroll-cue { display: none; }
  .museum-interface { position: relative; }
  .museum-index,
  .museum-copy,
  .museum-credit { position: static; }
  .museum-index { margin: 34px 0; }
  .museum-copy { min-height: 0; }
  .museum-copy::before { display: none; }
  .museum-beat { position: relative; width: 100%; padding: 30px 0; opacity: 1; transform: none; border-top: 1px solid rgba(214, 183, 106, .22); }
  .museum-scroll-cue span { animation: none; }
}