/* Palette A: Sage night. Every colour on the site comes from these tokens. */
:root {
  --bg: #0F1412;
  --surface: #18201D;
  --border: #2A3530;
  --text: #E8ECE9;
  --muted: #9AA8A1;
  --sage: #8FB09A;
  --accent: #A9CDB4;
  --on-accent: #0F1412;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 5vw, 48px);
  --max: 1100px;
  --radius: 8px;

  --amber: #D19A5E;
  --bar-rec: #6E8C7B;
  --bar-idx: #33443C;
  --bar-idx-legend: #4A5F55;
  --term-bg: #0B100E;
  --track: #26322D;
  --row-line: #222C28;
  --hover: #1D2723;
  --row-me: #1A2420;
  --header-bg: rgba(15, 20, 18, 0.88);
  --pin-bg: rgba(15, 20, 18, 0.82);
  --halo: rgba(169, 205, 180, 0.25);
  --tenure: rgba(169, 205, 180, 0.05);
  --shadow: rgba(0, 0, 0, 0.45);
  --band: #131A17;

  color-scheme: dark;
}

/* Palette B: Sage day. A warm, slightly green paper rather than plain white; charcoal text;
   deeper sage so links and buttons keep at least 4.5:1 contrast. */
:root[data-theme="light"] {
  --bg: #F3F5F0;
  --surface: #FBFCF9;
  --border: #D5DDD6;
  --text: #17201C;
  --muted: #4F5E56;
  --sage: #4A7459;
  --accent: #2F6A4A;
  --on-accent: #F7F9F5;
  --amber: #9A5B1E;
  --bar-rec: #6E9A80;
  --bar-idx: #C9D6CD;
  --bar-idx-legend: #B4C5B9;
  --term-bg: #1A231F;
  --track: #DCE4DE;
  --row-line: #E3E9E4;
  --hover: #EEF2EC;
  --row-me: #E6EFE8;
  --header-bg: rgba(243, 245, 240, 0.9);
  --pin-bg: rgba(251, 252, 249, 0.92);
  --halo: rgba(47, 106, 74, 0.22);
  --tenure: rgba(47, 106, 74, 0.06);
  --shadow: rgba(23, 32, 28, 0.14);
  --band: #EAEFE9;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  --bg: #F3F5F0;
  --surface: #FBFCF9;
  --border: #D5DDD6;
  --text: #17201C;
  --muted: #4F5E56;
  --sage: #4A7459;
  --accent: #2F6A4A;
  --on-accent: #F7F9F5;
  --amber: #9A5B1E;
  --bar-rec: #6E9A80;
  --bar-idx: #C9D6CD;
  --bar-idx-legend: #B4C5B9;
  --term-bg: #1A231F;
  --track: #DCE4DE;
  --row-line: #E3E9E4;
  --hover: #EEF2EC;
  --row-me: #E6EFE8;
  --header-bg: rgba(243, 245, 240, 0.9);
  --pin-bg: rgba(251, 252, 249, 0.92);
  --halo: rgba(47, 106, 74, 0.22);
  --tenure: rgba(47, 106, 74, 0.06);
  --shadow: rgba(23, 32, 28, 0.14);
  --band: #EAEFE9;
  color-scheme: light;
}
}

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; margin: 0 0 0.5em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.125rem; }

main > section, .site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem var(--gutter);
}

/* Preview builds only: content still waiting for the owner's approval. */
.pending {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 2px 8px;
  border: 1px dashed var(--amber);
  border-radius: 999px;
  color: var(--amber);
  font: 400 0.7rem var(--font-mono);
  vertical-align: middle;
}

/* ---------- Header and navigation ---------- */

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 20;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: none;
  padding: 10px var(--gutter);
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-name { color: var(--text); text-decoration: none; font-weight: 500; white-space: nowrap; }
.site-header nav { margin-left: auto; }
.site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.site-header nav a {
  display: inline-block;
  padding: 8px 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
}
.site-header nav a:hover { color: var(--text); }
html { scroll-padding-top: 72px; }

@media (max-width: 759px) {
  .site-header { flex-wrap: wrap; row-gap: 4px; }
  .site-name { font-size: 0.95rem; }
  .site-header nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .site-header nav a { padding: 6px 8px 6px 0; margin-right: 8px; }
  .view-switch { margin-left: auto; }
  html { scroll-padding-top: 110px; }
}

/* ---------- Hero ---------- */

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 6rem) var(--gutter) 3rem;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 88vh; }
}

.hero-command {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent);
  margin: 0 0 1.5rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.25em;
}

.hero-role {
  color: var(--sage);
  font-size: clamp(1rem, 2vw, 1.15rem);
  margin: 0 0 1.5rem;
}

.hero-result {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 34rem;
  margin: 0 0 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: border-color 0.2s, background-color 0.2s;
}
.btn:hover { border-color: var(--sage); color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--text); border-color: var(--text); color: var(--on-accent); }

.hero-photo {
  margin: 0;
  max-width: 420px;
  justify-self: center;
}
.hero-photo img { border-radius: 12px; }

@media (max-width: 759px) {
  .hero { gap: 1.5rem; padding-top: 2rem; }
  .hero-photo { width: 132px; order: -1; justify-self: start; }
  .hero-photo img { aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; border-radius: 50%; }
  .hero-command { margin-bottom: 1rem; }
}

/* Crawler effect. Only runs when JavaScript adds .js, so the content
   is always readable without it (crawlers, no-JS browsers). */
.js .hero-command .typed::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.2em;
  background: var(--accent);
  animation: blink 1s steps(1) infinite;
}
.js .hero.is-done .hero-command .typed::after { animation: none; opacity: 0; }

.js .hero .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .hero .reveal.is-visible { opacity: 1; transform: none; }

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero-command .typed::after { animation: none; }
}

/* ---------- Markets: globe + flip cards ---------- */

