/* =========================================================
   GENEVIEVE GONZALES — PORTFOLIO
   Shared styles. Dark IDE-ish shell + warm content cards.
   ========================================================= */

:root {
  /* Warm-dark editorial palette */
  --bg: #14110e;
  --bg-2: #1a1612;
  --bg-3: #211b16;
  --line: #2a221c;
  --line-2: #3a3028;
  --ink: #f4ede0;
  --ink-2: #c0b8a8;
  --ink-3: #8a8275;
  --ink-4: #5a5247;
  --paper: #f4ede0;
  --paper-2: #ebe1cf;
  --paper-ink: #14110e;
  --paper-ink-2: #4a4438;
  --paper-ink-3: #807a6e;
  /* Accent: muted coral-pink, less candy */
  --accent: #e26566;
  --accent-soft: #efb1a8;
  --accent-deep: #b84548;
  --accent-2: #e26566;
  --accent-grad: linear-gradient(95deg, #efb1a8 0%, #e26566 60%, #b84548 100%);
  --accent-grad-soft: linear-gradient(95deg, rgba(239,177,168,0.16) 0%, rgba(226,101,102,0.18) 60%, rgba(184,69,72,0.14) 100%);
  --accent-warm: #e26566;
  --accent-violet: #efb1a8;
  /* Single-typeface system: Fraunces (variable serif) */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --mono: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --pad: 28px;
}

[data-theme="light"] {
  --bg: #f4f1ea;
  --bg-2: #ebe5d9;
  --bg-3: #ffffff;
  --line: #d8d3c5;
  --line-2: #c5bfae;
  --ink: #161616;
  --ink-2: #4a4640;
  --ink-3: #807a6e;
  --ink-4: #a8a297;
  --paper: #ffffff;
  --paper-2: #f4f1ea;
}

[data-theme="dim"] {
  --bg: #1a1c20;
  --bg-2: #22252b;
  --bg-3: #2a2d34;
  --line: #2f3239;
  --line-2: #3a3d45;
}

[data-density="compact"] {
  --pad: 18px;
}

* { box-sizing: border-box; }

/* Viewport-based scaling — the px-based layout was tuned for ~1440px Retina.
   Scale up on larger monitors so the design reads at a comfortable size on PC. */
html {
  zoom: 1;
}
@media (min-width: 1400px) { html { zoom: 1.08; } }
@media (min-width: 1700px) { html { zoom: 1.18; } }
@media (min-width: 2000px) { html { zoom: 1.28; } }
@media (min-width: 2400px) { html { zoom: 1.40; } }
@media (min-width: 3200px) { html { zoom: 1.60; } }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  font-variation-settings: 'opsz' 14, 'SOFT' 50, 'wght' 400;
  font-feature-settings: 'ss01' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Subtle warm grain texture — atmosphere & depth (frontend-design guidance) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.18;
}
.shell, main, footer { position: relative; z-index: 1; }

a { color: inherit; }
::selection { background: var(--accent); color: var(--bg); }

/* Fraunces variable-axis utility classes */
.f-display { font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 500; letter-spacing: -0.02em; }
.f-body    { font-variation-settings: 'opsz' 14,  'SOFT' 50, 'wght' 400; }
.f-meta    { font-variation-settings: 'opsz' 9,   'SOFT' 100,'wght' 500; }

/* Gradient text helper */
.grad-text {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grad-bg { background: var(--accent-grad); }
.grad-border { border-color: transparent; background-image: linear-gradient(var(--bg), var(--bg)), var(--accent-grad); background-origin: border-box; background-clip: padding-box, border-box; }

/* ===== Page chrome ===== */
.shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}
.shell > * { min-width: 0; }

/* ===== Clean modern nav ===== */
.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px max(36px, calc((100% - 1200px) / 2 + 19px));
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(13, 14, 16, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .site-nav { background: rgba(245, 241, 234, 0.78); }
[data-theme="dim"] .site-nav { background: rgba(20, 22, 26, 0.78); }

.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.site-nav .brand .mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.site-nav .brand .name em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.site-nav .links {
  margin-left: auto;
  display: flex;
  gap: 28px;
  align-items: center;
}
.site-nav .links a {
  position: relative;
  color: var(--ink-2);
  text-decoration: none;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  padding: 4px 0;
  transition: color 160ms ease;
}
.site-nav .links a:hover { color: var(--ink); }
.site-nav .links a.on { color: var(--ink); }
.site-nav .links a.on::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent-grad);
}

.site-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}
.site-nav .nav-cta span { color: var(--accent); transition: transform 220ms ease; }
.site-nav .nav-cta:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: rgba(236, 94, 148, 0.06);
}
.site-nav .nav-cta:hover span { transform: translateX(3px); }

@media (max-width: 720px) {
  .site-nav { padding: 16px 20px; gap: 14px; flex-wrap: wrap; }
  .site-nav .brand .name { display: none; }
  .site-nav .links { gap: 16px; font-size: 13px; }
  .site-nav .nav-cta { display: none; }
}

/* ===== Site footer ===== */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: 56px 36px 28px;
  font-family: var(--body);
}
.site-footer .ft-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.site-footer .ft-col { display: flex; flex-direction: column; gap: 8px; }
.site-footer .ft-brand {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 4px;
}
.site-footer .ft-brand em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-footer .ft-meta {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.site-footer .ft-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.site-footer .ft-col a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 160ms ease;
}
.site-footer .ft-col a:hover { color: var(--accent); }
.site-footer .ft-col a span { color: var(--ink-3); font-size: 12px; }
.site-footer .ft-avail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.site-footer .ft-avail .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.18), 0 0 10px rgba(74,222,128,0.45);
}
.site-footer .ft-end { align-items: flex-start; }

@media (max-width: 900px) {
  .site-footer .ft-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .site-footer { padding: 40px 22px 22px; }
  .site-footer .ft-inner { grid-template-columns: 1fr; }
}

/* ===== Universal helpers ===== */
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.display { font-family: var(--display); letter-spacing: -0.02em; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  background: var(--accent-grad-soft);
  border: 1px solid rgba(236,94,148,0.32);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 0 3px rgba(236,94,148,0.18); }

.tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 120ms;
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn.accent {
  background: var(--accent-grad);
  color: #fff;
}

/* ===== Page layout ===== */
.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 40px 80px;
}

