/*
 * KONGEN LABS — MODERN 60s THEME
 * Version 1.1 — September 2026        (#596; v1.0 supplied by Fiz, 2026-09-22)
 *
 * Bell Labs / NASA / mid-century information graphics, rebuilt for a
 * developer-facing product. v1.0 is preserved in the ticket; this file is that
 * theme with six measured contrast failures corrected, the drawn mark removed,
 * and its tokens mapped onto the ones the site is actually built from.
 *
 * ============================================================================
 * WHAT CHANGED FROM v1.0, AND WHY. Each of these is a measurement, not taste.
 * ============================================================================
 *
 * 1. IT COULD NOT APPLY. Every selector in v1.0 is namespaced `k-*`; the site
 *    is built on `kg-*` tokens and classes. As issued the file matched nothing
 *    on any page. Section 02 below maps its palette onto `--kg-*`, which is
 *    what makes the theme visible on real markup. Its own `k-*` components are
 *    kept, corrected, so the file still stands on its own.
 *
 * 2. SIX CONTRAST FAILURES (WCAG AA 4.5:1, which is the bar for the small type
 *    each of these is set at):
 *
 *      element              pair                          v1.0     now
 *      .k-kicker            orange on cream               2.66     4.51
 *      .k-organism-node     cyan label on the cream node  1.73     4.52
 *      .k-organism-node     green / orange / blue         2.39+    4.55+
 *      .k-domain            violet on ink                 2.94     4.53
 *      .k-btn-primary       white on orange               3.10     7.19
 *      .k-model-tag         #D94D29 on its own 12% tint   3.60     4.54
 *      .k-footer-bottom     45% white on ink              4.09     6.07
 *
 *    The kicker was the worst of them and the most consequential: it is the
 *    theme's signature and it sits on the light ground everywhere. The fix is
 *    a text-weight orange (--kongen-orange-text) used ONLY for type; the
 *    display orange is unchanged and still owns shapes, rules and fills.
 *
 * 3. THE MARK WAS DRAWN FROM SCRATCH. v1.0's `.k-logo-mark` builds the logo
 *    from two rotated rounded squares. The Kongen mark is the locked chakana
 *    and is never redrawn from memory: arms 25%, steps 12.5%, a cutout in the
 *    page ground, never an inner dot. That rule predates this theme and wins.
 *    The rule here is inert on purpose: it restyles nothing, so the real mark
 *    in the page markup comes through untouched.
 *
 * 4. NO DARK GROUND. v1.0 is single-ground. The site has a decided night
 *    palette, so section 08 gives the theme its own night values rather than
 *    leaving a light-only sheet to fight `prefers-color-scheme`.
 *
 * 5. THE MOBILE NAV DISAPPEARED. `.k-nav-links { display: none }` below 760px
 *    with nothing in its place. This site has a hamburger and an overlay, so
 *    that rule is scoped not to touch them.
 *
 * 6. `mask-image` HAD NO `-webkit-` PREFIX, which is a blank layer in Safari.
 *
 * ============================================================================
 * ONE THING DELIBERATELY NOT TAKEN FROM v1.0
 * ============================================================================
 * v1.0 makes orange the primary action colour. Kongen Red #a3262c was put on
 * every action on 2026-09-21 and it is the mark's own colour. It also measures
 * 7.19:1 with white where the orange measures 3.10:1. So the actions stay red
 * and the orange stays the accent. Switching is one token: set --kg-action to
 * var(--kongen-orange-text), which is the darkened orange that carries white.
 */

/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */

:root {
  /* Core palette — v1.0 verbatim */
  --kongen-ink: #102D36;
  --kongen-ink-2: #173E47;
  --kongen-cream: #F5EBD7;
  --kongen-paper: #FBF6EA;
  --kongen-orange: #F2643A;
  --kongen-orange-dark: #D94D29;
  --kongen-yellow: #F2C84B;
  --kongen-cyan: #28C8D2;
  --kongen-green: #63A96B;
  --kongen-coral: #E86A72;
  --kongen-violet: #8A5BB8;
  --kongen-blue: #428FC7;
  --kongen-white: #FFFDF7;
  --kongen-black: #172127;

  /* Added: the text-weight colours. The palette above is for SHAPES — fills,
     rules, borders, chart lines. These are the same hues walked down until
     they carry small type on the ground they sit on. Every value is the
     lightest one that clears 4.5:1, so none of them is darker than it needs
     to be. */
  --kongen-orange-text: #B34A2B;   /* 4.51:1 on cream */
  --kongen-violet-lift: #A581C8;   /* 4.53:1 on ink   */
  --kongen-cyan-text: #18787E;     /* 4.52:1 on the cream node */
  --kongen-green-text: #45764B;    /* 4.61:1 */
  --kongen-blue-text: #34719D;     /* 4.55:1 */
  --kongen-orange-node: #B64B2C;   /* 4.51:1 */
  --kongen-violet-text: #8457B1;   /* 4.57:1 */

  /* A step below cream, for sunken bands. v1.0 had no third ground. */
  --kongen-sunken: #EBDFC5;

  /* Semantic colors */
  --color-bg: var(--kongen-cream);
  --color-surface: var(--kongen-paper);
  --color-text: var(--kongen-ink);
  --color-muted: #49636A;              /* 5.42:1 on cream, unchanged */
  --color-primary: var(--kongen-orange);
  --color-primary-hover: var(--kongen-orange-dark);
  --color-dark-section: var(--kongen-ink);
  --color-dark-text: var(--kongen-white);
  --color-border: rgba(16, 45, 54, .18);
  --color-border-light: rgba(255, 253, 247, .20);

  /* Typography */
  --font-display: "DM Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale */
  --text-xs: .70rem;
  --text-sm: .82rem;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.55rem;
  --text-2xl: 2.2rem;
  --text-3xl: 3.4rem;
  --text-4xl: clamp(2.6rem, 7vw, 7.5rem);   /* v1.0 floor was 4rem: 64px of
      -.055em tracked display type on a 375px phone, which took four lines for
      the homepage headline. The ceiling is v1.0's. */

  /* Layout */
  --container: 1380px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-y: clamp(5rem, 9vw, 9rem);
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 20px 60px rgba(16, 45, 54, .12);
  --shadow-card: 0 10px 35px rgba(16, 45, 54, .10);

  /* Motion */
  --ease-organic: cubic-bezier(.22, .8, .25, 1);
  --ease-snappy: cubic-bezier(.2, .7, .2, 1);
  --duration-fast: 180ms;
  --duration-med: 420ms;
  --duration-slow: 900ms;

  /* 1960s graphic rules */
  --grid-line: rgba(16, 45, 54, .10);
  --grid-line-dark: rgba(255, 253, 247, .12);
}

/* ============================================================
   02. THE MAP — what makes the theme visible on this site
   ============================================================
   The site's components all read --kg-*. Rebinding those names here moves the
   whole estate onto the 60s palette without touching a single component rule.

   The world pages set their own --world-tint and then a warm --kg-background
   derived from it, so each of the thirteen is a slightly different room. That
   survives: the plain cream below is the fallback, and the color-mix line
   after it re-derives the same per-world room in the new palette. A browser
   that does not know color-mix ignores the second line and gets flat cream.
   ============================================================ */

