/* ─────────────────────────────────────────────────────────
   derekkiy.com · prototype · v0.1
   Hyper-brutalist digital pamphlet, three chapters,
   con sabor y amor.

   Adapted from KiyViz 26Q2.3 (themes, FOUC guard, lang filter,
   link rewriter all reused). Hero/bento/CLI dropped.

   Layers:
     1. Themes — 7 schemes × 3 modes (4 KiyViz + 3 CSYA)
     2. Type variables
     3. Base reset
     4. Header · nav · toggles
     5. Language view filter (verbatim from KiyViz)
     6. A11y · skip · sr-only
     7. Chapter primitive (the thirds)
     8. FUTURE zone (contact / consult / capabilities)
     9. PRESENT zone (3 featured cards)
    10. PAST zone (portfolio list + grid)
    11. Status footer (slim)
    12. Case-study page styles
    13. Responsive
    14. Print · prefers-reduced-motion
   ───────────────────────────────────────────────────────── */

/* ═══ THEMES ═════════════════════════════════════════════════ */

/* ── STONE — KiyViz scheme #1 (cool slate) ── */
html[data-scheme="stone"][data-mode="light"] {
  --paper:#e8e9ec; --paper-rgb:232,233,236; --paper-raised:#f0f1f3; --paper-inset:#dcdee1;
  --ink:#1a1e23; --muted:#5a616a; --faint:#8b929b;
  --accent:#4a6180; --accent-deco:#6b87ab; --accent-2:#3e5f52; --accent-2-deco:#5f8277;
  --rule:#1a1e23; --glow:rgba(74,97,128,0.11); --accent-2-glow:rgba(62,95,82,0.10);
  --hl-bg:#4a6180; --hl-fg:#f0f1f3; color-scheme:light;
}
html[data-scheme="stone"][data-mode="dark"] {
  --paper:#17191d; --paper-rgb:23,25,29; --paper-raised:#1e2126; --paper-inset:#0f1114;
  --ink:#d4d7dc; --muted:#8a919a; --faint:#555b64;
  --accent:#7d9cc0; --accent-deco:#7d9cc0; --accent-2:#7ba197; --accent-2-deco:#7ba197;
  --rule:#d4d7dc; --glow:rgba(125,156,192,0.13); --accent-2-glow:rgba(123,161,151,0.11);
  --hl-bg:#2d4a68; --hl-fg:#bcd8f5; color-scheme:dark;
}
html[data-scheme="stone"][data-mode="oled"] {
  --paper:#000; --paper-rgb:0,0,0; --paper-raised:#07080a; --paper-inset:#000;
  --ink:#b2b5bc; --muted:#6a6f77; --faint:#3a3e44;
  --accent:#7d9cc0; --accent-deco:#7d9cc0; --accent-2:#7ba197; --accent-2-deco:#7ba197;
  --rule:#b2b5bc; --glow:rgba(125,156,192,0.09); --accent-2-glow:rgba(123,161,151,0.08);
  --hl-bg:#1d2f45; --hl-fg:#9bbce0; color-scheme:dark;
}

/* ── EARTH — KiyViz scheme #2 (parchment + moss) ── */
html[data-scheme="earth"][data-mode="light"] {
  --paper:#ece0c4; --paper-rgb:236,224,196; --paper-raised:#f2e8d0; --paper-inset:#e3d6b5;
  --ink:#2d2416; --muted:#6b5a3e; --faint:#a08a5e;
  --accent:#a0611a; --accent-deco:#c78725; --accent-2:#506a37; --accent-2-deco:#6a8c4b;
  --rule:#2d2416; --glow:rgba(199,135,37,0.13); --accent-2-glow:rgba(106,140,75,0.12);
  --hl-bg:#c78725; --hl-fg:#2d2416; color-scheme:light;
}
html[data-scheme="earth"][data-mode="dark"] {
  --paper:#171b14; --paper-rgb:23,27,20; --paper-raised:#1e2218; --paper-inset:#121510;
  --ink:#e0d4a8; --muted:#9a8c66; --faint:#6b5e42;
  --accent:#e4a448; --accent-deco:#e4a448; --accent-2:#94b06e; --accent-2-deco:#94b06e;
  --rule:#e0d4a8; --glow:rgba(228,164,72,0.14); --accent-2-glow:rgba(148,176,110,0.13);
  --hl-bg:#5a3a12; --hl-fg:#e4a448; color-scheme:dark;
}
html[data-scheme="earth"][data-mode="oled"] {
  --paper:#000; --paper-rgb:0,0,0; --paper-raised:#0a0a07; --paper-inset:#000;
  --ink:#c8b98c; --muted:#7a6a50; --faint:#4a412e;
  --accent:#d4a048; --accent-deco:#d4a048; --accent-2:#7a9860; --accent-2-deco:#7a9860;
  --rule:#c8b98c; --glow:rgba(212,160,72,0.10); --accent-2-glow:rgba(122,152,96,0.09);
  --hl-bg:#352310; --hl-fg:#d4a048; color-scheme:dark;
}

