/* ==========================================================================
   objective-z.org — hand-written, zero dependencies.
   Light palette lives on bare :root. Dark is declared twice (media query +
   [data-theme]) so the manual toggle wins in both directions.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Brand */
  --brand-slate: #2c3d4f;
  --brand-citrus: #d3cc4f;

  /* Surfaces */
  --bg: #ffffff;
  --bg-subtle: #f6f8fa;
  --bg-code: #f2f5f7;
  --bg-header: rgba(255, 255, 255, 0.86);

  /* Lines */
  --line: #e3e8ed;
  --line-strong: #cbd4dd;

  /* Ink */
  --ink: #1f2c39;
  --ink-muted: #576877;
  --ink-faint: #7b8a99;
  --heading: #2c3d4f;

  /* Interactive */
  --link: #1b5a82;
  --link-hover: #113f5f;
  --accent: #d3cc4f;
  --accent-line: #cfc85a;
  --accent-soft: #fbf8e0;
  --focus: #1b5a82;

  /* Verdict colors for comparison tables */
  --good: #196f4b;
  --bad: #9d4527;

  /* Primary button */
  --btn-bg: #2c3d4f;
  --btn-bg-hover: #1e2b38;
  --btn-fg: #f4f8fb;

  /* Syntax */
  --syn-comment: #78879a;
  --syn-keyword: #1b5a82;
  --syn-directive: #86680d;
  --syn-type: #17694a;
  --syn-fn: #2c3d4f;
  --syn-literal: #99422a;
  --syn-pp: #6c7b8a;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Metrics */
  --measure: 72ch;
  --wide: 1120px;
  --radius: 8px;
  --radius-sm: 5px;
}

/* Dark — system preference, unless the user forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141d26;
    --bg-subtle: #1b2632;
    --bg-code: #0f1720;
    --bg-header: rgba(20, 29, 38, 0.86);

    --line: #2a3947;
    --line-strong: #3c4f62;

    --ink: #dbe4ec;
    --ink-muted: #9aabba;
    --ink-faint: #7d8e9d;
    --heading: #ecf2f7;

    --link: #7cc0e8;
    --link-hover: #a8d8f5;
    --accent: #d9d264;
    --accent-line: #8d883c;
    --accent-soft: #24251a;
    --focus: #7cc0e8;

    --good: #5cc48c;
    --bad: #e2916f;

    --btn-bg: #d3cc4f;
    --btn-bg-hover: #e2dc6b;
    --btn-fg: #17212b;

    --syn-comment: #7d8e9d;
    --syn-keyword: #7cc0e8;
    --syn-directive: #d9d264;
    --syn-type: #5cc48c;
    --syn-fn: #eaf1f7;
    --syn-literal: #e2916f;
    --syn-pp: #93a4b4;
  }
}

/* Dark — explicit choice, beats the media query */
:root[data-theme="dark"] {
  --bg: #141d26;
  --bg-subtle: #1b2632;
  --bg-code: #0f1720;
  --bg-header: rgba(20, 29, 38, 0.86);

  --line: #2a3947;
  --line-strong: #3c4f62;

  --ink: #dbe4ec;
  --ink-muted: #9aabba;
  --ink-faint: #7d8e9d;
  --heading: #ecf2f7;

  --link: #7cc0e8;
  --link-hover: #a8d8f5;
  --accent: #d9d264;
  --accent-line: #8d883c;
  --accent-soft: #24251a;
  --focus: #7cc0e8;

  --good: #5cc48c;
  --bad: #e2916f;

  --btn-bg: #d3cc4f;
  --btn-bg-hover: #e2dc6b;
  --btn-fg: #17212b;

  --syn-comment: #7d8e9d;
  --syn-keyword: #7cc0e8;
  --syn-directive: #d9d264;
  --syn-type: #5cc48c;
  --syn-fn: #eaf1f7;
  --syn-literal: #e2916f;
  --syn-pp: #93a4b4;
}