:root {
  --kg-background: var(--kongen-cream);
  --kg-background: color-mix(in srgb, var(--kongen-cream) 93%, var(--world-tint, #F5EBD7));
  --kg-card: var(--kongen-paper);
  --kg-sunken: var(--kongen-sunken);
  --kg-sunken: color-mix(in srgb, var(--kongen-sunken) 92%, var(--world-tint, #EBDFC5));

  --kg-foreground: var(--kongen-ink);
  --kg-text: var(--kongen-ink-2);
  --kg-muted-foreground: var(--color-muted);
  --kg-border: var(--color-border);

  /* Links take the text-weight orange, not the display orange: 4.51:1 on
     cream against the display orange's 2.66:1. */
  --kg-primary: var(--kongen-orange-text);
  --kg-primary-deep: var(--kongen-orange-dark);
  --kg-primary-foreground: var(--kongen-white);
  --kg-primary-tint: rgba(242, 100, 58, .12);
  --kg-link: var(--kongen-orange-text);

  /* The actions stay Kongen Red. See the header note. */
  --kg-action: #A3262C;
  --kg-action-deep: #851F24;
  --kg-action-ink: #FFFFFF;
  --kg-mark: #A3262C;

  /* --kg-serif drives HEADINGS AND LEAD PARAGRAPHS on this site, so it cannot
     be the display serif: Cormorant Garamond is a 16th-century display face
     with a tiny x-height, and a whole lead paragraph set in it is a poster,
     not copy. Seen on the first render, where the hero lead came out in italic
     Cormorant and was the least readable thing on the page.
     The theme's own answer is DM Sans for everything and the serif as accent,
     so that is what this maps to. Cormorant survives where the period actually
     used it: the italic emphasis inside a headline, section 04. */
  --kg-serif: var(--font-display);
  --kg-sans: var(--font-body);
  --kg-mono: var(--font-mono);

  /* The four series the hero canvas draws with, in the 60s palette. The canvas
     parses these with a hex reader, so they stay hex and never become
     color-mix or oklch. */
  --kg-wave-1: #34719D;
  --kg-wave-2: #B64B2C;
  --kg-wave-3: #45764B;
  --kg-wave-4: #C79A2E;
  --kron: #18787E;

  --kg-shade: rgba(16, 45, 54, .12);
  --kg-shade-inset: rgba(16, 45, 54, .10);
  --kg-dome-hi: rgba(255, 253, 247, .85);
  --kg-dome-lo: rgba(235, 223, 197, .55);
  --kg-ease: var(--ease-organic);
}

/* ============================================================
   03. GLOBAL FOUNDATION
   ============================================================ */

html {
  background: var(--kg-background);
  color: var(--kongen-ink);
  scroll-behavior: smooth;
}

body {
  background: var(--kg-background);
  color: var(--kg-text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--kongen-orange);
  color: var(--kongen-white);
}

/* THE PAPER GRID, which is the single most characteristic thing in the theme.
   v1.0 put it on an opt-in `.kongen-paper` class that no page carries. Here it
   is the page's own ground, behind everything, so the grid reads as the paper
   the document is printed on rather than as a decorated block. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 35%, transparent 100%);
  opacity: .8;
}
body > * { position: relative; z-index: 1; }

/* ============================================================
   04. TYPOGRAPHY ON THE REAL MARKUP
   ============================================================
   Mid-century display type is the other half of the theme: heavy, very tight
   tracking, line-height under 1. The serif survives as the italic emphasis
   inside a headline, which is where the period actually used one.
   ============================================================ */

.kg-hero h1,
.kg-band h2,
.kg-path h2,
.kg-world-hero h1,
h1.k-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: -.045em;
  line-height: .98;
}

.kg-hero h1 {
  font-size: var(--text-4xl);
  line-height: .94;
  letter-spacing: -.05em;
}

.kg-hero h1 em,
.kg-band h2 em {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.02em;
}

.kg-band h2, .kg-path h2 { font-size: clamp(1.9rem, 3.4vw, 3.1rem); }

/* THE OLDER PAGES. why, pricing, products, flow, blog, about, the legal set and
   the whitepaper are built on the pre-kg stylesheet and use bare `h1`/`h2` and
   `.hero h1` rather than the kg- classes above, so the palette reached them
   through the token map but the TYPE did not: they took the cream and the red
   and kept their old headings. Seen on the first adoption render, where six
   pages were correctly coloured and none of them looked like the theme.

   `html body` so this beats the page's own element rules without needing
   !important; those are (0,0,1) and (0,1,2), this is (0,0,3) and (0,1,4). */
html body h1,
html body h2,
html body .hero h1,
html body .hero-variant h1,
html body .section-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: -.04em;
  line-height: 1.02;
}
html body h1 em, html body h2 em, html body .hero h1 em {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.02em;
}
/* h3 and below stay at the body's own tracking: tight display tracking on a
   14pt subheading reads as a mistake rather than as a style. */
html body h3, html body h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: -.015em;
}

/* Lead paragraphs: the same family as everything else, one step up in size and
   a little looser, which is how a mid-century spec sheet marks a standfirst.
   It was a serif here and the theme does not use one for running text. */
.kg-lead, .kg-world-lead, .kg-band-head .kg-lede {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-style: normal;
  letter-spacing: -.005em;
  line-height: 1.5;
}

/* Eyebrows become kickers: mono, letterspaced, with the 28px rule in front.
   The rule is drawn in the display orange (a shape); the text is the darkened
   one (type). That split is the whole correction. */
.kg-eyebrow,
.kg-world-eyebrow,
.kg-receipt-label,
.kg-band-head .kg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--kongen-orange-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.kg-eyebrow::before,
.kg-world-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  flex: 0 0 28px;
  background: var(--kongen-orange);
}

/* ============================================================
   05. BUTTONS
   ============================================================ */

.kg-btn, .btn, a.btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

html body .kg-btn.primary,
html body .btn-primary,
html body a.btn-primary {
  background: var(--kg-action);
  color: var(--kg-action-ink);
  border-color: var(--kg-action);
  box-shadow: 0 8px 24px rgba(163, 38, 44, .22);
}

html body .kg-btn.primary:hover,
html body .btn-primary:hover,
html body a.btn-primary:hover {
  background: var(--kg-action-deep);
  border-color: var(--kg-action-deep);
  transform: translateY(-2px);
}

/* The secondary action gets the period's outline pill rather than a filled
   second button competing with the first. */
.kg-mlink {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  text-underline-offset: 4px;
}

/* ============================================================
   06. CARDS AND BANDS
   ============================================================ */

.kg-pillow, .kg-panel, .kg-world-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--kg-card);
  box-shadow: var(--shadow-card);
}

html body section.kg-band.sunken { background: rgba(16, 45, 54, .05); }

/* A band head welded to the card under it keeps the weld in the new radius.

   THE WIDTH IS THE FIX FOR A REAL BREAK, and it was mine. `.kg-band-head`
   carries `max-width: 68ch`, which was right when the head was bare text: a
   heading wants a measure. Welded into a card it made the head 746px against
   the content card's 992px, same left edge, so every band on the page was a
   narrow card sitting on a wide one. With a soft shadow on each they read as
   two cards shoved together, which is exactly what they were.

   The measure moves to the TEXT, which is where a measure belongs. And the
   head loses its shadow: it is the top of ONE card now, and the card below it
   casts for the pair. */
.kg-band-head.kg-pillow {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  max-width: none;
  box-shadow: none;
}
.kg-band-head.kg-pillow > h2,
.kg-band-head.kg-pillow > p { max-width: 68ch; }
.kg-band-head.kg-pillow + .kg-pillow { border-radius: 0 0 var(--radius-md) var(--radius-md); }
/* A head followed by a grid rather than a card (the objection band) is welded
   to nothing, so it closes its own bottom corners. */
.kg-band-head.kg-pillow:not(:has(+ .kg-pillow)) { border-radius: var(--radius-md); }

/* Tables read as mid-century information graphics: mono letterspaced heads on
   a rule, hairline rows, no fill. */
.kg-band table th, .kg-regime-head {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ============================================================
   07. THE MARK — inert on purpose
   ============================================================
   v1.0 drew the logo from two rotated rounded squares. The Kongen mark is the
   locked chakana and is never redrawn: arms 25%, steps 12.5%, a cutout in the
   page ground, never an inner dot. So nothing here restyles it, and the real
   mark in the page markup comes through untouched. This block exists to say
   that out loud, because the next person to read v1.0 will see a logo rule and
   wonder where it went.
   ============================================================ */
.logo-pattern :is(path, rect) { fill: var(--kg-mark); }

/* ============================================================
   08. NIGHT GROUND
   ============================================================
   v1.0 has none, and a light-only sheet loses an argument with the viewer's
   own setting. The ink becomes the ground and the cream becomes the type; the
   accents that were tuned against cream are swapped for the ones tuned
   against ink, which the palette already had.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kg-background: var(--kongen-ink);
    --kg-card: var(--kongen-ink-2);
    --kg-sunken: #0B2129;
    --kg-foreground: var(--kongen-white);
    --kg-text: rgba(255, 253, 247, .88);
    --kg-muted-foreground: rgba(255, 253, 247, .68);
    --kg-border: var(--color-border-light);
    --kg-primary: var(--kongen-orange);       /* 4.59:1 on ink */
    --kg-link: var(--kongen-orange);
    --kg-action: #C1353B;
    --kg-action-deep: #A3262C;
    --grid-line: var(--grid-line-dark);
    --kg-wave-1: var(--kongen-cyan);
    --kg-wave-2: var(--kongen-orange);
    --kg-wave-3: var(--kongen-green);
    --kg-wave-4: var(--kongen-yellow);
    --kron: var(--kongen-cyan);
  }
  /* :not(.kg-sec-mark): a section mark carries its BAND's colour and this rule
     is (0,2,0) against the mark's (0,1,0), so without the exclusion all seven
     came out orange. There is a second copy of this rule in section 17 and it
     needs the same exclusion; both were written before the marks existed. */
  :root:not([data-theme="light"]) .kg-eyebrow:not(.kg-sec-mark),
  :root:not([data-theme="light"]) .kg-world-eyebrow { color: var(--kongen-orange); }
}

