/* =====================================================================
   MycoCap - forest-floor pixel UI
   Tokens, components and page furniture. Plain CSS, no build step.
   One loud effect per view: a spore glow, a CRT field, or a terminal.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
  /* ===================================================================
     LIGHT is the base palette. These values apply with no data-theme
     attribute at all, so a first-time visitor - and a visitor with no
     JavaScript - gets the light theme. Forest and Brown are override
     blocks further down, placed after :root, so they win on equal
     specificity whenever their attribute is present.
     =================================================================== */

  --bg-void:     #f0eade;
  --bg-dark:     #faf6ea;
  --surface:     #fffdf7;
  --surface-2:   #f1ebdc;
  --border:      #c8bda3;
  --border-hi:   #a2947a;
  --ink-900:     #2a3a2f;
  --alt-bg:      rgba(216, 206, 184, 0.55);
  --head-bg:     rgba(240, 234, 222, 0.96);
  --film-bg:     rgba(216, 206, 184, 0.5);
  --bar-grad:    linear-gradient(90deg, #ded4bd, #cec2a6);

  --spore:       #0f6335;
  --spore-deep:  #42c273;
  --spore-dim:   #6fae86;
  --spore-edge:  #1c7a45;
  --spore-on:    #04240f;
  --lantern:     #ffb84d;
  --lantern-text:#8a5410;
  --lantern-dim: #8a5410;
  --lantern-on:  #2a1600;
  --rust:        #c0432f;
  --rust-text:   #a8331f;
  --rust-dim:    #8f3324;
  --rust-on:     #ffffff;
  --info:        #1f6f9c;
  --info-text:   #1a5f85;
  --info-dim:    #7ba9c4;
  --info-on:     #ffffff;

  --text:        #1c2a20;
  --text-2:      #41544a;
  --text-muted:  #4d5e53;   /* darkened: muted body text sits on the tinted alt band */

  --glow-rgb:    31, 143, 77;
  --lantern-rgb: 196, 133, 40;
  --glow-soft:   0.03;
  --glow-mid:    0.07;
  --glow-ring:   0.12;
  --glow-strong: 0.16;
  --scan:        0.035;
  --myco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='400' viewBox='0 0 540 400'%3E%3Cg fill='none' stroke='%231f6b45' stroke-opacity='.1' stroke-width='2'%3E%3Cpath d='M-20 60H80l60 60v80l80 80v100l80 60'/%3E%3Cpath d='M80 60V0'/%3E%3Cpath d='M140 200H60l-40 40'/%3E%3Cpath d='M220 280h120l60-60h160'/%3E%3Cpath d='M400 220V120l60-60h100'/%3E%3Cpath d='M400 120l-60-60V-20'/%3E%3Cpath d='M220 380h120l60-40'/%3E%3Cpath d='M-20 320h80l60-60'/%3E%3Cpath d='M460 60V-20'/%3E%3Cpath d='M120 260v120h60'/%3E%3Cpath d='M560 340h-80v60'/%3E%3Cpath d='M300 440v-60'/%3E%3C/g%3E%3Cg fill='%231f6b45' fill-opacity='.13'%3E%3Ccircle cx='80' cy='60' r='2.5'/%3E%3Ccircle cx='140' cy='200' r='2.5'/%3E%3Ccircle cx='220' cy='280' r='2.5'/%3E%3Ccircle cx='400' cy='220' r='2.5'/%3E%3Ccircle cx='400' cy='120' r='2.5'/%3E%3Ccircle cx='120' cy='260' r='2.5'/%3E%3Ccircle cx='460' cy='60' r='2.5'/%3E%3Ccircle cx='340' cy='380' r='2.5'/%3E%3Ccircle cx='60' cy='320' r='2.5'/%3E%3Ccircle cx='220' cy='380' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --focus-ring:  #8a5410;
  --focus-halo:  rgba(138, 84, 16, 0.2);
  --hero-shadow:
    0 2px 0 rgba(255, 255, 255, 0.85),
    0 0 14px rgba(31, 143, 77, 0.18);

  --slot-bg:       #1e2a23;
  --slot-rgb:      124, 255, 178;
  --slot-fg:       #7cffb2;
  --slot-dim:      #8fa79a;
  --slot-sprocket: rgba(30, 42, 35, 0.85);
  --cart-label-grad: linear-gradient(90deg, #ffc766, #d99a2e);
  --cart-label-fg:   #2a1600;

  /* --- lightbox: the veil behind it + the dark mat the shot sits on --- */
  --lb-scrim:    rgba(16, 24, 20, 0.84);
  --lb-mat:      #202723;

  --term-bg:     #1a231d;
  --term-bar:    #253029;
  --term-border: #3d5245;
  --term-edge:   #4a6353;
  --term-text:   #d7e3da;
  --term-out:    #9aada2;
  --term-prompt: #ffc266;
  --term-ok:     #7ce0a0;
  --term-flag:   #7cc6f0;

/* --- type --- */
  --font-display: 'Press Start 2P', 'Courier New', ui-monospace, monospace;
  --font-body:    'Pixelify Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', Consolas, 'Courier New', ui-monospace, monospace;

  /* --- 4px grid --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --page: 1120px;
  --head-h: 68px;
}

/* =====================================================================
   BROWN - warm woodland / bolete: bark, honey and cream
   ===================================================================== */
[data-theme="brown"] {
  --bg-void:     #1c120b;
  --bg-dark:     #26180f;
  --surface:     #332114;
  --surface-2:   #3e2a19;
  --border:      #4a3320;
  --border-hi:   #6d4a28;
  --ink-900:     #120a05;
  --alt-bg:      rgba(38, 24, 15, 0.62);
  --head-bg:     rgba(28, 18, 11, 0.95);
  --film-bg:     rgba(38, 24, 15, 0.5);
  --bar-grad:    linear-gradient(90deg, #5a3a1c, #3f2812);

  --spore:       #edc98d;
  --spore-deep:  #d29a34;
  --spore-dim:   #8a6320;
  --spore-edge:  #a8762a;
  --spore-on:    #1b1006;
  --lantern:     #ffb84d;
  --lantern-text:#ffb84d;
  --lantern-dim: #a86f1f;
  --lantern-on:  #2a1600;
  --rust:        #e0705a;
  --rust-text:   #ff9d86;
  --rust-dim:    #8a3a28;
  --rust-on:     #1b0d08;
  --info:        #c2c47a;
  --info-text:   #d3d595;
  --info-dim:    #8a8c4a;
  --info-on:     #16170a;

  --text:        #f3e6d2;
  --text-2:      #c9b498;
  --text-muted:  #a08c72;

  --glow-rgb:    255, 190, 110;
  --lantern-rgb: 210, 154, 52;
  --glow-soft:   0.022;
  --glow-mid:    0.13;
  --glow-ring:   0.18;
  --glow-strong: 0.32;
  --scan:        0.055;
  --myco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='400' viewBox='0 0 540 400'%3E%3Cg fill='none' stroke='%23ffbe6e' stroke-opacity='.14' stroke-width='2'%3E%3Cpath d='M-20 60H80l60 60v80l80 80v100l80 60'/%3E%3Cpath d='M80 60V0'/%3E%3Cpath d='M140 200H60l-40 40'/%3E%3Cpath d='M220 280h120l60-60h160'/%3E%3Cpath d='M400 220V120l60-60h100'/%3E%3Cpath d='M400 120l-60-60V-20'/%3E%3Cpath d='M220 380h120l60-40'/%3E%3Cpath d='M-20 320h80l60-60'/%3E%3Cpath d='M460 60V-20'/%3E%3Cpath d='M120 260v120h60'/%3E%3Cpath d='M560 340h-80v60'/%3E%3Cpath d='M300 440v-60'/%3E%3C/g%3E%3Cg fill='%23ffbe6e' fill-opacity='.22'%3E%3Ccircle cx='80' cy='60' r='2.5'/%3E%3Ccircle cx='140' cy='200' r='2.5'/%3E%3Ccircle cx='220' cy='280' r='2.5'/%3E%3Ccircle cx='400' cy='220' r='2.5'/%3E%3Ccircle cx='400' cy='120' r='2.5'/%3E%3Ccircle cx='120' cy='260' r='2.5'/%3E%3Ccircle cx='460' cy='60' r='2.5'/%3E%3Ccircle cx='340' cy='380' r='2.5'/%3E%3Ccircle cx='60' cy='320' r='2.5'/%3E%3Ccircle cx='220' cy='380' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --focus-ring:  #ffcf7a;
  --focus-halo:  rgba(255, 207, 122, 0.18);
  --hero-shadow:
    0 0 6px rgba(237, 201, 141, 0.62),
    0 0 18px rgba(210, 154, 52, 0.4),
    0 0 40px rgba(210, 154, 52, 0.24);

  --slot-bg:       #150e07;
  --slot-rgb:      237, 201, 141;
  --slot-fg:       #edc98d;
  --slot-dim:      #a08c72;
  --slot-sprocket: rgba(21, 14, 7, 0.85);
  --cart-label-grad: linear-gradient(90deg, #e8b05e, #b5842e);
  --cart-label-fg:   #2a1600;

  --lb-scrim:    rgba(9, 5, 2, 0.88);
  --lb-mat:      #241a13;

  --term-bg:     #150e07;
  --term-bar:    #26180f;
  --term-border: #4a3320;
  --term-edge:   #6d4a28;
  --term-text:   #f3e6d2;
  --term-out:    #a08c72;
  --term-prompt: #ffb84d;
  --term-ok:     #edc98d;
  --term-flag:   #d3d595;
}

/* =====================================================================
   FOREST - deep forest night: spore glow on the damp forest floor
   ===================================================================== */
[data-theme="forest"] {
  /* --- surfaces (deep forest night) --- */
  --bg-void:     #0b1410;
  --bg-dark:     #101f18;
  --surface:     #16291f;
  --surface-2:   #1b3327;
  --border:      #2c4636;
  --border-hi:   #3d6049;
  --ink-900:     #060d09;
  --alt-bg:      rgba(16, 31, 24, 0.62);
  --head-bg:     rgba(11, 20, 16, 0.95);
  --film-bg:     rgba(16, 31, 24, 0.5);
  --bar-grad:    linear-gradient(90deg, #12603a, #0d3f24);

  /* --- accents --- */
  --spore:       #7cffb2;   /* accent ink: links, active, glow */
  --spore-deep:  #3ef07a;   /* primary fills */
  --spore-dim:   #1f8f4d;   /* accent borders */
  --spore-edge:  #1c9b52;   /* accent fill outline */
  --spore-on:    #06210f;   /* text drawn on a spore fill */
  --lantern:     #ffb84d;   /* lantern amber - fills, highlights */
  --lantern-text:#ffb84d;   /* amber as text on a surface */
  --lantern-dim: #a86f1f;
  --lantern-on:  #2a1600;   /* text drawn on an amber fill */
  --rust:        #e2554a;   /* cap rust - fills, borders, marks */
  --rust-text:   #ff8f82;   /* cap rust as text on a surface */
  --rust-dim:    #7d2a22;
  --rust-on:     #240604;   /* text drawn on a rust fill */
  --info:        #5ec8ff;
  --info-text:   #5ec8ff;
  --info-dim:    #2c7fb0;
  --info-on:     #06181f;

  /* --- text --- */
  --text:        #e8f2e4;
  --text-2:      #a9c3ad;
  --text-muted:  #7d9683;

  /* --- atmosphere: glows, scanlines, focus --- */
  --glow-rgb:    62, 240, 122;
  --lantern-rgb: 255, 184, 77;
  --glow-soft:   0.022;   /* page dither */
  --glow-mid:    0.13;    /* page wash + hover rings */
  --glow-ring:   0.18;    /* small accent dot halo */
  --glow-strong: 0.35;    /* logo halo */
  --scan:        0.055;
  --myco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='400' viewBox='0 0 540 400'%3E%3Cg fill='none' stroke='%237cffb2' stroke-opacity='.13' stroke-width='2'%3E%3Cpath d='M-20 60H80l60 60v80l80 80v100l80 60'/%3E%3Cpath d='M80 60V0'/%3E%3Cpath d='M140 200H60l-40 40'/%3E%3Cpath d='M220 280h120l60-60h160'/%3E%3Cpath d='M400 220V120l60-60h100'/%3E%3Cpath d='M400 120l-60-60V-20'/%3E%3Cpath d='M220 380h120l60-40'/%3E%3Cpath d='M-20 320h80l60-60'/%3E%3Cpath d='M460 60V-20'/%3E%3Cpath d='M120 260v120h60'/%3E%3Cpath d='M560 340h-80v60'/%3E%3Cpath d='M300 440v-60'/%3E%3C/g%3E%3Cg fill='%237cffb2' fill-opacity='.2'%3E%3Ccircle cx='80' cy='60' r='2.5'/%3E%3Ccircle cx='140' cy='200' r='2.5'/%3E%3Ccircle cx='220' cy='280' r='2.5'/%3E%3Ccircle cx='400' cy='220' r='2.5'/%3E%3Ccircle cx='400' cy='120' r='2.5'/%3E%3Ccircle cx='120' cy='260' r='2.5'/%3E%3Ccircle cx='460' cy='60' r='2.5'/%3E%3Ccircle cx='340' cy='380' r='2.5'/%3E%3Ccircle cx='60' cy='320' r='2.5'/%3E%3Ccircle cx='220' cy='380' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --focus-ring:  #ffb84d;
  --focus-halo:  rgba(255, 184, 77, 0.16);
  --hero-shadow:
    0 0 6px rgba(124, 255, 178, 0.7),
    0 0 18px rgba(62, 240, 122, 0.42),
    0 0 40px rgba(62, 240, 122, 0.26);

  /* --- screen surfaces: dark in every theme, like a real display --- */
  --slot-bg:       #060d09;
  --slot-rgb:      124, 255, 178;
  --slot-fg:       #7cffb2;
  --slot-dim:      #7d9683;
  --slot-sprocket: rgba(6, 13, 9, 0.85);
  --cart-label-grad: linear-gradient(90deg, #ffb84d, #c2811f);
  --cart-label-fg:   #2a1600;

  --lb-scrim:    rgba(2, 6, 4, 0.88);
  --lb-mat:      #161f1a;

  /* --- terminal: also stays dark in every theme --- */
  --term-bg:     #07100b;
  --term-bar:    #101f18;
  --term-border: #2c4636;
  --term-edge:   #3d6049;
  --term-text:   #e8f2e4;
  --term-out:    #7d9683;
  --term-prompt: #ffb84d;
  --term-ok:     #7cffb2;
  --term-flag:   #5ec8ff;
}

/* ---------------------------------------------------------------------
   2. RESET + ATMOSPHERE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg-void);
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + var(--s4));
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: transparent;
}

/* mycelium network + spore wash - above the canvas, behind content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg-void);
  background-image:
    radial-gradient(1100px 620px at 84% -14%, rgba(var(--glow-rgb), var(--glow-mid)), transparent 61%),
    radial-gradient(760px 520px at -4% 4%, rgba(var(--lantern-rgb), 0.07), transparent 62%),
    var(--myco),
    repeating-linear-gradient(45deg, rgba(var(--glow-rgb), var(--glow-soft)) 0 2px, transparent 2px 8px);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, 540px 400px, 8px 8px;
  background-position: center top, left top, 0 0, 0 0;
}

/* faint CRT phosphor field over everything - pointer-events none */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 1) 2px,
    rgba(0, 0, 0, 1) 4px
  );
  opacity: var(--scan);
  mix-blend-mode: multiply;
}

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

img, svg { max-width: 100%; }
img { height: auto; }

/* The browser's default figure margin (1em 40px) inset every cartridge
   from its grid track, so the gallery never lined up with the text above
   it. The gallery owns its own gaps. */
figure { margin: 0; }

a { color: var(--spore); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--lantern-text); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

.skip {
  position: absolute;
  left: var(--s4);
  top: -120px;
  z-index: 10000;
  padding: var(--s2) var(--s4);
  background: var(--lantern);
  color: var(--lantern-on);
  font-family: var(--font-mono);
  font-weight: 600;
  text-decoration: none;
  border: 3px solid var(--ink-900);
}
.skip:focus { top: var(--s4); color: var(--lantern-on); }

/* ---------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.4px;
  margin: 0 0 var(--s4);
  color: var(--text);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: clamp(1.5rem, 5.6vw, 2.5rem); }
h2 { font-size: clamp(1.05rem, 3.1vw, 1.55rem); }
h3 { font-size: clamp(0.85rem, 2.1vw, 1.02rem); }
h4 { font-size: 0.8rem; }

p { margin: 0 0 var(--s4); }

.lede {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.65;
  color: var(--text-2);
  /* No measure cap: a lede fills its column so its right edge matches the
     heading above it and the grid below. Only genuinely narrow columns
     (hero pitch, footer blurb, placeholder caption) keep a cap. */
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lantern-text);
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--spore-deep);
  box-shadow: 0 0 0 3px rgba(var(--glow-rgb), var(--glow-ring));
}