.section-label {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.section-label .num { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.section-label .line { flex: 1; height: 1px; background: var(--line); }

/* ===== Project card (used on index) ===== */
.proj-card {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  align-items: center;
  transition: padding 200ms;
}
.proj-card:last-child { border-bottom: 1px solid var(--line); }
.proj-card:hover { padding-left: 12px; padding-right: 12px; }
.proj-card .thumb {
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  position: relative;
}
.proj-card .body { display: flex; flex-direction: column; gap: 14px; }
.proj-card .title {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.proj-card .title .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proj-card .desc {
  color: var(--ink-2);
  font-size: 16px;
  max-width: 60ch;
}
.proj-card .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.proj-card .meta .yr { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-right: 6px; }
.proj-card .arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 14px;
  transition: all 160ms;
}
.proj-card:hover .arrow {
  background: var(--accent-grad);
  color: #fff;
  border-color: transparent;
  transform: rotate(-45deg);
}

/* ===== Detail page hero ===== */
.detail-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  margin: 24px 0 56px;
  align-items: end;
}
.detail-hero .crumbs {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 28px;
}
.detail-hero .crumbs a { text-decoration: none; color: var(--ink-3); }
.detail-hero .crumbs a:hover { color: var(--ink); }
.detail-hero h1 {
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 18px;
}
.detail-hero h1 .ital { font-family: var(--serif); font-style: italic; font-weight: 400; }
.detail-hero .lede {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 520px;
}
.detail-hero .specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
.detail-hero .spec .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.detail-hero .spec .v { font-size: 15px; color: var(--ink); }
.detail-hero .spec .v .mono-sm { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

/* ===== Detail body ===== */
.section { margin: 64px 0; }
.section h2 {
  font-family: var(--display);
  font-size: 32px;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0 0 18px;
}
.section h2 .ital { font-family: var(--serif); font-style: italic; font-weight: 400; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.section .prose { max-width: 70ch; font-size: 16px; color: var(--ink-2); }
.section .prose p { margin: 0 0 16px; }
.section .prose strong { color: var(--ink); font-weight: 600; }
.section .prose em { font-family: var(--serif); font-size: 17px; }

/* Two-up layout for problem/approach */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.two-up .col h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.two-up .col p { margin: 0 0 14px; color: var(--ink-2); }

/* Big quote / pullquote */
.pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1.25;
  color: var(--ink);
  border-left: 3px solid transparent;
  border-image: var(--accent-grad) 1;
  padding: 6px 0 6px 28px;
  max-width: 800px;
  margin: 48px 0;
}

/* Visual placeholder block (project thumbs in detail) */
.viz {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.viz .label {
  position: absolute;
  top: 12px; left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Stats row */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 48px 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats .stat .n {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stats .stat .n .ital { font-family: var(--serif); font-style: italic; font-weight: 400; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats .stat .l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}

/* Prev/next nav at bottom of detail */
.next-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.next-nav a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: all 160ms;
}
.next-nav a:hover { border-color: var(--accent); background: var(--bg-3); }
.next-nav .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.next-nav .nm { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.next-nav .right { text-align: right; }

/* Marquee */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  width: 100%;
  max-width: 100vw;
  min-width: 0;
}
.marquee-track { display: flex; gap: 48px; white-space: nowrap; animation: marq 60s linear infinite; width: max-content; }
.marquee-track .star { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Code-like inline */
code, .codey {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}

/* Hero index - special treatment */
.hero-index {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: end;
  padding: 80px 0 48px;
}
.hero-index .h1 {
  font-family: var(--display);
  font-size: clamp(72px, 9vw, 132px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
}
.hero-index .h1 .ital { font-family: var(--serif); font-style: italic; font-weight: 400; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-index .h1 .small { font-size: 0.45em; vertical-align: middle; color: var(--ink-3); }
.hero-index .lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin-bottom: 18px; }
.hero-index .lede strong { color: var(--ink); font-weight: 600; }

/* Now section */
.now {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.now .now-list { display: grid; gap: 12px; }
.now .now-list .row { display: grid; grid-template-columns: 100px 1fr 80px; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.now .now-list .row .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.now .now-list .row .v { color: var(--ink); }
.now .now-list .row .v em { font-family: var(--serif); font-style: italic; }
.now .now-list .row .t { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: right; }

/* Skills grid */
.skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.skills .cell {
  background: var(--bg);
  padding: 22px 22px 22px 22px;
}
.skills .cell h4 {
  font-family: var(--display);
  font-size: 18px;
  margin: 0 0 10px;
  font-weight: 600;
}
.skills .cell ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.skills .cell li { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* ===== Index hero portrait ===== */
.hero-portrait {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.hero-portrait .frame {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(245,168,200,0.22), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(236,94,148,0.18), transparent 55%),
    linear-gradient(180deg, #1a1c20, #0d0e10);
}
.hero-portrait .grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.4;
}
.hero-portrait .silhouette {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 78%; height: 86%;
}
.hero-portrait .badge {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(13,14,16,0.7);
  border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.hero-portrait .corner {
  position: absolute; bottom: 14px; right: 14px;
  font-family: var(--mono); font-size: 10px;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background: rgba(13,14,16,0.7);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line);
}

/* ===== Highlighted/featured project ===== */
.proj-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 24px;
  text-decoration: none;
  color: inherit;
  background: var(--bg-2);
  transition: all 200ms;
}
.proj-feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.proj-feature .thumb-l { aspect-ratio: 4/3; background: var(--bg); }
.proj-feature .body { padding: 32px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.proj-feature .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.proj-feature .ttl { font-family: var(--display); font-size: 42px; font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }
.proj-feature .ttl .ital { font-family: var(--serif); font-style: italic; font-weight: 400; }
.proj-feature .desc { color: var(--ink-2); font-size: 15px; }

/* ===== Services / What I do ===== */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 24px 0 56px;
}
.services .svc {
  background: var(--bg);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.services .svc .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.services .svc h4 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 4px 0 6px;
}
.services .svc h4 .ital { font-family: var(--serif); font-style: italic; font-weight: 400; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.services .svc p { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0; }
.services .svc ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.services .svc li { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.services .svc li::before { content: '→ '; color: var(--accent); }

/* ===== Principles strip ===== */
.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 56px 0;
}
.principles .pr {
  border-top: 2px solid transparent;
  border-image: var(--accent-grad) 1;
  padding-top: 14px;
}
.principles .pr .n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.14em; }
.principles .pr h5 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 6px 0 8px;
}
.principles .pr p { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 0; }

/* Selected work header w/ filter chips placeholder */
.work-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.work-head .chips { display: flex; gap: 6px; }
.work-head .chips .c {
  font-family: var(--mono); font-size: 11px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--ink-2); cursor: pointer;
}
.work-head .chips .c { transition: color 140ms ease, border-color 140ms ease, background 140ms ease; user-select: none; }
.work-head .chips .c:hover { color: var(--ink); border-color: var(--accent); }
.work-head .chips .c.on { background: var(--accent-grad); color: #fff; border-color: transparent; }
.work-head .chips .c.on:hover { color: #fff; }

@media (max-width: 900px) {
  .services, .principles { grid-template-columns: 1fr; }
  .proj-feature { grid-template-columns: 1fr; }
  .page { padding: 32px 20px 60px; }
  .proj-card { grid-template-columns: 1fr; }
  .proj-card .thumb { aspect-ratio: 16/10; }
  .detail-hero, .two-up, .hero-index, .now { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .skills { grid-template-columns: 1fr; }
  .next-nav { grid-template-columns: 1fr; }
  .titlebar nav { gap: 14px; font-size: 11px; }
}

/* =========================================================
   IMAGERY ADDITIONS
   ========================================================= */

/* Bigger, more prominent hero portrait */
.hero-index { grid-template-columns: 1fr 440px; gap: 64px; }
.hero-portrait { aspect-ratio: 4/5.2; }

/* Visual gallery strip — between hero and services */
.gallery-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 14px;
  margin: 32px 0 64px;
}
.gallery-strip .tile {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-2);
  transition: transform 200ms, border-color 200ms;
}
.gallery-strip .tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.gallery-strip .tile.tall { aspect-ratio: 4/6; }
.gallery-strip .tile.wide { aspect-ratio: 5/4; }
.gallery-strip .tile .meta {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(13,14,16,0.78);
  border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.gallery-strip .tile .corner {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--mono); font-size: 9px;
  color: var(--ink-3);
}
.gallery-strip .tile svg { width: 100%; height: 100%; display: block; }

/* Process strip — full-bleed-ish band with 3 tall image cards + caption */
.process-band {
  display: grid;
  grid-template-columns: 280px 1fr 1fr 1fr;
  gap: 18px;
  margin: 56px 0;
  align-items: stretch;
}
.process-band .lead {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 6px 0;
}
.process-band .lead h3 {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 14px 0 10px;
}
.process-band .lead h3 .ital { font-family: var(--serif); font-style: italic; font-weight: 400; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.process-band .lead p { color: var(--ink-2); font-size: 14px; margin: 0; }
.process-band .tile {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}
.process-band .tile svg { width: 100%; height: 100%; display: block; }
.process-band .tile .cap {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px; color: var(--ink-2);
}
.process-band .tile .cap .num {
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 500;
}

/* Inline Polaroid-style cluster (between sections) */
.polaroid-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
  margin: 64px auto;
  max-width: 880px;
}
.polaroid-cluster .pol {
  background: #f4efe4;
  padding: 12px 12px 36px;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  position: relative;
  transition: transform 240ms;
}
.polaroid-cluster .pol:nth-child(1) { transform: rotate(-3deg); }
.polaroid-cluster .pol:nth-child(2) { transform: rotate(1.5deg) translateY(-12px); }
.polaroid-cluster .pol:nth-child(3) { transform: rotate(-1.2deg) translateY(8px); }
.polaroid-cluster .pol:hover { transform: rotate(0deg) translateY(-4px) scale(1.02); z-index: 2; }
.polaroid-cluster .pol .img-area {
  aspect-ratio: 1;
  background: #1a1c20;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.polaroid-cluster .pol .img-area svg { width: 100%; height: 100%; display: block; }
.polaroid-cluster .pol .cap {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  text-align: center;
  font-family: 'Caveat', 'Permanent Marker', var(--serif);
  font-style: italic;
  font-size: 14px;
  color: #2a2620;
}

/* Service tile — visual top + content bottom */
.services .svc { padding: 0; }
.services .svc .visual {
  height: 140px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
}
.services .svc .visual svg { width: 100%; height: 100%; display: block; }
.services .svc .content { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; }

/* Visual call-out / split image block */
.split-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 72px 0;
  align-items: center;
}
.split-feature .img {
  aspect-ratio: 5/4;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.split-feature .img svg { width: 100%; height: 100%; display: block; }
.split-feature .text h3 {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 12px 0 14px;
}
.split-feature .text h3 .ital { font-family: var(--serif); font-style: italic; font-weight: 400; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.split-feature .text p { color: var(--ink-2); font-size: 15px; line-height: 1.65; margin: 0 0 14px; max-width: 46ch; }

@media (max-width: 900px) {
  .gallery-strip { grid-template-columns: 1fr 1fr; }
  .process-band { grid-template-columns: 1fr; }
  .polaroid-cluster { grid-template-columns: 1fr; }
  .split-feature { grid-template-columns: 1fr; }
  .hero-index { grid-template-columns: 1fr; }
}

/* =========================================================
   PROJECT STAGE — Rescale-style framed preview
   ========================================================= */
.proj-stage {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(255,200,225,0.65) 0%, transparent 55%),
    radial-gradient(100% 70% at 20% 90%, rgba(196,72,120,0.55) 0%, transparent 55%),
    linear-gradient(135deg, #ec5e94 0%, #e487b1 50%, #c44878 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
}
.proj-stage.feat {
  padding: 9% 10% 0;
  border-radius: var(--r-lg);
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  aspect-ratio: 16 / 11;
}

/* Glassy 3D blob shapes — Rescale-style candy */
.gblobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.gblob {
  position: absolute;
  filter: drop-shadow(0 6px 20px rgba(120,30,70,0.25));
}
.gblob-1 {
  width: 32%;
  top: -8%;
  right: -6%;
  transform: rotate(15deg);
}
.gblob-2 {
  width: 22%;
  bottom: -6%;
  left: -4%;
  transform: rotate(-25deg);
}
.gblob-3 {
  width: 16%;
  top: 12%;
  left: 6%;
  transform: rotate(35deg);
  opacity: 0.8;
}
.gblob-4 {
  width: 13%;
  bottom: 18%;
  right: 8%;
  transform: rotate(-10deg);
  opacity: 0.85;
}
.proj-stage.feat .gblob-1 { width: 22%; top: -4%; right: -2%; }
.proj-stage.feat .gblob-2 { width: 16%; bottom: 8%; left: -2%; }

/* Vertical wordmark on the left edge */
.stage-wordmark {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 5.5cqw, 72px);
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.32);
  text-transform: lowercase;
  line-height: 1;
  z-index: 1;
  user-select: none;
  container-type: inline-size;
}
.proj-stage.feat .stage-wordmark {
  font-size: clamp(56px, 8cqw, 110px);
  color: rgba(255,255,255,0.40);
  left: 12px;
}

/* GG monogram corner */
.stage-mark {
  position: absolute;
  top: 12px; left: 16px;
  color: rgba(255,255,255,0.85);
  z-index: 3;
  display: flex; align-items: center; gap: 6px;
}
.proj-stage.feat .stage-mark {
  top: 18px; left: 22px;
}

/* Numbered index pill top-right */
.stage-num {
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  z-index: 3;
  display: flex; gap: 4px; align-items: baseline;
  padding: 4px 10px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.stage-num .sep { color: rgba(255,255,255,0.45); }
.stage-num .t { color: rgba(255,255,255,0.55); }
.proj-stage.feat .stage-num { top: 20px; right: 22px; font-size: 11px; }

/* The framed screen */
.stage-screen {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: 720px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  filter: drop-shadow(0 30px 50px rgba(60,10,40,0.45)) drop-shadow(0 8px 16px rgba(60,10,40,0.25));
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.proj-stage.feat .stage-screen {
  align-self: center;
  width: 80%;
  margin: 8px 0 0;
}
.stage-screen.stage-tilt {
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) rotateZ(-0.5deg);
}
.proj-stage:hover .stage-screen.stage-tilt {
  transform: perspective(1400px) rotateY(-5deg) rotateX(1.5deg) rotateZ(0deg);
}

/* mac chrome */
.mac-chrome {
  border-radius: 10px;
  overflow: hidden;
  background: #0d0e10;
  border: 1px solid rgba(255,255,255,0.10);
  height: 100%;
  display: flex; flex-direction: column;
}
.mac-bar {
  height: 24px;
  background: linear-gradient(180deg, #2a2c33 0%, #22252b 100%);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  flex-shrink: 0;
}
.mac-dots { display: flex; gap: 6px; }
.mac-dots .d { width: 9px; height: 9px; border-radius: 50%; }
.mac-dots .d.r,
.mac-dots .d.y,
.mac-dots .d.g { background: #2a2a2a; }
.mac-title {
  font-family: var(--mono); font-size: 10px;
  color: rgba(255,255,255,0.45);
  flex: 1; text-align: center;
  padding: 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mac-spacer { width: 50px; }
.mac-body { flex: 1; min-height: 0; display: flex; }
.mac-body > svg { width: 100%; height: 100%; display: block; }

/* windows chrome */
.win-chrome {
  border-radius: 6px;
  overflow: hidden;
  background: #1f1f24;
  border: 1px solid rgba(255,255,255,0.10);
  height: 100%;
  display: flex; flex-direction: column;
}
.win-bar {
  height: 24px;
  background: #2a2a30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  font-family: var(--body);
  font-size: 10px;
  color: var(--ink-3);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,0.4);
}
.win-controls { display: flex; gap: 8px; font-size: 11px; color: var(--ink-3); }
.win-body { flex: 1; min-height: 0; display: flex; }
.win-body > svg { width: 100%; height: 100%; display: block; }

/* Caption strip on small cards */
.stage-caption {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.stage-caption .cap-l { font-weight: 500; }
.stage-caption .cap-r { color: rgba(255,255,255,0.65); }

/* Featured: full-bleed title overlay block sits below the screen */
.stage-feat-overlay {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 28px 32px 28px;
  color: #fff;
  display: flex; flex-direction: column; gap: 10px;
}
.stage-feat-overlay .ft-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.stage-feat-overlay .ft-title {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(60,10,40,0.20);
}
.stage-feat-overlay .ft-title .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: #fff5fa;
}
.stage-feat-overlay .ft-desc {
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  line-height: 1.55;
  max-width: 60ch;
  text-shadow: 0 1px 2px rgba(60,10,40,0.18);
}
.stage-feat-overlay .ft-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.stage-feat-overlay .ft-foot .cta { color: #fff; font-weight: 500; }

/* Card containers — give the stage a known aspect ratio */
.proj-card .thumb { background: transparent; border: none; padding: 0; }
.proj-feature .thumb-l { background: transparent; }

/* Featured grid — two big full-bleed cards stacked */
.featured-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 0 56px;
}
.proj-feature-bleed {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 240ms ease, box-shadow 240ms ease;
  box-shadow: 0 18px 40px -20px rgba(60,10,40,0.45);
}
.proj-feature-bleed:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -22px rgba(60,10,40,0.55);
}
@media (max-width: 760px) {
  .stage-feat-overlay .ft-title { font-size: 32px; }
  .stage-feat-overlay { padding: 20px 22px; }
  .proj-stage.feat { aspect-ratio: auto; padding: 14% 8% 0; }
}

/* Light-theme adjustments */
[data-theme="light"] .mac-chrome,
[data-theme="light"] .win-chrome {
  border-color: rgba(0,0,0,0.10);
}

/* ============================================================
   Contact form + FAQ (contact.html)
   ============================================================ */
.contact-form {
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin-top: 18px;
}
.contact-form .cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form label {
  display: grid;
  gap: 6px;
}
.contact-form label > span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 160ms ease, background 160ms ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--ink-3);
  opacity: 0.7;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-3, var(--bg-2));
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--body);
}
@media (max-width: 640px) {
  .contact-form .cf-row { grid-template-columns: 1fr; }
}

.faq {
  display: grid;
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 160ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  min-width: 24px;
}
.faq-item summary .caret {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink-3);
  transition: transform 220ms ease, color 160ms ease;
}
.faq-item[open] summary .caret {
  transform: rotate(45deg);
  color: var(--accent);
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:hover .caret { color: var(--accent); }
.faq-item p {
  margin: 0 0 18px 38px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 640px;
}

/* ============================================================
   Hero refinements (eyebrow, muted/grey + accent split, glow, status strip)
   ============================================================ */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.hero-eyebrow span:first-child { color: var(--ink-2); }

.hero-h1 .muted {
  color: var(--ink-3);
  opacity: 0.55;
}

.avail-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.avail-strip .line {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.avail-strip .right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.avail-strip .right .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.18), 0 0 12px rgba(74,222,128,0.45);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,0.18), 0 0 12px rgba(74,222,128,0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(74,222,128,0.10), 0 0 18px rgba(74,222,128,0.65); }
}

/* Radial glow behind portrait */
.hero-portrait .glow {
  position: absolute;
  inset: -22% -18% auto auto;
  width: 110%;
  height: 110%;
  pointer-events: none;
  background:
    radial-gradient(45% 45% at 65% 35%, rgba(236,94,148,0.45) 0%, rgba(236,94,148,0.12) 45%, transparent 75%),
    radial-gradient(35% 35% at 30% 70%, rgba(245,168,200,0.30) 0%, transparent 70%);
  filter: blur(8px);
  z-index: 0;
}
.hero-portrait .frame,
.hero-portrait .grid-bg,
.hero-portrait .silhouette,
.hero-portrait .badge,
.hero-portrait .corner { position: relative; z-index: 1; }

/* ============================================================
   Stats band
   ============================================================ */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 24px 0 0;
  padding: 28px 0 8px;
  border-top: 1px solid var(--line);
}
.stat-cell {
  padding: 6px 24px 6px 0;
  border-right: 1px dashed var(--line);
}
.stat-cell:last-child { border-right: 0; }
.stat-cell .n {
  font-family: var(--display);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-cell .n .suf {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 2px;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-cell .l {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .stats-band { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .stat-cell:nth-child(2) { border-right: 0; }
}

/* ============================================================
   Centered display heading (Latest Projects / Let's Work Together)
   ============================================================ */
.centered-heading {
  text-align: center;
  padding: 56px 0 24px;
}
.centered-heading .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.display-xl {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.display-xl .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.centered-heading .sub {
  margin: 18px auto 0;
  max-width: 540px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials { padding: 32px 0 24px; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.review-card {
  padding: 22px 22px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.review-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.review-card .stars {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--accent);
}
.review-card .stars .dim { color: var(--ink-3); opacity: 0.5; }
.review-card .quote {
  margin: 0;
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  flex: 1;
}
.review-card .who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.review-card .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.review-card .name {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.review-card .role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Let's Work Together CTA card
   ============================================================ */
.lets-work { padding: 56px 0 28px; }
.lw-card {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(155deg, #1a1218 0%, #0d0e10 60%);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.lw-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 90%;
  background: radial-gradient(50% 60% at 50% 40%, rgba(236,94,148,0.32) 0%, rgba(236,94,148,0.10) 35%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.lw-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 76px 32px 80px;
}
.lw-inner .pill { margin: 0 auto 22px; display: inline-flex; }
.lw-inner .display-xl { margin: 0 auto; }
.lw-inner .sub {
  margin: 18px auto 0;
  max-width: 480px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .lw-inner { padding: 56px 22px 60px; }
}

/* ============================================================
   Experience timeline (about page)
   ============================================================ */
.exp-list {
  display: grid;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.exp-row {
  display: grid;
  grid-template-columns: 1fr 220px 160px;
  gap: 24px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background 160ms ease;
}
.exp-row:hover { background: rgba(236,94,148,0.04); }
.exp-role { display: flex; flex-direction: column; gap: 6px; }
.exp-role .title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.exp-role .note {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 540px;
}
.exp-co {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink-2);
  font-weight: 500;
}
.exp-when {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-align: right;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .exp-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .exp-when { text-align: left; }
}

/* ============================================================
   Minimal services (about page) — no per-card imagery
   ============================================================ */
.services-min {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.svc-min {
  padding: 28px 24px 28px 0;
  border-right: 1px dashed var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.svc-min:last-child { border-right: 0; }
.svc-min .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.svc-min h4 {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.svc-min h4 .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.svc-min p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.svc-min ul {
  margin: auto 0 0;
  padding: 12px 0 0;
  list-style: none;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.svc-min ul li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .services-min { grid-template-columns: 1fr; }
  .svc-min { border-right: 0; padding: 24px 0; }
}

/* ============================================================
   Minimal text-first hero (Johnny Quattro / Portfolite vibe)
   ============================================================ */
.hero-min {
  max-width: 1080px;
  margin: 0 auto;
  padding: 84px 0 36px;
  position: relative;
}
.hero-min .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 28px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
}
.hero-min .hero-eyebrow .sep { opacity: 0.4; }
.hero-min .hero-eyebrow span:nth-child(2) { color: var(--ink-2); }
.hero-min .hero-eyebrow .dot-mono {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(236,94,148,0.18);
}

.hero-display {
  font-family: var(--display);
  font-size: clamp(58px, 8.6vw, 124px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
  max-width: 18ch;
}
.hero-display .muted { color: var(--ink-3); opacity: 0.55; font-weight: 600; }
.hero-display .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  margin: 30px 0 0;
  max-width: 580px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

.hero-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.hero-min .avail-strip { margin-top: 56px; }

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease;
}
.scroll-cue:hover { color: var(--ink); }
.scroll-cue .arr {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 12px;
  color: var(--accent);
  animation: scrollBob 2.2s ease-in-out infinite;
}
@keyframes scrollBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Tighten the page top padding now that the nav has its own padding */
.page { padding-top: 24px; }

@media (max-width: 720px) {
  .hero-min { padding: 56px 0 24px; }
  .hero-min .avail-strip { margin-top: 36px; }
  .hero-display { font-size: clamp(46px, 11vw, 76px); }
}

/* ============================================================
   Single-typeface system: Fraunces (variable serif)
   Display uses high opsz; metadata uses small opsz tracked uppercase.
   ============================================================ */

/* Tiny uppercase metadata — Fraunces at small opsz, tracked, uppercase */
.mono,
[style*="var(--mono)"],
.section-label,
.eyebrow,
.kicker,
.ft-h,
.exp-when,
.svc-min .num,
.svc-min ul li,
.review-card .role,
.faq-item summary .num,
.stat-cell .l,
.avail-strip,
.scroll-cue,
.contact-form label > span,
.work-head .chips .c {
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: 'opsz' 9, 'SOFT' 100, 'wght' 500 !important;
  font-feature-settings: 'tnum' 1;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

/* Display headlines — Fraunces big opsz, low SOFT (sharper letterforms) */
.hero-display,
.display-xl,
.h1,
h1, h2, h3, h4, h5 {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 500;
  letter-spacing: -0.02em;
  text-transform: none;
}
.hero-display { font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 500; letter-spacing: -0.025em; }
.display-xl   { font-variation-settings: 'opsz' 144, 'SOFT' 40, 'wght' 500; letter-spacing: -0.022em; }

/* Italic accent moments — high SOFT for that flowy Fraunces italic */
.hero-display .ital,
.display-xl .ital,
.ital,
em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 400;
  letter-spacing: -0.005em;
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}
.hero-display .muted,
.display-xl .muted {
  color: var(--ink-3) !important;
  opacity: 0.45;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400;
}

/* Plain eyebrow — quiet Fraunces tracked uppercase, no pill */
.hero-eyebrow.plain {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 40px;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 9, 'SOFT' 100, 'wght' 500;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-radius: 0;
}
.hero-eyebrow.plain .sep { opacity: 0.45; }
.hero-eyebrow.plain span { color: var(--ink-3); }

/* Site-nav brand */
.site-nav .brand {
  font-size: 17px;
  font-variation-settings: 'opsz' 24, 'SOFT' 60, 'wght' 500;
  letter-spacing: -0.01em;
  text-transform: none !important;
}
.site-nav .links a,
.site-nav .nav-cta {
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: 'opsz' 14, 'SOFT' 50, 'wght' 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Tighter footer baseline */
.site-footer .ft-baseline {
  max-width: 1200px;
  margin: 18px auto 0;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Section labels — small caps tracked Fraunces */
.section-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-variation-settings: 'opsz' 9, 'SOFT' 100, 'wght' 500;
}

/* Buttons in Fraunces, no caps so they read like editorial CTAs */
.btn {
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: 'opsz' 14, 'SOFT' 50, 'wght' 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Hero sub */
.hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  font-variation-settings: 'opsz' 18, 'SOFT' 60, 'wght' 400;
}
.hero-sub strong { font-weight: 600; color: var(--ink); }

/* ============================================================
   Page-load stagger — quiet editorial fade-up
   ============================================================ */
@keyframes lift-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
main > * {
  animation: lift-fade 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
main > *:nth-child(1) { animation-delay: 60ms; }
main > *:nth-child(2) { animation-delay: 180ms; }
main > *:nth-child(3) { animation-delay: 280ms; }
main > *:nth-child(4) { animation-delay: 360ms; }
main > *:nth-child(5) { animation-delay: 440ms; }
main > *:nth-child(n+6) { animation-delay: 500ms; }
@media (prefers-reduced-motion: reduce) {
  main > * { animation: none !important; }
}

/* ============================================================
   Monogram tile — replaces placeholder portrait on About
   ============================================================ */
.mono-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(140deg, #1f1812 0%, #14110e 65%);
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: 28px;
  isolation: isolate;
}
.mono-tile-glow {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(226,101,102,0.40) 0%, rgba(226,101,102,0.10) 50%, transparent 75%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.mono-tile-mark {
  position: absolute;
  top: 18%;
  left: 8%;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(180px, 26vw, 360px);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 400;
  line-height: 0.85;
  color: var(--ink);
  z-index: 1;
}
.mono-tile-meta {
  position: relative;
  z-index: 1;
  margin-left: auto;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 9, 'SOFT' 100, 'wght' 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   Buttons under the new warm theme
   ============================================================ */
.btn.accent {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
}
.btn.accent:hover {
  background: var(--accent);
  border-color: var(--accent);
  filter: brightness(1.06);
  box-shadow: 0 0 24px rgba(236, 72, 153, 0.45);
}
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn.ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Pull quotes & inline emphasis — warm italic */
.pull, .quote, blockquote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'wght' 400;
}

/* Section labels — warm, smaller, less corporate */
.section-label .num { color: var(--accent); }
.section-label { color: var(--ink-3); }
.section-label .line { background: var(--line); height: 1px; flex: 1; }

/* Soften nav blur to fit warm theme */
.site-nav { background: rgba(20, 17, 14, 0.78); }
[data-theme="light"] .site-nav { background: rgba(244, 237, 224, 0.82); }

/* Footer warmer */
.site-footer { background: var(--bg-2); }

/* ============================================================
   No italics — global override
   Accent words remain colored; emphasis stays accent + slightly heavier
   ============================================================ */
em,
i,
.ital,
.serif,
.hero-display .ital,
.display-xl .ital,
.h1 .ital,
.proj-card .title .ital,
.proj-feature .ttl .ital,
.services .svc h4 .ital,
.process-band .lead h3 .ital,
.split-feature .text h3 .ital,
.section h2 .ital,
.detail-hero h1 .ital,
.stats .stat .n .ital,
.hero-index .h1 .ital,
.svc-min h4 .ital,
.now .now-list .row .v em,
.stage-feat-overlay .ft-title .ital,
.review-card .quote,
.pull,
blockquote,
.faq-item p em,
.mono-tile-mark {
  font-style: normal !important;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 500 !important;
}

/* Accent words — colored, slightly heavier weight, no italic */
.ital,
.hero-display .ital,
.display-xl .ital,
.h1 .ital,
.proj-card .title .ital,
.proj-feature .ttl .ital,
.services .svc h4 .ital,
.process-band .lead h3 .ital,
.split-feature .text h3 .ital,
.section h2 .ital,
.detail-hero h1 .ital,
.stats .stat .n .ital,
.hero-index .h1 .ital,
.svc-min h4 .ital,
.stage-feat-overlay .ft-title .ital {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 600 !important;
}

/* Inline emphasis (em) in body copy — quiet, just slightly accent */
em,
.now .now-list .row .v em {
  color: var(--ink) !important;
  font-variation-settings: 'opsz' 14, 'SOFT' 50, 'wght' 600 !important;
}

/* Brand wordmarks — italic em was used decoratively; make plain */
.site-nav .brand .name em,
.site-footer .ft-brand em {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
  font-variation-settings: 'opsz' 24, 'SOFT' 40, 'wght' 600 !important;
}

/* Pull quotes / blockquotes — keep editorial weight, no italic */
.pull, blockquote, .quote, .review-card .quote {
  font-variation-settings: 'opsz' 72, 'SOFT' 50, 'wght' 400 !important;
}

/* Monogram tile mark — bold sans-look, not italic */
.mono-tile-mark {
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 500 !important;
}

/* ============================================================
   CONSOLE EDITORIAL — final design system override
   Modern + techy. Bento. Mono. Dot grid. Orange accent.
   This block supersedes earlier rules; it's loaded last.
   ============================================================ */

:root {
  /* Pure dark canvas */
  --bg: #0a0a0a;
  --bg-2: #0e0e0e;
  --bg-3: #141414;
  --bg-card: #111111;
  --line: #1f1f1f;
  --line-2: #2a2a2a;
  --line-3: #3a3a3a;
  --ink: #fafaf9;
  --ink-2: #a3a3a3;
  --ink-3: #737373;
  --ink-4: #525252;

  /* Electric orange accent */
  --accent: #ec4899;
  --accent-soft: rgba(236, 72, 153, 0.18);
  --accent-deep: #db2777;
  --accent-glow: rgba(236, 72, 153, 0.35);
  --accent-grad: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(236, 72, 153,0.12) 0%, rgba(219, 39, 119,0.06) 100%);

  /* Type — Geist + Geist Mono */
  --display: 'Geist', system-ui, sans-serif;
  --body:    'Geist', system-ui, sans-serif;
  --serif:   'Geist', system-ui, sans-serif;
  --mono:    'Geist Mono', ui-monospace, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  font-feature-settings: 'ss01' 1, 'cv11' 1;
  font-variation-settings: normal;
}

/* Replace warm-grain texture with subtle dot grid */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 1;
  mix-blend-mode: normal;
}

/* Reset all the leftover italic rules — Geist has no italic axis */
em, i, .ital, .serif,
.hero-display .ital, .display-xl .ital, .h1 .ital,
.proj-card .title .ital, .proj-feature .ttl .ital,
.services .svc h4 .ital, .process-band .lead h3 .ital,
.split-feature .text h3 .ital, .section h2 .ital, .detail-hero h1 .ital,
.stats .stat .n .ital, .hero-index .h1 .ital, .svc-min h4 .ital,
.now .now-list .row .v em, .stage-feat-overlay .ft-title .ital,
.review-card .quote, .pull, blockquote, .faq-item p em,
.mono-tile-mark, h1, h2, h3, h4, h5,
.hero-display, .display-xl, .h1, .hero-eyebrow.plain,
.section-label, .eyebrow, .kicker, .ft-h, .exp-when,
.svc-min .num, .svc-min ul li, .review-card .role,
.faq-item summary .num, .stat-cell .l, .avail-strip,
.scroll-cue, .contact-form label > span, .work-head .chips .c,
.btn, .site-nav .brand, .site-nav .brand .name em,
.site-nav .links a, .site-nav .nav-cta, .site-footer .ft-brand em,
.site-footer .ft-baseline, .pull, blockquote, .quote {
  font-family: var(--body);
  font-style: normal !important;
  font-variation-settings: normal !important;
  -webkit-text-fill-color: currentColor;
  background: none;
}

/* Display text — bold Geist, no special features */
.hero-display, .display-xl, h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.hero-display { font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; }
.display-xl { font-weight: 600; letter-spacing: -0.03em; }

/* Accent words — electric orange, semi-bold, no italic */
.ital, .hero-display .ital, .display-xl .ital, .h1 .ital,
.svc-min h4 .ital, .services .svc h4 .ital,
.proj-card .title .ital, .proj-feature .ttl .ital,
.section h2 .ital, .detail-hero h1 .ital,
.now .now-list .row .v em, em, .site-nav .brand .name em,
.site-footer .ft-brand em, b strong {
  color: var(--accent) !important;
  font-weight: 600;
  font-style: normal !important;
}
.muted, .hero-display .muted, .display-xl .muted {
  color: var(--ink-3) !important;
  opacity: 1;
  font-weight: 600;
}

/* Mono labels — Geist Mono now, real monospace */
.mono, [style*="var(--mono)"],
.section-label, .eyebrow, .kicker, .ft-h, .exp-when,
.svc-min .num, .svc-min ul li,
.review-card .role, .faq-item summary .num,
.stat-cell .l, .avail-strip, .scroll-cue,
.contact-form label > span, .work-head .chips .c,
.site-footer .ft-baseline,
.hero-eyebrow.plain {
  font-family: var(--mono) !important;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ===== NAV ===== */
.site-nav {
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 18px 32px;
}
.site-nav .brand {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--ink);
  text-transform: none !important;
}
.site-nav .brand .name em {
  font-weight: 500 !important;
  color: var(--accent) !important;
}
.site-nav .links {
  gap: 4px;
}
.site-nav .links a {
  font-family: var(--mono) !important;
  font-size: 13px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
}
.site-nav .links a:hover { background: var(--bg-3); color: var(--ink); }
.site-nav .links a.on {
  background: var(--bg-3);
  color: var(--accent);
}
.site-nav .links a.on::after { display: none; }

/* ===== BUTTONS ===== */
.btn {
  font-family: var(--mono) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 200ms ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn.accent {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn.accent:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 28px 0 rgba(236, 72, 153, 0.55), 0 0 0 4px rgba(236, 72, 153, 0.15);
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.btn.ghost {
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn.ghost:hover {
  background: var(--bg-card);
  border-color: var(--line-3);
}

/* ===== PAGE / LAYOUT ===== */
.page {
  max-width: 1200px;
  padding: 32px 32px 80px;
}

/* ===== BENTO HERO ===== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 12px;
  margin-top: 24px;
}
.bento-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease;
}
.bento-card:hover { border-color: var(--line-3); }

.bento-card .b-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.bento-card .b-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* Bento spans */
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-2 { grid-column: span 2; }
.span-6 { grid-column: span 6; }
.row-2  { grid-row: span 2; }

/* Hero name card — biggest */
.bento-card.identity {
  grid-column: span 4;
  grid-row: span 2;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(236, 72, 153,0.10) 0%, transparent 60%),
    var(--bg-card);
}
.bento-card.identity h1 {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
  font-weight: 600;
}
.bento-card.identity h1 .accent { color: var(--accent); }
.bento-card.identity .role {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bento-card.identity .role .k { color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Status card */
.bento-card.status {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bento-card.status .big {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bento-card.status .big .accent { color: var(--accent); }
.bento-card.status .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Location card with mini world-map dot */
.bento-card.location {
  grid-column: span 2;
  background:
    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card) 60%, rgba(236, 72, 153,0.06) 100%),
    var(--bg-card);
}
.bento-card.location .city {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.bento-card.location .gmt {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Lede card */
.bento-card.lede {
  grid-column: span 6;
  padding: 28px;
}
.bento-card.lede p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 780px;
}
.bento-card.lede p strong { color: var(--ink); font-weight: 500; }
.bento-card.lede p .accent { color: var(--accent); font-weight: 500; }

/* Stack chips card */
.bento-card.stack {
  grid-column: span 6;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chip {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: var(--bg-2);
  transition: all 180ms ease;
}
.chip::before { content: '[ '; color: var(--ink-3); }
.chip::after  { content: ' ]'; color: var(--ink-3); }
.chip:hover { color: var(--accent); border-color: var(--accent); }

/* CTAs row in bento */
.bento-card .ctas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===== Coordinate margin markers ===== */
.coord {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.coord::before {
  content: '';
  width: 12px;
  height: 1px;
  background: var(--ink-4);
}

/* ===== SECTION HEAD ===== */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 80px 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
}
.section-head h2 .accent { color: var(--accent); }
.section-head .sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== WORK CARDS — modernize the existing stage-card project list ===== */
.proj-card,
.proj-feature-bleed {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 200ms ease, transform 200ms ease;
}
.proj-card:hover,
.proj-feature-bleed:hover {
  border-color: var(--line-3);
  transform: translateY(-2px);
}
.proj-card .body { padding: 20px 22px 22px; }
.proj-card .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent) !important;
}
.proj-card .title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 8px 0 6px;
}
.proj-card .title .ital { color: var(--accent) !important; }
.proj-card .desc {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.proj-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.proj-card .tag {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  background: var(--bg-2);
}

/* ===== FOOTER ===== */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); }
.site-footer .ft-brand {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none !important;
}
.site-footer .ft-brand em { color: var(--accent) !important; font-weight: 500; }
.site-footer .ft-h {
  font-family: var(--mono) !important;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.site-footer .ft-col a {
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-2);
}
.site-footer .ft-col a:hover { color: var(--accent); }
.site-footer .ft-baseline {
  font-family: var(--mono) !important;
  font-size: 11px;
  color: var(--ink-4);
  text-transform: none !important;
  letter-spacing: 0.02em;
}

/* ===== Responsive bento ===== */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.identity { grid-column: span 2; grid-row: auto; }
  .bento-card.status, .bento-card.location { grid-column: span 1; }
  .bento-card.lede, .bento-card.stack { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; gap: 10px; }
  .bento-card { grid-column: span 1 !important; }
  .page { padding: 20px 18px 60px; }
  .section-head { flex-direction: column; gap: 8px; padding-top: 56px; }
}

/* ============================================================
   LIVE TERMINAL CARD — hero side animation
   ============================================================ */
.bento-card.terminal {
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  background:
    linear-gradient(180deg, #0c0c0c 0%, #0a0a0a 100%);
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  position: relative;
}
.bento-card.terminal::before {
  /* faint scanline overlay */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0.012) 3px,
      rgba(255,255,255,0) 4px
    );
  z-index: 1;
}

.term-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #131313;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.term-chrome .td {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
  background: #2a2a2a;
}
.term-chrome .td.r,
.term-chrome .td.y,
.term-chrome .td.g {
  background: #3a3a3a;
  border: 1px solid #4a4a4a;
}
.term-chrome .td.r { background: #4a3838; border-color: #5a4848; }
.term-chrome .td.y { background: #4a4438; border-color: #5a5448; }
.term-chrome .td.g { background: #384a3c; border-color: #485a4c; }
.term-chrome .ttitle {
  margin-left: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.term-chrome .tbadge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 2px 8px 2px 7px;
  border: 1px solid rgba(236, 72, 153, 0.4);
  border-radius: 3px;
  background: rgba(236, 72, 153, 0.08);
  position: relative;
}
.term-chrome .tbadge::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
  animation: pulseRec 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulseRec {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

.term-body {
  flex: 1;
  min-height: 0;
  padding: 18px 18px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  position: relative;
  z-index: 2;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.term-body::-webkit-scrollbar { width: 8px; }
.term-body::-webkit-scrollbar-track { background: transparent; }
.term-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 4px;
}
.term-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); }

.tline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  animation: termFadeIn 240ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes termFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tline.cmd .prompt {
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}
.tline.cmd .cmdtxt { color: var(--ink); }
.tline.out  { color: var(--ink-2); }
.tline.note { color: var(--ink-2); padding-left: 0; }
.tline.ok {
  color: var(--ink-2);
}
.tline.ok .bullet {
  color: var(--accent);
  font-weight: 600;
  width: 12px;
  flex-shrink: 0;
}
.tline.space { height: 6px; }

.cursor-line .prompt { color: var(--accent); }
.cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 2px;
  animation: cursorBlink 1.05s steps(2, end) infinite;
}
@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ============================================================
   IDENTITY CARD — animated drifting glow
   ============================================================ */
.bento-card.identity {
  position: relative;
  isolation: isolate;
}
.bento-card.identity .id-glow {
  position: absolute;
  inset: -20% -20% auto auto;
  width: 70%;
  height: 70%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(45% 45% at 60% 40%, rgba(236, 72, 153,0.32) 0%, rgba(236, 72, 153,0.10) 40%, transparent 70%),
    radial-gradient(35% 35% at 30% 70%, rgba(236, 72, 153,0.18) 0%, transparent 70%);
  filter: blur(20px);
  animation: idDrift 18s ease-in-out infinite alternate;
}
@keyframes idDrift {
  0%   { transform: translate(0%, 0%) scale(1); opacity: 0.9; }
  50%  { transform: translate(-12%, 8%) scale(1.15); opacity: 1; }
  100% { transform: translate(8%, -6%) scale(0.92); opacity: 0.85; }
}
.bento-card.identity > div:not(.id-glow) { position: relative; z-index: 1; }

/* Slight glow pulse on the b-dot */
.b-dot { animation: dotPulse 2.4s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 8px var(--accent-glow); }
  50%      { box-shadow: 0 0 14px var(--accent-glow), 0 0 24px rgba(236, 72, 153,0.18); }
}

/* Mobile: terminal becomes full-width below identity */
@media (max-width: 900px) {
  .bento-card.terminal { grid-column: span 2; grid-row: auto; min-height: 320px; }
}
@media (max-width: 560px) {
  .bento-card.terminal { grid-column: span 1; min-height: 280px; }
  .term-body { padding: 14px; font-size: 11.5px; }
}

/* ============================================================
   IMMERSIVE HERO — fill viewport, balanced bento rows
   ============================================================ */

/* Container takes nearly full viewport (minus nav) */
.bento-hero {
  min-height: calc(100vh - 65px); /* nav ~65px */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 32px 28px;
  max-width: 1320px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* The page wrapper around the hero shouldn't add extra padding */
.page:has(> .bento-hero) {
  padding: 0;
  max-width: none;
}

/* Bento grid stretches to fill the remaining height */
.bento-hero .bento {
  flex: 1;
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr) minmax(140px, auto) minmax(120px, auto);
  gap: 12px;
  min-height: 0;
}

/* Cards inside immersive hero — keep content visible, no overflow chrome */
.bento-hero .bento-card {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Identity gets meatier headline now that it has the room */
.bento-hero .bento-card.identity {
  padding: 32px 36px;
}
.bento-hero .bento-card.identity h1 {
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

/* Terminal stretches the full right column */
.bento-hero .bento-card.terminal {
  grid-column: span 2;
  grid-row: 1 / span 2;
}
.bento-hero .term-body {
  flex: 1;
  overflow: hidden;
}

/* Lede + stack as bottom rows */
.bento-hero .bento-card.lede   { grid-column: span 4; grid-row: 3; }
.bento-hero .bento-card.stack  { grid-column: span 6; grid-row: 4; padding: 18px 22px; }
.bento-hero .bento-card.stack .chip-row { margin-top: 6px; }
.bento-hero .bento-card.stack .ctas { margin-top: auto !important; padding-top: 14px; }

/* New: a small status card next to the lede (replaces wasted space) */
.bento-hero .bento-card.now-mini {
  grid-column: span 2;
  grid-row: 3;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(160deg, var(--bg-card) 0%, rgba(236, 72, 153,0.06) 100%);
}
.bento-hero .bento-card.now-mini .now-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}
.bento-hero .bento-card.now-mini .now-row:last-child { border-bottom: 0; }
.bento-hero .bento-card.now-mini .now-row .k {
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}
.bento-hero .bento-card.now-mini .now-row .v { color: var(--ink); }
.bento-hero .bento-card.now-mini .now-row .v.accent { color: var(--accent); }

/* Scroll cue at hero bottom */
.bento-hero .scroll-cue-floor {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
}
.bento-hero .scroll-cue-floor .arr {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink-4);
  border-radius: 50%;
  text-align: center;
  line-height: 12px;
  font-size: 9px;
  animation: scrollNudge 2.4s ease-in-out infinite;
}
@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}

/* Coord marker tighter */
.bento-hero .coord {
  margin-bottom: 4px;
  font-size: 10.5px;
}

/* Responsive — collapse rows gracefully */
@media (max-width: 1100px) {
  .bento-hero {
    min-height: auto;
    padding-bottom: 40px;
  }
  .bento-hero .bento {
    grid-template-rows: auto;
  }
  .bento-hero .bento-card.terminal { min-height: 360px; grid-row: auto; }
}
@media (max-width: 900px) {
  .bento-hero .bento-card.now-mini { grid-column: span 2; grid-row: auto; }
  .bento-hero .bento-card.lede     { grid-column: span 2; grid-row: auto; }
  .bento-hero .bento-card.stack    { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
  .bento-hero { padding: 16px 18px 32px; }
  .bento-hero .bento-card.identity { padding: 24px; }
  .bento-hero .bento-card.now-mini,
  .bento-hero .bento-card.lede,
  .bento-hero .bento-card.stack { grid-column: span 1; }
}

/* ============================================================
   HERO CANVAS — single immersive moment, not a grid of cards
   Two-column flow: typography (left) + animation (right)
   ============================================================ */

.hero-canvas {
  position: relative;
  /* Hero leaves enough room above the fold for the verb-bridge to peek in. */
  min-height: calc(100svh - 160px);
  min-height: calc(100dvh - 160px);
  display: flex;
  flex-direction: column;
  padding: 0 32px;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
}

.page:has(> .hero-canvas) {
  padding: 0;
  max-width: none;
}

/* Big drifting glow behind the typography — fully contained, smooth fade */
.hero-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 65%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(45% 60% at 32% 45%, rgba(236, 72, 153,0.30) 0%, rgba(236, 72, 153,0.08) 38%, transparent 68%),
    radial-gradient(35% 35% at 56% 70%, rgba(236, 72, 153,0.16) 0%, transparent 70%);
  filter: blur(40px);
  animation: heroGlowDrift 24s ease-in-out infinite alternate;
}
@keyframes heroGlowDrift {
  0%   { transform: translate(0, 0)     scale(1);    opacity: 0.95; }
  50%  { transform: translate(3%, -2%)  scale(1.08); opacity: 1; }
  100% { transform: translate(-2%, 4%)  scale(0.95); opacity: 0.85; }
}

/* Faint vertical / horizontal grid for depth */
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, #000 60%, transparent 100%);
}

/* Corner mono labels — give the canvas dimension */
.corner-label {
  position: absolute;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  z-index: 2;
  pointer-events: none;
  text-transform: lowercase;
}
.corner-label.tl { top: 14px; left: 32px; }
.corner-label.tr { top: 14px; right: 32px; color: var(--ink-3); }
.corner-label.br { bottom: 38px; right: 32px; color: var(--accent); opacity: 0.7; }

/* Layout — 2 cols × 2 rows. Row 1: top content. Row 2: floor + scroll-cue baseline. */
.hero-grid-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 72px;
  row-gap: 28px;
  align-items: start;
  position: relative;
  z-index: 1;
  padding: 48px 0 96px;
  min-height: 0;
}

/* LEFT — top content stack */
.hero-left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: left;
  max-width: 640px;
  min-height: 0;
  justify-content: flex-start;
}

/* Floor sits in row 2, col 1 — naturally below stack chips */
.hero-grid-layout > .hero-floor {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin-top: 0;
}

.hero-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(20,20,20,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  width: fit-content;
}
.hero-eyebrow-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: dotPulse 2.4s ease-in-out infinite;
}
.hero-eyebrow-pill .sep { color: var(--ink-4); }

.hero-title {
  font-family: var(--display);
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
}
.hero-title .muted { color: var(--ink-3); opacity: 1; font-weight: 600; }
.hero-title .accent { color: var(--accent); font-weight: 600; }

.hero-lede {
  font-family: var(--body);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 580px;
}
.hero-lede strong { color: var(--ink); font-weight: 500; }
.hero-lede .accent { color: var(--accent); font-weight: 500; }

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.hero-floor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.hero-floor > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.hero-floor > span:first-child .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.16), 0 0 10px rgba(74,222,128,0.5);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,0.16), 0 0 10px rgba(74,222,128,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(74,222,128,0.08), 0 0 18px rgba(74,222,128,0.7); }
}
.hero-floor .bar {
  width: 1px;
  height: 12px;
  background: var(--line-2);
}

/* RIGHT — terminal column (top row, col 2) */
.hero-right {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 0;
}
.hero-right .bento-card.terminal {
  flex: 0 0 auto;
  min-height: 0;
  max-height: 680px;
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  border: 1px solid var(--line-2);
  box-shadow:
    0 30px 80px -30px rgba(236, 72, 153,0.18),
    0 0 0 1px var(--line);
}

/* Scroll cue — top of row 2, col 2, baseline-aligned with .hero-floor */
.hero-grid-layout > .scroll-cue-side {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  margin-top: 0;
}
.scroll-cue-side {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  padding: 6px 0;
  transition: color 160ms ease;
}
.scroll-cue-side:hover { color: var(--accent); }
.scroll-cue-side:hover .arr { border-color: var(--accent); color: var(--accent); }
.scroll-cue-side .arr {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 11px;
  color: var(--accent);
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
  animation: scrollNudge 2.4s ease-in-out infinite;
}

/* Hide the old centered scroll-cue if anything still references it */
.hero-canvas .scroll-cue-floor { display: none; }

/* Responsive — collapse to single column */
@media (max-width: 1024px) {
  .hero-grid-layout {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 0 64px;
  }
  .hero-right { height: 380px; }
  .corner-label.br { bottom: 80px; }
}
@media (max-width: 720px) {
  .hero-canvas { padding: 0 20px; }
  .corner-label.tl, .corner-label.tr { top: 14px; }
  .corner-label.tl { left: 20px; }
  .corner-label.tr { right: 20px; }
  .corner-label.br { display: none; }
  .hero-floor { font-size: 10px; gap: 10px; }
  .hero-floor .bar { display: none; }
}


/* ============================================================
   Terminal banner — Claude Code-style ASCII block letters
   ============================================================ */
.term-banner {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.0;
  letter-spacing: 0;
  color: var(--accent);
  white-space: pre;
  text-shadow: 0 0 18px rgba(236, 72, 153, 0.25);
  animation: bannerGlow 4s ease-in-out infinite alternate;
}
@keyframes bannerGlow {
  0%   { text-shadow: 0 0 12px rgba(236, 72, 153, 0.18); }
  100% { text-shadow: 0 0 22px rgba(236, 72, 153, 0.42); }
}

.term-banner-tagline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 6px 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  flex-wrap: wrap;
  gap: 6px;
}
.term-banner-tagline strong {
  color: var(--accent);
  font-weight: 600;
}
.term-banner-tagline .dim {
  color: var(--ink-4);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.term-divider {
  height: 1px;
  background: var(--line);
  margin: 0 0 14px;
  position: relative;
}
.term-divider::before,
.term-divider::after {
  content: '';
  position: absolute;
  top: -1px;
  width: 6px;
  height: 3px;
  background: var(--bg-3);
  border-top: 1px solid var(--line);
}
.term-divider::before { left: 18px; }
.term-divider::after  { right: 18px; }

/* On narrower terminals, scale banner down */
@media (max-width: 1024px) {
  .term-banner { font-size: 8.5px; }
}

/* ============================================================
   Brand logo — micro ASCII GG, mirrors the terminal banner
   ============================================================ */
.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}

.brand-mark {
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 2.8px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--accent);
  white-space: pre;
  text-shadow: 0 0 5px rgba(236, 72, 153, 0.4);
  user-select: none;
  display: inline-block;
  transform: scaleY(1.12);
  transform-origin: left center;
}

.brand-word {
  font-family: var(--mono) !important;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: none !important;
}

.site-nav .brand { gap: 8px; }

/* Hover — subtle shift */
.site-nav .brand:hover .brand-mark {
  text-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}
.site-nav .brand:hover .brand-word {
  color: var(--accent);
}

@media (max-width: 720px) {
  .brand-mark { font-size: 2.2px; }
  .brand-word { font-size: 12px; }
}

/* Footer brand mark — slightly larger than nav */
.ft-brand-mark {
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.0;
  color: var(--accent);
  white-space: pre;
  text-shadow: 0 0 14px rgba(236, 72, 153, 0.30);
  user-select: none;
}
.ft-brand-sub {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 14px;
  margin-left: 4px;
}

/* ============================================================
   Nav dropdown — Work menu (Work Projects / School Projects)
   ============================================================ */
.nav-dd {
  position: relative;
  display: inline-block;
}

.nav-trigger {
  font-family: var(--mono) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 160ms ease, background 160ms ease;
  text-transform: none !important;
}
.nav-trigger:hover { background: var(--bg-3); color: var(--ink); }
.nav-trigger.on   { color: var(--accent); }
.nav-trigger.active { background: var(--bg-3); color: var(--ink); }
.nav-trigger .caret {
  font-size: 9px;
  color: var(--ink-3);
  transition: transform 200ms ease;
  display: inline-block;
}
.nav-trigger .caret.up { transform: rotate(-180deg); color: var(--accent); }

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: rgba(14, 14, 14, 0.96);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 6px;
  box-shadow:
    0 24px 60px -20px rgba(0,0,0,0.6),
    0 0 0 1px var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: ddIn 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes ddIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dd-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.dd-item:hover {
  background: var(--bg-3);
}
.dd-item:hover .dd-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

.dd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dd-label {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.dd-arrow {
  color: var(--ink-3);
  font-size: 13px;
  transition: color 140ms ease, transform 200ms ease;
}
.dd-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: none;
}

@media (max-width: 720px) {
  .nav-dd-menu { left: auto; right: 0; min-width: 240px; }
}

/* ============================================================
   School page empty state
   ============================================================ */
.empty-state {
  max-width: 560px;
  margin: 80px auto;
  text-align: center;
  padding: 48px 32px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(236, 72, 153, 0.06) 0%, transparent 70%),
    var(--bg-card);
}
.empty-state .es-mark {
  font-family: var(--mono);
  font-size: 48px;
  color: var(--accent);
  margin-bottom: 16px;
  opacity: 0.6;
  line-height: 1;
}
.empty-state h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--ink);
}
.empty-state h2 .accent { color: var(--accent); }
.empty-state p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 420px;
  margin: 0 auto 24px;
}
.empty-state .es-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   SIDEBAR NAV — replaces top nav, fixed left column
   ============================================================ */