:root[data-theme="dark"] {
  --kg-background: var(--kongen-ink);
  --kg-card: var(--kongen-ink-2);
  --kg-sunken: #0B2129;
  --kg-foreground: var(--kongen-white);
  --kg-text: rgba(255, 253, 247, .88);
  --kg-muted-foreground: rgba(255, 253, 247, .68);
  --kg-border: var(--color-border-light);
  --kg-primary: var(--kongen-orange);
  --kg-link: var(--kongen-orange);
  --kg-action: #C1353B;
  --kg-action-deep: #A3262C;
  --grid-line: var(--grid-line-dark);
}

/* ============================================================
   09. v1.0's OWN COMPONENTS, corrected
   ============================================================
   Kept so the file still stands as the theme it was issued as. Nothing on this
   site carries these classes yet; a page that adopts them gets the corrected
   values rather than the failing ones.
   ============================================================ */

.k-kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--kongen-orange-text);       /* was --kongen-orange: 2.66:1 */
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}
.k-kicker::before { content: ""; width: 28px; height: 1px; background: var(--kongen-orange); }

.k-mono { font-family: var(--font-mono); letter-spacing: .03em; }
.k-caption {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 48px; padding: .75rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: .9rem; font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-snappy),
              background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.k-btn:hover { transform: translateY(-2px); }
/* was white on --kongen-orange, 3.10:1 */
.k-btn-primary { background: var(--kg-action); color: #fff; box-shadow: 0 8px 24px rgba(163, 38, 44, .22); }
.k-btn-primary:hover { background: var(--kg-action-deep); }
.k-btn-outline { border-color: currentColor; background: transparent; }
.k-btn-ghost { background: transparent; border-color: transparent; }
.k-btn-arrow::after { content: "→"; font-size: 1.15em; transition: transform var(--duration-fast) var(--ease-snappy); }
.k-btn-arrow:hover::after { transform: translateX(4px); }

.k-organism-node {
  position: absolute; z-index: 5; display: grid; place-items: center;
  width: 58px; height: 58px;
  border: 2px solid currentColor; border-radius: 50%;
  background: rgba(245, 235, 215, .90);
  box-shadow: var(--shadow-card);
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em;
  text-align: center; text-transform: uppercase;
}
/* The ring keeps the display colour; the LABEL takes the text-weight one.
   v1.0 set both from one variable, which is where 1.73:1 came from. */
.k-organism-node.language       { top: 7%;  left: 42%;  color: var(--kongen-cyan-text); }
.k-organism-node.markets        { top: 25%; right: 2%;  color: var(--kongen-orange-node); }
.k-organism-node.biology        { top: 47%; left: 0;    color: var(--kongen-green-text); }
.k-organism-node.chemistry      { bottom: 25%; right: 5%; color: var(--kongen-violet-text); }
.k-organism-node.reasoning      { bottom: 5%; left: 40%; color: var(--kongen-green-text); }
.k-organism-node.infrastructure { top: 47%; right: -2%; color: var(--kongen-blue-text); }

.k-domain:nth-child(6) { color: var(--kongen-violet-lift); }   /* was 2.94:1 on ink */

.k-model-tag {
  display: inline-block; margin-top: .6rem; padding: .2rem .45rem;
  border-radius: var(--radius-pill);
  background: rgba(242, 100, 58, .12);
  color: #BD4324;                          /* was #D94D29: 3.60:1 */
  font-family: var(--font-mono); font-size: .55rem; text-transform: uppercase;
}

.k-footer-bottom {
  display: flex; justify-content: space-between;
  padding-top: 1.5rem; border-top: 1px solid var(--color-border-light);
  color: rgba(255, 253, 247, .60);         /* was .45: 4.09:1 */
  font-family: var(--font-mono); font-size: .58rem;
}

.k-rule {
  display: flex; align-items: center; gap: 1rem;
  color: var(--color-muted); font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
}
.k-rule::before, .k-rule::after { height: 1px; flex: 1; content: ""; background: currentColor; opacity: .35; }

.k-crosshair { position: relative; width: 22px; height: 22px; }
.k-crosshair::before, .k-crosshair::after { position: absolute; content: ""; background: currentColor; opacity: .5; }
.k-crosshair::before { top: 50%; left: 0; width: 100%; height: 1px; }
.k-crosshair::after { top: 0; left: 50%; width: 1px; height: 100%; }

/* ============================================================
   10. RESPONSIVE
   ============================================================ */

@media (max-width: 760px) {
  /* v1.0 removed the navigation here with nothing in its place. This site has
     a hamburger and an overlay, and they are left alone: the desktop row is
     already hidden below 768px by the page's own rule. */
  .kg-hero h1 { letter-spacing: -.035em; }
  body::before { background-size: 32px 32px; }
}

/* ============================================================
   11. ACCESSIBILITY
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--kongen-cyan);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   12. THE SECTION SYSTEM — iconography and colour, keyed to meaning
   ============================================================
   Fiz, 2026-09-22: "adding iconography and color splashes to make the site
   more retro and modern would be great."

   The retro half is the device: a mid-century paper numbers its sections, sets
   a mono rule in front of the label, and gives each one a flat geometric mark
   in its own ink. The modern half is that none of it is decoration. The number
   is the real reading order, the icon says what the section says, and the
   colour is an index the reader can navigate by rather than seven colours
   chosen because seven were available.

   Seven bands, seven hues. Each hue exists twice: the display value owns the
   SHAPE (the icon stroke, the splash, the rule) and a darkened twin carries
   the TYPE. Every text value is the lightest that clears 4.5:1 on CREAM, which
   is the stricter of the two grounds a mark can land on, so it is safe on the
   paper cards too — 4.95 to 5.03 there.
   ============================================================ */

:root {
  --kongen-blue-mark:   #33709B;   /* 4.51:1 cream · 4.95:1 paper */
  --kongen-orange-mark: #B34A2B;   /* 4.51 · 4.95 */
  --kongen-cyan-mark:   #18767C;   /* 4.53 · 4.97 */
  --kongen-coral-mark:  #A94D53;   /* 4.58 · 5.03 */
  --kongen-green-mark:  #44754A;   /* 4.56 · 5.01 */
  --kongen-violet-mark: #8356AF;   /* 4.53 · 4.97 */
  --kongen-yellow-mark: #7E6827;   /* 4.55 · 5.00 */
}

/* `.kg-eyebrow.kg-sec-mark`, not `.kg-sec-mark`. Section 04 styles the generic
   kicker with `.kg-band-head .kg-eyebrow`, which is (0,2,0) and beat a bare
   (0,1,0) mark, so every section mark rendered in the one generic orange
   instead of its band's colour. Two other copies of that rule, in sections 08
   and 17, had to exclude the mark for the same reason. Measured across all
   seven bands after each attempt rather than assumed: the first two fixes
   changed which orange it was and not that it was orange. */
.kg-eyebrow.kg-sec-mark {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .1rem;
  color: var(--sec-text, var(--kongen-orange-mark));
}
/* The generic kicker rule is replaced here by the number, which does the same
   job and carries information while it does it. */
.kg-eyebrow.kg-sec-mark::before { display: none; }

.kg-sec-no {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  padding-right: .75rem;
  border-right: 2px solid var(--sec-shape, var(--kongen-orange));
  line-height: 1;
}

.kg-sec-icon {
  width: 22px; height: 22px; flex: 0 0 22px;
  color: var(--sec-shape, var(--kongen-orange));
}

.kg-sec-text { letter-spacing: .16em; }

/* THE SPLASH. A flat quarter-disc bleeding off the head card's top right, in
   the band's own display colour. It is the one piece of pure decoration here
   and it is the most characteristic thing in the period: a poster puts a
   single saturated shape against a lot of paper and lets it carry the page.
   It sits under the copy and takes no clicks. */
.kg-band-head.kg-pillow { position: relative; overflow: hidden; }
.kg-band-head.kg-pillow::after {
  content: "";
  position: absolute;
  top: -92px; right: -92px;
  width: 184px; height: 184px;
  border-radius: 50%;
  background: var(--sec-shape, var(--kongen-orange));
  /* .14 read as a coloured card rather than as a mark on a card, and it read
     worst in green, which is the most luminous of the seven at low alpha
     (Fiz 2026-09-22: "The green background on the cards is a bit too much").
     .075 keeps the splash as a printed shape in the corner. */
  opacity: .075;
  pointer-events: none;
}
/* A second, smaller disc offset from the first reads as printing rather than
   as a gradient: two flat plates of one ink, overlapping. */
.kg-band-head.kg-pillow::before {
  content: "";
  position: absolute;
  top: -30px; right: 34px;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--sec-shape, var(--kongen-orange));
  opacity: .22;
  pointer-events: none;
}
.kg-band-head.kg-pillow > * { position: relative; z-index: 1; }

