/* ==========================================================================
   މަދަހަ ލިޔުން — public stylesheet
   1 Fonts · 2 Variables · 3 Reset · 4 Typography · 5 Layout · 6 Ornament
   7 Header · 8 Hero · 9 Cards · 10 Tiles · 11 Detail · 12 Player
   13 Reader · 14 Search · 15 Pagination · 16 Toast · 17 Footer
   18 Responsive · 19 Motion · 20 Print
   ========================================================================== */

/* ==========================================================================
   1. FONTS
   The Thaana face is loaded from the project first, then from the CDN.
   If both fail, the local/system stack in --thaana still renders Thaana.
   ========================================================================== */
@font-face {
  font-family: "MV Typer";
  src: url("../fonts/mvtyper.ttf") format("truetype"),
       url("https://cdn.jsdelivr.net/gh/aboryhan/faruma/mvtyper.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Thaana block + the two ligatures Dhivehi text uses. */
  unicode-range: U+0780-07BF, U+00A0-00FF, U+FDF2, U+FDFD, U+0600-06FF;
}

/* The wordmark face, used only for the site name in the header and footer. */
@font-face {
  font-family: "MV Aammu";
  src: url("../fonts/aammufkF.ttf") format("truetype"),
       url("https://cdn.jsdelivr.net/gh/aboryhan/faruma/aammufkF.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0780-07BF, U+FDF2, U+FDFD;
}

/* ==========================================================================
   2. VARIABLES
   ========================================================================== */
:root {
  --bg: #EDF1EC;
  --bg-deep: #E3E9E2;
  --surface: #FBFCFA;
  --ink: #12312C;
  --ink-soft: #4A6560;
  --ink-faint: #7D918C;
  --line: rgba(18, 49, 44, .14);
  --line-strong: rgba(18, 49, 44, .28);
  --accent: #0C7A69;
  --accent-quiet: rgba(12, 122, 105, .10);
  --brass: #A8813C;
  --heart: #B8434B;
  --ok: #17715F;
  --warn: #9A6B1E;
  --danger: #B8434B;

  --brand-font: "MV Aammu", "MV Typer", "Faruma", "A_Faruma", sans-serif;
  --thaana: "MV Typer", "Faruma", "A_Faruma", "MV Faseyha", "MV Boli",
            "Noto Sans Thaana", "Thaana Unicode Akeh", "Segoe UI", system-ui, sans-serif;
  --latin: ui-sans-serif, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --read: 34rem;
  --radius: 10px;
  --radius-sm: 6px;

  --lh-thaana: 2.15;
  --lyric-scale: 1;

  --ease: cubic-bezier(.32, .72, .28, 1);
  --dur: .22s;
}

html[data-theme="dark"] {
  --bg: #0A1614;
  --bg-deep: #07100F;
  --surface: #10201E;
  --ink: #E3EDE8;
  --ink-soft: #9FB3AD;
  --ink-faint: #748A85;
  --line: rgba(227, 237, 232, .13);
  --line-strong: rgba(227, 237, 232, .26);
  --accent: #4BBCA6;
  --accent-quiet: rgba(75, 188, 166, .13);
  --brass: #C9A45C;
  --heart: #E0777D;
  --ok: #4BBCA6;
  --warn: #D8AC5C;
  --danger: #E0777D;
}

/* ==========================================================================
   3. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--thaana);
  line-height: var(--lh-thaana);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Column layout + main flex:1 keeps the footer pinned to the bottom of the
     viewport on short pages (empty favourites, 404) instead of floating up
     into the middle of the screen. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
svg { flex: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--accent-quiet); color: var(--ink); }
[hidden] { display: none !important; }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: .5rem;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
}
.skip:focus { inset-inline-start: .75rem; }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.75; }
.t-hero { font-size: clamp(2rem, 6.4vw, 3.6rem); line-height: 1.6; font-weight: 700; }
.t-page { font-size: clamp(1.5rem, 4.4vw, 2.1rem); line-height: 1.65; }
.t-section { font-size: clamp(1.22rem, 3.2vw, 1.6rem); }
.t-card { font-size: 1.02rem; font-weight: 600; line-height: 1.85; }

/* Latin digits stay LTR inside RTL sentences. */
.num {
  font-family: var(--latin);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: .86rem; }

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
main { padding-block: clamp(1.6rem, 4vw, 3rem) 5rem; flex: 1 0 auto; }

.section { margin-block-start: clamp(2.6rem, 6vw, 4.2rem); }
.section:first-child { margin-block-start: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: .7rem;
  margin-block-end: 1.4rem;
  border-block-end: 1px solid var(--line);
}
/* inline-start = the RIGHT edge in RTL, so the marker sits before the text. */
.section-head h2 { position: relative; padding-inline-start: 1.15rem; }
.section-head h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(50% - 3px);
  width: 7px; height: 7px;
  background: var(--brass);
  transform: rotate(45deg);
}

.link-more { color: var(--accent); font-size: .92rem; white-space: nowrap; }
.link-more:hover { text-decoration: underline; text-underline-offset: 4px; }

.page-head { display: flex; align-items: center; gap: 1.1rem; margin-block-end: 1.8rem; }
.page-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; }
.page-intro { color: var(--ink-soft); margin-block-start: .5rem; max-width: 44rem; }

.back-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ink-soft); font-size: .94rem; margin-block-end: 1.2rem;
}
.back-link:hover { color: var(--accent); }
/* The icon is a left chevron; going back in RTL means pointing right. */
.back-link svg { width: 16px; height: 16px; transform: scaleX(-1); }

.alert {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  margin-block-end: 1.5rem;
  background: var(--surface);
  font-size: .96rem;
}
.alert-success { border-color: var(--ok); color: var(--ok); }
.alert-error { border-color: var(--danger); color: var(--danger); }

