@charset "UTF-8";
/* =========================================================================
   Sonor.ro — design system
   Palette taken from the logo: navy ground, blue→purple→orange pick gradient.
   Light is the base; dark overrides only the tokens.
   ========================================================================= */

:root {
  /* --- brand ---------------------------------------------------------------
     --brand-* are the logo's own colours. They belong on gradients, marks and
     large type. For text and links use --accent and --brand-orange-ink: the
     same hues, darkened until they pass contrast on paper white. */
  --brand-blue:    #2b7fff;
  --brand-purple:  #7c4dff;
  --brand-orange:  #ff6a1a;
  --brand-red:     #e8341f;
  --brand-navy:    #0b1533;
  --brand-gradient: linear-gradient(120deg, var(--brand-blue), var(--brand-purple) 45%, var(--brand-orange));
  --brand-blue-ink:   #1f63d6;
  /* #d1550f only reached 4.19 on white and 3.87 on --bg-sunken, so it did not
     actually keep the promise above; this value clears 4.5 on both. */
  --brand-orange-ink: #b8480c;
  /* „Descoperă” reads in purple. The raw --brand-purple manages 4.81 on white
     but only 4.45 on --bg-sunken, so it gets an ink of its own like the other
     two — same hue, dark enough to read on either surface. */
  --brand-purple-ink: #6a3fe0;

  /* Fundalurile stinse ale celor două cerneli, pentru pastilele meniului.
     Măsurate cu cerneala lor: portocaliu 4.72:1, mov 5.40:1. */
  --brand-orange-soft: #fff0e6;
  --brand-purple-soft: #f1ecff;

  /* the gold of the logo wall — the caiet's own colour, see the songbook block.
     #96702a gave the chord chips only 4.12:1 on --gold-soft; darkened until
     that pair passes. The two places gold is a border on the dark caiet head
     go from 4.28:1 to 3.69:1, still clear of the 3:1 an outline needs. */
  --gold:      #8a6626;
  --gold-soft: #faf4e6;
  --gold-line: #e6d5ab;

  /* surfaces */
  --bg:          #ffffff;
  --bg-sunken:   #f4f6fb;
  --bg-raised:   #ffffff;
  --bg-inverse:  #0b1533;

  /* the ground under scanned figures — black ink on paper, see .media--img */
  --bg-plate:    #f4f6fb;

  /* text */
  --text:        #16203c;
  --text-muted:  #5b678a;
  /* --text-faint is NOT for reading. It sits at ~3.1:1 on paper white, which
     clears the 3:1 asked of icons, rules and borders but not the 4.5:1 that
     text needs. Anything a visitor has to read takes --text-muted, even when
     it is small print — see the footer, the breadcrumb and the card meta. */
  --text-faint:  #8892ad;
  --text-invert: #f6f8fd;

  /* lines */
  --line:        #dde3f0;
  --line-strong: #c3cce0;

  /* accents in context */
  --accent:      #1f63d6;
  --accent-soft: #eaf1ff;
  /* --ok is ink on --ok-soft in every place it is used, and #0f8a5f only made
     3.9 against that ground. Darkened until the pair passes. */
  --ok:          #0c7150;
  --ok-soft:     #e6f6ef;

  /* „în pregătire” — a section that exists as a promise, not as a link */
  --soon:        #7a6a44;
  --soon-soft:   #f3f0e6;

  /* shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(11 21 51 / .06), 0 2px 8px rgb(11 21 51 / .05);
  --shadow-md: 0 4px 12px rgb(11 21 51 / .08), 0 12px 32px rgb(11 21 51 / .07);
  --shadow-lg: 0 18px 44px rgb(0 0 0 / .45);

  /* --- spacing -------------------------------------------------------------
     One scale for every gap and pad. Sections keep --section-y, which breathes
     with the viewport; everything inside them steps through --s-*. */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* rhythm */
  --wrap: 1180px;
  --wrap-narrow: 720px;
  --gap: clamp(1rem, .6rem + 1.6vw, 1.75rem);
  --section-y: clamp(3rem, 2rem + 5vw, 5.5rem);

  /* --- type ----------------------------------------------------------------
     The scale is declared here and used by the headings below, so a change of
     rhythm is one edit rather than a hunt through the file. */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --t-xs:   .8rem;
  --t-sm:   .9rem;
  --t-md:   1rem;
  --t-lg:   1.125rem;
  --t-body: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --t-h3:   clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --t-h2:   clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  --t-h1:   clamp(1.9rem, 1.4rem + 2.4vw, 3rem);

  --leading-tight: 1.2;
  --leading:       1.65;
  --tracking-label: .1em;   /* uppercase eyebrows and footer headings */

  /* --- motion --------------------------------------------------------------
     Deliberately plain for now: every transition in the file already used
     `ease`, and the token exists so the curve can be refined in one place. */
  --dur-1: .12s;
  --dur-2: .16s;
  --dur-3: .22s;
  --ease: ease;

  color-scheme: light;
}

/* --- dark: system preference, unless the visitor picked light explicitly --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0b1533;
    --bg-sunken:   #08102a;
    --bg-raised:   #121e42;
    --bg-inverse:  #060c20;
    --bg-plate:    #e7ecf7;
    --text:        #e9eefc;
    --text-muted:  #a3b0d4;
    --text-faint:  #7b88ae;
    --text-invert: #f6f8fd;
    --line:        #22305c;
    --line-strong: #33436f;
    --accent:      #6fa5ff;
    --accent-soft: #16244d;
    --brand-blue-ink:   #6fa5ff;
    --brand-orange-ink: #ff9153;
    --brand-purple-ink: #a98bff;
    --brand-orange-soft: #33200f;
    --brand-purple-soft: #221545;
    --gold:      #e2bd76;
    --gold-soft: #1a1509;
    --gold-line: #3d3418;
    --ok:          #4bd6a0;
    --ok-soft:     #102c22;
    --soon:        #cbb57f;
    --soon-soft:   #1d1a10;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .25);
    --shadow-md: 0 4px 12px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .3);
    --shadow-lg: 0 18px 44px rgb(0 0 0 / .45);
    color-scheme: dark;
  }
}
/* --- dark: explicit choice wins in both directions --- */
:root[data-theme="dark"] {
  --bg:          #0b1533;
  --bg-sunken:   #08102a;
  --bg-raised:   #121e42;
  --bg-inverse:  #060c20;
  --bg-plate:    #e7ecf7;
  --text:        #e9eefc;
  --text-muted:  #a3b0d4;
  --text-faint:  #7b88ae;
  --text-invert: #f6f8fd;
  --line:        #22305c;
  --line-strong: #33436f;
  --accent:      #6fa5ff;
  --accent-soft: #16244d;
  --brand-blue-ink:   #6fa5ff;
  --brand-orange-ink: #ff9153;
  --brand-purple-ink: #a98bff;
  --brand-orange-soft: #33200f;
  --brand-purple-soft: #221545;
  --gold:      #e2bd76;
  --gold-soft: #1a1509;
  --gold-line: #3d3418;
  --ok:          #4bd6a0;
  --ok-soft:     #102c22;
  --soon:        #cbb57f;
  --soon-soft:   #1d1a10;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .25);
  --shadow-md: 0 4px 12px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .3);
  --shadow-lg: 0 18px 44px rgb(0 0 0 / .55);
  color-scheme: dark;
}

/* ============================== base ==================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* The page is a column: header, main, footer. `main` takes the slack so the
   footer sits at the bottom of the window on short pages (404) instead of
   floating in the middle of it. */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4 { line-height: var(--leading-tight); margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p  { margin: 0 0 1em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.visually-hidden {
  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: absolute; left: 50%; translate: -50% -120%;
  z-index: 999; padding: .7rem 1.2rem;
  background: var(--brand-navy); color: #fff; border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none; transition: translate .16s ease;
}
.skip-link:focus { translate: -50% 0; }

/* ============================== buttons ================================= */

.btn {
  --btn-bg: var(--brand-navy);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.4rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand-gradient); color: #fff; }
.btn--ghost {
  background: transparent; color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--bg-sunken); }

/* ghost button standing on a dark photo, not on the page background */
.btn--onDark,
.hero .btn--ghost {
  background: rgb(255 255 255 / .08); color: #fff;
  border-color: rgb(255 255 255 / .38);
}
.btn--onDark:hover,
.hero .btn--ghost:hover { background: rgb(255 255 255 / .16); }

.btn--done {
  background: var(--bg-raised); color: var(--text); border-color: var(--line-strong);
}
.btn--done svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.btn--done[aria-pressed="true"] { background: var(--ok-soft); color: var(--ok); border-color: currentColor; }

.link-btn {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--text-muted); text-decoration: underline; cursor: pointer;
}
.link-btn:hover { color: var(--text); }

