/* =========================================================
   KALABORTZIS, main stylesheet
   Aesthetic: editorial dark (mockup 4)
   Same 8-section structure as before so the file stays readable.
   ========================================================= */


/* --- 1. Design tokens -----------------------------------
   The whole "dark editorial" feel comes from this palette.
   Two key swaps vs the cream version:
   - background goes dark warm-brown (#161210), text cream (#F2E9D6)
   - accent stays terracotta but slightly hotter (#D9613B vs #C45A3A)
   Border colors are now subtle dark lines that almost disappear.
*/

:root {
  /* Background layers, darkest to lightest */
  --bg: #161210;          /* page background, warm near-black */
  --surface: #1F1A17;     /* cards, header bar */
  --surface-2: #2A231F;   /* nested surfaces (e.g. preview tab) */

  /* Ink (text) layers, lightest to dimmest */
  --ink: #F2E9D6;         /* primary text, warm cream */
  --ink-2: #B8AC95;       /* body copy, muted */
  --ink-3: #7E7363;       /* meta text, very muted */

  /* Accent colors */
  --accent: #D9613B;      /* terracotta, buttons, links, italic emphasis */
  --accent-2: #B84A28;    /* darker terracotta, hover */
  --accent-soft: #3D2620; /* deep brown-red, used in lead magnet glow */
  --gold: #C8965A;        /* warm gold, secondary accent in gradients */

  /* Borders */
  --border: #34291F;      /* base border, very subtle on dark */
  --border-2: #4A3A2C;    /* slightly stronger border, used on cards */

  /* Shadows, deeper than the cream version since dark surfaces need more */
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.6);
}


/* --- 2. Reset & base -------------------------------------
   Strip browser defaults. Set the dark body background.
   The body::before adds two soft radial glows (terracotta top-right,
   gold bottom-left) so the dark page doesn't feel flat.
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Text highlight styling, for two things that were both browser-default.
   ::selection is ordinary click-drag selection (was the default blue).
   ::target-text is what a browser draws when arriving via a "scroll to
   text" fragment, the #:~:text=... on the end of a URL that Google's
   "Read more" snippet appends. Its default is dark-text-on-yellow like
   <mark>, which on this dark theme reads as a broken-looking tan block.
   Both now use a translucent accent wash that keeps the light body text
   legible and looks intentional. Light ink on ~28% accent over the dark
   background clears WCAG AA comfortably. */
::selection { background: rgba(217, 97, 59, 0.32); color: var(--ink); }
::target-text { background: rgba(217, 97, 59, 0.28); color: var(--ink); }

/* Fixed background glow, sits behind everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% -20%, rgba(217, 97, 59, 0.12), transparent 50%),
    radial-gradient(ellipse at -20% 80%, rgba(200, 150, 90, 0.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Headings use Literata (screen-first editorial serif, real Greek).
   Playfair Display was the original choice but has NO Greek glyphs, so
   Greek headings silently fell back to Georgia. See css/fonts.css.
   Italic + accent color is reserved for <em> inside h1. */
h1, h2, h3, h4 {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
}

p {
  color: var(--ink-2);
}

a {
  color: var(--accent);
  text-decoration: none;
}

/* Container, same role as before, just z-indexed above the body glow */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* Eyebrow, the small uppercase tag that sits above each section's headline.
   The .num child renders the editorial "№ 01" numeral in italic serif. */
.eyebrow {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

/* --- 3. Header / Navigation ------------------------------
   Sticky bar. Translucent dark background with backdrop blur so
   content scrolling underneath gets a frosted-glass effect.
*/

header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(22, 18, 16, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  position: relative;
}

/* Brand (logo + name) on the left.
   Brand mark is now an OUTLINED SQUARE with an italic serif Κ inside,
   matching the editorial aesthetic. The gradient circle from the cream
   version doesn't fit this look. If you want the circle back, the old
   styles are recoverable from git. */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  cursor: pointer;
  /* The logo image is only ~18px wide at its 40px height (228x512
     source), so on a phone the icon alone is far under the 44px
     minimum touch target and thumb taps miss it: the text worked, the
     icon appeared dead. Padding widens and heightens the hit area,
     the matching negative margin keeps the layout pixel-identical. */
  padding: 6px 10px;
  margin: -6px -10px;
  min-height: 44px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--accent);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  background: transparent;
  border-radius: 0;
}

/* Brand logo image (clef + bouzouki mark), replaces the placeholder Κ. */
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}

.brand-name {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* Nav links on the right */
.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}

.nav-links a {
  color: var(--ink-2);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.15s;
  letter-spacing: 0.04em;
  border-radius: 0;
}

.nav-links a:hover {
  color: var(--ink);
  background: transparent;
}

/* Active state: the link to the page you're currently on.
   Add class="active" on the matching <a> in each page's header. */
.nav-links a.active {
  color: var(--ink);
}

/* The Newsletter button, now a thin terracotta outline (no fill).
   Fills in on hover. */
.nav-links a.nav-cta {
  margin-left: 12px;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 8px 18px;
  background: transparent;
  font-weight: 500;
}

.nav-links a.nav-cta:hover {
  background: var(--accent);
  color: var(--bg);
}

/* The EL/EN language switch (LOCALIZATION_PLAN item 6). Quiet by
   design: a thin bordered pair sitting after the Newsletter CTA. The
   current locale is plain cream text (not a link); the other locale is
   the link, dimmed until hover like every other nav item. */
.nav-links .lang-switch {
  margin-left: 12px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.nav-links .lang-switch .lang-current {
  color: var(--ink);
  padding: 7px 11px;
}
.nav-links .lang-switch a {
  color: var(--ink-2);
  padding: 7px 11px;
  border-left: 1px solid var(--border);
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}
.nav-links .lang-switch a:hover {
  color: var(--accent);
}

/* Compact-width nav menu toggle (hamburger). Hidden on desktop; shown <=980px. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border-2);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink-2);
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* --- 4. Buttons -----------------------------------------
   Sharp rectangles instead of pill shapes. Two variants:
   primary (solid terracotta) and ghost (outlined).
*/

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border: none;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-2);
}

.btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}


/* --- 5. Hero --------------------------------------------
   Two-column grid, eyebrow + headline + sub + buttons on the left,
   tall 4:5 portrait photo on the right with a thin caption.
   No "decorative outline behind the photo" anymore (the editorial
   look prefers a clean rectangle).
*/

.hero {
  padding: 100px 0 90px;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  margin-bottom: 32px;
}

/* <em> inside the headline = italic + terracotta accent */
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--ink-2);
  margin-bottom: 36px;
  max-width: 520px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Hero photo is a tall portrait rectangle.
   Two pseudo-elements add editorial details:
   ::before = thin horizontal line top-right (like a tag mark)
   ::after  = small uppercase "[ φωτογραφία ]" caption bottom-left */
.hero-photo-wrap {
  position: relative;
}

.hero-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 235, 200, 0.3), transparent 50%),
    linear-gradient(160deg, #5A3022 0%, var(--accent) 50%, #2A1812 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.hero-photo::before {
  content: '';
  position: absolute;
  top: 24px;
  right: 24px;
  width: 50px;
  height: 1px;
  background: rgba(242, 233, 214, 0.6);
}

.hero-photo::after {
  content: '[ φωτογραφία ]';
  position: absolute;
  bottom: 24px;
  left: 24px;
  color: rgba(242, 233, 214, 0.75);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* --- 6. Latest videos -----------------------------------
   Three-card row. Cards are now bare (no surface fill, no border,
   no rounded corners), letting the thumbnail do the talking. The
   text below is the meta strip. The whole tile is hover-lifted.
*/

.videos-section {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}

/* Section header is now two columns: title block on the left,
   small meta line on the right (e.g. "3 πρόσφατα").
   A thin border underlines the whole strip. */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.section-head h2 {
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  margin-bottom: 0;
}

.section-head .meta {
  color: var(--ink-3);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: right;
  align-self: end;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.video-card {
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.4s ease;
}

.video-card:hover {
  transform: translateY(-6px);
  color: inherit;
  box-shadow: none;
}

/* Thumbnail block, 16:9, gradient placeholder.
   The ::after adds a subtle dark gradient at the bottom so the play
   icon reads better against any background. */
.video-thumb {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 18px;
  position: relative;
}

.video-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.4));
}