/* ==========================================================================
   6. ORNAMENT — Maldivian coral-carving lattice, generated in CSS
   ========================================================================== */
.lattice {
  --o1: color-mix(in srgb, var(--brass) 34%, transparent);
  --o2: color-mix(in srgb, var(--accent) 13%, transparent);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 13px, var(--o1) 13px 14px),
    repeating-linear-gradient(-45deg, transparent 0 13px, var(--o1) 13px 14px),
    radial-gradient(circle at 50% 50%, var(--o2) 0 18%, transparent 18.5%);
  background-size: auto, auto, 44px 44px;
}

/* Generated cover artwork — deterministic palette by data-seed. */
.is-generated { position: relative; overflow: hidden; }
.is-generated .lattice {
  position: absolute;
  inset: -25%;
  --o1: rgba(255, 255, 255, .20);
  --o2: rgba(255, 255, 255, .14);
}
[data-seed="0"] { background: linear-gradient(145deg, #0C7A69, #0A5B52); }
[data-seed="1"] { background: linear-gradient(145deg, #1B5E7E, #123F58); }
[data-seed="2"] { background: linear-gradient(145deg, #7A5B2E, #5A4020); }
[data-seed="3"] { background: linear-gradient(145deg, #4B6B3A, #33502A); }
[data-seed="4"] { background: linear-gradient(145deg, #6A3B5C, #4A2842); }
[data-seed="5"] { background: linear-gradient(145deg, #2E5F6E, #1D4350); }
[data-seed="6"] { background: linear-gradient(145deg, #8A5A38, #65402A); }
[data-seed="7"] { background: linear-gradient(145deg, #3F5D8A, #2A3F63); }
[data-seed="1"] .lattice { transform: rotate(22deg); }
[data-seed="2"] .lattice { transform: rotate(44deg); }
[data-seed="3"] .lattice { transform: rotate(66deg); }
[data-seed="5"] .lattice { transform: rotate(22deg); }
[data-seed="6"] .lattice { transform: rotate(44deg); }
[data-seed="7"] .lattice { transform: rotate(66deg); }

/* ==========================================================================
   7. HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-block-end: 1px solid var(--line);
}
.header-bar { display: flex; align-items: center; gap: 1rem; min-height: 62px; }

.brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--brand-font);
  font-weight: 700; font-size: 1.24rem; flex: none;
  letter-spacing: .01em;
}
.brand-group { display: flex; align-items: center; gap: .3rem; flex: none; }
.brand-mark {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  background: var(--accent); display: grid; place-items: center; color: #fff;
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-logo { height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: .15rem; margin-inline-start: auto; }
.nav a {
  padding: .45rem .8rem; border-radius: var(--radius-sm); font-size: .97rem;
  color: var(--ink-soft); transition: color var(--dur), background var(--dur);
}
.nav a:hover { color: var(--ink); background: var(--accent-quiet); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.header-tools { display: flex; align-items: center; gap: .3rem; flex: none; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--ink-soft);
  transition: background var(--dur), color var(--dur);
}
.icon-btn:hover { background: var(--accent-quiet); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn[aria-current="page"] { color: var(--accent); }
.icon-btn[aria-current="page"] svg { fill: color-mix(in srgb, var(--heart) 22%, transparent); }
.icon-btn.small { width: 30px; height: 30px; }
.icon-btn.small svg { width: 18px; height: 18px; }
.only-mobile { display: none; }

.header-search { position: relative; flex: none; width: min(260px, 28vw); }
.header-search input {
  width: 100%; padding: .5rem 2.3rem .5rem .8rem;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); font-size: .94rem;
}
.header-search input:focus { border-color: var(--accent); }
.header-search svg {
  position: absolute; inset-inline-end: .7rem; inset-block-start: 50%;
  transform: translateY(-50%); width: 17px; height: 17px;
  color: var(--ink-faint); pointer-events: none;
}

/* mobile drawer */
.scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(7, 16, 15, .42);
  opacity: 0; pointer-events: none; transition: opacity var(--dur);
}
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 90;
  width: min(310px, 84vw);
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .28s var(--ease);
  display: flex; flex-direction: column;
  padding: 1rem 1.15rem 2rem;
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-block-end: 1.1rem; }
.drawer nav { display: flex; flex-direction: column; gap: .15rem; }
.drawer nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .78rem .7rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: 1.02rem;
}
.drawer nav a svg { width: 19px; height: 19px; }
.drawer nav a[aria-current="page"] { background: var(--accent-quiet); color: var(--accent); font-weight: 600; }
.drawer-section { margin-block-start: 1.5rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--line); }
.drawer-section h3 { font-size: .88rem; color: var(--ink-faint); font-weight: 600; margin-block-end: .5rem; }
.drawer-sub { display: block; padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .95rem; }
.drawer-sub:hover { background: var(--accent-quiet); color: var(--accent); }

/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  border-block-end: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-deep), var(--bg));
  margin-block-start: calc(-1 * clamp(1.6rem, 4vw, 3rem));
}
.hero-inner { padding-block: clamp(2.6rem, 7vw, 5.2rem); position: relative; z-index: 2; max-width: 44rem; }
.hero .t-hero { margin-block-end: .9rem; }
.hero p { color: var(--ink-soft); font-size: clamp(1rem, 2.4vw, 1.16rem); margin-block-end: 1.9rem; }

/* The ornament used to sit only on one edge because inset-inline-start
   resolves to the RIGHT in RTL. It now spans the full width and fades out at
   both edges and behind the text, so it reads as a background texture. */
.hero-art {
  position: absolute; inset: -20% 0; width: auto;
  opacity: .30; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

.searchbox { position: relative; max-width: 32rem; }
.searchbox input {
  width: 100%; padding: 1.02rem 3.3rem 1.02rem 1.1rem; font-size: 1.06rem;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.searchbox input::placeholder { color: var(--ink-faint); }
.searchbox input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-quiet); }
.searchbox .s-icon {
  position: absolute; inset-inline-end: 1.05rem; inset-block-start: 50%;
  transform: translateY(-50%); color: var(--ink-faint); pointer-events: none;
  display: grid; place-items: center;
}
.searchbox .s-icon svg { width: 20px; height: 20px; }
.page-search { margin-block-end: 1.8rem; }

.recents { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: .9rem; align-items: center; }

.chip {
  border: 1px solid var(--line); border-radius: 99px;
  padding: .32rem .78rem; font-size: .88rem;
  color: var(--ink-soft); background: var(--surface);
  transition: border-color var(--dur), color var(--dur);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   9. CARDS
   ========================================================================== */
.grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--dur), transform var(--dur);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.cover { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-deep); display: grid; place-items: center; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-letter {
  position: relative; font-size: clamp(2.4rem, 7vw, 3.1rem); font-weight: 700;
  color: #fff; line-height: 1; opacity: .94;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .22); padding-block-end: .35em;
}
.card-cover-link { display: block; }

/* Marks a record that has audio attached. */
.play-badge {
  position: absolute;
  inset-block-end: .55rem; inset-inline-start: .55rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 92%, transparent);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(7, 16, 15, .3);
  transition: transform var(--dur);
}
html[data-theme="dark"] .play-badge { color: #07100F; }
.play-badge svg { width: 15px; height: 15px; margin-inline-start: 1px; }
.card:hover .play-badge { transform: scale(1.1); }

.play-badge.sm {
  width: 22px; height: 22px;
  inset-block-end: 2px; inset-inline-start: 2px;
  box-shadow: 0 1px 5px rgba(7, 16, 15, .35);
}
.play-badge.sm svg { width: 10px; height: 10px; }

.card-cover-link { position: relative; }
.row-cover { position: relative; }

.card-body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .18rem; flex: 1; }
.card-body .artist { color: var(--ink-soft); font-size: .9rem; }
.card-body .artist:hover { color: var(--accent); }
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-block-start: .7rem; padding-block-start: .65rem;
  border-block-start: 1px solid var(--line);
}
.tag {
  font-size: .78rem; color: var(--brass);
  border: 1px solid color-mix(in srgb, var(--brass) 38%, transparent);
  border-radius: 99px; padding: .16rem .55rem; white-space: nowrap;
}
.tag:hover { background: color-mix(in srgb, var(--brass) 12%, transparent); }

.fav-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-faint);
  transition: color var(--dur), background var(--dur);
}
.fav-btn:hover { background: var(--accent-quiet); color: var(--heart); }
.fav-btn svg { width: 19px; height: 19px; }
.fav-btn[aria-pressed="true"] { color: var(--heart); }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.fav-btn.pop svg { animation: pop .34s var(--ease); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }

/* list rows */
/* No top border here: .section-head already draws a rule under the heading,
   and a second one directly beneath it read as a double line. Each .row
   carries its own bottom border, so the separators still line up. */
.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: .95rem;
  padding: .8rem .3rem; border-block-end: 1px solid var(--line);
  transition: background var(--dur);
}
.row:hover { background: var(--accent-quiet); }
.row-cover {
  width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm);
  overflow: hidden; position: relative; display: grid; place-items: center;
  background: var(--bg-deep);
}
.row-cover img { width: 100%; height: 100%; object-fit: cover; }
.row-cover > span:last-child {
  position: relative; color: #fff; font-weight: 700;
  font-size: 1.35rem; line-height: 1; padding-block-end: .3em;
}
.row-main { min-width: 0; flex: 1; }
.row-main .t { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main .t:hover { color: var(--accent); }
.row-main .s { color: var(--ink-soft); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-end { display: flex; align-items: center; gap: .2rem; flex: none; }

/* ==========================================================================
   10. TILES (categories + artists)
   ========================================================================== */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

.tile {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1.15rem 1.1rem; min-height: 112px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .15rem;
  transition: border-color var(--dur), transform var(--dur);
}
.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.tile > .lattice {
  position: absolute; inset-block: -30%; inset-inline-start: -14%; width: 58%; opacity: .55;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 60%);
  mask-image: linear-gradient(to left, transparent, #000 60%);
}
.tile .n { font-weight: 600; position: relative; }
.tile .c { color: var(--ink-soft); font-size: .86rem; position: relative; }

.avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  color: #fff; font-weight: 700; font-size: 1.3rem;
  margin-block-end: .75rem; overflow: hidden; line-height: 1;
}
.avatar > span:last-child { position: relative; padding-block-end: .28em; }
.avatar .lattice { position: absolute; inset: -25%; --o1: rgba(255,255,255,.2); --o2: rgba(255,255,255,.14); }
.avatar.has-image img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   11. MADHAHA DETAIL
   ========================================================================== */
.detail-head {
  border-block-end: 1px solid var(--line);
  background: var(--bg-deep);
  position: relative; overflow: hidden;
  margin-block-start: calc(-1 * clamp(1.6rem, 4vw, 3rem));
}
.detail-head .hero-art { opacity: .4; }
.detail-inner { padding-block: clamp(1.6rem, 4.5vw, 2.8rem); position: relative; z-index: 2; }

.detail-top { display: flex; gap: 1.4rem; align-items: flex-start; }
.detail-cover {
  width: 150px; height: 150px; flex: none;
  border-radius: var(--radius); object-fit: cover;
  display: grid; place-items: center;
}
.detail-cover.is-generated .cover-letter { font-size: 3.4rem; }
.detail-meta-block { min-width: 0; flex: 1; }

.detail-title { font-size: clamp(1.7rem, 5vw, 2.75rem); line-height: 1.55; font-weight: 700; }
.detail-artist { color: var(--accent); font-size: clamp(1rem, 2.6vw, 1.15rem); margin-block-start: .35rem; display: inline-block; }
.detail-artist:hover { text-decoration: underline; text-underline-offset: 5px; }

.meta { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-block-start: 1rem; align-items: center; }
.meta-item { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-soft); font-size: .9rem; }
.meta-item svg { width: 15px; height: 15px; color: var(--ink-faint); }
a.meta-item:hover { color: var(--accent); }

.detail-desc { margin-block-start: 1.1rem; color: var(--ink-soft); max-width: 44rem; }

/* ==========================================================================
   12. AUDIO PLAYER — compact docked bar, laid out LTR
   ========================================================================== */
.player {
  margin-block-start: 1.6rem;
  max-width: 44rem;
  padding: .5rem .6rem .5rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(7, 16, 15, .05);

  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;

  /* Transport controls read left-to-right everywhere: play on the left,
     elapsed time on the left, remaining on the right. */
  direction: ltr;
}

/* Once the tools row wraps onto its own line, a full pill looks odd —
   soften the corners instead. */
@media (max-width: 30rem) {
  .player { border-radius: 20px; }
}

.play-btn {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  transition: transform var(--dur), box-shadow var(--dur), opacity var(--dur);
}
html[data-theme="dark"] .play-btn { color: #07100F; }
.play-btn:hover { transform: scale(1.06); }
.play-btn:active { transform: scale(.97); }
.play-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.play-btn svg { width: 18px; height: 18px; }

.player-mid { flex: 1; min-width: 7rem; }

.times {
  display: flex;
  gap: .3rem;
  font-family: var(--latin);
  font-size: .7rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-block-start: .15rem;
}
.times-sep { color: var(--line-strong); }

/* ---- trailing icon cluster: skip, speed, volume ---- */
.player-tools {
  display: flex;
  align-items: center;
  gap: .1rem;
  flex: none;
}

.pbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--ink-soft);
  font-family: var(--latin);
  font-size: .8rem;
  font-weight: 600;
  transition: background var(--dur), color var(--dur);
}
.pbtn:hover { background: var(--accent-quiet); color: var(--accent); }
.pbtn svg { width: 16px; height: 16px; }

.rate-btn { width: auto; padding-inline: .5rem; }
.rate-btn.is-fast { color: var(--accent); }

.vol { display: flex; align-items: center; }
.vol input[type=range] {
  width: 0;
  opacity: 0;
  transition: width var(--dur), opacity var(--dur), margin var(--dur);
}
.vol:hover input[type=range],
.vol:focus-within input[type=range] {
  width: 70px;
  opacity: 1;
  margin-inline-start: .3rem;
}

/* ---- range inputs: the portion behind the thumb is filled --------------
   --pct is written by app.js on input and while playing, because WebKit
   has no native progress pseudo-element for range inputs. */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
  display: block;
  --pct: 0%;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    var(--accent) 0 var(--pct),
    var(--line-strong) var(--pct) 100%
  );
}
input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line-strong); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--accent);
  margin-block-start: -4.5px;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(7, 16, 15, .3);
  transition: transform var(--dur);
}
input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(7, 16, 15, .3);
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.18); }
input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