.markets {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 860px) {
  .markets { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.globe {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  margin: 1rem auto 1.5rem;
}
.globe canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.globe.is-ready canvas { opacity: 1; }

.cards { display: grid; gap: 16px; }

.card-inner {
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Both faces share one grid cell, so the card is as tall as its longer face. */

/* Without JavaScript both faces simply stack; the flip needs .js. */
html:not(.js) .card-inner { cursor: default; gap: 8px; }

.js .card { perspective: 1200px; }
.js .card-inner { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transform-style: preserve-3d; }

.js .card-inner[aria-pressed="true"] { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .js .card-inner { transition: none; }
}

/* ---------- Shared section bits ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--sage);
  margin: 0 0 0.5rem;
}

main > section h2 { margin-bottom: 1.5rem; }

/* ---------- About ---------- */

#about .about-text {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.55;
  max-width: 44rem;
  margin: 0;
}

/* ---------- What's new: changelog as a terminal panel ---------- */

.changelog {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.7;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(20px, 4vw, 32px);
  max-width: 48rem;
}
.changelog h3 { font-family: var(--font-mono); font-size: 0.95rem; color: var(--accent); margin-bottom: 1.25rem; }
.changelog h4 { font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); font-weight: 400; margin: 0 0 0.5rem; }
.release + .release { margin-top: 1.25rem; }
.changelog ul { list-style: none; margin: 0; padding: 0; }
.change { display: grid; grid-template-columns: 1.5ch 1fr; gap: 1ch; }
.change-type { font-weight: 400; }
.change-added .change-type { color: var(--accent); }
.change-changed .change-type { color: var(--amber); }

/* ---------- Experience timeline ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 52rem;
}
.role {
  position: relative;
  display: grid;
  gap: 0.25rem 2rem;
  padding: 0 0 1.75rem 1.75rem;
  border-left: 1px solid var(--border);
}
.role:last-child { padding-bottom: 0; }
.role::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--sage);
}
.role:first-child::before { background: var(--accent); border-color: var(--accent); }
.role h3 { margin: 0; }

@media (min-width: 760px) {
  .role { grid-template-columns: 11rem 1fr; }
  
}

/* ---------- Skills ---------- */

.skills { margin: 0; display: grid; gap: 1rem; max-width: 60rem; }
.skills > div {
  display: grid;
  gap: 0.5rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.skills > div:last-child { border-bottom: 0; padding-bottom: 0; }
.skills dt { font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent); }
.skills dt::after { content: ":"; }
.skills dd { margin: 0; line-height: 1.7; }

@media (min-width: 760px) {
  .skills > div { grid-template-columns: 8rem 1fr; }
}

/* ---------- Education ---------- */

.education {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 760px) {
  .education { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.education li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
}
.education h3 { margin-bottom: 0.25rem; }
.education p { margin: 0; }
.education .edu-dates { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); margin-top: 0.75rem; }

/* ---------- Contact ---------- */

#contact { padding-bottom: 5rem; }
.contact-text { color: var(--muted); margin: 0 0 0.5rem; }
.contact-email {
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
  overflow-wrap: anywhere;
}
.contact-email a { color: var(--text); text-decoration-color: var(--sage); text-decoration-thickness: 2px; }
.contact-email a:hover { color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.site-footer p { margin: 0; }

/* ---------- Human view / AI view switch ---------- */

.view-switch {
  display: none;
  flex: none;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.js .view-switch { display: flex; }
.view-switch button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 500 0.8rem var(--font-sans);
  cursor: pointer;
}
.view-switch button:hover { color: var(--text); }
.view-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.ai-view {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem var(--gutter) 4rem;
}
.ai-view-note { color: var(--muted); max-width: 40rem; margin: 0 0 2rem; }
.ai-view-text {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(20px, 4vw, 32px);
  margin: 0;
}

/* In AI view, the designed page steps aside. */
.is-ai-view main,
.is-ai-view .site-footer { display: none; }

.site-footer .footer-crawlers { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.8rem; }
.footer-crawlers a { color: var(--muted); }
.footer-crawlers a:hover { color: var(--accent); }

@media (max-width: 759px) {
  .view-switch button { padding: 0 11px; }
}

/* ---------- About, section intros ---------- */

.section-intro { color: var(--muted); max-width: 44rem; margin: -0.75rem 0 2rem; }

/* ---------- Selected work ---------- */

.work-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }

.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li {
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------- Experience details ---------- */

.role details { margin-top: 0.5rem; }
.role summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; width: fit-content; }
.role details ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.role details li + li { margin-top: 0.35rem; }
.role details p { margin: 0.5rem 0 0; font-size: 0.9rem; }

/* ---------- Recommendations ---------- */

.quote { margin: 0; padding: 24px; background: var(--surface); border-left: 3px solid var(--sage); border-radius: var(--radius); }
.quote blockquote { margin: 0; }
.quote figcaption { margin-top: 0.75rem; color: var(--muted); font-size: 0.875rem; }
.quote figcaption strong { display: block; color: var(--text); font-weight: 500; }
.quotes { display: grid; gap: 16px; }
@media (min-width: 760px) { .quotes { grid-template-columns: 1fr 1fr; } .quotes .quote:first-child { grid-column: 1 / -1; } }
.quote blockquote p { margin: 0; line-height: 1.65; }

/* ---------- Case-study pages ---------- */

.case { max-width: 46rem; margin: 0 auto; padding: 3rem var(--gutter) 4rem; }
.case h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 0.5rem; }
.case h2 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; }
.case p { line-height: 1.7; }
.case-subtitle { color: var(--sage); font-size: 1.125rem; margin: 0; }
.case-meta { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0 0; }
.breadcrumb ol { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--border); }
.breadcrumb a { color: var(--muted); }
.evidence {
  margin-top: 3rem;
  padding: clamp(20px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.evidence h2 { margin-top: 0; }
.evidence ul { padding-left: 1.1rem; }
.evidence li + li { margin-top: 0.4rem; }
.evidence-method, .evidence-note { color: var(--muted); font-size: 0.85rem; }
.evidence-note { border-top: 1px dashed var(--border); padding-top: 0.75rem; }
.case-cta { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.work-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 2rem; font-size: 0.9rem; }
.evidence h3 { font: 400 .8rem var(--font-mono); color: var(--accent); margin: 1.5rem 0 .5rem; text-transform: none; }
.evidence-links { list-style: none; padding: 0; }
.evidence-links li { padding: .5rem 0; border-top: 1px solid var(--border); }
.evidence-meta { display: block; color: var(--muted); font-size: .8rem; }

/* ---------- Motion: career redirect chain (About) ---------- */
.term { background: var(--term-bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin: 0 0 1.75rem; max-width: 52rem; font: 0.85rem/1.9 var(--font-mono); overflow-x: auto; }
.term-cmd { color: var(--accent); margin: 0; }
.hops { list-style: none; margin: 0; padding: 0; }
.hop { display: grid; grid-template-columns: 7ch 13ch 1fr; gap: 1ch; white-space: nowrap; }
.hop-code { color: var(--amber); }
.hop.ok .hop-code { color: var(--accent); }
.hop-where { color: var(--muted); }
.term-foot { color: var(--muted); margin: 0; }
.js .term .hop, .js .term .term-foot { opacity: 0; transform: translateX(-8px); }
.js .term.run .hop, .js .term.run .term-foot { animation: hop-in .45s cubic-bezier(.2,.7,.2,1) forwards; }
.js .term.run .hop:nth-child(2) { animation-delay: .6s; }
.js .term.run .hop:nth-child(3) { animation-delay: 1.2s; }
.js .term.run .hop:nth-child(4) { animation-delay: 1.8s; }
.js .term.run .term-foot { animation-delay: 2.6s; }
.js .term.run .hop.ok .hop-path { animation: glow 1.2s ease 2.3s forwards; }
@keyframes hop-in { to { opacity: 1; transform: none; } }
@keyframes glow { 50% { color: var(--on-accent); background: var(--accent); } 100% { color: var(--accent); } }
@media (max-width: 759px) { .hop { grid-template-columns: 7ch 1fr; } .hop-where { grid-column: 2; white-space: normal; line-height: 1.4; margin-bottom: 6px; } }

/* ---------- Motion: charts in case studies ---------- */
.chart { margin: 2.5rem 0 0; padding: clamp(16px, 3vw, 24px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.chart figcaption { font-size: 0.95rem; margin-bottom: 1rem; }
.chart-kicker { display: block; font: 0.75rem var(--font-mono); color: var(--accent); margin-bottom: 4px; }
.chart-source { font: 0.7rem/1.5 var(--font-mono); color: var(--muted); margin: 1rem 0 0; }
.chart-fallback { margin: 0; color: var(--muted); }
.rank-climb.is-live .chart-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rank-ui { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
.serp { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.serp-q { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font: 0.8rem var(--font-mono); }
.serp-q b { font-weight: 400; }
.serp-q span { color: var(--muted); }
.serp-rows { position: relative; height: 264px; }
.serp-row { position: absolute; left: 0; right: 0; height: 44px; display: grid; grid-template-columns: 3ch 1fr; gap: 10px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--row-line); transition: transform .9s cubic-bezier(.3,.8,.2,1); color: var(--muted); }
.serp-pos { font: 0.75rem var(--font-mono); }
.serp-bar { height: 8px; border-radius: 4px; background: var(--track); }
.serp-row.me { z-index: 2; background: var(--row-me); }
.serp-row.me .serp-pos { color: var(--accent); }
.serp-label { justify-self: start; background: var(--accent); color: var(--on-accent); font-size: 0.78rem; font-weight: 500; padding: 3px 10px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rank-date { font-size: 1.9rem; font-weight: 500; line-height: 1; margin: 0; }
.rank-note, .rank-pos-note { font: 0.75rem var(--font-mono); color: var(--muted); margin: 6px 0 0; }
.rank-pos { font-size: 3.6rem; font-weight: 500; line-height: 1; color: var(--accent); margin: 18px 0 0; }
.rank-spark { width: 100%; height: 90px; margin-top: 14px; }
.rank-spark path { fill: none; stroke: var(--accent); stroke-width: 2; }
.rank-spark line { stroke: var(--border); }
.rank-spark text { font: 10px var(--font-mono); fill: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.stat-n { font-size: 2rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-unit { color: var(--muted); }
.stat p { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }
.authority-plot svg { width: 100%; height: 230px; display: block; margin-top: 14px; }
.authority-plot .line { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.authority-plot .bar-rec { fill: var(--bar-rec); }
.authority-plot .bar-idx { fill: var(--bar-idx); }
.authority-plot .tenure { fill: var(--tenure); }
.authority-plot .ax { font: 10px var(--font-mono); fill: var(--muted); }
.authority-plot .lab { font: 11px var(--font-sans); fill: var(--text); }
@media (max-width: 759px) { .rank-ui { grid-template-columns: 1fr; } .rank-pos { font-size: 2.6rem; } }

/* ---------- Motion: crawl & render ---------- */
.crawl-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.render-status { font: 0.7rem var(--font-mono); color: var(--muted); margin: -0.25rem 0 0.75rem; }
.render-status b { color: var(--accent); font-weight: 400; }
.rendering > :not(.eyebrow):not(.render-status) { opacity: 0.35; transition: opacity .3s ease; }
section > * { transition: opacity .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .js .term .hop, .js .term .term-foot { opacity: 1; transform: none; animation: none !important; }
  .serp-row { transition: none; }
}

/* ---------- Case studies ---------- */

.case-result { font: 500 1.35rem/1.2 var(--font-mono); color: var(--accent); margin: 0.4rem 0 0; }
.case .case-result { font-size: 1.1rem; margin: 0 0 0.25rem; }

.case .chart { margin-top: 2rem; }
.authority-plot .leg-rec { fill: var(--bar-rec); }
.authority-plot .leg-idx { fill: var(--bar-idx-legend); }

/* ---------- Hierarchy (option A) ---------- */
/* Three title tiers: key sections, regular sections, minor sections. */
main > section h2 { font-size: clamp(1.35rem, 2.4vw, 1.65rem); }
main > section.key h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
main > section.minor h2 { font-size: 1.2rem; margin-bottom: 1rem; }
main > section.minor { padding-top: 2.5rem; padding-bottom: 2.5rem; }
#about .about-text + .about-text { margin-top: 1rem; }

/* Proof strip under the hero */
.proof { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--max); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.proof li { border: 1px solid var(--border); border-left-width: 0; background: var(--surface); }
.proof li:first-child { border-left-width: 1px; border-radius: 12px 0 0 12px; }
.proof li:last-child { border-radius: 0 12px 12px 0; }
.proof a { display: block; height: 100%; padding: 18px; text-decoration: none; color: var(--text); transition: background .2s ease; }
.proof a:hover { background: var(--hover); }
.proof-big { display: block; font: 500 clamp(1.3rem, 2.4vw, 1.7rem)/1.1 var(--font-mono); color: var(--accent); }
.proof-small { display: block; margin-top: 8px; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 759px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof li, .proof li:first-child, .proof li:last-child { border-width: 1px; border-radius: 10px; }
  .proof { gap: 8px; }
}

/* Featured case + compact rows */
.feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; padding: clamp(18px, 3vw, 26px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.feature h3 { font-size: 1.2rem; margin: 0.25rem 0 0.5rem; }
.feature h3 a { color: var(--text); text-decoration: none; }
.feature h3 a:hover { color: var(--accent); }
.feature p { margin: 0; color: var(--muted); }
.feature .work-meta { margin: 0; }

.feature-spark { width: 100%; height: 140px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.feature-spark path { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.feature-spark line { stroke: var(--border); }
.feature-spark text { font: 10px var(--font-mono); fill: var(--muted); }
.case-rows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.case-row { display: grid; grid-template-columns: 11ch 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }

.case-row a { color: var(--text); text-decoration: none; font-weight: 500; }
.case-row a:hover { color: var(--accent); }
.case-row small { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
@media (max-width: 759px) { .feature, .case-rows { grid-template-columns: 1fr; } }

/* Featured quote */
.quote-featured { border-left-width: 3px; border-left-color: var(--accent); padding: clamp(20px, 3vw, 28px); }
.quote-featured blockquote p { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; color: var(--text); }

/* Employer rows with result tags */

.tags-results { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags-results a { display: block; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 0.78rem; text-decoration: none; }
.tags-results a:hover { border-color: var(--sage); color: var(--text); }
.tags-results b { font: 500 0.85rem var(--font-mono); color: var(--accent); margin-right: 4px; }

/* Case pages: the result is the biggest thing */
.case .case-result { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.05; margin: 0.25rem 0 0.5rem; }
.case h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }

/* ---------- Folded section: skills, what's new, education ---------- */

.fold-h { font-size: 1rem; font-family: var(--font-mono); font-weight: 400; color: var(--accent); margin: 0 0 0.75rem; }
.fold .skills { gap: 0.6rem; }
.fold .skills > div { padding-bottom: 0.6rem; }
.fold .skills dd { font-size: 0.9rem; }

.fold .changelog { padding: 18px; }
.fold .changelog h3 { font-size: 0.85rem; }
.fold .education { grid-template-columns: 1fr; }
.fold .education li { padding: 16px; }
.fold .education h3 { font-size: 0.95rem; }

/* ---------- Globe with principle pins ---------- */
.markets { display: block; text-align: center; }
.markets .markets-intro { margin: 0 auto 1.5rem; color: var(--muted); }
.globe-stage { position: relative; width: min(100%, 540px); margin: 0 auto; }
.globe-stage .globe { width: 100%; max-width: none; margin: 0; }
.pins { position: absolute; inset: 0; pointer-events: none; display: none; }
.globe-stage.is-live .pins { display: block; }
.pin { position: absolute; transform: translate(-17px, -50%); pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--pin-bg); color: var(--text); font: 0.75rem var(--font-mono); cursor: pointer; transition: opacity .3s ease, border-color .2s ease; white-space: nowrap; }
.pin:hover, .pin[aria-expanded="true"] { border-color: var(--accent); }
.pin-dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 5px, var(--halo) 6px 100%); flex: none; }
.pin.is-behind { opacity: 0; pointer-events: none; }
.pin.is-behind .pin-label { display: none; }

.pin-card-where { margin: 0; font: 0.72rem var(--font-mono); color: var(--accent); }
.pin-card-title { margin: 4px 0 2px; font-size: 1.15rem; }
.pin-card-tagline { margin: 0 0 6px; color: var(--sage); }
.pin-card-text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }

.globe-hint { margin: 0.5rem 0 0; font: 0.75rem var(--font-mono); color: var(--muted); display: none; }
.js .globe-hint { display: block; }
/* The principles list: the readable version without JavaScript, and what screen readers and crawlers get. */
.principles { list-style: none; margin: 1.5rem auto 0; padding: 0; display: grid; gap: 12px; max-width: 46rem; text-align: left; }
.principles h3 { font-size: 1rem; margin: 0; }
.principle-where { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.principle-tagline { color: var(--sage); margin: 2px 0 4px; }
.principles p { margin: 0; color: var(--muted); }
.js .principles { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (max-width: 759px) {
  .pin-label { display: none; }
  .pin[aria-expanded="true"] .pin-label { display: inline; }
  .pin { padding: 4px; transform: translate(-17px, -50%); }
  .pin[aria-expanded="true"] { padding-right: 10px; }
  
  
}
@media (prefers-reduced-motion: reduce) { .pin { transition: none; } }

/* The career terminal is a terminal in both themes. */
:root[data-theme="light"] .term {
  --text: #E8ECE9; --muted: #9AA8A1; --accent: #A9CDB4; --on-accent: #0F1412; --amber: #D19A5E;
  color: var(--text); border-color: #1A231F;
}

/* ---------- Header tools: Download CV + theme toggle ---------- */
.header-tools { display: flex; align-items: center; gap: 8px; }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.theme-toggle { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.theme-toggle:hover { color: var(--text); border-color: var(--sage); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html:not(.js) .theme-toggle { display: none; }
.btn-cv { display: inline-flex; align-items: center; gap: 8px; }
.cv-meta { font: 0.68rem var(--font-mono); color: var(--muted); }
.btn-primary .cv-meta { color: inherit; opacity: 0.75; }
.btn-cv.is-pending { opacity: 0.6; cursor: not-allowed; border-style: dashed; }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 0.8rem; }
@media (max-width: 1179px) { .header-cv { display: none; } }

/* Mobile: Download CV bar pinned to the bottom once the hero buttons scroll away. */
.cv-bar { display: none; }
@media (max-width: 759px) {
  .cv-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--header-bg); border-top: 1px solid var(--border);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(110%); transition: transform .3s ease; }
  .cv-bar.is-shown { transform: none; }
  .cv-bar .btn { justify-content: center; min-height: 44px; }
  .site-footer { padding-bottom: 6rem; }
  .is-ai-view .cv-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cv-bar { transition: none; } }

@media (max-width: 759px) {
  .site-header { column-gap: 8px; }
  .site-name { font-size: 0.9rem; margin-right: auto; }
  .header-tools { order: 2; }
  .view-switch { order: 2; margin-left: 0; }
  .theme-toggle { width: 34px; height: 34px; }
  .view-switch button { padding: 0 9px; font-size: 0.72rem; min-height: 32px; }
  .cv-bar .btn { font-size: 0.9rem; white-space: nowrap; }
}
@media (max-width: 359px) { .view-switch button { padding: 0 7px; } }

/* ---------- Archive receipts ---------- */
.receipts { margin-top: 2.5rem; }
.receipts-intro { color: var(--muted); font-size: 0.9rem; }
.receipt { margin: 1.5rem 0 0; }
.receipt-shot { position: relative; display: block; line-height: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.receipt-shot img { width: 100%; height: auto; display: block; }
.receipt-shot:focus-visible { outline-offset: 4px; }
.hl { position: absolute; border-radius: 4px; box-shadow: 0 0 0 9999px rgba(15, 20, 18, 0); transition: box-shadow .9s ease .6s; }
.hl::before { content: ""; position: absolute; inset: 0; background: rgba(169, 205, 180, 0.55); mix-blend-mode: multiply; border-radius: 4px; transform-origin: left; transform: scaleX(0); }
.hl::after { content: ""; position: absolute; inset: -4px; border: 2px solid #2F6A4A; border-radius: 6px; opacity: 0; transition: opacity .3s ease 1s; }
.receipt.run .hl { box-shadow: 0 0 0 9999px rgba(15, 20, 18, 0.45); }
.receipt.run .hl::before { transform: scaleX(1); transition: transform .7s cubic-bezier(.5,0,.2,1) .3s; }
.receipt.run .hl::after { opacity: 1; }
html:not(.js) .hl::before { transform: none; } html:not(.js) .hl::after { opacity: 1; }
.receipt figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.receipt-date { display: block; font: 0.72rem var(--font-mono); color: var(--accent); }
.receipt figcaption a { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hl, .hl::before, .hl::after { transition: none !important; } }

/* Hero: aligned buttons with icons; the crawl result line reads more clearly */
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; white-space: nowrap; line-height: 1; }
.hero-actions .btn .icon { width: 16px; height: 16px; }
.hero-actions .btn-primary .icon { order: 2; }
.hero-actions .btn-cv .cv-meta { font-size: 0.66rem; letter-spacing: 0.02em; }
.hero-result { color: var(--text); opacity: 0.86; border-left-color: var(--sage); }
:root[data-theme="light"] .hero-result { opacity: 0.9; }

/* Proof strip: number, what, where/when */
.proof a { display: flex; flex-direction: column; gap: 6px; }
.proof-big { font-size: clamp(1.6rem, 2.8vw, 2rem); }
.proof-small { margin-top: 0; font-size: 0.9rem; line-height: 1.4; color: var(--text); }
.proof-meta { font: 0.7rem/1.4 var(--font-mono); color: var(--muted); margin-top: auto; }

/* Results shown as from → to */
.feature-result, .row-result { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); color: var(--accent); }
.feature-result-from, .row-result-from { font-size: 0.85rem; color: var(--muted); }
.feature-result-to { font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 500; line-height: 1; }
.feature h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); margin: 0.6rem 0 0.4rem; }
.feature-more { margin-top: 0.9rem !important; font-size: 0.9rem; }
.feature-more a { display: inline-flex; align-items: center; gap: 6px; }

/* Case rows: result + headline + one-line story, whole row clickable */
.case-row { display: block; padding: 0; border-bottom: 1px solid var(--border); }
.case-row > a { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; padding: 16px 4px; color: var(--text); text-decoration: none; border-radius: 6px; transition: background .2s ease; }
.case-row > a:hover { background: var(--hover); }
.row-result { flex-direction: column; gap: 2px; }
.row-result-to { font-size: 1.6rem; font-weight: 500; line-height: 1; }
.case-row-text strong { display: block; font-weight: 500; line-height: 1.35; }
.case-row > a:hover strong { color: var(--accent); }
.case-row-text span { display: block; margin-top: 4px; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }

/* Recommendations: photo, name, role, company logo; key phrase highlighted */
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--sage); border-radius: 12px; padding: clamp(18px, 3vw, 26px); }
.quote blockquote p { color: var(--muted); line-height: 1.65; }
.quote mark { background: none; color: var(--text); font-weight: 500; box-shadow: inset 0 -0.45em 0 var(--halo); }
.quote figcaption { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--border); }
.quote-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.quote-who strong { display: block; color: var(--text); font-weight: 500; }
.quote-who span { display: block; font-size: 0.8rem; color: var(--muted); }
.quote-logo { width: 96px; height: auto; opacity: 0.85; }
:root:not([data-theme="light"]) .quote-logo { filter: brightness(0) invert(1); opacity: 0.6; }
.quote-featured { border-left-color: var(--accent); }
.quote-featured blockquote p { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.5; color: var(--text); }
.quote-featured mark { box-shadow: inset 0 -0.5em 0 var(--halo); }
.quote-featured figcaption { grid-template-columns: 56px 1fr auto; }
.quote-featured .quote-photo { width: 56px; height: 56px; border-color: var(--accent); }

@media (max-width: 559px) { .quote figcaption { grid-template-columns: 48px 1fr; } .quote-logo { grid-column: 1 / -1; } }

/* Life: reels gallery + playlist */
.life-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .life-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.reels-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.reels-head h3, .playlist h3 { font: 400 0.9rem var(--font-mono); color: var(--accent); margin: 0; }
.reels-nav { display: flex; gap: 6px; }
.reels-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.reels-btn:hover { border-color: var(--sage); }
.reels { list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 30%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border); }
.reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: #fff; font-size: 0.85rem; }

@media (max-width: 559px) { .reels { grid-auto-columns: 62%; } }
.playlist { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }

.tracks { list-style: none; margin: 0; padding: 0; }
.track { display: grid; grid-template-columns: 2.2rem 1fr 32px; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }

.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 470px; }
.hero-actions .btn { width: 100%; }
@media (max-width: 420px) { .hero-actions { grid-template-columns: 1fr 1fr; } .hero-actions .btn { padding: 0 10px; font-size: 0.9rem; } .hero-actions .btn-cv .cv-meta { display: none; } }
.quotes .quote:first-child { grid-column: auto; }
.reels-wrap { min-width: 0; }
.life-grid > * { min-width: 0; }

/* Recommendations: featured stays, others expand beneath */
.more-quotes { margin-top: 16px; }
.more-quotes.is-collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.more-quotes.is-collapsible > * { overflow: hidden; min-height: 0; }
.more-quotes.is-collapsible.is-open { grid-template-rows: 1fr; }
.more-quotes.is-collapsible:not(.is-open) .quotes-note { display: none; }
.more-quotes.is-collapsible:not(.is-open) .quotes { visibility: hidden; }
.quotes-note { margin: 12px 0 0; font-size: 0.85rem; color: var(--muted); }
.more-toggle { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 500 0.9rem var(--font-sans); cursor: pointer; }
.more-toggle:hover { border-color: var(--sage); }
.more-toggle .icon { transform: rotate(90deg); transition: transform .3s ease; }
.more-toggle[aria-expanded="true"] .icon { transform: rotate(-90deg); }
.more-toggle .more-close, .more-toggle[aria-expanded="true"] .more-open { display: none; }
.more-toggle[aria-expanded="true"] .more-close { display: inline; }
@media (prefers-reduced-motion: reduce) { .more-quotes.is-collapsible, .more-toggle .icon { transition: none; } }

/* ================= UX/IA pass (hugo feedback v2) ================= */
:root { --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --max: 1200px; }
main > section { max-width: var(--max); }
/* Full-bleed alternating bands without horizontal overflow */
#experience, #colleagues, #about, #toolkit { box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); }

/* Hero: roles line */
.hero-fit { margin: -0.25rem 0 1rem; font: 0.85rem/1.5 var(--font-mono); color: var(--text); }
.hero-fit span { color: var(--muted); }
/* Experience timeline */
.tl-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .tl-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.tl-col-title { font: 400 0.8rem var(--font-mono); color: var(--accent); margin: 0 0 var(--s-4); text-transform: uppercase; letter-spacing: 0.06em; }
.tl-col-note { margin: -8px 0 var(--s-4); font-size: 0.85rem; color: var(--muted); }
.tl-employer { position: relative; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.tl-employer + .tl-employer { margin-top: var(--s-4); }

.tl-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; }
.tl-head h4 { margin: 0; font-size: 1.15rem; }
.tl-meta { margin: 2px 0 0; font: 0.75rem var(--font-mono); color: var(--muted); }
.tl-story { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tl-role { margin: 14px 0 6px; }
.tl-progress { margin: 14px 0 4px; font-size: 0.9rem; color: var(--sage); }
.tl-bullets { margin: 8px 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.92rem; }
.tl-bullets li + li { margin-top: 6px; }
.tl-steps { list-style: none; margin: 14px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--sage); }
.tl-step { position: relative; padding-bottom: 14px; }
.tl-step::before { content: ""; position: absolute; left: -27px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--sage); }
.tl-step:first-child::before { background: var(--accent); border-color: var(--accent); }
.tl-step:last-child { padding-bottom: 0; }
.tl-step-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.tl-dates { font: 0.75rem var(--font-mono); color: var(--muted); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 0.66rem var(--font-mono); vertical-align: middle; border: 1px solid currentColor; }
.badge-promoted { color: var(--accent); }
.badge-freelance { color: var(--muted); }
.badge-learning { color: var(--amber); }
.disclose { margin-top: 8px; }
.disclose summary { cursor: pointer; font-size: 0.85rem; color: var(--accent); width: fit-content; }
.tl-earlier { margin-top: var(--s-6); }
.tl-early-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .tl-early-list { grid-template-columns: repeat(3, 1fr); } }
.tl-early { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.88rem; }
.tl-early strong { display: block; font-weight: 500; }
.tl-early span span { display: block; color: var(--muted); font-size: 0.8rem; }
.logo { width: 44px; height: 44px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); }
.logo img { width: 80%; height: 80%; object-fit: contain; }
.logo-sm { width: 32px; height: 32px; border-radius: 8px; }
.logo-mono { background: var(--hover); color: var(--accent); font: 500 0.8rem var(--font-mono); }

/* Work: story cards in a 2x2 grid */
.story-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .story-grid { grid-template-columns: 1fr 1fr; } }
.story-card { display: flex; flex-direction: column; gap: 10px; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.story-freelance { border-style: dashed; }
.story-top { display: flex; align-items: center; gap: 12px; }
.story-top .work-meta { margin: 0; }
.story-card h3 { margin: 0; font-size: 1.2rem; }
.story-card h3 a { color: var(--text); text-decoration: none; }
.story-card h3 a:hover { color: var(--accent); }
.story-text { margin: 0; color: var(--muted); font-size: 0.92rem; }
.story-more { margin: auto 0 0; font-size: 0.88rem; }
.story-more a { display: inline-flex; align-items: center; gap: 6px; }

/* Split sections */
.split { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) {
  .split-markets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .split-contact { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; }
}
.about-copy { max-width: 60ch; }

/* Markets: globe + principle panel */
.markets { text-align: left; }
.markets h2 { text-align: left; }
.globe-col .globe-stage { width: min(100%, 480px); margin: 0 auto; }
.principle-panel { margin: var(--s-4) 0; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; min-height: 9.5rem; }
.principle-panel .pin-card-title { font-size: 1.4rem; margin: 4px 0 2px; }
html:not(.js) .principle-panel { display: none; }
.pin[aria-pressed="true"] { border-color: var(--accent); }
.market-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.86rem; }
.market-facts strong { font-weight: 500; }
.market-facts span { color: var(--muted); }
.globe-hint { text-align: left; }
.seg { display: none; justify-content: center; gap: 6px; margin-top: 12px; }
.seg-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 0.85rem var(--font-sans); cursor: pointer; }
.seg-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (max-width: 759px) { .js .seg { display: flex; } .pin .pin-label { display: none !important; } .globe-col .globe-stage { width: min(100%, 300px); } }

