:root {
  color-scheme: dark;
  --ink: #f7f3eb;
  --muted: rgba(232, 229, 221, .68);
  --muted-strong: rgba(244, 239, 228, .82);
  --gold: #f2c86f;
  --gold-soft: rgba(242, 200, 111, .22);
  --deep: #05070a;
  --deep-blue: #09111d;
  --panel: rgba(17, 21, 29, .68);
  --line: rgba(255, 255, 255, .11);
  --serif: Georgia, "Times New Roman", serif;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--deep); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: radial-gradient(circle at 50% -10%, #17253b 0, #09101b 36%, #05070a 68%); color: var(--ink); }
body.lightbox-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
[hidden] { display: none !important; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 19, 34, .08), rgba(5, 7, 10, .92) 69%, #05070a);
}

.first-light { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; background: #020306; animation: firstLightExit 2.25s cubic-bezier(.7,0,.2,1) forwards; }
.first-light-horizon { position: absolute; left: 50%; top: 55%; width: 110vw; height: 28vh; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(233,188,92,.18), transparent 66%); filter: blur(35px); opacity: 0; animation: firstLightGlow 1.65s .12s ease-out forwards; }
.first-light-beam { position: absolute; top: 50%; left: 50%; width: 135vw; height: 25vh; transform: translate(-50%,-50%) rotate(-10deg) translateX(-72vw); transform-origin: center; background: linear-gradient(90deg, transparent 0, rgba(255,236,182,.04) 25%, rgba(255,225,146,.32) 62%, transparent 100%); clip-path: polygon(0 42%,100% 0,100% 100%,0 58%); filter: blur(7px); animation: firstLightSweep 1.55s .08s cubic-bezier(.2,.7,.2,1) forwards; }
.first-light-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: var(--serif); font-size: 23px; color: var(--gold); letter-spacing: .15em; opacity: 0; animation: firstLightMark 1.2s .45s ease forwards; }
@keyframes firstLightSweep { to { transform: translate(-50%,-50%) rotate(-10deg) translateX(74vw); } }
@keyframes firstLightGlow { 35% { opacity: 1; } 100% { opacity: .15; } }
@keyframes firstLightMark { 35%,70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes firstLightExit { 0%,72% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

.landing-atmosphere { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
.landing-horizon { position: absolute; left: 50%; bottom: -17vh; width: 135vw; height: 47vh; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, var(--horizon-color, rgba(29,72,113,.22)), transparent 68%); filter: blur(44px); transition: background 1.5s ease; }
.landing-haze { position: absolute; width: 48vw; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .14; }
.haze-a { left: -20vw; top: 20vh; background: #24578c; }
.haze-b { right: -24vw; top: 42vh; background: #b37a38; opacity: .08; }
body.atmosphere-dawn { --horizon-color: rgba(193,108,75,.3); }
body.atmosphere-day { --horizon-color: rgba(72,132,180,.27); }
body.atmosphere-sunset { --horizon-color: rgba(195,103,56,.3); }
body.atmosphere-night { --horizon-color: rgba(29,72,113,.22); }

.landing-sky { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; opacity: .95; }
.landing-sky::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.3px); background-size: 83px 83px; opacity: .17; }
.landing-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: white; box-shadow: 0 0 12px 2px rgba(255,244,200,.55); animation: twinkle 5s ease-in-out infinite; }
.star-a { left: 10%; top: 13%; }.star-b { left: 28%; top: 7%; animation-delay: -2s; }.star-c { right: 18%; top: 17%; animation-delay: -3.4s; }.star-d { right: 7%; top: 39%; animation-delay: -1.4s; }.star-e { left: 17%; top: 49%; animation-delay: -.8s; }.star-f { right: 34%; top: 5%; animation-delay: -4.1s; }.star-g { left: 42%; top: 30%; animation-delay: -1.9s; }.star-h { right: 45%; top: 62%; animation-delay: -3s; }
@keyframes twinkle { 50% { opacity: .25; transform: scale(.7); } }

.ambient-toggle { position: fixed; z-index: 30; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(7,10,15,.48); backdrop-filter: blur(22px) saturate(1.25); box-shadow: 0 12px 40px rgba(0,0,0,.18); cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.ambient-toggle:hover { border-color: rgba(242,200,111,.42); transform: translateY(-1px); }
.ambient-toggle[aria-pressed="true"] { background: rgba(48,38,19,.55); border-color: rgba(242,200,111,.4); }
.ambient-label { font-size: 11px; font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }
.ambient-icon { display: flex; align-items: center; gap: 2px; height: 14px; }
.ambient-icon i { display: block; width: 2px; height: 5px; border-radius: 2px; background: var(--gold); }
.ambient-toggle[aria-pressed="true"] .ambient-icon i { animation: soundBar .8s ease-in-out infinite alternate; }
.ambient-toggle[aria-pressed="true"] .ambient-icon i:nth-child(2) { animation-delay: -.35s; }.ambient-toggle[aria-pressed="true"] .ambient-icon i:nth-child(3) { animation-delay: -.15s; }
@keyframes soundBar { to { height: 13px; } }

main { width: min(100%, 1600px); margin: 0 auto; }
.section-shell { padding: clamp(100px, 13vw, 210px) clamp(22px, 7vw, 112px); }
.section-heading { max-width: 970px; margin-bottom: clamp(60px, 8vw, 110px); }
.section-heading-centered { margin-inline: auto; text-align: center; }
.section-heading h2, .legacy-copy h2, .dedication-card h2 { margin: 0; font-size: clamp(44px, 6.7vw, 100px); line-height: .94; letter-spacing: -.062em; font-weight: 680; text-wrap: balance; }
.section-heading > p:last-child { max-width: 720px; margin: 28px 0 0; color: var(--muted); font-family: var(--serif); font-size: clamp(18px, 1.9vw, 27px); line-height: 1.65; }
.section-heading-centered > p:last-child { margin-inline: auto; }
.landing-eyebrow { margin: 0 0 20px; color: var(--gold); font-size: 12px; font-weight: 750; letter-spacing: .23em; text-transform: uppercase; }

.reveal-item { opacity: 0; transform: translateY(34px); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal-item.is-visible { opacity: 1; transform: none; }

.landing-hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); align-items: center; gap: clamp(28px, 6vw, 110px); padding: max(72px, env(safe-area-inset-top)) clamp(24px, 7vw, 110px) 72px; isolation: isolate; overflow: hidden; }
.landing-hero-photo { position: absolute; inset: 0; z-index: -4; background-position: center; background-size: cover; opacity: 0; transform: scale(1.045); filter: saturate(.74) contrast(1.04); transition: opacity 1.4s ease, transform 8s ease-out; }
.landing-hero-photo.has-photo { opacity: .28; transform: scale(1); }
.landing-hero-vignette { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(5,7,10,.95) 0%, rgba(5,7,10,.69) 45%, rgba(5,7,10,.43) 72%, rgba(5,7,10,.82) 100%), linear-gradient(180deg, rgba(5,7,10,.2), #05070a 98%); }
.landing-hero-copy { position: relative; z-index: 3; max-width: 760px; }
h1 { max-width: 850px; margin: 0; font-size: clamp(58px, 8.8vw, 142px); line-height: .88; letter-spacing: -.075em; font-weight: 720; text-wrap: balance; }
.landing-intro { max-width: 660px; margin: 34px 0 0; color: var(--muted-strong); font-size: clamp(18px, 2vw, 27px); line-height: 1.55; letter-spacing: -.018em; }

.landing-lighthouse { position: relative; width: min(100%, 520px); aspect-ratio: .78; justify-self: center; display: grid; place-items: center; padding: 0; border: 0; outline: 0; background: transparent; cursor: default; isolation: isolate; touch-action: manipulation; }
.landing-lighthouse svg { position: relative; z-index: 3; width: 72%; max-height: 82%; overflow: visible; filter: drop-shadow(0 35px 42px rgba(0,0,0,.55)); transition: transform .18s ease, filter .18s ease; }
.landing-lighthouse:active svg { transform: scale(.992); filter: drop-shadow(0 28px 36px rgba(0,0,0,.52)); }
.landing-rock { fill: #25272c; }.landing-tower-shadow { fill: rgba(38,34,33,.24); }.landing-gallery { fill: #2d3037; }.landing-railing,.landing-lantern-lines,.landing-finial { fill: none; stroke: #b8b0a5; stroke-width: 5; stroke-linecap: round; }.landing-roof { fill: #24262c; }.landing-window { fill: #d8a345; filter: drop-shadow(0 0 16px rgba(228,167,53,.85)); }.landing-door { fill: #343038; }
.landing-lighthouse-glow { position: absolute; z-index: 1; width: 45%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 198, 78, .26); filter: blur(48px); animation: glow 4.8s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .55; transform: scale(1.12); } }
.landing-beam { position: absolute; z-index: 0; top: 29%; height: 22%; width: 76%; opacity: .45; filter: blur(2px); background: linear-gradient(90deg, transparent 3%, rgba(255,228,148,.4) 60%, rgba(255,239,185,.06)); animation: beamPulse 5s ease-in-out infinite; }
.beam-left { right: 54%; clip-path: polygon(0 35%,100% 0,100% 100%,0 65%); transform-origin: right center; }.beam-right { left: 54%; transform: scaleX(-1); clip-path: polygon(0 35%,100% 0,100% 100%,0 65%); transform-origin: left center; animation-delay: -2.5s; }
@keyframes beamPulse { 50% { opacity: .25; } }
.landing-scroll-cue { position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); width: 1px; height: 64px; overflow: hidden; background: rgba(255,255,255,.12); }
.landing-scroll-cue span { display: block; width: 100%; height: 35%; background: var(--gold); animation: scrollCue 2.1s ease-in-out infinite; }
@keyframes scrollCue { from { transform: translateY(-110%); } to { transform: translateY(290%); } }