/* --------------------------------------------------------------- base ---- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  color: var(--heading);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.95rem, 1.4rem + 2.3vw, 2.95rem);
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem);
}
h3 {
  font-size: 1.14rem;
  letter-spacing: -0.005em;
}
h4 {
  font-size: 0.98rem;
}

p,
ul,
ol {
  margin: 0 0 1.1em;
  max-width: var(--measure);
}

a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

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

code,
kbd,
samp {
  font-family: var(--mono);
  font-size: 0.875em;
}

:not(pre) > code {
  background: var(--bg-code);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.34em;
  white-space: nowrap;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

img,
svg {
  max-width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  transition: top 120ms ease;
}

.skip-link:focus {
  top: 0.5rem;
}

/* ------------------------------------------------------------ scaffold ---- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

section {
  padding-block: clamp(3rem, 6vw, 5.25rem);
  border-top: 1px solid var(--line);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}

.lede {
  font-size: 1.12rem;
  color: var(--ink-muted);
  max-width: 68ch;
}

.note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: 78ch;
  margin-top: 0.9rem;
}

/* -------------------------------------------------------------- header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-header);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header > .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--heading);
  text-decoration: none;
  margin-right: auto;
}

.brand:hover {
  color: var(--heading);
}

.brand svg {
  flex: none;
}

.nav {
  display: flex;
  gap: 1.25rem;
  font-size: 0.925rem;
}

.nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}

.nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
}

/* Theme control */
.theme-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  cursor: pointer;
}

.theme-btn:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.theme-btn svg {
  flex: none;
}

.theme-btn .theme-icon-dark,
.theme-btn .theme-icon-auto {
  display: none;
}

:root[data-theme="dark"] .theme-btn .theme-icon-light,
:root[data-theme="light"] .theme-btn .theme-icon-auto {
  display: none;
}

:root[data-theme="dark"] .theme-btn .theme-icon-dark {
  display: inline;
}

:root:not([data-theme]) .theme-btn .theme-icon-light,
:root:not([data-theme]) .theme-btn .theme-icon-dark {
  display: none;
}

:root:not([data-theme]) .theme-btn .theme-icon-auto {
  display: inline;
}

/* ---------------------------------------------------------------- hero ---- */

.hero {
  border-top: 0;
  padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}

/* The hero carries a full source/result split, so it gets the tour's wider
   measure. The prose inside keeps its own max-width. */
.hero > .wrap {
  max-width: 1400px;
}

.hero h1 {
  margin-bottom: 0.35em;
}

.hero-tagline {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.22rem);
  color: var(--ink-muted);
  max-width: 66ch;
  margin-bottom: 0;
}

.hero-pitch {
  font-size: 1.05rem;
  color: var(--ink-muted);
  max-width: 62ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.9rem 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 550;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 0.58rem 1.05rem;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--bg-subtle);
}

.btn:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.btn-primary {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}

.btn-primary:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: var(--btn-fg);
}

/* ------------------------------------------------------------ pipeline ---- */

.pipeline {
  margin: 0 0 2.25rem;
  padding: 1.5rem 1.25rem;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.pipeline svg {
  display: block;
  width: 100%;
  height: auto;
}

.pipe-box {
  fill: var(--bg);
  stroke: var(--line-strong);
}

.pipe-box-accent {
  fill: var(--accent-soft);
  stroke: var(--accent-line);
}

.pipe-label {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
}

.pipe-label-sm {
  fill: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10px;
}

.pipe-arrow {
  stroke: var(--ink-faint);
  fill: none;
}

.pipe-arrow-head {
  fill: var(--ink-faint);
}

/* --------------------------------------------------------------- lists ---- */

.tight {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.93rem;
}

.tight li {
  padding: 0.3rem 0 0.3rem 1rem;
  position: relative;
  color: var(--ink-muted);
}

.tight li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 5px;
  height: 1px;
  background: var(--accent-line);
}

.tight strong,
.tight code {
  color: var(--ink);
}

/* -------------------------------------------------------------- tables ---- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 1.5rem 0;
  background: var(--bg);
}

.table-scroll:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

caption {
  text-align: left;
  font-size: 0.85rem;
  color: var(--ink-faint);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
}

th,
td {
  padding: 0.52rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

thead th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg-subtle);
}

tbody tr:last-child td {
  border-bottom: 0;
}

th.num {
  text-align: right;
}

td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 0.85rem;
}

td.notes {
  white-space: normal;
  color: var(--ink-muted);
  font-size: 0.85rem;
  min-width: 14rem;
}

tbody th {
  font-weight: 500;
}

tr.total td,
tr.total th {
  font-weight: 650;
  background: var(--bg-subtle);
}

.good {
  color: var(--good);
}

.bad {
  color: var(--bad);
}

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

/* ---------------------------------------------------------------- code ---- */

pre {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  background: var(--bg-code);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.855rem;
  line-height: 1.6;
  tab-size: 4;
}

pre code {
  font-size: inherit;
  color: var(--ink);
}

/* --------------------------------------------------- transpiler callout ---
   Marks a line that exists only because the transpiler put it there. The tag
   is real text (not generated content) so it survives with CSS off, and is
   user-select: none so copying the snippet does not carry the annotation.
   ------------------------------------------------------------------------ */