/* ── AMBER — KiyViz scheme #3 (candlelit mono) ── */
html[data-scheme="amber"][data-mode="light"] {
  --paper:#f4e9c8; --paper-rgb:244,233,200; --paper-raised:#faf1d6; --paper-inset:#ebddb2;
  --ink:#3a2708; --muted:#7d5416; --faint:#a88530;
  --accent:#955712; --accent-deco:#b9741a; --accent-2:#8a5e14; --accent-2-deco:#a37a1a;
  --rule:#3a2708; --glow:rgba(149,87,18,0.14); --accent-2-glow:rgba(138,94,20,0.11);
  --hl-bg:#b9741a; --hl-fg:#fff4d8; color-scheme:light;
}
html[data-scheme="amber"][data-mode="dark"] {
  --paper:#1a0f03; --paper-rgb:26,15,3; --paper-raised:#231509; --paper-inset:#110801;
  --ink:#e6a540; --muted:#b4801f; --faint:#6a4a15;
  --accent:#f4c870; --accent-deco:#f4c870; --accent-2:#c5b87a; --accent-2-deco:#c5b87a;
  --rule:#e6a540; --glow:rgba(230,165,64,0.14); --accent-2-glow:rgba(197,184,122,0.10);
  --hl-bg:#4b3108; --hl-fg:#f4c870; color-scheme:dark;
}
html[data-scheme="amber"][data-mode="oled"] {
  --paper:#000; --paper-rgb:0,0,0; --paper-raised:#0a0704; --paper-inset:#000;
  --ink:#d4a048; --muted:#7a5a18; --faint:#4a3510;
  --accent:#e6a540; --accent-deco:#e6a540; --accent-2:#a88f50; --accent-2-deco:#a88f50;
  --rule:#d4a048; --glow:rgba(212,160,72,0.10); --accent-2-glow:rgba(168,143,80,0.08);
  --hl-bg:#3a2608; --hl-fg:#d4a048; color-scheme:dark;
}

/* ── GREEN — KiyViz scheme #4 (terrarium mono) ── */
html[data-scheme="green"][data-mode="light"] {
  --paper:#e9efdf; --paper-rgb:233,239,223; --paper-raised:#eff4e8; --paper-inset:#dee5d0;
  --ink:#152812; --muted:#4a6b3a; --faint:#7a9166;
  --accent:#3e6e22; --accent-deco:#5a8a36; --accent-2:#3e6e22; --accent-2-deco:#5a8a36;
  --rule:#152812; --glow:rgba(62,110,34,0.12); --accent-2-glow:rgba(90,138,54,0.11);
  --hl-bg:#5a8a36; --hl-fg:#e9f5d6; color-scheme:light;
}
html[data-scheme="green"][data-mode="dark"] {
  --paper:#0a1508; --paper-rgb:10,21,8; --paper-raised:#101d0d; --paper-inset:#060f05;
  --ink:#7db84f; --muted:#5a8a38; --faint:#365c21;
  --accent:#a4d67a; --accent-deco:#a4d67a; --accent-2:#a4d67a; --accent-2-deco:#a4d67a;
  --rule:#7db84f; --glow:rgba(125,184,79,0.14); --accent-2-glow:rgba(164,214,122,0.12);
  --hl-bg:#1e3012; --hl-fg:#a4d67a; color-scheme:dark;
}
html[data-scheme="green"][data-mode="oled"] {
  --paper:#000; --paper-rgb:0,0,0; --paper-raised:#040905; --paper-inset:#000;
  --ink:#7a9860; --muted:#5a7548; --faint:#2e4520;
  --accent:#a4d67a; --accent-deco:#a4d67a; --accent-2:#a4d67a; --accent-2-deco:#a4d67a;
  --rule:#7a9860; --glow:rgba(164,214,122,0.10); --accent-2-glow:rgba(164,214,122,0.08);
  --hl-bg:#183010; --hl-fg:#a4d67a; color-scheme:dark;
}

