/* Congegno — congegno.marunja.com
   Hand-written, no framework, no CDN, no JavaScript.

   The colours are the app's own design tokens, copied value for value from
   frontend/src/styles/tokens.css: the light "paper" theme by default, the dark
   one when the system asks for it. There is no toggle — the page follows the
   reader's system, and every colour below goes through a custom property.

   The language is the app's too: flat grounds, hairline rules, square corners,
   no shadows, one accent, Inter for words and JetBrains Mono for labels, numbers
   and code, and the slanted accent tag the panels carry on their headers. */

/* ---- Fonts: self-hosted, Latin subset, SIL OFL 1.1 (see fonts/LICENSE-*.txt) ---- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

/* ---- Tokens ---- */

:root {
  /* Light, "paper" — the app's default theme. */
  --bg: #f4f4f0;
  --surface: #ffffff;
  --surface-2: #ecece6;
  --line: #d4d4cc;
  --stroke: #a3a39b;
  --wire: #6e6e68;
  --grid: #dcdcd4;
  --text: #0b0b0c;
  --dim: #5e5e58;
  --accent: #e0a800;        /* fills and bars only: yellow does not read as text on paper */
  --accent-text: #0b0b0c;   /* where the accent would be text or a focus ring */
  --on-accent: #0b0b0c;
  --danger: #d92d20;
  --ok: #1e9e5a;
  --ax-x: #d93a2f;
  --ax-y: #1e9e5a;
  --ax-z: #2f6fe0;
  --plot-2: #1c7fb8;
  --solid: #8f8f88;
  /* The units in the code sample wear the accent as a highlighter on paper. */
  --unit-mark: rgba(224, 168, 0, 0.32);

  --font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cut: 6px;
  --fast: 120ms;

  --wrap: 46rem;
  --wrap-wide: 76rem;
  --gutter: 1.25rem;
  --bar: 56px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c;
    --surface: #151517;
    --surface-2: #1c1c1f;
    --line: #2a2a2d;
    --stroke: #4b4b48;
    --wire: #8a8a86;
    --grid: #1f1f22;
    --text: #f4f4f0;
    --dim: #8a8a86;
    --accent: #ffd400;
    --accent-text: #ffd400;
    --on-accent: #0b0b0c;
    --danger: #ff3b30;
    --ok: #3ddc84;
    --ax-x: #ff5a4e;
    --ax-y: #3ddc84;
    --ax-z: #4d8dff;
    --plot-2: #7fd1ff;
    --solid: #c8c8c2;
    --unit-mark: rgba(255, 212, 0, 0.16);

    color-scheme: dark;
  }
}

/* ---- Base ---- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img,
video { height: auto; }

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

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

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

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

code,
pre,
kbd { font-family: var(--font-mono); }

:not(pre) > code {
  padding: 0.05em 0.35em;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.86em;
  white-space: nowrap;
}

/* The sticky bar must not cover the heading an anchor jumps to. */
[id] { scroll-margin-top: calc(var(--bar) + 1rem); }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus { top: 0.75rem; }

.wrap,
.wrap-wide {
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
.wrap-wide { max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); }

/* ---- The tag: the slanted accent marker on the app's panel headers ---- */

.kicker,
.panel-head,
.micro {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--dim);
}

.kicker::before,
.panel-head::before {
  content: "";
  flex: none;
  width: 22px;
  height: 10px;
  background: var(--accent);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.micro {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--dim);
}

/* ---- Top bar ---- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--bar);
}

/* The house before the product, as on the CleeCode site, kept to one quiet
   word: "Marunja / [mark] CONGEGNO". */
.brand-line {
  display: flex;
  align-items: center;
  min-width: 0;
}

.house {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}

.house:hover { color: var(--text); }

.house-sep {
  margin: 0 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--stroke);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  width: 28px;
  height: 28px;
}

.brand-word {
  width: auto;
  height: 13px;
}