.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }
.small { font-size: 0.86rem; }
.nowrap { white-space: nowrap; }

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

/* ---------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------- */
.wrap {
  width: min(100% - 32px, var(--page));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 32px, 780px); }

.section { padding: var(--s9) 0; }
.section--tight { padding: var(--s7) 0; }
.section--alt {
  background: var(--alt-bg);
  border-block: 2px solid var(--border);
}

.section__head { margin-bottom: var(--s7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }

.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--tight { grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); }

.divider-myco {
  height: 8px;
  border: 0;
  margin: 0;
  background: repeating-linear-gradient(90deg, var(--border-hi) 0 4px, transparent 4px 12px);
  opacity: 0.7;
}

/* ---------------------------------------------------------------------
   5. HEADER / NAV
   --------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--head-bg);
  border-bottom: 3px solid var(--border);
}
.site-head__inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--head-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
  margin-right: auto;
  text-decoration: none;
  color: var(--text);
}
.brand__logo {
  width: 40px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 6px rgba(var(--glow-rgb), var(--glow-strong)));
}
.brand__name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: -0.5px;
  -webkit-font-smoothing: none;
}
.brand:hover .brand__name { color: var(--spore); }
.brand:hover { color: var(--text); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: block;
  padding: var(--s2) var(--s3);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  border: 2px solid transparent;
}
.nav__link:hover { color: var(--text); border-color: var(--border-hi); }
.nav__link[aria-current="page"] {
  color: var(--spore-on);
  background: var(--spore-deep);
  border-color: var(--spore-deep);
  box-shadow: 3px 3px 0 0 var(--ink-900);
}
.nav__link[aria-current="page"]:hover { color: var(--spore-on); }

.navtoggle {
  display: none;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 3px solid var(--border-hi);
  box-shadow: 4px 4px 0 0 var(--ink-900);
  cursor: pointer;
}
.navtoggle:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--ink-900); }
.navtoggle__bars { display: grid; gap: 3px; }
.navtoggle__bars i { display: block; width: 16px; height: 3px; background: var(--spore); }

/* ---------------------------------------------------------------------
   5b. THEME SWITCHER
   Three pixel swatches. The chips preview each theme on purpose, so
   they stay hard-coded while everything around them re-tints.
   --------------------------------------------------------------------- */
