:root {
  --paper: #eee7dc;
  --red: #a63a32;
  --red-bright: #d05a4f;
  --header-h: 92px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #020508; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--paper); background: #020508; font-family: "Manrope", sans-serif; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: #fff; background: var(--red); }

.skip-link { position: fixed; left: 16px; top: -70px; z-index: 100; padding: 12px 16px; color: #0a0d0f; background: #f0e8da; transition: top .2s; }
.skip-link:focus { top: 12px; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 80; height: var(--header-h); padding: 0 3.2vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #e7e0d5; border-bottom: 1px solid rgba(211,225,229,.12); background: rgba(3,6,9,.95); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.monogram { font: 700 28px/1 "Cormorant Garamond", serif; letter-spacing: -.08em; }
.monogram span { color: var(--red-bright); }
.main-nav { display: flex; gap: clamp(44px,5vw,80px); align-items: center; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.main-nav a, .nav-case { position: relative; padding: 18px 0 14px; color: #969492; }
.main-nav a::after, .nav-case::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: #e7edf0; transition: right .38s ease; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.is-active, .nav-case:hover, .nav-case:focus-visible { color: #f2eee7; }
.main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a.is-active::after, .nav-case:hover::after, .nav-case:focus-visible::after { right: 0; }
.nav-case { justify-self: end; display: flex; align-items: center; font: 700 14px/1 "Manrope", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.roll-label { display: inline-flex; white-space: nowrap; }
.letter-window { display: inline-block; height: 1.15em; overflow: hidden; }
.letter-track { display: flex; flex-direction: column; height: 2.3em; transition: transform .42s cubic-bezier(.22,.78,.2,1); transition-delay: calc(var(--i) * 18ms); }
.letter-track > span { display: block; height: 1.15em; line-height: 1.15em; }
.main-nav a:hover .letter-track, .main-nav a:focus-visible .letter-track, .nav-case:hover .letter-track, .nav-case:focus-visible .letter-track { transform: translateY(-50%); }

.archive-main { position: relative; z-index: 1; }
.project-journey { position: relative; min-height: 940svh; background: #020508; }
.journey-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; perspective: 1300px; contain: paint; }
.journey-stage::after { content: ""; position: absolute; z-index: 6; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(1,4,7,.21), transparent 19%, transparent 72%, rgba(0,2,5,.34)); }

.galaxy-backdrop { position: absolute; z-index: 0; inset: -7%; overflow: hidden; transform-origin: 50% 55%; will-change: transform; backface-visibility: hidden; background: #020508; }
.galaxy-backdrop img { position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; image-rendering: auto; }
.galaxy-backdrop::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 18% 17% at 50% 56%, rgba(222,241,249,.18), rgba(125,160,177,.045) 34%, transparent 72%), linear-gradient(180deg, rgba(0,3,7,.01), rgba(1,5,10,.08) 72%, rgba(0,2,5,.18)); }
.cosmic-depth { position: absolute; z-index: 1; inset: -14%; pointer-events: none; opacity: .32; transform-origin: 50% 55%; will-change: transform, opacity; background: repeating-radial-gradient(ellipse 74% 60% at 50% 55%, transparent 0 34px, rgba(217,234,241,.042) 35px, transparent 36px 66px); mix-blend-mode: screen; }
.tunnel-vignette { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: radial-gradient(ellipse 24% 23% at 50% 55%, transparent 0 46%, rgba(1,5,9,.025) 72%, rgba(0,2,5,.55) 100%), linear-gradient(90deg, rgba(0,2,5,.56), transparent 12%, transparent 88%, rgba(0,2,5,.62)); box-shadow: inset 0 0 10vw rgba(0,0,0,.43); }

.archive-hud { position: absolute; z-index: 30; right: 3.2vw; top: calc(var(--header-h) + 8vh); bottom: 8vh; display: grid; grid-template-rows: auto 1fr auto; gap: 13px; justify-items: center; color: rgba(213,225,230,.65); }
.archive-hud > span { font: 20px/1 "Special Elite", serif; }
.archive-hud > i { position: relative; display: block; width: 1px; min-height: 110px; overflow: hidden; background: rgba(210,224,228,.16); }
.archive-hud > i b { position: absolute; inset: 0 0 auto; height: 0; background: #bb4a42; box-shadow: 0 0 12px rgba(187,74,66,.52); }
.archive-hud small { writing-mode: vertical-rl; font-size: 11px; font-weight: 700; letter-spacing: .22em; }

.archive-walker { position: absolute; z-index: 12; left: 50%; bottom: -10vh; width: clamp(280px,34vw,520px); aspect-ratio: 2 / 3; transform: translate3d(-50%,0,170px); transform-origin: 50% 96%; will-change: transform; backface-visibility: hidden; }
.walker-frames { position: absolute; z-index: 2; inset: 0; }
.walker-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; visibility: hidden; opacity: 1; image-rendering: auto; transition: none; }
.walker-frame.is-active { visibility: visible; opacity: 1; }
.walker-shadow { position: absolute; z-index: 1; left: 25%; right: 25%; bottom: 1.5%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.58) 0 24%, rgba(0,0,0,.26) 54%, transparent 76%); transform: scaleX(1.12); will-change: transform, opacity; }

.project-portal { --portal-x: 0px; --portal-y: 0px; --portal-far-x: 0px; --portal-far-y: 0px; --portal-approach: 0; --portal-label-opacity: 0; --portal-z: -400px; --portal-scale: .4; --portal-opacity: 1; --portal-dim: .68; --portal-tilt: 0deg; --accent: #d85a50; --planet-shadow: rgba(214,79,64,.28); position: absolute; z-index: 20; left: 50%; top: 43%; display: block; width: clamp(235px,25vw,390px); aspect-ratio: 1; color: #f4f1eb; opacity: var(--portal-opacity); transform: translate3d(calc(-50% + var(--portal-far-x) * (1 - var(--portal-approach)) + var(--portal-x) * var(--portal-approach)), calc(-50% + var(--portal-far-y) * (1 - var(--portal-approach)) + var(--portal-y) * var(--portal-approach)), var(--portal-z)) scale(var(--portal-scale)) rotate(var(--portal-tilt)); transform-style: preserve-3d; pointer-events: none; will-change: transform, opacity; }
.project-portal.is-visible { pointer-events: auto; }
.project-portal.is-current { z-index: 26; }
.planet-system { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; }
.planet-visual { position: absolute; inset: 5%; display: block; border-radius: 50%; transform: translateZ(20px); transition: transform .55s cubic-bezier(.18,.8,.18,1), outline-color .25s ease; box-shadow: 0 38px 85px rgba(0,0,0,.46), 0 0 72px var(--planet-shadow); }
.planet-visual, .planet-orbit { filter: brightness(var(--portal-dim)); }
.planet-visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.planet-visual::after { content: ""; position: absolute; inset: 5%; border-radius: 50%; pointer-events: none; opacity: .62; background: radial-gradient(circle at 34% 27%, rgba(255,255,255,.14), transparent 22%), radial-gradient(circle at 60% 74%, transparent 45%, rgba(0,0,0,.42) 100%); transition: opacity .45s ease; }
.planet-orbit { position: absolute; z-index: 1; inset: 11% -9%; display: block; border: 1px solid rgba(218,232,237,.26); border-radius: 50%; transform: rotate(-14deg) scaleY(.53) translateZ(5px); transform-origin: center; }
.planet-orbit::after { content: ""; position: absolute; inset: -7%; border: 1px solid rgba(218,232,237,.1); border-radius: 50%; }
.planet-orbit i { position: absolute; left: 50%; top: -4px; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.project-portal.is-current .planet-orbit { animation: planet-orbit 15s linear infinite; }
@keyframes planet-orbit { to { transform: rotate(346deg) scaleY(.53) translateZ(5px); } }

.portal-case { --portal-far-x: 21vw; --portal-far-y: -10vh; --portal-x: 27vw; --portal-y: -6vh; --portal-tilt: 3deg; --accent: #e45b50; --planet-shadow: rgba(218,67,48,.34); }
.portal-travel { --portal-far-x: -26vw; --portal-far-y: 7vh; --portal-x: -25vw; --portal-y: 13vh; --portal-tilt: -5deg; --accent: #efc679; --planet-shadow: rgba(88,175,201,.25); }
.portal-high { --portal-far-x: 12vw; --portal-far-y: -27vh; --portal-x: 22vw; --portal-y: -4vh; --portal-tilt: 6deg; --accent: #c6d2da; --planet-shadow: rgba(170,193,207,.2); }
.portal-verdant { --portal-far-x: -39vw; --portal-far-y: -18vh; --portal-x: -26vw; --portal-y: -7vh; --accent: #a8cda2; --planet-shadow: #689c7d40; }
.portal-amethyst { --portal-far-x: 41vw; --portal-far-y: -22vh; --portal-x: 26vw; --portal-y: 4vh; --accent: #ceacd9; --planet-shadow: #a37aca40; }
.portal-ice { --portal-far-x: -35vw; --portal-far-y: 35vh; --portal-x: -24vw; --portal-y: 9vh; --accent: #c3e8ef; --planet-shadow: #7cc8e240; }
.portal-ringed { --portal-far-x: 42vw; --portal-far-y: 37vh; --portal-x: 25vw; --portal-y: -2vh; --accent: #edc28b; --planet-shadow: #c8996340; }
.portal-locked { color: #c7cdce; }
.portal-locked .planet-visual { filter: brightness(calc(var(--portal-dim) * .72)); }
.portal-locked .planet-orbit { opacity: .58; }

.portal-content { position: relative; z-index: 3; display: grid; width: 68%; gap: 10px; opacity: var(--portal-label-opacity); text-align: center; transform: translateZ(56px) translateY(calc((1 - var(--portal-label-opacity)) * 12px)); transition: opacity .2s ease, transform .52s cubic-bezier(.18,.8,.18,1); text-shadow: 0 2px 16px rgba(0,0,0,.95), 0 0 32px rgba(0,0,0,.85); }
.project-portal:focus-visible .portal-content { opacity: 1; }
.portal-content::before { content: ""; position: absolute; z-index: -1; inset: -44% -28%; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,.58), rgba(0,0,0,.24) 52%, transparent 74%); }
.portal-content small { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.portal-content strong { font: 600 clamp(38px,3.9vw,64px)/.92 "Cormorant Garamond", serif; letter-spacing: -.055em; }
.portal-content > span { display: flex; justify-content: center; gap: 9px; align-items: center; margin-top: 5px; color: #d5dcdd; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.portal-content b { color: #fff; font-size: 18px; transition: transform .28s ease; }
.project-portal:hover .planet-visual, .project-portal:focus-visible .planet-visual { transform: translateZ(28px) scale(1.055) rotate(-.8deg); outline: 1px solid rgba(238,245,247,.85); outline-offset: 8px; }
.project-portal:hover .planet-visual::after, .project-portal:focus-visible .planet-visual::after { opacity: .82; }
.project-portal:hover .portal-content, .project-portal:focus-visible .portal-content { transform: translateZ(64px) translateY(-3px); }
.project-portal:hover .portal-content b, .project-portal:focus-visible .portal-content b { transform: translate(4px,-4px); }
.project-portal:focus-visible { outline: none; opacity: 1 !important; --portal-dim: 1 !important; pointer-events: auto; }
.portal-locked .portal-content > span { opacity: .58; }

.portal-soon .planet-visual { opacity: 1; }
.portal-soon .portal-content { width: 86%; }
.portal-soon .portal-content strong { font-size: clamp(32px,3.2vw,52px); letter-spacing: -.035em; }
.portal-ringed .planet-visual { inset: -7%; box-shadow: none; }
/* 003: the small planet carries a big tree, so the picture is taller than the sphere */
.portal-family .planet-visual { inset: -16% -12% -8%; border-radius: 0; box-shadow: none; outline: none !important; }
.portal-family { --accent: #a8cda2; --planet-shadow: #689c7d40; --sphere-x: 25.4%; --sphere-y: 40.4%; --sphere-d: 51.2%; }
/* 004: the family house, members only */
.portal-home { --accent: #e7b98f; --planet-shadow: #c9954540; --sphere-x: 25.4%; --sphere-y: 34.4%; --sphere-d: 51.2%; }
/* the house planet has a house and trees sticking out of the sphere */
.portal-home .planet-visual { inset: -6%; border-radius: 0; box-shadow: none; outline: none !important; }
/* 003 and 004: the picture is bigger than the sphere, so the round frame, the shading and the
   shadow of planets 001–002 are put on the sphere itself (measured on the pictures) */
.portal-family .planet-visual::before, .portal-home .planet-visual::before { content: ""; position: absolute; z-index: -1; left: var(--sphere-x); top: var(--sphere-y); width: var(--sphere-d); aspect-ratio: 1; border-radius: 50%; pointer-events: none; outline: 1px solid transparent; outline-offset: 8px; transition: outline-color .25s ease; box-shadow: 0 38px 85px rgba(0,0,0,.46), 0 0 72px var(--planet-shadow); }
.portal-family .planet-visual::after, .portal-home .planet-visual::after { display: block; inset: auto; left: var(--sphere-x); top: var(--sphere-y); width: var(--sphere-d); aspect-ratio: 1; }
.portal-family:hover .planet-visual::before, .portal-family:focus-visible .planet-visual::before,
.portal-home:hover .planet-visual::before, .portal-home:focus-visible .planet-visual::before { outline-color: rgba(238,245,247,.85); }
.portal-ringed .planet-visual::after { display: none; }

@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .site-header { grid-template-columns: 1fr auto; padding: 0 20px; }
  .monogram { font-size: 21px; }
  .nav-case { padding: 14px 0 11px; font-size: 9px; }
  .main-nav { display: none; }
  .journey-stage { min-height: 560px; }
  .archive-hud { right: 18px; top: calc(var(--header-h) + 5vh); bottom: 5vh; }
  .archive-walker { width: clamp(260px,56vw,430px); }
  .project-portal { width: clamp(215px,47vw,315px); }
  .portal-case { --portal-x: 22vw; --portal-y: -7vh; }
  .portal-travel { --portal-x: -20vw; --portal-y: 17vh; }
  .portal-high { --portal-x: 18vw; --portal-y: -4vh; }
}

@media (max-width: 560px) {
  .project-journey { min-height: 900svh; }
  .archive-hud { display: none; }
  .galaxy-backdrop { inset: -10% -36%; }
  .galaxy-backdrop img { object-position: 50% 54%; }
  .cosmic-depth { inset: -18% -40%; }
  .archive-walker { width: min(78vw,380px); bottom: -4vh; }
  .project-portal { width: min(68vw,272px); }
  .portal-case { --portal-x: 16vw; --portal-y: 0vh; }
  .portal-travel { --portal-x: -15vw; --portal-y: 16vh; }
  .portal-high { --portal-x: 14vw; --portal-y: -4vh; }
  .portal-content { width: 72%; gap: 8px; }
  .portal-content strong { font-size: clamp(31px,10.5vw,45px); }
  .portal-content small, .portal-content > span { font-size: 11px; }
}

@media (max-width: 900px) {
  .portal-verdant, .portal-ice { --portal-x: -18vw; --portal-y: 10vh; }
  .portal-amethyst, .portal-ringed { --portal-x: 18vw; --portal-y: -3vh; }
}
@media (max-width: 560px) {
  .portal-verdant, .portal-ice { --portal-x: -12vw; }
  .portal-amethyst, .portal-ringed { --portal-x: 12vw; }
  .portal-ringed { width: min(60vw,240px); --portal-x: 10vw; }
}

@media (max-height: 560px) and (max-width: 900px) {
  .journey-stage { min-height: 100svh; }
  .archive-walker { width: min(39vw,280px); bottom: -10vh; }
  .project-portal { width: min(43vh,225px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .project-journey { min-height: auto; }
  .journey-stage { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; gap: 32px 24px; height: auto; min-height: 100svh; padding: calc(var(--header-h) + 40px) 5vw 48px; }
  .archive-hud, .cosmic-depth, .archive-walker { display: none; }
  .galaxy-backdrop { inset: 0; transform: none !important; }
  .journey-stage > .project-portal { position: relative; left: auto; top: auto; width: min(100%,320px); justify-self: center; transform: none !important; opacity: 1 !important; --portal-dim: 1 !important; will-change: auto; }
  .portal-content { opacity: 1; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 800px) {
  .journey-stage { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 12px; }
  .portal-content strong { font-size: clamp(26px,5vw,40px); }
  .portal-soon .portal-content strong { font-size: clamp(24px,4.5vw,36px); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 420px) {
  .journey-stage { grid-template-columns: 1fr; }
  .portal-content strong { font-size: 42px; }
  .portal-soon .portal-content strong { font-size: 38px; }
}