/* ════════════════════════════════════════════════════════
   OPERATIONAL RECORD — token system
   Near-monochrome. Colour is reserved for STATE: amber marks a
   constraint, green marks a result. If a colour appears anywhere else,
   it is a bug, not a decoration.
   ════════════════════════════════════════════════════════ */
:root {
  /* Surfaces — warm graphite, not blue-black */
  --ground:  #0d1013;
  --raised:  #14181c;
  --sunk:    #181d22;
  --line:    #232a30;
  --line-hi: #333c45;

  /* Ink */
  --ink:   #dfe4e8;   /* 13.3:1 */
  --ink-2: #9aa6b0;   /*  6.8:1 */
  --ink-3: #798690;   /*  4.6:1 — quietest labels only */

  /* State. The only colour in the system. */
  --state-constraint: #e8a33d;
  --state-result:     #5fb08a;
  --constraint-wash: rgba(232, 163, 61, 0.10);
  --result-wash:     rgba(95, 176, 138, 0.10);

  /* Type */
  --f-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — 1.25 ratio, with a floor that holds on phones */
  --t-xs:  0.75rem;    /* 12px — labels; never smaller */
  --t-sm:  0.8125rem;  /* 13px */
  --t-base: 0.9375rem; /* 15px — body */
  --t-md:  1.0625rem;
  --t-lg:  1.375rem;
  --t-xl:  1.875rem;
  --t-2xl: 2.5rem;

  /* Rhythm */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  --r: 3px;
  --nav-h: 58px;
  --tap: 44px;          /* minimum interactive target */
  --measure: 68ch;
}

[data-theme="light"] {
  --ground:  #f7f7f5;
  --raised:  #ffffff;
  --sunk:    #eeeeec;
  --line:    #d9dbd8;
  --line-hi: #bfc3bf;
  --ink:   #16191c;
  --ink-2: #4a545d;
  --ink-3: #636d77;
  --state-constraint: #8a5200;
  --state-result:     #1f6b4a;
  --constraint-wash: rgba(138, 82, 0, 0.08);
  --result-wash:     rgba(31, 107, 74, 0.08);
}

/* ── Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.7;
  transition: background .3s, color .3s;
  min-height: 100vh;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; }

/*/* ── Nav ──────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--ground) 80%, transparent);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-sigil {
  color: var(--ink-2);
  font-size: 1.1rem;
  line-height: 1;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--ink);
  text-decoration: none;
}
.nav-brand:hover { color: var(--ink); text-decoration: none; }


}

.nav-center {
  display: flex;
  gap: 2px;
}

.nav-link {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--ink-2);
  padding: 6px 14px;
  border-radius: var(--r);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link:hover { color: var(--ink); background: var(--sunk); text-decoration: none; }
.nav-link.active { color: var(--ink); }

.nav-right {
  display: flex;
  justify-content: flex-end;
}

.theme-toggle {
  background: none;
  min-width: var(--tap);
  min-height: var(--tap);
  border: 1px solid var(--line);
  color: var(--ink-2);
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, border-color .15s, background .15s;
  font-family: var(--f-sans);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-hi); background: var(--constraint-wash); }

/* ── App shell ────────────────────────────────────────── */
#app {
  width: 100%;
  min-height: calc(100vh - var(--nav-h));
}

/* ── Section label ────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.section-tag {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ink-3);
}

.section-count {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* ── Hero ─────────────────────────────────────────────── */
.hero-wrapper {
  width: 100%;
  padding: 72px clamp(20px, 6vw, 100px) 80px;
  background-image:
    radial-gradient(circle at 70% 50%, var(--constraint-wash) 0%, transparent 55%),
    radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 36px 36px;
  border-bottom: 1px solid var(--line);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

/* Left content */
.hero-content { }

.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-5);
}

.hero-badge {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 2px;
  color: var(--ink-2);
  border: 1px solid var(--line-hi);
  padding: 4px 12px;
  border-radius: 2px;
  background: var(--result-wash);
}

.hero-id {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: 1px;
}

.hero-name {
  margin-bottom: 20px;
}

.hero-name-label {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--ink-3);
  letter-spacing: 2px;
  display: block;
  margin-bottom: 6px;
}

.hero-name h1 {
  font-family: var(--f-mono);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink);
  line-height: 1;
  text-shadow: 0 0 40px var(--constraint-wash);
}

.hero-headline {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.6;
  max-width: 50ch;
  margin-bottom: 16px;
}

.hero-sub {
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 56ch;
  margin-bottom: 36px;
}