.landing-story { padding: clamp(100px, 14vw, 220px) clamp(24px, 8vw, 130px); display: grid; gap: clamp(90px, 15vw, 210px); }
.landing-chapter { position: relative; display: grid; grid-template-columns: minmax(52px, .22fr) minmax(0, 1fr); gap: clamp(22px, 5vw, 80px); width: min(100%, 980px); }
.landing-chapter::after { content: ""; position: absolute; left: 0; bottom: -48px; width: 34%; height: 1px; background: linear-gradient(90deg, rgba(242,200,111,.42), transparent); }
.landing-chapter-offset { justify-self: end; }.landing-chapter-number { margin: 4px 0 0; color: rgba(242,200,111,.5); font-family: var(--serif); font-size: 17px; font-style: italic; }
.landing-chapter h2 { margin: 0 0 22px; font-size: clamp(37px, 5.3vw, 80px); line-height: .98; letter-spacing: -.055em; font-weight: 650; }
.landing-chapter div > p { max-width: 790px; margin: 0; color: var(--muted); font-family: var(--serif); font-size: clamp(19px, 2.1vw, 28px); line-height: 1.72; }

.making-section { position: relative; }
.making-section::before { content: ""; position: absolute; left: 50%; top: 9%; bottom: 7%; width: 1px; background: linear-gradient(transparent, rgba(242,200,111,.2) 12%, rgba(242,200,111,.2) 88%, transparent); }
.making-timeline { display: grid; gap: clamp(68px, 9vw, 130px); }
.making-step { position: relative; display: grid; grid-template-columns: minmax(280px,.9fr) minmax(300px,1fr); align-items: center; gap: clamp(32px,7vw,110px); }
.making-step::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border: 1px solid var(--gold); border-radius: 50%; background: var(--deep); transform: translate(-50%,-50%); box-shadow: 0 0 0 8px rgba(242,200,111,.05); }
.making-step-reverse .making-visual { order: 2; }.making-step-reverse .making-copy { order: 1; text-align: right; justify-self: end; }
.making-visual { position: relative; min-height: clamp(300px,38vw,530px); overflow: hidden; border: 1px solid var(--line); border-radius: clamp(24px,3vw,42px); background: radial-gradient(circle at 50% 35%, rgba(242,200,111,.12), transparent 40%), linear-gradient(145deg,#101824,#080b10 72%); box-shadow: 0 35px 100px rgba(0,0,0,.27); background-position: center; background-size: cover; }
.making-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(3,5,8,.82)); }
.making-visual.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(5,7,10,.18), rgba(5,7,10,.58)); }
.making-symbol { position: absolute; left: 28px; bottom: 24px; z-index: 2; color: rgba(255,255,255,.58); font-family: var(--serif); font-size: clamp(48px,7vw,100px); letter-spacing: -.05em; }
.making-copy { max-width: 570px; }.making-kicker { margin: 0 0 14px; color: var(--gold); font-size: 11px; font-weight: 760; letter-spacing: .22em; text-transform: uppercase; }
.making-copy h3 { margin: 0; font-family: var(--serif); font-size: clamp(31px,4vw,61px); line-height: 1.05; font-weight: 500; letter-spacing: -.04em; }
.making-copy > p:last-child { margin: 22px 0 0; color: var(--muted); font-size: clamp(17px,1.6vw,23px); line-height: 1.65; }

