/* ── Maqam Lessons · maqamlessons.com — "manuscript / tarab" design system ────
   One responsive shell for the whole site (proposal §05). Warm parchment ground,
   deep ink, brass rules, garnet interaction; each jins family keeps one pigment
   everywhere it appears (same palette as the analysis app). Light + dark.
   The second half restyles the legacy content markup (jinsline pitch grids,
   maqam networks, hover players, track boxes …) without touching its HTML. */

/* Light, cream, and close to the original site's own hues (page #FDF6D5, wrapper
   #F3EED8, ink #5D311E, hover red #BF4D47). Light is the DEFAULT for everyone —
   dark is a manual toggle in the header (html[data-theme="dark"]). */
:root, :root[data-theme="light"] {
  --paper: #fbf4d8;
  --paper-edge: #f2e8c4;
  --surface: #f4eeda;
  --surface-2: #ede6c5;
  --plate: #faf6e9;
  --ink: #2f2418;
  --ink-soft: #6b5a42;
  --ink-faint: #99886b;
  --line: rgba(93, 49, 30, 0.24);
  --line-soft: rgba(93, 49, 30, 0.12);
  --line-strong: rgba(93, 49, 30, 0.46);
  --brass: #9a7328;
  --brass-deep: #74551c;
  --garnet: #a8433a;        /* the original site's #BF4D47, deepened for contrast */
  --garnet-deep: #8c3129;
  --link: #6f4522;          /* original brown links, red on hover */
  --link-hover: #bf4d47;
  --cream: #f7efdd;
  --shadow: 0 1px 2px rgba(93, 49, 30, 0.05), 0 10px 30px -22px rgba(93, 49, 30, 0.4);

  /* jins-family pigments — Sami's original color coding, refined
     (mirrors src/theory/family.ts) */
  --f-rst: #7d2a2c;  /* Rast — oxblood (orig #611E20) */
  --f-byt: #1a7a33;  /* Bayati — green (orig #0B6723) */
  --f-sba: #157a58;  /* Saba — sea green (orig #066E4B) */
  --f-sik: #f0d02c;  /* Sikah — yellow (orig #FFE92D), dark ink */
  --f-hjz: #5f8c10;  /* Hijaz — olive (orig #6DA712) */
  --f-nah: #232059;  /* Nahawand — navy (orig #150D48) */
  --f-nkr: #6d2a5c;  /* Nakriz — plum (orig #631C50) */
  --f-ajm: #cf5a1d;  /* Ajam — orange (orig #D85914) */
  --f-krd: #144a75;  /* Kurd — steel blue (orig #063157) */
  --f-jhk: #9b2f57;  /* Jiharkah (orig #93204C) */
  --f-mkh: #e6ba1f;  /* Mukhalif (orig #F9C815), dark ink */
  --f-skb: #ccd83f;  /* Sikah Beladi (orig #DFF80F), dark ink */
  --f-mur: #46265e;  /* Nahawand Murassaa (orig #37104B) */
  --f-akd: #2b3252;  /* Athar Kurd (orig #191E3E) */
  --f-zam: #1d5c60;  /* Saba Zamzama (orig #0F474B) */
  --f-dark-ink: #2c2302;

  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ar: "Amiri", "Scheherazade New", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #16120b;
  --paper-edge: #100d07;
  --surface: #1e1810;
  --surface-2: #261f14;
  --plate: #efe7d3;         /* notation images stay on a light plate */
  --ink: #f1e7cf;
  --ink-soft: #bcac86;
  --ink-faint: #897c60;
  --line: rgba(228, 208, 158, 0.15);
  --line-soft: rgba(228, 208, 158, 0.08);
  --line-strong: rgba(228, 208, 158, 0.32);
  --brass: #d3a545;
  --brass-deep: #e0b45c;
  --garnet: #e08a78;
  --garnet-deep: #ec9c8b;
  --link: #d9b58a;
  --link-hover: #e08a78;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px -22px rgba(0, 0, 0, 0.8);

  --f-rst: #a34e50;
  --f-byt: #2f9b4c;
  --f-sba: #2b9873;
  --f-sik: #e7cb3e;
  --f-hjz: #82ad2c;
  --f-nah: #4c48a5;
  --f-nkr: #95487e;
  --f-ajm: #e0763a;
  --f-krd: #2f74ad;
  --f-jhk: #bb5680;
  --f-mkh: #edc63a;
  --f-skb: #d9e35e;
  --f-mur: #6b4692;
  --f-akd: #4d5a8c;
  --f-zam: #35847f;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: radial-gradient(120% 80% at 50% -10%, var(--surface) 0%, var(--paper) 46%, var(--paper-edge) 100%) fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
::selection { background: rgba(168, 120, 29, 0.25); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); border: 1px solid var(--brass); border-radius: 8px; padding: 8px 14px;
}
.skip:focus { left: 12px; top: 12px; }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 0 var(--line-soft);
}
.mast {
  max-width: 1120px; margin: 0 auto; padding: 10px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .t { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: 0.01em; }
.brand .ar { font-family: var(--font-ar); font-size: 17px; color: var(--brass-deep); }
nav.sections { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
nav.sections .nl {
  font-size: 12.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; padding: 7px 11px; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
nav.sections .nl:hover { color: var(--ink); background: rgba(168, 120, 29, 0.1); }
/* the active section reads like the original site's beige tab */
nav.sections .nl.on {
  color: var(--garnet-deep); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; font-weight: 600;
}
nav.sections .app-nl {
  color: var(--brass-deep); border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  border-radius: 999px; margin-left: 6px; padding: 6px 13px;
}
nav.sections .app-nl:hover { background: rgba(168, 120, 29, 0.13); color: var(--brass-deep); }
.theme-toggle {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 50%; width: 30px; height: 30px; margin-left: 8px; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.theme-toggle:hover { border-color: var(--brass); color: var(--ink); }
.theme-toggle:active { transform: scale(0.92); }

/* ── page frame ─────────────────────────────────────────────────────────── */
.page { max-width: 1120px; margin: 0 auto; padding: 18px 22px 90px; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-faint); margin: 10px 2px 0; }
.crumb a { color: var(--brass-deep); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11.5px; font-weight: 600; }
.crumb a:hover { text-decoration: underline; }
.crumb .sep { color: var(--ink-faint); }

.related { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 14px 0 4px; }
.related .rlab { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-right: 3px; }
.rchip {
  font-size: 12.5px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  transition: border-color 0.15s, background 0.15s;
}
.rchip:hover { border-color: var(--brass); color: var(--ink); background: rgba(168, 120, 29, 0.08); }
.rchip.app-chip { color: var(--garnet-deep); border-color: color-mix(in srgb, var(--garnet) 42%, transparent); background: color-mix(in srgb, var(--garnet) 7%, transparent); }
/* family-coded related chips keep their pigment as a leading dot */
.rchip.rst, .rchip.byt, .rchip.sba, .rchip.sik, .rchip.hjz, .rchip.nah, .rchip.nkr, .rchip.ajm,
.rchip.krd, .rchip.jhk, .rchip.mkh, .rchip.skb, .rchip.mur, .rchip.akd, .rchip.zam { padding-left: 24px; position: relative; }
.rchip.rst::before, .rchip.byt::before, .rchip.sba::before, .rchip.sik::before, .rchip.hjz::before,
.rchip.nah::before, .rchip.nkr::before, .rchip.ajm::before, .rchip.krd::before, .rchip.jhk::before,
.rchip.mkh::before, .rchip.skb::before, .rchip.mur::before, .rchip.akd::before, .rchip.zam::before {
  content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--fam, var(--brass));
}
.rchip.rst { --fam: var(--f-rst); } .rchip.byt { --fam: var(--f-byt); } .rchip.sba { --fam: var(--f-sba); }
.rchip.sik { --fam: var(--f-sik); } .rchip.hjz { --fam: var(--f-hjz); } .rchip.nah { --fam: var(--f-nah); }
.rchip.nkr { --fam: var(--f-nkr); } .rchip.ajm { --fam: var(--f-ajm); } .rchip.krd { --fam: var(--f-krd); }
.rchip.jhk { --fam: var(--f-jhk); } .rchip.mkh { --fam: var(--f-mkh); } .rchip.skb { --fam: var(--f-skb); }
.rchip.mur { --fam: var(--f-mur); } .rchip.akd { --fam: var(--f-akd); } .rchip.zam { --fam: var(--f-zam); }

.site-foot {
  margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--ink-faint); font-size: 13px;
}
.site-foot a { color: var(--ink-soft); }

/* ── content typography ─────────────────────────────────────────────────── */
/* the content sits in a soft parchment panel — a modern echo of the original
   site's bordered wrapper box */
.content {
  margin-top: 22px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 34px 30px; box-shadow: var(--shadow);
}
.content h1, .content h2, .content h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; text-wrap: balance; }
.content h1 { font-size: clamp(30px, 5vw, 44px); margin: 18px 0 12px; }
.content > h1 { text-align: center; } /* the original site centered its page titles */
.content h1.supertitle { font-size: clamp(38px, 6vw, 58px); font-variant: small-caps; letter-spacing: 0.12em; }
.content h2 { font-size: clamp(24px, 3.6vw, 32px); margin: 30px 0 8px; }
.content h3 { font-size: 21px; margin: 24px 0 6px; }
.content h4 { font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); margin: 10px 0 4px; font-weight: 600; }
.content h4 a { color: var(--garnet); }
.content p { margin: 12px 0; max-width: 76ch; }
.content li { margin: 4px 0; }
.content hr { border: none; height: 1px; background: var(--line); margin: 26px 0; }
.content img { max-width: 100%; height: auto; }
/* notation & diagram plates — keep black-on-light artwork readable in dark mode */
.content img[src$=".png"], .content img[src$=".gif"] {
  background: var(--plate); border-radius: 6px; padding: 4px;
}
.content img[src$=".jpg"] { border-radius: 10px; }
.content .spacer { display: block; clear: both; height: 12px; }
.content table { border-collapse: collapse; }