/* The seven assignments. Cool at the top of the page where the product is
   explained, warm at the bottom where it is sold, which is the order a reader
   moves through anyway. */
#decision        { --sec-shape: var(--kongen-blue);   --sec-text: var(--kongen-blue-mark); }
#compare         { --sec-shape: var(--kongen-cyan);   --sec-text: var(--kongen-cyan-mark); }
#developers      { --sec-shape: var(--kongen-green);  --sec-text: var(--kongen-green-mark); }
#objection       { --sec-shape: var(--kongen-violet); --sec-text: var(--kongen-violet-mark); }
#proof           { --sec-shape: var(--kongen-yellow); --sec-text: var(--kongen-yellow-mark); }
#products-row    { --sec-shape: var(--kongen-orange); --sec-text: var(--kongen-orange-mark); }
#pricing-teaser  { --sec-shape: var(--kongen-coral);  --sec-text: var(--kongen-coral-mark); }

/* ============================================================
   13. THE REGIME SPECTRUM
   ============================================================
   The five regimes are an ordered scale and the page had them as five
   identical rows. A dot per row, cool to warm, makes the depth visible before
   the number is read — which is the whole mid-century information-graphics
   idea: encode the variable in the ink, not only in the label.
   ============================================================ */

.kg-regime .kg-regime-name { display: inline-flex; align-items: center; gap: .6rem; }
.kg-regime .kg-regime-name::before {
  content: "";
  width: 9px; height: 9px; flex: 0 0 9px;
  border-radius: 50%;
  background: var(--regime-dot, var(--kongen-cyan));
}
.kg-regime[data-regime="trivial"]    { --regime-dot: var(--kongen-cyan); }
.kg-regime[data-regime="fast"]       { --regime-dot: var(--kongen-blue); }
.kg-regime[data-regime="moderate"]   { --regime-dot: var(--kongen-green); }
.kg-regime[data-regime="deep"]       { --regime-dot: var(--kongen-orange); }
.kg-regime[data-regime="exhaustive"] { --regime-dot: var(--kongen-coral); }
/* The selected row takes its own colour rather than one shared highlight, so
   the table says which regime is showing in two ways at once. */
.kg-regime[aria-selected="true"] {
  background: color-mix(in srgb, var(--regime-dot) 12%, transparent);
  border-color: var(--regime-dot);
}

/* ============================================================
   14. THE RECEIPTS, AS A METRIC BLOCK
   ============================================================
   Four numbers with four provenances. Each takes its own ink and a rule above
   it, which is how a spec sheet of the period prints a measured value: the
   figure large, the method small and grey beneath, a hairline separating one
   reading from the next.
   ============================================================ */

#proof .kg-proof > div { padding-top: 1rem; border-top: 2px solid var(--fig-shape, var(--kongen-yellow)); }
#proof .kg-proof > div:nth-child(1) { --fig-shape: var(--kongen-blue);   --fig-text: var(--kongen-blue-mark); }
#proof .kg-proof > div:nth-child(2) { --fig-shape: var(--kongen-cyan);   --fig-text: var(--kongen-cyan-mark); }
#proof .kg-proof > div:nth-child(3) { --fig-shape: var(--kongen-green);  --fig-text: var(--kongen-green-mark); }
#proof .kg-proof > div:nth-child(4) { --fig-shape: var(--kongen-coral);  --fig-text: var(--kongen-coral-mark); }
#proof .kg-figure {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--fig-text, var(--kongen-ink));
}

@media (max-width: 760px) {
  .kg-band-head.kg-pillow::after { top: -70px; right: -70px; width: 140px; height: 140px; }
  .kg-band-head.kg-pillow::before { top: -22px; right: 22px; width: 46px; height: 46px; }
  .kg-sec-mark { gap: .6rem; }
}

/* ============================================================
   15. THE REACTION-DIFFUSION CORNERS
   ============================================================
   Gray-Scott at the whitepaper's own constants, one field read four times.
   They sit in the corners of two bands, behind the cards, at a size where
   they read as a printed pattern in the margin rather than as a widget.

   `image-rendering: pixelated` is deliberate: the field is integrated at
   64x64 and scaled up, and a crisp cell edge is the period's own screen-print
   look. Smoothing it would make it a blur.
   ============================================================ */

.kg-band { position: relative; }

.kg-rd {
  position: absolute;
  z-index: 0;
  width: clamp(120px, 15vw, 210px);
  height: clamp(120px, 15vw, 210px);
  pointer-events: none;
  opacity: .62;
  image-rendering: pixelated;
}
.kg-band > .kg-wrap { position: relative; z-index: 1; }

.rd-tl { top: 1.5rem;    left: 1.5rem; }
.rd-tr { top: 1.5rem;    right: 1.5rem; }
.rd-bl { bottom: 1.5rem; left: 1.5rem; }
.rd-br { bottom: 1.5rem; right: 1.5rem; }

.rd-violet { --rd-ink: 138, 91, 184; }
.rd-cyan   { --rd-ink: 40, 200, 210; }
.rd-yellow { --rd-ink: 242, 200, 75; }
.rd-orange { --rd-ink: 242, 100, 58; }

/* On a phone the cards run nearly edge to edge, so a corner canvas would sit
   under a card and be invisible while still costing a frame. */
@media (max-width: 860px) {
  .kg-rd { display: none; }
}

/* ============================================================
   16. THE HOME PAGE'S GROUND IS ONE COLOUR, AND THE FIELD IS ON IT

   EVERYTHING BELOW IS SCOPED TO body[data-page="home"], and that scoping is a
   fix rather than a precaution. Fiz asked for the one-colour ground "on the
   main view (where we are focused only)" and this was written on :root, which
   every page inherits -- so all thirteen world pages and the nine other pages
   got an ink ground while their own text stayed ink, and their copy vanished.
   Reported as "All World pages can't see the text", which is exactly what it
   was. The home page is the only page that carries the attribute.
   ============================================================
   Fiz, 2026-09-22: "on the main view (where we are focused only) create the
   background as a on color background, howevery see if we can have neat
   animations of reaction difussion that create patterns on the background."

   So the murmuration comes off this page and the ground is a single ink with
   the Gray-Scott field living on it. The film is NOT deleted: the <video> and
   its poster are still in the markup and the scrim is still there. Two rules
   hide them, and removing those two rules brings the film straight back.

   Ink rather than cream, because the cards are cream: a dark ground makes them
   read as paper laid on a surface, which is the poster construction the rest
   of the theme is built on, and it keeps the hero copy white where it already
   is. Switching to the light ground is one value here plus the hero card.
   ============================================================ */

body[data-page="home"] .kg-ground { background: var(--kongen-ink) !important; }
body[data-page="home"] .kg-ground-video,
body[data-page="home"] .kg-ground-still { display: none !important; }
/* The scrim's job was to make a photograph carry white type. There is no
   photograph now, so it only muddies a flat ink. */
body[data-page="home"] .kg-scrim { display: none; }

/* The field, page wide and behind everything. Not pixelated: at 190 scaled
   across a page the cell edge is 7x and reads as a mosaic, where smoothing
   reads as the organic pattern it actually is. The corners keep their hard
   edge, which is what makes them read as printed plates by contrast. */
body[data-page="home"] .kg-rd-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* THE INK HAS TO CONTRAST WITH THE GROUND, and it did not: the script's
     fallback ink is #102D36, which is the ground, so the first render was a
     flat panel with an invisible field on it. Cream, because the pattern reads
     as something printed ON the ink rather than as a second colour introduced
     to the page. */
  --rd-ink: 245, 235, 215;
  opacity: .16;
  pointer-events: none;
  image-rendering: auto;
  object-fit: cover;
}

