/* =========================================================================
   Sential Innovations Stylesheet
   One source of truth. Warm surfaces, editorial serif, no gradients,
   no pulsing, no emoji. Hairlines and whitespace do the structural work.
   ========================================================================= */

/* ---------- Fonts ----------
   Newsreader is self-hosted so the critical path stays on one origin.
   One variable file per subset covers weights 400-600. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/newsreader-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: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/newsreader-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;
}
/* ---------- Design tokens ---------- */
:root {
  /* Ink: warm near-blacks for text */
  --ink: #1C1612;
  --ink-soft: #4A3D31;
  --ink-faint: #6E6053;   /* 6.0:1 on paper, 5.0:1 on cream - AA */

  /* Hazelnut: primary brown */
  --hazelnut: #7A5C3E;
  --hazelnut-deep: #5C4329;

  /* Cream: secondary surfaces */
  --cream: #F4E8DA;
  --cream-light: #FBF5EC;
  --cream-card: #FFFFFF;

  /* Paper */
  --paper: #FFFFFF;

  /* Rules: hairline borders */
  --rule: #E0D2BD;
  --rule-soft: #ECE0CE;
  /* Interactive controls need 3:1 against their surface; --rule is decorative only. */
  --rule-interactive: #968368;

  /* Sea: the slight accent (links, focus, small marks) */
  --sea: #3F6B71;        /* AA on paper, cream and cream-light */
  --sea-deep: #385F64;

  /* Rust: slowed / reduced-pace status */
  --rust-deep: #8F5327;  /* AA on paper, cream and cream-light */

  /* Type */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono",
    Consolas, monospace;

  /* Scale */
  --maxw: 1200px;
  --maxw-prose: 720px;
  --maxw-wide: 1040px;

  /* Spacing rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radii: small, restrained */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Shared layout constants */
  --header-h: 68px;
  --bp-drawer: 900px;

  /* Motion */
  --t-fast: 120ms ease;
  --t-base: 220ms ease;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Anchor jumps must land below the sticky header, not underneath it. */
:target,
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

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

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream-light);
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--sea-deep);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
a:hover { color: var(--sea); text-decoration-color: var(--sea); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5vw + 1rem, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.7rem, 2vw + 1rem, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

h3 {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1.05rem;
  font-weight: 600;
}

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

small, .small { font-size: 0.85rem; }

strong { font-weight: 600; color: var(--ink); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--cream);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-soft);
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-prose { max-width: var(--maxw-prose); }
.container-wide { max-width: var(--maxw-wide); }

.section {
  padding-block: var(--space-9);
  border-top: 1px solid var(--rule);
}
.section:first-of-type { border-top: none; }
.section-tight { padding-block: var(--space-7); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-sm);
  z-index: 1000;
  text-decoration: none;
  transition: top var(--t-base);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream-light);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), background var(--t-base);
}
.site-header.scrolled {
  border-bottom-color: var(--rule);
  background: rgba(251, 245, 236, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
}
.brand-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand-name .sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}
.nav-links a {
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--t-fast);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--sea-deep);
}
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--sea);
}

/* CTA in nav */

/* Nav: Model Preview button, styled as a small CTA inside the link list */

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-interactive);
  border-radius: var(--r-md);
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
}
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 820px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 68px;
    left: 0; right: 0;
    background: var(--cream-light);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-4) var(--space-6) var(--space-6);
  }
  .nav-links.open li { width: 100%; }
  .nav-links.open a {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 1.05rem;
  }
  .nav-links.open a[aria-current="page"]::after { display: none; }
  .nav-links.open a[aria-current="page"] { color: var(--sea-deep); font-weight: 600; }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-9) var(--space-8);
  position: relative; /* the mascot track below is positioned against this */
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-8);
  align-items: center;
  /* Above the mascot track, so the fox passes behind the copy and the
     buttons rather than over them. */
  position: relative;
  z-index: 1;
}
.hero h1 {
  margin-bottom: var(--space-5);
  font-size: clamp(1.8rem, 3.5vw + 0.5rem, 3rem);
}
.hero .lede { max-width: 30ch; margin-bottom: var(--space-6); }
.hero-figure {
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Series card ----------
   The wide card that introduces a model series, shown under the series
   description. Transparent source art, so no box around it. */
.series-card {
  margin: 0;
  max-width: var(--maxw-wide);
}
.series-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  object-fit: contain;
}

/* Wide hero figure (for source art with a wide aspect ratio, e.g. 8:3) */

