/* ---------- Tokens ---------- */
:root {
  /* Espresso / Paper / Apricot — see the GOLDEN HOUR block below, which
     overrides these for the live (dark-only) theme; kept in sync here so
     there is no shadowed old-brand palette sitting dormant in source. */
  --bg: #1e1713;
  --bg-alt: #241c17;
  --bg-elevated: #2a211b;
  --bg-elevated-2: #30261f;
  --text: #f3ebdd;
  --text-muted: #cbbca7;
  --text-faint: #8f8172;
  --accent: #e8954f;
  --accent-strong: #f2a968;
  --accent-soft: rgba(232, 149, 79, 0.14);
  --gold: #bf6e3f;
  --gold-soft: rgba(191, 110, 63, 0.16);
  --border: #382d26;
  --border-strong: #493a30;
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.65);
  --shadow-md: 0 16px 40px -18px rgba(0, 0, 0, 0.55);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", monospace;
  /* Fraunces has no Kannada coverage. Scoped to the one bubble that needs
     it (see .somewhere-node__label--kannada) rather than a global webfont
     addition — these are common, broadly-available system fonts with
     Kannada glyph support (Windows/macOS/Android/most Linux distros). */
  --font-kannada: "Noto Sans Kannada", "Nirmala UI", Tunga, "Kannada Sangam MN", "Noto Sans", sans-serif;
  --ease: cubic-bezier(0.16, 0.8, 0.28, 1);
  --dur-fast: 220ms;
  --dur-med: 360ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* subtle grain texture for warmth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 200;
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Visible focus states everywhere */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section { padding: 3.25rem 0; position: relative; z-index: 2; }
.section--quiet { padding: 2.5rem 0; }

.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin-bottom: 2.5rem;
  max-width: 30ch;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(30, 23, 19, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--border); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav__links a {
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__cta {
  border: 1px solid var(--border-strong);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  color: var(--text) !important;
}
.nav__cta:hover { border-color: var(--accent); color: var(--accent-strong) !important; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}
.nav__toggle-bar {
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-med) var(--ease);
  }
  .nav__links.is-open { max-height: 27rem; }
  .nav__links li { width: 100%; }
  .nav__links a { display: block; padding: 1rem 1.5rem; width: 100%; }
  .nav__links .nav__cta { margin: 0.5rem 1.5rem 1rem; display: inline-block; width: auto; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 9.5rem 0 3rem;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.1rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.02;
  margin-bottom: 1.3rem;
  letter-spacing: -0.01em;
}
.hero__tagline {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--text);
  max-width: 34ch;
  margin-bottom: 1rem;
  font-weight: 500;
}
.hero__sub {
  color: var(--text-muted);
  max-width: 42ch;
  margin-bottom: 2.2rem;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-strong); transform: translateY(-2px); }
.btn--ghost { border: 1px solid var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-2px); }

/* ---- hero right side: "Currently" status panel — editorial typography,
   not a card/dashboard. Sits directly on the hero background. ---- */
.hero__currently {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.6rem;
  max-width: 360px;
  margin: 0 auto;
  padding-right: 0.5rem;
}
.currently__divider {
  width: 1px;
  background: var(--border-strong);
  opacity: 0.5;
}
.currently__content {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.currently__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  color: var(--text);
  margin: 0;
}
.currently__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.currently__row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: transform 200ms var(--ease);
}
.currently__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 0.05rem;
  transition: opacity 200ms var(--ease);
}
.currently__icon svg { display: block; width: 100%; height: 100%; }
.currently__icon--accent { color: var(--accent); }
.currently__icon--cream { color: var(--text); }
.currently__copy { display: flex; flex-direction: column; gap: 0.3rem; }
.currently__label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 200ms var(--ease);
}
.currently__text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 26ch;
}
.currently__row:hover .currently__icon { opacity: 0.8; }
.currently__row:hover .currently__label { color: var(--accent-strong); }
.currently__row:hover { transform: translateX(3px); }

/* one-time entrance for the panel's own pieces — same heroIn keyframe the
   rest of the hero uses (.hero-anim), just a smaller ~8px offset so nothing
   travels further than the reference's restrained movement calls for */
.currently-anim {
  opacity: 0;
  transform: translateY(8px);
  animation: heroIn 700ms var(--ease) both;
  animation-delay: calc(var(--d) * 110ms);
}
.currently__divider.currently-anim { transform: scaleY(0); transform-origin: top; }

.hero__bars .bar {
  fill: var(--bg-elevated);
  stroke: var(--border-strong);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: growBar 900ms var(--ease) both;
}
.hero__bars .bar--1 { animation-delay: 300ms; }
.hero__bars .bar--2 { animation-delay: 420ms; }
.hero__bars .bar--3 { animation-delay: 540ms; }
.hero__bars .bar--4 { animation-delay: 660ms; }
.hero__bars .bar--5 { animation-delay: 780ms; }

.hero__line {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: drawLine 1400ms var(--ease) 700ms forwards;
}

.hero__nodes .node {
  fill: var(--accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: popNode 500ms var(--ease) both;
}
.hero__nodes .node--gold { fill: var(--gold); }
.hero__nodes .node--current {
  fill: var(--accent-strong);
  animation: popNode 500ms var(--ease) both, pulse 2400ms ease-in-out 2000ms infinite;
}
.hero__nodes .node:nth-child(1) { animation-delay: 750ms; }
.hero__nodes .node:nth-child(2) { animation-delay: 950ms; }
.hero__nodes .node:nth-child(3) { animation-delay: 1150ms; }
.hero__nodes .node:nth-child(4) { animation-delay: 1350ms; }
.hero__nodes .node:nth-child(5) { animation-delay: 1550ms; }
.hero__nodes .node:nth-child(6) { animation-delay: 1750ms; }
.hero__nodes .node:nth-child(7) { animation-delay: 1950ms; }

@keyframes growBar { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes popNode { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(147, 201, 182, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(147, 201, 182, 0.9)); }
}

.hero-anim {
  opacity: 0;
  transform: translateY(18px);
  animation: heroIn 700ms var(--ease) both;
  animation-delay: calc(var(--d) * 110ms);
}
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ============================================================
   ABOUT — "Three Objects in Space"
   Was previously a fixed-dark interlude regardless of the Dusk/Daylight
   toggle; now follows the page theme like every other section — the
   --about-* tokens below just alias the site's own responsive tokens
   rather than hardcoding dark-mode values.
   Ported from design_handoff_about_section (about-1b-reference.html).
   ============================================================ */
#about {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.about-shell {
  --about-ink: var(--text);
  --about-body: var(--text-muted);
  --about-meta: var(--text-faint);
  --about-meta-dim: color-mix(in srgb, var(--text-faint) 70%, var(--bg) 30%);
  --about-accent: var(--coral);
  --about-ok: #7fa06a;
  --about-no: #c96a4b;
  --about-hairline: var(--border-strong);
  --about-well: rgba(0, 0, 0, 0.22);

  position: relative;
}

.about-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* No max-width: the 34ch cap here previously existed to force the old,
     much longer heading to wrap attractively — the current one-line
     heading needs its full natural width instead. */
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.about-head__eyebrow { display: flex; align-items: center; gap: 0.75rem; }
.about-head__eyebrow-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--about-accent);
}
.about-head__eyebrow-rule { width: 46px; height: 1px; background: color-mix(in srgb, var(--coral) 45%, transparent); }
.about-head__title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.08;
  color: var(--about-ink);
  text-wrap: pretty;
}
.about-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.625rem;
}
/* A plain lift on hover/focus, in place of the old cursor-tracking 3D
   tilt — the tilt made the card copy harder to read as it rotated. */
.about-card__tilt {
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.about-card__tilt:hover,
.about-card__tilt:focus-within {
  transform: translateY(-4px);
}
.about-card {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  height: 100%;
  padding: 1.625rem 1.5rem 1.75rem;
  border-radius: 6px;
  border: 1px solid var(--about-hairline);
  background: linear-gradient(160deg, color-mix(in srgb, var(--text) 9%, transparent), color-mix(in srgb, var(--text) 3%, transparent));
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.8);
}
.about-card--focus {
  border-color: color-mix(in srgb, var(--coral) 30%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--text) 13%, transparent), color-mix(in srgb, var(--text) 4%, transparent));
}
.about-card--open {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--text) 6%, transparent), color-mix(in srgb, var(--text) 2%, transparent));
}

.about-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.about-card__era {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--about-accent);
}
.about-card__era--dim { color: var(--about-meta); }
.about-card__num { font-family: var(--font-mono); font-size: 0.625rem; color: var(--about-meta); }

.about-card__body { display: flex; flex-direction: column; gap: 0.5rem; }
.about-card__title { font-family: var(--font-display); font-size: 1.4375rem; font-weight: 500; line-height: 1.15; color: var(--about-ink); }
.about-card__text { font-size: 0.875rem; line-height: 1.6; color: var(--about-body); text-wrap: pretty; }

.about-card__cta {
  align-self: flex-start;
  margin-top: 0.375rem;
  padding: 0.44rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--coral) 45%, transparent);
  border-radius: 999px;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--about-accent);
  cursor: pointer;
  transition: background 200ms ease;
}
.about-card__cta:hover { background: color-mix(in srgb, var(--coral) 14%, transparent); }

/* ---- diagram wells ---- */
.about-card__well {
  box-sizing: border-box;
  position: relative;
  height: 116px;
  border-radius: 4px;
  background: var(--about-well);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  overflow: hidden;
}

/* 01 — outreach log */
.about-log { padding: 0.7rem 0.875rem; display: flex; flex-direction: column; justify-content: space-between; }
.about-log__head, .about-log__row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.625rem;
  font-family: var(--font-mono);
}
.about-log__head { align-items: baseline; gap: 0.75rem; font-size: 0.59rem; letter-spacing: 0.08em; color: var(--about-meta); }
.about-log__count { color: var(--about-accent); white-space: nowrap; }
.about-log__row { font-size: 0.625rem; color: var(--about-meta); animation: aboutReplyIn 5s ease-in-out infinite; }
.about-log__row:nth-child(2) { animation-delay: 0s; }
.about-log__row:nth-child(3) { animation-delay: 0.6s; }
.about-log__row:nth-child(4) { animation-delay: 1.2s; }
.about-log__row:nth-child(5) { animation-delay: 1.8s; color: var(--about-meta-dim); }
.about-log__ok { color: var(--about-ok); }
.about-log__no { color: var(--about-no); }
.about-log__caret { animation: aboutCaret 1s step-end infinite; }

/* 02 — pipeline */
.about-pipe { padding: 0 1.375rem; display: flex; align-items: center; }
.about-pipe__track { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.about-pipe__line { position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.about-pipe__payload {
  position: absolute; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--about-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--about-accent) 60%, transparent);
  animation: aboutFlowDot 4.2s linear infinite;
}
.about-pipe__node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.56rem; }
.about-pipe__box {
  width: 20px; height: 20px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  background: color-mix(in srgb, var(--text) 10%, transparent);
  animation: aboutNodeOn 4.2s ease-in-out infinite;
}
.about-pipe__node:nth-child(3) .about-pipe__box { animation-delay: 0.1s; }
.about-pipe__node:nth-child(4) .about-pipe__box { animation-delay: 1.4s; }
.about-pipe__node:nth-child(5) .about-pipe__box { animation-delay: 2.7s; }
.about-pipe__label {
  font-family: var(--font-mono); font-size: 0.53rem; letter-spacing: 0.08em;
  color: var(--about-meta); white-space: nowrap;
}

/* 03 — open question */
.about-open { border: 1px dashed color-mix(in srgb, var(--text) 16%, transparent); background: none; display: flex; align-items: center; justify-content: center; }
.about-open__mark { font-family: var(--font-display); font-size: 2.875rem; color: color-mix(in srgb, var(--coral) 50%, transparent); animation: aboutBreathe 4s ease-in-out infinite; }