.chip {
  padding: .4rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--text-muted);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.chip:hover { color: var(--text); border-color: var(--text-faint); }
.chip.is-active { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
/* On dark the active chip keeps the brand blue, but white on it is only
   3.76:1. Navy ink on the same blue reads 4.77:1 and stays in the palette. */
:root[data-theme="dark"] .chip.is-active {
  background: var(--brand-blue); border-color: var(--brand-blue); color: var(--brand-navy);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip.is-active {
    background: var(--brand-blue); border-color: var(--brand-blue); color: var(--brand-navy);
  }
}

/* ============================== logo ==================================== */

.logo { display: inline-flex; align-items: center; gap: .45rem; }
.logo__mark { width: 58px; height: auto; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.logo__name {
  font-size: 1.3rem; font-weight: 800; letter-spacing: .02em; color: var(--text);
}
/* the ink token, not the raw logo orange: .RO is set at 21px/800, and the raw
   orange only reached 2.87:1 on white — under the 3:1 large text needs. */
.logo__tld { color: var(--brand-orange-ink); }
.logo__tagline {
  font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; margin-top: .18rem;
}
@media (max-width: 420px) { .logo__tagline { display: none; } }
/* În antet, între 1025 și 1200px, sloganul de sub siglă e primul care cedează:
   cu el, rândul de pastile îl împinge pe două-trei rânduri și antetul se
   umflă. Se ascunde doar în antet — în subsol sigla rămâne cu slogan cu tot. */
@media (max-width: 1200px) { .site-header .logo__tagline { display: none; } }

/* ============================== header ================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px;
}
.site-header__brand { text-decoration: none; margin-right: auto; }

/* The right-hand rail. Today it holds only the theme switch; account, cart and
   a global search slot in here when they exist, without moving the nav. */
.site-header__actions {
  display: flex; align-items: center; gap: var(--s-2);
  flex: none;
}

.site-nav { display: flex; align-items: center; gap: .35rem; }
.site-nav__list {
  display: flex; align-items: center; gap: .3rem;
  list-style: none; margin: 0; padding: 0;
}

/* --- pastilele meniului ---------------------------------------------------
   Forma și iconițele vin din setul de butoane desenat de el în august 2026.
   Ce s-a schimbat față de desen: butoanele nu mai sunt negre. Un rând de șase
   pastile negre în capul unei pagini albe arăta ca o bară de unelte, nu ca un
   curs de chitară — așa că fiecare și-a primit tonul ei.

   Un ton = două culori: --tone-ink (text, iconiță, margine la trecerea
   mouse-ului) și --tone-soft (fundalul). Perechile sunt luate dintre cele care
   au trecut deja proba de contrast, nu compuse pe loc; dacă adaugi un ton nou,
   măsoară-l cu _tools\check-a11y.ps1 înainte.
--------------------------------------------------------------------------- */
.nav-pill {
  --tone-ink: var(--text);
  --tone-soft: var(--bg-sunken);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: var(--r-pill);
  background: var(--tone-soft); border: 1px solid transparent;
  color: var(--tone-ink); text-decoration: none; font-weight: 700;
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.nav-pill:hover { transform: translateY(-1px); border-color: currentColor; box-shadow: var(--shadow-sm); }
.nav-pill:active { transform: translateY(0); }
/* iconițele iau culoarea pastilei prin currentColor — vezi partials/nav-icons.php */
.nav-pill__ic { width: 18px; height: 18px; flex: none; }

.nav-pill[data-tone="blue"]   { --tone-ink: var(--accent);           --tone-soft: var(--accent-soft); }
.nav-pill[data-tone="orange"] { --tone-ink: var(--brand-orange-ink); --tone-soft: var(--brand-orange-soft); }
.nav-pill[data-tone="gold"]   { --tone-ink: var(--gold);             --tone-soft: var(--gold-soft); }
.nav-pill[data-tone="purple"] { --tone-ink: var(--brand-purple-ink); --tone-soft: var(--brand-purple-soft); }
.nav-pill[data-tone="slate"]  { --tone-ink: var(--text);             --tone-soft: var(--bg-sunken); }
/* Pe tema închisă --bg-sunken e mai întunecat decât bara și decât sertarul, așa
   că pastila fără culoare dispărea cu totul; ridicată pe --bg-raised, se vede
   că e pastilă. */
:root[data-theme="dark"] .nav-pill[data-tone="slate"] { --tone-soft: var(--bg-raised); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-pill[data-tone="slate"] { --tone-soft: var(--bg-raised); }
}

/* Unde ești acum: pastila se umple cu tonul ei. Pe tema deschisă cernelurile
   sunt închise, deci scrisul e alb; pe cea închisă sunt deschise, deci scrisul
   e bleumarin — aceeași socoteală ca la .chip.is-active. */
.nav-pill[aria-current="page"] {
  background: var(--tone-ink); color: #fff; border-color: transparent;
}
:root[data-theme="dark"] .nav-pill[aria-current="page"] { color: var(--brand-navy); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-pill[aria-current="page"] { color: var(--brand-navy); }
}

/* spriteul de iconițe nu se vede niciodată; e doar magazia de desene */
.nav-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Singura intrare din meniu care e buton: puzzle-ul. Selectoarele pornesc de la
   .site-nav__list fiindcă regulile de link de mai sus sunt mai tari decât o
   singură clasă și i-ar lua fundalul și culoarea. Haloul pornește o dată, de
   trei ori, și se oprește: un antet lipit de ecran care pulsează la nesfârșit
   devine obositor. */
.site-nav__cta { display: flex; margin-left: .35rem; }
.site-nav__list .nav-cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem; border-radius: var(--r-pill);
  background: var(--brand-gradient); color: #fff;
  text-decoration: none; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgb(43 127 255 / .3);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
              filter var(--dur-2) var(--ease);
}
.site-nav__list .nav-cta:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: var(--shadow-md); }
.site-nav__list .nav-cta:active { transform: translateY(0); }
.nav-cta__tag {
  padding: .1rem .4rem; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .24);
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.site-nav__list .nav-cta::before {
  content: ""; position: absolute; inset: -3px; z-index: -1;
  border-radius: inherit; border: 2px solid var(--brand-blue);
  opacity: 0; animation: nav-cta-halo 2.6s var(--ease) 3;
}
@keyframes nav-cta-halo {
  0%        { opacity: .5; scale: 1; }
  60%, 100% { opacity: 0;  scale: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__list .nav-cta::before { animation: none; }
  .site-nav__list .nav-cta:hover { transform: none; }
}

.theme-toggle {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid var(--line); border-radius: 50%;
  color: var(--text-muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.theme-toggle svg {
  grid-area: 1 / 1; width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: block; }
}

.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  padding: .5rem .8rem; background: transparent;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; }
.nav-toggle__bars i { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

/* Sub 400px cuvântul „Meniu” nu mai încape lângă siglă și butonul de temă —
   antetul ieșea cu 12px din ecran la 360px, dinainte de pastile. Rămân barele;
   numele nu se pierde, doar se ascunde de ochi, ca cititorul de ecran să-l
   spună mai departe. */
@media (max-width: 400px) {
  .nav-toggle__label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .nav-toggle { padding: .5rem .6rem; }
}

/* Pragul e 1080, nu 800: rândul de pastile plus butonul de puzzle nu mai încape
   sub atât. Măsurat cu _tools\viewport.ps1: la 1025 rândul iese cu 4px din
   ecran, la 1100 intră. Pragul e pus cu rezervă, nu la limita măsurată — pe alt
   calculator fontul iese altfel de lat și 4px se transformă în 30.
   Dacă se schimbă aici, se schimbă și în site.js (matchMedia). */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  /* Reading order stays brand → Meniu → menu → theme, which is what a keyboard
     walks; only the painted order swaps, so the theme switch sits left of the
     hamburger where the thumb expects it. */
  .site-header__brand   { order: 1; }
  .site-header__actions { order: 2; }
  .nav-toggle           { order: 3; }
  .site-nav {
    position: fixed; inset: 68px 0 auto;
    flex-direction: column; align-items: stretch; gap: .25rem;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    translate: 0 -130%; visibility: hidden;
    transition: translate var(--dur-3) var(--ease), visibility var(--dur-3);
  }
  .site-nav.is-open { translate: 0; visibility: visible; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: .4rem; }
  /* În sertar pastilele stau una sub alta, la mărime de deget. Se opresc la
     24rem ca pe tabletă să nu devină benzi colorate cât ecranul. */
  .site-nav__list li { display: flex; }
  .nav-pill {
    flex: 1; max-width: 24rem;
    padding: .7rem 1rem; font-size: 1.05rem; gap: .55rem;
  }
  .nav-pill__ic { width: 21px; height: 21px; }

  /* Pe telefon meniul e singurul loc unde se vede butonul, deci urcă în capul
     listei și ține toată lățimea sertarului. */
  .site-nav__cta { order: -1; margin: 0 0 .55rem; }
  /* pe telefon ține toată lățimea sertarului; pe tabletă se oprește la 24rem,
     altfel devine o bandă colorată de un metru */
  .site-nav__list .nav-cta {
    flex: 1; max-width: 24rem;
    justify-content: center; padding: .85rem 1rem; font-size: 1.05rem;
  }
}

/* ============================== hero ==================================== */

/* The hero is dark in both themes. Two layers under the text: the brand glows,
   and the golden wave from the logo photo as a horizon along the bottom edge.
   The wave is nearly black around the gold, so `screen` drops its background
   and leaves only the light — no seam against the navy. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 clamp(2.5rem, 2rem + 2.5vw, 3.75rem);
  background: var(--brand-navy);
  color: var(--text-invert);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(70ch 40ch at 10% -5%, rgb(43 127 255 / .30), transparent 70%),
    radial-gradient(60ch 34ch at 90% 5%, rgb(255 106 26 / .22), transparent 70%);
}
/* The wave is what closes the hero: it rises to just under the numbers, so the
   band ends on the brand's own horizon instead of on empty navy. */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; z-index: -1;
  height: clamp(170px, 24vw, 320px);
  background: url("/media/brand/unda.jpg") center bottom / cover no-repeat;
  mix-blend-mode: screen; opacity: .95;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%);
  mask-image: linear-gradient(to bottom, transparent, #000 42%);
}
.hero__inner {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 940px) { .hero__inner { grid-template-columns: 1.05fr .95fr; } }

.hero__eyebrow {
  display: inline-block; margin: 0 0 1rem;
  padding: .3rem .85rem; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .12); color: #ffd79a;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
}
.hero__title { margin-bottom: .5em; text-shadow: 0 2px 24px rgb(0 0 0 / .45); }
.hero__lead {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
  color: rgb(233 238 252 / .82); max-width: 46ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0 0; }