.nav {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav a {
  padding: 0.5rem 0.7rem;
  color: var(--dim);
  text-decoration: none;
}

.nav a:hover { color: var(--text); }

.nav .nav-lang {
  margin-left: 0.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  color: var(--text);
}

.nav .nav-lang:hover { border-color: var(--text); }

@media (max-width: 64rem) {
  .nav a:not(.nav-lang) { display: none; }
}

/* ---- Hero ---- */

.hero { padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(4rem, 9vw, 7rem); }

.lockup {
  width: min(100%, 34rem);
  height: auto;
  margin: 0 0 clamp(2.25rem, 5vw, 3.25rem);
  color: var(--text);
}

.lk-a { fill: var(--accent); }
.lk-bg { fill: var(--bg); }

.lk-tagline {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 6px;
}

.hero h1 {
  font-size: clamp(2.3rem, 7.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
}

.hero h1 .line { display: block; }

/* The last beat underlined in the accent, like the rule under the wordmark. */
.hero h1 .line:last-child {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}

.lead {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  max-width: 40rem;
}

.hero .lead { margin-top: clamp(1.5rem, 3vw, 2rem); }

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2.25rem 0 0;
}

.platforms {
  margin: 1.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--dim);
}

/* ---- Buttons ---- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--wire);
  border-radius: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fast) linear, color var(--fast) linear;
}

/* The primary action, cut at 45 degrees on two corners like the mark's joints. */
.button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.button.primary:hover {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

/* The clip would hide an outer ring, so the primary one draws it inside. */
.button.primary:focus-visible {
  outline: 2px solid var(--on-accent);
  outline-offset: -6px;
}

.button.primary:hover:focus-visible { outline-color: var(--bg); }

.button.is-soon {
  border-style: dashed;
  color: var(--dim);
  cursor: default;
}

.soon {
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- The drawing under the hero ---- */

.hero-visual { margin-top: clamp(3rem, 6vw, 4.5rem); }

.hv {
  width: 100%;
  height: auto;
}

.hv text { font-family: var(--font-mono); }
.hv-bg { fill: var(--bg); stroke: var(--line); }
.hv-gl { fill: none; stroke: var(--grid); }
.hv-head { fill: var(--surface-2); }
.hv-rule { fill: none; stroke: var(--line); }
.hv-tag { fill: var(--accent); }
.hv-h { fill: var(--dim); font-size: 12px; letter-spacing: 0.1em; }
.hv-blk { fill: var(--surface); stroke: var(--stroke); }
.hv-sel { stroke: var(--accent); stroke-width: 2; }
.hv-tab { fill: var(--surface-2); stroke: var(--stroke); }
.hv-tabt { fill: var(--dim); font-size: 7.5px; letter-spacing: 0.08em; }
.hv-t { fill: var(--text); font-size: 12px; letter-spacing: 0.08em; }
.hv-p { fill: var(--dim); font-size: 11px; }
.hv-pl { fill: var(--dim); font-size: 9px; letter-spacing: 0.08em; }
.hv-sp { fill: var(--wire); }
.hv-fp { fill: var(--text); }
.hv-sig { fill: none; stroke: var(--wire); stroke-width: 1.5; }
.hv-mech { fill: none; stroke: var(--text); stroke-width: 2; }
.hv-trace { fill: none; stroke: var(--plot-2); stroke-width: 2; stroke-linejoin: round; }
.hv-thin { stroke-width: 1.25; }
.hv-ground { stroke: var(--stroke); stroke-width: 1.5; }
.hv-hatch { stroke: var(--stroke); }
.hv-solid { fill: var(--solid); stroke: var(--text); stroke-width: 1.5; }
.hv-joint { fill: var(--accent); stroke: var(--text); }
.hv-ref { stroke: var(--dim); stroke-dasharray: 4 4; }
.hv-arc { fill: none; stroke: var(--accent); stroke-width: 2; }
.hv-axx { stroke: var(--ax-x); stroke-width: 2; }
.hv-axz { stroke: var(--ax-z); stroke-width: 2; }
.hv-lead { stroke: var(--dim); }
.hv-ov { fill: var(--surface); stroke: var(--line); }
.hv-axis { stroke: var(--line); }
.hv-zero { stroke: var(--line); stroke-dasharray: 2 4; }
.hv-tick { fill: var(--dim); font-size: 10px; }
.hv-now { stroke: var(--accent); stroke-width: 1.5; }
.hv-barbox { fill: none; stroke: var(--stroke); }
.hv-dot { fill: var(--bg); }
.hv-patch { fill: var(--bg); }
.hv-goto { fill: var(--surface); stroke: var(--stroke); }
.hv-glyph { color: var(--text); }

/* A run in progress: the hazard stripe, moving linearly (the app's running state). */
.hv-stripes {
  fill: var(--accent);
  animation: stripe-run 0.9s linear infinite;
}

@keyframes stripe-run {
  to { transform: translateX(12px); }
}

/* ---- Sections: one idea each ---- */

.slide {
  padding: clamp(4.5rem, 10vw, 8rem) 0;
  border-top: 1px solid var(--line);
}

.slide.alt { background: var(--surface); }

.slide h2 {
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
}

.slide h2 + .lead { margin-top: 1.5rem; }

.slide .lead + p,
.slide .lead + .lead { margin-top: 1rem; }

.body-copy {
  margin-top: 1rem;
  max-width: 40rem;
  color: var(--dim);
}

.note {
  max-width: 40rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--dim);
}

/* ---- Panels: figures framed the way the app frames its panels ---- */

figure { margin: 0; }

.figure-row { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.panel {
  border: 1px solid var(--line);
  background: var(--surface);
}

.slide.alt .panel { background: var(--bg); }

.panel-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 34px;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--dim);
  overflow-wrap: anywhere;
}