@keyframes aboutReplyIn { 0%, 30% { opacity: 0; transform: translateY(4px); } 45%, 100% { opacity: 1; transform: none; } }
@keyframes aboutCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes aboutFlowDot { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes aboutNodeOn {
  0%, 100% { background: color-mix(in srgb, var(--text) 10%, transparent); border-color: color-mix(in srgb, var(--text) 20%, transparent); }
  45%, 62% { background: color-mix(in srgb, var(--coral) 30%, transparent); border-color: var(--coral); }
}
@keyframes aboutBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 600px) {
  .about-head__title { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-log__row, .about-log__caret, .about-pipe__payload, .about-pipe__box, .about-open__mark { animation: none !important; }
  .about-log__row { opacity: 1; }
  .about-card__tilt { transition: none !important; transform: none !important; }
}

/* ============================================================
   ABOUT — project peek (card 03's "what I'm building on the
   side" overlay). Lives outside .about-shell in the DOM (see
   index.html, alongside #story-reader) with its own copy of the
   --about-* fixed-dark tokens, so its `position: fixed` can't be
   hijacked by .about-shell's scroll-reveal transform. Ported from
   the updated about-1b-reference.html ("1b + expandable project
   peek").
   ============================================================ */
.about-peek {
  /* Tokens duplicated from .about-shell (same aliases, not fixed
     literals): this overlay lives outside .about-shell in the DOM (see
     index.html, near #story-reader) so it can't inherit .about-shell's
     locally-scoped custom properties and needs its own copy — but the
     whole overlay, backdrop included, should track the Dusk/Daylight
     toggle the same way .about-shell's cards do. */
  --about-ink: var(--text);
  --about-body: var(--text-muted);
  --about-meta: var(--text-faint);
  --about-meta-dim: color-mix(in srgb, var(--text-faint) 70%, var(--bg) 30%);
  --about-accent: var(--coral);
  --about-ok: #7fa06a;
  --about-no: #c96a4b;
  --about-hairline: var(--border-strong);
  --about-well: rgba(0, 0, 0, 0.22);

  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 2.5rem 1.75rem;
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  backdrop-filter: blur(15px) saturate(0.85);
  -webkit-backdrop-filter: blur(15px) saturate(0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.about-peek.is-open { opacity: 1; pointer-events: auto; }

.about-peek__body { display: flex; flex-direction: column; gap: 1.375rem; width: 100%; max-width: 1060px; max-height: 100%; overflow-y: auto; padding-right: 2px; }
.about-peek__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.about-peek__headings { display: flex; flex-direction: column; gap: 0.56rem; max-width: 46ch; }
.about-peek__title {
  font-family: var(--font-display);
  font-size: 1.6875rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--about-ink);
  text-wrap: pretty;
  /* Overrides the generic h2 { margin-bottom: 2.5rem } — that spacing is
     tuned for section headings followed by a full lede paragraph; here
     the supporting line belongs directly to the heading, so this h2's
     own margin is zeroed and .about-peek__sub's margin-top (below)
     carries the (much smaller) gap instead, scoped to this pairing only. */
  margin-bottom: 0;
}
.about-peek__sub { font-size: 0.84rem; line-height: 1.6; color: var(--about-body); text-wrap: pretty; margin-top: 1rem; }
.about-peek__close {
  flex: none; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.875rem; border: 1px solid var(--about-hairline); border-radius: 999px; background: none;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--about-body); cursor: pointer; white-space: nowrap;
  transition: border-color 180ms ease, color 180ms ease;
}
.about-peek__close:hover { border-color: rgba(232, 149, 79, 0.5); color: var(--about-accent); }

/* ---- chapter rail (project tabs) ---- */
.peek-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
.peek-rail__tab {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 0.44rem; align-items: flex-start;
  padding: 0.8rem 0.94rem 0.94rem;
  border: 1px solid var(--about-hairline); border-radius: 5px; background: rgba(255, 240, 220, 0.03);
  text-align: left; cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease;
}
.peek-rail__tab:hover { border-color: rgba(232, 149, 79, 0.35); }
.peek-rail__tab.is-on { border-color: rgba(232, 149, 79, 0.5); background: rgba(232, 149, 79, 0.09); }
.peek-rail__n { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; color: var(--about-meta); }
.peek-rail__tab.is-on .peek-rail__n { color: var(--about-accent); }
.peek-rail__name { font-family: var(--font-display); font-size: 0.906rem; font-weight: 500; line-height: 1.2; color: var(--about-body); }
.peek-rail__tab.is-on .peek-rail__name { color: var(--about-ink); }
.peek-rail__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--about-accent); transition: width 320ms cubic-bezier(0.22, 0.9, 0.22, 1); }
.peek-rail__tab.is-on .peek-rail__bar { width: 100%; }

/* ---- detail card ---- */
.peek-detail {
  display: block;
  padding: 1.75rem 1.875rem 1.875rem;
  border: 1px solid var(--about-hairline); border-radius: 8px;
  background: linear-gradient(150deg, var(--bg-elevated-2), var(--bg-elevated));
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.peek-detail__left { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.peek-detail__right { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.peek-slide { display: none; }
.peek-slide.is-on { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.875rem; animation: peekSwapIn 380ms ease both; }
@keyframes peekSwapIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.peek-proj__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.peek-proj__num { font-family: var(--font-mono); font-size: 0.625rem; color: var(--about-meta); }
.peek-proj__status {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.25rem 0.56rem; border-radius: 999px; border: 1px solid currentColor; color: var(--about-meta); white-space: nowrap;
}
.peek-proj__status--live { color: var(--about-ok); }
.peek-proj__status--build { color: var(--about-accent); }
.peek-proj__well { position: relative; height: 150px; border-radius: 4px; background: var(--about-well); border: 1px solid rgba(255, 240, 220, 0.08); overflow: hidden; }
.peek-proj__kicker { font-family: var(--font-mono); font-size: 0.594rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--about-meta); }
.peek-proj__title { font-family: var(--font-display); font-size: 1.625rem; font-weight: 500; line-height: 1.14; color: var(--about-ink); text-wrap: pretty; }
.peek-proj__hook { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; color: var(--about-accent); }
.peek-proj__text { font-size: 0.844rem; line-height: 1.62; color: var(--about-body); text-wrap: pretty; }
.peek-proj__insight { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem 0.875rem; border-left: 1px solid rgba(232, 149, 79, 0.4); background: rgba(232, 149, 79, 0.06); }
.peek-proj__insight-label { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--about-accent); }
.peek-proj__insight-text { font-size: 0.8125rem; line-height: 1.55; color: var(--about-body); text-wrap: pretty; }
.peek-proj__roles { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.peek-proj__role { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 3px; background: rgba(255, 240, 220, 0.07); color: var(--about-meta); }
.peek-proj__link { font-family: var(--font-mono); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.08em; color: var(--about-accent); text-decoration: none; }
.peek-proj__link:hover { color: var(--about-accent); }

/* ---- expandable "read more" region ---- */
.peek-more {
  grid-column: 1 / -1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.22, 0.9, 0.22, 1);
}
.peek-slide.is-more .peek-more { grid-template-rows: 1fr; }
.peek-more__clip { overflow: hidden; }
.peek-more__inner {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding-top: 1.5rem; margin-top: 0.25rem;
  border-top: 1px solid var(--about-hairline);
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms ease 90ms, transform 320ms ease 90ms;
}
.peek-slide.is-more .peek-more__inner { opacity: 1; transform: none; }
.peek-more__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.375rem; }
.peek-more__block { display: flex; flex-direction: column; gap: 0.5rem; }
.peek-more__label { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--about-meta); }
.peek-more__text { font-size: 0.8125rem; line-height: 1.62; color: var(--about-body); text-wrap: pretty; }
.peek-more__list { display: flex; flex-direction: column; gap: 0.44rem; }
.peek-more__item { display: flex; align-items: baseline; gap: 0.56rem; font-size: 0.78rem; line-height: 1.5; color: var(--about-body); }
.peek-more__tick { flex: none; font-family: var(--font-mono); font-size: 0.625rem; color: var(--about-ok); }
.peek-more__tick--open { color: var(--about-meta-dim); }
.peek-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.peek-shot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.44rem;
  aspect-ratio: 4 / 3; padding: 0.875rem;
  border: 1px dashed rgba(255, 240, 220, 0.18); border-radius: 4px;
  background: rgba(0, 0, 0, 0.18); text-align: center;
}
.peek-shot__icon { font-family: var(--font-mono); font-size: 0.8125rem; color: rgba(232, 149, 79, 0.6); }
.peek-shot__cap { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--about-meta); line-height: 1.5; }

.peek-toggle {
  align-self: flex-start; display: flex; align-items: center; gap: 0.56rem;
  margin-top: 0.125rem; padding: 0.5rem 0.94rem;
  border: 1px solid rgba(232, 149, 79, 0.45); border-radius: 999px; background: none;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--about-accent); cursor: pointer;
  transition: background 200ms ease;
}
.peek-toggle:hover { background: rgba(232, 149, 79, 0.14); }
.peek-toggle__chev { display: inline-block; transition: transform 340ms cubic-bezier(0.22, 0.9, 0.22, 1); }
.peek-slide.is-more .peek-toggle__chev { transform: rotate(180deg); }

/* ---- bottom nav row ---- */
.peek-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.peek-nav__count { font-family: var(--font-mono); font-size: 0.625rem; color: var(--about-meta); }
.peek-nav__btns { display: flex; gap: 0.5rem; }
.peek-nav__btn {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.56rem 1rem; border: 1px solid var(--about-hairline); border-radius: 999px; background: none;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--about-ink); cursor: pointer; white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.peek-nav__btn:hover { border-color: rgba(232, 149, 79, 0.5); background: rgba(232, 149, 79, 0.1); color: var(--about-accent); }