/* The page is a dark surface now, so everything that was tuned against a
   photograph is retuned against one flat ink. The cards were already cream and
   are unchanged; this is only the parts that sat on the film. */
body[data-page="home"] section.kg-hero { --hero-ink: #FFFDF7; }
/* THE CARD IS A PANE, AND IT HAS TO ACT LIKE ONE   (#622, Fiz 2026-09-30)
   "The hero can get overcrowed from the background .. improve the background."
   It was: the field is page-wide and the card was a 5%-cream lift over it, so
   the Gray-Scott blobs ran straight through the headline at the exact size of
   type, which is the one scale at which a scattered pattern competes with
   words. The field itself is right -- Fiz asked for it and it carries the
   whole page -- so it is not weakened anywhere; it is the CARD that starts
   behaving like glass laid on it.

   The blur is the part that does the work: the blobs behind the card become a
   wash rather than shapes, and the sharp field just outside the card is what
   then makes the card read as a pane at all. The line below used to say
   `backdrop-filter: none`, on the reasoning that a flat ink has nothing worth
   blurring. True when it was written, and no longer: the field is what is back
   there now. */
body[data-page="home"] .kg-hero-grid {
  background: rgba(21, 52, 62, .72);
  border-color: rgba(255, 253, 247, .14);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
html:has(body[data-page="home"]) { background: var(--kongen-ink); }
/* The paper grid was drawn in ink on cream. On an ink ground it has to invert
   or it is invisible. */
body[data-page="home"]::before { background-image:
  linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
  linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px); }

/* ============================================================
   17. THE DARK GROUND IS A DESIGN, NOT A THEME RESPONSE
   ============================================================
   Section 16 makes this page's ground ink on purpose. Section 08 ALSO turns
   the ground ink when the viewer's system asks for dark — and it turns the
   CARDS ink with it, which is correct for a theme that follows the system and
   wrong here: the two stack, and a visitor with dark mode on got a dark page
   with dark cards on it and no contrast between them.

   Caught on a render, not reasoned about: prefers-color-scheme reported true
   in the capture browser and the whole band went ink on ink.

   So the card set is pinned to paper on this page in all three states. The
   ground stays ink because that is the design; the cards stay cream because
   that is what makes them read as paper laid on it. Declared three times
   because there are three states and only one of them is the bare :root.
   ============================================================ */

body[data-page="home"],
:root[data-theme="dark"] body[data-page="home"] {
  --kg-card: var(--kongen-paper);
  --kg-sunken: var(--kongen-sunken);
  --kg-foreground: var(--kongen-ink);
  --kg-text: var(--kongen-ink-2);
  --kg-muted-foreground: var(--color-muted);
  --kg-border: var(--color-border);
  --kg-link: var(--kongen-orange-mark);
  --kg-primary: var(--kongen-orange-mark);
  --kg-action: #A3262C;
  --kg-action-deep: #851F24;
  --kg-background: var(--kongen-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-page="home"] {
    --kg-card: var(--kongen-paper);
    --kg-sunken: var(--kongen-sunken);
    --kg-foreground: var(--kongen-ink);
    --kg-text: var(--kongen-ink-2);
    --kg-muted-foreground: var(--color-muted);
    --kg-border: var(--color-border);
    --kg-link: var(--kongen-orange-mark);
    --kg-primary: var(--kongen-orange-mark);
    --kg-action: #A3262C;
    --kg-action-deep: #851F24;
    --kg-background: var(--kongen-ink);
  }
  /* The kicker sits on a paper card here, so it keeps the cream-ground value
     rather than the on-ink one section 08 gives it.

     :not(.kg-sec-mark) because a section mark carries its BAND's colour, and
     without the exclusion this rule painted all seven of them orange in dark
     mode: it is (0,2,0) against the mark's own (0,1,0). Seen on a render where
     the number was green and the label beside it was orange. */
  body[data-page="home"] .kg-eyebrow:not(.kg-sec-mark) { color: var(--kongen-orange-mark); }
}

/* The hero card is the one surface that is NOT paper: it is a pane on the ink,
   which is why its copy is white while every other card's is ink. */
body[data-page="home"] section.kg-hero { --hero-ink: #FFFDF7; --hero-body: rgba(255,253,247,.90); --hero-muted: rgba(255,253,247,.72); }
body[data-page="home"] section.kg-hero h1,
body[data-page="home"] section.kg-hero h1 em,
body[data-page="home"] section.kg-hero .kg-lead { color: var(--hero-ink); }
body[data-page="home"] section.kg-hero .kg-hero-eyebrow,
body[data-page="home"] section.kg-hero .kg-hero-differentiator { color: var(--hero-muted); }

/* ============================================================
   18. THE PHONE HERO IS ONE CARD
   ============================================================
   Two faults, one cause, both reported: "We have two cards. (one of them must
   be the older one) Also, the Text is not showing."

   The page's own phone rule makes .kg-hero-panel a card with
   `background: var(--kg-background)` and its copy `var(--kg-foreground)`. That
   was right when the ground was a photograph and the panel was the one piece of
   paper on it. Section 16 then moved --kg-background to ink AND --kg-foreground
   is ink, so the phone card became ink type on an ink card: invisible. Measured
   before the fix -- panel background rgb(16,45,54), h1 colour rgb(16,45,54).

   And the theme had already made .kg-hero-grid a card, so the panel was a
   second card inside the first. On desktop only the grid is a card, which is
   why it showed on a phone and nowhere else.

   So on a phone the PANEL is the card and the grid is not, which keeps the
   conversion meaningful: Kron dissolves into the panel's outline, and that
   outline has to be a real edge.
   ============================================================ */

@media (max-width: 860px) {
  body[data-page="home"] .kg-hero-grid {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: none;
  }
  body[data-page="home"] section.kg-hero .kg-hero-panel {
    background: rgba(255, 253, 247, .06);
    border: 1px solid rgba(255, 253, 247, .14);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(5, 7, 13, .45);
  }
  /* The copy is on a pane over ink, not on paper, so it takes the hero's own
     white rather than the page's ink. */
  body[data-page="home"] section.kg-hero .kg-hero-panel h1,
  body[data-page="home"] section.kg-hero .kg-hero-panel h1 em,
  body[data-page="home"] section.kg-hero .kg-hero-panel .kg-lead { color: var(--hero-ink); }
  body[data-page="home"] section.kg-hero .kg-hero-panel .kg-hero-eyebrow,
  body[data-page="home"] section.kg-hero .kg-hero-panel .kg-hero-differentiator { color: var(--hero-muted); }
  body[data-page="home"] section.kg-hero .kg-hero-panel .kg-mlink { color: var(--hero-ink); }
  /* The Kron badge is drawn on the pane now, so it takes the light ink too. */
  body[data-page="home"] .kg-kron-badge-link:hover { background: rgba(255, 253, 247, .08); }
}

/* ============================================================
   19. HOW IT IS GROWN — the spoken pitch, as three figures   (#620)
   ============================================================
   A triptych numbered fig. 1 to fig. 3 because it IS a sequence: the rule, the
   seed becoming four, the four sharing through Kron. That is the mid-century
   paper's own device -- the numbered plate with a caption -- used for what it
   was for, not as ornament.

   Every plate is the same aspect ratio even though fig. 1 is a round specimen
   and the other two are wide scenes, so the three titles sit on one baseline
   across the row. The drawings adapt to the plate; the plate does not adapt to
   the drawing.
   ============================================================ */

#grown { --sec-shape: var(--kongen-green); --sec-text: var(--kongen-green-mark); }

/* SUBGRID, so plate, caption, title and body are four shared ROWS across the
   three figures. Without it each figure sized its own rows, fig. 1's caption
   ran to two lines, and its title sat a line below the other two. With it the
   three titles share one baseline whatever any caption does. A browser without
   subgrid gets an ordinary stack per figure, which is still correct. */
.kg-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr;
  column-gap: 30px;
  row-gap: 10px;
}
.kg-fig { margin: 0; display: grid; gap: 10px; align-content: start; }
@supports (grid-template-rows: subgrid) {
  .kg-fig { grid-row: span 4; grid-template-rows: subgrid; gap: 0; row-gap: 10px; }
}

/* The plate: cream on the paper card, a faint lab grid, and registration marks
   in two corners. The grid is the same 24px module the page ground uses, so a
   plate reads as a window onto the ground rather than as a new surface. */
.kg-fig-plate {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(16, 45, 54, .12);
  background:
    linear-gradient(rgba(16, 45, 54, .055) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(16, 45, 54, .055) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--kongen-cream);
}
.kg-fig-plate::before, .kg-fig-plate::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  background:
    linear-gradient(rgba(16,45,54,.42), rgba(16,45,54,.42)) center / 1px 100% no-repeat,
    linear-gradient(rgba(16,45,54,.42), rgba(16,45,54,.42)) center / 100% 1px no-repeat;
  pointer-events: none;
}
.kg-fig-plate::before { top: 9px; left: 9px; }
.kg-fig-plate::after  { right: 9px; bottom: 9px; }
.kg-fig-plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.kg-fig-cap {
  display: flex; align-items: baseline; gap: .6rem;
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-muted);                 /* 5.94:1 on the paper card */
}
/* nowrap: "fig. 1" is one token and it broke across two lines at desktop,
   with the "1" alone under "fig." */