/* Hide the old horizontal nav entirely if it shows up */
.site-nav { display: none !important; }

:root { --sidebar-w: 240px; }

.site-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #0c0c0c 0%, #0a0a0a 100%);
  border-right: 1px solid var(--line);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 22px 18px 20px;
  box-sizing: border-box;
  font-family: var(--mono);
}

.shell { display: block; }
main { padding-left: var(--sidebar-w); }
.site-footer { padding-left: calc(var(--sidebar-w) + 36px); }

/* Sidebar top — brand + mobile toggle */
.sb-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 28px;
}
.site-sidebar .brand { padding: 4px 0; }
.site-sidebar .brand-mark { font-size: 3px; }
.site-sidebar .brand-word { font-size: 13px; }

.sb-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 3px;
}
.sb-toggle span {
  width: 16px;
  height: 1.5px;
  background: var(--ink-2);
  display: block;
}

/* Eyebrow label above nav */
.sb-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin: 0 6px 10px;
}

.sb-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

/* Plain links (About, Contact) */
.sb-link {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 140ms ease, color 140ms ease;
  text-transform: none;
  letter-spacing: 0;
}
.sb-link:hover { background: var(--bg-3); color: var(--ink); }
.sb-link.on {
  background: var(--bg-3);
  color: var(--accent);
}
.sb-link.on::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  margin-left: -2px;
  box-shadow: 0 0 8px var(--accent-glow);
}

/* Section with dropdown trigger */
.sb-section {
  display: flex;
  flex-direction: column;
}
.sb-trigger {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  transition: background 140ms ease, color 140ms ease;
}
.sb-trigger:hover { background: var(--bg-3); color: var(--ink); }
.sb-section.on .sb-trigger { color: var(--accent); }
.sb-section.on .sb-trigger::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  margin-left: -2px;
  margin-right: 8px;
  box-shadow: 0 0 8px var(--accent-glow);
}
.sb-trigger .caret {
  font-size: 9px;
  color: var(--ink-3);
  transition: transform 200ms ease;
}
.sb-trigger .caret.open { transform: rotate(-180deg); color: var(--accent); }

/* Submenu — inline expansion under Work */
.sb-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0 6px;
  margin-left: 6px;
  border-left: 1px solid var(--line);
  animation: subIn 180ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes subIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sb-sub a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-2);
  transition: background 140ms ease, color 140ms ease;
  margin-left: 6px;
}
.sb-sub a:hover { background: var(--bg-3); color: var(--ink); }
.sb-sub a:hover .sb-bullet { color: var(--accent); }
.sb-sub a.on { color: var(--accent); }
.sb-sub a.on .sb-bullet { color: var(--accent); }
.sb-bullet {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-4);
  margin-top: 4px;
  flex-shrink: 0;
  transition: color 140ms ease;
}
.sb-sub-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-label {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.sb-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* Floor — status + location, pinned to bottom of sidebar */
.sb-floor {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.sb-status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.16), 0 0 10px rgba(74,222,128,0.5);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.sb-meta-line {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* Hero/page max-widths still work — but let them fill the new main width */
.hero-canvas { max-width: none; }
.page { max-width: 1100px; margin-left: 0; margin-right: auto; padding-left: 32px; padding-right: 32px; }

/* Responsive — collapse sidebar on smaller screens */
@media (max-width: 980px) {
  :root { --sidebar-w: 0px; }
  main, .site-footer { padding-left: 0; }
  .site-sidebar {
    width: 280px;
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
  }
  .site-sidebar.open { transform: translateX(0); }
  .sb-toggle {
    display: inline-flex;
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 50;
    background: var(--bg-card);
  }
  .site-sidebar .sb-toggle { position: static; }
}

/* ============================================================
   Mobile sidebar toggle (floating top-right)
   ============================================================ */
.sb-mobile-toggle {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  cursor: pointer;
  flex-direction: column;
  gap: 3px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sb-mobile-toggle span {
  width: 16px;
  height: 1.5px;
  background: var(--ink-2);
  display: block;
  transition: transform 200ms ease, opacity 200ms ease;
}
.sb-mobile-toggle.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); background: var(--accent); }
.sb-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.sb-mobile-toggle.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); background: var(--accent); }