.theme {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--s2);
  padding: 3px;
  background: var(--bg-dark);
  border: 2px solid var(--border);
}
.theme__label {
  padding: 0 var(--s2) 0 var(--s1);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.theme__btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--surface);
  border: 2px solid var(--border-hi);
  cursor: pointer;
  transition: none;
}
.theme__btn:hover { border-color: var(--lantern-text); }
.theme__btn[aria-pressed="true"] {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.theme__btn:active { transform: translate(1px, 1px); }

.theme__swatch { display: block; width: 100%; height: 100%; }
.theme__swatch--forest { background: linear-gradient(135deg, #3ef07a 0 50%, #0b1410 50% 100%); }
.theme__swatch--brown  { background: linear-gradient(135deg, #ffb84d 0 50%, #1c120b 50% 100%); }
.theme__swatch--light  { background: linear-gradient(135deg, #f0eade 0 50%, #12703a 50% 100%); }

/* Below ~1000px the "Theme" word is dropped so the row stays roomy. */
@media (max-width: 999px) {
  .theme__label { display: none; }
}

/* Below ~860px the nav collapses behind the hamburger; brand, theme and
   toggle share one row and the panel drops to a second row. */
@media (max-width: 859px) {
  .brand { order: 1; }
  .theme { order: 2; }
  .navtoggle { order: 3; display: inline-flex; }
  .nav {
    display: none;
    flex-basis: 100%;
    order: 4;
    padding-bottom: var(--s3);
  }
  .nav.is-open { display: block; }
  .site-head__inner { flex-wrap: wrap; padding-block: var(--s3); row-gap: var(--s3); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { border-width: 0 0 2px 0; border-color: var(--border); padding: var(--s3) var(--s2); }
  .nav__link:last-child { border-bottom: 0; }
  .nav__link[aria-current="page"] { box-shadow: none; border-width: 0 0 2px 0; border-color: var(--spore-deep); }
}

@media (max-width: 430px) {
  .theme { gap: 4px; padding: 2px; }
  .theme__btn { width: 24px; height: 24px; }
  .navtoggle__text { display: none; }
}

/* ---------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-edge: var(--border-hi);
  --px: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--px) solid var(--btn-edge);
  cursor: pointer;
  transition: none;
  box-shadow:
    5px 5px 0 0 var(--ink-900),
    inset -3px -3px 0 0 rgba(0, 0, 0, 0.35),
    inset 3px 3px 0 0 rgba(255, 255, 255, 0.13);
}
.btn:hover:not(:disabled) { filter: brightness(1.14); color: var(--btn-fg); }
.btn:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow:
    2px 2px 0 0 var(--ink-900),
    inset 3px 3px 0 0 rgba(0, 0, 0, 0.35),
    inset -3px -3px 0 0 rgba(255, 255, 255, 0.1);
}
.btn:disabled { cursor: not-allowed; filter: grayscale(1); opacity: 0.5; }

.btn--primary { --btn-bg: var(--spore-deep); --btn-fg: var(--spore-on); --btn-edge: var(--spore-edge); }
.btn--lantern { --btn-bg: var(--lantern); --btn-fg: var(--lantern-on); --btn-edge: var(--lantern-dim); }
.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--spore); --btn-edge: var(--border-hi); }
.btn--danger  { --btn-bg: var(--rust); --btn-fg: var(--rust-on); --btn-edge: var(--rust-dim); }

.btn--sm {
  --px: 2px;
  padding: var(--s2) var(--s3);
  font-size: 0.84rem;
  box-shadow:
    4px 4px 0 0 var(--ink-900),
    inset -2px -2px 0 0 rgba(0, 0, 0, 0.35),
    inset 2px 2px 0 0 rgba(255, 255, 255, 0.13);
}
.btn--sm:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--ink-900); }
.btn--block { width: 100%; }

.btn__meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* The brand name, set in mono so the capital C stays open at button size.
   Pixelify Sans draws an uppercase C whose aperture closes up at 16px and
   reads as an O ("MYCOOAP"); Plex Mono keeps the gap at any size. */
.btn__name {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* ---------------------------------------------------------------------
   7. PANELS / CARDS
   --------------------------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 3px solid var(--border);
  box-shadow: 6px 6px 0 0 var(--ink-900);
  padding: var(--s5);
}
.panel--dark { background: var(--bg-dark); }
.panel.panel--flush { padding: 0; }

.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--bar-grad);
  border-bottom: 3px solid var(--border);
}
.panel__bar-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.panel__bar-dots { display: flex; gap: 4px; }
.panel__bar-dots span { width: 10px; height: 10px; background: var(--ink-900); }
.panel__body { padding: var(--s5); }
.panel__body > :last-child { margin-bottom: 0; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--bg-dark);
  border: 3px solid var(--border);
  box-shadow: 6px 6px 0 0 var(--ink-900);
  transition: border-color 0.12s steps(2), box-shadow 0.12s steps(2);
}
.card:hover {
  border-color: var(--spore-dim);
  box-shadow: 6px 6px 0 0 var(--ink-900), 0 0 0 3px rgba(var(--glow-rgb), var(--glow-ring));
}
.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--spore-on);
  background: var(--spore-deep);
  border: 3px solid var(--spore-edge);
  box-shadow: 3px 3px 0 0 var(--ink-900);
}
.card--lantern .card__icon { background: var(--lantern); border-color: var(--lantern-dim); color: var(--lantern-on); }
.card--rust .card__icon { background: var(--rust); border-color: var(--rust-dim); color: var(--rust-on); }
.card--info .card__icon { background: var(--info); border-color: var(--info-dim); color: var(--info-on); }

.card__title { margin: 0; font-size: 0.86rem; }
.card__text { margin: 0; color: var(--text-2); font-size: 1rem; line-height: 1.65; }
.card__link { margin-top: auto; font-family: var(--font-mono); font-size: 0.82rem; }

.tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.tag {
  padding: 2px var(--s2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--text-2);
  background: var(--surface);
  border: 2px solid var(--border);
}
.tag--spore { color: var(--spore); border-color: var(--spore-dim); }
.tag--lantern { color: var(--lantern-text); border-color: var(--lantern-dim); }
.tag--info { color: var(--info-text); border-color: var(--info-dim); }
.tag--rust { color: var(--rust-text); border-color: var(--rust-dim); }

/* ---------------------------------------------------------------------
   8. LISTS, KEYS, CODE
   --------------------------------------------------------------------- */
.list-px { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.list-px li {
  position: relative;
  padding-left: var(--s5);
  color: var(--text-2);
  line-height: 1.6;
}
.list-px li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--spore-deep);
}
.list-px--lantern li::before { background: var(--lantern); }
.list-px--info li::before { background: var(--info); }
.list-px--check li::before {
  content: "\2713";
  background: none;
  color: var(--spore);
  font-family: var(--font-mono);
  font-size: 1rem;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}
.list-px--cross li::before {
  content: "\00d7";
  background: none;
  color: var(--rust-text);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  width: auto;
  height: auto;
  top: 0;
  left: 2px;
}

kbd, .kbd {
  display: inline-block;
  padding: 2px 7px;
  font-size: 0.78em;
  color: var(--text);
  background: var(--surface-2);
  border: 2px solid var(--border-hi);
  box-shadow: 0 2px 0 0 var(--ink-900);
  white-space: nowrap;
}

pre { margin: 0; overflow-x: auto; font-size: 0.84rem; line-height: 1.75; }
code { font-size: 0.88em; color: var(--spore); }
p code, li code, td code { background: var(--surface-2); padding: 1px 5px; border: 1px solid var(--border); }

.term {
  background: var(--term-bg);
  border: 3px solid var(--term-border);
  box-shadow: 6px 6px 0 0 var(--ink-900);
  margin-block: var(--s4);
}
.term__bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--term-bar);
  border-bottom: 2px solid var(--term-edge);
}
.term__dots { display: flex; gap: 4px; }
.term__dots span { width: 10px; height: 10px; border: 2px solid var(--term-edge); }
.term__dots span:nth-child(1) { background: var(--rust); }
.term__dots span:nth-child(2) { background: var(--lantern); }
.term__dots span:nth-child(3) { background: var(--spore-deep); }
.term__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--term-out);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.term__body { padding: var(--s4); color: var(--term-text); }
.term__body .prompt { color: var(--term-prompt); user-select: none; }
.term__body .out { color: var(--term-out); }
.term__body .ok { color: var(--term-ok); }
.term__body .flag { color: var(--term-flag); }
.term__body .verb { color: var(--term-prompt); }