/* ─────────────────────────────────────────────────────────
   CSYA — Con Sabor y Amor — three architectural palettes
   (Mexican modernist: Barragan, Legorreta, PRODUCTORA MX)
   ───────────────────────────────────────────────────────── */

/* ── CSYA-A · BARRAGAN — pink walls, cream, terracotta, sage ── */
html[data-scheme="csya-a"][data-mode="light"] {
  --paper:#f7eee3; --paper-rgb:247,238,227; --paper-raised:#fef5ea; --paper-inset:#ecdfcb;
  --ink:#241712; --muted:#5a4a3e; --faint:#8a7565;
  --accent:#e8859f; --accent-deco:#d56582; --accent-2:#c44d34; --accent-2-deco:#7a955a;
  --rule:#241712; --glow:rgba(232,133,159,0.16); --accent-2-glow:rgba(196,77,52,0.10);
  --hl-bg:#e8859f; --hl-fg:#241712; color-scheme:light;
}
html[data-scheme="csya-a"][data-mode="dark"] {
  --paper:#1e1310; --paper-rgb:30,19,16; --paper-raised:#281a16; --paper-inset:#150c0a;
  --ink:#f0d4c8; --muted:#b08878; --faint:#7a5848;
  --accent:#ec97ad; --accent-deco:#ec97ad; --accent-2:#e07050; --accent-2-deco:#a4c47e;
  --rule:#f0d4c8; --glow:rgba(236,151,173,0.16); --accent-2-glow:rgba(224,112,80,0.11);
  --hl-bg:#5a2030; --hl-fg:#f0d4c8; color-scheme:dark;
}
html[data-scheme="csya-a"][data-mode="oled"] {
  --paper:#000; --paper-rgb:0,0,0; --paper-raised:#0a0504; --paper-inset:#000;
  --ink:#d6b8aa; --muted:#7a5848; --faint:#4a342a;
  --accent:#e8859f; --accent-deco:#e8859f; --accent-2:#d96850; --accent-2-deco:#94b06e;
  --rule:#d6b8aa; --glow:rgba(232,133,159,0.11); --accent-2-glow:rgba(217,104,80,0.08);
  --hl-bg:#3a1520; --hl-fg:#e8859f; color-scheme:dark;
}

/* ── CSYA-B · LEGORRETA — saturated blocks: red, yellow, cobalt ── */
html[data-scheme="csya-b"][data-mode="light"] {
  --paper:#f0e5d4; --paper-rgb:240,229,212; --paper-raised:#faefdd; --paper-inset:#e2d6c0;
  --ink:#2b1d18; --muted:#6b5340; --faint:#a08562;
  --accent:#d23a3a; --accent-deco:#a82828; --accent-2:#f0c14b; --accent-2-deco:#4a6890;
  --rule:#2b1d18; --glow:rgba(210,58,58,0.13); --accent-2-glow:rgba(240,193,75,0.13);
  --hl-bg:#d23a3a; --hl-fg:#faefdd; color-scheme:light;
}
html[data-scheme="csya-b"][data-mode="dark"] {
  --paper:#16110d; --paper-rgb:22,17,13; --paper-raised:#1f1812; --paper-inset:#100b07;
  --ink:#f0d8b8; --muted:#a88860; --faint:#6a5238;
  --accent:#e85050; --accent-deco:#e85050; --accent-2:#f5d070; --accent-2-deco:#7090b8;
  --rule:#f0d8b8; --glow:rgba(232,80,80,0.15); --accent-2-glow:rgba(245,208,112,0.13);
  --hl-bg:#5a1c1c; --hl-fg:#f0d8b8; color-scheme:dark;
}
html[data-scheme="csya-b"][data-mode="oled"] {
  --paper:#000; --paper-rgb:0,0,0; --paper-raised:#080604; --paper-inset:#000;
  --ink:#d4b890; --muted:#7a5e3a; --faint:#4a3820;
  --accent:#d84040; --accent-deco:#d84040; --accent-2:#e8c060; --accent-2-deco:#6080a8;
  --rule:#d4b890; --glow:rgba(216,64,64,0.10); --accent-2-glow:rgba(232,192,96,0.09);
  --hl-bg:#3a1010; --hl-fg:#d84040; color-scheme:dark;
}

