/* =============================================================================
   Syed Saad Hasan Emad — "Calibrated"
   Static site stylesheet. Dark-first, dual theme, WCAG AA, one file.
   Sections: fonts · tokens · reset · type · layout · nav · hero · buttons ·
   sections · about · timeline · cards · publications · skills · contact ·
   footer · motion · responsive.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. FONTS */
/* Self-hosted, subset to latin, swap to avoid FOIT. */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("assets/fonts/SpaceGrotesk-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("assets/fonts/SpaceGrotesk-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("assets/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("assets/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("assets/fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
}

/* Metric-adjusted fallbacks: reshape the system fallback's box (via size-adjust
   + ascent/descent overrides) so the swap from fallback → webfont doesn't
   reflow the headline/lead (kills font-swap CLS while keeping font-display:swap).
   Values computed from the subset woff2 against Arial (sans) / Courier New (mono). */
@font-face {
  font-family: "Space Grotesk fallback"; src: local("Arial");
  size-adjust: 93.71%; ascent-override: 105.00%; descent-override: 31.16%; line-gap-override: 0.00%;
}
@font-face {
  font-family: "Inter fallback"; src: local("Arial");
  size-adjust: 105.26%; ascent-override: 92.03%; descent-override: 22.91%; line-gap-override: 0.00%;
}
@font-face {
  font-family: "IBM Plex Mono fallback"; src: local("Courier New");
  size-adjust: 122.01%; ascent-override: 84.01%; descent-override: 22.54%; line-gap-override: 0.00%;
}

/* ----------------------------------------------------------------- 2. TOKENS */
:root {
  /* ---- DARK THEME (default) ---- */
  --bg:            #0A0C10;
  --surface:       #12151B;
  --surface-2:     #191D25;
  --scrim:         #0A0C10E6;

  --line:          #232833;
  --line-strong:   #333A47;

  --text:          #EAECEF;
  --text-2:        #A6ADBA;
  --text-3:        #868D9B;
  --text-faint:    #5A616E;

  --accent:        #FFB84D;
  --accent-strong: #FFC876;
  --accent-dim:    #FFB84D2E;
  --accent-line:   #FFB84D59;

  --uncertain:     #3A4658;

  --ok:            #4FB96A;
  --warn:          #E0A63C;
  --danger:        #F86A61;

  --focus:         #7FB3FF;

  /* on-accent ink (text sitting on a bright amber fill) stays dark in both themes */
  --on-accent:     #0A0C10;

  /* Type */
  --font-display: "Space Grotesk", "Space Grotesk fallback", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Inter fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", "IBM Plex Mono fallback", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --maxw:      1200px;
  --maxw-wide: 1320px;
  --rail:      clamp(1.25rem, 5vw, 6.5rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);

  /* Spacing scale (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;

  /* Radius */
  --radius: 6px;
  --radius-sm: 3px;

  /* Motion */
  --ease-micro: 140ms ease;
  --ease-pos: 220ms ease;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
}

/* bright amber for non-text marks; in dark theme it equals --accent */
:root { --accent-graphic: var(--accent); }

:root[data-theme="light"] {
  /* ---- LIGHT THEME (warm editorial paper) ---- */
  --bg:            #FBFAF8;
  --surface:       #FFFFFF;
  --surface-2:     #F3F1EC;
  --scrim:         #FBFAF8E6;

  --line:          #E5E1D8;
  --line-strong:   #CFC9BC;

  --text:          #16181D;
  --text-2:        #474C56;
  --text-3:        #676C77;
  --text-faint:    #9A9EA6;

  --accent:        #955200;   /* ink: links/text — AA on paper */
  --accent-strong: #7A4300;   /* hover (darker) */
  --accent-graphic:#E8930C;   /* bright amber: bars/rings/large marks only */
  --accent-dim:    #E8930C24;
  --accent-line:   #E8930C5c;

  --uncertain:     #B9B0A0;

  --ok:            #1F8A3B;
  --warn:          #9A6A00;
  --danger:        #C0341C;

  --focus:         #1F5FC7;

  --on-accent:     #0A0C10;
}

/* ------------------------------------------------------------------ 3. RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;                    /* belt-and-suspenders: no horizontal scroll */
}
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(h1, h2, h3, p) { margin: 0; }

/* Focus — visible in both themes, distinct from hover. Never removed. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip-link target: focusable programmatically but no lingering outline box
   (the skip link moves keyboard focus into <main> without a visible ring). */
#main:focus { outline: none; }

.skip-link {
  position: absolute; left: var(--s-4); top: -60px; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-size: .8125rem; padding: .6rem 1rem;
  border-radius: var(--radius); transition: top var(--ease-micro);
}
.skip-link:focus { top: var(--s-4); }

/* -------------------------------------------------------------- 4. TYPOGRAPHY */
.display {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.75rem, 1.6rem + 5.7vw, 5rem);
  line-height: 1.02; letter-spacing: -0.02em;
}
.h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  line-height: 1.08; letter-spacing: -0.015em;
}
.h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.005em;
}
.lead { font-size: 1.1875rem; line-height: 1.7; }
.small { font-size: .875rem; line-height: 1.5; }

