/* Variant C, Edition: classic book typography. EB Garamond throughout, black on white and
   rubric red as the only accent, after the red headings of medieval manuscripts.
   Loaded after style.css and left unlayered, so every rule here wins over the layered base. */

:root {
  color-scheme: light;

  --rubric: oklch(50% 0.17 28);
  --red: var(--rubric);
  --orange: var(--rubric);
  --yellow: oklch(80% 0.06 28);
  --green: oklch(35% 0 0);
  --cyan: oklch(60% 0 0);
  --blue: oklch(45% 0 0);
  --purple: var(--rubric);
  --pink: oklch(70% 0.08 28);
  --ok: oklch(35% 0 0);

  --bg: white;
  --surface: oklch(97.5% 0.002 90);
  --raised: white;
  --text: oklch(18% 0 0);
  --text-muted: oklch(38% 0 0);
  --rule: oklch(82% 0 0);
  --link: var(--rubric);
  --focus: var(--rubric);
  --warn-bg: oklch(95% 0.03 28);
  --grid: transparent;

  --font-display: "EB Garamond", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;
  --font-mono: "EB Garamond", Georgia, serif;

  --step-0: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
  --radius: 0;
  --radius-control: 0;
  --shadow: none;
}

body { line-height: 1.5; }
h1, h2, h3 { font-weight: 500; letter-spacing: 0; }

.site-header {
  border-block-end: 3px double var(--text);
  &::after { display: none; }
}

.brand { font-size: 1.5rem; font-weight: 500; }
.bang, .hero .bang { background: none; color: var(--rubric); -webkit-background-clip: border-box; background-clip: border-box; }
.paren { color: var(--text-muted); }

/* Labels as small capitals, the classic way to set apart short technical words. */
.pane-label, .app-label, .tags li, .state-label, .fig-caption span, .abilities a, .clients h3 {
  font-family: var(--font-display);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
}

.state-label { background: none; color: var(--rubric); padding: 0; font-weight: 600; text-transform: none; }
.tags li { box-shadow: none; padding: 0; background: none; }
.tags li + li::before { content: "· "; color: var(--rubric); }

.hero::before { display: none; }
.hero h1 { font-weight: 500; font-size: clamp(3rem, 2rem + 4vw, 5.6rem); }

.section.tinted { background: var(--surface); }
.section-title { font-style: italic; }
.section-title::first-letter { color: var(--rubric); }

.button {
  border: 1px solid var(--text);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 500;
  &.primary { background: var(--text); color: white; }
  &.primary:hover { background: var(--rubric); border-color: var(--rubric); }
}

.site-nav a { font-size: 1.05rem; font-family: var(--font-body); }
.site-nav .nav-cta { background: var(--text); color: white; }
.site-nav .nav-cta:hover { background: var(--rubric); }

.shot, .app, .files, .diagram, .abilities li, .path, .shot.schema { border-radius: 0; box-shadow: 0 0 0 1px var(--text); }
.files { border: 0; }

.ability-icon { background: none; stroke: var(--rubric); border-radius: 0; }
.abilities li { background: white; }

.claims > div { border-inline-start-color: var(--rubric); border-inline-start-width: 1px; }

.steps li::before { background: none; color: var(--rubric); font-family: var(--font-display); font-size: 2.2rem; inline-size: auto; block-size: auto; justify-content: start; }

.clients ul { font-family: var(--font-display); font-weight: 500; font-style: italic; }

.cta { background: white; color: var(--text); border-block-start: 3px double var(--text); }
.cta .billing { color: var(--text-muted); }
.path { background: white; }
.path h3 { color: var(--text); }
.path > p { color: var(--text-muted); }
.ask li::before { color: var(--rubric); }
.button.on-dark { background: var(--text); color: white; border-color: var(--text); }
.button.on-dark-ghost { color: var(--text); border-color: var(--text); }

.site-footer { background: white; color: var(--text-muted); border-block-start: 1px solid var(--text); }
.footer-brand { color: var(--text); }

.ent.place { background: oklch(86% 0 0); }
.ent.date { background: oklch(88% 0.06 28); }

.variant-switch { border-color: var(--rule); }
.variant-switch p, .variant-switch a[aria-current="page"] { color: var(--text); }

/* The motif as an engraving, hatched shapes and a rubric spectrum. */
.m-prism { fill: url(#m-hatch); stroke-width: 1.5; }
.m-band { fill: var(--rubric); }
.b1, .b7 { opacity: 0.25; }
.b2, .b6 { opacity: 0.45; }
.b3, .b5 { opacity: 0.7; }
.b4 { opacity: 1; }
.m-beam { stroke-width: 1.5; }