/* =============================================================
   NSKU — shared theme tokens
   One palette, two grounds: warm paper and deep ink, with a
   single red doing all the pointing. Typefaces stay as they were:
   Space Grotesk for text, JetBrains Mono for anything technical.
   Loaded by the gallery, the lab and the SP-1 guide alike.
============================================================= */
:root {
  /* grounds and ink */
  --paper:      #f7f4ec;
  --paper-2:    #fffdf7;
  --paper-3:    #efeadd;
  --ink:        #1c1b18;
  --ink-2:      #4a4740;
  --ink-3:      #746f65;
  --line:       #ddd7c8;
  --line-strong: #b3ab98;
  --line-2:     #e9e4d7;

  /* the one red */
  --red:        #c43e2a;
  --red-soft:   #fbe9e4;

  /* supporting */
  --sage:       #e2e9e1;
  --sage-line:  #c6d3c5;
  --sage-ink:   #33513a;
  --amber:      #956512;
  --amber-soft: #fbf1dc;

  /* surfaces floating over the canvas */
  --scrim:      rgba(255, 253, 247, 0.82);
  --scrim-2:    rgba(255, 253, 247, 0.94);
  --halo:       0 0 3px #f7f4ec, 0 0 9px #f7f4ec, 0 0 22px rgba(247, 244, 236, .95);
  --vignette:   rgba(214, 206, 188, 0.55);

  --shadow:     0 1px 2px rgba(28, 27, 24, .04), 0 8px 24px -12px rgba(28, 27, 24, .16);
  --shadow-lg:  0 2px 6px rgba(28, 27, 24, .06), 0 24px 60px -24px rgba(28, 27, 24, .28);

  /* NSKU aliases — the gallery and lab still speak this language */
  --bg:    var(--paper);
  --fg:    var(--ink);
  --dim:   var(--ink-2);
  --faint: var(--line);
  --accent: var(--red);
  --hue:   var(--red);

  --radius:    14px;
  --radius-sm: 9px;
  --gutter: clamp(16px, 2.4vw, 32px);
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 94px;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --paper:      #16161a;
  --paper-2:    #1e1e23;
  --paper-3:    #26262c;
  --ink:        #f0ece2;
  --ink-2:      #bdb8ad;
  --ink-3:      #8b867c;
  --line:       #34343c;
  --line-strong: #56565f;
  --line-2:     #2b2b32;

  --red:        #ff6a4d;
  --red-soft:   #3a201a;

  --sage:       #1e2a22;
  --sage-line:  #34483a;
  --sage-ink:   #a8ccb1;
  --amber:      #e0a842;
  --amber-soft: #322715;

  --scrim:      rgba(22, 22, 26, 0.78);
  --scrim-2:    rgba(22, 22, 26, 0.92);
  --halo:       0 0 3px #16161a, 0 0 10px rgba(0, 0, 0, .9), 0 0 24px rgba(0, 0, 0, .8);
  --vignette:   rgba(0, 0, 0, 0.72);

  --shadow:     0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg:  0 2px 6px rgba(0, 0, 0, .4), 0 24px 60px -24px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* The canvas ground the WebGL renderer clears to, read by main.js. */
:root { --stage: #f7f4ec; }
:root[data-theme='dark'] { --stage: #16161a; }

/* ---- shared atoms ------------------------------------------ */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.85em; padding: .16em .5em;
  font-family: var(--mono); font-size: .8em; font-weight: 700; line-height: 1.45;
  background: var(--paper-3); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; color: var(--ink); white-space: nowrap;
}
.kbd--accent {
  background: var(--red-soft); color: var(--red);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
}

.theme-toggle {
  width: 33px; height: 33px; flex: none;
  display: inline-grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink-2); cursor: pointer; font-size: .95rem; line-height: 1;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.theme-toggle__sun { display: none; }
:root[data-theme='dark'] .theme-toggle__sun { display: block; }
:root[data-theme='dark'] .theme-toggle__moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- consent banner ---------------------------------------- */
.consent {
  position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 120;
  width: min(100% - (var(--gutter) * 2), 420px);
  display: grid; gap: 14px;
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--paper-2);
  box-shadow: var(--shadow-lg); color: var(--ink);
  font-family: var(--sans);
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.consent.is-up { opacity: 1; transform: none; }
.consent__title { margin: 0 0 .3rem; font-size: .92rem; font-weight: 600; }
.consent__text { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--ink-2); }
.consent__text a { color: var(--red); }
.consent__actions { display: flex; gap: 8px; }
.consent__btn {
  flex: 1; padding: 9px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper);
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--ink-2);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.consent__btn:hover { border-color: var(--ink-3); color: var(--ink); }
.consent__btn--yes { background: var(--red); border-color: var(--red); color: #fff; }
.consent__btn--yes:hover { color: #fff; border-color: var(--red); }
@media (max-width: 520px) { .consent { left: 8px; right: 8px; bottom: 8px; width: auto; } }

/* ---- the NSKU mark -----------------------------------------
   A red block hung from the top edge. Inside it, an arrangement seen
   straight on: five lanes, bar lines, note blocks and a playhead that
   is the page's own progress. Notes fill in behind it as you read.
------------------------------------------------------------- */
.mark-link {
  align-self: start;                 /* flush with the top edge, no gap */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 16px 14px;
  background: var(--red);
  border-radius: 0 0 14px 14px;
  text-decoration: none; line-height: 0;
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--red) 80%, transparent);
}
.mark { width: var(--mark-w, 84px); height: auto; display: block; overflow: visible; }
.mark path { vector-effect: non-scaling-stroke; }

