/* Portfolio styles: diagnostic, fast, and progressively enhanced. */
:root {
  color-scheme: dark light;
  --bg: oklch(12.8% 0.018 214);
  --bg-soft: oklch(16.5% 0.019 214);
  --bg-card: oklch(18.3% 0.021 214);
  --bg-panel: oklch(15.2% 0.02 214);
  --border: oklch(30% 0.027 214);
  --border-soft: oklch(23% 0.024 214);
  --fg: oklch(93% 0.015 214);
  --fg-muted: oklch(74% 0.027 214);
  --fg-dim: oklch(58% 0.032 214);
  --accent: oklch(76% 0.13 207);
  --accent-ink: oklch(15% 0.026 214);
  --accent-2: oklch(77% 0.14 153);
  --red: oklch(73% 0.16 25);
  --warn: oklch(80% 0.13 82);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --maxw: 820px;
  --maxw-wide: 1160px;
  --radius: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press: cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: oklch(97.2% 0.007 214);
    --bg-soft: oklch(93.7% 0.012 214);
    --bg-card: oklch(98.2% 0.006 214);
    --bg-panel: oklch(95.2% 0.011 214);
    --border: oklch(80% 0.026 214);
    --border-soft: oklch(88% 0.018 214);
    --fg: oklch(22% 0.026 214);
    --fg-muted: oklch(43% 0.035 214);
    --fg-dim: oklch(58% 0.033 214);
    --accent: oklch(50% 0.16 223);
    --accent-ink: oklch(98% 0.006 82);
    --accent-2: oklch(49% 0.14 153);
    --red: oklch(52% 0.18 27);
    --warn: oklch(58% 0.15 82);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--border-soft) 28%, transparent) 1px, transparent 1px) 50% 0 / 72px 72px,
    linear-gradient(color-mix(in oklch, var(--border-soft) 20%, transparent) 1px, transparent 1px) 50% 0 / 72px 72px,
    linear-gradient(180deg, color-mix(in oklch, var(--bg-soft) 42%, transparent), transparent 42rem),
    var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 38%, color-mix(in oklch, var(--accent) 8%, transparent) 38.2%, transparent 38.6%),
    linear-gradient(238deg, transparent 0 62%, color-mix(in oklch, var(--accent-2) 5%, transparent) 62.2%, transparent 62.6%);
  mask-image: linear-gradient(180deg, black, transparent 72%);
  z-index: -1;
}

a { color: var(--accent); text-decoration: none; text-underline-offset: .22em; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--accent) 76%, var(--fg));
  outline-offset: 4px;
}

h1, h2, h3 {
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 780;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 4.25vw, 3.85rem); margin: 0 0 .3em; }
h2 { font-size: clamp(1.55rem, 2.2vw, 2.05rem); margin: 2.6em 0 .75em; }
h3 { font-size: 1.22rem; margin: 0 0 .35em; }
time, .muted { color: var(--fg-muted); }

.skip { position: absolute; left: -999px; }
.skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--bg-card);
  padding: .5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 20;
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--red));
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 30;
}

main {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.8rem) 5.5rem;
}
section { margin: 0 auto; }
.thesis, .page-head, .case, .about { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* Nav */
header {
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  backdrop-filter: saturate(150%) blur(16px);
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  z-index: 10;
}
.site-nav {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: .74rem clamp(1rem, 3vw, 1.8rem);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  font-weight: 820;
  letter-spacing: 0;
  color: var(--fg);
  font-size: 1.1rem;
}
.brand-dot { color: var(--accent); }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.72rem, 2.4vw, 1.35rem);
  font-size: .94rem;
}
.nav-links a { color: var(--fg-muted); }
.nav-links a:hover,
.nav-links a[aria-current] {
  color: var(--fg);
  text-decoration: none;
}