/* Toolkit: aligned cards; beta labelled as active learning */

.fold-col { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: var(--s-5); }
.fold .changelog { margin: 0; background: var(--term-bg); border-color: var(--border); }
.fold .education { gap: 0; }
.edu-details { margin: 8px 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.88rem; }
.edu-note { margin: 8px 0 0; font-size: 0.78rem; color: var(--muted); }

/* Life: two equal panels with designed empty states */
.life-grid { align-items: stretch; }
.life-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: var(--s-5); display: flex; flex-direction: column; gap: 12px; }
.life-panel h3 { font: 400 0.85rem var(--font-mono); color: var(--accent); margin: 0; }
.card-empty { flex: 1; display: grid; place-content: center; text-align: center; min-height: 220px; border: 1px dashed var(--border); border-radius: 12px; padding: 20px; color: var(--muted); }
.card-empty p { margin: 0; }
.card-empty-code { font: 0.85rem var(--font-mono); color: var(--accent) !important; margin-bottom: 6px !important; }
.playlist { padding: var(--s-5); }

/* Contact */
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.contact-actions .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; }
@media (min-width: 960px) { .contact-actions { justify-content: flex-end; } }

.edu-details, .edu-details li { list-style: disc; }
.education .edu-details li { padding: 0; border: 0; background: none; border-radius: 0; }
.skill-beta dt::after { content: none; }
.skill-beta dt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* ---------- /work/ pages: overview, metrics, index, disclosure, gallery ---------- */
.case.case-work { max-width: var(--max); }
.case-work h1 { max-width: 22ch; font-size: clamp(2rem, 4.5vw, 3rem); }
.overview { display: grid; gap: var(--s-5); margin: var(--s-5) 0; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
@media (min-width: 900px) { .overview { grid-template-columns: minmax(0, 1fr) 220px; } }
.overview-dl { margin: 0; display: grid; gap: var(--s-4) var(--s-6); }
@media (min-width: 700px) { .overview-dl { grid-template-columns: 1fr 1fr; } }
.overview-dl dt { font: 0.68rem var(--font-mono); color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.overview-dl dd { margin: 4px 0 0; line-height: 1.55; }
.overview-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@media (min-width: 900px) { .overview-side { border-left: 1px solid var(--border); padding-left: var(--s-5); } }
.logo-lg { width: 64px; height: 64px; border-radius: 14px; }
.overview-period { margin: 0; font: 0.8rem var(--font-mono); color: var(--muted); }
.metrics { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.metric a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; transition: border-color .2s ease; }
.metric a:hover { border-color: var(--sage); }
.metric-r { font: 500 1.7rem/1.1 var(--font-mono); color: var(--accent); }
.metric-l { font-size: 0.88rem; line-height: 1.4; }
.metric-src { margin-top: auto; font: 0.66rem var(--font-mono); color: var(--muted); }
.metric-src-verified { color: var(--accent); }
.work-charts { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
@media (min-width: 1000px) { .work-charts { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } .work-charts .chart { margin-top: 0; } }
.chart-caveat { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; color: var(--muted); }
.work-layout { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .work-layout { grid-template-columns: 200px minmax(0, 1fr); } }
.work-index { font-size: 0.85rem; }
.work-index p { font: 0.68rem var(--font-mono); color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; }
.work-index ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.work-index a { display: block; padding: 6px 12px; color: var(--muted); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; }
.work-index a:hover, .work-index a[aria-current="true"] { color: var(--text); border-left-color: var(--accent); }
@media (min-width: 1000px) { .work-index { position: sticky; top: 90px; align-self: start; } }
@media (max-width: 999px) { .work-index ol { display: flex; flex-wrap: wrap; gap: 6px; border: 0; } .work-index a { border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; } }
.work-body { max-width: 70ch; }
.work-sec { scroll-margin-top: 90px; }
.work-sec h2 { font-size: 1.3rem; margin: 2rem 0 0.6rem; }
.work-sec-more { border-top: 1px solid var(--border); padding: 4px 0; }
.work-sec-more summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.work-sec-more summary::-webkit-details-marker { display: none; }
.work-sec-more summary h2 { margin: 1rem 0; }
.work-sec-more summary::after { content: "+"; font: 1.3rem var(--font-mono); color: var(--accent); }
.work-sec-more[open] summary::after { content: "−"; }
.receipt-grid { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .receipt-grid { grid-template-columns: 1fr 1fr; } }
.receipt-grid .receipt { margin: 0; }
.js .receipts.is-collapsed .receipt-extra { display: none; }
.receipts-toggle { margin-top: var(--s-4); }
.evidence-more { margin-top: var(--s-4); }
.evidence-more summary { font-weight: 500; }
@media (min-width: 1000px) { .case-work .work-body .receipts, .case-work .work-body .evidence { max-width: none; } .case-work .work-body { max-width: none; } .case-work .work-sec { max-width: 70ch; } }

@media (max-width: 759px) { #cases.is-collapsed .case-row-extra { display: none; } }
@media (min-width: 760px) { .cases-toggle { display: none !important; } }

/* Real logos: wordmarks need a wider tile; white tile keeps dark logos legible in both themes. */
.logo:not(.logo-mono) { width: auto; min-width: 44px; max-width: 120px; padding: 6px 8px; }
.logo:not(.logo-mono) img { width: auto; height: 100%; max-width: 104px; }
.logo-sm:not(.logo-mono) { height: 32px; max-width: 90px; padding: 4px 6px; }
.logo-lg:not(.logo-mono) { height: 64px; max-width: 180px; padding: 10px 14px; }
.logo-lg:not(.logo-mono) img { max-width: 152px; }

.tl-head { grid-template-columns: auto minmax(0, 1fr) auto; }
.tl-early { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.tl-head .logo:not(.logo-mono) { max-width: 112px; }
.tl-early .logo:not(.logo-mono) { max-width: 72px; }
@media (min-width: 1000px) { .work-charts-1 { grid-template-columns: 1fr; } }
/* logo sizing (final) */
.logo:not(.logo-mono) { height: 44px; width: auto; min-width: 44px; max-width: none; padding: 6px 10px; }
.logo:not(.logo-mono) img { width: auto; height: auto; max-height: 32px; max-width: 96px; object-fit: contain; }

.logo-sm:not(.logo-mono) { height: 32px; padding: 4px 6px; }
.logo-sm:not(.logo-mono) img { max-height: 22px; max-width: 64px; }
.logo-lg:not(.logo-mono) { height: 64px; padding: 10px 14px; }
.logo-lg:not(.logo-mono) img { max-height: 44px; max-width: 152px; }

@media (max-width: 1099px) {
  .site-header { flex-wrap: wrap; row-gap: 4px; }
  .site-name { margin-right: auto; }
  .site-header nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .site-header nav ul { gap: 2px; }
}

/* Logos never shrink inside a flex row (story cards clipped them). */
.story-top { align-items: center; min-width: 0; }
.story-top .logo { flex: 0 0 auto; }
.story-top .work-meta { min-width: 0; }
/* White-only logos (Clever Advertising) sit on a dark tile in both themes. */
.logo.logo-dark { background: #121815; border-color: #2A3530; }

/* Toolkit: skills as a card grid, then What's new and Education side by side. */
.fold-stack { display: grid; gap: var(--s-5); }
.fold-pair { display: grid; gap: var(--s-5); align-items: stretch; }
@media (min-width: 900px) { .fold-pair { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.fold-pair > .fold-col { display: flex; flex-direction: column; }
.fold-pair .changelog { flex: 1; max-width: none; }
.fold .skills { max-width: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.fold .skills > div { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.fold .skills > div:last-child { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.fold .skills dt { font-size: 0.82rem; }
.fold .skills dd { font-size: 0.9rem; line-height: 1.6; }
.fold .skills > .skill-beta { border-style: dashed; border-color: var(--amber); }
.fold .skill-beta dt { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Changelog is a terminal in both themes: light text on the dark terminal background. */
:root[data-theme="light"] .changelog {
  --text: #E8ECE9; --muted: #A9B5AF; --accent: #A9CDB4; --amber: #E0AC72;
  color: var(--text); background: #1A231F; border-color: #1A231F;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .changelog { --text: #E8ECE9; --muted: #A9B5AF; --accent: #A9CDB4; --amber: #E0AC72; color: var(--text); background: #1A231F; border-color: #1A231F; }
}

/* Contact: one aligned button grid, icons centred, equal heights. */
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; width: 100%; max-width: 420px; }
@media (min-width: 960px) { .contact-actions { justify-self: end; } }
.contact-actions .btn { justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; line-height: 1; white-space: nowrap; }
.contact-actions .btn .icon { width: 16px; height: 16px; }
.contact-actions .btn-cv { grid-column: 1 / -1; }
.contact-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 359px) { .contact-actions { grid-template-columns: 1fr; } }

/* Globe: market buttons on every screen size, so any market is one tap or key press away. */
.js .seg { display: flex; flex-wrap: wrap; }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Freelance cards: logo on its own row, name and dates get the full width. */
.tl-freelance .tl-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
.tl-freelance .tl-head .logo { grid-column: 1 / -1; justify-self: start; }
.tl-freelance .logo:not(.logo-mono) img { max-width: 110px; }
.story-top .logo:not(.logo-mono) img { max-width: 120px; }
.tl-freelance .tl-head .logo:not(.logo-mono) { max-width: none; }
.tl-early .logo:not(.logo-mono) { max-width: none; }
.tl-early .logo:not(.logo-mono) img { max-width: 84px; }

/* Playlist: one scrolling list of the merged Spotify playlists */
.tracks { max-height: 460px; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.tracks:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.track { grid-template-columns: 2.2rem minmax(0, 1fr); }

/* Life gallery: photos and silent clips share one tile style */

.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel.is-video { cursor: pointer; }
.reel-pending { position: absolute; top: 10px; left: 10px; margin: 0; }
@media (min-width: 900px) {
  .life-grid { align-items: stretch; }
  .reels-wrap { display: flex; flex-direction: column; }
  .reels { grid-auto-columns: minmax(200px, 42%); flex: 1; }
  .life-panel.playlist { display: flex; flex-direction: column; }
  .life-panel.playlist .tracks { max-height: 400px; }
}
.reel .reel-video { position: absolute; inset: 0; background: transparent; }

/* Spotify player (loaded on request) */
.spotify { margin: 4px 0 14px; }

.spotify-tab { min-height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 0.82rem var(--font-sans); cursor: pointer; }
.spotify-tab[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.spotify-tab:focus-visible, .spotify-load:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spotify-frame { min-height: 352px; border-radius: 12px; overflow: hidden; background: var(--hover); }
.spotify-frame iframe { display: block; border: 0; border-radius: 12px; }
.spotify-gate { min-height: 352px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; }
.spotify-load { gap: 8px; justify-content: center; }
.spotify-load .icon { fill: currentColor; stroke: none; }
.spotify-note { margin: 0; max-width: 30ch; font-size: 0.78rem; color: var(--muted); }
.spotify-nojs { display: none; margin: 0; font-size: 0.82rem; }
html:not(.js) .spotify-load, html:not(.js) .spotify-note { display: none; }
html:not(.js) .spotify-nojs { display: block; }
html:not(.js) .spotify-frame, html:not(.js) .spotify-gate { min-height: 0; }
.life-panel.playlist .tracks { max-height: 260px; }
.reels-head { justify-content: flex-end; }

.menu-toggle { display: none; }
@media (max-width: 759px) {
  /* A. One compact header row: name, theme, menu. Sections and the Human/AI switch open in a panel. */
  .js .site-header { flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; row-gap: 0; }
  .js .site-header .site-name { font-size: 1rem; margin-right: auto; padding: 10px 0; }
  .js .menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
  .js .menu-toggle .icon { width: 18px; height: 18px; }
  .js .menu-toggle .icon-close, .js .site-header.nav-open .menu-toggle .icon-menu { display: none; }
  .js .site-header.nav-open .menu-toggle .icon-close { display: block; }
  .js .theme-toggle { width: 44px; height: 44px; }
  .js .header-tools { gap: 8px; order: 2; }
  .js .site-header nav, .js .site-header .view-switch { display: none; }
  .js .site-header.nav-open nav { display: block; order: 3; width: 100%; margin: 6px 0 0; overflow: visible; border-top: 1px solid var(--border); padding-top: 6px; }
  .js .site-header.nav-open nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .js .site-header.nav-open nav a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; margin: 0; border-radius: 10px; font-size: 1rem; color: var(--text); background: var(--surface); }
  .js .site-header.nav-open .view-switch { display: flex; order: 4; width: 100%; margin: 10px 0 8px; }
  .js .site-header.nav-open .view-switch button { flex: 1; min-height: 44px; font-size: 0.9rem; }
  html { scroll-padding-top: 76px; }

  /* B. Hero: the case-study button and contact options reach the first screen. */
  .hero { gap: 1rem; padding-top: 1.25rem; }
  .hero-photo { width: 96px; }
  .hero-actions .btn { min-height: 48px; }

  /* C. Bottom bar: Email + LinkedIn (the CV button joins when the PDF exists). */
  .cv-bar { grid-template-columns: 1fr 1fr; }
  .cv-bar .btn { gap: 8px; }

  /* D. Timeline cards: logo and "Story" on one row, then the name and dates at full width. */
  .tl-head { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 10px; }
  .tl-head .logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .tl-head .tl-story { grid-column: 2; grid-row: 1; }
  .tl-head .tl-id { grid-column: 1 / -1; grid-row: 2; }

  /* E. Touch targets of at least 44px for the small links and toggles. */
  .tl-story, .story-more a, .disclose summary, .work-sec-more summary, .evidence summary, .work-index a { display: inline-flex; align-items: center; min-height: 44px; }
  .reels-btn { width: 44px; height: 44px; }
  .spotify-tab { min-height: 44px; }

  /* F. Nothing smaller than 12px. */
  .badge, .cv-meta, .proof-meta, .metric-src, .chart-source, .receipt-date, .pin-card-where, .overview dt { font-size: 0.75rem !important; }
}
@media (max-width: 759px) {
  .more-toggle { min-height: 44px; }
  .tags-results a { min-height: 40px; display: inline-flex; align-items: center; }
  .feature-more a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 759px) {
  .work-nav a { display: flex; align-items: center; min-height: 48px; }
  .overview-period, .evidence-method, .chart-caveat { font-size: 0.75rem; }
}
@media (max-width: 759px) { .work-index > p { font-size: 0.75rem; } }

/* ---------- Skills and tools: balanced grid, Stack as a logo strip ---------- */
.fold .skills { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .fold .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fold .skills > .skill-stack { grid-column: 1 / -1; order: 1; }
  .fold .skills > .skill-beta { grid-column: 1 / -1; order: 2; }
}
@media (min-width: 1000px) {
  .fold .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fold .skills > .skill-stack { grid-column: span 2; order: 0; }
  .fold .skills > .skill-beta { order: 0; flex-direction: row; align-items: center; gap: 16px; }
  .fold .skills > .skill-beta dt { flex: none; }
}
.skill-stack dd { min-width: 0; }

/* ---------- Life gallery: tiles keep each photo's own shape ---------- */
.reels { display: flex; align-items: center; gap: 12px; --reel-h: 400px; }
.reel { flex: none; height: var(--reel-h); width: auto; max-width: 100%; aspect-ratio: 9 / 16; }
.reel.r916 { aspect-ratio: 9 / 16; } .reel.r23 { aspect-ratio: 2 / 3; } .reel.r34 { aspect-ratio: 3 / 4; } .reel.r45 { aspect-ratio: 4 / 5; }
.reel.r11, .reel.r43, .reel.r169 { height: auto; }
.reel.r11 { aspect-ratio: 1; width: min(var(--reel-h), 100%); }
.reel.r43 { aspect-ratio: 4 / 3; width: min(calc(var(--reel-h) * 4 / 3), 100%); }
.reel.r169 { aspect-ratio: 16 / 9; width: min(calc(var(--reel-h) * 16 / 9), 100%); }
.reel.is-playing @media (max-width: 759px) {
  .reels { --reel-h: min(56vh, 400px); scroll-padding-left: 0; }
  .reel-cap { font-size: 0.9rem; padding: 32px 12px 12px; }
}

/* ---------- Mobile overflow fixes (320–430 px) ---------- */
h1, h2, h3, h4, p, li, dt, dd, blockquote, figcaption { overflow-wrap: break-word; }
.hero-text, .split > *, .tl-grid > *, .life-grid > *, .fold-pair > *, .work-layout > *, .story-grid > *, .case-hero > * { min-width: 0; }
@media (max-width: 759px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  /* Buttons: main action full width, Email + LinkedIn side by side, CV full width (as in Contact). */
  .hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .hero-actions .btn { min-width: 0; padding: 0 12px; }
  .hero-actions .btn-primary { grid-column: 1 / -1; order: 0; }
  .hero-actions .btn:not(.btn-primary):not(.btn-cv) { order: 1; }
  .hero-actions .btn-cv { grid-column: 1 / -1; order: 2; }
  .hero-actions .btn-cv .cv-meta { display: inline; }
  .cv-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-bar .btn { min-width: 0; padding: 0 10px; }
  /* Ranking-chart labels wrap instead of being cut off with "…" */
  .serp-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; padding-top: 4px; padding-bottom: 4px; }
}
@media (max-width: 359px) { .cv-bar .cv-meta { display: none; } .cv-bar .btn { font-size: 0.85rem; gap: 6px; } }
@media (max-width: 899px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 379px) { .proof { grid-template-columns: minmax(0, 1fr); } }
.reels-head { justify-content: space-between; }
@media (max-width: 759px) {
  /* Mobile gallery: edge-to-edge swiping inside the card, first tile aligned with the text. */
  .life-panel.reels-wrap { padding-left: 0; padding-right: 0; }
  .reels-wrap .reels-head { padding: 0 var(--s-5); }
  .reels { padding: 0 var(--s-5) 8px; scroll-padding-left: var(--s-5); }
  .reel { max-width: calc(100% - 2 * var(--s-5)); }
  .reel.r11 { width: min(var(--reel-h), calc(100% - 2 * var(--s-5))); }
  .reel.r43 { width: min(calc(var(--reel-h) * 4 / 3), calc(100% - 2 * var(--s-5))); }
  .reel.r169 { width: min(calc(var(--reel-h) * 16 / 9), calc(100% - 2 * var(--s-5))); }
}

/* Currently learning: a clean amber outline (the dashed line broke up at the rounded corners). */
.fold .skills > .skill-beta { border: 1px solid color-mix(in srgb, var(--amber) 70%, transparent); background: color-mix(in srgb, var(--amber) 6%, var(--bg)); }

/* Gallery: every tile the same height. Portrait media fill the tile; wide media (square, 4:3, 16:9)
   are shown whole, centred on a blurred backdrop of the same picture, so nothing is cropped. */
.reels { align-items: stretch; }
.reel, .reel.r11, .reel.r43, .reel.r169 { height: var(--reel-h); }
.reel.r11, .reel.r43, .reel.r169 { aspect-ratio: auto; }
.reel.r11 { width: min(var(--reel-h), 100%); }
.reel.r43 { width: min(calc(var(--reel-h) * 4 / 3), 100%); }
.reel.r169 { width: min(calc(var(--reel-h) * 16 / 9), 100%); }
.reel .reel-backdrop { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(18px) brightness(0.75); transform: scale(1.05); }
.reel.r11 > img:not(.reel-backdrop):not(.reel-poster), .reel.r43 > img:not(.reel-backdrop):not(.reel-poster), .reel.r169 > img:not(.reel-backdrop):not(.reel-poster),
.reel.r11 .reel-poster, .reel.r43 .reel-poster, .reel.r169 .reel-poster,
.reel.r11 video, .reel.r43 video, .reel.r169 video { position: relative; object-fit: contain; }
.reel.r11 .reel-poster, .reel.r43 .reel-poster, .reel.r169 .reel-poster { position: absolute; inset: 0; }
@media (max-width: 759px) {
  .reel.r11 { width: min(var(--reel-h), calc(100% - 2 * var(--s-5))); }
  .reel.r43, .reel.r169 { width: calc(100% - 2 * var(--s-5)); }
}

/* Currently learning: the whole card highlighted (an older "last card" rule turned its bottom edge grey). */
.fold .skills > .skill.skill-beta, .fold .skills > .skill.skill-beta:last-child {
  border: 1px solid var(--amber); border-radius: 12px;
  background: color-mix(in srgb, var(--amber) 10%, var(--bg)); padding: 14px 16px;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Experience: achievement highlights and one clear link per employer */
.tl-highlights { margin: 10px 0 12px; }
.tl-highlights li > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.85rem; color: var(--text); }
.tl-highlights li > span b { font: 500 0.85rem var(--font-mono); color: var(--accent); }
.tl-more { margin: 12px 0 0; }
.tl-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent); font-weight: 500; }
.tl-employer .tl-head { grid-template-columns: auto minmax(0, 1fr) !important; }
.tl-freelance .tl-head { grid-template-columns: minmax(0, 1fr) !important; }

/* Cases: short context line under each title */
.feature-context { margin: 6px 0 0; font: 0.8rem var(--font-mono); color: var(--muted); }

/* Markets: the chosen pin highlights its markets */
.market-facts li { transition: border-color .2s ease, background-color .2s ease; border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; }
.market-facts li.is-active { border-left-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .market-facts li { transition: none; } }
/* Highlight tags read as one sentence: the figure stays whole, the label wraps after it. */
.tl-highlights a, .tl-highlights li > span { display: inline-block; line-height: 1.45; }
.tl-highlights b { white-space: nowrap; margin-right: 6px; }
.feature-chart { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feature-chart figcaption { font: 0.75rem/1.5 var(--font-mono); color: var(--muted); }

/* Stack: a static, scannable grid of tool logos (no motion) */
.tools-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.tools-grid .tool { min-width: 0; padding: 0 12px; }

/* Markets: the chosen pin marks its markets with an accent line and tint; all text keeps full contrast */
.market-facts li.is-active { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 0 6px 6px 0; }
.market-facts li.is-active strong { color: var(--accent); }

/* Life clips: one real button per clip; it covers the tile, its icon sits in the corner */
.reel-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: flex-end; padding: 10px; background: transparent; border: 0; border-radius: inherit; color: #fff; cursor: pointer; }
.reel-play > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.5); }
.reel-play .icon { width: 13px; height: 13px; fill: currentColor; stroke: currentColor; }
.reel-play .reel-icon-pause, .reel-play[aria-pressed="true"] .reel-icon-play { display: none; }
.reel-play[aria-pressed="true"] .reel-icon-pause { display: grid; }
.reel-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.reel.is-video .reel-cap { z-index: 3; pointer-events: none; }

/* Ranking charts are drawn by script: reserve their space first so the text below doesn't jump (CLS). */
.js .rank-climb:not(.is-live) .chart-fallback { min-height: 332px; }
@media (max-width: 759px) { .js .rank-climb:not(.is-live) .chart-fallback { min-height: 640px; } }

/* Tool logos: white tiles so every logo is visible in both themes (restored after the strip was removed) */
.tools-grid .tool { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 12px; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.tools-grid .tool img { display: block; max-height: 24px; max-width: 100%; width: auto; height: auto; }
.tools-grid .tool img[src*="google-search-console"] { max-height: 20px; }
.tools-grid .tool img[src*="majestic"] { max-height: 30px; }
.tools-grid .tool img[src*="buzzstream"] { max-height: 26px; }
.tools-grid .tool-name { font: 500 0.88rem var(--font-sans); color: #14171F; white-space: nowrap; }
@media (max-width: 759px) { .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tools-grid .tool { height: 48px; } .tools-grid .tool img { max-height: 22px; } }

/* Career path: a compact visual break (status + path only); details live in Experience. */

/* Stack: slow moving strip of logo tiles (pauses on hover, focus, tap; still for reduced motion) */
.tools { display: flex; gap: 10px; overflow: hidden; padding: 2px 0; cursor: pointer; border-radius: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tools:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tools-track { display: flex; gap: 10px; flex: none; list-style: none; margin: 0; padding: 0; animation: tools-scroll 40s linear infinite; }
@keyframes tools-scroll { to { transform: translateX(calc(-100% - 10px)); } }
.tools:hover .tools-track, .tools:focus .tools-track, .tools.is-paused .tools-track { animation-play-state: paused; }
.tools .tool { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; min-width: 112px; padding: 0 16px; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.tools .tool img { display: block; max-height: 24px; max-width: 140px; width: auto; height: auto; }
.tools .tool img[src*="google-search-console"] { max-height: 20px; max-width: 170px; }
.tools .tool img[src*="majestic"] { max-height: 30px; }
.tools .tool img[src*="buzzstream"] { max-height: 26px; }
.tools .tool-name { font: 500 0.88rem var(--font-sans); color: #14171F; white-space: nowrap; }
html:not(.js) .tools, .tools.is-static { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; cursor: default; }
html:not(.js) .tools-track, .tools.is-static .tools-track { animation: none; flex-wrap: wrap; flex: 1 1 auto; }
html:not(.js) .tools-copy, .tools.is-static .tools-copy { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tools { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .tools-track { animation: none; flex-wrap: wrap; flex: 1 1 auto; }
  .tools-copy { display: none; }
}
@media (max-width: 759px) { .tools .tool { height: 48px; min-width: 100px; padding: 0 14px; } .tools .tool img { max-height: 22px; } }


/* About: the career path is the section's headline, one bar as wide as the text */
.term-bar { width: 100%; max-width: 60ch; margin: 0 0 var(--s-5); padding: 14px 20px; overflow: visible; }
.term-bar .hops { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.term-bar .hop { display: inline-flex; align-items: center; gap: 0.7ch; white-space: nowrap; line-height: 1.6; }
/* Drawn arrow before every step, /sales included (not a font glyph, so it looks the same on every device) */
.term-bar .hop::before {
  content: ""; flex: none; width: 1.3em; height: 0.7em; margin: 0 1ch;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 5h20.5L16 1.2 17.3 0 24 6l-6.7 6-1.3-1.2L20.5 7H0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 5h20.5L16 1.2 17.3 0 24 6l-6.7 6-1.3-1.2L20.5 7H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 759px) {
  .term-bar { padding: 12px 16px; font-size: 0.8rem; }
  .term-bar .hops { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 0; }
  .term-bar .hop::before { margin: 0 0.7ch; }
  .term-bar .hop:nth-child(odd)::before { margin-left: 0; }
}
@media (max-width: 370px) { .term-bar { padding: 10px 10px; font-size: 0.7rem; } .term-bar .hop::before { margin: 0 0.5ch; } .term-bar .hop:nth-child(odd)::before { margin-left: 0; } }
@media (min-width: 760px) {
  .term-bar { max-width: none; padding: 14px 18px; }
  .term-bar .hops { flex-wrap: nowrap; justify-content: space-between; }
  .term-bar .hop::before { margin: 0 0.9ch 0 0; }
  .term-bar .hop + .hop { margin-left: 1ch; }
  .term-bar .hop { gap: 0.6ch; }
}

/* Life: collapsed until the visitor asks for it */
.life-toggle { margin-top: 4px; }
.life-body.is-collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.life-body.is-collapsible > * { overflow: hidden; min-height: 0; }
.life-body.is-collapsible:not(.is-open) > * { visibility: hidden; }
.life-body.is-collapsible.is-open { grid-template-rows: 1fr; margin-top: var(--s-5); }
@media (prefers-reduced-motion: reduce) { .life-body.is-collapsible { transition: none; } }