/* ---- well: 01 mini dashboard ---- */
.peek-dash { height: 100%; padding: 0.75rem 0.875rem 0.7rem; display: flex; flex-direction: column; gap: 0.56rem; }
.peek-dash__top { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.peek-dash__label { font-family: var(--font-mono); font-size: 0.53rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--about-meta); }
.peek-dash__live { display: flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.53rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--about-ok); }
.peek-dash__live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--about-ok); animation: peekLivePulse 2.4s ease-in-out infinite; }
.peek-dash__chart { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 0.375rem; min-height: 0; }
.peek-dash__chart span {
  flex: 1; border-radius: 1px 1px 0 0; background: rgba(255, 240, 220, 0.16);
  transform-origin: bottom; animation: peekBarRise 4.6s ease-in-out infinite;
}
.peek-dash__chart span:nth-child(1) { height: 38%; }
.peek-dash__chart span:nth-child(2) { height: 52%; animation-delay: 0.1s; }
.peek-dash__chart span:nth-child(3) { height: 45%; animation-delay: 0.2s; }
.peek-dash__chart span:nth-child(4) { height: 61%; animation-delay: 0.3s; }
.peek-dash__chart span:nth-child(5) { height: 57%; animation-delay: 0.4s; }
.peek-dash__chart span:nth-child(6) { height: 94%; background: rgba(232, 149, 79, 0.9); animation: peekBarKey 4.6s ease-in-out infinite; }
.peek-dash__scan {
  position: absolute; top: 0; bottom: 0; width: 1px; left: 0;
  background: linear-gradient(rgba(240, 217, 188, 0), rgba(240, 217, 188, 0.55), rgba(240, 217, 188, 0));
  animation: peekScanSweep 4.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.peek-dash__insight {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.56rem; border-radius: 3px;
  border-left: 1px solid var(--about-accent); background: rgba(232, 149, 79, 0.12);
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.04em; color: #f0d9bc; white-space: nowrap; overflow: hidden;
  animation: peekInsightIn 4.6s ease-in-out infinite;
}
.peek-dash__delta { color: var(--about-accent); }

/* ---- well: 02 map ---- */
.peek-map {
  height: 100%; position: relative; overflow: hidden;
  background-image: linear-gradient(rgba(255,240,220,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,240,220,0.055) 1px, transparent 1px);
  background-size: 22px 22px;
}
.peek-map__route { position: absolute; left: 14%; right: 14%; top: 56%; border-top: 1px dashed rgba(232, 149, 79, 0.4); }
.peek-map__ping {
  position: absolute; left: 50%; top: 56%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; border: 1px solid rgba(232, 149, 79, 0.7);
  animation: peekRingOut 3.6s ease-out infinite;
}
.peek-map__drop { position: absolute; transform-origin: 50% 100%; animation: peekDropIn 5.2s cubic-bezier(0.2, 1.5, 0.4, 1) infinite; }
.peek-map__drop:nth-of-type(3) { left: 14%; top: 56%; }
.peek-map__drop:nth-of-type(4) { left: 38%; top: 30%; animation-delay: 0.45s; }
.peek-map__drop:nth-of-type(5) { left: 62%; top: 62%; animation-delay: 0.9s; }
.peek-map__drop:nth-of-type(6) { left: 84%; top: 34%; animation-delay: 1.35s; }
.peek-map__bubble {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: 24px; height: 24px; margin: -30px 0 0 -12px;
  border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  background: rgba(24, 18, 14, 0.96); border: 1px solid rgba(232, 149, 79, 0.55);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.9);
}
.peek-glass {
  position: relative; width: 9px; height: 12px; margin-bottom: 4px;
  transform: rotate(45deg);
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(#e8a24f, #c4661f);
}
.peek-glass::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; border-radius: 2px; background: #f7ecdc; }
.peek-glass--pale { background: linear-gradient(#f0d9a8, #d9b169); }
.peek-glass--dark { background: linear-gradient(#7a4423, #40210f); }
.peek-glass--af { background: linear-gradient(#cfe3d2, #8fae94); }

/* ---- well: 03 product ---- */
.peek-prod { height: 100%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.peek-prod::before {
  content: ""; position: absolute; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(rgba(232, 149, 79, 0.22), transparent 70%);
  animation: peekGlowBreathe 4.4s ease-in-out infinite;
}
.peek-prod__can {
  position: relative; z-index: 1; width: 40px; height: 74px; overflow: hidden;
  border-radius: 7px / 10px;
  background: linear-gradient(100deg, #2f241b 0%, #6d503a 22%, #f0d9bc 48%, #7d5c42 72%, #2a201a 100%);
  box-shadow: 0 12px 22px -12px rgba(0, 0, 0, 0.95);
  animation: peekCanBob 4.4s ease-in-out infinite;
}
.peek-prod__band { position: absolute; left: 0; right: 0; top: 40%; height: 13px; background: linear-gradient(90deg, rgba(191, 110, 63, 0.35), var(--about-accent) 45%, rgba(191, 110, 63, 0.5)); }
.peek-prod__mark { position: absolute; left: 0; right: 0; top: 22%; text-align: center; font-family: var(--font-mono); font-size: 0.4375rem; letter-spacing: 0.14em; color: rgba(24, 18, 14, 0.75); }
.peek-prod__lid { position: absolute; left: 4px; right: 4px; top: 2px; height: 5px; border-radius: 50%; background: rgba(255, 247, 236, 0.55); }
.peek-prod__shine { position: absolute; top: -20%; bottom: -20%; width: 10px; left: -20px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: peekShineSweep 4.4s ease-in-out infinite; }
.peek-prod__fizz { position: absolute; width: 5px; height: 5px; border-radius: 50%; border: 1px solid rgba(240, 217, 188, 0.65); animation: peekFizzUp 3.4s ease-in infinite; }
.peek-prod__fizz:nth-of-type(1) { left: 34%; animation-delay: 0s; }
.peek-prod__fizz:nth-of-type(2) { left: 44%; width: 3px; height: 3px; animation-delay: 0.7s; }
.peek-prod__fizz:nth-of-type(3) { left: 58%; animation-delay: 1.3s; }
.peek-prod__fizz:nth-of-type(4) { left: 65%; width: 4px; height: 4px; animation-delay: 2s; }
.peek-prod__fizz:nth-of-type(5) { left: 40%; width: 3px; height: 3px; animation-delay: 2.6s; }
.peek-prod__tag { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--about-meta); }

/* ---- consumer-AI project: three-stage product glimpse ----
   Its own well modifier (auto height, not the fixed 150px other
   projects use) because this project shows three small screens
   instead of one widget — see index.html for the rationale. */
.peek-proj__well--glimpse { height: auto; min-height: 150px; min-width: 0; padding: 0.9rem 0.7rem; }
.peek-glimpse { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.4rem; height: 100%; min-width: 0; }
.peek-glimpse__stage { flex: 1; min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; }
.peek-glimpse__arrow { flex: none; align-self: center; margin-top: 2rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--about-meta-dim); }
.peek-glimpse__label { max-width: 100%; white-space: normal; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--about-accent); }
.peek-glimpse__cap { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--about-meta); line-height: 1.45; }
.peek-glimpse__mock {
  width: 100%; min-width: 0; min-height: 62px; border-radius: 5px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 240, 220, 0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem; padding: 0.45rem 0.4rem; overflow: hidden;
}
/* stage 1: a single generic input, not a chat thread */
.peek-glimpse__mock--input { flex-direction: row; justify-content: space-between; gap: 0.35rem; border-radius: 999px; padding: 0.5rem 0.45rem 0.5rem 0.7rem; min-width: 0; }
.peek-glimpse__prompt { min-width: 0; flex: 1; font-family: var(--font-display); font-style: italic; font-size: 0.594rem; line-height: 1.3; color: var(--about-meta); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-glimpse__go { flex: none; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(232, 149, 79, 0.16); color: var(--about-accent); font-size: 0.56rem; }
/* stage 2: redacted/blurred activity, deliberately unreadable */
.peek-glimpse__row { display: block; width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 240, 220, 0.16); }
.peek-glimpse__row--blur { filter: blur(1.5px); opacity: 0.7; }
.peek-glimpse__row--redact { background: rgba(255, 240, 220, 0.28); }
.peek-glimpse__row--short { width: 62%; }
.peek-glimpse__pending {
  margin-top: 0.15rem; max-width: 100%; display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-mono); font-size: 0.47rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--about-meta);
  white-space: normal; text-align: center;
}
.peek-glimpse__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--about-accent); animation: peekLivePulse 2.4s ease-in-out infinite; }
/* stage 3: restrained outcome, not a celebration */
.peek-glimpse__tick { font-family: var(--font-mono); font-size: 0.9rem; color: var(--about-ok); }
.peek-glimpse__done-label { font-family: var(--font-display); font-size: 0.75rem; color: var(--about-ink); }
.peek-glimpse__done-meta { max-width: 100%; font-family: var(--font-mono); font-size: 0.47rem; letter-spacing: 0.04em; color: var(--about-meta); white-space: normal; text-align: center; }
.peek-more__tick--live { color: var(--about-accent); }

@keyframes peekLivePulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes peekBarRise { 0%, 100% { transform: scaleY(0.86); } 45% { transform: scaleY(1); } }
@keyframes peekBarKey {
  0%, 30% { transform: scaleY(0.6); background: rgba(255, 240, 220, 0.16); box-shadow: none; }
  52%, 100% { transform: scaleY(1); background: rgba(232, 149, 79, 0.9); box-shadow: 0 0 14px rgba(232, 149, 79, 0.45); }
}
@keyframes peekScanSweep { 0%, 8% { left: 0; opacity: 0; } 14% { opacity: 1; } 46% { left: 100%; opacity: 0.9; } 54%, 100% { left: 100%; opacity: 0; } }
@keyframes peekInsightIn { 0%, 46% { opacity: 0; transform: translateY(6px); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes peekRingOut { 0% { transform: scale(0.6); opacity: 0.9; } 70%, 100% { transform: scale(5.2); opacity: 0; } }
@keyframes peekDropIn {
  0%, 4% { opacity: 0; transform: translateY(-10px) scale(0.7); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  16% { transform: translateY(0) scale(0.94); }
  20%, 74% { transform: translateY(0) scale(1); opacity: 1; }
  86%, 100% { opacity: 0; transform: translateY(-6px) scale(0.8); }
}
@keyframes peekCanBob { 0%, 100% { transform: translateY(2px) rotate(-1.5deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } }
@keyframes peekShineSweep { 0%, 20% { left: -20px; } 55%, 100% { left: 56px; } }
@keyframes peekFizzUp { 0% { bottom: 14%; opacity: 0; transform: translateX(0); } 20% { opacity: 0.9; } 70% { opacity: 0.7; transform: translateX(4px); } 100% { bottom: 92%; opacity: 0; transform: translateX(-3px); } }
@keyframes peekGlowBreathe { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } }

@media (max-width: 780px) {
  .peek-slide.is-on { grid-template-columns: 1fr; gap: 1.25rem; }
  .peek-rail { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .about-peek { padding: 1.5rem 1rem; }
  .about-peek__head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-peek, .peek-rail__bar, .peek-more, .peek-more__inner, .peek-toggle__chev { transition: none !important; }
  .peek-slide.is-on { animation: none !important; }
  .peek-dash__chart span, .peek-dash__scan, .peek-dash__insight, .peek-dash__live::before,
  .peek-map__ping, .peek-map__drop,
  .peek-prod::before, .peek-prod__can, .peek-prod__shine, .peek-prod__fizz,
  .peek-glimpse__dot { animation: none !important; }
  .peek-dash__insight, .peek-map__drop, .peek-glimpse__dot { opacity: 1; }
}

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 2.5rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--border) 90%);
}
.timeline__item { position: relative; margin-bottom: 1.1rem; }
.timeline__item:last-child { margin-bottom: 0; }

.timeline__dot {
  position: absolute;
  left: -2.5rem;
  top: 1.6rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.timeline__item--current .timeline__dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.timeline__tile {
  width: 100%;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
}
.timeline__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.4rem;
}
.timeline__role { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.timeline__dates {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  white-space: nowrap;
}
.timeline__company {
  color: var(--accent-strong);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.timeline__desc { color: var(--text-muted); font-size: 0.95rem; }


/* --- 1a: story previews on timeline cards --- */
.timeline::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-strong), var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1400ms var(--ease) 180ms;
}
.timeline.in-view::after { transform: scaleY(1); }
.timeline__item--current .timeline__dot { animation: dotPulse 2.8s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 149, 79, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(232, 149, 79, 0); }
}

/* ============================================================
   SOMEWHERE IN HERE IS ME — replaces Learnings.
   A fixed-dark full-bleed band, independent of the Dusk/Daylight
   toggle (same rationale as the About shell / peek overlay).
   Ported from the "Word Constellation" design canvas into vanilla
   HTML/CSS/JS — logic lives in js/constellation.js.
   ============================================================ */
.somewhere {
  position: relative;
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0 clamp(1.4rem, 2.8vw, 2.25rem);
  overflow: hidden;
  color: var(--text);
}

.somewhere-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
.somewhere-head__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 0.7rem;
  letter-spacing: -0.015em;
  color: var(--text);
}
.somewhere-head__sub {
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ---- After Hours / On the Clock toggle ---- */
.somewhere-toggle {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  flex-shrink: 0;
}
.somewhere-toggle__knob {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--side-soft, rgba(232, 149, 79, 0.15));
  border: 1px solid var(--side-accent, #e8954f);
  transform: translateX(0%);
  transition: transform 420ms cubic-bezier(0.16, 0.8, 0.28, 1), background 380ms ease, border-color 380ms ease;
}
.somewhere-toggle.is-clock .somewhere-toggle__knob { transform: translateX(100%); }
.somewhere-toggle__btn {
  position: relative;
  z-index: 1;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 300ms ease;
}
.somewhere-toggle__btn.is-active { color: var(--side-accent, #e8954f); }

/* ---- orbit stage (desktop) ---- */
.somewhere-orbit {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.6;
  max-height: 720px;
}
.somewhere-orbit__aura { display: none; }
.somewhere-orbit__wires {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  width: 100%;
  height: 100%;
}
.somewhere-orbit__wires path { fill: none; transition: opacity 260ms ease, stroke-width 260ms ease; }
.somewhere-orbit__nodes { position: absolute; inset: 0; }

/* ---- core (both layouts) ---- */
.somewhere-core {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(244, 236, 221, 0.1);
  transform: translate(-50%, -50%);
  transition: border-color 420ms ease, background 420ms ease, box-shadow 420ms ease;
}
.somewhere-core.is-flipping { animation: somewhereCoreFlip 640ms cubic-bezier(0.22, 1.05, 0.3, 1); }
.somewhere-core__title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.somewhere-core--flat {
  position: relative;
  left: auto; top: auto; transform: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 1.4rem 1rem;
  border-radius: 22px;
  width: 100%;
  box-sizing: border-box;
}
.somewhere-core--flat .somewhere-core__title { font-size: 1.5rem; }

/* ---- orbit nodes ---- */
.somewhere-node {
  position: absolute;
  display: block;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
  color: inherit;
}
.somewhere-node__flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transition: transform 480ms cubic-bezier(0.3, 1.05, 0.32, 1), opacity 280ms ease;
}
.somewhere-node__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.somewhere-node__face--front {
  gap: 9px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(244, 236, 221, 0.045), rgba(0, 0, 0, 0.26));
  border: 1px solid rgba(244, 236, 221, 0.13);
  transition: background 240ms ease, border-color 240ms ease, box-shadow 300ms ease;
}
.somewhere-node.is-hover .somewhere-node__face--front,
.somewhere-node:focus-visible .somewhere-node__face--front {
  background: color-mix(in srgb, var(--bg-elevated-2) 80%, var(--side-accent, #e8954f) 20%);
  border-color: var(--side-accent, #e8954f);
}
.somewhere-node.is-lit .somewhere-node__face--front {
  box-shadow: 0 14px 44px -14px var(--side-soft, rgba(232, 149, 79, 0.15)), inset 0 1px 0 rgba(244, 236, 221, 0.08);
}
.somewhere-node__face--back {
  gap: 4px;
  transform: rotateY(180deg);
  background: color-mix(in srgb, var(--bg-elevated-2) 78%, var(--side-accent, #e8954f) 22%);
  border: 1px solid var(--side-accent, #e8954f);
  box-shadow: var(--shadow-md);
}
.somewhere-node__glyph { width: 30%; height: 30%; display: block; transition: transform 260ms ease; }
.somewhere-node__glyph svg { width: 100%; height: 100%; display: block; stroke: var(--side-accent, #e8954f); stroke-width: 1.5; transition: stroke 240ms ease, stroke-width 240ms ease; }
.somewhere-node.is-hover .somewhere-node__glyph svg,
.somewhere-node:focus-visible .somewhere-node__glyph svg { stroke-width: 2.3; }
.somewhere-node__label {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text-muted);
  transition: color 240ms ease;
  text-align: center;
  padding: 0 6%;
}
.somewhere-node.is-hover .somewhere-node__label,
.somewhere-node:focus-visible .somewhere-node__label { color: var(--text); }
.somewhere-node__label--kannada { font-family: var(--font-kannada); font-weight: 500; white-space: normal; }
.somewhere-node__stat {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
}
.somewhere-node__stat-note {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 76%;
  overflow-wrap: break-word;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.25;
}
/* The short personal-fact reveal (everything except Humour, which keeps
   the stat/stat-note split above) — one centred serif block, wrapping
   naturally rather than shrinking to force a single line. */
.somewhere-node__reveal {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 78%;
  overflow-wrap: break-word;
  color: var(--text);
  text-align: center;
}

/* ---- mobile grid fallback (narrow) ---- */
.somewhere-grid { display: none; flex-direction: column; gap: 1.4rem; }
.somewhere-grid__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.somewhere-tile {
  position: relative;
  aspect-ratio: 1;
  perspective: 420px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}
.somewhere-tile__flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(0.3, 1.05, 0.32, 1);
}
.somewhere-tile.is-flipped .somewhere-tile__flip { transform: rotateY(180deg); }
.somewhere-tile__face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.somewhere-tile__face--front {
  background: radial-gradient(120% 120% at 30% 20%, rgba(244, 236, 221, 0.05), rgba(0, 0, 0, 0.26));
  border: 1px solid rgba(244, 236, 221, 0.12);
}
.somewhere-tile__face--back {
  gap: 0.2rem;
  transform: rotateY(180deg);
  background: color-mix(in srgb, var(--bg-elevated-2) 78%, var(--side-accent, #e8954f) 22%);
  border: 1px solid var(--side-accent, #e8954f);
  padding: 0 0.3rem;
}
.somewhere-tile .somewhere-node__glyph { width: 26%; height: 26%; }
.somewhere-tile__label { font-family: var(--font-display); font-size: 0.9rem; color: var(--text-muted); text-align: center; line-height: 1.1; }
.somewhere-tile__label--kannada { font-family: var(--font-kannada); font-weight: 500; font-size: 0.72rem; }
.somewhere-tile__stat { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.somewhere-tile__stat-note { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); text-align: center; line-height: 1.25; }
.somewhere-tile__reveal {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 84%;
  overflow-wrap: break-word;
  color: var(--text);
  text-align: center;
}
.somewhere-tile__reveal--long { font-size: 0.86rem; }

/* ---- entrance / switch animations ---- */
@keyframes somewhereCoreFlip {
  0% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -50%) scale(0.86); }
  70% { transform: translate(-50%, -50%) scale(1.07); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes somewherePopIn {
  0% { opacity: 0; transform: scale(0.2); }
  62% { opacity: 1; transform: scale(1.1); }
  82% { transform: scale(0.965); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes somewhereScatter {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.34); }
}
@keyframes somewhereGridPopIn { 0% { opacity: 0; transform: scale(0.25); } 62% { opacity: 1; transform: scale(1.09); } 100% { opacity: 1; transform: scale(1); } }
@keyframes somewhereGridOut { to { opacity: 0; transform: scale(0.4); } }
@keyframes somewhereDrawLine { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes somewhereRetractLine { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--len); } }

/* ---- glyph "easter egg" hover micro-animations ---- */
@keyframes somewhereSteam { 0% { opacity: 0; transform: translateY(3px) scaleY(0.7); } 45% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-7px) scaleY(1.1); } }
@keyframes somewhereNudgeFwd { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(3.5px); } }
@keyframes somewhereTilt { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-13deg); } }
@keyframes somewherePulseOnce { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes somewhereWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(7deg); } 75% { transform: rotate(-7deg); } }
@keyframes somewhereLightUp { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.somewhere-node.is-hover [data-glyph="coffee"] [data-egg],
.somewhere-tile.is-hover [data-glyph="coffee"] [data-egg] { animation: somewhereSteam 1.6s ease-out infinite; transform-origin: bottom; }
.somewhere-node.is-hover [data-glyph="running"] [data-egg],
.somewhere-tile.is-hover [data-glyph="running"] [data-egg] { animation: somewhereNudgeFwd 700ms ease-out; transform-origin: center; }
.somewhere-node.is-hover [data-glyph="padel"] [data-egg],
.somewhere-tile.is-hover [data-glyph="padel"] [data-egg] { animation: somewhereWiggle 700ms ease-in-out; transform-origin: 15px 12px; }
.somewhere-node.is-hover [data-glyph="cricket"] [data-egg],
.somewhere-tile.is-hover [data-glyph="cricket"] [data-egg] { animation: somewhereWiggle 800ms ease-in-out; transform-origin: 25px 24px; }
.somewhere-node.is-hover [data-glyph="travel"] [data-egg],
.somewhere-tile.is-hover [data-glyph="travel"] [data-egg] { animation: somewhereTilt 800ms ease-in-out; transform-origin: 16px 16px; }
.somewhere-node.is-hover [data-glyph="dancing"] [data-egg],
.somewhere-tile.is-hover [data-glyph="dancing"] [data-egg] { animation: somewhereWiggle 900ms ease-in-out infinite; transform-origin: bottom; }
.somewhere-node.is-hover [data-glyph="beers"] [data-egg],
.somewhere-tile.is-hover [data-glyph="beers"] [data-egg] { animation: somewhereSteam 1.4s ease-out infinite; transform-origin: bottom; }
.somewhere-node.is-hover [data-glyph="food"] [data-egg],
.somewhere-tile.is-hover [data-glyph="food"] [data-egg] { animation: somewhereSteam 1.5s ease-out infinite; transform-origin: bottom; }
.somewhere-node.is-hover [data-glyph="humour"] [data-egg],
.somewhere-tile.is-hover [data-glyph="humour"] [data-egg] { animation: somewherePulseOnce 600ms ease-out; transform-origin: center; }
.somewhere-node.is-hover [data-glyph="ideas"] [data-egg],
.somewhere-tile.is-hover [data-glyph="ideas"] [data-egg] { animation: somewhereLightUp 900ms ease-in-out infinite; transform-origin: center; }
.somewhere-node.is-hover [data-glyph="building"] [data-egg],
.somewhere-tile.is-hover [data-glyph="building"] [data-egg] { animation: somewhereNudgeFwd 700ms ease-out; transform-origin: bottom; }
.somewhere-node.is-hover [data-glyph="ai"] [data-egg],
.somewhere-tile.is-hover [data-glyph="ai"] [data-egg] { animation: somewherePulseOnce 900ms ease-out; transform-origin: center; }
.somewhere-node.is-hover [data-glyph="products"] [data-egg],
.somewhere-tile.is-hover [data-glyph="products"] [data-egg] { animation: somewhereWiggle 800ms ease-in-out; transform-origin: center; }
.somewhere-node.is-hover [data-glyph="people"] [data-egg],
.somewhere-tile.is-hover [data-glyph="people"] [data-egg] { animation: somewhereNudgeFwd 700ms ease-out; transform-origin: center; }
.somewhere-node.is-hover [data-glyph="problems"] [data-egg],
.somewhere-tile.is-hover [data-glyph="problems"] [data-egg] { animation: somewherePulseOnce 700ms ease-out; transform-origin: center; }
.somewhere-node.is-hover [data-glyph="experiments"] [data-egg],
.somewhere-tile.is-hover [data-glyph="experiments"] [data-egg] { animation: somewhereSteam 1.4s ease-out infinite; transform-origin: bottom; }
.somewhere-node.is-hover [data-glyph="learning"] [data-egg],
.somewhere-tile.is-hover [data-glyph="learning"] [data-egg] { animation: somewhereWiggle 800ms ease-in-out; transform-origin: 16px 18px; }
.somewhere-node.is-hover [data-glyph="ambition"] [data-egg],
.somewhere-tile.is-hover [data-glyph="ambition"] [data-egg] { animation: somewhereLightUp 800ms ease-in-out; transform-origin: center; }

/* ---- responsive: orbit <-> grid switch ---- */
@media (max-width: 620px) {
  .somewhere-orbit { display: none; }
  .somewhere-grid { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .somewhere-core.is-flipping { animation: none !important; }
  .somewhere-toggle__knob { transition-duration: 1ms !important; }
  .somewhere-orbit__wires path { animation: none !important; }

  /* Crossfade instead of the 3D flip: the flip container never rotates,
     and each face's own static rotateY (needed so the back reads right
     side up once flipped) is cancelled too — opacity alone carries the
     front/back swap. */
  .somewhere-node__flip, .somewhere-tile__flip {
    transition: none !important;
    transform: none !important;
  }
  .somewhere-node__face, .somewhere-tile__face {
    transition: opacity 220ms ease !important;
    transform: none !important;
  }
  .somewhere-node__face--back, .somewhere-tile__face--back { opacity: 0; }
  .somewhere-node.is-flipped .somewhere-node__face--front,
  .somewhere-tile.is-flipped .somewhere-tile__face--front { opacity: 0; }
  .somewhere-node.is-flipped .somewhere-node__face--back,
  .somewhere-tile.is-flipped .somewhere-tile__face--back { opacity: 1; }
}

/* ---------- Background ---------- */
.background__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.info-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.info-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.info-card__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.info-card__icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.info-card__icon svg { width: 20px; height: 20px; }
.info-card__header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.info-card__list li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}
.info-card__list li:first-child { border-top: none; padding-top: 0; }
.info-card__title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 0.15rem; }
.info-card__org { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.15rem; }
.info-card__date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); margin-bottom: 0.35rem; }
.info-card__note { font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 860px) {
  .background__grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact__lede { color: var(--text-muted); max-width: 50ch; margin-bottom: 2.5rem; margin-top: -1.5rem; }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.contact__link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.4rem 1.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.contact__link:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: var(--bg-elevated-2);
}
.contact__link-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.contact__link-value { font-size: 1.02rem; font-weight: 500; }
button.contact__link {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
@media (max-width: 640px) {
  .contact__grid { grid-template-columns: 1fr; }
}

/* ---------- Phone reaction (easter egg dialog) ---------- */
.phone-reaction {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  visibility: hidden;
  pointer-events: none;
}
.phone-reaction.is-open { visibility: visible; pointer-events: auto; }
.phone-reaction__backdrop {
  position: absolute;
  inset: 0;
  /* same espresso family as --bg (#1e1713), just darker — a dedicated
     scrim tone rather than a plain CSS black */
  background: rgba(10, 7, 5, 0.48);
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity var(--dur-med) var(--ease), backdrop-filter var(--dur-med) var(--ease), -webkit-backdrop-filter var(--dur-med) var(--ease);
}
.phone-reaction.is-open .phone-reaction__backdrop {
  opacity: 1;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.phone-reaction__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.phone-reaction.is-open .phone-reaction__panel { opacity: 1; transform: none; }
.phone-reaction__close {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-faint);
  border-radius: 50%;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.phone-reaction__close:hover { color: var(--text); background: var(--bg-elevated-2); }
.phone-reaction__media {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  min-height: 140px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-reaction__media img,
.phone-reaction__media video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.phone-reaction__media-placeholder {
  padding: 2.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.phone-reaction__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--text);
  margin: 0;
}
.phone-reaction__copy { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
@media (max-width: 640px) {
  .phone-reaction__panel { max-width: 90vw; padding: 1.4rem; }
}

/* ---------- Dictionary term trigger + popover (Keeda / ಹಠ / Inat) ----------
   Lightweight and reusable — one shared popover instance is built/refilled
   by js/dictionary.js for all three terms from a single data source.
   Deliberately NOT the Phone modal's weight: no strong blur, no big
   centred dialog — a small contextual card that keeps the visitor
   connected to the copy they were reading. */
.dict-term {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.dict-term:hover,
.dict-term:focus-visible,
.dict-term[aria-expanded="true"] {
  color: color-mix(in srgb, currentColor 78%, var(--coral) 22%);
  text-decoration-color: color-mix(in srgb, var(--coral) 100%, white 25%);
}
.dict-term:focus-visible { outline-offset: 3px; }
.dict-term--kannada { text-underline-offset: 0.12em; }

.dict-backdrop {
  position: fixed;
  inset: 0;
  z-index: 315;
  background: rgba(15, 11, 8, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease);
}
.dict-backdrop.is-open { opacity: 1; visibility: visible; }

.dict-popover {
  position: fixed;
  z-index: 320;
  width: min(360px, calc(100vw - 24px));
  max-width: 380px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1.25rem 1.4rem;
  opacity: 0;
  transform: translateY(5px) scale(0.985);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  pointer-events: none;
}
.dict-popover.is-open { opacity: 1; transform: none; pointer-events: auto; }
.dict-popover--above { transform-origin: bottom; }
.dict-popover:focus { outline: none; }

.dict-popover__close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-faint);
  border-radius: 50%;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dict-popover__close:hover { color: var(--text); background: var(--bg-elevated-2); }

.dict-popover__word {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.15;
  margin: 0 1.6rem 0.15rem 0;
}
.dict-popover__word--kannada { font-family: var(--font-kannada); font-weight: 500; }

.dict-popover__translit {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.7rem;
}
.dict-popover__translit[hidden] { display: none; }

.dict-popover__meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin: 0 0 0.25rem;
}

.dict-popover__ipa {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  margin: 0 0 0.9rem;
}

.dict-popover__def {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

/* mobile: compact bottom sheet — same markup/data, just re-docked */
.dict-popover.dict-popover--sheet {
  left: 12px;
  right: 12px;
  bottom: 12px;
  top: auto;
  width: auto;
  max-width: none;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  transform: translateY(16px);
}
.dict-popover.dict-popover--sheet.is-open { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .dict-term, .dict-backdrop, .dict-popover { transition: none !important; }
  .dict-popover, .dict-popover.dict-popover--sheet { transform: none !important; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 2.5rem 0 3rem;
  color: var(--text-faint);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

/* ---------- Story reader (full-screen) ---------- */
.reader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
}
.reader.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), visibility 0s;
}

.reader__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 2rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 3;
}
.reader__back {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.1rem;
  transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.reader__back:hover { gap: 0.75rem; color: var(--text); }

.reader__progress { flex: none; height: 2px; background: rgba(244, 236, 221, 0.08); z-index: 3; }
.reader__progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 90ms linear;
}

.reader__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.reader__scroll:focus { outline: none; }

.reader__hero {
  position: relative;
  height: clamp(140px, 18vh, 200px);
  overflow: hidden;
  contain: paint;
  background: var(--bg-alt);
  background-size: cover;
  background-position: center;
}
.reader__hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  background: linear-gradient(transparent, var(--bg));
}
.reader__hero-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 clamp(1.5rem, 6vw, 5.5rem) 2rem;
}
.reader__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.75rem;
  animation: readerIn 600ms var(--ease) 80ms both;
}
.reader__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.04;
  max-width: 18ch;
  animation: readerIn 700ms var(--ease) 180ms both;
}

