/* ----------------------------------------------------------------------------
   Femi Falase — Portfolio · Editorial / Spec-Sheet
   Now a warm-paper light theme with an oxblood accent, asymmetric grid,
   editorial margins, mono marginalia, and serif display type.
   Opposite visual language from the prior dark "Steel & Code" terminal theme.
   --------------------------------------------------------------------------*/

/* 0. DESIGN TOKENS ---------------------------------------------------------- */
/* Light theme (default) — "Editorial / Spec-Sheet" */
:root,
html[data-theme="light"] {
  --paper: #f4efe7;                 /* warm paper ground */
  --paper-deep: #ebe4d8;            /* recessed panels / hairline fills */
  --paper-shadow: #e0d7c6;          /* soft drop */
  --ink: #1c1a17;                   /* near-black ink */
  --ink-soft: #55504a;              /* body secondary */
  --ink-mute: #8b8378;              /* marginalia / metadata */
  --line: #d6cdbb;                  /* hairline rule */
  --line-strong: #b8ad96;
  --oxblood: #8a1f2d;               /* accent (oxblood) */
  --oxblood-deep: #6f1824;
  --oxblood-pink: #edd6d7;          /* accent wash (light) */
  --oxblood-tint: #f3e4e2;          /* accent wash */
  --success: #2e6b46;               /* status green */
  --success-tint: #dceee2;
  --link-blue: #3b5b8c;             /* external link blue */
  --ret-blue: #4f6d9c;              /* effect retry teal */
  --ret-amber: #a34b22;             /* paladin retry amber */
  --muted-head: #f1ece2;            /* column bar fill */
  --masthead-h: 56px;

  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --max-width: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --marginalia: 15rem;              /* left rail width on wide screens */
  --radius: 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* Dark theme — "Steel & Code" terminal (the prior branch's look) */
html[data-theme="dark"] {
  --paper: oklch(13% 0.008 240);    /* deep carbon ground */
  --paper-deep: oklch(17% 0.01 240); /* control surface */
  --paper-shadow: oklch(21% 0.01 240);/* hovered surface */
  --ink: oklch(93% 0.005 240);       /* crisp off-white text */
  --ink-soft: oklch(62% 0.01 240);   /* dim steel */
  --ink-mute: oklch(40% 0.01 240);   /* darkened metadata */
  --line: oklch(26% 0.01 240);       /* hairline dividers */
  --line-strong: oklch(34% 0.01 240);
  --oxblood: oklch(70% 0.18 45);     /* warning amber accent */
  --oxblood-deep: oklch(45% 0.1 45);
  --oxblood-pink: oklch(22% 0.03 45);/* amber-tinted dark wash */
  --oxblood-tint: oklch(20% 0.02 45);
  --success: oklch(75% 0.14 140);    /* active fiber green */
  --success-tint: oklch(22% 0.04 140);
  --ret-blue: oklch(72% 0.14 210);   /* effect retry teal */
  --ret-amber: oklch(72% 0.14 75);   /* paladin retry amber */
  --link-blue: oklch(72% 0.11 230);
  --muted-head: oklch(13% 0.01 240);
  --masthead-h: 56px;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans: "JetBrains Mono", ui-monospace, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --marginalia: 13rem;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 85% -5%, rgba(175, 31, 45, 0.05), transparent 60%),
    var(--paper);
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

*, *::before, *::after { min-width: 0; }
img, svg, video, canvas { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  line-height: 1.05;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
pre, code { font-family: var(--font-mono); }
pre { max-width: 100%; }

::selection { background: var(--oxblood); color: #fff; }

/* Focus states */
a:focus-visible, button:focus-visible,
[tabindex="0"]:focus-visible, [role="tab"]:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   MASTHEAD
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  width: 100%;
  max-width: 100%;
}
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-radius: inherit;
}
.masthead-inner {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  position: relative;
  z-index: 110;
}
.wordmark-mark {
  width: 30px; height: 30px;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: var(--radius);
}
.wordmark-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.marginalia-nav {
  display: flex;
  gap: clamp(0.65rem, 1.6vw, 1.4rem);
  margin-left: auto;
}
.mg-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 0.75vw, 0.72rem);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--ease), border-color var(--ease);
}
.mg-link .mg-no { color: var(--oxblood); font-size: 0.68rem; }
.mg-link:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }
.mg-link:active { transform: scale(0.97); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 34px; height: 34px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 110;
  transition: border-color var(--ease);
}
.nav-toggle:hover { border-color: var(--oxblood); }
.nav-toggle-bar {
  width: 16px; height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform var(--ease), opacity var(--ease);
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.25rem;
  height: 34px;
  padding: 0 0.6rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
  transition: border-color var(--ease), color var(--ease), transform var(--ease);
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--oxblood); color: var(--oxblood); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { display: block; }
.theme-toggle-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
/* Show the target-theme icon: moon when light (click -> dark), sun when dark */
html[data-theme="light"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: none; }

