/* =============================================================
   Rishi Muni Kesarwani — AI Product Manager
   Theme: deep navy blueprint, cyan signal, geometric grotesque.
   Signature device: the decision gate rail (.gate)
   ============================================================= */

/* ---------- tokens ---------- */
:root {
  --ink:        #0B1120;
  --ink-2:      #121B2E;
  --ink-3:      #16203a;
  --line:       #1E2A42;
  --line-soft:  #17223a;
  --cyan:       #2EC5D3;
  --cyan-dim:   #1c8b96;
  --cyan-glow:  rgba(46,197,211,.18);
  --amber:      #F2994A;
  --paper:      #F1F5F9;
  --muted:      #8496B0;
  --muted-2:    #64748B;

  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1180px;
  --nav-h: 76px;
  --r: 14px;
  --r-sm: 8px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--muted);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #7fe4ee; }
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--paper);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.4rem, 6.4vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .5em; }
strong { color: #cfdcec; font-weight: 600; }
em { color: #a9bcd4; }
code {
  font-family: var(--mono);
  font-size: .87em;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .12em .42em;
  color: #a7e8ef;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* blueprint grid, used behind hero + section accents */
.grid-bg {
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* ---------- eyebrow / mono labels ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: .715rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--cyan);
  opacity: .6;
  flex: none;
}
.eyebrow.plain::before { display: none; }

/* =============================================================
   HEADER / NAV
   ============================================================= */
.site-head {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(11,17,32,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-head.scrolled { border-bottom-color: var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; }

/* The header carries no wordmark — nav and search sit right, and the
   burger takes over that alignment once .nav goes fixed on mobile. */
.brand { display: flex; align-items: center; gap: .68rem; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--paper);
  letter-spacing: -.02em;
}
.brand-name span { color: var(--cyan); }

.nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  padding: .5rem .8rem;
  border-radius: var(--r-sm);
  position: relative;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover { color: var(--paper); background: var(--ink-2); }
.nav a.current { color: var(--paper); }
.nav a.current::after {
  content: "";
  position: absolute; left: .8rem; right: .8rem; bottom: .22rem;
  height: 2px; border-radius: 2px;
  background: var(--cyan);
}

.nav-search {
  display: flex; align-items: center; gap: .5rem;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .42rem .85rem;
  min-width: 190px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-search:focus-within { border-color: var(--cyan-dim); box-shadow: 0 0 0 3px var(--cyan-glow); }
.nav-search svg { width: 15px; height: 15px; color: var(--muted-2); flex: none; }
.nav-search input {
  background: none; border: 0; outline: none;
  color: var(--paper);
  font-family: var(--body); font-size: .85rem;
  width: 100%;
}
.nav-search input::placeholder { color: var(--muted-2); }

.burger {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-2);
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--paper);
  position: relative;
  transition: transform .28s var(--ease), background .28s var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; border-radius: 2px; background: var(--paper);
  transition: transform .28s var(--ease), top .2s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* =============================================================
   BREADCRUMB + BACK
   ============================================================= */
.crumbs-bar {
  border-bottom: 1px solid var(--line);
  background: rgba(18,27,46,.4);
}
.crumbs-bar .wrap {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap;
  padding: .8rem 0;
}
.crumbs {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-right: auto;
  color: var(--muted-2);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--cyan); }
.crumbs .sep { color: var(--line); }
.crumbs .here { color: var(--paper); }

.btn-back {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .9rem .4rem .7rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn-back:hover { color: var(--paper); border-color: var(--cyan-dim); transform: translateX(-2px); }
.btn-back svg { width: 13px; height: 13px; }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--display);
  font-size: .93rem; font-weight: 600;
  padding: .82rem 1.6rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: var(--cyan-dim); color: var(--paper); }
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #04222a;
}
.btn-primary:hover {
  background: #45d6e3; border-color: #45d6e3; color: #04222a;
  box-shadow: 0 10px 30px -10px var(--cyan-glow);
}
.btn-sm { padding: .55rem 1.05rem; font-size: .82rem; }

/* =============================================================
   HERO
   ============================================================= */
.hero { position: relative; padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 75% 65% at 72% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 72% 42%, #000 20%, transparent 78%);
  opacity: .85;
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* availability pill — the one bit of the hero that states the ask */
.avail {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.15rem;
  padding: .42rem .95rem .42rem .8rem;
  border: 1px solid rgba(46, 197, 211, .35);
  border-radius: 999px;
  background: var(--cyan-glow);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #a7e8ef;
  line-height: 1;
}
.avail .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 var(--cyan-glow);
  animation: availPulse 2.4s var(--ease) infinite;
}
@keyframes availPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 197, 211, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(46, 197, 211, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 197, 211, 0); }
}
@media (prefers-reduced-motion: reduce) { .avail .dot { animation: none; } }

.hello {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  color: var(--paper);
  font-weight: 500;
  margin-bottom: .15em;
  letter-spacing: -.02em;
}
.hello .wave { display: inline-block; transform-origin: 70% 70%; }
.iam {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 700;
  color: var(--paper);
  margin: 0 0 .55em;
  letter-spacing: -.025em;
}
.role-line {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.85rem);
  color: var(--paper);
  letter-spacing: -.03em;
  line-height: 1.12;
  min-height: 2.24em;      /* holds two lines so the layout never jumps */
  margin: 0 0 .35em;
}
.caret {
  display: inline-block;
  width: 3px; height: .92em;
  background: var(--cyan);
  vertical-align: -.08em;
  margin-left: .1em;
  animation: blink 1.05s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

.socials { display: flex; gap: .55rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  background: var(--ink-2);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { color: var(--cyan); border-color: var(--cyan-dim); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }

.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; }

/* --- hero portrait --- */
.portrait { position: relative; justify-self: center; width: 100%; max-width: 430px; }
.portrait-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.85);
}
.portrait-frame img {
  width: 100%; aspect-ratio: 4/4.35; object-fit: cover; object-position: 26% 58%;
  filter: saturate(.92) contrast(1.04);
  transform: scale(1.18);
  transform-origin: 26% 62%;
}
.portrait-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,17,32,0) 42%, rgba(11,17,32,.92) 100%);
  pointer-events: none;
}
.portrait-cap {
  position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.55;
  color: #a4b6cd;
  letter-spacing: .02em;
}
.portrait-chip {
  position: absolute;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--paper);
  background: rgba(18,27,46,.94);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .38rem .82rem;
  backdrop-filter: blur(6px);
  white-space: nowrap;
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.9);
}
.portrait-chip b { color: var(--cyan); font-weight: 600; }
.chip-1 { top: 8%;  left: -14%; animation: float 7s ease-in-out infinite; }
.chip-2 { top: 44%; right: -13%; animation: float 8.5s ease-in-out infinite .8s; }
.chip-3 { bottom: 13%; left: -10%; animation: float 7.8s ease-in-out infinite .4s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* =============================================================
   SECTIONS
   ============================================================= */
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section.tight { padding: clamp(2.5rem, 4.5vw, 4rem) 0; }
.section.bordered { border-top: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 2.6rem; }
.section-head p { margin-bottom: 0; }

.page-head { padding: clamp(2.6rem, 5vw, 4.2rem) 0 clamp(1.6rem, 3vw, 2.4rem); }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.35rem); margin-bottom: .35em; }
.page-head .lede { font-size: 1.08rem; max-width: 66ch; margin: 0; }

/* stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink-2);
}
.stat-strip div { padding: 1.35rem 1.5rem; border-right: 1px solid var(--line); }
.stat-strip div:last-child { border-right: 0; }
.stat-strip b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .4rem;
}
.stat-strip span {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* =============================================================
   SIGNATURE: the decision gate rail
   ============================================================= */
.gate {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(46,197,211,.05), transparent 60%),
    var(--ink-2);
  padding: 1.4rem 1.5rem 1.5rem;
}
.gate-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .55rem;
}
.gate-rule {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.4;
  margin-bottom: 1.15rem;
}
.gate-rail {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan) 46%, var(--amber) 54%, var(--amber) 100%);
  margin: 0 0 1rem;
  opacity: .55;
}
.gate-rail::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--ink);
  border: 2px solid var(--cyan);
  border-radius: 2px;
}
.gate-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.gate-outcomes > div { font-size: .875rem; line-height: 1.55; }
.gate-outcomes .k {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .3rem;
}
.gate-fail .k { color: var(--amber); }
.gate-pass .k { color: var(--cyan); }

/* the gate gets real width when it is the point of the section */
.thesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .thesis-grid { grid-template-columns: 1fr; } }

/* compact gate inside a card */
.gate-mini {
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding-top: .9rem;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.6;
  color: var(--muted-2);
  letter-spacing: .01em;
}
.gate-mini b { color: var(--cyan); font-weight: 500; }

/* =============================================================
   CARDS
   ============================================================= */
.card-grid { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.card-grid.two { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: #27354f;
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.9);
}
.card:hover::before { transform: scaleX(1); }

.card-top {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .9rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.card-org { color: var(--cyan); }
.card-star {
  color: #f5c96a;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.tag-status {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--ink);
}
.tag-status[data-s="Shipped"]  { color: var(--cyan); border-color: var(--cyan-dim); }
.tag-status[data-s="Ongoing"]  { color: var(--amber); border-color: #6b4a25; }

.card h3 { margin-bottom: .45rem; }
.card h3 a { color: var(--paper); }
.card:hover h3 a { color: var(--cyan); }
.card-tagline {
  font-family: var(--display);
  font-size: .95rem;
  color: var(--cyan);
  margin: 0 0 .7rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.card-sum { font-size: .93rem; margin-bottom: 1rem; }

.tags { display: flex; flex-wrap: wrap; gap: .38rem; list-style: none; padding: 0; margin: 0 0 1.1rem; }
.tags li {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .05em;
  color: var(--muted-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .2rem .5rem;
  margin: 0;
}

.card-link {
  font-family: var(--display);
  font-weight: 600;
  font-size: .88rem;
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .9rem;
}
.card-link svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.card:hover .card-link svg { transform: translateX(4px); }

/* category card */
.cat-card { padding: 1.9rem; }
.cat-card .count {
  font-family: var(--display);
  font-size: 2.6rem; font-weight: 700; color: var(--cyan);
  line-height: 1; letter-spacing: -.04em;
  margin-bottom: .7rem;
}
/* .cat-card .lens removed 2026-08-12 — the mono question box came off
   the category cards; the question now lives inside the blurb where it
   is still wanted. */

/* =============================================================
   FILTER / SORT TOOLBAR
   ============================================================= */
.work-intro {
  margin-bottom: 2.1rem;
}
.work-intro h1 {
  max-width: 18ch;
  margin: .35rem 0 .8rem;
}
.work-intro > p:not(.eyebrow) {
  max-width: 68ch;
  font-size: 1.04rem;
}
.work-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, 1.35fr);
  gap: .75rem;
  margin-top: 1.5rem;
}
.signal-item, .signal-note {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  padding: .9rem 1rem;
}
.signal-item strong {
  display: block;
  color: var(--cyan);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.1;
  margin-bottom: .3rem;
}
.signal-item span, .signal-note p {
  display: block;
  color: var(--paper);
  font-size: .84rem;
  margin: 0 0 .25rem;
}
.signal-item small, .signal-note small {
  display: block;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: .62rem;
  line-height: 1.35;
}
.signal-note .k {
  display: block;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  margin-bottom: 1.8rem;
}
.filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .9rem;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.chip:hover { color: var(--paper); border-color: #2b3a56; }
.chip[aria-pressed="true"] {
  background: var(--cyan); border-color: var(--cyan); color: #04222a; font-weight: 600;
}
.sort-wrap { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.sort-wrap label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2);
}
select {
  font-family: var(--body); font-size: .82rem;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .45rem 2rem .45rem .75rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238496B0' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 10px;
}
select:focus { border-color: var(--cyan-dim); outline: none; box-shadow: 0 0 0 3px var(--cyan-glow); }

.result-count {
  font-family: var(--mono); font-size: .74rem;
  color: var(--muted-2); letter-spacing: .05em;
  margin-bottom: 1.2rem;
}
.result-count b { color: var(--paper); font-weight: 500; }

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: 3rem 1.5rem;
  text-align: center;
}
.empty h3 { color: var(--paper); }
.empty p { max-width: 44ch; margin-inline: auto; }

/* =============================================================
   DETAIL PAGE
   ============================================================= */
.detail-hero { padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(2rem, 4vw, 3rem); }
.detail-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1.1rem;
}
.detail-meta .org { color: var(--cyan); }
.detail-hero h1 { max-width: 20ch; }
.detail-tagline {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--cyan);
  font-weight: 500;
  max-width: 34ch;
  margin: 0 0 1.2rem;
  letter-spacing: -.015em;
}
.detail-sum { font-size: 1.06rem; max-width: 62ch; }

