/* THE ASCENT, rebuilt. One climb in eight chapters.
   A layered base camp, then chapters that each hold a stage of the climb: the fog, the three pillars with a
   persistent mountain map, the brotherhood, the Method, the summit. Grounds step from cold night to warm light.
   Everything that moves does so on transform, opacity or clip-path. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: block; src: url("/assets/fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: block; src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --canvas: #070910;
  --ground: #08090E;
  --s-mission: #08090E;
  --s-who: #08090E;
  --s-pillars: #08090E;
  --s-inner: #08090E;
  --s-method: #08090E;
  --s-summit: #0B0906;
  --s-black: #010101;
  --ink: #F3EFE6;
  --ink-soft: #A8A49B;
  --ink-dim: #86827A;
  --gold: #E7B96C;
  --gold-deep: #C8923F;
  --gold-ink: #171108;
  --silver: #C9CDD4;
  --silver-2: #8E949E;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-draw: cubic-bezier(0.6, 0, 0.2, 1);
  --gutter: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --max: 1360px;
  --header-h: 68px;
  --t-hero: clamp(64px, 11.5vw, 176px);
  --t-display: clamp(38px, 5.6vw, 84px);
  --t-big: clamp(26px, 3.4vw, 50px);
  --t-statement: clamp(20px, 1.9vw, 27px);
  --t-body: clamp(17px, 1.12vw, 19px);
  --t-small: 15px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; background: var(--canvas); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); font-size: var(--t-body); line-height: 1.6; color: var(--ink); background: var(--canvas); overflow-x: clip; font-variation-settings: "wdth" 100; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button, a, [role="button"] { touch-action: manipulation; }
.btn, .menu-btn, .nav a { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
::selection { background: var(--gold); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 100; padding: 10px 14px; background: var(--gold); color: var(--gold-ink); font-weight: 600; }
.skip:focus { top: 12px; }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- type ---------- */
.display, .display-xl, .big, .name { font-variation-settings: "wdth" 74; font-weight: 560; letter-spacing: -0.025em; line-height: 0.96; text-wrap: balance; }
.display { font-size: var(--t-display); }
.display-xl { font-size: var(--t-hero); line-height: 0.9; letter-spacing: -0.035em; }
.big { font-size: var(--t-big); line-height: 1.02; }
.statement { font-size: var(--t-statement); line-height: 1.35; max-width: 34ch; text-wrap: pretty; font-weight: 400; }
.gold { color: var(--gold); }
.soft { color: var(--ink-soft); }
p { text-wrap: pretty; }
.ref { color: var(--ink-soft); font-size: var(--t-small); }

/* ---------- layout ---------- */
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.5vw, 40px); }
.station { position: relative; padding-block: clamp(80px, 11vw, 168px); }
.station > .wrap { position: relative; }