.attention, span.attention, p.attention { color: var(--garnet); }
p.attention { display: block; clear: both; }
.wordsizeemphasis { color: var(--ink); font-size: 112%; font-weight: 600; }
:root[data-theme="dark"] .wordsizeemphasis { color: var(--cream); }
.righttext { float: right; font-size: 88%; opacity: 0.92; font-weight: 400; }
.textborder { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 12px 16px; }
.floatleft { float: left; margin: 6px 26px 12px 0; max-width: min(340px, 46%); border-radius: 10px; }
h4.pagenumbers { text-align: left; font-family: var(--font-mono); text-transform: none; letter-spacing: 0.02em; font-size: 12.5px; color: var(--ink-faint); }
h4.pagenumbers a { color: var(--brass-deep); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; margin: 0 2px; display: inline-block; }
h4.pagenumbers a:hover { border-color: var(--brass); background: rgba(168, 120, 29, 0.08); }

/* ── family pigments on legacy codes ─────────────────────────────────────────
   Each family class sets BOTH the ground and its ink (cream on the deep colors,
   dark on the yellows, as on the original site). Elements without a family class
   fall back to beige ground + regular ink, so they stay readable in light mode. */
.rst { --fam: var(--f-rst); --fam-ink: var(--cream); }
.byt { --fam: var(--f-byt); --fam-ink: var(--cream); }
.sba { --fam: var(--f-sba); --fam-ink: var(--cream); }
.sik { --fam: var(--f-sik); --fam-ink: var(--f-dark-ink); }
.hjz { --fam: var(--f-hjz); --fam-ink: var(--cream); }
.nah { --fam: var(--f-nah); --fam-ink: var(--cream); }
.nkr { --fam: var(--f-nkr); --fam-ink: var(--cream); }
.ajm { --fam: var(--f-ajm); --fam-ink: var(--cream); }
.krd { --fam: var(--f-krd); --fam-ink: var(--cream); }
.jhk { --fam: var(--f-jhk); --fam-ink: var(--cream); }
.mkh { --fam: var(--f-mkh); --fam-ink: var(--f-dark-ink); }
.skb { --fam: var(--f-skb); --fam-ink: var(--f-dark-ink); }
.mur { --fam: var(--f-mur); --fam-ink: var(--cream); }
.akd { --fam: var(--f-akd); --fam-ink: var(--cream); }
.zam { --fam: var(--f-zam); --fam-ink: var(--cream); }
.hjzk { --fam: var(--f-hjz); --fam-ink: var(--cream); }
.r2nd { --fam: var(--f-rst); --fam-ink: var(--cream); }
.maq { --fam: var(--surface-2); --fam-ink: var(--ink); }

