/* Homepage. Mirrors learnaiwithmariah.com's section order in ABAI's brand
   (guides/design/anwar/sites/home-v2/STEAL.md): black ground, electric purple only
   where it matters, white text with no light purple (round 11), Geist. Loaded after scrollcraft.css,
   so the engine's tokens are rebranded here. */

:root {
  --sc-canvas: #000000;
  --sc-surface: #100E20;
  --sc-ink: #FFFFFF;
  --sc-ink-soft: #FFFFFF;
  --sc-accent: #5600FF;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: "Geist", "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --primary: #5600FF;
  --primary-hover: #7C3AED;
  /* Round 11: Anwar dropped the light purple for contrast, so secondary text is white too. */
  --muted: #FFFFFF;
  --soft: #FFFFFF;
  --surface: #100E20;
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.34);
  --gutter: clamp(16px, 4vw, 48px);
  --bar-h: 40px;
  --head-h: 64px;
  color-scheme: dark;
}

[hidden] { display: none !important; }
body.page-home { background: #000; color: #fff; font-family: var(--sc-font-text); font-size: 17px; line-height: 1.6; }
.page-home h1, .page-home h2, .page-home h3 { margin: 0; text-wrap: balance; }
.page-home p { margin: 0; }
.page-home a { color: inherit; }
.page-home mark { background: var(--primary); color: #fff; padding: 0 0.12em; border-radius: 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--primary); color: #fff; padding: 8px 14px; border-radius: 6px; }
.skip:focus { top: 8px; }
.eyebrow { font-family: var(--sc-font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--primary); color: #fff; font-weight: 600; font-size: 16px; line-height: 1.2;
  padding: 14px 24px; border-radius: 8px; transition: background-color 160ms ease, box-shadow 160ms ease;
}
.btn:hover { background: var(--primary-hover); box-shadow: 0 0 24px rgba(86, 0, 255, 0.45); }
.btn--small { font-size: 14px; padding: 9px 16px; border-radius: 999px; }
.page-home .btn--light { background: #fff; color: #000; }
.btn--light:hover { background: #fff; box-shadow: 0 0 24px rgba(255, 255, 255, 0.35); }
.btn--ghost { background: transparent; border: 1px solid var(--line-strong); }
.btn--ghost:hover { background: rgba(124, 58, 237, 0.18); box-shadow: none; }

/* ---------------------------------------------------------- bar + header */
.hbar {
  display: flex; align-items: center; justify-content: center; gap: 0 6px;
  min-height: var(--bar-h); padding: 8px var(--gutter); background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 600; text-align: center; text-decoration: none;
}
.hbar:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }

.hhead { position: sticky; top: 0; z-index: 30; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.hhead__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--head-h); max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.hhead__brand { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.hhead__menu { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.hhead__menu > a:not(.btn) { color: var(--soft); text-decoration: none; }
.hhead__menu > a:not(.btn):hover { color: #fff; }
.hhead__social { display: flex; gap: 14px; font-family: var(--sc-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.hhead__social a { color: var(--muted); text-decoration: none; }
.hhead__social a:hover { color: #fff; }
.hhead__toggle { display: none; background: none; border: 1px solid var(--line-strong); color: #fff; border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }

@media (max-width: 959px) {
  .hhead__toggle { display: inline-flex; }
  .js .hhead__menu { display: none; }
  .hhead__menu {
    position: absolute; top: var(--head-h); left: 0; right: 0; flex-direction: column; align-items: flex-start;
    gap: 18px; padding: 20px var(--gutter) 28px; background: #000; border-bottom: 1px solid var(--line);
  }
  html:not(.js) .hhead__menu { position: static; padding-top: 0; }
  .hhead.is-open .hhead__menu { display: flex; }
}

/* ---------------------------------------------------------- hero: four planes */
/* The frame holds only the name, the photo and the callouts, as the reference's
   hero does. The intro line and button sit in a strip under it, so nothing in the
   frame competes for the same space at short screen heights. */
.hero { position: relative; background: #000; }
.hero__frame {
  position: relative; isolation: isolate; overflow: hidden;
  height: calc(100svh - var(--bar-h) - var(--head-h)); min-height: 560px; max-height: 980px;
}
.hero__far {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(55% 60% at 50% 105%, rgba(86, 0, 255, 0.62), transparent 70%),
    radial-gradient(28% 34% at 50% 62%, rgba(124, 58, 237, 0.22), transparent 70%);
}
.hero {
  --greet-size: clamp(26px, 3vw, 46px);
  --name-size: clamp(120px, min(25vw, 46svh), 400px);
  --name-bottom: calc(3.5% + var(--greet-size) * 1.15 + var(--name-size) * 0.82);
}
.hero__type { position: absolute; left: 0; right: 0; top: 3.5%; z-index: 1; text-align: center; pointer-events: none; }
.hero__title { display: flex; flex-direction: column; align-items: center; }
.hero__greet { font-size: var(--greet-size); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.hero__name {
  display: block; margin-top: 0.02em; font-size: var(--name-size); font-weight: 800; line-height: 0.8;
  letter-spacing: -0.06em; text-transform: uppercase; color: var(--muted);
}
.hero__subject {
  position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; margin-inline: auto;
  height: 86%; width: auto; max-width: none;
}
.hero__callouts { position: absolute; inset: 0; z-index: 5; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.callout {
  position: absolute; display: flex; align-items: flex-start; gap: 8px; max-width: 320px;
  font-family: var(--sc-font-mono); font-size: 13px; font-weight: 500; line-height: 1.35;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
}
.callout span { max-width: 150px; }
.callout__arrow { flex: none; width: 108px; height: 54px; margin-top: 10px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Callouts drift up faster than the name drifts down, so each starts further below
   the name than the most the two can close while the hero is on screen (about
   100px at these rates). Two sit left and one right, as on the reference. */
.callout--1 { left: calc(50% - 480px); top: calc(var(--name-bottom) + 130px); }
.callout--2 { right: calc(50% - 480px); top: calc(var(--name-bottom) + 115px); flex-direction: row-reverse; text-align: right; }
.callout--3 { left: calc(50% - 450px); top: min(calc(var(--name-bottom) + 270px), calc(100% - 84px)); }
.callout--2 .callout__arrow { transform: scaleX(-1); }
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 4; background: linear-gradient(rgba(0, 0, 0, 0), #000 92%); pointer-events: none; }
.hero__copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-block: 28px 44px; border-bottom: 1px solid var(--line); }
.hero__sub { font-size: 18px; line-height: 1.55; color: var(--soft); max-width: 640px; }

@media (max-width: 1099px) {
  .hero__frame { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; align-items: center; padding-top: 28px; }
  .hero__type { position: relative; top: auto; }
  .hero__name { font-size: 26vw; }
  .hero__subject {
    position: relative; height: min(56svh, 540px); width: auto; max-width: 84vw; object-fit: contain; margin-top: -2vw;
    -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
  }
  .hero__callouts {
    position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-top: 14px; padding-inline: var(--gutter); transform: none !important;
  }
  .callout { position: static; max-width: none; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(16, 14, 32, 0.92); font-size: 12px; }
  .callout span { max-width: none; }
  .callout__arrow { display: none; }
  .hero__fade { display: none; }
  .hero__copy { flex-direction: column; text-align: center; border-bottom: 0; padding-block: 24px 48px; }
}

/* ---------------------------------------------------------- manifesto */
/* Pinned on desktop: the statement holds while the tool tiles drift past, like the
   reference's sticky manifesto. Phones and reduced motion get a plain section,
   so no scroll is spent on a screen that doesn't change. */
.manifesto { position: relative; background: #000; text-align: center; }
.manifesto__stage { display: flex; align-items: center; justify-content: center; padding: calc(var(--head-h) + 24px) 0 24px; }
@media (max-width: 1199px), (prefers-reduced-motion: reduce) {
  .manifesto { height: auto !important; }
  .manifesto__stage { height: auto; padding-block: clamp(80px, 14vw, 160px); }
}
.manifesto__copy { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: center; }
.manifesto h2 { font-size: clamp(40px, 6.4vw, 104px); font-weight: 800; line-height: 1.1; letter-spacing: -0.045em; max-width: 14ch; }
.manifesto p { max-width: 620px; font-size: 18px; color: var(--soft); }
.manifesto__tools { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.tool { position: absolute; }
.tool span {
  display: inline-block; padding: 12px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong);
  font-weight: 600; font-size: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.tool--1 { left: 7%; top: 16%; } .tool--1 span { transform: rotate(-7deg); }
.tool--2 { right: 9%; top: 11%; } .tool--2 span { transform: rotate(5deg); }
.tool--3 { left: 4%; top: 54%; } .tool--3 span { transform: rotate(4deg); }
.tool--4 { right: 5%; top: 48%; } .tool--4 span { transform: rotate(-5deg); }
.tool--5 { left: 13%; bottom: 11%; } .tool--5 span { transform: rotate(6deg); }
.tool--6 { right: 14%; bottom: 14%; } .tool--6 span { transform: rotate(-4deg); }

@media (max-width: 1199px) {
  .manifesto__tools { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-inline: var(--gutter); margin-bottom: 40px; }
  .tool { position: static; transform: none !important; }
  .tool span { padding: 9px 14px; font-size: 14px; }
}

/* ---------------------------------------------------------- cohort panel */
.cohort { background: var(--primary); color: #fff; padding-block: clamp(64px, 9vw, 128px); }
.cohort__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cohort__plan { background: #000; border-radius: 20px; padding: clamp(22px, 3vw, 34px); box-shadow: 0 30px 70px rgba(16, 0, 60, 0.55); }
.cohort__label { font-family: var(--sc-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cohort__plan ol { list-style: none; margin: 0; padding: 0; }
.cohort__plan li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding-block: 14px; border-top: 1px solid var(--line); font-size: 16px; color: var(--soft); }
.cohort__plan li:first-child { border-top: 0; }
.cohort__n { font-family: var(--sc-font-mono); color: var(--muted); }
.cohort__copy { display: grid; gap: 20px; justify-items: start; }
.cohort .eyebrow { color: #fff; }
.cohort h2 { font-size: clamp(40px, 5.2vw, 78px); font-weight: 800; line-height: 1.12; letter-spacing: -0.04em; }
.cohort__hl { background: #000; padding: 0 0.12em; border-radius: 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cohort__copy p { font-size: 18px; max-width: 520px; }
@media (max-width: 899px) {
  .cohort__inner { grid-template-columns: minmax(0, 1fr); }
  .cohort__plan { order: 2; }
}

/* ---------------------------------------------------------- slogan band */
.marquee { overflow: hidden; background: #000; border-block: 1px solid var(--line); padding-block: 20px; }
.marquee__track {
  display: flex; gap: 0.4em; width: max-content; white-space: nowrap;
  font-size: clamp(48px, 8vw, 128px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase;
  animation: marquee 48s linear infinite;
}
.marquee__dot { color: var(--primary); }
.marquee__alt { color: var(--muted); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------- pick your next move */
.paths { background: var(--surface); padding-block: clamp(72px, 10vw, 140px); }
.paths__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.paths__visual { position: relative; }
.paths__visual img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; background: var(--primary); border-radius: 24px; }
.paths__sticker {
  position: absolute; left: -10px; bottom: 28px; transform: rotate(-6deg);
  background: #fff; color: #000; font-weight: 800; font-size: 16px; letter-spacing: -0.01em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.paths h2 { font-size: clamp(44px, 6vw, 90px); font-weight: 800; line-height: 1.1; letter-spacing: -0.045em; }
.paths__list { list-style: none; margin: 28px 0 0; padding: 0; }
.path { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding-block: 24px; border-top: 1px solid var(--line); }
.path__num { font-family: var(--sc-font-mono); font-size: 22px; color: var(--muted); line-height: 1.3; }
.path__body { display: grid; gap: 6px; }
.path h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.path__price { font-family: var(--sc-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.path__body p:not(.path__price) { color: var(--soft); font-size: 16px; }
.path__body a { justify-self: start; margin-top: 4px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--primary-hover); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 899px) {
  .paths__inner { grid-template-columns: minmax(0, 1fr); }
  .paths__visual { max-width: 360px; justify-self: center; width: 100%; }
}

/* ---------------------------------------------------------- recent free guides */
.hguides { background: #000; padding-block: clamp(72px, 10vw, 140px); }
.hguides__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 40px; }
.hguides h2 { font-size: clamp(48px, 7vw, 112px); font-weight: 800; line-height: 1.08; letter-spacing: -0.05em; max-width: 9ch; }
.hguides__head p { max-width: 360px; color: var(--soft); }
.hguides__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.gcard { display: flex; flex-direction: column; gap: 12px; min-height: 210px; padding: clamp(24px, 3vw, 40px); background: #000; text-decoration: none; color: #fff; }
.gcard:nth-child(4n + 1), .gcard:nth-child(4n + 4) { background: var(--primary); }
.gcard__tag { font-family: var(--sc-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gcard h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.gcard p { color: var(--soft); font-size: 16px; }
.gcard__link { margin-top: auto; font-weight: 600; }
a.gcard:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.gcard--soon { cursor: default; }
.nobr { white-space: nowrap; }
.page-home .hguides__all { margin-top: 36px; text-align: center; }
@media (max-width: 759px) {
  .hguides__grid { grid-template-columns: minmax(0, 1fr); }
  .gcard { min-height: 0; }
  .gcard:nth-child(n) { background: #000; }
  .gcard:nth-child(2n + 1) { background: var(--primary); }
}

/* ---------------------------------------------------------- footer */
/* Variant D from the footer lab (home-v2/lab/footers, FEEDBACK.md round 8): the ABAI
   site's footer form with Mariah's columns, and the name along the bottom. */
.hfoot { background: #000; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-block: 64px 32px; }
.hfoot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 32px; }
.hfoot__brand { grid-column: span 4; }
.hfoot__col { grid-column: span 2; }
.hfoot__lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); line-height: 1.3; }
.hfoot__links { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; font-size: 14px; line-height: 1.45; }
.hfoot__links a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color 140ms ease; }
.hfoot__links a:hover { color: #fff; }
.hfoot__k { display: block; color: rgba(255, 255, 255, 0.5); }
.page-home .hfoot__email { color: #fff; white-space: nowrap; }
.page-home .hfoot__email:hover { color: #fff; }
.hfoot__blurb { max-width: 34ch; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); }
.hfoot__social { display: flex; gap: 20px; margin-top: 24px; }
.hfoot__social a { display: inline-flex; color: rgba(255, 255, 255, 0.6); transition: color 140ms ease; }
.hfoot__social a:hover { color: #fff; }
.hfoot__social svg { width: 20px; height: 20px; }
.page-home .hfoot__line { margin-top: 20px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.hfoot__btn { margin-top: 16px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.hfoot__rule { height: 1px; border: 0; margin: 56px 0 0; background: rgba(255, 255, 255, 0.08); }
.hfoot__markwrap { container-type: inline-size; padding-block: clamp(28px, 5vw, 64px); }
/* Sized to the column with container units so the name fills it at every width. */
.page-home .hfoot__mark { font-size: 12.8cqi; line-height: 0.9; white-space: nowrap; letter-spacing: -0.045em; }
.hfoot__mark span { font-weight: 800; text-transform: uppercase; }
.hfoot__mark em { font-weight: 400; font-style: italic; color: var(--muted); letter-spacing: -0.035em; }
.hfoot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.page-home .hfoot__copy { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.hfoot__right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.page-home .hfoot__tag { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.hfoot__pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px;
  border: 1px solid rgba(86, 0, 255, 0.45); background: rgba(16, 14, 32, 0.6);
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; line-height: 1.2; white-space: nowrap;
}
.hfoot__pill-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.hfoot__pill-logo svg { width: 13px; height: 13px; }

/* Below 1240px two-column spans of the twelve-column grid are too narrow for the
   email address, so the blurb goes full width over four equal columns, as on the
   ABAI site's footer. */
@media (max-width: 1239px) {
  .hfoot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hfoot__col { grid-column: auto; }
  .hfoot__brand { grid-column: 1 / -1; }
}
@media (max-width: 879px) {
  .hfoot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hfoot__want { grid-column: 1 / -1; }
  .page-home .hfoot__line { max-width: 46ch; }
}
@media (max-width: 640px) {
  .hfoot { padding-block: 48px 28px; }
  /* Three columns leave the email no room on a phone, so two, with Say hey full width. */
  .hfoot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .hfoot__say, .hfoot__want { grid-column: 1 / -1; }
  .hfoot__rule { margin-top: 40px; }
  .hfoot__bottom { flex-direction: column-reverse; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .btn, .hfoot__links a, .hfoot__social a { transition: none; }
}

/* A highlight's box reaches above the cap height, into the line above. Start the
   colour a little lower so it never paints over that line's descenders. */
.page-home h2 mark, .cohort__hl {
  background: linear-gradient(transparent 0.16em, var(--hl, var(--primary)) 0.16em);
  padding: 0 0.12em;
}
.cohort__hl { --hl: #000; }

@media (max-width: 480px) {
  .hbar { font-size: 13px; }
}

/* Short laptop screens: not enough height for the callouts to drift and still
   clear the name, so they hold still (the name and photo still separate). */
@media (min-width: 1100px) and (max-height: 760px) {
  .hero__callouts { transform: none !important; }
  .callout--1 { top: calc(var(--name-bottom) + 70px); }
  .callout--2 { top: calc(var(--name-bottom) + 56px); }
  .callout--3 { top: calc(var(--name-bottom) + 172px); }
}

/* ---------------------------------------------------------- about page */
.about-hero { padding-block: clamp(48px, 7vw, 96px); background: radial-gradient(60% 70% at 85% 60%, rgba(86, 0, 255, 0.28), transparent 70%), #000; }
.about-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.about-hero__copy { display: grid; gap: 22px; justify-items: start; }
.about-hero h1 { font-size: clamp(56px, 8.4vw, 132px); font-weight: 800; line-height: 0.92; letter-spacing: -0.05em; text-transform: uppercase; }
.about-hero__story { display: grid; gap: 6px; }
.about-hero__story p { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: var(--soft); max-width: 36ch; }
.about-hero__tag { font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; max-width: 18ch; }
.about-hero__tag mark { background: linear-gradient(transparent 0.16em, var(--primary) 0.16em); padding: 0 0.12em; }
.about-hero__cue { font-family: var(--sc-font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.about-hero__cue:hover { color: #fff; }
.about-hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; background: var(--primary); border-radius: 28px; }

/* My journey: four staggered columns on a colour block, as on the reference.
   Columns rise in turn, the rule draws across, the figures count up with the
   scroll, and odd and even columns drift apart slightly. */
.journey { background: var(--primary); color: #fff; padding-block: clamp(72px, 9vw, 120px); overflow: hidden; }
.journey h2 { font-size: clamp(44px, 6vw, 90px); font-weight: 800; line-height: 1.1; letter-spacing: -0.045em; }
.journey h2 mark { --hl: #000; }
.journey__rule { height: 1px; margin-top: clamp(32px, 4vw, 52px); background: rgba(255, 255, 255, 0.55); transform-origin: left center; }
.journey__rule[data-sc-in] { opacity: 1; transform: scaleX(0); transition: transform 1600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.journey__rule[data-sc-in].sc-in { transform: scaleX(1); }
.journey__grid { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 40px); }
.mile { position: relative; padding-top: 22px; }
.mile:nth-child(even) { margin-top: clamp(80px, 9vw, 140px); }
.mile::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: clamp(84px, 8vw, 116px); background: rgba(255, 255, 255, 0.55); }
.mile__inner { padding-left: clamp(16px, 1.6vw, 26px); }
.mile__when { font-size: clamp(40px, 4.4vw, 70px); font-weight: 300; line-height: 1; letter-spacing: -0.035em; margin-bottom: clamp(22px, 2.6vw, 36px); }
.mile__tile { position: relative; aspect-ratio: 9 / 10; display: flex; align-items: flex-end; padding: clamp(16px, 1.8vw, 24px); background: #000; overflow: hidden; }
.mile__tile p, .mile__badge { display: grid; gap: 8px; }
.mile__big { font-size: clamp(56px, 6.4vw, 108px); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; color: var(--muted); font-variant-numeric: tabular-nums; }
.mile__big--word { font-size: clamp(38px, 3.8vw, 64px); letter-spacing: -0.04em; }
.mile__small { font-size: 15px; line-height: 1.4; color: var(--soft); max-width: 22ch; }
.mile__tile--photo { padding: 0; background: radial-gradient(70% 60% at 50% 100%, rgba(124, 58, 237, 0.7), #000 75%); }
.mile__tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mile__badge { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 24px); background: linear-gradient(transparent, rgba(0, 0, 0, 0.88) 46%); }
.mile__badge .mile__big { font-size: clamp(44px, 4.4vw, 72px); color: #fff; }
.mile h3 { margin-top: clamp(20px, 2.4vw, 30px); font-size: clamp(24px, 2.4vw, 38px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase; }
.mile__line { margin-top: 12px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
@media (max-width: 999px) {
  .journey__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
  .mile:nth-child(even) { margin-top: 64px; }
}
@media (max-width: 599px) {
  .journey__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .mile:nth-child(even) { margin-top: 0; }
  .mile__inner { transform: none !important; }
  .mile__tile { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .journey__rule[data-sc-in] { transform: none; transition: none; }
}

/* Polaroids from his own camera roll (rounds 12 to 14, built and checked in
   home-v2/lab/journey-polaroids/ first). Each stage keeps its prints in the gap its
   stagger leaves: odd columns sit high, so their prints hang below the copy; even
   columns sit low, so theirs pin above the year. The closing line sits beside the
   heading. */
.journey__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 48px; }
.journey__lead { max-width: 23ch; font-size: clamp(20px, 2vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }

.mile__inner { position: relative; }
.mile__snaps { position: relative; margin-top: 40px; aspect-ratio: 1 / 1.22; }
.mile__snaps--1 { aspect-ratio: 1 / 0.9; }
.snap {
  position: absolute; width: 60%; margin: 0; container-type: inline-size;
  padding: clamp(6px, 0.62vw, 10px) clamp(6px, 0.62vw, 10px) 0; background: #fff; border-radius: 2px;
  box-shadow: 0 22px 34px -14px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: rotate(var(--tilt));
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 260ms ease;
}
.snap img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #e9e9e9; }
.snap figcaption {
  font-family: "Caveat", "Bradley Hand", cursive; font-weight: 600; font-size: 11.5cqi; line-height: 1;
  color: #1c1c1c; text-align: center; white-space: nowrap; padding: 0.42em 0 0.5em;
}
/* A pair: the first print lies on top, the second tucks under it and hangs lower,
   so both handwritten captions stay readable. Round 13 spaced them out: they share
   about a tenth of a print, not a quarter. */
.mile__snaps--2 .snap:nth-child(1) { left: 0; top: 1%; z-index: 2; }
.mile__snaps--2 .snap:nth-child(2) { right: 0; top: 41%; z-index: 1; }
.mile__snaps--1 .snap { left: 14%; top: 4%; width: 68%; }
@media (hover: hover) {
  .snap:hover { z-index: 3; transform: rotate(0deg) scale(1.07); box-shadow: 0 30px 44px -16px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.25); }
}

/* The drop: prints fall in, settle at their tilt, once the column has risen. The fade
   is short because a half-clear white print reads lavender on the purple. */
@media (prefers-reduced-motion: no-preference) {
  .js .mile[data-sc-in]:not(.sc-in) .snap { opacity: 0; transform: translateY(-36px) rotate(calc(var(--tilt) + 12deg)) scale(1.06); }
  .js .mile[data-sc-in] .snap {
    transition: opacity 160ms linear calc(520ms + var(--i) * 200ms), transform 900ms cubic-bezier(0.18, 0.9, 0.24, 1.18) calc(520ms + var(--i) * 200ms), box-shadow 260ms ease;
  }
  .js .mile.sc-in .snap:hover { transition-delay: 0s; transition-duration: 260ms; }
}

@media (min-width: 1000px) {
  /* Even columns drop by the height of their prints, so the prints pin above the year. */
  .journey__grid { --colw: calc((min(100vw, 1240px) - 2 * var(--gutter) - 3 * clamp(20px, 2.6vw, 40px)) / 4); }
  .mile:nth-child(even) { margin-top: calc(var(--colw) * 1.22 + 64px); }
  .mile:nth-child(even) .mile__snaps { position: absolute; left: clamp(16px, 1.6vw, 26px); right: 0; bottom: calc(100% + 34px); margin: 0; }
}
@media (max-width: 999px) {
  .mile__snaps { max-width: 380px; }
}
@media (max-width: 599px) {
  .mile__snaps { margin-top: 32px; max-width: 340px; }
  .snap figcaption { font-size: 11cqi; }
}

.about-more { background: var(--surface); padding-block: clamp(56px, 8vw, 104px); }
.about-more__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
.about-creds, .about-off { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.about-creds li, .about-off li { padding-block: 16px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 600; }
.about-off li { font-weight: 500; color: var(--soft); }

.about-routes { background: #000; padding-block: clamp(64px, 9vw, 120px); }
.about-routes h2 { font-size: clamp(40px, 5.4vw, 80px); font-weight: 800; line-height: 1.1; letter-spacing: -0.045em; margin-bottom: 28px; }
.about-routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.about-route { display: grid; gap: 10px; padding: clamp(22px, 3vw, 34px); background: #000; text-decoration: none; }
.about-route:first-child { background: var(--primary); }
.about-route span:first-child { font-family: var(--sc-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.about-route strong { font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; }
.about-route:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hhead__menu a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--primary-hover); text-decoration-thickness: 2px; text-underline-offset: 6px; }

@media (max-width: 899px) {
  .about-hero__inner, .about-more__inner { grid-template-columns: minmax(0, 1fr); }
  .about-hero__photo { order: -1; max-width: 340px; width: 100%; }
  .about-routes__grid { grid-template-columns: minmax(0, 1fr); }
}
}