.copy {
  flex: none;
  padding: 2px var(--s2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--term-out);
  background: transparent;
  border: 2px solid var(--term-edge);
  cursor: pointer;
}
.copy:hover { color: var(--term-bg); background: var(--term-prompt); border-color: var(--term-prompt); }

/* ---------------------------------------------------------------------
   9. CALLOUTS
   --------------------------------------------------------------------- */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--bg-dark);
  border: 3px solid var(--border);
  border-left-width: 8px;
  box-shadow: 5px 5px 0 0 var(--ink-900);
}
.callout__icon { font-family: var(--font-mono); font-size: 1.15rem; line-height: 1.35; }
.callout__title { margin: 0 0 var(--s1); font-size: 0.82rem; }
.callout p { color: var(--text-2); }
.callout > div > :last-child { margin-bottom: 0; }

.callout--ok     { border-left-color: var(--spore-deep); }
.callout--ok     .callout__icon { color: var(--spore); }
.callout--info   { border-left-color: var(--info); }
.callout--info   .callout__icon { color: var(--info-text); }
.callout--warn   { border-left-color: var(--lantern); }
.callout--warn   .callout__icon { color: var(--lantern-text); }
.callout--danger { border-left-color: var(--rust); }
.callout--danger .callout__icon { color: var(--rust-text); }