/* Transparent hero art: no box, no border, no background.
   For wide transparent PNGs (e.g. the Hikaru card). Sits on the right
   of the hero copy and keeps its natural aspect ratio. */
.hero-art-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-art-intro {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}

.hero-figure--art {
  border: none;
  background: transparent;
  border-radius: 0;
  aspect-ratio: auto;
  align-self: center;
  position: relative;
}
.hero-figure--art img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero-figure { aspect-ratio: 16 / 10; order: 2; }
}

/* The home page hero carries the mascot, which walks the rule directly below
   the content. On the two-column layout the button row is the lowest thing in
   that content, so the bottom padding has to clear the fox's full height, plus
   a little air, or the fox cuts through the buttons. The stacked layout puts
   the figure last with room to spare, so it keeps the standard padding.
   kova.html uses .hero too, which is why this is a modifier and not .hero. */
@media (min-width: 881px) {
  .hero--mascot { padding-bottom: calc(var(--fox-h) + var(--space-4)); }
}

/* ---------- Mascot ----------
   The fox walks in from off the right edge along the rule that closes the
   hero, reaches the middle of the viewport, lies down, and stays there for the
   rest of the visit. Decorative, so it is hidden from assistive tech and
   skipped outright when motion is not wanted.

   Both sprites are exported from the same crop box, so the swap from walking
   to lying down cannot shift the fox by a pixel. The box is 990x498 of the
   original 1080x1444 canvas, taken at x46,y502, and its bottom edge is the
   line the fox's feet stand on - which is why the box sits at bottom: 0 and
   the feet stay planted on the rule through the whole animation.

   Everything here is deliberately plain. Two earlier constructs worked in
   Chromium and were dropped by WebKit, which left the fox oversized and
   walking on the spot in Safari:

     - a calc() mixing % with another unit inside translateX()
     - a calc() dividing by a var()

   So: no vw, no division by a custom property, and no mixed units inside a
   transform. Every length below is one length multiplied by one plain number,
   and every transform is a bare percentage of the element's own width.

   Three nested boxes, each with one job:

   .fox-track  spans the hero and clips at the viewport edges, so a fox parked
               past the right edge cannot widen the page.
   .fox-rail   is exactly the track's width. It slides half a viewport left.
   .fox-walk   is the sprite box. It slides half its own width left inside the
               rail. The two together put the box's centre on the viewport's
               centre - with no calc anywhere. */
.hero--mascot {
  /* --fox-h is the WALKING sprite's height, so the fox reads the same size
     here as it did before the box grew to fit the lying-down pose. Only the
     duration changes per breakpoint, because only the distance changes;
     roughly 90px/s keeps the stride looking planted instead of skating. */
  --fox-h: 76px;
  --fox-box-h: calc(var(--fox-h) * 1.0484);  /* 498 / 475 */
  --fox-box-w: calc(var(--fox-h) * 2.0842);  /* 990 / 475 */
  --fox-duration: 8s;
}
@media (min-width: 881px) {
  .hero--mascot { padding-bottom: calc(var(--fox-box-h) + var(--space-4)); }
}
.fox-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fox-box-h);
  overflow: hidden;
  pointer-events: none;
}
.fox-rail {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: fox-approach var(--fox-duration) linear 500ms forwards;
}
.fox-walk {
  position: absolute;
  left: 100%;
  bottom: 0;
  width: var(--fox-box-w);
  height: var(--fox-box-h);
  animation: fox-approach var(--fox-duration) linear 500ms forwards;
}
/* The sprites are pre-cropped to the box, so the image simply fills it. No
   oversized canvas, no negative offsets, nothing for WebKit to disagree with. */
.fox-walk img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Applied to both the rail and the fox. Each resolves the 50% against its own
   width, which is the whole trick: half a viewport plus half a fox. */
