:root {
  --paper: #f3f0e8;
  --paper-2: #e9e4d8;
  --ink: #181713;
  --muted: #605c50;
  --faint: #706b5c;
  --rule: #cec7b8;
  --blue: #1f35d5;
  --red: #a83b2e;
  --green: #315f4d;
  --edge: clamp(1.2rem, 5.5vw, 6.5rem);
  --max: 76rem;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, .97rem + .12vw, 1.08rem);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
video { width: 100%; background: #090a0c; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input { font: inherit; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.skip-link {
  position: fixed; z-index: 200; top: .75rem; left: .75rem;
  padding: .55rem .75rem; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .75rem; transform: translateY(-180%);
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.site-nav {
  position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
}
.site-nav__inner {
  width: min(100%, var(--max)); margin: auto; min-height: 4rem; padding: .75rem var(--edge);
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.site-nav__brand { flex: 0 0 auto; font-size: 1rem; font-weight: 650; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.site-nav__links { display: flex; gap: clamp(.8rem, 2.5vw, 2rem); list-style: none; margin-left: auto; }
.site-nav__links a {
  color: var(--muted); font-family: var(--mono); font-size: .72rem;
  letter-spacing: .05em; text-decoration: none; text-transform: uppercase;
}
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--ink); }
.site-nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--blue); }

/* theme toggle — injected into the nav by site.js */
.theme-toggle {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: currentColor; }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.shell { width: 100%; max-width: var(--max); min-width: 0; margin-inline: auto; padding-inline: var(--edge); }
.eyebrow, .kicker, .meta, .status, .number, .label {
  font-family: var(--mono); font-size: .72rem; line-height: 1.35; letter-spacing: .07em; text-transform: uppercase;
}
.eyebrow, .kicker, .label { color: var(--muted); }
.status { color: var(--blue); }
.lede { font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.35; letter-spacing: -.025em; max-width: 32ch; }
.prose { max-width: 66ch; color: #353229; }
.prose + .prose { margin-top: 1rem; }
.rule { border-top: 1px solid var(--rule); }
.text-link { font-family: var(--mono); font-size: .77rem; font-weight: 650; letter-spacing: .025em; }
code { font-family: var(--mono); font-size: .88em; }
.external::after { content: " ↗"; }
.plain-list { list-style: none; }

.hero { min-height: min(40rem, calc(100svh - 8rem)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 8vh, 5.5rem); }
.hero h1 { font-size: clamp(4rem, 12.5vw, 10rem); line-height: .84; letter-spacing: -.075em; font-weight: 620; }
.hero__copy { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .7fr); gap: 2rem; align-items: end; margin-top: clamp(1.9rem, 4.5vw, 3.25rem); }
.hero__statement { max-width: 37rem; font-size: clamp(1.22rem, 2.4vw, 1.85rem); line-height: 1.34; letter-spacing: -.025em; }
.hero__statement--sub { margin-top: .85rem; color: var(--muted); font-size: clamp(1.02rem, 1.7vw, 1.3rem); }
.hero__details { color: var(--muted); }
.hero__links { display: flex; flex-wrap: wrap; gap: .7rem 1.25rem; margin-top: 1.15rem; }
.hero__links a { font-family: var(--mono); font-size: .75rem; }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-head { display: grid; grid-template-columns: minmax(8rem, .35fr) minmax(0, 1fr); gap: 2rem; margin-bottom: clamp(1.6rem, 3.5vw, 2.75rem); }
.section-head:not(:has(> .kicker)) { grid-template-columns: minmax(0, 1fr); }
.section-head h2 { font-size: clamp(2rem, 5vw, 4.6rem); line-height: .95; letter-spacing: -.055em; font-weight: 560; max-width: 13ch; }
.section-head p { max-width: 48ch; color: var(--muted); align-self: end; }