.video-thumb.t1 { background: linear-gradient(135deg, #4A6B5A, #1F1A17); }
.video-thumb.t2 { background: linear-gradient(135deg, var(--accent), #5A1F1F); }
.video-thumb.t3 { background: linear-gradient(135deg, var(--gold), #2A1812); }

.play-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(242, 233, 214, 0.95);
  display: grid;
  place-items: center;
  color: var(--bg);
  z-index: 1;
  position: relative;
  transition: transform 0.2s;
}

.video-card:hover .play-icon {
  transform: scale(1.05);
}

/* Text block under the thumbnail, no padding now (no card box). */
.video-meta {
  padding: 0;
}

/* The vtag is now an italic serif label in terracotta, like a magazine tag. */
.video-meta .vtag {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
}

.video-meta h3 {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--ink);
}

.video-meta .vinfo {
  font-size: 0.82rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}


/* --- 7. Lead magnet / Newsletter ------------------------
   Big bordered card with two columns: pitch + form on the left,
   PDF preview on the right. A floating italic "01" numeral sits
   top-left as an editorial decoration.
*/

.newsletter-section {
  padding: 60px 0;
}

.lead-magnet {
  padding: 80px;
  border: 1px solid var(--border-2);
  border-radius: 0;
  background:
    linear-gradient(rgba(31, 26, 23, 0.95), rgba(31, 26, 23, 0.95)),
    radial-gradient(circle at top right, var(--accent-soft) 0%, transparent 60%);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Solo variant (LOCALIZATION_PLAN item 9): the English signup has no
   PDF covers to show while the guides are Greek-only (decision 10), so
   the box collapses to a single centred column. */
.lead-magnet--solo {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.lead-magnet--solo .lead-content {
  max-width: 620px;
}
.lead-magnet--solo .lead-form {
  justify-content: center;
}

.lead-magnet h2 {
  color: var(--ink);
  margin-bottom: 18px;
}

.lead-magnet p {
  color: var(--ink-2);
  margin-bottom: 28px;
  line-height: 1.7;
  max-width: 480px;
}

/* Email form, sharp inputs flush against the button (no gap). */
.lead-form {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 14px;
  max-width: 460px;
}

.lead-form input {
  flex: 1;
  min-width: 200px;
  padding: 16px 18px;
  border: 1px solid var(--border-2);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
}

.lead-form input::placeholder {
  color: var(--ink-3);
}

.lead-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.lead-form button {
  border-left: none;
  border-radius: 0;
}

/* On phones the input and button stack. The flush desktop layout (gap:0)
   leaves them touching with no breathing room, so stack them properly with
   a small gap and let each take the full width. */
@media (max-width: 560px) {
  .lead-form {
    flex-direction: column;
    gap: 10px;
  }
  .lead-form input { min-width: 0; }
  .lead-form button {
    width: 100%;
    border-left: 1px solid var(--accent-2);
    /* .btn is inline-flex with no justify; at full width its text would sit
       left. Center it. */
    justify-content: center;
  }

  /* Inline lesson/tool signup form: stack it the same way as the homepage
     form so the two are consistent, input and button both full width. */
  .lesson-newsletter form {
    flex-direction: column;
    gap: 10px;
  }
  .lesson-newsletter input[type="email"] { min-width: 0; }
  .lesson-newsletter button { width: 100%; }
}

.lead-fineprint {
  font-size: 0.82rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* PDF preview card, no longer tilted; sits straight, with a thin
   border and a heavy shadow to feel weighty against the dark background. */
.lead-preview {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  padding: 32px 28px;
  color: var(--ink);
  transform: none;
}

.lead-preview-tag {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
}

.lead-preview h4 {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 14px;
}

.preview-line {
  height: 4px;
  border-radius: 0;
  background: var(--border);
  margin: 6px 0;
}

.preview-line.short { width: 60%; }
.preview-line.med   { width: 82%; }

.preview-tab {
  margin-top: 22px;
  padding: 14px;
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-size: 0.74rem;
  line-height: 1.8;
  color: var(--ink-2);
  white-space: pre;
}


/* --- 8. Footer ------------------------------------------
   4-column grid: brand+email · section links · resources · contact
   The footer sits on the same dark page background, separated only
   by a thin top border (no longer a contrasting block).
*/

footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  color: var(--ink);
  padding: 80px 0 40px;
  margin-top: 100px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
}

/* Brand column, italic serif heading, bigger and more elegant */
.footer-brand h3 {
  color: var(--ink);
  font-family: 'Literata', Georgia, serif;
  font-style: normal;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.footer-brand p {
  color: var(--ink-3);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Secondary email signup, sharp not pill, dark inputs */
.footer-email {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  max-width: 320px;
}

.footer-email input {
  flex: 1;
  min-width: 160px;
  padding: 10px 14px;
  border-radius: 0;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
}

.footer-email input::placeholder {
  color: var(--ink-3);
}

.footer-email input:focus {
  outline: none;
  border-color: var(--accent);
}

.footer-email button {
  padding: 10px 18px;
  border-radius: 0;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-left: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.footer-email button:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Link columns, small uppercase headings in terracotta */
.footer-col h4 {
  color: var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col a {
  color: var(--ink-2);
  font-size: 0.93rem;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: var(--ink);
}

/* Bottom strip: copyright on the left, socials on the right */
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: 16px;
}

/* Social icons, square outlined, fill terracotta on hover */
.socials {
  display: flex;
  gap: 12px;
}

.socials a {
  width: 38px;
  height: 38px;
  border-radius: 0;
  border: 1px solid var(--border-2);
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: all 0.2s;
}

.socials a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

/* Inactive state, applied while channels are empty.
   Lower opacity, no hover transition. */
.socials.inactive a {
  opacity: 0.4;
}

.socials.inactive a:hover {
  border-color: var(--border-2);
  color: var(--ink-2);
  cursor: default;
}


/* --- 9. Theory page (theoria.html) ----------------------
   The lesson list landing for the Θεωρία section.
   Layout: page hero (left-aligned title + intro), then 5
   chapter sections stacked vertically. Each chapter has a
   heading block and a numbered lesson list.
   Lessons have two states: live (terracotta "Διάβασε →"
   action with hover indent) and "Σύντομα" (greyed, pill).
*/

/* Page hero, no photo, book-opening style */
.theory-intro {
  padding: 100px 0 60px;
  border-bottom: 1px solid var(--border);
}

.theory-intro h1 {
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 400;
  margin-bottom: 28px;
}

.theory-intro h1 em {
  font-style: italic;
  color: var(--accent);
}

.theory-intro-lede {
  font-size: 1.18rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 640px;
}

/* Each chapter is a vertically stacked section, separated
   from the next by a thin border. */
.chapter {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}

.chapter:last-of-type {
  border-bottom: none;
}

/* Chapter heading: italic serif "Κεφάλαιο Α'" eyebrow,
   then h2, then a one-line description. */
.chapter-head {
  max-width: 720px;
  margin-bottom: 48px;
}

.chapter-num {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.chapter-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  margin-bottom: 18px;
}

.chapter-head .chapter-desc {
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 560px;
}

/* Lesson list: a styled <ol> with no bullets. Each row is
   a clickable <a> laid out in a 3-column grid:
   italic serif number · text block · action arrow/pill. */
.lesson-list {
  list-style: none;
}

.lesson {
  border-top: 1px solid var(--border);
}

.lesson:last-child {
  border-bottom: 1px solid var(--border);
}

.lesson a {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 22px 8px 22px 0;
  color: inherit;
  transition: padding-left 0.2s, background 0.2s;
}

.lesson a:hover {
  padding-left: 8px;
  background: linear-gradient(90deg, rgba(217, 97, 59, 0.04), transparent 70%);
}

.lesson-num {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ink-3);
}

.lesson-text {
  min-width: 0;
}

.lesson-title {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}

.lesson-desc {
  font-size: 0.92rem;
  color: var(--ink-3);
  line-height: 1.5;
}

.lesson-action {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  transition: transform 0.2s;
  white-space: nowrap;
}

.lesson a:hover .lesson-action {
  transform: translateX(4px);
}

/* "Σύντομα" state, applied to .lesson rows whose lesson
   isn't built yet. Greyed at 45% opacity, no hover effect,
   action shows an outlined uppercase pill instead of arrow.
   Remove the .soon class on the <li> when the lesson is built. */
.lesson.soon a {
  cursor: default;
}

.lesson.soon a:hover {
  padding-left: 0;
  background: none;
}

.lesson.soon .lesson-num,
.lesson.soon .lesson-title,
.lesson.soon .lesson-desc {
  opacity: 0.45;
}

.lesson.soon .lesson-action {
  color: var(--ink-3);
  border: 1px solid var(--border-2);
  padding: 4px 10px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.lesson.soon .lesson-action svg {
  display: none;
}


/* --- 10. Responsive -------------------------------------
   Same breakpoints as before. At ≤920px, the multi-column
   grids collapse to one column.
*/

/* The hamburger takes over at 980px, not 920px: with the full Greek
   nav labels the desktop link row overflows the viewport between 921px
   and roughly 965px, producing a horizontal scrollbar. */
@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    padding: 6px 0;
    display: none;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    z-index: 50;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 28px; }
  .nav-links a.nav-cta {
    margin: 10px 24px 8px;
    text-align: center;
  }
  .nav-links .lang-switch {
    margin: 4px 24px 12px;
    align-self: flex-start;
  }
}

@media (max-width: 920px) {
  .hero-grid,
  .lead-magnet,
  .section-head {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero {
    padding: 60px 0 50px;
  }
  .videos-grid {
    grid-template-columns: 1fr;
  }
  .lead-magnet {
    padding: 48px 32px;
  }
  .section-head .meta {
    text-align: left;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nav-links .lang-switch a { padding: 7px 11px; }
}

@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .lead-magnet {
    padding: 40px 24px;
  }
  /* Theory page: collapse lesson row from 3 cols to 2 cols.
     The action moves to its own row below the title. */
  .theory-intro { padding: 60px 0 40px; }
  .chapter { padding: 56px 0; }
  .lesson a {
    grid-template-columns: 40px 1fr;
    gap: 18px;
    padding: 18px 0;
  }
  .lesson-num { font-size: 1.1rem; }
  .lesson-title { font-size: 1.1rem; }
  .lesson-action {
    grid-column: 2;
    justify-self: start;
    margin-top: 6px;
  }
}


/* --- 11. Lesson page ------------------------------------
   Styles for an individual lesson (e.g. theoria-a01-pentagrammo.html).
   A single narrow column (max-width 720px) optimised for reading: editorial
   serif headings, cream/terracotta accents, dark figure cards for SVGs and
   tables. All selectors are scoped under `.lesson-page` where they would
   otherwise collide with the lesson-listing rows in theoria.html (notably
   `.lesson-title`). Future lessons can copy the body markup and inherit
   everything from this block.
*/

.lesson-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 32px 80px;
  position: relative;
  z-index: 1;
}

/* Breadcrumb at the top of the page */
.lesson-breadcrumb {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-bottom: 40px;
  letter-spacing: 0.02em;
}
.lesson-breadcrumb a { color: var(--ink-3); }
.lesson-breadcrumb a:hover { color: var(--accent); }
.lesson-breadcrumb .sep { margin: 0 8px; color: var(--ink-3); opacity: 0.5; }

/* Lesson header (eyebrow + h1 + meta strip) */
.lesson-head { margin-bottom: 36px; }
.lesson-eyebrow {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 16px;
}
.lesson-page .lesson-title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 1.2;
}
.lesson-page .lesson-title em {
  font-style: italic;
  color: var(--accent);
}
.lesson-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--ink-3);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.lesson-meta .icon { margin-right: 6px; }

/* "Με δυο λόγια" takeaway block, top of page */
.lesson-takeaway {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 24px 28px;
  border-radius: 2px;
  margin-bottom: 48px;
}
.takeaway-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 10px;
}
.lesson-takeaway p {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink);
}

/* Body prose */
.lesson-body { font-size: 1.04rem; line-height: 1.75; }
.lesson-body p { margin-bottom: 1.3em; }
.lesson-body .lede {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--ink);
  font-family: 'Literata', Georgia, serif;
  font-weight: 400;
  margin-bottom: 2em;
}
.lesson-body h2 {
  font-size: 1.6rem;
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  color: var(--ink);
}
.lesson-body h2 .num {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-3);
  margin-right: 14px;
  font-size: 0.85em;
}
.lesson-body strong { color: var(--ink); font-weight: 600; }
.lesson-body em { font-style: italic; color: var(--gold); }

/* Internal cross-references to other lessons */
.lesson-body a.lesson-ref {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  text-decoration: none;
  transition: color 0.15s, border-bottom-color 0.15s;
}
.lesson-body a.lesson-ref:hover {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
}

.lesson-body ul {
  list-style: none;
  margin-bottom: 1.3em;
}
.lesson-body ul li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 0.5em;
  color: var(--ink-2);
}
.lesson-body ul li::before {
  content: '·';
  position: absolute;
  left: 8px;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.4em;
  line-height: 1;
}
/* Numbered method steps (e.g. Γ.04): terracotta numbered badges. */
.lesson-body ol.lesson-steps {
  list-style: none;
  margin-bottom: 1.3em;
  counter-reset: step;
}
.lesson-body ol.lesson-steps li {
  padding-left: 34px;
  position: relative;
  margin-bottom: 0.7em;
  color: var(--ink-2);
  counter-increment: step;
}
.lesson-body ol.lesson-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: var(--accent);
  color: var(--bg);
  border-radius: 50%;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Figures (SVG diagrams, tables, audio) */