.reader__body { padding-bottom: 6rem; }

@keyframes readerIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* --- story blocks --- */
.rb {
  max-width: 76ch;
  margin: 0 auto;
  padding: 0 1.5rem;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}
.rb.in { opacity: 1; transform: none; }
.rb--wide { max-width: 900px; }
.rb--bleed { max-width: none; padding: 0; }

.rb-lead { font-size: 1.22rem; line-height: 1.72; color: var(--text); margin-top: 2.4rem; text-wrap: pretty; }
.rb-text { font-size: 1.05rem; line-height: 1.8; color: var(--text-muted); margin-top: 1.5rem; text-wrap: pretty; }
.rb-heading {
  clear: both;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 600;
  color: var(--text);
  margin-top: 3.2rem;
}
.rb-caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-faint);
  margin-top: 0.7rem;
  max-width: 62ch;
}
.rb--bleed .rb-caption { max-width: 900px; margin-left: auto; margin-right: auto; padding: 0 1.5rem; }

.rb-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(135deg, #2f2a22 0 12px, #282219 12px 24px);
  border: 1px solid var(--border);
}
.rb--bleed .rb-media { border-radius: 0; border-left: none; border-right: none; }
.rb-media img, .rb-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-media__label {
  position: absolute;
  left: 1rem;
  bottom: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(244, 236, 221, 0.5);
}
.rb-media__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(244, 236, 221, 0.14);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 0.95rem;
}