/* ---------------------------------------------------------------------
   10. HERO
   --------------------------------------------------------------------- */
.hero { position: relative; padding: var(--s8) 0 var(--s9); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: var(--s7);
  align-items: center;
}

.hero__title {
  margin: 0 0 var(--s4);
  font-size: clamp(2rem, 8vw, 3.6rem);
  letter-spacing: -1.5px;
  color: var(--spore);
  text-shadow: var(--hero-shadow);
}
.hero__pitch {
  font-size: clamp(1.05rem, 2.3vw, 1.28rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 46ch;
  margin-bottom: var(--s5);
}
.tray-note {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  padding: var(--s2) var(--s3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-2);
  background: var(--bg-dark);
  border: 2px solid var(--border);
}
.tray-note .dot { width: 8px; height: 8px; background: var(--spore-deep); box-shadow: 0 0 8px var(--spore-deep); }

/* --- the editor window mock ------------------------------------------
   Drawn the way the app draws itself: three strips on the top panel, then
   the annotation palette docked down the left edge of the canvas. The rail
   is part of the window, not a floating bar: flush to the canvas, square,
   no shadow. Everything scales off --rail-cell, so the mock shrinks as a
   whole instead of clipping or wrapping its icons. */
.stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s4);
  --rail-cell: clamp(26px, 4.6vw, 32px);
  --dest-cell: clamp(16px, 3vw, 20px);
}

.stage__win {
  display: grid;
  width: 100%;
  max-width: 464px;
  min-width: 0;
  background: var(--surface);
  border: 2px solid var(--border-hi);
  box-shadow: 4px 4px 0 0 var(--ink-900);
}

/* --- top panel: menu (row 0), destinations (row 1), properties (row 2) --- */
.stage__top {
  display: grid;
  min-width: 0;
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
}
.stage__strip {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.stage__strip--menu {
  gap: 1px;
  padding: 1px var(--s1);
  background: var(--bar-grad);
  border-bottom: 2px solid var(--border);
}
.stage__menu {
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.7;
  color: var(--text-2);
  white-space: nowrap;
}
.stage__strip--dest { padding: 2px var(--s1); border-bottom: 2px solid var(--border); }
.stage__cell {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--dest-cell);
  height: var(--dest-cell);
  font-family: var(--font-mono);
  font-size: calc(var(--dest-cell) * 0.62);
  line-height: 1;
  color: var(--text-2);
  white-space: nowrap;
}
.stage__vsep {
  flex: none;
  width: 2px;
  height: calc(var(--dest-cell) * 0.66);
  margin: 0 3px;
  background: var(--border-hi);
}
.stage__strip--props { gap: var(--s1); padding: 3px var(--s2); }
.stage__sw {
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-hi);
}
.stage__sw--fill { background: var(--spore-deep); }
.stage__sw--line { background: var(--ink-900); }
.stage__sw--text { background: var(--lantern); }
.stage__thick {
  flex: none;
  width: 24px;
  height: 3px;
  margin-left: var(--s1);
  background: var(--text-2);
}
.stage__val {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  line-height: 1;
  color: var(--text-muted);
}

/* --- body: the rail, then the canvas --- */
.stage__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
}

/* The palette: one column, flush against the canvas edge, square, no shadow. */
.stage__rail {
  display: grid;
  align-content: start;
  justify-items: center;
  width: calc(var(--rail-cell) + 10px);
  padding: var(--s1) 4px;
  background: var(--surface-2);
  border-right: 2px solid var(--border-hi);
}
.stage__tool {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--rail-cell);
  height: var(--rail-cell);
  font-family: var(--font-mono);
  font-size: calc(var(--rail-cell) * 0.48);
  line-height: 1;
  color: var(--text-2);
  white-space: nowrap;
  border: 2px solid transparent;
}
/* The select tool is the one the editor opens with. */
.stage__tool--on {
  color: var(--spore-on);
  background: var(--spore-deep);
  border-color: var(--spore-edge);
}
/* The solid Redact cell sits rust on purpose: opaque pixels, no peeking through. */
.stage__tool--rust {
  color: var(--rust-on);
  background: var(--rust);
  border-color: var(--rust-dim);
}
/* Crop is a split button in the app: the cell carries a drop-down caret. */
.stage__tool--split { padding: 0 3px 3px 0; }
.stage__caret {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid currentColor;
}
.stage__sep {
  width: calc(var(--rail-cell) - 8px);
  height: 2px;
  margin: 4px 0;
  background: var(--border);
}

/* --- canvas: paper, a dotted pixel field, and one selected annotation --- */
.stage__canvas {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: var(--s4);
  overflow: hidden;
  background-color: var(--surface);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 16px 16px;
}
.stage__art { position: relative; display: grid; place-items: center; }
.stage__logo {
  width: clamp(112px, 20vw, 168px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 12px rgba(var(--glow-rgb), var(--glow-strong)));
}
.stage__sel {
  position: absolute;
  inset: -10px;
  border: 2px dashed var(--spore-dim);
  pointer-events: none;
}
.stage__sel i {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--spore-deep);
  border: 2px solid var(--ink-900);
}
.stage__sel i:nth-child(1) { top: -5px; left: -5px; }
.stage__sel i:nth-child(2) { top: -5px; right: -5px; }
.stage__sel i:nth-child(3) { bottom: -5px; left: -5px; }
.stage__sel i:nth-child(4) { bottom: -5px; right: -5px; }
.stage__step {
  position: absolute;
  right: -14px;
  bottom: -14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  line-height: 1;
  color: var(--lantern-on);
  background: var(--lantern);
  border: 3px solid var(--ink-900);
}

/* The element-list caption belongs to the canvas, so it sits on the canvas. */
.stage__chip {
  position: absolute;
  right: var(--s2);
  bottom: var(--s2);
  align-items: flex-start;
  margin: 0;
  max-width: calc(100% - var(--s4));
  padding: 2px var(--s2);
  font-size: 0.68rem;
  line-height: 1.5;
}
.stage__chip .dot { flex: none; margin-top: 4px; }