/* ---------------------------------------------------------------------------
  2. LAYOUT SHELL
   -------------------------------------------------------------------------- */
.page {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: 5.5rem 0; border-bottom: 1px solid var(--line); }
.section:last-of-type { border-bottom: 1px solid var(--line); }

/* Editorial offset: wide intro uses the full width */
.section-head { max-width: 44rem; margin-bottom: 3rem; }

.section-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 1.1rem;
}
.section-eyebrow .mg-no { color: var(--ink-mute); }

.section-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.section-deck {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 40rem;
}

.mg-no { font-family: var(--font-mono); }

/* ---------------------------------------------------------------------------
  3. INTRO / HERO
   -------------------------------------------------------------------------- */
.intro { padding-top: 4rem; }

/* metadata strip */
.spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 4.5rem;
  border-radius: var(--radius);
}
.spec-strip-item {
  background: var(--paper);
  flex: 1 1 180px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-radius: var(--radius);
}
.spec-key {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.spec-val { font-size: 0.88rem; color: var(--ink); font-weight: 500; }
.spec-val,
.stack-list,
.section-title,
.section-deck,
.aside-lede,
.aside-note { overflow-wrap: anywhere; }
.spec-val a { color: var(--link-blue); border-bottom: 1px solid transparent; }
.spec-val a:hover { border-bottom-color: var(--link-blue); }
.spec-strip-status .spec-val { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.status-on { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--success); font-weight: 600; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-tint);
  flex-shrink: 0;
}
.status-dot.active { animation: pulse 2s infinite ease-in-out; }
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.intro-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 4rem;
  align-items: start;
}

.intro-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.5rem;
}
.intro-eyebrow .mg-no { color: var(--oxblood); }

.display-name {
  font-size: clamp(4rem, 12vw, 8.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.9;
  margin-bottom: 1rem;
  font-feature-settings: "ss01";
}
.display-period { color: var(--oxblood); }

.display-role {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 2vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-weight: 500;
  margin-bottom: 2.5rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.display-stack {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 30rem;
}
.stack-kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.stack-list { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }

.intro-aside {
  border-left: 2px solid var(--line-strong);
  padding: 0.25rem 0 0.25rem 2rem;
  margin-top: 4rem;
}
.aside-lede {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.aside-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  max-width: 32rem;
}
.runtime-check {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  min-width: 0;
}
.runtime-bar {
  flex: 0 0 120px;
  height: 6px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.runtime-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--success);
}

/* ---------------------------------------------------------------------------
   6. VISUALIZER
   -------------------------------------------------------------------------- */
.viz {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-deep);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}
.viz-panel {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.viz-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn-glyph { font-size: 1rem; line-height: 1; }

.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--oxblood); border-color: var(--oxblood); color: #fff; }

.viz-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 0.1rem; }
.stat-key { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute); }
.stat-val { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--ink); }
.stat-accent { color: var(--oxblood); }

.viz-modes {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.viz-modes-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.viz-modes-btns {
  display: flex;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 100%;
}
.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  padding: 0.55rem 1.1rem;
  background: var(--paper);
  border: none;
  border-right: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: background var(--ease);
  min-width: 0;
}
.mode-btn:last-child { border-right: none; }
.mode-name { font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.mode-sub { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-mute); }
.mode-btn:hover { background: var(--paper-shadow); }
.mode-btn.active { background: var(--oxblood); }
.mode-btn.active .mode-name { color: #fff; }
.mode-btn.active .mode-sub { color: hsla(0,0%,100%,0.85); }

.viz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 340px;
}
.viz-col {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.viz-col:last-child { border-right: none; }
.viz-col-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  text-align: center;
}
.viz-col-body {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 320px;
  min-width: 0;
}
.queue-list, .schedule-list { justify-content: flex-start; }