.anatomy-section { background: linear-gradient(180deg, transparent, rgba(10,16,25,.65) 19%, rgba(10,16,25,.65) 80%, transparent); }
.anatomy-stage { position: relative; min-height: 760px; display: grid; grid-template-columns: minmax(400px,1fr) minmax(320px,.8fr); align-items: center; gap: clamp(40px,7vw,100px); padding: clamp(28px,4vw,60px); border: 1px solid var(--line); border-radius: clamp(28px,4vw,54px); background: radial-gradient(circle at 31% 43%, rgba(32,67,104,.23), transparent 42%), rgba(7,10,15,.62); overflow: hidden; box-shadow: 0 40px 130px rgba(0,0,0,.26); }
.anatomy-blueprint { position: relative; width: min(100%,570px); min-height: 670px; display: grid; place-items: center; }
.anatomy-blueprint svg { width: min(77%,430px); overflow: visible; filter: drop-shadow(0 0 30px rgba(108,176,226,.12)); }
.blueprint-ground,.blueprint-tower,.blueprint-gallery,.blueprint-rail,.blueprint-lantern,.blueprint-roof,.blueprint-line,.blueprint-door,.blueprint-beam { fill: none; stroke: rgba(151,202,235,.54); stroke-width: 2; vector-effect: non-scaling-stroke; }
.blueprint-gallery { fill: rgba(128,179,215,.07); }.blueprint-lantern { fill: rgba(242,200,111,.08); stroke: rgba(242,200,111,.64); }.blueprint-beam { stroke: rgba(242,200,111,.24); stroke-dasharray: 6 7; }
.blueprint-orbit { position: absolute; left: 50%; top: 48%; border: 1px solid rgba(130,187,226,.12); border-radius: 50%; transform: translate(-50%,-50%); }.orbit-a { width: 78%; aspect-ratio: 1; }.orbit-b { width: 57%; aspect-ratio: 1; border-style: dashed; animation: orbitSpin 30s linear infinite; }
@keyframes orbitSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.anatomy-hotspot { position: absolute; z-index: 5; display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(6,9,14,.84); backdrop-filter: blur(13px); cursor: pointer; transition: border-color .25s ease, transform .25s ease, background .25s ease; }
.anatomy-hotspot:hover,.anatomy-hotspot.is-active { transform: scale(1.035); border-color: rgba(242,200,111,.58); background: rgba(46,36,18,.88); }
.anatomy-hotspot span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); font-size: 11px; font-weight: 780; }.anatomy-hotspot b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hotspot-beacon { left: 25%; top: 15%; }.hotspot-main { left: 39%; top: 38%; }.hotspot-touch { left: 11%; top: 57%; }.hotspot-signal { left: 36%; top: 68%; }.hotspot-structure { left: 18%; bottom: 9%; }
.anatomy-details { position: relative; z-index: 3; max-width: 560px; padding-left: clamp(0px,3vw,55px); }
.anatomy-number { margin: 0 0 52px; color: rgba(242,200,111,.38); font-family: var(--serif); font-size: 17px; font-style: italic; }
.anatomy-details h3 { margin: 0; font-family: var(--serif); font-size: clamp(36px,4.8vw,72px); line-height: 1.05; letter-spacing: -.045em; font-weight: 500; }
.anatomy-details > p:last-child { margin: 27px 0 0; color: var(--muted); font-size: clamp(17px,1.55vw,22px); line-height: 1.7; }
.anatomy-details.is-changing { animation: detailChange .38s ease; }
@keyframes detailChange { 50% { opacity: .25; transform: translateY(8px); } }