.kicker {
  font-family: var(--font-mono); font-weight: 500; font-size: .75rem;
  line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
  font-feature-settings: "tnum" 1;
}
.kicker .dash, .section__kicker .dash { color: var(--accent); }

/* Body prose measure capped for readability */
.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--s-6); }
.prose .lead + p { margin-top: var(--s-6); }

/* Every readout / label / metric is monospace, tabular figures */
.tag, .chip, .readouts, .tl__date, .card__index, .card__stack, .repo,
.award-badge, .contact__k, .footer__coords, .footer__copy, .cred__src,
.pub__venue, .matrix__label, .ach__list, .repos__kicker {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------- 5. LAYOUT */
.container {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 10vh, 128px); }
.section + .section .section__body { border-top: 0; }

/* Section = [rail | body]. Rail holds the sticky mono index + hairline spine. */
.section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
.rail { display: none; }              /* hidden < 1024px; index moves inline */
.section__body { min-width: 0; }      /* allow children to truncate, no overflow */

.section__kicker { margin-bottom: var(--s-4); }
.section__body > .h1 { margin-bottom: var(--s-8); }

/* --------------------------------------------------------------- 6. NAV */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 60px;
}
.nav__brand {
  font-family: var(--font-mono); font-weight: 500; font-size: 1rem;
  letter-spacing: 0.06em; color: var(--text);
}
.nav__brand:hover { color: var(--accent); }

.nav__links { position: relative; }
.nav__list { display: flex; gap: var(--s-6); }
.nav__link {
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .02em;
  color: var(--text-2); padding: .5rem 0; display: inline-block;
  transition: color var(--ease-micro);
}
.nav__link:hover { color: var(--text); }
.nav__link[aria-current="true"] { color: var(--text); }

/* Active-section tick: 2px amber segment that slides between links */
.nav__tick {
  position: absolute; bottom: 4px; left: 0; width: 0; height: 2px;
  background: var(--accent-graphic); border-radius: 2px;
  opacity: 0; transition: left var(--ease-settle), width var(--ease-settle),
                          opacity var(--ease-micro);
  pointer-events: none;
}

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }
.nav__cv { padding: .5rem .8rem; }

/* Theme toggle */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 44px; height: 44px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); color: var(--text-2);
  transition: color var(--ease-micro), border-color var(--ease-micro);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle__icon { width: 18px; height: 18px; display: block; }
/* Show moon on dark (offer light), sun on light (offer dark) */
.theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__sun  { display: block; }
.theme-toggle__label { display: none; }