.kg-fig-no { color: var(--sec-text); font-weight: 600; letter-spacing: .04em; white-space: nowrap; flex: 0 0 auto; }

.kg-fig-title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.3rem;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--kg-foreground);
}
.kg-fig-body { margin: 0; line-height: 1.62; color: var(--kg-text); max-width: 42ch; }

@media (max-width: 900px) {
  .kg-story { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 34px; }
  .kg-fig { grid-row: auto; grid-template-rows: none; row-gap: 10px; }
  .kg-fig-plate { aspect-ratio: 16 / 10; }
  /* fig. 3 has two rows of organisms, each with its label, and at 16:10 on a
     phone the rows met: the upper labels sat on the lower glyphs. It keeps the
     4:3 the figure was drawn for; the one-row figures keep the shorter plate. */
  .kg-fig-plate.kg-fig-plate-rows { aspect-ratio: 4 / 3; }
  .kg-fig-body { max-width: none; }
}

/* ============================================================
   20. THE SECTION ICONS DRAW THEMSELVES
   ============================================================
   Each section mark's icon strokes itself in the first time the band comes
   into view: the page announcing its sections the way a plotter would.
   The class that hides the strokes is added by the script, never by this
   sheet, so a page with no JavaScript -- or a reader who has asked for less
   motion, for whom the script never adds it -- sees every icon fully drawn.
   The icons are decorative and aria-hidden; the number and the label beside
   each one are never hidden.
   ============================================================ */
.kg-sec-icon.kg-draw > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s var(--ease-organic);
}
.kg-sec-icon.kg-draw > *:nth-child(2) { transition-delay: .12s; }
.kg-sec-icon.kg-draw > *:nth-child(3) { transition-delay: .24s; }
.kg-sec-icon.kg-draw > *:nth-child(4) { transition-delay: .36s; }
.kg-sec-icon.kg-draw > *:nth-child(5) { transition-delay: .48s; }
.kg-sec-icon.kg-draw.kg-drawn > * { stroke-dashoffset: 0; }

/* ============================================================
   21. THE DIAL'S INKS BELONG TO THE HERO'S GROUND
   ============================================================
   The hero's ground is ink in every colour scheme, so the canvas that draws
   on it takes the inks tuned for ink -- the palette's display values -- in
   every scheme too, rather than following the viewer's setting the way the
   paper cards below it should. In light mode the dial was drawing with the
   cream-tuned inks on ink: the lifelines disappeared. See the hero script,
   where the dial now reads these from this element rather than from :root.

   Scoped to the hero section, so nothing else on the page sees a light
   --kg-ink; the cards keep theirs.
   ============================================================ */
body[data-page="home"] section.kg-hero {
  --kg-wave-1: var(--kongen-cyan);
  --kg-wave-2: var(--kongen-orange);
  --kg-wave-3: var(--kongen-green);
  --kg-wave-4: var(--kongen-yellow);
  --kron:      var(--kongen-cyan);
  --kg-ink:    #FFFDF7;               /* the lifelines, and the organism names on hover */
}

/* ============================================================
   22. THE NIGHT GROUND, COMPLETED                 (#596, 2026-09-30)
   ============================================================
   Section 08 turns the ground ink and the type cream when the viewer's system
   asks for dark, by rebinding the --kg-* names. A contrast sweep of every page
   in both schemes -- every visible text element against the first solid
   surface behind it -- found it had stopped half-way, in three places:

   1. The older alias names the page stylesheets were written against are
      declared once on :root in kongen-theme.css, and --paper-light is a
      literal #ffffff there. It never followed. Every surface painted with it
      -- the legal pages' article, the blog, the product, domain and step
      cards, the consent banner -- stayed white under cream type: 1.02:1,
      1,384 text elements on 12 pages. Four pages also hard-code a cream
      .content-backdrop.
   2. The night link colour, the display orange, clears the ink ground
      (4.59:1) but not the ink-2 card (3.67:1), and the cards are where the
      links are. It is lifted in OKLCH, hue kept, to the darkest value that
      clears the card: #FF7C52. Fills of it take ink type (5.69:1), not cream
      (3.1:1) -- the active world in every world strip was the cream case.
   3. Code blocks paint with --black, which the night ground turns cream,
      under code colours tuned for ink. They keep a dark well in every scheme.

   Two light-scheme values were wrong on their own terms and move with it:
   --kg-primary-deep pointed at the display family's #D94D29, which is LIGHTER
   than the text orange it is meant to deepen (4.16:1 as product-cost type on
   white), and --kg-secondary was never rebound from Deep Field (#4F8A6A,
   4.06:1 as the why page's "Active").

   The home page is the exception it already was (section 17): its cards are
   paper in every scheme. Aliases resolve where they are declared, so section
   17's pins on <body> never reached them -- which is why the home page's
   consent banner went cream-on-white while its cards were right. It pins the
   alias that paints its surfaces, and its banner re-declares the inks.
   ============================================================ */

:root {
  --kongen-orange-night: #FF7C52;        /* 4.55:1 on ink-2 · 5.69 on ink · ink type on it 5.69 */
  --kongen-orange-night-deep: #FF9A7A;   /* 5.59:1 on ink-2 · ink type on it 7.00 */
  --kongen-green-night: #6CB274;         /* 4.55:1 on ink-2 · 5.69 on ink */
  --kg-primary-deep: #AA4122;            /* was #D94D29, 4.16:1 on white; now 6.02 */
  --kg-secondary: var(--kongen-green-text);   /* was Deep Field's #4F8A6A, 4.06:1; now 5.32 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper-light: var(--kg-card);
    --kg-link: var(--kongen-orange-night);
    --kg-primary: var(--kongen-orange-night);
    --kg-primary-deep: var(--kongen-orange-night-deep);
    --kg-primary-foreground: var(--kongen-ink);
    --kg-secondary: var(--kongen-green-night);
  }
  :root:not([data-theme="light"]) .kg-eyebrow:not(.kg-sec-mark),
  :root:not([data-theme="light"]) .kg-world-eyebrow { color: var(--kongen-orange-night); }
  /* section 17's own copy of this rule is (0,3,1) against the one above's
     (0,4,0), so it lost, and a kicker on a paper card went display-orange:
     2.92:1. One more element of specificity, same intent. */
  :root:not([data-theme="light"]) body[data-page="home"] .kg-eyebrow:not(.kg-sec-mark):not(.kg-hero-eyebrow) { color: var(--kongen-orange-mark); }
  :root:not([data-theme="light"]) body:not([data-page="home"]) pre { background: var(--kg-sunken); }
  :root:not([data-theme="light"]) body:not([data-page="home"]) .content-backdrop { background: rgba(16, 45, 54, .92); }
}

:root[data-theme="dark"] {
  --paper-light: var(--kg-card);
  --kg-link: var(--kongen-orange-night);
  --kg-primary: var(--kongen-orange-night);
  --kg-primary-deep: var(--kongen-orange-night-deep);
  --kg-primary-foreground: var(--kongen-ink);
  --kg-secondary: var(--kongen-green-night);
}
:root[data-theme="dark"] .kg-eyebrow:not(.kg-sec-mark),
:root[data-theme="dark"] .kg-world-eyebrow { color: var(--kongen-orange-night); }
:root[data-theme="dark"] body[data-page="home"] .kg-eyebrow:not(.kg-sec-mark):not(.kg-hero-eyebrow) { color: var(--kongen-orange-mark); }
:root[data-theme="dark"] body:not([data-page="home"]) pre { background: var(--kg-sunken); }
:root[data-theme="dark"] body:not([data-page="home"]) .content-backdrop { background: rgba(16, 45, 54, .92); }

