/* Variant E, Raster: Swiss typography. One sans serif in large, tight cuts, black on white,
   the spectrum as flat colour blocks and no rounded corners.
   Loaded after style.css and left unlayered, so every rule here wins over the layered base. */

:root {
  color-scheme: light;

  --bg: white;
  --surface: oklch(96% 0 0);
  --raised: white;
  --text: oklch(14% 0 0);
  --text-muted: oklch(36% 0 0);
  --rule: oklch(14% 0 0);
  --link: oklch(14% 0 0);
  --focus: oklch(55% 0.2 25);
  --grid: transparent;

  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "Instrument Sans", system-ui, sans-serif;
  --step-2: clamp(2.2rem, 1.6rem + 2.6vw, 3.8rem);
  --step-3: clamp(3.2rem, 2rem + 5.6vw, 7rem);
  --radius: 0;
  --radius-control: 0;
  --shadow: none;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.045em; line-height: 0.95; }
h3 { letter-spacing: -0.02em; line-height: 1.1; }

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

.brand { font-weight: 600; letter-spacing: -0.03em; }
.paren { font-style: normal; color: var(--text); }
.bang, .hero .bang { background: none; color: var(--red); -webkit-background-clip: border-box; background-clip: border-box; }

.hero::before { display: none; }
.hero h1 { font-weight: 600; }

/* The spectrum appears as a flat block under each section title. */
.section-title::after {
  content: "";
  display: block;
  inline-size: 6rem;
  block-size: 0.5rem;
  margin-block-start: var(--space-s);
  background: var(--spectrum);
}

.section.tinted { background: var(--surface); }

a { text-decoration-thickness: 2px; }

.button {
  border: 2px solid var(--text);
  font-weight: 600;
  &.primary { background: var(--text); color: white; }
  &.primary:hover { background: var(--red); border-color: var(--red); }
}

.site-nav .nav-cta { background: var(--text); color: white; }
.site-nav .nav-cta:hover { background: var(--red); }

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

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

.state-label { background: var(--text); color: white; text-transform: uppercase; }
.tags li { box-shadow: 0 0 0 1.5px var(--text); }

.claims > div { border-inline-start-width: 0.5rem; }

.steps li::before { border-radius: 0; background: var(--c, var(--text)); color: white; }
.steps li:nth-child(1) { --c: var(--red); }
.steps li:nth-child(2) { --c: var(--orange); }
.steps li:nth-child(3) { --c: var(--green); }
.steps li:nth-child(4) { --c: var(--blue); }
.steps li:nth-child(5) { --c: var(--purple); }

.clients ul { font-weight: 600; letter-spacing: -0.03em; }

.cta { background: var(--text); }
.path { background: oklch(22% 0 0); box-shadow: none; }
.button.on-dark { background: white; color: var(--text); border-color: white; }
.button.on-dark-ghost { color: white; border-color: white; }
.site-footer { background: var(--text); }

.bar, .d-cell, .d-line { background: oklch(84% 0 0); stroke: oklch(84% 0 0); }

/* The motif as a Swiss poster, flat bands and a solid triangle. */
.m-band { opacity: 1; }
.m-prism { fill: var(--text); stroke: none; }
.m-beam { stroke-width: 6; stroke-linecap: butt; }