.nav__menu-btn {
  display: none; font-family: var(--font-mono); font-size: .8125rem;
  letter-spacing: .04em; color: var(--text); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: .55rem .8rem; min-height: 44px;
}
.nav__menu-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------- 7. HERO */
.hero {
  position: relative; isolation: isolate;
  min-height: 88vh; display: flex; align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  /* faint measurement dot-grid — also the JS-off fallback texture (z below canvas) */
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 34px 34px; background-position: center;
}
/* canvas: z0 · portrait: z1 · scrim: z2 · content: z3 (per spec) */
.hero__field {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block;
}
.hero__portrait {
  position: absolute; z-index: 1; margin: 0;
  right: max(var(--gutter), calc((100vw - var(--maxw-wide)) / 2 + var(--gutter)));
  bottom: 0; align-self: end;
  height: clamp(420px, 62vh, 507px);   /* capped at native 507px — never upscaled */
  aspect-ratio: 492 / 507;
}
.hero__portrait img {
  height: 100%; width: auto; object-fit: contain; object-position: bottom center;
  /* grounding: bottom dissolve mask + credible grade + amber rim-light */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  filter: saturate(.88) contrast(1.04)
          drop-shadow(2px 0 0 var(--accent-line))
          drop-shadow(-1px 0 6px #00000066);
}
/* soft radial pool behind portrait so the dark blazer doesn't float (esp. light theme) */
.hero__portrait::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: 6%; width: 128%; height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--surface-2) 0%, transparent 62%);
  opacity: .55;
}
/* contact-shadow plinth: implied floor where the mask fades */
.hero__portrait::after {
  content: ""; position: absolute; left: 50%; bottom: 2%;
  width: 78%; height: 40px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, #000000 0%, transparent 70%);
  opacity: .22; pointer-events: none;
}
/* fine editorial grain over the portrait (aria-hidden, static) + split-tone */
.hero__grain {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.hero__grain::before {                 /* grain */
  content: ""; position: absolute; inset: 0; opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__grain::after {                  /* split-tone: cool shadow → warm highlight */
  content: ""; position: absolute; inset: 0; opacity: .12;
  mix-blend-mode: soft-light;
  background: linear-gradient(150deg, var(--uncertain) 0%, transparent 45%, var(--accent-graphic) 100%);
}
:root[data-theme="light"] .hero__grain::before { opacity: .04; }
/* four amber registration ticks bracketing the portrait zone */
.hero__ticks { position: absolute; inset: 0; pointer-events: none; }
.hero__ticks::before, .hero__ticks::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--accent-line);
}
.hero__ticks::before { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; }
.hero__ticks::after  { bottom: 44px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }

/* scrim: opaque at the text (left), clearing over the open field/portrait (right) */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    var(--scrim) 0%, var(--scrim) 34%,
    color-mix(in srgb, var(--bg) 55%, transparent) 60%,
    transparent 82%);
}
.hero__content {
  position: relative; z-index: 3;
  width: 100%; padding-block: var(--s-16);
}
.hero__kicker { margin-bottom: var(--s-4); }
.display { max-width: 16ch; }
.hero__lead { max-width: 54ch; color: var(--text); margin-top: var(--s-6); }
.hero__badge {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-8);
}
.hero__badge-text { color: var(--text-2); font-size: .9375rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

/* --------------------------------------------------------------- 8. BUTTONS + LINKS */
.btn {
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem; min-height: 44px;      /* tap target */
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  transition: background var(--ease-micro), border-color var(--ease-micro),
              color var(--ease-micro), transform var(--ease-micro);
}
.btn__glyph { color: currentColor; }
.btn--primary { background: var(--accent-graphic); color: var(--on-accent); border-color: var(--accent-graphic); }
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); transform: translateY(-1px); }
:root[data-theme="light"] .btn--primary:hover { color: #fff; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(0); }
.btn--block { width: 100%; justify-content: center; }

/* Prose text links: amber, with an underline that wipes in on hover/focus */
.link {
  color: var(--accent); font-weight: 500;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--ease-settle), color var(--ease-micro);
}
.link:hover, .link:focus-visible { background-size: 100% 1.5px; color: var(--accent-strong); }

/* --------------------------------------------------------------- 9. ABOUT */
.readouts {
  display: grid; grid-template-columns: 1fr; gap: var(--s-2);
  margin-top: var(--s-12); border-top: 1px solid var(--line); padding-top: var(--s-6);
}
.readouts li {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--line);
}
.readouts__k { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); }
.readouts__v { font-family: var(--font-mono); font-size: .8125rem; color: var(--text); }

/* --------------------------------------------------------------- 10. TIMELINE */
.timeline { position: relative; display: grid; gap: var(--s-12); }
.tl { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--s-3);
  padding-left: var(--s-6); border-left: 1px solid var(--line); }
.tl__meta { display: flex; align-items: center; gap: var(--s-3); }
.tl__date { font-size: .8125rem; letter-spacing: .06em; color: var(--text-3); }
.tl__node {
  position: absolute; left: -5px; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bg);
  border: 1.5px solid var(--accent-line);
}
.tl__node--current { background: var(--accent-graphic); border-color: var(--accent-graphic); }
.tl__title { color: var(--text); }
.tl__org { color: var(--text-2); font-weight: 500; display: flex; align-items: center;
  flex-wrap: wrap; gap: var(--s-2); }
