/* ==========================================================================
   Acoustics & Music Theory — tokens.
   ==========================================================================

   The structural stylesheet is essay-kit's base.css, loaded first. Everything
   below is this site's identity and nothing else.

   Light mode is manuscript paper: a warm cream sheet with a dark plum-black
   ink, the surface music was written on before it was printed. Dark mode is
   the lacquer of a closed piano lid — a deep aubergine-black rather than a
   neutral one, so the plum primary stays in the same family rather than
   turning into a different colour after sunset.

   The roles follow what a music figure has to distinguish, and there are
   exactly five things: the note being discussed, the harmonic series behind
   it, a second voice, the interval or ratio being measured, and the
   discrepancy — the beat, the comma, the part that does not fit. That last
   one earns a colour of its own because this subject is largely about it.

   Body type is an old-style serif with genuine text figures in its
   fallbacks, which suits a page carrying ratios and numbers in prose.
   ========================================================================== */

:root {
  --paper:   #faf6ec;
  --paper-2: #f2ece0;
  --paper-3: #e7dfcd;
  --ink:     #221b26;
  --ink-2:   #4a4050;
  --ink-3:   #675c6e;
  --rule:    #d6cab4;
  --rule-2:  #e6ddc9;

  --c-a: #8f2d6a;   /* the note under discussion: fundamental, root, tonic */
  --c-b: #0d6e69;   /* the harmonic series, partials, spectrum */
  --c-c: #5a3fa8;   /* a second voice, the other note of an interval */
  --c-d: #8a6a12;   /* the measured quantity: a ratio, a cent, a duration */
  --c-e: #b4451c;   /* the discrepancy: beats, the comma, what does not fit */
  --c-warn: #a52218;

  --fig-ink:   var(--ink);
  --fig-soft:  #5d5364;
  --fig-faint: #c3b7a3;

  /* A keyboard has to read as a keyboard in both themes, so the two key
     colours are stated rather than mixed. Mixing toward the ink inverts them
     in dark mode and the black keys come out lighter than the white ones. */
  --key-w: #f4eee0;
  --key-b: #2b2331;

  --tint: 14%;
  --tint-strong: 26%;

  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               "URW Palladio L", Georgia, serif;
  --font-display: var(--font-body);
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --radius: 5px;
  --shadow: 0 1px 2px rgb(34 27 38 / 8%), 0 8px 26px -14px rgb(34 27 38 / 28%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #16111a;
    --paper-2: #1e1724;
    --paper-3: #2a2033;
    --ink:     #ece5f2;
    --ink-2:   #b8aec2;
    --ink-3:   #978ca2;
    --rule:    #372c42;
    --rule-2:  #251d2d;

    --c-a: #ef86bf;
    --c-b: #45cfc2;
    --c-c: #b39cf5;
    --c-d: #e5c05a;
    --c-e: #ff8f5e;
    --c-warn: #fb7b6f;

    --fig-ink:   #e3dcea;
    --fig-soft:  #9a8fa6;
    --fig-faint: #3b3046;

    --key-w: #cfc4d9;
    --key-b: #100c14;

    --tint: 20%;
    --tint-strong: 34%;
    --shadow: 0 1px 2px rgb(0 0 0 / 42%), 0 12px 34px -16px rgb(0 0 0 / 76%);
  }
}

:root[data-theme="dark"] {
  --paper:   #16111a;
  --paper-2: #1e1724;
  --paper-3: #2a2033;
  --ink:     #ece5f2;
  --ink-2:   #b8aec2;
  --ink-3:   #978ca2;
  --rule:    #372c42;
  --rule-2:  #251d2d;

  --c-a: #ef86bf;
  --c-b: #45cfc2;
  --c-c: #b39cf5;
  --c-d: #e5c05a;
  --c-e: #ff8f5e;
  --c-warn: #fb7b6f;

  --fig-ink:   #e3dcea;
  --fig-soft:  #9a8fa6;
  --fig-faint: #3b3046;

  --tint: 20%;
  --tint-strong: 34%;
  --shadow: 0 1px 2px rgb(0 0 0 / 42%), 0 12px 34px -16px rgb(0 0 0 / 76%);

  --key-w: #cfc4d9;
  --key-b: #100c14;
}

/* --- site-specific roles -------------------------------------------------- */