/* colored maqam/jins titles (h2.byt "Bayati Analyses" etc.) */
.content h2[class] {
  display: table; margin-left: auto; margin-right: auto; padding: 8px 26px;
  background: var(--fam, var(--surface-2)); color: var(--fam-ink, var(--ink));
  border-radius: 10px; box-shadow: var(--shadow); text-align: center;
}

/* ── the jinsline pitch grid (the heart of the analyses) ─────────────────────
   Original geometry preserved: one scale degree = 40px; `jinsN` positions a box
   at degree N (N=1 at 4 units), `Nnote` sets its span. A brass gutter holds the
   sample number; the old 60px <audio> is now a round play button (site.js). */
.jinsgrid {
  border: 1px solid var(--line); border-radius: 12px; background: var(--plate);
  box-shadow: var(--shadow); margin: 18px 0; padding: 6px 10px;
}
.jinsgrid-scroll { overflow-x: auto; }
/* which song a quoted clip grid comes from — links to the canonical analysis */
.grid-src {
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
  padding: 6px 8px 4px; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
}
.grid-src a { color: var(--garnet); text-transform: none; letter-spacing: 0; font-size: 13px; }
.jinsgrid-in { min-width: 1004px; position: relative;
  --gu: 36px;   /* one scale degree */
  --g0: 48px;   /* number gutter before degree "4 low" */
}
.jinsline { position: relative; height: 46px; border-top: 1px dashed var(--line-soft); }
.jinsline:first-child { border-top: none; }
.jinsline h3 {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--brass); letter-spacing: 0.04em;
}
.jinsline > div { position: absolute; top: 8px; }
.jinsline a {
  display: block; position: absolute; top: 0; height: 30px;
  background: var(--fam, var(--surface-2)); color: var(--fam-ink, var(--ink));
  border: 1px solid rgba(0, 0, 0, 0.28); border-radius: 6px;
  font-size: 12.5px; font-weight: 500; line-height: 28px; padding: 0 9px;
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter 0.15s, transform 0.1s;
}
.jinsline a:hover { filter: brightness(1.09) saturate(1.05); }
.jinsline a:active { transform: translateY(1px); }
.jinsline a.playing { box-shadow: 0 0 0 2px var(--garnet); }
.jinsline p {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  margin: 0; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--ink-soft);
  max-width: 240px; text-align: right; text-indent: 0; line-height: 1.25;
}
.jinsline p a { position: static; display: inline; height: auto; background: none; border: none;
  color: var(--garnet); text-decoration: underline; padding: 0; font-style: normal; }

