/* ==========================================================================
   Doing AI — design system
   One stylesheet. Every page links it. Tokens are defined here and nowhere
   else: if you find a raw hex outside the :root / [data-theme] blocks below,
   it is a bug.
   ========================================================================== */

/* --- Typefaces ------------------------------------------------------------
   Inter (variable, self-hosted) carries everything. Space Mono appears only
   as a micro-label — eyebrows, indices, figures. Two voices, no more.        */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------
   Dark only, and deliberately so. A toggle makes a site feel configurable;
   a single committed surface makes it feel like a brand. Every value below
   is measured against --bg or --surface — see the ratios in comments.      */

:root {
  color-scheme: dark;

  --bg:        #08090A;
  --surface:   #101214;
  --surface-2: #16181B;
  --surface-3: #1D2024;
  --bg-2:      #101214;   /* legacy alias */
  --bg-3:      #16181B;
  --bg-invert: #F7F8F8;

  --ink:        #F7F8F8;   /* 18.7:1 */
  --ink-2:      #B4B9BF;   /* 10.1:1 */
  --ink-3:      #7E858D;   /*  5.3:1 */
  --ink-4:      #5A6068;   /*  3.2:1 — large text only */
  --ink-invert: #08090A;

  --rule:   #1E2126;
  --rule-2: #2A2E34;

  /* Signal. One colour, used for emphasis and nothing decorative.
     16.5:1 on --bg, and black on it is also 16.5:1 — it works either way. */
  --accent:       #D6F84C;
  --accent-hover: #E6FF7A;
  --accent-fill:  #D6F84C;
  --on-accent:    #08090A;
  --accent-wash:  #1B2110;
  --accent-line:  #3D4A18;

  --focus: #D6F84C;

  --t-display: clamp(2.75rem, 1.05rem + 7.4vw, 6.75rem);
  --t-h1:      clamp(2.25rem, 1.25rem + 4.4vw, 4.5rem);
  --t-h2:      clamp(1.9rem, 1.2rem + 3.1vw, 3.5rem);
  --t-h3:      clamp(1.375rem, 1.1rem + 1.2vw, 1.9rem);
  --t-h4:      clamp(1.125rem, 1.03rem + 0.45vw, 1.4rem);
  --t-lead:    clamp(1.125rem, 1.02rem + 0.5vw, 1.5rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-micro:   0.75rem;

  --s1: 0.5rem;  --s2: 1rem;    --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;    --s7: 5.5rem;  --s8: 7rem;
  --s9: 9rem;    --s10: 12rem;

  --band: clamp(4.5rem, 2rem + 8vw, 9.5rem);

  --w-page:  1280px;
  --w-text:  62ch;
  --w-lead:  48ch;
  --gutter:  clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       560ms;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.65;
  font-feature-settings: 'cv05' 1, 'cv08' 1, 'ss03' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-wash); color: var(--ink); }

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 0.98;
}
.h1 { font-size: var(--t-h1); letter-spacing: -0.032em; line-height: 1.03; }
.h2 { font-size: var(--t-h2); letter-spacing: -0.028em; line-height: 1.06; }
.h3 { font-size: var(--t-h3); letter-spacing: -0.02em;  line-height: 1.15; }
.h4 { font-size: var(--t-h4); letter-spacing: -0.014em; line-height: 1.3; font-weight: 500; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.011em;
  max-width: var(--w-lead);
  text-wrap: pretty;
}

.prose { max-width: var(--w-text); text-wrap: pretty; }
.prose p + p { margin-top: 1.15em; }
.prose strong { color: var(--ink); font-weight: 500; }

.muted { color: var(--ink-3); }
.small { font-size: var(--t-small); line-height: 1.6; }

/* Eyebrow — the only place Space Mono is allowed to appear. */
.eyebrow {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  display: block;
}