.tl__loc { color: var(--text-3); font-weight: 400; }
.tl__body { color: var(--text-2); max-width: 68ch; margin-top: var(--s-1); }
.tag--flag {
  color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-line);
  font-size: .6875rem; letter-spacing: .12em; padding: .1rem .4rem; border-radius: var(--radius-sm);
}

/* Tag rows (mono, wrap, never overflow) */
.taglist { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.tag {
  font-size: .75rem; letter-spacing: .02em; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .25rem .5rem;
}

/* --------------------------------------------------------------- 11. CARDS */
.cards {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
}
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-8); overflow: hidden;
  transition: border-color var(--ease-pos), transform var(--ease-pos);
}
/* Public tiles are whole-card links — strip the default anchor look */
a.card { text-decoration: none; color: inherit; cursor: pointer; }
/* top amber bar wipes across on hover/focus */
.card::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent-graphic);
  transition: width var(--ease-settle);
}
.card:hover, .card:focus-within { border-color: var(--line-strong); transform: translateY(-2px); }
.card:hover::before, .card:focus-within::before { width: 100%; }

.card__top { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4); }
.card__index { font-size: .8125rem; color: var(--text-3); letter-spacing: .06em; }
.card__stack { font-size: .75rem; color: var(--text-3); letter-spacing: .02em;
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__title { color: var(--text); }
.card__role { color: var(--text-2); font-weight: 500; margin-top: 2px; }
.card__body { color: var(--text-2); max-width: 60ch; margin-top: var(--s-3); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chip {
  font-size: .75rem; letter-spacing: .02em; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .35rem .6rem;
  transition: border-color var(--ease-micro), color var(--ease-micro);
}
.chip:hover { border-color: var(--accent-line); color: var(--accent); }
/* "Primary" chips: larger, amber-tinted — a distinct treatment so the Domains
   group reads as headline capabilities, not one-word tags with a stray phrase. */
.chips--primary { gap: var(--s-3); }
.chip--primary {
  font-size: .8125rem; padding: .45rem .7rem; color: var(--text);
  background: var(--accent-dim); border-color: var(--accent-line);
}
.chip--primary:hover { border-color: var(--accent); color: var(--accent); }
.card__tags { margin-top: var(--s-4); }

/* corner registration ticks — draw in on hover/focus */
.card__foot { position: absolute; inset: 0; pointer-events: none; }
.card__foot .tick {
  position: absolute; width: 10px; height: 10px; border: 0 solid var(--accent-line);
  opacity: 0; transition: opacity 180ms ease;
}
.card__foot .tl-1 { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; }
.card__foot .tl-2 { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; }
.card__foot .tl-3 { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; }
.card__foot .tl-4 { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }
.card:hover .tick, .card:focus-within .tick { opacity: 1; }

/* Header: mono index + category tag (left), status chip / stars (right) */
.card__idcat { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; }
.card__cat {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .1rem .4rem;
}
.card__meta-right { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; }
.card__stars { font-family: var(--font-mono); font-size: .75rem; color: var(--text-3);
  letter-spacing: .04em; }

/* Status chip: PUBLIC ↗ (amber) / COMPANY · NDA (muted) */
.status {
  font-family: var(--font-mono); font-weight: 500; font-size: .6875rem;
  letter-spacing: .1em; border-radius: var(--radius-sm); padding: .18rem .45rem;
  white-space: nowrap; flex: none;
}
/* PUBLIC ↗ and PRODUCT share the amber "available / launching" treatment */
.status--public,
.status--product { color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-line); }
/* PRIVATE and COMPANY · NDA read as muted — never amber, never "available" */
.status--private,
.status--company { color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line); }

/* One metric readout + one stack line (replaces the old chip + tag rows) */
.card__metric {
  align-self: flex-start; margin-top: var(--s-4);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .3rem .55rem;
}
.card__stackline { margin-top: var(--s-3); font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .02em; color: var(--text-3); }