.signal-section { position: relative; padding: clamp(120px,15vw,230px) clamp(22px,7vw,112px); overflow: hidden; }
.signal-backdrop { position: absolute; inset: 0; pointer-events: none; opacity: .55; }.signal-backdrop::before,.signal-backdrop::after { content: ""; position: absolute; top: 48%; width: 50%; height: 35%; filter: blur(4px); background: linear-gradient(90deg, transparent, rgba(242,200,111,.12)); clip-path: polygon(0 42%,100% 0,100% 100%,0 58%); }.signal-backdrop::before { right: 50%; }.signal-backdrop::after { left: 50%; transform: scaleX(-1); }.signal-backdrop span { position: absolute; left: 50%; top: 52%; width: 150px; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); background: rgba(242,200,111,.1); filter: blur(55px); }
.signal-journey { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; gap: clamp(12px,2vw,28px); max-width: 1330px; margin: 0 auto; }
.signal-journey article { text-align: center; }.signal-index { display: block; margin-bottom: 22px; color: rgba(242,200,111,.48); font-family: var(--serif); font-size: 14px; font-style: italic; }
.signal-pulse { position: relative; width: 74px; height: 74px; margin: 0 auto 26px; border: 1px solid rgba(242,200,111,.34); border-radius: 50%; box-shadow: 0 0 50px rgba(242,200,111,.09); }.signal-pulse::after { content: ""; position: absolute; inset: 27px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 20px rgba(242,200,111,.7); animation: signalPulse 2.8s ease-in-out infinite; }.signal-pulse-travel::after { animation-delay: -.7s; }.signal-pulse-answer::after { animation-delay: -1.4s; }.signal-pulse-remain::after { animation-delay: -2.1s; }
@keyframes signalPulse { 50% { transform: scale(1.8); opacity: .35; } }
.signal-journey h3 { margin: 0; font-size: clamp(23px,2.3vw,34px); letter-spacing: -.035em; }.signal-journey p { max-width: 220px; margin: 13px auto 0; color: var(--muted); font-family: var(--serif); font-size: 17px; line-height: 1.55; }
.signal-line { display: block; width: clamp(20px,4vw,68px); height: 1px; margin-top: 85px; background: linear-gradient(90deg, rgba(242,200,111,.08), rgba(242,200,111,.62), rgba(242,200,111,.08)); overflow: hidden; }.signal-line::after { content: ""; display: block; width: 35%; height: 100%; background: white; box-shadow: 0 0 9px white; animation: signalTravel 2.8s linear infinite; }
@keyframes signalTravel { from { transform: translateX(-120%); } to { transform: translateX(400%); } }