.idx {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band-tight { padding-block: calc(var(--band) * 0.62); }
.band-sub { background: var(--bg-2); }
.band-line { border-top: 1px solid var(--rule); }

/* 12-column grid. Sections opt in; nothing is boxed by default. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s5);
}
/* Span sets the *end* edge only. If it set `grid-column` wholesale, a later
   `.start-N` would overwrite the start and leave the end at `auto` — which
   silently collapses the item to a single column. */
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-12 { grid-column-end: span 12; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }

@media (max-width: 900px) {
  .grid > [class*="col-"],
  .grid > [class*="start-"] { grid-column: 1 / span 12; }
  .grid { row-gap: var(--s4); }
}

/* Section head: label above, headline below, optional note to the right. */
.sec-head { margin-bottom: var(--s6); }
.sec-head .eyebrow { margin-bottom: var(--s3); }
.sec-head .lead { margin-top: var(--s3); }

/* --- Links & buttons ----------------------------------------------------- */

a { color: inherit; }

.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding-bottom: 1px;
  transition: border-color 180ms var(--ease-soft), color 180ms var(--ease-soft);
}
.link:hover { border-bottom-color: var(--accent); color: var(--accent-hover); }

/* Text link with a rule that grows — used for "next page" affordances. */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.link-arrow::after {
  content: "→";
  color: var(--accent);
  transition: transform 260ms var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.78rem 1.4rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms var(--ease-soft), border-color 180ms var(--ease-soft),
              color 180ms var(--ease-soft), transform 180ms var(--ease-soft);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }


.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-ghost:hover { border-color: var(--ink-4); background: var(--bg-2); }

.btn-invert { background: var(--bg-invert); color: var(--ink-invert); }
.btn-invert:hover { opacity: 0.88; }

.btn-lg { padding: 0.95rem 1.7rem; font-size: var(--t-body); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* --- Header -------------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-soft), background 240ms var(--ease-soft);
}
.hdr[data-scrolled="true"] { border-bottom-color: var(--rule); }

.hdr-in {
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  margin-right: auto;
}
.brand-mark { width: 20px; height: 20px; flex: none; color: var(--ink); }

.nav { display: flex; align-items: center; gap: var(--s3); }
.nav a {
  text-decoration: none;
  color: var(--ink-3);
  font-size: var(--t-small);
  letter-spacing: -0.006em;
  transition: color 160ms var(--ease-soft);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

.hdr-end { display: flex; align-items: center; gap: var(--s2); }

@media (max-width: 900px) {
  .nav { display: none; }
  .hdr-in { height: 4rem; }
  /* The CTA is 188px wide and does not fit beside the toggle and the menu
     button at 390px — it lives in the mobile sheet instead. */
  .hdr-end > .btn { display: none; }
}

/* Theme toggle — three states, understated. */
.theme {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--bg-2);
}
.theme button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: color 160ms var(--ease-soft), background 160ms var(--ease-soft);
}
.theme button:hover { color: var(--ink-2); }
.theme button[aria-pressed="true"] { background: var(--bg); color: var(--ink); }
.theme svg { width: 14px; height: 14px; }

/* Mobile menu */
.menu-btn {
  display: none;
  width: 36px; height: 34px;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: transparent; color: var(--ink); cursor: pointer;
}
.menu-btn svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .menu-btn { display: inline-flex; } }

.mobile {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  padding: var(--s3) 0 var(--s4);
}
.mobile[data-open="true"] { display: block; }
@media (min-width: 901px) { .mobile { display: none !important; } }
.mobile a {
  display: block;
  padding: 0.7rem 0;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--rule);
}
.mobile .btn { margin-top: var(--s3); width: 100%; }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(4rem, 1rem + 11vw, 10rem) clamp(3rem, 1rem + 6vw, 6rem); }
.hero .display { max-width: 15ch; }
.hero .lead { margin-top: var(--s4); max-width: 52ch; }
.hero .actions { margin-top: var(--s5); }

/* A single sentence, set large, on its own. */
.statement {
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.026em;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--ink-4); }

/* --- Dark hero -----------------------------------------------------------
   Always dark, in both themes. It is the one place on the site that carries
   visual weight, so it must not invert with the colour scheme. All colours
   here are the *dark* palette values, hard-set for that reason.            */

.hero-dark {
  position: relative;
  background: #0C0D0F;
  color: #F5F6F7;
  overflow: hidden;
  isolation: isolate;
  /* Slide up under the sticky header so it can sit transparently over the
     art. A sticky element still occupies flow, hence the negative margin. */
  margin-top: -4.5rem;
  padding-top: 4.5rem;
}
@media (max-width: 900px) {
  .hero-dark { margin-top: -4rem; padding-top: 4rem; }
}

/* Header over the dark hero: transparent until scrolled, then the normal
   glassy header takes over against the light content below. */