/* ── CSYA-C · PRODUCTORA — concrete + orange brick + moss ── */
html[data-scheme="csya-c"][data-mode="light"] {
  --paper:#e8e3da; --paper-rgb:232,227,218; --paper-raised:#f2ede4; --paper-inset:#dad4c8;
  --ink:#1a1a1a; --muted:#555050; --faint:#888080;
  --accent:#d96b3a; --accent-deco:#b85528; --accent-2:#6c8b6c; --accent-2-deco:#b8a08a;
  --rule:#1a1a1a; --glow:rgba(217,107,58,0.13); --accent-2-glow:rgba(108,139,108,0.11);
  --hl-bg:#d96b3a; --hl-fg:#f2ede4; color-scheme:light;
}
html[data-scheme="csya-c"][data-mode="dark"] {
  --paper:#161513; --paper-rgb:22,21,19; --paper-raised:#1e1c1a; --paper-inset:#0f0e0c;
  --ink:#d8d2c4; --muted:#8a8478; --faint:#5a544a;
  --accent:#e88560; --accent-deco:#e88560; --accent-2:#88ac88; --accent-2-deco:#c4b098;
  --rule:#d8d2c4; --glow:rgba(232,133,96,0.14); --accent-2-glow:rgba(136,172,136,0.12);
  --hl-bg:#5a3018; --hl-fg:#d8d2c4; color-scheme:dark;
}
html[data-scheme="csya-c"][data-mode="oled"] {
  --paper:#000; --paper-rgb:0,0,0; --paper-raised:#070605; --paper-inset:#000;
  --ink:#beb8ac; --muted:#6a655a; --faint:#3a3630;
  --accent:#d97850; --accent-deco:#d97850; --accent-2:#7a9878; --accent-2-deco:#a89880;
  --rule:#beb8ac; --glow:rgba(217,120,80,0.10); --accent-2-glow:rgba(122,152,120,0.08);
  --hl-bg:#3a1f10; --hl-fg:#d97850; color-scheme:dark;
}

/* System dark-mode fallback when no scheme is set */
@media (prefers-color-scheme: dark) {
  html:not([data-scheme]) {
    --paper:#1e1310; --paper-rgb:30,19,16; --paper-raised:#281a16; --paper-inset:#150c0a;
    --ink:#f0d4c8; --muted:#b08878; --faint:#7a5848;
    --accent:#ec97ad; --accent-deco:#ec97ad; --accent-2:#e07050; --accent-2-deco:#a4c47e;
    --rule:#f0d4c8; --glow:rgba(236,151,173,0.16); --accent-2-glow:rgba(224,112,80,0.11);
    --hl-bg:#5a2030; --hl-fg:#f0d4c8; color-scheme:dark;
  }
}

/* ═══ TYPE & RHYTHM ═════════════════════════════════════════ */

:root {
  --font-display: "Unbounded", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-subhead: "Funnel Display", "Unbounded", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Funnel Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1.0625rem;
  --text-lg:  1.1875rem;
  --text-xl:  1.5rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3.5rem;
  --text-4xl: 5.5rem;
  --text-5xl: 7.5rem;

  --measure:  42rem;
  --wide:     78rem;
  --hair:     1px;
  --status-h: 2.5rem;
  --filter-measure: 38rem;

  --chapter-pad-x: clamp(1.25rem, 5vw, 4rem);
  --chapter-pad-y: clamp(2rem, 6vh, 4rem);
}

body.page-work {
  --font-display: "Space Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  --font-subhead: "Space Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  --font-body:    "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ═══ BASE ══════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  letter-spacing: 0.002em;
  min-height: 100vh;
  padding-bottom: var(--status-h);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.2s ease, color 0.2s ease;
}

::selection { background: var(--ink); color: var(--paper); }