.experience-preview { border-top: 1px solid var(--ink); }
.experience-row { display: grid; grid-template-columns: 7rem 1fr 1.2fr; gap: 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--rule); }
.experience-row time { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.experience-row strong { font-weight: 600; }
.experience-row span:last-child { color: var(--muted); }

.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.work-card {
  position: relative; min-height: 25rem;
  padding: clamp(1.2rem, 3vw, 2rem); padding-bottom: 3.4rem;
  border-top: 1px solid currentColor; display: flex; flex-direction: column;
  overflow: hidden; text-decoration: none; isolation: isolate;
}
.work-card:nth-child(1), .work-card:nth-child(4) { grid-column: span 7; min-height: 27rem; }
.work-card:nth-child(2), .work-card:nth-child(3) { grid-column: span 5; }
.work-card:nth-child(5), .work-card:nth-child(6) { grid-column: span 6; }
.work-card__top { display: flex; justify-content: space-between; gap: 1rem; }
.work-card h3 { margin-top: 1.25rem; font-size: clamp(1.75rem, 3.6vw, 3.4rem); line-height: .96; letter-spacing: -.05em; font-weight: 590; max-width: 12ch; }
.work-card p { max-width: 38ch; margin-top: .9rem; color: color-mix(in srgb, currentColor 72%, transparent); }
.work-card__visual { margin-top: auto; padding-top: 1.75rem; min-height: 8rem; display: flex; flex-direction: column; align-items: start; gap: .9rem; justify-content: end; }
.work-card__stat { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, currentColor 60%, transparent); }
.work-card__tag { align-self: flex-start; padding: .18rem .45rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.work-card__action { position: absolute; left: clamp(1.2rem, 3vw, 2rem); bottom: 1.3rem; font-family: var(--mono); font-size: .72rem; opacity: .8; }
.work-card:hover .work-card__action { text-decoration: underline; }
.tone-ppi { background: #e8ebde; color: #1f2a1e; }
.tone-compute { background: #162220; color: #e4eadf; }
.tone-audit { background: #e9e2d6; color: #372d25; }
.tone-defundu { background: #eceef3; color: #1b2030; }
.tone-food { background: #ead8a4; color: #2f2712; }
.tone-video { background: #161719; color: #f0eee9; }
.tone-lab { background: #dfe5ef; color: #1c2738; }

.formula { font-family: var(--mono); font-size: clamp(1.4rem, 3.5vw, 2.6rem); letter-spacing: -.05em; }
.mini-line { width: 100%; height: 7rem; }
.mini-line path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.constraint-grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid currentColor; }
.constraint-grid span { min-height: 5.8rem; display: grid; place-items: center; border-right: 1px solid currentColor; font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }
.constraint-grid span:last-child { border-right: 0; }
.chain { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; }
.plate { width: 8rem; aspect-ratio: 1; margin-inline: auto; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; }
.plate::before { content: "673"; font-size: 2.1rem; font-weight: 600; letter-spacing: -.03em; }
.pipeline { display: flex; width: 100%; align-items: center; gap: .5rem; flex-wrap: wrap; font-family: var(--mono); font-size: .64rem; text-transform: uppercase; }
.pipeline span { border: 1px solid currentColor; padding: .5rem .65rem; }
.pipeline i { font-style: normal; opacity: .6; }
.split-visual { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid currentColor; }
.split-visual span { min-height: 6rem; display: grid; place-items: center; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; }
.split-visual span + span { border-left: 1px solid currentColor; }

.more-work .section-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.more-list { list-style: none; border-top: 1px solid var(--ink); }
.more-list li { border-bottom: 1px solid var(--rule); }
.more-list li > a, .more-list__row { display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); gap: .5rem 1.5rem; padding: 1.15rem 0; text-decoration: none; align-items: baseline; }
.more-list strong { font-weight: 600; letter-spacing: -.01em; }
.more-list p { margin: 0; color: var(--muted); max-width: 62ch; }
.more-list li > a { color: inherit; }
.more-list li > a:not(:has(.more-list__demo)):not(:has(.more-list__cta)) strong::after { content: " →"; font-family: var(--mono); font-size: .8em; color: var(--faint); }
.more-list li > a:hover strong { text-decoration: underline; text-decoration-color: var(--blue); }
.more-list__demo, .more-list__cta { font-family: var(--mono); font-size: .72rem; color: var(--blue); white-space: nowrap; }

.page-intro { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.25rem, 5vw, 4rem); }
.page-intro h1 { margin-top: 1.25rem; max-width: 12ch; font-size: clamp(3.4rem, 9vw, 8rem); line-height: .88; letter-spacing: -.065em; font-weight: 590; }
.page-intro .lede { margin-top: 2rem; }
.project-intro { padding-block: clamp(3rem, 6.5vw, 5rem); }
.project-intro__meta { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-bottom: clamp(1.8rem, 4vw, 3.25rem); }
.project-intro h1 { font-size: clamp(3.3rem, 9vw, 8.2rem); line-height: .86; letter-spacing: -.07em; font-weight: 590; max-width: 11ch; }
.project-intro__summary { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; margin-top: clamp(1.9rem, 4vw, 3.25rem); align-items: end; }
.project-intro__summary .lede { max-width: 30ch; }

.project-section { padding-block: clamp(2.75rem, 6vw, 5rem); border-top: 1px solid var(--rule); }
.project-section__grid { display: grid; grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
.project-section h2 { font-size: clamp(1.8rem, 3.5vw, 3.3rem); line-height: 1; letter-spacing: -.045em; font-weight: 580; max-width: 12ch; }
.project-section h3 { margin-bottom: .6rem; font-size: 1rem; }
.project-section__body { min-width: 0; }
.project-section__body > * + * { margin-top: 1.5rem; }
.callout { padding: 1.25rem; border-left: 3px solid var(--blue); background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.callout.warning { border-color: var(--red); }
.callout .label { display: block; margin-bottom: .55rem; }
.equation-panel { padding: clamp(1.5rem, 4vw, 3.2rem); border: 1px solid currentColor; }
.equation-panel .formula { display: block; }
.equation-panel p { margin-top: 1rem; max-width: 52ch; }

.data-list { border-top: 1px solid currentColor; list-style: none; }
.data-list li, .data-list > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.data-list .label { color: inherit; opacity: .65; }
.market-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; list-style: none; border-top: 1px solid currentColor; }
.market-list li { padding: 1rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.market-list b { display: block; margin-bottom: .35rem; font-family: var(--mono); font-size: .67rem; font-weight: 500; opacity: .6; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.status-grid article { padding: 1.25rem; background: var(--paper); }
.status-grid .label { display: block; margin-bottom: .7rem; }
.status-grid p { color: var(--muted); }
.sources { list-style: none; border-top: 1px solid var(--rule); }
.sources li { padding: 1rem 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; gap: 1rem; }
.sources a { font-family: var(--mono); font-size: .72rem; }

.tally { list-style: none; border-top: 1px solid currentColor; }
.tally li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.tally b { font-weight: 600; letter-spacing: -.01em; }
.tally span { font-family: var(--mono); font-size: .78rem; color: var(--muted); white-space: nowrap; }

.record-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid currentColor; }
.record-strip > div { padding: 1.3rem; min-height: 10rem; border-right: 1px solid currentColor; }
.record-strip > div:last-child { border-right: 0; }
.record-strip strong { display: block; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.05em; }
.record-strip span { display: block; margin-top: .75rem; max-width: 20ch; font-size: .86rem; }
.provenance-flow { display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; border: 1px solid currentColor; }
.provenance-flow > div { min-height: 8rem; padding: 1rem; border-right: 1px solid currentColor; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; }
.provenance-flow > div:last-child { border-right: 0; }

.compute-page { --paper: #e9e9df; --paper-2: #d8ddd1; --ink: #13201e; --muted: #4e5a55; --rule: #aeb8af; --blue: #21634e; }
.compute-hero { position: relative; overflow: hidden; }
.compute-hero::after { content: ""; position: absolute; right: var(--edge); top: 15%; width: 34vw; height: 34vw; max-width: 27rem; max-height: 27rem; border: 1px solid var(--rule); background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 2rem 2rem; opacity: .32; z-index: -1; }
.model-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid currentColor; }
.model-grid article { min-height: 12rem; padding: 1.2rem; border-right: 1px solid currentColor; }
.model-grid article:last-child { border-right: 0; }
.model-grid .label { color: inherit; opacity: .65; }
.model-grid h3 { margin-top: 2.6rem; font-size: 1.2rem; }
.model-grid p { margin-top: .6rem; font-size: .9rem; opacity: .8; }

.video-page { --paper: #101114; --paper-2: #1a1c20; --ink: #f0eee8; --muted: #aaa9a5; --rule: #34363b; --blue: #ff7a43; color-scheme: dark; }
.video-page .site-nav { background: color-mix(in srgb, var(--paper) 92%, transparent); }
.video-page .prose { color: #d2d0ca; }
.video-page .status-grid article { background: var(--paper); }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--rule); }
.timeline div { min-height: 9rem; padding: 1rem; border-right: 1px solid var(--rule); }
.timeline div:last-child { border-right: 0; }
.timeline b { display: block; font-family: var(--mono); font-size: .65rem; color: var(--blue); }
.timeline span { display: block; margin-top: 2rem; font-size: .9rem; }
.video-frame { border: 1px solid var(--rule); padding: .7rem; background: #08090b; }
.video-caption { margin-top: .8rem; color: var(--muted); font-size: .86rem; }

/* ---- artifact components (shared across project colour worlds) ---- */
/* subtle metadata label: LIVE / DEMO / RESEARCH / SIMULATOR / CODE */
.artifact-tag {
  display: inline-block; padding: .2rem .5rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.artifact-tag + .artifact-tag { margin-left: .4rem; }

/* horizontally-scrollable data table, editorial styling, works on any --paper */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 30%, transparent); }
.data-table { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: .9rem; }
.data-table caption { text-align: left; margin-bottom: .9rem; color: var(--muted); font-size: .85rem; max-width: 62ch; }
.data-table th, .data-table td { padding: .72rem .9rem; text-align: left; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); vertical-align: top; }
.data-table thead th { border-bottom: 1px solid currentColor; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: 1px solid currentColor; }
.data-table .rank { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.data-table strong { font-weight: 600; letter-spacing: -.01em; }
.data-table .pos { color: var(--green, #315f4d); }
.data-table .neg { color: var(--red, #a83b2e); }
.table-note { margin-top: .8rem; color: var(--muted); font-size: .82rem; max-width: 62ch; }

/* ranking strip — a podium row that degrades to a list on mobile */
.rank-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid currentColor; }
.rank-strip > li { list-style: none; padding: 1.2rem; border-right: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.rank-strip > li:last-child { border-right: 0; }
.rank-strip .rank-no { font-family: var(--mono); font-size: .7rem; color: var(--muted); letter-spacing: .1em; }
.rank-strip .rank-name { display: block; margin-top: .55rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.rank-strip .rank-meta { display: block; margin-top: .5rem; font-size: .82rem; color: var(--muted); }
.rank-strip .rank-score { display: block; margin-top: .7rem; font-family: var(--mono); font-size: 1.35rem; letter-spacing: -.03em; }

/* source citation chips (Canada's Compute) */
.source-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; list-style: none; }
.source-chips li { padding: 0; }
.source-chips a {
  display: inline-block; padding: .35rem .7rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  font-family: var(--mono); font-size: .68rem; text-decoration: none;
}
.source-chips a:hover { border-color: currentColor; }

/* PPI track-record / evaluation preview */
.eval-summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid currentColor; }
.eval-summary > div { padding: 1.1rem 1.2rem; border-right: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.eval-summary > div:last-child { border-right: 0; }
.eval-summary .k { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.eval-summary .v { display: block; margin-top: .5rem; font-size: .98rem; }
.eval-summary .v.big { font-family: var(--mono); font-size: clamp(1.7rem, 4vw, 2.3rem); letter-spacing: -.03em; line-height: 1; }
.eval-empty { border: 1px dashed color-mix(in srgb, currentColor 45%, transparent); padding: 1.1rem 1.25rem; }
.eval-empty .k { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.eval-empty p { margin: 0; max-width: 60ch; }
.synthetic-label { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; color: var(--muted); margin-bottom: .7rem; padding-left: .7rem; border-left: 2px solid color-mix(in srgb, currentColor 40%, transparent); }
.data-table--synthetic thead th { border-bottom-style: dashed; }
.data-table--synthetic tbody { opacity: .82; }

/* one-market end-to-end panel (PPI) */
.market-panel { border: 1px solid currentColor; }
.market-panel__row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.market-panel__row:last-child { border-bottom: 0; }
.market-panel__row .label { color: var(--muted); }
.market-panel__row .big { font-family: var(--mono); font-size: 1.5rem; letter-spacing: -.03em; }

/* version trail (Excel → LLM → Word) */
.version-trail { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin-top: 1rem; }
.version-trail li { font-family: var(--mono); font-size: .72rem; padding: .3rem .55rem; border: 1px solid var(--rule); color: var(--muted); }
.version-trail li.is-current { border-color: currentColor; color: inherit; }

/* projects archive tiers */
.tier + .tier { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.tier__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.tier__head h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.04em; font-weight: 560; }
.tier__head span { font-family: var(--mono); font-size: .7rem; color: var(--muted); letter-spacing: .06em; }

/* live-project CTA */
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.4rem, 3vw, 2rem); }
.cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.1rem; border: 1px solid currentColor;
  font-family: var(--mono); font-size: .78rem; font-weight: 650; letter-spacing: .02em;
  text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.cta:hover { background: var(--ink); color: var(--paper); }
.cta--ghost { border-color: var(--rule); font-weight: 500; }

/* embedded live-site screenshots */
figure.shot { margin: 0; }
.shot-frame { border: 1px solid var(--rule); padding: .55rem; background: var(--paper-2); }
.shot-frame img { display: block; width: 100%; height: auto; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.shot figcaption { margin-top: .8rem; color: var(--muted); font-size: .86rem; }

.defundu-page { --paper: #f4f4f7; --paper-2: #e6e7ee; --ink: #171820; --muted: #575c69; --rule: #ccced9; --blue: #2f45c8; }
.defundu-page .lifecycle b { color: var(--blue); }

.shawarma-page { --paper: #f6f1e3; --paper-2: #ece0c6; --ink: #241c12; --muted: #6b5f49; --rule: #d8caa8; --blue: #b0442e; }

.lab-page { --paper: #edf0f4; --paper-2: #dde4ec; --ink: #152033; --muted: #586477; --rule: #bdc6d2; --blue: #375fc0; }

.arena-page { --paper: #f5f3fb; --paper-2: #e8e4f4; --ink: #1c1a26; --muted: #625d76; --rule: #d2cce3; --blue: #6d3fd6; }
.arena-page .workflow-map b { color: var(--blue); }

.excel-page { --paper: #f2ede0; --paper-2: #e6ddc5; --ink: #221d14; --muted: #6b6152; --rule: #ddd0b0; --blue: #2c6e62; }
.code-panel-wrap { position: sticky; top: calc(4rem + 1.5rem); }
.code-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.code-panel-head span:first-child { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.code-panel-head span:last-child { font-family: var(--mono); font-size: .68rem; color: var(--blue); text-transform: uppercase; letter-spacing: .05em; }
.code-panel { max-height: calc(100svh - 9rem); overflow: auto; margin: 0; padding: 1.35rem 1.5rem; background: #17140d; border-radius: 6px; }
.code-panel code { display: block; width: max-content; min-width: 100%; font-family: var(--mono); font-size: .76rem; line-height: 1.65; color: #e9e2cc; white-space: pre; }
.redacted { background: #000; color: transparent; border-radius: 2px; padding: 0 .05em; user-select: none; }
.code-panel-note { margin-top: .75rem; color: var(--muted); font-size: .85rem; }
.lab-page .video-frame { background: transparent; padding: 0; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.lab-page .video-frame video { border-radius: 10px; background: #ecebe7; }
.experiment { padding-block: clamp(2.75rem, 6vw, 5rem); border-top: 1px solid var(--rule); }
.experiment__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.experiment h2 { font-size: clamp(2.4rem, 6vw, 5.5rem); letter-spacing: -.06em; line-height: .9; }
.experiment-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); }
.workflow-map { border: 1px solid currentColor; }
.workflow-map div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1rem; border-bottom: 1px solid currentColor; }
.workflow-map div:last-child { border-bottom: 0; }
.workflow-map b { font-family: var(--mono); font-size: .68rem; font-weight: 500; opacity: .6; }

.experience-page .page-intro { padding-bottom: 3rem; }
.experience-page .role__areas { grid-template-columns: repeat(2, 1fr); }
.role { padding-block: clamp(2.5rem, 5.5vw, 4.5rem); border-top: 1px solid var(--ink); }
.role__head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.role__head h2 { font-size: clamp(2.6rem, 7vw, 6.5rem); line-height: .9; letter-spacing: -.065em; font-weight: 590; }
.role__title { align-self: end; }
.role__title strong { display: block; font-size: 1.15rem; }
.role__title span { color: var(--muted); }
.role__areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 3rem; background: var(--rule); border: 1px solid var(--rule); }
.role__areas article { min-height: 14rem; padding: 1.3rem; background: var(--paper); }
.role__areas h3 { margin-top: 2.5rem; font-size: 1rem; }
.role__areas p { margin-top: .65rem; color: var(--muted); font-size: .92rem; }

.project-nav { border-top: 1px solid var(--rule); }
.project-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-block: 1.75rem; }
.project-nav a { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; text-decoration: none; }
.project-nav a:last-child { text-align: right; }
.project-nav a:hover { text-decoration: underline; }

.site-footer { border-top: 1px solid var(--rule); }
.site-footer__inner { padding-block: clamp(3rem, 7vw, 5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; }
.site-footer h2 { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.05em; line-height: 1; font-weight: 560; }
.site-footer .prose { color: var(--muted); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; margin-top: .35rem; }
.site-footer__links a { font-family: var(--mono); font-size: .72rem; }
.site-footer__note { padding-top: 1.5rem; color: var(--faint); font-family: var(--mono); font-size: .67rem; }

@media (max-width: 820px) {
  .hero__copy, .project-intro__summary, .section-head, .project-section__grid, .experiment-grid, .role__head, .more-feature { grid-template-columns: 1fr; }
  .code-panel-wrap { position: static; }
  .code-panel { max-height: 60vh; }
  .hero { min-height: auto; }
  .hero__copy { align-items: start; }
  .section-head h2 { max-width: 16ch; }
  .work-card, .work-card:nth-child(n) { grid-column: span 6; min-height: 24rem; }
  .market-list { grid-template-columns: 1fr; }
  .provenance-flow { grid-template-columns: 1fr; }
  .provenance-flow > div { min-height: auto; border-right: 0; border-bottom: 1px solid currentColor; }
  .provenance-flow > div:last-child { border-bottom: 0; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline div { min-height: 7rem; border-bottom: 1px solid var(--rule); }
  .role__areas { grid-template-columns: 1fr; }
  .role__areas article { min-height: auto; }
}

@media (max-width: 600px) {
  .site-nav__inner { width: 100%; padding-inline: 1.2rem; display: flex; gap: .5rem; align-items: center; }
  .site-nav__links { min-width: 0; gap: .7rem; flex-wrap: nowrap; justify-content: flex-end; }
  .site-nav__links a { font-size: .64rem; }
  .theme-toggle { width: 1.85rem; height: 1.85rem; }
  .site-nav__links li:last-child { display: none; }
  .compute-hero::after { display: none; }
  .hero h1 { font-size: 17vw; white-space: nowrap; }
  .hero__copy, .hero__copy > *, .section-head > *, .project-intro__summary > *, .project-section__grid > * { min-width: 0; max-width: 100%; }
  .hero__statement, .hero__details, .section-head p, .project-intro p, .project-section p { overflow-wrap: anywhere; }
  .experience-row { grid-template-columns: 4.5rem 1fr; gap: .7rem; }
  .experience-row span:last-child { grid-column: 2; }
  .work-card, .work-card:nth-child(n) { grid-column: 1 / -1; min-height: 22rem; }
  .work-card h3 { font-size: 2.25rem; }
  .status-grid, .model-grid { grid-template-columns: 1fr; }
  .model-grid article { min-height: auto; border-right: 0; border-bottom: 1px solid currentColor; }
  .model-grid article:last-child { border-bottom: 0; }
  .record-strip { grid-template-columns: 1fr; }
  .record-strip > div { min-height: auto; border-right: 0; border-bottom: 1px solid currentColor; }
  .record-strip > div:last-child { border-bottom: 0; }
  .timeline { grid-template-columns: 1fr; }
  .timeline div { min-height: auto; border-right: 0; }
  .data-list li, .data-list > div { grid-template-columns: 1fr; gap: .3rem; }
  .more-list li > a, .more-list__row { grid-template-columns: 1fr; gap: .35rem; }
  .rank-strip { grid-template-columns: 1fr; }
  .rank-strip > li { border-right: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
  .rank-strip > li:last-child { border-bottom: 0; }
  .market-panel__row { grid-template-columns: 1fr; gap: .3rem; }
  .eval-summary { grid-template-columns: 1fr; }
  .eval-summary > div { border-right: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
  .eval-summary > div:last-child { border-bottom: 0; }
  .project-nav__inner { grid-template-columns: 1fr 1fr; }
  .project-nav a:nth-child(2) { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .site-nav, .project-nav { position: static; }
  .site-nav__links, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   Dark theme — opt-in via the nav toggle, persisted in
   localStorage. Light stays the default; nothing switches on
   prefers-color-scheme. Rules live at the end of the file so
   they win over the per-project colour worlds above.
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #16150f;
  --paper-2: #201d15;
  --ink: #f1ede1;
  --muted: #a7a08c;
  --faint: #8f8a78;
  --rule: #38352b;
  --blue: #8da0ff;
  --red: #e28a76;
  --green: #74b394;
}
html[data-theme="dark"] .prose { color: color-mix(in srgb, var(--ink) 82%, transparent); }
html[data-theme="dark"] ::selection { color: #16150f; }
html[data-theme="dark"] .video-frame { background: #000; }

/* per-project colour worlds — dark variants (hue preserved) */
html[data-theme="dark"] .compute-page  { --paper: #0f1615; --paper-2: #18211f; --ink: #e3ede8; --muted: #93aaa2; --rule: #2c3a36; --blue: #63ccab; }
html[data-theme="dark"] .defundu-page  { --paper: #101119; --paper-2: #1a1b28; --ink: #e8e9f3; --muted: #9aa0b7; --rule: #2e3143; --blue: #9aa6ff; }
html[data-theme="dark"] .shawarma-page { --paper: #17120b; --paper-2: #221a10; --ink: #f2e7d3; --muted: #b6a789; --rule: #39301f; --blue: #e79076; }
html[data-theme="dark"] .lab-page      { --paper: #0e131c; --paper-2: #171e2b; --ink: #e5ecf6; --muted: #95a3b8; --rule: #2a3342; --blue: #93abf2; }
html[data-theme="dark"] .arena-page    { --paper: #131121; --paper-2: #1e1a2e; --ink: #ece8f7; --muted: #a7a1bd; --rule: #332d46; --blue: #ac89f2; }
html[data-theme="dark"] .excel-page    { --paper: #15120b; --paper-2: #201a11; --ink: #efe7d4; --muted: #ada189; --rule: #372f1f; --blue: #5fb4a5; }
html[data-theme="dark"] .lab-page .video-frame video { background: #0e131c; }

/* homepage work-card swatches — darkened, hue kept */
html[data-theme="dark"] .tone-ppi     { background: #171d14; color: #d6e2ca; }
html[data-theme="dark"] .tone-defundu { background: #161722; color: #d4d7e7; }
html[data-theme="dark"] .tone-compute { background: #101a18; color: #cfe0d8; }
html[data-theme="dark"] .tone-audit   { background: #1c1710; color: #e8dac6; }
html[data-theme="dark"] .tone-food    { background: #1f1809; color: #efd9a6; }
html[data-theme="dark"] .tone-video   { background: #121316; color: #e3e1db; }
html[data-theme="dark"] .tone-lab     { background: #131b27; color: #d5e0ee; }