body.has-dark-hero .hdr[data-scrolled="false"] {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* .brand-mark carries its own `color: var(--ink)`, which resolves to near-black
   in the light theme — invisible on the dark hero. It must be set explicitly. */
body.has-dark-hero .hdr[data-scrolled="false"] .brand,
body.has-dark-hero .hdr[data-scrolled="false"] .brand-mark { color: #FFFFFF; }
body.has-dark-hero .hdr[data-scrolled="false"] .nav a { color: rgba(245, 246, 247, 0.74); }
body.has-dark-hero .hdr[data-scrolled="false"] .nav a:hover,
body.has-dark-hero .hdr[data-scrolled="false"] .nav a[aria-current="page"] { color: #FFFFFF; }
body.has-dark-hero .hdr[data-scrolled="false"] .theme {
  background: rgba(245, 246, 247, 0.07);
  border-color: rgba(245, 246, 247, 0.18);
}
body.has-dark-hero .hdr[data-scrolled="false"] .theme button { color: rgba(245, 246, 247, 0.6); }
body.has-dark-hero .hdr[data-scrolled="false"] .theme button[aria-pressed="true"] {
  background: rgba(245, 246, 247, 0.16);
  color: #FFFFFF;
}
body.has-dark-hero .hdr[data-scrolled="false"] .menu-btn {
  color: #FFFFFF;
  border-color: rgba(245, 246, 247, 0.28);
}
.hero-dark .wrap { position: relative; z-index: 2; }
.hero-dark-in {
  min-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4.5rem, 2rem + 9vw, 8rem) clamp(2.5rem, 1rem + 4vw, 4rem);
}
.hero-dark h1 { color: #FFFFFF; max-width: 16ch; }
.hero-dark .lead { color: #C9CCD1; max-width: 50ch; margin-top: var(--s4); }
.hero-dark .actions { margin-top: var(--s5); }
.hero-dark .btn-ghost {
  color: #F5F6F7;
  border-color: rgba(245, 246, 247, 0.28);
  background: transparent;
}
.hero-dark .btn-ghost:hover {
  border-color: rgba(245, 246, 247, 0.6);
  background: rgba(245, 246, 247, 0.06);
}
.hero-dark .eyebrow { color: #93989F; }
.hero-dark .note { color: #93989F; }

/* The topology graphic. Decorative, so aria-hidden and pointer-events none. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(100deg, transparent 34%, #000 72%);
  mask-image: linear-gradient(100deg, transparent 34%, #000 72%);
}
.hero-art svg { width: 100%; height: 100%; }
.hero-art .n { fill: #5B93F2; }
.hero-art .n-dim { fill: #2C3138; }
.hero-art .e { stroke: #2C3138; stroke-width: 1; fill: none; }
.hero-art .e-a { stroke: #5B93F2; stroke-width: 1; fill: none; opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .pulse { animation: pulse 4.5s var(--ease-soft) infinite; }
  .hero-art .pulse:nth-of-type(2) { animation-delay: 1.5s; }
  .hero-art .pulse:nth-of-type(3) { animation-delay: 3s; }
}
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Stat rail — sits at the foot of the hero. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: clamp(3rem, 1rem + 5vw, 5rem);
  padding-top: var(--s4);
  border-top: 1px solid rgba(245, 246, 247, 0.14);
}
.stat .v {
  display: block;
  white-space: nowrap;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  font-weight: 500;
}
.stat .k {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-small);
  color: #93989F;
}
@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr; row-gap: var(--s3); }
  .stat { display: flex; align-items: baseline; gap: 0.8rem; }
  .stat .k { margin-top: 0; }
}

/* --- Client rail ---------------------------------------------------------- */

.rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s6);
  list-style: none;
  padding: 0;
}
.rail li {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-3);
}

/* --- Quotes --------------------------------------------------------------- */

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.quote-card { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.quote-card blockquote { font-size: var(--t-h4); line-height: 1.4; color: var(--ink); letter-spacing: -0.015em; }
.quote-card figcaption { margin-top: var(--s3); font-size: var(--t-small); color: var(--ink-3); }
.quote-card figcaption b { display: block; color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; row-gap: var(--s4); } }

/* --- Placeholder guard ---------------------------------------------------
   Anything still awaiting real content is loud on purpose. `npm`-free check:
   tools/check-placeholders.sh greps for data-placeholder before deploy.    */

[data-placeholder] {
  position: relative;
  outline: 2px dashed #B3261E;
  outline-offset: 6px;
  border-radius: var(--r-sm);
}
[data-placeholder]::before {
  content: "PLACEHOLDER — replace before deploy";
  position: absolute;
  top: -0.75rem;
  left: 0;
  transform: translateY(-100%);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  background: #B3261E;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  white-space: nowrap;
}

/* --- Editorial list — the replacement for cards --------------------------- */

.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 22ch) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.row .idx { padding-top: 0.35rem; }
.row h3 { font-size: var(--t-h4); }
.row p { color: var(--ink-3); max-width: 56ch; }

@media (max-width: 760px) {
  .row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .row p { grid-column: 2; }
}

/* --- Four-step sequence --------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  border-top: 1px solid var(--rule);
}
.step { padding-top: var(--s3); border-top: 2px solid var(--ink); margin-top: -1px; }
.step:nth-child(n+2) { border-top-color: var(--rule-2); }
.step h3 { font-size: var(--t-h4); margin-bottom: var(--s1); }
.step p { color: var(--ink-3); font-size: var(--t-small); }
.step .idx { display: block; margin-bottom: var(--s2); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* --- Stack list (understated tech credits) -------------------------------- */

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  list-style: none;
  padding: 0;
  color: var(--ink-3);
  font-size: var(--t-small);
}

/* --- Definition pairs ----------------------------------------------------- */

.defs { display: grid; gap: var(--s4); }
.def { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.def h3 { font-size: var(--t-h4); margin-bottom: var(--s1); }
.def p { color: var(--ink-3); font-size: var(--t-small); }
.defs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.defs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
@media (max-width: 860px) { .defs-3, .defs-2 { grid-template-columns: 1fr; } }

/* --- Figures (line diagrams) ---------------------------------------------- */

.figure { color: var(--ink); }
.figure svg { width: 100%; height: auto; }
/* The diagram's 9px mono labels become illegible once the 960-unit viewBox
   is squeezed below ~680px. Let it scroll inside its own box instead of
   shrinking — and never let it widen the page. */
@media (max-width: 760px) {
  .figure { overflow-x: auto; }
  .figure svg { min-width: 660px; }
}
.figure figcaption {
  margin-top: var(--s3);
  font-size: var(--t-micro);
  font-family: 'Space Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.dgm-line   { stroke: var(--rule-2); stroke-width: 1; fill: none; }
.dgm-line-a { stroke: var(--accent); stroke-width: 1; fill: none; }
.dgm-node   { stroke: var(--rule-2); stroke-width: 1; fill: var(--bg); }
.dgm-node-a { stroke: var(--accent); stroke-width: 1; fill: var(--bg); }
.dgm-fill   { fill: var(--ink); }
.dgm-text   {
  fill: var(--ink-3);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dgm-text-a { fill: var(--accent); }

/* --- Quote / perspective -------------------------------------------------- */

.quote {
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 34ch;
}

/* --- Work entries --------------------------------------------------------- */

.entry {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gutter);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.entry:first-child { border-top: 1px solid var(--rule); }
.entry h3 { font-size: var(--t-h3); }
.entry .eyebrow { margin-bottom: var(--s2); }
.entry-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: var(--s3); }
.entry-meta span { font-size: var(--t-micro); color: var(--ink-4); font-family: 'Space Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 860px) { .entry { grid-template-columns: 1fr; row-gap: var(--s3); } }

/* --- Disclosure (FAQ) ----------------------------------------------------- */

.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s3);
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: var(--t-h4);
  font-weight: 500;
  letter-spacing: -0.016em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--ink-4);
  border-bottom: 1.5px solid var(--ink-4);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 240ms var(--ease);
}
.qa details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.qa .qa-body { padding-bottom: var(--s4); color: var(--ink-3); max-width: 66ch; }

/* --- Forms ---------------------------------------------------------------- */

.field { display: block; margin-bottom: var(--s3); }
.field > span {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-bottom: 0.45rem;
  font-weight: 500;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  color: var(--ink);
  font-size: var(--t-small);
  transition: border-color 160ms var(--ease-soft), box-shadow 160ms var(--ease-soft);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field .err { display: none; margin-top: 0.4rem; font-size: var(--t-micro); color: #FF8A80; }

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #B3261E; }
.field[data-invalid="true"] .err { display: block; }

.check { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--t-small); color: var(--ink-3); }
.check input { margin-top: 0.28rem; width: 15px; height: 15px; accent-color: var(--accent-fill); flex: none; }

/* --- Footer --------------------------------------------------------------- */

.ftr { border-top: 1px solid var(--rule); padding-block: var(--s6) var(--s4); }
.ftr-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: var(--gutter);
  row-gap: var(--s5);
}
.ftr h4 {
  font-size: var(--t-micro);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  margin-bottom: var(--s2);
}
.ftr ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.ftr ul a { text-decoration: none; color: var(--ink-3); font-size: var(--t-small); transition: color 160ms var(--ease-soft); }
.ftr ul a:hover { color: var(--ink); }
.ftr-base {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
  font-size: var(--t-micro);
  color: var(--ink-4);
}
@media (max-width: 860px) { .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Interior pages ------------------------------------------------------- */

.page-head { padding-block: clamp(3.5rem, 1rem + 8vw, 7rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.page-head .eyebrow { margin-bottom: var(--s3); }
.page-head .lead { margin-top: var(--s4); }

/* Capability / long-form entry — same skeleton as .entry, more room. */
.cap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--gutter);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.cap:first-child { border-top: 1px solid var(--rule); }
.cap h3 { font-size: var(--t-h3); }
.cap .idx { display: block; margin-bottom: var(--s2); }
@media (max-width: 860px) { .cap { grid-template-columns: 1fr; row-gap: var(--s3); } }

.ticks { list-style: none; padding: 0; display: grid; gap: 0.55rem; margin-top: var(--s3); }
.ticks li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-small);
  color: var(--ink-3);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--bg);
}