p { margin-bottom: 1rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
em { font-style: italic; }
strong { font-weight: 700; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: var(--hair);
  text-decoration-color: var(--accent-2);
  text-underline-offset: 0.2em;
  transition: color 0.1s ease, text-decoration-color 0.1s ease;
}
a:hover, a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ═══ HEADER ════════════════════════════════════════════════ */

header.site-header {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--hair) solid var(--ink);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 50;
  gap: 1.5rem;
  flex-wrap: wrap;
  transition: background 0.2s ease;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  color: var(--ink);
  gap: 0.5em;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.wordmark .wm-glyph {
  color: var(--ink);
  position: relative;
  display: inline-block;
}
.wordmark .wm-glyph::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.15em;
  height: 0.1em;
  background: var(--accent);
  transform: scaleX(0.9);
  transform-origin: left;
  transition: transform 0.2s ease, background 0.2s ease;
}
.wordmark:hover .wm-glyph::after { transform: scaleX(1); background: var(--accent-2); }
.wordmark .wm-suffix {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.wordmark .wm-suffix::before { content: "/ "; color: var(--faint); }

.header-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav {
  display: flex;
  gap: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: var(--hair) solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}
.site-nav a .nav-num {
  color: var(--faint);
  font-size: 0.85em;
}
.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
}
.site-nav a[aria-current="true"], .site-nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Segmented controls — scheme / mode / lang share one base */
.scheme-toggle, .mode-toggle, .lang-toggle {
  display: inline-flex;
  border: var(--hair) solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.scheme-toggle button, .mode-toggle button, .lang-toggle button {
  background: transparent;
  border: none;
  border-right: var(--hair) solid var(--ink);
  color: var(--ink);
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.scheme-toggle button:last-child, .mode-toggle button:last-child, .lang-toggle button:last-child {
  border-right: none;
}
.scheme-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--paper); }
.mode-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang-toggle button[aria-pressed="true"] { background: var(--accent-2); color: var(--paper); }
.scheme-toggle button:hover:not([aria-pressed="true"]),
.mode-toggle button:hover:not([aria-pressed="true"]) {
  background: var(--glow);
}
.lang-toggle button:hover:not([aria-pressed="true"]) { background: var(--accent-2-glow); }
.scheme-toggle button:focus-visible,
.mode-toggle button:focus-visible,
.lang-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  position: relative; z-index: 1;
}

/* ═══ LANGUAGE VIEW FILTER (verbatim from KiyViz) ═══════════ */

html[data-lang-view="en"] [lang="es"]:not(html),
html[data-lang-view="es"] [lang="en"]:not(html) {
  display: none !important;
}
html[data-lang-view="en"] [lang="es"],
html[data-lang-view="es"] [lang="en"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border-left: none !important;
}

/* ═══ A11Y ══════════════════════════════════════════════════ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration: none;
  z-index: 100;
}
.skip:focus { left: 0; top: 0; }

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

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

/* ═══ CHAPTER PRIMITIVE ════════════════════════════════════ */

.chapter {
  padding: var(--chapter-pad-y) var(--chapter-pad-x);
  min-height: 100vh;
  border-bottom: var(--hair) solid var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chapter:last-of-type { border-bottom: none; }

.chapter-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.chapter-num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  font-size: var(--text-sm);
}
.chapter-num::after { content: " · "; color: var(--faint); }
.chapter-meta {
  margin-left: auto;
  color: var(--faint);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.chapter-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-3xl), 10vw, var(--text-5xl));
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.chapter-tagline {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 2.5rem;
  letter-spacing: 0.02em;
  max-width: 42ch;
}

/* ═══ FUTURE ZONE ══════════════════════════════════════════ */

.zone-future .chapter-title {
  color: var(--ink);
}
.zone-future .chapter-title em {
  font-style: normal;
  color: var(--accent);
}

.future-offer {
  border: var(--hair) solid var(--ink);
  padding: 1.5rem 1.75rem;
  margin: 1rem 0 2rem;
  max-width: 38rem;
  background: var(--paper-raised);
}
.future-offer-lead {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.future-offer-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.future-offer-price .price-amt { color: var(--accent); }
.future-offer-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 1.25rem;
  max-width: none;
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--ink);
  color: var(--paper);
  padding: 0.85rem 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: var(--hair) solid var(--ink);
  transition: transform 0.1s ease, background 0.15s ease;
}
.cta-primary:hover, .cta-primary:focus-visible {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  transform: translateX(2px);
}
.cta-primary .cta-arrow { transition: transform 0.15s ease; }
.cta-primary:hover .cta-arrow { transform: translateX(0.2em); }