.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.detail-main > section { margin-bottom: 3rem; }
.detail-main > section:last-child { margin-bottom: 0; }
.detail-main h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.2rem;
}
.detail-main p, .detail-main li { font-size: 1rem; }

.project-brief {
  display: grid;
  gap: 1rem;
  margin-bottom: 3rem;
}
.brief-grid {
  display: grid;
  gap: 1rem;
}
.brief-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brief-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brief-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  padding: 1.2rem 1.25rem;
}
.brief-panel .eyebrow { margin-bottom: .35rem; }
.brief-panel h2, .brief-panel h3 {
  border: 0;
  margin: 0 0 .6rem;
  padding: 0;
}
.brief-panel h2 { font-size: 1.25rem; }
.brief-panel h3 { font-size: 1rem; }
.brief-panel p { margin-bottom: .7rem; }
.brief-panel p:last-child { margin-bottom: 0; }
.brief-status {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .68rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brief-list {
  margin: .7rem 0 0;
  padding-left: 1.1rem;
}
.brief-list li { margin-bottom: .45rem; }
.brief-list li:last-child { margin-bottom: 0; }
.brief-links {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
}
.brief-links li { margin: 0 0 .5rem; }
.brief-links li:last-child { margin-bottom: 0; }
.brief-links a, .brief-connect-links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--paper);
  font-size: .84rem;
}
.brief-links a:hover, .brief-connect-links a:hover { color: var(--cyan); }
.brief-links a .k {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brief-links svg, .brief-connect-links svg { width: 13px; height: 13px; }
.brief-connect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--cyan-dim);
  border-radius: var(--r);
  background: rgba(46,197,211,.04);
  padding: 1.1rem 1.25rem;
}
.brief-connect h3 { margin: 0 0 .25rem; }
.brief-connect p { margin: 0; }
.brief-connect-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  justify-content: flex-end;
}

.note-block {
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--ink-2);
  padding: 1.4rem 1.5rem;
}
.note-block > *:last-child { margin-bottom: 0; }

.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; min-width: 480px; }
th, td {
  text-align: left;
  padding: .82rem 1.05rem;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  vertical-align: top;
}
th {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(46,197,211,.03); }
td:first-child { color: #b8c8dc; }

/* sidebar */
.detail-side { position: sticky; top: calc(var(--nav-h) + 1.2rem); display: grid; gap: 1.2rem; }
.side-box {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  padding: 1.3rem 1.4rem;
}
.side-box h4 {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .9rem;
}
.side-stats { list-style: none; padding: 0; margin: 0; }
.side-stats li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
  font-size: .82rem;
}
.side-stats li:last-child { border-bottom: 0; }
.side-stats b {
  font-family: var(--display);
  color: var(--paper); font-weight: 700; font-size: 1rem;
  letter-spacing: -.02em; text-align: right;
}
.side-links { list-style: none; padding: 0; margin: 0; }
.side-links li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.side-links li:last-child { border-bottom: 0; }
.side-links a {
  display: block; padding: .6rem 0;
  font-size: .88rem; color: var(--muted);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.side-links a:hover { color: var(--cyan); padding-left: .35rem; }
.side-links .k {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); display: block;
}
/* Same shape as a side link, deliberately not clickable — used for private
   repos, where a link would only ever 404 for a visitor. */
.side-links .side-flat {
  display: block; padding: .6rem 0;
  font-size: .88rem; color: var(--muted);
}

/* prev / next */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem; margin-top: 3.5rem;
}
.pager a {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  padding: 1.1rem 1.3rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pager a:hover { border-color: var(--cyan-dim); transform: translateY(-2px); }
.pager .k {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted-2); display: block; margin-bottom: .35rem;
}
.pager strong { display: block; font-family: var(--display); color: var(--paper); font-size: .98rem; line-height: 1.3; }
.pager .next { text-align: right; }
.pager .spacer { border: 0; background: none; }

/* =============================================================
   FIGURE — architecture diagrams, drawn inline as SVG so they
   carry the same navy/cyan palette as everything else.
   ============================================================= */
.figure {
  margin: 0 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--ink-2) 0%, #0d1424 100%);
  overflow: hidden;
}
.figure-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .8rem;
  padding: .8rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: rgba(46, 197, 211, .04);
}
.figure-tag {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}
.figure-name {
  font-family: var(--display);
  font-size: .97rem;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -.015em;
}
/* the drawing itself scrolls sideways on narrow screens rather
   than shrinking its labels into illegibility */
.figure-canvas { overflow-x: auto; padding: 1.15rem 1.1rem .5rem; }
.figure-canvas svg { display: block; width: 100%; min-width: 680px; height: auto; }
.figure-cap {
  margin: 0;
  padding: .35rem 1.15rem 1.05rem;
  font-size: .84rem;
  line-height: 1.62;
  color: var(--muted-2);
}
.figure-cap b { color: var(--muted); font-weight: 600; }

