/* SYMBIONT — shared tokens (subset for site) */

/* ColorOrb / Synesthesia driver — typed property enables CSS transition on hue */
@property --olo-hue { syntax: '<number>'; inherits: true; initial-value: 176; }

:root {
  --phi: 1.618;
  --olo-hue: 176; /* writable by colororb.js / synesthesia — all olo/null/sig derive from this */
  --olo-900: oklch(22% 0.04 var(--olo-hue)); --olo-700: oklch(38% 0.10 var(--olo-hue));
  --olo-500: oklch(58% 0.14 var(--olo-hue)); --olo-300: oklch(82% 0.14 var(--olo-hue));
  --olo-100: oklch(92% 0.07 var(--olo-hue)); --olo-050: oklch(97% 0.02 var(--olo-hue));
  --null-700: oklch(38% 0.14 calc(var(--olo-hue) + 76)); --null-500: oklch(55% 0.20 calc(var(--olo-hue) + 76)); --null-300: oklch(72% 0.16 calc(var(--olo-hue) + 76));
  --sig-700:  oklch(42% 0.11 calc(var(--olo-hue) - 110)); --sig-500: oklch(72% 0.16 calc(var(--olo-hue) - 110)); --sig-300: oklch(85% 0.14 calc(var(--olo-hue) - 110));
  --rose-500: oklch(68% 0.15 0); --rose-300: oklch(82% 0.12 0);

  /* NADA brand accent ladder は nada.symbiont.audio/shared/nada-tokens.css
     (Olo 族派生 SSOT)。 親 tokens.css には NADA 固有色を置かない —
     sibling identity は visual language 共有、 brand color 分岐は廃止
     (2026-05-24)。 */

  /* === alpha ladder (--a-*) — mirrors C++ Tokens::Alpha === */
  --a-wash: 0.04; --a-lowest: 0.12; --a-bleed: 0.25; --a-grid: 0.35;
  --a-dim: 0.40; --a-ghost: 0.50; --a-deep: 0.58; --a-muted: 0.70;
  --a-vivid: 0.80; --a-mid: 0.85; --a-bright: 0.963; --a-full: 1.0;

  /* === letter-spacing (--ls-*) — mirrors C++ Tokens::LetterSpacing === */
  --ls-tight: -0.020em; --ls-mono: 0.020em; --ls-wide: 0.050em;
  --ls-label: 0.080em; --ls-title: 0.150em;

  /* === stroke width (--sw-*) — φ^(n/2) chain, mirrors C++ Tokens::Stroke === */
  --sw-sub-micro: 0.618; --sw-feather: 0.786; --sw-micro: 1.0; --sw-grid: 1.272;
  --sw-hairline: 1.618; --sw-helper: 2.058; --sw-signal: 2.618;
  --sw-bold: 3.330; --sw-accent: 4.236; --sw-handle: 6.854;

  /* === hue offset (--hue-*) — normalized (deg÷360), mirrors C++ Tokens::HueOffset === */
  --hue-micro: 0.00656; --hue-minor: 0.01061; --hue-accent: 0.01717;
  --hue-rose: 0.02778; --hue-max: 0.04494;
  --hue-null: 0.16667; --hue-sol: 0.65; --hue-flux: 0.75; --hue-complement: 0.5;

  /* === adaptive kerning (--ak-*) — φ-inverse ladder, mirrors C++ Tokens::AdaptiveKerning === */
  --ak-9: 0.082em; --ak-10: 0.074em; --ak-11: 0.067em; --ak-12: 0.062em;
  --ak-13: 0.057em; --ak-14: 0.053em; --ak-15: 0.049em; --ak-18: 0.041em; --ak-22: 0.037em;

  --s-0: 2px; --s-1: 4px; --s-2: 7px; --s-3: 11px; --s-4: 18px;
  --s-5: 29px; --s-6: 47px; --s-7: 76px; --s-8: 123px; --s-9: 199px;
  /* Corner radius scale — mirrors C++ SymbiontDesignTokens.h:
     NanoRadius (2) / NodeRadius (4) / SelectionRadius (7) / HoverRadius (5) / PillRadius (999).
     --r-1=Nano, --r-2=Node(panel/card), --r-3=button/larger card, --r-4=hero/modal, --r-x=pill. */
  --r-1: 2px; --r-2: 4px; --r-3: 9px; --r-4: 14px; --r-x: 999px;
  /* β1 backup-tight literals — used in cards / chrome (parallel to --s-* scale, Fibonacci literal) */
  --card-pad: 21px;       /* backup --card-pad parity (Fibonacci 21) */
  --card-gap: 13px;       /* backup --card-gap parity (Fibonacci 13) */
  --section-pad-y: 76px;  /* tight section breathing — matches --s-7, lighter than backup 144 */
  --content-w: 1200px;    /* intermediate width (user-confirmed: 1008 too narrow, 1480 too wide) */
  --chrome-h: 48px;       /* compact chrome — between backup 44 and previous 56 */
  --t-1: 236ms; --t-2: 382ms; --t-3: 618ms; --t-4: 1000ms; --t-5: 1618ms;
  /* Interaction transition timings — BorisFlow Phase η+1 Sprint 1/2 additions */
  /* Mirrors C++ Tokens::Duration::{HoverLerp, PressedPulse, SearchDebounce} */
  --t-hover-lerp: 160ms;      /* Browser row hover smooth (Sprint 1 A3) */
  --t-pressed-pulse: 80ms;    /* Click feedback pulse decay (Sprint 1 B6) */
  --t-search-debounce: 200ms; /* Typing → filter delay (Sprint 2 C8) */
  --e-organic: cubic-bezier(.25,.46,.45,.94);
  --e-phi: cubic-bezier(.618,0,.382,1);
  --e-exhale: cubic-bezier(.55,0,1,.45);
  --e-inhale: cubic-bezier(.05,.7,.10,1);

  /* === Focus ring (--fr-*) — BorisFlow Phase η+1 Sprint 1 A2 === */
  /* Mirrors C++ Tokens::FocusRing. WCAG 2.1 1.4.11 accessibility:
   * 4.5:1+ contrast on near-black bg via alpha 0.70 olo highlight. */
  --fr-width: 1px;       /* φ^0 micro tier — single-pixel keyboard focus */
  --fr-alpha: 0.70;      /* = --a-muted, WCAG AA on near-black */
  --fr-offset: 2px;      /* outline-offset CSS parity */
  --fr-radius: 4px;      /* 8-grid quarter */

  /* === Badge geometry (--badge-*) — BorisFlow Phase η+1 Sprint 1 B8 === */
  /* Mirrors C++ Tokens::Panel::kBadge*. Vercel Geist rounded-md parity. */
  --badge-zone-w: 32px;       /* right-zone reserved for badge */
  --badge-pad-x: 4px;         /* 8-grid quarter horizontal */
  --badge-pad-y: 4px;         /* 8-grid quarter vertical */
  --badge-radius: 6px;        /* explicit pill (no auto-half-height) */
  --badge-text-alpha: 0.60;   /* distinct from row text 0.62 */

  /* font stack discipline (2026-05-11 user-confirmed):
   *   --ff-sans / --ff-mono  →  Manrope (sans-serif context, both JP and EN modes)
   *   --ff-jp                →  Shippori Mincho (serif context; Latin glyphs ALSO render in
   *                              Shippori Mincho's Latin set — intentional serif unification
   *                              within JP narrative blocks, avoiding Manrope/Shippori mixing)
   *   [lang="en"] blocks override --ff-jp → --ff-sans for English-mode readability.
   */
  --ff-sans: "Manrope", system-ui, sans-serif;
  --ff-jp: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --ff-mono: "Manrope", system-ui, sans-serif;

  /* glassmorphism — Apple chrome parity */
  --glass-blur: blur(18px) saturate(1.2);
  --glass-bg-d: oklch(8% 0.005 176 / 0.85);
  --glass-bg-l: oklch(98% 0.004 176 / 0.85);
  --glass-border: oklch(28% 0.010 176 / 0.4);
  --glass-glow: 0 8px 32px oklch(from var(--bg, oklch(8% 0.005 176)) l c h / 0.40);
  --glass-edge: inset 0 0 0 0.35px oklch(from var(--ink, oklch(96% 0.012 176)) l c h / 0.05);

  /* glow system — interactive feedback & node pulse */
  --glow-olo:        0 0 16px oklch(from var(--olo-300) l c h / 0.12);
  --glow-olo-strong: 0 0 28px oklch(from var(--olo-300) l c h / 0.25);

  /* shadow system */
  --shadow-sm: 0 2px 8px  oklch(8% 0.005 176 / 0.20);
  --shadow-md: 0 4px 24px oklch(8% 0.005 176 / 0.35);
  --shadow-lg: 0 8px 48px oklch(8% 0.005 176 / 0.50);

  /* wire semantic colors — mirrors wire-view.js KIND palette (audio/CV/gate/clock/mod) */
  --wire-audio: var(--olo-300); --wire-cv: var(--sig-300);
  --wire-gate:  var(--null-300); --wire-clock: var(--null-300); --wire-mod: var(--rose-300);

  /* reveal motion */
  --t-reveal: 800ms;
  --reveal-y: 18px;

  /* 5-Device category colors — v2 phenomena-derived 3-axis arc */
  /* C++ SSOT: ColorOrbCore kCatSourceDeg=0 / kCatModulatorDeg=40 / kCatEffectDeg=76 */
  --cat-source:    oklch(80% 0.13 var(--olo-hue));              /* Source = Olo itself (+0°)   */
  --cat-effect:    oklch(60% 0.18 calc(var(--olo-hue) + 76));  /* Effect = Null axis (+76°)   */
  --cat-modulator: oklch(72% 0.14 calc(var(--olo-hue) + 40)); /* Modulator = Olo+40° bridge  */
  --cat-sequencer: oklch(68% 0.015 var(--olo-hue));            /* Sequencer = near-achromatic */
  --cat-utility:   oklch(48% 0.012 var(--olo-hue));            /* Utility = more achromatic   */

  /* category ambient (border-left subtle) — pairs with --cat-* above */
  --cat-source-ambient:    oklch(80% 0.13 var(--olo-hue) / 0.55);
  --cat-effect-ambient:    oklch(60% 0.18 calc(var(--olo-hue) + 76) / 0.55);
  --cat-modulator-ambient: oklch(72% 0.14 calc(var(--olo-hue) + 40) / 0.55);
  --cat-sequencer-ambient: oklch(68% 0.015 var(--olo-hue) / 0.55);
  --cat-utility-ambient:   oklch(48% 0.012 var(--olo-hue) / 0.55);

  /* paradigm family colors (paradigms.html A/B/C/D) — ambient + vivid pair */
  --fam-a-ambient: oklch(72% 0.16 256 / 0.55);  --fam-a-vivid: oklch(72% 0.16 256);
  --fam-b-ambient: oklch(72% 0.15 290 / 0.55);  --fam-b-vivid: oklch(72% 0.15 290);
  --fam-c-ambient: oklch(85% 0.14 70 / 0.55);   --fam-c-vivid: oklch(85% 0.14 70);
  --fam-d-ambient: oklch(68% 0.15 0 / 0.55);    --fam-d-vivid: oklch(68% 0.15 0);

  /* ColorOrb runtime — dark defaults, overridden by colororb.js setProperty at runtime */
  --bg: oklch(8% 0.005 176); --bg-1: oklch(11% 0.007 176); --bg-2: oklch(15% 0.008 176); --bg-3: oklch(20% 0.010 176);
  --line: oklch(28% 0.010 176); --line-2: oklch(38% 0.012 176);
  --ink: oklch(96% 0.012 176); --ink-2: oklch(82% 0.012 176); --ink-3: oklch(62% 0.012 176); --ink-4: oklch(42% 0.012 176);
  --olo: var(--olo-300); --null-: var(--null-300); --sig: var(--sig-300); --rose: var(--rose-300);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* @property enables CSS transition on --olo-hue (typed custom property) */
html { background: var(--bg); color: var(--ink);
       transition: --olo-hue var(--t-3) var(--e-phi), background var(--t-3) var(--e-phi), color var(--t-3) var(--e-phi); }
body {
  font-family: var(--ff-sans); font-size: 15.5px; line-height: 1.618; font-weight: 400;
  color: var(--ink-2); background: var(--bg);
  transition: background var(--t-3) var(--e-phi), color var(--t-3) var(--e-phi);
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--ff-mono); font-feature-settings: "tnum"; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; color: var(--ink); letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--olo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important; } }