/* The home page: paper in every scheme. */
body[data-page="home"] { --paper-light: #FFFFFF; }
body[data-page="home"] .consent-banner {
  --ink: var(--kg-text);
  --text: var(--kg-text);
  --black: var(--kg-foreground);
  --red: var(--kg-primary);
  --red-deep: var(--kg-primary-deep);
  --border: var(--kg-border);
}

/* ---- 22, continued: what the flip exposed -------------------------------
   Once --paper-light follows the night ground, every place that used it as
   WHITE TYPE on a surface that stays dark in every scheme goes dark on dark.
   Found by the same sweep, run again: */

/* Action buttons. The theme's action rule (0,1,3) sets white type, but page
   rules in several containers -- the nav, the mobile overlay, the journal
   footer -- outrank it for colour and write the type as var(--paper-light).
   Rather than chase each container, the button redefines the alias for
   itself: on an action fill, "paper-light" is the action ink. In the light
   scheme both are white, so nothing there changes. */
.btn-primary, a.btn-primary, .kg-btn.primary { --paper-light: var(--kg-action-ink); }
/* ...except the flow page's bridge band, which inverts: its button is the one
   .btn-primary that is not an action fill, and it paints its own SURFACE with
   the alias, so it keeps the page's value. */
.bridge .btn-primary { --paper-light: inherit; }

/* The night footer: its wordmark is var(--paper-light) type on #0A1020. */
.kg-night { --paper-light: #FFFFFF; }

/* A positive figure's green, written inline on the products page as #166534:
   7.1:1 on white, 1.62 on the night card. Now a token; the light value is the
   same colour it was. */
:root { --kg-positive: #166534; }

/* The hero's eyebrow is copy on the ink pane, cream in the light scheme by
   design (section 17). The generic night kicker rule outranked that and made
   it orange in dark mode only -- never intended, now matched. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --kg-positive: var(--kongen-green-night); }
  :root:not([data-theme="light"]) body[data-page="home"] section.kg-hero .kg-hero-eyebrow { color: var(--hero-muted); }
  :root:not([data-theme="light"]) body:not([data-page="home"]) .dev-path { background: rgba(23, 62, 71, .55); border-color: rgba(255, 253, 247, .22); }
  /* Links nobody coloured fall back to the browser's own blue: legible on
     paper, 1.2 to 1.8:1 on the night ground. Zero specificity, so any rule
     that does colour a link still wins. */
  :where(:root:not([data-theme="light"]) a) { color: var(--kg-link); }
}
:root[data-theme="dark"] { --kg-positive: var(--kongen-green-night); }
:root[data-theme="dark"] body[data-page="home"] section.kg-hero .kg-hero-eyebrow { color: var(--hero-muted); }
:root[data-theme="dark"] body:not([data-page="home"]) .dev-path { background: rgba(23, 62, 71, .55); border-color: rgba(255, 253, 247, .22); }
:where(:root[data-theme="dark"] a) { color: var(--kg-link); }

/* ---- 22, continued: the ground clip at night -------------------------------
   The sweep walks a text element's ancestors for its background, so the ground
   clip -- painted behind the text, not above it in the tree -- is invisible to
   it. Contact sheets showed it instead: the clips are graded for ink type, and
   at night cream type sat directly on them, near-unreadable on most world
   heroes and on the four content pages that share the pale frost clip.
   Measured on the clips themselves (text hidden, veil at 0, three frames each,
   desktop and phone): the smallest veil of the ink ground that holds cream
   body text at 4.5:1 against the 95th-percentile brightest pixel runs from
   0.62 (Go, Markets) to 0.68 (Infrastructure). One value, the maximum, covers
   every page. The light scheme keeps each world's own veil, untouched. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:not([data-page="home"]) .kg-ground { --ground-veil: .68; }
}
:root[data-theme="dark"] body:not([data-page="home"]) .kg-ground { --ground-veil: .68; }


/* ============================================================
   23. THE HERO CARD'S HARMONIC WAVES              (#622, 2026-09-30)
   ============================================================
   Fiz: "Incorportate harmonic wave effects on the card or someplace."

   The canvas is the first child of the card and sits under everything the card
   carries, so the copy and the dial are never drawn over. What it draws -- the
   first seven harmonics of a vibrating string, each at its true frequency
   ratio -- is in the hero script, with the equation.

   The mask is the second half of the crowding fix. The card's upper third is
   the eyebrow and the headline, and the waves are simply not painted there:
   the canvas fades in from nothing at 22% of the card's height to full at 52%,
   so the lines gather in the lower half where the copy has thinned. Section 16
   damps the field behind the card; this keeps its replacement off the
   headline too.
   ============================================================ */

body[data-page="home"] .kg-hero-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, #000 52%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, #000 52%, #000 100%);
}
/* Both columns above the membrane. They were static, so without this the
   canvas would paint over the copy rather than under it. */
body[data-page="home"] .kg-hero-panel,
body[data-page="home"] .kg-hero-grid > .kg-stage-wrap { position: relative; z-index: 1; }

/* The objection band lost its second column when it was compressed to one
   card (#622), and a paragraph then ran the full 1,120px of the card -- about
   110 characters, where the rest of the site sets 62. */
#objection .kg-objection p { max-width: 62ch; }

/* ============================================================
   24. THE PRODUCE BAND CARRIES SIX, IN TWO GROUPS   (#626, 2026-09-30)
   ============================================================
   Fiz: "on 'Three products grow in the Garden.' its missing API and MCP."

   The band now holds two named groups -- what you call directly, and what
   grows in the Garden -- so the group label needs to read as a label and not
   as a product. It is the mono kicker the rest of the theme uses for exactly
   that job, with a rule after it so the two lists are visibly separate without
   a second card.
   ============================================================ */

.kg-produce-group {
  /* A paragraph on this site inherits a reading measure, which capped this at
     444px and stopped the rule two thirds of the way across by accident. It is
     a divider, not copy: it runs the width of the card. */
  max-width: none !important;
  font: 600 .68rem/1 var(--kg-mono) !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kg-muted-foreground) !important;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px !important;
}
.kg-produce-group::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--kg-border);
}
/* the second group opens under the first, not against it */
.kg-produce-list + .kg-produce-group { margin-top: 34px !important; }

/* The endpoint in a produce line is a specimen, not a link: mono, at the size
   of the surrounding copy rather than a browser's default 83%. */
.kg-produce-line code {
  font: 600 .86em/1 var(--kg-mono);
  color: var(--kg-foreground);
  background: var(--kg-sunken);
  border: 1px solid var(--kg-border);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}

.kg-produce-oss {
  font: .86rem/1.7 var(--kg-sans) !important;
  color: var(--kg-muted-foreground) !important;
  margin: 26px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid var(--kg-border);
  max-width: 70ch;
}
.kg-produce-oss a { color: var(--kg-link); text-underline-offset: 3px; }

@media (max-width: 560px) {
  /* an endpoint must never be what makes a phone scroll sideways */
  .kg-produce-line code { white-space: normal; word-break: break-all; }
}

/* "Apache-2.0" broke across lines at the hyphen, which reads as two words. */
.kg-produce-oss a { white-space: nowrap; }

/* ============================================================
   25. THE PHONE HERO NEEDS A SLOT FOR THE TOP ROW    (#628, 2026-09-30)
   ============================================================
   Fiz: "fix the mobile rendering of the attached card. the Organisms icons on
   the top are too close to the edge."

   The hero runs under the bar and its top padding is the bar's height plus a
   gap, which was 40px. On a 390px phone that is the whole slot the top row of
   organisms has: the bar ends at 76 and the card began at 116. The row needs
   about 36px of its own plus a margin on each side, so it did not fit -- it
   sat 14px under the bar with its lower edge over the card's top corners.

   The gap goes to 88px, which gives the row a 88px slot to sit in the middle
   of, clearing the bar by 26 and the card by 26. It is scoped to the phone,
   where the row exists: on a desktop the organisms are a ring on the field and
   this padding is not involved. The hero grows 48px, from 744 to 792 against
   an 844 viewport, so the band below it still shows under the fold.

   Paired with the placement maths in the hero script (search "THE TOP BAND HAS
   TO CLEAR TWO THINGS"). Neither half works alone: without the slot the script
   has nowhere to put the row, and without the script the row would sit at its
   old floor in the middle of a bigger gap.
   ============================================================ */