pre code .add {
  display: block;
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  margin-inline: -1.1rem;
  padding-inline: calc(1.1rem - 3px) 1.1rem;
}

.add-tag {
  margin-left: 1.5rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--syn-directive);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.add-tag::before {
  content: "\2190\00a0";
}

/* -------------------------------------------------------------- syntax ---
   Token spans are baked into the markup by tools/highlight.py -- there is no
   runtime highlighter. Class names are scoped to pre>code deliberately: they
   are short enough to collide with layout classes otherwise.
   ------------------------------------------------------------------------ */

pre code .c {
  color: var(--syn-comment);
  font-style: italic;
}

pre code .k {
  color: var(--syn-keyword);
}

pre code .at {
  color: var(--syn-directive);
}

pre code .t {
  color: var(--syn-type);
}

pre code .fn {
  color: var(--syn-fn);
  font-weight: 600;
}

pre code .s,
pre code .n {
  color: var(--syn-literal);
}

pre code .pp {
  color: var(--syn-pp);
}

.filename {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin: 1.4rem 0 -0.9rem;
  display: block;
}

/* ------------------------------------------------------------ code tour ---
   Left: the whole example file. Right: the generated C, pinned, with the
   region matching whatever the reader is looking at lit up.

   Everything interactive is gated on BOTH a min-width and [data-tour="on"],
   which js/tour.js sets. With JS off, or on a narrow screen, this degrades to
   a plain listing followed by the generated C and all the captions -- fully
   legible, nothing dimmed.
   -------------------------------------------------------------------------- */

.wrap-tour {
  max-width: 1400px;
}

.tour {
  margin-top: 2rem;
}

.tour-code > pre,
.tour-out > pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.795rem;
  line-height: 1.55;
}

