/* Corey James portfolio — single stylesheet. Direction D: light page, navy hero, blue accent, Inter Tight display. */

:root {
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-2: #EAF0FB;
  --ink: #13181F;
  --ink-2: #3E4855;
  --ink-3: #5B6675;
  --rule: #E1E6ED;
  --rule-strong: #13181F;
  --accent: #1E63F0;
  --accent-hover: #0E3FA8;
  --accent-ink: #FFFFFF;
  --accent-soft: #EAF0FB;
  --navy: #0E131A;
  --navy-3: #16202E; --navy-rule: #3A4457; --navy-line: #26303C; --on-accent-2: #D6E2FF; --navy-2: #1E2733;
  --on-navy: #FFFFFF;
  --on-navy-2: #C9D2DD;
  --on-navy-3: #8EA3BE;
  --green: #0F8A5F; --purple: #7A3FE4; --orange: #E07B1A; --indigo: #3A4FD8;
  --green-soft: #E8F6EF; --purple-soft: #F0EAFB; --orange-soft: #FBF0E4;
  --mark: #FFF1C2;
  --shadow: 0 10px 30px rgba(19, 24, 31, 0.10), 0 1px 3px rgba(19, 24, 31, 0.06);

  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 68ch;
  --gutter: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E131A; --surface: #161C25; --surface-2: #1E2733;
    --ink: #ECEFF3; --ink-2: #C9D2DD; --ink-3: #8EA3BE;
    --rule: #26303C; --rule-strong: #ECEFF3;
    --accent: #6D9CFF; --accent-hover: #A8C4FF; --accent-ink: #0E131A; --accent-soft: #1A2742;
    --navy: #080B10; --navy-2: #131A24;
    --green-soft: #12291F; --purple-soft: #23193A; --orange-soft: #33230F;
    --mark: #3A3010;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E131A; --surface: #161C25; --surface-2: #1E2733;
  --ink: #ECEFF3; --ink-2: #C9D2DD; --ink-3: #8EA3BE;
  --rule: #26303C; --rule-strong: #ECEFF3;
  --accent: #6D9CFF; --accent-hover: #A8C4FF; --accent-ink: #0E131A; --accent-soft: #1A2742;
  --navy: #080B10; --navy-2: #131A24;
  --green-soft: #12291F; --purple-soft: #23193A; --orange-soft: #33230F;
  --mark: #3A3010;
  color-scheme: dark;
}

@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.62;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
@media (min-width: 720px) { body { font-size: 1.0625rem; } }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 700; letter-spacing: -0.025em; }
.eyebrow { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Masthead ---------- */
.masthead { background: var(--surface); border-bottom: 1px solid var(--rule); position: relative; z-index: 20; }
.masthead-row {
  max-width: 1440px; margin: 0 auto; padding: 0.8rem var(--gutter);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.brand {
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none; line-height: 1.2; margin-right: 0.5rem;
}
.brand:hover { color: var(--accent); }
.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0; padding: 0; }
.site-nav a {
  color: var(--ink-2); text-decoration: none; font-size: 0.86rem; font-weight: 500; padding: 0.3rem 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }
.site-search { position: relative; flex: 0 1 200px; }
.search-input {
  width: 100%; font: inherit; font-size: 0.88rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 0.5rem 2.1rem 0.5rem 0.75rem; appearance: none;
}
.search-input::placeholder { color: var(--ink-3); opacity: 1; }
.search-input:focus-visible { border-color: var(--accent); outline-offset: 0; }
.search-kbd {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  font: 600 0.72rem/1 var(--font-body); color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.18rem 0.38rem; pointer-events: none;
}
.no-js .site-search { display: none; }
.masthead-cta {
  display: inline-block; background: var(--ink); color: var(--bg); text-decoration: none;
  font-weight: 600; font-size: 0.88rem; padding: 0.55rem 1rem; border-radius: var(--radius-sm); white-space: nowrap;
}
.masthead-cta:hover { background: var(--accent); color: var(--accent-ink); }
.nav-toggle { display: none; }

@media (max-width: 1199px) {
  .site-nav { order: 10; flex: 1 1 100%; }
  .site-nav ul { gap: 0.2rem 1rem; padding-bottom: 0.2rem; }
  .site-nav a { font-size: 0.86rem; }
}
@media (max-width: 719px) {
  .js .nav-toggle {
    display: inline-block; margin-left: auto; font: 600 0.9rem var(--font-body); color: var(--ink);
    background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-sm);
    padding: 0.45rem 0.8rem; cursor: pointer;
  }
  .masthead-cta { display: none; }
  .site-search { order: 11; flex: 1 1 100%; }
  .search-kbd { display: none; }
  .js .site-nav { display: none; }
  .js .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-top: 1px solid var(--rule); }
  .site-nav a { display: block; padding: 0.7rem 0; border-bottom: 0; }
}

/* ---------- Search panel ---------- */
.search-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  width: min(600px, calc(100vw - 2 * var(--gutter)));
  max-height: min(70vh, 640px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.35rem;
}
.search-panel[hidden] { display: none; }
.search-result { display: block; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.search-result:hover, .search-result[aria-selected="true"] { background: var(--surface-2); }
.search-result .sr-kicker { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.search-result .sr-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--ink); letter-spacing: -0.015em; }
.search-result .sr-snippet { display: block; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); margin-top: 0.15rem; }
.search-result mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
.search-empty, .search-foot { padding: 0.6rem 0.75rem; font-size: 0.88rem; color: var(--ink-2); margin: 0; }

/* ---------- Page header ---------- */
.page-header { margin: 0 0 1.75rem; }
.kicker { margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { color: var(--accent); }
.page-header h1, .home-header h1 {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem); line-height: 1.04; margin: 0; font-weight: 800; letter-spacing: -0.035em;
}
.subtitle {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.4; font-weight: 500;
  color: var(--ink-2); margin: 0.8rem 0 0; max-width: 52ch; letter-spacing: -0.01em;
}
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 1rem; font-size: 0.86rem; color: var(--ink-3); }
.lede {
  font-size: 1.18rem; line-height: 1.55; font-weight: 500; color: var(--ink);
  margin: 0 0 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule); max-width: var(--measure);
}
@media (min-width: 720px) { .lede { font-size: 1.25rem; } }

/* ---------- Article layout ---------- */
.article-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem;
  max-width: 1440px; margin: 0 auto; padding: 2.25rem var(--gutter) 3rem;
}
.outline-col { display: none; }
.article { min-width: 0; max-width: var(--measure); }
@media (min-width: 960px) {
  .article-grid { grid-template-columns: minmax(0, var(--measure)) 260px; column-gap: 3.5rem; padding-top: 3rem; }
  .article { grid-column: 1; }
  .rail { grid-column: 2; }
}
@media (min-width: 1200px) {
  .article-grid { grid-template-columns: 200px minmax(0, var(--measure)) 260px; column-gap: 3.5rem; }
  .outline-col { display: block; grid-column: 1; }
  .article { grid-column: 2; }
  .rail { grid-column: 3; }
}
.outline { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; padding-top: 0.4rem; }
.outline-heading { margin: 0 0 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.outline ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.outline a {
  display: block; padding: 0.3rem 0 0.3rem 0.85rem; margin-left: -1px; border-left: 2px solid transparent;
  font-size: 0.85rem; line-height: 1.35; color: var(--ink-2); text-decoration: none;
}
.outline a:hover { color: var(--ink); }
.outline a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* ---------- Prose ---------- */
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.7rem); line-height: 1.2; margin: 2.3em 0 0.7em; scroll-margin-top: 1.25rem; }
.prose h3 { font-size: 1.2rem; margin: 1.8em 0 0.5em; scroll-margin-top: 1.25rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 0.35em 0; padding-left: 0.2em; }
.prose li::marker { color: var(--ink-3); }
.prose strong { font-weight: 650; color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6em 0 1.6em; }
.prose blockquote { margin: 1.5em 0; padding-left: 1.1em; border-left: 3px solid var(--accent); color: var(--ink-2); }
.prose code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.88em; background: var(--surface-2); padding: 0.1em 0.3em; border-radius: 4px; }
.prose pre { overflow-x: auto; background: var(--surface-2); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.88rem; }
.prose pre code { background: none; padding: 0; }
.prose img { max-width: 100%; height: auto; }

