/* ============================================================
   Kai × Harbinger Lane — Roundtable Artifact (keepsake)
   ------------------------------------------------------------
   One cohesive hero, then a sequence of DISTINCT, individually
   designed sections — each with its own layout & rhythm so the
   piece reads as a crafted keepsake, not a template:

     Hero            large title + the room (faces) in one
     The Truth       typography-forward statement, asymmetric
     The Vision      colored pillar-card grid (the centerpiece)
     Leaving Behind  warm coral contrast band, two big columns
     Future Self     airy centered quotations
     Signed          the faces + save

   Brand-true (Nunito · cream #F4ECDF · blue/teal/coral scales)
   but deliberately its own thing, distinct from addkai.io.
   Composed from data (script.js → ARTIFACTS[].blocks).
   ============================================================ */

:root {
  /* Blue */
  --blue-100: #EDF6FD; --blue-200: #CBE4F6; --blue-300: #A8CBE6; --blue-400: #7EABCE;
  --blue-500: #558BB5; --blue-600: #38709F; --blue-700: #235785; --blue-800: #113F69; --blue-900: #05294D;
  /* Teal */
  --teal-100: #EEFAFB; --teal-200: #D0EDF0; --teal-300: #ABD7DE; --teal-400: #7DBBC5;
  --teal-500: #5098A3; --teal-600: #5098A3; --teal-700: #368391; --teal-800: #0C5464; --teal-900: #033B49;
  /* Coral */
  --coral-100: #FFF0EB; --coral-200: #FED9CE; --coral-300: #FABFAE; --coral-400: #F6A48E;
  --coral-500: #F18B71; --coral-600: #C16753; --coral-700: #B84932; --coral-800: #822F1C; --coral-900: #531709;
  /* Neutral */
  --n-50: #FCFDFD; --n-100: #F7F9FA; --n-200: #EEF0F3; --n-300: #DFE3E8; --n-400: #C7CDD4;
  --n-500: #A1A7AD; --n-600: #707880; --n-700: #4C555E; --n-800: #28323B; --n-900: #161D26;
  /* Surfaces */
  --cream: #F4ECDF; --surface-dark: #111E2A;

  --ink: var(--n-900); --ink-hero: var(--blue-900);
  --body: var(--n-600); --body-2: var(--n-700); --divider: var(--n-200);

  --grad: linear-gradient(135deg, #38709F 0%, #368391 50%, #5098A3 100%);

  --sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shadow-card:  0 4px 16px rgba(56, 112, 159, 0.08);
  --shadow-hover: 0 22px 50px -26px rgba(50, 105, 148, 0.30);
  --shadow-soft:  0 1px 4px rgba(0, 0, 0, 0.05);

  --r: 12px; --r-lg: 18px; --r-btn: 8px;
  --maxw: 1120px; --maxw-narrow: 780px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--body); background: var(--cream);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
img { display: block; max-width: 100%; }
::selection { background: var(--blue-200); color: var(--blue-900); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(24px, 4vw, 56px); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.sec { padding: clamp(84px, 12vw, 168px) 0; position: relative; }

/* Eyebrow — small section label with a short rule */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 800;
  color: var(--blue-600); margin: 0 0 20px;
}
.eyebrow__rule { width: 30px; height: 2px; border-radius: 2px; background: var(--blue-400); }
.eyebrow--coral { color: var(--coral-600); } .eyebrow--coral .eyebrow__rule { background: var(--coral-400); }
.eyebrow--teal  { color: var(--teal-700); }  .eyebrow--teal  .eyebrow__rule { background: var(--teal-400); }

.gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---------- Masthead / footer (navy strips) ---------- */
.masthead { background: var(--surface-dark); padding: clamp(18px, 2.4vw, 28px) clamp(24px, 4vw, 56px); }
.lockup { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3.4vw, 36px); flex-wrap: wrap; }
.logo-link { display: inline-flex; line-height: 0; transition: opacity 0.2s var(--ease); }
.logo-link:hover { opacity: 0.72; }
.lockup__logo { width: auto; max-width: none; flex-shrink: 0; }
.lockup__logo--kai { height: clamp(34px, 4.2vw, 46px); }
.lockup__logo--hl { height: clamp(26px, 3.4vw, 38px); }
.lockup__conj { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--n-500); font-weight: 700; }