.job-node {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--oxblood);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  overflow-wrap: break-word;
  animation: slide-in 0.25s var(--ease);
  max-height: 80px;
  transition: max-height var(--ease), padding var(--ease), margin var(--ease), opacity var(--ease);
}
.job-node.collapsing {
  max-height: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important; margin-bottom: -0.75rem !important;
  opacity: 0 !important;
  border-top-width: 0 !important; border-bottom-width: 0 !important;
  overflow: hidden;
}
.job-id { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-mute); }
.job-type { font-weight: 600; color: var(--ink); overflow-wrap: break-word; font-size: 0.78rem; }
.job-retries { font-family: var(--font-mono); font-size: 0.62rem; }
.text-accent { color: var(--oxblood); }

.fiber-grid {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.worker {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem;
  transition: border-color var(--ease), background var(--ease);
  min-width: 0;
}
.worker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; gap: 0.5rem; }
.worker-id { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); }
.worker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
  transition: all var(--ease);
}
.worker-payload {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.worker[data-status="processing"] { border-color: var(--oxblood); background: var(--oxblood-tint); }
.worker[data-status="processing"] .worker-dot { background: var(--oxblood); border-color: var(--oxblood); box-shadow: 0 0 0 3px var(--oxblood-pink); animation: pulse 1s infinite alternate; }
.worker[data-status="processing"] .worker-payload { color: var(--oxblood-deep); }

.retry-node {
  background: var(--paper);
  border: 1px solid var(--ret-amber, #c98a3c);
  border-left: 3px solid var(--ret-amber, #c98a3c);
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  animation: shake 0.3s ease-in-out;
  min-width: 0;
  overflow-wrap: break-word;
  max-height: 80px;
  transition: max-height var(--ease), padding var(--ease), margin var(--ease), opacity var(--ease);
}
.retry-node[data-tone="effect"] { border-left-color: var(--ret-blue, var(--line-strong)); }
.retry-node.collapsing {
  max-height: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important; margin-bottom: -0.75rem !important;
  opacity: 0 !important;
  border-top-width: 0 !important; border-bottom-width: 0 !important;
  overflow: hidden;
}
.retry-title { font-family: var(--font-mono); font-weight: 700; color: var(--ret-amber, var(--oxblood)); }
.retry-node[data-tone="effect"] .retry-title { color: var(--ret-blue, var(--link-blue)); }
.retry-meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-soft); }
.retry-countdown { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-mute); }

.empty { font-size: 0.75rem; color: var(--ink-mute); text-align: center; margin: auto; }

/* ---------------------------------------------------------------------------
   7. SELECTED WORK
   -------------------------------------------------------------------------- */
.project-list { list-style: none; display: flex; flex-direction: column; gap: 4.5rem; }

.project {
  display: grid;
  grid-template-columns: var(--marginalia) 1fr;
  gap: 2rem;
  border-radius: var(--radius);
  transition: opacity var(--ease), transform var(--ease);
}
.project.reveal-init { opacity: 0; transform: translateY(22px); }
.project.is-revealed { opacity: 1; transform: translateY(0); }

.project-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.project-no { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; color: var(--oxblood); }
.project-rail-type {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  white-space: nowrap;
}

.project-body {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-deep);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.project:hover .project-body, .project:focus-within .project-body {
  border-color: var(--oxblood);
  box-shadow: 0 12px 34px rgba(28,26,23,0.06);
}
.project-gallery .project-body { transform: none; }
.project-gallery:hover .project-body { transform: translateY(-3px); }

.project-text {
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper);
  min-width: 0;
  gap: 1rem;
}
.project-name {
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}
.project-import {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.1rem;
  margin-bottom: 0.4rem;
}
.project-import code { color: var(--ink-soft); }
.project-problem, .project-approach { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.project-problem { margin-bottom: 0.85rem; }
.project-problem strong, .project-approach strong { font-weight: 600; color: var(--ink); }
.project-problem code, .project-approach code, .np-approach code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  background: var(--paper-deep);
  padding: 0.1em 0.35em;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--oxblood-deep, var(--ink));
}