/* shared chrome */
.chrome { position: sticky; top: 0; z-index: 50; background: oklch(from var(--bg) l c h / 0.85); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 1px 0 var(--glass-border); }
.chrome-inner { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--s-3); padding: 0 var(--s-5); height: var(--chrome-h); max-width: var(--content-w); margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; letter-spacing: 0.1618em; font-size: 13px; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.brand-mark { color: var(--olo); display: inline-flex; }
.brand-tag { display: none; }   /* β8: backup parity — drop subtitle, keep brand mark + name only */
.cb-sep { width: 1px; height: 16px; background: oklch(from var(--ink) l c h / 0.12); align-self: center; }   /* β8: brand→nav separator */
.chrome-nav { display: flex; gap: var(--s-2); font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1618em; color: var(--ink-3); text-transform: uppercase; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
.chrome-nav::-webkit-scrollbar { display: none; }
.chrome-nav a { white-space: nowrap; padding: var(--s-2) var(--s-3); border-bottom: 1.5px solid transparent; transition: color var(--t-2) var(--e-phi), border-color var(--t-2) var(--e-phi); }
.chrome-nav a:hover, .chrome-nav a:focus-visible { color: var(--ink-2); outline: none; }
.chrome-nav a:active { color: var(--ink); }
.chrome-nav a.active { color: var(--ink); border-bottom-color: oklch(from var(--olo) l c h / 0.7); }
.chrome-actions { display: flex; align-items: center; gap: var(--s-3); }
.lang-toggle { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); padding: var(--s-1) var(--s-2); border: 1px solid var(--line); transition: border-color var(--t-2) var(--e-phi), color var(--t-2) var(--e-phi); }
.lang-toggle:hover, .lang-toggle:focus-visible { border-color: var(--olo); color: var(--ink); outline: none; }
.lang-toggle:active { background: oklch(from var(--olo) l c h / 0.08); }
.lang-toggle .sep { color: var(--ink-4); }
.lang-toggle [data-active] { color: var(--olo); }
.chrome-rule { height: 1px; background: linear-gradient(90deg, transparent 0%, var(--line) 18%, var(--line) 82%, transparent 100%); }

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--line); color: var(--ink-3); transition: border-color var(--t-2) var(--e-phi), color var(--t-2) var(--e-phi); cursor: pointer; }
.nav-burger:hover, .nav-burger:focus-visible { border-color: var(--olo); color: var(--ink); outline: none; }
.nav-burger:active { background: oklch(from var(--olo) l c h / 0.08); }
.nav-burger .b-line { width: 13px; height: 1px; background: currentColor; transition: transform var(--t-2) var(--e-phi), opacity var(--t-2) var(--e-phi); }
.nav-burger.open .b-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open .b-line:nth-child(2) { opacity: 0; }
.nav-burger.open .b-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav dropdown */
.mobile-nav { position: fixed; top: calc(var(--chrome-h) + 1px); left: 0; right: 0; z-index: 48; display: flex; flex-direction: column; background: var(--bg-1); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--t-2) var(--e-phi), transform var(--t-2) var(--e-phi); }
.mobile-nav.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-nav a { font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); display: block; transition: color var(--t-2) var(--e-phi); }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover, .mobile-nav a:focus-visible, .mobile-nav a.active { color: var(--olo); outline: none; }
.mobile-nav a:active { background: oklch(from var(--olo) l c h / 0.06); }
/* Always hidden on desktop regardless of .open state */
@media (min-width: 769px) { .mobile-nav { display: none !important; } .nav-burger { display: none !important; } }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dotbreath 6.18s var(--e-phi) infinite; }
.dot-olo { background: var(--olo-300); box-shadow: 0 0 9px oklch(82% 0.14 176 / 0.5); }
@keyframes dotbreath { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }

.btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); font-weight: 500; font-size: 16px; letter-spacing: 0.02em; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-2); transition: color var(--t-2) var(--e-phi), border-color var(--t-2) var(--e-phi), background var(--t-2) var(--e-phi), box-shadow var(--t-2) var(--e-phi), transform var(--t-2) var(--e-phi); }
[lang="ja"] .btn { font-family: var(--ff-sans); font-weight: 500; }
.btn:hover, .btn:focus-visible { transform: translateY(-1px); border-color: var(--ink-3); color: var(--ink); outline: none; }
.btn:active { transform: translateY(0); border-color: var(--olo); color: var(--ink); }
.btn-primary { background: var(--olo); border-color: var(--olo); color: oklch(15% 0.04 176); }
.btn-primary:hover, .btn-primary:focus-visible { box-shadow: 0 0 22px oklch(from var(--olo) l c h / 0.5); color: oklch(15% 0.04 176); }
.btn-primary:active { box-shadow: 0 0 10px oklch(from var(--olo) l c h / 0.7); transform: translateY(0); }
.btn-arr { transition: transform var(--t-2) var(--e-phi); }
.btn-primary:hover .btn-arr, .btn-primary:focus-visible .btn-arr { transform: translateX(4px); }
.btn-ghost { background: transparent; }

