/* Layout concept: a surveyor's field sheet. One reading column with a
   wide gutter for figures, contour linework in the hero, mono ids for
   everything the model actually calls. */
:root {
  --paper: #f2f5f7;
  --sheet: #ffffff;
  --ink: #142230;
  --muted: #4a5b69;
  --line: #c8d3db;
  --contour: #d5dee5;
  --accent: #0a6680;
  --accent-ink: #ffffff;
  --signal: #a3401b;
  --signal-bg: #fbeee8;
  --code-bg: #e6ecf0;

  /* System font stacks only: the page makes no external requests. */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.2rem, 5vw, 3.4rem);

  --measure: 68ch;
  --wide: 72rem;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d151c;
    --sheet: #131e27;
    --ink: #e2e9ee;
    --muted: #a3b2be;
    --line: #2b3a46;
    --contour: #1c2a35;
    --accent: #5fc1dc;
    --accent-ink: #062431;
    --signal: #f0936c;
    --signal-bg: #2a1a13;
    --code-bg: #1a2731;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d151c;
  --sheet: #131e27;
  --ink: #e2e9ee;
  --muted: #a3b2be;
  --line: #2b3a46;
  --contour: #1c2a35;
  --accent: #5fc1dc;
  --accent-ink: #062431;
  --signal: #f0936c;
  --signal-bg: #2a1a13;
  --code-bg: #1a2731;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}

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

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

code, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--code-bg); padding: 0.08em 0.35em; border-radius: 3px; overflow-wrap: anywhere; }
pre {
  background: var(--code-bg);
  padding: 0.9rem 1rem;
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.45;
  margin: 0;
}
pre code { background: none; padding: 0; overflow-wrap: normal; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
h2 { font-size: var(--step-2); font-weight: 700; font-stretch: 87.5%; }
h3 { font-size: var(--step-1); font-weight: 650; }
p { margin: 0; max-width: var(--measure); }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: var(--accent-ink); padding: 0.5rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

.wrap {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- top bar ---------- */
.topbar {
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1.5rem; padding-block: 0.8rem;
}
.brand { font-family: var(--font-display); font-weight: 700; font-stretch: 87.5%; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; }
.topbar nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .contours {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.hero .contours path { fill: none; stroke: var(--contour); stroke-width: 1.4; }
.hero .contours .index { stroke-width: 2.4; }
.hero .wrap { position: relative; display: grid; gap: 1.4rem; padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.hero h1 { font-size: var(--step-3); font-weight: 800; font-stretch: 75%; letter-spacing: -0.01em; max-width: 18ch; }
.hero .lede { font-size: var(--step-1); line-height: 1.5; max-width: 52ch; }
.status {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem;
  font-size: var(--step--1); color: var(--muted);
}
.pill {
  display: inline-block; border: 1.5px solid var(--signal); color: var(--signal);
  background: var(--signal-bg);
  border-radius: 999px; padding: 0.1rem 0.7rem; font-weight: 600;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.03em;
}
.ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn {
  display: inline-block; padding: 0.65rem 1.15rem; border-radius: 4px;
  font-weight: 600; text-decoration: none; border: 1.5px solid var(--accent);
}
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.secondary { color: var(--accent); background: var(--sheet); }
.btn:hover { text-decoration: underline; }

/* ---------- sections ---------- */
main > section { border-bottom: 1px solid var(--line); }
main > section > .wrap { display: grid; gap: 1.5rem; padding-block: clamp(2.5rem, 6vw, 4rem); }
.section-head { display: grid; gap: 0.6rem; }
.section-head .eyebrow { color: var(--accent); }
.prose { display: grid; gap: 1rem; }

.figure {
  background: var(--sheet); border: 1px solid var(--line); border-radius: 4px;
  padding: clamp(0.75rem, 2vw, 1.25rem); margin: 0;
}
.figure figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 0.75rem; max-width: var(--measure); }

/* architecture diagram */
.diagram { width: 100%; height: auto; }
.diagram .box { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.diagram .box.host { fill: var(--paper); stroke: var(--line); stroke-dasharray: 6 4; }
.diagram .box.key { stroke: var(--accent); stroke-width: 2.2; }
.diagram .box.person { fill: var(--signal-bg); stroke: var(--signal); stroke-width: 2; }
.diagram .t { fill: var(--ink); font-family: var(--font-body); font-size: 15px; font-weight: 650; }
.diagram .s { fill: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.diagram .h { fill: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.diagram .edge { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.diagram .edge.dashed { stroke-dasharray: 5 4; stroke: var(--muted); }
.diagram .arrow { fill: var(--ink); }
.diagram .arrow.muted { fill: var(--muted); }
.diagram .e { fill: var(--accent); font-family: var(--font-mono); font-size: 12px; }
.diagram-narrow { display: none; max-width: 26rem; margin-inline: auto; }

/* model surface */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.split > * { min-width: 0; }
.figures {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.figures div { background: var(--sheet); padding: 1rem 1.1rem; display: grid; gap: 0.2rem; align-content: start; }
.figures b { font-family: var(--font-display); font-size: var(--step-2); font-stretch: 75%; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.figures span { font-size: var(--step--1); color: var(--muted); }

.list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; max-width: var(--measure); }
.tools { columns: 2; column-gap: 1.5rem; list-style: none; padding: 0; margin: 0; font-family: var(--font-mono); font-size: var(--step--1); }
.tools li { break-inside: avoid; padding-block: 0.12rem; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--sheet); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-weight: 650; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 700; border-top: 1.5px solid var(--ink); }
.tier { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }

.safety { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.safety > * { min-width: 0; }
.card-figure img { border: 1px solid var(--line); }

/* evidence gallery */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; display: grid; gap: 0.5rem; align-content: start; }
.gallery a { display: block; }
.gallery img { border: 1px solid var(--line); border-radius: 3px; aspect-ratio: 1200 / 776; object-fit: cover; width: 100%; }
.gallery figcaption { font-size: var(--step--1); color: var(--muted); }
.tools-title { font-size: var(--step--1); margin-bottom: 0.6rem; }
.table-note { text-align: left; padding: 0.6rem 0.85rem; caption-side: bottom; }

.scope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.scope > div { min-width: 0; display: grid; gap: 0.5rem; align-content: start; }
.scope h3 { font-size: var(--step-0); }

/* quick start */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 0.9rem; }
.steps > li::before {
  content: counter(step);
  font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: var(--step-1);
  color: var(--accent); border: 1.5px solid var(--accent); border-radius: 50%;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center; line-height: 1;
}
.steps > li > div { display: grid; gap: 0.6rem; min-width: 0; }
.snippet-label { font-size: var(--step--1); color: var(--muted); }

.note { font-size: var(--step--1); color: var(--muted); }

/* footer */
footer .wrap { display: grid; gap: 0.75rem; padding-block: 2.5rem 3rem; font-size: var(--step--1); color: var(--muted); }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

/* ---------- narrow screens: single column ---------- */
@media (max-width: 719px) {
  .split, .safety, .scope, .gallery { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .tools { columns: 1; }
  .diagram-wide { display: none; }
  .diagram-narrow { display: block; }
  .hero .contours { opacity: 0.55; }
  .topbar nav { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}