.legacy-card { display: grid; grid-template-columns: minmax(330px,.9fr) minmax(360px,1.1fr); align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: clamp(28px,4vw,54px); background: rgba(10,14,21,.74); box-shadow: 0 42px 140px rgba(0,0,0,.25); }
.legacy-archive { position: relative; min-height: 650px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(242,200,111,.13), transparent 38%), linear-gradient(135deg,#121b29,#07090e); }
.archive-grid { position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle,black,transparent 73%); }
.archive-ring { position: absolute; border: 1px solid rgba(242,200,111,.2); border-radius: 50%; }.ring-one { width: 63%; aspect-ratio: 1; }.ring-two { width: 43%; aspect-ratio: 1; border-style: dashed; animation: orbitSpin 26s linear infinite reverse; }
.archive-core { position: relative; z-index: 2; display: grid; place-items: center; width: 140px; aspect-ratio: 1; border: 1px solid rgba(242,200,111,.5); border-radius: 50%; color: var(--gold); font-family: var(--serif); font-size: 37px; letter-spacing: .11em; box-shadow: 0 0 70px rgba(242,200,111,.12), inset 0 0 50px rgba(242,200,111,.06); }
.archive-label { position: absolute; left: 26px; bottom: 25px; color: rgba(255,255,255,.34); font-size: 10px; letter-spacing: .24em; }
.legacy-copy { padding: clamp(44px,6vw,90px); align-self: center; }.legacy-copy h2 { font-size: clamp(42px,5.2vw,78px); }.legacy-copy > p:not(.landing-eyebrow) { margin: 28px 0 0; color: var(--muted); font-family: var(--serif); font-size: clamp(18px,1.65vw,24px); line-height: 1.68; }
.legacy-stamp { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 38px; padding-top: 25px; border-top: 1px solid var(--line); color: rgba(255,255,255,.46); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }.legacy-stamp b { color: var(--gold); }