.table-wrap { margin: 1.4em 0 1.8em; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.92rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.table-wrap th, .table-wrap td { padding: 0.6rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.table-wrap thead th { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); background: var(--bg); white-space: nowrap; }
.table-wrap tbody th { font-weight: 600; }
.table-wrap tbody tr:last-child > * { border-bottom: 0; }
.maturity-line { display: none; }

/* ---------- Related rail ---------- */
.rail { min-width: 0; font-size: 0.92rem; line-height: 1.45; }
@media (max-width: 959px) { .rail { border-top: 1px solid var(--rule); padding-top: 1.25rem; max-width: var(--measure); } }
@media (min-width: 960px) { .rail { padding-top: 0.4rem; } }
.rail-block { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; }
.rail-block + .rail-block { margin-top: 1rem; }
.rail-heading { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.7rem; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail ul:not(.chips) li { padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }
.rail ul:not(.chips) li:last-child { border-bottom: 0; padding-bottom: 0; }
.rail ul:not(.chips) a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.rail ul:not(.chips) a:hover { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: inline-block; padding: 0.22rem 0.65rem; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 0.8rem; line-height: 1.4; color: var(--ink); text-decoration: none; background: var(--bg); font-weight: 500;
}
a.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip-plain { color: var(--ink-2); background: transparent; border-style: dashed; }
.rail-more { margin: 0.8rem 0 0; font-size: 0.86rem; }

.badge { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; padding: 0.32rem 0.5rem; border-radius: 4px; border: 1px solid var(--accent); white-space: nowrap; }
.badge-primary { background: var(--accent); color: var(--accent-ink); }
.badge-working { color: var(--accent); background: transparent; }
.badge-integrated, .badge-maturity { color: var(--ink-2); border-color: var(--ink-3); background: transparent; }
.meta-kind { font-weight: 500; }

/* ---------- Section band headers ---------- */
.band-header { background: var(--navy); color: var(--on-navy); }
.band-header .wrap { padding-top: 2.75rem; padding-bottom: 2.5rem; }
.band-header .eyebrow { color: var(--on-navy-3); display: block; margin-bottom: 0.7rem; }
.band-header h1 { color: var(--on-navy); font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: 1; margin: 0; font-weight: 800; letter-spacing: -0.04em; }
.band-header .subtitle { color: var(--on-navy-2); max-width: 60ch; font-weight: 500; }
.index-intro { max-width: 72ch; margin: 1.5rem 0 0; }
.index-intro p { font-size: 1rem; color: var(--ink-2); }

/* ---------- Index pages and cards ---------- */
.index-page, .home { max-width: 1440px; margin: 0 auto; padding: 2.25rem var(--gutter) 3rem; }
@media (min-width: 720px) { .index-page { padding-top: 3rem; } }
.index-page .page-header { max-width: 52rem; margin-bottom: 2rem; }
.band-header + .index-page { padding-top: 2rem; }
.card-grid, .card-row {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; position: relative; min-width: 0;
}
.card:hover { border-color: var(--accent); }
.card-title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-title a:hover { color: var(--accent); }
.card:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.card-title a:focus-visible { outline: none; }
.card-text { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--ink-2); }
.card-meta, .card-counts { margin: auto 0 0; padding-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; font-size: 0.78rem; color: var(--ink-3); }
.card-counts { margin-top: 0; padding-top: 0; }
.card-plain a { position: relative; z-index: 1; }
.card-meta-top { margin: 0; padding-top: 0; order: -1; }
.card-strip { display: block; height: 4px; border-radius: 999px; background: var(--tone, var(--accent)); margin: -0.25rem 0 0.5rem; order: -2; }
.tone-blue { --tone: var(--accent); } .tone-green { --tone: var(--green); } .tone-purple { --tone: var(--purple); } .tone-orange { --tone: var(--orange); } .tone-indigo { --tone: var(--indigo); }
.kind-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--kind, var(--accent)); margin-right: 0.45rem; vertical-align: -1px; }
.tech-card[data-kind="language"] { --kind: var(--accent); } .tech-card[data-kind="discipline"] { --kind: var(--purple); }
.tech-card[data-kind="platform"] { --kind: var(--green); } .tech-card[data-kind="framework"] { --kind: var(--indigo); }
.tech-card[data-kind="hardware"] { --kind: var(--orange); } .tech-card[data-kind="runtime"] { --kind: var(--green); }
.tech-card[data-kind="protocol"] { --kind: var(--indigo); } .tech-card[data-kind="datastore"] { --kind: var(--orange); }
.tech-card[data-kind="model"] { --kind: var(--purple); }
.tech-card .meta-kind { color: var(--ink-3); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.capability-card .ico, .idea-card .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); order: -1; margin-bottom: 0.2rem; }
.capability-card:nth-child(3n+2) .ico { background: var(--purple-soft); } .capability-card:nth-child(3n) .ico { background: var(--green-soft); }
.tool-count { margin-left: auto; font-weight: 600; color: var(--accent); }
.sys-grid-3 { margin-bottom: 1.25rem; }
@media (min-width: 960px) { .sys-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.system-card { background: var(--navy); border-color: var(--navy); }
.system-card .card-title a { color: var(--on-navy); }
.system-card .card-text { color: var(--on-navy-2); }
.system-card .card-meta { color: var(--on-navy-3); }
.system-card:hover { background: var(--navy-2); border-color: var(--navy-2); }

/* ---------- Home ---------- */
.home { padding: 0 0 2.5rem; max-width: none; }
.home-hero { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; }
.home-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 3rem; padding-bottom: 2.75rem; align-items: center; }
@media (min-width: 960px) { .home-hero .wrap { grid-template-columns: 6fr 5fr; gap: 3rem; padding-top: 4rem; padding-bottom: 3.5rem; } }
.home-hero .eyebrow { color: var(--on-navy-3); }
.home-hero h1 { color: var(--on-navy); font-size: clamp(3rem, 2rem + 4.5vw, 5.5rem); line-height: 0.95; margin: 0.9rem 0 1.1rem; font-weight: 800; letter-spacing: -0.04em; }
.home-hero .thesis { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 1rem; max-width: 34ch; color: var(--on-navy); }
.home-hero .hero-lede { margin: 0 0 1.5rem; font-size: 1.05rem; line-height: 1.55; color: var(--on-navy-2); max-width: 54ch; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 0.8rem 1.25rem; border-radius: var(--radius-sm); }
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: #3D7BFF; color: #FFFFFF; }
.btn-ghost { color: var(--on-navy); border: 1px solid #4A5563; }
.btn-ghost:hover { border-color: var(--on-navy); color: var(--on-navy); }
.hero-figure { margin: 0; position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.hero-globe { width: min(380px, 80vw); height: auto; display: block; filter: drop-shadow(0 0 60px rgba(46, 108, 246, 0.35)); }
.hero-label { position: absolute; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--on-navy-3); }
.hero-label.tl { left: 0; top: 0.5rem; } .hero-label.tr { right: 0; top: 0.5rem; text-align: right; }
.hero-label.bl { left: 0; bottom: 0.5rem; } .hero-label.br { right: 0; bottom: 0.5rem; text-align: right; }
@media (max-width: 959px) { .hero-figure { min-height: 0; } .hero-label { display: none; } .hero-globe { width: min(260px, 70vw); } }

.home-section { padding-top: 2.25rem; }
.home-section:last-child { padding-bottom: 1rem; }
.home-section .wrap > .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); letter-spacing: -0.03em; }
.section-head .more { font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.section-head .more:hover { text-decoration: underline; }
.section-lede { margin: 0 0 1.1rem; max-width: 72ch; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.way-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.way { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); min-width: 0; }
.way:hover { border-color: var(--accent); }
.way a { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.3rem 1.4rem 1.25rem; text-decoration: none; color: var(--ink); height: 100%; }
.way strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.way p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.way-more { margin-top: auto; padding-top: 0.6rem; font-weight: 600; font-size: 0.9rem; color: var(--accent); }
.hero-copy { min-width: 0; }
.diagram-figure-wide, .diagram-figure-wide .diagram-frame, .diagram-figure-wide figcaption { max-width: none; }
.diagram-figure-wide { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem 0.9rem; margin: 0 0 1.75rem; overflow-x: auto; }
.diagram-figure-wide svg { min-width: 760px; }

.stat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 960px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.15rem 1rem; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 0.6rem; }
.stat .tile { width: 36px; height: 36px; border-radius: 9px; }
.stat .tile svg { width: 19px; height: 19px; }
.stat:hover { border-color: var(--accent); }
.stat .big { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.4rem + 0.8vw, 2.1rem); letter-spacing: -0.04em; line-height: 1; color: var(--stat-color, var(--accent)); }
.stat .label { display: block; margin: 0.45rem 0 0; font-size: 0.84rem; line-height: 1.4; color: var(--ink-2); }
.stat a { text-decoration: none; color: inherit; }
.stat a::after { content: ""; position: absolute; inset: 0; }
.stat > svg { display: block; width: 100%; height: 34px; margin-top: auto; padding-top: 0.5rem; }
.stat-blue { --stat-color: var(--accent); } .stat-green { --stat-color: var(--green); } .stat-purple { --stat-color: var(--purple); }
.stat-orange { --stat-color: var(--orange); } .stat-indigo { --stat-color: var(--indigo); }

