/* ============================================================
   Kestin Kuhn - Engineering Portfolio
   Minimal, professional, one blue accent. No decorative filler.
   ============================================================ */

:root {
  --bg:            #ffffff;
  --surface:       #f5f6f8;
  --surface-2:     #eceef1;
  --ink:           #0b0e13;
  --ink-2:         #333944;
  --muted:         #5b6470;
  --faint:         #8b929c;
  --accent:        #1857d6;
  --accent-strong: #123fa0;
  --accent-tint:   #eef3fe;
  --line:          rgba(11, 14, 19, 0.12);
  --line-soft:     rgba(11, 14, 19, 0.07);
  --shadow-sm: 0 1px 2px rgba(11,14,19,0.05);
  --shadow-md: 0 12px 34px -18px rgba(11,14,19,0.28);
  --max: 1080px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.section { padding: clamp(3.75rem, 8vw, 6.5rem) 0; }
.section--surface { background: var(--surface); }
.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--ink); font-weight: 650; letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
.h-display { font-size: clamp(2.6rem, 6vw, 4.2rem); letter-spacing: -0.035em; line-height: 1.02; }
.h-section { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.028em; }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted); max-width: 60ch; margin: 0; }
.measure { max-width: 66ch; }
.muted { color: var(--muted); }
.section-head { margin-bottom: clamp(2.25rem, 4vw, 3rem); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.68rem 1.2rem; border-radius: 8px;
  font-size: 0.94rem; font-weight: 550; letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s cubic-bezier(0.16,1,0.3,1), box-shadow 0.16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--accent:hover { box-shadow: 0 10px 22px -12px rgba(24,87,214,0.65); }
.btn--primary:hover { box-shadow: var(--shadow-md); }
.btn svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #000; color: #fff; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-strong); color: #fff; }
.btn--ghost { background: var(--bg); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { padding: 0.5rem 0.9rem; font-size: 0.86rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.65rem; }

/* ---------- Header / Nav ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.header.is-stuck { border-bottom-color: var(--line-soft); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { color: var(--ink); font-weight: 650; letter-spacing: -0.02em; font-size: 1rem; }
.brand:hover { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-links a {
  color: var(--muted); font-size: 0.9rem; font-weight: 500;
  padding: 0.4rem 0.7rem; border-radius: 7px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--surface); }
.nav-links a.active { color: var(--ink); }
/* Animated underline indicator for section links */
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.15rem;
  height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease;
}
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta).active::after { transform: scaleX(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nav-links a::after { transition: none; } }
.nav-links .nav-cta { color: #fff; background: var(--ink); margin-left: 0.4rem; }
.nav-links .nav-cta:hover { background: #000; color: #fff; }
.nav-toggle {
  display: none; width: 40px; height: 40px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--bg); cursor: pointer; position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 1.6px; background: var(--ink); transform: translate(-50%,-50%);
  transition: transform 0.2s ease;
}
.nav-toggle span::before { transform: translate(-50%,-5px); }
.nav-toggle span::after  { transform: translate(-50%,5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translate(-50%,0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translate(-50%,0) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.hero .h-display { margin-bottom: 1rem; }
.hero-role {
  font-family: var(--mono); font-size: clamp(0.82rem, 1.5vw, 0.98rem);
  color: var(--ink-2); font-weight: 500; margin: 0 0 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem;
}
.hero-role .sep { color: var(--accent); }
.hero-text { font-size: clamp(1.02rem, 1.4vw, 1.16rem); color: var(--muted); max-width: 58ch; margin: 0 0 1.8rem; }

/* ---------- Stat strip ---------- */
/* Flex, not a fixed grid, so the strip adapts to however many stats exist.
   Items grow to fill the row exactly, so the gray backing only ever shows
   through the 1px separators and never as an empty cell. */
.stats {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}
.stat { flex: 1 1 200px; background: var(--bg); padding: 1.7rem 1.2rem; }
.stat .num { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 680; letter-spacing: -0.03em; color: var(--ink); }
.stat .num .unit { color: var(--accent); }
.stat .label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem; }

/* ---------- Work grid (home) ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.work-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow-sm);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.work-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.work-card.is-featured { grid-column: 1 / -1; }
.work-card .cover { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.work-card.is-featured .cover { aspect-ratio: 21 / 9; }
.work-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16,0.84,0.44,1); }
.work-card:hover .cover img { transform: scale(1.03); }
.cover--placeholder {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 0.5rem;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  text-align: center; padding: 1.5rem;
}
.cover--placeholder .pill {
  justify-self: center; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.3rem 0.7rem; background: var(--bg);
}
.cover--placeholder .ttl { font-weight: 600; color: var(--ink); font-size: 1.05rem; letter-spacing: -0.01em; }
.featured-flag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 0.32rem 0.65rem; border-radius: 999px;
}
.work-card .body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.work-card .kicker { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.6rem; }
.work-card h3 { font-size: 1.28rem; margin-bottom: 0.55rem; }
.work-card.is-featured h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.work-card .blurb { color: var(--muted); font-size: 0.97rem; margin: 0 0 1.1rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.tag {
  font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.26rem 0.62rem;
}
.tag--accent { color: var(--accent); border-color: rgba(24,87,214,0.28); background: var(--accent-tint); }
.card-link { position: absolute; inset: 0; z-index: 3; }
.work-card .cover, .work-card .body { position: relative; }
.work-card { transition: box-shadow 0.28s cubic-bezier(0.16,1,0.3,1), transform 0.28s cubic-bezier(0.16,1,0.3,1), border-color 0.28s ease; }
.work-card:hover { transform: translateY(-4px); border-color: rgba(24,87,214,0.35); }
.card-cta {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); transition: color 0.2s ease;
}
.card-cta svg { width: 15px; height: 15px; transition: transform 0.28s cubic-bezier(0.16,1,0.3,1); }
.work-card:hover .card-cta { color: var(--accent); }
.work-card:hover .card-cta svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .work-card:hover { transform: none; } .work-card:hover .card-cta svg { transform: none; } }

/* ---------- About / prose ---------- */
.two-col { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.prose p { margin: 0 0 1.1rem; color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------- Experience ---------- */
.exp { display: grid; }
.exp-item {
  display: grid; grid-template-columns: 190px 1fr; gap: clamp(1rem, 3vw, 2.75rem);
  padding: clamp(1.4rem, 3vw, 2rem) 0; border-top: 1px solid var(--line-soft);
}
.exp-item:first-child { border-top: 0; }
.exp-when { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.exp-when .loc { display: block; color: var(--faint); font-size: 0.72rem; margin-top: 0.35rem; letter-spacing: 0.06em; text-transform: uppercase; }
.exp-body h3 { font-size: 1.18rem; }
.exp-body .role { color: var(--accent); font-weight: 600; font-size: 0.94rem; margin: 0.2rem 0 0.85rem; }
.exp-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.exp-body li { position: relative; padding-left: 1.25rem; color: var(--muted); font-size: 0.95rem; }
.exp-body li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border: 1.4px solid var(--accent); transform: rotate(45deg); }
.exp-body li strong { color: var(--ink); font-weight: 600; }

/* ---------- Toolbox ---------- */
.toolbox { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.tool-group { background: var(--bg); padding: clamp(1.3rem, 2.4vw, 1.8rem); }
.tool-group h3 { font-size: 0.78rem; font-family: var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { font-size: 0.88rem; color: var(--ink); font-weight: 500; border: 1px solid var(--line); border-radius: 7px; padding: 0.38rem 0.72rem; background: var(--bg); }

/* ---------- Cards (education / certifications) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; background: var(--bg); }
.card .kicker { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; }
.card h3 { font-size: 1.12rem; margin-bottom: 0.25rem; }
.card .sub { color: var(--muted); font-size: 0.9rem; }
.card ul { margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.card ul li { color: var(--muted); font-size: 0.9rem; padding-left: 1.05rem; position: relative; }
.card ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }

/* ---------- Contact ---------- */
.contact-mail { font-size: clamp(1.35rem, 3.2vw, 2.2rem); font-weight: 650; letter-spacing: -0.03em; color: var(--ink); display: inline-block; border-bottom: 2px solid var(--line); padding-bottom: 0.15rem; }
.contact-mail:hover { color: var(--accent); border-color: var(--accent); }
.contact-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: 2.25rem 0; }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--faint); }
.footer-links { display: flex; gap: 1.1rem; }
.footer-links a { color: var(--muted); font-size: 0.88rem; }
.footer-links a:hover { color: var(--ink); }

/* ============================================================
   Project page (project.html)
   ============================================================ */
.proj-top { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.back-link { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.6rem; }
.back-link:hover { color: var(--accent); }
.proj-header { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; margin-bottom: 2.5rem; }
.proj-header .kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; }
.proj-header h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; margin-bottom: 0.9rem; }
.proj-header .tagline { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--muted); }
.proj-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.spec {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg);
}
.spec .spec-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.1rem; border-top: 1px solid var(--line-soft); font-size: 0.9rem; }
.spec .spec-row:first-child { border-top: 0; }
.spec .k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.spec .v { color: var(--ink); font-weight: 550; text-align: right; }

.proj-hero-img { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); background: var(--surface); }
.proj-hero-img img { width: 100%; height: auto; display: block; }