/* degree positions (original px / 40 = units above degree "4 low") */
.jinsline .jins4low { left: calc(var(--g0) + 0 * var(--gu)); }
.jinsline .jins5low { left: calc(var(--g0) + 1 * var(--gu)); }
.jinsline .jins6low { left: calc(var(--g0) + 2 * var(--gu)); }
.jinsline .jins7low { left: calc(var(--g0) + 3 * var(--gu)); }
.jinsline .jins1  { left: calc(var(--g0) + 4 * var(--gu)); }
.jinsline .jins2  { left: calc(var(--g0) + 5 * var(--gu)); }
.jinsline .jins3  { left: calc(var(--g0) + 6 * var(--gu)); }
.jinsline .jins4  { left: calc(var(--g0) + 7 * var(--gu)); }
.jinsline .jins5  { left: calc(var(--g0) + 8 * var(--gu)); }
.jinsline .jins6  { left: calc(var(--g0) + 9 * var(--gu)); }
.jinsline .jins7  { left: calc(var(--g0) + 10 * var(--gu)); }
.jinsline .jins8  { left: calc(var(--g0) + 11 * var(--gu)); }
.jinsline .jins9  { left: calc(var(--g0) + 12 * var(--gu)); }
.jinsline .jins10 { left: calc(var(--g0) + 13 * var(--gu)); }
.jinsline .jins11 { left: calc(var(--g0) + 14 * var(--gu)); }
.jinsline .jins12 { left: calc(var(--g0) + 15 * var(--gu)); }
.jinsline .jins13 { left: calc(var(--g0) + 16 * var(--gu)); }
.jinsline .jins14 { left: calc(var(--g0) + 17 * var(--gu)); }
.jinsline .jins15 { left: calc(var(--g0) + 18 * var(--gu)); }

a.threenote { width: calc(2 * var(--gu)); }
a.fournote  { width: calc(3 * var(--gu)); }
a.fivenote  { width: calc(4 * var(--gu)); }
a.sixnote   { width: calc(5 * var(--gu)); }
a.sevennote { width: calc(6 * var(--gu)); }
a.eightnote { width: calc(7 * var(--gu)); }

