/* ==========================================================================
   mixyz.xyz — MixYZ
   One stylesheet. Bump ?v= on BOTH style.css and main.js, in every HTML file,
   whenever either changes (deploy.ps1 does this for you — TECHNICAL §3.3).
   Token rule: every token has a [data-theme="light"] counterpart, so light
   mode is the same design in different light — not a second design.
   Contrast rule: every text/ground pair is computed, never judged (§4.1).
   ========================================================================== */

/* ---------- DARK (default) ---------- */
:root {
  /* The two halves of the name. Y is blue, Z is pink — a wink at the old
     blue-for-boys / pink-for-girls rule. Everything else is derived. */
  --y:          #5ea8ff;
  --z:          #ff74b8;
  /* The mix is not picked. The browser computes it as the OKLab midpoint of
     --y and --z, so changing either half re-mixes the whole site. The hex is
     the same midpoint precomputed, for browsers without color-mix(). */
  --mix:        #bd95dc;
  --mix:        color-mix(in oklab, var(--y), var(--z));

  --bg:         #0c0a17;
  --bg-alt:     #110e20;
  --surface:    #161229;
  --surface-2:  #1c1734;
  --line:       #2a2448;
  --steel:      #6d6597;   /* hairlines ONLY — 3.7:1, too low for text */
  --ink:        #f2effa;
  --ink-dim:    #c4bddf;
  --muted:      #958db8;

  /* Own tokens, never reuses of --ink / --bg. The pairing inverts between
     modes; reusing --ink as a fill gives white text on a white pill. */
  --btn-fg:     #0c0a17;
  --ghost-fg:   #e4ddf7;
  --ghost-line: #463d70;

  --danger:     #ff9e7a;   /* per mode: the light-mode red is unreadable here */
  --ok:         #6fe0b0;
  --focus:      #b9a4ff;

  --card-shadow: 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -28px rgba(0,0,0,.9);
  --grid-ink:    rgba(170,150,230,.07);
  --hdr-bg:      color-mix(in srgb, var(--bg) 86%, transparent);
  --y-wash:      color-mix(in srgb, var(--y) 16%, transparent);
  --z-wash:      color-mix(in srgb, var(--z) 16%, transparent);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1160px;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- LIGHT : the same mix on paper ---------- */
:root[data-theme="light"] {
  --y:          #1d5fd0;
  --z:          #c4206f;
  --mix:        #8553a1;
  --mix:        color-mix(in oklab, var(--y), var(--z));

  --bg:         #faf8fe;
  --bg-alt:     #f2eefb;
  --surface:    #ffffff;
  --surface-2:  #f7f4fd;
  --line:       #e1dbf0;
  --steel:      #a79fca;
  --ink:        #1a1430;
  --ink-dim:    #463c6e;
  --muted:      #6b6290;

  --btn-fg:     #ffffff;
  --ghost-fg:   #2e2552;
  --ghost-line: #cfc6e8;

  --danger:     #b3361d;
  --ok:         #1d7a4f;
  --focus:      #6d3fd6;

  --card-shadow: 0 1px 0 rgba(40,20,90,.03), 0 16px 34px -28px rgba(40,20,90,.45);
  --grid-ink:    rgba(60,30,120,.05);
  --hdr-bg:      color-mix(in srgb, var(--bg) 88%, transparent);
  --y-wash:      color-mix(in srgb, var(--y) 10%, transparent);
  --z-wash:      color-mix(in srgb, var(--z) 10%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  :root                     { --hdr-bg: #0c0a17; --y-wash: rgba(94,168,255,.16); --z-wash: rgba(255,116,184,.16); }
  :root[data-theme="light"] { --hdr-bg: #faf8fe; --y-wash: rgba(29,95,208,.10); --z-wash: rgba(196,32,111,.10); }
}

/* ========================= base ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--mix); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--mix); color: var(--btn-fg); }
code { font-family: var(--mono); font-size: .9em; }

h1,h2,h3,h4,h5 { line-height: 1.15; letter-spacing: -.02em; margin: 0; font-weight: 700; }
.h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -.035em; text-wrap: balance; }
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: .5rem; }

.kicker {
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1rem;
}
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* The wordmark. "Mi" in ink, the x in the mix colour, and the highlight —
   Y in blue, Z in pink — heavier than the rest. Used everywhere the name
   appears as a mark. */
.wm { font-weight: 650; letter-spacing: -.01em; }
.wm-x { color: var(--mix); }
.wm-y, .wm-z { font-weight: 850; }
.wm-y { color: var(--y); }
.wm-z { color: var(--z); }

/* Inline Y / Z / x tags inside running text */
.tag-y, .tag-z, .tag-x { font-weight: 800; }
.tag-y { color: var(--y); }
.tag-z { color: var(--z); }
.tag-x { color: var(--mix); }

/* Gradient text — blue through the mix to pink. Solid fallback first. */
.grad { color: var(--mix); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .grad {
    background: linear-gradient(95deg, var(--y), var(--mix) 50%, var(--z));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* ========================= INTRO =========================
   Beat sheet — must stay in step with RUNTIME in main.js (§4.5):
     0.08s  grid fades in
     0.15s  Y slides in from the left    (lands 1.00s)
     0.25s  Z slides in from the right   (lands 1.10s)
     1.10s  the mix lights up in the overlap
     1.20s  echo ring
     1.25s  Y and Z labels
     1.60s  wordmark
     1.85s  strapline
     2.15s  the x turns purple — the mix lands, settles 2.65s
     ~0.55s hold, then fade at 3.2s                                       */
.intro {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg);
  overflow: hidden;
}
.intro.done { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.intro.gone { display: none; }

.intro-grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0;
  animation: gridIn .8s var(--ease) .08s forwards;
}
@keyframes gridIn { to { opacity: 1; } }

.intro-stage {
  position: relative;
  display: grid; place-items: center;
  width: min(72vmin, 520px); aspect-ratio: 1;
}
.iv { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.iv-ticks { opacity: 0; animation: fadeIn .6s ease .9s forwards; }

.iv-y, .iv-z { stroke-width: 2; opacity: 0; }
.iv-y { fill: var(--y-wash); stroke: var(--y); animation: slideY .85s var(--ease) .15s forwards; }
.iv-z { fill: var(--z-wash); stroke: var(--z); animation: slideZ .85s var(--ease) .25s forwards; }
@keyframes slideY {
  0%   { opacity: 0; transform: translateX(-260px); }
  70%  { opacity: 1; transform: translateX(10px); }     /* overshoot — they bump */
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideZ {
  0%   { opacity: 0; transform: translateX(260px); }
  70%  { opacity: 1; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}
.iv-mix {
  fill: var(--mix); opacity: 0;
  transform-origin: 300px 300px; transform: scale(.2);
  animation: mixPop .6s var(--ease) 1.1s forwards;
}
@keyframes mixPop {
  0%   { opacity: 0; transform: scale(.2); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: .92; transform: scale(1); }
}
.iv-echo {
  transform-origin: 300px 300px; opacity: 0;
  animation: echo 1.1s cubic-bezier(.2,.55,.3,1) 1.2s forwards;
}
@keyframes echo {
  0%   { opacity: 0; transform: scale(.7); }
  15%  { opacity: .9; }
  100% { opacity: 0; transform: scale(1.75); }
}
.iv-ly, .iv-lz {
  font: 850 56px/1 var(--sans); text-anchor: middle; opacity: 0;
  animation: fadeIn .5s ease 1.25s forwards;
}
.iv-ly { fill: var(--y); }
.iv-lz { fill: var(--z); }

.intro-type { position: absolute; bottom: -3.6rem; text-align: center; width: 100%; }
.intro-word {
  font-size: clamp(1.9rem, 5.4vmin, 3rem); letter-spacing: -.01em; font-weight: 650;
  color: var(--ink);
  opacity: 0; animation: fadeUp .65s var(--ease) 1.6s forwards;
}
.intro-word .wm-x {
  color: var(--ink); display: inline-block; transform-origin: 50% 80%;
  animation: xLand .5s var(--ease) 2.15s forwards;
}
/* A colour change and a small pop. An earlier draft spun the x 90deg at
   1.35x and it ran into the dot of the i. */
@keyframes xLand {
  0%   { color: var(--ink); transform: scale(1); }
  55%  { color: var(--mix); transform: scale(1.16); }
  100% { color: var(--mix); transform: scale(1); }
}
.intro-sub {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  margin: .55rem 0 0;
  font: 600 .68rem/1 var(--mono); letter-spacing: .24em;
  color: var(--muted);
  opacity: 0; animation: fadeUp .65s var(--ease) 1.85s forwards;
}
.intro-sub i { width: 26px; height: 1px; background: linear-gradient(90deg, var(--y), var(--z)); display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }

.skip {
  position: absolute; bottom: 1.6rem; right: 1.6rem;
  background: none; border: 1px solid var(--line); color: var(--muted);
  font: 500 .74rem/1 var(--mono); letter-spacing: .07em;
  padding: .5rem .8rem; border-radius: 5px; cursor: pointer;
  opacity: 0; animation: fadeUp .5s ease .8s forwards;
  transition: color .2s, border-color .2s;
}
.skip:hover { color: var(--ink); border-color: var(--steel); }
.skip kbd {
  font: inherit; border: 1px solid currentColor; border-radius: 3px;
  padding: 0 .3em; margin-left: .4em; opacity: .75;
}

/* ========================= SITE ========================= */
.site { opacity: 0; }
.site.in { animation: siteIn .6s ease forwards; }
/* Pages without the intro (or a visit that already saw it) are visible at once. */
.site.no-intro { opacity: 1; animation: none; }
.site.no-intro .rule { transform: scaleX(1); animation: none; }
@keyframes siteIn { to { opacity: 1; } }
/* Repeat load in the same visit: html.seen is set by the head script before
   first paint, so the intro never flashes on screen (§4.5). */
html.seen .intro { display: none; }
html.seen .site { opacity: 1; animation: none; }
html.seen .rule { transform: scaleX(1); animation: none; }

/* --- the dual borders: Y meets Z in the middle, expanding outward --- */
.rule {
  position: fixed; left: 0; right: 0; height: 2px; z-index: 200;
  background: linear-gradient(90deg,
    transparent, var(--y) 14%, var(--mix) 50%, var(--z) 86%, transparent);
  transform: scaleX(0); transform-origin: 50% 50%;
}
.rule-top { top: 0; }
.rule-bottom { bottom: 0; }
.site.in .rule { animation: expand .9s var(--ease) .1s forwards; }
@keyframes expand { to { transform: scaleX(1); } }

.hdr {
  position: sticky; top: 2px; z-index: 150;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .8rem clamp(1rem, 4vw, 2.4rem);
  background: var(--hdr-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: .55rem;
  color: var(--ink); text-decoration: none;
  font-size: 1.28rem; line-height: 1;
}
.mark { width: 34px; height: 34px; flex: none; }
.m-y { fill: var(--y-wash); stroke: var(--y); stroke-width: 1.6; }
.m-z { fill: var(--z-wash); stroke: var(--z); stroke-width: 1.6; }
.m-mix { fill: var(--mix); }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.7rem); }
.nav a {
  color: var(--ink-dim); text-decoration: none; font-size: .92rem; font-weight: 500;
  position: relative; padding: .25rem 0; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: linear-gradient(90deg, var(--y), var(--z)); transition: width .25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }
.nav .nav-cta {
  background: linear-gradient(100deg, var(--y), var(--mix) 50%, var(--z));
  background-size: 200% 100%; background-position: 0 0;
  color: var(--btn-fg); font-weight: 650;
  padding: .48rem 1rem; border-radius: 6px;
  transition: background-position .4s var(--ease);
}
.nav .nav-cta:hover { color: var(--btn-fg); background-position: 100% 0; }
.nav .nav-cta::after { display: none; }

.theme {
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--ink-dim);
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .2s, color .2s;
}
.theme:hover { border-color: var(--steel); color: var(--ink); }
.theme svg { width: 17px; height: 17px; }

/* ---------- buttons ---------- */
.cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.btn {
  display: inline-block; padding: .82rem 1.7rem; border-radius: 7px;
  font: 650 .95rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), background-position .4s var(--ease), color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
/* The solid button IS the mix: blue through purple to pink. Dark text on
   the bright dark-mode trio, white on the deep light-mode trio — both
   pairings measured at 5.5:1 or better on every stop (§4.1). */
.btn-solid {
  background: linear-gradient(100deg, var(--y), var(--mix) 50%, var(--z));
  background-size: 200% 100%; background-position: 0 0;
  color: var(--btn-fg);
}
.btn-solid:hover { background-position: 100% 0; color: var(--btn-fg); }
.btn-ghost { color: var(--ghost-fg); border-color: var(--ghost-line); background: transparent; }
.btn-ghost:hover { border-color: var(--mix); color: var(--mix); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- hero ---------- */
.hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.2rem, 4vw, 2.4rem) clamp(2.5rem, 6vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-copy { min-width: 0; }
.eyebrow {
  display: flex; align-items: center; gap: .75rem; margin: 0 0 1.3rem;
  font: 600 .7rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow i { width: 28px; height: 1px; background: var(--y); display: block; }
.eyebrow i:last-child { flex: 1; max-width: 200px; background: linear-gradient(90deg, var(--mix), var(--z), transparent); }
.lede {
  max-width: 60ch; margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.16rem); color: var(--ink-dim);
}
.lede strong { color: var(--ink); font-weight: 650; }

.stats {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.2rem);
  margin: 3rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line);
}
/* Labels wrap to different line counts; the numbers must still share a
   baseline, so each figure is pushed to the bottom of its column. */
.stats > div { display: flex; flex-direction: column; }
.stats dd { margin-top: auto; padding-top: .4rem; }
.stats dt { font: 500 .74rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); max-width: 16ch; }
.stats dd {
  margin-bottom: 0; margin-left: 0; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 750; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stats div:nth-child(1) dd { color: var(--y); }
.stats div:nth-child(2) dd { color: var(--mix); }
.stats div:nth-child(3) dd { color: var(--z); }
.stats dd.counted { animation: countPop .35s var(--ease); }
@keyframes countPop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* --- the mixer: hairline rings behind, Y + Z circles, live labels --- */
.mixer {
  position: relative; margin: 0; min-width: 0;
  width: min(100%, 460px); justify-self: center; aspect-ratio: 1;
  /* label positions are fractions of the 600-unit viewBox */
}
.mixer-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hr { transform-origin: 300px 300px; animation: hrBreathe 3.6s ease-in-out infinite; }
.hr2 { animation-delay: -.6s; }   /* negative: start mid-cycle, never stall on frame one */
@keyframes hrBreathe {
  0%, 100% { transform: scale(.975); opacity: .22; }
  50%      { transform: scale(1.02); opacity: .55; }
}
.hr-ticks { opacity: .34; }
.hr-sweep {
  transform-origin: 300px 300px;
  stroke-dasharray: 150 1578;      /* short arc on a 2*pi*275 = 1728 path */
  opacity: .8;
  animation: hrSweep 7s linear infinite;
}
@keyframes hrSweep { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.mx-y { fill: var(--y-wash); stroke: var(--y); stroke-width: 2; }
.mx-z { fill: var(--z-wash); stroke: var(--z); stroke-width: 2; }
.mx-mix { fill: var(--mix); opacity: .9; transform-origin: 300px 300px; }
.mixer.swap .mx-mix { animation: mixPulse .6s var(--ease); }
@keyframes mixPulse { 0% { transform: scale(1); } 40% { transform: scale(.93); } 100% { transform: scale(1); } }
.hr-echo { transform-origin: 300px 300px; animation: hrEcho 3.6s cubic-bezier(.2,.55,.3,1) infinite; }
@keyframes hrEcho {
  0%   { transform: scale(.9); opacity: 0; }
  12%  { opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}

.mx-tag, .mx-word, .mx-out { position: absolute; transform: translate(-50%, -50%); text-align: center; }
.mx-tag { top: 39%; font: 850 clamp(1.4rem, 3.2vw, 2rem)/1 var(--sans); }
.mx-tag-y { left: 25.5%; color: var(--y); }
.mx-tag-z { left: 74.5%; color: var(--z); }
.mx-word {
  top: 55%; width: 30%;
  font: 650 clamp(.82rem, 1.6vw, 1.02rem)/1.25 var(--sans); color: var(--ink);
  transition: opacity .3s ease, transform .3s var(--ease);
}
.mx-word-y { left: 25.5%; }
.mx-word-z { left: 74.5%; }
.mx-out {
  top: 87%; left: 50%; width: 92%;
  display: flex; align-items: baseline; justify-content: center; gap: .55rem;
}
.mx-eq { font: 700 1.2rem/1 var(--mono); color: var(--mix); }
.mx-out-word {
  font: 750 clamp(1.05rem, 2.2vw, 1.35rem)/1.2 var(--sans); color: var(--ink);
  transition: opacity .3s ease, transform .3s var(--ease);
}
.mixer.leaving .mx-word,
.mixer.leaving .mx-out-word { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
.mixer.leaving .mx-out-word { transform: translateY(8px); }

/* ---------- bands ---------- */
.band {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(3.2rem, 7vw, 5.5rem) clamp(1.2rem, 4vw, 2.4rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--hdr-h, 64px);
}
/* Full-bleed background with the CONTENT still in the .band column. Done
   with padding, not per-child auto margins: any child with a `margin: x 0 y`
   shorthand wipes out auto margins and slams to the edge (wint.win §4.12).

   The side gutter is the centring offset PLUS the normal band padding. The
   wint.win formula takes max(gutter, offset) instead, which drops the band
   padding on wide screens and leaves .band-alt content one gutter (38px at
   1440 and up) left of every .band section. Measured on the live wint.win,
   12 Oct 2026: kickers at 380px vs 418px at 1920 wide. */
.band-alt {
  max-width: none;
  background: var(--bg-alt);
  --gutter: clamp(1.2rem, 4vw, 2.4rem);
  padding-left:  calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter));
  padding-right: calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter));
}
.band-alt > * { max-width: none; margin-left: 0; margin-right: 0; }
.band-lede { max-width: 62ch; color: var(--ink-dim); margin: .9rem 0 0; }

/* ---------- the idea ---------- */
.name-card {
  margin-top: 2.4rem; display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--card-shadow);
}
.name-word { font: 650 clamp(2.6rem, 7vw, 4.4rem)/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.name-word .wm-y, .name-word .wm-z { font-weight: 850; }
.name-why h4 { font-size: 1.08rem; margin-bottom: .5rem; }
.name-why p { margin: 0; color: var(--ink-dim); max-width: 62ch; }

.method { list-style: none; margin: 2.6rem 0 0; padding: 0;
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.method li { position: relative; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.method li::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 42px; height: 2px;
  background: var(--mix);
}
.method li:nth-child(1)::before { background: var(--y); }
.method li:nth-child(2)::before { background: var(--z); }
.method .n { font: 600 .72rem/1 var(--mono); letter-spacing: .14em; color: var(--muted); }
.method h4 { margin: .7rem 0 .5rem; font-size: 1.06rem; }
.method p { margin: 0; font-size: .95rem; color: var(--muted); }

/* ---------- mixes that worked ---------- */
.cards { margin-top: 2.6rem; display: grid; gap: 1.3rem;
  /* 300px minimum gives 3 + 3 at desktop width. 270px gave 4 + 2 and a hole. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.5rem 1.5rem 1.6rem; box-shadow: var(--card-shadow);
  transition: border-color .22s, transform .22s var(--ease);
}
.card:hover { border-color: var(--mix); transform: translateY(-3px); }
.pair { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1rem; }
.chip-y, .chip-z {
  font: 600 .78rem/1 var(--mono); letter-spacing: .02em;
  padding: .42rem .65rem; border-radius: 5px; border: 1px solid;
}
.chip-y { color: var(--y); border-color: color-mix(in srgb, var(--y) 45%, transparent); background: var(--y-wash); }
.chip-z { color: var(--z); border-color: color-mix(in srgb, var(--z) 45%, transparent); background: var(--z-wash); }
.plus { font: 700 .9rem/1 var(--mono); color: var(--muted); }
.card h4 { font-size: 1.12rem; margin-bottom: .5rem; }
.card h4::before { content: "= "; font-family: var(--mono); color: var(--mix); font-weight: 600; }
.card p:not(.pair) { margin: 0; font-size: .94rem; color: var(--muted); }

.flops {
  margin-top: 2rem; padding: 1.3rem 1.4rem;
  border: 1px dashed var(--ghost-line); border-radius: 10px; max-width: 78ch;
}
.flops h4 { font: 600 .74rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; }
.flops p { margin: 0; color: var(--ink-dim); font-size: .95rem; }

/* ---------- the mix lab ---------- */
.lab {
  margin-top: 2.4rem; display: grid; gap: 1.4rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch;
}
.lab-controls {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: end;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.5rem; box-shadow: var(--card-shadow);
}
.lab-pick { display: grid; gap: .45rem; min-width: 0; }
.lab-pick label { font: 600 .74rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.lab-pick select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px;
  padding: .72rem .8rem; cursor: pointer;
}
.lab-pick-y select { border-color: color-mix(in srgb, var(--y) 55%, var(--line)); }
.lab-pick-z select { border-color: color-mix(in srgb, var(--z) 55%, var(--line)); }
.lab-pick select:focus { outline: none; border-color: var(--mix); }
.lab-op { font: 700 1.4rem/1 var(--mono); color: var(--mix); padding-bottom: .7rem; }
.lab-buttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }

.lab-out {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.5rem 1.6rem; box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; justify-content: center; min-height: 13rem;
}
.lab-out::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--y), var(--mix), var(--z));
}
.lab-state { margin: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lab-state.is-real { color: var(--ok); }
.lab-state.is-new  { color: var(--mix); }
.lab-name { margin: .6rem 0 .5rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.lab-blurb { margin: 0; color: var(--ink-dim); font-size: .96rem; }
.lab-pitch { margin-top: 1rem; font: 600 .86rem/1 var(--mono); color: var(--mix); text-decoration: none; align-self: flex-start; }
.lab-pitch:hover { text-decoration: underline; }
.lab-pitch[hidden] { display: none; }
.lab-out.pop .lab-name { animation: labPop .45s var(--ease); }
@keyframes labPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- build notes ---------- */
.post { max-width: 70ch; }
.post-meta { margin: .5rem 0 1.6rem; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.post-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.14rem); color: var(--ink);
  border-left: 2px solid var(--mix); padding-left: 1.1rem; margin: 0 0 2rem;
}
.post h4 { margin: 2rem 0 .6rem; font-size: 1.04rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.post p { margin: 0 0 1.1rem; color: var(--ink-dim); }
.post-facts {
  margin-top: 2.4rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.5rem 1.6rem; box-shadow: var(--card-shadow);
}
.post-facts h4 { margin: 0 0 1rem; padding: 0; border: 0; font: 600 .78rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.post-facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.post-facts li {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  font: 500 .86rem/1.6 var(--mono); color: var(--ink-dim);
  padding-bottom: .55rem; border-bottom: 1px solid var(--line);
}
.post-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.post-facts li > span:first-child { min-width: 118px; color: var(--muted); }
.post-facts code { color: var(--mix); overflow-wrap: anywhere; }

/* ---------- contact ---------- */
.contact-grid { margin-top: 2.6rem; display: grid; gap: 2rem; grid-template-columns: 1.35fr 1fr; align-items: start; }
.form { display: grid; gap: 1.1rem; }
.row { display: grid; gap: .45rem; }
.row label { font: 600 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.row input, .row textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: .78rem .95rem;
  transition: border-color .2s, background .2s;
}
.row textarea { resize: vertical; min-height: 150px; }
.row input::placeholder, .row textarea::placeholder { color: var(--muted); opacity: .85; }
.row input:focus, .row textarea:focus { outline: none; border-color: var(--mix); background: var(--surface-2); }
.row.bad input, .row.bad textarea { border-color: var(--danger); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }

.status { margin: 0; min-height: 1.3rem; font: 500 .92rem/1.5 var(--sans); }
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }
.fallback[hidden] { display: none; }

/* Submit progress — a 3px rule in the same thin-line vocabulary as the intro.
   The sweep is NOT suppressed under reduced motion: it is the only signal the
   request has not died (§4.11). */
.prog { display: grid; gap: .55rem; }
.prog[hidden] { display: none; }
.prog-track { position: relative; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.prog-fill {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--y), var(--mix), var(--z));
  transition: width .3s var(--ease);
}
.prog-track::after {
  content: ""; position: absolute; inset: 0; width: 34%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 35%, transparent), transparent);
  animation: progSweep 1.3s linear infinite;
}
@keyframes progSweep { from { transform: translateX(-110%); } to { transform: translateX(320%); } }
.prog-msg  { margin: 0; font: 500 .82rem/1.5 var(--mono); letter-spacing: .03em; color: var(--ink-dim); }
.prog-hint { margin: 0; font: 500 .78rem/1.5 var(--sans); color: var(--muted); }
.prog.done .prog-track::after, .prog.failed .prog-track::after { display: none; }
.prog.done .prog-fill   { background: var(--ok); }
.prog.done .prog-msg    { color: var(--ok); }
.prog.failed .prog-fill { background: var(--danger); }
.prog.failed .prog-msg  { color: var(--danger); }
.prog.done .prog-hint, .prog.failed .prog-hint { display: none; }

.aside { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.7rem 1.6rem; box-shadow: var(--card-shadow); }
.aside h4 { font-size: .98rem; margin-bottom: .4rem; }
.aside p { font-size: .9rem; margin: 0 0 1rem; }
.aside hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.chip {
  display: inline-block; font: 600 .9rem/1 var(--mono);
  color: var(--mix); text-decoration: none;
  border: 1px solid var(--ghost-line); border-radius: 7px; padding: .68rem 1rem;
  transition: border-color .2s, background .2s;
}
.chip:hover { border-color: var(--mix); background: var(--surface-2); }
.next { margin: 0; padding-left: 1.15rem; }
.next li { font-size: .9rem; color: var(--muted); margin-bottom: .6rem; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line); background: var(--bg-alt); margin-bottom: 2px; }
.ftr-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: 2.6rem clamp(1.2rem, 4vw, 2.4rem) 1.6rem;
  display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr;
}
.ftr-col { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; min-width: 0; }
.ftr-col h5 { font: 600 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 .4rem; }
.ftr-col a, .ftr-replay {
  color: var(--ink-dim); text-decoration: none; font: 500 .9rem/1.4 var(--sans);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.ftr-col a:hover, .ftr-replay:hover { color: var(--mix); }
.ftr-replay::before { content: "\21BB  "; color: var(--mix); }
.ftr-about p { margin: 0; color: var(--muted); font-size: .9rem; max-width: 40ch; }
.ftr-about .ftr-wm { font-size: 1.5rem; line-height: 1; color: var(--ink); margin-bottom: .3rem; }
.ftr-promise { margin: .4rem 0 0; font-size: .76rem; line-height: 1.6; color: var(--muted); letter-spacing: .03em; }
.ftr-base {
  max-width: var(--wrap); margin: 0 auto;
  padding: 1rem clamp(1.2rem, 4vw, 2.4rem) 1.6rem;
  border-top: 1px solid var(--line);
}
.ftr-base p { margin: 0; font-size: .8rem; color: var(--muted); }

/* ---------- disclosure page ---------- */
.doc { max-width: 74ch; margin: 0 auto; padding: clamp(2.5rem,6vw,4.5rem) clamp(1.2rem,4vw,2.4rem) 4rem; }
.doc-back { display: inline-block; margin-bottom: 2rem; font: 500 .84rem/1 var(--mono); color: var(--mix); text-decoration: none; }
.doc-back:hover { text-decoration: underline; }
.doc h1 { font-size: clamp(2rem,4.5vw,2.9rem); margin-bottom: .6rem; }
.doc-sub { color: var(--muted); font-size: .95rem; margin: 0 0 2.5rem; }
.doc h2 { font-size: 1.2rem; margin: 2.6rem 0 .8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.doc h3 { font-size: .98rem; margin: 1.6rem 0 .5rem; }
.doc p, .doc li { color: var(--ink-dim); }
.doc p { margin: 0 0 1rem; }
.doc ul, .doc ol { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.doc li { margin-bottom: .45rem; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: .89rem; }
.doc th, .doc td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font: 600 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.doc td { color: var(--ink-dim); }
.doc td:first-child { color: var(--ink); font-weight: 600; width: 38%; }
.doc-wrap { overflow-x: auto; }
.doc-note {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--mix);
  border-radius: 0 8px 8px 0; padding: 1.2rem 1.3rem; margin: 0 0 1.4rem;
}
.doc-note p:last-child { margin-bottom: 0; }

/* ---------- 404 ---------- */
.err {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(3rem,8vw,6rem) clamp(1.2rem,4vw,2.4rem) 4rem;
  min-height: 58vh;
}
.err-code { font-size: .74rem; letter-spacing: .2em; color: var(--muted); margin: 0 0 1.6rem; }
.err-slot { min-height: 20rem; }
.err-card[hidden] { display: none; }
.err-card.in { animation: errIn .45s var(--ease) both; }
@keyframes errIn { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.err-lede { max-width: 58ch; margin: 1.4rem 0 0; font-size: clamp(1rem,1.6vw,1.14rem); color: var(--ink-dim); }
.err-stats { margin-top: 2.4rem; }
.err-aside { margin: 1.6rem 0 0; font-size: .87rem; color: var(--muted); }
.err-log {
  margin: 1.8rem 0 0; max-width: 46ch;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 1.1rem 1.2rem; display: grid; gap: .38rem;
  font-size: .84rem; color: var(--muted);
}
.err-log span:nth-child(odd) { color: var(--ink-dim); }
.err-path { color: var(--mix); }
.err-ok { color: var(--ok) !important; }
.err-cta { margin-top: 2.6rem; }
.err-reroll {
  margin-top: 1.8rem; background: none; border: 0; cursor: pointer;
  font-size: .82rem; letter-spacing: .06em; color: var(--muted);
  padding: .4rem 0; border-bottom: 1px dashed var(--ghost-line);
  transition: color .2s, border-color .2s;
}
.err-reroll:hover { color: var(--mix); border-color: var(--mix); }

/* ========================= responsive ========================= */
@media (max-width: 960px) {
  .lab { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .mixer { order: -1; width: min(86%, 380px); }
  .contact-grid { grid-template-columns: 1fr; }
  .ftr-in { grid-template-columns: 1fr 1fr; }
  .ftr-about { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .hdr { flex-wrap: wrap; gap: .7rem 1rem; padding-top: .7rem; padding-bottom: .7rem; }
  .nav { order: 3; width: 100%; margin-left: 0; gap: .45rem .9rem; flex-wrap: wrap; justify-content: flex-start; }
  .nav a { font-size: .84rem; }
  .nav .nav-cta { margin-left: auto; padding: .42rem .8rem; }
  .theme { margin-left: auto; }
  .cta .btn { flex: 1 1 100%; text-align: center; }
  .stats { gap: 1.4rem 2rem; }
  .stats > div { flex: 1 1 40%; }
  .name-card { grid-template-columns: 1fr; }
  .lab-controls { grid-template-columns: 1fr; }
  .lab-op { padding: 0; text-align: center; }
  .lab-buttons .btn { flex: 1 1 auto; text-align: center; }
  .intro-type { bottom: -3rem; }
  .skip { right: 50%; transform: translateX(50%); bottom: 1.2rem; }
  .ftr-in { grid-template-columns: 1fr; }
}

/* ========================= reduced motion =========================
   Deliberately minimal, matching the house rule (TECHNICAL_BASELINE R-07):
   the intro and decorative motion run for everyone, because the intro is
   escapable four ways and plays once per visit. Smooth scrolling IS turned
   off — it hijacks a deliberate action every time, rather than once. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}