/* diagram primitives — kept here so every figure stays in step */
.dg-label   { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 14px; font-weight: 600; fill: #E2E8F0; }
.dg-sub     { font-family: "Inter", system-ui, sans-serif; font-size: 11px; fill: #7f92ad; }
.dg-edge    { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; fill: #7f92ad; letter-spacing: .04em; }
.dg-num     { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600; }
.dg-title   { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 17px; font-weight: 700; fill: #F1F5F9; }
.dg-note    { font-family: "Inter", system-ui, sans-serif; font-size: 12px; fill: #a9bcd4; }
.dg-line    { stroke: #3A4C6B; stroke-width: 1.4; fill: none; }

/* =============================================================
   ABOUT / TIMELINE
   ============================================================= */
.about-grid {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.about-photo {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--ink-2);
  position: sticky; top: calc(var(--nav-h) + 1.2rem);
}
/* Scaled up inside the clipped frame to crop closer to the face —
   the wide original left too much room around him. */
.about-photo img {
  aspect-ratio: 4/4.6;
  object-fit: cover;
  object-position: 22% 40%;
  transform: scale(1.34);
  transform-origin: 24% 34%;
}
.about-photo .cap {
  padding: .9rem 1.1rem;
  font-family: var(--mono); font-size: .68rem; line-height: 1.55; color: var(--muted-2);
  border-top: 1px solid var(--line);
}

.timeline { position: relative; padding-left: 1.9rem; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: .55rem; bottom: .5rem;
  width: 1px; background: var(--line);
}
.tl-item { position: relative; margin-bottom: 2.4rem; }
.tl-item:last-child { margin-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -1.9rem; top: .5rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--line);
}
.tl-item:first-child::before { border-color: var(--cyan); background: var(--cyan); }

/* Education timeline: everything completed carries the filled cyan marker.
   An in-progress course keeps the hollow one, so it cannot be misread as
   finished — including when it sits first in the list. */
.timeline-edu .tl-item::before { border-color: var(--cyan); background: var(--cyan); }
.timeline-edu .tl-item.in-progress::before {
  border-color: var(--line);
  background: var(--ink);
}
.tl-when {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: .35rem;
}
.tl-item h3 { margin-bottom: .2rem; font-size: 1.15rem; }
.tl-org { font-size: .9rem; color: var(--muted-2); margin-bottom: .8rem; }
.tl-item ul { margin-bottom: 0; }
.tl-item li { font-size: .93rem; }

.skill-block { margin-bottom: 1.7rem; }
.skill-block h4 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: .7rem;
}

/* =============================================================
   SKILLS — hire-for cards, tool split, learning rail
   ============================================================= */

/* Band 1: what someone is actually hiring for. Same treatment as the
   decision gate, because it carries the same weight on the page. */
.skill-cards {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.2rem;
}
.skill-card {
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--r) var(--r) 0;
  background:
    linear-gradient(180deg, rgba(46,197,211,.05), transparent 65%),
    var(--ink-2);
  padding: 1.15rem 1.3rem .5rem;
}
.skill-card h4 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: .8rem;
}
/* Brighter chips here — these are the claims, not the footnotes. */
.tags-bright li {
  color: var(--paper);
  background: var(--ink-3);
  border-color: #26344f;
}

/* Band 2 */
.skill-craft { margin-bottom: .6rem; }

/* Band 3: use beside learning, so the difference is impossible to miss */
.tool-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-bottom: 2.2rem;
}
.skill-block h4.k-learn { color: var(--amber); }
/* Dashed = not claimed yet. */
.tags-learn li {
  border-style: dashed;
  border-color: #3d3323;
  color: #b99a72;
}

/* Progress rail on an in-progress education entry. Sits inside the
   timeline item, so the course appears once on the page rather than
   twice — merged 2026-08-12. */
.learn-progress {
  margin-top: 1rem;
  max-width: 30rem;
}
.learn-rail {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  margin: 0 0 1.1rem;
}
.learn-rail-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--cyan);
}
/* A live marker, not a static one. Same pulse as the availability dot
   and the build pill: solid head, expanding ring, 2.4s. The dot itself
   must not fade — that reads as a different animation. */
.learn-rail-marker {
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  background: var(--cyan);
  border-radius: 50%;
  animation: learnPulse 2.4s var(--ease) infinite;
}
@keyframes learnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,197,211,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(46,197,211,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,197,211,0); }
}
@media (prefers-reduced-motion: reduce) {
  .learn-rail-marker { animation: none; }
}
.learn-pct {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}
.learn-pct strong { color: var(--cyan); font-weight: 500; }

@media (max-width: 620px) {
  .tool-split { grid-template-columns: 1fr; gap: .4rem; }
}

/* =============================================================
   SEARCH RESULTS
   ============================================================= */
.searchbox-lg {
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--ink-2);
  padding: 1rem 1.3rem;
  margin-bottom: 1.6rem;
}
.searchbox-lg:focus-within { border-color: var(--cyan-dim); box-shadow: 0 0 0 3px var(--cyan-glow); }
.searchbox-lg svg { width: 19px; height: 19px; color: var(--muted-2); flex: none; }
.searchbox-lg input {
  flex: 1; background: none; border: 0; outline: none;
  font-family: var(--display); font-size: 1.1rem; color: var(--paper);
}
.searchbox-lg input::placeholder { color: var(--muted-2); font-family: var(--body); font-size: .98rem; }

.res-list { list-style: none; padding: 0; margin: 0; }
.res-list li { margin: 0 0 .8rem; }
.res {
  display: block;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--ink-2);
  padding: 1.15rem 1.35rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.res:hover { border-color: var(--cyan-dim); transform: translateX(3px); }
.res .k {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: .3rem;
}
.res h3 { font-size: 1.08rem; margin-bottom: .3rem; color: var(--paper); }
.res p { font-size: .9rem; margin: 0; color: var(--muted); }
.res mark { background: rgba(46,197,211,.22); color: #bff0f6; border-radius: 3px; padding: 0 .15em; }

.suggest { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.suggest span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-right: .3rem;
}

/* =============================================================
   CONTACT
   ============================================================= */
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,4rem); align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin: 0; border-bottom: 1px solid var(--line); }
.contact-list li:first-child { border-top: 1px solid var(--line); }
.contact-list a, .contact-list .row {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem .2rem;
  color: var(--paper);
  transition: padding-left .2s var(--ease);
}
.contact-list a:hover { padding-left: .5rem; color: var(--cyan); }
.contact-list svg { width: 17px; height: 17px; color: var(--cyan); flex: none; }
.contact-list .k {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); display: block; margin-bottom: .1rem;
}
.contact-list .v { font-family: var(--display); font-size: .98rem; font-weight: 500; }

/* =============================================================
   CTA BAND + FOOTER
   ============================================================= */
.cta-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 130% at 50% 100%, rgba(46,197,211,.09), transparent 70%),
    var(--ink-2);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align: center;
}
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { max-width: 52ch; margin-inline: auto; margin-bottom: 1.8rem; }
.cta-band .hero-cta { justify-content: center; }

.site-foot { padding: 3rem 0 2.5rem; }
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem;
  padding-bottom: 2.2rem; border-bottom: 1px solid var(--line);
}
.foot-grid h4 {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: .9rem;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .45rem; }
.foot-grid li a { color: var(--muted); font-size: .88rem; }
.foot-grid li a:hover { color: var(--cyan); }
.foot-blurb { font-size: .9rem; max-width: 38ch; }
.foot-bot {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-top: 1.4rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--muted-2);
}
.visitor-count { display: inline-flex; align-items: baseline; gap: .45rem; }
.visitor-count strong { color: var(--cyan); font-weight: 600; }

/* =============================================================
   MOTION — reveal on scroll
   ============================================================= */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