.proj-body { display: grid; grid-template-columns: 200px 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.proj-toc { position: sticky; top: 84px; display: grid; gap: 0.3rem; }
.proj-toc a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--muted); padding: 0.3rem 0; border-left: 2px solid var(--line-soft); padding-left: 0.8rem; }
.proj-toc a:hover, .proj-toc a.active { color: var(--accent); border-left-color: var(--accent); }

.proj-section { padding-bottom: clamp(2.25rem, 4vw, 3rem); margin-bottom: clamp(2.25rem, 4vw, 3rem); border-bottom: 1px solid var(--line-soft); scroll-margin-top: 84px; }
.proj-section:last-child { border-bottom: 0; margin-bottom: 0; }
.proj-section h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-bottom: 1rem; letter-spacing: -0.02em; }
.proj-section p { color: var(--ink-2); margin: 0 0 1rem; max-width: 68ch; }
.proj-section p:last-child { margin-bottom: 0; }
.proj-section ul { margin: 0.5rem 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; max-width: 68ch; }
.proj-section ul li { position: relative; padding-left: 1.3rem; color: var(--ink-2); }
.proj-section ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border: 1.4px solid var(--accent); transform: rotate(45deg); }

/* ---------- Tables (requirements, trade studies, before/after) ---------- */
/* Grid and flex children default to min-width:auto, so a wide table would
   push the whole column open and scroll the page. This keeps the scroll
   inside the table instead. */