/* Vertical sequence — the approach page's expanded stages. */
.seq { border-top: 1px solid var(--rule); }
.seq > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--gutter);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.seq h3 { font-size: var(--t-h3); margin-top: var(--s2); }
@media (max-width: 860px) { .seq > div { grid-template-columns: 1fr; row-gap: var(--s2); } }

.note { font-size: var(--t-small); color: var(--ink-4); }

/* --- Legal ---------------------------------------------------------------- */

.legal { max-width: 68ch; }
.legal section { margin-top: var(--s5); }
.legal h2 {
  font-size: var(--t-h4);
  margin-bottom: var(--s2);
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.legal h2 .idx { flex: none; }
.legal p + p, .legal ul + p { margin-top: 0.9em; }
.legal code {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.86em;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.1em 0.36em;
}
.legal ul { margin-top: 0.9em; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.legal li { color: var(--ink-3); }

/* --- Result panel (assessment tool) --------------------------------------- */

.result { display: none; }
.result[data-state="on"] { display: block; }
.result-kv { display: grid; gap: var(--s3); margin-top: var(--s4); }
.result-kv > div { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.result-kv h4 {
  font-size: var(--t-micro);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.spin {
  width: 14px; height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Motion --------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --- Utilities ------------------------------------------------------------ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg);
  color: var(--ink);
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  z-index: 100;
}
.skip:focus { left: var(--gutter); top: 0.75rem; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hr { border: 0; border-top: 1px solid var(--rule); }
.mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }

/* ==========================================================================
   Density sections — industries, calculator, comparison, founder
   ========================================================================== */

/* --- Tiles: capability grid ----------------------------------------------
   A single-pixel grid drawn with gap + background, so cells read as one
   table rather than as floating cards.                                     */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tile { background: var(--bg); padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.tile .idx { display: block; margin-bottom: var(--s3); }
.tile h3 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.tile p { font-size: var(--t-small); color: var(--ink-3); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }

/* --- Industries ----------------------------------------------------------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s5);
}
.tabs button {
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-full, 999px);
  background: transparent;
  color: var(--ink-3);
  font-size: var(--t-small);
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms var(--ease-soft), background 160ms var(--ease-soft),
              border-color 160ms var(--ease-soft);
}
.tabs button:hover { color: var(--ink); border-color: var(--ink-4); }
.tabs button[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.panel-ind[hidden] { display: none; }
.ind-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.ind-head h3 { font-size: var(--t-h3); }

.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.case { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.case .eyebrow { margin-bottom: var(--s2); }
.case h4 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.case p { font-size: var(--t-small); color: var(--ink-3); }
.shift {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--s3);
  font-size: var(--t-micro);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shift .from { color: var(--ink-4); text-decoration: line-through; }
.shift .to { color: var(--accent); }
@media (max-width: 860px) { .cases { grid-template-columns: 1fr; row-gap: var(--s4); } }

.built {
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--accent);
  background: var(--bg-2);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.built b { color: var(--ink); font-weight: 500; }

/* --- Calculator ----------------------------------------------------------- */

.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.slider { margin-bottom: var(--s5); }
.slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.slider-top label { font-size: var(--t-body); color: var(--ink); font-weight: 500; }
.slider-top output {
  font-family: 'Space Mono', monospace;
  font-size: 1.125rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.slider p { font-size: var(--t-small); color: var(--ink-3); margin-top: 0.35rem; }
.slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  margin-top: var(--s3);
  background: var(--rule-2);
  border-radius: 2px;
  cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-fill);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent-fill);
  cursor: grab;
}
.slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent-fill);
  border: 3px solid var(--bg);
  cursor: grab;
}