.hero-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.5px;
  color: var(--ink-2);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.contact-link:hover {
  color: var(--ink);
  border-color: var(--line-hi);
  background: var(--constraint-wash);
  text-decoration: none;
}
.contact-link-icon { font-size: 0.8rem; }

/* Right aside — profile + stats */
.hero-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Profile frame */
.profile-frame {
  position: relative;
  width: 200px;
  flex-shrink: 0;
}

.profile-img-wrap {
  width: 200px;
  height: 240px;
  background: var(--raised);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}

.profile-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.profile-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--sunk);
}

.profile-initials {
  font-family: var(--f-mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ink-2);
  opacity: 0.5;
  line-height: 1;
}

.profile-placeholder-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 3px;
  color: var(--ink-3);
}

/* Corner brackets */


/* Stats row */
.hero-stats {
  display: flex;
  gap: 1px;
  width: 200px;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-right: none;
}
.stat-item:last-child { border-right: 1px solid var(--line); }

.stat-value {
  font-family: var(--f-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.stat-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 1.5px;
  color: var(--ink-3);
}

/* ── Domains section ──────────────────────────────────── */
.domains-wrapper {
  width: 100%;
  padding: 60px clamp(20px, 6vw, 100px);
  max-width: 1400px;
  margin: 0 auto;
}

.domains-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.domain-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--raised);
  text-decoration: none;
  color: var(--ink);
  transition: background .2s;
  overflow: hidden;
}

.domain-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--constraint-wash);
  opacity: 0;
  transition: opacity .2s;
}

.domain-card {
  transition: background .2s, transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.domain-card:hover, .domain-card:focus-visible {
  background: var(--sunk);
  text-decoration: none;
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -12px var(--constraint-wash), inset 0 0 0 1px var(--line-hi);
}
.domain-card:hover::before { opacity: 1; }

.domain-card:hover .card-arrow { color: var(--ink); transform: translateX(4px); }
.domain-card:hover .card-index { color: var(--ink-2); }

.card-index {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 1px;
  color: var(--ink-3);
  transition: color .2s;
}

.card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.card-tagline {
  font-size: 0.8rem;
  color: var(--ink-2);
  line-height: 1.55;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.tag {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.3px;
  color: var(--ink-2);
  background: var(--sunk);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 2px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.domain-card:hover .tag { border-color: var(--line-hi); color: var(--ink); }

.card-arrow {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 1rem;
  color: var(--ink-3);
  transition: color .2s, transform .2s;
}

/* ── Problem view ─────────────────────────────────────── */
.problem-wrapper {
  width: 100%;
}

.problem-hero {
  width: 100%;
  padding: 60px clamp(20px, 6vw, 100px) 56px;
  background: var(--raised);
  border-bottom: 1px solid var(--line);
  background-image: radial-gradient(circle at 80% 50%, var(--constraint-wash) 0%, transparent 60%);
}

.problem-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 1px;
  color: var(--ink-2);
  text-decoration: none;
  margin-bottom: 40px;
  transition: color .15s;
}
.back-link:hover { color: var(--ink); text-decoration: none; }

.problem-domain-tag {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.problem-title {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.3px;
  max-width: 28ch;
  margin-bottom: 20px;
}

.problem-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Sections */
.problem-body {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 6vw, 100px) 80px;
}

.problem-sections {
  border-left: 1px solid var(--line);
  margin: 52px 0 64px;
}

.problem-section {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  padding: 36px 0 36px 48px;
  border-bottom: 1px solid var(--line);
}
.problem-section:last-child { border-bottom: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ps-label {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ink-3);
  padding-top: 3px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ps-num {
  color: var(--ink-3);
  font-weight: 400;
}

.ps-content p,
.ps-content .ps-body {
  font-size: 0.93rem;
  color: var(--ink);
  line-height: 1.8;
  max-width: 68ch;
}

/* ASCII architecture diagrams inside a section body. Scrolls within its own
   box so a wide diagram never forces the page to scroll sideways. */
.ps-diagram {
  display: block;
  margin: 22px 0;
  padding: 18px 20px;
  max-width: 68ch;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-hi);
  border-radius: 2px;
  white-space: pre;
  tab-size: 2;
}

/* Inline identifiers — kernel symbols, error codes, commands. */
.ps-content code {
  font-family: var(--f-mono);
  font-size: 0.82em;
  color: var(--ink);
  background: var(--sunk);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

/* Prev/Next nav */
.problem-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}

.prob-nav-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  background: var(--raised);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s;
}
.prob-nav-btn:hover { background: var(--sunk); text-decoration: none; color: var(--ink); }
.prob-nav-btn.right { text-align: right; align-items: flex-end; }
.prob-nav-btn.empty { background: transparent; }

.prob-nav-dir {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 1.5px;
  color: var(--ink-3);
}
.prob-nav-name { font-size: 0.85rem; color: var(--ink); font-weight: 500; }

/* ── Resume layout ────────────────────────────────────── */
.resume-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - var(--nav-h));
}