@media (max-width: 860px) {
  body[data-page="home"] section.kg-hero {
    padding-top: calc(var(--kg-bar-h) + 88px);
    /* AND THE TWO ROWS HAVE TO SIT THE SAME WAY (Fiz, 2026-09-30: "the organism
       icons are closer to the top edge than to the bottom. Needs to be the
       same."). Fixing the top slot alone made that worse, not better: the top
       row ended up 26px below the bar while the bottom row still had 72px of
       empty hero under it.

       Fiz again, once the outer gaps matched: "the organism icon distance from
       the card top bottom isn't the same." Both are true at once and they are
       different measurements -- the rows can sit the same distance from the
       screen edges while sitting different distances from the CARD, which is
       what longer lifelines below than above look like. The script now mirrors
       the top row's actual distance (44px on a phone, capped by the bar) to the
       bottom, so this padding is that distance, plus the glyph's own half-height,
       plus the same 26px outer margin the top row gets. Written as the sum so
       the three numbers stay legible and the top slot's `+ 88px` above is
       visibly the same total. */
    padding-bottom: calc(44px + 18px + 26px);
  }
}

/* 25, continued: 48px of dead grid under the phone card.
   The hero grid is two rows -- the panel, then .kg-stage-wrap holding the dial.
   On a phone the dial is drawn on the page-wide canvas instead and the wrap
   measures 0x0 with no text in it, but it is still a grid item, so the grid
   kept allocating its 20px row AND the 28px row gap: 48px of nothing below the
   card, inside the box everything else is positioned against.

   That is what made the organism rows so hard to balance. The visible card ends
   at the panel; the grid ran 48px lower; so the two boxes disagreed about where
   "the bottom of the card" is, and a fix measured against either one was wrong
   against the other. Removing the empty row makes them the same box again. */
@media (max-width: 860px) {
  body[data-page="home"] .kg-hero-grid > .kg-stage-wrap { display: none; }
}

/* ============================================================
   26. THE FIELD ON EVERY NON-ORGANISM PAGE          (#634, 2026-09-30)
   ============================================================
   Fiz: "for non organism pages, each page on the site, use a different
   background effect similar to what we have on the home page but different
   pattern ... we can have different patterns load for the home page too so the
   site shows dynamic."

   Which pattern each page draws is `data-rd` on its <body>; the parameters and
   the reasoning are in assets/kongen-rd.js. The home page draws a different one
   every load; every other page names its own, so a page looks the same when you
   come back to it.

   SCOPED TO `body[data-rd]`, AND THAT MATTERS. The obvious selector,
   `body:not([data-page="home"])`, also matches the thirteen world pages -- and
   the rules below hide the ground video. The organisms keep their footage;
   `data-rd` is only on the thirteen pages that asked for a field.

   The ground video steps aside the way the home page does it (section 16): the
   <video> and its poster stay in the markup and two rules hide them, so any
   page comes back with two lines deleted. Only four of these pages had one --
   why, products, pricing, enterprise. The rest never had a ground at all.
   ============================================================ */

body[data-rd]:not([data-page="home"]) .kg-rd-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  object-fit: cover;
  image-rendering: auto;
  /* Ink on the paper ground, where the home page is cream on ink. .07 rather
     than the home page's .16 because that one sits on a flat ink with nothing
     else on it, and these pages carry the paper grid as well -- two textures
     at .16 is a texture fight, not a ground. */
  /* --rd-ink no longer applies to this canvas: the page-wide field paints a
     two-colour ramp chosen by data-rd-hue (see kongen-rd.js). The corner plates
     still read it, which is why it stays declared elsewhere. */
  opacity: .20;
}
body[data-rd]:not([data-page="home"]) .kg-ground-video,
body[data-rd]:not([data-page="home"]) .kg-ground-still { display: none !important; }
body[data-rd]:not([data-page="home"]) .kg-scrim { display: none; }
/* .kg-ground is a fixed, full-viewport layer that sits AFTER the field in the
   document, so anything opaque on it paints the field out. Giving it the ground
   colour was the first thing I did here and it made the field invisible at every
   opacity -- the pattern was drawing perfectly and being covered. It has no job
   once its video is hidden, so it goes transparent and the body's own background
   is the ground. */
body[data-rd]:not([data-page="home"]) .kg-ground { background: transparent; }

/* At night the SAME ramp runs on an ink ground instead of paper, so it needs no
   inversion -- only less of itself. The --rd-ink flip that used to live here is
   gone: it was still correct when the field was one flat ink, and became a line
   that claimed to do something after the ramp took over. .14 against the light
   scheme's .20 because these are bright values and ink gives them far more
   contrast to work with than cream does. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-rd]:not([data-page="home"]) .kg-rd-page { opacity: .14; }
}
:root[data-theme="dark"] body[data-rd]:not([data-page="home"]) .kg-rd-page { opacity: .14; }

/* ============================================================
   27. THE HERO CARD AND THE BAND CARDS ARE ONE WIDTH  (#635, 2026-09-30)
   ============================================================
   Fiz: "align the divs to be the same width."

   They never were, and it was two containers rather than a decision. A band
   card sits inside .kg-wrap, which adds 24px of padding inside the section's
   own gutter; the hero card is a direct child of its section and gets the
   gutter alone. Measured at 390: hero 350px at x=20, every band 302px at x=44.
   On a desktop, 1120 against 992.

   Aligned ONTO THE BAND MEASURE rather than the other way round. The wrap is
   the site-wide reading measure -- eight sections on this page and every band
   on the other twelve use it -- so the hero was the one exception, and moving
   the exception changes one card instead of all of them. It also means no
   other page is touched.

   992px is .kg-wrap's own 1040 less its 24px of padding on each side, so the
   two boxes resolve to the same number rather than to two numbers that happen
   to match today.
   ============================================================ */

body[data-page="home"] .kg-hero-grid { max-width: 992px; }
@media (max-width: 860px) {
  /* The phone has no max-width to align on -- both boxes are full width there
     and the difference is purely the wrap's padding, so the hero takes the
     same total gutter: the section's 20px plus the wrap's 24px. */
  body[data-page="home"] section.kg-hero {
    padding-left: calc(20px + 24px);
    padding-right: calc(20px + 24px);
  }
}

/* ============================================================
   28. NOTHING PANS SIDEWAYS                         (#637, 2026-09-30)
   ============================================================
   Fiz, from a phone: "the mobile site is scrolling horizontally."

   I could not reproduce a page-level scroll: every one of the 26 pages reports
   scrollWidth === clientWidth at 390, and still does with the existing
   `overflow-x: hidden` LIFTED, so nothing is being masked. What that sweep did
   find is below, and this rule is the belt to its braces.

   `html` was `overflow-x: visible` with only `body` set to hidden. That
   combination relies on the body's overflow propagating to the viewport, which
   it does here -- but it is the single most common source of a phone panning
   when a desktop browser says it cannot, so the root element now says it
   outright rather than inheriting the behaviour from a rule two levels down.
   `clip` where it is understood: unlike `hidden` it creates no scroll container,
   so it cannot swallow a sticky or trap a focus scroll.
   ============================================================ */

html { overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }

/* ============================================================
   29. THE MARK ON THE FOOTER                        (#638, 2026-09-30)
   ============================================================
   Fiz: "put a log on the footer."

   Centred above the wordmark, the way the document cover sets it: mark, a gap,
   then KONGEN LABS. 44px, which is the wordmark's own cap height times about
   two -- big enough to be the mark and not so big it becomes a second logo
   above the one already there.
   ============================================================ */

.kg-footer-mark {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  color: var(--kongen-white);
}

/* ============================================================
   30. THE WORLD PAGE'S ORGANISM IS ALIVE            (#640, 2026-09-30)
   ============================================================
   Fiz: "make the static icons of the world pages bubly and alive."

   The canvas is laid over the SVG in the same box. The SVG is NOT removed: it
   is the accessible name, the no-JS rendering, and what a reader who asked for
   less motion is left with. It stands down only when `kg-glyph-is-live` says a
   canvas is actually drawing in its place -- so a script that fails, or never
   loads, leaves the page exactly as it is today rather than blank.
   ============================================================ */

.kg-glyph-card { position: relative; }
.kg-glyph-live { display: block; }
.kg-glyph-card:not(.kg-glyph-is-live) .kg-glyph-live { display: none; }
.kg-glyph-card.kg-glyph-is-live > svg {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}