/* per-clip play button, positioned on the same degree scale */
.clip-play {
  position: absolute; top: 8px; width: 30px; height: 30px; margin-left: 8px;
  border-radius: 50%; border: 1px solid var(--brass); background: var(--paper);
  cursor: pointer; padding: 0; transition: background 0.15s, transform 0.1s;
}
.clip-play::before {
  content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--brass-deep);
}
.clip-play:hover { background: rgba(168, 120, 29, 0.15); }
.clip-play:active { transform: scale(0.92); }
.clip-play.playing { background: var(--brass); border-color: var(--brass-deep); }
.clip-play.playing::before {
  border: none; width: 8px; height: 11px; transform: translate(-62%, -50%);
  border-left: 3px solid var(--paper); border-right: 3px solid var(--paper);
}

/* ── embedded interactive analysis (the app inside a song page) ──────────── */
.app-embed {
  margin: 22px 0 10px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.app-embed iframe { display: block; width: 100%; height: 760px; border: none; transition: height 0.2s ease; }

details.legacy-clips { margin: 18px 0; }
details.legacy-clips > summary {
  cursor: pointer; display: inline-block; list-style: none;
  font-size: 13px; letter-spacing: 0.04em; color: var(--brass-deep);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
  background: var(--surface); transition: border-color 0.15s, background 0.15s;
}
details.legacy-clips > summary::before { content: "▸ "; color: var(--brass); }
details.legacy-clips[open] > summary::before { content: "▾ "; }
details.legacy-clips > summary::-webkit-details-marker { display: none; }
details.legacy-clips > summary:hover { border-color: var(--brass); background: rgba(168, 120, 29, 0.08); }

/* native audio (full recordings, vocabulary sentences, network samples) */
.content audio { height: 36px; max-width: 100%; vertical-align: middle; }
.content h3 audio { margin-left: 14px; }

/* ── boxes & lists carried over from the analysis site ──────────────────── */
.songleftbox {
  border: 1px solid var(--line); border-left: 3px solid var(--brass);
  background: var(--surface); border-radius: 10px; box-shadow: var(--shadow);
  padding: 14px 18px; margin: 12px 0; max-width: 72ch; font-size: 15.5px;
}
.songleftbox hr { margin: 12px 0; }

.leftbox, .rightbox, .leftbox1, .rightbox1, .leftbox2, .rightbox2 {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 14px 20px; margin: 10px 0; vertical-align: top;
}
@media (min-width: 860px) {
  .leftbox1, .leftbox2, .leftbox, .rightbox1, .rightbox2, .rightbox {
    display: inline-block; width: calc(50% - 14px); margin: 10px 6px;
  }
}
.textboxleft, .textboxright {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px;
  padding: 14px 18px; margin: 12px 0; font-size: 15px;
}
@media (min-width: 860px) {
  .textboxleft  { float: left; width: 46%; margin: 8px 22px 12px 0; }
  .textboxright { float: right; width: 46%; margin: 8px 0 12px 22px; }
}
#indextext { clear: both; }

/* study-track cards */
.trackgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.trackbox {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  border-top: 3px solid var(--track, var(--brass)); box-shadow: var(--shadow); padding: 14px 18px;
}
.trackbox h3 { margin: 0 0 6px; font-size: 20px; }
.trackbox h3 a { text-decoration: none; }
.trackbox ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-soft); }
#beginner { --track: var(--f-byt); }
#theory   { --track: var(--f-nah); }
#musician { --track: var(--f-rst); }
#expert   { --track: var(--f-sik); }

/* colored song / maqam link lists */
.songlinklist ul, .maqamlinklist ul { list-style: none; padding: 0; margin: 12px 0; }
.songlinklist > ul > li, .maqamlinklist > div > ul > li { margin: 6px 0; }
.songlinklist a, .maqamlinklist a {
  display: block; text-decoration: none; padding: 9px 14px; border-radius: 9px;
  background: var(--fam, var(--surface-2)); color: var(--fam-ink, var(--ink));
  border: 1px solid rgba(0, 0, 0, 0.22); box-shadow: var(--shadow);
  font-size: 15px; transition: filter 0.15s, transform 0.12s;
}
.songlinklist a:hover, .maqamlinklist a:hover { filter: brightness(1.08) saturate(1.04); transform: translateX(3px); color: var(--fam-ink, var(--ink)); }
.songlinklist { max-width: 640px; }
.maqamlinklist ul ul { padding: 2px 0 6px 14px; }
.maqamlinklist ul ul li { margin: 2px 0; }
.maqamlinklist ul ul a { background: none; border: none; box-shadow: none; color: var(--garnet); display: inline; padding: 0; text-decoration: underline; }
.maqamlinklist ul ul a:hover { color: var(--garnet-deep); transform: none; filter: none; }