.lesson-figure {
  margin: 2.5em 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px 24px 24px;
}
.lesson-figure svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.lesson-figure figcaption {
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-3);
  margin-top: 16px;
  font-style: italic;
}

/* Table-as-figure variant */
.lesson-figure table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
}
.lesson-figure th,
.lesson-figure td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  vertical-align: top;
}
.lesson-figure th {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  padding-bottom: 10px;
}
.lesson-figure tr:last-child td { border-bottom: 0; }
.lesson-figure td.clef {
  color: var(--accent);
  font-weight: 500;
}
.lesson-figure td .note {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 2px;
}

/* --------------------------------------------------------------
   Score figure: real music notation (rendered with VexFlow) on a
   light "paper" background, embedded inside the dark lesson page.

   Add the modifier:  <figure class="lesson-figure lesson-figure--score">

   Inside this container:
   - .score-header        small caps label above the music
   - .score-row           grid: [music] [callouts]
   - .vex                 VexFlow output (recolored black via CSS)
   - .measure-labels      grid above the music (ΜΕΤΡΟ 1, ΜΕΤΡΟ 2…)
   - .beat-numbers        grid below the music (1 2 3 4 1 2 3 4…)
   - .score-callouts      callout column for arrow + label rows
   - .score-callout       single callout (terracotta arrow + label)
   - .score-tagline       italic accented quote under a figure
   --------------------------------------------------------------- */
.lesson-figure--score {
  background: #FAFAF6;
  border-color: #E5E0D0;
  color: #2A241F;
}
.lesson-figure--score figcaption {
  color: #6E6354;
}
/* Caption emphasis: the global .lesson-body strong is cream (--ink) and
   vanishes on the light figure card. Recolor to readable terracotta so it
   stays tied to the accent labels inside the figure. */
.lesson-figure--score figcaption strong {
  color: #C0481E;
  font-weight: 600;
}
.lesson-figure--score .score-header {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  color: #8A7E6B;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* When piece labels and staves stack inside a figure (label, staff, label,
   staff…), give each label that follows a staff clear space above it, so it
   groups with the staff BELOW it instead of hugging the one above. */
.lesson-figure--score .vex + .score-header { margin-top: 52px; }
/* VexFlow base sizing. Colors are set per-element in JS so accent notes can
   override the default dark engraving color. */
.lesson-figure--score .vex svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Labels rendered INSIDE the SVG so they track note positions exactly.
   Beat numbers under each note, measure labels centered above each measure. */
.lesson-figure--score .vex svg text.beat-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  fill: #8A7E6B;
}
.lesson-figure--score .vex svg text.beat-label--strong {
  font-size: 18px;
  font-weight: 700;
  fill: #D9613B;
}
.lesson-figure--score .vex svg text.beat-label--mid {
  font-size: 13px;
  font-weight: 500;
  fill: #8A7E6B;
}
.lesson-figure--score .vex svg text.measure-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  fill: #8A7E6B;
}
.lesson-figure--score .vex svg text.syllable {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  fill: #D9613B;
}
.lesson-figure--score .vex svg text.syllable--small {
  font-size: 14px;
}
.lesson-figure--score .vex svg text.beat-tick {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  fill: #8A7E6B;
}
.lesson-figure--score .vex svg .duration-bar {
  stroke: #D9613B;
  stroke-width: 2.5;
  opacity: 0.7;
}
.lesson-figure--score .vex svg .duration-tick {
  stroke: #D9613B;
  stroke-width: 1.5;
  opacity: 0.7;
}

/* Rhythm table: small rhythm snippet on the left, description on the right */
.lesson-figure--score .rhythm-header,
.lesson-figure--score .rhythm-row {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 24px;
  align-items: center;
}
.lesson-figure--score .rhythm-header {
  border-bottom: 1px solid #E5E0D0;
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.lesson-figure--score .rhythm-header > span {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: #8A7E6B;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}
.lesson-figure--score .rhythm-row {
  border-top: 1px solid #EFE9D8;
  padding: 6px 0;
}
.lesson-figure--score .rhythm-row:first-of-type { border-top: 0; }
.lesson-figure--score .rhythm-description {
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  color: #2A241F;
  text-align: center;
}
/* Anatomy callouts (Figure 2) */
.lesson-figure--score .score-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.4fr;
  gap: 24px;
  align-items: center;
}
.lesson-figure--score .score-callouts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lesson-figure--score .score-callout {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
}
.lesson-figure--score .score-callout .arrow {
  height: 2px;
  background: var(--accent);
  position: relative;
}
.lesson-figure--score .score-callout .arrow::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -3px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 6px solid var(--accent);
}
.lesson-figure--score .score-callout .label {
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  color: var(--accent);
  font-weight: 600;
}
.lesson-figure--score .score-callout .label .sub {
  display: block;
  color: #8A7E6B;
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  margin-top: 2px;
}
.lesson-figure--score .score-tagline {
  text-align: center;
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  color: var(--accent);
  margin: 14px 0 0;
}
/* Strong/weak sidebar (Figure 3) */
.lesson-figure--score .meter-row + .meter-row { margin-top: 28px; }
.lesson-figure--score .meter-row .meter-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  color: #8A7E6B;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.lesson-figure--score .meter-row .meter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 24px;
  align-items: start;
}
.lesson-figure--score .meter-row .meter-notes {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #2A241F;
  line-height: 1.5;
}
.lesson-figure--score .meter-row .meter-notes .lead { color: #2A241F; font-weight: 500; }
.lesson-figure--score .meter-row .meter-notes .muted { color: #6E6354; font-style: italic; }
.lesson-figure--score .meter-row .meter-notes .feel { color: #8A7E6B; font-style: italic; display: block; margin-top: 6px; }

/* Pyramid of rhythmic durations (Α.04 figure 1).
   Three columns: VexFlow note symbol | subdivided syllable bars | name + beats. */
.lesson-figure--score .pyramid {
  display: grid;
  grid-template-columns: 60px 1fr 96px;
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
}
.lesson-figure--score .pyramid-head {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: #8A7E6B;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #E5E0D0;
  margin-bottom: 4px;
}
.lesson-figure--score .pyramid .sym {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  /* The SVG places the notehead in its upper third; nudge the whole symbol
     UP so the notehead aligns with the syllable bar's vertical center. */
  padding-bottom: 24px;
}
.lesson-figure--score .pyramid .sym .vex svg {
  display: block;
  margin: 0 auto;
}
.lesson-figure--score .pyramid .dur {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 4px;
}
.lesson-figure--score .pyramid .dur .bar {
  background: rgba(217, 97, 59, 0.08);
  border: 1px solid #E5E0D0;
  padding: 8px 4px;
  text-align: center;
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  color: #D9613B;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lesson-figure--score .pyramid .dur .bar.s-16 { font-size: 0.72rem; }
.lesson-figure--score .pyramid .dur .bar.span-16 { grid-column: span 16; }
.lesson-figure--score .pyramid .dur .bar.span-8 { grid-column: span 8; }
.lesson-figure--score .pyramid .dur .bar.span-4 { grid-column: span 4; }
.lesson-figure--score .pyramid .dur .bar.span-2 { grid-column: span 2; }
.lesson-figure--score .pyramid .name {
  font-family: 'Inter', sans-serif;
  text-align: center;
}
.lesson-figure--score .pyramid .name strong {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: #2A241F;
}
.lesson-figure--score .pyramid .name span {
  display: block;
  font-style: italic;
  font-size: 0.74rem;
  color: #8A7E6B;
  margin-top: 2px;
}
.lesson-figure--score .pyramid-total {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 0.74rem;
  color: #8A7E6B;
  margin: 12px 0 0;
  padding-top: 8px;
  border-top: 1px solid #E5E0D0;
}

/* Note/Rest pair table (Α.05 figure 1). Four columns: note · rest · name · beats. */
.lesson-figure--score .rest-table {
  display: grid;
  grid-template-columns: 90px 90px 1fr 80px;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
}
.lesson-figure--score .rest-table-head {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: #8A7E6B;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #E5E0D0;
  margin-bottom: 4px;
}
.lesson-figure--score .rest-table .cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}
.lesson-figure--score .rest-table .cell .vex {
  /* Wrapper so we can position the SVG relative to the cell's true center
     (the SVG itself uses a viewBox heavy with stem-space above the notehead). */
  line-height: 0;
}
.lesson-figure--score .rest-table .cell .vex svg {
  display: block;
  margin: 0 auto;
  /* viewBox is tight to content (set in JS); height drives the visible scale. */
  height: 42px;
  width: auto;
}
.lesson-figure--score .rest-table .cell .vex svg.is-note {
  /* Notehead sits at the bottom of the SVG (stem space fills the top), so
     the SVG's vertical centre is well above the notehead. Shift up so the
     notehead lands on the cell's true centre, where the rest glyph and the
     row's text/number sit. */
  transform: translateY(-15px);
}
.lesson-figure--score .rest-table .cell .vex svg.is-rest {
  /* Rests have no stem/flag headroom, so their tight viewBox makes them appear
     much taller than notes at the same display height. Shrink to balance. */
  height: 26px;
}
.lesson-figure--score .rest-table .cell .vex svg.is-block-rest {
  /* Whole and half rests are wide solid blocks; shrink a touch more so they
     don't dominate the column. */
  height: 18px;
}
.lesson-figure--score .rest-table .row-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: #EFE9D8;
}
.lesson-figure--score .rest-table .name-cell {
  text-align: center;
  font-family: 'Inter', sans-serif;
}
.lesson-figure--score .rest-table .name-cell strong {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: #2A241F;
}
.lesson-figure--score .rest-table .name-cell em {
  display: block;
  font-style: italic;
  font-size: 0.74rem;
  color: #8A7E6B;
  margin-top: 2px;
}
.lesson-figure--score .rest-table .beat-cell {
  text-align: center;
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  color: #D9613B;
}

/* Rhythm row table (Α.06 figures): rhythm snippet | description. */
.lesson-figure--score .rhythm-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 32px;
  row-gap: 4px;
}
.lesson-figure--score .rhythm-list .rhythm-head {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: #8A7E6B;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #E5E0D0;
  margin-bottom: 4px;
}
.lesson-figure--score .rhythm-list .rhythm-snippet {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.lesson-figure--score .rhythm-list .rhythm-snippet .vex svg {
  display: block;
  margin: 0 auto;
}
.lesson-figure--score .rhythm-list .rhythm-desc {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: #2A241F;
}
.lesson-figure--score .rhythm-list .row-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: #EFE9D8;
}

/* Hybrid figure: VexFlow stave + redrawn piano keyboard (Α.03 fig 2). */
.lesson-figure--score .stave-block {
  margin-bottom: 16px;
}
.lesson-figure--score .stave-block .vex svg {
  display: block;
  margin: 0 auto;
}
.lesson-figure--score .label-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: 8px;
}
.lesson-figure--score .label-row .pair {
  position: relative;
  padding-top: 14px;
  text-align: center;
}
.lesson-figure--score .label-row .pair::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 6px;
  border-left: 1.4px solid var(--accent);
  border-right: 1.4px solid var(--accent);
  border-bottom: 1.4px solid var(--accent);
}
.lesson-figure--score .label-row .pair em {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 0.74rem;
  color: #8A7E6B;
  margin-top: 2px;
}

