/* ---------- Story page ---------- */
.story-page { --sans: "Helvetica Neue", "Inter Tight", Arial, sans-serif; }

/* 3D head: fixed behind the text, above the dot texture */
.st-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; }
.st-canvas.is-ready { opacity: 1; }   /* shown once the head, eyes and stickers are all ready */
/* darkens the scene behind the timeline so the text stays readable (opacity set in story.js) */
.st-shade {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(10, 10, 11, 0.9) 0%, rgba(10, 10, 11, 0.78) 50%, rgba(10, 10, 11, 0.5) 72%, rgba(10, 10, 11, 0.15) 100%);
}
.st { position: relative; z-index: 1; }
/* the text waits for the head, then both fade in together (body.st-ready is set in story.js).
   filter rather than opacity, since story.js sets .st-side's opacity while scrolling; it ends
   on none so the chapter panels' glass blur still works */
.st, .st-side { filter: opacity(0); transition: filter 0.9s ease; }
.st-ready .st, .st-ready .st-side { filter: none; }
/* static film grain over the whole page, above everything (texture made in story.js) */
.st-noise {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background-size: 180px 180px; opacity: 0.19; mix-blend-mode: overlay;
}
.nav .pill.is-active { color: #fff; }

/* shared metallic type (same steel as the name on the home page) */
.metal {
  color: #9a9ea3;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.18) 38%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.12) 78%, rgba(255, 255, 255, 0) 92%),
    linear-gradient(180deg, #eceef0 0%, #c3c7cb 28%, #979ba0 52%, #a9adb2 70%, #d6d9dc 88%, #b3b7bb 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

/* small spaced caps, as on the home page */
.st-cue, .st-side, .st-keep {
  font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted);
}

/* 1. opening */
.st-hero { position: relative; height: 100vh; }
/* fades the lower half of the figure into the page, so the title and intro read clearly.
   Fixed to the screen (not the section), so it covers the shirt however tall the window is;
   story.js fades it out as you scroll into the face */
.st-fade {
  position: fixed; left: 0; right: 0; bottom: 0; height: 66vh; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0%, rgba(10, 10, 11, 0.72) 30%, rgba(10, 10, 11, 0.95) 55%, rgba(10, 10, 11, 0.99) 100%);
}
/* title and intro stacked at the bottom, so they never collide on short screens */
.st-hero__text { position: absolute; left: 0; right: 0; bottom: max(11vh, 84px); display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.6vh, 28px); }
.st-title {
  text-align: center;
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 125;
  font-size: clamp(48px, min(9vw, 17vh), 168px); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase;
}
/* cursor shine, same as the name on the home page: --mx / --my / --glow set in story.js */
.st-title.metal {
  --mx: 50%; --my: 50%; --glow: 0;
  background:
    radial-gradient(circle 9vw at var(--mx) var(--my), rgba(255, 255, 255, var(--glow)) 0%, rgba(255, 255, 255, var(--glow)) 10%, rgba(232, 236, 241, calc(var(--glow) * 0.55)) 40%, transparent 80%),
    linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.18) 38%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.12) 78%, rgba(255, 255, 255, 0) 92%),
    linear-gradient(180deg, #eceef0 0%, #c3c7cb 28%, #979ba0 52%, #a9adb2 70%, #d6d9dc 88%, #b3b7bb 100%);
  -webkit-background-clip: text; background-clip: text;
}
.st-intro {
  width: min(640px, 86vw);
  text-align: center; font-family: var(--sans); font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; color: #c9c8c4;
}
/* no underline: in vertical text it showed as a stray "|" after the name; it brightens on hover instead */
.st-side a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.st-side a:hover { color: #fff; }
.st-cue { position: absolute; left: 0; right: 0; bottom: 3vh; text-align: center; }
/* long hairline under "Scroll": hangs down from the word (past the bottom of the screen) so the word itself stays put */
.st-cue::after { content: ""; position: absolute; left: 50%; top: calc(100% + 10px); width: 1px; height: clamp(120px, 22vh, 220px); background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18) 60%, transparent); }
.st-side { font-size: 9px; position: fixed; z-index: 2; right: calc(var(--gutter) - 4px); top: 50%; writing-mode: vertical-rl; white-space: nowrap; transform: translateY(-50%); transition: opacity 0.4s ease; }