.rb-figure { clear: both; margin-top: 2.4rem; }
.rb-figure .rb-media { aspect-ratio: 16 / 10; }
.rb--bleed .rb-media { aspect-ratio: 21 / 9; }

.rb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.rb-pair .rb-media { aspect-ratio: 4 / 3; }

/* ---- scrapbook photo: a single photo pinned beside its paragraph,
   text wrapping around it, rather than photos laid out as their own
   row. Attached to a "text"/"lead" block via `photo`, so it shares
   that block's .rb wrapper. Deliberately NOT cleared right after its
   own paragraph — a photo is almost always taller than the one
   paragraph next to it, and clearing immediately leaves a slab of
   dead space. Instead the float is left open so the next plain-text
   paragraph keeps wrapping beside it, and only block types that
   shouldn't ever sit next to a photo (headings, quotes, callouts,
   stats, other figures) clear it — see those rules. The reader's
   own scroll container establishes the block formatting context, so
   the float is still fully contained even at the end of a story. */
.rb-scrap {
  position: relative;
  width: var(--scrap-width, 220px);
  padding: 0.5rem 0.5rem 0.75rem;
  background: #f1ebdf;
  border-radius: 2px;
  box-shadow: 0 18px 34px -16px rgba(8, 6, 4, 0.65), 0 2px 6px rgba(8, 6, 4, 0.3);
  transform: rotate(var(--rot, 0deg));
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.rb-scrap--left { float: left; margin: 0.3rem 1.5rem 0.75rem 0; }
.rb-scrap--right { float: right; margin: 0.3rem 0 0.75rem 1.5rem; }
.rb-scrap:hover, .rb-scrap:focus-within {
  transform: rotate(var(--rot, 0deg)) translateY(-4px) scale(1.03);
  box-shadow: 0 26px 46px -18px rgba(8, 6, 4, 0.7), 0 4px 10px rgba(8, 6, 4, 0.32);
}
.rb-scrap__tape {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  width: 64px;
  height: 24px;
  margin-left: -32px;
  background: linear-gradient(180deg, rgba(232, 217, 158, 0.88), rgba(212, 193, 128, 0.72));
  box-shadow: 0 2px 4px rgba(8, 6, 4, 0.3);
  transform: rotate(-3deg);
}
.rb-scrap--right .rb-scrap__tape { transform: rotate(4deg); }
.rb-scrap__frame {
  display: block;
  width: 100%;
  aspect-ratio: var(--frame-ratio, 4 / 5);
  overflow: hidden;
  background: var(--bg);
}
.rb-scrap__frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.04) contrast(1.02); }
.rb-scrap__caption {
  margin: 0.55rem 0.1rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #4a3d2c;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .rb-scrap { transition: none; }
}
@media (max-width: 600px) {
  .rb-scrap--left, .rb-scrap--right {
    float: none;
    margin: 0 auto 1.25rem;
  }
}

.rb-quote {
  clear: both;
  margin-top: 2.8rem;
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.4rem;
}
.rb-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--text);
}

.rb-stats { clear: both; margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 2.2rem; padding: 1.4rem 1.6rem; background: var(--accent-soft); border-radius: var(--radius-md); }
.rb-stat__value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--accent-strong); line-height: 1; margin-bottom: 0.35rem; }
.rb-stat__label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); }

.rb-callout {
  clear: both;
  margin-top: 2.6rem;
  border: 1px solid rgba(191, 110, 63, 0.35);
  background: var(--gold-soft);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.4rem;
}
.rb-callout__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.rb-callout p:last-child { color: var(--text); line-height: 1.65; }

.reader__end {
  max-width: 62ch;
  margin: 4rem auto 0;
  padding: 2rem 1.5rem 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}
.reader__end .btn { font-family: var(--font-mono); font-size: 0.8rem; }

@media (max-width: 640px) {
  .reader__bar { padding: 0.8rem 1.25rem; }
  .rb-pair { grid-template-columns: 1fr; }
  .rb-stats { gap: 1.4rem; }
  .rb-scrapbook { justify-content: center; gap: 1.5rem; }
  .rb-scrap:nth-child(2n) { margin-top: 0.5rem; }
}

/* ---------- Responsive ---------- */
/* Tablet: still the two-column hero, just a narrower "Currently" panel with
   tighter icon-to-text spacing — all four rows stay, nothing stacks yet. */