/* Three accidentals symbols (Α.03 fig 3). */
.lesson-figure--score .accidentals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding-top: 8px;
}
.lesson-figure--score .accidentals-grid .acc-cell {
  text-align: center;
  border-right: 1px solid #E5E0D0;
  padding: 8px 8px;
}
.lesson-figure--score .accidentals-grid .acc-cell:last-child { border-right: 0; }
.lesson-figure--score .accidentals-grid .acc-glyph .vex svg {
  display: block;
  margin: 0 auto;
}
.lesson-figure--score .accidentals-grid .acc-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: #2A241F;
  margin-top: 8px;
}
.lesson-figure--score .accidentals-grid .acc-sub {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--accent);
  margin-top: 4px;
}
.lesson-figure--score .accidentals-grid .acc-example {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  color: #8A7E6B;
  margin-top: 6px;
}
.lesson-figure--score .accidentals-grid .acc-header {
  grid-column: 1 / -1;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: #8A7E6B;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #E5E0D0;
  margin-bottom: 4px;
}

/* Piano keyboard redrawn for variant C (white background). */
.lesson-figure--score .piano {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* Simple vs compound subdivision (Β.02 figure 1).
   Two cards side by side: a beat unit on top, an arrow, its subdivision below. */
.lesson-figure--score .subdivision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.lesson-figure--score .subdivision .sub-col {
  border: 1px solid #E5E0D0;
  border-radius: 4px;
  padding: 16px 14px 14px;
  text-align: center;
  background: rgba(217, 97, 59, 0.03);
}
.lesson-figure--score .subdivision .sub-head {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A7E6B;
  margin-bottom: 8px;
}
.lesson-figure--score .subdivision .sub-head strong { color: #2A241F; font-weight: 600; }
.lesson-figure--score .subdivision .vex svg { display: block; margin: 0 auto; }
.lesson-figure--score .subdivision .sub-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #D9613B;
  margin: 2px 0 0;
}
.lesson-figure--score .subdivision .sub-foot {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #2A241F;
  margin-top: 8px;
}
.lesson-figure--score .subdivision .sub-foot em {
  color: #D9613B;
  font-style: normal;
  font-weight: 600;
}
@media (max-width: 560px) {
  .lesson-figure--score .subdivision { grid-template-columns: 1fr; gap: 14px; }
}

/* Melodic vs harmonic interval writings (Γ.01). Three small score cards. */
.lesson-figure--score .interval-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lesson-figure--score .interval-types .itype {
  border: 1px solid #E5E0D0;
  border-radius: 4px;
  padding: 14px 10px 10px;
  text-align: center;
  background: rgba(217, 97, 59, 0.03);
}
.lesson-figure--score .interval-types .itype-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A7E6B;
  margin-bottom: 8px;
}
.lesson-figure--score .interval-types .vex svg { display: block; margin: 0 auto; }
.lesson-figure--score .interval-types .itype-foot {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #2A241F;
  margin-top: 6px;
}
.lesson-figure--score .interval-types .itype-foot em {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  color: #D9613B;
  margin-left: 4px;
}
@media (max-width: 560px) {
  .lesson-figure--score .interval-types { grid-template-columns: 1fr; gap: 12px; }
}

/* Interval lookup table (Γ.02): name | shorthand | tones | example. */
.lesson-figure--score .intervals-table {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #2A241F;
}
.lesson-figure--score .intervals-table .row {
  display: grid;
  grid-template-columns: 1.5fr 0.6fr 0.7fr 1.1fr;
  gap: 8px;
  padding: 8px 6px;
  border-top: 1px solid #EFEAD9;
  align-items: baseline;
}
.lesson-figure--score .intervals-table .row.head {
  border-top: 0;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A7E6B;
  padding-bottom: 10px;
}
.lesson-figure--score .intervals-table .row strong { font-weight: 600; color: #2A241F; }
.lesson-figure--score .intervals-table .abbr {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  color: #D9613B;
}
.lesson-figure--score .intervals-table .tones { color: #6E6354; }
.lesson-figure--score .intervals-table .example { color: #6E6354; }
/* Two-column variant for inversion pairs (Γ.03). */
.lesson-figure--score .intervals-table.inversions .row {
  grid-template-columns: 1fr 1fr;
}
/* Three-column variant for key-signature reference (Δ.04). */
.lesson-figure--score .intervals-table.keysigs .row {
  grid-template-columns: 0.9fr 1.2fr 1.6fr;
}
.lesson-figure--score .intervals-table.inversions .abbr {
  margin-left: 6px;
}

/* "Σύνοψη" recap card at the end of the lesson */
.lesson-recap {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  padding: 28px 32px;
  border-radius: 4px;
  margin: 3em 0 2em;
}
.lesson-recap h3 {
  font-size: 1.25rem;
  margin-bottom: 16px;
  color: var(--ink);
}
.lesson-recap ul li { margin-bottom: 0.4em; }

/* Inline newsletter block (data-source="lesson_inline") */
.lesson-newsletter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 36px 32px;
  margin: 3em 0;
  text-align: center;
}
.lesson-newsletter .eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 14px;
}
.lesson-newsletter h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.lesson-newsletter p {
  font-size: 0.95rem;
  margin-bottom: 20px;
  color: var(--ink-2);
}
.lesson-newsletter form {
  display: flex;
  gap: 8px;
  justify-content: center;
  max-width: 440px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.lesson-newsletter input[type="email"] {
  flex: 1;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  color: var(--ink);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  border-radius: 2px;
}
.lesson-newsletter input[type="email"]::placeholder { color: var(--ink-3); }
.lesson-newsletter button {
  background: var(--accent);
  color: var(--bg);
  border: 0;
  padding: 12px 22px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 2px;
}
.lesson-newsletter button:hover { background: var(--accent-2); }
.lesson-newsletter .fineprint {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-top: 14px;
}

/* Prev/Next navigation at the bottom */
.lesson-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 3em;
  margin-bottom: 2em;
}
.lesson-nav-card {
  border: 1px solid var(--border);
  padding: 20px 24px;
  border-radius: 4px;
  background: var(--surface);
  transition: border-color 0.2s, transform 0.2s;
  display: block;
}
.lesson-nav-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.lesson-nav-card.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.lesson-nav-card.next { text-align: right; }
.lesson-nav-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.lesson-nav-title {
  display: block;
  font-family: 'Literata', Georgia, serif;
  font-size: 1.05rem;
  color: var(--ink);
}

/* Lesson page mobile overrides */
@media (max-width: 720px) {
  .lesson-page { padding: 40px 24px 60px; }
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson-nav-card.next { text-align: left; }
}


/* --- 12. Instrument pages (Τετράχορδο / Τρίχορδο) --------
   Shared styles for the fretboard tool pages. The interactive
   fretboard itself is rendered by /js/fretboard.js as a warm-wood
   SVG "figure" sitting inside the dark editorial page. Three tabs:
   Νότες στην ταστιέρα (live), Συγχορδίες + Δρόμοι (coming soon).
   Everything is namespaced under .fb-* so it can't collide with
   the theory/lesson rules above.
*/

/* Page intro: title block on the left, tuning card on the right */
.instrument-intro {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
  padding: 4px 0 56px;
  border-bottom: 1px solid var(--border);
}
.instrument-intro h1 {
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 400;
  margin-bottom: 22px;
  line-height: 1.1;
}
.instrument-intro h1 em { font-style: italic; color: var(--accent); }
.instrument-intro .instrument-lede {
  font-size: 1.12rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 520px;
}

/* Tuning card */
.tuning-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 30px 32px;
}
.tuning-card .tuning-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}
.tuning-strings { display: flex; gap: 10px; flex-wrap: wrap; }
.string-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  min-width: 58px;
}
.string-pill .snum {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.string-pill .snote {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
}
.string-pill .sen {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--ink-3);
}
.tuning-card .tuning-foot {
  font-size: 0.84rem;
  color: var(--ink-3);
  margin-top: 16px;
}