/* jins / maqam chip nav (playground index, jins list pages) */
.jinslistnav ul, .maqamlistnav ul { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jinslistnav li, .maqamlistnav li { margin: 0; }
.jinslistnav a, .maqamlistnav a {
  display: inline-block; text-decoration: none; padding: 7px 14px; border-radius: 999px;
  font-size: 13.5px; border: 1px solid var(--line);
  background: var(--fam, var(--surface)); color: var(--fam-ink, var(--ink));
  transition: filter 0.15s, transform 0.12s;
}
.maqamlistnav a { background: var(--surface); color: var(--ink); }
.maqamlistnav a:hover { border-color: var(--brass); background: rgba(168, 120, 29, 0.08); }
.jinslistnav a[class]:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* the ComingSoon full jins roster */
.fulllist { display: inline-block; vertical-align: top; margin: 8px 18px 8px 0; }
.fulllist ul { list-style: none; padding: 0; margin: 0; }
.fulllist li {
  padding: 6px 14px; margin: 4px 0; border-radius: 8px; font-size: 13.5px;
  background: var(--fam, var(--surface-2)); color: var(--fam-ink, var(--ink));
  border: 1px solid rgba(0, 0, 0, 0.2); min-width: 170px;
}

/* legacy pager (prev / next / up) */
.analysisnav {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  border: none; background: none; margin: 16px 0; font-size: 13px;
}
.analysisnav .spacer { display: none; }
.analysisnav a {
  text-decoration: none; color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.analysisnav a:hover { border-color: var(--brass); color: var(--ink); background: rgba(168, 120, 29, 0.08); }
.analysisnav a[href=""] { display: none; }
.analysisnav a#next, .analysisnav a#nextfirst, .analysisnav a#upnext { margin-left: auto; }
.analysisnav a#upnext ~ a#next, .analysisnav a#upnext ~ a#nextfirst { margin-left: 0; }

/* ── the 2010 network demo (Flash removed, geometry preserved) ───────────────
   Node positions are pixel-registered to the hand-drawn network PNGs, so the
   original coordinates are kept exactly; the frame around them modernizes. */
.netwrap { max-width: 100%; }
@media (max-width: 880px) {
  /* the graphs are pixel-registered and can't reflow — scroll them instead,
     with room below so the hover/tap popups aren't clipped */
  .netwrap { overflow-x: auto; padding-bottom: 150px; }
}
#rastbg, #suzdalarbg, #bayatishuribg, #hijazbg, #hijazkarbg, #nakrizbg, #sitemapbg,
#introbg1, #introbg3, #introbg4 {
  position: relative; width: 800px; background-repeat: no-repeat;
  background-color: var(--plate); border-radius: 12px;
}
:root[data-theme="dark"] #rastbg, :root[data-theme="dark"] #suzdalarbg,
:root[data-theme="dark"] #bayatishuribg, :root[data-theme="dark"] #hijazbg,
:root[data-theme="dark"] #hijazkarbg, :root[data-theme="dark"] #nakrizbg,
:root[data-theme="dark"] #sitemapbg, :root[data-theme="dark"] #introbg1,
:root[data-theme="dark"] #introbg3, :root[data-theme="dark"] #introbg4 { box-shadow: 0 0 0 1px var(--line); }
#rastbg        { height: 420px; background-image: url(assets/playground/images/010_01MaqamRastNetwork.png); background-position: 58px 42px; }
#suzdalarbg    { height: 200px; background-image: url(assets/playground/images/010_03MaqamSuzdalarNetwork.png); background-position: 59px 51px; }
#bayatishuribg { height: 350px; background-image: url(assets/playground/images/020_02MaqamBayatiShuriNetwork.png); background-position: 53px 47px; }
#hijazbg       { height: 285px; background-image: url(assets/playground/images/040_01MaqamHijazNetwork.png); background-position: 59px 40px; }
#hijazkarbg    { height: 200px; background-image: url(assets/playground/images/040_02MaqamHijazkarNetwork.png); background-position: 240px 0px; }
#nakrizbg      { height: 200px; background-image: url(assets/playground/images/061_01MaqamNakrizNetwork.png); background-position: 66px 43px; }
#sitemapbg     { height: 700px; background-image: url(assets/playground/images/SiteMapNetwork.png); background-position: 285px 26px; }
#introbg1 { height: 100px; }
#introbox2 { height: 110px; }
#introbg3 { height: 185px; background-image: url(assets/playground/images/introbg3.png); background-position: 270px 52px; }
#introbg4 { height: 190px; background-image: url(assets/playground/images/introbg4.png); background-position: 272px 52px; }

#maqamnetwork { position: relative; top: 20px; left: 0; }
#maqamnetwork > div { position: absolute; width: 120px; height: 50px; }
#L1T1 { left: 0; top: 0; } #L1T2 { left: 0; top: 85px; } #L1T3 { left: 0; top: 170px; }
#L1T4 { left: 0; top: 255px; } #L1T5 { left: 0; top: 340px; } #L1T6 { left: 0; top: 425px; }
#L1T7 { left: 0; top: 510px; } #L1T8 { left: 0; top: 595px; } #L1T9 { left: 0; top: 680px; }
#L2T1 { left: 175px; top: 0; } #L2T2 { left: 175px; top: 85px; } #L2T3 { left: 175px; top: 170px; }
#L2T4 { left: 175px; top: 255px; } #L2T5 { left: 175px; top: 340px; } #L2T6 { left: 175px; top: 425px; }
#L2T7 { left: 175px; top: 510px; } #L2T8 { left: 175px; top: 595px; } #L2T9 { left: 175px; top: 680px; }
#L3T1 { left: 350px; top: 0; } #L3T2 { left: 350px; top: 85px; } #L3T3 { left: 350px; top: 170px; }
#L3T4 { left: 350px; top: 255px; } #L3T5 { left: 350px; top: 340px; } #L3T6 { left: 350px; top: 425px; }
#L3T7 { left: 350px; top: 510px; } #L3T8 { left: 350px; top: 595px; } #L3T9 { left: 350px; top: 680px; }
#L4T1 { left: 525px; top: 0; } #L4T2 { left: 525px; top: 85px; } #L4T3 { left: 525px; top: 170px; }
#L4T4 { left: 525px; top: 255px; } #L4T5 { left: 525px; top: 340px; } #L4T6 { left: 525px; top: 425px; }
#L4T7 { left: 525px; top: 510px; } #L4T8 { left: 525px; top: 595px; } #L4T9 { left: 525px; top: 680px; }
#L6thT1 { left: 440px; top: 0; } #L6thT2 { left: 440px; top: 85px; } #L6thT3 { left: 440px; top: 170px; }
#L6thT4 { left: 440px; top: 255px; } #L6thT5 { left: 440px; top: 340px; }
#L7thT1 { left: 485px; top: 0; } #L7thT2 { left: 485px; top: 85px; } #L7thT3 { left: 485px; top: 170px; }
#L7thT4 { left: 485px; top: 255px; } #L7thT5 { left: 485px; top: 340px; }

#maqamnetwork div ul { padding: 0; margin: 0; list-style: none; }
#maqamnetwork div li { position: relative; }
#maqamnetwork div ul li > a, #maqamnetwork div ul li > a:visited {
  display: block; width: 120px; height: 50px; padding: 5px 8px;
  font-size: 12.5px; line-height: 1.25; text-decoration: none;
  background: var(--fam, var(--surface-2)); color: var(--fam-ink, var(--ink));
  border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 8px; box-shadow: var(--shadow);
  transition: filter 0.15s;
}
#maqamnetwork div ul li > a:hover { filter: brightness(1.1) saturate(1.05); }

