/* ==========================================================================
   Kaylee Zheng — Portfolio v2 (Product Intelligence Atlas)
   Structure modelled on awakeagency.dev: inset hero panel, pinned statement,
   giant section headings, stacking cards, list archive, CTA band, dark footer.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--surface); padding: 10px 16px; border-radius: var(--pill);
  transition: top var(--fast);
}
.skip-link:focus { top: 16px; }

/* ---------- Shared type ---------- */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.eyebrow--light { color: var(--muted-on-ink); }
.meta-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-right: 6px;
}
.section-title {
  font-size: var(--fs-3xl);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  max-width: 20ch;
}
.section-lead { font-size: var(--fs-2xl); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }
.mega {
  font-size: var(--fs-mega);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-bottom: clamp(32px, 5vw, 72px);
}
.text-link {
  display: inline-flex; gap: 8px; align-items: center;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--fast) var(--ease), color var(--fast);
}
.text-link:hover { gap: 14px; color: var(--accent-strong); }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 20px;
  border-radius: var(--pill);
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
  transition: transform var(--fast) var(--ease), background var(--fast), color var(--fast), border-color var(--fast);
}
.pill:hover { transform: translateY(-2px); }
.pill--accent { background: var(--accent); color: var(--ink); }
.pill--accent:hover { background: #7cc2f2; }
.pill--light { background: var(--surface); color: var(--ink); }
.pill--ghost { border: 1px solid rgba(245, 245, 244, 0.35); color: var(--text-on-ink); }
.pill--ghost:hover { border-color: var(--text-on-ink); }
.pill--lg { height: 52px; padding: 0 26px; font-size: var(--fs-base); }
.pill--xl { height: clamp(56px, 6vw, 84px); padding: 0 clamp(24px, 3vw, 40px); font-size: var(--fs-xl); }

.copy-btn {
  font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--pill);
  border: 1px solid rgba(245, 245, 244, 0.3);
  margin-left: 8px;
  transition: border-color var(--fast), background var(--fast);
}
.copy-btn:hover { border-color: var(--accent); }
.copy-btn--dark { border-color: var(--line-strong); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--inset) + 16px) calc(var(--inset) + var(--gutter)) 0;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.wordmark {
  font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em;
  color: var(--text-on-ink);
  padding: 8px 16px; margin-left: -16px;
  border-radius: var(--pill);
  transition: background var(--base), color var(--base), box-shadow var(--base);
}
.wordmark-dot { color: var(--accent); }
.site-header.is-scrolled .wordmark { background: var(--surface); color: var(--ink); box-shadow: 0 4px 20px rgba(20, 26, 36, 0.08); } /* position never changes, only the fill */
body.menu-open .site-header .wordmark { background: transparent; color: var(--text-on-ink); box-shadow: none; }
.header-actions { display: flex; gap: 8px; }
.header-actions .pill { box-shadow: 0 4px 20px rgba(20, 26, 36, 0.08); }
.menu-toggle-icon { display: inline-grid; gap: 4px; width: 16px; }
.menu-toggle-icon span { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--base) var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* ---------- Menu overlay ---------- */
.menu-overlay {
  position: fixed; inset: var(--inset); z-index: 90;
  background: var(--ink); color: var(--text-on-ink);
  border-radius: var(--radius-lg);
  display: grid; grid-template-rows: 1fr auto;
  padding: 120px var(--gutter) 32px;
  animation: menu-in var(--base) var(--ease);
}
.menu-overlay[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.menu-nav { display: flex; flex-direction: column; justify-content: center; }
.menu-link {
  display: flex; align-items: baseline; gap: 18px;
  font-size: clamp(2.5rem, 1rem + 6vw, 6rem); font-weight: 500;
  line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase;
  transition: color var(--fast), transform var(--base) var(--ease);
}
.menu-link:hover { color: var(--accent); transform: translateX(10px); }
.menu-link-num { font-size: var(--fs-sm); color: var(--accent); letter-spacing: 0.08em; }
.menu-meta { display: flex; flex-wrap: wrap; gap: 8px 40px; color: var(--muted-on-ink); font-size: var(--fs-sm); border-top: 1px solid var(--ink-line); padding-top: 20px; }
.menu-meta a:hover { color: var(--text-on-ink); }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { padding: var(--inset); }
.hero-panel {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 2 * var(--inset));
  display: flex; flex-direction: column;
  padding: clamp(110px, 14vh, 150px) var(--gutter) 0;
  background: var(--ink); color: var(--text-on-ink);
  border-radius: var(--radius-lg);
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--ink-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);
  opacity: 0.5;
}
.hero-eyebrow { color: var(--accent); position: relative; width: fit-content; } /* text-width box, so tokens can fall past it */