/* Tab bar */
.fb-tabs {
  display: flex;
  gap: 4px;
  margin: 40px 0 32px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.fb-tab {
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.fb-tab:hover { color: var(--ink-2); }
.fb-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.fb-tab .fb-tab-soon {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Panels */
.fb-panel { display: none; }
.fb-panel.is-active { display: block; animation: fbFade 0.25s ease; }
@keyframes fbFade { from { opacity: 0; } to { opacity: 1; } }

/* Notes tab layout: controls sidebar + display area */
.fb-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}
/* Grid items default to min-width auto, which lets wide content push
   the whole layout out of bounds; force them to shrink instead. */
.fb-layout > * { min-width: 0;
}
.fb-controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 26px 24px;
  position: sticky;
  top: 92px;
}
.fb-controls-title {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.fb-controls-note {
  font-size: 0.86rem;
  color: var(--ink-3);
  line-height: 1.55;
  margin-bottom: 22px;
}
.fb-group { margin-bottom: 22px; }
.fb-group:last-child { margin-bottom: 0; }
.fb-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 12px;
}
.fb-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-pills--notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* minmax(0, ...) lets a track shrink below the label's min-content
   width, so the grid can never overflow the sidebar no matter how the
   fonts render; the pills give up side padding instead. */
.fb-pills--notes .fb-pill { min-width: 0; padding-left: 4px; padding-right: 4px; }
.fb-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.fb-pill:hover { border-color: var(--accent); color: var(--ink); }
.fb-pill.is-active {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.fb-pill .gr {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.1;
}
.fb-pill .en {
  font-size: 0.64rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.fb-pill.is-active .en { color: var(--ink-2); }
/* Simple text pills (mode / language toggles) */
.fb-pills:not(.fb-pills--notes) .fb-pill {
  flex-direction: row;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 9px 16px;
}

/* Display area */
.fb-display {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px 26px;
  min-height: 360px;
}
.fb-display-head { margin-bottom: 22px; }
.fb-display-title {
  font-family: 'Literata', Georgia, serif;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--ink);
}
.fb-display-sub {
  font-size: 0.9rem;
  color: var(--ink-3);
  margin-top: 4px;
}
.fb-board-wrap {
  overflow-x: auto;
  margin: 0 -6px;
  padding: 6px;
}
.fb-svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Wide screens: keep a readable minimum and let the wrap scroll if needed. */
.fb-svg--h { min-width: 720px; }
/* Narrow screens: vertical neck, sized to fit the phone without scrolling. */
.fb-svg--v { min-width: 0; width: auto; max-width: 320px; margin: 0 auto; }
.fb-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.fb-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.fb-dot { width: 15px; height: 15px; border-radius: 50%; }
.fb-dot--sel { background: #D9613B; border: 1.5px solid #B84A28; }
.fb-dot--other { background: #ECE6D6; border: 1.5px solid #B9B1A0; }
/* Direction-dependent note (Δρόμοι tab): hollow + dashed, like its board dot */
.fb-dot--var { background: transparent; border: 1.5px dashed #ECE6D6; }

/* Coming-soon panels (Συγχορδίες, Δρόμοι) */
.fb-soon {
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background:
    linear-gradient(rgba(31, 26, 23, 0.9), rgba(31, 26, 23, 0.9)),
    radial-gradient(circle at top right, var(--accent-soft) 0%, transparent 62%);
  padding: 72px 40px;
  text-align: center;
}
.fb-soon-mark {
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
}
.fb-soon-mark img {
  display: block;
  height: 60px;
  width: auto;
  opacity: 0.95;
}
.fb-soon-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 14px;
}
.fb-soon h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 400;
  margin-bottom: 16px;
}
.fb-soon h2 em { font-style: italic; color: var(--accent); }
.fb-soon p {
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 460px;
  margin: 0 auto;
}

/* Instrument pages responsive */
@media (max-width: 920px) {
  .instrument-intro {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 4px 0 40px;
  }
  .fb-layout { grid-template-columns: 1fr; gap: 24px; }
  .fb-controls { position: static; }
}
@media (max-width: 560px) {
  .fb-pills--notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fb-soon { padding: 56px 24px; }
}


/* --- 13. Signup forms (lead magnet, 2 δωρεάν οδηγοί) -----
   Shared by the homepage #newsletter section (.lead-magnet) and the
   inline block at the end of lessons/tools (.lesson-newsletter).
   Both post to MailerLite via js/site.js; the form is swapped in place
   for .form-success, so the user never leaves the page.
*/

/* The two real PDF covers, stacked as a deck rather than side by side.
   Two covers laid out in a row are wide *and* tall, which made the whole
   homepage section balloon. Stacking them costs roughly one cover's
   footprint and reads more like two physical booklets anyway.
   The container is sized by aspect-ratio so the absolutely-positioned
   covers still reserve layout height. */
.lead-covers {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  aspect-ratio: 520 / 735;
}

.lead-covers img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  transition: transform 0.35s ease;
}

/* Back cover (guide 1), peeking out top-left. */
.lead-covers img:first-child {
  transform: rotate(-5deg) translate(-7%, -3%);
  z-index: 1;
}

/* Front cover (guide 2), sitting on top. */
.lead-covers img:last-child {
  transform: rotate(2deg) translate(5%, 3%);
  z-index: 2;
}

/* On hover the deck spreads slightly, enough to show both covers fully. */
.lead-covers:hover img:first-child { transform: rotate(-8deg) translate(-13%, -5%); }
.lead-covers:hover img:last-child  { transform: rotate(3deg)  translate(8%, 5%); }

/* Success state. Deliberately quiet: a terracotta rule, no celebration.
   The copy has one job, get them to click the button inside the email. */
.form-success {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 18px;
  max-width: 460px;
}

.form-success strong {
  display: block;
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.form-success span {
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.65;
}

/* Inside the centred lesson block the success text reads better left-aligned. */
.lesson-newsletter .form-success {
  margin: 24px auto 0;
  text-align: left;
}

.form-error {
  font-size: 0.85rem;
  color: var(--accent);
  margin-top: 10px;
}

/* While the request is in flight */
.js-signup button[aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
}

@media (max-width: 920px) {
  /* One column: shrink the deck so it doesn't dominate the phone screen,
     and drop the hover spread (there is no hover on touch anyway). */
  .lead-covers {
    max-width: 200px;
  }
  .lead-covers:hover img:first-child { transform: rotate(-5deg) translate(-7%, -3%); }
  .lead-covers:hover img:last-child  { transform: rotate(2deg)  translate(5%, 3%); }
}

/* Footer signup is a narrow column, so the success block is scaled down. */
.footer-brand .form-success {
  max-width: 320px;
  padding-left: 14px;
}
.footer-brand .form-success strong { font-size: 1rem; }
.footer-brand .form-success span { font-size: 0.82rem; }


/* --- 14. Homepage: hero instrument + content showcase ----------
   The homepage used to be hero + signup form and nothing else: it never
   told a visitor that the site contains 21 lessons, 16 δρόμοι, 22 ρυθμοί
   and two interactive fretboards. That depth is the differentiator, so
   it now gets its own section, above the signup.
*/

/* Hero image. The bouzouki is a transparent cut-out (img/bouzouki-front.png,
   background removed) sitting straight on the page. No frame, no crop, and
   deliberately no glow behind it: a 1:2 instrument boxed into a 4/5 gradient
   card always looked wrong. Replaces the old .hero-photo placeholder. */
.hero-instrument {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The <picture> wrapper must not generate its own box, or it breaks the
   flex centering and the img sizing. display:contents makes the img the
   direct layout child again. */
.hero-instrument picture,
.about-photo picture { display: contents; }

.hero-instrument img {
  max-height: 520px;
  width: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}


/* The showcase. Three content cards, then two tool cards. Bordered and
   flat, no fills, matching .lead-preview and the instrument pages. */
.home-sections {
  padding: 40px 0 20px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.home-grid.tools {
  grid-template-columns: repeat(2, 1fr);
}

.home-card {
  display: block;
  border: 1px solid var(--border-2);
  background: var(--surface);
  padding: 32px 28px;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}

.home-card:hover {
  border-color: var(--accent);
  background: #241d19;
  transform: translateY(-2px);
}

.home-card h3 {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 10px;
}

.home-card p {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: 20px;
}

.home-card .go {
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* The tuning is the fastest way for someone to recognise their own
   instrument, so it sits above the description on the tool cards. */
.home-card .tuning {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.home-card .tuning span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  border: 1px solid var(--border-2);
  padding: 4px 9px;
}

@media (max-width: 920px) {
  .home-grid,
  .home-grid.tools {
    grid-template-columns: 1fr;
  }
  .hero-instrument img {
    max-height: 360px;
  }
}


/* --- 15. 404 -------------------------------------------------- */

.notfound {
  max-width: 640px;
  padding: 40px 0 20px;
}

.notfound-code {
  font-family: 'Literata', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 18px;
}


/* --- 16. About page (about.html) ----------------------------- */

.about { padding: 0 0 40px; }
.about .lesson-breadcrumb { margin-top: 40px; }

/* Intro: portrait left, name + lede right. Collapses to one column on
   narrow screens with the photo on top. */
.about-intro {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
  padding: 32px 0 56px;
}

.about-photo { margin: 0; }

/* Default: a real portrait, framed. height:auto matters: the img
   carries width/height attributes (needed against layout shift), and
   the attribute height would otherwise act as a specified height and
   keep aspect-ratio from engaging. */
.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border-2);
  display: block;
  object-fit: cover;
}

/* Stand-in until a portrait exists: the same transparent bouzouki cut-out
   as the homepage hero. No frame and no crop, since it's an object on the
   page rather than a photograph. Remove this modifier when the real photo
   lands and the framed treatment above takes over. */
.about-photo--instrument img {
  aspect-ratio: auto;
  border: 0;
  object-fit: contain;
  max-height: 460px;
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

.about-lead h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin: 0 0 18px;
}
.about-lede {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 480px;
}

/* Body prose. Reuses the reading measure and rhythm of the lessons. */
.about-body {
  max-width: 680px;
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--ink);
}
.about-body p { margin-bottom: 1.4em; color: var(--ink-2); }
.about-body h2 {
  font-size: 1.7rem;
  color: var(--ink);
  margin: 1.8em 0 0.7em;
}

.about-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 3em;
  max-width: 680px;
}

@media (max-width: 760px) {
  .about-intro {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }
  .about-photo { max-width: 260px; }
}


/* --- 17. Legal pages (privacy, terms) ------------------------ */

.legal { padding: 0 0 60px; }
.legal .lesson-breadcrumb { margin-top: 40px; }

.legal-head { padding: 24px 0 8px; max-width: 720px; }
.legal-head h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 10px; }
.legal-updated { font-size: 0.85rem; color: var(--ink-3); letter-spacing: 0.02em; }

.legal-body {
  max-width: 720px;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--ink-2);
}
.legal-body h2 {
  font-size: 1.4rem;
  color: var(--ink);
  margin: 1.8em 0 0.6em;
}
.legal-body p { margin-bottom: 1.1em; }
.legal-body ul { margin: 0 0 1.1em 1.3em; }
.legal-body li { margin-bottom: 0.5em; }
.legal-body a { color: var(--accent); }