.hero__spores { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__spores i { position: absolute; width: 4px; height: 4px; background: var(--spore); opacity: 0.5; }
.hero__spores i:nth-child(1) { left: 12%; top: 72%; }
.hero__spores i:nth-child(2) { left: 28%; top: 34%; }
.hero__spores i:nth-child(3) { left: 46%; top: 84%; }
.hero__spores i:nth-child(4) { left: 64%; top: 22%; }
.hero__spores i:nth-child(5) { left: 78%; top: 62%; }
.hero__spores i:nth-child(6) { left: 90%; top: 40%; }

@media (prefers-reduced-motion: no-preference) {
  .hero__spores i { animation: spore-drift 9s steps(24) infinite; }
  .hero__spores i:nth-child(2n) { animation-duration: 12s; animation-delay: -3s; }
  .hero__spores i:nth-child(3n) { animation-duration: 15s; animation-delay: -6s; }
  @keyframes spore-drift {
    0%   { transform: translate(0, 0); opacity: 0; }
    15%  { opacity: 0.55; }
    85%  { opacity: 0.55; }
    100% { transform: translate(-18px, -70px); opacity: 0; }
  }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .hero { padding-top: var(--s6); }
  .stage { order: -1; }
}

/* ---------------------------------------------------------------------
   11. SCREENSHOT CARTRIDGES
   --------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  border: 3px solid var(--border);
  box-shadow: 6px 6px 0 0 var(--ink-900);
}
.cart__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--cart-label-grad);
  border-bottom: 3px solid var(--border);
}
.cart__idx {
  font-family: var(--font-display);
  font-size: 0.66rem;
  color: var(--cart-label-fg);
  letter-spacing: -0.5px;
}
.cart__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cart-label-fg);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart__slot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--slot-bg);
  overflow: hidden;
}
/* A real screenshot is shown clean: the only thing over it is a 1px inner
   line, so the cartridge still reads as a framed screen. The CRT field and
   the filmstrip perforations belong to the empty placeholder, where they
   sell the "insert cartridge" idea instead of blurring real pixels. */
.cart__slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 1px solid var(--border-hi);
}
.cart.is-empty .cart__slot::after {   /* per-slot CRT field, empty slots only */
  border: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, 0.32) 2px 4px
  );
}
.cart.is-empty .cart__slot::before {  /* filmstrip perforations, empty slots only */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, var(--slot-sprocket) 0 8px, transparent 8px 20px) left/10px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--slot-sprocket) 0 8px, transparent 8px 20px) right/10px 100% no-repeat;
}
/* No image-rendering override here: UI screenshots are downscaled and must
   stay smooth. Only the placeholder logo is a pixel mark. */
.cart__img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart.is-empty .cart__img { display: none; }

.cart__ph {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s2);
  padding: var(--s4);
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(var(--slot-rgb), 0.06) 0 4px, transparent 4px 10px),
    var(--slot-bg);
}
.cart__ph-icon {
  width: 44px;
  height: auto;
  opacity: 0.5;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.cart__ph-text {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: -0.3px;
  line-height: 1.7;
  color: var(--slot-fg);
}
.cart__ph-text::after { content: "_"; color: var(--lantern); }
@media (prefers-reduced-motion: no-preference) {
  .cart__ph-text::after { animation: cursor-blink 1.1s steps(1) infinite; }
  @keyframes cursor-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
}
.cart__ph-sub {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--slot-dim);
  max-width: 26ch;
}
/* Click-to-enlarge affordance. main.js adds .cart--zoom and the badge,
   so a browser without JS keeps the plain cartridge it has today. */
.cart--zoom {
  transition: border-color 0.12s steps(2), box-shadow 0.12s steps(2);
}
.cart--zoom:not(.is-empty):hover,
.cart--zoom:not(.is-empty):focus-within {
  border-color: var(--spore-dim);
  box-shadow: 6px 6px 0 0 var(--ink-900), 0 0 0 3px rgba(var(--glow-rgb), var(--glow-ring));
}
.cart--zoom .cart__slot,
.cart--zoom .cart__img { cursor: zoom-in; }
.cart--zoom:hover .cart__img { filter: brightness(1.05); }
/* The slot clips its overflow, so the ring is drawn just inside the frame. */
.cart--zoom .cart__img:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -6px;
  box-shadow: none;
}
.cart__zoom {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  z-index: 6;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--cart-label-fg);
  background: var(--cart-label-grad);
  border: 2px solid var(--ink-900);
  opacity: 0.9;
  pointer-events: none;
}
.cart--zoom:hover .cart__zoom,
.cart--zoom:focus-within .cart__zoom {
  background: var(--lantern);
  opacity: 1;
}
/* A missing PNG shows the placeholder; it should not advertise a lightbox. */
.cart.is-empty .cart__zoom { display: none; }

.filmstrip {
  border-block: 3px solid var(--border);
  background:
    repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 18px) top/100% 8px repeat-x,
    repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 18px) bottom/100% 8px repeat-x,
    var(--film-bg);
  padding: var(--s5) 0;
}

/* ---------------------------------------------------------------------
   11b. LIGHTBOX - click a cartridge, get the real PNG
   The <dialog> is injected by main.js, so a browser without JS keeps the
   plain gallery. The mat stays dark in every theme on purpose: these are
   light UI screenshots and they need a neutral surround to read well.
   --------------------------------------------------------------------- */

/* Scroll lock. --lb-sb is the scrollbar width main.js measured, so the
   page does not jump sideways when the bar disappears. */
html.lb-open { overflow: hidden; }
html.lb-open body { padding-right: var(--lb-sb, 0px); }

.lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(100vw - 32px, 1660px);
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 3px solid var(--border-hi);
  border-radius: 0;
  background: var(--bg-dark);
  color: var(--text);
  box-shadow: 8px 8px 0 0 var(--ink-900);
  overflow: hidden;
}
.lightbox::backdrop { background: var(--lb-scrim); }
/* The dialog box itself is not a control; its contents carry the focus. */
.lightbox:focus,
.lightbox:focus-visible {
  outline: none;
  box-shadow: 8px 8px 0 0 var(--ink-900);
}

.lightbox__frame { display: flex; flex-direction: column; min-width: 0; }
.lightbox[open] .lightbox__frame { animation: lb-rise 0.2s steps(4) both; }
@keyframes lb-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* top bar reuses the cartridge label strip */
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--cart-label-grad);
  border-bottom: 3px solid var(--border);
}
.lightbox__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cart-label-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lightbox__close {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  padding: 2px var(--s2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: 0;
  box-shadow: 2px 2px 0 0 var(--ink-900);
  cursor: pointer;
}
.lightbox__close:hover { color: var(--rust-on); background: var(--rust); border-color: var(--rust-dim); }
.lightbox__close:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--ink-900); }
.lightbox__close-x { font-size: 0.9rem; line-height: 1; }

.lightbox__mat {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s4);
  background-color: var(--lb-mat);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px);
}
.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 176px);
  max-height: calc(100dvh - 176px);
  image-rendering: auto;          /* never pixelated: these are UI photos */
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.45);
}