.unified { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.5rem; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .unified { grid-template-columns: 4fr 8fr; gap: 2.5rem; align-items: center; } }
.unified h2 { margin: 0.5rem 0 0.6rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; }
.unified p { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.bands { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
@media (min-width: 720px) { .bands { grid-template-columns: 170px minmax(0, 1fr); align-items: center; row-gap: 0.75rem; } }
.band { font-size: 0.92rem; padding: 0.7rem 1.1rem; }
.band { display: flex; gap: 0.55rem; flex-wrap: wrap; border-radius: 999px; padding: 0.55rem 1rem; font-size: 0.84rem; font-weight: 500; color: var(--ink); }
.band a { color: inherit; text-decoration: none; }
.band a:hover { text-decoration: underline; }
.band-blue { background: var(--accent-soft); } .band-purple { background: var(--purple-soft); } .band-green { background: var(--green-soft); } .band-orange { background: var(--orange-soft); }

.side-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 960px) { .side-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 1.5rem; align-items: start; } }
.side-grid .side p { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.sys-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
@media (min-width: 1200px) { .sys-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sys-card { background: var(--navy); border-radius: var(--radius); padding: 1.1rem 1.15rem 1.05rem; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 0.35rem; }
.sys-card .tile { width: 36px; height: 36px; border-radius: 9px; margin-bottom: 0.35rem; }
.sys-card .tile svg { width: 19px; height: 19px; }
.way .tile { margin-bottom: 0.4rem; }
.sys-card:hover { background: var(--navy-2); }
.sys-card a { color: var(--on-navy); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; }
.sys-card a::after { content: ""; position: absolute; inset: 0; }
.sys-card p { margin: 0; color: var(--on-navy-2); font-size: 0.84rem; line-height: 1.45; }
.cap-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 960px) { .cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cap { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.95rem 1rem; display: flex; gap: 0.75rem; align-items: flex-start; position: relative; min-width: 0; }
.cap:hover { border-color: var(--accent); }
.cap .ico { width: 28px; height: 28px; border-radius: 8px; flex: none; background: var(--accent-soft); }
.cap:nth-child(3n+2) .ico { background: var(--purple-soft); } .cap:nth-child(3n) .ico { background: var(--green-soft); }
.cap a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.95rem; display: block; line-height: 1.3; letter-spacing: -0.015em; }
.cap a::after { content: ""; position: absolute; inset: 0; }
.cap p { margin: 0.2rem 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--ink-2); }
.story-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.story-tile { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.75rem; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0.9rem; align-items: center; position: relative; min-width: 0; }
.story-tile:hover { border-color: var(--accent); }
.story-tile .thumb { height: 92px; border-radius: 8px; background: radial-gradient(circle at 30% 30%, var(--thumb, #2E6CF6) 0, var(--navy) 72%); }
.thumb-blue { --thumb: #2E6CF6; } .thumb-purple { --thumb: #7A3FE4; } .thumb-green { --thumb: #0F8A5F; } .thumb-orange { --thumb: #E07B1A; } .thumb-indigo { --thumb: #3A4FD8; }
.story-tile a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.98rem; line-height: 1.25; display: block; letter-spacing: -0.015em; }
.story-tile a::after { content: ""; position: absolute; inset: 0; }
.story-tile .eyebrow { display: block; margin-bottom: 0.3rem; }
.story-tile p { margin: 0.25rem 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--ink-2); }
.home-figures { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 960px) { .home-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: start; } }
.home-figures .diagram-figure { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1rem 0.9rem; }
.home-figures .diagram-frame { max-width: none; }
.home-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 960px) { .home-work { grid-template-columns: 200px minmax(0, 1fr); gap: 1.5rem; } }
.home-work p { margin: 0; max-width: 72ch; }
.home-prose > p, .home-prose > h2 { max-width: var(--measure); }
.link-row { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; color: var(--ink-3); font-size: 0.95rem; }
.link-row a { font-weight: 500; }