.proj-body > * { min-width: 0; }
.table-wrap { overflow-x: auto; max-width: 100%; margin: 1.4rem 0; border: 1px solid var(--line); border-radius: 10px; }
.proj-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.proj-table th, .proj-table td { text-align: left; padding: 0.7rem 0.95rem; vertical-align: top; border-top: 1px solid var(--line-soft); }
.proj-table thead th {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; background: var(--surface); border-top: 0; white-space: nowrap;
}
.proj-table tbody tr:first-child td { border-top: 0; }
.proj-table td { color: var(--ink-2); }
/* First column reads as the identifier when it is a short code */
.proj-table td:first-child { color: var(--ink); font-weight: 550; white-space: nowrap; }

.figure { margin: 1.5rem 0; }
.figure img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; cursor: zoom-in; background: var(--surface); }
.figure figcaption { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--faint); margin-top: 0.6rem; }
.fig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; }
.fig-grid .figure { margin: 0; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(8,10,14,0.9); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 2rem; }
.lightbox.open { display: flex; }
.lightbox img { max-width: min(94vw, 1100px); max-height: 90vh; width: auto; border-radius: 8px; }
.lightbox-close { position: absolute; top: 1.3rem; right: 1.5rem; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); color: #fff; font-size: 1.4rem; cursor: pointer; }

/* ---------- Motion reveal base ----------
   Elements marked .reveal are shown by default. Only when motion.js
   confirms support and no reduced-motion preference does it add
   .has-motion, which hides them until animated in. This keeps content
   visible without JS and for reduced-motion users. */
.has-motion .reveal:not(.is-in) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .toolbox { grid-template-columns: 1fr; }
  .proj-header { grid-template-columns: 1fr; align-items: start; }
  .proj-body { grid-template-columns: 1fr; }
  .proj-toc { position: static; display: none; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav-links {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0.15rem;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line); padding: 0.75rem 1.25rem 1.25rem;
    transform: translateY(-135%); transition: transform 0.3s ease; box-shadow: var(--shadow-md);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 0.75rem 0.6rem; font-size: 1rem; }
  .nav-links .nav-cta { margin: 0.4rem 0 0; justify-content: center; }
  .nav-toggle { display: block; }
  .stat { flex-basis: 140px; }   /* two per row on phones, still gapless */
  .exp-item { grid-template-columns: 1fr; gap: 0.6rem; }
  .fig-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .stat { flex-basis: 120px; } }

/* ============================================================
   Refinements and micro-interactions
   ============================================================ */

/* ---------- Hover-to-play cover video ----------
   The video sits directly over the poster image and crossfades in while the
   pointer is on the card. Both use the same object-fit so there is no shift. */
.cover-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.16,1,0.3,1);
}
.cover.is-playing .cover-video { opacity: 1; }
/* Hold the poster still underneath so the two layers do not drift apart */
.work-card:hover .cover.has-video img { transform: none; }

/* Quiet affordance so visitors know the card has motion */
.motion-badge {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.9); color: var(--ink);
  border: 1px solid var(--line-soft); backdrop-filter: blur(4px);
  transition: opacity 0.28s ease;
}
.motion-badge svg { width: 12px; height: 12px; margin-left: 1px; }
.cover.is-playing .motion-badge { opacity: 0; }

/* Project hero image: slow, subtle zoom on hover */
.proj-hero-img { position: relative; }
.proj-hero-img img { transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.proj-hero-img:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .proj-hero-img:hover img { transform: none; } }

/* Figures lift slightly on hover to signal they are zoomable */
.figure img { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease; }
.figure img:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .figure img:hover { transform: none; } }

/* Hero: quiet accent rule under the role line */
.hero-accent { width: 46px; height: 3px; border-radius: 3px; background: var(--accent); margin: 0 0 1.6rem; }

/* Section eyebrow gets a small leading tick for structure */
.eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; }
.eyebrow::before { content: ""; width: 1.4rem; height: 1px; background: var(--accent); opacity: 0.55; }

/* Contact mail arrow affordance */
.contact-mail { transition: color 0.2s ease, border-color 0.2s ease; }

/* ---------- Cross-document view transitions (progressive) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.28s; animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
::view-transition-new(root) { animation-duration: 0.34s; animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
.header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}