/* Footer legal links live in the bottom bar next to the copyright. */
.footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-legal a { color: var(--ink-3); }
.footer-legal a:hover { color: var(--ink-2); }

/* Consent line under the compact footer signup. Small, but the footer form
   is a collection point like any other, so it needs the same disclosure. */
.footer-fineprint {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 10px;
  max-width: 320px;
}
.footer-fineprint a { color: var(--ink-3); text-decoration: underline; }
.footer-fineprint a:hover { color: var(--accent); }


/* --- 18. Mobile fixes for wide theory figures ----------------
   Three figures overflowed the white .lesson-figure box in mobile portrait.
   Each needs a different remedy (found during launch test run 1). */

/* Horizontal scroller used by the Α.04 pyramid (16-box bottom row is wider
   than any phone; scroll the whole figure as a unit, rows stay aligned). */
.lesson-figure--score .fig-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 560px) {
  /* Α.04 pyramid: give it a floor width so it scrolls instead of squishing
     the syllable boxes into unreadable slivers. */
  .lesson-figure--score .fig-scroll > .pyramid {
    min-width: 500px;
  }

  /* Α.05 rest-table: the 4th column (ΧΤΥΠΟΙ) was pushed out. Tighten the
     symbol and beat columns so all four fit. */
  .lesson-figure--score .rest-table {
    grid-template-columns: 48px 48px 1fr 34px;
    column-gap: 8px;
  }

  /* Β.01 anatomy-of-4/4: the score + the callouts sat side by side and the
     callout text spilled off the right. Stack the callouts under the score,
     and drop the now-meaningless pointer arrows. */
  .lesson-figure--score .score-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .lesson-figure--score .score-callout .arrow {
    display: none;
  }
  /* ...and collapse the callout's own grid too. Hiding the arrow REMOVES it
     from the grid, so the label would otherwise auto-place into the narrow
     36px arrow track and wrap one word per line. */
  .lesson-figure--score .score-callout {
    grid-template-columns: 1fr;
  }

  /* Β.01 / Β.02 / Β.03 meter rows: the notes column is a fixed 200px, which on
     a phone left ~130px for the stave, rendering the notation tiny beside a
     cramped text block. Stack them so the stave gets the full width. */
  .lesson-figure--score .meter-row .meter-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}


