/* ============================================================
   dop∃mine — site.css
   The dark instrument: charcoal chassis, one red signal.
   Built entirely on dop3mine-tokens.css. Dark-only.

   Rules from the design system (+ the Rams pass):
   - one red thing per view: the hero field, then the header ∃,
     the selected channel LED, the REC dot, the CTA
   - JetBrains Mono for the mark, the labels and every reading
   - motion is feedback or explanation: 90/160/320ms, ease-out,
     no bounce; everything honors prefers-reduced-motion
   ============================================================ */

/* ---------------- Reset (replaces Bootstrap's Reboot) ---------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, dl, dd { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

::selection {
  background: var(--accent);
  color: var(--text-on-accent);
}

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

/* ---------------- Layout primitives ---------------- */
:root {
  --gutter: var(--space-5);
  --header-h: 64px;
  --on-field-rule: rgba(255, 255, 255, 0.45);   /* hairlines drawn on the red field */
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--w-max));
  margin-inline: auto;
}

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

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-modal);
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.js-only { display: none; }
.js .js-only { display: block; }

/* mono uppercase label — the tracked label voice */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* wordmark — JetBrains Mono, like the <jag/> mark */
.wordmark {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-decoration: none;
}
/* The SVG wordmark (tools/build-marks.py → src/assets/wordmark.svg; the
   pages inline the same paths): JetBrains Mono SemiBold as outlines, the box
   tight to the ink — 0.964em tall, 4.337em wide, the p's descender 0.18em
   below the baseline. Letters follow currentColor; the ∃ is the pivot,
   flipped around its own center (scaleX −1 reads as E). */