@keyframes fox-approach {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* The fox is one size everywhere, so a fixed duration would make it crawl on a
   wide screen and bolt on a narrow one. These keep the pace near constant, and
   are the no-JS fallback: main.js replaces --fox-duration with a value that is
   a whole number of walk cycles, so the laydown continues the stride exactly.
   Without JS the fox simply walks to the middle and keeps walking. */
@media (min-width: 1600px) {
  .hero--mascot { --fox-duration: 11s; }
}
@media (max-width: 1100px) {
  .hero--mascot { --fox-duration: 6s; }
}
@media (max-width: 700px) {
  .hero--mascot { --fox-duration: 3s; }
}

@media (prefers-reduced-motion: reduce) {
  .fox-track { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.7rem 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
    border-color var(--t-fast);
}
.btn-primary {
  background: var(--ink);
  color: var(--cream-light);
}
.btn-primary:hover {
  background: var(--hazelnut-deep);
  color: var(--cream-light);
  text-decoration: none;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover {
  border-color: var(--ink-soft);
  text-decoration: none;
  color: var(--ink);
}
.btn .arrow {
  font-family: var(--font-mono);
  transition: transform var(--t-fast);
}
.btn:hover .arrow { transform: translateX(2px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- Status (plain words, no pills) ---------- */
.status {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}
.status--dev { color: var(--hazelnut-deep); }
.status--soon { color: var(--sea-deep); }
.status--slowed { color: var(--rust-deep); }

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  transition: border-color var(--t-base), transform var(--t-base);
  height: 100%;
}
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-link:hover { text-decoration: none; color: inherit; }
.card-link:hover .card {
  border-color: var(--ink-faint);
}
.card-link:hover .card .arrow-more {
  color: var(--sea-deep);
  transform: translateX(3px);
}

.card h3 { margin-bottom: var(--space-3); }
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}
.card p { color: var(--ink-soft); font-size: 0.96rem; }

.arrow-more {
  display: inline-block;
  font-family: var(--font-mono);
  color: var(--ink-faint);
  margin-top: var(--space-4);
  transition: color var(--t-fast), transform var(--t-fast);
}

/* Card grids */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 880px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (min-width: 881px) and (max-width: 1080px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Section header ---------- */
.section-head {
  margin-bottom: var(--space-7);
  max-width: 60ch;
}
.section-head h2 { margin-bottom: var(--space-3); }
.section-head .lede { color: var(--ink-soft); }

/* ---------- Prose block (research/about) ---------- */
.prose { max-width: var(--maxw-prose); }
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose p { color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0 0 var(--space-4) var(--space-5); color: var(--ink-soft); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--ink-faint); }

/* ---------- Status list / model spec ---------- */
.spec-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  border-top: 1px solid var(--rule);
}
.spec-list li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.95rem;
}
.spec-list .k {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 2px;
}
.spec-list .v { color: var(--ink); }
@media (max-width: 540px) {
  .spec-list li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Model lineup ---------- */
.model-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--rule);
}
.model-row:first-of-type { border-top: 1px solid var(--rule); }
.model-row h3 { margin-bottom: var(--space-2); }
.model-row .lede { margin-bottom: var(--space-3); }
.model-id {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
}
@media (max-width: 760px) {
  .model-row { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ---------- Series page: detailed model cards ---------- */

.model-note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ---------- "What's here?" (specific models in a series) ---------- */
.whats-here-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.whats-here-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--space-5);
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base);
}
.whats-here-card:hover { border-color: var(--ink-faint); text-decoration: none; color: inherit; }
.whats-here-card h3 { margin-bottom: var(--space-2); font-size: 1.05rem; }
.whats-here-card .status { display: block; margin-bottom: var(--space-3); }
.whats-here-empty {
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  padding: var(--space-5);
  color: var(--ink-faint);
  font-style: italic;
}

/* ---------- Model detail page: capabilities & benchmarks ---------- */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.capability-item {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}
.capability-item .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-2);
}
.capability-item .v { color: var(--ink); }

.benchmark-table-wrap { overflow-x: auto; margin-top: var(--space-5); }
.benchmark-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.benchmark-table caption {
  text-align: left;
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin-bottom: var(--space-3);
}
.benchmark-table th,
.benchmark-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule-soft);
}
.benchmark-table thead th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}
.benchmark-table td.na { color: var(--ink-faint); font-style: italic; }
.benchmark-note {
  margin-top: var(--space-3);
  color: var(--ink-faint);
  font-size: 0.88rem;
}

/* ---------- Org chart ---------- */
.org {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) 0;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--cream);
  padding-block: var(--space-8) var(--space-6);
  margin-top: var(--space-9);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.footer-brand .brand-name { font-size: 1.1rem; }
.footer-brand p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  max-width: 32ch;
  margin-top: var(--space-3);
}
/* Footer column headings are <h2> so the document outline has no gaps.
   The small-caps label look is set here, not by the element's default size. */