/* ============================================================
   COVER CEREMONY — the artifact "opens" into the hero on load
   ============================================================ */
body.cover-open { overflow: hidden; }
.cover {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; cursor: pointer;
  background: var(--cream); padding: 40px;
  transition: opacity 1s var(--ease), transform 1.15s var(--ease), filter 1s var(--ease);
}
.cover::before {
  content: ""; position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: min(900px, 120vw); height: min(900px, 120vw); pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(126,171,206,0.30), rgba(80,152,163,0.10) 46%, transparent 70%);
  filter: blur(6px);
}
.cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(5,41,77,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(5,41,77,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 20%, transparent 72%);
          mask-image: radial-gradient(120% 100% at 50% 40%, #000 20%, transparent 72%);
}
.cover__inner { position: relative; z-index: 1; max-width: 900px; }
.cover__inner > * { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.cover.is-on .cover__eyebrow { opacity: 1; transform: none; transition-delay: 0.15s; }
.cover.is-on .cover__title   { opacity: 1; transform: none; transition-delay: 0.32s; }
.cover.is-on .cover__meta    { opacity: 1; transform: none; transition-delay: 0.52s; }
.cover.is-on .cover__for     { opacity: 1; transform: none; transition-delay: 0.68s; }
.cover__eyebrow { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 800; color: var(--blue-600); margin: 0 0 clamp(18px, 2.4vw, 28px); }
.cover__title { font-weight: 900; font-size: clamp(38px, 7vw, 84px); line-height: 1.0; letter-spacing: -0.038em; color: var(--ink-hero); margin: 0; text-wrap: balance; }
.cover__meta { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--n-500); margin: clamp(22px, 3vw, 34px) 0 0; }
.cover__for { font-size: clamp(15px, 1.7vw, 18px); font-weight: 600; color: var(--body-2); margin: 14px 0 0; }
.cover__for b { font-weight: 800; color: var(--ink); }
.cover__hint { position: absolute; bottom: clamp(30px, 5vh, 52px); left: 0; right: 0; z-index: 1; opacity: 0; transition: opacity 0.9s var(--ease) 1s; }
.cover.is-on .cover__hint { opacity: 1; }
.cover__hint span { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 800; color: var(--n-500); animation: coverPulse 2.4s ease-in-out infinite; }
@keyframes coverPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.cover.is-lifting { opacity: 0; transform: translateY(-2.5%) scale(1.015); filter: blur(2px); pointer-events: none; }

/* ============================================================
   HERO — the single opening (title + the room, together)
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--cream); min-height: 92vh; display: flex; align-items: center; padding: clamp(80px, 10vw, 130px) 0 clamp(90px, 12vw, 140px); }
.hero::before {
  content: ""; position: absolute; top: -28%; right: -6%;
  width: min(700px, 76vw); height: min(700px, 76vw);
  background: radial-gradient(circle at 50% 50%, rgba(126,171,206,0.32), rgba(80,152,163,0.13) 44%, transparent 68%);
  pointer-events: none; filter: blur(6px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(5,41,77,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(5,41,77,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(130% 120% at 80% 8%, #000 22%, transparent 74%);
          mask-image: radial-gradient(130% 120% at 80% 8%, #000 22%, transparent 74%);
}
.hero__inner { position: relative; z-index: 1; max-width: 900px; }

/* Animated node network (ported from addkai.io subpage heroes) — quiet depth + movement */
.hero__net {
  position: absolute; top: -30px; right: clamp(-90px, -3vw, -20px); z-index: 0;
  width: min(620px, 62vw); aspect-ratio: 480 / 540; opacity: 0.92; pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 80% at 62% 42%, #000 55%, transparent 100%);
          mask-image: radial-gradient(80% 80% at 62% 42%, #000 55%, transparent 100%);
}
.netgraph { display: block; width: 100%; height: 100%; overflow: visible; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.net-line { opacity: 0.08; animation: netLine 6s ease-in-out infinite; }
.net-node { transform-box: fill-box; transform-origin: center; animation: netNode 4.6s ease-in-out infinite; }
.net-ring { fill: none; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: netRing 5s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; }
@keyframes netLine { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.30; } }
@keyframes netNode { 0%, 100% { opacity: 0.55; transform: scale(1); } 45% { opacity: 1; transform: scale(1.12); } }
@keyframes netRing { 0% { transform: scale(1); opacity: 0.5; } 60%, 100% { transform: scale(4.5); opacity: 0; } }
.hero__title { font-weight: 900; font-size: clamp(44px, 8vw, 92px); line-height: 0.98; letter-spacing: -0.038em; color: var(--ink-hero); margin: 0 0 clamp(18px, 2.4vw, 30px); text-wrap: balance; }
.hero__subtitle { font-weight: 600; font-size: clamp(19px, 2.3vw, 26px); line-height: 1.42; color: var(--body-2); max-width: 40ch; margin: 0; }

/* the room, folded into the hero — the "filled in by attendees" proof */
.hero__room {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap;
  margin-top: clamp(34px, 4.5vw, 56px); padding-top: 24px; border-top: 1px solid var(--n-300);
}
.hero__meta { display: flex; flex-direction: column; gap: 3px; }
.hero__date { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--n-500); }
.roster { display: flex; align-items: center; gap: 14px; }
.roster__faces { display: flex; }
.roster__face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cream); margin-left: -12px; background: var(--blue-100); box-shadow: 0 0 0 1px rgba(0,0,0,0.05); }
.roster__face:first-child { margin-left: 0; }
.roster__face--initials { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--blue-600); }
.roster__meta { font-size: 13.5px; font-weight: 700; color: var(--n-600); }
.roster__meta b { color: var(--ink); }
/* Scroll cue — cinematic "keep going" beat */
.hero__scroll { position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(26px, 4vh, 44px); z-index: 2; display: flex; align-items: center; gap: 14px; }
.hero__scroll span { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 800; color: var(--n-500); }
.hero__scrollLine { position: relative; width: 54px; height: 1px; background: var(--n-300); overflow: hidden; }
.hero__scrollLine::after { content: ""; position: absolute; top: 0; left: -18px; width: 18px; height: 1px; background: var(--blue-600); animation: scrollDot 2s ease-in-out infinite; }
@keyframes scrollDot { 0% { left: -18px; } 60%, 100% { left: 54px; } }