.project-links { display: flex; gap: 1.4rem; flex-wrap: wrap; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.plink {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--oxblood);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color var(--ease);
}
.plink-arrow { transition: transform var(--ease); }
.plink:hover { color: var(--ink); }
.plink:hover .plink-arrow { transform: translateX(2px); }

.project-spec {
  padding: 2rem 1.6rem;
  background: var(--paper-deep);
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid var(--line);
}
.project-spec pre { width: 100%; font-size: 0.78rem; line-height: 1.7; color: var(--ink-soft); white-space: pre; }
.project-spec code { white-space: pre; min-width: max-content; }

.t-kw { color: var(--oxblood); font-weight: 600; }
.t-type { color: var(--link-blue); }
.t-prop { color: var(--ink); }
.t-str { color: #7a4d0f; }
.t-comm { color: var(--ink-mute); font-style: italic; }

/* Gallery spec variant */
.gallery-spec { flex-direction: column; align-items: stretch; gap: 1.25rem; justify-content: flex-start; }
.gallery-carousel {
  position: relative;
  height: 110px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
}
.gallery-slide {
  position: absolute; inset: 0;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.gallery-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; }
.gallery-slide-head { display: flex; align-items: center; gap: 0.3rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
.mini-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.gallery-slide-title { font-family: var(--font-mono); font-size: 0.6rem; color: var(--oxblood); margin-left: auto; font-weight: 600; letter-spacing: 0.05em; }
.mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.mini-cell { background: var(--paper-deep); border: 1px solid var(--line-strong); border-radius: 2px; height: 54px; transition: all var(--ease); }
.project-gallery:hover .mini-cell { border-color: var(--oxblood); background: var(--oxblood-pink); }
.mini-masonry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.mini-cell.tall { grid-row: span 2; height: 54px; background: var(--paper-deep); }
.mini-cell.short { height: 54px; background: var(--paper-deep); }
.mini-modal { display: flex; align-items: center; justify-content: center; height: 54px; background: radial-gradient(circle at center, var(--oxblood-pink), var(--paper-deep)); border-radius: 2px; }
.mini-modal-frame { width: 70%; height: 80%; background: var(--paper); border: 1.5px solid var(--oxblood); border-radius: 2px; box-shadow: 0 0 0 4px var(--oxblood-pink); }
.gallery-carousel-nav { display: flex; justify-content: center; gap: 0.5rem; }
.carousel-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-strong);
  border: none; cursor: pointer; padding: 0;
  transition: background var(--ease), transform var(--ease);
}
.carousel-dot.active, .carousel-dot:hover { background: var(--oxblood); transform: scale(1.15); }

/* Non-public work */
.non-public { margin-top: 5.5rem; border-top: 1px solid var(--line); padding-top: 3rem; }
.non-public-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.75rem;
}
.non-public-list { list-style: none; display: flex; flex-direction: column; gap: 1.6rem; }
.non-public-list li { border-left: 2px solid var(--line); padding-left: 1.5rem; }
.non-public-list li:hover { border-left-color: var(--oxblood); }
.np-name-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; }
.np-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.np-desc { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.np-desc code {
  font-family: var(--font-mono); font-size: 0.8em;
  background: var(--paper-deep); padding: 0.1em 0.35em;
  border: 1px solid var(--line); border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   8. STACK
   --------------------------------------------------------------------------- */
.stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.9rem; }
.stack-item {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.1rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.stack-icon {
  width: 32px; height: 32px;
  filter: grayscale(30%);
  transition: filter var(--ease), transform var(--ease);
}
.stack-label { font-size: 0.78rem; color: var(--ink-soft); text-align: center; transition: color var(--ease); }
.stack-item:hover, .stack-item:focus-visible {
  border-color: var(--oxblood);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px rgba(28,26,23,0.25);
}
.stack-item:hover .stack-icon, .stack-item:focus-visible .stack-icon { filter: none; transform: scale(1.08); }
.stack-item:hover .stack-label, .stack-item:focus-visible .stack-label { color: var(--ink); }

/* ---------------------------------------------------------------------------
   9. EXPERIENCE (TIMELINE)
   --------------------------------------------------------------------------- */
.timeline { list-style: none; } 
.timeline-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}
.timeline-item:last-child { border-bottom: 1px solid var(--line); }
.timeline-meta { display: flex; flex-direction: column; gap: 0.6rem; }
.timeline-period {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.timeline-company { font-size: 1.5rem; letter-spacing: -0.015em; }
.timeline-role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--oxblood);
  font-weight: 600;
}
.timeline-content { border-left: 2px solid var(--line); padding-left: 2rem; }
.timeline-item:hover .timeline-content { border-left-color: var(--oxblood); }
.timeline-tasks { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.timeline-tasks li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.timeline-tasks li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--oxblood);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   10. RESUME
   --------------------------------------------------------------------------- */