.stagger > * { opacity: 0; transform: translateY(14px); animation: rise .65s var(--ease) forwards; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .13s; }
.stagger > *:nth-child(3) { animation-delay: .21s; }
.stagger > *:nth-child(4) { animation-delay: .29s; }
.stagger > *:nth-child(5) { animation-delay: .37s; }
.stagger > *:nth-child(6) { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1040px) {
  .detail-body { grid-template-columns: 1fr; }
  .detail-side { position: static; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { position: static; max-width: 320px; }
  .nav-search { min-width: 150px; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .portrait { order: -1; max-width: 330px; }
  .chip-1 { left: -6%; } .chip-2 { right: -6%; } .chip-3 { left: -4%; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip div:nth-child(2) { border-right: 0; }
  .stat-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .work-signals { grid-template-columns: 1fr 1fr; }
  .brief-grid-three { grid-template-columns: 1fr 1fr; }

  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--line);
    padding: .8rem 1.25rem 1.3rem;
    transform: translateY(-12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav a { padding: .85rem .4rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav a.current::after { left: .4rem; right: auto; width: 20px; bottom: .5rem; }
  .nav-search { order: -1; margin-bottom: .6rem; min-width: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 2rem); }
  .gate-outcomes { grid-template-columns: 1fr; gap: .8rem; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip div { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat-strip div:last-child { border-bottom: 0; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
  .foot-grid { grid-template-columns: 1fr; }
  .work-signals, .brief-grid-two, .brief-grid-three { grid-template-columns: 1fr; }
  .brief-connect { align-items: flex-start; flex-direction: column; }
  .brief-connect-links { justify-content: flex-start; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .sort-wrap { margin-left: 0; }
  .sort-wrap select { flex: 1; }
  .card-grid { grid-template-columns: 1fr; }
  .card-grid.two { grid-template-columns: 1fr; }
  .portrait-chip { font-size: .62rem; padding: .3rem .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stagger > * { opacity: 1; transform: none; }
}

@media print {
  .site-head, .crumbs-bar, .cta-band, .site-foot, .btn-back, .toolbar { display: none; }
  body { background: #fff; color: #111; }
}

/* =============================================================
   BLOG — index + post
   ============================================================= */

/* Shared page header, also usable by other simple pages later. */
.page-h1 {
  max-width: 16ch;
  margin: 0 0 .9rem;
}
.page-lede {
  font-size: 1.06rem;
  max-width: 58ch;
  margin: 0 0 clamp(2.2rem, 5vw, 3.4rem);
}

/* ---------- index list ---------- */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.post-item { border-bottom: 1px solid var(--line); }

.post-link {
  display: block;
  padding: 1.9rem 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: padding-left .25s var(--ease);
}
/* Cyan rule slides in from the left on hover — the site's hover idiom. */
.post-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.9rem;
  bottom: 1.9rem;
  width: 2px;
  background: var(--cyan);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.post-link:hover { padding-left: 1.15rem; }
.post-link:hover::before { opacity: 1; }
.post-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: .7rem;
}
.post-meta .sep { color: var(--line); }

.post-title {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.3vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--paper);
  margin: 0 0 .55rem;
  max-width: 26ch;
  transition: color .2s var(--ease);
}
.post-link:hover .post-title { color: var(--cyan); }

.post-sum {
  margin: 0;
  max-width: 62ch;
  font-size: .98rem;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .9rem;
}
.post-tags .tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .22rem .6rem;
}

/* ---------- single post ---------- */
.post-hero { padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(1.6rem, 3vw, 2.4rem); }
.post-hero h1 { max-width: 22ch; margin-bottom: 1rem; }
.post-hero-sum {
  font-size: 1.08rem;
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
}
.post-hero .post-tags { margin-top: 1.2rem; }

/* Narrower measure than the detail page — this is reading, not scanning. */
.post-prose { max-width: 68ch; }
.post-prose > section { margin-bottom: 2.6rem; }
.post-prose > section:last-child { margin-bottom: 0; }
.post-prose h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.15rem;
}
.post-prose p,
.post-prose li { font-size: 1.02rem; line-height: 1.75; }
.post-prose code {
  font-family: var(--mono);
  font-size: .85em;
  color: var(--cyan);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .1em .38em;
}

/* ---------- share row ---------- */
.post-share {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  max-width: 68ch;
}
.share-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 .8rem;
}
.share-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .82rem;
  color: var(--muted);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.share-btn svg { width: 15px; height: 15px; flex: none; }
.share-btn:hover {
  color: var(--paper);
  border-color: var(--cyan-dim);
  transform: translateY(-2px);
}
.share-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.share-btn.copied { color: var(--cyan); border-color: var(--cyan-dim); }

/* ---------- prev / next ---------- */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.post-nav-link {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.post-nav-link:hover { border-color: var(--cyan-dim); transform: translateY(-2px); }
.post-nav-link.align-right { text-align: right; }
.post-nav-dir {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: .35rem;
}
.post-nav-title {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  color: var(--paper);
  line-height: 1.3;
}

/* =============================================================
   CONTROL SYSTEM POST — technical explainer treatment
   Scoped to #postBody.control-post so the rest of the blog stays
   intentionally quiet. The page reads like a small system spec:
   bounded autonomy in the hero, architecture in the figures,
   then executable policy and feedback loops in the body.
   ============================================================= */
.control-post .control-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(11,17,32,.98) 0%, rgba(11,17,32,.9) 55%, rgba(18,27,46,.84) 100%),
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
}
.control-post .control-hero::before {
  content: "";
  position: absolute;
  width: 34rem;
  height: 34rem;
  right: -12rem;
  top: -14rem;
  border: 1px solid rgba(46,197,211,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(46,197,211,.035), 0 0 0 84px rgba(46,197,211,.025);
}
.control-post .control-hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(2rem, 6vw, 6.5rem);
  align-items: end;
}
.control-hero-copy h1 {
  max-width: 14ch;
  margin: .55rem 0 1.2rem;
  font-size: clamp(2.8rem, 6.8vw, 6.15rem);
  letter-spacing: -.065em;
}
.control-hero-copy .eyebrow {
  margin-bottom: 0;
  color: var(--cyan);
}
.control-hero-copy .post-hero-sum {
  max-width: 62ch;
  font-size: clamp(1rem, 1.55vw, 1.22rem);
  line-height: 1.75;
  color: #b8c8dc;
}
.control-hero-panel {
  position: relative;
  overflow: hidden;
  min-height: 270px;
  padding: 1.35rem;
  border: 1px solid var(--cyan-dim);
  border-radius: var(--r);
  background: linear-gradient(145deg, rgba(18,27,46,.98), rgba(11,17,32,.78));
  box-shadow: 0 20px 70px rgba(0,0,0,.24), inset 0 0 0 1px rgba(46,197,211,.04);
}
.control-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image: linear-gradient(rgba(46,197,211,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(46,197,211,.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, #000 0%, transparent 75%);
}
.control-hero-panel > * { position: relative; z-index: 1; }
.panel-kicker, .compare-label {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.control-hero-panel > p {
  max-width: 18ch;
  margin: 1rem 0 1.6rem;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -.035em;
  color: var(--paper);
}
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.hero-fact strong {
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  color: var(--paper);
  line-height: 1;
}
.hero-fact span {
  display: block;
  margin-top: .42rem;
  font-family: var(--mono);
  font-size: .6rem;
  line-height: 1.35;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.panel-foot {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.status-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 .25rem var(--cyan-glow);
}
.control-post .post-prose {
  max-width: 980px;
}
.control-post .post-prose > section {
  margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
}
.control-post .post-prose > section:first-child {
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--r) var(--r) 0;
  background: linear-gradient(120deg, rgba(18,27,46,.94), rgba(18,27,46,.42));
}
.control-post .post-prose h2 {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  padding: 0 0 .9rem;
  border-bottom: 0;
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  letter-spacing: -.045em;
}
.control-post .post-prose h2::before {
  content: "";
  flex: none;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cyan);
}
.control-post .post-prose p,
.control-post .post-prose li {
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  line-height: 1.85;
}
.control-post .post-prose strong { color: var(--paper); }
.control-post .post-prose em { color: #c3d2e5; }
.control-post .post-prose .figure { margin-top: 1.1rem; }
.control-post .post-prose .figure-canvas { padding: 1.45rem 1.1rem .7rem; }
.control-post .post-prose .figure-cap { max-width: 82ch; }
.control-post .code-block {
  margin: 1.2rem 0 0;
  padding: 1.25rem 1.35rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  border-radius: var(--r-sm);
  background: #080d18;
  color: #c9f4f6;
  font-size: .8rem;
  line-height: 1.8;
  box-shadow: inset 0 0 35px rgba(46,197,211,.035);
}
.control-post .compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.control-post .compare-card {
  min-height: 250px;
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  border-radius: var(--r-sm);
  background: var(--ink-2);
}
.control-post .compare-card.amber { border-top-color: var(--amber); }
.control-post .compare-card.violet { border-top-color: #a78bfa; }
.control-post .compare-card h3 {
  margin: .7rem 0 .75rem;
  font-size: 1.28rem;
  color: var(--paper);
}
.control-post .compare-card p { margin-bottom: .9rem; font-size: .95rem; line-height: 1.65; }
.control-post .compare-card ul { padding-left: 1.05rem; margin: 0; }
.control-post .compare-card li { margin-bottom: .35rem; font-family: var(--mono); font-size: .72rem; line-height: 1.55; color: #a9bcd4; }
.control-post .compare-card li::marker { color: var(--cyan); }
.control-post .tbl-scroll { margin-top: 1.1rem; border-color: var(--line); }
.control-post table { min-width: 650px; }
.control-post th { background: #0b1425; }
.control-post td { font-size: .86rem; line-height: 1.6; }
.control-post .note-block {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-color: var(--cyan-dim);
  border-left-width: 3px;
  background: linear-gradient(135deg, rgba(46,197,211,.1), rgba(18,27,46,.82));
}
.control-post .note-block p:last-child { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--cyan); }
.control-post .post-share,
.control-post .post-nav { max-width: 980px; }

.term-popover-trigger {
  appearance: none;
  border: 0;
  border-bottom: 1px dashed var(--cyan);
  padding: 0 .18em;
  background: rgba(46,197,211,.08);
  color: var(--cyan);
  font: inherit;
  cursor: help;
}
.term-popover-trigger:hover,
.term-popover-trigger[aria-expanded="true"] {
  background: rgba(46,197,211,.18);
  color: #a7f1f5;
}
.term-popover {
  position: fixed;
  z-index: 120;
  max-height: min(76vh, 680px);
  overflow: auto;
  padding: 1.15rem;
  border: 1px solid var(--cyan-dim);
  border-radius: var(--r);
  background: rgba(11,17,32,.98);
  box-shadow: 0 22px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(46,197,211,.05);
  backdrop-filter: blur(16px);
}
.popover-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.popover-kicker {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--cyan);
}
.popover-head h3 { margin: 0; font-size: 1.25rem; color: var(--paper); }
.popover-close {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ink-2);
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.popover-close:hover { border-color: var(--cyan); color: var(--cyan); }
.popover-intro {
  margin: .85rem 0 1rem;
  font-size: .86rem !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
}
.rego-example {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: var(--r-sm);
  background: #080d18;
  color: #c9f4f6;
  font: .78rem/1.65 var(--mono);
}
.regex-list { display: grid; gap: .55rem; }
.regex-item {
  padding: .8rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(18,27,46,.72);
}
.regex-item-top { display: grid; gap: .42rem; }
.regex-item-top strong { color: var(--paper); font-size: .82rem; }
.regex-item-top code {
  display: block;
  overflow-x: auto;
  color: #a7e8ef;
  font-size: .7rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.regex-item p {
  margin: .5rem 0 0;
  font-size: .78rem !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
}
.popover-warning {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .76rem !important;
  line-height: 1.55 !important;
  color: var(--amber) !important;
}
.popover-warning strong { color: #ffc17f !important; }

@media (max-width: 760px) {
  .control-post .control-hero .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .control-hero-copy h1 { max-width: 12ch; font-size: clamp(2.7rem, 13vw, 4.8rem); }
  .control-hero-panel { min-height: 0; }
  .control-post .compare-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-link.align-right { text-align: left; }
}

/* =============================================================
   SOCIAL EMBED — featured LinkedIn post on Contact
   ============================================================= */
.social-embed {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.social-embed-h {
  max-width: 20ch;
  margin: 0 0 1.6rem;
}

/* Posts sit side by side while two 504px columns still fit, then stack.
   auto-fit + minmax does the switch on its own — no breakpoint to keep
   in sync if a third post is ever added to the list. */
.embed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 504px));
  gap: clamp(1.2rem, 3vw, 2rem);
  justify-content: start;
}

/* The iframe is a fixed 504×594 from LinkedIn. Cap the width and let it
   shrink on narrow screens rather than pushing the page sideways. */
.embed-frame {
  width: 100%;
  max-width: 504px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink-2);
}
.embed-frame iframe {
  display: block;
  width: 100%;
  height: 594px;
  border: 0;
}

.embed-note {
  font-size: .85rem;
  color: var(--muted-2);
  max-width: 52ch;
  margin: .9rem 0 0;
}
.embed-note a { color: var(--cyan); }

/* =============================================================
   BUILD NOTICE — in the footer, on every page

   Same pill as .avail in the hero, in amber so it reads as a caution
   rather than an offer. Delete this block and its markup in
   buildFooter() once the content has been reviewed.
   ============================================================= */
.build-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 2rem 0 0;
  padding: .42rem .95rem .42rem .8rem;
  border: 1px solid rgba(242, 153, 74, .35);
  border-radius: 999px;
  background: rgba(242, 153, 74, .1);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #f3c396;
  line-height: 1.5;
}
.build-pill .dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  animation: buildPulse 2.4s var(--ease) infinite;
}
@keyframes buildPulse {
  0%   { box-shadow: 0 0 0 0 rgba(242, 153, 74, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(242, 153, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 153, 74, 0); }
}
@media (prefers-reduced-motion: reduce) { .build-pill .dot { animation: none; } }

/* The separators earn their keep on one line and get in the way on two. */
@media (max-width: 620px) {
  .build-pill { border-radius: var(--r); }
  .build-pill .sep { display: none; }
}

/* =============================================================
   CERTIFICATE RAIL

   A horizontal conveyor of the Coursera certificates. The geometry
   is driven from one place:

     --cert-w     card width
     --cert-gap   space between cards
     --cert-run   how long one full pass takes

   Each card carries one more, set inline by the renderer:

     --cert-a     its tilt on the rail

   That tilt is used twice and must cancel exactly, or a hovered
   certificate reads off-square:

     .cert-node     rotate(+a)   — lays the card down at its angle
     .cert-upright  rotate(-a)   — on hover, undoes it back to level

   The gap lives on the card as a right margin rather than on the
   track as `gap`. With `gap`, one set of nine is 9w + 8g while the
   loop needs to travel 9w + 9g, and the half-width translate leaves
   a visible half-gap jump every pass. Folding the gap into the card
   makes one set exactly 9(w + g), which is exactly 50% of the
   doubled track.
   ============================================================= */
.cert-rail {
  --cert-w: clamp(190px, 19vw, 250px);
  --cert-gap: clamp(1rem, 2vw, 1.9rem);
  --cert-run: 64s;

  position: relative;
  overflow: hidden;
  /* Room above and below for the hover zoom to grow into. */
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

/* The edge fade, so the rail reads as continuing past the screen
   instead of stopping at it.

   Two painted gradients rather than a mask-image on .cert-rail: a
   mask re-composites the whole moving strip offscreen every frame,
   which is enough to stall the renderer at this width. These are
   static overlays the compositor never has to redraw. */
.cert-rail::before,
.cert-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 130px);
  z-index: 2;
  pointer-events: none;
}
.cert-rail::before {
  left: 0;
  background: linear-gradient(90deg, var(--ink), rgba(11, 17, 32, 0));
}
.cert-rail::after {
  right: 0;
  background: linear-gradient(270deg, var(--ink), rgba(11, 17, 32, 0));
}

.cert-track {
  position: relative;
  z-index: 1;
  display: flex;
  width: max-content;
  animation: certRun var(--cert-run) linear infinite;
}

/* The duplicate set. `display: contents` drops this wrapper out of
   the layout so its nine cards sit directly on the track — without
   it the copy would collapse into a single flex item. */
.cert-loop { display: contents; }

@keyframes certRun {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* PAUSE ON HOVER — the rail stops so a card can be read at rest.
   focus-within covers keyboard users tabbing through the links. */
.cert-rail:hover .cert-track,
.cert-rail:focus-within .cert-track { animation-play-state: paused; }

/* Laid down at its tilt. */
.cert-node {
  flex: none;
  width: var(--cert-w);
  margin-right: var(--cert-gap);
  z-index: 1;
}

/* Z-INDEX ELEVATION — the hovered card is lifted out of the strip so
   the zoomed view sits over its neighbours instead of being clipped
   by the ones drawn after it. */
.cert-node:hover,
.cert-node:focus-within { z-index: 30; }

/* COUNTER-ROTATION — at rest the card carries its tilt; on hover the
   inner layer rotates backward by the same angle, so the two cancel
   and the certificate sits level while it is being read. */
.cert-upright {
  transform: rotate(var(--cert-a));
  transition: transform .5s var(--ease);
}
.cert-node:hover .cert-upright,
.cert-node:focus-within .cert-upright { transform: rotate(0deg); }

/* ---------- the card ---------- */
.cert-card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-2);
  overflow: hidden;
  transition:
    transform .5s var(--ease),
    border-color .3s var(--ease),
    box-shadow .5s var(--ease);
}
.cert-node:hover .cert-card,
.cert-node:focus-within .cert-card {
  transform: scale(1.28);
  border-color: var(--cyan-dim);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .62), 0 0 0 1px var(--cyan-glow);
}

.cert-shot { display: block; background: #fff; }
.cert-shot img {
  width: 100%;
  /* The width/height attributes on the tag reserve the space before
     the image loads, but they also set a presentational height that
     would beat aspect-ratio and stretch the certificate. `height:
     auto` hands the height back to the ratio. */
  height: auto;
  /* Matches the thumb render, so the certificate is never cropped. */
  aspect-ratio: 560 / 433;
  object-fit: cover;
}

.cert-meta {
  padding: .75rem .85rem .85rem;
  border-top: 1px solid var(--line);
}
.cert-track-label {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 .35rem;
}
.cert-meta h3 {
  font-size: .82rem;
  line-height: 1.32;
  letter-spacing: -.01em;
  margin: 0 0 .3rem;
}
.cert-issuer {
  font-size: .7rem;
  line-height: 1.45;
  color: var(--muted-2);
  margin: 0 0 .45rem;
}
.cert-verify {
  display: inline-block;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .07em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.cert-verify:hover { color: var(--cyan); border-bottom-color: var(--cyan-dim); }

.cert-hint {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}

/* ---------- reduced motion ---------- */
/* The rail keeps its shape, it just stops travelling. Everything is
   still reachable — the strip scrolls by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .cert-rail { overflow-x: auto; }
  .cert-track { animation: none; }
  .cert-node:hover .cert-card,
  .cert-node:focus-within .cert-card { transform: scale(1.06); }
}

/* ---------- touch and small screens ---------- */
/* Hover does not exist on a phone, so an animation that can only be
   stopped by hovering is a trap. Below this width the rail becomes a
   swipeable strip: no travel, no tilt, snap to each card. */
@media (hover: none), (max-width: 720px) {
  .cert-rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: 1rem;
  }
  /* No edge fade when the strip is swiped by hand — it would sit over
     the card the reader is dragging into view. */
  .cert-rail::before,
  .cert-rail::after { display: none; }
  .cert-track { animation: none; }
  .cert-loop { display: none; }
  .cert-node { scroll-snap-align: center; }
  .cert-upright { transform: none; }
  .cert-node:hover .cert-card,
  .cert-node:focus-within .cert-card {
    transform: none;
    box-shadow: none;
  }
}

/* =============================================================
   ADDITIONS — 18 Aug 2026
   Stat bar, credit-card work cards, About side rail.
   Appended rather than woven in so the diff reads in one place.
   ============================================================= */

/* -------------------------------------------------------------
   HERO TAGLINE + STAT BAR

   The pitch paragraph came out of the hero on 18 Aug 2026 and these
   two took its place: one line saying what the job is, then the
   numbers backing it. A recruiter scans numbers before they read
   sentences, and five short tiles survive a thirty-second scan in a
   way that five lines of prose never did.

   Three across rather than five, because the bar now lives inside the
   copy column instead of spanning the page. Five tiles over three
   columns leaves the last cell empty; the row rule makes that read as
   a deliberate second row rather than as a missing tile.
   ------------------------------------------------------------- */
.hero-tagline {
  font-family: var(--display);
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--paper);
  max-width: 32ch;
  margin: .1rem 0 1.6rem;
}

.stat-bar {
  list-style: none;
  margin: 1.9rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem 1.2rem;
}
.stat-bar li {
  margin: 0;
  display: flex; flex-direction: column; gap: .3rem;
  padding-left: .95rem;
  border-left: 1px solid var(--line);
}
/* first cell of each row opens the row, so it carries no rule */
.stat-bar li:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
/* the second row gets a rule above it, so the empty third cell reads
   as the end of a row rather than as a hole */
.stat-bar li:nth-child(n + 4) { padding-top: 1.15rem; border-top: 1px solid var(--line); }

.stat-bar b {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.75vw, 1.65rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--cyan);
  white-space: nowrap;
}
.stat-bar span {
  font-family: var(--mono);
  font-size: .625rem;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--muted-2);
}