.tour-code {
  background: var(--bg-code);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.tour-code > pre {
  overflow-x: auto;
  padding: 1rem 1.1rem;
}

.tour .g {
  display: block;
}

.tour-notes {
  margin-bottom: 1rem;
}

.tour-note {
  font-size: 0.93rem;
  color: var(--ink-muted);
  margin: 0 0 0.8rem;
  max-width: none;
}

.tour-note b {
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.tour-out {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1rem;
}

.tour-out > pre {
  padding: 1rem 1.1rem;
  overflow: auto;
  /* Makes this the offsetParent for the groups inside, so tour.js can scroll
     to an absolute offset instead of a delta from the current position -- the
     latter reads wrong mid-animation. */
  position: relative;
}

@media (min-width: 62rem) {
  .tour {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
  }

  .tour-panel {
    position: sticky;
    top: 4.25rem;
  }

  /* A sticky element releases at the bottom of its containing block, which
     would drag the panel up behind the header during the final steps. Extend
     the scrolling column past its last group so the panel stays pinned until
     the tour is genuinely over. The space is outside the code box, so it reads
     as section padding. */
  .tour[data-tour="on"] .tour-code {
    margin-bottom: 34vh;
  }

  .tour-out {
    margin-top: 0;
  }

  .tour-out > pre {
    max-height: calc(100vh - 15rem);
  }

  /* Reserve caption height so switching steps does not shift the panel. */
  .tour[data-tour="on"] .tour-notes {
    min-height: 6.5rem;
  }

  .tour[data-tour="on"] .tour-note {
    display: none;
  }

  .tour[data-tour="on"] .tour-note.is-active {
    display: block;
  }

  /* Left: mark the active region without dimming anything -- this column is
     what the reader is actually reading. */
  .tour[data-tour="on"] .tour-code .g {
    margin-left: -1.1rem;
    padding-left: calc(1.1rem - 3px);
    border-left: 3px solid transparent;
  }

  .tour[data-tour="on"] .tour-code .g.is-active {
    border-left-color: var(--accent);
    background: var(--accent-soft);
  }

  /* Hovering a group drives the panel, so say so on pointer devices. */
  @media (hover: hover) and (pointer: fine) {
    .tour[data-tour="on"] .tour-code .g:hover {
      border-left-color: var(--line-strong);
      cursor: default;
    }

    .tour[data-tour="on"] .tour-code .g.is-active:hover {
      border-left-color: var(--accent);
    }
  }

  /* Right: de-emphasise everything but the matching region. */
  .tour[data-tour="on"] .tour-out .g {
    opacity: 0.38;
    transition: opacity 160ms ease;
  }

  .tour[data-tour="on"] .tour-out .g.is-active {
    opacity: 1;
  }

  .tour[data-tour="on"] .tour-out .g + .g {
    margin-top: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour[data-tour="on"] .tour-out .g {
    transition: none;
  }
}

/* The generated-code box (the tour's right column). */
.pane {
  background: var(--bg-code);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  max-width: none;
  padding: 0.55rem 0.95rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.pane-tag {
  flex: none;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Filenames are case-sensitive -- never upper-case them. */
.pane-file {
  text-transform: none;
  letter-spacing: 0;
}

.pane pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  flex: 1;
  font-size: 0.795rem;
  line-height: 1.55;
}

/* --------------------------------------------------------- hero specifics ---- */

.hero-note {
  font-size: 0.95rem;
  color: var(--ink-muted);
  max-width: 76ch;
  margin-top: 1.35rem;
}

.metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.9rem;
  list-style: none;
  padding: 1.35rem 0 0;
  margin: 2.25rem 0 0;
  max-width: none;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.metrics b {
  font-size: 1.18rem;
  font-weight: 650;
  color: var(--heading);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-right: 0.3rem;
}

.metrics-meta {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin-left: auto;
}

/* ----------------------------------------------------------- disclosure ---- */

details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  margin: 1rem 0;
}

details + details {
  margin-top: 0.6rem;
}

summary {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-weight: 550;
  color: var(--heading);
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "";
  flex: none;
  align-self: center;
  width: 0;
  height: 0;
  border-left: 5px solid var(--ink-faint);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 120ms ease;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  summary::before {
    transition: none;
  }
}

summary:hover {
  color: var(--link);
}

summary .hint {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.83rem;
  color: var(--ink-faint);
  text-align: right;
}

.details-body {
  padding: 0.35rem 1.1rem 1.2rem;
  border-top: 1px solid var(--line);
}

.details-body > :last-child {
  margin-bottom: 0;
}

.details-body h3 {
  margin-top: 1.75rem;
}

.details-body > h3:first-child {
  margin-top: 0.9rem;
}

.details-body .pipeline {
  margin-top: 1.1rem;
}

/* ---------------------------------------------------------- quick start ---- */

.start-grid {
  display: grid;
  /* 24rem keeps this to two columns; at 20rem it became three and the
     code lines no longer fit. */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 0 1.75rem;
  margin-top: 1.75rem;
}

.start-grid pre {
  margin-top: 0.35rem;
}

/* -------------------------------------------------------------- footer ---- */


.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.75rem 3.25rem;
  background: var(--bg-subtle);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 3rem;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-logo img {
  height: 34px;
  width: auto;
}

.footer-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0.7rem 0 0;
  max-width: 34ch;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: 0.9rem;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links h4 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.footer-links li {
  padding: 0.16rem 0;
}

.footer-links a {
  color: var(--ink-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--link);
  text-decoration: underline;
}

/* Theme-swapped logo pair. Keep every rule here at class-only specificity or
   higher than any element rule that could set `display` on the same images. */
.only-light {
  display: block;
}

.only-dark {
  display: none;
}

:root[data-theme="dark"] .only-light {
  display: none;
}

:root[data-theme="dark"] .only-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light {
    display: none;
  }
  :root:not([data-theme="light"]) .only-dark {
    display: block;
  }
  :root[data-theme="light"] .only-light {
    display: block;
  }
  :root[data-theme="light"] .only-dark {
    display: none;
  }
}

/* ------------------------------------------------------------- narrow ---- */

@media (max-width: 46rem) {
  body {
    font-size: 1rem;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0.35rem clamp(1.15rem, 4vw, 2.5rem) 0.85rem;
    box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.45);
  }

  .nav a {
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--line);
  }

  .nav a:last-child {
    border-bottom: 0;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink-muted);
    background: var(--bg-subtle);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    cursor: pointer;
    margin-left: auto;
  }

  .nav-toggle[aria-expanded="false"] + .nav {
    display: none;
  }

  .site-header > .wrap {
    position: relative;
  }

  .brand {
    margin-right: 0;
  }
}

@media (max-width: 30rem) {
  .footer-links {
    gap: 1.25rem 1.75rem;
  }

  }

/* -------------------------------------------------------------- print ---- */

@media print {
  .site-header,
  .cta-row,
  .theme-btn,
  .nav-toggle {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }

  .table-scroll,
  pre {
    break-inside: avoid;
  }
}

/* --------------------------------------------------- progressive enhance ---
   The theme and nav buttons ship with [hidden] in the markup; js/theme.js
   unhides them. With JS off the nav renders as a plain stacked list and the
   theme still follows prefers-color-scheme — nothing depends on the buttons.
   -------------------------------------------------------------------------- */

.theme-btn[hidden],
.nav-toggle[hidden] {
  display: none !important;
}