.sb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 39;
  animation: backdropIn 200ms ease both;
}
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 980px) {
  .sb-mobile-toggle { display: inline-flex; }
  .sb-backdrop { display: block; }
}

/* ============================================================
   REVERT TO TOP NAV — sidebar disabled, links centered
   ============================================================ */

/* Hide all sidebar artifacts */
.site-sidebar,
.sb-mobile-toggle,
.sb-backdrop { display: none !important; }

/* Restore top-nav as the visible header */
.site-nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 18px 32px;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  overflow: visible !important;
}
.site-nav .brand { grid-column: 1; justify-self: start; }
.site-nav .links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav .nav-spacer { grid-column: 3; }

/* Reset main + footer offsets that the sidebar set */
main { padding-left: 0 !important; }
.site-footer { padding-left: 36px !important; }

/* Make sure .hero-canvas can use full width again */
.hero-canvas { max-width: 1200px !important; }

/* Dropdown menu — center it under the trigger so it can't clip on the right edge of the page */
.nav-dd-menu {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  transform-origin: top center;
}
@keyframes ddIn {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Mobile — stack things sensibly */
@media (max-width: 720px) {
  .site-nav { padding: 14px 18px; grid-template-columns: 1fr auto; }
  .site-nav .nav-spacer { display: none; }
  .site-nav .links { grid-column: 2; justify-self: end; gap: 2px; }
  .nav-dd-menu { left: auto !important; right: 0 !important; transform: none; }
  @keyframes ddIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   Top-right Contact button — pink filled CTA so it pops
   ============================================================ */
.site-nav .nav-contact {
  grid-column: 3;
  justify-self: end;
  font-family: var(--mono) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: #0a0a0a;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  background: var(--accent);
  border: 1px solid var(--accent);
  display: inline-flex;
  align-items: center;
  transition: filter 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  text-transform: none;
}
.site-nav .nav-contact:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 24px rgba(236, 72, 153, 0.45);
  transform: translateY(-1px);
}
.site-nav .nav-contact.on {
  filter: brightness(1.04);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.18);
}

@media (max-width: 720px) {
  .site-nav { grid-template-columns: 1fr auto auto !important; }
  .site-nav .nav-contact { padding: 7px 13px; font-size: 12.5px; }
}

/* ============================================================
   Unified content alignment — nav / hero / page / footer share edges
   ============================================================ */

/* Single source of truth: 1320px content column, 32px gutters */
:root { --content-max: 1200px; --content-pad: 32px; }

/* Nav: full-width sticky bar, but inner content sits inside the 1320 column.
   max() padding centers the content on screens wider than 1320 + 64. */
.site-nav {
  padding: 18px max(var(--content-pad), calc((100% - var(--content-max)) / 2 - 12px)) !important;
}

/* Hero canvas centers within the same column */
.hero-canvas {
  max-width: var(--content-max) !important;
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

/* Page wrapper centers (was left-aligned) */
.page {
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--content-pad) !important;
  padding-right: var(--content-pad) !important;
}

/* Footer inner aligns to the same column */
.site-footer {
  padding: 56px max(var(--content-pad), calc((100% - var(--content-max)) / 2)) 28px !important;
}
.site-footer .ft-inner {
  max-width: none;
  margin: 0;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.site-footer .ft-baseline {
  max-width: none;
  margin: 18px 0 0;
}

@media (max-width: 720px) {
  :root { --content-pad: 18px; }
}

/* Experience bullet list — under each role */
.exp-bullets {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
}
.exp-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.exp-bullets li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}


/* ============================================================
   RESUME ROWS — Editorial spread w/ massive-year typography
   Design direction: each entry's year IS art. Content beside.
   ============================================================ */

.missions {
  display: flex;
  flex-direction: column;
  margin-top: 36px;
  position: relative;
  isolation: isolate;
}

.rr {
  display: grid;
  grid-template-columns: minmax(280px, 36%) 1fr;
  gap: 56px;
  padding: 80px 0;
  position: relative;
  border-top: 1px solid var(--line);
  align-items: start;
}
.rr:first-child { border-top: 0; padding-top: 40px; }

/* Subtle pink halo behind the year on current entry */
.rr.is-current::after {
  content: '';
  position: absolute;
  left: -10%;
  top: 20%;
  width: 60%;
  height: 70%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 72, 153, 0.16) 0%, transparent 100%);
  filter: blur(40px);
  z-index: -1;
}

/* === LEFT: massive year display === */
.rr-when {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 100px;
  align-self: flex-start;
}

.rr-years {
  font-family: var(--display);
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 700;
  margin: 0;
  position: relative;

  /* Past entries: outline only — transparent fill, accent stroke */
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ink-3);
  text-stroke: 1.4px var(--ink-3);
  transition: -webkit-text-stroke-color 220ms ease, color 220ms ease;
}

/* Current entry: solid pink fill, glowing */
.rr.is-current .rr-years {
  color: var(--accent);
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 18px rgba(236, 72, 153, 0.45),
    0 0 60px rgba(236, 72, 153, 0.18);
}

/* Hover: past years fill in pink */
.rr:hover .rr-years {
  -webkit-text-stroke-color: var(--accent);
}

/* Stack the year as two lines if it's a range */
.rr-years-range {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
}
.rr-years-from { font-size: 1em; }
.rr-years-dash {
  font-size: 0.4em;
  margin: 0.06em 0;
  color: var(--ink-3);
  -webkit-text-fill-color: var(--ink-3);
  letter-spacing: 0;
}
.rr-years-to { font-size: 1em; }

/* "Now" pill below year for current entry */
.rr-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(236, 72, 153, 0.10);
  border: 1px solid rgba(236, 72, 153, 0.45);
  padding: 6px 12px;
  border-radius: 999px;
  width: fit-content;
}
.rr-now .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
  animation: dotPulse 1.6s ease-in-out infinite;
}

/* === RIGHT: content === */
.rr-body {
  min-width: 0;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rr-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.rr-eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--ink-3);
}
.rr.is-current .rr-eyebrow { color: var(--accent); }
.rr.is-current .rr-eyebrow::before { background: var(--accent); }

.rr-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}

.rr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin: -8px 0 4px;
}
.rr-meta .rr-co { color: var(--accent); font-weight: 500; }
.rr-meta .rr-loc { color: var(--ink-3); text-transform: lowercase; }
.rr-meta .rr-sep { color: var(--ink-4); }

.rr-note {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
  max-width: 660px;
}
.rr-note strong { color: var(--ink); font-weight: 500; }

/* === BULLETS — large numbered cards === */
.rr-bullets {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: bullet;
  border-top: 1px solid var(--line);
  max-width: 760px;
}
.rr-bullets li {
  counter-increment: bullet;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  transition: padding-left 220ms ease, color 220ms ease;
}
.rr-bullets li::before {
  content: counter(bullet, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  -webkit-text-stroke: 0;
  line-height: 1;
  padding-top: 4px;
  transition: color 220ms ease;
}
.rr-bullets li:hover { padding-left: 8px; color: var(--ink); }
.rr-bullets li:hover::before { color: var(--accent); }

/* === TAGS === */
.rr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

/* Mobile */
@media (max-width: 900px) {
  .rr {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 56px 0;
  }
  .rr-when { position: static; }
  .rr-years { font-size: clamp(56px, 14vw, 88px); }
  .rr-bullets li { grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; font-size: 14px; }
  .rr-bullets li::before { font-size: 18px; }
  .rr.is-current::after { display: none; }
}

/* ============================================================
   STAT TILES — visual achievement callouts inside resume rows
   ============================================================ */
.rr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 24px 0 0;
  max-width: 760px;
}
.rr-stat {
  position: relative;
  background:
    linear-gradient(160deg, rgba(236, 72, 153, 0.05) 0%, transparent 60%),
    var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 18px 16px;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  overflow: hidden;
  isolation: isolate;
}
.rr-stat::before {
  /* corner accent line */
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 1px;
  background: var(--accent);
  transition: width 280ms ease;
}
.rr-stat:hover {
  border-color: rgba(236, 72, 153, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(236, 72, 153, 0.35);
}
.rr-stat:hover::before { width: 100%; }
.rr-stat-n {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.rr-stat-suf {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--accent);
  margin-left: 2px;
}
.rr-stat-l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rr-stat-l::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-4);
}

/* ============================================================
   TECH GRID — visual stack tiles instead of plain chips
   ============================================================ */
.rr-tech {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
  max-width: 760px;
}
.rr-tech-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px;
}
.rr-tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rr-tech-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease, transform 200ms ease;
  cursor: default;
  opacity: 0;
  animation: techIn 480ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes techIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rr-tech-item:hover {
  background: rgba(236, 72, 153, 0.08);
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}
.rr-tech-item:hover .rr-tech-bullet {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.rr-tech-bullet {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ink-4);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.rr-tech-name { letter-spacing: 0.02em; }

/* ============================================================
   TABBED TIMELINE — single panel + click-through tabs
   The interaction IS the design.
   ============================================================ */

.tt {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  margin-top: 32px;
  position: relative;
  min-height: 480px;
}

/* === LEFT: tab list === */
.tt-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--line);
  position: sticky;
  top: 96px;
  align-self: flex-start;
}

.tt-tab {
  position: relative;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 18px 22px 18px 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  border-bottom: 1px solid var(--line);
  margin-left: -1px;
  transition: background 220ms ease, padding-left 220ms ease;
  color: var(--ink-2);
}
.tt-tab:last-child { border-bottom: 0; }
.tt-tab::before {
  content: '';
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 220ms ease, box-shadow 220ms ease;
}
.tt-tab:hover {
  background: var(--bg-2);
  padding-left: 28px;
}
.tt-tab.on {
  background: rgba(236, 72, 153, 0.06);
  padding-left: 28px;
}
.tt-tab.on::before {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.tt-tab-when {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.tt-tab.on .tt-tab-when { color: var(--accent); }

.tt-tab-co {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.tt-tab-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.tt-tab-now .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
  animation: dotPulse 1.6s ease-in-out infinite;
}

/* === RIGHT: active panel === */
.tt-panel {
  animation: panelIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tt-panel-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.tt-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tt-eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--accent);
}

.tt-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}

.tt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.tt-meta .tt-co { color: var(--accent); font-weight: 500; }
.tt-meta .tt-loc { color: var(--ink-3); text-transform: lowercase; }
.tt-meta .tt-sep { color: var(--ink-4); }
.tt-meta .tt-when { color: var(--ink-3); }

.tt-note {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
  max-width: 680px;
}

.tt-bullets {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  counter-reset: ttbul;
}
.tt-bullets li {
  counter-increment: ttbul;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  padding: 4px 0;
  transition: color 220ms ease;
}
.tt-bullets li::before {
  content: counter(ttbul, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
  line-height: 1;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.tt-bullets li:hover { color: var(--ink); }
.tt-bullets li:hover::before {
  color: var(--accent);
  border-color: rgba(236, 72, 153, 0.4);
  background: rgba(236, 72, 153, 0.08);
}

@media (max-width: 900px) {
  .tt {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
  }
  .tt-tabs {
    flex-direction: row;
    overflow-x: auto;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    position: static;
    scrollbar-width: none;
  }
  .tt-tabs::-webkit-scrollbar { display: none; }
  .tt-tab {
    border-bottom: 0;
    border-right: 1px solid var(--line);
    margin-left: 0;
    padding: 14px 18px;
    flex-shrink: 0;
    min-width: 180px;
  }
  .tt-tab::before {
    left: 0; top: auto; right: 0; bottom: -1px;
    width: 100%; height: 2px;
  }
  .tt-tab:hover, .tt-tab.on { padding-left: 18px; }
  .tt-bullets li { grid-template-columns: 30px 1fr; gap: 12px; font-size: 14px; }
}


/* ============================================================
   THEME TOGGLE — sun/moon segmented switch in nav
   ============================================================ */
.site-nav .nav-end {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
/* Override the old "nav-contact justify-self: end" rule from later in the cascade */
.site-nav .nav-end .nav-contact {
  grid-column: auto;
  justify-self: auto;
}

.theme-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(0,0,0,0.18);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-2);
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,101,102,0.10);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,101,102,0.22);
}

[data-theme="light"] .theme-toggle {
  background: rgba(0,0,0,0.04);
  border-color: var(--line-2);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(0,0,0,0.06);
}

@media (max-width: 720px) {
  .site-nav .nav-end { gap: 8px; }
  .theme-toggle { width: 30px; height: 30px; }
}

/* ============================================================
   LIGHT MODE — global tone adjustments
   The theme tokens already cascade, but a few hand-tuned touches:
   ============================================================ */
[data-theme="light"] body::before { opacity: 0.10; }
[data-theme="light"] .term-banner { color: var(--accent); text-shadow: 0 0 6px rgba(226,101,102,0.18); }
/* (terminal light-mode tokens removed — lighter override block lives below) */
[data-theme="light"] .hero-eyebrow-pill { background: rgba(255,255,255,0.6); }
[data-theme="light"] .corner-label.tl,
[data-theme="light"] .corner-label.tr { color: var(--ink-4); }
[data-theme="light"] .hero-glow { mix-blend-mode: multiply; opacity: 0.55; }
[data-theme="light"] .hero-grid { opacity: 0.5; }

/* ============================================================
   RESUME SHOWCASE — magazine-style section block
   Used for Education + Experience. Replaces TabbedTimeline visuals.
   ============================================================ */
.showcase {
  position: relative;
  padding: 56px 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(226,101,102,0.08) 0%, transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(239,177,168,0.05) 0%, transparent 60%),
    var(--bg-2);
  overflow: hidden;
  isolation: isolate;
}
.showcase + .showcase { margin-top: 32px; }

[data-theme="light"] .showcase {
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(226,101,102,0.10) 0%, transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(184,69,72,0.04) 0%, transparent 60%),
    var(--paper);
}

/* Big watermark numeral in the corner */
.showcase-watermark {
  position: absolute;
  top: -32px;
  right: -8px;
  font-family: var(--display);
  font-size: clamp(220px, 28vw, 380px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--line-2);
  text-stroke: 1.4px var(--line-2);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  font-variation-settings: 'opsz' 144, 'wght' 700, 'SOFT' 30;
}

/* Header — eyebrow + title + meta */
.showcase-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}
.showcase-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.showcase-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
}
.showcase-title {
  font-family: var(--display);
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
  font-variation-settings: 'opsz' 144, 'wght' 600, 'SOFT' 30;
}
.showcase-title .ital {
  font-style: italic;
  font-weight: 400;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.showcase-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}
.showcase-meta .v { color: var(--ink); font-size: 13px; letter-spacing: 0; text-transform: none; font-family: var(--display); font-weight: 500; }

/* Card grid — primary entry on the left, secondary stack on the right */
.showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 22px;
  position: relative;
  z-index: 1;
}

/* Primary card */
.entry-card {
  position: relative;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-3);
  display: flex;
  flex-direction: column;
  gap: 18px;
  isolation: isolate;
  overflow: hidden;
}
[data-theme="light"] .entry-card { background: var(--paper); }

.entry-card.is-current {
  border-color: rgba(226,101,102,0.4);
  background:
    linear-gradient(180deg, rgba(226,101,102,0.05) 0%, transparent 30%),
    var(--bg-3);
  box-shadow:
    0 24px 60px -30px rgba(226,101,102,0.4),
    inset 0 1px 0 rgba(255,255,255,0.03);
}
[data-theme="light"] .entry-card.is-current {
  background:
    linear-gradient(180deg, rgba(226,101,102,0.06) 0%, transparent 30%),
    var(--paper);
  box-shadow:
    0 18px 40px -22px rgba(226,101,102,0.28),
    0 0 0 1px rgba(226,101,102,0.18);
}

/* Year badge */
.entry-when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line-2);
}
.entry-when-yr {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variation-settings: 'opsz' 144, 'wght' 700, 'SOFT' 20;
}
.entry-card.is-current .entry-when-yr {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.entry-when-yr .dash {
  display: inline-block;
  width: 22px;
  height: 4px;
  background: currentColor;
  margin: 0 6px 12px;
  vertical-align: middle;
  -webkit-text-fill-color: currentColor;
}
.entry-when-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(226,101,102,0.10);
  border: 1px solid rgba(226,101,102,0.36);
  padding: 6px 10px;
  border-radius: 999px;
}
.entry-when-now .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.20), 0 0 8px rgba(74,222,128,0.5);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.entry-when-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.entry-title {
  font-family: var(--display);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  font-variation-settings: 'opsz' 60, 'wght' 600, 'SOFT' 30;
}
.entry-org {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 4px;
  column-gap: 10px;
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
}
.entry-org .org-co {
  color: var(--accent);
  font-weight: 500;
  font-style: italic;
  font-family: var(--serif);
}
.entry-org .org-loc {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.entry-org .sep {
  color: var(--line-2);
  font-size: 11px;
}

.entry-note {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 60ch;
}
.entry-note strong { color: var(--ink); font-weight: 500; }

/* Stat tiles */
.entry-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.entry-stat {
  position: relative;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  overflow: hidden;
  transition: border-color 220ms ease, transform 220ms ease;
}
[data-theme="light"] .entry-stat { background: var(--paper-2); }
.entry-stat:hover {
  border-color: rgba(226,101,102,0.5);
  transform: translateY(-2px);
}
.entry-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 1px;
  background: var(--accent);
  transition: width 280ms ease;
}
.entry-stat:hover::before { width: 100%; }
.entry-stat-n {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: 'opsz' 60, 'wght' 600, 'SOFT' 30;
}
.entry-stat-n .suf {
  font-size: 0.5em;
  color: var(--accent);
  font-weight: 500;
  margin-left: 2px;
  letter-spacing: 0;
  vertical-align: top;
  position: relative;
  top: 0.1em;
}
.entry-stat-l {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Accomplishments — numbered grid replacing the dense bullet list */
.entry-acc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 -4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.entry-acc-head .count { color: var(--accent); }
.entry-acc {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.entry-acc li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  transition: padding-left 200ms ease, color 200ms ease;
  counter-increment: acc;
}
.entry-acc {
  counter-reset: acc;
}
/* alternating column borders */
.entry-acc li:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line); }
.entry-acc li:nth-child(even) { padding-left: 14px; }
.entry-acc li::before {
  content: counter(acc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  padding-top: 4px;
  transition: color 200ms ease;
}
.entry-acc li:hover { color: var(--ink); padding-left: 6px; }
.entry-acc li:hover::before { color: var(--accent); }
.entry-acc li:nth-child(odd):hover { padding-left: 6px; }

/* Stack chips — distinct from the accomplishment grid */
.entry-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.entry-stack-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.entry-stack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.entry-stack-row .stack-chip {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: var(--bg-2);
  transition: all 180ms ease;
}
[data-theme="light"] .entry-stack-row .stack-chip { background: var(--paper-2); }
.entry-stack-row .stack-chip:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Secondary column — stacked smaller cards (past entries, callouts) */
.showcase-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.entry-mini {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
[data-theme="light"] .entry-mini { background: var(--paper); }
.entry-mini-yr {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ink-3);
  text-stroke: 1.2px var(--ink-3);
  font-variation-settings: 'opsz' 144, 'wght' 600, 'SOFT' 30;
  margin-bottom: 2px;
}
.entry-mini-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  font-variation-settings: 'opsz' 30, 'wght' 600, 'SOFT' 30;
}
.entry-mini-org {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
}
.entry-mini-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.entry-mini-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 4px 0 0;
}
.entry-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.entry-mini-tags .stack-chip {
  font-size: 10.5px;
  padding: 3px 8px;
}

/* Nice 'spine' callout card on the side */
.showcase-callout {
  position: relative;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(160deg, rgba(226,101,102,0.10) 0%, transparent 65%),
    var(--bg-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 140px;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
}
[data-theme="light"] .showcase-callout {
  background:
    linear-gradient(160deg, rgba(226,101,102,0.10) 0%, transparent 65%),
    var(--paper);
}
.showcase-callout-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.showcase-callout-text {
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.showcase-callout-text .accent { color: var(--accent); font-style: italic; font-family: var(--serif); font-weight: 400; }
.showcase-callout-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
  transition: color 160ms ease, border-color 160ms ease;
}
.showcase-callout-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Mobile */
@media (max-width: 900px) {
  .showcase { padding: 36px 24px; }
  .showcase-watermark { font-size: clamp(140px, 36vw, 200px); top: -16px; right: -4px; }
  .showcase-head { flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .showcase-meta { text-align: left; }
  .showcase-grid { grid-template-columns: 1fr; gap: 14px; }
  .entry-card { padding: 22px; }
  .entry-when-yr { font-size: 42px; }
  .entry-acc { grid-template-columns: 1fr; }
  .entry-acc li:nth-child(odd) { padding-right: 0; border-right: 0; }
  .entry-acc li:nth-child(even) { padding-left: 0; }
}


/* ============================================================
   LIGHT MODE — final override (must come AFTER the late :root)
   ============================================================ */
[data-theme="light"] {
  --bg:    #faf8f4;
  --bg-2:  #f4f1ea;
  --bg-3:  #ffffff;
  --bg-card: #ffffff;
  --paper:   #ffffff;
  --paper-2: #f4f1ea;

  --line:   #e6e1d6;
  --line-2: #d4cdbe;
  --line-3: #b8b0a0;

  --ink:   #1a1612;
  --ink-2: #4a4338;
  --ink-3: #7a7060;
  --ink-4: #a59c8a;

  --accent:      #d6447a;
  --accent-soft: rgba(214, 68, 122, 0.14);
  --accent-deep: #b8345f;
  --accent-glow: rgba(214, 68, 122, 0.30);
  --accent-grad: linear-gradient(135deg, #d6447a 0%, #b8345f 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(214, 68, 122, 0.10) 0%, rgba(184, 52, 95, 0.05) 100%);
}

[data-theme="light"] body::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.06) 1px, transparent 0);
  opacity: 0.7;
}