.vol input[type=range] { height: 16px; }
.vol input[type=range]::-webkit-slider-runnable-track { height: 5px; }
.vol input[type=range]::-moz-range-track,
.vol input[type=range]::-moz-range-progress { height: 5px; }

select.field {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .32rem 1.9rem .32rem .6rem;
  font-size: .86rem;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
                    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 13px) 13px, calc(100% - 8px) 13px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.player-note { flex-basis: 100%; font-size: .86rem; color: var(--danger); margin-block-start: .3rem; direction: rtl; }

@media (max-width: 480px) {
  .player { padding: .45rem .5rem .45rem .8rem; gap: .5rem; }
  .play-btn { width: 36px; height: 36px; }
}


/* ==========================================================================
   13. LYRICS READER
   ========================================================================== */
.reader { padding-block-start: 2rem; }

.reader-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding-block-end: .9rem; margin-block-end: 1.6rem;
  border-block-end: 1px solid var(--line);
}
.ctl {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 38px; padding-inline: .75rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: .9rem; background: var(--surface);
  transition: border-color var(--dur), color var(--dur), background var(--dur);
}
.ctl:hover { border-color: var(--accent); color: var(--accent); }
.ctl svg { width: 17px; height: 17px; }
.ctl.square { padding-inline: 0; width: 38px; justify-content: center; }
.ctl[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="dark"] .ctl[aria-pressed="true"] { color: #07100F; }
.ctl-group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.ctl-group .ctl { border: 0; border-radius: 0; height: 36px; }
.ctl-group .ctl + .ctl { border-inline-start: 1px solid var(--line); }
.ctl-spacer { margin-inline-start: auto; }

/* the theme control shows one icon+label pair depending on the active theme */
.ico-sun, .lbl-light { display: none; }
html[data-theme="dark"] .ico-moon, html[data-theme="dark"] .lbl-dark { display: none; }
html[data-theme="dark"] .ico-sun, html[data-theme="dark"] .lbl-light { display: inline-flex; }
.ico-moon, .ico-sun { display: inline-flex; }

.lyrics {
  direction: rtl;
  text-align: right;
  white-space: pre-line;
  max-width: var(--read);
  font-size: calc(clamp(1.12rem, 3.1vw, 1.34rem) * var(--lyric-scale));
  line-height: 2.35;
  color: var(--ink);
  text-wrap: pretty;
}
.stanza + .stanza { margin-block-start: 2.2rem; }
.stanza-mark {
  display: flex; align-items: center; gap: .75rem;
  max-width: var(--read); margin-block: 2rem; color: var(--brass);
}
.stanza-mark::before, .stanza-mark::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.stanza-mark svg { width: 13px; height: 13px; }

.tags-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: 2.6rem; max-width: var(--read); }
.related { margin-block-start: 3.5rem; }