/* hover / focus popup: "visit jins page" + inline player (was the Flash pull-down) */
#maqamnetwork div ul li ul, .jinslink ul li ul, .maqamlink ul li ul {
  visibility: hidden; opacity: 0; position: absolute; z-index: 40;
  left: 0; top: calc(100% + 4px); margin: 0; padding: 8px 10px; list-style: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.5);
  min-width: 230px; transition: opacity 0.12s;
}
#maqamnetwork div ul li:hover ul, #maqamnetwork div ul li:focus-within ul,
.jinslink ul li:hover ul, .jinslink ul li:focus-within ul,
.maqamlink ul li:hover ul, .maqamlink ul li:focus-within ul { visibility: visible; opacity: 1; }
#maqamnetwork div ul li ul li, .jinslink ul li ul li, .maqamlink ul li ul li { float: none; margin: 4px 0; }
#maqamnetwork div ul li ul li a, .jinslink ul li ul li a, .maqamlink ul li ul li a {
  display: inline-block; width: auto; height: auto; padding: 3px 10px;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--garnet); font-size: 12.5px; box-shadow: none;
}
#maqamnetwork div ul li ul li a:hover, .jinslink ul li ul li a:hover, .maqamlink ul li ul li a:hover {
  border-color: var(--brass); background: rgba(168, 120, 29, 0.08); filter: none;
}
#maqamnetwork div ul li ul audio, .jinslink ul li ul audio, .maqamlink ul li ul audio { width: 220px; height: 32px; }