/* Hero / decorative bits that were dark-only */
[data-theme="light"] .hero-glow,
[data-theme="light"] .hero-grid { opacity: 0.4; mix-blend-mode: multiply; }
[data-theme="light"] .hero-eyebrow-pill {
  background: rgba(255,255,255,0.85);
  border-color: var(--line-2);
}
[data-theme="light"] .corner-label.tl,
[data-theme="light"] .corner-label.tr,
[data-theme="light"] .corner-label.bl,
[data-theme="light"] .corner-label.br { color: var(--ink-3); }

/* Terminal cards stay dark — they're a visual artifact, not page chrome */
[data-theme="light"] .bento-card.terminal,
[data-theme="light"] .term-window,
[data-theme="light"] .terminal {
  background: linear-gradient(180deg, #1a1612 0%, #14110e 100%);
  color: #f4ede0;
  border-color: #2a241c;
}
[data-theme="light"] .bento-card.terminal *,
[data-theme="light"] .term-window * { border-color: rgba(255,255,255,0.08); }
[data-theme="light"] .bento-card.terminal .ttitle,
[data-theme="light"] .bento-card.terminal .tline.out,
[data-theme="light"] .bento-card.terminal .tline.note { color: #c0b8a8; }
[data-theme="light"] .bento-card.terminal .tline.cmd .cmdtxt,
[data-theme="light"] .term-banner { color: #f4ede0; }

/* Ensure cards on light bg pop */
[data-theme="light"] .bento-card,
[data-theme="light"] .proj-card,
[data-theme="light"] .entry-card,
[data-theme="light"] .entry-mini,
[data-theme="light"] .showcase-callout {
  background: var(--paper);
}
[data-theme="light"] .entry-stat { background: var(--paper-2); }
[data-theme="light"] .stack-chip,
[data-theme="light"] .entry-stack-row .stack-chip { background: var(--paper-2); }

/* Showcase backgrounds re-tinted for light */
[data-theme="light"] .showcase {
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(214, 68, 122, 0.08) 0%, transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(214, 68, 122, 0.04) 0%, transparent 60%),
    var(--paper-2);
}
[data-theme="light"] .showcase-watermark {
  -webkit-text-stroke: 1.4px var(--line-2);
}

/* Body / sticky nav */
[data-theme="light"] body { background: var(--bg); color: var(--ink); }
[data-theme="light"] .site-nav {
  background: rgba(250, 248, 244, 0.85);
  border-bottom-color: var(--line);
}
[data-theme="light"] .site-nav .links a { color: var(--ink-2); }
[data-theme="light"] .site-nav .links a.on,
[data-theme="light"] .site-nav .links a:hover { color: var(--ink); }
[data-theme="light"] .site-nav .nav-contact {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Theme toggle in light mode */
[data-theme="light"] .theme-toggle {
  background: rgba(0,0,0,0.04);
  border-color: var(--line-2);
}
[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.06); }


/* ============================================================
   Showcase side-cards — denser content blocks
   ============================================================ */
.side-card {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-3);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  isolation: isolate;
}
[data-theme="light"] .side-card { background: var(--paper); }

.side-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.side-card-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 3px 7px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
[data-theme="light"] .side-card-count { background: var(--paper-2); }

/* Coursework list — 2-col, course code + name */
.course-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.course-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
}
.course-list li:nth-child(odd) { padding-right: 12px; border-right: 1px dashed var(--line); }
.course-list li:nth-child(even) { padding-left: 12px; }
.course-list li:nth-last-child(-n+2) { border-bottom: 0; }
.course-list .ck {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
  flex-shrink: 0;
}
.course-list .cv {
  color: var(--ink-2);
  font-size: 12.5px;
  text-align: right;
  line-height: 1.3;
}

/* Senior projects — numbered */
.project-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.project-list li:first-child { border-top: 0; padding-top: 0; }
.project-list .pn {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.project-list .pt {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.project-list .pd {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 3px;
}

/* Prior school — compact horizontal card */
.side-card--prior {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}
.prior-yr {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ink-3);
  text-stroke: 1.2px var(--ink-3);
  flex-shrink: 0;
}
.prior-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prior-eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.prior-title {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.prior-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* Tech stack grid */
.stack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.stack-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.stack-cell:nth-child(odd) { border-right: 1px solid var(--line); }
.stack-cell:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
.stack-cell:nth-last-child(-n+2) { padding-bottom: 0; }
.sc-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sc-v {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Impact ledger */
.ledger {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
}
.ledger li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
  font-size: 13px;
}
.ledger li:first-child { border-top: 0; }
.ledger .lk {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ledger .lv {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 3px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
[data-theme="light"] .ledger .lv { background: var(--paper-2); }
.ledger .lv.accent {
  color: var(--accent);
  border-color: rgba(214,68,122,0.36);
  background: rgba(214,68,122,0.08);
}

/* Side CTA card */
.side-card--cta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  background:
    linear-gradient(160deg, rgba(226,101,102,0.10) 0%, transparent 65%),
    var(--bg-3);
  transition: border-color 200ms ease, transform 200ms ease;
}
[data-theme="light"] .side-card--cta {
  background:
    linear-gradient(160deg, rgba(214,68,122,0.10) 0%, transparent 65%),
    var(--paper);
}
.side-card--cta:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.side-card--cta .showcase-callout-text {
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  margin: 4px 0 0;
  font-weight: 500;
}
.side-card--cta .showcase-callout-text .accent {
  color: var(--accent);
  font-weight: 500;
}
.cta-arrow {
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.side-card--cta:hover .cta-arrow { transform: translateX(4px); }


/* ============================================================
   PAGE HERO — magazine-style hero for sub-pages
   Shared by work/school/about/contact. One source of truth.
   ============================================================ */
.page-hero {
  position: relative;
  margin: 16px 0 32px;
  padding: 64px 48px 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(226,101,102,0.10) 0%, transparent 55%),
    radial-gradient(60% 70% at 100% 100%, rgba(239,177,168,0.06) 0%, transparent 60%),
    var(--bg-2);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  gap: 56px;
  align-items: end;
}
[data-theme="light"] .page-hero {
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(214,68,122,0.10) 0%, transparent 55%),
    radial-gradient(60% 70% at 100% 100%, rgba(214,68,122,0.04) 0%, transparent 60%),
    var(--paper-2);
}

/* Watermark numeral (per-page accent) */
.page-hero-mark {
  position: absolute;
  top: -24px;
  right: -16px;
  font-family: var(--display);
  font-size: clamp(220px, 26vw, 360px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--line-2);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Coordinate slug above hero */
.page-hero-coord {
  position: absolute;
  top: 18px;
  left: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 2;
}
.page-hero-coord::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}

/* Left column — eyebrow + huge headline + kicker */
.page-hero-main { position: relative; z-index: 1; }
.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(226,101,102,0.08);
  border: 1px solid rgba(226,101,102,0.32);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}
[data-theme="light"] .page-hero-eyebrow {
  background: rgba(214,68,122,0.08);
  border-color: rgba(214,68,122,0.32);
}
.page-hero-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,101,102,0.18), 0 0 8px var(--accent-glow);
}

.page-hero h1.page-hero-title {
  font-family: var(--display);
  font-size: clamp(54px, 7vw, 96px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  color: var(--ink);
}
.page-hero-title .ital {
  font-style: italic;
  font-weight: 400;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-hero-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 28px;
}
.page-hero-lede strong { color: var(--ink); font-weight: 500; }

.page-hero-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.page-hero-ctas .btn { font-family: var(--display); font-size: 14px; padding: 11px 20px; }

/* Right column — meta strip with vertical k/v rows */
.page-hero-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 4px;
}
.phm-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.phm-row:first-child { border-top: 0; padding-top: 0; }
.phm-row .phm-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.phm-row .phm-v {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.phm-row .phm-v.accent { color: var(--accent); }
.phm-row .phm-v em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.phm-row .phm-v .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.phm-row .phm-v .live .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.18), 0 0 8px rgba(74,222,128,0.5);
  animation: pulseDot 2.4s ease-in-out infinite;
}

/* Mobile */
@media (max-width: 900px) {
  .page-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 24px 28px;
  }
  .page-hero-mark { font-size: clamp(140px, 36vw, 200px); top: -12px; right: -4px; }
  .phm-row { grid-template-columns: 80px 1fr; }
}

/* ============================================================
   Terminal — light-mode override
   Paper-toned chrome + body, GG banner stays pink (accent var).
   ============================================================ */
[data-theme="light"] .bento-card.terminal {
  background:
    linear-gradient(180deg, #ffffff 0%, #f6f3ec 100%);
  border-color: var(--line);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 18px 50px -28px rgba(236, 72, 153, 0.18),
    0 0 0 1px var(--line);
}
[data-theme="light"] .bento-card.terminal::before {
  /* invert the scanline tint for paper background */
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.012) 3px,
      rgba(0,0,0,0) 4px
    );
}