.future-or {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--faint);
  letter-spacing: 0.12em;
  margin: 1.5rem 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.future-or::before, .future-or::after {
  content: "";
  flex: 1;
  border-top: var(--hair) solid var(--faint);
}

.future-alt {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.future-alt a {
  color: var(--ink);
  text-decoration-color: var(--muted);
}

.future-caps {
  margin-top: 3rem;
}
.future-caps-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.future-caps-label::after {
  content: "";
  flex: 1;
  border-top: var(--hair) solid var(--faint);
  margin-left: 0.5rem;
  position: relative;
  top: -0.3em;
}
.future-caps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 2rem;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  max-width: 56rem;
}
.future-caps-grid li {
  display: flex;
  gap: 0.6em;
  align-items: baseline;
}
.future-caps-grid li::before {
  content: "→";
  color: var(--accent);
  font-weight: 700;
}

.future-credential {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.future-credential .credential-tag {
  color: var(--accent);
  font-weight: 700;
}

/* ═══ PRESENT ZONE ═════════════════════════════════════════ */

.zone-present {
  background: var(--paper-inset);
}

.present-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.present-card {
  border: var(--hair) solid var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.present-card:hover, .present-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
  color: var(--ink);
}
.present-card-img {
  aspect-ratio: 4 / 3;
  background: var(--paper-inset);
  border-bottom: var(--hair) solid var(--ink);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.present-card-img img,
.present-card-img svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.present-card-img svg.placeholder {
  width: 60%;
  height: 60%;
  object-fit: contain;
  opacity: 0.45;
}
.present-card-body {
  padding: 1rem 1.1rem 1.1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.present-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.present-card-pitch {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
  flex: 1;
}
.present-card-meta {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: var(--hair) solid var(--faint);
  padding-top: 0.6rem;
}
.present-card-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.present-card-meta-row .k {
  color: var(--faint);
}
.present-card-meta-row .v {
  color: var(--ink);
  font-weight: 700;
}
.present-card-meta-row .v.status-beta { color: var(--accent); }
.present-card-meta-row .v.status-alpha { color: var(--accent-2); }
.present-card-meta-row .v.status-soon { color: var(--muted); }
.present-card-cta {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.present-foot {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  max-width: 56rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ═══ PAST ZONE ════════════════════════════════════════════ */

.past-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: baseline;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.past-controls-label {
  color: var(--faint);
  margin-right: 0.4rem;
}
.past-filters,
.past-views {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
}
.past-filters button,
.past-views button {
  background: transparent;
  border: var(--hair) solid var(--faint);
  color: var(--muted);
  font: inherit;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.past-filters button:hover,
.past-views button:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.past-filters button[aria-pressed="true"],
.past-views button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* LIST VIEW (default) */
.past-list {
  border-top: var(--hair) solid var(--ink);
  width: 100%;
}
.past-list .past-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 14rem) minmax(0, 1fr) minmax(0, 8rem) 2rem;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0.5rem;
  border-bottom: var(--hair) solid var(--faint);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  transition: background 0.12s ease, color 0.12s ease, padding-left 0.15s ease;
}
.past-list .past-row:hover,
.past-list .past-row:focus-visible {
  background: var(--paper-raised);
  color: var(--ink);
  padding-left: 1rem;
}
.past-list .past-row .cell-year {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.past-list .past-row .cell-client {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.past-list .past-row .cell-title {
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
}
.past-list .past-row .cell-kind {
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.past-list .past-row .cell-arrow {
  color: var(--accent);
  text-align: right;
  font-weight: 700;
}
.past-list .past-row:hover .cell-arrow { transform: translateX(0.2em); }

[data-past-view="grid"] .past-list { display: none; }
[data-past-view="list"] .past-grid { display: none; }

/* GRID VIEW */
.past-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.past-card {
  border: var(--hair) solid var(--ink);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
}
.past-card:hover, .past-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
  color: var(--ink);
}
.past-card-img {
  aspect-ratio: 4 / 3;
  background: var(--paper-inset);
  border-bottom: var(--hair) solid var(--ink);
  overflow: hidden;
}
.past-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.past-card-body { padding: 0.8rem 1rem 1rem; }
.past-card-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}
.past-card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  gap: 0.8rem;
}

/* Filter hiding */
[data-past-filter]:not([data-past-filter="all"]) .past-row[data-kind]:not([data-kind*="-MATCHED-"]) {
  /* matching is done via JS attribute toggles; pure CSS fallback below */
}
.past-row[hidden], .past-card[hidden] { display: none !important; }

/* ═══ STATUS FOOTER ════════════════════════════════════════ */

.status-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--status-h);
  padding: 0 1rem;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.05em;
  z-index: 40;
  border-top: var(--hair) solid var(--accent);
}
.status-footer a {
  color: var(--paper);
  text-decoration-color: var(--accent);
}
.status-footer a:hover, .status-footer a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.status-sigil {
  color: var(--accent);
  font-weight: 700;
}
.status-sep { color: var(--faint); }
.status-item .status-label { color: var(--faint); margin-right: 0.2em; }
.status-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ═══ CASE STUDY PAGE ══════════════════════════════════════ */

main.case-study {
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--chapter-pad-y) var(--chapter-pad-x);
}
.case-crumbs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 2rem;
  display: flex;
  gap: 0.3em;
  align-items: baseline;
}
.case-crumbs a { color: var(--muted); text-decoration-color: var(--faint); }
.case-crumbs a:hover { color: var(--accent); }
.case-crumb-sigil { color: var(--accent); }
.case-crumb-sep { color: var(--faint); }
.case-crumb-current { color: var(--ink); }