.readout { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--bg-2); }
.readout .big {
  display: block;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.readout .unit { display: block; margin-top: var(--s2); color: var(--ink-3); font-size: var(--t-small); }
.readout hr { margin-block: var(--s4); }

/* --- Comparison ----------------------------------------------------------- */

.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.cmp th, .cmp td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); vertical-align: top; font-size: var(--t-small); }
.cmp thead th {
  font-family: 'Space Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  border-bottom-color: var(--rule-2);
}
.cmp tbody th { color: var(--ink); font-weight: 500; width: 22%; }
.cmp td { color: var(--ink-3); }
.cmp .us { background: var(--accent-wash); color: var(--ink-2); }
.cmp thead .us { color: var(--accent); font-weight: 700; }

/* --- Founder -------------------------------------------------------------- */

.founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gutter); align-items: start; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } }
.avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--bg);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}

/* ==========================================================================
   site6 — the layer that stops this reading as a template.
   Dark only. One signal colour. Surfaces that separate by light, not shadow.
   ========================================================================== */

/* Grain. Two percent of noise is the difference between "flat dark div" and
   "a surface". Fixed so it never scrolls, and inert to pointer events. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 2; }

/* Buttons — the signal colour carries black, which is the whole point of
   choosing a colour bright enough to invert on. */
