/* Hallmark · macrostructure: Ecosystem Index · tone: technical · anchor hue: electric cobalt */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap");
@import url("tokens.css");

html, body { overflow-x: clip; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-base)/1.6 var(--font-body); }
button, input { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
.shell { width: min(1280px, 100%); margin: auto; padding: 0 clamp(1rem, 4vw, 4rem) var(--space-3xl); }
.nav { border-bottom: 1px solid var(--color-rule); background: color-mix(in oklch, var(--color-paper) 94%, transparent); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); }
.nav__inner { width: min(1280px, 100%); min-height: 4.75rem; padding-inline: clamp(1rem, 4vw, 4rem); margin: auto; display: flex; align-items: center; gap: var(--space-md); }
.wordmark { font: 700 var(--text-md)/1 var(--font-display); letter-spacing: -.045em; text-decoration: none; white-space: nowrap; }
.wordmark b { color: var(--color-accent); font-family: var(--font-mono); font-size: .7em; }
.nav__links { display: none; gap: var(--space-lg); margin-inline: auto; }
.nav__links a, .foot__link { color: var(--color-body); text-decoration: none; white-space: nowrap; }
.nav__links a:hover, .foot__link:hover { color: var(--color-accent); }
.command-trigger, .nav__action { min-height: 2.5rem; border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: transparent; color: var(--color-body); padding-inline: .7rem; white-space: nowrap; }
.command-trigger { margin-left: auto; font: 500 var(--text-xs)/1 var(--font-mono); }
.command-trigger kbd { border-left: 1px solid var(--color-rule); margin-left: .4rem; padding-left: .4rem; }
.nav__action { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; display: inline-grid; place-items: center; }
.hero { display: grid; gap: var(--space-xl); padding-block: clamp(3rem, 10vw, 8rem) var(--space-2xl); border-bottom: 1px solid var(--color-rule); }
.eyebrow { margin: 0; color: var(--color-accent); font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
h1, h2 { font-family: var(--font-display); letter-spacing: -.045em; overflow-wrap: anywhere; min-width: 0; }
h1 { max-width: 12ch; margin: 0; font-size: var(--text-display); line-height: .98; }
.hero__lede { max-width: 48ch; margin: 0; color: var(--color-body); font-size: var(--text-md); }
.index-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); overflow: hidden; }
.index-stat { padding: var(--space-md); border-inline-end: 1px solid var(--color-rule); }
.index-stat:last-child { border-inline-end: 0; }
.index-stat strong { display: block; font: 600 var(--text-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.index-stat span { color: var(--color-muted); font-size: var(--text-sm); }
.discovery { padding-block: var(--space-2xl); }
.discovery__head { display: flex; gap: var(--space-lg); align-items: end; justify-content: space-between; margin-bottom: var(--space-lg); }
.discovery h2 { margin: 0; font-size: var(--text-xl); line-height: 1.05; }
.discovery__head p { color: var(--color-muted); margin: 0; }
.controls { padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); background: var(--color-surface); }
.search-wrap { display: flex; align-items: center; border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); }
.search-wrap span { padding-left: var(--space-md); font-family: var(--font-mono); color: var(--color-accent); }
input { width: 100%; min-height: 3.25rem; border: 0; outline: 0; padding: .7rem var(--space-md); color: var(--color-ink); background: transparent; }
input:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 35%, transparent); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: var(--space-md); }
.filters button { min-height: 2.5rem; border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-body); padding-inline: .7rem; white-space: nowrap; }
.filters button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
#result-count { margin: var(--space-lg) 0 var(--space-sm); color: var(--color-muted); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); border-top: 1px solid var(--color-rule); border-left: 1px solid var(--color-rule); }
.project-card { display: flex; flex-direction: column; min-width: 0; padding: var(--space-lg); border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); background: var(--color-paper); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.project-card h2 { margin: var(--space-xs) 0; font-size: var(--text-lg); line-height: 1.1; }
.project-card h2 a { text-decoration: none; }
.project-card h2 a:hover { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.project-card > p:not(.eyebrow) { margin: 0 0 var(--space-lg); color: var(--color-body); font-size: .95rem; }
.reading-list { border-top: 1px solid var(--color-rule); }
.reading-card { display: grid; gap: var(--space-sm); padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-rule); }
.reading-card h2 { max-width: 34ch; margin: 0; font-size: clamp(var(--text-lg), 3vw, var(--text-2xl)); line-height: 1.05; }
.reading-card h2 a { text-decoration: none; }
.reading-card h2 a:hover { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.reading-card > p:not(.eyebrow) { max-width: 65ch; margin: 0; color: var(--color-body); }
.reading-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); color: var(--color-muted); font: 500 var(--text-xs)/1.4 var(--font-mono); }
.reading-card__meta .tags { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: auto 0 0; list-style: none; }
.tags li { color: var(--color-muted); font: 500 var(--text-xs)/1.4 var(--font-mono); }
.tags li:not(:last-child)::after { content: " /"; color: var(--color-rule); }
.footer { margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: center; }
.footer__inner span + span::before { content: "·"; margin-inline-end: var(--space-md); color: var(--color-rule); }
.palette[hidden] { display: none; }
.palette { position: fixed; inset: 0; z-index: 20; display: grid; place-items: start center; padding: min(20vh, 8rem) var(--space-md); background: oklch(24% .02 258 / .24); }
.palette__panel { width: min(42rem, 100%); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); box-shadow: 0 1.5rem 4rem oklch(24% .02 258 / .18); overflow: hidden; }
.palette__panel input { border-bottom: 1px solid var(--color-rule); }
.palette__list { padding: var(--space-xs); }
.palette__item { display: flex; width: 100%; min-height: 2.8rem; align-items: center; gap: var(--space-sm); border: 0; border-radius: var(--radius-control); background: transparent; text-align: left; }
.palette__item:hover, .palette__item.is-active { background: var(--color-surface); }
.palette__item b { width: 1.4rem; color: var(--color-accent); font-family: var(--font-mono); }
@media (min-width: 40rem) { .hero { grid-template-columns: minmax(0, 1fr) minmax(18rem, .65fr); align-items: end; } .index-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .nav__links { display: flex; } .command-trigger { margin-left: 0; } .index-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) { .project-card:hover { background: var(--color-surface); border-bottom-color: var(--color-accent); } }
@media (pointer: coarse) { button, .nav__action { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; } }
[hidden] { display: none !important; }