.hero__brand { display: grid; place-items: center; }
.hero__brand img {
  width: min(100%, 360px); height: auto;
  filter: drop-shadow(0 18px 40px rgb(0 0 0 / .55));
  animation: hero-float 7s ease-in-out infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__brand img { animation: none; }
}

/* ============================== stat strip ==============================
   The four numbers are the site's best argument, so they get a panel of their
   own at the foot of the hero rather than a line of small print. */

.stat-strip {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; padding: 0;
  list-style: none;
  background: rgb(255 255 255 / .16);
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 700px) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat {
  display: grid; gap: .1rem; align-content: start;
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: rgb(9 17 41 / .72);
}
.stat__icon { color: #e6c47f; margin-bottom: var(--s-2); }
.stat__icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.stat__value {
  font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.15rem); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--t-sm); color: rgb(233 238 252 / .68); }

/* ============================== home sections ===========================
   Learn / Sing / Discover / Create — the four verbs of the mark, in the order
   they happen. Anything without a page behind it is a plate, never a link.
   ====================================================================== */

.band__eyebrow {
  text-align: center; margin: 0 0 .4rem;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand-orange-ink);
}
.band__eyebrow--onDark { color: #e6c47f; }

/* --- „în pregătire”: the same badge everywhere it is used --- */
.tag-soon {
  /* a badge, not a bar: it must not stretch inside the flex and grid cards */
  display: inline-block; align-self: start; justify-self: start;
  margin: 0 0 var(--s-3);
  padding: .2rem .6rem; border-radius: var(--r-pill);
  background: var(--soon-soft); color: var(--soon);
  border: 1px solid currentColor;
  font-size: .7rem; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* --- instruments --- */
.learn-grid {
  display: grid; gap: var(--gap); margin-top: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  align-items: stretch;
}
@media (min-width: 900px) { .learn-grid { grid-template-columns: 1.5fr 1fr 1fr; } }

.learn-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-raised);
}
.learn-card__name { margin: 0; }
.learn-card__blurb { margin: 0; color: var(--text-muted); }

.learn-card--live {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    var(--brand-gradient) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-md);
}
.learn-card__facts {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  list-style: none; margin: 0; padding: 0;
}
.learn-card__facts li {
  padding: .25rem .7rem; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--t-sm); font-weight: 600;
}
.learn-card__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin: auto 0 0; padding-top: var(--s-2);
}

/* Stated as unavailable in three ways at once: the badge, the muted ground and
   the absence of anything to click. */
.learn-card--soon {
  background: var(--bg-sunken);
  border-style: dashed;
  color: var(--text-muted);
}
.learn-card--soon .learn-card__name { color: var(--text-muted); }

/* --- Cântă: the one dark room on the page, gold like the caiet --- */
.sing {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--section-y) 0;
  background: #120d05; color: var(--text-invert);
}
.sing::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/media/brand/fundal.jpg") center bottom / cover no-repeat;
  background-image: image-set(url("/media/brand/fundal.webp") type("image/webp"),
                              url("/media/brand/fundal.jpg")  type("image/jpeg"));
  opacity: .5;
}
.sing::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(170deg, rgb(11 8 3 / .9) 0%, rgb(11 8 3 / .82) 55%, rgb(11 8 3 / .92) 100%);
}
.sing__title { text-align: center; margin-bottom: .35em; text-shadow: 0 2px 18px rgb(0 0 0 / .5); }
.sing__lead {
  text-align: center; max-width: 62ch; margin-inline: auto;
  color: rgb(246 244 238 / .84);
}
.sing__grid {
  display: grid; gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 900px) { .sing__grid { grid-template-columns: 1fr 1fr; } }