.landing-gallery-section { padding: clamp(100px,13vw,200px) clamp(18px,5vw,72px); }
.landing-gallery-heading { max-width: 930px; margin: 0 auto 64px; text-align: center; }.landing-gallery-heading h2 { margin: 0; font-size: clamp(42px,6vw,88px); line-height: 1; letter-spacing: -.058em; }.landing-gallery-heading > p:last-child { max-width: 700px; margin: 25px auto 0; color: var(--muted); font-family: var(--serif); font-size: clamp(17px,1.6vw,22px); line-height: 1.65; }
.landing-photo-gallery { columns: 3 320px; column-gap: clamp(12px,1.8vw,24px); }.landing-photo { position: relative; break-inside: avoid; margin: 0 0 clamp(12px,1.8vw,24px); overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: clamp(16px,2.2vw,28px); background: #0d1118; box-shadow: 0 24px 80px rgba(0,0,0,.28); opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease, box-shadow .3s ease; transition-delay: calc(var(--photo-index) * 55ms); cursor: zoom-in; }.landing-photo.is-visible { opacity: 1; transform: none; }.landing-photo:hover { box-shadow: 0 35px 100px rgba(0,0,0,.4); }.landing-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); border-radius: inherit; }.landing-photo img { width: 100%; height: auto; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }.landing-photo:hover img { transform: scale(1.025); }
.landing-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 60px 20px 18px; background: linear-gradient(transparent,rgba(2,4,7,.82)); color: rgba(255,255,255,.78); font-family: var(--serif); font-size: 14px; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }.landing-photo:hover figcaption,.landing-photo:focus-within figcaption { opacity: 1; transform: none; }.landing-photo button { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; background: transparent; cursor: zoom-in; }

.dedication-section { padding-top: clamp(80px,10vw,150px); }.dedication-card { position: relative; max-width: 980px; margin: 0 auto; padding: clamp(45px,7vw,105px); border: 1px solid rgba(242,200,111,.22); background: linear-gradient(145deg,rgba(31,26,19,.58),rgba(8,11,16,.8)); box-shadow: 0 50px 150px rgba(0,0,0,.32), inset 0 0 80px rgba(242,200,111,.025); text-align: center; }.dedication-card::before,.dedication-card::after { content: ""; position: absolute; width: 52px; height: 52px; border-color: rgba(242,200,111,.5); }.dedication-card::before { left: 18px; top: 18px; border-left: 1px solid; border-top: 1px solid; }.dedication-card::after { right: 18px; bottom: 18px; border-right: 1px solid; border-bottom: 1px solid; }
.dedication-prelude { margin: 0 0 25px; color: var(--gold); font-family: var(--serif); font-style: italic; font-size: 18px; }.dedication-card h2 { font-size: clamp(42px,5.6vw,82px); }.dedication-rule { width: 1px; height: 70px; margin: 45px auto; background: linear-gradient(var(--gold),transparent); }.dedication-card > p:not(.dedication-prelude):not(.dedication-signature) { max-width: 730px; margin: 23px auto 0; color: rgba(239,234,223,.77); font-family: var(--serif); font-size: clamp(18px,1.8vw,25px); line-height: 1.72; }.dedication-signature { margin: 45px 0 0; color: var(--gold); font-family: var(--serif); font-size: clamp(22px,2.7vw,38px); font-style: italic; }

.landing-coda { padding: clamp(130px,18vw,260px) clamp(28px,9vw,140px); text-align: center; }.landing-coda-line { width: 1px; height: 90px; margin: 0 auto 54px; background: linear-gradient(var(--gold),transparent); }.landing-coda blockquote { max-width: 1100px; margin: 0 auto; font-family: var(--serif); font-size: clamp(31px,4.5vw,70px); line-height: 1.25; letter-spacing: -.035em; }.landing-coda > p { margin: 34px 0 0; color: var(--gold); font-size: 12px; font-weight: 750; letter-spacing: .25em; text-transform: uppercase; }