@media (max-width: 1150px) and (min-width: 901px) {
  .hero__currently { max-width: 300px; column-gap: 1.1rem; }
  .currently__list { gap: 1.2rem; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__currently { max-width: none; margin: 2.75rem 0 0; padding-right: 0; }
  .hero { padding-top: 7.5rem; }
}
@media (max-width: 640px) {
  .section { padding: 2.25rem 0; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .timeline { padding-left: 2rem; }
  .timeline__dot { left: -2rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-anim {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero__bars .bar,
  .hero__line,
  .hero__nodes .node {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  .currently-anim {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .timeline__tile:hover,
  .reader__back:hover,
  .info-card:hover,
  .contact__link:hover,
  .btn--primary:hover,
  .btn--ghost:hover {
    transform: none !important;
  }
  .reader, .reader__eyebrow, .reader__title {
    transition: none !important;
    animation: none !important;
  }
  .rb { opacity: 1 !important; transform: none !important; }
  .timeline::after { transform: scaleY(1) !important; transition: none !important; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}


/* ============================================================
   MOTION LAYER
   ============================================================ */

/* ---- boot wipe ---- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: bootOut 1000ms var(--ease) 260ms forwards;
}
.boot__mark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  animation: bootMark 900ms var(--ease) both;
}
@keyframes bootMark {
  0% { opacity: 0; transform: translateY(8px); letter-spacing: 0.4em; }
  45% { opacity: 1; transform: none; letter-spacing: 0.06em; }
  100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes bootOut {
  to { clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; }
}

/* ---- page scroll progress ---- */
.page-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 160;
  background: rgba(244, 236, 221, 0.06);
}
.page-progress__fill {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong) 60%, var(--gold));
}

/* ---- nav indicator + active state ---- */
.nav__links { position: relative; }
.nav__indicator {
  position: absolute;
  bottom: -0.55rem;
  left: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  box-shadow: 0 0 12px var(--coral-soft);
  transition: transform 480ms var(--ease), width 480ms var(--ease), opacity 300ms var(--ease);
  pointer-events: none;
}
.nav__links a.is-active { color: var(--text); }
.nav__links a:not(.nav__cta) { position: relative; }
.nav__links a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -0.3rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transition: right 380ms var(--ease);
}
.nav__links a:not(.nav__cta):hover::after { right: 0; }
@media (max-width: 860px) {
  .nav__indicator { display: none; }
  .nav__links a:not(.nav__cta)::after { display: none; }
}

/* ---- split-word headings ---- */
.sw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.sw__i { display: inline-block; will-change: transform; }

h2.is-split.reveal, .hero h1.is-split { opacity: 1; transform: none; animation: none; }

h2.is-split .sw__i,
.reader__title.is-split .sw__i {
  transform: translateY(112%);
  opacity: 0;
}
h2.is-split .sw__i {
  transition: transform 900ms var(--ease), opacity 700ms var(--ease);
  transition-delay: calc(var(--i) * 55ms);
}
h2.is-split.in-view .sw__i { transform: none; opacity: 1; }

.hero h1.is-split .sw__i {
  animation: wordIn 1000ms var(--ease) both;
  animation-delay: calc(320ms + var(--i) * 90ms);
}
@keyframes wordIn { from { transform: translateY(112%); opacity: 0; } to { transform: none; opacity: 1; } }

.reader__title.is-split .sw__i {
  animation: wordIn 850ms var(--ease) both;
  animation-delay: calc(140ms + var(--i) * 70ms);
}

/* ---- staggered grid reveals ---- */
.background__grid > .reveal,
.contact__grid > .reveal {
  transition-delay: calc(var(--i, 0) * 110ms);
}
.contact__grid.reveal { transition-delay: 0ms; }

/* ---- hero: leave fade for the left copy on scroll (unrelated to the
   right side — the "Currently" panel has no parallax/drift, it stays put) ---- */
.hero__copy {
  transform: translateY(calc(var(--leave, 0) * -40px));
  opacity: calc(1 - var(--leave, 0) * 0.85);
}
.hero__bars .bar { animation: growBar 900ms var(--ease) both, barBreathe 6s ease-in-out infinite; }
.hero__bars .bar--1 { animation-delay: 300ms, 1.4s; }
.hero__bars .bar--2 { animation-delay: 420ms, 1.6s; }
.hero__bars .bar--3 { animation-delay: 540ms, 1.8s; }
.hero__bars .bar--4 { animation-delay: 660ms, 2s; }
.hero__bars .bar--5 { animation-delay: 780ms, 2.2s; }
@keyframes barBreathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.045); }
}
.hero__nodes .node--gold { animation: popNode 500ms var(--ease) both, pulse 3.4s ease-in-out 2.4s infinite; }

/* ---- scroll cue ---- */
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 1120px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.scroll-cue__rail {
  position: relative;
  width: 74px;
  height: 1px;
  background: var(--border);
  overflow: visible;
}
.scroll-cue__dot {
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: cueRun 2.6s var(--ease) infinite;
}
@keyframes cueRun {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(69px); opacity: 0; }
}

/* ---- magnetic buttons + shine sweep ---- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --bty: 0px;
  transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) + var(--bty)), 0);
}
.btn--primary:hover, .btn--ghost:hover { --bty: -2px; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 720ms var(--ease);
}
.btn:hover::before { transform: translateX(130%); }
.btn--ghost::before { background: linear-gradient(105deg, transparent 30%, var(--accent-soft) 50%, transparent 70%); }
.nav__cta { transform: translate3d(var(--bx, 0px), var(--by, 0px), 0); transition: transform 220ms var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }

/* ---- tilt + sheen cards ---- */
.info-card, .contact__link {
  --tz: 0px;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--tz), 0);
  transform-style: preserve-3d;
  transition: transform 320ms var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), background var(--dur-fast) var(--ease);
}
.info-card:hover { --tz: -3px; }
.contact__link:hover { --tz: -4px; }

/* Experience cards: the same plain lift on hover/focus as the About
   cards — no cursor-tracking tilt, so the story copy stays flat and
   readable. The cursor-follow sheen below is still shared with the
   other cards; only the rotation is dropped here. */
.timeline__tile {
  transition: transform 320ms var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), background var(--dur-fast) var(--ease);
}
.timeline__tile:hover, .timeline__tile:focus-visible { transform: translateY(-3px); }

.info-card, .contact__link, .timeline__tile { position: relative; }
.info-card::after,
.contact__link::after,
.timeline__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms var(--ease);
  background: radial-gradient(340px 240px at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 68%);
}
.info-card:hover::after,
.contact__link:hover::after,
.timeline__tile:hover::after { opacity: 1; }

/* ---- info card icons breathe ---- */
.info-card__icon svg { transition: transform 520ms var(--ease); }
.info-card:hover .info-card__icon svg { transform: scale(1.14) rotate(-6deg); }

/* ---- contact links: arrow slide ---- */
.contact__link-value { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; }
.contact__link-value::after {
  content: "→";
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  color: var(--accent-strong);
}
.contact__link:hover .contact__link-value::after { opacity: 1; transform: none; }

/* ---- timeline: scroll-linked spine, lit dots, hover shift ---- */
.timeline.in-view::after {
  transform: scaleY(var(--tlp, 0));
  transition: transform 160ms linear;
  box-shadow: 0 0 12px var(--accent-soft);
}
.timeline__dot {
  transition: box-shadow 520ms var(--ease), background 520ms var(--ease), transform 520ms var(--ease);
}
.timeline__dot.is-lit {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--coral-soft);
}
.timeline__item--current .timeline__dot.is-lit { transform: scale(1.12); }

/* ---- section labels: typing bar ---- */
.section-label { display: inline-flex; align-items: center; gap: 0.6rem; }
.section-label::after {
  content: "";
  width: 0;
  height: 1px;
  background: var(--accent);
  opacity: 0.55;
  transition: width 900ms var(--ease) 200ms;
}
.reveal.in-view.section-label::after { width: 54px; }

/* ---- reader: parallax hero, animated progress, block motion ---- */
.reader__hero {
  transform: translate3d(0, calc(var(--ry, 0px) * -1), 0) scale(var(--rs, 1));
  transform-origin: center 30%;
  will-change: transform;
}
.reader__hero-copy { transform: translateY(calc(var(--ry, 0px) * 0.35)); }
.reader__progress-fill { box-shadow: 0 0 10px var(--accent-soft); }
.reader.is-open .reader__bar { animation: readerIn 500ms var(--ease) both; }

.rb { transition: opacity 750ms var(--ease), transform 750ms var(--ease), filter 750ms var(--ease); filter: blur(6px); }
.rb.in { filter: none; }
.rb-figure .rb-media { overflow: hidden; }
.rb-figure .rb-media img { transform: scale(1.06); transition: transform 1400ms var(--ease); }
.rb.in .rb-media img { transform: scale(1); }
.rb-quote { position: relative; }
.rb-quote::before {
  content: "";
  position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent-strong);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms var(--ease) 200ms;
}
.rb.in .rb-quote::before, .rb-quote.in::before { transform: scaleY(1); }
.rb-stats { position: relative; overflow: hidden; }
.rb-stats::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, var(--accent-soft) 50%, transparent 65%);
  transform: translateX(-120%);
}
.rb.in .rb-stats::after { animation: sheen 1400ms var(--ease) 300ms; }
@keyframes sheen { to { transform: translateX(120%); } }
.rb-media__play { transition: transform 420ms var(--ease), background 420ms var(--ease); }
.rb-media__play::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--accent-soft);
  animation: ringOut 2.6s ease-out infinite;
}
@keyframes ringOut {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---- footer + section edge shimmer ---- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: edgeSweep 7s linear infinite;
}
@keyframes edgeSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ---- reduced motion: strip the motion layer ---- */
@media (prefers-reduced-motion: reduce) {
  .boot, .scroll-cue__dot, .site-footer::before { display: none !important; }
  .hero__bars .bar,
  .rb-media__play::after, .rb-stats::after { animation: none !important; }
  .hero__copy, .hero__currently, .reader__hero, .reader__hero-copy { transform: none !important; opacity: 1 !important; }
  .sw__i { transform: none !important; opacity: 1 !important; animation: none !important; }
  .rb { filter: none !important; }
  .rb-figure .rb-media img { transform: none !important; }
  .rb-quote::before { transform: scaleY(1) !important; }
  .info-card, .contact__link, .timeline__tile, .btn, .nav__cta { transform: none !important; }
}


/* ============================================================
   ESPRESSO / PAPER / APRICOT — the site's one brand palette.
   Dark-only editorial system: warm espresso canvas, paper-cream
   type, apricot used as punctuation rather than a brand wash.
   (Block name kept as "golden hour" for git-blame continuity —
   this is the same override slot the old warm-dark theme used.)
   ============================================================ */
:root {
  --bg: #1e1713;
  --bg-alt: #241c17;
  --bg-elevated: #2a211b;
  --bg-elevated-2: #30261f;
  --text: #f3ebdd;
  --text-muted: #cbbca7;
  --text-faint: #8f8172;
  --accent: #e8954f;
  --accent-strong: #f2a968;
  --accent-soft: rgba(232, 149, 79, 0.14);
  --coral: #e8954f;
  --coral-soft: rgba(232, 149, 79, 0.16);
  --gold: #bf6e3f;
  --gold-soft: rgba(191, 110, 63, 0.16);
  --border: #382d26;
  --border-strong: #493a30;
  --shadow-lg: 0 34px 90px -32px rgba(15, 9, 5, 0.75);
  --shadow-md: 0 18px 46px -20px rgba(15, 9, 5, 0.6);
  --grain: 0.02;
  --sheen: rgba(255, 214, 160, 0.16);
  --on-accent: #1e1713;
  color-scheme: dark;
}

/* Not a second brand — the toggle ("Dusk") pre-dates this refactor and is
   preserved rather than deleted blindly (see final report), just retinted
   to the same warm espresso/apricot family so it never shows an old,
   unrelated palette if used. */
html[data-theme="light"] {
  --bg: #f3ebdd;
  --bg-alt: #ece0cc;
  --bg-elevated: #fffbf4;
  --bg-elevated-2: #f7ecda;
  --text: #241812;
  --text-muted: #4a3b2e;
  --text-faint: #7a6a57;
  --accent: #bf6e3f;
  --accent-strong: #a85a2e;
  --accent-soft: rgba(191, 110, 63, 0.12);
  --coral: #bf6e3f;
  --coral-soft: rgba(191, 110, 63, 0.12);
  --gold: #a85a2e;
  --gold-soft: rgba(168, 90, 46, 0.14);
  --border: rgba(36, 24, 18, 0.14);
  --border-strong: rgba(36, 24, 18, 0.28);
  --shadow-lg: 0 30px 70px -34px rgba(80, 45, 20, 0.35);
  --shadow-md: 0 16px 38px -20px rgba(80, 45, 20, 0.28);
  --grain: 0.03;
  --sheen: rgba(255, 255, 255, 0.5);
  --on-accent: #fff8ef;
  color-scheme: light;
}