/* ==========================================================================
   14. SEARCH + EMPTY STATES
   ========================================================================== */
mark { background: color-mix(in srgb, var(--brass) 30%, transparent); color: inherit; border-radius: 2px; padding: 0 .12em; }

.empty {
  text-align: center; padding: clamp(2.6rem, 9vw, 4.5rem) 1.2rem;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  max-width: 34rem; margin-inline: auto;
}
.empty svg { width: 40px; height: 40px; color: var(--ink-faint); margin-inline: auto; margin-block-end: 1rem; }
.empty h3 { font-size: 1.15rem; margin-block-end: .4rem; }
.empty p { color: var(--ink-soft); font-size: .95rem; }
.empty .ctl { margin-block-start: 1.4rem; }

.error-page { text-align: center; padding-block: clamp(3rem, 12vw, 6rem); }
.error-code { font-size: clamp(3rem, 12vw, 5rem); font-weight: 700; color: var(--brass); line-height: 1; display: block; margin-block-end: 1rem; }
.error-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-block-start: 1.8rem; }

.loading { display: flex; align-items: center; gap: .7rem; color: var(--ink-soft); padding-block: 2rem; justify-content: center; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   15. PAGINATION
   ========================================================================== */
.pagination {
  display: flex; flex-wrap: wrap; gap: .35rem;
  justify-content: center; align-items: center; margin-block-start: 2.5rem;
}
.pagination a, .pagination .current, .pagination .gap {
  min-width: 40px; height: 40px; padding-inline: .7rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); font-family: var(--latin); font-size: .95rem;
}
.pagination a { border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface); }
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current { background: var(--accent); color: #fff; font-weight: 600; }
html[data-theme="dark"] .pagination .current { color: #07100F; }
.pagination .gap { color: var(--ink-faint); }
.pagination a[rel] { font-family: var(--thaana); }

/* ==========================================================================
   16. TOAST
   ========================================================================== */
.toasts {
  position: fixed; inset-block-end: 1.2rem; inset-inline: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  pointer-events: none; padding-inline: 1rem;
}
.toast {
  background: var(--ink); color: var(--bg);
  padding: .7rem 1.15rem; border-radius: 99px; font-size: .94rem;
  box-shadow: 0 6px 22px rgba(7, 16, 15, .22);
  display: flex; align-items: center; gap: .5rem; max-width: 100%;
  animation: toast-in .26s var(--ease);
}
.toast svg { width: 16px; height: 16px; }
.toast.out { animation: toast-out .22s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.site-footer {
  border-block-start: 1px solid var(--line);
  padding-block: 1.9rem 2.2rem;
  color: var(--ink-faint);
  font-size: .9rem;
  background: var(--bg-deep);
  margin-block-start: auto;   /* pushed to the bottom on short pages */
}
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* brand at the start (right), note at the end (left) */
  gap: 1rem 2.5rem;
  flex-wrap: wrap;
}
.footer-brand {
  font-family: var(--brand-font);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  white-space: nowrap;
}
.footer-note {
  color: var(--ink-faint);
  max-width: 46rem;
  line-height: 1.95;
  text-align: left;
  flex: 1 1 22rem;
}

@media (max-width: 700px) {
  .footer-bar { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .footer-note { text-align: right; flex: 1 1 auto; }
}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width: 920px) {
  .header-search { width: 190px; }
  .nav a { padding-inline: .6rem; font-size: .93rem; }
}

@media (max-width: 760px) {
  :root { --lh-thaana: 2.05; }
  .header-bar { justify-content: space-between; }
  .nav, .header-search { display: none; }
  .only-mobile { display: grid; }
  .wrap { width: min(100% - 1.75rem, var(--wrap)); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .85rem; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: .7rem; }
  .card-body { padding: .7rem .75rem .8rem; }
  .t-card { font-size: .97rem; }
  .detail-top { gap: 1rem; }
  .detail-cover { width: 96px; height: 96px; }
  .detail-cover.is-generated .cover-letter { font-size: 2.2rem; }
  .lyrics { line-height: 2.3; }
  .reader-bar { gap: .35rem; }
  .ctl { height: 40px; }
  .ctl-spacer { margin-inline-start: 0; }
  .page-head { gap: .9rem; }
  .page-avatar { width: 60px; height: 60px; }

  /* Touch has no hover, so the volume slider must stay visible instead of
     revealing on :hover. Tap targets are also bumped up a little. */
  .pbtn { width: 36px; height: 36px; }
  .vol input[type=range] {
    width: 56px;
    opacity: 1;
    margin-inline-start: .3rem;
  }
}

@media (max-width: 400px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
  .hero-inner { padding-block: 2.2rem; }
  .searchbox input { padding-inline: .9rem 2.9rem; font-size: 1rem; }
  .detail-top { flex-direction: column; }
  .detail-cover { width: 84px; height: 84px; }
}

/* ==========================================================================
   19. MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .card:hover, .tile:hover, .play-btn:hover { transform: none; }
}

/* ==========================================================================
   20. PRINT / PDF — A4, watermarked, with stanza dividers
   ========================================================================== */
.print-only { display: none; }

@media print {
  @page {
    size: A4 portrait;
    margin: 18mm 18mm 16mm;

    /* Page numbering. Rendered by print engines that support page margin
       boxes (WeasyPrint, Prince). Chrome and Firefox ignore these, so in
       those browsers switch on "Headers and footers" in the print dialog to
       get the same "1/2" in the corner. */
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 7.5pt;
      color: #999;
      /* The margin box inherits RTL from <html> and would lay the counter out
         as "2 / 1". Numbers read left-to-right. */
      direction: ltr;
      unicode-bidi: isolate;
    }
  }

  /* .skip is parked at inset-inline-start:-9999px, which in RTL means 9999px
     to the RIGHT. Left visible it stretches the page box to ~8000pt and the
     browser shrinks the whole sheet to fit. */
  .skip,
  .site-header, .site-footer, .player, .reader-bar, .back-link, .hero-art,
  .toasts, .drawer, .scrim, .detail-desc, .play-badge, .alert,
  .pagination, .video, .detail-cover, .spotlight, .hero-title, .hero-bg,
  .carousel, .empty, .loading,
  /* everything that follows the lyrics on a madhaha page */
  .tags-row, .related, .section-head, .list, .row, .grid, .tiles, .posters {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    font-size: 12pt;
  }

  main, .wrap, .detail, .detail-head, .detail-inner, .detail-top,
  .detail-meta-block, .reader {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* ---- heading block: title, singer, then a rule ---- */
  .detail-title {
    font-size: 20pt;
    line-height: 1.55;
    color: #000;
    text-align: right;
    margin: 0 0 1.5mm;
  }
  .detail-artist {
    display: block;
    color: #333;
    font-size: 13pt;
    text-decoration: none;
    text-align: right;
  }

  .meta {
    display: block;
    font-size: 9.5pt;
    color: #555;
    margin: 2.5mm 0 0;
    text-align: right;
    padding-block-end: 3.5mm;
    border-block-end: .5pt solid #bbb;
  }
  .meta-item { display: inline; margin-inline-start: 5mm; color: #555; }
  .meta-item svg { display: none !important; }

  .reader { padding-block-start: 7mm !important; }

  .lyrics {
    font-size: 14pt;
    line-height: 1.95;
    color: #000;
    width: auto !important;
    max-width: none !important;
    direction: rtl;
    text-align: right;
    white-space: pre-line;
  }

  .stanza {
    break-inside: avoid;
    page-break-inside: avoid;
    orphans: 2;
    widows: 2;
    margin: 0;
  }
  .stanza + .stanza { margin-block-start: 5mm; }

  /* ---- stanza dividers, kept in print ---- */
  .stanza-mark {
    display: flex !important;
    align-items: center;
    gap: 4mm;
    margin: 5mm 0;
    color: #b9b9b9;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Borders, not background colours: Chrome and Firefox omit backgrounds
     from printouts unless the reader ticks "Background graphics", which is
     why these rules were vanishing. */
  .stanza-mark::before,
  .stanza-mark::after {
    content: "";
    flex: 1;
    height: 0;
    border-block-start: .5pt solid #cfcfcf;
    background: none;
  }
  .stanza-mark svg {
    width: 7pt;
    height: 7pt;
    display: block;
    stroke: #b9b9b9;
  }

  /* ---- minimal footer stamp ---- */
  .print-only { display: block; }
  .print-head { display: none !important; }

  .print-foot {
    position: fixed;
    bottom: -12mm; left: 0; right: 0;
    text-align: center;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 7.5pt;
    color: #aaa;
    letter-spacing: .02em;
    direction: ltr;
  }

  .print-site { direction: ltr; unicode-bidi: isolate; }

}

/* ==========================================================================
   21. HERO BANNER — the featured madhaha carries the top of the page
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  border-block-end: 1px solid var(--line);
  background: var(--bg-deep);
  margin-block-start: calc(-1 * clamp(1.6rem, 4vw, 3rem));
}

/* The featured cover, blurred and dimmed, as a backdrop. */
.hero-bg {
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(34px) saturate(1.25);
  opacity: .30;
  transform: scale(1.08);
}
html[data-theme="dark"] .hero-bg img { opacity: .24; }

.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-deep) 62%, transparent),
    var(--bg-deep) 96%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(1.7rem, 4.5vw, 2.8rem) clamp(1.7rem, 4.5vw, 2.6rem);
}

/* The site heading is now a quiet label above the featured record. */
.hero-title {
  display: flex;
  align-items: baseline;
  gap: .55rem .9rem;
  flex-wrap: wrap;
  margin-block-end: clamp(1.1rem, 3vw, 1.6rem);
  padding-block-end: .85rem;
  border-block-end: 1px solid var(--line);
}
.hero-title h1 {
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 700;
  line-height: 1.7;
}
.hero-title p {
  color: var(--ink-faint);
  font-size: .95rem;
}

/* ==========================================================================
   21b. SPOTLIGHT — sits inside the hero banner
   ========================================================================== */
.spotlight {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: clamp(1rem, 3vw, 1.9rem);
  align-items: center;
  padding: clamp(.9rem, 2.5vw, 1.3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--dur), transform var(--dur);
}
.spotlight:hover { border-color: var(--accent); transform: translateY(-2px); }

.spot-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-deep);
}
.spot-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.spot-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }

.spot-flag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  color: var(--brass);
  font-size: .8rem;
  border: 1px solid color-mix(in srgb, var(--brass) 38%, transparent);
  border-radius: 99px;
  padding: .18rem .65rem;
  margin-block-end: .3rem;
}
.spot-flag svg { width: 11px; height: 11px; }

.spot-title {
  font-size: clamp(1.4rem, 4.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.5;
}
.spot-artist { color: var(--accent); font-size: .98rem; }
.spot-desc {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.95;
  margin-block-start: .3rem;
}

.spot-foot {
  display: flex;
  align-items: center;
  gap: .5rem 1.1rem;
  flex-wrap: wrap;
  margin-block-start: .9rem;
  padding-block-start: .8rem;
  border-block-start: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: .87rem;
}
.spot-stat { display: inline-flex; align-items: center; gap: .35rem; }
.spot-stat svg { width: 15px; height: 15px; }

.spot-go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent);
  font-weight: 600;
  margin-inline-start: auto;
}
.spot-go svg { width: 16px; height: 16px; transition: transform var(--dur); }
.spotlight:hover .spot-go svg { transform: translateX(-4px); }

@media (max-width: 620px) {
  .spotlight { grid-template-columns: 1fr; gap: .9rem; }
  .spot-art { max-width: 140px; }
  .spot-go { margin-inline-start: 0; }
  .hero-title { gap: .2rem; }
}