.footer-col h2 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-4);
  margin-top: 0;
  font-weight: 600;
  line-height: 1.3;
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
}
.footer-col a:hover { color: var(--sea-deep); text-decoration: underline; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.footer-bottom a {
  color: var(--ink-faint);
  text-decoration: none;
}
.footer-bottom a:hover { color: var(--sea-deep); }

.social-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}
.social-links li { margin: 0; }
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  transition: color var(--t-fast), border-color var(--t-fast),
    background var(--t-fast);
}
.social-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.social-icon:hover {
  color: var(--sea-deep);
  border-color: var(--sea-deep);
  background: rgba(74, 124, 130, 0.06);
}

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- News list ---------- */
.news-item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast);
}
.news-item:hover { text-decoration: none; color: inherit; }
.news-item:hover .news-title { color: var(--sea-deep); }
.news-item:first-child { border-top: none; }
.news-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}
.news-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
  transition: color var(--t-fast);
}
.news-title + .news-excerpt { color: var(--ink-soft); font-size: 0.92rem; margin-top: var(--space-2); }
.news-cat {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.directory-controls {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  position: relative;
}
.directory-search { flex: 1; min-width: 0; }
.directory-search input {
  width: 100%; min-height: 2.5rem; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0; background: transparent; color: var(--ink); font: inherit; padding: .4rem 0;
}
.directory-search input::placeholder { color: var(--ink-faint); }
.directory-search input:focus { outline: 0; border-bottom-color: var(--sea-deep); }
.directory-filter { position: relative; }
.directory-filter summary {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; list-style: none;
  cursor: pointer; color: var(--ink-soft); transition: color var(--t-fast), background var(--t-fast);
}
.directory-filter summary::-webkit-details-marker { display: none; }
.directory-filter summary svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.directory-filter[open] summary, .directory-filter:hover summary, .directory-filter summary:focus { color: var(--sea-deep); background: rgba(74, 124, 130, .07); outline: 0; }
.directory-menu {
  position: absolute; z-index: 5; right: 0; top: calc(100% + 10px); width: 230px;
  padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--cream-light); box-shadow: 0 12px 30px rgba(31, 38, 39, .12);
}
.directory-filter:not([open]):hover .directory-menu { display: block; }
.directory-menu-label { margin: 0 0 var(--space-2); padding: 0 var(--space-2); color: var(--ink-faint); font: .66rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.directory-option { display: block; width: 100%; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-soft); cursor: pointer; font: inherit; font-size: .9rem; padding: .55rem var(--space-2); text-align: left; transition: background var(--t-fast), color var(--t-fast); }
.directory-option:hover, .directory-option:focus-visible { background: rgba(74, 124, 130, .08); color: var(--sea-deep); outline: 0; }
.directory-option.is-selected { color: var(--sea-deep); font-weight: 600; }
.directory-empty { margin-top: var(--space-5); color: var(--ink-soft); }
.course-directory { padding-top: var(--space-7); }
.course-empty-state { color: var(--ink-soft); margin: 0 0 var(--space-7); }
.course-list { border-top: 1px solid var(--rule); }
.course-item { padding: var(--space-6) 0 var(--space-7); border-bottom: 1px solid var(--rule); }
.course-item-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.course-item h2 { margin: var(--space-3) 0; font-family: var(--font-serif); font-size: clamp(1.55rem, 2.4vw, 2.15rem); font-weight: 500; line-height: 1.1; }
.course-excerpt { max-width: 72ch; color: var(--ink-soft); }
.course-status { color: var(--sea-deep); font: .68rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.course-meta { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-5); }
.course-meta div { display: grid; gap: 2px; }
.course-meta dt { color: var(--ink-faint); font: .65rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.course-meta dd { margin: 0; color: var(--ink-soft); font: .82rem var(--font-mono); }
@media (max-width: 640px) { .course-meta { gap: var(--space-4); } }
@media (max-width: 640px) {
  .news-item { grid-template-columns: 1fr; gap: var(--space-2); }
  .news-item .news-arrow { display: none; }
}

/* ---------- Placeholder figure ---------- */
.fig-ph {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--cream);
  overflow: hidden;
}
.fig-ph svg { width: 100%; height: auto; display: block; }
.ph-caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  padding: var(--space-3);
  border-top: 1px solid var(--rule-soft);
  background: var(--cream-light);
}

/* ---------- Hero / page intro ---------- */
/* The intro fills whatever container it is given, so it lines up with the
   sections below instead of sitting in a narrow centred column of its own.
   A 60ch cap here used to override .container-prose and .container-wide too,
   which is why every page intro was the same squashed width regardless of
   the modifier on it. Only the reading measure is capped now. */