/* ============================================================
   THE TRUTH — typography-forward, asymmetric statement (white)
   ============================================================ */
.truth { background: #fff; min-height: 84vh; display: flex; align-items: center; }
.truth .wrap { width: 100%; }
.truth__lead {
  font-weight: 800; font-size: clamp(28px, 4.2vw, 56px); line-height: 1.13; letter-spacing: -0.03em;
  color: var(--ink); margin: 0 0 clamp(40px, 6vw, 68px); max-width: 24ch; text-wrap: balance;
}
.truth__lead .accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.truth__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.truth__para { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.72; color: var(--body-2); margin: 0; }
.truth__pull {
  font-weight: 800; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.22; color: var(--coral-700);
  margin: 0; padding-left: clamp(20px, 2vw, 28px); border-left: 4px solid var(--coral-500); align-self: center;
}

/* ============================================================
   THE VISION — sticky scrollytelling; the centerpiece.
   Each bucket's number + name pin in place while its shifts
   reveal one-by-one beside them (cream)
   ============================================================ */
.vision { background: var(--cream); }
.vision__head { max-width: 940px; margin: 0 0 clamp(24px, 4vw, 56px); }

/* contents index — a light "table of contents" for the vision */
.vision__index { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.vindex__link { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 15px; border: 1px solid var(--n-300); border-radius: 999px; background: rgba(255, 255, 255, 0.45); text-decoration: none; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.vindex__link:hover { border-color: var(--blue-400); background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.vindex__n { font-weight: 900; font-size: 12px; letter-spacing: 0.02em; color: var(--blue-500); flex: none; }
.vindex__t { font-weight: 800; font-size: 14px; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.vindex.bucket--teal .vindex__link:hover { border-color: var(--teal-400); }
.vindex.bucket--teal .vindex__n { color: var(--teal-600); }
.vindex.bucket--coral .vindex__link:hover { border-color: var(--coral-400); }
.vindex.bucket--coral .vindex__n { color: var(--coral-600); }

.buckets { display: block; }
.bucket {
  display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(30px, 5vw, 96px);
  align-items: start; padding: clamp(46px, 7vw, 104px) 0; position: relative;
}
.bucket + .bucket { border-top: 1px solid var(--n-200); }

/* the pinned side — stays put while the shifts scroll past it */
.bucket__head { position: sticky; top: clamp(96px, 26vh, 240px); align-self: start; }
.bucket__headInner { position: relative; }
.bucket__num {
  display: block; font-weight: 900; font-size: clamp(64px, 11vw, 168px); line-height: 0.82;
  letter-spacing: -0.05em; margin: 0 0 clamp(12px, 1.6vw, 22px);
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.bucket__name { font-weight: 800; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.025em; color: var(--blue-900); margin: 0; text-wrap: balance; }

.bucket__points { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3.6vw, 52px); }
.bpoint { position: relative; padding-left: 24px; }
.bpoint::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 5px rgba(85, 139, 181, 0.12); }
.bpoint__title { font-weight: 800; font-size: clamp(18px, 2vw, 25px); line-height: 1.18; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.015em; }
.bpoint__desc { font-size: clamp(14.5px, 1.55vw, 17.5px); line-height: 1.72; color: var(--body-2); margin: 0; max-width: 60ch; }

.bucket--teal .bucket__num  { background: linear-gradient(135deg, #206A79 0%, #7DBBC5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bucket--teal .bucket__name { color: var(--teal-900); }
.bucket--teal .bpoint::before { background: var(--teal-600); box-shadow: 0 0 0 5px rgba(54, 131, 145, 0.12); }
.bucket--coral .bucket__num  { background: linear-gradient(135deg, #B84932 0%, #F18B71 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bucket--coral .bucket__name { color: var(--coral-900); }
.bucket--coral .bpoint::before { background: var(--coral-500); box-shadow: 0 0 0 5px rgba(241, 139, 113, 0.14); }

/* ============================================================
   LEAVING BEHIND — the navy "letting go" act; the brand network
   is the threshold you cross into it (header rides on it)
   ============================================================ */
.leaving { position: relative; overflow: hidden; background: var(--surface-dark); }
.leaving::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 46% at 50% 6%, rgba(56, 112, 159, 0.32), rgba(32, 106, 121, 0.09) 46%, transparent 72%); }
.leaving__net { position: absolute; top: -8%; left: 50%; transform: translateX(-50%); width: min(1120px, 124vw); aspect-ratio: 480 / 540; opacity: 0.5; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 26%, transparent 66%); mask-image: linear-gradient(#000 26%, transparent 66%); }
.leaving .wrap { position: relative; z-index: 1; }
.leaving__head { max-width: 760px; margin: 0 auto clamp(48px, 7vw, 84px); text-align: center; }
.leaving .eyebrow { justify-content: center; }
.leaving__title { font-size: clamp(28px, 4vw, 46px); line-height: 1.1; color: var(--blue-100); margin: 0; text-wrap: balance; }
.leaving__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); }
.letgo { position: relative; }
.letgo + .letgo { padding-left: clamp(30px, 5vw, 72px); border-left: 1px solid rgba(255, 255, 255, 0.12); }
.letgo__label { font-weight: 900; font-size: clamp(38px, 6vw, 68px); line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 16px;
  background: linear-gradient(135deg, #F6A48E 0%, #F18B71 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.letgo__desc { font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.68; color: var(--n-300); margin: 0; }

/* ============================================================
   FUTURE SELF — airy, centered quotations (white)
   ============================================================ */
.future { background: #fff; text-align: center; position: relative; overflow: hidden; }
.future::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 62% at 50% 42%, rgba(85, 139, 181, 0.12), rgba(80, 152, 163, 0.05) 42%, transparent 72%); }
.future .wrap { position: relative; z-index: 1; }
.future__prompt { font-style: italic; font-weight: 600; font-size: clamp(18px, 2.2vw, 26px); line-height: 1.5; color: var(--n-700); max-width: 42ch; margin: 0 auto clamp(56px, 9vw, 104px); }
.future__quotes { display: flex; flex-direction: column; gap: clamp(56px, 9vw, 112px); }
.quote { margin: 0; }
.quote__mark { display: block; width: 48px; height: 4px; border-radius: 4px; background: var(--grad); margin: 0 auto 28px; }
.quote__text { font-weight: 900; font-size: clamp(32px, 6.2vw, 72px); line-height: 1.03; letter-spacing: -0.04em; color: var(--ink); margin: 0; text-wrap: balance; }
.quote__text::before { content: "\201C"; color: var(--blue-400); } .quote__text::after { content: "\201D"; color: var(--blue-400); }

/* ============================================================
   SIGNED — the faces + save (cream)
   ============================================================ */
.signed { background: var(--cream); text-align: center; }
.signed .eyebrow { justify-content: center; }
.signed__title { font-size: clamp(26px, 3.4vw, 40px); color: var(--ink); margin: 0; }
.signed__faces { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 3vw, 42px); margin-top: clamp(30px, 3.6vw, 48px); }
.signed__person { width: 130px; }
.signed__avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--n-300), var(--shadow-soft); background: var(--blue-100); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.signed__avatar--initials { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 25px; color: var(--blue-600); }
.signed__person:hover .signed__avatar { transform: translateY(-5px) scale(1.05); box-shadow: 0 0 0 1px var(--blue-300), var(--shadow-hover); }
.signed__name { font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--ink); margin: 0 0 3px; }
.signed__inst { font-size: 12.5px; line-height: 1.3; color: var(--n-500); }

/* ---------- Provenance line (closing) ---------- */
.provenance { margin-top: clamp(44px, 6vw, 72px); display: flex; flex-direction: column; align-items: center; }
.provenance__line { display: flex; align-items: center; gap: 16px; margin: 0; max-width: 100%; }
.provenance__rule { width: clamp(20px, 5vw, 48px); height: 1px; background: var(--n-300); flex: none; }
.provenance__text { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; color: var(--n-500); text-align: center; }

/* ---------- Footer ---------- */
.footer { background: var(--surface-dark); padding: 42px clamp(24px, 4vw, 56px) 50px; text-align: center; }
.footer__lockup { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: 18px; }
.footer__logo { width: auto; max-width: none; flex-shrink: 0; }
.footer__logo--kai { height: 38px; } .footer__logo--hl { height: 28px; }
.footer__conj { color: var(--n-600); font-size: 18px; }
.footer__note { font-size: 12.5px; color: var(--n-500); margin: 0; letter-spacing: 0.02em; font-weight: 600; }

/* ---------- Top scroll-progress bar ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: rgba(5, 41, 77, 0.06); }
.progress__fill { height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Chapter rail ---------- */
.rail { position: fixed; left: clamp(16px, 2vw, 30px); top: 50%; transform: translateY(-50%); z-index: 55; }
.rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.rail__link { display: flex; align-items: center; gap: 12px; text-decoration: none; cursor: pointer; }
.rail__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--n-400); background: transparent; transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.rail__label { font-size: 12px; font-weight: 800; letter-spacing: 0.01em; color: var(--n-600); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease); }
.rail__link:hover .rail__label { opacity: 1; transform: none; }
.rail__link:hover .rail__dot { border-color: var(--blue-500); }
.rail__item.is-active .rail__dot { border-color: transparent; background: var(--blue-600); box-shadow: 0 0 0 4px rgba(56, 112, 159, 0.15); transform: scale(1.15); }
.rail__item.is-active .rail__label { opacity: 1; transform: none; color: var(--ink); }

/* rail over a dark section — flip to white so it stays legible */
.rail.is-on-dark .rail__dot { border-color: rgba(255, 255, 255, 0.55); }
.rail.is-on-dark .rail__link:hover .rail__dot { border-color: #fff; }
.rail.is-on-dark .rail__label { color: rgba(255, 255, 255, 0.82); }
.rail.is-on-dark .rail__item.is-active .rail__dot { border-color: transparent; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18); }
.rail.is-on-dark .rail__item.is-active .rail__label { color: #fff; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Staged word-cascade (truth statement + quotes) ---------- */
.wsplit .word { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.wsplit.is-in .word { opacity: 1; transform: none; }

/* ---------- Cinematic hero entrance ---------- */
.hero.is-enter .eyebrow,
.hero.is-enter .hero__title,
.hero.is-enter .hero__subtitle,
.hero.is-enter .hero__room,
.hero.is-enter .hero__scroll { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.hero.is-enter .hero__net { opacity: 0; transform: scale(0.965); transition: opacity 1.3s var(--ease), transform 1.7s var(--ease); }
.hero.is-enter.is-in .eyebrow     { opacity: 1; transform: none; transition-delay: 0.08s; }
.hero.is-enter.is-in .hero__title { opacity: 1; transform: none; transition-delay: 0.18s; }
.hero.is-enter.is-in .hero__subtitle { opacity: 1; transform: none; transition-delay: 0.30s; }
.hero.is-enter.is-in .hero__room  { opacity: 1; transform: none; transition-delay: 0.46s; }
.hero.is-enter.is-in .hero__scroll { opacity: 1; transform: none; transition-delay: 0.72s; }
.hero.is-enter.is-in .hero__net   { opacity: 0.92; transform: none; transition-delay: 0.05s; }

/* ---------- Static render (screenshots) — settle instantly ---------- */
.is-static *, .is-static *::before, .is-static *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .net-line, .net-node, .net-ring, .hero__scrollLine::after { animation: none !important; }
  .net-node { opacity: 0.85; }
  .wsplit .word { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero.is-enter .eyebrow, .hero.is-enter .hero__title, .hero.is-enter .hero__subtitle,
  .hero.is-enter .hero__room, .hero.is-enter .hero__scroll, .hero.is-enter .hero__net {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .truth__cols { grid-template-columns: 1fr; gap: 28px; }
  .truth__pull { border-left: 0; padding-left: 0; padding-top: 22px; border-top: 3px solid var(--coral-500); }
  .leaving__cols { grid-template-columns: 1fr; gap: 40px; }
  .letgo + .letgo { padding-left: 0; border-left: 0; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .bucket { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 34px); padding: clamp(40px, 9vw, 60px) 0; }
  .bucket__head { position: static; top: auto; }
  .bucket__num { font-size: clamp(56px, 20vw, 96px); }
}

/* hide the chapter rail where it would crowd the content */
@media (max-width: 1120px) { .rail { display: none; } }
@media (max-width: 720px) {
  .pillars__grid { grid-template-columns: 1fr; }
  .pcard:last-child:nth-child(odd) .pcard__points { grid-template-columns: 1fr; }
  .lockup__conj { width: 100%; text-align: center; order: 2; } .lockup { gap: 12px; }
  .hero__net { width: 440px; opacity: 0.5; top: -10px; right: -150px; }
  .hero.is-enter.is-in .hero__net { opacity: 0.5; }
}

/* ---------- Print ---------- */
@media print {
  body { background: #fff; }
  .no-print, .cover { display: none !important; }
  .bucket__head { position: static !important; }
  .masthead, .footer { background: #fff; }
  .lockup__conj, .footer__conj, .footer__note { color: var(--n-600); }
  .sec, .hero { padding: 26px 0; }
  .hero::before, .hero::after, .hero__net, .hero__scroll { display: none !important; }
  .hero, .truth { min-height: 0; display: block; }
  .wsplit .word, .hero.is-enter .eyebrow, .hero.is-enter .hero__title, .hero.is-enter .hero__room { opacity: 1 !important; transform: none !important; }
  .leaving { background: #fff !important; }
  .leaving__net { display: none !important; }
  .leaving__title { color: var(--n-900) !important; }
  .leaving__desc, .letgo__desc { color: var(--n-700) !important; }
  .letgo__label { background: none !important; -webkit-text-fill-color: var(--coral-700) !important; color: var(--coral-700) !important; }
  .letgo + .letgo { border-left-color: var(--n-300) !important; }
  .bucket, .letgo, .quote { break-inside: avoid; box-shadow: none; padding: 20px 0; }
  a[href]::after { content: ""; }
}