/* ---------- header ---------- */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--header-h); padding-top: env(safe-area-inset-top, 0px); color: var(--ink); background: rgba(7, 9, 16, 0); transition: background-color 240ms var(--ease-out); }
.site-head.scrolled { background: rgba(8, 9, 14, 0.985); }
.site-head .bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .mark { width: auto; height: 30px; }
.brand .wordmark { font-size: 14px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.nav a { text-decoration: none; font-size: var(--t-small); font-weight: 500; color: var(--ink-soft); padding: 10px 0; white-space: nowrap; transition: color 160ms var(--ease-out); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav .act { color: var(--gold-ink); background: var(--gold); padding: 10px 16px; font-weight: 600; }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 8px 4px; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.menu-btn .lines { position: relative; width: 22px; height: 14px; }
.menu-btn .lines i { position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform 240ms var(--ease-out); }
.menu-btn .lines i:first-child { top: 0; } .menu-btn .lines i:last-child { top: 12px; }
.menu-btn[aria-expanded="true"] .lines i:first-child { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .lines i:last-child { transform: translateY(-6px) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--ink); }
  .nav .act:hover { color: var(--gold-ink); background: #F0C77F; }
}

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; color: var(--gold-ink); background: var(--gold); white-space: nowrap; transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn.quiet { color: var(--ink); background: rgba(243, 239, 230, 0.1); }
.btn[aria-disabled="true"] { color: var(--ink-soft); background: rgba(243, 239, 230, 0.08); cursor: not-allowed; }
.link { display: inline-block; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; padding: 6px 0; transition: text-decoration-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.inline-link { color: var(--ink); text-decoration-color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #F0C77F; }
  .btn.quiet:hover { background: rgba(243, 239, 230, 0.16); }
  .link:hover { text-decoration-color: var(--ink); }
  .inline-link:hover { color: var(--gold); }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ---------- Chapter 1: base camp ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; background: var(--canvas); }
html.js .hero { height: 150svh; }
.hero-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }
.plane { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; pointer-events: none; will-change: transform; backface-visibility: hidden; }
html.js .plane-img { inset: auto; object-fit: fill; width: auto; height: auto; max-width: none; }
html.js .plane-range, html.js .plane-light { display: block; }
.plane-range, .plane-light { display: none; }
html.js .plane-range { -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 40%); mask-image: linear-gradient(to bottom, transparent 20%, #000 40%); }
.plane-fore { -webkit-mask-image: linear-gradient(to top, #000 0 14%, transparent 34%); mask-image: linear-gradient(to top, #000 0 14%, transparent 34%); }
.plane-mist { background: radial-gradient(60% 40% at 30% 70%, rgba(28, 24, 20, 0.55), rgba(7, 9, 16, 0) 70%); }
.hero-copy { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-50%); will-change: transform, opacity; }
.hero-copy .wrap { position: relative; }
.hero-scrim { position: absolute; z-index: 2; left: 0; top: 0; width: 78%; height: 100%; pointer-events: none; background: radial-gradient(70% 60% at 22% 52%, rgba(7, 9, 16, 0.72), rgba(7, 9, 16, 0) 72%); }
.hero-band { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 44%; pointer-events: none; opacity: 0; background: linear-gradient(to top, var(--s-mission) 0 52%, rgba(10, 13, 21, 0) 100%); will-change: opacity; }
.hero-copy h1 { display: flex; flex-wrap: wrap; column-gap: 0.18em; color: var(--ink); }
.hero-copy h1 .vs { color: var(--gold); font-weight: 300; }
.hero-copy .lede { max-width: 42ch; margin-top: clamp(20px, 2.4vw, 32px); font-size: var(--t-statement); line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.hero-copy .actions { margin-top: clamp(24px, 3vw, 40px); }
.hero-copy .w { display: inline-block; }
@keyframes rise { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
html.js .hero-copy .w, html.js .hero-copy .lede, html.js .hero-copy .actions { animation: rise 900ms var(--ease-out) both; }
html.js .hero-copy .w:nth-child(2) { animation-delay: 140ms; }
html.js .hero-copy .w:nth-child(3) { animation-delay: 280ms; }
html.js .hero-copy .lede { animation-delay: 520ms; }
html.js .hero-copy .actions { animation-delay: 700ms; }
.hero.parked .plane { will-change: auto; }

/* ---------- the world system: every chapter stands inside an image world ----------
   .world is a full-bleed layer behind the chapter's copy. An environment cut from the same mountain artwork sits at its
   natural size (never stretched past it), the storyboard scene sits in the chapter's negative space with dissolved edges,
   shades melt the top and bottom into the shared ground so chapters join without a seam, and a static grain holds it
   together. Layers marked data-depth drift a few percent with scroll (inline transforms only, while on screen). */
.world { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.world > * { position: absolute; }
.world .env { left: 0; width: 100%; height: auto; will-change: transform; }
.world .shade-top { inset: 0 0 auto 0; height: min(30%, 320px); background: linear-gradient(to bottom, var(--ground) 0, rgba(8, 9, 14, 0) 100%); }
.world .shade-bottom { inset: auto 0 0 0; height: min(30%, 320px); background: linear-gradient(to top, var(--ground) 0, rgba(8, 9, 14, 0) 100%); }
.world .grain, .pw .grain { display: none; }
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url("/assets/grain.png") repeat; opacity: 0.1; }
.site-foot > .wrap, .section > .wrap, .page-hero .wrap { position: relative; z-index: 1; }
.world .plate-wrap { aspect-ratio: 549 / 462; will-change: transform; }
.world .plate-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.station > .wrap, .summit > .wrap { position: relative; z-index: 1; }

/* ---------- Mission: the night sky above base camp ---------- */
.mission { background: var(--ground); color: var(--ink); overflow: clip; padding-bottom: clamp(120px, 14vw, 220px); }
.mission .env-night { top: -2%; aspect-ratio: 1600 / 900; opacity: 0.85; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.mission .env-valley { bottom: -4%; aspect-ratio: 1600 / 585; opacity: 0.55; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%); mask-image: linear-gradient(to bottom, transparent 0, #000 34%); }
.mission .shade-bottom { height: 22%; }
.mission .head { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.mission .head .display { max-width: 11ch; }
.mission .head .statement { justify-self: end; }
.mission .creed { margin-top: clamp(44px, 6vw, 96px); font-size: clamp(24px, 2.6vw, 38px); line-height: 1.22; max-width: 26ch; color: var(--gold); font-weight: 460; text-wrap: balance; }
.ledger { margin-top: clamp(64px, 9vw, 140px); }
.ledger .row { display: grid; grid-template-columns: 5fr 7fr; gap: 20px clamp(28px, 4vw, 64px); padding-block: clamp(22px, 2.6vw, 34px); }
.ledger h3 { font-variation-settings: "wdth" 74; font-weight: 560; letter-spacing: -0.02em; font-size: var(--t-big); line-height: 1; text-shadow: 0 2px 24px rgba(8, 9, 14, 0.9); }
.ledger p { max-width: 54ch; color: var(--ink); text-shadow: 0 1px 18px rgba(8, 9, 14, 0.95); }
.mission .veil-left { inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(8, 9, 14, 0.72) 0, rgba(8, 9, 14, 0.5) 50%, rgba(8, 9, 14, 0) 100%); }

/* ---------- scenes used as banners on phones (pillars) ---------- */
.scene { position: relative; width: 100%; max-width: 620px; aspect-ratio: 549 / 462; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 34%, rgba(0, 0, 0, 0.55) 68%, transparent 100%); mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 34%, rgba(0, 0, 0, 0.55) 68%, transparent 100%); }
.scene > img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; will-change: transform; }
.scene .lift { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 72% 34%, rgba(231, 185, 108, 0.45), rgba(231, 185, 108, 0) 70%); opacity: 0; will-change: opacity; }

/* ---------- Chapter 2: the unknown. One fog world, edge to edge; the copy stands in the fog, not beside a photo ---------- */
.who { background: var(--s-who); overflow: hidden; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(96px, 12vw, 176px) clamp(120px, 14vw, 220px); }
.fog-world { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--s-mission) 0, #12171F 18%, #1A1F28 48%, #11141B 80%, var(--s-pillars) 100%); }
.fog-world .plate-wrap { position: absolute; left: -4%; top: 40%; transform: translateY(-50%); width: 60%; aspect-ratio: 549 / 462; -webkit-mask-image: radial-gradient(ellipse 58% 60% at 48% 56%, #000 38%, rgba(0, 0, 0, 0.6) 68%, transparent 100%); mask-image: radial-gradient(ellipse 58% 60% at 48% 56%, #000 38%, rgba(0, 0, 0, 0.6) 68%, transparent 100%); }
.fog-world .plate { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; will-change: transform; }
.fog-world .man { position: absolute; left: 40.8%; top: 32.9%; width: 19.3%; height: auto; transform-origin: 50% 100%; will-change: transform; }
.fog-world .fog { position: absolute; will-change: transform; }
.fog-world .fog-a { inset: -20% -10% -10% -30%; background: radial-gradient(38% 34% at 36% 54%, rgba(158, 166, 176, 0.42), rgba(158, 166, 176, 0) 70%); animation: driftA 46s ease-in-out infinite alternate; }
.fog-world .fog-b { inset: -10% -30% -20% 0; background: radial-gradient(46% 32% at 52% 62%, rgba(130, 138, 150, 0.38), rgba(130, 138, 150, 0) 70%); animation: driftB 58s ease-in-out infinite alternate; }
.fog-world .fog-front { position: absolute; inset: auto 0 0 0; height: 72%; background: linear-gradient(to bottom, rgba(140, 148, 158, 0) 0, rgba(140, 148, 158, 0.42) 60%, rgba(110, 118, 130, 0.55) 100%); opacity: 0.15; will-change: opacity; }
.fog-world .copy-veil { position: absolute; inset: 0 0 0 44%; background: radial-gradient(72% 68% at 68% 50%, rgba(14, 17, 25, 0.78), rgba(14, 17, 25, 0) 74%); }
.fog-world .fog-floor { position: absolute; inset: auto 0 0 0; height: 24%; background: linear-gradient(to bottom, rgba(8, 9, 14, 0) 0, var(--s-pillars) 100%); }
.fog-scene.still .fog { animation-play-state: paused; }
@keyframes driftA { from { transform: translate3d(-4%, 0, 0); } to { transform: translate3d(5%, 2%, 0); } }
@keyframes driftB { from { transform: translate3d(5%, 1%, 0); } to { transform: translate3d(-4%, -2%, 0); } }
.who .wrap { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.who .copy { width: min(100%, 50%); }
.who .copy .display { max-width: 14ch; }
.who .copy .body { margin-top: clamp(20px, 2.4vw, 32px); max-width: 46ch; }
.who .copy .body + .body { margin-top: 1em; }
.who .lines { margin-top: clamp(28px, 3vw, 44px); display: grid; gap: clamp(8px, 1vw, 14px); }
.who .lines li { font-variation-settings: "wdth" 74; font-weight: 560; letter-spacing: -0.02em; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.02; color: var(--ink-soft); transition: color 320ms var(--ease-out); }
.who .lines li.lit { color: var(--gold); }
.who .lines li.wipe { clip-path: inset(0 100% 0 0); }
.who .lines li.wipe.is-in { clip-path: inset(0 0 0 0); transition: clip-path 760ms var(--ease-out), color 320ms var(--ease-out); }
.who .copy .note { margin-top: clamp(24px, 3vw, 40px); color: var(--gold); font-size: var(--t-statement); line-height: 1.35; max-width: 30ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Chapters 3 to 5: the three pillars, one held world ----------
   .pw is a viewport-high sticky layer behind the whole chapter. The valley of the same mountain lies along its foot; the
   pillar being read crossfades in as its scene (dawn, the pause, the climb) on the left, with a slow push-in; the climbing
   map stands in the foreground of the scene like the ridge under him. The copy scrolls in the right half over a veil. */
.pillars { position: relative; background: var(--ground); overflow: clip; }
.pw { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; z-index: 0; }
.pw .env-valley { bottom: 0; aspect-ratio: 1600 / 585; opacity: 0.5; }
.pw-scene { position: absolute; left: -3%; top: calc(var(--header-h) + 1svh); height: 76svh; aspect-ratio: 549 / 462; opacity: 0; transition: opacity 1000ms var(--ease-out); -webkit-mask-image: radial-gradient(ellipse 52% 52% at 48% 46%, #000 52%, rgba(0, 0, 0, 0.5) 78%, transparent 100%); mask-image: radial-gradient(ellipse 52% 52% at 48% 46%, #000 52%, rgba(0, 0, 0, 0.5) 78%, transparent 100%); }
.pw-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 2600ms var(--ease-out); }
.pw-scene .lift { position: absolute; inset: 0; background: radial-gradient(52% 48% at 78% 30%, rgba(231, 185, 108, 0.4), rgba(231, 185, 108, 0) 70%); opacity: 0; transition: opacity 2400ms var(--ease-out) 400ms; }
[data-pillars][data-active="1"] .pw-scene.s1, [data-pillars][data-active="2"] .pw-scene.s2, [data-pillars][data-active="3"] .pw-scene.s3 { opacity: 1; }
[data-pillars][data-active="1"] .pw-scene.s1 > img, [data-pillars][data-active="2"] .pw-scene.s2 > img, [data-pillars][data-active="3"] .pw-scene.s3 > img { transform: scale(1); }
[data-pillars][data-active="1"] .pw-scene.s1 .lift { opacity: 1; }
.pw-haze { inset: auto 0 0 0; height: 48%; background: linear-gradient(to top, var(--ground) 0, rgba(8, 9, 14, 0.6) 48%, rgba(8, 9, 14, 0) 100%); }
.pw-veil { inset: 0 0 0 46%; background: linear-gradient(to right, rgba(8, 9, 14, 0) 0, rgba(8, 9, 14, 0.8) 24%, rgba(8, 9, 14, 0.88) 100%); }
.pw-map { position: absolute; left: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: 3svh; z-index: 1; width: min(560px, 40vw); pointer-events: none; }
.pw-map .stage { pointer-events: auto; }
.pw .stage .camp-label { font-size: 15px; }
.pw .stage .camp-q { font-size: 15px; }
.pillars-inner { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.5vw, 40px); padding-block: clamp(120px, 18svh, 200px) clamp(140px, 30svh, 300px); pointer-events: none; }
.pillars-inner .head, .pillars-inner .pillar-list { grid-column: 7 / span 6; pointer-events: auto; }
.pillars-inner::before, .pillars-inner::after { content: ""; position: absolute; left: 50%; width: 100vw; margin-left: -50vw; height: 34svh; z-index: -1; pointer-events: none; }
.pillars-inner::before { top: 0; background: linear-gradient(to bottom, var(--ground), rgba(8, 9, 14, 0)); }
.pillars-inner::after { bottom: 0; background: linear-gradient(to top, var(--ground) 20%, rgba(8, 9, 14, 0)); }
/* over the photograph the map is the route drawn on his mountain: profile, camps and the line of light, no terrain box */
@media (min-width: 901px) {
  .pw .stage g[clip-path], .pw .stage .terrain { display: none; }
  .pw .stage .profile { stroke: rgba(226, 229, 234, 0.72); stroke-width: 1.6; }
  .pw .stage .alt line { stroke: rgba(255, 255, 255, 0.1); }
}
.pillars .head .display { max-width: 12ch; }
.pillars .head .statement { margin-top: clamp(20px, 2.4vw, 32px); }
.pillar-list { display: grid; gap: 0; margin-top: clamp(24px, 4svh, 48px); }
.pillar { min-height: 88svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(32px, 6svh, 64px); }
.pillar-scene { display: none; }
.pillar .q { font-variation-settings: "wdth" 74; font-weight: 560; letter-spacing: -0.025em; font-size: var(--t-big); line-height: 1; color: var(--ink); }
.pillar h3 { margin-top: 10px; font-size: var(--t-statement); font-weight: 500; color: var(--gold); }
.pillar p { margin-top: clamp(16px, 1.8vw, 22px); max-width: 56ch; }
.pillar .ref { margin-top: 12px; }
.pillars .connect { padding-top: clamp(16px, 2vw, 24px); }
.pillars .connect .big { max-width: 12ch; }
.pillars .connect p { margin-top: 18px; max-width: 52ch; }

/* the climbing map (shared with the Method page) */
.pillars-run { margin-top: clamp(48px, 6vw, 96px); align-items: start; }
.stage { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.pw .stage { position: static; }
.stage svg { width: 100%; height: auto; display: block; overflow: visible; }
.stage .alt line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; stroke-dasharray: 2 6; }
.stage .terrain { opacity: 0.35; }
.stage .terrain-img { opacity: 0.9; }
.stage .profile { fill: none; stroke: rgba(201, 205, 212, 0.5); stroke-width: 1.2; stroke-linejoin: round; }
.stage .climb { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 780; stroke-dashoffset: 780; transition: stroke-dashoffset 1200ms var(--ease-draw); }
.stage .climb-glow { fill: none; stroke: var(--gold); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: 0.18; stroke-dasharray: 780; stroke-dashoffset: 780; transition: stroke-dashoffset 1200ms var(--ease-draw); }
.stage .camp { cursor: pointer; }
.stage .camp .ring { fill: none; stroke: var(--silver-2); stroke-width: 1; transition: stroke 400ms; }
.stage .camp .dot { fill: var(--silver-2); transition: fill 400ms; }
.stage .camp-label { font-family: var(--font); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--ink-soft); font-weight: 600; transition: fill 400ms; paint-order: stroke; stroke: rgba(8, 9, 14, 0.8); stroke-width: 3px; }
.stage .camp-q { font-family: var(--font); font-size: 14px; fill: var(--ink-soft); opacity: 0.85; transition: fill 400ms, opacity 400ms; paint-order: stroke; stroke: rgba(8, 9, 14, 0.8); stroke-width: 3px; }
.stage .camp:focus-visible { outline: none; }
.stage .camp:focus-visible .ring { stroke: var(--gold); stroke-width: 2; }
.stage .walker { fill: #FFF1D6; }
.stage .halo { fill: var(--gold); opacity: 0.25; }
.stage .climber { transition: transform 1100ms var(--ease-out); }
.stage .peak-light { opacity: 0; transition: opacity 900ms var(--ease-out); }
[data-pillars][data-active="1"] .c1 .ring, [data-pillars][data-active="2"] .c1 .ring, [data-pillars][data-active="2"] .c2 .ring,
[data-pillars][data-active="3"] .c1 .ring, [data-pillars][data-active="3"] .c2 .ring, [data-pillars][data-active="3"] .c3 .ring { stroke: var(--gold); }
[data-pillars][data-active="1"] .c1 .dot, [data-pillars][data-active="2"] .c1 .dot, [data-pillars][data-active="2"] .c2 .dot,
[data-pillars][data-active="3"] .c1 .dot, [data-pillars][data-active="3"] .c2 .dot, [data-pillars][data-active="3"] .c3 .dot { fill: var(--gold); }
[data-pillars][data-active="1"] .c1 .camp-label, [data-pillars][data-active="2"] .c2 .camp-label, [data-pillars][data-active="3"] .c3 .camp-label { fill: var(--ink); }
[data-pillars][data-active="1"] .c1 .camp-q, [data-pillars][data-active="2"] .c2 .camp-q, [data-pillars][data-active="3"] .c3 .camp-q { fill: var(--gold); opacity: 1; }
[data-pillars][data-active="1"] .climb, [data-pillars][data-active="1"] .climb-glow { stroke-dashoffset: 641; }
[data-pillars][data-active="2"] .climb, [data-pillars][data-active="2"] .climb-glow { stroke-dashoffset: 417; }
[data-pillars][data-active="3"] .climb, [data-pillars][data-active="3"] .climb-glow { stroke-dashoffset: 0; }
[data-pillars][data-active="3"] .peak-light { opacity: 1; }
[data-pillars][data-active="1"] .climber { transform: translate(0, 0); }
[data-pillars][data-active="2"] .climber { transform: translate(180px, -80px); }
[data-pillars][data-active="3"] .climber { transform: translate(480px, -270px); }
.readout { margin-top: 14px; display: flex; align-items: baseline; gap: 12px; font-size: var(--t-small); color: var(--ink-soft); }
.readout .cur { color: var(--gold); font-weight: 600; }
.readout .qtext { margin-left: auto; color: var(--ink); }
.pillars-run .pillar-list { grid-column: 7 / span 6; gap: clamp(56px, 7vw, 112px); margin-top: 0; }
.pillars-run .pillar { min-height: 0; padding-block: 0; }

/* ---------- Chapter 6: the brotherhood. The lantern on the path, on the right; the copy in the dark beside them ---------- */
.inner { background: var(--ground); overflow: clip; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(120px, 14vw, 200px); }
.inner .env-valley { bottom: -2%; aspect-ratio: 1600 / 585; opacity: 0.32; }
.inner .plate-wrap { right: -3%; top: 50%; width: 58%; margin-top: -24.4%; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 52%, rgba(0, 0, 0, 0.5) 78%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 52%, rgba(0, 0, 0, 0.5) 78%, transparent 100%); }
.inner .lantern { position: absolute; left: 54.6%; top: 78%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 196, 120, 0.34) 0, rgba(255, 196, 120, 0.1) 32%, rgba(255, 196, 120, 0) 62%); animation: lantern 3.6s ease-in-out infinite alternate; }
@keyframes lantern { from { opacity: 0.75; } to { opacity: 1; } }
.inner .veil-right { inset: 0 44% 0 0; background: radial-gradient(72% 68% at 34% 50%, rgba(8, 9, 14, 0.82), rgba(8, 9, 14, 0) 74%); }
.inner .wrap { display: flex; justify-content: flex-start; }
.inner .copy { width: min(100%, 48%); }
.inner .copy .display { max-width: 12ch; }
.inner .copy p { margin-top: clamp(18px, 2vw, 26px); max-width: 52ch; }
.inner .copy p:first-of-type { margin-top: clamp(24px, 3vw, 40px); }
.inner .focus { margin-top: clamp(20px, 2.4vw, 32px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; color: var(--ink-soft); }
.inner .focus li { position: relative; padding-left: 18px; }
.inner .focus li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1.5px; background: var(--gold); }
.inner .actions { margin-top: clamp(24px, 3vw, 40px); }

/* ---------- Chapter 7: the Method. The summit ahead, faint; then the founder lit against the brick ---------- */
.method-ch { background: var(--ground); overflow: clip; padding-bottom: 0; }
.method-ch > .world { bottom: auto; height: min(120svh, 1100px); }
.method-ch .env-high { top: -4%; aspect-ratio: 1600 / 900; opacity: 0.55; }
.method-ch .veil-full { inset: 0; background: linear-gradient(to bottom, rgba(8, 9, 14, 0.2) 0, rgba(8, 9, 14, 0.62) 50%, var(--ground) 96%); }
.method-ch .head { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.method-ch .head .display { max-width: 11ch; }
.method-ch .head .statement { justify-self: end; }
.method-ch .exp { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(24px, 3vw, 48px); }
.method-ch .exp li { padding-top: 14px; border-top: 1px solid rgba(243, 239, 230, 0.14); color: var(--ink); }
.method-ch .exp li b { display: block; font-weight: 600; margin-bottom: 4px; }
.method-ch .founder { position: relative; margin-top: clamp(72px, 9vw, 140px); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(80px, 10vw, 140px) clamp(56px, 6vw, 96px); }
.founder-world { position: absolute; inset: 0; margin: 0; z-index: 0; }
.founder-world .photo-wrap { position: absolute; left: 0; top: 0; bottom: 0; width: 54%; will-change: transform; -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 26%, #000 76%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 52%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 26%, #000 76%, transparent 100%); mask-composite: intersect; }
.founder-world .photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.founder-world .veil-left { position: absolute; inset: 0 0 0 30%; background: linear-gradient(to right, rgba(8, 9, 14, 0) 0, rgba(8, 9, 14, 0.7) 30%, var(--ground) 62%); }
.founder-world .shade-bottom { position: absolute; inset: auto 0 0 0; height: 24%; background: linear-gradient(to top, var(--ground), rgba(8, 9, 14, 0)); }
.founder-world .photo-cap { position: absolute; left: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: clamp(28px, 4vw, 48px); z-index: 1; display: flex; gap: 24px; font-size: var(--t-small); color: var(--ink-soft); }
.method-ch .founder > .wrap { position: relative; z-index: 1; }
.method-ch .founder .copy { margin-left: auto; width: min(100%, 46%); }
.method-ch .founder .copy .big { max-width: 14ch; }
.method-ch .founder .copy p { margin-top: clamp(16px, 2vw, 24px); max-width: 52ch; }
.method-ch .founder .copy .face { float: right; width: clamp(80px, 8vw, 110px); height: clamp(80px, 8vw, 110px); object-fit: cover; margin: 0 0 12px 20px; }
.method-ch .founder .actions { margin-top: clamp(24px, 3vw, 40px); }
.method-ch .caveat { margin-top: clamp(40px, 5vw, 72px); margin-left: auto; width: min(100%, 46%); color: var(--ink-soft); }
.reveal-up { clip-path: inset(100% 0 0 0); }
.reveal-up.is-in { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease-out); }

/* ---------- Chapter 8: the summit. The fog has cleared; the logo stands on the rock with him ---------- */
.summit { position: relative; background: var(--ground); color: var(--ink); text-align: center; overflow: clip; padding-block: clamp(96px, 12vw, 170px) clamp(72px, 8vw, 120px); }
.summit .env-summit { bottom: 0; aspect-ratio: 1600 / 900; opacity: 0.4; }
.summit .plate-wrap { left: 50%; top: clamp(200px, 22vw, 320px); width: min(1080px, 100%); margin-left: max(-540px, -50%); -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 52%, rgba(0, 0, 0, 0.5) 78%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 52%, rgba(0, 0, 0, 0.5) 78%, transparent 100%); }
.summit .warm { inset: 0; background: radial-gradient(60% 40% at 50% 60%, rgba(231, 185, 108, 0.12), rgba(231, 185, 108, 0) 70%); }
.summit .shade-bottom { height: 34%; background: linear-gradient(to top, var(--s-black) 0, rgba(1, 1, 1, 0.6) 40%, rgba(1, 1, 1, 0) 100%); }
.summit .display-xl { justify-content: center; display: flex; flex-wrap: wrap; column-gap: 0.18em; text-shadow: 0 6px 40px rgba(8, 9, 14, 0.7); }
.summit .display-xl .vs { color: var(--gold); font-weight: 300; }
.summit .pillars-line { margin-top: clamp(14px, 1.8vw, 24px); display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; color: var(--silver); font-size: var(--t-statement); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; text-shadow: 0 2px 18px rgba(8, 9, 14, 0.9); }
.summit .logo { display: block; width: min(440px, 70vw); margin: clamp(300px, 34vw, 480px) auto 0; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.75)); }
.summit .close { margin: clamp(8px, 1vw, 16px) auto 0; max-width: 40ch; font-size: var(--t-statement); line-height: 1.4; }
.summit .totop { display: inline-block; margin-top: clamp(28px, 4vw, 48px); }

/* ---------- footer: the name returns at full width ---------- */
.site-foot { background: var(--s-black); color: var(--ink); padding-block: clamp(40px, 5vw, 72px) calc(28px + env(safe-area-inset-bottom, 0px)); }
.site-foot .foot-mark { width: auto; height: clamp(56px, 6vw, 84px); margin-bottom: clamp(20px, 2.4vw, 32px); }
.site-foot .name { font-size: clamp(44px, 9.5vw, 150px); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; color: rgba(243, 239, 230, 0.92); }
.site-foot .cols { margin-top: clamp(36px, 5vw, 72px); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.site-foot h4 { font-size: var(--t-small); font-weight: 500; color: var(--ink-soft); margin-bottom: 12px; }
.site-foot li + li { margin-top: 8px; }
.site-foot a { text-decoration: none; color: var(--ink); }
.site-foot .cols p { color: var(--ink); max-width: 36ch; }
.site-foot .cols .lead { color: var(--ink-soft); }
.site-foot .legal { margin-top: clamp(36px, 5vw, 64px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: var(--t-small); color: var(--ink-soft); }
.site-foot .legal a { color: var(--ink); margin-right: 20px; }
@media (hover: hover) and (pointer: fine) { .site-foot a:hover { color: var(--gold); } }

/* ---------- inner pages ---------- */
.page-hero { position: relative; padding-top: calc(var(--header-h) + clamp(64px, 9vw, 140px)); padding-bottom: clamp(48px, 6vw, 96px); background: var(--canvas); overflow: hidden; }
.page-hero .env { position: absolute; inset: 0 0 0 50%; z-index: 0; opacity: 0.55; pointer-events: none; }
.page-hero .env img { width: 100%; height: 100%; object-fit: cover; object-position: 82% 28%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%); mask-image: linear-gradient(to right, transparent 0, #000 40%); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .display { max-width: 12ch; }
.page-hero .lede-stack { margin-top: clamp(24px, 3vw, 44px); display: grid; gap: 16px; max-width: 56ch; }
.page-hero .lede-stack p { font-size: var(--t-statement); line-height: 1.42; }
.section { padding-block: clamp(56px, 7vw, 112px); }
.section.alt { background: var(--s-mission); }
.section.warm { background: var(--s-summit); }
.two { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.two .big { max-width: 12ch; }
.two .copy p + p { margin-top: 1em; }
.two .copy p { max-width: 56ch; }
.incl { margin-top: clamp(20px, 2.4vw, 32px); display: grid; gap: 10px; }
.incl li { position: relative; padding-left: 22px; }
.incl li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1.5px; background: var(--gold); }
.price { font-variation-settings: "wdth" 74; font-weight: 560; letter-spacing: -0.02em; font-size: var(--t-display); line-height: 1; }
.price small { display: block; margin-top: 10px; font-size: var(--t-statement); font-variation-settings: "wdth" 100; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); }
.joining .actions { margin-top: clamp(24px, 3vw, 40px); }
.joining .note { margin-top: 18px; font-size: var(--t-small); color: var(--ink-soft); max-width: 60ch; }
.prose { max-width: 66ch; }
.prose h2 { font-variation-settings: "wdth" 74; font-weight: 560; letter-spacing: -0.02em; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; margin-top: clamp(36px, 4vw, 56px); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: 14px; }
.prose ul { padding-left: 20px; list-style: disc; }
.prose li + li { margin-top: 6px; }
.prose .note { color: var(--gold); font-size: var(--t-small); }
.prose strong { font-weight: 600; }

/* ---------- entrances ---------- */
html.js .in { opacity: 0; transform: translateY(14px); }
html.js .in.is-in { opacity: 1; transform: none; transition: opacity 640ms var(--ease-out), transform 760ms var(--ease-out); transition-delay: var(--d, 0ms); }
html.js .in-group > * { opacity: 0; transform: translateY(14px); }
html.js .in-group.is-in > * { opacity: 1; transform: none; transition: opacity 640ms var(--ease-out), transform 760ms var(--ease-out); }
html.js .in-group.is-in > :nth-child(2) { transition-delay: 70ms; }
html.js .in-group.is-in > :nth-child(3) { transition-delay: 140ms; }
html.js .in-group.is-in > :nth-child(4) { transition-delay: 210ms; }
html.js .in-group.is-in > :nth-child(5) { transition-delay: 280ms; }
html.js .in-group.is-in > :nth-child(6) { transition-delay: 350ms; }
html.js .in-group.is-in > :nth-child(7) { transition-delay: 420ms; }
html.js .in-group.is-in > :nth-child(8) { transition-delay: 490ms; }

/* ---------- cinematic motion ----------
   Everything here is transform or opacity, runs only while its chapter is on screen (.is-live on the section),
   and is switched off under reduced motion. Durations are long and easings soft: the page breathes, it does not perform. */
@keyframes kb-in { from { scale: 1.015; } to { scale: 1.075; } }
@keyframes kb-plate { from { transform: scale(1.01) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); } }
@keyframes mist-drift { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, -2%, 0); } }
@keyframes breathe { from { opacity: 0.84; } to { opacity: 1; } }
@keyframes glint { 0%, 100% { opacity: 0; } 45%, 55% { opacity: 0.5; } }
@keyframes warm-pulse { from { opacity: 0.65; } to { opacity: 1; } }
@keyframes ring-pulse { 0% { transform: scale(1); opacity: 0.9; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes halo-breathe { from { transform: scale(0.9); opacity: 0.18; } to { transform: scale(1.25); opacity: 0.38; } }

.world .env { transform-origin: 62% 40%; animation: kb-in 34s ease-in-out infinite alternate; }
.world .plate-wrap > img, .founder-world .photo-wrap img { transform-origin: 50% 45%; animation: kb-plate 30s ease-in-out infinite alternate; }
.pw-scene > img { animation: kb-in 26s ease-in-out infinite alternate; }
.fog-world .plate { animation: kb-in 30s ease-in-out infinite alternate; }
.mist { position: absolute; left: -20%; right: -20%; pointer-events: none; will-change: transform; animation: mist-drift 64s ease-in-out infinite alternate;
  background: radial-gradient(40% 60% at 30% 60%, rgba(150, 158, 170, 0.22), rgba(150, 158, 170, 0) 70%), radial-gradient(36% 50% at 72% 40%, rgba(150, 158, 170, 0.16), rgba(150, 158, 170, 0) 70%); }
.mist-mission { bottom: 6%; height: 42%; }
.mist-pillars { bottom: 0; height: 34%; opacity: 0.8; animation-duration: 72s; }
.mist-inner { bottom: 2%; height: 30%; background: radial-gradient(40% 60% at 40% 60%, rgba(170, 150, 128, 0.18), rgba(170, 150, 128, 0) 70%), radial-gradient(34% 50% at 78% 50%, rgba(150, 158, 170, 0.14), rgba(150, 158, 170, 0) 70%); }
.mist-summit { bottom: 18%; height: 30%; animation-duration: 80s; background: radial-gradient(42% 60% at 30% 50%, rgba(231, 200, 160, 0.16), rgba(231, 200, 160, 0) 70%), radial-gradient(36% 50% at 74% 60%, rgba(200, 190, 180, 0.14), rgba(200, 190, 180, 0) 70%); }
html.js .plane-light { animation: breathe 7s ease-in-out infinite alternate; }
.plane-glint { display: none; }
html.js .plane-glint { display: block; opacity: 0; animation: glint 9s ease-in-out infinite; animation-delay: 2.5s; }
.summit .warm { animation: warm-pulse 9s ease-in-out infinite alternate; }
.inner .lantern { animation: breathe 3.6s ease-in-out infinite alternate; }

/* the pillars: the active camp sends out a slow ring, the climber's halo breathes, the summit light breathes once reached */
.stage .camp .pulse { fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-pillars][data-active="1"] .c1 .pulse, [data-pillars][data-active="2"] .c2 .pulse, [data-pillars][data-active="3"] .c3 .pulse { animation: ring-pulse 2.8s ease-out infinite; }
.stage .halo { transform-box: fill-box; transform-origin: center; animation: halo-breathe 2.4s ease-in-out infinite alternate; }
[data-pillars][data-active="3"] .peak-light { animation: breathe 5s ease-in-out infinite alternate; }

/* image reveals: a chapter's picture rises out of the dark as the chapter arrives */
html.js .world .plate-wrap, html.js .founder-world .photo-wrap { opacity: 0; transition: opacity 1400ms var(--ease-out); }
html.js .is-seen .world .plate-wrap, html.js .is-seen .founder-world .photo-wrap, html.js .is-seen.founder .founder-world .photo-wrap { opacity: 1; }

/* nothing animates off screen */
.world .env, .world .plate-wrap > img, .founder-world .photo-wrap img, .pw-scene > img, .fog-world .plate, .mist, .plane-light, .plane-glint, .summit .warm, .inner .lantern, .stage .camp .pulse, .stage .halo, .peak-light { animation-play-state: paused !important; }
.is-live .world .env, .is-live .world .plate-wrap > img, .is-live .founder-world .photo-wrap img, .is-live .pw-scene > img, .is-live .fog-world .plate, .is-live .mist, .is-live .plane-light, .is-live .plane-glint, .is-live.summit .warm, .is-live .inner .lantern, .is-live .lantern, .is-live .stage .camp .pulse, .is-live .stage .halo, .is-live .peak-light { animation-play-state: running !important; }

/* keyboard: a focused control is never caught mid-entrance */
html.js .in-group:focus-within > *, html.js .in:focus-within { opacity: 1; transform: none; transition: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .hero { height: 100svh; }
  .plane, .hero-copy, .scene > img, .scene .lift, .fog-scene .man, .fog-scene .fog, .fog-scene .fog-front, .world .env, .world .plate-wrap, .founder-world .photo-wrap { will-change: auto; }
  .pw-scene, .pw-scene > img, .pw-scene .lift { transition: opacity 200ms ease-out; transform: none !important; }
  .inner .lantern { animation: none; }
  .world .env, .world .plate-wrap > img, .founder-world .photo-wrap img, .pw-scene > img, .fog-world .plate, .mist, html.js .plane-light, html.js .plane-glint, .summit .warm, .stage .camp .pulse, .stage .halo, [data-pillars][data-active="3"] .peak-light { animation: none !important; }
  html.js .plane-glint { display: none; }
  html.js .world .plate-wrap, html.js .founder-world .photo-wrap { opacity: 1; transition: none; }
  html.js .hero-copy .w, html.js .hero-copy .lede, html.js .hero-copy .actions { animation: none; }
  html.js .in, html.js .in-group > * { transform: none; }
  html.js .in.is-in, html.js .in-group.is-in > * { transition: opacity 240ms ease-out; transition-delay: 0ms; }
  .who .lines li.wipe { clip-path: none; }
  .who .lines li.wipe.is-in { transition: color 200ms ease-out; }
  .reveal-up { clip-path: none; }
  .reveal-up.is-in { transition: none; }
  .fog-scene .fog { animation: none; }
  .stage .climb, .stage .climb-glow, .stage .climber, .stage .peak-light { transition: none; }
  .btn, .menu-btn .lines i, .site-head { transition: none; }
}

/* ---------- widths ---------- */
@media (max-width: 1080px) {
  .who .copy { width: min(100%, 54%); }
  .inner .copy { width: min(100%, 52%); }
  .method-ch .founder .copy, .method-ch .caveat { width: min(100%, 50%); }
  .pillars-inner .head, .pillars-inner .pillar-list { grid-column: 6 / span 7; }
  .pw-map { width: min(480px, 42vw); }
  .pw-scene { left: -10%; height: 64svh; top: calc(var(--header-h) + 3svh); }
  .pw-veil { inset: 0 0 0 36%; background: linear-gradient(to right, rgba(8, 9, 14, 0) 0, rgba(8, 9, 14, 0.84) 20%, rgba(8, 9, 14, 0.9) 100%); }
  .stage { grid-column: 1 / span 5; }
  .pillars-run .pillar-list { grid-column: 6 / span 7; }
  .method-ch .exp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --header-h: 60px; }
  .menu-btn { display: inline-flex; }
  .nav { position: fixed; inset: 0; z-index: 39; height: 100dvh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: calc(var(--header-h) + 16px) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); background: var(--canvas); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s 260ms; overflow-y: auto; }
  .nav.open { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s; }
  .nav a { font-variation-settings: "wdth" 74; font-weight: 560; letter-spacing: -0.02em; font-size: clamp(30px, 8vw, 48px); line-height: 1.05; color: var(--ink); padding: 6px 0; white-space: normal; }
  .nav .act { margin-top: 18px; font-variation-settings: "wdth" 100; font-weight: 600; letter-spacing: 0; font-size: 18px; padding: 14px 22px; }
  body.nav-open { overflow: hidden; }
  .site-head.menu-open { background: var(--canvas); }
  .mission .head, .method-ch .head { grid-template-columns: 1fr; align-items: start; }
  .mission .head .statement, .method-ch .head .statement { justify-self: start; }
  .ledger .row { grid-template-columns: 1fr; gap: 10px; }
  .mission .env-night { top: 0; width: 200%; left: -60%; }
  .mission .env-valley { width: 220%; left: -60%; }

  /* the fog: the traveller fills the top of the screen, the copy begins at his feet */
  .who { display: block; min-height: 0; padding-top: calc(var(--header-h) + 88vw); }
  .who .wrap { display: block; }
  .who .copy { width: 100%; }
  .fog-world .plate-wrap { left: -8%; bottom: auto; top: calc(var(--header-h) - 2vw); transform: none; width: 116%; -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 48%, #000 40%, rgba(0, 0, 0, 0.6) 70%, transparent 100%); mask-image: radial-gradient(ellipse 62% 66% at 50% 48%, #000 40%, rgba(0, 0, 0, 0.6) 70%, transparent 100%); }
  .fog-world .copy-veil { inset: 46% 0 0 0; background: linear-gradient(to bottom, rgba(14, 17, 25, 0) 0, rgba(14, 17, 25, 0.82) 30%, rgba(14, 17, 25, 0.82) 100%); }
  .fog-world .fog-floor { height: 14%; }

  /* the pillars: the held world becomes a scene per pillar, edge to edge; the map sits under the chapter title */
  .pillars { display: flex; flex-direction: column; padding-block: clamp(72px, 16vw, 112px); }
  .pw { position: relative; height: auto; margin: 0; order: 2; }
  .pw .world { display: none; }
  .pw-map { position: relative; left: auto; bottom: auto; width: min(100% - 2 * var(--gutter), 560px); margin: clamp(28px, 6vw, 44px) auto 0; pointer-events: auto; }
  .pillars-inner { display: contents; }
  .pillars-inner .head { order: 1; width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .pillars-inner .pillar-list { order: 3; width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; margin-top: 0; }
  .pillar { min-height: 0; padding-block: clamp(36px, 8vw, 56px) 0; }
  .pillar-scene { display: block; width: calc(100% + 2 * var(--gutter)); max-width: none; margin: 0 calc(-1 * var(--gutter)) clamp(16px, 4vw, 28px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 74%, transparent 100%); }
  .stage { position: static; margin-bottom: clamp(24px, 4vw, 40px); }
  .pillars-run .stage, .pillars-run .pillar-list { grid-column: 1 / -1; }
  .stage .camp-q { display: none; }

  /* the brotherhood: the lantern scene across the top, the invitation below */
  .inner { display: block; min-height: 0; padding-top: calc(var(--header-h) + 80vw); }
  .inner .plate-wrap { right: -8%; top: var(--header-h); width: 116%; margin-top: 0; }
  .inner .veil-right { inset: 42% 0 0 0; background: linear-gradient(to bottom, rgba(8, 9, 14, 0) 0, rgba(8, 9, 14, 0.86) 26%, rgba(8, 9, 14, 0.86) 100%); }
  .inner .copy { width: 100%; }

  /* the founder: the portrait across the top, the story below */
  .method-ch .exp { grid-template-columns: 1fr; }
  .method-ch .founder { min-height: 0; padding-top: 118vw; }
  .founder-world .photo-wrap { bottom: auto; height: 128vw; width: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
  .founder-world .veil-left { display: none; }
  .founder-world .photo-cap { top: calc(118vw - 40px); bottom: auto; }
  .method-ch .founder .copy, .method-ch .caveat { width: 100%; }

  .two { grid-template-columns: 1fr; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
  .page-hero .env { inset: auto 0 0 0; height: 55%; opacity: 0.35; }
  .page-hero .env img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%); }
}
@media (max-width: 600px) {
  :root { --t-hero: clamp(58px, 20vw, 92px); --t-display: clamp(34px, 10vw, 48px); --t-big: clamp(24px, 6.6vw, 32px); --t-statement: 19px; }
  .hero-copy { top: auto; bottom: 0; transform: none; padding-bottom: 20svh; }
  .hero-scrim { width: 100%; background: linear-gradient(to top, rgba(7, 9, 16, 0.8) 0, rgba(7, 9, 16, 0.55) 40%, rgba(7, 9, 16, 0) 72%); }
  .hero-copy .lede { max-width: 30ch; font-size: 18px; }
  .plane-fore { -webkit-mask-image: linear-gradient(to top, #000 0 18%, transparent 44%); mask-image: linear-gradient(to top, #000 0 18%, transparent 44%); }
  .inner .focus { grid-template-columns: 1fr; }
  .site-foot .cols { grid-template-columns: 1fr; gap: 24px; }
  .station { padding-block: clamp(64px, 16vw, 96px); }
  .station.who { padding-top: calc(var(--header-h) + 90vw); }
  .station.inner { padding-top: calc(var(--header-h) + 82vw); }
  .stage .camp-label { font-size: 17px; letter-spacing: 0.1em; }
  .summit .plate-wrap { width: 150%; margin-left: -75%; top: clamp(150px, 40vw, 220px); }
  .summit .logo { margin-top: 74vw; width: 78vw; }
}