.foot { padding: var(--s-6) var(--s-5); max-width: var(--content-w); margin: 0 auto; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-4); font-family: var(--ff-mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--s-4); padding-bottom: var(--s-3); }
.foot-nav a { color: var(--ink-3); transition: color var(--t-2) var(--e-phi); }
.foot-nav a:hover, .foot-nav a:focus-visible { color: var(--ink); outline: none; }
.foot-nav a:active { color: var(--olo); }
.foot-nav a.active { color: var(--olo); }
.foot-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin-bottom: var(--s-5); }
.foot-grid { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: start; font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.foot-brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.foot-meta, .foot-cred { display: flex; flex-direction: column; gap: var(--s-2); }
.foot-cred { text-align: right; }

.sec-num { font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: 0.16em; color: var(--olo); }
.sec-title { font-family: var(--ff-jp); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }

/* === Type scale (clamp tokens) ============================================ */
:root {
  --text-hero: clamp(40px, 4.2vw, 68px);   /* hero h1 — canonical */
  --text-h2:   clamp(24px, 2.5vw, 36px);   /* section title */
  --text-h3:   clamp(18px, 1.8vw, 22px);   /* card h3 emphasis */
  --text-body: 17px;                        /* lede / body canonical */
  --text-body-lg: 19px;                     /* manifesto lede */
  --text-mono: 12.5px;                      /* meta / code annotation */
  --text-mono-sm: 10px;                     /* tag / kicker */
}

/* === Hero (page-level intro section) ====================================== */
.hero {
  padding: var(--s-7) var(--s-6) var(--s-8);
  max-width: var(--content-w);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 30%; left: 22%;
  transform: translate(-50%, -50%);
  width: min(72vw, 920px); height: min(52vw, 620px);
  background: radial-gradient(ellipse at center,
    oklch(from var(--olo) l c h / 0.06) 0%, transparent 60%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hero::before { opacity: 0.5; } }
.hero-tag {
  font-family: var(--ff-mono); font-size: var(--text-mono-sm);
  text-transform: uppercase; letter-spacing: var(--ls-title);
  color: var(--olo); display: inline-flex; align-items: center;
  gap: var(--s-2);
}
.hero-tag .num { color: var(--ink-4); }
.hero h1 {
  font-family: var(--ff-jp); font-weight: 500;
  font-size: var(--text-hero);
  line-height: 1.05; letter-spacing: -0.025em;
  max-width: 16ch;
  margin-top: var(--s-6);
}
.hero h1 em { font-style: normal; color: var(--olo); }
[lang="en"] .hero h1 { font-family: var(--ff-sans); font-weight: 500; letter-spacing: -0.030em; }
.hero-lede {
  font-family: var(--ff-sans); font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.95; color: var(--ink-2);
  max-width: 56ch; margin-top: var(--s-6);
}
[lang="en"] .hero-lede { font-weight: 300; line-height: 1.75; font-size: 17.5px; }
.hero-meta {
  margin-top: var(--s-7); display: grid;
  grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
  border-top: 1px solid var(--line); padding-top: var(--s-5);
  max-width: 880px;
  font-family: var(--ff-mono); font-size: var(--text-mono); color: var(--ink-3);
}
.hero-meta dt {
  color: var(--ink-4); font-size: var(--text-mono-sm);
  letter-spacing: var(--ls-title); text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.hero-meta dd { color: var(--ink-2); margin: 0; }

@media (max-width: 768px) {
  .hero { padding: var(--s-6) var(--s-4) var(--s-7); }
  .hero h1 { font-size: clamp(32px, 8vw, 56px); }
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hero { padding: var(--s-4) var(--s-3) var(--s-5); }
  .hero-meta { grid-template-columns: 1fr; }
}

/* === Grid scale (N-column layouts) ======================================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 768px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* scroll reveal — Apple-grade fade-in */
.reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--t-reveal) var(--e-phi), transform var(--t-reveal) var(--e-phi); }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* slide-underline link */
.s-link { position: relative; padding-bottom: 2px; background-image: linear-gradient(var(--olo), var(--olo)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size var(--t-2) var(--e-phi), color var(--t-2) var(--e-phi); }
.s-link:hover, .s-link:focus-visible, .s-link:active { background-size: 100% 1px; color: var(--ink); outline: none; }

/* δ3 pull-quote — strategic philosophical / technical anchor (backup .pull-quote parity) */
.pull-quote {
  font-family: var(--ff-jp); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.5; color: var(--ink);
  border-left: 2px solid var(--olo);
  padding: var(--s-5) var(--s-6) var(--s-4) var(--s-5);
  margin: var(--s-7) auto;
  max-width: min(56ch, calc(var(--content-w) - var(--s-6) * 2));
  background: oklch(from var(--olo) l c h / 0.04);
  border-radius: 0 var(--r-2) var(--r-2) 0;
}
[lang="en"] .pull-quote { font-family: var(--ff-sans); font-weight: 400; line-height: 1.45; font-style: italic; }
.pull-quote cite { display: block; font-family: var(--ff-mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; margin-top: var(--s-3); font-weight: 400; }

/* responsive — intermediate 768px breakpoint (iPad portrait) (α7) */
@media (max-width: 768px) {
  /* brand (1fr left) + actions (auto right) on single row — cb-sep and chrome-nav removed from flow */
  .chrome-inner { gap: var(--s-2); padding: 0 var(--s-4); grid-template-columns: 1fr auto; height: var(--chrome-h); }
  .cb-sep { display: none; }
  .chrome-nav { display: none; }
  .chrome-actions { gap: var(--s-2); }
  .nav-burger { display: flex; }
  .foot { padding: var(--s-6) var(--s-4); }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s-4); text-align: left; }
  .foot-cred { text-align: left; }
  .foot-nav { font-size: 11px; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
  .sec-head { grid-template-columns: 1fr; gap: var(--s-3); margin-bottom: var(--s-5); }
  .sec-sub { text-align: left; max-width: none; }
  .pull-quote { font-size: clamp(18px, 3.8vw, 26px); margin: var(--s-5) auto; }
  /* === tap target floor: Apple HIG 44×44 (mobile only) === */
  .btn { font-size: 15px; min-height: 44px; padding: var(--s-3) var(--s-5); }
  .nav-burger { width: 44px; height: 44px; gap: 6px; }
  .lang-toggle { min-height: 44px; padding: var(--s-2) var(--s-3); font-size: 11px; }
  .foot-nav a { display: inline-block; padding: 8px 0; }
}

/* 480px — phone (375–480px viewport) */
@media (max-width: 480px) {
  .chrome-inner { padding: 0 var(--s-3); }
  .foot { padding: var(--s-5) var(--s-3); }
  .foot-nav { gap: var(--s-2) var(--s-3); font-size: 10.5px; }
  .pull-quote { padding-left: var(--s-3); font-size: clamp(17px, 4.5vw, 21px); }
  /* preserve 44px tap floor on smallest phone; reduce horizontal padding only */
  .btn { padding: 12px var(--s-4); font-size: 14.5px; min-height: 44px; }
}

/* paradigm-aware card lift (α5: ambient minimal — translateY -1px only) */
.lift { cursor: pointer; transition: transform var(--t-2) var(--e-phi), border-color var(--t-2) var(--e-phi), background var(--t-3) var(--e-phi); }
.lift:hover, .lift:focus-visible { transform: translateY(-1px); border-color: var(--olo); outline: none; }
.lift:active { transform: translateY(0); border-color: var(--olo); background: oklch(from var(--olo) l c h / 0.04); }
.lift[data-cat="source"]:hover    { border-color: var(--cat-source);    }
.lift[data-cat="effect"]:hover    { border-color: var(--cat-effect);    }
.lift[data-cat="modulator"]:hover { border-color: var(--cat-modulator); }
.lift[data-cat="sequencer"]:hover { border-color: var(--cat-sequencer); }
.lift[data-cat="utility"]:hover   { border-color: var(--cat-utility);   }
/* Legacy bridge */
.lift[data-cat="gen"]:hover, .lift[data-cat="drum"]:hover                       { border-color: var(--cat-source);    }
.lift[data-cat="flt"]:hover, .lift[data-cat="spc"]:hover, .lift[data-cat="grsp"]:hover { border-color: var(--cat-effect);    }
.lift[data-cat="mod"]:hover, .lift[data-cat="env"]:hover                        { border-color: var(--cat-modulator); }
.lift[data-cat="clgt"]:hover, .lift[data-cat="sqgn"]:hover                      { border-color: var(--cat-sequencer); }
.lift[data-cat="mlog"]:hover, .lift[data-cat="util"]:hover                      { border-color: var(--cat-utility);   }
@media (prefers-reduced-motion: reduce) { .lift:hover { transform: none; } }

/* === keyframe vocabulary (Phase 1-D — mirrors symbiont.audio animation philosophy) === */
@keyframes pulsering   { 0%   { opacity: var(--a-bleed); transform: scale(1); }
                         100% { opacity: 0;               transform: scale(2.2); } }
@keyframes tierbreathe { 0%,100% { opacity: var(--a-deep); }
                         50%     { opacity: var(--a-bright); } }
@keyframes nodepulse   { 0%,100% { box-shadow: var(--glow-olo); }
                         50%     { box-shadow: var(--glow-olo-strong); } }
/* dashflow applied on SVG <path> via stroke-dashoffset — JS sets stroke-dasharray first */
@keyframes dashflow    { to { stroke-dashoffset: -24; } }

.u-pulse-ring   { animation: pulsering    1618ms var(--e-phi)     infinite; }
.u-tier-breathe { animation: tierbreathe calc(var(--t-5) * 1.618) var(--e-organic) infinite; }
.u-node-pulse   { animation: nodepulse    var(--t-4)              var(--e-organic) infinite; }

/* hue-transition: elements that should smoothly follow --olo-hue changes */
.hue-transition { transition: color var(--t-3) var(--e-phi), border-color var(--t-3) var(--e-phi),
                               background var(--t-3) var(--e-phi), box-shadow var(--t-3) var(--e-phi); }

/* === visual pattern: brand vertical axis (symbiont.audio left-margin identity) === */
.brand-axis {
  display: none; writing-mode: vertical-rl; letter-spacing: 0.25em;
  font-family: var(--ff-mono); font-size: 10px; font-weight: 500; text-transform: uppercase;
  color: oklch(from var(--olo-300) l c h / var(--a-ghost));
  position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%);
  user-select: none; pointer-events: none;
  transition: color var(--t-3) var(--e-phi);
}
@media (min-width: 1400px) { .brand-axis { display: block; } }

/* === visual pattern: node card left-accent bar (5-Device taxonomy) === */
.node-card {
  border-left: 2px solid var(--cat-color, var(--line));
  padding-left: var(--s-3);
  transition: border-color var(--t-2) var(--e-phi);
}
[data-cat="source"]    { --cat-color: var(--cat-source);    }
[data-cat="effect"]    { --cat-color: var(--cat-effect);    }
[data-cat="modulator"] { --cat-color: var(--cat-modulator); }
[data-cat="sequencer"] { --cat-color: var(--cat-sequencer); }
[data-cat="utility"]   { --cat-color: var(--cat-utility);   }
/* Legacy subcategory data-cat → 5-Device bridge (until nodes-data.js regenerated) */
[data-cat="gen"], [data-cat="drum"]                    { --cat-color: var(--cat-source);    }
[data-cat="flt"], [data-cat="spc"], [data-cat="grsp"]  { --cat-color: var(--cat-effect);    }
[data-cat="mod"], [data-cat="env"]                     { --cat-color: var(--cat-modulator); }
[data-cat="clgt"], [data-cat="sqgn"]                   { --cat-color: var(--cat-sequencer); }
[data-cat="mlog"], [data-cat="util"]                   { --cat-color: var(--cat-utility);   }

/* === visual pattern: technical 144px grid overlay (product.html, mirrors symbiont.audio) === */
.tech-grid-bg {
  background-image:
    linear-gradient(oklch(from var(--ink, oklch(96% 0.012 176)) l c h / 0.028) 1px, transparent 1px),
    linear-gradient(90deg, oklch(from var(--ink, oklch(96% 0.012 176)) l c h / 0.028) 1px, transparent 1px);
  background-size: 144px 144px;
}

/* rossler backdrop (product.html hero) */
.rossler-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.18; pointer-events: none; z-index: 0;
}
@media (prefers-reduced-motion: reduce) { .rossler-bg { display: none; } }