/* ── Sidebar ──────────────────────────────────────────── */
.resume-sidebar {
  background: var(--raised);
  border-right: 1px solid var(--line);
  padding: 40px 28px 80px;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.sidebar-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.sidebar-name {
  margin-top: 16px;
}

.sidebar-name h1 {
  font-family: var(--f-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}

.sidebar-title {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 1.5px;
  color: var(--ink-2);
  margin-bottom: 4px;
}

.sidebar-location {
  font-size: 0.75rem;
  color: var(--ink-2);
}

.sidebar-block {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.sidebar-block:last-child { border-bottom: none; margin-bottom: 0; }

.sidebar-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.sidebar-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-contact li a {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-decoration: none;
  word-break: break-all;
  transition: color .15s;
}
.sidebar-contact li a:hover { color: var(--ink); }

.skills-group {
  margin-bottom: 12px;
}
.skills-group:last-child { margin-bottom: 0; }

.skills-cat {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 1.5px;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.skills-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.skill-chip {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-2);
  background: var(--sunk);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 2px;
  transition: color .15s, border-color .15s;
}
.skill-chip:hover { color: var(--ink); border-color: var(--line-hi); }

.sidebar-edu { display: flex; flex-direction: column; gap: 3px; }
.edu-degree  { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.edu-school  { font-size: 0.77rem; color: var(--ink); font-family: var(--f-mono); }
.edu-year    { font-size: var(--t-sm); color: var(--ink-2); font-family: var(--f-mono); }

/* ── Resume main ──────────────────────────────────────── */
.resume-main {
  padding: 48px clamp(28px, 5vw, 72px) 100px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.rm-section {
  margin-bottom: 56px;
}

.rm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.rm-summary {
  font-size: 0.93rem;
  color: var(--ink);
  line-height: 1.85;
  max-width: 70ch;
}

/* ── Timeline ─────────────────────────────────────────── */
.timeline {
  position: relative;
}

.tl-entry {
  position: relative;
  padding: 0 0 44px 32px;
  border-left: 1px solid var(--line);
}
.tl-entry:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.tl-dot {
  position: absolute;
  left: -5px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-3);
  box-shadow: 0 0 10px var(--constraint-wash);
  flex-shrink: 0;
}

.tl-body {
  padding-top: 0;
}

.tl-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.tl-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tl-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.tl-company {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}

.tl-location {
  font-size: 0.76rem;
  color: var(--ink-2);
}

.tl-period {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--ink-2);
  background: var(--sunk);
  border: 1px solid var(--line);
  padding: 3px 10px;
  border-radius: 2px;
  white-space: nowrap;
  align-self: flex-start;
  letter-spacing: 0.3px;
}

.tl-summary {
  font-size: 0.84rem;
  color: var(--ink-2);
  font-style: italic;
  border-left: 2px solid var(--line-hi);
  padding-left: 12px;
  margin-bottom: 14px;
  line-height: 1.6;
}

.tl-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tl-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.65;
}
.tl-bullets li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--ink-3);
  font-size: var(--t-sm);
  top: 4px;
}

/* ── Timeline → problem deep-dive links ───────────────── */
.tl-domains {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.tl-domains-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 1px;
  color: var(--ink-2);
  white-space: nowrap;
}
.tl-domains-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.tl-domain-link {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-decoration: none;
  background: var(--sunk);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 2px;
  letter-spacing: 0.3px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.tl-domain-link:hover,
.tl-domain-link:focus-visible {
  border-color: var(--ink);
  background: var(--raised);
  transform: translateY(-1px);
}

/* ── Kept for compatibility ───────────────────────────── */
.job-period {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--ink-2);
  background: var(--sunk);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 2px;
  white-space: nowrap;
  align-self: flex-start;
  letter-spacing: 0.3px;
}

/* ── Motion ───────────────────────────────────────────── */

/* Scroll reveal. Elements start hidden and are released by an
   IntersectionObserver, so the stagger plays when the content actually enters
   the viewport rather than on first render while it is still below the fold. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Route change cross-fade. */
#app { animation: viewIn .22s ease both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Respect a stated preference for less motion. This also covers the pre-existing
   pulse and reveal animations, which had no such guard. */
