/* ══════════════════════════════════════════════════════════════════════════
   ENDLESS SYNTH — shared identity for the sub-pages
   UI audit 2026-07-27, Step 2 (propagate)
   ══════════════════════════════════════════════════════════════════════════

   Linked by about / download / journey / privacy / terms. NOT by index.html,
   which keeps its own inline copy on purpose: that file is embedded into the
   Tauri desktop build and the Android build, where an external stylesheet that
   fails to resolve means an unstyled app. Two copies is the honest minimum, and
   the TOKENS-IN-SYNC invariant pins them together so they cannot drift.

   WHY THIS FILE EXISTS. The audit found the site running three visual
   identities at once: the home page on the Broadcast Panel's bone/grey/amber,
   four sub-pages on the old neon, and download.html on a third palette of its
   own. The DESKTOP APP button lives in the home top bar, so the most valuable
   path on the site — home to download — crossed two identity changes in one
   click.

   AND A REAL BUG, found while doing it. Not one of the five sub-pages declared
   @font-face or linked a font, yet every one of them asked for 'Share Tech
   Mono', 'Monoton' or 'VT323'. They have been rendering in Courier New and the
   browser's cursive default for their entire existence. The home page got this
   fixed on 2026-07-17; the fix never propagated. The @font-face block below is
   that fix, and it keeps the offline moat intact — same self-hosted woff2 files
   the home page uses, no CDN, no Google Fonts.

   VT323 is deliberately absent from the base layer. It was the classic body
   face, and the panel identity replaced it with Share Tech Mono. Monoton stays:
   the panel explicitly keeps .logo, so Monoton is the wordmark, not decoration.
   ══════════════════════════════════════════════════════════════════════════ */

/* 2026-07-28 — swap -> optional, matching index.html. swap PAINTS THE FALLBACK
   FIRST and then swaps, which is a guaranteed change of typeface on every
   uncached load - the residual flash the owner reported. optional commits after
   a ~100ms window and never swaps mid-view. The sub-pages carry no preload
   hints, so on a cold visit they may show one pageview in the fallback; that is
   the deliberate trade, and it beats a flash on every load. */