/* Hero */
.hero {
  max-width: var(--maxw-wide);
  padding: clamp(2.35rem, 4.7vw, 3.85rem) 0 clamp(1.4rem, 3vw, 2.1rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .78fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero h1 {
  max-width: 18ch;
  font-size: clamp(2.35rem, 4vw, 3.55rem);
}
.hero .lede { max-width: 65ch; }
.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.lede {
  font-size: clamp(1.09rem, 1.2vw, 1.27rem);
  color: var(--fg-muted);
  margin: 0 0 1.7rem;
  max-width: 70ch;
  text-wrap: pretty;
}
.cta { display: flex; gap: .78rem; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: .68rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
  background: color-mix(in oklch, var(--bg-panel) 86%, transparent);
  font-size: .95rem;
  font-weight: 660;
  transition: transform 160ms var(--ease-press), border-color 160ms var(--ease-press), background 160ms var(--ease-press);
}
.btn:hover {
  border-color: color-mix(in oklch, var(--accent) 70%, var(--border));
  background: color-mix(in oklch, var(--bg-card) 92%, var(--accent) 8%);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 28%, transparent), 0 18px 50px color-mix(in oklch, var(--accent) 18%, transparent);
}
.btn-primary:hover {
  background: color-mix(in oklch, var(--accent) 88%, var(--fg));
}

.hero-instrument {
  --mx: 50%;
  --my: 50%;
  min-height: 360px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mx) var(--my), color-mix(in oklch, var(--accent) 16%, transparent), transparent 20%),
    linear-gradient(135deg, color-mix(in oklch, var(--bg-card) 94%, var(--accent) 6%), var(--bg-panel));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--fg) 10%, transparent);
  isolation: isolate;
  align-self: center;
}
.hero-instrument::before,
.hero-instrument::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-instrument::before {
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--border) 36%, transparent) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(color-mix(in oklch, var(--border) 30%, transparent) 1px, transparent 1px) 0 0 / 38px 38px;
  opacity: .72;
}
.hero-instrument::after {
  background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--bg) 74%, transparent));
  transform: translateY(42%);
}
.instrument-head,
.instrument-readout {
  position: absolute;
  z-index: 2;
  left: 1rem;
  right: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.instrument-head { top: 1rem; }
.instrument-readout {
  bottom: 1rem;
  align-items: end;
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: .45rem;
}
.instrument-readout strong {
  color: var(--fg);
  font-size: .86rem;
  letter-spacing: 0;
  text-transform: none;
}
.instrument-scan {
  position: absolute;
  z-index: 2;
  inset: 4.3rem 1rem 6.6rem;
  display: grid;
  align-content: center;
  gap: 1.1rem;
}
.instrument-scan span {
  display: block;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .7;
  animation: scan-line 4.8s var(--ease-out) infinite;
}
.instrument-scan span:nth-child(2) { width: 72%; animation-delay: 480ms; background: linear-gradient(90deg, var(--accent-2), transparent); }
.instrument-scan span:nth-child(3) { width: 56%; animation-delay: 940ms; }
.instrument-scan span:nth-child(4) { width: 84%; animation-delay: 1320ms; background: linear-gradient(90deg, var(--red), transparent); }
.instrument-matrix {
  position: absolute;
  z-index: 1;
  inset: 5.2rem 2rem 7.6rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  transform: perspective(700px) rotateX(54deg) rotateZ(-12deg);
  opacity: .9;
}
.instrument-matrix span {
  aspect-ratio: 1;
  border: 1px solid color-mix(in oklch, var(--border) 78%, transparent);
  background: color-mix(in oklch, var(--bg-soft) 70%, transparent);
}
.instrument-matrix .hot { background: color-mix(in oklch, var(--accent) 28%, transparent); border-color: color-mix(in oklch, var(--accent) 70%, var(--border)); }
.instrument-matrix .cool { background: color-mix(in oklch, var(--accent-2) 24%, transparent); border-color: color-mix(in oklch, var(--accent-2) 70%, var(--border)); }
.instrument-matrix .risk { background: color-mix(in oklch, var(--red) 24%, transparent); border-color: color-mix(in oklch, var(--red) 70%, var(--border)); }

@keyframes scan-line {
  0%, 14% { transform: scaleX(.08); opacity: .22; }
  45% { transform: scaleX(1); opacity: .85; }
  100% { transform: scaleX(.24); opacity: .1; }
}

/* Sections */
.thesis { padding: 2.5rem 0; }
.thesis p { font-size: 1.1rem; }
.page-head { padding-top: clamp(3rem, 8vw, 5rem); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--maxw-wide);
  gap: 1rem;
}
.section-head h2 { margin-top: 2.4em; }
.more {
  font-size: .9rem;
  color: var(--fg-muted);
  font-weight: 620;
}
.featured, .changelog { max-width: var(--maxw-wide); }

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(.85rem, 2vw, 1.15rem);
}
.card {
  display: block;
  min-height: 100%;
  padding: 1.45rem 1.5rem;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--fg) 3%, transparent), transparent 34%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  position: relative;
  overflow: hidden;
  transition: transform 180ms var(--ease-press), border-color 180ms var(--ease-press), background 180ms var(--ease-press);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 180ms var(--ease-press);
}
.card:hover {
  border-top-color: var(--accent);
  border-color: color-mix(in oklch, var(--border) 70%, var(--accent) 30%);
  text-decoration: none;
  transform: translateY(-3px);
}
.card:hover::before { opacity: .82; }
.card h3 { margin-top: .6rem; font-size: 1.2rem; }
.card p {
  color: var(--fg-muted);
  font-size: .96rem;
  margin: .25rem 0 0;
  text-wrap: pretty;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: .68rem;
  font-size: .8rem;
  flex-wrap: wrap;
}
.models {
  margin-top: 1rem;
  display: flex;
  gap: .42rem;
  flex-wrap: wrap;
}
.chip {
  font-family: var(--mono);
  font-size: .72rem;
  padding: .14rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
  background: color-mix(in oklch, var(--bg-soft) 76%, transparent);
}