html { transition: none; }
body { background: var(--bg); color: var(--text); transition: background 600ms var(--ease), color 600ms var(--ease); }
body::before { opacity: var(--grain); mix-blend-mode: multiply; }
html:not([data-theme="light"]) body::before { mix-blend-mode: overlay; }

.skip-link { background: var(--accent); color: var(--on-accent); }

/* ---- theme toggle ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease);
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle__track {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--accent-soft);
  display: inline-block;
}
.theme-toggle__knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-soft);
  transition: transform 460ms var(--ease), background 460ms var(--ease);
}
html[data-theme="light"] .theme-toggle__knob { transform: translateX(18px); background: var(--coral); }
.theme-toggle__label { min-width: 3.4em; text-align: left; }
@media (max-width: 860px) { .theme-toggle { padding-left: 0; } }

/* ---- hand-drawn accent marks ---- */
.section-label { color: var(--coral); }
.section-label::after { background: var(--coral); }
h2 em, .accent-mark { font-style: normal; position: relative; }

/* ---- buttons ---- */
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn--primary:hover { background: var(--accent-strong); }
.btn--ghost { border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--coral); color: var(--coral); }
.btn::before { background: linear-gradient(105deg, transparent 30%, var(--sheen) 50%, transparent 70%); }
.btn--ghost::before { background: linear-gradient(105deg, transparent 30%, var(--accent-soft) 50%, transparent 70%); }

/* ---- cards / sheen recoloured warm ---- */
.info-card::after,
.contact__link::after,
.timeline__tile::after {
  background: radial-gradient(340px 240px at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 68%);
}
.rb-quote::before { background: var(--coral); }
.nav__indicator { background: var(--coral); box-shadow: 0 0 12px var(--coral-soft); }
.page-progress__fill { background: linear-gradient(90deg, var(--gold), var(--accent) 45%, var(--coral)); }
.page-progress { background: var(--accent-soft); }
.timeline__dot.is-lit { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--coral-soft); }
.timeline.in-view::after { box-shadow: 0 0 12px var(--accent-soft); }
.site-footer::before { background: linear-gradient(90deg, transparent, var(--coral), transparent); }
.scroll-cue__dot { background: var(--coral); }
.boot { background: var(--bg); }
.boot__mark { color: var(--accent); }
.reader__progress-fill { box-shadow: 0 0 10px var(--accent-soft); }
.rb-stats::after { background: linear-gradient(105deg, transparent 35%, var(--sheen) 50%, transparent 65%); }
.rb-media__play::after { border-color: var(--accent-soft); }
.hero__line { stroke: var(--accent); }
.info-card__icon { color: var(--coral); }

/* light theme: elevate surfaces instead of darkening */
html[data-theme="light"] .site-header { background: rgba(243, 235, 221, 0.82); }
html[data-theme="light"] .info-card,
html[data-theme="light"] .contact__link,
html[data-theme="light"] .timeline__tile { background: var(--bg-elevated); }
html[data-theme="light"] .site-footer { background: var(--bg-alt); }
html[data-theme="light"] .boot__mark { color: var(--coral); }

/* theme switch wash */
.theme-wash {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background: radial-gradient(circle at 82% 4%, var(--accent-soft), transparent 65%);
  animation: washOut 850ms var(--ease) forwards;
}
@keyframes washOut {
  0% { opacity: 0; clip-path: circle(0% at 92% 3%); }
  35% { opacity: 1; }
  100% { opacity: 0; clip-path: circle(150% at 92% 3%); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-wash { animation: none !important; }
}


/* ============================================================
   COLD OPEN
   ============================================================ */
.co {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: opacity 850ms var(--ease), filter 850ms var(--ease);
}
.co[hidden] { display: none; }
.co.is-done { opacity: 0; filter: blur(8px); pointer-events: none; }

.co__bar {
  position: absolute;
  left: 0; right: 0;
  height: 7vh;
  height: 7dvh;
  background: var(--bg);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 40px 20px var(--bg);
  animation: coBar 900ms var(--ease) both;
}
.co__bar--top { top: 0; }
.co__bar--bottom { bottom: 0; }
@keyframes coBar { from { height: 50vh; height: 50dvh; } to { height: 7vh; height: 7dvh; } }

.co__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.co__skip {
  position: absolute;
  top: max(7vh, 1.5rem);
  top: max(7dvh, 1.5rem);
  right: 1.75rem;
  z-index: 6;
  margin-top: 1.25rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.co__skip:hover { color: var(--text); border-color: var(--border-strong); }

.co__back {
  position: absolute;
  top: max(7vh, 1.5rem);
  top: max(7dvh, 1.5rem);
  left: 1.75rem;
  z-index: 6;
  margin-top: 1.25rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  cursor: pointer;
  opacity: 1;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.co__back:hover { color: var(--text); border-color: var(--border-strong); }
.co__back:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.co__stage {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: min(760px, 88vw);
  min-height: 42vh;
  min-height: 42dvh;
  padding: 0 1rem;
  text-align: center;
}
.co__card {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease), filter 620ms var(--ease);
  filter: blur(6px);
}
.co__card.is-in { opacity: 1; transform: none; filter: none; }
.co__card.is-out { opacity: 0; transform: translateY(-14px); filter: blur(6px); }

/* ---- in-scene beats: lighter/quicker than a full scene change, so a
   tap within a chapter never feels like loading a new slide ---- */
.co__body { position: relative; display: grid; place-items: center; }
.co__beat, .co__beat-add {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
/* Outgoing and incoming .co__beat share the same grid cell (the same
   overlap trick .co__card already uses for scene changes) so a swap
   crossfades — old fading down as new fades in on top of it — instead
   of clearing to a blank gap and then fading the next one in. */
.co__beat { grid-area: 1 / 1; }
.co__beat.is-in, .co__beat-add.is-in { opacity: 1; transform: none; }
.co__beat.is-out, .co__beat-add.is-out { opacity: 0; transform: translateY(-10px); }
.co__beat-add { grid-row: 2; margin-top: 1.4rem; transition-duration: 520ms; }
.co__q--weight { font-weight: 600; }
.co__answer-sub--quiet { font-size: 0.85rem; color: var(--text-faint); }

/* ---- scene 00's correction: one continuous editorial thought, not a
   sequence of slides. "And this is my CV." appears as a real second
   statement (large, cream). On tap 2, "NOT" opens up inside that same
   sentence — no swap, no strike-through — holds as the focal point,
   then the whole corrected sentence recedes upward into a small,
   quiet secondary note while "This is my story." takes over as the
   hero. The old disclaimer recedes (blur + dim) at the same moment,
   so the card reads as one shift of focus, not three animations. ---- */
.co__intro-correction {
  position: relative;
  width: 0;
  height: 0;
}
/* Pinned to a viewport-relative height, like .co__correction-story below,
   rather than left to fall wherever normal flow happens to put it — that
   coincidence is what let this line's resting spot overlap the story
   hero's line-box in testing. Fixed vh anchors on both elements keep a
   guaranteed gap between them regardless of the disclaimer's own height. */
.co__correction-cv {
  position: fixed;
  left: 50%;
  top: 72%;
  width: min(820px, 90vw);
  margin: 0;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(10px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem); /* ~48–58px: a real statement, still clearly under the opening hero */
  color: var(--text);
  filter: blur(0);
  pointer-events: none;
  z-index: 5;
  /* top never animates (it stays fixed at 72%) — the recede's rise to
     35% is expressed as a translateY offset instead, so the position
     change runs on the compositor rather than triggering layout on
     every frame. */
  transition: opacity 500ms var(--ease), transform 700ms var(--ease), font-size 700ms var(--ease), color 700ms var(--ease), filter 700ms var(--ease);
}
.co__correction-cv.is-in { opacity: 1; transform: translate(-50%, -50%); }
.co__correction-cv.is-corrected {
  opacity: 0.48;
  color: var(--text-faint);
  font-size: clamp(1.05rem, 2.1vw, 1.4rem); /* a quiet secondary note now, not a footnote of shame */
  filter: blur(1.5px);
  transform: translate(-50%, -50%) translateY(-37vh); /* rises from the fixed top:72% anchor to read as top:35% */
}

/* "NOT" opens up inside the existing sentence rather than replacing it —
   max-width is the one layout property that can transition smoothly
   from a collapsed 0 to its content's width. */
.co__cv-not-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  max-width: 0;
  opacity: 0;
  transition: max-width 520ms var(--ease), opacity 360ms var(--ease) 120ms;
}
.co__cv-not-wrap.is-in { max-width: 4.5em; opacity: 1; }
.co__cv-not { display: inline-block; color: var(--coral); white-space: nowrap; }

/* "This is my story." is pinned to the true optical centre of the
   viewport — not the centre of whatever flow sits above it — so it
   reads as the page's next hero no matter how the correction above it
   has settled. Safe as position:fixed here: .co__card's transform is
   always "none" by the time this reveals (its own crossfade has long
   since settled), so it never becomes this element's containing block. */
.co__correction-story {
  position: fixed;
  left: 50%;
  top: 49%;
  width: min(880px, 90vw);
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 6rem); /* ~42–96px, capped to match the opening hero's authority */
  color: var(--text);
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 16px)) scale(0.98);
  transition: opacity 680ms var(--ease), transform 680ms var(--ease), filter 680ms var(--ease);
  z-index: 5;
}
.co__correction-story.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
}

/* ---- the old disclaimer receding, like a camera racking focus forward.
   Scoped to .co__card.is-receding so it never touches the shared
   .co__eyebrow/.co__beat rules other scenes rely on. ---- */
.co__card.is-receding .co__eyebrow {
  opacity: 0.22;
  filter: blur(6px);
  transform: translateY(-22px);
  transition: opacity 820ms var(--ease), filter 820ms var(--ease), transform 820ms var(--ease);
}
.co__card.is-receding > .co__body .co__beat {
  opacity: 0.22;
  filter: blur(6px);
  transform: translateY(-34px) scale(0.96);
  transition: opacity 820ms var(--ease), filter 820ms var(--ease), transform 820ms var(--ease);
}

.co__hint.is-quiet { opacity: 0.15; transition: opacity 400ms var(--ease); }

.co__eyebrow, .co__age {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1.4rem;
}
.co__line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.co__line--soft { color: var(--text-muted); }
.co__sub {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--text-faint);
  text-wrap: pretty;
}
.co__cost {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.9;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* the question */
.co__q {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--text);
  letter-spacing: -0.015em;
}
.co__q-small {
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-faint);
  font-style: italic;
}
/* the answer — deliberately small */
.co__answer {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.02em;
  color: var(--coral);
}
.co__answer-sub {
  margin-top: 1.1rem;
  font-size: 1rem;
  color: var(--text-muted);
  text-wrap: pretty;
}
.co__note {
  margin-top: 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.co__foot {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: max(8vh, 2rem);
  padding-bottom: max(8dvh, 2rem);
}
.co__marks { display: flex; gap: 0.4rem; }
.co__mark {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  transition: background 500ms var(--ease), width 500ms var(--ease);
}
.co__mark.is-on { background: var(--accent); }
.co__mark.is-live { width: 38px; }
.co__hint {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.7;
  animation: coHint 3s ease-in-out infinite;
}
@keyframes coHint { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } }
.co[data-mode="ask"] .co__q { margin-bottom: 0.5rem; }

/* hold the site still underneath */
html.co-running body { overflow: hidden; }
html.co-running .boot { display: none; }
html.co-running .hero-anim,
html.co-running .currently-anim { animation-play-state: paused; }