@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; }
  .domain-card:hover, .domain-card:focus-visible { transform: none; }
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 980px) {
  .resume-layout { grid-template-columns: 1fr; }
  .resume-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: var(--sp-6) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }

  /* The fix that matters on a phone: identity stays on top, but skills and
     education move BELOW the experience instead of burying it under ~1300px
     of preamble. Achieved with flex order, no markup duplication. */
  .resume-layout { display: flex; flex-direction: column; }
  .resume-sidebar { order: 1; border-bottom: none; padding-bottom: 0; }
  .resume-main    { order: 2; }
  .sidebar-profile  { order: 0; }
  .sb-identity      { order: 1; }
  .sb-reference     { order: 3; }
  .resume-sidebar   { display: contents; }
  .sidebar-profile, .sb-identity, .sb-reference {
    padding: 0 var(--sp-5);
  }
  .sb-reference { margin-top: var(--sp-6); }

  .sidebar-profile { flex-direction: row; text-align: left; align-items: center; gap: var(--sp-5); }
  .sidebar-name { margin-top: 0; }
}

@media (max-width: 980px) {
  /* Compact the identity row: a smaller portrait leaves the name and title
     enough measure to sit on one or two lines instead of three. */
  .profile-frame, .profile-img-wrap { width: 104px; height: 124px; }
  .sidebar-profile { gap: var(--sp-4); align-items: flex-start; }
  .sidebar-name h1 { font-size: var(--t-lg); }
  .sidebar-title { font-size: var(--t-sm); }
}

@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-aside { flex-direction: row; justify-content: flex-start; align-items: flex-start; }
  .hero-stats { width: auto; }

  /* Two rows so the theme toggle survives on phones instead of being hidden. */
  nav {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    height: auto;
    padding: var(--sp-2) var(--sp-4);
    row-gap: var(--sp-1);
  }
  .nav-left   { grid-column: 1; grid-row: 1; }
  .nav-right  { grid-column: 2; grid-row: 1; }
  .nav-center { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: var(--sp-1); }

  .problem-section { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); }
  .ps-label { flex-direction: row; gap: var(--sp-2); }
  .tl-header { flex-direction: column; }
  .prob-nav-btn { padding: var(--sp-4); }
}