.case-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}
.case-title [lang="es"] {
  display: block;
  font-size: 0.6em;
  color: var(--muted);
  font-weight: 500;
  margin-top: 0.25rem;
}

.case-subtitle {
  font-family: var(--font-subhead);
  font-size: var(--text-lg);
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 2rem;
  max-width: 42rem;
}
.case-subtitle [lang="es"] {
  display: block;
  font-size: 0.85em;
  margin-top: 0.4rem;
  color: var(--faint);
}

.case-bluf {
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  background: var(--paper-raised);
  font-size: var(--text-lg);
  line-height: 1.5;
  margin-bottom: 2.5rem;
}
.case-bluf [lang="es"] {
  display: block;
  font-size: 0.85em;
  color: var(--muted);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: var(--hair) solid var(--faint);
}

.case-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.case-specs-row {
  border-top: var(--hair) solid var(--faint);
  padding-top: 0.5rem;
}
.case-specs dt {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.case-specs dd { color: var(--ink); }
.case-specs dd [lang="es"] {
  display: block;
  color: var(--muted);
  font-size: 0.95em;
  margin-top: 0.2rem;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin-bottom: 2.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.case-tags li {
  border: var(--hair) solid var(--faint);
  padding: 0.25rem 0.5rem;
  color: var(--muted);
}

.case-hero {
  margin: 0 0 2.5rem;
}
.case-hero img {
  display: block;
  max-width: 100%;
  height: auto;
  border: var(--hair) solid var(--ink);
}
.case-hero[data-placeholder="soon"] {
  aspect-ratio: 16 / 9;
  border: var(--hair) dashed var(--faint);
  background: var(--paper-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.case-body-wrap {
  max-width: 38rem;
  margin: 0 auto;
}
.case-body-lang h2 {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--text-xl);
  margin: 2rem 0 0.75rem;
  letter-spacing: -0.01em;
}
.case-body-lang h3 {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: var(--text-lg);
  margin: 1.5rem 0 0.5rem;
}
.case-body-lang p { margin-bottom: 1rem; }
.case-body-lang ul, .case-body-lang ol {
  margin: 0 0 1.25rem 1.25rem;
}
.case-body-lang li { margin-bottom: 0.4rem; }
.case-body-lang blockquote {
  border-left: 2px solid var(--accent-2);
  padding: 0.5rem 1rem;
  margin: 1.5rem 0;
  color: var(--muted);
  font-style: italic;
}
.case-body-lang code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-raised);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
.case-body-lang hr {
  border: none;
  border-top: var(--hair) solid var(--faint);
  margin: 2rem 0;
}
.case-fig {
  margin: 1.5rem 0;
}
.case-fig img {
  display: block;
  max-width: 100%;
  height: auto;
  border: var(--hair) solid var(--faint);
}
.case-fig figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 0.4rem;
}
.case-fig.bleed, .case-fig.wide {
  margin-left: -2rem; margin-right: -2rem;
}
.case-footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: var(--hair) solid var(--faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}
.case-footnotes h2 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.case-in-progress {
  border: var(--hair) dashed var(--faint);
  padding: 1.5rem;
  margin: 2rem 0;
  background: var(--paper-raised);
  color: var(--muted);
}
.case-in-progress-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.case-nav {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: var(--hair) solid var(--ink);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.case-nav a {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.case-nav-prev { text-align: left; }
.case-nav-index { text-align: center; }
.case-nav-next { text-align: right; }
.case-nav-dir {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.case-nav-label {
  color: var(--muted);
}

/* ═══ SUB-PAGES (services, contact, about, now, 404) ═══════ */

main.subpage {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--chapter-pad-y) var(--chapter-pad-x);
}
main.subpage h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
main.subpage .subpage-lead {
  font-family: var(--font-subhead);
  font-size: var(--text-lg);
  color: var(--muted);
  margin-bottom: 2rem;
  max-width: 42rem;
}
main.subpage h2 {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--text-xl);
  margin: 2rem 0 0.75rem;
  letter-spacing: -0.015em;
}
main.subpage h3 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 1.25rem 0 0.5rem;
}
main.subpage ul {
  margin: 0 0 1.25rem 1.25rem;
}
main.subpage li { margin-bottom: 0.4rem; }

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */

@media (max-width: 820px) {
  .site-nav { gap: 0.85rem; }
  .header-controls { gap: 0.85rem; }
  .scheme-toggle, .mode-toggle, .lang-toggle { font-size: 0.65rem; }
  .scheme-toggle button, .mode-toggle button, .lang-toggle button {
    padding: 0.3rem 0.45rem;
  }
  .present-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .past-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .past-list .past-row {
    grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
  }
  .past-list .past-row .cell-client,
  .past-list .past-row .cell-kind {
    display: none;
  }
  .case-specs { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  header.site-header {
    padding: 0.85rem 1rem;
    gap: 0.85rem;
  }
  .wordmark { font-size: var(--text-base); }
  .wordmark .wm-suffix { display: none; }
  .site-nav { font-size: 0.7rem; gap: 0.75rem; }

  .chapter {
    padding: 2rem 1.25rem;
    min-height: 100vh;
  }
  .chapter-title {
    font-size: clamp(2.5rem, 14vw, 4rem);
  }
  .chapter-header {
    font-size: 0.65rem;
    margin-bottom: 1.5rem;
  }

  .future-offer {
    padding: 1.25rem;
  }
  .future-caps-grid {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .cta-primary {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    width: 100%;
    justify-content: space-between;
  }

  .past-grid {
    grid-template-columns: 1fr;
  }
  .past-list .past-row {
    padding: 0.7rem 0.3rem;
  }

  .case-fig.bleed, .case-fig.wide {
    margin-left: 0; margin-right: 0;
  }
  .case-nav {
    grid-template-columns: 1fr;
    text-align: left !important;
  }
  .case-nav-prev, .case-nav-index, .case-nav-next {
    text-align: left;
  }

  .status-footer {
    font-size: 0.625rem;
    gap: 0.5rem;
    padding: 0 0.6rem;
  }
  .status-item .status-label,
  .status-right .status-sep,
  .status-sigil { display: none; }
}

/* ═══ PRINT ════════════════════════════════════════════════ */

@media print {
  :root {
    --paper: #ffffff;
    --paper-rgb: 255,255,255;
    --paper-raised: #ffffff;
    --ink: #000000;
    --muted: #444;
    --faint: #888;
    --accent: #000;
    --accent-2: #000;
  }
  body { padding-bottom: 0; background: #fff !important; color: #000 !important; }
  .site-header, .status-footer, .past-controls, .scheme-toggle, .mode-toggle, .lang-toggle, .cta-primary {
    display: none !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }
  .chapter { min-height: auto; page-break-after: always; padding: 1.5rem 0; }
  .case-study { max-width: none; padding: 1.5rem 0; }
}

/* ═══ REDUCED MOTION ═══════════════════════════════════════ */

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