.final-beacon { position: relative; min-height: 78vh; display: grid; place-items: center; overflow: hidden; margin-top: 20px; background: #020305; }.final-night { position: absolute; inset: 0; background: radial-gradient(circle at 50% 58%,rgba(31,70,105,.22),transparent 25%),linear-gradient(#030509,#010203); }.final-lighthouse { position: relative; z-index: 3; width: 110px; height: 260px; margin-top: 45px; filter: drop-shadow(0 30px 30px rgba(0,0,0,.6)); }.final-tower { position: absolute; left: 20px; bottom: 0; width: 70px; height: 185px; clip-path: polygon(18% 0,82% 0,100% 100%,0 100%); background: linear-gradient(90deg,#847d72,#d5ccbd 48%,#716a62); }.final-lantern { position: absolute; left: 18px; top: 38px; width: 74px; height: 43px; border: 5px solid #34343a; background: #e9b64e; box-shadow: 0 0 35px rgba(242,190,80,.68); animation: finalGlow 3.4s ease-in-out infinite; }.final-roof { position: absolute; left: 9px; top: 5px; width: 92px; height: 42px; clip-path: polygon(50% 0,100% 100%,0 100%); background: #292a2f; }.final-door { position: absolute; z-index: 2; left: 43px; bottom: 0; width: 25px; height: 48px; border-radius: 12px 12px 0 0; background: #312f32; }
@keyframes finalGlow { 50% { opacity: .7; box-shadow: 0 0 55px rgba(242,190,80,.85); } }
.final-beam { position: absolute; z-index: 2; left: 50%; top: calc(50% - 60px); width: 150vw; height: 18vh; transform: translateX(-50%) rotate(-4deg); transform-origin: 50% 50%; clip-path: polygon(0 44%,100% 0,100% 100%,0 56%); background: linear-gradient(90deg,transparent 5%,rgba(255,229,156,.04) 42%,rgba(255,229,156,.28) 50%,rgba(255,229,156,.04) 58%,transparent 95%); filter: blur(5px); animation: finalSweep 9s ease-in-out infinite; }.final-beacon p { position: absolute; z-index: 4; bottom: max(45px,env(safe-area-inset-bottom)); margin: 0; color: rgba(255,255,255,.48); font-size: 11px; font-weight: 700; letter-spacing: .23em; text-transform: uppercase; }
@keyframes finalSweep { 0%,100% { transform: translateX(-50%) rotate(-11deg); opacity: .25; } 50% { transform: translateX(-50%) rotate(11deg); opacity: .7; } }
.landing-footer { padding: 24px 28px calc(24px + env(safe-area-inset-bottom)); color: rgba(255,255,255,.3); text-align: center; font-size: 11px; letter-spacing: .1em; }.landing-unlocking { animation: unlock .24s ease-out both; }@keyframes unlock { to { opacity: .72; transform: scale(.998); } }

.photo-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 72px minmax(0,1fr) 72px; align-items: center; padding: max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background: rgba(0,0,0,.94); backdrop-filter: blur(16px); opacity: 0; transition: opacity .25s ease; }.photo-lightbox.is-open { opacity: 1; }.lightbox-figure { min-width: 0; max-width: min(86vw,1350px); max-height: 88vh; display: grid; justify-items: center; margin: 0 auto; }.lightbox-figure img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 10px; box-shadow: 0 35px 120px rgba(0,0,0,.6); }.lightbox-figure figcaption { display: flex; justify-content: space-between; gap: 24px; width: 100%; margin-top: 15px; color: rgba(255,255,255,.7); font-family: var(--serif); font-size: 14px; }.lightbox-figure figcaption small { color: rgba(255,255,255,.38); font-family: inherit; }.lightbox-close,.lightbox-nav { border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.06); backdrop-filter: blur(12px); cursor: pointer; transition: background .2s ease, transform .2s ease; }.lightbox-close:hover,.lightbox-nav:hover { background: rgba(255,255,255,.13); transform: scale(1.04); }.lightbox-close { position: absolute; right: max(20px,env(safe-area-inset-right)); top: max(20px,env(safe-area-inset-top)); width: 44px; height: 44px; z-index: 3; font-size: 26px; line-height: 1; }.lightbox-nav { width: 52px; height: 52px; font-family: var(--serif); font-size: 38px; line-height: 1; }.lightbox-previous { justify-self: start; }.lightbox-next { justify-self: end; }