/* ==========================================================================
   22. POSTERS — artists shown large rather than as small avatars
   ========================================================================== */
.posters {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}

.poster {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur);
}
.poster:hover { border-color: var(--accent); transform: translateY(-3px); }

.poster-art {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 3 / 4;
  background: var(--bg-deep);
  overflow: hidden;
}
.poster-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster-letter {
  position: relative; color: #fff; font-weight: 700; line-height: 1;
  font-size: clamp(2.8rem, 8vw, 4rem);
  padding-block-end: .3em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}
.poster-body { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .1rem; }
.poster-name { font-weight: 600; font-size: 1.02rem; line-height: 1.8; }
.poster-meta { color: var(--ink-soft); font-size: .87rem; }

/* ==========================================================================
   23. CAROUSEL — hero banner only
   ========================================================================== */
.carousel { position: relative; }

/* Popular section — fixed 5-item grid (was a carousel; item 4 clipped) */
.popular-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.pop-card { min-width: 0; }   /* lets long titles ellipsis instead of forcing column width */

@media (max-width: 1240px) {
  .popular-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .popular-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .popular-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
}
@media (max-width: 400px) {
  .popular-grid { grid-template-columns: repeat(2, 1fr); }
}

.car-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.car-viewport::-webkit-scrollbar { display: none; }