/* 2. journey */
.st-journey { position: relative; padding: 40vh var(--gutter) 70vh; }
.st-h2 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.01em; margin: 0 0 10vh 12vw; }
.st-timeline { list-style: none; position: relative; margin-left: 12vw; width: min(520px, 76vw); }
.st-timeline::before { /* the vertical rule */
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.28) 6%, rgba(255, 255, 255, 0.28) 94%, transparent);
}
.st-item { position: relative; padding: 0 0 13vh 36px; font-family: var(--sans); }
.st-item::before { /* dot on the rule; lights up when the item is in view */
  content: ""; position: absolute; left: -4px; top: 5px; width: 9px; height: 9px; border-radius: 50%;
  background: #3a3a3d; box-shadow: 0 0 0 3px var(--bg); transition: background 0.4s ease, box-shadow 0.4s ease;
}
.st-item.is-on::before { background: #e8e9eb; box-shadow: 0 0 0 3px var(--bg), 0 0 14px rgba(255, 255, 255, 0.5); }
.st-item__years { font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 11px; letter-spacing: 0.24em; color: var(--muted); }
.st-item__place { margin-top: 10px; font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--text); }
.st-item__role { margin-top: 4px; font-size: 15px; color: #b9b8b4; }
.st-item__points { list-style: none; margin-top: 14px; display: grid; gap: 6px; }
.st-item__points li { font-size: 15px; line-height: 1.5; color: #d2d1cd; padding-left: 18px; position: relative; }
.st-item__points li::before { content: "—"; position: absolute; left: 0; color: #7d7c79; }
/* a soft dark halo keeps the text legible where it crosses the face */
.st-item { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 18px rgba(10, 10, 11, 0.85); }
.st-item { opacity: 0.35; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.st-item.is-on { opacity: 1; transform: none; }

/* 3. chapters: pinned, track slides left as you scroll */
.st-chapters { position: relative; height: calc(var(--n, 5) * 80vh + 100vh); }
.st-chapters__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.st-h2--corner { position: absolute; left: var(--gutter); top: 100px; margin: 0; font-size: clamp(24px, 2.4vw, 34px); }
.st-chapters__track { position: absolute; top: 0; bottom: 0; left: 100vw; display: flex; will-change: transform; }
.st-panel {
  flex: 0 0 auto; width: min(640px, 82vw); height: 100%; padding: 16vh 4vw 12vh;
  border-left: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 20, 22, 0.92), rgba(14, 14, 16, 0.96));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; font-family: var(--sans);
}
.st-panel__num { font-family: var(--display); font-variation-settings: "wdth" 110; font-size: 11px; letter-spacing: 0.24em; color: var(--muted); }
.st-panel__title { margin-top: 12px; font-size: clamp(30px, 3vw, 44px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.st-panel__sub { margin-top: 10px; font-size: 14px; color: #a6a5a1; }
.st-panel__media {
  margin: 5vh 0; flex: 1 1 auto; min-height: 120px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, 0.16);
  display: grid; place-items: center; color: #5f5e5b; font-family: var(--display); font-variation-settings: "wdth" 110;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; overflow: hidden;
}
/* real photos: every panel's frame is the same size (the photos are all about 2.2:1, so
   filling the frame trims next to nothing) */
.st-panel__media.has-img { flex: none; width: 100%; aspect-ratio: 2.2 / 1; min-height: 0; border: 0; border-radius: 10px; display: block; }
.st-panel__media.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; filter: grayscale(1); }
.st-panel__text { font-size: 16px; line-height: 1.55; color: #c9c8c4; max-width: 46ch; }
.st-panel__rows { list-style: none; }
.st-panel__rows li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; color: #d6d5d1; }
.st-panel__rows li span:last-child { color: var(--muted); text-align: right; }
.st-progress { position: absolute; left: 50%; bottom: 7vh; width: min(320px, 40vw); height: 1px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.16); }
.st-progress span { display: block; height: 100%; width: 0; background: #e8e9eb; }
.st-keep { position: absolute; right: var(--gutter); bottom: calc(7vh - 6px); }

@media (max-width: 760px) {
  .st-h2, .st-timeline { margin-left: 0; }
  .st-intro { font-size: 15px; }
  .st-side { right: 4px; font-size: 7px; letter-spacing: 0.26em; }   /* phones: same vertical credit, tucked against the right edge (it fades out once you scroll) */
  .st-panel { padding: 14vh 7vw 14vh; }
  /* the timeline runs the full width on phones, so the face behind it is dimmed evenly */
  .st-shade { background: rgba(10, 10, 11, 0.8); }
  /* progress line on the left, "Keep scrolling" on the right, so they don't run into each other */
  .st-progress { left: var(--gutter); width: 28vw; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .st-item { transition: none; }
}

/* loading spiral: turns quietly in the middle while the 3D head loads, then fades away
   (body.st-ready is set in story.js). It only appears after a moment, so a fast load doesn't flash it. */
.st-loader {
  position: fixed; left: 50%; top: 50%; z-index: 5; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  pointer-events: none; opacity: 0; animation: st-loader-in 0.5s ease 0.2s forwards;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.st-loader svg { width: 100%; height: 100%; overflow: visible; animation: st-spin 1.6s linear infinite; }
.st-loader path {
  fill: none; stroke: #d2d1cd; stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 192 192; animation: st-draw 2.4s ease-in-out infinite;   /* the spiral is ~191 long: it draws itself in, then out */
}
.st-ready .st-loader { animation: none; opacity: 0; transform: scale(0.7); }
@keyframes st-loader-in { to { opacity: 0.85; } }
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-draw { 0% { stroke-dashoffset: 192; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -192; } }
@media (prefers-reduced-motion: reduce) { .st-loader svg, .st-loader path { animation: none; } .st-loader path { stroke-dasharray: none; } }