@media (max-width: 1000px) {
  .making-section::before,.making-step::before { display: none; }.making-step { grid-template-columns: 1fr 1fr; }.anatomy-stage { grid-template-columns: 1fr; min-height: auto; }.anatomy-blueprint { margin: 0 auto; }.anatomy-details { max-width: 700px; padding: 20px 0 10px; }.hotspot-beacon { left: 31%; }.hotspot-main { left: 52%; }.hotspot-touch { left: 19%; }.hotspot-signal { left: 50%; }.hotspot-structure { left: 28%; }.legacy-card { grid-template-columns: 1fr; }.legacy-archive { min-height: 500px; }.signal-journey { grid-template-columns: 1fr 1fr; gap: 50px 25px; }.signal-line { display: none; }
}

@media (max-width: 820px) {
  .ambient-label { display: none; }.ambient-toggle { width: 40px; padding: 0; justify-content: center; }.landing-hero { min-height: 100svh; grid-template-columns: 1fr; align-content: center; gap: 12px; padding-top: max(64px,env(safe-area-inset-top)); }.landing-hero-copy { text-align: center; }.landing-hero-vignette { background: linear-gradient(180deg,rgba(5,7,10,.62),rgba(5,7,10,.55) 50%,#05070a 98%); } h1 { margin-inline: auto; font-size: clamp(54px,15vw,92px); }.landing-intro { margin: 24px auto 0; font-size: 18px; }.landing-lighthouse { width: min(88vw,380px); margin-top: 4px; }.landing-beam { top: 29%; width: 64vw; }.landing-scroll-cue { display: none; }.landing-story { padding-top: 130px; }.landing-chapter,.landing-chapter-offset { grid-template-columns: 38px minmax(0,1fr); justify-self: stretch; }.making-step,.making-step-reverse { grid-template-columns: 1fr; }.making-step-reverse .making-visual,.making-step-reverse .making-copy { order: initial; }.making-step-reverse .making-copy { text-align: left; justify-self: start; }.making-visual { min-height: 430px; }.anatomy-blueprint { min-height: 570px; }.anatomy-hotspot b { display: none; }.legacy-copy { text-align: left; }.photo-lightbox { grid-template-columns: 48px minmax(0,1fr) 48px; }.lightbox-nav { width: 42px; height: 42px; }
}

@media (max-width: 560px) {
  .landing-hero { padding-inline: 18px; }.landing-eyebrow { margin-bottom: 15px; font-size: 10px; }.landing-intro { max-width: 34rem; font-size: 16px; line-height: 1.55; }.landing-story { padding-inline: 20px; gap: 112px; }.landing-chapter { grid-template-columns: 1fr; gap: 12px; }.landing-chapter-number { margin: 0; }.landing-chapter div > p { font-size: 18px; line-height: 1.65; }.section-shell { padding-inline: 19px; }.making-visual { min-height: 340px; border-radius: 22px; }.anatomy-stage { min-height: 720px; padding: 16px; border-radius: 24px; }.anatomy-blueprint { min-height: 475px; }.anatomy-blueprint svg { width: 88%; }.hotspot-beacon { left: 23%; top: 12%; }.hotspot-main { left: 61%; top: 29%; }.hotspot-touch { left: 7%; top: 48%; }.hotspot-signal { left: 67%; top: 57%; }.hotspot-structure { left: 22%; bottom: 33%; }.anatomy-details { margin-top: -25px; }.anatomy-number { margin-bottom: 28px; }.signal-section { padding-inline: 20px; }.signal-journey { grid-template-columns: 1fr; gap: 62px; }.signal-journey p { max-width: 280px; }.legacy-archive { min-height: 390px; }.landing-gallery-heading { margin-bottom: 34px; }.landing-photo-gallery { columns: 2 145px; column-gap: 10px; }.landing-photo { margin-bottom: 10px; border-radius: 14px; }.landing-photo figcaption { display: none; }.dedication-card { padding-inline: 28px; }.photo-lightbox { grid-template-columns: 1fr; padding-inline: 10px; }.lightbox-nav { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); }.lightbox-nav:hover { transform: translateY(-50%) scale(1.04); }.lightbox-previous { left: 10px; }.lightbox-next { right: 10px; }.lightbox-figure { max-width: 96vw; }.lightbox-figure figcaption { padding-inline: 8px; }.final-beacon p { font-size: 9px; letter-spacing: .17em; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .first-light { display: none; }.reveal-item,.landing-photo { opacity: 1; transform: none; }
}