.panel > img {
  width: 100%;
  background: var(--surface-2);
}

/* The films are recorded at the app window's 1600 x 968. Anything else is
   letterboxed into that frame rather than cropped, so a row of films lines up. */
.panel video {
  width: 100%;
  aspect-ratio: 1600 / 968;
  object-fit: contain;
  background: var(--surface-2);
}

figcaption {
  max-width: var(--wrap);
  margin-top: 0.9rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--dim);
}

/* ---- Films ---- */

/* The flagship spans the row; the others share the rows below, two or three
   abreast, so a fourth film needs no change here. */
.films {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 4vw, 2.75rem) 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.film.is-flagship { grid-column: 1 / -1; }

.film figcaption h3 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}

.film.is-flagship figcaption h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

.film-frame { position: relative; }

/* Shown only while a video is still to come: build.sh marks such a figure
   is-pending, and leaves its sources out of the published page. */
.film-soon {
  display: none;
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.film-soon::before {
  content: "";
  width: 16px;
  height: 8px;
  background: var(--accent);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.film.is-pending .film-soon { display: inline-flex; }

/* ---- Code ---- */

.code {
  margin: 0;
  padding: 1.15rem 1.25rem 1.25rem;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.7;
  tab-size: 2;
  color: var(--text);
}

.code .k { color: var(--dim); }
.code .c { color: var(--dim); }
.code .x { color: var(--text); border-bottom: 1px dotted var(--wire); }

.code .u {
  padding: 0 1px;
  background: linear-gradient(transparent 55%, var(--unit-mark) 55%);
}

@media (prefers-color-scheme: dark) {
  .code .u {
    background: none;
    color: var(--accent-text);
  }
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .split .figure-row { margin-top: 0; }
}

/* ---- Cards ---- */

.cards {
  display: grid;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

@media (min-width: 44rem) {
  .cards { grid-template-columns: 1fr 1fr; }
}

.card {
  position: relative;
  padding: 1.75rem 1.5rem 2rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.card h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.card p:last-child {
  max-width: 30rem;
  color: var(--dim);
}

.glyph {
  width: 44px;
  height: 44px;
  color: var(--text);
  overflow: visible;
}

.glyph .a { stroke: var(--accent); }
.glyph .af { fill: var(--accent); }

/* ---- How it works: model, compiler, engine, run ---- */

.flow {
  display: grid;
  gap: 0;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.flow > li {
  position: relative;
  padding: 0 0 2.75rem 0;
}

.flow h3 {
  margin: 0 0 0.35rem;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.flow p:last-child { color: var(--dim); }

.flow .glyph {
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
}

.flow > li:last-child { padding-bottom: 0; }

/* The connector between two steps: a hairline with a 45-degree chevron.
   Down the page on a phone, across it on a wide screen. */
.flow-arrow {
  position: absolute;
  color: var(--wire);
}

.flow-arrow.is-v {
  left: 22px;
  bottom: 0.35rem;
  width: 20px;
  height: 32px;
}

.flow-arrow.is-h { display: none; }

@media (min-width: 56rem) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow > li { padding: 0 3rem 0 0; }
  .flow-arrow.is-v { display: none; }
  .flow-arrow.is-h {
    display: block;
    top: 22px;
    right: 0.6rem;
    width: 36px;
    height: 20px;
  }
}

/* ---- Domains: the six glyphs of the logo, and two machines that need several ---- */

.domains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

@media (min-width: 42rem) {
  .domains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 68rem) {
  .domains { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.domain {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.domain-glyph {
  width: 100%;
  max-width: 7.5rem;
  height: auto;
  margin: 0 0 1rem;
  color: var(--text);
}

/* Planned domains keep their glyph, a step back; the label says why. */
.domain.is-planned .domain-glyph { opacity: 0.45; }

.domain h3 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.domain p:not(.micro):not(.domain-state) {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--dim);
}

.domain-state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.domain-state::before {
  content: "";
  width: 14px;
  height: 8px;
  border: 1px solid var(--text);
  background: var(--text);
}

.domain.is-planned .domain-state { color: var(--dim); }

.domain.is-planned .domain-state::before {
  border: 1px dashed var(--wire);
  background: none;
}

/* Two machines drawn on the canvas, as Congegno will build them. */
.examples {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.example figcaption .micro { margin-bottom: 0.4rem; }

.example figcaption h3 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ---- Status ---- */

.milestones {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.ms {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}

.ms-id {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1.5;
}

.ms h3 {
  font-size: 1.15rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.ms p { color: var(--dim); }

.ms-state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.ms-state::before {
  content: "";
  width: 22px;
  height: 10px;
  border: 1px solid var(--wire);
}

.ms.is-done .ms-state::before {
  border-color: var(--text);
  background: var(--text);
}

/* In progress: the hazard stripe, the app's running state. */
.ms.is-now .ms-state::before {
  border-color: var(--accent);
  background: repeating-linear-gradient(-45deg, var(--accent) 0 3px, transparent 3px 6px);
}

.ms.is-next .ms-state { color: var(--dim); }

@media (min-width: 44rem) {
  .ms {
    grid-template-columns: 4rem minmax(0, 1fr) 9.5rem;
    align-items: baseline;
  }
  .ms-id { grid-row: auto; }
  .ms-body { grid-column: 2; }
  .ms-state {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-top: 0;
  }
}

/* ---- Open source ---- */

.stack {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.stack li {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.stack-name {
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.stack-role { color: var(--dim); }

@media (min-width: 40rem) {
  .stack li { grid-template-columns: 9rem minmax(0, 1fr); }
}

/* ---- Footer ---- */

footer {
  padding: 3rem 0 3.5rem;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: grid;
  gap: 1.25rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-brand .brand-mark {
  width: 24px;
  height: 24px;
}

.footer-brand .brand-word { height: 11px; }

.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--dim);
}

.footer-meta .sep {
  margin: 0 0.5rem;
  color: var(--stroke);
}

.footer-meta a { color: var(--text); }

@media (min-width: 52rem) {
  .footer-inner {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .footer-meta { text-align: right; }
  .counter { grid-column: 2; justify-content: flex-end; }
}

/* The visit counter: an eye for visits, two heads for unique visitors, as on the CleeCode site. It stays out of the
   layout until /counter.js fills it in. */
.counter {
  display: flex;
  gap: 0.9rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--dim);
}
.counter[hidden] { display: none; }

.counter-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
}

.counter-icon {
  width: 13px;
  height: 13px;
  flex: none;
}

/* ---- Small pages: 404 ---- */

.page-simple {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-simple main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.page-simple h1 {
  font-size: clamp(2.2rem, 6.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.page-simple .lead { margin-top: 1.5rem; }
.page-simple .cta { margin-top: 2rem; }

.also {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
}

/* ---- Small screens ---- */

@media (max-width: 25rem) {
  :root { --gutter: 1rem; }
  body { font-size: 16px; }
  .cta .button { flex: 1 1 100%; }
  .card { padding: 1.5rem 1.15rem 1.75rem; }
  .code { font-size: 0.78rem; }
}

/* ---- The scroll: each block rises and lights up as it enters the viewport ----
   The same pure-CSS, scroll-driven animation as the CleeCode site: no script.
   Browsers without animation-timeline get the page unchanged, and a reader who
   asked for reduced motion is taken at their word. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .slide > .wrap,
    .split > div,
    .slide figure,
    .cards,
    .domains,
    .flow {
      animation: rise-in both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    .slide figure { animation-range: entry 0% entry 70%; }

    @keyframes rise-in {
      from {
        opacity: 0;
        transform: translateY(44px) scale(0.985);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}

/* ---- Motion and contrast preferences ---- */

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

@media (forced-colors: active) {
  .kicker::before,
  .panel-head::before,
  .film-soon::before,
  .ms-state::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
  .button.primary { border: 1px solid ButtonText; }
}