/* notated jins lists under the networks */
.jinslink, .maqamlink { position: relative; margin: 8px 0; }
.jinslink ul, .maqamlink ul { list-style: none; padding: 0; margin: 0; }
.jinslink > ul > li, .maqamlink > ul > li { position: relative; }
.jinslink img { height: 70px; width: auto; }
.maqamlink img { height: 55px; width: auto; display: inline-block; margin-right: 10px; }
.maqamlink img.hilite { background: color-mix(in srgb, var(--brass) 24%, var(--plate)); }
.maqamlink h3 { margin: 14px 0 2px; }
.jinslink > ul > li > a, .maqamlink > ul > li > a { display: inline-block; text-decoration: none; }

/* playground jins pages: root / secondary / modulatory / leading panels */
#root, #leading, #modulatory, #secondary {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 12px 16px; margin: 10px 0; font-size: 14px;
}
@media (min-width: 880px) {
  #root, #modulatory { display: inline-block; width: calc(50% - 12px); margin-right: 8px; vertical-align: top; }
  #leading, #secondary { display: inline-block; width: calc(50% - 12px); margin-left: 8px; vertical-align: top; }
}
#root a, #leading a, #secondary a, #modulatory a {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: var(--ink); margin: 12px 0; border-radius: 8px;
}
#root a:hover p, #leading a:hover p, #secondary a:hover p, #modulatory a:hover p { color: var(--garnet); }
#root a ul, #leading a ul, #secondary a ul, #modulatory a ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; flex: none;
}
#modulatory a ul { flex-direction: column; width: 120px; }
#root a ul li, #leading a ul li, #secondary a ul li, #modulatory a ul li {
  padding: 4px 10px; min-width: 96px; border-radius: 6px; font-size: 12.5px;
  background: var(--fam, var(--surface-2)); color: var(--fam-ink, var(--ink));
  border: 1px solid rgba(0, 0, 0, 0.25);
}
#root a p, #leading a p, #secondary a p, #modulatory a p { margin: 0; font-weight: 600; }

/* vocabulary sentence lists: notation image + player per row */
#EgyptRast img { display: block; clear: both; margin: 14px 0 6px; }
#EgyptRast audio { display: block; margin: 0 0 4px; width: min(420px, 100%); }
#EgyptRast a { display: block; }

/* ── landing pages ──────────────────────────────────────────────────────── */
.hero { padding: 34px 0 6px; }
.hero .kicker { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; }
.hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 7vw, 64px); line-height: 1.02; margin: 10px 0 6px; max-width: 18ch; }
.hero .ar-line { font-family: var(--font-ar); font-size: 26px; color: var(--brass-deep); margin-bottom: 14px; }
.hero .lede { font-size: 19px; color: var(--ink-soft); max-width: 58ch; line-height: 1.55; }
.hero .lede b { color: var(--ink); }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 26px 0; }
.scard {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent, var(--brass));
  border-radius: 12px; padding: 16px 18px 14px; box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.scard:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(74,56,24,0.08), 0 18px 40px -24px rgba(74,56,24,0.55); color: var(--ink); }
.scard h2, .scard h3 { font-family: var(--font-display); font-weight: 600; font-size: 23px; margin: 0 0 4px; }
.scard p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 8px; }
.scard .go { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--garnet); font-weight: 600; }

.linkcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 20px 0; }
.linkcol { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 20px; }
.linkcol h3 { margin: 4px 0 6px; }
.linkcol h3 a { text-decoration: none; }
.linkcol ul { margin: 6px 0 10px; padding-left: 18px; font-size: 14.5px; }
.linkcol li { margin: 5px 0; }

.section-note { font-size: 13.5px; color: var(--ink-faint); max-width: 70ch; }

/* ── responsive details ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .page { padding: 14px 10px 70px; }
  .content { padding: 8px 16px 22px; border-radius: 12px; }
  .mast { padding: 10px 14px; }
  .brand .ar { display: none; }
  .floatleft { float: none; max-width: 100%; margin: 10px 0; }
  .textboxleft, .textboxright { float: none; width: auto; }
  .righttext { float: none; display: block; }
  /* notation strips scale down instead of forcing sideways scroll */
  .jinslink img, .maqamlink img { height: auto; max-width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .content { animation: rise 0.45s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}