.wm {
  display: inline-block;
  vertical-align: -0.18em;   /* sits on the baseline like the text it replaced */
  height: 0.964em;
  width: auto;
  overflow: visible;
}
.wm-glyph { fill: currentColor; }
.wm-pivot {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes wm-type  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wm-pivot { from { transform: scaleX(-1); } to { transform: scaleX(1); } }
@keyframes wm-tick  { 0%, 94% { transform: scaleX(1); } 97% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes wm-flip  { 50% { transform: scaleX(-1); } }

/* ---------------- Header ---------------- */
/* Default state = over the red field: transparent, white type, the ∃
   punched through to charcoal. site.js adds .is-solid once the field
   has scrolled away; then the ∃ carries the red. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-overlay);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--gutter);
  color: var(--white);
  border-bottom: var(--bw-hairline) solid transparent;
  transition: background var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out);
}
.site-header.is-solid {
  background: rgba(16, 16, 16, 0.84);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-subtle);
}

.site-header__brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  min-width: 0;
}

.site-mark {
  font-size: var(--fs-h4);
  color: var(--white);
}
/* over the red field the ∃ is punched through to charcoal; hover pivots it to E */
.site-mark .wm-pivot {
  fill: var(--ink-900);
  transition: fill var(--dur-slow) var(--ease-out),
              transform var(--dur-base) var(--ease-in-out);
}
.site-mark:hover .wm-pivot,
.site-mark:focus-visible .wm-pivot { transform: scaleX(-1); }
/* once the field has gone, the red lands on the ∃ — with one pivot */
.site-header.is-solid .site-mark .wm-pivot {
  fill: var(--accent);
  animation: wm-flip 480ms var(--ease-in-out);
}

.site-lab {
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-header.is-solid .site-lab { color: var(--text-tertiary); }
.site-header.is-solid .site-lab:hover { color: var(--text-primary); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav__item {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  color: var(--white);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-header.is-solid .site-nav__item { color: var(--text-secondary); }
.site-header.is-solid .site-nav__item:hover { color: var(--text-primary); }

/* EN | ES — a two-position switch: both options always visible, the live one lit */
.lang-switch {
  display: inline-flex;
  padding: 0;
  background: transparent;
  border: var(--bw-hairline) solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.lang-switch span {
  padding: var(--space-1) var(--space-2);
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
html[lang="en"] .lang-switch [data-lang-opt="en"],
html[lang="es"] .lang-switch [data-lang-opt="es"] {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}
.site-header.is-solid .lang-switch { border-color: var(--border-default); }
.lang-switch:active { transform: translateY(1px) scale(0.99); }

/* on the red field, a red focus ring would vanish */
.site-header:not(.is-solid) :focus-visible,
.hero :focus-visible { outline-color: var(--white); }

/* ---------------- Hero: the red field ---------------- */
.hero {
  --mark-size: clamp(3.5rem, 11.5vw, 11rem);   /* the wordmark's em; the slogan is sized from it */
  position: relative;
  isolation: isolate;
  min-height: max(100svh, 560px);
  background: var(--red-600);
  color: var(--white);
  overflow: hidden;
}

/* scanlines texture the field, under the molecule */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--scanlines);
  pointer-events: none;
}

.hero__3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  touch-action: pan-y;   /* vertical swipes scroll the page, horizontal drags turn the molecule */
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.hero__3d.is-live { opacity: 1; }   /* set by glitch3d.js once the scene is up */
.hero__3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The type layer lets pointer events through to the canvas, except on controls. */
.hero__inner {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto;
  column-gap: var(--space-6);
  padding: calc(var(--header-h) + var(--space-6)) var(--gutter) var(--space-5);
  pointer-events: none;
}
.hero__inner a { pointer-events: auto; }

.hero__id {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}

.hero__mark {
  font-size: var(--mark-size);
  color: var(--white);
}
.hero__mark .wm { display: block; }
/* power-on: the letters type on, the E pivots into the ∃ (punched through
   to the chassis), then the ∃ ticks every 8 s — no frozen logo */
.hero__mark .wm-glyph { animation: wm-type 1ms steps(1, end) calc(160ms + var(--i) * 70ms) both; }
.hero__mark .wm-pivot {
  fill: var(--ink-900);
  animation: wm-type 1ms steps(1, end) calc(160ms + var(--i) * 70ms) both,
             wm-pivot var(--dur-slow) var(--ease-in-out) 800ms both,
             wm-tick 8s var(--ease-in-out) 3s infinite;
}

/* The slogan: lowercase, tracked 0.07em, exactly as wide as the wordmark,
   ink to ink, at every size. Ratio = the wordmark's ink width (4.337em) over
   the phrase's ink width in Inter Tight Light at 0.07em, measured in the
   site's font: EN "multimedia workshop" 10.4607em, ES "taller multimedia"
   8.1623em. The negative indent starts the phrase at its ink, like the mark.
   Change the words or the font → re-measure. */
.hero__tagline {
  margin-top: var(--space-4);
  margin-left: -0.068em;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: calc(var(--mark-size) * 0.4146);
  line-height: 1.15;
  letter-spacing: 0.07em;
  text-transform: lowercase;
  white-space: nowrap;
}
html[lang="es"] .hero__tagline {
  margin-left: -0.022em;
  font-size: calc(var(--mark-size) * 0.5313);
}

/* the lab line lives in the header on wide screens, here on narrow ones */
.hero__lab {
  display: none;
  margin-top: var(--space-3);
  color: var(--white);
  text-decoration: none;
}

/* primary: START A PROJECT · secondary: a quiet link to the work */
.hero__actions {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  display: grid;
  justify-items: end;
  gap: var(--space-4);
}
.hero__more {
  padding-bottom: 2px;
  white-space: nowrap;
  color: var(--white);
  text-decoration: none;
  border-bottom: var(--bw-hairline) solid rgba(255, 255, 255, 0.6);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.hero__more:hover { border-bottom-color: var(--white); }

/* the instrument strip */
.hero__readouts {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--space-7);
  border-top: var(--bw-hairline) solid var(--on-field-rule);
}

.readout {
  padding: var(--space-3) var(--space-3) 0 0;
}
.readout + .readout {
  padding-left: var(--space-3);
  border-left: var(--bw-hairline) solid rgba(255, 255, 255, 0.22);
}
.readout .label {
  font-size: var(--fs-micro);
  color: var(--white);
}
.readout dd {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------- Buttons ---------------- */
.btn-dop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-3) var(--space-5);
  border: var(--bw-default) solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-dop:active { transform: translateY(1px) scale(0.99); }

/* START A PROJECT in the header and the hero: white is the clearest thing
   on both the red field and the chassis without adding a second red.
   Hover inverts to an outline. */
.btn-dop--white {
  color: var(--ink-900);
  background: var(--white);
  border-color: var(--white);
}
.btn-dop--white:hover {
  color: var(--white);
  background: transparent;
}

.btn-dop--compact {
  padding: var(--space-2) var(--space-3);
  letter-spacing: 0.14em;
}

.btn-dop--primary {
  color: var(--text-on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.btn-dop--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--glow-red-md);
}

/* ---------------- Sections ---------------- */
.section {
  padding-block: var(--space-10);
  scroll-margin-top: var(--header-h);
}
.section + .section { border-top: var(--bw-hairline) solid var(--border-subtle); }

.section-head {
  display: grid;
  gap: var(--space-3);
  max-width: 46rem;
  margin-bottom: var(--space-7);
}

/* Split head: label, title and data on one side, the text on the other.
   The aside drops by the label's line plus the gap, so the lede's first
   line starts level with the title. */
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: var(--space-8);
  align-items: start;
}
.section-head__main,
.section-head__aside {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.section-head__aside {
  padding-top: calc(var(--fs-label) * var(--lh-normal) + var(--space-3));
}

.section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* the argument under a section title: facts, in sentences */
.section-lede {
  max-width: 40em;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.section-note {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  max-width: 40em;
}

.section-throughline {
  margin-top: var(--space-7);
  max-width: 38em;
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
}

/* ---------------- Work: the tuner ---------------- */
/* Without JS: six specimens stacked. With JS (.is-tuner): channel buttons
   on top, one specimen at a time. */
.specimens {
  display: grid;
  gap: var(--space-9);
}
.tuner.is-tuner .specimens { display: block; }

.tuner__channels { display: none; }
.tuner.is-tuner .tuner__channels {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--bw-hairline);
  margin-bottom: var(--space-5);
  background: var(--border-subtle);
  border: var(--bw-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.channel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: 2px;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--ink-850);
  border: 0;
  text-align: left;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.channel:hover { background: var(--ink-800); color: var(--text-secondary); }
.channel:active { transform: translateY(1px) scale(0.99); }
.channel:focus-visible { outline-offset: -2px; }
.channel[aria-selected="true"] {
  background: var(--ink-800);
  color: var(--text-primary);
}

.channel__led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-600);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* the one red thing in this view */
.channel[aria-selected="true"] .channel__led {
  background: var(--accent);
  box-shadow: 0 0 8px var(--red-glow);
}

.channel__key {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
}

.channel__name,
.channel__sector {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel__name {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}
.channel__sector {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* one specimen = the screen + its spec sheet */
.specimen {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
}
/* author display rules beat the UA's [hidden]; restate it */
.specimen[hidden] { display: none; }

.screen {
  padding: var(--space-3);
  background: var(--ink-850);
  border: var(--bw-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.screen__viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-sunken);
  border-radius: var(--radius-xs);
}
.screen__viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scanlines);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.screen__img {
  width: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* tune-in: one bright line sweeps the screen as a channel lands */
.screen__sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
  opacity: 0;
  pointer-events: none;
}
.specimen.is-tuning .screen__sweep { animation: dop-sweep var(--dur-slow) var(--ease-out) both; }
.specimen.is-tuning .screen__img { animation: dop-tune-in var(--dur-slow) var(--ease-out) both; }

@keyframes dop-sweep {
  from { top: 0; opacity: 1; }
  to   { top: 100%; opacity: 0; }
}
@keyframes dop-tune-in {
  from { opacity: 0; filter: brightness(1.8) contrast(0.6); }
  to   { opacity: 1; filter: none; }
}

.scan { display: none; }
.tuner.is-tuner .scan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 4.5ch;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.scan__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* the scan fader — a hairline track, a hard rectangular knob */
.scan__fader {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
}
.scan__fader::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--border-default);
}
.scan__fader::-moz-range-track {
  height: 1px;
  background: var(--border-default);
}
.scan__fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 18px;
  margin-top: -9px;
  background: var(--ink-100);
  border: 0;
  border-radius: 1px;
  transition: background var(--dur-fast) var(--ease-out);
}
.scan__fader::-moz-range-thumb {
  width: 10px;
  height: 18px;
  background: var(--ink-100);
  border: 0;
  border-radius: 1px;
}
.scan__fader:hover::-webkit-slider-thumb { background: var(--white); }
.scan__fader:focus-visible { outline-offset: 2px; }

.screen__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
}

/* the spec sheet */
.spec {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding-top: var(--space-2);
}
.specimen.is-tuning .spec { animation: dop-settle var(--dur-slow) var(--ease-out) both; }
@keyframes dop-settle {
  from { opacity: 0; transform: translateY(6px); }
}

.spec__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-100);
}
.led--hollow {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink-200);
}