.lightbox__foot {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border-top: 3px solid var(--border);
}
.lightbox__nav {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 32px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--spore);
  background: var(--surface);
  border: 2px solid var(--border-hi);
  border-radius: 0;
  box-shadow: 3px 3px 0 0 var(--ink-900);
  cursor: pointer;
}
.lightbox__nav:hover { color: var(--spore-on); background: var(--spore-deep); border-color: var(--spore-edge); }
.lightbox__nav:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--ink-900); }
.lightbox__count {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: -0.4px;
  color: var(--lantern-text);
  white-space: nowrap;
}
.lightbox__hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .lightbox {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .lightbox__bar,
  .lightbox__foot { padding: var(--s2); }
  .lightbox__mat { padding: var(--s2); }
  .lightbox__img {
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px);
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.45);
  }
  .lightbox__hint { display: none; }
}
@media (max-width: 480px) {
  .lightbox__close-text { display: none; }
  .lightbox__title { font-size: 0.7rem; letter-spacing: 0.03em; }
  .lightbox__nav { width: 34px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox[open] .lightbox__frame { animation: none; }
  .cart--zoom { transition: none; }
}

/* ---------------------------------------------------------------------
   12. DOWNLOAD
   --------------------------------------------------------------------- */
.dl-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--bg-dark);
  border: 3px solid var(--border);
  box-shadow: 6px 6px 0 0 var(--ink-900);
}
.dl-card--feature {
  border-color: var(--spore-dim);
  box-shadow: 6px 6px 0 0 var(--ink-900), 0 0 0 3px rgba(var(--glow-rgb), var(--glow-ring));
}
.dl-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.dl-card__arch {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.5px;
  color: var(--spore);
  margin: 0;
}
.dl-card p { margin: 0; color: var(--text-2); font-size: 0.98rem; }
.dl-card .list-px { margin-top: var(--s1); }
.dl-card .btn { margin-top: auto; }
.dl-card__note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.dl-file {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  word-break: break-all;
  color: var(--text-muted);
  background: var(--bg-void);
  border: 2px solid var(--border);
  padding: var(--s2);
  display: block;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.spec-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lantern-text);
  padding-bottom: var(--s3);
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: var(--s3);
  border-bottom: 2px solid var(--border);
  vertical-align: top;
}
.spec-table th {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  width: 38%;
  font-weight: 600;
}
.spec-table td { color: var(--text); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------
   13. CTA BAND + FOOTER
   --------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-block: 3px solid var(--spore-dim);
  background:
    radial-gradient(760px 320px at 50% 120%, rgba(var(--glow-rgb), var(--glow-mid)), transparent 70%),
    var(--bg-dark);
  padding: var(--s9) 0;
  text-align: center;
}
.cta-band h2 { color: var(--spore); }
.cta-band .lede { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

.site-foot {
  border-top: 3px solid var(--border);
  background: var(--bg-dark);
  padding-top: var(--s7);
}
.site-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  padding-bottom: var(--s7);
}
.site-foot__brand p { color: var(--text-2); font-size: 0.96rem; max-width: 34ch; }
.site-foot__h {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lantern-text);
  margin: 0 0 var(--s3);
}
.site-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.site-foot__list a { color: var(--text-2); text-decoration: none; font-size: 0.96rem; }
.site-foot__list a:hover { color: var(--spore); text-decoration: underline; }
.site-foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s4);
  border-top: 2px solid var(--border);
}
.site-foot__base p { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.foot-mark { display: flex; align-items: center; gap: var(--s3); }
.foot-mark img { width: 32px; image-rendering: pixelated; image-rendering: crisp-edges; }

@media (max-width: 860px) {
  .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .site-foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}

/* ---------------------------------------------------------------------
   14. PROSE / PAGE HEADER
   --------------------------------------------------------------------- */
.page-head {
  padding: var(--s8) 0 var(--s6);
  border-bottom: 2px solid var(--border);
}
.page-head h1 { color: var(--spore); margin-bottom: var(--s3); }
.page-head .lede { margin-bottom: 0; }

.prose { text-wrap: pretty; }
.prose h2 { margin-top: var(--s7); }
.prose h3 { margin-top: var(--s6); }
.prose > :last-child { margin-bottom: 0; }
.prose ul { color: var(--text-2); }

.anchor-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s6);
  padding: 0;
  list-style: none;
}
.anchor-list a {
  display: block;
  padding: var(--s2) var(--s3);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text-2);
  background: var(--bg-dark);
  border: 2px solid var(--border);
}
.anchor-list a:hover { color: var(--lantern-on); background: var(--lantern); border-color: var(--lantern); }

.group { padding-top: var(--s7); }
.group:first-of-type { padding-top: 0; }
.group__head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--border);
}
.group__num {
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--spore-on);
  background: var(--spore-deep);
  padding: 4px 6px;
  flex: none;
}
.group__head h2 { margin: 0; }
.group__head p { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); }
.stat {
  padding: var(--s4);
  background: var(--bg-dark);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 0 var(--ink-900);
}
.stat__n {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--spore);
  margin-bottom: var(--s2);
  letter-spacing: -1px;
}
.stat__l { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------
   15. MOTION: staggered reveal (JS adds .is-in)
   --------------------------------------------------------------------- */
.reveal { transition: opacity 0.5s steps(8), transform 0.5s steps(8); }
.has-js .reveal { opacity: 0; transform: translateY(14px); }
.has-js .reveal.is-in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.04s; }
.d2 { transition-delay: 0.12s; }
.d3 { transition-delay: 0.2s; }
.d4 { transition-delay: 0.28s; }
.d5 { transition-delay: 0.36s; }
.d6 { transition-delay: 0.44s; }
.d7 { transition-delay: 0.52s; }
.d8 { transition-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; }
  .reveal { transition: none; }
  .card { transition: none; }
}

/* ---------------------------------------------------------------------
   16. RESPONSIVE FALLBACKS
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .section { padding: var(--s8) 0; }
  .grid--2, .grid--3, .grid--4, .grid--auto { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .spec-table th { width: 42%; }
}
@media (max-width: 420px) {
  body { font-size: 1rem; }
  .wrap, .wrap--narrow { width: min(100% - 24px, var(--page)); }
  .btn { padding: var(--s3) var(--s4); font-size: 0.9rem; }
  .callout { padding: var(--s3) var(--s4); }
  .panel, .card, .dl-card { padding: var(--s4); }
  .term__body { padding: var(--s3); }
  .term__body pre { font-size: 0.78rem; }
}

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

/* ---------------------------------------------------------------------
   17. SMALL UTILITIES + TRAY MENU MOCK
   --------------------------------------------------------------------- */
.items-center { align-items: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--s5); }
.stack { display: grid; gap: var(--s5); }
.stack--sm { display: grid; gap: var(--s3); }

/* --- tray menu mock: the menu panel, plus More as its own submenu panel ---
   Sizing is driven by the width this mock actually gets, not by the viewport:
   wide enough and the submenu sits to the right like Windows draws it; narrow
   and it becomes a second panel stacked under the first. Nothing is clipped
   either way, and a browser without container queries gets the stacked pair. */