[data-theme="light"] .term-chrome {
  background: #ebe5d9;
  border-bottom-color: var(--line);
}
[data-theme="light"] .term-chrome .td.r { background: #d6b6b3; border-color: #c4a09c; }
[data-theme="light"] .term-chrome .td.y { background: #d6cfb3; border-color: #c4bd9c; }
[data-theme="light"] .term-chrome .td.g { background: #b3d6b8; border-color: #9cc4a3; }
[data-theme="light"] .term-chrome .ttitle { color: var(--ink-3); }
[data-theme="light"] .term-chrome .tbadge {
  color: var(--accent);
  border-color: rgba(236, 72, 153, 0.45);
  background: rgba(236, 72, 153, 0.10);
}

[data-theme="light"] .term-body { color: #555; }

[data-theme="light"] .tline.cmd .prompt { color: var(--accent); font-weight: 600; }
[data-theme="light"] .tline.cmd .cmdtxt { color: #000 !important; font-weight: 600; }
[data-theme="light"] .tline.out  { color: #6a6a6a !important; }
[data-theme="light"] .tline.note { color: #6a6a6a !important; }
[data-theme="light"] .tline.ok   { color: #6a6a6a !important; }
[data-theme="light"] .tline.ok .bullet { color: var(--accent); }
[data-theme="light"] .tline .cursor { background: var(--accent); }
[data-theme="light"] .term-banner-tagline { color: #6a6a6a !important; }
[data-theme="light"] .term-banner-tagline strong { color: var(--accent); }
[data-theme="light"] .term-banner-tagline .dim { color: #8a8a8a !important; }
[data-theme="light"] .term-divider { background: var(--line); }
[data-theme="light"] .term-divider::before,
[data-theme="light"] .term-divider::after {
  background: #ebe5d9;
  border-top-color: var(--line);
}

/* GG banner — explicitly pink in both themes */
.term-banner {
  color: var(--accent) !important;
}
[data-theme="light"] .term-banner {
  text-shadow: 0 0 14px rgba(236, 72, 153, 0.32);
}

/* Cursor + scanline-cursor tweaks for light */
[data-theme="light"] .cursor { background: var(--accent); }
[data-theme="light"] .cursor-line .prompt { color: var(--accent); }

/* ============================================================
   Showcase compaction + smooth-scroll anchor offset
   Goal: each section fits comfortably in a single viewport.
   ============================================================ */

html { scroll-behavior: smooth; }

#education, #experience {
  scroll-margin-top: 80px;
}

/* Trim showcase outer padding so the section is shorter overall */
.showcase {
  padding: 32px 32px 36px !important;
}
.showcase + .showcase { margin-top: 24px !important; }

/* Smaller watermark — was overwhelming */
.showcase-watermark {
  font-size: clamp(160px, 20vw, 260px) !important;
  top: -18px !important;
  right: -4px !important;
}

/* Tighten header rhythm */
.showcase-head {
  margin-bottom: 22px !important;
  gap: 24px !important;
}
.showcase-title { font-size: clamp(34px, 4.4vw, 52px) !important; }

/* Shrink primary card paddings */
.entry-card {
  padding: 22px 24px !important;
}

/* Compact stat tiles row */
.entry-stats { gap: 8px !important; margin-top: 14px !important; }

/* Tighter bullets/accomplishment grid */
.entry-acc { gap: 10px !important; margin-top: 16px !important; }

/* Side mini-entry compaction */
.mini-entry { padding: 16px 18px !important; }

/* Coursework / impact grids — tighter */
.coursework-grid, .stack-grid, .impact-list { gap: 6px !important; }

/* Section spacing on the page */
.page > section { padding: 16px 0 !important; }

/* Hide watermark on shorter viewports to save vertical space */
@media (max-height: 820px) {
  .showcase { padding: 24px 28px 28px !important; }
  .showcase-head { margin-bottom: 18px !important; }
  .showcase-title { font-size: clamp(30px, 4vw, 44px) !important; }
}


/* ============================================================
   v2026.5 — Sections 1 & 2 fit-to-viewport pass
   Goal: Hero + Education each comfortably inside 100vh on
   1366×768, 1440×900, and 1280×800. Tightens vertical rhythm,
   trims oversized type, and reins in the padded card chrome —
   without changing the design language.
   ============================================================ */

/* --- HERO -------------------------------------------------- */

/* The atmospheric layer is great but the content stack is the
   thing that pushes the hero past 100vh. Pull the type scale
   in, halve some gaps, and make the floor sit closer to the
   chips so the section breathes inside the viewport. */
.hero-canvas {
  min-height: calc(100svh - 160px) !important;
  overflow: visible !important;
}
/* Cancel the page section padding for the page that hosts the hero
   so the 96px reservation actually matches reality. */
.page:has(> .hero-canvas) > .hero-canvas { margin-top: 0 !important; }
.page:has(> .hero-canvas) { padding-top: 0 !important; padding-bottom: 0 !important; }
.hero-grid-layout {
  padding: 48px 0 96px !important;
  column-gap: 72px !important;
  row-gap: 28px !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  align-items: start !important;
}
.hero-grid-layout > .hero-floor {
  position: absolute !important;
  left: 0 !important;
  bottom: 120px !important;
  margin-top: 0 !important;
  align-self: auto !important;
}
.hero-grid-layout > .scroll-cue-side {
  position: absolute !important;
  right: 0 !important;
  bottom: 120px !important;
  margin-top: 0 !important;
  align-self: auto !important;
}
.hero-left {
  gap: 30px !important;
  max-width: 640px !important;
}

/* Slightly smaller eyebrow pill — was 11.5px / 7×12 padding */
.hero-eyebrow-pill {
  padding: 5px 11px !important;
  font-size: 11px !important;
}

/* The headline was the biggest single line item.
   Cap it at ~72px and tighten leading. */
.hero-title {
  font-size: clamp(40px, 5vw, 72px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
}

/* Tighter lede — feels more direct at this density */
.hero-lede {
  font-size: clamp(14.5px, 1.15vw, 16.5px) !important;
  line-height: 1.5 !important;
  max-width: 540px !important;
}

/* Buttons: slightly tighter so the action row reads as one unit */
.hero-actions { gap: 8px !important; }
.hero-actions .btn { padding: 9px 16px !important; font-size: 12.5px !important; }

/* Stack chips were wrapping to 2 rows + extra gap; trim them */
.hero-stack { gap: 5px !important; margin-top: 0 !important; }
.hero-stack .chip { padding: 4px 9px !important; font-size: 11px !important; }

/* Floor strip — smaller padding, sits right under chips */
.hero-floor {
  padding-top: 10px !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  gap: 12px !important;
}

/* Right column: terminal card sits a touch shorter */
.hero-right .bento-card.terminal {
  max-height: 440px !important;
}

/* Corner labels can crowd the top edge — pull them up */
.corner-label.tl, .corner-label.tr { top: 10px !important; }


/* --- SECTION 02 (EDUCATION + EXPERIENCE) ------------------ */

/* Both sections share .showcase. Pull padding, header rhythm,
   and the giant year-badge down so each fits ~720–780px tall. */

.showcase {
  padding: 24px 28px 28px !important;
}
.showcase + .showcase { margin-top: 18px !important; }

/* Watermark — the giant outline numeral. Keep it as decoration
   but make sure it never adds perceived height. */
.showcase-watermark {
  font-size: clamp(140px, 16vw, 200px) !important;
  top: -10px !important;
  right: 0 !important;
  opacity: 0.6;
}

/* Header — eyebrow + title sit on one tight band */
.showcase-head {
  margin-bottom: 16px !important;
  gap: 20px !important;
  align-items: baseline !important;
}
.showcase-eyebrow { margin: 0 0 8px !important; font-size: 10.5px !important; }
.showcase-title {
  font-size: clamp(28px, 3.6vw, 42px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
}
.showcase-meta { padding-top: 0 !important; gap: 2px !important; font-size: 10.5px !important; }
.showcase-meta .v { font-size: 12px !important; }

/* Two columns, slightly wider primary card */
.showcase-grid {
  gap: 16px !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr) !important;
}

/* Primary card — meaningful trim on padding + internal gaps */
.entry-card {
  padding: 18px 20px !important;
  gap: 12px !important;
}

/* Year header — was 56px, the single tallest element in the card */
.entry-when {
  padding-bottom: 10px !important;
}
.entry-when-yr {
  font-size: 38px !important;
  line-height: 0.9 !important;
}
.entry-when-yr .dash { width: 16px !important; height: 3px !important; margin: 0 5px 9px !important; }

/* Title + org */
.entry-title { font-size: clamp(20px, 2.1vw, 26px) !important; line-height: 1.05 !important; }
.entry-org { font-size: 13.5px !important; }

/* Note — smaller and tighter so 2 lines instead of 3 */
.entry-note { font-size: 13.5px !important; line-height: 1.55 !important; max-width: 64ch !important; }

/* Stat tiles — shorter cells, slightly smaller numerals */
.entry-stats { gap: 8px !important; margin-top: 2px !important; }
.entry-stat { padding: 11px 13px 10px !important; }
.entry-stat-n { font-size: 24px !important; }
.entry-stat-l { font-size: 9.5px !important; margin-top: 3px !important; }

/* Bullet grid — tighter items so 4 fit in two compact rows */
.entry-acc-head { font-size: 9.5px !important; margin: 2px 0 -2px !important; }
.entry-acc li {
  padding: 9px 0 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}
.entry-acc li:nth-child(odd) { padding-right: 12px !important; }
.entry-acc li:nth-child(even) { padding-left: 12px !important; }
.entry-acc li::before { font-size: 9.5px !important; padding-top: 2px !important; }

/* Stack chip row */
.entry-stack { gap: 6px !important; margin-top: 2px !important; }
.entry-stack-row { gap: 5px !important; }
.entry-stack-row .stack-chip { font-size: 10.5px !important; padding: 3px 8px !important; }

/* Side cards — denser */
.showcase-side { gap: 10px !important; }
.side-card { padding: 13px 15px !important; gap: 9px !important; }
.side-card-head { gap: 8px !important; }
.side-card-count { font-size: 9px !important; padding: 2px 6px !important; }

/* Coursework list — smaller, tighter */
.course-list li { padding: 5px 0 !important; font-size: 11px !important; }
.course-list .ck { font-size: 10px !important; }
.course-list .cv { font-size: 11.5px !important; }

/* Senior projects */
.project-list { gap: 9px !important; }
.project-list li { gap: 8px !important; padding-top: 9px !important; grid-template-columns: 22px 1fr !important; }
.project-list .pn { font-size: 10px !important; }
.project-list .pt { font-size: 12.5px !important; }
.project-list .pd { font-size: 11px !important; line-height: 1.35 !important; margin-top: 2px !important; }

/* Prior school card — already horizontal, just slimmer */
.side-card--prior { padding: 11px 15px !important; gap: 12px !important; }
.prior-yr { font-size: 22px !important; }
.prior-title { font-size: 12.5px !important; }
.prior-meta { font-size: 9.5px !important; }
.prior-eyebrow { font-size: 9px !important; }

/* Working stack grid (Experience) */
.stack-cell { padding: 8px 11px !important; }
.stack-cell:nth-child(-n+2) { padding-top: 2px !important; }
.sc-k { font-size: 9.5px !important; }
.sc-v { font-size: 12.5px !important; }

/* Impact ledger */
.ledger li { padding: 7px 0 !important; font-size: 12px !important; }
.ledger .lv { font-size: 9.5px !important; padding: 2px 7px !important; }

/* Side CTA */
.side-card--cta { padding: 13px 15px !important; }
.side-card--cta .showcase-callout-text { font-size: 12.5px !important; }
.cta-arrow { font-size: 18px !important; }

/* Section spacing — pull Education tighter against the hero */
.page > section { padding: 8px 0 !important; }
section#education { margin-top: 12px !important; }
section#experience { margin-top: 14px !important; }
section#education .coord, section#experience .coord { margin-bottom: 6px !important; }


/* --- Tighter still on shorter viewports -------------------- */
@media (max-height: 820px) {
  .hero-canvas { min-height: min(calc(100svh - 96px), 660px) !important; }
  .hero-grid-layout { padding: 16px 0 22px !important; row-gap: 12px !important; }
  .hero-left { gap: 12px !important; }
  .hero-title { font-size: clamp(36px, 4.4vw, 60px) !important; }
  .hero-lede { font-size: 14px !important; line-height: 1.5 !important; }
  .hero-stack .chip { font-size: 10.5px !important; padding: 3px 8px !important; }
  .hero-right .bento-card.terminal { max-height: 380px !important; }

  .showcase { padding: 18px 22px 22px !important; }
  .showcase-head { margin-bottom: 12px !important; }
  .showcase-title { font-size: clamp(24px, 3vw, 36px) !important; }
  .entry-when-yr { font-size: 32px !important; }
  .entry-title { font-size: clamp(18px, 1.9vw, 22px) !important; }
  .entry-stat { padding: 9px 11px 8px !important; }
  .entry-stat-n { font-size: 20px !important; }
  .entry-acc li { padding: 7px 0 !important; font-size: 12px !important; }
}

/* On 1024–1180 widths the right column was eating headline width */
@media (min-width: 1025px) and (max-width: 1180px) {
  .hero-grid-layout { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr) !important; }
  .hero-title { font-size: clamp(36px, 4.6vw, 56px) !important; }
}


/* ============================================================
   v2026.5b — Section 2 ultra-compaction + scroll-reveal flare
   Hero is locked (user is happy with it). Everything below the
   fold gets denser AND comes alive when scrolled into view.
   ============================================================ */

/* --- SECTION 2 (Education) deeper compaction --------------- */

/* The inline `marginTop: 24px` on the section element is the
   biggest single waster of vertical space. Override it. */
section#education[style] { margin-top: 6px !important; }
section#experience[style] { margin-top: 8px !important; }
section.now { margin-top: 10px !important; }

/* Smaller showcase chrome */
.showcase {
  padding: 18px 22px 20px !important;
  border-radius: 14px !important;
}
.showcase + .showcase { margin-top: 12px !important; }

/* Header — eyebrow inline beside title for more vertical reclaim */
.showcase-head { margin-bottom: 12px !important; gap: 16px !important; }
.showcase-eyebrow {
  margin: 0 0 4px !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
}
.showcase-eyebrow::before { width: 18px !important; }
.showcase-title {
  font-size: clamp(24px, 3.2vw, 36px) !important;
  line-height: 1.0 !important;
}
.showcase-meta { gap: 1px !important; font-size: 10px !important; }
.showcase-meta .v { font-size: 11.5px !important; }

/* Watermark — visual only, stays out of the flow & smaller */
.showcase-watermark {
  font-size: clamp(120px, 14vw, 170px) !important;
  top: -6px !important;
}

/* Grid: tighter gap + slightly weighted toward the primary card */
.showcase-grid { gap: 12px !important; }

/* Primary card — very tight */
.entry-card {
  padding: 14px 16px !important;
  gap: 9px !important;
  border-radius: 12px !important;
}
.entry-when { padding-bottom: 8px !important; }
.entry-when-yr { font-size: 30px !important; }
.entry-when-yr .dash { width: 12px !important; height: 3px !important; margin: 0 4px 7px !important; }
.entry-when-now { font-size: 9.5px !important; padding: 4px 8px !important; }
.entry-when-meta { font-size: 10px !important; }

.entry-title { font-size: clamp(17px, 1.85vw, 22px) !important; line-height: 1.05 !important; }
.entry-org { font-size: 12.5px !important; margin: 2px 0 0 !important; }
.entry-org .org-loc { font-size: 10px !important; }

.entry-note { font-size: 12.5px !important; line-height: 1.5 !important; max-width: 60ch !important; }

.entry-stats { gap: 6px !important; margin-top: 0 !important; }
.entry-stat { padding: 8px 11px 7px !important; }
.entry-stat-n { font-size: 20px !important; }
.entry-stat-l { font-size: 9px !important; margin-top: 2px !important; letter-spacing: 0.06em !important; }

.entry-acc-head { font-size: 9px !important; margin: 0 !important; }
.entry-acc li {
  padding: 7px 0 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  grid-template-columns: 22px 1fr !important;
  gap: 8px !important;
}
.entry-acc li:nth-child(odd) { padding-right: 10px !important; }
.entry-acc li:nth-child(even) { padding-left: 10px !important; }
.entry-acc li::before { font-size: 9px !important; padding-top: 1px !important; }

.entry-stack { gap: 5px !important; margin-top: 0 !important; }
.entry-stack-label { font-size: 9px !important; letter-spacing: 0.16em !important; }
.entry-stack-row .stack-chip { font-size: 10px !important; padding: 2px 7px !important; }

/* Side cards — lean profile */
.showcase-side { gap: 8px !important; }
.side-card { padding: 11px 13px !important; gap: 7px !important; border-radius: 11px !important; }
.side-card-count { font-size: 8.5px !important; padding: 2px 6px !important; }
.showcase-callout-eyebrow { font-size: 9.5px !important; letter-spacing: 0.16em !important; }

.course-list li { padding: 4px 0 !important; font-size: 10.5px !important; }
.course-list .ck { font-size: 9.5px !important; }
.course-list .cv { font-size: 11px !important; }

.project-list { gap: 7px !important; }
.project-list li { padding-top: 7px !important; grid-template-columns: 18px 1fr !important; gap: 7px !important; }
.project-list .pn { font-size: 9.5px !important; }
.project-list .pt { font-size: 11.5px !important; line-height: 1.15 !important; }
.project-list .pd { font-size: 10.5px !important; line-height: 1.3 !important; margin-top: 1px !important; }

.side-card--prior { padding: 8px 13px !important; gap: 10px !important; }
.prior-yr { font-size: 18px !important; }
.prior-title { font-size: 11.5px !important; }
.prior-meta { font-size: 9px !important; }
.prior-eyebrow { font-size: 8.5px !important; }

.stack-cell { padding: 6px 10px !important; }
.sc-k { font-size: 9px !important; }
.sc-v { font-size: 11.5px !important; }

.ledger li { padding: 5px 0 !important; font-size: 11px !important; }
.ledger .lv { font-size: 9px !important; padding: 2px 6px !important; }

.side-card--cta { padding: 11px 13px !important; }
.side-card--cta .showcase-callout-text { font-size: 11.5px !important; line-height: 1.35 !important; }
.cta-arrow { font-size: 16px !important; }


/* --- SCROLL REVEAL — every section below the hero ---------- */

/* Default state: invisible, lifted, slightly blurred. */
.fx-reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 700ms cubic-bezier(.2,.7,.2,1),
    transform 700ms cubic-bezier(.2,.7,.2,1),
    filter 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform, filter;
}
.fx-reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Optional staggering: data-fx-delay="80" on each child */
.fx-reveal[data-fx-delay] { transition-delay: calc(var(--fx-delay, 0) * 1ms); }

/* Cards that animate inside their parent (after parent reveals) */
.fx-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 540ms cubic-bezier(.2,.7,.2,1), transform 540ms cubic-bezier(.2,.7,.2,1);
}
.fx-stagger.is-in > *      { opacity: 1; transform: none; }
.fx-stagger.is-in > *:nth-child(1) { transition-delay:  60ms; }
.fx-stagger.is-in > *:nth-child(2) { transition-delay: 140ms; }
.fx-stagger.is-in > *:nth-child(3) { transition-delay: 220ms; }
.fx-stagger.is-in > *:nth-child(4) { transition-delay: 300ms; }
.fx-stagger.is-in > *:nth-child(5) { transition-delay: 380ms; }
.fx-stagger.is-in > *:nth-child(6) { transition-delay: 460ms; }

/* Watermark numeral — parallax via JS (sets --fx-park) */
.showcase-watermark {
  transform: translate3d(0, var(--fx-park, 0px), 0);
  transition: transform 60ms linear;
}

/* Animated underline on the showcase title — draws when section enters */
.showcase-title { position: relative; display: inline-block; }
.showcase-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(.2,.7,.2,1) 200ms;
  border-radius: 2px;
  opacity: 0.85;
}
.showcase.is-in .showcase-title::after { transform: scaleX(1); }

/* Cards lift slightly on hover — feels alive without being noisy */
.entry-card, .side-card {
  transition: transform 260ms cubic-bezier(.2,.7,.2,1),
              border-color 260ms ease,
              box-shadow 260ms ease;
}
.entry-card:hover, .side-card:hover {
  transform: translateY(-2px);
  border-color: rgba(226,101,102,0.35);
}
.side-card:hover {
  box-shadow: 0 18px 40px -22px rgba(226,101,102,0.35);
}

/* Stat-tile sweep on enter (uses the existing ::before shimmer) */
.entry-stat::before {
  width: 0 !important;
  transition: width 900ms cubic-bezier(.2,.7,.2,1) 600ms;
}
.showcase.is-in .entry-stat::before { width: 100% !important; }
.entry-stat:hover::before { width: 100% !important; transition-delay: 0ms; }

/* Section eyebrow / coord — fade in with a leftward slide */
.coord, .showcase-eyebrow {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.section-fx.is-in .coord,
.showcase.is-in .showcase-eyebrow { opacity: 1; transform: none; }

/* Now-list rows — slide in left to right as they enter */
.now .now-list .row {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.now.is-in .now-list .row { opacity: 1; transform: none; }
.now.is-in .now-list .row:nth-child(1) { transition-delay:  60ms; }
.now.is-in .now-list .row:nth-child(2) { transition-delay: 140ms; }
.now.is-in .now-list .row:nth-child(3) { transition-delay: 220ms; }
.now.is-in .now-list .row:nth-child(4) { transition-delay: 300ms; }
.now.is-in .now-list .row:nth-child(5) { transition-delay: 380ms; }

/* Cursor-tracked glow inside primary cards */
.entry-card { position: relative; overflow: hidden; }
.entry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(226,101,102,0.10),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 0;
}
.entry-card:hover::after { opacity: 1; }
.entry-card > * { position: relative; z-index: 1; }

/* Reduce motion — honor the user setting */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal, .fx-stagger > *, .coord, .showcase-eyebrow,
  .now .now-list .row {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .showcase-title::after { transform: scaleX(1) !important; transition: none !important; }
  .showcase-watermark { transform: none !important; }
}


/* ============================================================
   v2026.5c — single-screen fit pass
   The previous compaction wasn't enough on smaller laptop
   viewports. This block targets ~520px hero + ~480px education
   so both fit even on 13" displays with browser chrome.
   Hero design language is preserved — only proportions change.
   ============================================================ */

/* --- HERO: lock to a tight box, scale type with vh ------- */

.hero-canvas {
  min-height: calc(100svh - 160px) !important;
  max-height: none !important;
}
.hero-grid-layout {
  padding: 48px 0 96px !important;
  column-gap: 72px !important;
  row-gap: 28px !important;
  grid-template-rows: auto 1fr !important;
  align-items: start !important;
}
/* Pin floor row to the bottom of the hero — independent of terminal height. */
.hero-grid-layout > .hero-floor {
  position: absolute !important;
  left: 0 !important;
  bottom: 120px !important;
  margin-top: 0 !important;
  align-self: auto !important;
}
.hero-grid-layout > .scroll-cue-side {
  position: absolute !important;
  right: 0 !important;
  bottom: 120px !important;
  margin-top: 0 !important;
  align-self: auto !important;
}
.hero-left { gap: 30px !important; }

.hero-eyebrow-pill {
  padding: 4px 10px !important;
  font-size: 10.5px !important;
}

/* Headline scales with viewport HEIGHT, not just width — so
   short browser windows shrink the title automatically. */
.hero-title {
  font-size: clamp(34px, min(4.6vw, 7.4vh), 64px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
}
.hero-lede {
  font-size: clamp(13px, min(1.05vw, 1.7vh), 15px) !important;
  line-height: 1.45 !important;
  max-width: 520px !important;
}

.hero-actions { gap: 8px !important; }
.hero-actions .btn { padding: 8px 14px !important; font-size: 12px !important; }

.hero-stack { gap: 4px !important; }
.hero-stack .chip { padding: 3px 8px !important; font-size: 10.5px !important; }

.hero-floor {
  padding-top: 8px !important;
  margin-top: 0 !important;
  font-size: 9.5px !important;
  gap: 10px !important;
}

.hero-right .bento-card.terminal { max-height: 680px !important; min-height: 0 !important; flex: 0 0 auto !important; }
.corner-label { font-size: 9.5px !important; }
.corner-label.tl { display: none !important; }
.corner-label.tr { display: none !important; }
.scroll-cue-side { font-size: 9.5px !important; }
.scroll-cue-side .arr { width: 18px !important; height: 18px !important; font-size: 10px !important; }


/* --- EDUCATION: half a screen tall ------------------------- */

.showcase {
  padding: 14px 18px 16px !important;
  border-radius: 12px !important;
}
.showcase-watermark {
  font-size: clamp(90px, 10vw, 130px) !important;
  top: -2px !important;
  opacity: 0.45;
}
.showcase-head { margin-bottom: 8px !important; gap: 12px !important; }
.showcase-eyebrow { margin: 0 0 2px !important; font-size: 9.5px !important; }
.showcase-title {
  font-size: clamp(20px, min(2.8vw, 4.2vh), 30px) !important;
  line-height: 1.0 !important;
}
.showcase-meta { font-size: 9.5px !important; }
.showcase-meta .v { font-size: 10.5px !important; }

.showcase-grid { gap: 10px !important; }

.entry-card { padding: 11px 13px !important; gap: 7px !important; border-radius: 10px !important; }
.entry-when { padding-bottom: 6px !important; }
.entry-when-yr { font-size: 24px !important; }
.entry-when-yr .dash { width: 10px !important; height: 2px !important; margin: 0 4px 6px !important; }
.entry-when-now { font-size: 9px !important; padding: 3px 7px !important; }

.entry-title { font-size: clamp(15px, 1.6vw, 19px) !important; line-height: 1.05 !important; }
.entry-org { font-size: 11.5px !important; }
.entry-org .org-loc { font-size: 9.5px !important; }

.entry-note { font-size: 11.5px !important; line-height: 1.45 !important; max-width: 56ch !important; }

.entry-stats { gap: 5px !important; }
.entry-stat { padding: 6px 9px 5px !important; }
.entry-stat-n { font-size: 17px !important; }
.entry-stat-l { font-size: 8.5px !important; margin-top: 1px !important; }

.entry-acc-head { font-size: 8.5px !important; }
.entry-acc li {
  padding: 5px 0 !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  grid-template-columns: 18px 1fr !important;
  gap: 6px !important;
}
.entry-acc li:nth-child(odd) { padding-right: 8px !important; }
.entry-acc li:nth-child(even) { padding-left: 8px !important; }
.entry-acc li::before { font-size: 8.5px !important; }

.entry-stack { gap: 4px !important; }
.entry-stack-label { font-size: 8.5px !important; }
.entry-stack-row .stack-chip { font-size: 9.5px !important; padding: 2px 6px !important; }

.showcase-side { gap: 6px !important; }
.side-card { padding: 9px 11px !important; gap: 5px !important; border-radius: 9px !important; }
.side-card-count { font-size: 8px !important; padding: 1px 5px !important; }
.showcase-callout-eyebrow { font-size: 8.5px !important; }

.course-list li { padding: 3px 0 !important; font-size: 9.5px !important; }
.course-list .ck { font-size: 9px !important; }
.course-list .cv { font-size: 10px !important; }

.project-list { gap: 5px !important; }
.project-list li { padding-top: 5px !important; gap: 6px !important; }
.project-list .pn { font-size: 9px !important; }
.project-list .pt { font-size: 10.5px !important; }
.project-list .pd { font-size: 9.5px !important; line-height: 1.25 !important; }

.side-card--prior { padding: 6px 11px !important; gap: 9px !important; }
.prior-yr { font-size: 16px !important; }
.prior-title { font-size: 10.5px !important; }
.prior-meta { font-size: 8.5px !important; }
.prior-eyebrow { font-size: 8px !important; }

.stack-cell { padding: 5px 9px !important; }
.sc-k { font-size: 8.5px !important; }
.sc-v { font-size: 10.5px !important; }

.ledger li { padding: 4px 0 !important; font-size: 10px !important; }
.ledger .lv { font-size: 8.5px !important; padding: 1px 5px !important; }

.side-card--cta { padding: 9px 11px !important; }
.side-card--cta .showcase-callout-text { font-size: 10.5px !important; }
.cta-arrow { font-size: 14px !important; }

/* Section spacing — collapse the gap between hero and edu */
section#education[style] { margin-top: 4px !important; }
section#experience[style] { margin-top: 6px !important; }
.coord { font-size: 9.5px !important; }
section#education .coord, section#experience .coord {
  margin-bottom: 4px !important;
}


/* --- Even tighter on truly small viewports ----------------- */
@media (max-height: 700px) {
  .hero-canvas { min-height: min(calc(100svh - 96px), 480px) !important; }
  .hero-grid-layout { padding: 10px 0 14px !important; }
  .hero-left { gap: 8px !important; }
  .hero-title { font-size: clamp(28px, 7vh, 48px) !important; }
  .hero-lede { font-size: 12.5px !important; line-height: 1.4 !important; }
  .hero-stack { gap: 3px !important; }
  .hero-stack .chip { font-size: 9.5px !important; padding: 2px 7px !important; }
  .hero-floor { font-size: 9px !important; padding-top: 6px !important; }
  .hero-right .bento-card.terminal { max-height: 320px !important; }

  .showcase { padding: 10px 14px 12px !important; }
  .showcase-head { margin-bottom: 6px !important; }
  .showcase-title { font-size: clamp(18px, 4vh, 26px) !important; }
  .entry-card { padding: 9px 11px !important; gap: 6px !important; }
  .entry-when-yr { font-size: 20px !important; }
  .entry-title { font-size: clamp(13px, 2vh, 16px) !important; }
  .entry-stat { padding: 5px 8px 4px !important; }
  .entry-stat-n { font-size: 15px !important; }
  .entry-acc li { padding: 4px 0 !important; font-size: 10px !important; }
  .side-card { padding: 7px 10px !important; gap: 4px !important; }
}


/* ============================================================
   v2026.6 — interactive flair pass (hero subtleties + Section
   2/3 scroll choreography). Designed to feel alive without
   hijacking the user.
   ============================================================ */

/* ---------- HERO subtleties ---------- */

/* Word-by-word reveal — fires once on first paint */
.wr-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(6px);
  animation: wrIn 760ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes wrIn {
  to { opacity: 1; transform: none; filter: none; }
}

/* Cursor parallax — uses --mx, --my set on .hero-canvas */
.hero-canvas {
  --mx: 0;
  --my: 0;
}
.hero-glow {
  transform: translate3d(calc(var(--mx) * -22px), calc(var(--my) * -16px), 0);
  transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.hero-grid {
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -6px), 0);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
.hero-right .bento-card.terminal {
  transform: translate3d(calc(var(--mx) * -3px), calc(var(--my) * -2px), 0);
  transition: transform 380ms cubic-bezier(.2,.7,.2,1);
}

/* Magnetic buttons — pull toward the cursor on hover */
.btn-magnet {
  position: relative;
  transition:
    transform 220ms cubic-bezier(.2,.7,.2,1),
    box-shadow 220ms cubic-bezier(.2,.7,.2,1),
    filter 220ms ease;
}
.btn-magnet:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.05);
}
.btn-magnet.btn.accent:hover {
  box-shadow: 0 14px 32px -10px rgba(236,72,153,0.55);
}
.btn-magnet.btn.ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Eyebrow pill dot — drift loop in addition to the pulse */
.hero-eyebrow-pill .dot {
  animation:
    dotPulse 2.4s ease-in-out infinite,
    dotDrift 6s ease-in-out infinite;
}
@keyframes dotDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2px); }
}

/* Live clock — replaces static "GMT-5" text */
.live-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono);
}
.live-clock .lc-time {
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.live-clock .lc-tz {
  font-size: 0.85em;
  color: var(--ink-4);
  letter-spacing: 0.06em;
}


/* ---------- VERB BRIDGE between hero and content ---------- */

.verb-bridge {
  position: relative;
  margin: 0 auto;
  padding: 32px var(--content-pad, 32px);
  max-width: var(--content-max, 1320px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.verb-bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 70% at 30% 50%, rgba(236,72,153,0.06), transparent 60%),
    radial-gradient(40% 60% at 90% 50%, rgba(236,72,153,0.04), transparent 60%);
}
.vb-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.vb-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--ink-3);
}
.vb-line {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.vb-prefix { color: var(--ink-3); font-style: italic; font-family: var(--serif); font-weight: 400; }
.vb-suffix { color: var(--ink-2); font-style: italic; font-family: var(--serif); font-weight: 400; }
.vb-verb-slot {
  display: inline-grid;
  grid-template-areas: "stack";
  align-items: baseline;
  vertical-align: baseline;
  line-height: 1;
}
.vb-verb {
  grid-area: stack;
  color: var(--accent);
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(6px);
  transition:
    opacity 480ms cubic-bezier(.2,.7,.2,1),
    transform 480ms cubic-bezier(.2,.7,.2,1),
    filter 480ms cubic-bezier(.2,.7,.2,1);
  white-space: nowrap;
}
.vb-verb.on {
  opacity: 1;
  transform: none;
  filter: none;
}
.vb-progress {
  display: inline-block;
  width: 120px;
  height: 2px;
  background: var(--line-2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.vb-progress-bar {
  position: absolute;
  inset: 0;
  background: var(--accent);
  width: var(--p, 0%);
  transition: width 480ms cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 720px) {
  .vb-row { grid-template-columns: 1fr; gap: 10px; }
  .vb-line { font-size: 18px; flex-wrap: wrap; white-space: normal; }
  .vb-progress { width: 100%; }
}

/* ============================================================
   SHOWCASE — engaging scroll-driven reveal
   Layered stagger as the section enters: watermark, headline,
   stat-band cells, primary entry pieces, then side cards.
   Built on top of the existing .showcase / .is-in lifecycle.
   ============================================================ */

/* Watermark scales + drifts in for impact (parallax y-park already wired). */
.showcase .showcase-watermark {
  opacity: 0;
  transform: translate3d(20px, var(--fx-park, 0px), 0) scale(0.92);
  transition:
    opacity 900ms cubic-bezier(.2,.7,.2,1) 80ms,
    transform 900ms cubic-bezier(.2,.7,.2,1) 80ms;
}
.showcase.is-in .showcase-watermark {
  opacity: 0.45;
  transform: translate3d(0, var(--fx-park, 0px), 0) scale(1);
}

/* Stat-band cells — sweep in left-to-right using --sb-i index. */
.stat-band .sb-cell {
  opacity: 0;
  transform: translateY(40px) scale(0.9);
  filter: blur(6px);
  transition:
    opacity 800ms cubic-bezier(.2,.7,.2,1),
    transform 800ms cubic-bezier(.2,.7,.2,1),
    filter 800ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--sb-i, 0) * 140ms + 250ms);
}
.stat-band.is-in .sb-cell { transform: none; }
.stat-band.is-in .sb-cell {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Number gets a subtle scale-pop the moment its cell reveals. */
.stat-band .sb-num {
  display: inline-block;
  transform-origin: left bottom;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.stat-band.is-in .sb-cell .sb-num {
  animation: sbPop 720ms cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--sb-i, 0) * 110ms + 320ms);
}
@keyframes sbPop {
  0%   { transform: scale(0.92); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Showcase grid: primary card on the left, side stack on the right.
   Reveal the primary first, then cascade the side cards. */
.showcase .showcase-grid > .entry-card,
.showcase .showcase-grid > .showcase-side {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  filter: blur(8px);
  transition:
    opacity 900ms cubic-bezier(.2,.7,.2,1),
    transform 900ms cubic-bezier(.2,.7,.2,1),
    filter 900ms cubic-bezier(.2,.7,.2,1);
}
.showcase .showcase-grid > .entry-card { transition-delay: 600ms; }
.showcase .showcase-grid > .showcase-side { transition-delay: 800ms; }
.showcase.is-in .showcase-grid > .entry-card,
.showcase.is-in .showcase-grid > .showcase-side {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Side cards stagger one after another. */
.showcase-side > .side-card {
  opacity: 0;
  transform: translateX(40px);
  filter: blur(4px);
  transition:
    opacity 720ms cubic-bezier(.2,.7,.2,1),
    transform 720ms cubic-bezier(.2,.7,.2,1),
    filter 720ms cubic-bezier(.2,.7,.2,1);
}
.showcase.is-in .showcase-side > .side-card { opacity: 1; transform: none; filter: none; }
.showcase.is-in .showcase-side > .side-card:nth-child(1) { transition-delay: 900ms; }
.showcase.is-in .showcase-side > .side-card:nth-child(2) { transition-delay: 1050ms; }
.showcase.is-in .showcase-side > .side-card:nth-child(3) { transition-delay: 1200ms; }

/* Inside the primary entry card — reveal sections in reading order. */
.showcase .entry-card > .entry-when,
.showcase .entry-card > div:not(.entry-when):not(.entry-stats):not(.entry-stack),
.showcase .entry-card > .entry-note,
.showcase .entry-card > .entry-stats,
.showcase .entry-card > .entry-acc-head,
.showcase .entry-card > .entry-acc,
.showcase .entry-card > .entry-stack {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 520ms cubic-bezier(.2,.7,.2,1),
    transform 520ms cubic-bezier(.2,.7,.2,1);
}
.showcase.is-in .entry-card > .entry-when         { opacity: 1; transform: none; transition-delay: 620ms; }
.showcase.is-in .entry-card > div:not(.entry-when):not(.entry-stats):not(.entry-stack) { opacity: 1; transform: none; transition-delay: 700ms; }
.showcase.is-in .entry-card > .entry-note         { opacity: 1; transform: none; transition-delay: 780ms; }
.showcase.is-in .entry-card > .entry-stats        { opacity: 1; transform: none; transition-delay: 860ms; }
.showcase.is-in .entry-card > .entry-acc-head     { opacity: 1; transform: none; transition-delay: 940ms; }
.showcase.is-in .entry-card > .entry-acc          { opacity: 1; transform: none; transition-delay: 1000ms; }
.showcase.is-in .entry-card > .entry-stack        { opacity: 1; transform: none; transition-delay: 1080ms; }

/* Bullet list items unfold one by one. */
.showcase .entry-acc li {
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 380ms cubic-bezier(.2,.7,.2,1),
    transform 380ms cubic-bezier(.2,.7,.2,1);
}
.showcase.is-in .entry-acc li { opacity: 1; transform: none; }
.showcase.is-in .entry-acc li:nth-child(1) { transition-delay: 1080ms; }
.showcase.is-in .entry-acc li:nth-child(2) { transition-delay: 1160ms; }
.showcase.is-in .entry-acc li:nth-child(3) { transition-delay: 1240ms; }
.showcase.is-in .entry-acc li:nth-child(4) { transition-delay: 1320ms; }
.showcase.is-in .entry-acc li:nth-child(5) { transition-delay: 1400ms; }
.showcase.is-in .entry-acc li:nth-child(6) { transition-delay: 1480ms; }

/* Stack chips at the very bottom — small last-flourish stagger. */
.showcase .entry-stack-row .stack-chip {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 320ms cubic-bezier(.2,.7,.2,1),
    transform 320ms cubic-bezier(.2,.7,.2,1);
}
.showcase.is-in .entry-stack-row .stack-chip { opacity: 1; transform: none; }
.showcase.is-in .entry-stack-row .stack-chip:nth-child(1) { transition-delay: 1180ms; }
.showcase.is-in .entry-stack-row .stack-chip:nth-child(2) { transition-delay: 1240ms; }
.showcase.is-in .entry-stack-row .stack-chip:nth-child(3) { transition-delay: 1300ms; }
.showcase.is-in .entry-stack-row .stack-chip:nth-child(4) { transition-delay: 1360ms; }
.showcase.is-in .entry-stack-row .stack-chip:nth-child(5) { transition-delay: 1420ms; }
.showcase.is-in .entry-stack-row .stack-chip:nth-child(6) { transition-delay: 1480ms; }
.showcase.is-in .entry-stack-row .stack-chip:nth-child(n+7) { transition-delay: 1540ms; }

/* "Currently" pill on the active role gets a soft pulse on reveal. */
.entry-when-now {
  position: relative;
  overflow: hidden;
}
.showcase.is-in .entry-card.is-current .entry-when-now::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(226,101,102,0.35) 45%,
    rgba(226,101,102,0.55) 50%,
    rgba(226,101,102,0.35) 55%,
    transparent 100%
  );
  transform: translateX(-110%);
  animation: currentSweep 1600ms cubic-bezier(.2,.7,.2,1) 1100ms both;
  pointer-events: none;
}
@keyframes currentSweep {
  to { transform: translateX(110%); }
}

/* Section coord label — slight typewriter feel via underscore tick. */
.showcase.is-in .showcase-eyebrow,
.section-fx.is-in .coord {
  transition-delay: 120ms;
}

/* Honor reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .showcase .showcase-watermark,
  .stat-band .sb-cell,
  .stat-band .sb-num,
  .showcase .showcase-grid > .entry-card,
  .showcase .showcase-grid > .showcase-side,
  .showcase-side > .side-card,
  .showcase .entry-card > *,
  .showcase .entry-acc li,
  .showcase .entry-stack-row .stack-chip {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  .entry-when-now::after { display: none !important; }
}

/* ============================================================
   CONTACT PAGE — slim editorial layout
   ============================================================ */

.contact-page {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 36px var(--content-pad, 32px) 96px;
}
.contact-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 64px;
}
.contact-mark { color: var(--accent); }

.contact-title {
  font-family: var(--display);
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin: 0 0 28px;
  color: var(--ink);
}
.contact-title .ital {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(95deg, #efb1a8 0%, #e26566 60%, #b84548 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.contact-title .dot { color: var(--accent); }

.contact-lede {
  font-family: var(--body);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 56px;
  max-width: 64ch;
}
.contact-lede strong { color: var(--ink); font-weight: 500; }

.contact-channels {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin-bottom: 40px;
}
.cc-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.cc-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cc-v {
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: color 200ms ease;
}
a.cc-v { color: var(--ink); }
a.cc-v:hover { color: var(--accent); }
.cc-tz, .cc-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-decoration: none;
}
.cc-link:hover { color: var(--accent); }
.contact-copy {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid rgba(236,94,148,0.4);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.contact-copy:hover { background: rgba(236,94,148,0.12); border-color: var(--accent); }

.contact-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 80px;
}

.contact-faq {
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.contact-faq-head {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.contact-faq-head .line {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.contact-faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.015);
  padding: 0;
  overflow: hidden;
  transition: border-color 200ms ease;
}
.contact-faq-item[open] { border-color: rgba(236,94,148,0.25); }
.contact-faq-item summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.contact-faq-item summary::-webkit-details-marker { display: none; }
.contact-faq-item .num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.contact-faq-item .caret {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink-3);
  transition: transform 200ms ease, color 200ms ease;
}
.contact-faq-item[open] .caret { transform: rotate(45deg); color: var(--accent); }
.contact-faq-item p {
  margin: 0;
  padding: 0 22px 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 70ch;
}
.contact-faq-item p strong { color: var(--ink); font-weight: 500; }

@media (max-width: 720px) {
  .contact-page { padding: 32px var(--content-pad, 32px) 64px; }
  .cc-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================
   ABOUT PAGE — slim editorial layout with portrait + bio
   ============================================================ */

.about-page {
  position: relative;
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
  padding: 36px var(--content-pad, 32px) 96px;
}
.about-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 64px;
}
.about-mark { color: var(--accent); }

.about-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}

.about-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  isolation: isolate;
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02);
  /* Zoom in, then nudge the framing up slightly so the face sits well in the frame. */
  transform: scale(1.333) translateY(-4%);
  transform-origin: center center;
}
.about-portrait-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: clamp(80px, 12vw, 160px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--accent);
  background: linear-gradient(160deg, rgba(236,94,148,0.18) 0%, rgba(20,17,14,1) 70%);
}
.about-portrait-tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(20,17,14,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
}