.spec__domain {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.625rem, 2.8vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.spec__client {
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.spec__desc {
  max-width: 34em;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.spec__sheet { border-top: var(--bw-hairline) solid var(--border-subtle); }
.spec__sheet > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: var(--bw-hairline) solid var(--border-subtle);
}
.spec__sheet dt { font-size: var(--fs-micro); align-self: center; }
.spec__sheet dd {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
}
.spec__sheet a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.spec__sheet a:hover { color: var(--text-secondary); }

.spec__visit {
  justify-self: start;
  padding-bottom: 2px;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: var(--bw-hairline) solid var(--border-default);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.spec__visit:hover { border-bottom-color: var(--white); }

/* ---------------- Work stats: the track record, as readouts ---------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 34rem;
  margin-block: var(--space-2);
  border-top: var(--bw-hairline) solid var(--border-subtle);
}
/* label on top, value pinned to the bottom: the values stay on one line even
   when a label wraps (EN ESTA PÁGINA, on phones) */
.stat {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--space-3) var(--space-3) 0 0;
}
.stat + .stat {
  padding-left: var(--space-3);
  border-left: var(--bw-hairline) solid var(--border-subtle);
}
.stat .label { font-size: var(--fs-micro); }
.stat dd {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ---------------- The name: one name, read three ways ---------------- */
/* An open spec sheet — hairlines, no panels — so it doesn't echo the Formats
   modules right below it. The three terms share one baseline. */
.name-sheet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--bw-hairline) solid var(--border-subtle);
}
.name-entry {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) 0 0;
}
.name-entry + .name-entry {
  padding-left: var(--space-5);
  border-left: var(--bw-hairline) solid var(--border-subtle);
}
.name-term {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.name-term--exists { color: var(--accent); }   /* the one red thing in this view */
/* O_o on the text baseline, like the words beside it (its _ sits 0.129em below) */
.name-term .rm {
  display: inline-block;
  vertical-align: -0.129em;
}
.name-entry dd {
  margin: 0;
  display: grid;
  align-content: start;
  gap: var(--space-3);
}
.name-reading {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.name-text {
  max-width: 30em;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ---------------- Formats: three modules ---------------- */
.modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bw-hairline);
  background: var(--border-subtle);
  border: var(--bw-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.module {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--ink-850);
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

.module__head {
  display: grid;
  gap: var(--space-2);
}

.module__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.module__viz {
  position: relative;
  height: 188px;
  display: grid;
  place-items: center;
  padding-bottom: var(--space-5);
  background: var(--bg-sunken);
  border: var(--bw-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.viz__caption {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
}

.module__body {
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* 3d — a wireframe cube in pure CSS; site.js reads its angle back */
.viz-3d { perspective: 480px; }
.cube {
  position: relative;
  width: 72px;
  height: 72px;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(30deg);
  animation: dop-cube-turn 12s linear infinite;
}
.cube__face {
  position: absolute;
  inset: 0;
  border: var(--bw-hairline) solid var(--ink-200);
}
/* front · back · right · left · top · bottom */
.cube__face:nth-child(1) { transform: translateZ(36px); }
.cube__face:nth-child(2) { transform: rotateY(180deg) translateZ(36px); }
.cube__face:nth-child(3) { transform: rotateY(90deg) translateZ(36px); }
.cube__face:nth-child(4) { transform: rotateY(-90deg) translateZ(36px); }
.cube__face:nth-child(5) { transform: rotateX(90deg) translateZ(36px); }
.cube__face:nth-child(6) { transform: rotateX(-90deg) translateZ(36px); }

@keyframes dop-cube-turn {
  from { transform: rotateX(-22deg) rotateY(0deg); }
  to   { transform: rotateX(-22deg) rotateY(360deg); }
}

/* web — this page's own numbers */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
}
.metrics .label { font-size: var(--fs-micro); }
.metrics dd {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* video — timecode of the visit, with the REC light */
.timecode {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.rec {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);   /* the one red thing in this view */
  animation: dop-rec 1s steps(1, end) infinite;
}
@keyframes dop-rec {
  50% { opacity: 0.15; }
}

/* ---------------- Contact ---------------- */
.contact__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}
.contact .section-title { max-width: 20em; }

.reaction-mark {
  font-size: var(--fs-display-l);
  line-height: 1;
}
/* O_o as SVG (tools/build-marks.py → src/assets/reaction.svg; inlined here):
   JetBrains Mono SemiBold outlines, box tight to the ink (0.869em tall). Both
   eyes blink on one clock, each around its own center. */
.rm {
  display: block;
  height: 0.869em;
  width: auto;
  overflow: visible;
}
.rm-glyph { fill: currentColor; }
.rm-eye {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rm-blink 4.6s var(--ease-in-out) infinite;
}
/* the react: on hover the small eye goes wide — O_o becomes O_O, the real capital O */
.rm-wide { opacity: 0; }
.reaction-mark:hover .rm-small,
.name-term--reaction:hover .rm-small { opacity: 0; }
.reaction-mark:hover .rm-wide,
.name-term--reaction:hover .rm-wide { opacity: 1; }

@keyframes rm-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(0.08); }
}

/* says exactly what the button does before it is pressed */
.contact-help {
  max-width: 34em;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.contact-email {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.contact-email:hover { color: var(--text-primary); }

/* ---------------- Footer ---------------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-6) var(--gutter);
  border-top: var(--bw-hairline) solid var(--border-subtle);
}

.footer-lab {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.footer-lab a {
  color: var(--text-primary);
  text-decoration-color: var(--border-default);
  text-underline-offset: 3px;
}

.footer-legal {
  display: flex;
  gap: var(--space-5);
}
.footer-legal a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-legal a:hover,
.footer-legal a[aria-current="page"] { color: var(--text-primary); }

/* ---------------- Legal pages: privacy, terms ---------------- */
.legal {
  padding: calc(var(--header-h) + var(--space-9)) 0 var(--space-10);
}

.legal__head {
  display: grid;
  gap: var(--space-3);
  max-width: 46rem;
  margin-bottom: var(--space-7);
}

.legal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* the page at a glance, as a spec sheet */
.legal__sheet {
  max-width: 42rem;
  margin-bottom: var(--space-8);
  border-top: var(--bw-hairline) solid var(--border-subtle);
}
.legal__sheet > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: var(--bw-hairline) solid var(--border-subtle);
}
.legal__sheet dt { font-size: var(--fs-micro); align-self: center; }
.legal__sheet dd {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
}

.legal__doc { max-width: 42rem; }
.legal__doc h2 {
  margin: var(--space-7) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
}
.legal__doc h2:first-child { margin-top: 0; }
.legal__doc p,
.legal__doc li {
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.legal__doc p + p { margin-top: var(--space-3); }
.legal__doc ul {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding-left: 1.1em;
}
.legal__doc strong {
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.legal__doc code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text-primary);
}
.legal__doc a {
  color: var(--text-primary);
  text-decoration-color: var(--border-default);
  text-underline-offset: 3px;
}

/* both languages ship in the page; the html[lang] shows one */
html[lang="en"] [data-lang-block]:not([lang="en"]),
html[lang="es"] [data-lang-block]:not([lang="es"]) { display: none; }

/* ---------------- Motion: boot + reveal ---------------- */
/* Hero power-on: the type and the readouts come up in sequence.
   Pure CSS, so the hero never depends on a script to appear. */
[data-boot] {
  animation: dop-boot var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(120ms + var(--i, 0) * 90ms);
}
@keyframes dop-boot {
  from { opacity: 0; transform: translateY(8px); }
}

/* Hidden only when JS is present to un-hide it (html.js). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms),
              transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-boot],
  .hero__mark .wm-glyph,
  .hero__mark .wm-pivot,
  .site-header.is-solid .site-mark .wm-pivot,
  .cube,
  .rec,
  .rm-eye,
  .specimen.is-tuning .screen__sweep,
  .specimen.is-tuning .screen__img,
  .specimen.is-tuning .spec { animation: none; }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn-dop, .channel, .site-header, .hero__3d, .site-mark .wm-pivot { transition: none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1199.98px) {
  /* seven channels as 4 + 3 (and 2 + 2 + 2 + 1 on phones): the last one
     spans two columns, so no row shows an empty cell */
  .tuner.is-tuner .tuner__channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tuner.is-tuner .channel:last-child { grid-column: span 2; }
}

@media (max-width: 959.98px) {
  .specimen { grid-template-columns: minmax(0, 1fr); }
  .modules { grid-template-columns: minmax(0, 1fr); }
  /* the split head stacks: title and data, then the text */
  .section-head--split {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-5);
  }
  .section-head__aside { padding-top: 0; }
  /* the name sheet stacks: one entry per row, hairlines between */
  .name-sheet { grid-template-columns: minmax(0, 1fr); }
  .name-entry,
  .name-entry + .name-entry {
    padding: var(--space-6) 0;
    border-left: 0;
    border-bottom: var(--bw-hairline) solid var(--border-subtle);
  }
}

@media (max-width: 719.98px) {
  .site-lab { display: none; }
  .hero__lab { display: inline-block; }
  .site-nav__item { display: none; }   /* on a phone the header keeps the language and the one action */

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto;
  }
  .hero__actions {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;           /* the longer Spanish CTA pushes the link to its own line */
    align-items: center;
    gap: var(--space-4) var(--space-5);
    margin-top: var(--space-5);
  }
  .hero__readouts {
    grid-row: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-6);
  }
  .readout,
  .readout + .readout {
    padding: var(--space-2) 0 var(--space-2);
    border-left: 0;
  }
  .readout:nth-child(even) { padding-left: var(--space-3); }
  .readout:last-child { grid-column: 1 / -1; }

  .section { padding-block: var(--space-9); }
  .spec__sheet > div { grid-template-columns: 7rem minmax(0, 1fr); }
}

@media (max-width: 479.98px) {
  :root {
    --gutter: var(--space-4);
    --header-h: 56px;
  }
  .site-nav { gap: var(--space-3); }
  .lang-switch span { padding-inline: 6px; }
  .btn-dop--compact {
    padding-inline: var(--space-2);
    letter-spacing: 0.08em;
  }
  .legal__sheet > div { grid-template-columns: 8rem minmax(0, 1fr); }
  .tuner.is-tuner .tuner__channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module { padding: var(--space-5); }
}