/* Option B, "Scroll story". Hero: Neil's name in two lines with the cut-out portrait between them (NEIL behind,
   BARTHOLOMEW in front), gold chevrons behind. Then three full-screen chapters, each a scene driven by --p:
   01 dogs run and leap in from the sides, 02 the judo throw rises and turns, 03 the car drives across a
   code-drawn road whose dashed centre line moves with --scroll. Chapters are full-width bands: only the page
   edge clips their moving layers. */

.menu a { font-size: 15px; }
@media (max-width: 459px) { .menu { gap: 12px; } .menu a { font-size: 14px; letter-spacing: .04em; } }

/* ---------- Hero ---------- */
.story-hero {
  position: relative; isolation: isolate; height: 100svh; min-height: 640px; max-height: 1080px;
  padding: calc(var(--header-h) + env(safe-area-inset-top) + 14px) var(--gutter) 0;
}
.story-hero::before { /* spotlight behind the portrait */
  content: ""; position: absolute; z-index: -3; inset: 10% 0 0;
  background: radial-gradient(48% 52% at 50% 62%, rgb(131 146 163 / .3), rgb(131 146 163 / 0) 72%);
}
.hb-chev { /* slow layer: gold chevron columns */
  position: absolute; z-index: -2; top: 18%; display: grid; gap: 12px; pointer-events: none;
  transform: translate3d(0, calc(var(--p, 0) * -90px), 0);
}
.hb-chev i { display: block; width: clamp(70px, 22vw, 200px); height: clamp(26px, 8vw, 74px); background: var(--gold); clip-path: var(--chevron); }
.hb-chev i:nth-child(2) { opacity: .55; }
.hb-chev i:nth-child(3) { opacity: .3; }
.hb-chev i:nth-child(4) { opacity: .14; }
.hb-chev.left { left: var(--gutter); top: 50%; }
.hb-chev.right { right: var(--gutter); top: 40%; }

.hb-kicker { position: relative; z-index: 4; max-width: 22rem; }
.hb-name { margin: 0; font: 700 1px/1 var(--display); text-transform: uppercase; }
.hb-first { /* medium layer, behind the portrait */
  position: absolute; z-index: -1; left: 50%; top: calc(var(--header-h) + 13svh);
  font-size: clamp(150px, 44vw, 380px); line-height: .8; letter-spacing: .01em; color: var(--steel); white-space: nowrap;
  transform: translate3d(-50%, calc(var(--p, 0) * -140px), 0); will-change: transform;
}
.hb-neil { /* fast layer */
  position: absolute; z-index: 1; left: 50%; bottom: 0; width: auto; max-width: none; height: min(70svh, 760px);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%); mask-image: linear-gradient(180deg, #000 78%, transparent 99%);
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / .6));
  transform: translate3d(-50%, calc(var(--p, 0) * 160px), 0); will-change: transform;
}
.hb-last { /* front layer, slides sideways */
  position: absolute; z-index: 2; left: 50%; bottom: clamp(118px, 17svh, 170px);
  font-size: min(calc((100vw - 2 * var(--gutter)) / 5.3), 250px); line-height: .8; letter-spacing: .005em; white-space: nowrap;
  color: var(--ink); -webkit-text-stroke: 10px var(--hangar); paint-order: stroke fill;
  transform: translate3d(calc(-50% + var(--p, 0) * 30vw), 0, 0); will-change: transform;
}
.story-hero::after { /* veil under the index row */
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
  background: linear-gradient(180deg, rgb(18 22 28 / 0), rgb(18 22 28 / .9) 55%, var(--hangar));
}
.hb-index {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 50px; /* clear of the option switcher */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none;
}
.hb-index a {
  display: block; padding: 8px 0 4px; border-top: 2px solid var(--gold); text-decoration: none;
  font: 700 17px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase;
}
.hb-index b { display: block; margin-bottom: 4px; font: 500 12px/1 var(--mono); color: var(--gold); }
.hb-side { display: none; }