.car-track { display: flex; gap: 1rem; padding-block-end: .3rem; }

.car-card {
  flex: 0 0 clamp(190px, 30%, 250px);
  scroll-snap-align: start;
}

.car-link {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur);
}
.car-link:hover { border-color: var(--accent); transform: translateY(-3px); }

.car-art {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; background: var(--bg-deep); overflow: hidden;
}
.car-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.car-body { padding: .8rem .9rem .95rem; display: flex; flex-direction: column; gap: .12rem; flex: 1; }
.car-title {
  font-weight: 600; font-size: 1rem; line-height: 1.8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.car-artist {
  color: var(--ink-soft); font-size: .88rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.car-stats {
  display: flex; gap: .9rem; align-items: center;
  margin-block-start: .6rem; padding-block-start: .55rem;
  border-block-start: 1px solid var(--line);
  color: var(--ink-faint); font-size: .84rem;
}
.car-stat { display: inline-flex; align-items: center; gap: .3rem; }
.car-stat svg { width: 14px; height: 14px; }

/* arrows */
.car-nav {
  position: absolute; inset-block-start: calc(50% - 40px);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; z-index: 3;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  box-shadow: 0 3px 14px rgba(7, 16, 15, .13);
  transition: opacity var(--dur), color var(--dur), border-color var(--dur);
}
.car-nav:hover { color: var(--accent); border-color: var(--accent); }
.car-nav svg { width: 19px; height: 19px; }
/* Buttons are described by the physical side they sit on, so the icon, the
   position and the scroll direction can never drift apart: the button on the
   right points right and scrolls the track right, and vice versa. Physical
   left/right, not logical, precisely because this must not flip with the
   text direction. */
.car-right { right: -8px; }
.car-left  { left: -8px; }
.car-right svg { transform: scaleX(-1); }   /* base icon points left */
.car-left  svg { transform: none; }
.car-nav[disabled] { opacity: .3; pointer-events: none; }

/* dots */
.car-dots { display: flex; gap: .35rem; justify-content: center; margin-block-start: 1.1rem; }
.car-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong);
  transition: background var(--dur), width var(--dur);
}
.car-dot.is-on { background: var(--accent); width: 20px; border-radius: 99px; }