.sing__sub {
  margin-bottom: var(--s-4);
  font-size: var(--t-lg); color: #f0d69a;
}
.sing__hint { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: rgb(246 244 238 / .66); }
.sing__actions { margin: var(--s-5) 0 0; }
.sing .chord-taster { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.sing .song-search { margin-top: 0; }

.btn--gold {
  flex: none;
  background: linear-gradient(120deg, #d8b76a, #b98f3c);
  color: #1a1204;
}
.btn--gold:hover { background: linear-gradient(120deg, #e6c884, #c79b45); }

/* --- Descoperă / Creează --- */
.two-up {
  display: grid; gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) { .two-up { grid-template-columns: 1fr 1fr; } }
.two-up .band__eyebrow { text-align: left; }
.two-up h2 { margin-bottom: .4em; }
.two-up__lead { color: var(--text-muted); max-width: 46ch; }

.read-card {
  padding: var(--s-5);
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.read-card h3 { margin-bottom: .35em; }
.read-card h3 a { color: inherit; text-decoration: none; }
.read-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.read-card p { margin: 0; color: var(--text-muted); }
.read-card__meta { margin-top: var(--s-3) !important; font-size: var(--t-sm); color: var(--text-muted); }

.soon-list { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.soon-list li {
  display: grid; gap: .2rem;
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.soon-list b { font-size: var(--t-lg); }
.soon-list span { color: var(--text-muted); font-size: var(--t-sm); }

/* The first of these that stopped being a promise. The dashed border and the
   gold badge say „nothing here yet”, so a tool that can actually be opened
   drops both: solid border, the accent badge, and a title that is a link —
   which is the whole rule of this page, that only real pages get linked. */
.soon-list li.is-testing {
  border-style: solid;
  border-color: var(--accent);
  background: var(--bg-raised);
}
.soon-list b a { color: inherit; text-decoration: none; }
.soon-list b a:hover { color: var(--accent); text-decoration: underline; }
.tag-soon--testing { background: var(--accent-soft); color: var(--accent); }

/* --- Despre Sonor --- */
.about-sonor {
  display: grid; gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) { .about-sonor { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.about-sonor .band__eyebrow { text-align: left; }
.about-sonor h2 { margin-bottom: .5em; }
.about-sonor__text p { color: var(--text-muted); max-width: 58ch; }

.verbs { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; counter-reset: verb; }
.verbs li {
  display: grid; gap: .15rem;
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid transparent;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background:
    linear-gradient(var(--bg-sunken), var(--bg-sunken)) padding-box,
    var(--brand-gradient) border-box;
}
.verbs b { font-size: var(--t-lg); }
.verbs span { color: var(--text-muted); font-size: var(--t-sm); }

.article__next {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line); color: var(--text-muted);
}

/* The chord taster is a sample, not the library: diagrams only, no photos. */
.chord-taster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem;
  margin-top: 2.5rem;
}
.chord-taster .chord-card__photo,
.chord-taster .chord-card__hint,
.chord-taster .chord-card__alias { display: none; }
@media (min-width: 560px) {
  .chord-taster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================== bands =================================== */

.band { padding: var(--section-y) 0; }
.band--alt { background: var(--bg-sunken); }
.band__title { text-align: center; margin-bottom: .35em; }
.band__lead { text-align: center; color: var(--text-muted); max-width: 60ch; margin-inline: auto; margin-bottom: 2.5rem; }
.band__cta { text-align: center; margin-top: 2.5rem; }

.feature-grid {
  display: grid; gap: var(--gap); margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.feature {
  padding: 1.6rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.feature__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem;
  border-radius: 12px; background: var(--brand-gradient); color: #fff;
}
.feature__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { margin-bottom: .35em; }
.feature p { margin: 0; color: var(--text-muted); font-size: .96rem; }

.module-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.module-list__item {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 1.4rem 1.6rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.module-list__num {
  flex: none; width: 40px; height: 40px; margin: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 800;
}
.module-list__item h3 { margin-bottom: .25em; }
.module-list__item h3 a { color: inherit; text-decoration: none; }
.module-list__item h3 a:hover { color: var(--accent); }
.module-list__item p { margin: 0; color: var(--text-muted); }
.module-list__count { font-size: .85rem; color: var(--text-muted); margin-top: .4rem !important; }

/* ============================== closing call ============================ */

/* A gradient, not flat navy: in dark mode the page ground is navy too, and a
   flat band would dissolve into it. */
.cta-pana {
  padding: var(--section-y) 0;
  background: linear-gradient(135deg, #0a1330 0%, #16224c 55%, #23163f 100%);
  border-top: 1px solid rgb(255 255 255 / .1);
  color: var(--text-invert);
}
.cta-pana__inner {
  display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr); align-items: center;
}
@media (min-width: 860px) { .cta-pana__inner { grid-template-columns: 1fr 1fr; } }

.cta-pana__img { margin: 0; }
.cta-pana__img img {
  width: 100%; height: auto; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.cta-pana__text h2 { margin-bottom: .4em; }
.cta-pana__text p { color: rgb(233 238 252 / .82); max-width: 52ch; }
.cta-pana__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ============================== page head =============================== */

.page-head {
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}
.page-head--tight { padding-bottom: 1.5rem; }
.page-head h1 { margin-bottom: .3em; }
.page-head__lead { color: var(--text-muted); max-width: 62ch; margin: 0; }
.page-head__symbol {
  font-family: var(--font-mono); color: var(--accent);
  background: var(--accent-soft); padding: .1em .35em; border-radius: var(--r-sm);
  font-size: .7em; vertical-align: middle;
}

.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .9rem; margin-bottom: 1rem; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* ============================== chord card ============================== */

.chord-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  margin: 1.75rem 0;
}
.hero__chords .chord-card { margin: 0; }

/* The card carries its own ink, not the section's: it is a light surface and it
   is dropped onto dark grounds too (the „Cântă” band on the home page). */
.chord-card {
  display: flex; flex-direction: column;
  padding: 1rem; background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.chord-card__head { margin-bottom: .75rem; }
.chord-card__name { margin: 0; font-size: 1rem; }
.chord-card__name a { text-decoration: none; color: inherit; }
.chord-card__name a:hover .chord-card__symbol { color: var(--accent); }
.chord-card__symbol {
  display: block; font-family: var(--font-mono);
  font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
}
.chord-card__ro { display: block; font-size: .85rem; font-weight: 500; color: var(--text-muted); }
.chord-card__alias { margin: .35rem 0 0; font-size: .78rem; color: var(--text-muted); }

.chord-card__body { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.chord-card--full .chord-card__body { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .chord-card--full .chord-card__body { grid-template-columns: 1fr 1fr; align-items: start; }
}

.chord-card__diagram { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.chord-diagram { width: 100%; max-width: 170px; height: auto; }
.chord-card--full .chord-diagram { max-width: 240px; }

.chord-diagram__nut    { stroke: var(--text); stroke-width: 4; }
.chord-diagram__fret   { stroke: var(--line-strong); stroke-width: 1.2; }
.chord-diagram__string { stroke: var(--line-strong); stroke-width: 1.2; }
.chord-diagram__open   { fill: none; stroke: var(--text-muted); stroke-width: 1.6; }
.chord-diagram__mute path { stroke: var(--text-faint); stroke-width: 1.8; stroke-linecap: round; }
.chord-diagram__barre  { fill: var(--text); opacity: .92; }
.chord-diagram__dot circle { fill: var(--text); }
.chord-diagram__dot text {
  fill: var(--bg-raised); font-size: 7px; font-weight: 700;
  text-anchor: middle; dominant-baseline: middle; font-family: var(--font-sans);
}
.chord-diagram__fretno {
  fill: var(--text-muted); font-size: 9px; font-weight: 700;
  text-anchor: start; dominant-baseline: middle; font-family: var(--font-sans);
}

.chord-play {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .9rem; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid transparent; font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.chord-play svg { width: 15px; height: 15px; fill: currentColor; }
.chord-play:hover { background: var(--accent); color: #fff; }
.chord-play.is-playing { background: var(--brand-gradient); color: #fff; }

.chord-card__photo { margin: 0; }
.chord-card__photo img {
  width: 100%; border-radius: var(--r-sm);
  border: 1px solid var(--line); object-fit: cover; aspect-ratio: 4 / 3;
}

.chord-card__meta {
  display: grid; gap: .5rem; margin: 1rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--line); font-size: .88rem;
}
.chord-card__meta > div { display: flex; gap: .5rem; }
.chord-card__meta dt { color: var(--text-muted); min-width: 5.5em; }
.chord-card__meta dd { margin: 0; font-weight: 600; }

.chord-card__hint {
  margin: .9rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--text-muted);
}

/* ===================== cross links: song <-> chord ======================
   Both directions come from the same generated map, and both are silent when
   the map has nothing to say about that song or chord.
   ====================================================================== */

.used-chords {
  margin: var(--s-7) 0 0; padding: var(--s-5) var(--s-5) var(--s-6);
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
}
.used-chords__title { margin-bottom: .2em; font-size: var(--t-lg); }
.used-chords__lead { margin: 0; color: var(--text-muted); font-size: var(--t-sm); }
.used-chords__list {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
}
.used-chords__list a {
  display: grid; gap: .1rem; min-width: 5.5rem;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-sm); text-decoration: none; color: var(--text);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.used-chords__list a:hover { border-color: var(--gold); transform: translateY(-1px); }
.used-chords__symbol { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; }
.used-chords__ro { font-size: var(--t-xs); color: var(--text-muted); }

.chord-songs { margin: var(--s-7) 0 var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.chord-songs__title { margin-bottom: .25em; }
.chord-songs__lead { color: var(--text-muted); max-width: 62ch; font-size: var(--t-sm); }
.chord-songs__list {
  display: grid; gap: .4rem var(--s-5); margin: var(--s-4) 0 0; padding: 0;
  list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.chord-songs__list a { color: var(--accent); text-decoration: none; }
.chord-songs__list a:hover { text-decoration: underline; }

/* the count under a card in the library */
.chord-slot__songs {
  display: block; margin-top: .5rem; text-align: center;
  font-size: var(--t-xs); color: var(--text-muted); text-decoration: none;
}
.chord-slot__songs:hover { color: var(--accent); text-decoration: underline; }

/* ============================== chord library =========================== */

.chord-filter { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin: var(--s-5) 0 var(--s-4); }
.chord-filter__search { position: relative; flex: 1 1 240px; }
.chord-filter__icon {
  position: absolute; left: 1rem; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; pointer-events: none;
  fill: none; stroke: var(--text-faint); stroke-width: 1.9; stroke-linecap: round;
}
.chord-filter__search input {
  width: 100%; padding: .7rem 1rem .7rem 2.7rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--bg-raised); color: var(--text); font: inherit;
  transition: border-color var(--dur-2) var(--ease);
}
.chord-filter__search input:focus { border-color: var(--accent); }
.chord-filter__chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.notation-note {
  margin: 1.25rem 0 0; padding: .9rem 1.1rem;
  background: var(--accent-soft); border-radius: var(--r-sm);
  font-size: .9rem; color: var(--text);
}

.chord-library { padding: var(--section-y) 0; }
.chord-level + .chord-level { margin-top: 3rem; }
.chord-level__head h2 { margin-bottom: .2em; }
.chord-level__head p { color: var(--text-muted); margin: 0; max-width: 62ch; }
.chord-library__empty { text-align: center; color: var(--text-muted); padding: 3rem 0; }

.chord-detail { display: grid; gap: var(--gap); padding: var(--section-y) 0; align-items: start; }
@media (min-width: 900px) { .chord-detail { grid-template-columns: 1.4fr 1fr; } }

.side-box {
  padding: 1.4rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.side-box + .side-box { margin-top: 1rem; }
.side-box h2 { font-size: 1.05rem; margin-bottom: .8em; }
.side-box__note { margin: 1rem 0 0; font-size: .88rem; color: var(--text-muted); }

.finger-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; font-size: .92rem; }
.finger-steps .is-open   { color: var(--text-muted); }
.finger-steps .is-muted  { color: var(--text-muted); }

.side-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.side-links--chips { display: flex; flex-wrap: wrap; }
.side-links--chips a {
  display: inline-block; padding: .35rem .8rem; border-radius: var(--r-pill);
  background: var(--bg-sunken); border: 1px solid var(--line);
  font-family: var(--font-mono); font-weight: 700; text-decoration: none; color: var(--text);
}
.side-links--chips a:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------- eyebrow ----
   The small uppercase label that sits above a heading. It was written out
   four times in this file; the course and lesson heads now share this one. */
/* --brand-orange-ink, not --brand-orange: the raw logo orange only reaches
   3:1 on paper white. The ink token is the same hue, darkened for light and
   lightened for dark, so it passes in both themes without a second rule. */
.eyebrow {
  margin: 0 0 .4rem; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand-orange-ink);
}

/* ============================== course index ============================ */

/* The head answers „what is this and where am I” before the list starts:
   the claim on the left, the visitor's own progress on the right. */
.course-hero {
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) 0 clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  background: var(--bg-sunken); border-bottom: 1px solid var(--line);
}
.course-hero__inner { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 900px) {
  .course-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: var(--s-7); }
}
.course-hero h1 { margin-bottom: .3em; }
.course-hero__lead { color: var(--text-muted); max-width: 58ch; margin: 0; }

.course-facts {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--t-sm); color: var(--text-muted);
}
.course-facts li {
  display: inline-flex; align-items: baseline; gap: .3rem;
  padding: .3rem .7rem; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--bg-raised);
}
.course-facts strong { font-weight: 800; color: var(--text); }
.course-facts__free { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-soft); font-weight: 700; }

.course-progress {
  padding: var(--s-5); background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.course-progress__label {
  margin: 0 0 .35rem; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.course-progress__count { margin: 0 0 .6rem; line-height: 1.1; }
.course-progress__count strong { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; }
.course-progress__of { color: var(--text-muted); font-size: var(--t-sm); }

.progress-bar {
  height: 10px; background: var(--line);
  border-radius: var(--r-pill); overflow: hidden;
}
.progress-bar > span {
  display: block; height: 100%; width: 0;
  background: var(--brand-gradient); transition: width var(--dur-3) var(--ease);
}
.course-progress__hint { margin: .6rem 0 var(--s-4); font-size: var(--t-sm); color: var(--text-muted); }
.course-progress__cta { width: 100%; justify-content: center; }
.course-progress__next { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--text-muted); }
.course-progress__reset { margin-top: var(--s-3); }

/* One anchor carries both labels; the panel's state decides which is shown,
   so nothing has to rewrite text at runtime. */
.course-progress__resume,
.course-progress__again { display: none; }
.course-progress.has-progress .course-progress__start { display: none; }
.course-progress.has-progress .course-progress__resume { display: inline; }
.course-progress.is-complete .course-progress__resume { display: none; }
.course-progress.is-complete .course-progress__again { display: inline; }

.course { padding: var(--s-7) 0 var(--section-y); }
.course-module + .course-module { margin-top: 3.25rem; }
.course-module__head { margin-bottom: 1.25rem; }
.course-module__blurb { color: var(--text-muted); margin: 0; max-width: 62ch; }

.lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.lesson-card {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.3rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.lesson-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .lesson-card:hover { transform: none; } }

/* The number and the tick occupy the same disc: a finished lesson swaps one
   for the other instead of growing a second badge. */
.lesson-card__index {
  flex: none; position: relative; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--bg-sunken); color: var(--text-muted);
  font-weight: 700; font-size: .9rem;
}
.lesson-card__tick { display: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lesson-card__text { flex: 1; min-width: 0; }
.lesson-card__title { display: block; font-weight: 700; font-size: 1.05rem; }
.lesson-card__summary { display: block; color: var(--text-muted); font-size: .92rem; margin-top: .2rem; }
/* --text-muted, not --text-faint: the minutes and the chord count are real
   information, and faint only reaches 3.1 on white at this size. */
.lesson-card__meta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; font-size: .82rem; color: var(--text-muted); }

.lesson-card__state { flex: none; align-self: center; }
.state {
  display: none; padding: .25rem .6rem; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
}
.state--done { background: var(--ok-soft); color: var(--ok); }
.state--next,
.state--start { background: var(--accent-soft); color: var(--accent); }

.lesson-list__item.is-done .lesson-card { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.lesson-list__item.is-done .lesson-card__index { background: var(--ok-soft); color: var(--ok); }
.lesson-list__item.is-done .lesson-card__num { display: none; }
.lesson-list__item.is-done .lesson-card__tick { display: block; }
.lesson-list__item.is-done .state--done { display: inline-block; }

.lesson-list__item.is-next .lesson-card { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.lesson-list__item.is-next .lesson-card__index { background: var(--accent-soft); color: var(--accent); }
.lesson-list__item.is-next .state--next { display: inline-block; }
/* nothing ticked yet, so the first lesson is a start rather than a resume */
.lesson-list__item.is-next.is-start .state--next { display: none; }
.lesson-list__item.is-next.is-start .state--start { display: inline-block; }

/* Below the card's own breakpoint the badge would squeeze the title, so it
   drops under the text instead of beside it. */
@media (max-width: 560px) {
  .lesson-card { flex-wrap: wrap; }
  .lesson-card__state { align-self: flex-start; width: 100%; padding-left: calc(34px + 1rem); }
}

/* ============================== lesson ================================== */

.lesson__head {
  padding: clamp(1.75rem, 1rem + 3vw, 3rem) 0 clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--bg-sunken); border-bottom: 1px solid var(--line);
}

/* „where am I” — the same for everyone, so it is drawn on the server and
   never touched by script. The bar is position in the course, not progress. */
.lesson__place { margin-bottom: var(--s-4); }
.lesson__place .eyebrow { margin-bottom: .35rem; }
.progress-bar--thin { height: 4px; max-width: 340px; }

.lesson__summary { color: var(--text-muted); max-width: 62ch; font-size: var(--t-lg); }
.lesson__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5);
  margin: 0; font-size: var(--t-sm); color: var(--text-muted);
}

/* only once the visitor has ticked this lesson */
.lesson__badge {
  display: none; padding: .2rem .6rem; border-radius: var(--r-pill);
  background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: var(--t-xs);
}
.lesson.is-done .lesson__badge { display: inline-block; }

.lesson-chords { margin-top: var(--gap); }
.lesson-chords__title { font-size: var(--t-h3); margin-bottom: .15em; }
.lesson-chords__hint { margin: 0; color: var(--text-muted); font-size: var(--t-sm); }

/* Ticking the lesson is the one action on the page, so it gets a panel of its
   own rather than a button loose under the last paragraph. */
.lesson__done {
  margin: var(--s-7) 0 var(--s-6); padding: var(--s-5);
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5);
  justify-content: space-between;
}
.lesson__done-text { margin: 0; color: var(--text-muted); font-size: var(--t-sm); max-width: 40ch; }
.lesson.is-done .lesson__done {
  background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
}

.lesson-nav {
  display: grid; gap: 1rem; margin: 0 0 var(--section-y);
  grid-template-columns: 1fr;
}
/* the placeholder only has to hold a column open, and only once there are two */
.lesson-nav__slot { display: none; }
@media (min-width: 700px) {
  .lesson-nav { grid-template-columns: 1fr 1fr; }
  .lesson-nav__slot { display: block; }
}
.lesson-nav__link {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.1rem 1.3rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-2) var(--ease);
}
.lesson-nav__link:hover { border-color: var(--accent); }
.lesson-nav__link--next { text-align: right; }
.lesson-nav__link--finish { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lesson-nav__dir { font-size: var(--t-xs); color: var(--text-muted); font-weight: 600; }
.lesson-nav__title { font-weight: 700; }

/* ============================== despre ================================== */
/* The colophon. It is the quiet page of the site: no zone colour of its own,
   no cards, no grid — one photograph and text that is well set. */

.about { padding: var(--s-7) 0 var(--section-y); }
.about > section + section,
.about > section + .prose,
.about > .prose + section,
.about > .prose + aside,
.about > section + aside { margin-top: var(--s-8); }

.about__story { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 860px) {
  .about__story { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-7); }
}
.about__story-text > h2 { margin-bottom: .5em; }
.about__story-text p { color: var(--text-muted); max-width: 60ch; }
.about__story-text p + p { margin-top: 1em; }
.about__photo { margin: 0; }
.about__photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}

.about__lead { color: var(--text-muted); max-width: 62ch; }
.about__verbs-block > h2,
.about__facts > h2 { margin-bottom: .4em; }

.fact-list { margin: var(--s-4) 0 0; padding-left: 1.4rem; max-width: 68ch; color: var(--text-muted); }
.fact-list li { margin-bottom: .5em; }
.fact-list strong { color: var(--text); }

/* The prose block sits inside this page's own rhythm, so it drops the padding
   .prose--narrow carries for standalone articles — otherwise the gap around it
   is that padding plus the --s-8 margin, twice every other gap on the page.
   Selected through .about because .prose--narrow is declared further down the
   sheet at equal specificity and would otherwise win on source order. */
.about > .about__prose { padding-block: 0; margin-inline: 0; }

/* The author. A person, not a résumé: the name and the instrument sit in a
   column of their own, the text keeps prose measure beside them. There is no
   photograph of him in the project, so this is built to look finished without
   one — the rule above the block is what gives the section its edge. */
.about__author {
  display: grid; gap: var(--s-5);
  padding-top: var(--s-6); border-top: 1px solid var(--line);
}
@media (min-width: 860px) {
  .about__author { grid-template-columns: minmax(0, .3fr) minmax(0, .7fr); gap: var(--s-7); }
  .about__author-id { align-self: start; }
}
.about__author-id h2 { margin: 0; }
.about__author-role {
  margin: .35rem 0 0; color: var(--text-muted);
  font-size: var(--t-lg);
}
.about__author-text > p { color: var(--text-muted); max-width: 62ch; }
.about__author-text > p + p { margin-top: 1em; }

.about__cta {
  padding: var(--s-6);
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.about__cta h2 { margin: 0 0 .5em; }
.about__cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }

/* ============================== descoperă =============================== */
/* The editorial zone. It belongs to the same system as the rest — same tokens,
   same rhythm — but it reads in purple where „Învață” reads in blue and the
   caiet reads in gold, and it is the one place that leads with a photograph. */

.page-head--discover { border-bottom-color: color-mix(in srgb, var(--brand-purple) 30%, var(--line)); }
.page-head--discover .eyebrow { color: var(--brand-purple-ink); }

.discover { padding: var(--s-7) 0 var(--section-y); }

/* One article, given the whole width. A grid with a single cell in it would
   only advertise the cells that are missing. */
.feature {
  position: relative;
  display: grid; gap: var(--s-5);
  background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.feature:hover { border-color: var(--brand-purple); box-shadow: var(--shadow-md); }
/* the title's link covers the card, so the photo is clickable without being a
   second link to the same article */
.feature__title a::after { content: ""; position: absolute; inset: 0; }
.feature:focus-within { outline: 2px solid var(--brand-purple-ink); outline-offset: 2px; }
@media (min-width: 800px) {
  .feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
}
.feature__media { display: block; margin: 0; }
.feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2.4 / 1; }
@media (min-width: 800px) { .feature__media img { aspect-ratio: auto; min-height: 260px; } }

.feature__text { padding: var(--s-5) var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 800px) { .feature__text { padding: var(--s-6); justify-content: center; } }
.feature__topic {
  margin: 0; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand-purple-ink);
}
.feature__title { margin: 0; font-size: var(--t-h2); line-height: var(--leading-tight); }
.feature__title a { color: inherit; text-decoration: none; }
.feature__title a:hover { color: var(--brand-purple-ink); text-decoration: underline; }
.feature__lead { margin: 0; color: var(--text-muted); }
.feature__meta { margin: 0; font-size: var(--t-sm); color: var(--text-muted); }

.discover__note {
  margin: var(--s-6) 0 0; max-width: 62ch;
  color: var(--text-muted); font-size: var(--t-sm);
  padding-left: var(--s-4); border-left: 3px solid color-mix(in srgb, var(--brand-purple) 45%, var(--line));
}

/* ------------------------------------------------------------- article ---- */

/* The photograph carries the title. --brand-navy sits under it as a real
   background colour, so the hero still reads if the image never arrives — and
   so the contrast of the white text can actually be measured. */
.article__hero {
  position: relative; isolation: isolate;
  background: var(--brand-navy); color: #fff;
}
.article__hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.article__hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
              rgb(11 21 51 / .30) 0%,
              rgb(11 21 51 / .62) 45%,
              rgb(11 21 51 / .88) 100%);
}
.article__hero-body {
  display: flex; align-items: flex-end;
  min-height: clamp(300px, 34vw, 460px);
  padding: var(--s-7) 0 var(--s-5);
}
.article__hero h1 { margin: .1em 0 .25em; color: #fff; }
.article__lead { margin: 0 0 var(--s-3); max-width: 56ch; color: rgb(255 255 255 / .88); font-size: var(--t-lg); }
.article__meta { margin: 0; font-size: var(--t-sm); color: rgb(255 255 255 / .78); }

.breadcrumb--onDark { color: rgb(255 255 255 / .78); }
.breadcrumb--onDark a { color: rgb(255 255 255 / .88); }
.breadcrumb--onDark a:hover { color: #fff; }
.eyebrow--onDark { color: #d9c6ff; }

/* An article is read down one column, so the column sits in the middle of the
   page rather than against the left edge with half the width left empty. The
   hero text uses the same measure, so the title starts where the body starts. */
.article__measure > * { max-width: 68ch; margin-inline: auto; }
.prose--article { max-width: 68ch; margin-inline: auto; padding-block: var(--section-y) 0; }

/* The kinds of guitar are the article's landmarks, so they get a mark rather
   than just more bold text. */
.prose--article > h3 {
  margin-top: 2.2em; padding-top: .6em;
  border-top: 2px solid color-mix(in srgb, var(--brand-purple) 40%, var(--line));
  color: var(--brand-purple-ink);
}
.prose--article > h2 { margin-top: 2em; }

.article__onward {
  max-width: 68ch; margin: var(--s-7) auto var(--section-y);
  padding: var(--s-6);
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.article__onward-eyebrow {
  margin: 0 0 .3rem; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand-purple-ink);
}
.article__onward h2 { margin: 0 0 .4em; }
.article__onward p { color: var(--text-muted); margin: 0; }
.article__onward-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5) !important; }

/* ============================== prose =================================== */

.prose { max-width: 72ch; padding: var(--gap) 0 0; }
.prose--narrow { max-width: 68ch; padding-block: var(--section-y); }
.prose > h2 { margin-top: 2em; }
.prose > h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .35em; }
.prose strong { font-weight: 700; }

.prose .media { margin: 2rem 0; }
/* height:auto is what lets the width/height attributes on the element decide
   the box's shape. It matters for the videos: they load with preload="none",
   so the browser has no metadata to measure them by until you press play, and
   without this the box would size itself wrong and then jump. */
.prose .media--img img,
.prose .media--video video {
  width: 100%; height: auto;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--bg-sunken);
}
/* The figures scanned out of the caiet — chord charts, ritm notation, tab
   snippets — are black ink on a transparent ground, so on the dark theme they
   need a light plate under them or the ink vanishes into the page. Photos are
   opaque and cover the plate, so they look identical in both themes. */
.prose .media--img img { background: var(--bg-plate); }
.prose .media--audio audio { width: 100%; }
.prose figcaption {
  margin-top: .6rem; font-size: .86rem; color: var(--text-muted); text-align: center;
}

/* The note- and rest-value tables in "Câteva noţiuni de teorie" are drawn here
   instead of scanned, so they stay sharp at any width and follow the theme: the
   ink is currentColor, the plate and the beat grid come off the same tokens as
   the rest of the page, and the plate hack above never applies to them.
   A drawing scales with its box, so on a phone the row labels would shrink past
   reading size. The min-width holds them legible and the figure scrolls sideways
   below that, the same way a TAB or an exercise does. */
.prose .media--figure .media__scroll { overflow-x: auto; }
.prose .media--figure svg { display: block; width: 100%; min-width: 520px; height: auto; }
.notevalues .nv-panel { fill: var(--bg-sunken); stroke: var(--line); }
.notevalues .nv-guide { fill: none; stroke: var(--line-strong); }
.notevalues .nv-row   { fill: none; stroke: var(--line); }
.notevalues .nv-rule  { fill: var(--text-faint); }
.notevalues .nv-name  { fill: var(--text); font: 700 16px var(--font-sans); }
.notevalues .nv-dur   { fill: var(--text-muted); font: 400 13.5px var(--font-sans); }
.notevalues .nv-num   { fill: var(--text-muted); font: 600 13px var(--font-sans); }

/* "Măsurile" was a picture of a paragraph on the old site: the text was baked
   into a PNG, so it could not be selected, searched, translated or read aloud.
   Same words, set as a quiet reference panel — it sits beside the main thread of
   the lesson, so it takes the sunken plate of the figures rather than the raised
   surface of a chord card. */
.prose .theorybox {
  margin: 2rem 0; padding: 1.25rem 1.4rem;
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.theorybox__title {
  margin: 0 0 .9rem; font-size: .9rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.prose .theorybox p { margin: 0 0 .5rem; }
.prose .theorybox ul { margin: 0 0 1.1rem; }

/* The old image listed these as one run of semicolons; as chips the numerator
   groups the author separated with "--" read at a glance. */
.measures { display: grid; gap: .8rem; margin: 0; }
.measures > div { display: grid; gap: .4rem; }
.measures dt { font-size: .88rem; font-weight: 700; color: var(--text-muted); }
.measures dd { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; }
.measures__m {
  padding: .15rem .5rem;
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: .9rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.measures__dot { color: var(--text-faint); padding: 0 .2rem; }
.measures__etc { color: var(--text-muted); font-size: .88rem; }

.prose .chord-grid { max-width: none; }

.prose .lyrics {
  margin: 1.4rem 0; padding-left: 1rem;
  border-left: 2px solid var(--line);
}
.prose .lyrics__part {
  margin-bottom: .2em;
  font-weight: 700; color: var(--text-muted);
  font-size: .86rem; letter-spacing: .04em; text-transform: uppercase;
}
.prose .lyrics__text { white-space: pre-line; line-height: 1.75; }

/* Tablature keeps the typewriter face the course was written for: the lesson
   itself explains that a TAB only lines up when every character is the same
   width. Courier first, the site mono as the fallback. */
.prose .tab {
  margin: 0; padding: .9rem 1.1rem;
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow-x: auto;
  font-family: "Courier New", Courier, var(--font-mono);
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem); font-weight: 700;
  line-height: 1.5; white-space: pre; tab-size: 4;
}
.prose .tab--legend { display: inline-block; margin: 1.4rem 0; font-weight: 400; }

/* The four short examples sat side by side on the old site; they wrap here
   instead of shrinking, so the columns of a TAB never break apart. */
.prose .tab-row {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  margin: 1.6rem 0; max-width: none;
}
.prose .tab-item { margin: 1.6rem 0; }
.prose .tab-row .tab-item { margin: 0; }
.prose .tab-item__label {
  margin: 0 0 .4rem; font-weight: 700; font-size: .92rem; color: var(--text-muted);
}

/* Exercises break out of the 72ch reading column to the full .wrap width, so the
   long lines fit whole; below that they wrap at a bar line instead of scrolling.
   The extra 1rem off 100vw keeps the scrollbar from pushing the page sideways. */
.prose .exercise {
  margin: 1.5rem 0; padding: 1.25rem 1.4rem;
  width: min(100vw - 3.5rem, var(--wrap)); max-width: none;
  background: var(--bg-inverse); color: #e9eefc;
  border-radius: var(--r-md); overflow-x: auto;
  font-family: var(--font-mono); line-height: 1.8;
  font-size: clamp(1rem, .92rem + .5vw, 1.25rem); font-weight: 500;
  white-space: pre-wrap; overflow-wrap: normal; tab-size: 4;
}

/* ============================== songbook ================================
   The caiet is the one part of the site that came off paper, so it keeps the
   gold of the logo wall where the rest of the site is blue, and sets the verses
   as verse: line breaks where the line breaks, stanzas apart.
   ====================================================================== */

/* --gold, --gold-soft and --gold-line now live in the token block at the top of
   the file, next to the rest of the palette. */

/* The gold band that used to invite you here from the home page is gone — the
   „Cântă” section replaced it. Only its chips survived, still under the old
   name because they are still printed by the home page; the rename waits for
   the round where that template is open anyway. */
.caiet-cta__taste {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.caiet-cta__taste a {
  display: inline-block; padding: .35rem .9rem; border-radius: var(--r-pill);
  border: 1px solid rgb(200 162 74 / .45); background: rgb(255 255 255 / .06);
  color: #f4e6c4; text-decoration: none; font-size: .9rem;
}
.caiet-cta__taste a:hover { background: rgb(200 162 74 / .22); border-color: #d8b76a; color: #fff; }

.btn--lg { padding: .95rem 1.7rem; font-size: 1.05rem; }
.btn--lg svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round;
}

/* --- the index ------------------------------------------------------- */

.caiet-head {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0 clamp(2rem, 1.2rem + 2.5vw, 3rem);
  color: var(--text-invert);
  background: #120d05;
}
/* the golden wave along the bottom of the brand photograph, not the wordmark
   in the middle of it — the page already carries the wordmark in the header */
.caiet-head::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/media/brand/fundal.jpg") center 92% / cover no-repeat;
  background-image: image-set(url("/media/brand/fundal.webp") type("image/webp"),
                              url("/media/brand/fundal.jpg")  type("image/jpeg"));
  opacity: .55;
}
.caiet-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(11 8 3 / .78) 0%, rgb(11 8 3 / .9) 100%);
}
.caiet-head__inner { max-width: 720px; }
.caiet-head__eyebrow {
  margin: 0 0 .6rem; color: #e6c47f;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.caiet-head h1 { margin-bottom: .35em; text-shadow: 0 2px 18px rgb(0 0 0 / .5); }
.caiet-head__lead { color: rgb(246 244 238 / .84); margin-bottom: 2rem; }

.song-search { display: flex; align-items: center; gap: .5rem; margin: 0; }
.song-search__field {
  position: relative; flex: 1 1 auto; display: block;
}
.song-search__icon {
  position: absolute; left: 1.05rem; top: 50%; translate: 0 -50%;
  width: 20px; height: 20px; pointer-events: none;
  fill: none; stroke: #b9ac8f; stroke-width: 1.9; stroke-linecap: round;
}
.song-search input {
  width: 100%; padding: .95rem 1.1rem .95rem 3rem;
  border: 1px solid rgb(200 162 74 / .4); border-radius: var(--r-pill);
  background: rgb(255 255 255 / .07); color: #fff;
  font: inherit; font-size: 1.02rem;
}
.song-search input::placeholder { color: rgb(246 244 238 / .5); }
.song-search input:focus { border-color: var(--gold); background: rgb(255 255 255 / .12); }
.song-search input::-webkit-search-cancel-button { display: none; }

.song-search__clear {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .2);
  color: #fff; cursor: pointer;
}
.song-search__clear[hidden] { display: none; }
.song-search__clear:hover { background: rgb(255 255 255 / .16); }
.song-search__clear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.song-search__count {
  margin: .9rem 0 0; font-size: .88rem; color: rgb(246 244 238 / .6);
}

/* Two filters, both read off the printed grids: songs that have one at all, and
   songs a beginner can play without barring. There is no genre in the data, so
   there are no genre chips. */
.song-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chip--onDark {
  background: rgb(255 255 255 / .07); border-color: rgb(200 162 74 / .38);
  color: rgb(246 244 238 / .82);
}
.chip--onDark:hover { color: #fff; border-color: var(--gold); }
.chip--onDark span {
  margin-left: .4rem; padding: .05rem .4rem; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .12); font-size: .8em; font-variant-numeric: tabular-nums;
}
.chip--onDark.is-active {
  background: linear-gradient(120deg, #d8b76a, #b98f3c);
  border-color: #d8b76a; color: #1a1204;
}
.chip--onDark.is-active span { background: rgb(0 0 0 / .16); }
:root[data-theme="dark"] .chip--onDark.is-active,
.chip--onDark.is-active { color: #1a1204; }

/* the chord shorthand under a title in the index */
.song-item__chords {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem;
  font-family: var(--font-mono); font-size: .78rem;
}
.song-item__chords span {
  padding: .05rem .4rem; border-radius: 4px;
  background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line);
}

.alpha-bar {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / .14);
}
.alpha-bar a {
  display: grid; place-items: center; min-width: 32px; height: 32px;
  padding: 0 .35rem; border-radius: var(--r-sm);
  color: rgb(246 244 238 / .72); text-decoration: none;
  font-weight: 700; font-size: .92rem;
}
.alpha-bar a:hover { background: rgb(200 162 74 / .25); color: #fff; }
.alpha-bar a[hidden] { display: none; }

.songbook { padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 var(--section-y); }
.songbook__group { scroll-margin-top: 80px; }
.songbook__group + .songbook__group { margin-top: 2.5rem; }
.songbook__letter {
  margin: 0 0 .9rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--gold-line);
  font-size: 1.25rem; color: var(--gold); letter-spacing: .04em;
}
.songbook__empty { text-align: center; color: var(--text-muted); padding: 3rem 0; max-width: 46ch; margin-inline: auto; }

.song-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.song-list__item[hidden] { display: none; }

.song-item {
  display: flex; flex-direction: column; gap: .15rem; height: 100%;
  padding: .9rem 1.1rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.song-item:hover {
  border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.song-item__title { font-weight: 700; font-size: 1.02rem; }
.song-item__author { font-size: .84rem; color: var(--gold); font-weight: 600; }
.song-item__first {
  margin-top: .2rem; font-size: .88rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- one song -------------------------------------------------------- */

.song__head {
  padding: clamp(1.75rem, 1rem + 3vw, 3rem) 0 clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: var(--gold-soft);
  border-bottom: 1px solid var(--gold-line);
}
.song__head h1 { margin-bottom: .2em; }
.song__author { margin: 0; color: var(--gold); font-weight: 600; }
.song__head .breadcrumb a { color: var(--text-muted); }

/* The verses. Nothing here is wider than a stanza wants to be, and every line
   break the caiet had is a line break here too. */
.song-text {
  max-width: 62ch; margin: 0;
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) 0 0;
  font-size: clamp(1.02rem, .98rem + .25vw, 1.12rem); line-height: 1.85;
}
.song-text p { margin: 0 0 1.75rem; }
.song-text p:last-child { margin-bottom: 0; }

/* Stanza labels — "Strofa", "Refren", "1.", "R:" — carried over as they were
   written, whether the page gave them a line of their own or ran them into the
   first verse. */
.song-text .song-mark {
  margin: 0 0 .15rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold);
}
.song-mark--inline { margin-right: .5rem; }

/* Chords written above the words only line up in a fixed-width face, and only
   if the stanza may run as wide as it was typed — so it steps outside the
   reading column the verses keep to. The chords are what you glance at while
   playing, from arm's length, so the block is set large; the words come along
   at the same size because that is what keeps chord over syllable. */
.song-text .song-tab {
  width: min(100vw - 3.5rem, var(--wrap)); max-width: none;
  padding: 1.1rem 1.25rem; margin-bottom: 1.75rem;
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow-x: auto;
  font-family: "Courier New", Courier, var(--font-mono);
  font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem);
  line-height: 1.65; white-space: pre; tab-size: 4;
}
.song-chordline { color: var(--brand-red); font-weight: 700; }
:root[data-theme="dark"] .song-chordline { color: #ff8f6a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .song-chordline { color: #ff8f6a; }
}

/* The grid of bars at the foot of the page: how the song is strummed. Nothing
   has to line up with it, so it takes the size it deserves — this is the line
   you read off the music stand. */
.song-text .song-chart {
  width: max-content; max-width: min(100vw - 3.5rem, var(--wrap));
  margin: .5rem 0 1.25rem;
  padding: 1rem 1.35rem;
  background: var(--bg-inverse); color: #f2e6c8;
  border-radius: var(--r-md);
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem);
  line-height: 1.6; letter-spacing: .03em;
}