/* the ground already covered */
.mark__wash { fill: rgba(255, 255, 255, .13); stroke: none; transition: d .12s linear; }

.mark__bars path  { fill: none; stroke: rgba(255, 255, 255, .3);  stroke-width: 1; }
.mark__lanes path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1; }

/* a note ahead of the playhead is held back; one behind it is solid */
.mark__note {
  fill: rgba(255, 255, 255, .34); stroke: none;
  transition: fill .18s var(--ease);
}
.mark__note.is-live   { fill: rgba(255, 255, 255, .72); }
.mark__note.is-played { fill: #fff; }

.mark__head { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.mark__dot  { fill: #fff; }

.mark-link:hover { filter: brightness(1.07); }

/* On a phone the header has no room for it, so the block moves to the bottom
   left corner and stays there. --mark-bottom lifts it clear of any bottom bar. */
@media (max-width: 899px) {
  /* A blurred ancestor becomes the containing block for a fixed child, which
     would pin the dock to the header instead of the viewport. Headers go solid
     on phones so the corner is the corner. The page stylesheets load after this
     one and set the blur themselves, so this has to outrank them. */
  .hd, .lhd, .topbar {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: var(--paper);
  }
  .mark-link {
    position: fixed; left: 0; bottom: var(--mark-bottom, 0px); z-index: 70;
    margin: 0; padding: 9px 14px 9px 12px;
    border-radius: 0 14px 14px 0;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35);
  }
  .mark { width: var(--mark-w-sm, 64px); }

  /* With the mark docked, the centre column is empty and the page actions end
     up floating in the middle of the bar. Two columns instead: one thing at
     the left edge, one at the right. Compounded selectors, because the page
     stylesheets set these columns and load after this file. */
  .hud.hud--top, .hd .hd__bar, .lhd .lhd__bar { grid-template-columns: 1fr auto; }
  .hud--top .hud__right, .hd .hd__right, .lhd .lhd__legal { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .mark__note, .mark__wash { transition: none; }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- skip link --------------------------------------------- */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: 9px;
  background: var(--red); color: #fff; font-family: var(--sans);
  font-size: .88rem; font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: 8px; }

/* ---- navigation ---------------------------------------------
   One menu button, one full-page panel, at every width. The panel
   is grouped by discipline: the grouping is the positioning.
------------------------------------------------------------- */
.nav { justify-self: start; }

.nav__btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 13px 0 11px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--paper-2); color: var(--ink-2);
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.nav__btn:hover { border-color: var(--red); color: var(--red); }
.nav__bars { display: grid; gap: 3px; width: 14px; }
.nav__bars i { display: block; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .22s var(--ease), opacity .18s var(--ease); }
.nav__btn[aria-expanded='true'] { border-color: var(--red); color: var(--red); }
.nav__btn[aria-expanded='true'] .nav__bars i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__btn[aria-expanded='true'] .nav__bars i:nth-child(2) { opacity: 0; }
.nav__btn[aria-expanded='true'] .nav__bars i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

html.nav-open, html.nav-open body { overflow: hidden; }

.nav__panel {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; justify-content: center; gap: 2.4rem;
  padding: clamp(84px, 12vh, 140px) clamp(20px, 6vw, 72px) clamp(28px, 6vh, 64px);
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav__panel.is-open { opacity: 1; visibility: visible; transform: none; }

.nav__eyebrow {
  position: absolute; top: clamp(20px, 2.9vh, 32px); left: clamp(16px, 5vw, 60px);
  margin: 0; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 599px) { .nav__eyebrow { display: none; } }

.nav__close {
  position: absolute; top: clamp(14px, 2.4vh, 26px); right: clamp(16px, 5vw, 60px);
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 13px 0 11px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--paper-2); color: var(--ink-2);
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.nav__close:hover { border-color: var(--red); color: var(--red); }
.nav__x { position: relative; width: 12px; height: 12px; }
.nav__x i { position: absolute; top: 5px; left: 0; width: 12px; height: 1.5px; background: currentColor; border-radius: 1px; }
.nav__x i:first-child { transform: rotate(45deg); }
.nav__x i:last-child { transform: rotate(-45deg); }

.nav__grid {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  width: min(100%, 1180px); margin-inline: auto;
}
.nav__group { display: grid; align-content: start; gap: 4px; }
.nav__title {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
  margin: 0;
}
.nav__lede { margin: 0 0 .9rem; color: var(--ink-3); font-size: .86rem; }

.nav__link {
  display: grid; gap: 1px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid transparent;
  text-decoration: none; color: var(--ink);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.nav__link:hover { background: var(--paper-2); border-color: var(--line); transform: translateX(2px); }
.nav__kind {
  font-family: var(--mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.nav__label { font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.nav__note { font-size: .86rem; color: var(--ink-3); }
.nav__link.is-here { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.nav__link.is-here .nav__label { color: var(--red); }
.nav__link.is-here .nav__kind { color: color-mix(in srgb, var(--red) 75%, var(--ink-3)); }

.nav__foot {
  width: min(100%, 1180px); margin: 0 auto;
  padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.nav__foot a { color: var(--red); }

@media (max-width: 899px) {
  .nav__panel { justify-content: flex-start; gap: 1.6rem; padding-top: 92px; }
  .nav__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .nav__link { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__panel { transition: none; }
  .nav__bars i { transition: none; }
}