@media (max-width: 560px) {
  /* No base-size inflation. The token floor already guarantees 12px minimums;
     bumping the root as well pushed the hero name to 34px on a 375px screen. */
  .hero-wrapper { padding: var(--sp-6) var(--sp-4) var(--sp-6); }
  .hero-grid { gap: var(--sp-5); }
  .hero-name h1 { font-size: 1.75rem; letter-spacing: -0.5px; }
  .hero-headline { font-size: var(--t-md); }
  .hero-sub { font-size: var(--t-sm); }

  /* Portrait and stats sit side by side so the hero stops being three
     screens tall before the first domain card. */
  .hero-aside {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
  }
  .hero-aside .profile-frame,
  .hero-aside .profile-img-wrap { width: 88px; height: 106px; }
  .hero-stats { flex: 1; width: auto; }
  .stat-value { font-size: var(--t-md); }

  .hero-contacts { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .contact-link { justify-content: flex-start; }

  .domains-grid { grid-template-columns: 1fr; }
  .domains-wrapper { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* ── Product page (#/product) ──────────────────────────
   Positioning page. Built from existing tokens only —
   colour still marks state, never decoration.
   ──────────────────────────────────────────────────── */
.pp-hero {
  padding: var(--sp-8) var(--sp-6) var(--sp-7);
  border-bottom: 1px solid var(--line);
  background: var(--raised);
}
.pp-hero-inner { max-width: 900px; margin: 0 auto; }

.pp-headline {
  font-family: var(--f-sans);
  font-size: clamp(1.75rem, 5vw, var(--t-2xl));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin: var(--sp-5) 0 var(--sp-4);
  max-width: 20ch;
}

.pp-sub {
  font-size: var(--t-md);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: var(--sp-6);
}

.pp-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.pp-cta-primary,
.pp-cta-secondary {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.5px;
  padding: 0 var(--sp-5);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  border-radius: var(--r);
  border: 1px solid var(--line-hi);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pp-cta-primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.pp-cta-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.pp-cta-secondary { color: var(--ink); }
.pp-cta-secondary:hover { border-color: var(--ink); background: var(--sunk); }

/* Proof rows — shared by feature cards and section footers. */
.pp-proof-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.pp-proof-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pp-proof-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.pp-proof-link {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.pp-proof-link:hover { color: var(--ink); border-bottom-color: var(--line-hi); }

@media (max-width: 768px) {
  .pp-hero { padding: var(--sp-6) var(--sp-4); }
}
@media (max-width: 560px) {
  .pp-cta { flex-direction: column; align-items: stretch; }
  .pp-cta-primary, .pp-cta-secondary { justify-content: center; }
}

.pp-section {
  padding: var(--sp-8) var(--sp-6);
  max-width: 1100px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.pp-section:last-child { border-bottom: none; }

.pp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.pp-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.pp-feature {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-5);
  transition: border-color 0.15s;
}
.pp-feature:hover { border-color: var(--line-hi); }

.pp-feature-name {
  font-family: var(--f-mono);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
  margin-bottom: var(--sp-3);
}

.pp-feature-body {
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink-2);
}

@media (max-width: 768px) {
  .pp-section { padding: var(--sp-6) var(--sp-4); }
  .pp-features { grid-template-columns: 1fr; }
}

.pp-how {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
/* Grid items default to min-width:auto, which lets the diagram's content
   force the track wider than the page. minmax(0,…) above plus this let it
   scroll inside its own box instead — the page must never scroll sideways. */
.pp-how .ps-diagram { min-width: 0; margin-top: 0; }
.pp-how-note p {
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 56ch;
}

.pp-specs { display: flex; flex-direction: column; }
.pp-spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.pp-spec-row:last-child { border-bottom: none; }
.pp-spec-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pp-spec-value { font-size: var(--t-base); color: var(--ink); }

@media (max-width: 768px) {
  .pp-how { grid-template-columns: 1fr; gap: var(--sp-5); }
  .pp-spec-row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

.pp-proof-index {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.pp-proof-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--raised);
  transition: border-color 0.15s, transform 0.15s;
}
.pp-proof-item:hover { border-color: var(--line-hi); transform: translateX(2px); }
.pp-proof-item-name {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}
.pp-proof-item-tagline { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }

.pp-contact { text-align: center; padding-bottom: var(--sp-8); }
.pp-contact-head {
  font-family: var(--f-sans);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--sp-5);
}
.pp-contact .hero-contacts { justify-content: center; }

@media (max-width: 768px) {
  .pp-proof-index { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-proof-item:hover { transform: none; }
}

/* ── Print ────────────────────────────────────────────── */
@media print {
  nav, .theme-toggle, .back-link { display: none !important; }
  body { background: #fff; color: #000; }
  .resume-job { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .hero-wrapper, .domains-wrapper { background: none; }
}

/* ════════════════════════════════════════════════════════
   OPERATIONAL RECORD — structure
   ════════════════════════════════════════════════════════ */

/* Body sets the sans; mono is opt-in for data, labels and identifiers. */
body { font-family: var(--f-sans); font-size: var(--t-base); }
.mono, .section-tag, .sidebar-label, .ps-label, .tag, .skill-chip,
.tl-period, .tl-location, .edu-year, .nav-link, .nav-brand {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* Links are marked by an underline, never by colour — colour means state. */
.rm-summary a, .ps-body a, .tl-summary a { text-decoration: underline; text-underline-offset: 3px; }

/* ── State: the one place colour is allowed ─────────────── */
.ps-label[data-stage="constraint"] { color: var(--state-constraint); }
.ps-label[data-stage="result"]     { color: var(--state-result); }

.problem-section[data-stage="constraint"] { background: var(--constraint-wash); }
.problem-section[data-stage="result"]     { background: var(--result-wash); }

/* The constraint is the thing that could not move. It gets a held rail. */
.problem-section[data-stage="constraint"] { box-shadow: inset 3px 0 0 var(--state-constraint); }
.problem-section[data-stage="result"]     { box-shadow: inset 3px 0 0 var(--state-result); }

/* ── Visible keyboard focus everywhere ──────────────────── */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Interactive targets meet the 44px minimum ──────────── */
.sidebar-contact li a,
.nav-link,
.tl-domain-link,
.contact-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.sidebar-contact li a { min-height: var(--tap); }

/* ── Narrow-viewport containment ─────────────────────────
   Grid and flex children default to min-width:auto, so a wide diagram or an
   unbreakable identifier forces its whole column wider than the screen. These
   let the column shrink and keep the scrolling inside the diagram box. */
.problem-section > *,
.problem-body > *,
.ps-content { min-width: 0; }

.ps-diagram { max-width: 100%; }

/* Long kernel symbols and error codes must wrap rather than push the page. */
.ps-content code {
  white-space: normal;
  overflow-wrap: anywhere;
}