/* Below 900px the hero stacks and the copy column becomes the full
   width, so the bar can breathe again — but two columns keeps the
   labels off a third line. */
@media (max-width: 900px) {
  .stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-bar li:nth-child(3n + 1) { padding-left: .95rem; border-left: 1px solid var(--line); }
  .stat-bar li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat-bar li:nth-child(n + 3) { padding-top: 1.15rem; border-top: 1px solid var(--line); }
  .stat-bar li:nth-child(n + 4):nth-child(-n + 3) { padding-top: 0; border-top: 0; }
}
@media (max-width: 420px) {
  .stat-bar { grid-template-columns: 1fr; }
  .stat-bar li,
  .stat-bar li:nth-child(3n + 1),
  .stat-bar li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat-bar li + li { padding-top: 1rem; border-top: 1px solid var(--line); }
}

/* -------------------------------------------------------------
   WORK CARDS — credit-card proportions

   Roughly half the previous height and landscape rather than
   portrait. The summary paragraph and the gate line came out of
   the card markup: at this size they were the difference between
   a card you scan and a card you have to read. Both still live on
   the breakdown page, which is where someone who wants them goes.

   aspect-ratio is a preference, not a cage — a long title still
   grows the card rather than being clipped.
   ------------------------------------------------------------- */
.card-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.1rem; }
.card-grid.two { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.card:not(.cat-card) {
  aspect-ratio: 1.55 / 1;
  padding: 1.15rem 1.25rem;
}
.card:not(.cat-card) .card-top { margin-bottom: .6rem; font-size: .62rem; }
.card:not(.cat-card) h3 { font-size: 1.02rem; line-height: 1.25; margin-bottom: .3rem; }
.card:not(.cat-card) .card-tagline {
  font-size: .84rem;
  margin-bottom: .7rem;
  color: var(--muted);
}
.card-brief {
  display: grid;
  gap: .55rem;
  margin: .2rem 0 .8rem;
}
.card-brief > div {
  border-left: 2px solid var(--line);
  padding-left: .65rem;
}
.card-brief .k {
  display: block;
  margin-bottom: .16rem;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .59rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.card-brief p {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.card:not(.cat-card) .tags { margin-bottom: 0; gap: .3rem; }
.card:not(.cat-card) .tags li { font-size: .6rem; padding: .16rem .42rem; }
.card:not(.cat-card) .card-link { margin-top: auto; padding-top: .8rem; font-size: .8rem; }

/* -------------------------------------------------------------
   ABOUT — side rail

   The left column used to end at the photo and leave a tall empty
   gutter. It now carries the jump links, so the page is navigable
   without scrolling to find out what is on it.
   ------------------------------------------------------------- */
.about-side { position: sticky; top: calc(var(--nav-h) + 1.2rem); }
.about-photo { position: static; }   /* the wrapper is the sticky one now */

.about-nav { margin-top: 1.4rem; }
.about-nav-h {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 .6rem;
}
.about-nav ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.about-nav li { margin: 0; }
.about-nav a {
  display: block;
  padding: .5rem 0 .5rem .9rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.about-nav a:hover { color: var(--paper); border-left-color: var(--cyan-dim); }
.about-nav a.on { color: var(--cyan); border-left-color: var(--cyan); }

/* Anchor jumps land under the fixed nav bar without this. */
#skills, #education, #reading, #experience, #certificates { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

/* On a narrow screen the rail stops being a rail: the photo and the
   links sit inline above the content rather than pinned beside it. */
@media (max-width: 900px) {
  .about-side { position: static; }
  .about-nav ul { display: flex; flex-wrap: wrap; gap: .3rem; border-left: 0; }
  .about-nav a { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .84rem; }
  .about-nav a:hover, .about-nav a.on { border-color: var(--cyan); }
}

/* -------------------------------------------------------------
   FOOTER — terms link sits with the copyright line
   ------------------------------------------------------------- */
.foot-bot a { color: inherit; border-bottom: 1px solid var(--line); }
.foot-bot a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

/* -------------------------------------------------------------
   PAGER ARROW — pre-existing bug, fixed 18 Aug 2026

   The prev/next arrow inside .pager had no size on it, so the SVG
   fell back to filling its flex line: roughly 357px square on every
   breakdown page. Every other arrow on the site is sized by its own
   rule (.btn svg, .card-link svg); this one was simply missed.
   ------------------------------------------------------------- */
.pager svg { width: 15px; height: 15px; flex: 0 0 auto; }