.traymock { container-type: inline-size; }
.traymock__pair { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.traymock__main { grid-column: 1; }
.traymock__rows { padding: var(--s1); }
.traymock__sub {
  position: relative;
  z-index: 2;
  grid-column: 1;
  margin: var(--s4) 0 0 var(--s4);
  padding: var(--s1);
  background: var(--surface);
  border: 3px solid var(--border-hi);
  box-shadow: 6px 6px 0 0 var(--ink-900);
}

@container (min-width: 480px) {
  .traymock__pair { grid-template-columns: minmax(0, 1fr) auto; }
  .traymock__sub {
    grid-column: 2;
    margin: calc(var(--s6) + var(--s2)) 0 0 calc(-1 * var(--s3));
  }
}

/* The submenu arrives one step after the panel it hangs off. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .traymock__sub {
    opacity: 0;
    transform: translate(-6px, -4px);
    transition: opacity 0.28s steps(4), transform 0.28s steps(4);
    transition-delay: 0.34s;
  }
  .has-js .traymock.is-in .traymock__sub { opacity: 1; transform: none; }
}

.menumock {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.45;
}
.menumock__item {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  color: var(--text-2);
}
.menumock__item--active { color: var(--spore-on); background: var(--spore-deep); }
.menumock__item--active::before { content: "\25ba"; font-size: 0.72rem; }
/* Rows that open a submenu: label left, arrow hard against the right edge.
   The extra right padding keeps the arrow clear of the panel that overlaps. */
.menumock__item--parent { padding-right: var(--s4); }
.menumock__arrow {
  margin-left: auto;
  flex: none;
  width: 14px;
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: right;
  color: var(--text-muted);
}
/* The row whose submenu is the open one. Quieter than the hovered row. */
.menumock__item--open { background: var(--surface-2); color: var(--text); }
.menumock__item--open .menumock__arrow { color: var(--spore); }
.menumock__sep { height: 2px; background: var(--border); margin: var(--s1) 0; }

.swatch {
  padding: var(--s4);
  background: var(--bg-dark);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 0 var(--ink-900);
}
.swatch__chip { height: 56px; border: 2px solid var(--border-hi); margin-bottom: var(--s3); }
.swatch__name { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); margin: 0 0 2px; }
.swatch__desc { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin: 0; }
.swatch--system .swatch__chip { background: linear-gradient(90deg, #e8f2e4 0 50%, #0b1410 50% 100%); }
.swatch--light  .swatch__chip { background: #f2f7f0; }
.swatch--dark   .swatch__chip { background: #0b1410; }
.swatch--green  .swatch__chip { background: linear-gradient(90deg, #3ef07a 0 50%, #0b1410 50% 100%); }

.flaglist { margin: 0; display: grid; gap: var(--s1); }
.flaglist dt { font-family: var(--font-mono); font-size: 0.84rem; color: var(--lantern-text); }
.flaglist dd { margin: 0 0 var(--s4); color: var(--text-2); font-size: 0.98rem; }
.flaglist dd:last-child { margin-bottom: 0; }

.toolgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.toolgrid li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-2);
  background: var(--bg-dark);
  border: 2px solid var(--border);
}
.toolgrid .g { color: var(--spore); font-size: 1rem; line-height: 1; }

/* ---------------------------------------------------------------------
   18. WRAPPING / OVERFLOW HARDENING
   Global guards so long strings, pixel headings and grid children can
   never push past their container. No copy or layout changes: every
   rule below only takes effect when content would otherwise overflow.
   --------------------------------------------------------------------- */

/* --- 18a. grid + flex children may shrink (kills column blowouts) --- */
.grid > *, .gallery > *, .stack > *, .stat-row > *,
.hero__grid > *, .site-head__inner > *, .site-foot__grid > *,
.group__head > *, .btn-row > *, .tags > *,
.toolgrid > *, .anchor-list > *,
.callout > div, .panel__body > *, .dl-card > *, .card > *,
.dl-card__top > *, .cart__label > *, .term__bar > *, .panel__bar > * {
  min-width: 0;
}

/* --- 18b. flex rows that must wrap instead of pushing wide --- */
.group__head, .tray-note, .eyebrow,
.dl-card__top, .term__bar, .panel__bar {
  flex-wrap: wrap;
}

/* --- 18c. prose + ledes always wrap inside their column --- */
p, li, dd, .lede, .hero__pitch, .card__text,
.swatch__desc, .dl-card__note, .menumock__item, a {
  overflow-wrap: break-word;
}

/* --- 18d. pixel-font headings: break long words, balance lines --- */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* --- 18e. user-visible code / filenames / flags / hashes / URLs --- */
code, kbd, samp, .mono, .dl-file, .flaglist dt, .cart__ph-sub {
  overflow-wrap: anywhere;
}

/* --- 18f. terminal blocks wrap instead of clipping lines --- */
.term { min-width: 0; }
.term__body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- 18g. buttons + tags never force their row wider --- */
.btn { max-width: 100%; }
.tag, .btn__meta { overflow-wrap: anywhere; }

/* --- 18h. wide ledes span both columns of a 2-col group --- */
/* A group lede that describes both columns should not sit inside one of them:
   at 505px it wraps to 5-6 lines with a 25% orphan. Hoisted to a grid child
   and spanned, it reads as 2 lines across the full 1034px. */
.lede--wide { grid-column: 1 / -1; text-wrap: balance; }

/* Prose everywhere avoids a one-word last line (the 3-8px "orphan" tails
   measured on every page). `pretty` is the targeted fix; `balance` is only
   for the wide group ledes, where it evens the lines out as well. */
p, li, dd, blockquote { text-wrap: pretty; }

/* ---------------------------------------------------------------------
   19. NOT FOUND (404)
   One panel, one job: say what happened, offer the way back. It reuses the
   editor window's title bar so the page reads as one more small window
   from the app's world, and the numeral carries the same hard pixel shadow
   every button and card on the site already uses.
   The section is exactly one viewport tall minus the header, so the panel
   and both actions are visible at 360x640 without scrolling.
   --------------------------------------------------------------------- */
.nf {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--head-h) - 4px);
  min-height: calc(100svh - var(--head-h) - 4px);
  padding: var(--s6) 0;
}

/* A 600px measure keeps the panel from becoming a wide, empty bar. */
.nf__panel {
  width: min(100%, 600px);
  margin-inline: auto;
  text-align: center;
}

.nf__body { padding: var(--s7) var(--s5) var(--s5); }

.nf__title { margin: 0 0 var(--s4); }

.nf__code {
  display: block;
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 20vw, 7.5rem);
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--spore);
  /* Display type gets the same theme glow as .hero__title. A hard offset
     shadow read as a muddy double-strike at 1x in the light theme, so the
     numeral stays crisp and lets the glow do the work. */
  text-shadow: var(--hero-shadow);
}

.nf__head {
  display: block;
  font-size: clamp(0.85rem, 2.3vw, 1.05rem);
  line-height: 1.6;
}

.nf__text {
  max-width: 42ch;
  margin: 0 auto var(--s5);
  color: var(--text-2);
}

.nf__actions { justify-content: center; }

.nf__more {
  margin: var(--s5) 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

@media (max-width: 700px) {
  .nf { padding: var(--s5) 0; }
  .nf__body { padding: var(--s6) var(--s4) var(--s5); }
}