.btn-primary { background: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { color: var(--ink); border-color: var(--rule-2); background: transparent; }
.btn-ghost:hover { border-color: var(--ink-3); background: var(--surface-2); }

.link { color: var(--accent); border-bottom-color: var(--accent-line); }
.link:hover { color: var(--accent-hover); border-bottom-color: var(--accent); }
.link-arrow { color: var(--ink); }
.link-arrow::after { color: var(--accent); }

/* Header sits on the page rather than over a light one. */
.hdr { background: color-mix(in srgb, var(--bg) 78%, transparent); }
.hdr[data-scrolled="true"] { border-bottom-color: var(--rule); }
.brand, .brand-mark { color: var(--ink); }

/* Hero — the accent bleeds in as light, not as a gradient sheet. */
.hero-dark { background: var(--bg); }
.hero-dark::after {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 70%; aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 62%);
}
.hero-art { opacity: 0.4; }
.hero-art .n { fill: var(--accent); }
.hero-art .e-a { stroke: var(--accent); }
.hero-art .n-dim { fill: #2A2E34; }
.hero-art .e { stroke: #1E2126; }

.stats { border-top-color: var(--rule-2); }
.stat .v { color: var(--ink); }
.stat .k { color: var(--ink-3); }
/* The lead number gets the signal colour. Only the first — a page where
   everything is highlighted has nothing highlighted. */
.stat:first-child .v { color: var(--accent); }

/* Bands: separation by surface level. No shadows anywhere on this site. */
.band-sub { background: var(--surface); }
.band-line { border-top-color: var(--rule); }

/* Surfaces */
.panel, .readout { background: var(--surface); border-color: var(--rule); }
.tiles, .errc { background: var(--rule); border-color: var(--rule); }
.tile, .errc > div, .sector { background: var(--surface); }
.band-sub .tile, .band-sub .errc > div, .band-sub .sector { background: var(--surface-2); }

/* A hairline of signal on the left of each tile, revealed on hover. */
.tile { position: relative; transition: background 200ms var(--ease-soft); }
.tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms var(--ease);
}
.tile:hover { background: var(--surface-2); }
.tile:hover::before { transform: scaleY(1); }

/* Indices and eyebrows carry the signal, quietly. */
.idx { color: var(--accent); opacity: 0.75; }
.eyebrow { color: var(--ink-3); }
.sec-head .eyebrow { color: var(--accent); }

/* Tabs */
.tabs button { border-color: var(--rule-2); color: var(--ink-3); }
.tabs button:hover { color: var(--ink); border-color: var(--ink-4); }
.tabs button[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
}

/* Industry cases */
.case { border-top-color: var(--rule); }
.shift .from { color: var(--ink-4); }
.shift .to { color: var(--accent); }
.built { background: var(--surface-2); border-left-color: var(--accent); color: var(--ink-2); }
.built b { color: var(--ink); }

/* Calculator */
.slider input[type="range"] { background: var(--rule-2); }
.slider input[type="range"]::-webkit-slider-thumb {
  background: var(--accent); border-color: var(--bg); box-shadow: 0 0 0 1px var(--accent);
}
.slider input[type="range"]::-moz-range-thumb { background: var(--accent); border-color: var(--bg); }
.slider-top output { color: var(--accent); }
.readout .big { color: var(--ink); }
.readout .big, .fig-n { font-variant-numeric: tabular-nums; }

/* Comparison — our column is the only lit one. */
.cmp thead th { color: var(--ink-4); }
.cmp tbody th { color: var(--ink); }
.cmp td { color: var(--ink-3); }
.cmp th, .cmp td { border-bottom-color: var(--rule); }
.cmp .us { background: var(--accent-wash); color: var(--ink-2); }
.cmp thead .us { color: var(--accent); }

/* Steps, defs, rows, entries */
.step { border-top-color: var(--rule-2); }
.step:first-child { border-top-color: var(--accent); }
.def, .guard, .quote-card { border-top-color: var(--rule); }
.quote-card { border-top-color: var(--accent); }
.row, .rows, .cap, .entry, .packs, .pack, .qa, .qa details { border-color: var(--rule); }

/* Diagrams */
.dgm-line { stroke: var(--rule-2); }
.dgm-line-a { stroke: var(--accent); }
.dgm-node { stroke: var(--rule-2); fill: var(--surface); }
.dgm-node-a { stroke: var(--accent); fill: var(--surface); }
.dgm-text { fill: var(--ink-3); }
.dgm-text-a { fill: var(--accent); }

/* Forms */
.field input, .field select, .field textarea { background: var(--surface); border-color: var(--rule-2); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
}
.check input { accent-color: var(--accent); }

/* Footer */
.ftr { border-top-color: var(--rule); }
.ftr h4 { color: var(--ink-4); }

/* Theme toggle is gone — the site has one surface on purpose. */
.theme { display: none; }

/* ==========================================================================
   site7 — the ontology is the product, so it gets the page's centre.
   ========================================================================== */

.stack-diagram { display: grid; gap: 2px; }
.layer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.9rem) clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  display: grid;
  grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  gap: var(--s2) var(--gutter);
  align-items: baseline;
}
.layer h3 { font-size: var(--t-h4); }
.layer p { font-size: var(--t-small); color: var(--ink-3); }
.layer .idx { grid-column: 1 / -1; }
/* The ontology layer is the one that is ours and the one that is yours at
   the same time. It gets the signal colour; nothing else in the stack does. */
.layer-key { border-color: var(--accent-line); background: var(--accent-wash); }
.layer-key h3 { color: var(--accent); }
.layer-key p { color: var(--ink-2); }
.layer-muted { background: transparent; border-style: dashed; }
.layer-muted h3 { color: var(--ink-3); }
@media (max-width: 700px) { .layer { grid-template-columns: 1fr; } }

.stack-arrow {
  display: grid;
  place-items: center;
  height: 26px;
  color: var(--ink-4);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
}

/* Object grid — the vocabulary of an institution, shown rather than described. */
.objects { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s3); }
.objects span {
  font-family: 'Space Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink-3);
}
.objects span.on { border-color: var(--accent-line); color: var(--accent); background: var(--accent-wash); }