@media (max-width: 1240px) {
  .car-right { right: 4px; }
  .car-left  { left: 4px; }
}
@media (max-width: 760px) {
  .car-nav { display: none; }
  .car-card { flex: 0 0 62%; }
  .car-track { gap: .75rem; }
  .posters { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
}
@media (max-width: 400px) {
  .car-card { flex: 0 0 74%; }
  .posters { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   24. YOUTUBE EMBED — click-to-load facade
   ========================================================================== */
.video {
  margin-block-start: 1.5rem;
  max-width: 44rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000;
}
.video-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity var(--dur);
}
.video-facade:hover .video-thumb { opacity: 1; }

.video-play {
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(50%, -50%);   /* RTL: inline-start is the right edge */
  width: 68px; height: 48px;
  display: grid; place-items: center;
  transition: transform var(--dur);
}
.video-play svg { width: 68px; height: 48px; }
.video-play .yt-bg { fill: #212121; fill-opacity: .8; transition: fill-opacity var(--dur); }
.video-facade:hover .video-play .yt-bg { fill: #f00; fill-opacity: 1; }

.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (max-width: 760px) {
  .video-play, .video-play svg { width: 54px; height: 38px; }
}

/* ==========================================================================
   25. RANKED LIST — numbered top 5
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.list.ranked { gap: 0; }

.rank-row { display: flex; align-items: center; gap: .85rem; }
.rank-row .row { flex: 1; min-width: 0; }

.rank {
  flex: none;
  width: 1.9rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--line-strong);
  transition: color var(--dur);
}
.rank-row:hover .rank { color: var(--brass); }
.rank-row:first-child .rank { color: var(--brass); }

@media (max-width: 480px) {
  .rank-row { gap: .5rem; }
  .rank { width: 1.4rem; font-size: 1rem; }
}

/* ==========================================================================
   26. REQUEST PAGE
   ========================================================================== */
.request-form {
  max-width: 34rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.request-form .field-row > label { font-size: .95rem; color: var(--ink); }
.request-form .opt { color: var(--ink-faint); font-size: .85rem; font-weight: 400; }
.request-form .req { color: var(--danger); }
.request-form input.field,
.request-form textarea.field {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.request-form input.field:focus,
.request-form textarea.field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-quiet);
  outline: none;
}
.request-form input.field[aria-invalid="true"],
.request-form textarea.field[aria-invalid="true"] { border-color: var(--danger); }
.request-form textarea.field { resize: vertical; line-height: 2; }
.request-form .field-hint { color: var(--ink-faint); font-size: .85rem; margin-block-start: .35rem; }
.request-form .field-error { color: var(--danger); font-size: .86rem; margin-block-start: .35rem; }
.request-form .form-actions {
  margin-block-start: 1.4rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--line);
  display: flex;
  gap: .6rem;
}
.request-form .btn {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 42px; padding-inline: 1.3rem;
  border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
  font-size: .97rem; font-weight: 600;
  transition: opacity var(--dur);
}
html[data-theme="dark"] .request-form .btn { color: #07100F; }
.request-form .btn:hover { opacity: .92; }
.request-form .btn svg { width: 17px; height: 17px; }

/* Honeypot — off-screen for people, present in the DOM for bots. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.request-note { max-width: 34rem; font-size: .88rem; margin-block-start: 1.2rem; }

.request-done {
  max-width: 34rem;
  text-align: center;
  padding: clamp(2rem, 6vw, 3rem) 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.done-mark {
  width: 54px; height: 54px;
  margin-inline: auto;
  margin-block-end: 1.1rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-quiet);
  color: var(--ok);
}
.done-mark svg { width: 26px; height: 26px; }
.request-done h2 { font-size: 1.25rem; margin-block-end: .5rem; }
.request-actions {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
  margin-block-start: 1.6rem;
}

.footer-link { color: var(--ink-soft); }
.footer-link:hover { color: var(--accent); }

/* ==========================================================================
   27. HERO CAROUSEL — spotlight cards, one per slide
   ========================================================================== */
.hero-carousel .car-track { gap: 1rem; }

.hero-carousel .spotlight { height: 100%; }

/* Mobile: one full-width slide at a time, exactly as before — untouched. */
@media (max-width: 760px) {
  .hero-carousel .car-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}

/* Desktop: a coverflow look — the centered slide is shown full-size and
   sharp, the immediate neighbours peek in smaller and blurred behind it.
   Still native scroll-snap underneath, so arrows/dots/keyboard/dragging
   all keep working exactly as on the single-slide layout. */
@media (min-width: 761px) {
  .hero-carousel .car-viewport { padding-block: 1rem; }
  .hero-carousel .car-card {
    flex: 0 0 94%;
    aspect-ratio: 2.3 / 1;
    scroll-snap-align: center;
    transition: transform .55s cubic-bezier(.22, .68, .36, 1), filter .5s ease, opacity .5s ease;
  }
  .hero-carousel .car-card.is-center { transform: scale(1); filter: none; opacity: 1; z-index: 3; }
  /* is-prev sits to the physical right of center in this RTL layout, so it
     scales down toward its own left edge — the edge touching the center
     card — instead of its own middle, which would push its visible sliver
     further off the edge of the viewport. is-next is the mirror case. */
  .hero-carousel .car-card.is-prev {
    transform: scale(.7); transform-origin: left center;
    filter: blur(3px); opacity: .35; z-index: 1; pointer-events: none;
  }
  .hero-carousel .car-card.is-next {
    transform: scale(.7); transform-origin: right center;
    filter: blur(3px); opacity: .35; z-index: 1; pointer-events: none;
  }
  .hero-carousel .car-card.is-far { opacity: 0; pointer-events: none; }

  /* The card's height is now fixed by the aspect-ratio above — keep the
     spotlight landscape-shaped by capping the art size and clipping any
     text that would otherwise grow the card taller than that. */
  .hero-carousel .spotlight { height: 100%; overflow: hidden; }
  .hero-carousel .spot-art { max-width: 280px; }
  .hero-carousel .spot-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .hero-carousel .spot-desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* The arrows sit inside the banner rather than hanging off its edges. */
.hero-carousel .car-right { right: -3.75rem; }
.hero-carousel .car-left  { left: -3.75rem; }
.hero-carousel .car-nav {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-carousel .car-dots { margin-block-start: .9rem; }

@media (max-width: 760px) {
  /* Arrows would overlap the artwork on a narrow screen; swiping remains. */
  .hero-carousel .car-nav { display: none; }
}

/* ==========================================================================
   28. ALBUMS — square covers, unlike the 3:4 artist portraits
   ========================================================================== */
.album-poster .album-art { aspect-ratio: 1; }
.album-poster .poster-meta { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Album linkage shown on a madhaha page */
.album-line {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--ink-soft);
  font-size: .9rem;
}
.album-line svg { width: 15px; height: 15px; color: var(--ink-faint); }
.album-line:hover { color: var(--accent); }