@font-face {
  font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400;
  font-display: optional; src: url('/vendor/fonts/ShareTechMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Monoton'; font-style: normal; font-weight: 400;
  font-display: optional; src: url('/vendor/fonts/Monoton-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'VT323'; font-style: normal; font-weight: 400;
  font-display: optional; src: url('/vendor/fonts/VT323-Regular.woff2') format('woff2');
}

/* ── Tokens. Character-identical to index.html's :root — see TOKENS-IN-SYNC. ── */
:root {
  /* ── 2026-07-27 RETUNE: neon on a dark ground. Owner rejected the grey
     identity and asked for the colour back while keeping the layout work.
     Values only — every rule below this block is unchanged. ── */
  /* surfaces, dark to light */
  --es-field-top:      #1a0a3e;   /* gradient origin, top of the waiting field */
  --es-surface:        #06000f;   /* the ground everything sits on */
  --es-surface-raise:  #150a26;   /* hover / active / gradient midpoint */
  /* lines */
  --es-rule:           #2c1a4a;   /* the hairline grid — chip borders, dividers */
  --es-rule-strong:    #4a2d73;   /* one step up: an inert (unlit) indicator */
  --es-field: radial-gradient(145% 100% at 50% 0%,
                var(--es-field-top) 0%, var(--es-surface-raise) 46%, var(--es-surface) 100%);
  /* voices */
  --es-voice-human:            #fffb96;
  /* Long-form body copy. A genuine EXTENSION rather than a value lifted from
     the panel: the panel has no running prose, so it never needed a step
     between the human voice and the machine voice. Sub-pages are all prose, and
     without this, body text and emphasised text both land on --es-voice-human
     and cancel each other out. 11.4:1 on --es-surface, so it is a contrast
     choice, not a dimming. index.html does not declare it — TOKENS-IN-SYNC
     requires the SHARED tokens to match, and allows this file to extend. */
  --es-voice-body:             #e2d6ff;   /* 15.08:1 — long-form prose */
  --es-voice-machine:          #b967ff;   /* 6.35:1 — was the AA failure in grey */
  --es-voice-machine-strong:   #01cdfe;   /* 11.00:1 — secondary, links */
  --es-voice-machine-over:     #d9b3ff;
  --es-voice-composer:         #FFB000;   /* amber — reserved for the composer alone */
  --es-voice-error:            #ff3366;
  --es-machine-size:   0.68rem;
  --es-machine-track:  0.16em;
}

/* ══════════════════════════════════════════════════════════════════════════
   Document layer — scoped under .es-doc so a page's own rules never collide
   with it by accident. Add class="es-doc" to <body> to opt a page in.

   NOTE ON SMALL TEXT: this layer uses --es-voice-machine-strong (5.76:1), not
   --es-voice-machine (4.18:1, fails WCAG AA at this size). The home page still
   ships the failing value because raising it there is audit Step 4 and moves
   pixels; these pages are being restyled anyway, so they start correct rather
   than inheriting a known defect and needing a second pass.
   ══════════════════════════════════════════════════════════════════════════ */

.es-doc {
  margin: 0;
  min-height: 100vh;
  padding: 48px 22px 72px;
  background: var(--es-field) fixed;
  color: var(--es-voice-body);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.es-doc > * { max-width: 720px; margin-left: auto; margin-right: auto; }

/* The wordmark. Monoton, and the only place it appears — same role it has in
   the home page's top bar. No glow: the panel identity dropped text-shadow. */
.es-doc h1 {
  font-family: 'Monoton', cursive;
  color: var(--es-voice-human);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0 0 6px;
  text-shadow: none;
}
/* The machine voice: small caps, letterspaced, quiet. */
.es-doc .sub {
  color: var(--es-voice-machine-strong);
  font-size: var(--es-machine-size);
  letter-spacing: var(--es-machine-track);
  text-transform: uppercase;
  margin: 0 0 36px;
}
/* Section headings sit on a hairline instead of taking a colour of their own.
   Amber is NOT used here — it belongs to the composer, and there is no composer
   on a terms page. Structure carries the hierarchy instead of hue. */
.es-doc h2 {
  color: var(--es-voice-human);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: var(--es-machine-track);
  text-transform: uppercase;
  margin: 40px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--es-rule);
}
.es-doc h3 {
  color: var(--es-voice-machine-strong);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 26px 0 8px;
}
.es-doc p { margin: 0 0 14px; }
.es-doc ul, .es-doc ol { margin: 0 0 16px; padding-left: 20px; }
.es-doc li { margin-bottom: 6px; }
.es-doc strong { color: var(--es-voice-human); font-weight: 400; }
.es-doc code {
  font-family: inherit;
  color: var(--es-voice-machine-strong);
  background: var(--es-surface-raise);
  border: 1px solid var(--es-rule);
  padding: 1px 5px;
}
.es-doc small, .es-doc .meta {
  color: var(--es-voice-machine-strong);
  font-size: var(--es-machine-size);
  letter-spacing: 0.08em;
}
.es-doc hr { border: 0; border-top: 1px solid var(--es-rule); margin: 32px 0; }

/* Links read as links without spending a hue on it: the underline carries the
   affordance, and hover raises it to the text colour. */
.es-doc a {
  color: var(--es-voice-human);
  text-decoration: underline;
  text-decoration-color: var(--es-rule-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.14s ease, color 0.14s ease;
}
.es-doc a:hover { text-decoration-color: var(--es-voice-human); }

/* The one amber element per page, and it earns it: the way back to the music.
   Amber marks the composer, and the player IS the composer. */
.es-doc .back {
  display: inline-block;
  margin-top: 44px;
  padding: 11px 18px;
  border: 1px solid var(--es-rule);
  color: var(--es-voice-composer);
  font-size: var(--es-machine-size);
  letter-spacing: var(--es-machine-track);
  text-transform: uppercase;
  text-decoration: none;
  background: var(--es-surface);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.es-doc .back:hover {
  border-color: var(--es-voice-composer);
  background: var(--es-surface-raise);
  text-decoration: none;
}

/* Audit Finding C: 174 interactive elements shared 6 focus rules. These pages
   get a real one. :focus-visible so a mouse click does not draw a ring. */
.es-doc a:focus-visible,
.es-doc button:focus-visible,
.es-doc [tabindex]:focus-visible {
  outline: 2px solid var(--es-voice-composer);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (max-width: 600px) {
  .es-doc { padding: 32px 18px 56px; font-size: 0.92rem; }
  .es-doc h2 { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .es-doc a, .es-doc .back { transition: none; }
}