/* Tags */
.tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .16rem .48rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  background: color-mix(in oklch, var(--bg-soft) 62%, transparent);
}
.tag-eval { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 48%, var(--border)); }
.tag-red-team { color: var(--red); border-color: color-mix(in oklch, var(--red) 48%, var(--border)); }
.tag-systems { color: var(--accent-2); border-color: color-mix(in oklch, var(--accent-2) 48%, var(--border)); }
.tag-method { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 42%, var(--border)); }
.tag-enablement { color: oklch(72% 0.15 300); border-color: color-mix(in oklch, oklch(72% 0.15 300) 48%, var(--border)); }

/* Work filters */
.work-filters { display: none; }
.js-enabled .work-filters {
  max-width: var(--maxw-wide);
  margin: 2rem auto 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.work-filters button {
  min-height: 40px;
  padding: .5rem .86rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-panel) 90%, transparent);
  color: var(--fg-muted);
  font: 680 .86rem/1 var(--sans);
  cursor: pointer;
  transition: background 150ms var(--ease-press), color 150ms var(--ease-press), border-color 150ms var(--ease-press);
}
.work-filters button:hover,
.work-filters button[aria-pressed="true"] {
  color: var(--fg);
  border-color: color-mix(in oklch, var(--accent) 62%, var(--border));
  background: color-mix(in oklch, var(--bg-card) 84%, var(--accent) 12%);
}

/* Changelog */
.log {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  max-width: var(--maxw);
}
.log li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .55rem .6rem;
  margin-inline: -.6rem;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 6px;
  font-size: .96rem;
  flex-wrap: wrap;
  transition: background 160ms var(--ease-press), border-color 160ms var(--ease-press);
}
.log li:hover {
  background: color-mix(in oklch, var(--bg-soft) 78%, transparent);
  border-color: color-mix(in oklch, var(--border) 80%, var(--accent) 20%);
}
.log time {
  font-family: var(--mono);
  font-size: .82rem;
  min-width: 6.5rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* Work groups */
.work-group h2 {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: .55rem;
}
.work-group[hidden] { display: none; }
.card[hidden] { display: none; }

/* Case study */
.case { padding-top: clamp(3rem, 7vw, 5rem); }
.case-head { margin-bottom: 2.2rem; }
.case-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1.35rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--border-soft);
  font-size: .9rem;
}
.case-meta dt {
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.case-meta dd { margin: .2rem 0 0; }
.case-foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
}

/* Prose */
.prose {
  font-size: 1.055rem;
  max-width: var(--maxw);
}
.prose h2 { font-size: clamp(1.45rem, 2vw, 1.78rem); }
.prose h3 { font-size: 1.22rem; margin-top: 1.9em; }
.prose p, .prose ul, .prose ol { margin: 1.1em 0; }
.prose p { text-wrap: pretty; }
.prose li { margin: .38em 0; }
.prose code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--bg-soft);
  padding: .12em .42em;
  border-radius: 5px;
  border: 1px solid var(--border-soft);
  font-variant-ligatures: none;
}
.prose pre {
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--border-soft) 40%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: .85rem;
  line-height: 1.55;
}
.prose pre code { background: none; border: none; padding: 0; }
.prose blockquote {
  margin: 1.5em 0;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in oklch, var(--accent) 38%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--bg-soft) 84%, var(--accent) 6%);
  color: var(--fg-muted);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin: 1.4em 0;
  display: block;
  overflow-x: auto;
  font-variant-numeric: tabular-nums;
}
.prose th, .prose td {
  border: 1px solid var(--border);
  padding: .55rem .72rem;
  text-align: left;
}
.prose th {
  background: var(--bg-soft);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .04em;
}
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 2.5em 0;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border-soft);
  margin-top: 4rem;
  padding: 2rem clamp(1rem, 3vw, 1.8rem) max(2rem, env(safe-area-inset-bottom));
  max-width: var(--maxw-wide);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  color: var(--fg-muted);
  font-size: .88rem;
}
.foot-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.foot-links a { color: var(--fg-muted); }
.foot-meta { color: var(--fg-dim); font-size: .82rem; width: 100%; }

/* Progressive enhancement */
.js-enabled .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.js-enabled .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 620ms var(--ease-out) calc(min(var(--i, 0), 7) * 46ms),
    transform 620ms var(--ease-out) calc(min(var(--i, 0), 7) * 46ms);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero h1 { max-width: 13ch; }
  .hero-instrument { min-height: 300px; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  main { padding-bottom: 4.25rem; }
  .site-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: .6rem;
    min-height: auto;
  }
  .nav-links {
    width: 100%;
    overflow-x: auto;
    padding-bottom: .18rem;
  }
  .hero { padding-top: 3.25rem; }
  .hero h1 { max-width: none; }
  .hero-instrument { min-height: 250px; }
  .instrument-matrix { inset-inline: 1.1rem; }
  .case-meta { gap: 1.2rem; }
  .section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }
  .log li { align-items: flex-start; }
}

@media (hover: none) {
  .card:hover,
  .btn:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js-enabled .reveal,
  .js-enabled .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}