@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --ink: #f4f5f8;
  --muted: rgba(225, 231, 243, .67);
  --line: rgba(232, 238, 249, .17);
  --night: #05070d;
  --sun: #ffca67;
  --cyan: #93d4ff;
  --progress: 0%;
  --sans: 'Manrope', 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; background: var(--night); }
body { margin: 0; color: var(--ink); background: var(--night); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body::after { content: ''; position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: .08; 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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 50; top: 10px; left: 10px; padding: 12px 16px; color: #05070d; background: white; border-radius: 4px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 30; inset: 0 0 auto; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 5.4vw, 88px); border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(3,5,11,.82), rgba(3,5,11,.28)); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 13px; min-width: 210px; text-decoration: none; }
.brand-mark { position: relative; width: 48px; height: 30px; overflow: hidden; flex: none; border-radius: 3px; box-shadow: 0 0 28px rgba(56, 145, 255, .14); }
.brand-mark img { position: absolute; top: 50%; left: 0; width: 48px; height: 48px; object-fit: cover; transform: translateY(-50%); }
.brand-copy { display: grid; gap: 3px; }
.brand-name { font-size: 12px; font-weight: 800; letter-spacing: .22em; }
.brand-role { color: rgba(229,235,247,.55); font-family: var(--mono); font-size: 8px; letter-spacing: .23em; }
.top-nav { display: flex; align-items: center; gap: clamp(18px, 3.2vw, 48px); }
.top-nav a { position: relative; padding: 8px 0; color: rgba(232,237,247,.65); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: color .25s ease; }
.top-nav a::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, #ee3d85, #4db9ff, #ffc15f); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.top-nav a:hover, .top-nav a[aria-current="location"] { color: #fff; }
.top-nav a[aria-current="location"]::after { transform: scaleX(1); }
.header-meta { display: flex; align-items: center; gap: 9px; min-width: 140px; justify-content: flex-end; color: rgba(230,235,246,.6); font-family: var(--mono); font-size: 9px; letter-spacing: .16em; }
.live-dot { width: 6px; height: 6px; border-radius: 100%; background: #b0ee9f; box-shadow: 0 0 12px rgba(176,238,159,.8); }
.reading-progress { position: fixed; z-index: 31; top: 83px; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,.08); }
.reading-progress span { display: block; height: 100%; width: var(--progress); background: linear-gradient(90deg,#e93d89,#55bbff,#ffc45f); transition: width .6s cubic-bezier(.2,.8,.2,1); }

.story-section { position: relative; min-height: 100svh; height: 100svh; overflow: hidden; isolation: isolate; scroll-snap-align: start; scroll-snap-stop: always; background: var(--night); }
.scene-image, .scene-shade, .studio-backdrop { position: absolute; z-index: -3; inset: 0; }
.scene-image { background-position: center; background-size: cover; transform: scale(1.025); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter 1.2s ease; }
.scene-sun .scene-image { background-image: url('assets/solar-system.png'); }
.scene-moon .scene-image { background-image: url('assets/moon-orbit.png'); }
.scene-gaia .scene-image { background-image: url('assets/gaia.png'); }
.scene-shade { z-index: -2; background: linear-gradient(90deg, rgba(3,5,11,.91) 0%, rgba(4,7,15,.82) 27%, rgba(4,7,15,.46) 54%, rgba(4,7,15,.1) 100%), linear-gradient(0deg, rgba(4,6,12,.54), transparent 35%, rgba(4,6,12,.14)); }
.scene-moon .scene-shade { background: linear-gradient(90deg, rgba(3,5,11,.9), rgba(3,5,11,.7) 35%, rgba(3,5,11,.15) 73%), linear-gradient(0deg, rgba(3,5,11,.62), transparent 42%); }
.scene-gaia .scene-shade { background: linear-gradient(90deg, rgba(3,5,11,.9), rgba(3,5,11,.72) 37%, rgba(3,5,11,.2) 72%), linear-gradient(0deg, rgba(3,5,11,.67), transparent 47%); }
.scene-section-active .scene-image { transform: scale(1); }
.infinity-mark { position: absolute; z-index: -1; top: 52%; left: 50%; width: min(82vw, 1160px); aspect-ratio: 2 / 1; object-fit: cover; object-position: center; opacity: .15; mix-blend-mode: screen; filter: saturate(1.3); transform: translate(-22%, -50%) rotate(-4deg); pointer-events: none; }
.scene-gaia .infinity-mark { opacity: .13; transform: translate(-20%, -50%) rotate(5deg); }
.section-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: min(1280px, 100%); min-height: 100%; margin: 0 auto; padding: 124px clamp(26px, 7.4vw, 120px) 82px; }
.section-copy { width: min(650px, 64vw); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: rgba(220,229,246,.75); font-family: var(--mono); font-size: 10px; letter-spacing: .19em; }
.eyebrow-star { color: #efb760; font-size: 15px; text-shadow: 0 0 15px rgba(255,188,80,.65); }
h1, h2 { max-width: 820px; margin: 0; font-size: clamp(54px, 7.2vw, 106px); font-weight: 500; letter-spacing: -.075em; line-height: .97; text-wrap: balance; }
.lead { max-width: 560px; margin: 27px 0 0; color: var(--muted); font-size: clamp(14px, 1.12vw, 17px); font-weight: 400; line-height: 1.85; }
.instrument-track { display: flex; align-items: center; width: min(620px, 100%); margin-top: 33px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.instrument-step { min-width: max-content; }
.instrument-step span { color: #ffcf73; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; }
.instrument-step p { margin: 6px 0 0; color: rgba(239,243,251,.91); font-size: 11px; font-weight: 700; }
.track-line { height: 1px; width: clamp(18px, 3.4vw, 52px); margin: 0 14px; background: linear-gradient(90deg, rgba(255,203,112,.7), rgba(255,255,255,.15)); }
.chapter-note { display: flex; align-items: flex-start; gap: 13px; max-width: 615px; margin-top: 23px; }
.note-marker { color: #ffcd75; font-size: 14px; line-height: 1.6; }
.chapter-note p { margin: 0; color: rgba(224,231,243,.69); font-size: 12px; line-height: 1.75; }
.chapter-note strong { color: #fff; font-weight: 700; }
.next-chapter { position: absolute; right: clamp(26px, 7.4vw, 120px); bottom: 71px; display: flex; align-items: center; gap: 14px; text-decoration: none; }
.next-copy { display: grid; gap: 5px; text-align: right; }
.next-copy small { color: rgba(231,237,247,.54); font-family: var(--mono); font-size: 8px; letter-spacing: .16em; }
.next-copy strong { font-size: 11px; font-weight: 600; }
.arrow-circle { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(243,246,252,.45); border-radius: 50%; color: #fff; font-size: 16px; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.next-chapter:hover .arrow-circle { transform: translate(3px,3px); border-color: #fff; color: #03050b; background: #fff; }
.scroll-cue { position: absolute; bottom: 35px; left: clamp(26px, 5.4vw, 88px); display: flex; align-items: center; gap: 12px; margin: 0; color: rgba(224,232,247,.55); font-family: var(--mono); font-size: 8px; letter-spacing: .16em; }
.scroll-line { position: relative; display: block; width: 32px; height: 1px; overflow: hidden; background: rgba(255,255,255,.22); }
.scroll-line::after { content: ''; position: absolute; inset: 0; background: #fff; animation: cue-line 2.2s ease-in-out infinite; }
.scene-caption { position: absolute; right: clamp(26px, 5.4vw, 88px); bottom: 35px; color: rgba(224,232,247,.5); font-family: var(--mono); font-size: 8px; letter-spacing: .18em; }
.scene-caption span { padding: 0 5px; color: #ffd071; }
.section-index { position: absolute; z-index: 2; top: 50%; right: clamp(24px, 5.4vw, 88px); display: flex; align-items: center; gap: 8px; color: rgba(234,239,249,.63); font-family: var(--mono); font-size: 9px; transform: translateY(-50%); writing-mode: vertical-rl; }
.section-index i { display: block; width: 1px; height: 40px; background: linear-gradient(180deg, #f8c96b, rgba(255,255,255,.16)); }

.scene-moon .section-copy { width: min(700px, 69vw); }
.scene-moon h2 { font-size: clamp(53px, 6.8vw, 98px); }
.genre-sequence { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 650px; margin-top: 30px; }
.genre-sequence span:not(.sequence-break) { display: inline-block; padding: 10px 13px; border: 1px solid rgba(221,231,247,.2); border-radius: 2px; color: rgba(244,247,253,.83); background: rgba(8,13,24,.36); backdrop-filter: blur(8px); font-size: 10px; font-weight: 700; line-height: 1.45; }
.genre-sequence b { color: rgba(214,226,245,.45); font-family: var(--mono); font-size: 10px; font-weight: 400; }
.genre-sequence .genre-highlight { border-color: rgba(140,203,248,.5) !important; color: #e7f5ff !important; background: rgba(53,119,159,.2) !important; }
.sequence-break { flex-basis: 100%; height: 0; }
.moon-note { margin-top: 26px; }

.travel-inner { justify-content: center; padding-top: 113px; padding-bottom: 72px; }
.scene-gaia { height: auto; min-height: 100svh; }
.travel-inner { min-height: 100svh; }
.travel-copy { width: min(700px, 68vw); }
.travel-copy .eyebrow { margin-bottom: 17px; }
.travel-copy h2 { font-size: clamp(51px, 6.3vw, 89px); }
.travel-copy .lead { margin-top: 18px; }
.journey-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; margin-top: 30px; }
.journey-card { position: relative; min-height: 136px; padding: 17px 15px 15px; overflow: hidden; border: 1px solid rgba(223,235,251,.16); background: linear-gradient(145deg, rgba(8,15,28,.72), rgba(6,10,19,.43)); backdrop-filter: blur(14px); }
.journey-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; opacity: .65; background: linear-gradient(90deg, transparent, #74c8ff, transparent); }
.journey-year { color: #9ddcff; font-family: var(--mono); font-size: 8px; letter-spacing: .11em; }
.journey-orbit { position: absolute; top: 15px; right: 14px; width: 18px; height: 18px; border: 1px solid rgba(186,219,249,.45); border-radius: 50%; }
.journey-orbit::after { content: ''; position: absolute; top: 6px; left: 7px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 9px #9ddcff; }
.journey-card h3 { margin: 22px 0 7px; font-size: 15px; font-weight: 700; letter-spacing: -.03em; }
.journey-card p { margin: 0; color: rgba(224,232,245,.62); font-size: 10px; line-height: 1.65; }
.journey-card-wide { grid-column: span 2; }
.journey-card-wide h3 { margin-top: 17px; }
.journey-card-wide p { max-width: 440px; }
.travel-next { position: static; align-self: flex-end; margin-top: 20px; }
.scene-gaia .scroll-cue, .scene-gaia .scene-caption { bottom: 30px; }

.scene-studio { background: radial-gradient(ellipse at 74% 40%, #101b33 0%, #090e1b 40%, #05070d 75%); }
.studio-backdrop { z-index: -3; overflow: hidden; background: radial-gradient(ellipse at 74% 47%, rgba(69,120,185,.2), transparent 36%), radial-gradient(ellipse at 86% 60%, rgba(230,116,69,.11), transparent 27%); }
.studio-orbit { position: absolute; top: 48%; left: 74%; width: min(62vw, 850px); aspect-ratio: 1; border: 1px solid rgba(127,179,245,.19); border-radius: 50%; transform: translate(-50%,-50%) rotate(-23deg) scaleY(.47); box-shadow: 0 0 70px rgba(72,129,198,.08), inset 0 0 50px rgba(55,111,176,.05); }
.orbit-two { width: min(48vw, 650px); border-color: rgba(240,178,103,.19); transform: translate(-50%,-50%) rotate(24deg) scaleY(.56); }
.studio-core { position: absolute; top: 48%; left: 74%; width: min(24vw, 330px); aspect-ratio: 1; border: 1px solid rgba(122,179,243,.22); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(106,170,241,.23), rgba(28,51,86,.11) 49%, transparent 70%); box-shadow: 0 0 100px rgba(80,141,215,.1), inset -30px -16px 55px rgba(37,71,118,.18); transform: translate(-50%,-50%); }
.studio-wave { position: absolute; top: 48%; left: 74%; display: flex; align-items: center; justify-content: center; gap: 8px; width: min(46vw, 620px); height: 160px; transform: translate(-50%,-50%) rotate(-15deg); }
.studio-wave i { display: block; width: 2px; height: var(--wave, 35%); border-radius: 4px; opacity: .72; background: linear-gradient(180deg, rgba(116,197,255,.03), #92cafa, rgba(255,196,113,.38)); box-shadow: 0 0 12px rgba(95,164,226,.23); animation: wave-breathe 2.8s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
.studio-wave i:nth-child(3n) { --wave: 74%; --delay: -.9s; }
.studio-wave i:nth-child(3n + 1) { --wave: 52%; --delay: -.3s; }
.studio-wave i:nth-child(4n) { --wave: 96%; --delay: -1.4s; }
.studio-wave i:nth-child(5n) { --wave: 35%; --delay: -.6s; }
.scene-studio .scene-shade { background: linear-gradient(90deg, rgba(3,5,11,.95), rgba(3,5,11,.83) 34%, rgba(3,5,11,.24) 67%, rgba(3,5,11,.05)), linear-gradient(0deg, rgba(3,5,11,.62), transparent 44%); }
.scene-studio .infinity-mark { opacity: .12; transform: translate(-19%,-50%) rotate(7deg); }
.studio-copy { width: min(690px, 66vw); }
.studio-copy h2 { font-size: clamp(50px, 6.3vw, 91px); }
.studio-copy .lead { max-width: 590px; }
.studio-signature { display: flex; align-items: center; gap: 16px; margin-top: 39px; }
.signature-line { width: 44px; height: 1px; background: linear-gradient(90deg,#ffa958,#71c5ff); }
.studio-signature div { display: grid; gap: 5px; }
.studio-signature small { color: rgba(226,233,245,.5); font-family: var(--mono); font-size: 8px; letter-spacing: .18em; }
.studio-signature strong { font-size: 12px; font-weight: 600; }
.studio-tags { position: absolute; right: clamp(27px, 7.4vw, 120px); bottom: 95px; display: grid; gap: 9px; color: rgba(224,232,246,.66); font-family: var(--mono); font-size: 8px; letter-spacing: .15em; }
.studio-tags span::before { content: '—'; margin-right: 9px; color: #ffc96f; }
.back-to-start { position: absolute; right: clamp(27px, 7.4vw, 120px); bottom: 38px; display: flex; align-items: center; gap: 9px; color: rgba(237,242,250,.72); font-family: var(--mono); font-size: 8px; letter-spacing: .15em; text-decoration: none; }
.back-to-start span { color: #ffd070; font-size: 13px; transition: transform .2s ease; }
.back-to-start:hover span { transform: translate(2px,-2px); }
.scene-studio .scroll-cue { display: none; }
.scene-studio .scene-caption { right: auto; left: clamp(26px, 5.4vw, 88px); }

@keyframes cue-line { 0% { transform: translateX(-105%); } 55%, 100% { transform: translateX(105%); } }
@keyframes wave-breathe { from { transform: scaleY(.55); opacity: .42; } to { transform: scaleY(1); opacity: .9; } }

@media (max-width: 900px) {
  .site-header { height: 76px; padding-inline: 24px; }
  .reading-progress { top: 75px; }
  .brand { min-width: initial; }
  .header-meta { display: none; }
  .top-nav { gap: 18px; }
  .top-nav a { font-size: 10px; }
  .section-inner { padding-inline: 7vw; }
  .section-copy, .scene-moon .section-copy, .travel-copy, .studio-copy { width: min(720px, 76vw); }
  .journey-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .journey-card { min-height: 120px; }
  .journey-card-wide { grid-column: span 2; }
  .travel-inner { padding-top: 108px; padding-bottom: 70px; }
  .journey-card p { font-size: 9px; }
}

@media (max-height: 700px) and (min-width: 641px) {
  .story-section { height: auto; min-height: 100svh; }
  .section-inner { min-height: 100svh; }
  .travel-inner { padding-top: 108px; padding-bottom: 82px; }
}

@media (max-width: 640px) {
  html { scroll-snap-type: y proximity; }
  .site-header { height: 68px; padding-inline: 16px; }
  .reading-progress { top: 67px; }
  .brand { gap: 9px; }
  .brand-mark { width: 40px; height: 25px; }
  .brand-mark img { width: 40px; height: 40px; }
  .brand-name { font-size: 10px; letter-spacing: .17em; }
  .brand-role { font-size: 7px; }
  .top-nav { gap: 13px; }
  .top-nav a { font-size: 9px; }
  .top-nav a:nth-child(2), .top-nav a:nth-child(3) { display: none; }
  .top-nav a:first-child { display: none; }
  .top-nav a:last-child { padding: 9px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 30px; }
  .top-nav a:last-child::after { display: none; }
  .story-section { height: auto; min-height: 100svh; }
  .section-inner { min-height: 100svh; justify-content: center; padding: 108px 24px 110px; }
  .scene-image { background-position: 58% center; }
  .scene-shade, .scene-moon .scene-shade, .scene-gaia .scene-shade { background: linear-gradient(90deg, rgba(3,5,11,.82), rgba(3,5,11,.54) 58%, rgba(3,5,11,.16)), linear-gradient(0deg, rgba(3,5,11,.78), transparent 60%); }
  .section-copy, .scene-moon .section-copy, .travel-copy, .studio-copy { width: 100%; }
  .eyebrow { gap: 8px; margin-bottom: 18px; font-size: 8px; letter-spacing: .13em; }
  h1, h2, .scene-moon h2, .travel-copy h2, .studio-copy h2 { font-size: clamp(48px, 14vw, 74px); }
  .lead { margin-top: 19px; font-size: 13px; line-height: 1.72; }
  .instrument-track { gap: 0; margin-top: 26px; padding: 13px 0; }
  .instrument-step span { font-size: 10px; }
  .instrument-step p { max-width: 72px; font-size: 9px; line-height: 1.4; }
  .track-line { width: 16px; margin: 0 8px 14px; }
  .chapter-note { margin-top: 19px; }
  .chapter-note p { font-size: 11px; }
  .next-chapter { right: 24px; bottom: 54px; }
  .next-copy strong { font-size: 10px; }
  .scroll-cue { bottom: 24px; left: 24px; font-size: 7px; }
  .scene-caption { right: 24px; bottom: 24px; font-size: 7px; }
  .section-index { top: 94px; right: 22px; font-size: 8px; transform: none; }
  .section-index i { height: 24px; }
  .infinity-mark { top: 45%; left: 48%; width: 112vw; opacity: .12; transform: translate(-10%,-50%) rotate(-4deg); }
  .scene-gaia .infinity-mark { left: 48%; width: 112vw; opacity: .11; transform: translate(-10%,-50%) rotate(5deg); }
  .genre-sequence { gap: 7px; margin-top: 24px; }
  .genre-sequence span:not(.sequence-break) { padding: 8px 9px; font-size: 9px; }
  .genre-sequence b { font-size: 8px; }
  .moon-note { margin-top: 20px; }
  .travel-inner { justify-content: flex-start; min-height: 100svh; padding-top: 112px; padding-bottom: 112px; }
  .travel-copy .eyebrow { margin-bottom: 13px; }
  .travel-copy .lead { margin-top: 15px; }
  .journey-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 22px; }
  .journey-card { min-height: 116px; padding: 13px 11px; }
  .journey-card-wide { grid-column: span 2; min-height: 108px; }
  .journey-year { font-size: 7px; }
  .journey-card h3 { margin-top: 18px; font-size: 13px; }
  .journey-card p { font-size: 9px; line-height: 1.5; }
  .journey-orbit { top: 11px; right: 10px; width: 14px; height: 14px; }
  .journey-orbit::after { top: 4px; left: 5px; width: 3px; height: 3px; }
  .travel-next { position: static; align-self: flex-end; margin-top: 18px; }
  .scene-gaia .scroll-cue, .scene-gaia .scene-caption { bottom: 24px; }
  .studio-backdrop { opacity: .78; }
  .studio-orbit { top: 37%; left: 93%; width: 130vw; }
  .orbit-two { width: 100vw; }
  .studio-core { top: 37%; left: 93%; width: 58vw; }
  .studio-wave { top: 37%; left: 93%; width: 95vw; height: 110px; gap: 6px; }
  .scene-studio .scene-shade { background: linear-gradient(90deg, rgba(3,5,11,.88), rgba(3,5,11,.61) 64%, rgba(3,5,11,.3)), linear-gradient(0deg, rgba(3,5,11,.86), transparent 70%); }
  .scene-studio .infinity-mark { top: 40%; left: 48%; width: 112vw; opacity: .11; transform: translate(-10%,-50%) rotate(7deg); }
  .studio-signature { margin-top: 29px; }
  .studio-tags { right: auto; left: 24px; bottom: 70px; gap: 7px; font-size: 7px; }
  .back-to-start { right: 24px; bottom: 28px; font-size: 7px; }
  .scene-studio .scroll-cue { display: none; }
  .scene-studio .scene-caption { left: 24px; right: auto; bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}