@media (max-width: 640px) {
  .co__bar { height: 4vh; height: 4dvh; }
  .co__skip { right: 1rem; }
  .co__back { left: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .co__hint { animation: none !important; }
  .co__bar { animation: none !important; }
  .co__card { transition-duration: 1ms !important; filter: none !important; transform: none !important; }
  .co.is-done { filter: none !important; }
  .co__beat, .co__beat-add {
    transition-duration: 1ms !important;
    transform: none !important;
  }
  .co__correction-cv, .co__correction-story, .co__cv-not-wrap, .co__hint.is-quiet {
    transition-duration: 1ms !important;
  }
  /* opacity only — no blur — for the disclaimer's recede and the
     corrected sentence/story hand-off. Their end-state transforms
     (the upward recede, the centred hero) are positional, not
     decorative, so they stay — only the blur is dropped. */
  .co__card.is-receding .co__eyebrow,
  .co__card.is-receding > .co__body .co__beat,
  .co__correction-cv.is-corrected,
  .co__correction-story {
    filter: none !important;
    transition-duration: 1ms !important;
  }
}


/* Understated editorial note under "How I got here" — same negative-margin
   pull-up-to-the-heading trick as .contact__lede, so it reads as part of
   the heading's own line rather than a new paragraph block. */
.experience__note {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: -1.6rem;
  margin-bottom: 1.6rem;
}

/* ============================================================
   CHECKPOINT BAR — the CTA row + horizontal chapter checkpoints,
   aligned to the same left/right boundaries as the Experience cards
   below (.timeline's own 2.5rem text inset). No connector down to the
   vertical card timeline — that's a separate visual system now; the
   cards' own line simply starts beside the first card as it always did.
   ============================================================ */
.checkpoint-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 1.1rem;
  margin-bottom: 0.25rem;
}

/* Flush with .experience__note's own left edge (both are unindented
   children of .container) — the CTA row belongs to the heading/copy
   grid, not the card-aligned timeline below it. */
.checkpoint-bar__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0.3rem;
}

.checkpoint-bar__track {
  position: relative;
  /* The .checkpoint button's own 0.6rem left padding would otherwise sit
     the 2022 icon 0.6rem right of the text grid above. Bleeding the track
     0.6rem left (and widening it to match) shifts every marker left by
     that same amount, landing the icon's visible edge exactly on the text
     grid, while the track's right edge — and everything to do with the
     cards below — stays exactly where it already was. */
  margin-left: -0.6rem;
  width: calc(100% + 0.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  --fill: 0; /* unitless 0–1, hover-only — see the width calc() and :has() rule below */
}
/* Inset by the .checkpoint button's own 0.6rem horizontal padding on both
   sides, so the line starts and ends exactly at each end marker's visible
   circle rather than protruding past it. */
.checkpoint-bar__track::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(to right, var(--accent), var(--border) 92%);
  z-index: 0;
}
/* The animated/active overlay on top of the base line above — purely a
   hover/focus response to "Begin the story" (see the :has() rule below),
   never automatic. Leave-duration here; the hover state sets its own
   slower, travelling-light duration while active. Width is computed against
   the same inset span as ::before above, so a full sweep (--fill:1) lands
   exactly on the 2026 marker rather than past it. */
.checkpoint-bar__track::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  width: calc(var(--fill) * (100% - 1.2rem));
  background: var(--accent-strong);
  box-shadow: 0 0 8px var(--accent-soft);
  transition: width 380ms var(--ease);
  z-index: 0;
}
.checkpoint-bar__item { position: relative; z-index: 1; }

.checkpoint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  transition: transform 200ms var(--ease);
}
.checkpoint:hover, .checkpoint:focus-visible { transform: translateY(-2px); }

/* The small dark marker each icon sits inside — stands in for the old
   flat dot, anchoring the pictogram to the line rather than floating it. */
.checkpoint__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  color: var(--text-muted);
  transition: transform 200ms var(--ease), color 380ms var(--ease), border-color 380ms var(--ease);
}
.checkpoint__icon svg {
  width: 19px;
  height: 19px;
  display: block;
}
/* The spark (current chapter) runs a little larger — its thin, pointed
   geometry reads smaller than the others' filled-in shapes at equal size. */
.checkpoint__icon--now svg { width: 21px; height: 21px; }
.checkpoint__icon--now { color: var(--coral); border-color: var(--coral-soft); }

.checkpoint:hover .checkpoint__icon, .checkpoint:focus-visible .checkpoint__icon {
  transform: scale(1.05);
  color: var(--text);
  border-color: var(--accent-soft);
}
.checkpoint:hover .checkpoint__icon--now, .checkpoint:focus-visible .checkpoint__icon--now {
  color: var(--accent-strong);
  border-color: var(--coral-soft);
}

/* One-time entrance for the spark only, piggybacking on the checkpoint
   bar's existing .reveal/.in-view scroll-observer — no separate observer. */
.checkpoint__icon--now svg { opacity: 0; transform: scale(0.85); }
.checkpoint-bar.in-view .checkpoint__icon--now svg {
  animation: checkpointSparkIn 650ms var(--ease) forwards;
}
@keyframes checkpointSparkIn {
  0% { opacity: 0; transform: scale(0.85); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.checkpoint__year {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease);
}
.checkpoint:hover .checkpoint__year, .checkpoint:focus-visible .checkpoint__year { color: var(--text); }

@media (max-width: 640px) {
  .checkpoint-bar__track {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 2rem;
    /* No horizontal padding here — the base rule's margin-left/width bleed
       already lands the 2022 icon exactly on the text grid; adding padding
       back on top of that would reintroduce a small offset. */
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
  }
  .checkpoint-bar__track::before { left: 0.6rem; right: 0.6rem; }
  .checkpoint-bar__item { flex-shrink: 0; }
  .checkpoint__icon { width: 26px; height: 26px; }
  .checkpoint__icon svg { width: 17px; height: 17px; }
  .checkpoint__icon--now svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .checkpoint__icon--now svg {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* ---- Begin the story — the one deliberate way into the four-chapter
   Experience story. Sits in its own row ABOVE the horizontal timeline,
   with no marker/node of its own and no line connecting it to the
   vertical card timeline below — a text link, not a button. ---- */
.checkpoint-bar__begin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0.45rem 0; /* ~44px touch target without visible chrome */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem; /* ~24px, between the note and the h2 */
  color: var(--text);
  cursor: pointer;
  transition: color 220ms var(--ease);
}
.checkpoint-bar__begin-arrow {
  display: inline-block;
  color: var(--coral);
  transition: transform 220ms var(--ease);
}
.checkpoint-bar__begin:hover,
.checkpoint-bar__begin:focus-visible {
  color: var(--accent-strong);
}
.checkpoint-bar__begin:hover .checkpoint-bar__begin-arrow,
.checkpoint-bar__begin:focus-visible .checkpoint-bar__begin-arrow {
  transform: translateX(5px);
}

/* Hovering/focusing the CTA is the ONLY thing that animates the timeline —
   the line travels 2022 → 2026 and each marker brightens as it "arrives",
   staggered via transition-delay so it reads as one continuous sweep
   rather than 4 separate state changes. Pure CSS, no JS timers. */
.checkpoint-bar:has(.checkpoint-bar__begin:hover) .checkpoint-bar__track,
.checkpoint-bar:has(.checkpoint-bar__begin:focus-visible) .checkpoint-bar__track {
  --fill: 1;
}
.checkpoint-bar:has(.checkpoint-bar__begin:hover) .checkpoint-bar__track::after,
.checkpoint-bar:has(.checkpoint-bar__begin:focus-visible) .checkpoint-bar__track::after {
  transition: width 600ms var(--ease);
}
/* The delay is scoped to the CTA-hover condition only, so a marker's own
   direct :hover (unrelated to the CTA) still responds at normal speed —
   only the cascading "light arriving" sweep is staggered. */
.checkpoint-bar:has(.checkpoint-bar__begin:hover) .checkpoint-bar__item:nth-child(1) .checkpoint__icon,
.checkpoint-bar:has(.checkpoint-bar__begin:focus-visible) .checkpoint-bar__item:nth-child(1) .checkpoint__icon {
  color: var(--accent-strong);
  border-color: var(--accent-soft);
  transition-delay: 0ms;
}
.checkpoint-bar:has(.checkpoint-bar__begin:hover) .checkpoint-bar__item:nth-child(2) .checkpoint__icon,
.checkpoint-bar:has(.checkpoint-bar__begin:focus-visible) .checkpoint-bar__item:nth-child(2) .checkpoint__icon {
  color: var(--accent-strong);
  border-color: var(--accent-soft);
  transition-delay: 170ms;
}
.checkpoint-bar:has(.checkpoint-bar__begin:hover) .checkpoint-bar__item:nth-child(3) .checkpoint__icon,
.checkpoint-bar:has(.checkpoint-bar__begin:focus-visible) .checkpoint-bar__item:nth-child(3) .checkpoint__icon {
  color: var(--accent-strong);
  border-color: var(--accent-soft);
  transition-delay: 360ms;
}
.checkpoint-bar:has(.checkpoint-bar__begin:hover) .checkpoint-bar__item:nth-child(4) .checkpoint__icon,
.checkpoint-bar:has(.checkpoint-bar__begin:focus-visible) .checkpoint-bar__item:nth-child(4) .checkpoint__icon {
  color: var(--accent-strong);
  border-color: var(--accent-soft);
  transition-delay: 550ms;
}

/* One-time entrance as the Experience section first enters view — reuses
   the checkpoint bar's existing .reveal/.in-view observer, no new one.
   Restrained: a small fade/slide, not an autoplay of the hover sweep. */
.checkpoint-bar.in-view .checkpoint-bar__begin {
  animation: beginEntrance 550ms var(--ease) both;
}
.checkpoint-bar.in-view .checkpoint-bar__begin .checkpoint-bar__begin-arrow {
  animation: beginArrowIn 550ms var(--ease) both;
}
@keyframes beginEntrance {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes beginArrowIn {
  0% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

@media (max-width: 640px) {
  .checkpoint-bar__begin { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .checkpoint-bar__begin,
  .checkpoint-bar__begin-arrow,
  .checkpoint-bar__track::after,
  .checkpoint-bar__item .checkpoint__icon {
    transition: none !important;
  }
  .checkpoint-bar__begin,
  .checkpoint-bar__begin .checkpoint-bar__begin-arrow {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   READER — sequence-mode chrome (chapter marks + prev/next bar)
   Shared by individual-card reads and "Play full journey"; only
   this extra chrome differs between the two, per unification.
   ============================================================ */
.reader__chapters {
  display: none;
  flex: 1;
  gap: 0.4rem;
  max-width: 320px;
}
.reader.is-sequence .reader__chapters { display: flex; }
.reader__chapter-mark {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background 500ms var(--ease), box-shadow 500ms var(--ease);
}
.reader__chapter-mark.is-on { background: var(--accent); }
.reader__chapter-mark.is-live { background: var(--accent-strong); box-shadow: 0 0 8px var(--accent-soft); }

.reader__chapter-nav {
  display: none;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 2rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.reader.is-sequence .reader__chapter-nav { display: flex; }
.reader.is-sequence .reader__end { display: none; }
.reader__chapter-nav .btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* The next-chapter control teases the actual next chapter by title, so it
   reads as narrative curiosity rather than a generic "Next" app button —
   text-forward, no pill/fill, in keeping with the entry CTA's language. */
.reader__next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.3rem 0;
  font: inherit;
  text-align: right;
  cursor: pointer;
  color: inherit;
}
.reader__next-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 200ms var(--ease);
}
.reader__next-title {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--text);
  transition: color 200ms var(--ease), transform 200ms var(--ease);
}
.reader__next:hover .reader__next-title, .reader__next:focus-visible .reader__next-title { color: var(--accent-strong); }
.reader__next:hover .reader__next-label, .reader__next:focus-visible .reader__next-label { color: var(--text-muted); }
/* The arrow is the title's own trailing character, so it rides along with
   a small text-level nudge rather than an isolated child transform. */
.reader__next:hover .reader__next-title, .reader__next:focus-visible .reader__next-title { transform: translateX(3px); }
.reader__next--end .reader__next-label { display: none; }
.reader__next--end .reader__next-title { font-size: 1rem; }

@media (max-width: 640px) {
  .reader__chapter-nav { padding: 0.8rem 1.25rem; }
  .reader__next { align-items: flex-end; }
  .reader__next-title { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reader__chapter-mark { transition: none !important; }
  .reader__next-title, .reader__next-label { transition: none !important; }
}