/* Footer line — public: mono amber repo path pinned to the card's lower edge */
.card__link {
  margin-top: auto; padding-top: var(--s-6); font-family: var(--font-mono);
  font-size: .8125rem; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card--link:hover .card__link, .card--link:focus-within .card__link { color: var(--accent-strong); }
.card__paper { margin-top: var(--s-1); font-family: var(--font-mono);
  font-size: .6875rem; letter-spacing: .04em; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* PRIVATE + COMPANY · NDA tiles — non-interactive: no lift, no top bar, no ticks (none in markup) */
.card--static { cursor: default; }
.card--static:hover, .card--static:focus-within { border-color: var(--line); transform: none; }
.card--static:hover::before, .card--static:focus-within::before { width: 0; }

/* ---- Featured product pair (Independent Builds): sibling flagship tools ---- */
.workgroup__intro {
  margin-top: calc(-1 * var(--s-4)); margin-bottom: var(--s-6);
  max-width: 64ch; font-family: var(--font-mono); font-size: .8125rem;
  line-height: 1.5; letter-spacing: .01em; color: var(--text-2);
}
/* the two products sit in a matched, evenly-sized row above the dense grid */
.cards--pair { margin-bottom: var(--s-8); }
/* flagship tiles carry a persistent amber top bar so they read as launching, not muted */
.card--product::before { width: 100%; }
.card--product:hover::before, .card--product:focus-within::before { width: 100%; }
/* launch CTA pinned to the lower edge — amber pill; swap the span for <a class="card__cta-tag"> at launch */
.card__cta { margin-top: auto; padding-top: var(--s-6); }
.card__cta-tag {
  display: inline-block; font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .06em; color: var(--accent);
  background: var(--accent-dim); border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm); padding: .3rem .7rem;
}
a.card__cta-tag { text-decoration: none; transition: color var(--ease-micro); }
a.card__cta-tag:hover { color: var(--accent-strong); }
/* keep the pair to two evenly-sized columns at desktop (base grid goes to 3);
   .cards.cards--pair outranks the later 3-col .cards rule regardless of order */
@media (min-width: 1024px) {
  .cards.cards--pair { grid-template-columns: repeat(2, 1fr); }
}

/* Grouped catalog — three labeled groups, each its own card grid, mono subheading */
.worklist { display: grid; gap: var(--s-16); }
.workgroup__head { margin-bottom: var(--s-6); }

/* open-source strip */
.repos { margin-top: var(--s-12); border-top: 1px solid var(--line); padding-top: var(--s-8); }
.repos__kicker { margin-bottom: var(--s-4); }
.repos__list { display: grid; gap: var(--s-4); }
.repo { display: grid; gap: 2px; padding: var(--s-3) 0; }
.repo__name { font-size: .8125rem; color: var(--accent); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.repo:hover .repo__name { color: var(--accent-strong); }
.repo__desc { font-family: var(--font-body); font-size: .875rem; color: var(--text-2); }

/* --------------------------------------------------------------- 12. PUBLICATIONS */
.section--research { background:
  linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-graphic) 4%, transparent)); }
.pubs { display: grid; }
.pub {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  padding-block: var(--s-12); border-top: 1px solid var(--line);
}
.pub:last-child { border-bottom: 1px solid var(--line); }
.pub__badge { display: flex; align-items: center; gap: var(--s-3); }

/* Award badge — mono, boxed, amber */
.award-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-weight: 500; font-size: .75rem;
  letter-spacing: .1em; color: var(--accent);
  background: var(--accent-dim); border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm); padding: .3rem .55rem;
}
.award-badge--lg { font-size: .8125rem; padding: .4rem .7rem; }
/* the ◆ diamond, drawn as a rotated square so it never depends on a font glyph */
.award-badge__mark {
  width: 8px; height: 8px; background: var(--accent-graphic);
  transform: rotate(45deg); flex: none;
}
.award-badge__sub {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em;
  color: var(--text-3);
}
.pub__venue { margin-bottom: var(--s-2); }
.pub__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem); line-height: 1.2;
  letter-spacing: -0.01em; color: var(--text); max-width: 22ch;
}
/* confidence bar — fills L→R once on scroll-in (JS adds .is-filled) */
.conf { height: 3px; width: min(320px, 100%); background: var(--line);
  border-radius: 2px; overflow: hidden; margin: var(--s-4) 0; }
.conf__fill { display: block; height: 100%; width: 0; background: var(--accent-graphic);
  transition: width 1200ms var(--ease-settle); }
.conf.is-filled .conf__fill { width: 100%; }
.pub__gist { color: var(--text-2); font-size: 1.1875rem; line-height: 1.7; max-width: 62ch; }
.pub__link { margin-top: var(--s-4); display: inline-block; font-family: var(--font-mono);
  font-size: .8125rem; }