.page-intro {
  padding-block: var(--space-9) var(--space-7);
}
.page-intro h1 {
  margin-bottom: var(--space-5);
  /* Long titles break into balanced lines rather than one very long one. */
  max-width: 26ch;
}
.page-intro .lede {
  color: var(--ink-soft);
  max-width: 72ch;
}

/* News posts: the body below is a prose column sitting at the left of a full
   container, so the intro has to do the same. Centring the intro block itself
   made the article step sideways between the headline and the first
   paragraph. Full container here, prose measure on the children. */
.page-intro.container-prose {
  max-width: var(--maxw);
}
.page-intro.container-prose > * {
  max-width: var(--maxw-prose);
}

/* ---------- Kova download thanks ---------- */
.kova-thanks {
  padding-block: var(--space-10) var(--space-9);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(74, 124, 130, 0.04), transparent 60%);
}
.kova-thanks-inner {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kova-thanks h1 {
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  margin-bottom: var(--space-5);
  letter-spacing: -0.02em;
}
.kova-thanks .lede {
  margin-bottom: var(--space-4);
  color: var(--ink-soft);
}
.kova-thanks .lede:last-of-type { margin-bottom: var(--space-6); }
.kova-thanks .btn-row {
  justify-content: center;
}

/* ---------- 404 ---------- */
.notfound {
  padding-block: var(--space-10) var(--space-9);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(74, 124, 130, 0.04), transparent 60%);
}
.notfound-inner {
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.notfound .code {
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 14vw, 8rem);
  line-height: 1;
  color: var(--hazelnut);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}
.notfound h1 {
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}
.notfound .lede {
  margin-bottom: var(--space-6);
  color: var(--ink-soft);
}
.notfound .btn-row {
  justify-content: center;
}

/* ---------- Utility ---------- */

.muted { color: var(--ink-faint); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.divider { height: 1px; background: var(--rule); border: none; margin: var(--space-6) 0; }
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Visually hidden (accessible label trick) ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Contact ---------- */

.contact-info {
  font-size: 0.96rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.contact-info h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--ink);
}
.contact-info h3:first-child { margin-top: 0; }
.contact-info p { margin-bottom: var(--space-3); }
.contact-info a { color: var(--sea-deep); text-decoration: none; border-bottom: 1px solid transparent; }
.contact-info a:hover { border-bottom-color: var(--sea-deep); }
.contact-email-inline {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: -0.25rem !important;
}
.contact-email-inline span { color: var(--ink); }

/* =========================================================================
   Status page
   Hand-updated. Each element's state is set with a single .is-* class,
   which drives both the dot colour and the label colour through --st.
   ========================================================================= */
:root {
  --st-ok:      #2F6E5F;            /* operational, monitoring — teal-green */
  --st-caution: #8A6410;            /* degraded, investigating — amber */
  --st-warn:    #B4531B;            /* identified, partial outage — orange */
  --st-major:   #99241A;            /* major outage / down — red */
  --st-muted:   var(--ink-faint);   /* resolved history */
}

/* State classes: each state gets its own colour (worse = warmer, then red).
   Sets the --st colour used by the dots and labels below. */
.is-operational,
.is-monitoring    { --st: var(--st-ok); }
.is-degraded,
.is-investigating { --st: var(--st-caution); }
.is-identified,
.is-partial       { --st: var(--st-warn); }
.is-major         { --st: var(--st-major); }
.is-resolved      { --st: var(--st-muted); }

/* Shared dot + label vocabulary */

/* Overall banner — clean hairline card; status is shown by the title colour */

/* Systems list */

/* Incidents */

/* Empty state + legend */
.status-empty {
  color: var(--ink-faint);
  font-size: 1rem;
  padding: var(--space-4) 0;
}

/* Nav spacing safety valve: eight items plus the CTA get tight between the
   desktop breakpoint and roughly a laptop width. */
@media (min-width: 821px) and (max-width: 1080px) {
  .nav-links { gap: var(--space-4); }

}

/* ---------- Touch targets ----------
   Footer and inline text links are 20-22px tall, which clears WCAG 2.5.8 only
   through the spacing exception. On touch screens the padding falls into
   existing line-height, so the hit area grows without moving anything. */
@media (max-width: 640px) {
  .footer-col ul a,
  .footer-bottom a,
  .prose a.arrow-link,
  .news-item {
    padding-block: 0.35rem;
  }
}