.song__note {
  max-width: 62ch; margin: 2.5rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--text-muted);
}

.song-nav {
  display: grid; gap: 1rem; margin: 2.5rem 0 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .song-nav { grid-template-columns: 1fr 1fr; } }
.song-nav__link {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.2rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
}
.song-nav__link:hover { border-color: var(--gold); }
.song-nav__link--next { text-align: right; }
.song-nav__dir { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.song-nav__title { font-weight: 700; }

.song__back { margin: 0 0 var(--section-y); }

/* ============================== footer ================================== */

.site-footer { background: var(--bg-sunken); border-top: 1px solid var(--line); }
.site-footer__inner {
  display: grid; gap: var(--s-6); padding: var(--section-y) 0 var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .site-footer__inner { grid-template-columns: 1fr 1.6fr; } }
@media (min-width: 1040px) { .site-footer__inner { grid-template-columns: 1fr 2fr; gap: var(--s-8); } }
.site-footer__note { color: var(--text-muted); font-size: var(--t-sm); max-width: 34ch; margin: var(--s-4) 0 0; }
.site-footer__nav { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.site-footer__nav h2 {
  font-size: .82rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 1em;
}
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer__nav a { color: var(--text-muted); text-decoration: none; font-size: .93rem; }
.site-footer__nav a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); justify-content: space-between;
  padding: var(--s-5) 0; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--text-muted);
}
.site-footer__legal p { margin: 0; }