/* Pitch, as a thing on a page. */
.fig-svg .note        { fill: color-mix(in oklab, var(--c-a) 62%, var(--paper)); stroke: var(--c-a); stroke-width: 1.4; }
.fig-svg .note-alt    { fill: color-mix(in oklab, var(--c-c) 62%, var(--paper)); stroke: var(--c-c); stroke-width: 1.4; }
.fig-svg .note-ghost  { fill: color-mix(in oklab, var(--fig-soft) 24%, var(--paper-2)); stroke: var(--fig-soft); stroke-width: 1.1; }
.fig-svg .partial     { stroke: var(--c-b); fill: none; stroke-width: 2; }
.fig-svg .partial-fill{ fill: color-mix(in oklab, var(--c-b) var(--tint-strong), var(--paper-2)); stroke: var(--c-b); stroke-width: 1.2; }
.fig-svg .fundamental { stroke: var(--c-a); fill: none; stroke-width: 2.6; }

/* The keyboard, which is the least ambiguous pitch display there is. */
.fig-svg .key-white   { fill: var(--key-w); stroke: var(--fig-ink); stroke-width: 1.1; }
.fig-svg .key-black   { fill: var(--key-b); stroke: var(--fig-ink); stroke-width: 1; }
.fig-svg .key-on      { fill: color-mix(in oklab, var(--c-a) 58%, var(--paper)); stroke: var(--c-a); stroke-width: 1.4; }
.fig-svg .key-on-alt  { fill: color-mix(in oklab, var(--c-c) 58%, var(--paper)); stroke: var(--c-c); stroke-width: 1.4; }

/* Staff notation, rendered at build time by VexFlow and re-coloured here so it
   follows the theme instead of arriving black on grey.

   The three classes are applied by the generator, which strips every paint
   attribute VexFlow emits. That stripping is load-bearing: a presentation
   attribute loses to any CSS rule, so a `fill="none"` left on a stave line
   would be overridden below and the line would fill into a solid black band. */
.fig-svg .notation .n-glyph { fill: var(--fig-ink); stroke: none; }
.fig-svg .notation .n-line  { fill: none; stroke: var(--fig-ink); }
.fig-svg .notation .n-staff { fill: none; stroke: var(--fig-soft); }

/* Measurement and discrepancy. */
.fig-svg .ratio       { stroke: var(--c-d); stroke-width: 1.6; }
.fig-svg .cents       { fill: var(--c-d); stroke: none; }
.fig-svg .beat        { stroke: var(--c-e); fill: none; stroke-width: 2.2; }
.fig-svg .beat-fill   { fill: color-mix(in oklab, var(--c-e) var(--tint), var(--paper-2)); stroke: var(--c-e); stroke-width: 1.2; }
.fig-svg .comma       { stroke: var(--c-e); stroke-width: 2.6; }
.fig-svg .just        { stroke: var(--c-b); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }

.fig-svg .comma-dot   { fill: var(--c-e); stroke: none; }
.fig-svg .axis        { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; }
.fig-svg text.mono    { font-family: var(--font-mono); }

/* Cycles: rhythm, the circle of fifths, anything periodic. */
.fig-svg .cycle       { fill: none; stroke: var(--fig-faint); stroke-width: 1.4; }
.fig-svg .onset       { fill: var(--c-a); stroke: none; }
.fig-svg .onset-off   { fill: none; stroke: var(--fig-faint); stroke-width: 1.4; }
.fig-svg .spoke       { stroke: var(--fig-faint); stroke-width: 1; }

/* Waves and rooms. */
.fig-svg .wave        { fill: none; stroke: var(--c-a); stroke-width: 2.2; }
.fig-svg .wave-alt    { fill: none; stroke: var(--c-c); stroke-width: 2; }
.fig-svg .envelope    { fill: none; stroke: var(--c-e); stroke-width: 1.6; stroke-dasharray: 6 4; }
.fig-svg .wall        { stroke: var(--fig-ink); stroke-width: 2.4; }
.fig-svg .node-line   { stroke: var(--c-e); stroke-width: 1.4; stroke-dasharray: 4 4; }

/* A hairline under section headings — a stave rule. */
.section-head::after { border-top-style: solid; }

/* --- the sound control ----------------------------------------------------
   Sound corroborates a figure and never carries it. The control therefore
   sits under the caption, is never automatic, and is invisible to a reader
   without JavaScript because the script inserts it. */

.sound-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0; }

.sound-btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  font: 600 0.82rem/1 var(--font-ui);
  color: var(--c-a);
  background: color-mix(in oklab, var(--c-a) 9%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--c-a) 34%, var(--paper));
  border-radius: 999px;
  padding: 0.45em 0.9em;
  cursor: pointer;
}
.sound-btn:hover  { background: color-mix(in oklab, var(--c-a) 16%, var(--paper)); }
.sound-btn:focus-visible { outline: 2px solid var(--c-a); outline-offset: 2px; }
.sound-btn[aria-pressed="true"] { background: color-mix(in oklab, var(--c-a) 26%, var(--paper)); }
.sound-btn__dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.sound-note { font: 0.78rem/1.4 var(--font-ui); color: var(--ink-3); }