/* --------------------------------------------------------------- 13. SKILLS */
.matrix { display: grid; gap: var(--s-8); }
.matrix__group { display: grid; gap: var(--s-3); }
.matrix__label { font-size: .75rem; letter-spacing: .12em; color: var(--text-3); }
.matrix__note { font-family: var(--font-body); font-size: .8125rem; line-height: 1.5;
  color: var(--text-3); margin-top: var(--s-1); }

/* Credentials */
.credentials { margin-top: var(--s-16); border-top: 1px solid var(--line); padding-top: var(--s-8); }
.credentials__kicker { margin-bottom: var(--s-6); }
.credentials__kicker .dash { color: var(--accent); }
.cred__list { display: grid; grid-template-columns: 1fr; gap: 0; }
.cred {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  min-height: 44px; transition: padding-left var(--ease-micro);
}
.cred:hover { padding-left: var(--s-2); }
.cred__name { font-family: var(--font-body); font-weight: 500; color: var(--text); }
.cred:hover .cred__name { color: var(--accent); }
.cred__src { font-size: .75rem; letter-spacing: .06em; color: var(--text-3);
  white-space: nowrap; }
.cred:hover .cred__src { color: var(--accent); }

/* Achievements */
.achievements { margin-top: var(--s-12); }
.achievements__kicker { margin-bottom: var(--s-4); }
.ach__list { display: grid; gap: var(--s-2); }
.ach__list li { display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: .875rem; color: var(--text-2); }
.ach__mark { width: 7px; height: 7px; background: var(--accent-graphic);
  transform: rotate(45deg); flex: none; }   /* ◆ as CSS diamond */
.ach__place { color: var(--accent); font-weight: 500; letter-spacing: .08em; }

/* --------------------------------------------------------------- 14. CONTACT */
/* Trim the bottom so the section doesn't end on the empty right-hand quadrant —
   pulls the footer up under the contact content. */
.section--contact { border-top: 1px solid var(--line); padding-bottom: clamp(48px, 6vh, 80px); }
.contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-8);
  margin-top: var(--s-12); align-items: start; }
.contact__links { display: grid; gap: 0; }
.contact__link { display: grid; gap: 2px; padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line); min-height: 44px;
  transition: padding-left var(--ease-micro); }
.contact__link:hover { padding-left: var(--s-2); }
.contact__k { font-size: .75rem; letter-spacing: .12em; color: var(--accent); }
.contact__v { font-family: var(--font-body); font-size: 1.0625rem; color: var(--text);
  overflow-wrap: anywhere; }
.contact__link:hover .contact__v { color: var(--accent); }
.contact__cv { position: sticky; top: 80px; display: grid; gap: var(--s-4);
  align-content: start; }
/* Availability line fills the right column so it no longer reads as a void */
.contact__avail {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: .9375rem; line-height: 1.5; color: var(--text-2);
  padding-top: var(--s-2); border-top: 1px solid var(--line);
}
.contact__avail-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--ok); transform: translateY(1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
}
.contact__avail-meta {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
  color: var(--text-3); margin-top: calc(-1 * var(--s-2));
}

/* --------------------------------------------------------------- 15. FOOTER */
.footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer__inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; padding-block: var(--s-8); }
.footer__coords { font-size: .75rem; letter-spacing: .1em; color: var(--text-3); }
.footer__right { display: flex; align-items: center; gap: var(--s-6); }
.theme-toggle--footer { width: auto; height: 44px; padding: 0 var(--s-3); min-height: 44px; gap: .5rem; }
.theme-toggle--footer .theme-toggle__label {
  display: inline; font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .06em; }
.footer__copy { font-size: .75rem; color: var(--text-3); }

/* --------------------------------------------------------------- 16. MOTION / REVEAL */
/* Scroll-in reveal: kicker + heading + body rise 8px, once, staggered via inline delay */
.reveal { opacity: 0; transform: translateY(8px);
  transition: opacity 520ms var(--ease-settle), transform 520ms var(--ease-settle); }
.reveal.is-in { opacity: 1; transform: none; }

@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; }
  .conf__fill { width: 100%; }          /* pre-filled */
}

/* --------------------------------------------------------------- 17. RESPONSIVE */