/* === shared [lang="en"] phero rhythm — page-local overrides only set font-size === */
[lang="en"] .phero-lede,
[lang="en"] .phero-bridge { font-weight: 300; line-height: 1.75; }

/* === ColorOrb subtle intro pulse (first-visit only, once per browser) === */
@keyframes orbIntro {
  0%, 100% { box-shadow: 0 0 3px currentColor; }
  40%      { box-shadow: 0 0 3px currentColor, 0 0 0 4px oklch(from var(--olo) l c h / 0.30); }
}
#orbTrigger.orb-intro { animation: orbIntro 1.618s var(--e-phi) 1; }
@media (prefers-reduced-motion: reduce) { #orbTrigger.orb-intro { animation: none; } }

/* === reduced-motion: burger animation + mobile-nav slide gate === */
@media (prefers-reduced-motion: reduce) {
  .nav-burger .b-line { transition: none; }
  .mobile-nav { transition: opacity var(--t-2) linear; transform: none; }
  .mobile-nav.open { transform: none; }
}

/* === sibling-link — cross-app navigation block (3-app family) === */
.sibling-link {
  margin-top: var(--s-7);
  padding: var(--s-5);
  border: 1px dashed oklch(from var(--olo) l c h / 0.22);
  border-radius: var(--r-2);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
}
.sibling-link .text { font-family: var(--ff-sans); font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.sibling-link a { font-family: var(--ff-mono); font-size: 11px; letter-spacing: var(--ls-title); color: var(--olo); text-transform: uppercase; border-bottom: 1px solid oklch(from var(--olo) l c h / 0.45); padding-bottom: 1px; white-space: nowrap; text-decoration: none; }
.sibling-link a:hover { color: var(--olo-100); border-bottom-color: var(--olo); }

/* === code-block / code-stack — DSL and code display === */
.code-stack { display: flex; flex-direction: column; gap: var(--s-5); }
.code-block {
  background: oklch(from var(--bg-1) calc(l - 0.04) c h);
  border: 1px solid oklch(from var(--olo) l c h / 0.22);
  border-radius: var(--r-2);
  padding: 22px 26px 18px;
}
.code-block.featured {
  border: 1.5px solid oklch(from var(--olo) l c h / 0.45);
  border-left: 3px solid var(--olo);
  box-shadow: 0 0 24px oklch(from var(--olo) l c h / 0.10);
}
.code-block pre { font-family: var(--ff-mono); font-size: 14px; line-height: 1.7; color: var(--ink); white-space: pre; overflow-x: auto; margin: 0; }
.code-caption { font-family: var(--ff-sans); font-size: 13.5px; line-height: 1.75; color: var(--ink-3); margin-top: var(--s-3); max-width: 64ch; }