.about-body { min-width: 0; }
.about-title {
  font-family: var(--display);
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin: 0 0 36px;
  color: var(--ink);
}
.about-title .ital {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(95deg, #efb1a8 0%, #e26566 60%, #b84548 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.about-title .dot { color: var(--accent); }

.about-prose {
  font-family: var(--body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0 0 48px;
}
.about-prose p { margin: 0 0 18px; }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose strong { color: var(--ink); font-weight: 500; }
.about-prose em { color: var(--ink); font-family: var(--serif); font-style: italic; }
.about-prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(236,94,148,0.3);
  transition: border-color 200ms ease;
}
.about-prose a:hover { border-color: var(--accent); }

.about-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 48px;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about-strip-cell {
  padding: 24px 20px 22px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.about-strip-cell:last-child { border-right: none; }
.about-strip-cell dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.about-strip-cell dd {
  margin: 0;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}
.about-strip-cell dd.sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.about-strip-cell dd.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.about-strip-cell dd.live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.16), 0 0 10px rgba(74,222,128,0.5);
  animation: aboutLivePulse 2.4s ease-in-out infinite;
}
@keyframes aboutLivePulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(74,222,128,0.16), 0 0 10px rgba(74,222,128,0.5); }
  50%     { box-shadow: 0 0 0 5px rgba(74,222,128,0.08), 0 0 18px rgba(74,222,128,0.7); }
}

.about-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 900px) {
  .about-page { padding: 64px var(--content-pad, 32px); }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-portrait { max-width: 280px; aspect-ratio: 4 / 5; }
  .about-strip { grid-template-columns: 1fr; }
  .about-strip-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .about-strip-cell:last-child { border-bottom: none; }
}

/* ============================================================
   PROJECTS PAGE — editorial hero + grouped sections
   Matches the ledger aesthetic from Education / Experience.
   ============================================================ */

.proj-hero {
  position: relative;
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
  padding: 96px var(--content-pad, 32px) 56px;
}
.proj-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 56px;
}
.proj-hero-mark { color: var(--accent); }

.proj-hero-title {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.94;
  margin: 0 0 28px;
  color: var(--ink);
  max-width: 14ch;
}
.proj-hero-title .ital {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(95deg, #efb1a8 0%, #e26566 60%, #b84548 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.proj-hero-title .dot { color: var(--accent); }

.proj-hero-lede {
  font-family: var(--body);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 36px;
  max-width: 64ch;
}
.proj-hero-lede strong { color: var(--ink); font-weight: 500; }

.proj-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 72px;
}
.proj-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px 13px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, background 220ms ease;
}
.proj-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(236,94,148,0.55); }
.proj-hero-cta-num {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
  letter-spacing: 0.12em;
}
.proj-hero-cta-arrow { font-size: 14px; }
.proj-hero-cta--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}
.proj-hero-cta--ghost:hover { border-color: var(--accent); color: var(--accent); }

.proj-hero-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.phs-cell {
  padding: 28px 24px 24px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phs-cell:last-child { border-right: none; }
.phs-cell dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.phs-cell dd { margin: 0; }
.phs-num {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.phs-num--text {
  font-size: clamp(22px, 2.6vw, 32px);
  font-style: italic;
  font-family: var(--display);
  color: var(--ink-2);
}
.phs-suf {
  font-size: 11px;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--mono);
}
.phs-l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .proj-hero { padding: 64px var(--content-pad, 32px) 40px; }
  .proj-hero-title { font-size: clamp(40px, 9vw, 72px); }
  .proj-hero-strip { grid-template-columns: repeat(2, 1fr); }
  .phs-cell:nth-child(2) { border-right: none; }
  .phs-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ============================================================
   PROJECTS PAGE — grouped sections (Work / School / Side)
   Smaller cards, section headings, WIP + empty states.
   ============================================================ */

.proj-page { padding-top: 0; }

.proj-group {
  position: relative;
  padding: 56px 0 32px;
  scroll-margin-top: 96px;
}
.proj-group + .proj-group {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding-top: 80px;
}

.proj-group-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px 32px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.proj-group-eyebrow {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.proj-group-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.proj-group-title .ital {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(95deg, #efb1a8 0%, #e26566 60%, #b84548 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proj-group-meta {
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.proj-group-meta .kicker { color: var(--ink-4); font-size: 10.5px; }

.proj-grid { display: flex; flex-direction: column; gap: 16px; }

/* Smaller proj-card for the grouped sections */
.proj-page .proj-card {
  grid-template-columns: 280px 1fr;
  gap: 28px;
  padding: 20px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.015);
  transition: border-color 220ms ease, background 220ms ease, transform 220ms cubic-bezier(.2,.7,.2,1);
}
.proj-page .proj-card:last-child { border-bottom: 1px solid var(--line); }
.proj-page .proj-card:hover {
  padding: 20px;
  border-color: var(--accent);
  background: rgba(255,255,255,0.025);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -22px rgba(236,94,148,0.45);
}
.proj-page .proj-card .thumb {
  width: 280px;
  height: 200px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  contain: layout paint;
}
/* The stage internals are sized for big featured cards. Scale the whole
   stage down inside the smaller thumb so all elements stay inside. */
.proj-page .proj-card .thumb .proj-stage {
  width: 600px;
  height: 428px;
  transform: scale(0.467);
  transform-origin: top left;
  position: absolute;
  inset: 0;
}
.proj-page .proj-card .body { gap: 10px; justify-content: center; }
.proj-page .proj-card .title {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.proj-page .proj-card .desc {
  font-size: 14px;
  line-height: 1.5;
  max-width: 64ch;
}
.proj-page .proj-card .meta { gap: 6px; }
.proj-page .proj-card .meta .tag {
  font-size: 10.5px;
  padding: 3px 9px;
}
.proj-page .proj-card .arrow { width: 32px; height: 32px; font-size: 13px; }

/* WIP card — inert, pill in corner, dimmed */
.proj-card.is-wip {
  cursor: default;
  opacity: 0.85;
}
.proj-page .proj-card.is-wip:hover {
  /* WIP cards aren't navigable — kill the hover lift / shift / glow. */
  padding: 20px;
  transform: none;
  border-color: var(--line);
  background: rgba(255,255,255,0.015);
  box-shadow: none;
}
.proj-card.is-wip .thumb { filter: grayscale(0.2) brightness(0.9); }
.proj-wip-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 8px;
  border: 1px solid rgba(226,101,102,0.5);
  border-radius: 3px;
  background: rgba(20,17,14,0.7);
  backdrop-filter: blur(6px);
  z-index: 2;
}

/* "More coming" hint after a non-empty section */
.proj-more-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.proj-more-mark {
  color: var(--accent);
  font-size: 16px;
  font-weight: 500;
}

/* Empty state for school section */
.proj-empty {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px dashed var(--line-2);
  border-bottom: 1px dashed var(--line-2);
}
.proj-empty-mark {
  font-family: var(--display);
  font-size: 64px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.5;
  text-align: center;
}
.proj-empty-body h3 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.proj-empty-body h3 .accent { color: var(--accent); }
.proj-empty-body p {
  margin: 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.55;
  max-width: 64ch;
}

@media (max-width: 720px) {
  .proj-group-head { grid-template-columns: 1fr; }
  .proj-group-meta { text-align: left; align-items: flex-start; }
  .proj-page .proj-card { grid-template-columns: 1fr; }
  .proj-page .proj-card .thumb { aspect-ratio: 16/10; }
  .proj-empty { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .proj-empty-mark { text-align: left; }
}

/* ============================================================
   LEDGER SECTIONS — modern catalog layout for Education + Experience
   Inspired by editorial/agency portfolios: numbered rows, hairline
   dividers, big italic-serif accent words, monospace metadata,
   massive stat numerals. Replaces the old .showcase card layout.
   ============================================================ */

.ledger-section {
  position: relative;
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
  padding: 96px var(--content-pad, 32px) 56px;
  color: var(--ink);
}
.ledger-section + .ledger-section { padding-top: 24px; }

.ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}
.ledger-mark { color: var(--accent); }

.ledger-title {
  font-family: var(--display);
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin: 0 0 56px;
  color: var(--ink);
}
.ledger-title .ital {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(95deg, #efb1a8 0%, #e26566 60%, #b84548 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  padding-right: 0.04em;
}
.ledger-title .dot { color: var(--accent); }

/* Big stats — massive numerals, hairline dividers between cells */
.big-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 96px;
}
.bs-cell {
  padding: 36px 28px 32px;
  border-right: 1px solid var(--line);
  position: relative;
}
.bs-cell:last-child { border-right: none; }
.bs-num {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.bs-suf {
  font-size: 0.4em;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0;
}
.bs-l {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Stat reveal: count-up + lift */
.big-stats .bs-cell {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(6px);
  transition:
    opacity 800ms cubic-bezier(.2,.7,.2,1),
    transform 800ms cubic-bezier(.2,.7,.2,1),
    filter 800ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--bs-i, 0) * 120ms);
}
.big-stats.is-in .bs-cell { opacity: 1; transform: none; filter: none; }

/* Ledger list — numbered catalog rows */
.ledger-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* "Next" placeholder row inside a ledger — for in-progress / planned items. */
.ledger-future {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--line-2);
  list-style: none;
}
.lf-mark {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.lf-text {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.lf-text em { color: var(--ink); font-family: var(--serif); font-style: italic; }
.lf-when {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ledger-row {
  border-bottom: 1px solid var(--line);
  padding: 0;
  position: relative;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 800ms cubic-bezier(.2,.7,.2,1),
    transform 800ms cubic-bezier(.2,.7,.2,1),
    filter 800ms cubic-bezier(.2,.7,.2,1);
}
.ledger-row.is-in { opacity: 1; transform: none; filter: none; }

.lr-line {
  display: grid;
  grid-template-columns: 48px 120px 1fr auto 28px;
  align-items: baseline;
  gap: 28px;
  padding: 28px 0 24px;
  cursor: pointer;
  position: relative;
}
.lr-line::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}
.ledger-row:hover .lr-line::after { transform: scaleX(1); }

.lr-n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  align-self: flex-start;
  padding-top: 8px;
}
.lr-year {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  align-self: flex-start;
  padding-top: 8px;
}
.lr-titlewrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lr-title {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
  transition: color 240ms ease;
}
.ledger-row:hover .lr-title { color: var(--accent); }
.lr-org {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.lr-org .lr-sep { margin: 0 8px; opacity: 0.6; }
.lr-kind {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 14px;
}
.ledger-row.is-current .lr-kind {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ledger-row.is-current .lr-kind::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: lrPulse 1.6s ease-in-out infinite;
}
@keyframes lrPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.7); }
}
.lr-arrow {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 300;
  color: var(--ink-3);
  align-self: flex-start;
  padding-top: 4px;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), color 240ms ease;
}
.ledger-row:hover .lr-arrow { color: var(--accent); transform: translateX(4px); }

/* Body — note + detail panels + tags */
.lr-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 700ms cubic-bezier(.2,.7,.2,1);
}
.ledger-row.is-open .lr-body { max-height: 4000px; }

.lr-note {
  font-family: var(--body);
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0 0 28px;
  padding-left: calc(48px + 28px + 120px + 28px);
}

.lr-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 0 0 28px;
  padding-left: calc(48px + 28px + 120px + 28px);
}
.lr-panel { min-width: 0; }
.lr-panel--wide { grid-column: 1 / -1; }
.lr-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  margin-bottom: 4px;
}
.lr-panel-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lr-panel-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.lr-rows {
  list-style: none;
  margin: 0; padding: 0;
}
.lr-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
}
.lr-rows li:last-child { border-bottom: none; }
.lr-k { color: var(--accent); letter-spacing: 0.06em; }
.lr-v { color: var(--ink-2); letter-spacing: 0.02em; }

.lr-projects {
  list-style: none;
  margin: 0; padding: 0;
}
.lr-projects li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.lr-projects li:last-child { border-bottom: none; }
.lr-pn {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  padding-top: 3px;
}
.lr-pt {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lr-pd {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.lr-bullets {
  list-style: none;
  margin: 0; padding: 0;
  columns: 2;
  column-gap: 32px;
}
.lr-bullets li {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  break-inside: avoid;
}
.lr-bn {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  padding-top: 3px;
}

.lr-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 0 36px calc(56px + 32px + 140px + 32px);
}
.lr-tags-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-right: 8px;
}
.lr-chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  transition: border-color 220ms ease, color 220ms ease;
}
.lr-chip:hover { border-color: var(--accent); color: var(--ink); }

/* Stagger reveal of body pieces — each row animates its own children
   when the row scrolls into view. */
.ledger-row .lr-note,
.ledger-row .lr-detail,
.ledger-row .lr-tags {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms cubic-bezier(.2,.7,.2,1),
    transform 600ms cubic-bezier(.2,.7,.2,1);
}
.ledger-row.is-in .lr-note { opacity: 1; transform: none; transition-delay: 280ms; }
.ledger-row.is-in .lr-detail { opacity: 1; transform: none; transition-delay: 400ms; }
.ledger-row.is-in .lr-tags { opacity: 1; transform: none; transition-delay: 520ms; }