/* Mobile nav (<768px): links collapse into a sheet toggled by the menu button */
@media (max-width: 767px) {
  .nav__cv { display: none; }
  .nav__menu-btn { display: inline-flex; align-items: center; }
  .nav__links {
    position: fixed; inset: 60px 0 auto 0; z-index: 49;
    background: var(--bg); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height var(--ease-pos), visibility var(--ease-pos);
  }
  .nav__links.is-open { max-height: 80vh; visibility: visible; }
  .nav__list { flex-direction: column; gap: 0; padding: var(--s-3) var(--gutter) var(--s-6); }
  .nav__link { padding: var(--s-3) 0; font-size: 1rem; min-height: 44px; display: flex;
    align-items: center; border-bottom: 1px solid var(--line); }
  .nav__tick { display: none; }         /* tick is a desktop affordance */

  /* --- JS disabled: the menu button can't toggle anything, so expose the nav
     links inline and keep the CV link reachable — navigation must work with no JS. */
  .no-js .nav__inner { flex-wrap: wrap; }
  .no-js .nav__menu-btn { display: none; }
  .no-js .nav__cv { display: inline-flex; }
  .no-js .nav__links {
    position: static; inset: auto; z-index: auto; flex-basis: 100%;
    max-height: none; overflow: visible; visibility: visible;
    background: transparent; border-bottom: 0;
  }
  .no-js .nav__list {
    flex-direction: row; flex-wrap: wrap; gap: var(--s-4);
    padding: 0 0 var(--s-3);
  }
  .no-js .nav__link { border-bottom: 0; padding: var(--s-2) 0; }
}

/* sm ≥480: 2-col readouts + tag rows already wrap */
@media (min-width: 480px) {
  .readouts { grid-template-columns: repeat(2, 1fr); gap: 0 var(--s-8); }
  .hero__badge-text { font-size: 1rem; }
}

/* md ≥768: projects + skills 2-col; hero still stacked (portrait banner on top) */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .matrix { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-12); }
  .contact__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.95fr); gap: var(--s-12); }
  .cred__list { grid-template-columns: 1fr; }
}

/* --- Hero mobile/tablet (<1024px): portrait becomes a bottom-faded top banner --- */
@media (max-width: 1023px) {
  .hero { min-height: auto; display: block; padding-top: 0; }
  .hero__portrait {
    position: relative; right: auto; left: auto; margin: 0 0 0 auto;
    height: 44vh; max-height: 46vh; width: 100%;
    display: flex; justify-content: flex-end;   /* face to the right, not centered */
  }
  .hero__portrait img { object-position: bottom right; }
  .hero__grain, .hero__ticks { right: 0; }
  .hero__ticks::after { bottom: 8px; }          /* only 2 ticks visible: TL + BR */
  /* scrim runs bottom-up: opaque under the stacked text, clearing over his head */
  .hero__scrim { background: linear-gradient(0deg,
      var(--bg) 0%, var(--bg) 30%, transparent 78%); }
  .hero__content { padding-block: var(--s-8) var(--s-16); }
  .hero__field { height: 100%; }
  /* section index moves inline (rail hidden) — already default */
}
@media (max-width: 479px) {
  .hero__portrait { height: 38vh; max-height: 38vh; }
}

/* lg ≥1024: left rail appears; hero splits into two zones (text left, portrait right) */
@media (min-width: 1024px) {
  .section__grid { grid-template-columns: var(--rail) 1fr; gap: var(--gutter); }
  /* 8 tiles → 3 / 3 / 2, no orphan single cell */
  .cards { grid-template-columns: repeat(3, 1fr); }
  .rail {
    display: block; position: relative; border-right: 1px solid var(--line);
  }
  .rail__index {
    position: sticky; top: 96px; display: block;
    font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .1em;
    color: var(--text-3);
  }
  .pub { grid-template-columns: 156px 1fr; gap: var(--s-8); align-items: start; }
  .pub__badge { flex-direction: column; align-items: flex-start; gap: var(--s-2); }

  /* Hero two-zone: content sits left; portrait already absolute-right. */
  .hero__content { max-width: var(--maxw-wide); }
  .hero__content .display,
  .hero__content .hero__lead,
  .hero__content .hero__badge,
  .hero__content .hero__actions { max-width: 52ch; }
}

/* xl ≥1280: wider hero container */
@media (min-width: 1280px) {
  .hero__content { padding-inline: max(var(--gutter), calc((100vw - var(--maxw-wide)) / 2 + var(--gutter))); }
}