/* ---------- Technologies index ---------- */
.tech-filters { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem 0.6rem; margin-bottom: 1.5rem; }
.no-js .tech-filters { display: none; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.75rem; }
.filter-label, .filter-search label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); min-width: 3.5rem; }
.filter-search input, .filter-search select { font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 0.45rem 0.65rem; margin-right: 0.75rem; }
.filter-search input { flex: 1 1 14rem; min-width: 0; }
.filter-search select { flex: 0 1 auto; max-width: 100%; }
.filter-chip { font: 500 0.82rem/1.3 var(--font-body); color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; }
.filter-chip:hover { border-color: var(--ink-3); }
.filter-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filter-status { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--ink-3); }
.tech-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.tech-card { padding: 0.95rem 1rem; }
.tech-card .card-title { font-size: 1.04rem; }
.tech-card .card-meta { margin-top: 0.15rem; padding-top: 0; }
.tech-card[hidden] { display: none; }
.tech-empty { color: var(--ink-2); }
.depth-legend { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--on-navy-2); margin-top: 3rem; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem 2rem; padding-top: 1.5rem; padding-bottom: 1.75rem; }
.site-footer .foot-brand { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.site-footer .foot-brand strong { font-family: var(--font-display); color: var(--on-navy); font-size: 1rem; letter-spacing: -0.02em; }
.site-footer .foot-brand span { font-size: 0.82rem; }
.site-footer .foot-brand .eyebrow { color: var(--on-navy-3); }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; }
.site-footer nav a { color: var(--on-navy-2); text-decoration: none; font-size: 0.82rem; }
.site-footer nav a:hover { color: var(--on-navy); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { .masthead, .rail, .outline-col, .site-footer { display: none; } body { background: #fff; color: #000; } }

.prose .card-row { padding-left: 0; }
.prose .card-row > li { margin: 0; padding-left: 1.2rem; }
.prose .card-title, .prose .card-text { margin: 0; }

/* Result charts (/assets/charts/*.svg) */
:root { --chart-ink: var(--ink); --chart-ink-2: var(--ink-3); --chart-rule: var(--rule); --chart-track: var(--surface-2); --chart-ours: var(--accent); --chart-ours-2: #7A3FE4; --chart-stock: #9AA3AE; --chart-on-bar: var(--accent-ink); }
.c-text { fill: var(--chart-ink); } .c-muted { fill: var(--chart-ink-2); } .c-axis { stroke: var(--chart-rule); fill: none; } .c-zero { stroke: var(--chart-ink-2); fill: none; }
.c-track { fill: var(--chart-track); } .c-ours { fill: var(--chart-ours); } .c-ours2 { fill: var(--chart-ours-2); } .c-stock { fill: var(--chart-stock); } .c-onbar { fill: var(--chart-on-bar); }
figure.chart { margin: 1.5rem 0; max-width: 520px; }
figure.chart img, figure.chart svg { display: block; width: 100%; height: auto; }

/* Architecture diagrams (/assets/diagrams/*.svg), inlined by the build */
.diagram-figure { margin: 0 0 2.25rem; }
.diagram-frame { max-width: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem; }
.diagram-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.diagram-figure figcaption { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-3); }
.diagram-figure-index { margin: 0 0 2.5rem; }
.figure-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: 1.25rem 0 0.5rem; }
@media (min-width: 960px) { .figure-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; align-items: start; } }
.diagram text { font-family: var(--font-body); }
.dg-node { fill: var(--surface); stroke: var(--ink); }
.dg-key { fill: var(--accent-soft); stroke: var(--accent); }
.dg-ext { fill: var(--bg); stroke: var(--rule); }
.dg-node { stroke: var(--rule); }
.dg-group { fill: var(--bg); stroke: var(--rule); }
.dg-group { stroke: var(--rule); }
.dg-t { fill: var(--ink); }
.dg-s, .dg-gl, .dg-el { fill: var(--ink-2); }
.dg-edge { stroke: var(--ink-3); }
.dg-edge-acc { stroke: var(--accent); }
.dg-arrow { fill: var(--ink-3); }
.dg-arrow-acc { fill: var(--accent); }
.dg-elbg { fill: var(--bg); }
.dg-dot { fill: var(--accent); }
.dg-dot-open { stroke: var(--accent); fill: none; }
.dg-grid { stroke: var(--rule); }
.dg-grid-strong { stroke: var(--ink-3); }
.dg-panel { fill: var(--surface); stroke: var(--rule); }
.dg-panel-key { fill: var(--accent-soft); stroke: var(--accent); }
.dg-numbg { fill: var(--accent); }
.dg-num { fill: var(--accent-ink); }

/* Raster figures */
.image-figure { margin: 1.75rem 0 2.25rem; }
.image-figure a { display: block; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: #fff; }
.image-figure a:hover { border-color: var(--accent); }
.image-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.image-figure figcaption { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-3); }
.image-figure .figure-hint { display: block; font-size: 0.8rem; }


/* ---------- Icon tiles ---------- */
.tile, .thumb-tile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; flex: none; color: var(--tone-ink, var(--accent)); background: var(--tone-soft, var(--accent-soft)); }
.thumb-tile { order: -2; margin-bottom: 0.35rem; }
.thumb-tile.on-dark { background: rgba(255, 255, 255, 0.08); color: var(--on-navy); }
.tone-blue { --tone-ink: var(--accent); --tone-soft: var(--accent-soft); --tone: var(--accent); }
.tone-green { --tone-ink: var(--green); --tone-soft: var(--green-soft); --tone: var(--green); }
.tone-purple { --tone-ink: var(--purple); --tone-soft: var(--purple-soft); --tone: var(--purple); }
.tone-orange { --tone-ink: var(--orange); --tone-soft: var(--orange-soft); --tone: var(--orange); }
.tone-indigo { --tone-ink: var(--indigo); --tone-soft: var(--accent-soft); --tone: var(--indigo); }
.ic { display: block; }
.group-head { display: flex; gap: 0.9rem; align-items: center; margin: 2.25rem 0 1rem; }
.group-head:first-of-type { margin-top: 1rem; }
.group-head h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.03em; }
.group-head h2 a { color: var(--ink); text-decoration: none; }
.group-head h2 a:hover { color: var(--accent); }
.group-head p { margin: 0.1rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.jump-row { margin: 0 0 0.5rem; }
.story-group + .story-group { margin-top: 0.5rem; }
.kind-legend { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.86rem; color: var(--ink-2); }
.kind-legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.kind-legend .tile { width: 30px; height: 30px; border-radius: 8px; }
.kind-legend .tile svg { width: 16px; height: 16px; }
.sys-card .thumb-tile { margin-bottom: 0.1rem; }
.sys-card { gap: 0.3rem; }

/* ---------- Carousel ---------- */
.carousel { position: relative; margin: 1.5rem 0 2.5rem; }
.car-track { list-style: none; margin: 0; padding: 0.25rem 0 0.75rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.car-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 min(78%, 520px); scroll-snap-align: start; }
.slide a { display: flex; flex-direction: column; gap: 0.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.75rem; text-decoration: none; color: var(--ink); height: 100%; }
.slide a:hover { border-color: var(--accent); }
.slide img { width: 100%; height: auto; border-radius: 8px; display: block; }
.slide strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; padding: 0 0.25rem 0.25rem; }
.slide .eyebrow { padding: 0.25rem 0.25rem 0; }
.car-btn { position: absolute; top: 40%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.car-btn.prev { left: -14px; } .car-btn.next { right: -14px; }
.car-btn.prev svg { transform: rotate(180deg); }
.car-btn:hover { border-color: var(--accent); color: var(--accent); }
.no-js .car-btn { display: none; }
.research-index .lede { max-width: 72ch; border-bottom: 0; margin-bottom: 0.5rem; padding-bottom: 0; }
.research-index .article-grid { padding-top: 0; padding-left: 0; padding-right: 0; }

.slide-art { display: flex; align-items: center; justify-content: center; height: 180px; border-radius: 8px; background: var(--tone-soft); color: var(--tone-ink); }
.slide-art svg { width: 56px; height: 56px; }

.tile-inline { width: 32px; height: 32px; border-radius: 8px; margin-right: 0.35rem; }
.tile-inline svg { width: 18px; height: 18px; }
.page-meta .meta-kind { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.chips-inline { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; margin-left: 0.5rem; }
.chip-tile { display: inline-flex; align-items: center; gap: 0.35rem; }
.chip-tile svg { width: 14px; height: 14px; }


/* ---------- Designed page components (approved baselines, OD-61) ---------- */
.page-hero { background: var(--navy); color: var(--on-navy); }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 3rem; padding-bottom: 2.75rem; align-items: center; }
@media (min-width: 960px) { .page-hero.has-visual .wrap { grid-template-columns: 7fr 5fr; gap: 3rem; } }
.page-hero .eyebrow { color: var(--on-navy-3); display: block; margin-bottom: 0.8rem; }
.page-hero .eyebrow a { color: inherit; text-decoration: none; }
.page-hero h1 { color: var(--on-navy); font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem); line-height: 0.98; margin: 0 0 0.9rem; font-weight: 800; letter-spacing: -0.04em; }
.page-hero .thesis { margin: 0 0 1rem; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem); line-height: 1.4; color: var(--on-navy-2); max-width: 36ch; font-weight: 500; }
.hero-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip-dark { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: var(--on-navy); }
.hero-visual { margin: 0; border-radius: 16px; background: linear-gradient(180deg, #16202E 0, #0E131A 100%); border: 1px solid #26303C; padding: 1.4rem 1.4rem 1.1rem; display: flex; flex-direction: column; gap: 0.9rem; color: var(--on-navy); }
.hero-visual .eyebrow { color: var(--on-navy-3); margin: 0; }
.hero-visual .lbl { color: var(--on-navy-2); }
.article-grid.designed { padding-top: 2.5rem; }
.dv-stats { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.dv-stat { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; }
.dv-stat b { display: block; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: 1.9rem; line-height: 1; color: var(--tone, var(--accent)); }
.dv-stat span { display: block; font-size: 0.8rem; color: var(--ink-2); line-height: 1.4; margin-top: 0.4rem; }
.dv-figure { margin: 0.5rem 0 2.25rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.35rem 1.5rem 1.2rem; }
.dv-figure figcaption, .dv-figure .lbl { font-size: 0.8rem; color: var(--ink-2); line-height: 1.5; }
.dv-figure figcaption { margin-top: 0.8rem; }
.dv-figure .eyebrow { display: block; }
.dv-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 720px) { .dv-two { grid-template-columns: 1fr 1fr; } .dv-two > * + * { border-left: 1px solid var(--rule); padding-left: 1.5rem; } }
.dv-bars { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 4.5rem; gap: 0.5rem 0.8rem; align-items: center; margin-top: 0.8rem; font-size: 0.82rem; }
.dv-bars .bar { display: block; height: 14px; border-radius: 7px; background: var(--rule); }
.dv-bars .bar.on { background: var(--tone, var(--accent)); }
.dv-bars .bar.mid { background: color-mix(in srgb, var(--tone, var(--accent)) 45%, #fff); }
.dv-bars .v { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: 1.05rem; text-align: right; }
.dv-bars .v.on { color: var(--tone, var(--accent)); }
.dv-quote { margin: 0.5rem 0 2.25rem; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: var(--navy); color: var(--on-navy); border-left: 6px solid var(--tone, var(--accent)); }
.dv-quote p { margin: 0; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.dv-quote small { display: block; margin-top: 0.6rem; font-size: 0.86rem; color: var(--on-navy-2); }
.dv-steps { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.dv-step { flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); display: flex; align-items: center; padding: 0 0.9rem; font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
.dv-step.on { background: var(--accent-soft); border-color: var(--tone, var(--accent)); color: var(--ink); }
.dv-check { width: 28px; height: 28px; border-radius: 50%; background: var(--tone, var(--accent)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex: none; }
.dv-legend { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.dv-legend div { display: flex; align-items: center; gap: 0.6rem; }
.dv-legend i { display: inline-block; height: 18px; border-radius: 5px; flex: none; }
.dv-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.dv-tile { border-radius: 10px; background: var(--bg); border: 1px solid var(--rule); padding: 0.85rem 0.9rem; }
.dv-tile.on { background: var(--accent-soft); border-color: var(--tone, var(--accent)); }
.dv-tile.dim { opacity: 0.75; }
.dv-tile strong { display: block; font-size: 0.9rem; margin: 0.35rem 0 0.2rem; }
.dv-tile .lbl { font-size: 0.78rem; }
.dv-pages { display: flex; flex-wrap: wrap; gap: 4px; }
.dv-page { width: 14px; height: 20px; border-radius: 3px; background: #DCE4F3; display: inline-block; }
.dv-page.hot { background: #fff; } .dv-page.warm { background: #BFD2FF; } .dv-page.dim { background: rgba(255,255,255,.3); }
.dv-seat { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.dv-seat.human { background: #fff; color: var(--navy); border: 2px solid var(--rule); }
.dv-seat.model { background: var(--accent-soft); color: var(--indigo); border: 2px solid var(--indigo); }
/* architecture compositions */
.arch { margin: 0.5rem 0 2.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.arch-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.arch-head h2 { margin: 0.3rem 0 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
.arch-metrics { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.arch-metric { border-radius: 10px; background: var(--surface); border: 1px solid var(--rule); padding: 0.6rem 0.9rem; min-width: 0; }
.arch-metric b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: 1.3rem; color: var(--tone, var(--accent)); display: block; }
.arch-metric span { font-size: 0.72rem; color: var(--ink-2); }
.arch-planes { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .arch-planes { grid-template-columns: var(--arch-cols, 1fr 1.3fr 1.3fr 1fr); } }
.plane { border-radius: 14px; border: 1px solid var(--rule); background: var(--surface); padding: 1.1rem 1.2rem 1rem; position: relative; min-width: 0; }
.plane.soft { background: var(--bg); }
.plane.key { background: var(--accent-soft); border-color: var(--tone, var(--accent)); }
.plane.key > .eyebrow { color: var(--tone, var(--accent)); }
.plane.dark { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.plane.dark > .eyebrow { color: var(--on-navy-3); }
.plane .n { position: absolute; top: -11px; left: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--tone, var(--accent)); color: #fff; font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); }
.plane.dark .n { background: #fff; color: var(--navy); }
.plane .eyebrow { display: block; }
.plane p { margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-2); }
.objs { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.85rem; }
.objs.cols2 { display: grid; grid-template-columns: 1fr 1fr; }
.objs.cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.obj { border-radius: 10px; background: var(--surface); border: 1px solid var(--rule); padding: 0.7rem 0.85rem; position: relative; min-width: 0; }
.obj strong { display: block; font-size: 0.86rem; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.obj .d { display: block; font-size: 0.74rem; color: var(--ink-2); line-height: 1.4; margin-top: 0.15rem; }
.obj.key { background: var(--tone, var(--accent)); border-color: var(--tone, var(--accent)); color: #fff; }
.obj.key .d { color: #D6E2FF; }
.plane.dark .obj { background: var(--navy-2); border-color: #26303C; color: var(--on-navy); }
.plane.dark .obj .d { color: var(--on-navy-2); }
.lanes { display: grid; gap: 5px; margin-top: 0.6rem; }
.lane { height: 10px; border-radius: 5px; background: #DCE4F3; position: relative; overflow: hidden; }
.lane i { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--tone, var(--accent)); }
.lane i.warm { background: color-mix(in srgb, var(--tone, var(--accent)) 45%, #fff); }
.pills { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.6rem; }
.pill { display: inline-block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink-2); }
.pill.on { background: var(--accent-soft); border-color: var(--tone, var(--accent)); color: var(--tone, var(--accent)); }
.gpu { border-radius: 12px; background: var(--navy-2); color: var(--on-navy); padding: 0.85rem 1rem; }
.gpu .eyebrow { color: var(--on-navy-3); }
.gpu span { font-size: 0.74rem; color: var(--on-navy-2); }
.die { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin: 0.6rem 0 0.5rem; }
.die b { height: 12px; border-radius: 2px; background: #2E6CF6; display: block; }
.die b.off { background: #26303C; }
.cyl { width: 48px; height: 40px; border-radius: 24px / 8px; background: var(--accent-soft); border: 1.5px solid var(--tone, var(--accent)); position: relative; flex: none; }
.cyl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; border-radius: 24px / 7px; border: 1.5px solid var(--tone, var(--accent)); background: var(--surface); box-sizing: border-box; }
.arch-foot { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.arch-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.arch-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 0.4rem; }
.wide-figure { background: var(--bg); border-bottom: 1px solid var(--rule); }
.wide-figure .wrap { padding-top: 2.25rem; padding-bottom: 0.5rem; }
.wide-figure .arch { margin-bottom: 1.5rem; }
@media (min-width: 1200px) { .arch-planes { --arch-cols: 230px 1fr 1fr 230px; } }
.gpu span, .dv-tile .lbl, .obj .d { display: block; line-height: 1.4; }
.dv-grid.two { grid-template-columns: 1fr 1fr; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: end; }
@media (min-width: 560px) { .hero-split { grid-template-columns: 1fr auto; } }
.hero-split > div:last-child { text-align: right; }
.hero-visual .gpu .die { grid-template-columns: repeat(12, 1fr); }

/* lane feedback round one */
.prose .dv-quote, .prose .dv-quote p { color: var(--on-navy); }
.prose .dv-quote { padding: 1.4rem 1.6rem; border-left: 6px solid var(--tone, var(--accent)); margin: 0.5rem 0 2.25rem; }
.dv-steps { flex-wrap: wrap; }
@media (max-width: 480px) { .dv-grid.two { grid-template-columns: 1fr; } }
.dv-tile.on, .pill.on, .plane.key { background: var(--tone-soft, var(--accent-soft)); }
.pill.on { color: var(--tone, var(--accent)); }
.bar.mid, .lane i.warm, .dv-page.warm { background: color-mix(in srgb, var(--tone, var(--accent)) 45%, #fff); }
.die b { background: var(--tone, var(--accent)); }
.dv-stat b, .arch-metric b { color: var(--tone, var(--accent)); }
/* range bar: <div class="dv-range"><i style="left: 20%; width: 35%"></i><b style="left: 60%"></b></div> */
.dv-range { position: relative; height: 14px; border-radius: 7px; background: var(--rule); margin-top: 0.6rem; }
.dv-range i { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: var(--tone, var(--accent)); }
.dv-range b { position: absolute; top: -4px; width: 2px; height: 22px; background: var(--ink); }
/* meter with a threshold: <div class="dv-meter" style="--v: 72%; --t: 60%"><span class="lbl">label</span></div> */
.dv-meter { position: relative; height: 18px; border-radius: 9px; background: var(--rule); overflow: visible; }
.dv-meter::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); border-radius: 9px; background: var(--tone, var(--accent)); }
.dv-meter::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: var(--t, 50%); width: 2px; background: var(--ink); }
/* ledger rows: <ul class="dv-ledger"><li><span>…</span><span class="pill on">…</span></li></ul> */
.dv-ledger { list-style: none; margin: 0.6rem 0 0; padding: 0; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.dv-ledger li { display: flex; justify-content: space-between; gap: 0.8rem; align-items: center; padding: 0.55rem 0.85rem; font-size: 0.84rem; border-top: 1px solid var(--rule); background: var(--surface); }
.dv-ledger li:first-child { border-top: 0; }
.dv-ledger li.gone { text-decoration: line-through; color: var(--ink-3); }
/* ring of slots: <div class="dv-ring"><i style="--i: 0"></i> … n=12 */
.dv-ring { position: relative; width: 160px; height: 160px; margin: 0.6rem auto; border-radius: 50%; border: 1px dashed var(--rule); }
.dv-ring i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 3px; background: var(--rule); transform: rotate(calc(var(--i) * 30deg)) translate(72px) rotate(calc(var(--i) * -30deg)); }
.dv-ring i.on { background: var(--tone, var(--accent)); }
.prose ul.dv-ledger { padding: 0; margin: 0.6rem 0 0; }
.prose .dv-ledger li { padding: 0.55rem 0.85rem; margin: 0; }
.prose .dv-ledger li::before { display: none; }
.dv-ledger .pill { white-space: nowrap; }
.dv-stat b { font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem); white-space: nowrap; }

/* technologies index: breadth chart */
.breadth { margin: 1.5rem 0 2rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.4rem 1.6rem 1.2rem; }
.breadth-head h2 { margin: 0.25rem 0 1.1rem; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); }
.breadth-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.breadth-row { display: grid; grid-template-columns: 34px 11.5rem minmax(0, 1fr) 3rem; gap: 0.75rem; align-items: center; }
.breadth-row .tile-sm { width: 34px; height: 34px; border-radius: 9px; }
.breadth-name { font-weight: 600; font-size: 0.92rem; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadth-name:hover { color: var(--tone, var(--accent)); }
.breadth-bar { display: flex; gap: 2px; height: 26px; min-width: 0; }
.breadth-bar i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.72rem; font-weight: 700; color: #fff; border-radius: 4px; min-width: 6px; font-family: var(--font-display); }
.breadth-bar i:first-child { border-radius: 7px 4px 4px 7px; } .breadth-bar i:last-child { border-radius: 4px 7px 7px 4px; }
.breadth-total { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: 1.1rem; color: var(--tone, var(--accent)); text-align: right; }
.breadth-legend { list-style: none; margin: 1.1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.82rem; color: var(--ink-2); }
.breadth-legend li { display: flex; align-items: center; gap: 0.45rem; }
.breadth-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.breadth-legend b { font-family: var(--font-display); color: var(--ink); }
.breadth figcaption { margin-top: 0.8rem; font-size: 0.8rem; color: var(--ink-3); }
@media (max-width: 720px) { .breadth-row { grid-template-columns: 28px minmax(0, 1fr) 2.4rem; grid-template-areas: "t n s" "b b b"; row-gap: 0.3rem; } .breadth-row .tile-sm { grid-area: t; width: 28px; height: 28px; } .breadth-name { grid-area: n; } .breadth-total { grid-area: s; } .breadth-bar { grid-area: b; height: 20px; } }
.dv-step.on { background: var(--tone-soft, var(--accent-soft)); }
.dv-figure .dv-page { background: #DCE4F3; } .dv-figure .dv-page.hot { background: var(--tone, var(--accent)); } .dv-figure .dv-page.warm { background: color-mix(in srgb, var(--tone, var(--accent)) 45%, #fff); } .dv-figure .dv-page.dim { background: var(--rule); }
.dv-ledger .pill { max-width: 46%; overflow: hidden; text-overflow: ellipsis; }

/* flip card (technologies chart / repository) */
.flip { perspective: 1800px; }
.flip-inner { position: relative; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transform-style: preserve-3d; }
.flip.is-back .flip-inner { transform: rotateY(180deg); }
.flip-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-face.back { position: absolute; inset: 0; transform: rotateY(180deg); overflow: hidden; }
.flip.is-back .flip-face.front { visibility: hidden; } .flip:not(.is-back) .flip-face.back { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }
.flip-btn { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 0.45rem 0.9rem; font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; flex: none; }
.flip-btn:hover { border-color: var(--accent); color: var(--accent); }
.flip-btn .ic { width: 16px; height: 16px; }
.breadth-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.repo-stats { margin: 0.4rem 0 1.1rem; }
.repo-langs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.repo-langs li { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 4.5rem 5.5rem; gap: 0.6rem; align-items: center; font-size: 0.84rem; }
.repo-bar { height: 14px; border-radius: 7px; background: var(--bg); overflow: hidden; } .repo-bar i { display: block; height: 100%; border-radius: 7px; }
.repo-langs b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; text-align: right; }
.repo-langs small { color: var(--ink-2); font-size: 0.84rem; font-weight: 600; text-align: right; }
.repo-langs-head { color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .repo-langs-head b, .repo-langs-head small { font-size: inherit; font-weight: 600; color: inherit; }
.repo-types { list-style: none; margin: 1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: baseline; font-size: 0.82rem; color: var(--ink-2); }
.repo-types b { font-family: var(--font-display); font-weight: 800; color: var(--ink); margin-right: 0.35rem; }
@media (max-width: 720px) { .repo-langs li { grid-template-columns: 6.5rem minmax(0, 1fr) 3.6rem; } .repo-langs small { display: none; } .flip-face.back { overflow: auto; } }
.dv-ledger .pill { flex: none; max-width: none; } .dv-ledger li > span:first-child { min-width: 0; }
@media (max-width: 480px) { .dv-ledger li { flex-wrap: wrap; } }
.prose .obj strong, .prose .obj.key strong, .prose .dv-tile strong { color: inherit; }
.obj.key strong { color: #fff; }
.dv-ledger li.gone .pill { text-decoration: none; }

/* stories index: problem groups */
.story-index { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.5rem; }
.pg { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.pg summary { list-style: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; gap: 1rem; align-items: center; padding: 1rem 1.25rem; cursor: pointer; }
.pg summary::-webkit-details-marker { display: none; }
.pg summary:hover { background: var(--bg); }
.pg-title b { display: block; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: 1.2rem; color: var(--ink); }
.pg-title i { display: block; font-style: normal; font-size: 0.88rem; color: var(--ink-2); margin-top: 0.15rem; }
.pg-count { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--tone, var(--accent)); background: var(--tone-soft, var(--accent-soft)); border-radius: 999px; min-width: 2.6rem; padding: 0.25rem 0.7rem; text-align: center; }
.pg summary .ic { width: 20px; height: 20px; color: var(--ink-3); transition: transform 0.2s; }
.pg[open] summary .ic { transform: rotate(180deg); }
.pg[open] summary { border-bottom: 1px solid var(--rule); }
.pg-list { list-style: none; margin: 0; padding: 0.35rem 0; }
.pg-row a { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 0.4rem 1.5rem; padding: 0.7rem 1.25rem 0.7rem calc(1.25rem + 44px + 1rem); text-decoration: none; color: var(--ink); border-top: 1px solid var(--rule); }
.pg-row:first-child a { border-top: 0; }
.pg-row a:hover { background: var(--bg); }
.pg-row strong { font-weight: 700; font-size: 0.98rem; }
.pg-row span { font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; }
@media (max-width: 720px) { .pg summary { grid-template-columns: 36px minmax(0, 1fr) auto 16px; padding: 0.85rem 1rem; } .pg-row a { grid-template-columns: 1fr; padding-left: 1rem; } .pg-title b { font-size: 1.05rem; } }
.pg-cards { padding: 1.1rem 1.25rem 1.25rem; margin: 0; background: var(--bg); }

/* systems index: platform map */
.pm { margin: 1.5rem 0 2.25rem; }
.pm-plane { background: var(--surface); }
.pm-obj { display: flex; gap: 0.7rem; align-items: flex-start; text-decoration: none; color: var(--ink); }
.pm-obj:hover { border-color: var(--tone, var(--accent)); }
.pm-obj .tile-sm { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.pm-obj strong { color: var(--ink); }
.pm-across { padding: 1rem 1.2rem; }
.pm-across .objs { margin-top: 0.7rem; }
.pm-across .obj { background: var(--surface); }
@media (max-width: 720px) { .pm-across .objs.cols2 { grid-template-columns: 1fr; } }

/* research index: patent family tiles */
.pf summary { grid-template-columns: 44px minmax(0, 1fr) 20px; }
.pf-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; background: var(--bg); }
@media (min-width: 900px) { .pf-body { grid-template-columns: 5fr 6fr; align-items: start; } }
.pf-visual { background: var(--navy); border-color: var(--navy-line); }
.pf-text p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; }
.btn { display: inline-block; background: var(--ink); color: var(--on-navy); text-decoration: none; padding: 0.55rem 1rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; }
.btn:hover { background: var(--accent); color: #fff; }
.wide-figure .lbl, .arch .lbl { font-size: 0.8rem; color: var(--ink-2); line-height: 1.5; }
.pf-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); }
.pf-head .pg-title b a { color: var(--ink); text-decoration: none; } .pf-head .pg-title b a:hover { color: var(--tone, var(--accent)); }
.story-index .pf-open + .pf-open { margin-top: 0.5rem; }

.foot-else ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.foot-else a { color: var(--on-navy-2); font-size: 0.85rem; text-decoration: none; } .foot-else a:hover { color: var(--on-navy); }
/* contact form */
.contact-form { display: grid; gap: 0.9rem; max-width: 40rem; }
.contact-form label { display: grid; gap: 0.35rem; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
.contact-form input, .contact-form textarea { font: inherit; padding: 0.7rem 0.85rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.contact-form .botcheck { position: absolute; left: -9999px; }
.contact-form button { justify-self: start; background: var(--ink); color: var(--on-navy); border: 0; border-radius: 8px; padding: 0.7rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; }
.contact-form button:hover { background: var(--accent); }
.contact-sent { background: var(--green-soft); border: 1px solid var(--green); border-radius: 8px; padding: 0.8rem 1rem; color: var(--ink); }
.contact-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; }
/* portrait */
.hero-visual:has(.portrait-ring) { background: none; border: 0; padding: 0; align-items: center; justify-content: center; }
.portrait-ring { width: 260px; height: 260px; border-radius: 50%; padding: 6px; background: linear-gradient(135deg, var(--accent), var(--indigo)); box-shadow: 0 0 0 1px var(--navy-rule), 0 20px 50px rgba(0,0,0,.45); }
.portrait-ring img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--navy-2); }
@media (max-width: 960px) { .portrait-ring { width: 180px; height: 180px; margin: 0 auto; } }
.portrait-chip { display: block; width: 64px; height: 64px; max-width: 64px; box-sizing: border-box; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--accent), var(--indigo)); margin-bottom: 1rem; }
.portrait-chip img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.portrait-chip img { width: 58px; height: 58px; max-width: none; }
.portrait-hero { width: 340px; height: 340px; padding: 8px; }
@media (max-width: 959px) { .portrait-hero { width: 200px; height: 200px; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: 1.6rem; }
.hero-link { color: var(--on-navy); text-decoration: none; font-weight: 600; font-size: 0.95rem; border-bottom: 1px solid var(--on-navy-3); padding-bottom: 2px; }
.hero-link:hover { border-bottom-color: var(--accent); color: var(--accent); }
.portrait-ring, .portrait-hero { background: none; padding: 0; box-shadow: none; border: 3px solid var(--navy-rule); }
.portrait-ring img { border: 0; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-portrait { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--rule); flex: none; }
.hero-figure { position: relative; }
.portrait-frame { position: relative; width: 400px; max-width: 100%; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; border: 1px solid var(--navy-rule); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 140px 20px rgba(30, 99, 240, 0.28); }
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-frame::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(closest-side, rgba(30, 99, 240, 0.35), transparent 70%); z-index: -1; }
.hero-figure::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(30, 99, 240, 0.28), rgba(58, 79, 216, 0.08) 55%, transparent 72%); z-index: 0; pointer-events: none; }
.hero-figure > * { position: relative; z-index: 1; }
@media (max-width: 959px) { .portrait-frame { width: 260px; } .hero-figure::before { width: 360px; height: 360px; } }

/* home hero: editorial two-column composition, both columns share one vertical centre and one top edge */
@media (min-width: 960px) {
  .home-hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; padding-top: 4.5rem; padding-bottom: 4.5rem; align-items: stretch; }
  .hero-copy { display: flex; flex-direction: column; justify-content: center; }
  .hero-figure { min-height: 0; justify-content: flex-end; align-items: stretch; }
  .portrait-frame { width: auto; height: 100%; max-height: 520px; aspect-ratio: 4 / 5; margin-left: auto; }
  .hero-figure::before { width: 700px; height: 700px; }
}
.home-hero h1 { margin: 0.6rem 0 0.9rem; }
.home-hero .hero-lede + .hero-lede { margin-top: -0.5rem; }
.hero-actions { margin-top: 0.4rem; }
@media (max-width: 959px) { .hero-figure { order: -1; margin-bottom: 0.5rem; justify-content: flex-start; } .portrait-frame { width: 200px; } }

/* home hero, corrected: the row's height is the copy's height; the portrait is pinned to that row, top edge on the eyebrow, bottom edge on the links */
@media (min-width: 960px) {
  .home-hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; padding-top: 3rem; padding-bottom: 3rem; align-items: start; }
  .hero-copy { display: block; }
  .hero-figure { position: relative; min-height: 0; height: 100%; align-self: stretch; }
  .hero-figure::before { display: none; }
  .portrait-frame { position: absolute; top: 0; bottom: 0; right: 0; height: 100%; width: auto; max-height: none; aspect-ratio: 4 / 5; margin: 0; }
  .home-hero .eyebrow { display: block; line-height: 1; margin: 0; }
  .home-hero h1 { margin: 0.75rem 0 0.75rem; }
  .home-hero .thesis { margin: 0 0 0.8rem; }
  .home-hero .hero-lede { margin: 0 0 0.9rem; }
  .hero-actions { margin-top: 0.3rem; }
}

/* home hero, no void: the copy fills its column edge to edge, the portrait sits directly beside it */
@media (min-width: 960px) {
  .home-hero .wrap { grid-template-columns: minmax(0, 1fr) 380px; gap: 3rem; justify-content: stretch; }
  .home-hero .thesis { max-width: none; }
  .home-hero .hero-lede { max-width: none; font-size: 1.1rem; }
  .portrait-frame { right: auto; left: 0; }
}
@media (min-width: 1280px) { .home-hero .wrap { grid-template-columns: minmax(0, 1fr) 400px; gap: 3.5rem; } }
@media (min-width: 960px) { .home-hero .wrap { grid-template-columns: minmax(0, 1fr) auto; } .hero-figure { width: auto; } .portrait-frame { position: relative; height: 100%; max-height: 420px; } .home-hero .hero-lede { max-width: 62ch; } }
/* final: fixed-width portrait column, image fills exactly the copy's height; copy fills everything else */
@media (min-width: 960px) {
  .home-hero .wrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: stretch; }
  .hero-figure { position: relative; width: 340px; height: auto; min-height: 0; }
  .portrait-frame { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; margin: 0; }
  .portrait-frame img { object-fit: cover; object-position: 50% 0%; }
  .home-hero .hero-lede { max-width: none; }
}

/* home hero on phones: a full-bleed portrait band fading into the navy, the copy directly beneath */
@media (max-width: 959px) {
  .home-hero .wrap { padding-top: 0; gap: 0; }
  .hero-figure { order: -1; margin: 0 -16px 1.25rem; width: calc(100% + 32px); min-height: 0; justify-content: stretch; }
  .hero-figure::before { display: none; }
  .portrait-frame { position: relative; width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; border-radius: 0; border: 0; box-shadow: none; }
  .portrait-frame img { object-fit: cover; object-position: 50% 0%; }
  .portrait-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to bottom, rgba(14, 19, 26, 0), var(--navy)); }
  .portrait-frame::before { display: none; }
  .home-hero .eyebrow { margin-top: 0; }
  .home-hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .hero-actions { gap: 0.4rem 1.25rem; }
}
/* technologies chart on phones: head stacks, button below the title, bars keep their proportions without numbers inside */
@media (max-width: 720px) {
  .breadth { padding: 1.1rem 1rem 1rem; }
  .breadth-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .breadth-head h2 { margin-bottom: 0.4rem; }
  .breadth-bar i { font-size: 0; min-width: 4px; }
  .breadth-row { gap: 0.5rem 0.6rem; }
  .breadth-name { font-size: 0.88rem; }
  .breadth-legend { gap: 0.4rem 1rem; font-size: 0.78rem; }
  .flip-btn { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
}
@media (max-width: 720px) { .repo-stats { grid-template-columns: 1fr 1fr; } }

/* contact: elsewhere cards with the sites' own marks */
.elsewhere { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .elsewhere { grid-template-columns: 1fr; } }
.elsewhere a { display: flex; gap: 0.8rem; align-items: center; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.elsewhere a:hover { border-color: var(--accent); }
.elsewhere img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.elsewhere strong { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.elsewhere .lbl { font-size: 0.8rem; color: var(--ink-2); }
.prose ul.elsewhere { padding-left: 0; }
.prose .elsewhere li { padding-left: 0; }
.prose .elsewhere li::before { display: none; }
.form-note { margin: 0; font-size: 0.8rem; color: var(--ink-3); }

/* buttons readable in both schemes: ink on bg, accent-ink on accent */
.btn, .contact-form button { background: var(--ink); color: var(--bg); }
.btn:hover, .contact-form button:hover { background: var(--accent); color: var(--accent-ink); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover, var(--accent)); color: var(--accent-ink); }
.filter-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* home: scale row and idea strip */
.scale .section-lede { margin: 0 0 1rem; max-width: 62ch; }
.idea-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.idea-strip a { display: block; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.idea-strip a:hover { border-color: var(--accent); }
.idea-strip strong { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; margin-bottom: 0.3rem; }
.idea-strip span { font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; }
/* technologies chart on phones: no flip, both faces stacked; each bar names its top kinds */
@media (max-width: 720px) {
  .flip-inner { transform: none !important; }
  .flip-face.back { position: static !important; transform: none; visibility: visible; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
  .flip-face.front { position: static !important; visibility: visible; }
  .flip-btn { display: none; }
  .breadth-top { display: block; font-size: 0.74rem; color: var(--ink-3); margin-top: 0.25rem; grid-column: 1 / -1; }
}
.breadth-top { display: none; }
@media (max-width: 720px) {
  .flip .flip-face, .flip:not(.is-back) .flip-face.back, .flip.is-back .flip-face.front { visibility: visible; backface-visibility: visible; -webkit-backface-visibility: visible; transform: none; position: static !important; }
  .breadth-top { display: block; }
}