/* ============================== 404 ===================================== */

.error-page { padding: var(--section-y) 0; text-align: center; }
.error-page__code {
  font-size: clamp(4rem, 3rem + 8vw, 8rem); font-weight: 800; line-height: 1; margin: 0;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-page__lead { color: var(--text-muted); max-width: 52ch; margin-inline: auto; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 2rem 0 3rem; }
.error-page__suggest { text-align: left; max-width: 640px; margin-inline: auto; padding-top: 2rem; border-top: 1px solid var(--line); }
.error-page__suggest h2 { font-size: 1rem; color: var(--text-muted); }
.error-page__suggest ul { columns: 2; column-gap: 2rem; list-style: none; margin: 0; padding: 0; }
.error-page__suggest li { margin-bottom: .5rem; break-inside: avoid; }
@media (max-width: 520px) { .error-page__suggest ul { columns: 1; } }

/* ============================== print =================================== */

@media print {
  .site-header, .site-footer, .lesson-nav, .lesson__done, .chord-play, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .prose .exercise { background: #f4f4f4; color: #000; border: 1px solid #ccc; }
  .notevalues .nv-panel { fill: #fff; stroke: #ccc; }
  .notevalues .nv-guide { stroke: #bbb; }
  .notevalues .nv-row   { stroke: #ddd; }
  .notevalues .nv-name  { fill: #000; }
  .notevalues .nv-dur, .notevalues .nv-num, .notevalues .nv-rule { fill: #555; }
}