/* Detail panels — each row in coursework / projects / bullets list
   slides in once the row is in view. */
.ledger-row .lr-rows li,
.ledger-row .lr-projects li,
.ledger-row .lr-bullets li {
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 420ms cubic-bezier(.2,.7,.2,1),
    transform 420ms cubic-bezier(.2,.7,.2,1);
}
.ledger-row.is-in .lr-rows li,
.ledger-row.is-in .lr-projects li,
.ledger-row.is-in .lr-bullets li { opacity: 1; transform: none; }
.ledger-row.is-in .lr-rows li:nth-child(1),
.ledger-row.is-in .lr-projects li:nth-child(1),
.ledger-row.is-in .lr-bullets li:nth-child(1) { transition-delay: 520ms; }
.ledger-row.is-in .lr-rows li:nth-child(2),
.ledger-row.is-in .lr-projects li:nth-child(2),
.ledger-row.is-in .lr-bullets li:nth-child(2) { transition-delay: 580ms; }
.ledger-row.is-in .lr-rows li:nth-child(3),
.ledger-row.is-in .lr-projects li:nth-child(3),
.ledger-row.is-in .lr-bullets li:nth-child(3) { transition-delay: 640ms; }
.ledger-row.is-in .lr-rows li:nth-child(4),
.ledger-row.is-in .lr-projects li:nth-child(4),
.ledger-row.is-in .lr-bullets li:nth-child(4) { transition-delay: 700ms; }
.ledger-row.is-in .lr-rows li:nth-child(5),
.ledger-row.is-in .lr-projects li:nth-child(5),
.ledger-row.is-in .lr-bullets li:nth-child(5) { transition-delay: 760ms; }
.ledger-row.is-in .lr-rows li:nth-child(6),
.ledger-row.is-in .lr-projects li:nth-child(6),
.ledger-row.is-in .lr-bullets li:nth-child(6) { transition-delay: 820ms; }

.ledger-row .lr-chip {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 360ms cubic-bezier(.2,.7,.2,1),
    transform 360ms cubic-bezier(.2,.7,.2,1);
}
.ledger-row.is-in .lr-chip { opacity: 1; transform: none; }
.ledger-row.is-in .lr-chip:nth-child(2) { transition-delay: 580ms; }
.ledger-row.is-in .lr-chip:nth-child(3) { transition-delay: 640ms; }
.ledger-row.is-in .lr-chip:nth-child(4) { transition-delay: 700ms; }
.ledger-row.is-in .lr-chip:nth-child(5) { transition-delay: 760ms; }
.ledger-row.is-in .lr-chip:nth-child(6) { transition-delay: 820ms; }
.ledger-row.is-in .lr-chip:nth-child(7) { transition-delay: 880ms; }

/* CTA at the bottom of experience */
.ledger-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 36px 0 32px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.ledger-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(226,101,102,0.05) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 720ms cubic-bezier(.2,.7,.2,1);
}
.ledger-cta:hover::before { transform: translateX(0); }
.lc-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: lowercase;
}
.lc-text {
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.lc-text .ital {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.lc-arrow {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 300;
  color: var(--accent);
  transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
.ledger-cta:hover .lc-arrow { transform: translateX(8px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .big-stats .bs-cell,
  .ledger-row,
  .ledger-row .lr-note,
  .ledger-row .lr-detail,
  .ledger-row .lr-tags,
  .ledger-row .lr-rows li,
  .ledger-row .lr-projects li,
  .ledger-row .lr-bullets li,
  .ledger-row .lr-chip {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .lr-line::after { transform: scaleX(0) !important; transition: none !important; }
}

/* Responsive — collapse to one column on narrow screens */
@media (max-width: 900px) {
  .ledger-title { font-size: clamp(40px, 9vw, 72px); margin-bottom: 48px; }
  .big-stats { grid-template-columns: repeat(2, 1fr); }
  .bs-cell:nth-child(2) { border-right: none; }
  .bs-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .lr-line {
    grid-template-columns: 36px 1fr;
    gap: 16px;
    padding: 24px 0;
  }
  .lr-year, .lr-kind, .lr-arrow { grid-column: 2; }
  .lr-titlewrap { grid-column: 2; }
  .lr-note, .lr-detail, .lr-tags { padding-left: 52px; }
  .lr-detail { grid-template-columns: 1fr; }
  .lr-bullets { columns: 1; }
}

/* ---------- SCROLL DIAL (fixed top-right) ---------- */

.scroll-dial {
  position: fixed;
  top: 92px;
  right: 24px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 8px;
  background: rgba(20,20,20,0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
[data-theme="light"] .scroll-dial { background: rgba(255,255,255,0.7); }
.scroll-dial svg {
  display: block;
  transform: rotate(-90deg);
}
.scroll-dial .sd-track {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 2;
}
.scroll-dial .sd-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 120ms linear;
}
.scroll-dial .sd-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  min-width: 7ch;
}
@media (max-width: 720px) { .scroll-dial { display: none; } }


/* The new stat band replaces the in-card 3-tile row entirely */
.pin-stage .entry-stats { display: none !important; }


/* ---------- STAT BAND (Swiss strip with hairlines) ---------- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 6px 0 10px;
  padding: 8px 0 6px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.stat-band .sb-cell {
  position: relative;
  padding: 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 540ms ease, transform 540ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--sb-i, 0) * 80ms);
}
.stat-band.is-in .sb-cell { opacity: 1; transform: none; }
.stat-band .sb-cell + .sb-cell { border-left: 1px solid var(--line); }
.stat-band .sb-num {
  font-family: var(--display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'opsz' 60, 'wght' 600, 'SOFT' 30;
}
.stat-band .sb-suf {
  font-size: 0.5em;
  color: var(--accent);
  margin-left: 3px;
  vertical-align: top;
  position: relative;
  top: 0.18em;
  font-weight: 500;
}
.stat-band.is-accent .sb-num { color: var(--ink); }
.stat-band.is-accent .sb-cell:last-child .sb-num {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-band .sb-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); gap: 8px 0; padding: 10px 0; }
  .stat-band .sb-cell:nth-child(2n) { border-left: 1px solid var(--line); }
  .stat-band .sb-cell:nth-child(odd) { border-left: 0; }
  .stat-band .sb-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .stat-band .sb-cell:nth-child(n+3) { padding-top: 8px; }
}


/* ---------- BULLET VARIANTS (Education = phase grid, Experience = log) ---------- */

/* Education — Swiss phase grid: 4 numbered columns w/ hairlines */
.showcase[data-bullet-style="phase"] .entry-acc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px !important;
}
.showcase[data-bullet-style="phase"] .entry-acc li {
  display: block !important;
  padding: 12px 14px !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  border: 0 !important;
  position: relative;
  background: var(--bg-3);
}
[data-theme="light"] .showcase[data-bullet-style="phase"] .entry-acc li {
  background: var(--paper);
}
.showcase[data-bullet-style="phase"] .entry-acc li + li {
  border-left: 1px solid var(--line) !important;
}
.showcase[data-bullet-style="phase"] .entry-acc li::before {
  content: '/ ' counter(acc, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 6px;
  padding-top: 0 !important;
}
.showcase[data-bullet-style="phase"] .entry-acc li:hover {
  background:
    linear-gradient(180deg, rgba(226,101,102,0.07) 0%, transparent 50%),
    var(--bg-3);
  padding-left: 14px !important;
}
[data-theme="light"] .showcase[data-bullet-style="phase"] .entry-acc li:hover {
  background:
    linear-gradient(180deg, rgba(226,101,102,0.07) 0%, transparent 50%),
    var(--paper);
}

/* Experience — terminal shipped log (2 columns to keep height tight) */
.showcase[data-bullet-style="log"] .entry-acc {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 16px !important;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10,10,10,0.6);
  font-family: var(--mono);
  padding: 8px 10px !important;
  margin-top: 8px !important;
}
[data-theme="light"] .showcase[data-bullet-style="log"] .entry-acc {
  background: var(--paper-2);
}
.showcase[data-bullet-style="log"] .entry-acc li {
  display: grid !important;
  grid-template-columns: 16px 1fr !important;
  gap: 8px !important;
  padding: 3px 0 !important;
  border: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  color: var(--ink-2);
  white-space: normal;
}
.showcase[data-bullet-style="log"] .entry-acc li::before {
  content: '→';
  color: var(--accent);
  font-family: var(--mono);
  padding: 0 !important;
  font-size: 11px !important;
  text-align: left;
  line-height: 1.35;
}
.showcase[data-bullet-style="log"] .entry-acc li:hover {
  color: var(--ink);
  padding-left: 3px !important;
}

/* Phase / log items animate in sequentially when section enters */
.showcase[data-bullet-style="phase"] .entry-acc li,
.showcase[data-bullet-style="log"] .entry-acc li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(.2,.7,.2,1),
              padding-left 200ms ease, color 200ms ease, background 200ms ease;
}
.showcase.is-in[data-bullet-style="phase"] .entry-acc li,
.showcase.is-in[data-bullet-style="log"]   .entry-acc li {
  opacity: 1;
  transform: none;
}
.showcase.is-in .entry-acc li:nth-child(1) { transition-delay: 280ms; }
.showcase.is-in .entry-acc li:nth-child(2) { transition-delay: 360ms; }
.showcase.is-in .entry-acc li:nth-child(3) { transition-delay: 440ms; }
.showcase.is-in .entry-acc li:nth-child(4) { transition-delay: 520ms; }
.showcase.is-in .entry-acc li:nth-child(5) { transition-delay: 600ms; }
.showcase.is-in .entry-acc li:nth-child(6) { transition-delay: 680ms; }

@media (max-width: 720px) {
  .showcase[data-bullet-style="phase"] .entry-acc { grid-template-columns: 1fr 1fr; }
  .showcase[data-bullet-style="phase"] .entry-acc li:nth-child(2n+1) { border-left: 0 !important; }
  .showcase[data-bullet-style="phase"] .entry-acc li:nth-child(n+3) { border-top: 1px solid var(--line) !important; }
}


/* ---------- PIN STAGE — light-touch sticky reveal ---------- */
/* The section itself is normal-flow. Inside, the showcase pins
   for ~80vh while content reveals. Falls back gracefully on
   short windows. */

.pin-stage {
  position: relative;
}
.pin-stage .showcase {
  position: relative;
  /* Mild reveal-from-below */
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 700ms cubic-bezier(.2,.7,.2,1),
    transform 700ms cubic-bezier(.2,.7,.2,1),
    filter 700ms cubic-bezier(.2,.7,.2,1);
}
.pin-stage .showcase.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Watermark on the showcase: scrub-rotate with section progress */
.pin-stage .showcase-watermark {
  --rot: 0deg;
  transform: translate3d(0, var(--fx-park, 0), 0) rotate(var(--rot));
  transition: transform 60ms linear;
}
.pin-stage.exp-stage .showcase-watermark {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.4px transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.55;
}

/* Showcase title — gradient sweep that travels left→right when entering */
.pin-stage .showcase-title {
  background-image: linear-gradient(
    90deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--accent) 50%,
    var(--ink) 60%, var(--ink) 100%
  );
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 1400ms cubic-bezier(.2,.7,.2,1) 200ms;
}
.pin-stage .showcase.is-in .showcase-title {
  background-position: 0 0;
}
/* Keep the .ital span working — give it the accent gradient on top */
.pin-stage .showcase-title .ital {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}


/* ---------- Hero size guard (don't let new pieces inflate it) ---------- */
/* Eyebrow pill animation could push hero a hair taller — keep cap. */
.hero-canvas { contain: layout paint; }


/* ---------- Page composition: normalize spacing around the bridge ----- */

/* The verb bridge replaces the old margin between hero page and
   content page — kill the gap so it reads as one composition. */
.page:has(> .hero-canvas) + .verb-bridge { margin-top: 0; }
.verb-bridge + .page { padding-top: 8px !important; }


/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  .wr-word { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .vb-verb { transition: opacity 100ms !important; transform: none !important; filter: none !important; }
  .stat-band .sb-cell, .pin-stage .showcase, .showcase[data-bullet-style] .entry-acc li {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  .pin-stage .showcase-title { background-position: 0 0 !important; transition: none !important; }
  .scroll-dial .sd-fill { transition: none !important; }
}

/* ============================================================
   MOBILE OVERRIDES — keep desktop intact, fix the phone view
   Lives at the end so it wins the cascade against any earlier
   !important rules. Targets ≤ 760px and tightens at ≤ 480px.
   ============================================================ */
@media (max-width: 760px) {
  /* Disable the desktop zoom rules so layout reads at 1× on phones. */
  html { zoom: 1 !important; }

  /* --- NAV — 3-col grid on phones: brand | centered links | contact --- */
  .site-nav {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  /* On mobile show only the GG mark (logo), hide the wordmark to free space. */
  .site-nav .brand-mark { display: inline-block !important; font-size: 4.6px !important; }
  .site-nav .brand-word { display: none !important; }
  .site-nav .brand { gap: 0 !important; justify-self: start; }
  .site-nav .links {
    width: auto !important;
    margin: 0 !important;
    gap: 18px !important;
    font-size: 12.5px !important;
    justify-self: center;
  }
  .site-nav .links a { padding: 2px 0 !important; }
  .site-nav .nav-end {
    margin: 0 !important;
    justify-self: end;
  }
  .site-nav .nav-contact {
    padding: 6px 11px !important;
    font-size: 11.5px !important;
  }
  /* Hide the theme toggle on phones — saves room and dark mode is the default. */
  .site-nav .theme-toggle { display: none !important; }

  /* --- HERO --- */
  .hero-canvas {
    min-height: auto !important;
    max-height: none !important;
    padding: 24px 20px 40px !important;
    overflow: visible !important;
  }
  .hero-grid-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 0 !important;
    row-gap: 32px !important;
    padding: 24px 0 32px !important;
  }
  .hero-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-width: 100% !important;
    gap: 18px !important;
  }
  .hero-right {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: auto !important;
  }
  .hero-right .bento-card.terminal {
    min-height: 380px !important;
    max-height: 480px !important;
    width: 100% !important;
  }
  .hero-eyebrow-pill { font-size: 10px !important; padding: 4px 10px !important; }
  .hero-title {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
  }
  .hero-lede {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .hero-actions { gap: 8px !important; }
  .hero-actions .btn { padding: 9px 14px !important; font-size: 12.5px !important; }
  .hero-stack { gap: 5px !important; }
  .hero-stack .chip { padding: 4px 9px !important; font-size: 10.5px !important; }

  /* Floor row — bring it back into the document flow on mobile so it
     doesn't float over content. */
  .hero-grid-layout > .hero-floor,
  .hero-grid-layout > .scroll-cue-side {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    align-self: auto !important;
    margin-top: 8px !important;
  }
  .hero-floor {
    flex-wrap: wrap;
    font-size: 9.5px !important;
    gap: 8px !important;
  }
  .scroll-cue-side { font-size: 10px !important; justify-self: start !important; }

  /* Terminal parallax off — too wobbly on touch. */
  .hero-right .bento-card.terminal {
    transform: none !important;
  }

  /* --- VERB BRIDGE --- */
  .verb-bridge { padding: 18px 20px !important; }
  .vb-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  .vb-line { font-size: 18px !important; flex-wrap: wrap; white-space: normal; }
  .vb-progress { width: 100% !important; }

  /* --- LEDGER SECTIONS (Education / Experience) --- */
  .ledger-section { padding: 56px 20px 40px !important; }
  .ledger-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 10px !important;
    margin-bottom: 32px !important;
  }
  .ledger-title {
    font-size: clamp(34px, 10vw, 48px) !important;
    margin-bottom: 32px !important;
  }
  .big-stats { grid-template-columns: repeat(2, 1fr) !important; margin-bottom: 48px !important; }
  .bs-cell { padding: 22px 16px 20px !important; }
  .bs-cell:nth-child(2) { border-right: none; }
  .bs-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .bs-num { font-size: clamp(28px, 8vw, 40px) !important; }
  .bs-l { font-size: 9.5px !important; margin-top: 8px !important; }

  .lr-line {
    grid-template-columns: 32px 1fr auto !important;
    gap: 12px !important;
    padding: 22px 0 18px !important;
    align-items: start !important;
  }
  .lr-n { padding-top: 4px !important; }
  .lr-year {
    grid-column: 2 / -1;
    grid-row: 1;
    padding-top: 0 !important;
    font-size: 11px !important;
    margin-bottom: -4px;
  }
  .lr-titlewrap { grid-column: 2; grid-row: 2; }
  .lr-title { font-size: 18px !important; }
  .lr-org { font-size: 10.5px !important; }
  .lr-kind {
    grid-column: 3;
    grid-row: 2;
    padding-top: 0 !important;
    font-size: 9px !important;
    text-align: right;
  }
  .lr-arrow { display: none !important; }
  .lr-note,
  .lr-detail,
  .lr-tags { padding-left: 0 !important; }
  .lr-detail { grid-template-columns: 1fr !important; gap: 18px !important; }
  .lr-bullets { columns: 1 !important; }
  .lr-tags { gap: 6px; padding-bottom: 24px !important; }
  .lr-chip { font-size: 10.5px !important; padding: 4px 9px !important; }
  .ledger-future { grid-template-columns: 56px 1fr !important; gap: 10px !important; }
  .ledger-future .lf-when { display: none !important; }

  .ledger-cta {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 0 !important;
  }
  .lc-text { font-size: 17px !important; }

  /* --- PROJECTS PAGE --- */
  .proj-hero { padding: 36px 20px 32px !important; }
  .proj-hero-head {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    margin-bottom: 32px !important;
  }
  .proj-hero-title { font-size: clamp(38px, 12vw, 56px) !important; max-width: 100% !important; margin-bottom: 20px !important; }
  .proj-hero-lede { font-size: 14px !important; margin-bottom: 28px !important; }
  .proj-hero-strip { grid-template-columns: 1fr !important; }
  .phs-cell { border-right: none !important; border-bottom: 1px solid var(--line); padding: 18px 16px !important; }
  .phs-cell:last-child { border-bottom: none; }
  .phs-num { font-size: clamp(28px, 8vw, 38px) !important; }
  .proj-hero-cta { padding: 11px 14px !important; font-size: 11px !important; }

  .proj-page { padding: 0 20px !important; }
  .proj-group { padding: 40px 0 24px !important; }
  .proj-group + .proj-group { margin-top: 32px !important; padding-top: 48px !important; }
  .proj-group-head { grid-template-columns: 1fr !important; gap: 8px !important; padding-bottom: 14px !important; margin-bottom: 18px !important; }
  .proj-group-title { font-size: clamp(28px, 8vw, 36px) !important; }
  .proj-group-meta { text-align: left !important; align-items: flex-start !important; }

  .proj-page .proj-card {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  .proj-page .proj-card .thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
  }
  .proj-page .proj-card .thumb .proj-stage {
    width: 600px;
    height: 428px;
    transform: scale(calc((100vw - 72px) / 600));
    transform-origin: top left;
  }
  .proj-page .proj-card .title { font-size: 18px !important; }
  .proj-page .proj-card .desc { font-size: 13px !important; }

  .proj-empty { grid-template-columns: 1fr !important; gap: 12px !important; text-align: left; }
  .proj-empty-mark { text-align: left !important; }

  /* --- ABOUT PAGE --- */
  .about-page { padding: 28px 20px 56px !important; }
  .about-head {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    margin-bottom: 32px !important;
  }
  .about-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .about-portrait { max-width: 220px; aspect-ratio: 4/5; }
  .about-title { font-size: clamp(34px, 10vw, 48px) !important; margin-bottom: 22px !important; }
  .about-prose { font-size: 14.5px !important; margin-bottom: 32px !important; }
  .about-strip { grid-template-columns: 1fr !important; margin-bottom: 32px !important; }
  .about-strip-cell { border-right: none !important; border-bottom: 1px solid var(--line); }
  .about-strip-cell:last-child { border-bottom: none; }
  .about-ctas { flex-direction: column; align-items: stretch; }
  .about-ctas .proj-hero-cta { justify-content: center; }

  /* --- CONTACT PAGE --- */
  .contact-page { padding: 28px 20px 56px !important; }
  .contact-head {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    margin-bottom: 32px !important;
  }
  .contact-title { font-size: clamp(38px, 12vw, 56px) !important; margin-bottom: 22px !important; }
  .contact-lede { font-size: 14.5px !important; margin-bottom: 32px !important; }
  .cc-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas: 'k k' 'v t' !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    padding: 16px 0 !important;
    align-items: center;
  }
  .cc-row .cc-k { grid-area: k; }
  .cc-row .cc-v { grid-area: v; }
  .cc-row .contact-copy,
  .cc-row .cc-tz,
  .cc-row .cc-link { grid-area: t; }
  .cc-v { font-size: 15px !important; }
  .contact-cta-row { flex-direction: column; align-items: stretch; margin-bottom: 56px !important; }
  .contact-cta-row .proj-hero-cta { justify-content: center; }
  .contact-faq-item summary {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 16px 18px !important;
    font-size: 15px !important;
  }
  .contact-faq-item p { padding: 0 18px 18px !important; font-size: 13.5px !important; }

  /* --- FOOTER --- */
  .site-footer { padding: 36px 20px 24px !important; }
  .ft-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .ft-col { text-align: left !important; }
  .ft-end { align-items: flex-start !important; }
}

/* Even tighter at very small phones (≤ 380px) */
@media (max-width: 380px) {
  .site-nav .links { gap: 14px !important; font-size: 12px !important; }
  .site-nav .nav-contact { padding: 6px 11px !important; font-size: 11.5px !important; }
  .hero-title { font-size: clamp(30px, 11vw, 40px) !important; }
  .ledger-title, .proj-hero-title, .contact-title, .about-title {
    font-size: clamp(30px, 10.5vw, 40px) !important;
  }
  .big-stats { grid-template-columns: 1fr !important; }
  .bs-cell { border-right: none !important; border-bottom: 1px solid var(--line); }
  .bs-cell:last-child { border-bottom: none; }
}