/* ---------- Chapters ---------- */
.chapter {
  position: relative; isolation: isolate; min-height: 100svh; padding: 64px var(--gutter) 56px;
  border-top: 1px solid var(--line);
}
.ch-bg { /* slow layer; the chapter band is its frame */
  position: absolute; z-index: -3; inset: 0; overflow: hidden; pointer-events: none;
}
.ch-bg > * {
  position: absolute; left: 0; top: -80px; width: 100%; height: calc(100% + 160px); max-width: none; object-fit: cover;
  transform: translate3d(0, calc(var(--p, 0) * -70px), 0); will-change: transform;
}
.ch-bg .photo { opacity: .2; filter: grayscale(.6); }
.ch-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--hangar), rgb(18 22 28 / .55) 30%, rgb(18 22 28 / .55) 70%, var(--hangar)); }
.ch-num { /* medium layer: outlined chapter numeral, as on the K9 timeline */
  position: absolute; z-index: -2; right: 2%; top: 30px; pointer-events: none; user-select: none;
  font: 700 clamp(170px, 52vw, 420px)/.8 var(--display); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(131 146 163 / .38);
  transform: translate3d(0, calc(var(--p, 0) * 90px), 0); will-change: transform;
}
.ch-inner { position: relative; max-width: 1240px; margin: 0 auto; display: grid; gap: 20px; }
.ch-head h2 { margin: 0 0 10px; font: 700 clamp(40px, 12vw, 84px)/.92 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.ch-line { margin: 0; max-width: 34rem; font-size: 17px; line-height: 26px; }
.ch-stage { position: relative; height: clamp(330px, 92vw, 420px); }
.ch-stage::before { /* floor spotlight, slow */
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -10px; width: 120%; height: 46%;
  background: radial-gradient(50% 50% at 50% 70%, rgb(131 146 163 / .3), rgb(131 146 163 / 0) 70%);
  transform: translate3d(-50%, calc(var(--p, 0) * -24px), 0);
}
.ch-stage img { position: absolute; width: auto; max-width: none; filter: var(--rim); will-change: transform; }
.ch-foot { display: grid; gap: 14px; justify-items: start; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li { padding: 3px 7px; border: 1px solid var(--line); font: 500 12px/16px var(--mono); color: var(--muted); text-transform: uppercase; }

/* 01 dogs */
.ch-k9 .dog-vest { left: 2%; bottom: 0; height: 92%; transform: translate3d(calc(var(--p, 0) * -48vw), 0, 0); }
.ch-k9 .dog-leap { right: -2%; bottom: 22%; height: 70%; transform: translate3d(calc(var(--p, 0) * 60vw), calc(var(--p, 0) * 70px), 0) rotate(calc(var(--p, 0) * 12deg)); }
.ch-k9 .dog-sprint { left: 20%; bottom: -4px; height: auto; width: min(74%, 470px); transform: translate3d(calc(var(--p, 0) * -100vw), 0, 0); z-index: 2; }

/* 02 judo */
.ch-judo .roundel {
  right: 0; top: 0; width: min(42%, 200px); height: auto; filter: none;
  transform: translate3d(0, calc(var(--p, 0) * 40px), 0) rotate(calc(var(--p, 0) * 50deg));
}
.ch-judo .throw {
  left: 50%; bottom: 0; width: min(100%, 520px); height: auto; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%); mask-image: linear-gradient(180deg, transparent 0, #000 20%);
  transform: translate3d(-50%, calc(var(--p, 0) * 150px), 0) rotate(calc(var(--p, 0) * -18deg)); transform-origin: 50% 80%;
}
.choices { display: grid; gap: 12px; width: 100%; }
.choice {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 14px; align-items: center;
  padding: 14px; background: var(--hangar-raised); border: 1px solid var(--line); border-left: 3px solid var(--gold);
}
.choice > img { width: 52px; height: 52px; object-fit: contain; }
.choice .aylwin-logo { background: #fff; border-radius: 50%; padding: 2px; }
.choice h3 { margin: 0; font: 600 24px/26px var(--display); text-transform: uppercase; }
.choice p { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 22px; color: var(--muted); }
.choice .row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 4px; }

/* 03 driving: on phones the scene sits between heading and links, as in the other chapters */
.ch-drive .ch-stage { order: 1; }
.ch-drive .ch-foot { order: 2; }
.ch-drive .ch-bg svg { opacity: .9; }
.ch-drive .ch-stage { height: clamp(260px, 70vw, 400px); }
.road { /* full-bleed: wider than the stage, the page edge clips it */
  position: absolute; z-index: 0; left: -100vw; right: -100vw; bottom: 8%; width: auto; height: 70px; overflow: visible;
}
.road svg { display: block; width: 100%; height: 70px; overflow: visible; }
.road .lane { stroke-dashoffset: calc(var(--scroll, 0) * 1.2px); }
.ch-drive .lplate {
  position: absolute; z-index: -1; left: 50%; top: 0; width: clamp(150px, 40vw, 260px); aspect-ratio: 1;
  border: 2px solid rgb(232 185 49 / .5); border-radius: 12px;
  transform: translate3d(-50%, calc(var(--p, 0) * 50px), 0) rotate(calc(-6deg + var(--p, 0) * 8deg));
}
.ch-drive .lplate::before {
  content: "L"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 clamp(130px, 34vw, 230px)/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgb(206 17 38 / .95);
}
.ch-drive .car {
  left: 50%; bottom: calc(8% + 26px); width: min(92vw, 620px); height: auto; z-index: 1;
  transform: translate3d(calc(-50% + var(--p, 0) * -75vw), 0, 0);
}
.phones { margin: 0; font: 500 13px/20px var(--mono); color: var(--muted); }
.phones a { color: var(--gold); text-underline-offset: 3px; }

/* ---------- Biography ---------- */
.section { position: relative; max-width: 1240px; margin: 0 auto; padding: 80px var(--gutter) 40px; }
.b-bio { display: grid; gap: 28px; border-top: 1px solid var(--line); }
.b-bio-art { position: relative; height: clamp(420px, 120vw, 640px); }
.b-bio-word { /* medium layer */
  position: absolute; z-index: 0; left: -4px; top: 0; pointer-events: none; user-select: none;
  font: 700 clamp(110px, 34vw, 230px)/.8 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgb(232 185 49 / .45);
  transform: translate3d(0, calc(var(--p, 0) * 50px), 0);
}
.b-photo { position: absolute; margin: 0; border: 1px solid var(--line); background: var(--hangar-raised); padding: 6px; will-change: transform; }
.b-photo img { width: 100%; }
.b-photo figcaption { padding: 6px 2px 0; font: 500 11px/15px var(--mono); color: var(--muted); }
.b-photo.dojo { z-index: 1; left: 8%; top: 12%; width: 66%; transform: translate3d(0, calc(var(--p, 0) * 30px), 0); }
.b-photo.dan { z-index: 2; right: 0; bottom: 0; width: 52%; transform: translate3d(0, calc(var(--p, 0) * 110px), 0); }
.b-bio-text p { margin: 0 0 14px; }
.b-bio-text h2 { margin-bottom: 16px; }
.b-bio .creds { margin: 22px 0 16px; }
.orgs { margin: 0; padding: 0; list-style: none; font: 500 13px/18px var(--mono); }
.orgs li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.orgs a { color: var(--gold); text-underline-offset: 3px; }
.socials-sec, .contact-sec { padding-top: 56px; }
.contact-sec { padding-bottom: 64px; }
.venue { margin: 0; font-size: 15px; }

@media (max-width: 559px) {
  .creds { grid-template-columns: minmax(0, 1fr); }
  .creds div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: baseline; }
  .creds dd { margin: 0; }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .menu a { font-size: 18px; }
  .hb-kicker { max-width: none; }
  .hb-neil { height: min(76svh, 820px); }
  .hb-first { top: calc(var(--header-h) + 9svh); font-size: clamp(240px, 42svh, 420px); }
  .hb-last { bottom: clamp(120px, 15svh, 170px); }
  .hb-side { /* desktop: fill both sides of the portrait */
    position: absolute; z-index: 3; top: calc(var(--header-h) + 64px); width: min(25vw, 330px); display: block;
  }
  .hb-side.left { left: var(--gutter); }
  .hb-side.right { right: var(--gutter); text-align: right; }
  .hb-side .creds { grid-template-columns: minmax(0, 1fr); }
  .hb-side p { margin: 0 0 14px; font-size: 17px; line-height: 26px; color: var(--muted); }
  .hb-chev.left { left: auto; right: calc(50% + 300px); top: 52%; }
  .hb-chev.right { right: auto; left: calc(50% + 300px); top: 46%; }
  .hb-index { left: 50%; right: auto; width: min(760px, calc(100% - 2 * var(--gutter))); transform: translateX(-50%); gap: 18px; }
  .hb-index a { font-size: 22px; }

  .chapter { display: flex; align-items: center; padding: 96px var(--gutter) 80px; }
  .ch-inner { width: 100%; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head stage" "foot stage"; column-gap: 56px; row-gap: 22px; align-items: end; }
  .ch-head { grid-area: head; }
  .ch-foot { grid-area: foot; align-self: start; }
  .ch-stage { grid-area: stage; height: min(70svh, 640px); align-self: center; }
  .ch-judo .ch-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "stage head" "stage foot"; }
  .ch-judo .ch-num { right: auto; left: 2%; }
  .ch-judo .roundel { left: 50%; right: auto; top: 4%; width: min(60%, 330px); transform: translate3d(-50%, calc(var(--p, 0) * 40px), 0) rotate(calc(var(--p, 0) * 50deg)); }
  .hb-index { bottom: 22px; }
  .ch-drive .ch-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head foot" "stage stage"; align-items: start; }
  .ch-drive .ch-stage { height: min(48svh, 420px); }
  .ch-drive .ch-foot { padding-top: 34px; }
  .ch-drive .car { width: min(48vw, 680px); }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .b-bio { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  .b-bio-art { height: 700px; }
  .b-bio .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}