.resume-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-deep);
  padding: 3rem;
}
.resume-text { flex: 1 1 300px; min-width: 0; }
.resume-text .section-title { margin-bottom: 0.5rem; }
.resume-deck { color: var(--ink-soft); font-size: 0.95rem; max-width: 34rem; }
.resume-action { flex-shrink: 0; }
.btn-resume { padding: 0.8rem 1.5rem; font-size: 0.9rem; }

/* ---------------------------------------------------------------------------
   11. CONTACT
   --------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: start; }
.contact-main .section-title { margin-bottom: 2rem; }
.contact-list { margin-top: 2rem; }
.contact-row {
  display: flex;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.contact-row dt { flex: 0 0 90px; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute); }
.contact-row dd { margin: 0; }
.contact-row dd a { font-size: 1.02rem; font-weight: 500; color: var(--link-blue); border-bottom: 1px solid transparent; transition: border-color var(--ease), color var(--ease); }
.contact-row dd a:hover { border-bottom-color: var(--link-blue); color: var(--ink); }

.contact-readout {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-deep);
  padding: 1.5rem;
  overflow-x: auto;
}
.readout-title { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); margin-bottom: 1rem; }
.contact-readout pre { font-size: 0.82rem; line-height: 1.7; color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------------------- */
.page-footer { border-top: 1px solid var(--line); background: var(--paper-deep); }
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.75rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
}
.footer-sig { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   13. ANIMATIONS
   --------------------------------------------------------------------------- */
@keyframes slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; background-attachment: initial !important; }
  .project { transition: opacity var(--ease) !important; transform: none !important; }
  .project.reveal-init { opacity: 1 !important; transform: none !important; }
  .gallery-slide, .carousel-dot, .status-dot, .worker-dot { animation: none !important; transition: opacity var(--ease) !important; transform: none !important; }
  .job-node, .retry-node { animation: none !important; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   14. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .intro-aside { margin-top: 0; border-left: none; border-top: 2px solid var(--line); padding: 1.5rem 0 0; }
  .viz-grid { grid-template-columns: 1fr; min-height: auto; }
  .viz-col { border-right: none; border-bottom: 1px solid var(--line); }
  .viz-col:last-child { border-bottom: none; }
  .project { grid-template-columns: 1fr; gap: 0.9rem; }
  .project-rail { flex-direction: row; align-items: center; gap: 0.8rem; padding-top: 0; }
  .project-body { grid-template-columns: 1fr; }
  .project-spec { border-left: none; border-top: 1px solid var(--line); }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 860px) {
  .masthead-inner { padding: 0.7rem var(--gutter); }
  .nav-toggle { display: flex; }
  .theme-toggle-label { display: none; }

  /* Full-screen mobile menu overlay */
  .marginalia-nav {
    position: fixed;
    inset: 0 0 auto 0;
    height: 100dvh;
    width: auto;
    max-width: none;
    margin-left: 0;
    z-index: 90;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: var(--paper);
    padding: calc(var(--masthead-h) + 1.5rem) var(--gutter) var(--gutter);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
    transition: opacity var(--ease), visibility var(--ease), transform var(--ease);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .marginalia-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
  .marginalia-nav .mg-link {
    padding: 0.9rem 1rem;
    width: 100%;
    text-align: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    transition: background var(--ease), color var(--ease);
  }
  .marginalia-nav .mg-link:last-child { border-bottom: none; }
  .marginalia-nav .mg-link .mg-word { font-family: var(--font-display); font-size: 1.75rem; }
  .marginalia-nav .mg-link .mg-no {
    font-size: 0.85rem;
    color: var(--oxblood);
    margin-right: 0.6rem;
  }
  .marginalia-nav .mg-link:hover { background: var(--paper-deep); color: var(--oxblood); }

  /* Keep header & toggle above the overlay */
  .masthead { z-index: 100; }

  .section { padding: 3.5rem 0; }
  .timeline-item { grid-template-columns: 1fr; gap: 1rem; }
  .timeline-content { padding-left: 0; border-left: none; }
  .timeline-content { border-left: 2px solid var(--line); padding-left: 1.25rem; }
  .viz-panel-row { flex-direction: column; align-items: stretch; }
  .viz-stats { justify-content: space-between; }
}

@media (max-width: 600px) {
  :root,
  html[data-theme="light"],
  html[data-theme="dark"] { --gutter: 0.9rem; }
  .page { padding: 0 var(--gutter); }
  .masthead-inner { padding: 0.55rem var(--gutter); gap: 0.55rem; }
  .wordmark { gap: 0.45rem; }
  .wordmark-mark { width: 28px; height: 28px; }
  .wordmark-text { font-size: 0.9rem; }
  .theme-toggle,
  .nav-toggle { width: 32px; height: 32px; }
  .theme-toggle { padding: 0; justify-content: center; margin-left: auto; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.5rem 1.25rem; }
  .section { padding: 3rem 0; }
  .section-head { margin-bottom: 2rem; }
  .section-title { font-size: clamp(1.55rem, 8vw, 2.1rem); }
  .section-deck { font-size: 0.95rem; }
  .intro { padding-top: 2.5rem; }
  .display-name { font-size: clamp(3.6rem, 19vw, 5.4rem); }
  .display-role { letter-spacing: 0.05em; line-height: 1.45; }
  .aside-lede { font-size: 1.25rem; }
  .runtime-check { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
  .runtime-bar { flex-basis: auto; width: min(100%, 160px); }
  .viz-panel { padding: 1rem; }
  .viz-modes { align-items: stretch; }
  .viz-modes-btns { width: 100%; flex-direction: column; }
  .mode-btn { border-right: none; border-bottom: 1px solid var(--line); }
  .mode-btn:last-child { border-bottom: none; }
  .viz-stats { gap: 0.9rem; }
  .stat { min-width: calc(50% - 0.45rem); }
  .viz-col-title { text-align: left; }
  .viz-col-body { max-height: 260px; }
  .resume-card { padding: 1.75rem; }
  .resume-action { width: 100%; }
  .btn-resume { width: 100%; }
  .btn { width: 100%; padding-inline: 0.9rem; }
  .project-text { padding: 1.5rem 1.25rem; }
  .project-spec { padding: 1.5rem 1.25rem; }
  .project-body { grid-template-columns: 1fr; }
  .project-list { gap: 3rem; }
  .project-name { font-size: 1.55rem; }
  .project-links { gap: 0.85rem 1rem; }
  .stack-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.6rem; }
  .spec-strip {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 3rem;
  }
  .spec-strip-item { width: 100%; flex-basis: auto; }
  .contact-row { flex-direction: column; gap: 0.3rem; }
  .contact-row dt { flex: none; }
  .contact-row dd,
  .contact-row dd a { max-width: 100%; overflow-wrap: anywhere; }
  .contact-readout { padding: 1rem; }
  .contact-readout pre { font-size: 0.72rem; }
  .footer-copy { overflow-wrap: anywhere; }
  .footer-sig { white-space: normal; overflow-wrap: anywhere; }
  .project-rail { flex-wrap: wrap; }
  .project-rail-type { white-space: normal; }
}

@media (max-width: 380px) {
  :root,
  html[data-theme="light"],
  html[data-theme="dark"] { --gutter: 0.75rem; }
  .display-name { font-size: 3.6rem; }
  .section-eyebrow,
  .intro-eyebrow,
  .non-public-eyebrow { letter-spacing: 0.08em; }
  .spec-strip-item { flex-basis: 100%; padding: 0.7rem 0.85rem; }
  .project-text,
  .project-spec,
  .resume-card { padding: 1.25rem 1rem; }
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-name-row { align-items: flex-start; flex-direction: column; }
}