/* ==== Rhythm catalog (shared by /el/rythmoi.html and /en/rhythms.html).
   Moved from the page's inline <style> when the catalog went bilingual
   (LOCALIZATION_PLAN item 9). Uses the shared :root tokens. ==== */
  .catalog-page{max-width:860px;margin:0 auto;padding:60px 32px 80px}
  .catalog-breadcrumb{font-size:.82rem;color:var(--ink-3);margin-bottom:40px;letter-spacing:.02em}
  .catalog-breadcrumb a{color:var(--ink-3)}
  .catalog-breadcrumb a:hover{color:var(--accent)}
  .catalog-breadcrumb .sep{margin:0 8px;color:var(--ink-3);opacity:.5}
  .catalog-eyebrow{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.24em;color:var(--accent);margin-bottom:16px}
  .catalog-page h1{font-size:clamp(2.2rem,4vw,3rem);font-weight:400;margin-bottom:20px;line-height:1.2}
  .catalog-page h1 em{font-style:italic;color:var(--accent)}
  .catalog-lede{font-size:1.12rem;color:var(--ink-2);line-height:1.7;max-width:640px;margin-bottom:8px}
  .catalog-note{font-size:.9rem;color:var(--ink-3);font-style:italic;max-width:640px;margin-top:2px}

  /* Selector (desktop chips) */
  .rhythm-selector{margin:40px 0 8px}
  .rhythm-selector-label{font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
  /* The chip grid is kept in the DOM but hidden at every width. The JS reads
     the rhythm names and order from these elements, so they must exist; only
     the dropdown is shown. Reason: the 22-chip grid pushed «Ο χτύπος πάνω στο
     μέτρο» below the fold, so tapping play scrolled the most important figure
     out of sight. The dropdown costs one line of height. */
  .rhythm-chips{display:none;grid-template-columns:repeat(4,1fr);gap:10px}
  .rhythm-chip{font-family:'Inter',sans-serif;color:var(--ink-2);background:var(--surface);cursor:pointer;border:1px solid var(--border-2);border-radius:10px;padding:13px 14px;text-align:left;transition:border-color .15s,color .15s,background .15s;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .rhythm-chip:hover{border-color:var(--accent);color:var(--ink)}
  .rhythm-chip.is-active{border-color:var(--accent);color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--accent)}
  .rhythm-chip .rc-name{font-family:'Literata', Georgia, serif;font-size:1.04rem;font-weight:500;color:var(--ink);line-height:1.1}
  .rhythm-chip .rc-sig{font-family:'Literata', Georgia, serif;font-style:italic;color:var(--accent);font-size:.95rem;flex:0 0 auto}

  /* Phone dropdown + stepper */
  .rhythm-dd{position:relative;margin:0 0 8px;display:block}
  .rhythm-dd-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:600;color:var(--ink);background:var(--surface);cursor:pointer;text-align:left;border:1px solid var(--border-2);border-radius:10px;padding:15px 16px;transition:border-color .15s}
  .rhythm-dd-trigger:hover,.rhythm-dd-trigger[aria-expanded="true"]{border-color:var(--accent)}
  .rhythm-dd-trigger .cur{display:flex;flex-direction:column;gap:3px;min-width:0}
  .rhythm-dd-trigger .cur small{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
  .rhythm-dd-trigger .chev{flex:0 0 auto;color:var(--accent);transition:transform .2s}
  .rhythm-dd-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .rhythm-dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;background:var(--surface);border:1px solid var(--border-2);border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.6);max-height:360px;overflow-y:auto;padding:5px;display:none}
  .rhythm-dd-menu.open{display:block}
  .rhythm-dd-opt{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;font-family:'Inter',sans-serif;font-size:1rem;color:var(--ink-2);background:transparent;border:0;border-radius:7px;padding:11px 14px}
  .rhythm-dd-opt:hover{background:var(--surface-2);color:var(--ink)}
  .rhythm-dd-opt[aria-selected="true"]{color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--accent)}
  .rhythm-dd-opt .rc-sig{color:var(--accent);font-family:'Literata', Georgia, serif;font-style:italic;flex:0 0 auto}
  .rhythm-stepper{display:flex;align-items:center;gap:10px;margin:0 0 8px}
  .rhythm-stepper button{flex:0 0 auto;width:42px;height:42px;border-radius:9px;background:var(--surface);border:1px solid var(--border-2);color:var(--ink);font-size:1.2rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
  .rhythm-stepper button:hover{border-color:var(--accent);color:var(--accent)}
  .rhythm-stepper .pos{flex:1;text-align:center;font-size:.78rem;color:var(--ink-3);letter-spacing:.04em}

  /* Detail panel */
  .rhythm-panel{display:none}
  .rhythm-panel.is-active{display:block;animation:rFade .25s ease}
  @keyframes rFade{from{opacity:0}to{opacity:1}}
  .panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:34px 0 14px}
  .panel-cat{font-family:'Inter',sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
  .panel-name{font-family:'Literata', Georgia, serif;font-size:1.9rem;font-weight:600;color:var(--ink);line-height:1.05}
  .panel-sig{font-family:'Literata', Georgia, serif;font-style:italic;font-size:1.5rem;color:var(--accent)}

  /* Parallages toggle */
  .variation-toggle{display:flex;align-items:center;gap:8px;margin:0 0 18px;flex-wrap:wrap}
  .variation-toggle:empty{display:none}
  .variation-toggle .vt-label{font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
  .vtab{font-family:'Inter',sans-serif;font-size:.85rem;color:var(--ink-2);background:var(--surface);border:1px solid var(--border-2);border-radius:999px;padding:7px 16px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
  .vtab:hover{border-color:var(--accent);color:var(--ink)}
  .vtab.is-active{background:var(--surface-2);color:var(--ink);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

  /* Transport */
  .transport{display:flex;align-items:center;gap:16px;margin:0 0 26px;flex-wrap:wrap}
  .play-btn{display:inline-flex;align-items:center;gap:12px;cursor:pointer;background:var(--accent);color:var(--bg);border:none;border-radius:999px;padding:11px 22px 11px 16px;font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;transition:background .2s}
  .play-btn:hover{background:var(--accent-2)}
  .play-btn .glyph{width:26px;height:26px;border-radius:50%;background:rgba(22,18,16,.18);display:grid;place-items:center}
  .play-btn .glyph svg{display:block}
  .play-btn.is-playing{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}
  .play-btn.is-playing .glyph{background:rgba(217,97,59,.18)}
  .transport .stub-note{font-size:.72rem;color:var(--ink-3);font-style:italic}

  /* Notation figures (light paper card) */
  .figure{margin:0 0 22px;background:#FAFAF6;border:1px solid #E5E0D0;border-radius:6px;padding:26px 24px 20px;color:#2A241F}
  .figure-label{font-family:'Inter',sans-serif;font-size:.66rem;color:#8A7E6B;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
  .figure-label b{color:#C0481E;font-weight:600}
  /* No max-width on the svg: a bar with many notes keeps its natural width and
     scrolls here, rather than being scaled down to the point where the note
     heads are unreadable. Narrow bars still centre. */
  .figure .vex{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .figure .vex svg{display:block;margin:0 auto;height:auto}

  /* Beat-grid ruler */
  .ruler{margin-top:4px}
  .ruler-sig-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
  .ruler-sig{font-family:'Literata', Georgia, serif;font-style:italic;font-size:1.6rem;color:#2A241F;line-height:1}
  .ruler-sig small{display:block;font-family:'Inter',sans-serif;font-style:normal;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#8A7E6B;margin-top:3px}
  .ruler-formula{font-family:'Inter',sans-serif;font-size:.9rem;color:#6E6354}
  .ruler-formula b{color:#C0481E;font-weight:600;font-size:1rem}
  .ruler-groups{display:flex;gap:10px;align-items:flex-end}
  .rgroup{display:flex;flex-direction:column;gap:6px}
  .rgroup-bracket{position:relative;height:16px}
  .rgroup-bracket::before{content:'';position:absolute;left:4px;right:4px;top:6px;height:9px;border:1.5px solid #D9613B;border-bottom:none;border-radius:5px 5px 0 0;opacity:.65}
  .rgroup-bracket .rgroup-count{position:absolute;left:50%;top:-3px;transform:translateX(-50%);background:#FAFAF6;padding:0 6px;font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;color:#C0481E}
  .rgroup-cells{display:flex;gap:6px}
  /* The transition here is the RELEASE only. See .is-playing below: the
     highlight must arrive instantly or it reads as lagging behind the sound. */
  .rcell{flex:1 0 auto;min-width:34px;height:52px;border-radius:6px;border:1.5px solid #E0C9B5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:#FFFFFF;position:relative;transition:transform .12s ease-out,box-shadow .12s ease-out}
  .rcell .beat-no{font-family:'Inter',sans-serif;font-size:.74rem;color:#A89A86}
  .rcell .stroke{font-family:'Inter',sans-serif;font-size:.64rem;letter-spacing:.02em;color:#A89A86;min-height:.8em}
  .rcell.is-strong{background:#D9613B;border-color:#B84A28}
  .rcell.is-strong .beat-no{color:#FBE6DA;font-weight:700}
  .rcell.is-strong .stroke{color:#FBE6DA}
  .rcell.is-accent{background:#C8965A;border-color:#A87C45}
  .rcell.is-accent .beat-no{color:#3A2A18;font-weight:700}
  .rcell.is-accent .stroke{color:#3A2A18}
  .rcell.is-empty{background:#F4EFE4;border-style:dashed;border-color:#E3DAC8}
  .rcell.is-empty .beat-no{color:#C6BAA4}
  /* transition:none makes the hit land on the SAME frame the class is applied,
     instead of easing in over 80ms. The old symmetric .08s transition was the
     dominant cause of the visual reading as late against the audio: the eye
     takes the arrival of the movement as the beat, not its start, so the
     apparent beat sat ~80ms after the sound. Asymmetric is the right shape
     for a percussive cue: snap on, ease off. */
  .rcell.is-playing{transform:translateY(-3px);box-shadow:0 6px 14px rgba(217,97,59,.35),0 0 0 2px #D9613B;transition:none}
  .ruler-foot{font-family:'Inter',sans-serif;font-size:.78rem;color:#6E6354;margin-top:14px;text-align:center}

  @media (max-width:640px){
    .catalog-page{padding:40px 22px 60px}
    .panel-name{font-size:1.5rem}
    .panel-sig{font-size:1.25rem}
    .figure{padding:20px 14px 16px}
    .rcell{min-width:24px;height:46px}
    .ruler-groups{gap:6px}
    .rgroup-cells{gap:4px}
  }

  /* The 13-cell bars. Ζεϊμπέκικο καινούριο and Απτάλικο Παρ.2 carry 13 cells,
     Καμηλιέρικο Παρ.1 twelve; at 24px each they still overflow a phone, so the
     16th-note half-cells give back the width they never needed. Eleven cells
     (Ζεϊμπέκικο παλιό) already fitted, which is why only its stave was wrong. */
  @media (max-width:480px){
    .rcell{min-width:21px}
    .rcell.is-half{min-width:15px}
    .rcell .beat-no{font-size:.68rem}
    .ruler-groups{gap:5px}
    .rgroup-cells{gap:3px}
  }


/* ==== Dromoi catalog (shared by /el/dromoi-02-katalogos-dromon.html
   and /en/scales-02-dromoi-catalog.html). Moved from the page's inline
   <style> when the catalog went bilingual (LOCALIZATION_PLAN item 9). ==== */
    .dromos-selector { margin: 32px 0 8px; }
    .dromos-selector-label {
      font-family: 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px;
    }
    .dromos-chips { display: none; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .dromos-chip.chip-newrow { grid-column: 1; }
    .dromos-chip {
      font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 500;
      color: var(--ink-2); background: var(--surface); cursor: pointer;
      border: 1px solid var(--border-2); border-radius: 8px; padding: 11px 12px;
      text-align: center; transition: border-color .15s, color .15s, background .15s;
    }
    .dromos-chip:hover { border-color: var(--accent); color: var(--ink); }
    .dromos-chip.is-active {
      border-color: var(--accent); color: var(--ink);
      background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent);
    }
    .dromos-panel { display: none; }
    .dromos-panel.is-active { display: block; animation: dromosFade .25s ease; }
    @keyframes dromosFade { from { opacity: 0; } to { opacity: 1; } }
    .dromos-name {
      font-family: 'Literata', Georgia, serif; font-size: 1.9rem; font-weight: 600;
      color: var(--ink); margin: 30px 0 4px;
    }
    .dromos-aka { color: var(--ink-3); margin: 0 0 4px; }
    .dromos-aka em { font-style: italic; }
    .dromos-rel { color: var(--ink-3); margin: 0 0 18px; }
    .dromos-rel em { font-style: italic; }
    .dromos-note { color: var(--ink-3); font-size: 0.9rem; margin: 0 0 18px; }
    .dromos-note em { font-style: italic; }

    /* Dropdown + stepper at every width, matching the Ρυθμοί catalog. The chip
       grid stays in the DOM (the JS reads names and order from it) but is
       hidden, because a 16-chip grid pushed the content below the fold. */
    .dromos-dd { position: relative; margin: 0 0 8px; display: block; }
    .dromos-dd-trigger {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      gap: 10px; font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600;
      color: var(--ink); background: var(--surface); cursor: pointer; text-align: left;
      border: 1px solid var(--border-2); border-radius: 10px; padding: 15px 16px;
      transition: border-color .15s;
    }
    .dromos-dd-trigger:hover, .dromos-dd-trigger[aria-expanded="true"] { border-color: var(--accent); }
    .dromos-dd-trigger .cur { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .dromos-dd-trigger .cur small { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
    .dromos-dd-trigger .chev { flex: 0 0 auto; color: var(--accent); transition: transform .2s; }
    .dromos-dd-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
    .dromos-dd-menu {
      position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
      background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px;
      box-shadow: 0 18px 44px rgba(0,0,0,.6); max-height: 320px; overflow-y: auto;
      padding: 5px; display: none;
    }
    .dromos-dd-menu.open { display: block; }
    .dromos-dd-opt {
      width: 100%; display: block; text-align: left; cursor: pointer;
      font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--ink-2);
      background: transparent; border: 0; border-radius: 7px; padding: 13px 14px;
    }
    .dromos-dd-opt:hover { background: var(--surface-2); color: var(--ink); }
    .dromos-dd-opt[aria-selected="true"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
    .dromos-stepper { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
    .dromos-stepper button {
      flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px;
      background: var(--surface); border: 1px solid var(--border-2); color: var(--ink);
      font-size: 1.2rem; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
    }
    .dromos-stepper button:hover { border-color: var(--accent); color: var(--accent); }
    .dromos-stepper .pos { flex: 1; text-align: center; font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.04em; }

    @media (max-width: 640px) {
      .dromos-name { font-size: 1.55rem; }
    }

    /* Audio play button (matches the Ρυθμοί catalogue) */
    .transport { margin: 6px 0 16px; }
    .dromos-name + .transport { margin-top: 20px; }
    .play-btn {
      display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
      background: var(--accent); color: var(--bg); border: none; border-radius: 999px;
      padding: 11px 22px 11px 16px; font-family: 'Inter', sans-serif; font-weight: 600;
      font-size: 0.95rem; transition: background .2s;
    }
    .play-btn:hover { background: var(--accent-2); }
    .play-btn .glyph { width: 26px; height: 26px; border-radius: 50%; background: rgba(22,18,16,.18); display: grid; place-items: center; }
    .play-btn .glyph svg { display: block; }
    .play-btn.is-playing { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
    .play-btn.is-playing .glyph { background: rgba(217,97,59,.18); }

/* --- 19. Chords tab (instrument pages) -----------------------
   The "Συγχορδίες / Chords" tab on the Τετράχορδο and Τρίχορδο
   pages, rendered by js/chords.js into the shared .fb-layout
   (controls sidebar + display area, section 12). Everything here
   is the chord-specific part: the grid of position cards, the
   badges, the pager, and the windowed chord diagrams.

   Mobile: .fb-layout already collapses to one column at 920px
   (section 12). The card grid goes single-column on its own via
   auto-fill; the diagrams are compact SVGs that scale to the card
   width, so nothing scrolls sideways on a phone. */

.ch-sublabel {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 10px 0 8px;
}
.fb-pills--chords {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fb-pills--chords .fb-pill { min-width: 0; }
/* Section 12 turns non-notes pills into rows; the chord pills stack
   their name over the symbol like the note pills do. */
.fb-pills.fb-pills--chords .fb-pill {
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
}
.fb-pills.fb-pills--chords .fb-pill .gr {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 0.88rem;
  text-align: center;
}
.fb-pills.fb-pills--chords .fb-pill .en { font-size: 0.66rem; color: var(--ink-3); min-height: 1em; }
.fb-pills.fb-pills--chords .fb-pill.is-active .en { color: var(--gold); }

/* Display head extras */
.ch-title-en {
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  color: var(--ink-3);
  font-weight: 400;
  margin-left: 10px;
}
.ch-ivals { color: var(--ink-3); margin-left: 8px; font-size: 0.85rem; }
.ch-note {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--gold);
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 12px;
}

/* Position cards */
.ch-cards {
  display: grid;
  /* Explicit columns, not auto-fill: WebKit miscomputes the height of
     an auto-fill grid inside a 1fr grid item, and everything after the
     cards then overlaps them. Two fixed columns resolve identically in
     every engine; one column below 680px. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.ch-card {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 18px 16px 14px;
}
.ch-card-head { margin-bottom: 4px; }
.ch-card-title {
  font-family: 'Literata', Georgia, serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}
/* Which string that is, by name. Muted, so the card still reads as
   "the root is on the 4th string" first. */
.ch-card-string { color: var(--ink-3); font-weight: 500; }
.ch-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
  margin: 6px 0 4px;
}
.ch-badge {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid;
}
.ch-badge--inv { color: var(--ink-2); border-color: var(--border-2); background: var(--bg); }
.ch-badge--shell { color: var(--accent); border-color: var(--accent-2); }
.ch-board-wrap { margin: 4px -4px 0; }
.ch-svg { display: block; width: 100%; height: auto; }
.ch-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ch-count { font-size: 0.72rem; color: var(--ink-3); }
.ch-pager { display: flex; align-items: center; gap: 10px; }
.ch-pager button {
  width: 30px;
  height: 30px;
  background: var(--bg);
  color: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.ch-pager button:hover { border-color: var(--accent); color: var(--ink); }
.ch-pager button:disabled { opacity: 0.35; cursor: default; }
.ch-empty { font-size: 0.82rem; color: var(--ink-3); padding: 30px 6px; line-height: 1.6; }

/* Chords tab responsive. The pager buttons grow to a proper touch
   target; the note pills keep the 3-column fallback of section 12. */
@media (max-width: 680px) {
  .ch-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ch-pager button { width: 38px; height: 38px; }
}

/* --- 20. Dromoi tab (instrument pages) -----------------------
   The "Δρόμοι / Scales" tab on the Τετράχορδο and Τρίχορδο pages,
   rendered by js/dromoi.js into the shared .fb-layout (section 12).
   One τρόπος at a time, chosen in the controls; the boards are
   13-fret segments of the neck with real fret numbers, one per
   string, stacked vertically in the display area. */

.fb-pills--dromoi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Doubled class beats the section-12 :not(--notes) padding rule.
   Everything left-aligned, one- and two-line names alike; the one
   name too long for a column (Ταμπαχανιώτικος) carries a soft
   hyphen from js/dromoi.js and wraps like the two-word names. */
.fb-pills.fb-pills--dromoi .fb-pill {
  min-width: 0;
  padding: 8px 10px;
  justify-content: flex-start;
}
.fb-pills.fb-pills--dromoi .fb-pill .gr {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 0.82rem;
  text-align: left;
}

/* The τρόπος selector reads as a menu: one full-width pill per row,
   the four unbuilt τρόποι disabled with a small "σύντομα" tag. */
.fb-pills--modes { display: grid; grid-template-columns: minmax(0, 1fr); }
.fb-pills--modes .fb-pill { text-align: left; }
.fb-pills--modes .fb-pill:disabled { opacity: 0.45; cursor: default; }
.dr-soon {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: 8px;
}

/* Display head extras: the interval row on its own line below the
   note list, same font and dashes, one shade more muted so the notes
   stay the primary line. It wraps on its own terms on the phone. */
.dr-gaps { color: var(--ink-3); margin-top: 2px; }
/* One short line explaining the reasoning of the chosen τρόπος */
.dr-mode-note {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 640px;
}

/* Segment boards, one per string, full width of the display area */
.dr-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.dr-card {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 18px 16px 14px;
  min-width: 0;
}
.dr-card-head { margin-bottom: 6px; }
.dr-card-title {
  font-family: 'Literata', Georgia, serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}
.dr-card-string { color: var(--ink-3); font-weight: 500; }
/* Label above a board when a card carries two (τρόπος 6: ανιούσα /
   κατιούσα of a direction-dependent δρόμος) */
.dr-board-label {
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin: 12px 0 0;
}
/* Right-hand tag on a position card head, e.g. the note split */
.dr-card-sub {
  float: right;
  font-size: 0.72rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  padding-top: 4px;
}
/* The horizontal 13-fret segment needs a minimum width to stay
   legible; between the layout collapse and the phone breakpoint it
   scrolls sideways inside its card instead of shrinking the dots
   into confetti. Below 620px js/dromoi.js renders the vertical
   variant instead, which fits the width and centers itself. */
.dr-board-wrap { margin: 4px -4px 0; overflow-x: auto; }
.dr-svg { display: block; height: auto; }
.dr-svg--h { width: 100%; min-width: 620px; }
.dr-svg--v { width: auto; max-width: 100%; max-height: 640px; margin: 0 auto; }

/* --- 21. Lessons page (bouzouki-lessons / mathimata-mpouzoukiou) ---
   The one commercial page on an otherwise free site, so it deliberately
   reuses the About page's reading rhythm rather than inventing a louder
   treatment. Three things are new:
     .lessons-intro   hero, copy left / landscape photo right
     .lessons-cards   the two "where you are starting from" panels
     .lessons-trial   the enquiry form block
   The photo is NOT aspect-cropped (unlike .about-photo, which forces
   4/5): the source is a 1206x696 landscape detail shot, and forcing a
   ratio on it would either letterbox or cut the fretting hand. Letting
   it keep its own ratio also keeps it inside the resolution it has;
   see the note in section 4 of Mockups/lessons-hero-mockup.html.
*/

.lessons { padding: 0 0 40px; }
.lessons .lesson-breadcrumb { margin-top: 40px; }

.lessons-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 32px 0 56px;
}

.lessons-lead h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.15;
  margin: 0 0 18px;
}

.lessons-lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 18px;
}

.lessons-hello {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-2);
}

.lessons-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.lessons-photo { margin: 0; }

/* height:auto for the same reason as .about-photo img: the element
   carries width/height attributes against layout shift, and the height
   attribute would otherwise pin a specified height. */
.lessons-photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border-2);
}

/* Prose. Same measure and rhythm as .about-body so the two pages read
   as one voice. */
.lessons-body {
  max-width: 680px;
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--ink-2);
}
.lessons-body p { margin-bottom: 1.4em; }
.lessons-body h2 {
  font-size: 1.7rem;
  color: var(--ink);
  margin: 1.8em 0 0.7em;
}
.lessons-body h2:first-child { margin-top: 0; }

.lessons-list {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
}
.lessons-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 0.75em;
}
/* A terracotta rule rather than a bullet glyph, matching the quiet
   editorial treatment used elsewhere on dark. */
.lessons-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}
.lessons-list strong { color: var(--ink); font-weight: 600; }

/* The two starting-point panels. */
.lessons-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0.6em 0 3em;
}
.lessons-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 26px;
}
.lessons-card h3 {
  font-family: 'Literata', Georgia, serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 12px;
}
.lessons-card p {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--ink-2);
}

/* The practical facts. A definition list, because that is what it is:
   four labels and four answers, scanned rather than read. */
.lessons-facts {
  max-width: 680px;
  margin: 3em 0;
  border-top: 1px solid var(--border);
}
.lessons-facts > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.lessons-facts dt {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 3px;
}
.lessons-facts dd {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-2);
}

/* --- the enquiry form ---------------------------------------------
   Visually a surface panel so it reads as the destination of the page.
   scroll-margin-top keeps the heading clear of the sticky header when
   the hero button jumps to #trial. */
.lessons-trial {
  max-width: 680px;
  margin: 3.4em 0 1em;
  padding: 34px 32px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  scroll-margin-top: 90px;
}
.lessons-trial h2 {
  font-size: 1.7rem;
  color: var(--ink);
  margin-bottom: 0.6em;
}
.lessons-trial-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: 26px;
}

.lessons-field { margin-bottom: 18px; }
.lessons-field label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.lessons-field input,
.lessons-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-2);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
}
.lessons-field textarea { resize: vertical; min-height: 120px; }
.lessons-field input::placeholder,
.lessons-field textarea::placeholder { color: var(--ink-3); }
.lessons-field input:focus,
.lessons-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.lessons-form button { margin-top: 6px; }
.lessons-form button[aria-busy="true"] { opacity: 0.6; cursor: wait; }

/* The honeypot. Bots fill in what they can read in the markup, so this
   must be hidden from people without being display:none (some bots skip
   those). Off-screen, zero size, out of the tab order, aria-hidden in
   the markup. */
.lessons-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lessons-fineprint {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 18px;
}
.lessons-fineprint a { color: var(--ink-3); text-decoration: underline; }
.lessons-fineprint a:hover { color: var(--accent); }

.lessons-alt {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-top: 14px;
}
.lessons-alt a { color: var(--accent); }

@media (max-width: 860px) {
  .lessons-intro {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 36px;
  }
  /* Photo above the copy on phones: the hero image is the fastest way to
     say what the page is, and at 1.74:1 it costs about 200px of screen. */
  .lessons-photo { order: -1; }
  .lessons-cards { grid-template-columns: 1fr; }
  .lessons-facts > div { grid-template-columns: 1fr; gap: 6px; }
  .lessons-trial { padding: 26px 20px; }
}

/* One-line nudge to the paid lessons page, sitting directly above the
   inline newsletter block on lesson and tool pages. Deliberately plain
   text rather than a second CTA panel: two stacked panels split attention
   instead of adding it, and a sales card under every free lesson works
   against the reason people trust the free material. See the comment at
   the top of src/_includes/_lessons-cta.njk for the traffic data that
   prompted it. */
.lesson-cta {
  margin: 3em 0 -1.6em;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-3);
}

.lesson-cta a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.lesson-cta a:hover {
  border-bottom-color: var(--accent);
}