/* AI tokens: physics coins with lab logos (see js/tokens.js). They never overlap text. */
.hero-tokens { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.token {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
  transition: opacity 200ms;
  box-shadow:
    inset 0 -5px 10px rgba(0, 0, 0, 0.22),
    inset 0 4px 8px rgba(255, 255, 255, 0.45),
    0 14px 22px -10px rgba(0, 0, 0, 0.65);
}
.token::before { /* rim */
  content: ""; position: absolute; inset: 9%;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.35);
}
.token svg { position: relative; width: 44%; height: 44%; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.18)); }
.token--light  { background: radial-gradient(circle at 34% 28%, #ffffff, #e6ecf2 68%); color: #7d8996; }
.token--mist   { background: radial-gradient(circle at 34% 28%, #f2f6fa, #c9d4df 68%); color: #6c7886; }
.token--accent { background: radial-gradient(circle at 34% 28%, #b8def9, #63b3ed 68%); color: #1f5b86; }
.token--ink    { background: radial-gradient(circle at 34% 28%, #33404f, #0d1219 68%); color: #8e9aa8; }
.token--slate  { background: radial-gradient(circle at 34% 28%, #9aa6b3, #5b6774 68%); color: #e3e9ef; }
.hero-panel { --hero-fs: min(var(--fs-hero), 13.2svh); --title-gap: clamp(24px, 4vh, 48px); }
.hero-title {
  position: relative;
  font-size: var(--hero-fs);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.hero-row { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 0.28em; }
.hero-row--left { justify-content: flex-start; }
.hero-word { display: inline-block; }
.hero-word--right { text-align: right; }
.js .hero-word { opacity: 0; transform: translateY(0.35em); animation: rise var(--slow) var(--ease) forwards; }
.js .hero-row:nth-child(1) .hero-word:nth-child(2) { animation-delay: 80ms; }
.js .hero-row:nth-child(2) .hero-word:nth-child(1) { animation-delay: 160ms; }
.js .hero-row:nth-child(2) .hero-word:nth-child(2) { animation-delay: 240ms; }
.js .hero-row:nth-child(3) .hero-word { animation-delay: 320ms; }
.js .hero-row:nth-child(4) .hero-word { animation-delay: 400ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* The block is as wide as the button row; the paragraph wraps to that same width */
.hero-side {
  position: relative;
  width: fit-content; max-width: 100%;
  margin: 0 0 40px auto;
  animation: fade-up var(--slow) var(--ease) 480ms both;
}
/* On wide screens the intro sits beside the two short last rows, like Awake's paragraph beside "REMEMBER."
   It stays in normal flow, pulled up so its top lines up with the "USEFUL" row (rows are 0.9em tall), so it
   can never ride up into "AI" / "INTO" — if it's taller than two rows, the hero simply grows. */
@media (min-width: 1180px) {
  .hero-side {
    margin-top: calc(-1 * (1.6 * var(--hero-fs) + var(--title-gap)));
  }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
.hero-title { margin-bottom: var(--title-gap); }
.hero-copy { width: 0; min-width: 100%; font-size: var(--fs-lg); line-height: 1.5; color: rgba(245, 245, 244, 0.86); margin-bottom: 28px; }
.hero-copy strong { color: var(--text-on-ink); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-strip {
  position: relative;
  margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px;
  border-top: 1px solid var(--ink-line);
  padding: 18px 0 22px;
  font-size: var(--fs-sm); color: var(--muted-on-ink);
}
.hero-strip a:hover { color: var(--text-on-ink); }

/* ---------- Current focus statement (pinned; bold text that fills in word by word) ---------- */
.atlas { position: relative; height: 200svh; }
.atlas-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
.atlas-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  opacity: 0.6;
}
.atlas-label { position: absolute; top: 104px; left: calc(var(--inset) + var(--gutter)); margin: 0; }
.atlas-statement {
  position: relative; z-index: 2;
  max-width: 16ch;
  padding: 0 var(--gutter);
  font-size: clamp(2.75rem, 1rem + 5.2vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
}

/* Words revealed by scroll (Current Focus statement) */
.w { opacity: var(--o, 1); transition: opacity 200ms linear; }

/* ---------- Focus ---------- */
.focus { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.focus > .container { position: relative; z-index: 1; } /* above the background line */
.focus-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.focus-body { font-size: var(--fs-xl); line-height: 1.4; letter-spacing: -0.01em; position: sticky; top: 120px; }
.focus-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
.focus-item { padding: 28px 24px 36px 0; border-bottom: 1px solid var(--line); }
.focus-item:nth-child(odd) { border-right: 1px solid var(--line); }
.focus-item:nth-child(even) { padding-left: 24px; }
.focus-num { display: block; font-size: var(--fs-xs); color: var(--accent-strong); letter-spacing: 0.12em; margin-bottom: 36px; }
.focus-item h3 { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 10px; }
.focus-item p { color: var(--text-muted); }

/* ---------- Recent work ---------- */
.work { position: relative; padding-bottom: var(--section); }
.work > .container { position: relative; z-index: 1; }
/* Spans all of <main>; only crosses the transparent Focus/Work sections */
main { position: relative; }
.work-line {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.work-line path {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.32;
  stroke-width: 28;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw, 1));
}
.work-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); margin-bottom: clamp(48px, 7vw, 100px); color: var(--text-muted); }
.work-intro p { grid-column: 1 / -1; max-width: 56ch; } /* left-aligned with the RECENT WORK heading */

.case { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.case-figure { min-width: 0; }
/* A thin white frame: just enough edge to lift the screen off the page */
.case-art {
  background: var(--surface);
  border-radius: calc(10px + clamp(6px, 0.8vw, 10px));
  padding: clamp(6px, 0.8vw, 10px);
  box-shadow: 0 30px 80px -30px rgba(20, 26, 36, 0.25);
}
.case-figure figcaption { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 16px; padding-left: 4px; }

/* MyNovie prototype: one recorded clip per page, stacked. The rail's hotspots sit over the
   prototype's own side-menu icons (measured at 1440×900), so it reads like the real app. */
.proto {
  position: relative;
  aspect-ratio: 1440 / 900;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f6f2;
  box-shadow: 0 0 0 1px var(--line);
}
/* All screens stay rendered (a hidden <video> stops decoding and can't repaint until its next
   keyframe); the active one is simply stacked on top. */
.proto-screen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.proto-screen.is-active { z-index: 1; }
.proto-rail { display: none; }
.proto.is-live .proto-rail { display: block; }
.proto-rail .proto-hit { z-index: 2; }
.proto-hit {
  position: absolute;
  left: calc(26 / 1440 * 100%);
  top: calc((84 + var(--i) * 52) / 900 * 100%);
  width: calc(48 / 1440 * 100%);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}
.proto-hit:hover { background: rgba(20, 26, 36, 0.08); }
.proto-hit[aria-pressed="true"] { cursor: default; }
.proto-hit[aria-pressed="true"]:hover { background: transparent; }
.proto-hit:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }

/* Phones: the rail icons are too small to tap, so the pages get labelled pills instead */
.proto-tabs { display: none; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.proto-tab {
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.proto-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.proto-tab:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
@media (max-width: 560px) {
  .proto.is-live .proto-rail { display: none; }
  .js .proto-tabs { display: flex; }
  .proto-hint { display: none; }
}

.case-body { padding: 8px 4px; }
.tag { font-size: var(--fs-xs); letter-spacing: 0.14em; color: var(--accent-strong); font-weight: 500; margin-bottom: 14px; }
.case-title { font-size: var(--fs-2xl); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 14px; }
.case-lead { font-size: var(--fs-lg); font-weight: 500; margin-bottom: 14px; }
.case-body > p:not(.tag):not(.case-lead) { color: var(--text-muted); margin-bottom: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chips:last-child { margin-bottom: 0; }
.chips li { font-size: var(--fs-xs); padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--line-strong); }

.work-note {
  margin: clamp(64px, 9vw, 140px) auto 0;
  max-width: 560px; text-align: center;
  padding: 28px 24px 72px;
}
.work-note .eyebrow { margin-bottom: 12px; }
.work-note-text { font-size: var(--fs-xl); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 76px; } /* room for the line's loop around the link */

/* ---------- Approach (dark panel, stacking cards) ---------- */
.approach { padding: 0 var(--inset); }
.approach-panel {
  background: var(--ink); color: var(--text-on-ink);
  border-radius: var(--radius-lg);
  padding: calc(var(--section) / 2) 0 var(--section); /* half-height top gap */
}
.approach-title {
  font-size: var(--fs-3xl); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em;
  max-width: 18ch; margin-bottom: 40px;
}
.approach-intro { display: grid; gap: 1em; max-width: 60ch; color: var(--muted-on-ink); font-size: var(--fs-lg); line-height: 1.5; margin-bottom: 32px; }
.approach-intro strong { color: var(--text-on-ink); font-weight: 500; }

/* Principles: a simple card list by default (phones, reduced motion, no JS). On larger screens
   main.js adds .is-stacking: the stage pins and cards fly in and pile up at slight angles,
   modelled on awakeagency.dev's Services stack. */
.principles { position: relative; }
.principle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
  min-height: min(62svh, 520px);
  margin-bottom: 24px;
  padding: clamp(28px, 4vw, 64px);
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.28);
}
.principle:last-child { margin-bottom: 0; }
.principles.is-stacking { height: calc(100svh + (var(--n, 3) - 1) * 80svh); }
.principles.is-stacking .principles-stage {
  position: sticky; top: 0; height: 100svh;
  display: grid; justify-items: center; align-items: start;
  padding-top: clamp(96px, 12svh, 116px); /* card sits just below the header, close to the intro */
  perspective: 1600px;
}
.principles.is-stacking .principle {
  grid-area: 1 / 1;
  width: min(1000px, 100%);
  margin: 0;
  transform-origin: 50% 70%;
  will-change: transform;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.principle-num { display: block; font-size: var(--fs-sm); letter-spacing: 0.12em; color: var(--accent-strong); margin-bottom: 18px; }
.principle h3 { font-size: var(--fs-3xl); font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin-bottom: 20px; }
.principle p { color: var(--text-muted); font-size: var(--fs-lg); max-width: 36ch; }
.principle-art { width: 100%; max-width: 420px; justify-self: end; }
.principle-art *, .chapter-art * { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.4; }
.principle-art .c-line, .chapter-art .c-line { stroke-opacity: 0.2; stroke-dasharray: 3 5; stroke-width: 1; }
.principle-art .fill, .chapter-art .fill { fill: var(--accent); stroke: none; }
.principle-art .dot, .chapter-art .dot { fill: var(--ink); stroke: none; }

.loop { margin-top: clamp(64px, 8vw, 120px); text-align: center; }
.principles.is-stacking + .loop { margin-top: 0; } /* spacing set by fitStackGap() in main.js */
.loop-steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; }
.loop-steps li { display: inline-flex; align-items: center; }
.loop-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: var(--pill);
  border: 1px solid rgba(245, 245, 244, 0.25);
  font-size: var(--fs-lg);
}
.loop-pill--end {
  border-color: var(--accent); color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left / 100% 100%;
}
.loop-repeat { display: inline-block; }
/* Connector: a short line with an arrowhead, sitting between pills */
.loop-arrow { position: relative; width: 34px; height: 1.5px; margin: 0 8px; background: var(--accent); transform-origin: left center; }
.loop-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent);
  translate: 0 -50%; rotate: 45deg;
}
.loop figcaption { margin-top: 18px; color: var(--muted-on-ink); font-size: var(--fs-sm); }

/* Build motion, left → right, once the diagram scrolls into view (main.js adds .is-in).
   Step k arrives at --t = 0.1s + k × 0.38s: its arrow draws in first, then the pill slides in.
   Learning then fills with blue left → right and its ↺ turns once; the caption comes last. */
.js .loop[data-reveal] { opacity: 1; transform: none; }
.loop li { --t: calc(0.1s + var(--i) * 0.38s); }
.js .loop:not(.is-in) .loop-pill,
.js .loop:not(.is-in) .loop-arrow,
.js .loop:not(.is-in) figcaption { opacity: 0; }
.js .loop.is-in .loop-arrow { animation: loop-draw 0.32s var(--ease) calc(var(--t) - 0.2s) both; }
.js .loop.is-in .loop-pill { animation: loop-in 0.55s var(--ease) var(--t) both; }
.js .loop.is-in .loop-pill--end {
  animation: loop-in 0.55s var(--ease) var(--t) both, loop-fill 0.6s var(--ease) calc(var(--t) + 0.35s) both;
}
.js .loop.is-in .loop-repeat { animation: loop-spin 0.8s var(--ease) calc(0.1s + 4 * 0.38s + 0.85s) both; }
.js .loop.is-in figcaption { animation: fade-up 0.6s var(--ease) calc(0.1s + 4 * 0.38s + 1s) both; }
@keyframes loop-draw { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes loop-draw-down { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes loop-in { from { opacity: 0; transform: translateX(-18px) scale(0.94); } }
@keyframes loop-fill {
  from { background-size: 0% 100%; color: var(--text-on-ink); border-color: rgba(245, 245, 244, 0.25); }
  to   { background-size: 100% 100%; color: var(--ink); border-color: var(--accent); }
}
@keyframes loop-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* ---------- Ask the Atlas ---------- */
.ask { padding: var(--section) 0; }
.ask-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.ask-intro > p:not(.eyebrow) { color: var(--text-muted); margin-bottom: 16px; max-width: 46ch; }
.ask-trust { font-size: var(--fs-sm); padding-left: 14px; border-left: 2px solid var(--accent); }

/* Chat fills the screen height, leaving room for the fixed nav above it and a little air below;
   its log fills the space and scrolls internally */
.chat {
  height: calc(100svh - 136px); min-height: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 30px 80px -40px rgba(20, 26, 36, 0.3);
  display: flex; flex-direction: column;
}
.chat-log {
  display: flex; flex-direction: column; gap: 14px;
  flex: 1 1 auto; height: 0; min-height: 260px; overflow-y: auto; /* height:0 so messages never grow the section */
  padding: 4px 4px 16px;
  scroll-behavior: smooth;
}
.chat-hint { color: var(--text-muted); font-size: var(--fs-sm); margin: auto 0; text-align: center; }
.msg { max-width: 88%; padding: 12px 16px; border-radius: 16px; line-height: 1.5; white-space: pre-wrap; }
.msg--user { align-self: flex-end; background: var(--ink); color: var(--text-on-ink); border-bottom-right-radius: 4px; }
.msg--guide { align-self: flex-start; background: var(--paper); border-bottom-left-radius: 4px; }
/* Opening message, styled after the v1 "Design x AI" bubble */
.msg--intro { align-self: flex-start; max-width: 100%; padding: 18px 22px; border-radius: 20px; border-bottom-left-radius: 4px; background: var(--accent-strong); color: #fff; white-space: normal; }
.msg--intro p + p { margin-top: 12px; }
.msg--guide.is-thinking::after { content: "…"; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.related { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: var(--fs-xs); color: var(--text-muted); white-space: normal; }
.related a { padding: 4px 10px; border-radius: var(--pill); background: var(--accent-soft); color: var(--ink); border: 1px solid rgba(99, 179, 237, 0.4); }
.related a:hover { background: var(--accent); }

.chat-form { display: flex; gap: 8px; padding-top: 12px; }
/* Input pill with the send button inside it (as in v1) */
.chat-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  height: 60px; padding: 0 6px 0 22px;
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  transition: border-color var(--fast), background var(--fast);
}
.chat-field:focus-within { border-color: var(--accent); background: var(--surface); }
.chat-input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; }
.chat-input:focus { outline: none; }
.chat-send {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--text-on-ink);
  transition: background var(--fast);
}
.chat-send:hover { background: var(--accent); color: var(--ink); }
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Book button in front of the composer → opens the Curiosity Guide (conversation starters) */
.chat-form { position: relative; }
.guide-wrap { position: relative; flex: none; }
.guide-btn {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--text-on-ink);
  box-shadow: 0 8px 24px -10px rgba(20, 26, 36, 0.5);
  transition: transform var(--fast) var(--ease), background var(--fast);
}
.guide-btn:hover { transform: translateY(-2px); background: var(--ink-2); }
.guide-btn svg { width: 22px; height: 22px; }
.guide-btn[aria-expanded="true"] { box-shadow: none; }
/* Book icon while closed, close × while the guide is open */
.guide-btn .icon-close { display: none; }
.guide-btn[aria-expanded="true"] .icon-book { display: none; }
.guide-btn[aria-expanded="true"] .icon-close { display: block; animation: spin-in var(--base) var(--ease); }
@keyframes spin-in { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } }

/* Anchored to the button's left edge (arrow over the button) so it never runs off-screen on phones */
.guide-tip {
  position: absolute; left: -6px; bottom: calc(100% + 14px); z-index: 21;
  translate: 0 6px;
  width: max-content; max-width: 260px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--ink); color: var(--text-on-ink);
  font-size: var(--fs-sm); line-height: 1.35; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--base), translate var(--base) var(--ease);
}
.guide-tip::after {
  content: ""; position: absolute; left: 32px; top: 100%;
  width: 12px; height: 12px; background: var(--ink);
  translate: -50% -6px; rotate: 45deg; border-radius: 2px;
}
.guide-btn:hover + .guide-tip,
.guide-btn:focus-visible + .guide-tip,
.guide-wrap.is-hinting .guide-tip { opacity: 1; translate: 0 0; }
.guide-wrap.is-open .guide-tip { opacity: 0; }

.guide {
  position: absolute; left: 0; bottom: calc(100% + 14px); z-index: 20;
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  max-height: min(520px, 70svh);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(20, 26, 36, 0.35);
  overflow: hidden;
  animation: fade-up var(--base) var(--ease);
}
.guide[hidden] { display: none; }
.guide-head { padding: 18px 20px 14px; background: var(--paper); border-bottom: 1px solid var(--line); }
.guide-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.guide-title svg { width: 20px; height: 20px; color: var(--accent-strong); }
.guide-sub { margin-top: 2px; font-size: 0.8125rem; color: var(--text-muted); }
.guide-body { overflow-y: auto; padding: 6px 10px 10px; }
.guide-group { margin: 12px 10px 4px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.guide-item {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 12px;
  text-align: left; font-size: var(--fs-sm); line-height: 1.35;
  transition: background var(--fast);
}
.guide-item:hover, .guide-item:focus-visible { background: var(--accent-soft); }
.guide-icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--text-muted);
}
.guide-item:hover .guide-icon { background: var(--accent); color: var(--ink); }
.guide-icon svg { width: 17px; height: 17px; }

/* ---------- Quote ---------- */

/* ---------- My Journey (archive list) ---------- */
.journey { padding-bottom: var(--section); }
.journey-intro { color: var(--text-muted); font-size: var(--fs-lg); max-width: 60ch; margin-bottom: 48px; }
.timeline { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; max-width: 640px; }
.timeline-stop {
  font-size: var(--fs-sm); font-weight: 500;
  padding: 6px 14px; border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.timeline-stop:hover, .timeline-stop.is-active { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
.timeline-track { flex: 1; height: 1px; background: var(--line-strong); }

.chapters {
  position: relative;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: 8px clamp(16px, 3vw, 40px);
}
.chapters::before {
  content: ""; position: absolute;
  left: calc(clamp(16px, 3vw, 40px) + 15px);
  top: 46px; bottom: 46px; width: 1px;
  background: var(--accent);
  opacity: 0.6;
}
.chapter { border-bottom: 1px solid var(--line); }
.chapter:last-child { border-bottom: 0; }
.chapter-head {
  width: 100%;
  display: grid; grid-template-columns: 32px 1fr auto 28px; align-items: center; gap: 24px;
  padding: 26px 0;
  text-align: left;
}
.chapter-num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--paper-2); border: 1px solid var(--accent);
  font-size: var(--fs-xs); font-weight: 600;
  transition: background var(--fast);
}
.chapter-title { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.01em; }
.chapter-meta { font-size: var(--fs-sm); color: var(--text-muted); text-align: right; }
.chapter-toggle { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); }
.chapter-toggle::before, .chapter-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1.5px; background: currentColor;
  translate: -50% -50%;
  transition: rotate var(--base) var(--ease);
}
.chapter-toggle::after { rotate: 90deg; }
.chapter-head[aria-expanded="true"] .chapter-toggle::after { rotate: 0deg; }
.chapter-head[aria-expanded="true"] .chapter-num { background: var(--accent); }
.chapter-head:hover .chapter-title { color: var(--accent-strong); }
.chapter-body {
  display: grid; grid-template-columns: 1fr 240px; gap: 40px; align-items: center;
  padding: 0 0 32px 56px;
  animation: menu-in var(--base) var(--ease);
}
.chapter-body[hidden] { display: none; }
.chapter-copy p { color: var(--text-muted); max-width: 60ch; margin-bottom: 16px; }
.carried { color: var(--text) !important; }
.carried span { display: block; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 4px; }
.chapter-art { width: 100%; }
.journey-close { margin-top: 48px; font-size: var(--fs-xl); line-height: 1.35; letter-spacing: -0.01em; max-width: 40ch; }

/* ---------- About ---------- */
.about { padding: var(--section) 0; border-top: 1px solid var(--line); }
.about-layout { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-photo { position: sticky; top: 120px; }
.about-photo img { width: 100%; height: auto; max-width: 360px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.about-body > p:not(.eyebrow) { color: var(--text-muted); font-size: var(--fs-lg); max-width: 62ch; margin-bottom: 18px; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 36px 0 32px; border-top: 1px solid var(--line-strong); }
.details div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.details dt { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }

/* ---------- Contact + CTA band ---------- */
.contact { padding-top: 0; } /* the About section above already provides the spacing */

/* One centred sentence: "I'm open to [rolling label] [Start a conversation →]" */
/* Shared with the footer, which matches the band's height */
:root {
  --cta-fs: clamp(1.75rem, 0.6rem + 2.9vw, 3.75rem);
  --pill-h: max(58px, calc(var(--cta-fs) * 1.8));   /* shared by the current label and the CTA */
  --item: calc(var(--pill-h) + var(--cta-fs) * 0.3); /* one row of the rolling column */
  --band-pad: clamp(32px, 4vw, 56px);
  --band-h: calc(2 * var(--band-pad) + 3 * var(--item)); /* band height when it's a single row */
}
.cta-band {
  margin: 0 var(--inset);
  background: var(--accent); color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--band-pad) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px;
  text-align: center;
}
.cta-lead { font-size: var(--cta-fs); font-weight: 500; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; margin-right: 4px; }
/* Fixed-width column, as wide as the longest label (measured in main.js), like Awake's "I need" band.
   Exactly three rows tall (previous, current, next); clips vertically only. */
.cta-carousel {
  position: relative;
  height: calc(var(--item) * 3);
  width: var(--label-w, auto);
  clip-path: inset(0 -100vw);
}
.cta-track { display: flex; flex-direction: column; align-items: center; transition: transform 700ms var(--ease); }
.cta-track.no-anim, .cta-track.no-anim span { transition: none; }
.cta-track li { flex: none; height: var(--item); display: flex; align-items: center; justify-content: center; }
.cta-track li span {
  height: var(--pill-h);
  display: inline-flex; align-items: center;
  padding: 0 0.5em;
  font-size: var(--cta-fs); font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  white-space: nowrap;
  color: var(--surface);
  border: 2px solid var(--surface);
  border-radius: var(--pill);
  transition: color 500ms, background 500ms;
}
.cta-track li.is-current span { background: var(--surface); color: var(--ink); }
/* Same weight and tracking as the labels, at 80% size: black-on-white reads larger, so this balances
   it optically with "I'm open to". Pill height and side padding stay matched to the labels. */
.cta-go {
  height: var(--pill-h);
  gap: 0.25em;
  padding: 0 calc(var(--cta-fs) * 0.5);
  font-size: calc(var(--cta-fs) * 0.8); font-weight: 500; letter-spacing: -0.02em; line-height: 1;
}
.cta-go svg { width: 0.8em; height: 0.8em; flex: none; transition: transform var(--fast) var(--ease); }
.cta-go:hover svg { transform: translateX(3px); }

/* ---------- Footer ---------- */
/* Same inset above and below, so the CTA band → footer gap matches the gap at the page's bottom edge */
.site-footer { padding: var(--inset); }
.footer-panel {
  display: flex; flex-direction: column;
  background: var(--ink); color: var(--text-on-ink);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2.5vw, 32px) var(--gutter) 24px;
}
.footer-panel .footer-legal { margin-top: auto; }
/* Same height as the CTA band above while the band is a single row */
@media (min-width: 561px) {
  .footer-panel { min-height: var(--band-h); }
}
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; align-items: start; padding-bottom: 40px; }
/* line-height 1 drops the extra leading so the wordmark's cap height lines up with the first link row */
.footer-wordmark { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
/* Type scale follows Awake's footer: 18px links/values, 15px labels and legal, ~39px link rhythm */
.footer-col { display: flex; flex-direction: column; gap: 11px; font-size: 1.125rem; line-height: 1.55; }
.footer-col a { color: var(--muted-on-ink); transition: color var(--fast); width: fit-content; }
.footer-col a:hover { color: var(--text-on-ink); }
.footer-meta p { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; color: var(--text-on-ink); }
.footer-meta .meta-label { color: var(--muted-on-ink); opacity: 1; font-size: 0.9375rem; letter-spacing: 0; text-transform: none; margin: 0; }
.footer-legal { border-top: 1px solid var(--ink-line); padding-top: 20px; font-size: 0.9375rem; color: var(--muted-on-ink); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 120;
  translate: -50% 20px; opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--text-on-ink);
  padding: 10px 18px; border-radius: var(--pill); font-size: var(--fs-sm);
  transition: opacity var(--base), translate var(--base) var(--ease);
}
.toast.is-visible { opacity: 1; translate: -50% 0; }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Anchor landing spots ----------
   The header is fixed, so each anchored section gets a scroll-margin-top based on the header's full
   height (inset + 16px offset + pill height), minus the section's own top padding, so a jump lands
   with the section's label/title about 28px below the header instead of under it or far below it. */
:root {
  --header-h: calc(var(--inset) + 16px + 44px);
  --anchor: calc(var(--header-h) + 28px);
}
#work, #journey { scroll-margin-top: var(--anchor); }
#approach { scroll-margin-top: calc(var(--anchor) - var(--section) / 2); }   /* panel's top padding */
#ask, #about { scroll-margin-top: calc(var(--anchor) - var(--section)); }    /* section's top padding */
#chat { scroll-margin-top: calc(var(--header-h) + 20px); }                 /* box fills the screen below the header */
#contact { scroll-margin-top: calc(var(--header-h) + 20px); }              /* the blue band itself */

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .case { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-wordmark { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .hero-row { justify-content: flex-start; }
  .hero-side { margin-left: 0; }
  .hero-strip { flex-direction: column; align-items: flex-start; }

  /* Current focus statement: no pinning on small screens */
  .atlas { height: auto; padding: 96px 0 24px; }
  .atlas-sticky { position: static; height: auto; display: flex; flex-direction: column; align-items: stretch; overflow: visible; padding: 0 var(--gutter); }
  .atlas-label { position: static; margin-bottom: 20px; }
  .atlas-statement { text-align: left; max-width: 16ch; padding: 0; }

  .focus-layout, .work-intro, .approach-intro, .ask-layout, .about-layout { grid-template-columns: 1fr; }
  .focus-body, .about-photo { position: static; }
  .principle { grid-template-columns: 1fr; min-height: auto; }
  .principle-art { justify-self: start; max-width: 280px; }
  .chapter-head { grid-template-columns: 32px 1fr 28px; gap: 16px; }
  .chapter-meta { grid-column: 2; grid-row: 2; text-align: left; margin-top: -2px; }
  .chapter-toggle { grid-column: 3; grid-row: 1; }
  .chapter-body { grid-template-columns: 1fr; padding-left: 48px; }
  .chapter-art { max-width: 200px; }
}

@media (max-width: 560px) {
  :root { --header-h: calc(var(--inset) + 16px + 40px); }
  /* Flow diagram stacks vertically on phones, with downward connectors drawn top → bottom */
  .loop-steps { flex-direction: column; }
  .loop-steps li { flex-direction: column; }
  .loop-arrow { width: 1.5px; height: 22px; margin: 6px 0; transform-origin: center top; }
  .loop-arrow::after { right: auto; top: auto; left: 50%; bottom: 0; translate: -50% 0; rotate: 135deg; }
  .js .loop.is-in .loop-arrow { animation-name: loop-draw-down; }
  .wordmark { font-size: var(--fs-base); }
  .header-actions .pill { height: 40px; padding: 0 14px; }
  .focus-list { grid-template-columns: 1fr; }
  .focus-item:nth-child(odd) { border-right: 0; }
  .focus-item:nth-child(even) { padding-left: 0; }
  .details { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .msg { max-width: 100%; }
  .cta-band { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } /* loops (e.g. the typing dots) run once instead of flickering */
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .hero-word { opacity: 1; transform: none; }
}