@charset "UTF-8";
/* ===========================================================================
   Kithu Bathi Gee Dahana, design system
   Blue identity. #2b65f7 is sampled from the logo asset (94.6% of the app
   icon) and is the same blue the Flutter app paints chords with. Deep ink and
   warm neutral surfaces keep it premium rather than corporate.

   Hand-written on purpose. The site has no build step, so a deploy is a file
   copy and nothing competes with the live mobile API for CPU.

   Structure:
     1. fonts      2. tokens      3. reset/base    4. layout
     5. masthead   6. library     7. reader        8. chord diagrams
     9. media      10. footer     11. motion
   =========================================================================== */

/* --- 1. fonts ------------------------------------------------------------ */
/* Self-hosted, subset to sinhala+latin only, swap so text paints immediately. */

@font-face {
  font-family: 'Noto Sans Sinhala';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-sans-sinhala-400-sinhala.woff2') format('woff2');
  unicode-range: U+0964-0965, U+0D82-0DF4, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Sinhala';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-sans-sinhala-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Serif Sinhala';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/noto-serif-sinhala-700-sinhala.woff2') format('woff2');
  unicode-range: U+0964-0965, U+0D82-0DF4, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Serif Sinhala';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/noto-serif-sinhala-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/spectral-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}

/* --- 2. tokens ----------------------------------------------------------- */

:root {
  /* LIGHT. The identity is BLUE: #2b65f7 is sampled straight from the logo
     (94.6% of the app icon, hsl 223 93% 57%) and is the same blue the Flutter
     app paints chords with. Surfaces stay a warm neutral so the blue reads as
     deliberate rather than as another cold SaaS gradient. */
  --paper:      #f7f7f4;
  --surface:    #ffffff;
  --surface-2:  #fbfbf9;
  --sunken:     #eeeee9;

  --ink:        #121725;
  --ink-2:      #4b5468;
  --ink-3:      #828b9e;

  --line:       #e5e4de;
  --line-soft:  #efeee9;

  --brand:      #2b65f7;   /* the logo blue, unmodified */
  --brand-ink:  #1b46b3;   /* text-safe on paper */
  --brand-deep: #13234a;   /* near-navy, for display type */
  --brand-soft: rgba(43, 101, 247, 0.09);
  --brand-line: rgba(43, 101, 247, 0.28);
  --brand-tint: #e7eeff;

  --chord:      var(--brand);

  /* real elevation: two layers, tinted to the palette rather than plain grey */
  --e1: 0 1px 2px rgba(20, 24, 36, 0.05);
  --e2: 0 1px 2px rgba(20, 24, 36, 0.05), 0 8px 24px -8px rgba(20, 24, 36, 0.12);
  --e3: 0 2px 4px rgba(20, 24, 36, 0.06), 0 18px 40px -12px rgba(20, 24, 36, 0.20);

  /* type */
  --font-display: 'Spectral', 'Noto Serif Sinhala', Georgia, 'Times New Roman', serif;
  /* Sinhala sits LAST as a fallback: Latin glyphs render in the UI face and
     Sinhala glyphs fall through to Noto automatically. The page is lang="si",
     so a :lang(si) rule would otherwise restyle every Latin word on the site. */
  --font-ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Sinhala', sans-serif;
  --font-sinhala: 'Noto Sans Sinhala', ui-sans-serif, system-ui, sans-serif;
  --font-chord: ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;

  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.0625rem;
  --step-2:  1.25rem;
  --step-3:  1.5rem;
  --step-4:  clamp(1.75rem, 1.3rem + 1.9vw, 2.4rem);
  --step-5:  clamp(2.1rem, 1.4rem + 3vw, 3.1rem);

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --measure: 44rem;     /* reading column */
  --wide: 68rem;        /* library column */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root[data-theme='dark'] {
  /* DARK. Same hue family, lifted for contrast: the pure brand blue is too
     dark to read on a near-black surface, so text-weight blues shift lighter
     while the brand blue itself stays for solid fills. */
  --paper:      #0b1020;
  --surface:    #121a2e;
  --surface-2:  #16203a;
  --sunken:     #080c18;

  --ink:        #e7ebf5;
  --ink-2:      #a2abc2;
  --ink-3:      #737d94;

  --line:       #1e2740;
  --line-soft:  #192137;

  --brand:      #5b8bff;
  --brand-ink:  #8fb0ff;
  --brand-deep: #cddcff;
  --brand-soft: rgba(91, 139, 255, 0.13);
  --brand-line: rgba(91, 139, 255, 0.30);
  --brand-tint: #16203a;

  --chord:      #7ea2ff;

  --e1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --e2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --e3: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.65);
}

/* --- 3. reset / base ----------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* theme switch glides instead of snapping */
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

.si { font-family: var(--font-sinhala); }

/* [hidden] must win over component display rules (.as-pill uses flex, the
   search clear button uses grid, both would otherwise ignore it). */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }
/* No border-radius here: the outline already follows each element's own
   radius, and forcing one squared off the pill-shaped search field on focus. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

svg.i { display: block; flex: 0 0 auto; }
.i-brand { stroke: none; }

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 20px; }
.wrap-read { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: 20px; }

.muted { color: var(--ink-2); }
.tnum { font-variant-numeric: tabular-nums; }
.plain { list-style: none; margin: 0; padding: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* --- 4. header ----------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in { display: flex; align-items: center; gap: 18px; height: 62px; }

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand img { border-radius: 50%; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
}

.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
  position: relative;
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: var(--step--1); color: var(--ink-2);
  transition: color .18s var(--ease);
}
.nav a:hover { color: var(--ink); }
/* the active marker is a thin brand underline, not a filled pill */
.nav a.on { color: var(--ink); }
.nav a.on::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; background: var(--brand); border-radius: 2px;
}

.iconbtn {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.iconbtn:hover { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }

.theme-toggle .i-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .i-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .i-moon { display: block; }

.menubtn { display: none; }


/* --- 5. masthead (home) -------------------------------------------------- */
/* Deliberately not a gradient hero: paper, a wordmark, a rule, a search box. */

.hero { padding: clamp(36px, 7vw, 72px) 0 28px; text-align: center; }
.hero .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand-ink); margin: 0 0 14px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--step-5);
  margin: 0 0 10px;
}
.hero h1 .si { font-family: 'Noto Serif Sinhala', var(--font-display); }
.hero .lede {
  max-width: 34rem; margin: 0 auto 26px;
  color: var(--ink-2); font-size: var(--step-1);
}
.rule {
  width: 54px; height: 1px; margin: 0 auto 26px;
  background: var(--brand); opacity: .55;
}

.search-wrap { position: relative; max-width: 30rem; margin: 0 auto; }
.search-field .i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.search {
  width: 100%; height: 52px;
  padding: 0 44px 0 46px;
  font: inherit; font-size: var(--step-1); color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--e1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search::placeholder { color: var(--ink-3); }
.search:focus {
  outline: none;
  border-color: var(--brand-line);
  box-shadow: var(--e2), 0 0 0 4px var(--brand-soft);
}
.search-field .search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.search-clear:hover { background: var(--sunken); color: var(--ink); }
.search-hint { margin: 14px 0 0; font-size: var(--step--1); color: var(--ink-3); }
.linky {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--brand-ink); border-bottom: 1px solid var(--brand-line); cursor: pointer;
}

/* --- 6. library (lists + filters) ---------------------------------------- */

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 22px 0 14px;
  border-bottom: 1px solid var(--line-soft);
}
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--sunken); border-radius: var(--r);
}
.segmented button {
  padding: 7px 14px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--step--1); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.segmented button:hover { color: var(--ink); }
.segmented button.on {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--e1); font-weight: 500;
}

.field { display: inline-flex; align-items: center; gap: 7px; }
.field > span { font-size: var(--step--1); color: var(--ink-3); }
.field select {
  font: inherit; font-size: var(--step--1); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer;
}
.toolbar .count { margin: 0 0 0 auto; font-size: var(--step--1); color: var(--ink-3); }
.toolbar .count b { color: var(--ink); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--r-sm);
  font: inherit; font-size: var(--step--1);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.btn:active { transform: translateY(1px); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-quiet:hover { color: var(--ink); }
.btn-solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-solid:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }

/* The index is a typeset list with hairlines, not a stack of identical cards. */
.index { display: flex; flex-direction: column; padding-bottom: 40px; }
.entry {
  display: grid;
  grid-template-columns: 3.1rem 1fr auto;
  align-items: baseline; gap: 14px;
  padding: 15px 10px 15px 4px;
  order: var(--o, 0);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .16s var(--ease);
}
.entry:hover { background: var(--surface-2); }
.entry[hidden] { display: none; }
.entry-no {
  font-family: var(--font-display);
  font-size: var(--step-2); color: var(--brand);
  text-align: right; font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.entry-body { min-width: 0; }
.entry-title {
  display: block;
  font-family: 'Noto Serif Sinhala', var(--font-display);
  font-weight: 700; font-size: var(--step-1); line-height: 1.35;
  color: var(--ink);
}
.entry-sub { display: block; margin-top: 2px; font-size: var(--step--1); color: var(--ink-3); }
.entry-meta { display: flex; align-items: center; gap: 8px; }

.tag {
  font-size: 0.7rem; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2);
  white-space: nowrap;
}
.tag-key { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }

.page-head { padding: 30px 0 6px; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--ink-3); margin-bottom: 10px; }
.crumbs a:hover { color: var(--ink); }
.crumbs .i { opacity: .5; }
.empty { padding: 56px 0; text-align: center; color: var(--ink-3); }

/* category tiles, varied, not three identical boxes */
.cats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); padding-bottom: 40px; }
.cat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cat:hover { border-color: var(--brand-line); transform: translateY(-2px); box-shadow: var(--e2); }
.cat-name { font-family: 'Noto Serif Sinhala', var(--font-display); font-weight: 700; font-size: var(--step-1); }
.cat-count { font-size: var(--step--1); color: var(--ink-3); }

/* --- 7. reader ----------------------------------------------------------- */

.reader { padding-bottom: 72px; }

.reader-head { padding: 26px 0 20px; }
.reader-no {
  margin: 0 0 6px; font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brand-ink);
}
.reader-title {
  font-family: 'Noto Serif Sinhala', var(--font-display);
  font-size: var(--step-4); font-weight: 700; line-height: 1.2;
  margin: 0 0 6px;
}
.reader-by { margin: 0; color: var(--ink-2); font-size: var(--step-0); }

/* quiet, grouped controls */
.tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 20px; padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.keybtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--brand-line); background: var(--brand-soft);
  color: var(--brand-ink); font: inherit; font-size: var(--step--1);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.keybtn b { font-size: var(--step-0); letter-spacing: 0.01em; }
.keybtn[aria-pressed='false'] {
  background: transparent; color: var(--ink-3); border-color: var(--line);
}
/* the key value animates when transposed */
.keybtn b.bump { animation: bump .32s var(--ease); }
@keyframes bump {
  0%   { transform: translateY(-0.28em); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.stepper {
  display: inline-flex; align-items: center; gap: 1px;
  padding: 3px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface);
}
.stepper > span { padding: 0 8px; font-size: var(--step--1); color: var(--ink-3); }
.stepper button {
  display: grid; place-items: center;
  min-width: 30px; height: 28px; padding: 0 6px;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink-2); font: inherit; font-size: var(--step--1); cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.stepper button:hover { background: var(--brand-soft); color: var(--brand-ink); }
.stepper output {
  min-width: 30px; text-align: center;
  font-size: var(--step--1); font-weight: 600; color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}

/* the sheet */
.sheet {
  position: relative; isolation: isolate;
  margin-top: 26px; padding: 30px 26px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e2);
}

/* Watermark as a MASK, not an image: the asset supplies shape only, the colour
   comes from the theme. That is why it can never show as a framed grey box. */
.sheet::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background: var(--ink);
  opacity: 0.055;
  -webkit-mask: url('/img/watermark-mask.png') center 34% / 330px no-repeat;
  mask: url('/img/watermark-mask.png') center 34% / 330px no-repeat;
}
:root[data-theme='dark'] .sheet::before { opacity: 0.085; }

.lyrics {
  position: relative; z-index: 1;
  font-family: var(--font-sinhala);
  font-size: var(--fs, 17px);
  line-height: 1.46;
  letter-spacing: 0.01em;
}
.lyrics .l { margin-bottom: 11px; }
.lyrics .gap { height: calc(var(--fs, 17px) * 1.45); }

.lyrics .u { display: inline-block; vertical-align: top; }
.lyrics .u .c {
  display: block;
  font-family: var(--font-chord);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.25;
  color: var(--chord);
  white-space: pre;
  min-height: 1.25em;
  transition: color .3s var(--ease), opacity .25s var(--ease);
}
.lyrics .u .w { display: block; white-space: pre; }
.lyrics.no-chords .u .c { opacity: 0; }

.sheet-foot {
  position: relative; z-index: 1;
  margin: 26px 0 0; text-align: center;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.no-lyrics { position: relative; z-index: 1; text-align: center; padding: 40px 0; color: var(--ink-3); }

/* prev / next */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.pn {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.pn:hover { border-color: var(--brand-line); transform: translateY(-1px); }
.pn.right { text-align: right; }
.pn-l {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-ink);
}
.pn.right .pn-l { justify-content: flex-end; }
.pn-t { font-size: var(--step--1); color: var(--ink-2); }
@media (max-width: 640px) { .prevnext { grid-template-columns: 1fr; } }

/* auto-scroll */
.autoscroll {
  position: fixed; right: 20px; bottom: 22px; z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
}
.as-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--e2); font-size: var(--step--1); color: var(--ink-2);
}
.as-pill button {
  display: grid; place-items: center;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: var(--sunken); color: var(--ink-2); cursor: pointer;
}
.as-pill button:hover { background: var(--brand-soft); color: var(--brand-ink); }
.as-pill b { color: var(--ink); font-variant-numeric: tabular-nums; }
.as-fab {
  display: grid; place-items: center;
  width: 54px; height: 54px; border: 0; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  box-shadow: var(--e3); cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.as-fab:hover { transform: scale(1.05); background: var(--brand-ink); color: #fff; }
.as-count { font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- 8. chord diagrams --------------------------------------------------- */

.diagrams { margin-top: 30px; }
.diagrams-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.diagrams-head h2 {
  margin: 0; font-size: var(--step-1);
  font-family: var(--font-display);
}
.diagrams-head .segmented { margin-left: auto; }
.chordgrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
.chordcard {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
  animation: diagram-in .32s var(--ease) both;
}
.chordcard:hover { border-color: var(--brand-line); transform: translateY(-2px); }
.chordcard .name {
  font-family: var(--font-chord); font-weight: 700;
  font-size: var(--step-0); color: var(--chord);
}
.chordcard svg { display: block; width: 100%; height: auto; }
@keyframes diagram-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
/* chord diagram internals inherit theme colours */
.cd-dot { fill: var(--ink); }
.cd-line { stroke: var(--ink-3); stroke-width: 1; }
.cd-nut { stroke: var(--ink); stroke-width: 2.6; }
.cd-label { fill: var(--ink-3); font-family: var(--font-chord); font-size: 7px; }
.cd-finger { fill: var(--surface); font-family: var(--font-chord); font-size: 7px; font-weight: 700; }
.cd-key-w { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1; }
.cd-key-b { fill: var(--ink); }
.cd-key-on { fill: var(--brand); }
.cd-key-on-b { fill: var(--brand-ink); }

/* --- 9. media facade ----------------------------------------------------- */

.media { margin-top: 30px; }
.media-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.media-head h2 { margin: 0; font-size: var(--step-1); font-family: var(--font-display); }
.media-head .segmented { margin-left: auto; }

.facade {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sunken);
  border: 1px solid var(--line);
  cursor: pointer;
  display: block;
  padding: 0;
}
.facade img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s var(--ease), filter .3s var(--ease);
}
.facade:hover img { transform: scale(1.03); filter: brightness(0.92); }
.facade::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 12, 18, .55), rgba(10, 12, 18, 0) 55%);
  pointer-events: none;
}
.facade-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #10131a;
  box-shadow: var(--e3); z-index: 2;
  transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.facade:hover .facade-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.facade-label {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  color: #fff; font-size: var(--step--1); letter-spacing: .02em;
  display: flex; align-items: center; gap: 7px;
}
.facade iframe { width: 100%; height: 100%; border: 0; display: block; }
.media-none { padding: 18px; text-align: center; color: var(--ink-3); font-size: var(--step--1); }

.media-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* --- share --------------------------------------------------------------- */
.share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.share-label { font-size: var(--step--1); color: var(--ink-3); margin-right: 2px; }
.share a, .share button {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.share a:hover, .share button:hover { color: var(--ink); border-color: var(--brand-line); transform: translateY(-2px); }

/* --- 10. footer ---------------------------------------------------------- */

.foot {
  margin-top: 40px; padding: 40px 0 28px;
  background: var(--surface); border-top: 1px solid var(--line-soft);
}
.foot-grid { display: grid; gap: 26px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot h4 {
  margin: 0 0 10px; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.foot a { color: var(--ink-2); font-size: var(--step--1); }
.foot a:hover { color: var(--brand-ink); }
.foot li { margin: 6px 0; }
.foot-about { font-size: var(--step--1); color: var(--ink-2); max-width: 26rem; }
.socials { display: flex; gap: 8px; margin-top: 14px; }
.socials a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-3);
  transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.socials a:hover { color: var(--ink); border-color: var(--brand-line); transform: translateY(-2px); }
.stores { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.store {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--step--1); color: var(--ink-2);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.store:hover { border-color: var(--brand-line); color: var(--ink); }
.foot-base {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: var(--step--1); color: var(--ink-3);
}

/* --- toast --------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 60;
  transform: translate(-50%, 12px);
  padding: 11px 20px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: var(--step--1); box-shadow: var(--e3);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- prose --------------------------------------------------------------- */
.prose { padding-bottom: 48px; }
.prose h2 { margin-top: 1.8em; }
.prose .lede { font-size: var(--step-2); font-family: var(--font-display); color: var(--ink); }
.prose blockquote {
  margin: 0 0 1.4em; padding: 16px 20px;
  border-left: 2px solid var(--brand);
  background: var(--brand-soft); border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--font-display); font-size: var(--step-1);
}
.prose blockquote cite { display: block; margin-top: .5em; font-size: var(--step--1); color: var(--ink-3); font-style: normal; }

/* patrons */
.patrons { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); padding-bottom: 40px; }
.patron {
  display: flex; gap: 15px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.patron:hover { border-color: var(--brand-line); transform: translateY(-2px); }
.patron img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.patron-initial {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink);
  font-family: var(--font-display); font-size: 1.6rem;
}
.patron h2 { margin: 0 0 2px; font-size: var(--step-1); }
.patron-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: var(--step--1); }
.patron-links a { color: var(--brand-ink); }

/* --- 11. motion ---------------------------------------------------------- */
/* One orchestrated entrance, not a fade on every section. */

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal .5s var(--ease) both; }
  .reveal-2 { animation: reveal .5s var(--ease) .06s both; }
  .reveal-3 { animation: reveal .5s var(--ease) .12s both; }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* --- component details added with the new reader ------------------------- */

/* guitar / keyboard switch: both diagrams ship, CSS picks one */
.chordgrid[data-mode='guitar'] .dk,
.chordgrid[data-mode='keyboard'] .dg { display: none; }
.chordcard .dg, .chordcard .dk { display: block; width: 100%; }

/* stagger the diagrams in, but only a little and only once */
@media (prefers-reduced-motion: no-preference) {
  .chordcard:nth-child(1) { animation-delay: .02s; }
  .chordcard:nth-child(2) { animation-delay: .05s; }
  .chordcard:nth-child(3) { animation-delay: .08s; }
  .chordcard:nth-child(4) { animation-delay: .11s; }
  .chordcard:nth-child(5) { animation-delay: .14s; }
  .chordcard:nth-child(n+6) { animation-delay: .17s; }
}

.media-panel[hidden] { display: none; }
.audio { width: 100%; }

.patron-line { margin: 2px 0 0; font-size: var(--step--1); }

/* segmented buttons that carry an icon */
.segmented button .i { display: inline-block; vertical-align: -2px; margin-right: 5px; }

/* the index rows reveal as one group, not one-by-one */
.index { animation: none; }

/* ===========================================================================
   Revision 1: blue identity, restructured home, two-column reader
   =========================================================================== */

/* --- nav CTA ------------------------------------------------------------- */
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px; padding: 7px 12px !important;
  border: 1px solid var(--brand-line); border-radius: 999px;
  color: var(--brand-ink) !important; background: var(--brand-soft);
}
.nav-cta:hover { background: var(--brand); color: #fff !important; border-color: var(--brand); }
.nav-cta::after { display: none !important; }

/* --- hero ---------------------------------------------------------------- */
.hero { padding: clamp(34px, 6vw, 62px) 0 34px; }
.hero-search { margin-inline: auto; }

.keychips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  justify-content: center; margin-top: 20px;
}
.keychips-l { font-size: var(--step--1); color: var(--ink-3); margin-right: 4px; }
.keychip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--step--1); color: var(--ink-2);
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.keychip b { color: var(--brand-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.keychip:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--ink); }
.keychips-wide { justify-content: flex-start; margin-top: 16px; }

/* --- app download banner ------------------------------------------------- */
.appbanner {
  margin: 10px 0 0; padding: clamp(28px, 5vw, 52px) 0;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-ink) 62%, var(--brand));
  color: #fff;
}
:root[data-theme='dark'] .appbanner {
  background: linear-gradient(135deg, #0d1733, #16265c 60%, #1f3f9e);
}
.appbanner-in {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 5vw, 56px); align-items: center;
}
.appbanner h2 { color: #fff; font-size: var(--step-3); margin-bottom: .35em; }
.appbanner p { color: rgba(255, 255, 255, .82); max-width: 32rem; }
.appbanner-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.store-lg {
  padding: 10px 16px; border-radius: var(--r);
  background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.store-lg:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); color: #fff; }
.store-lg span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-lg small { font-size: .62rem; opacity: .75; letter-spacing: .04em; text-transform: uppercase; }

/* phone mockup, pure CSS */
.phone {
  justify-self: center;
  width: min(252px, 70vw); aspect-ratio: 9 / 16.6;
  padding: 10px 9px;
  background: #0b0f1a;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .65), inset 0 0 0 2px rgba(255, 255, 255, .05);
  position: relative;
}
.phone::before {
  content: ''; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18);
}
.phone-screen {
  height: 100%; border-radius: 22px; overflow: hidden;
  background: #f7f7f4; padding: 26px 11px 11px;
  display: flex; flex-direction: column; gap: 8px;
}
.phone-top { display: flex; align-items: center; gap: 7px; color: #121725; font-size: 11px; font-weight: 600; }
.phone-top img { border-radius: 50%; }
.phone-search {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 9px; border-radius: 999px;
  background: #fff; border: 1px solid #e5e4de;
  font-size: 9px; color: #828b9e;
}
.phone-list { display: flex; flex-direction: column; }
.phone-row {
  display: grid; grid-template-columns: 17px 1fr auto;
  gap: 6px; align-items: center;
  padding: 7px 2px; border-bottom: 1px solid #ecebe6;
}
.phone-no { font-size: 10px; color: #2b65f7; text-align: right; font-weight: 600; }
.phone-title {
  font-size: 9.5px; color: #121725; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-key {
  font-size: 7.5px; color: #1b46b3;
  background: #e7eeff; border-radius: 999px; padding: 2px 5px;
}

@media (max-width: 820px) {
  .appbanner-in { grid-template-columns: 1fr; text-align: center; }
  .appbanner p { margin-inline: auto; }
  .appbanner-cta { justify-content: center; }
  .phone { order: -1; }
}

/* --- bands (home sections) ----------------------------------------------- */
.band { padding: clamp(30px, 5vw, 52px) 0 0; }
.band-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.band-head h2 { margin: 0; font-size: var(--step-3); }
.band-head .btn { margin-left: auto; }
.band-sub { margin: 0 0 0 auto; font-size: var(--step--1); }

/* --- A to Z -------------------------------------------------------------- */
.az { display: flex; flex-wrap: wrap; gap: 5px; }
.az-k {
  display: grid; place-items: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: var(--step--1); cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.az-k:hover:not(:disabled):not(.is-off) { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
.az-k.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.az-k:disabled, .az-k.is-off { opacity: .32; cursor: default; }
.az-lg .az-k { min-width: 40px; height: 40px; font-size: var(--step-0); }

/* --- split (about / mission) --------------------------------------------- */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px, 4vw, 44px); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split-cards { display: grid; gap: 12px; align-content: start; }
.mv {
  padding: 20px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
}
.mv h3 { margin: 0 0 .3em; font-size: var(--step-1); }
.mv p { margin: 0; font-size: var(--step--1); color: var(--ink-2); }

/* --- shared filter bar --------------------------------------------------- */
.filterbar { display: grid; gap: 12px; padding: 4px 0 16px; }
.filterbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.search-wrap-sm { max-width: none; }
.search-sm { height: 44px; font-size: var(--step-0); padding-left: 42px; }
.filterbar .count { margin-left: auto; }

/* --- reader: two columns ------------------------------------------------- */
.readgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr); gap: 20px; align-items: start; }
.readgrid-side { display: grid; gap: 14px; position: sticky; top: 78px; }
@media (max-width: 980px) {
  /* mobile order: diagrams (already above), then sheet, then media */
  .readgrid { grid-template-columns: 1fr; }
  .readgrid-side { position: static; }
}
.sidecard {
  padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.sidecard h2, .media .media-head h2 {
  margin: 0 0 10px; font-size: var(--step--1); font-family: var(--font-ui);
  color: var(--ink-3); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.sidecard .share { margin: 0; }
.segmented-full { display: grid; grid-auto-flow: column; width: 100%; margin-bottom: 10px; }
.segmented-full button { white-space: nowrap; }

/* --- toolbar extras ------------------------------------------------------ */
.toolgroup { display: inline-flex; gap: 6px; margin-left: auto; }
.btn-sm { padding: 7px 11px; font-size: var(--step--1); }
.tag-beat { color: var(--ink-2); }
@media (max-width: 720px) { .toolgroup { margin-left: 0; width: 100%; } }

/* --- contact ------------------------------------------------------------- */
.contact-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.contact-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.contact-card:hover { border-color: var(--brand-line); transform: translateY(-2px); box-shadow: var(--e2); }
.contact-card > span:nth-child(2) { display: flex; flex-direction: column; margin-right: auto; }
.contact-card b { font-size: var(--step-0); }
.contact-card small { font-size: var(--step--1); color: var(--ink-3); }
.contact-ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink);
}
.socials-lg a { width: 42px; height: 42px; }

/* --- patrons preview ----------------------------------------------------- */
.patrons-sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.patrons-sm .patron { padding: 14px; gap: 12px; }
.patrons-sm img, .patrons-sm .patron-initial { width: 56px; height: 56px; font-size: 1.3rem; }
.patrons-sm h3 { margin: 0; font-size: var(--step-0); }

/* A hymn with no media does not need a side column; the sheet takes the width
   and the share card simply stacks underneath. */
.readgrid.is-single { grid-template-columns: 1fr; }
.readgrid.is-single .readgrid-side { position: static; max-width: 24rem; }

/* ===========================================================================
   Revision 2: mobile pass, drawer, new home sections
   =========================================================================== */

/* Only one clear icon in a search field: hide the browser's native one and
   keep our own button, which is themed and positioned correctly. */
.search::-webkit-search-cancel-button,
.search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search[type='search'] { appearance: none; }

/* --- search field focus behaviour (the RGB ring is defined further down) --- */
.search-field .search {
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease);
}
.search-field .i { transition: color .25s var(--ease), transform .25s var(--ease); }
.search-field:focus-within .i { color: var(--brand); transform: translateY(-50%) scale(1.08); }
/* --- jump-to-filter dropdowns under Featured ----------------------------- */
.jumpbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.jumpbar .field select { min-width: 10rem; }

/* --- Popular: a numbered chart, deliberately not the plain index list ----- */
.poplist {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.pop a {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; height: 100%;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--brand-soft), transparent 62%);
  border: 1px solid var(--line);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.pop a:hover { border-color: var(--brand-line); transform: translateY(-2px); box-shadow: var(--e2); }
.pop-rank {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--brand); opacity: .55; line-height: 1; flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.pop-body { min-width: 0; margin-right: auto; }
.pop-title {
  display: block; font-family: 'Noto Serif Sinhala', var(--font-display);
  font-weight: 700; font-size: var(--step-0); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pop-sub {
  display: block; font-size: var(--step--1); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pop-meta { flex: 0 0 auto; }
@media (max-width: 720px) { .poplist { grid-template-columns: 1fr; } }

/* --- About: lead + figures + two mission cards ---------------------------- */
.aboutwrap {
  display: grid; gap: 14px;
  grid-template-columns: 1.25fr 1fr;
  grid-template-areas: 'lead stats' 'mission vision';
}
.aboutlead { grid-area: lead; }
.aboutlead h2 { font-size: var(--step-3); margin-bottom: .4em; }
.aboutlead .btn { margin-top: 6px; }
.aboutstats {
  grid-area: stats; display: grid; gap: 10px; align-content: start;
  grid-template-columns: repeat(3, 1fr);
}
.astat {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 12px;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  text-align: center;
}
.astat b { font-family: var(--font-display); font-size: var(--step-3); color: var(--brand); line-height: 1; }
.astat span { font-size: .72rem; color: var(--ink-3); letter-spacing: .03em; }
.mv-mission { grid-area: mission; }
.mv-vision { grid-area: vision; }
.mv { position: relative; padding-top: 42px; }
.mv-ic {
  position: absolute; top: 16px; left: 20px;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink);
}
@media (max-width: 820px) {
  .aboutwrap { grid-template-columns: 1fr; grid-template-areas: 'lead' 'stats' 'mission' 'vision'; }
}

/* --- app banner image ----------------------------------------------------- */
.appshot {
  justify-self: center;
  width: min(300px, 72vw); height: auto; display: block;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .45));
}

/* --- back to top (bottom LEFT, away from the auto-scroll control) --------- */
.totop {
  position: fixed; left: 16px; bottom: 22px; z-index: 30;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); box-shadow: var(--e2); cursor: pointer;
  transition: transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.totop .i { transform: rotate(180deg); }
.totop:hover { color: var(--brand-ink); border-color: var(--brand-line); transform: translateY(-2px); }

/* --- mobile drawer -------------------------------------------------------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 14, 24, .5); backdrop-filter: blur(2px);
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(310px, 86vw);
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--e3);
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer.open { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step-1);
}
.drawer-nav a .i { color: var(--ink-3); }
.drawer-nav a.on { color: var(--brand-ink); font-weight: 600; }
.drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; padding: 13px; border-radius: var(--r);
  background: var(--brand); color: #fff; font-size: var(--step-0);
}
.drawer-social { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.drawer-social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-3);
}
body.drawer-open { overflow: hidden; }

/* ===========================================================================
   MOBILE. Measured at a true 360/390/414px viewport (Chrome headless clamps
   --window-size to 500px, so these were verified by rendering in an iframe).
   =========================================================================== */

@media (max-width: 1060px) {
  .nav { display: none; }
  .menubtn { display: grid; }
}

@media (max-width: 640px) {
  /* the reserved scrollbar gutter is desktop-only; on a phone it just steals
     15px of a 360px viewport */
  html { scrollbar-gutter: auto; }

  .wrap, .wrap-read { padding-inline: 14px; }
  .topbar-in { height: 56px; gap: 10px; }
  .brand img { width: 30px; height: 30px; }
  .brand-name { font-size: .92rem; }
  .brand-sub { font-size: .58rem; }

  /* hero: the Sinhala wordmark must not take three lines */
  .hero { padding: 24px 0 22px; }
  .hero h1 { font-size: 1.75rem; }
  .hero .lede { font-size: var(--step-0); margin-bottom: 18px; }
  .hero .eyebrow { font-size: .62rem; letter-spacing: .14em; margin-bottom: 10px; }
  .rule { margin-bottom: 18px; }
  .search { height: 46px; font-size: var(--step-0); }
  .keychips { gap: 6px; margin-top: 14px; }
  .keychip { padding: 5px 10px; }

  /* sections sit closer together */
  .band { padding-top: 26px; }
  .band-head { margin-bottom: 12px; padding-bottom: 10px; }
  .band-head h2 { font-size: var(--step-2); }
  .band-head .btn { margin-left: auto; padding: 7px 10px; font-size: .78rem; }
  .band-sub { display: none; }

  /* compact index rows */
  .entry { grid-template-columns: 2.3rem 1fr auto; gap: 10px; padding: 11px 2px; }
  .entry-no { font-size: var(--step-1); }
  .entry-title { font-size: var(--step-0); }
  .entry-sub { font-size: .78rem; }

  .jumpbar { gap: 8px; }
  .jumpbar .field { flex: 1 1 46%; }
  .jumpbar .field select { min-width: 0; width: 100%; }

  .appbanner { padding: 26px 0; }
  .appbanner h2 { font-size: var(--step-2); }
  .appbanner p { font-size: var(--step--1); }
  .appshot { width: min(240px, 66vw); }
  .appbanner-cta { gap: 8px; }
  .store-lg { padding: 9px 12px; }

  .cats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cat { padding: 12px; }
  .cat-name { font-size: var(--step-0); }
  .astat { padding: 11px 8px; }
  .astat b { font-size: var(--step-2); }

  .az-lg .az-k { min-width: 34px; height: 34px; font-size: var(--step--1); }

  .patrons, .patrons-sm { grid-template-columns: 1fr; }

  .foot { padding: 28px 0 20px; }
  .foot-grid { gap: 20px; }

  .totop { left: 12px; bottom: 16px; width: 40px; height: 40px; }
  .autoscroll { right: 12px; bottom: 16px; }
  .as-fab { width: 48px; height: 48px; }

  /* ---------- the hymn page, the worst offender ---------- */
  .reader { padding-bottom: 56px; }
  .reader-head { padding: 16px 0 12px; }
  .reader-title { font-size: 1.35rem; line-height: 1.25; }
  .reader-no { font-size: .64rem; letter-spacing: .14em; }
  .reader-by { font-size: var(--step--1); }
  .crumbs { margin-bottom: 8px; font-size: .76rem; }

  .tools { gap: 6px; margin-top: 12px; padding: 8px 0; }
  .keybtn { padding: 7px 11px; }
  .stepper > span { padding: 0 5px; font-size: .72rem; }
  .stepper button { min-width: 28px; height: 26px; }
  .toolgroup { margin-left: 0; }
  .btn-sm { padding: 6px 10px; font-size: .78rem; }

  /* chord diagrams: much smaller, and they scroll sideways in their own strip
     rather than pushing the page around */
  .diagrams { margin-top: 18px; }
  .diagrams-head { margin-bottom: 10px; gap: 8px; }
  .diagrams-head h2 { font-size: var(--step-0); }
  .chordgrid {
    display: flex; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 6px; margin-inline: -14px; padding-inline: 14px;
  }
  .chordgrid::-webkit-scrollbar { height: 0; }
  .chordcard {
    flex: 0 0 auto; width: 66px; padding: 7px 5px 6px; gap: 3px;
    scroll-snap-align: start;
  }
  .chordcard .name { font-size: .78rem; }

  .sheet { margin-top: 16px; padding: 16px 12px 10px; border-radius: var(--r); }
  .sheet::before { background-size: 210px; background-position: center 30%; }
  .lyrics { font-size: var(--fs, 16px); letter-spacing: 0; line-height: 1.42; }
  .lyrics .l { margin-bottom: 9px; }
  .lyrics .u .c { font-size: .82em; }
  .sheet-foot { margin-top: 18px; font-size: .6rem; }

  .readgrid { gap: 14px; }
  .sidecard { padding: 13px; }
  .prevnext { gap: 8px; margin-top: 18px; }
  .pn { padding: 11px 12px; }
  .pn-t { font-size: .78rem; }

  .contact-grid { gap: 10px; }
  .contact-card { padding: 14px; gap: 11px; }
  .contact-ic { width: 38px; height: 38px; }
}

/* very narrow phones */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.55rem; }
  .reader-title { font-size: 1.22rem; }
  .cats { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
  .tools { gap: 5px; }
}

/* The list pages' search is left-aligned, not centred like the hero's. */
.search-wrap-sm { max-width: 32rem; margin-left: 0; margin-right: auto; }

/* The closed drawer sits off-screen via transform, which still counts towards
   scrollable overflow and gave the page a horizontal scrollbar on phones.
   `clip` (not `hidden`) suppresses it WITHOUT creating a scroll container, so
   position: sticky on the header keeps working. */
html { overflow-x: clip; }

@media (max-width: 640px) {
  /* Footer and inline links were 17 to 21px tall, well under a comfortable
     touch target. Give them real height without changing the visual rhythm. */
  .foot a { display: inline-block; padding-block: 7px; }
  .foot li { margin: 0; }
  .patron-links a, .crumbs a { display: inline-block; padding-block: 6px; }
  .az-k { min-height: 34px; }

  /* nothing readable should sit under ~10.5px on a phone */
  .store-lg small { font-size: .68rem; }
  .sheet-foot { font-size: .66rem; }
  .astat span { font-size: .76rem; }
  .foot h4 { font-size: .74rem; }
}

/* A position:fixed element escapes `overflow-x: clip` on an ancestor, so the
   closed drawer (parked off-screen with translateX) still widened the page on
   phones. Taking it out of layout entirely when closed is the only reliable
   fix; JS mounts it one frame before sliding it in so the transition still runs. */
.drawer { display: none; }
.drawer.mounted { display: flex; }

/* Grid and flex items default to min-width:auto, so the nowrap Popular titles
   refused to shrink and forced the page to 408px on phones. */
.poplist > .pop, .pop > a, .pop-body { min-width: 0; }
.pop-meta { flex: 0 0 auto; }

/* Two filter dropdowns side by side truncate their labels on a 360px phone;
   give each its own row below 420px. */
@media (max-width: 420px) {
  .jumpbar { flex-direction: column; }
  .jumpbar .field { flex: 1 1 auto; width: 100%; }
  .jumpbar .field select { flex: 1 1 auto; }
}

/* ===========================================================================
   Revision 3: more blue, header and drawer rebuild, RGB search
   =========================================================================== */

/* --- B. buttons carry the brand colour ----------------------------------- */
/* `.btn` is the ordinary call to action (View all, Read our story, ...) and is
   now solid blue. `.btn-sm` is used in the hymn toolbar, which sits right above
   the chord sheet, so it stays outlined to keep the reading area calm. */
.btn {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.btn .i { color: currentColor; }

.btn-solid { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.btn-solid:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
:root[data-theme='dark'] .btn-solid { color: #0b1020; }
:root[data-theme='dark'] .btn-solid:hover { color: #0b1020; }

.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); }

.btn-sm {
  background: var(--surface); color: var(--brand-ink); border-color: var(--brand-line);
}
.btn-sm:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }

/* --- B. nav ---------------------------------------------------------------- */
.nav-cta {
  background: var(--brand) !important; border-color: var(--brand) !important;
  color: #fff !important;
}
.nav-cta:hover { background: var(--brand-ink) !important; border-color: var(--brand-ink) !important; }

/* active item marker, thicker and unmistakably blue */
.nav a.on::after { height: 3px; bottom: 1px; background: var(--brand); border-radius: 3px; }

/* --- B. category cards ---------------------------------------------------- */
.cat {
  border-top: 3px solid var(--brand-line);
  transition: border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.cat:hover {
  border-top-color: var(--brand);
  background: var(--brand-soft);
  border-color: var(--brand-line);
  border-top-color: var(--brand);
}
.cat:hover .cat-name { color: var(--brand-ink); }

/* --- B. footer, solid blue ------------------------------------------------ */
.foot {
  background: linear-gradient(160deg, var(--brand-deep), var(--brand-ink) 55%, var(--brand));
  border-top: 0; color: rgba(255, 255, 255, .88);
}
:root[data-theme='dark'] .foot {
  background: linear-gradient(160deg, #0a1330, #12204e 55%, #1b357f);
}
.foot h4 { color: rgba(255, 255, 255, .62); }
.foot a { color: rgba(255, 255, 255, .86); }
.foot a:hover { color: #fff; }
.foot-about { color: rgba(255, 255, 255, .8); }
.foot .socials a, .foot .store {
  border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .88);
}
.foot .socials a:hover, .foot .store:hover {
  border-color: #fff; color: #fff; background: rgba(255, 255, 255, .12);
}
.foot-base {
  border-top-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .72);
}
.foot-base a { color: #fff; }

/* --- C. wordmark ---------------------------------------------------------- */
.brand { gap: 10px; }
.brand img { border-radius: 50%; flex: 0 0 auto; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.04rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); line-height: 1.1; white-space: nowrap;
}

/* --- C. drawer, rebuilt --------------------------------------------------- */
.drawer {
  width: min(320px, 88vw);
  padding: 0 0 calc(14px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-left: 0;
  gap: 0;
}
.drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(140deg, var(--brand-deep), var(--brand));
  color: #fff;
}
.drawer-top .brand-name { color: #fff; font-size: 1rem; }
.drawer-top .iconbtn {
  border-color: rgba(255, 255, 255, .35); color: #fff; background: rgba(255, 255, 255, .1);
}
.drawer-top .iconbtn:hover { background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff; }

.drawer-nav { padding: 10px 12px 0; }
.drawer-nav a {
  position: relative;
  padding: 13px 12px; border-bottom: 0; border-radius: var(--r-sm);
  font-size: var(--step-0); color: var(--ink-2);
}
.drawer-nav a:hover { background: var(--brand-soft); color: var(--ink); }
.drawer-nav a.on {
  background: var(--brand-soft); color: var(--brand-ink); font-weight: 600;
}
.drawer-nav a.on::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.drawer-cta { margin: 14px 16px 0; }
.drawer-social { margin-top: 16px; padding: 0 16px; }
.drawer-foot {
  margin-top: 16px; padding: 12px 18px 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--step--1); color: var(--ink-3);
}

/* --- K. RGB search ring --------------------------------------------------- */
/* A rotating multi-colour ring behind the field. The input keeps its own solid
   background, so the colour only ever shows as a border. */
/* An animated gradient RING that hugs the field exactly.
   This is a masked border, not a blurred backdrop: a blurred pseudo-element
   spilled colour below and around the bar. The mask punches out the middle so
   only a 2px rounded edge is painted, matching the input's own radius. */
.search-field.is-rgb { position: relative; border-radius: 26px; }
.search-field.is-rgb::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 28px;
  padding: 2px;
  background: conic-gradient(from var(--rgb-a, 0deg),
    #2b65f7, #22d3ee, #34d399, #fbbf24, #f472b6, #8b5cf6, #2b65f7);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .9;
  z-index: 0;
  pointer-events: none;
}
/* z-index only: these elements must keep their own positioning. Setting
   position:relative here previously knocked the magnifier out of the field. */
/* The input is opaque and comes after the icon in the DOM, so the icon needs a
   HIGHER z-index or the field paints over it and the magnifier disappears. */
.search-field.is-rgb .search { position: relative; z-index: 1; }
.search-field.is-rgb .i,
.search-field.is-rgb .search-clear { z-index: 2; }
.search-field.is-rgb:focus-within::before { opacity: 1; }
/* keep the pill shape in every state */
.search-field.is-rgb .search,
.search-field.is-rgb .search:focus,
.search-field.is-rgb .search:hover { border-radius: 26px; }

@property --rgb-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  .search-field.is-rgb::before { animation: rgbspin 6s linear infinite; }
  @keyframes rgbspin { to { --rgb-a: 360deg; } }
}
/* Browsers without @property cannot animate the angle; fade the ring instead so
   it still feels alive rather than sitting dead. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .search-field.is-rgb::before { background: linear-gradient(90deg, #2b65f7, #22d3ee, #8b5cf6); }
}

/* --- F. view counts ------------------------------------------------------- */
.views {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.views .i { width: 13px; height: 13px; }
.pop .views { color: var(--brand-ink); }

/* --- G. fullscreen presentation mode -------------------------------------- */
.sheet-fs {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.sheet-fs:hover { color: var(--brand-ink); border-color: var(--brand-line); }

/* When the sheet is the fullscreen element, strip it back to the words. */
.sheet:fullscreen {
  border-radius: 0; border: 0; box-shadow: none;
  padding: clamp(20px, 4vw, 54px);
  overflow-y: auto;
  background: var(--surface);
  display: flex; flex-direction: column; justify-content: center;
}
.sheet:fullscreen .lyrics {
  font-size: clamp(20px, 2.8vw, 40px);
  max-width: 60rem; margin-inline: auto;
}
.sheet:fullscreen .lyrics .u .c { display: none; }   /* chords OFF in presentation */
.sheet:fullscreen .sheet-foot { margin-top: 28px; }
.sheet:fullscreen::before { opacity: .07; background-size: min(46vh, 480px); }
:root[data-theme='dark'] .sheet:fullscreen::before { opacity: .1; }
.sheet:fullscreen .sheet-fs {
  position: fixed; top: 16px; right: 16px; width: 44px; height: 44px;
  background: var(--surface-2);
}
.fs-exit { display: none; }
.sheet:fullscreen .fs-exit { display: block; }
.sheet:fullscreen .fs-enter { display: none; }

@media (max-width: 640px) {
  .brand img { width: 36px; height: 36px; }
  .brand-name { font-size: .92rem; }

  /* Controls sit flush right so the wordmark reads as the left anchor and the
     burger lines up with the page gutter. */
  .topbar-in > .theme-toggle { margin-left: auto; }
}

@media (max-width: 420px) {
  /* keep the full name on one line on small phones */
  .brand-name { font-size: .82rem; }
  .brand img { width: 32px; height: 32px; }
}

/* --- D. universal search results ------------------------------------------ */
.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 50;
  max-height: 60vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--e3);
  padding: 6px;
}
.result {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--r-sm); color: var(--ink);
}
.result:hover, .result.on { background: var(--brand-soft); }
.result-no {
  flex: 0 0 2.2rem; text-align: right;
  font-family: var(--font-display); font-size: var(--step-0);
  color: var(--brand); font-variant-numeric: tabular-nums;
}
.result-body { min-width: 0; margin-right: auto; }
.result-title {
  display: block; font-family: 'Noto Serif Sinhala', var(--font-display);
  font-weight: 700; font-size: var(--step-0); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.result-sub {
  display: block; font-size: var(--step--1); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.results-none { margin: 0; padding: 14px; text-align: center; color: var(--ink-3); font-size: var(--step--1); }
.search-wrap { position: relative; }

/* ===========================================================================
   Print / PDF output
   ---------------------------------------------------------------------------
   The PDF is produced by the browser's own print pipeline, so text stays
   selectable and Sinhala stays correctly shaped. Everything interactive is
   stripped, and the branding block below only exists on paper.
   =========================================================================== */

.printmark, .printfoot { display: none; }

@media print {
  @page { margin: 14mm; }

  /* backgrounds and images are dropped by default when printing; the watermark
     and the brand colours are the whole point of the branding block */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  html, body { background: #fff !important; color: #000 !important; }

  /* Hide EVERY piece of interactive UI. The share card was previously bleeding
     into the printed page because only `.share` was hidden, not the card
     wrapping it. */
  .topbar, .drawer, .drawer-backdrop, .foot, .autoscroll, .totop, .toast,
  .media, .diagrams, .prevnext, .crumbs, .tools, .share, .sidecard,
  .readgrid-side, .sheet-fs, .searchall, .filterbar, .jumpbar, .band-head .btn,
  .results, .skip, .reader-head .tag {
    display: none !important;
  }

  .wrap, .wrap-read { max-width: none; padding: 0; }
  .readgrid { display: block; }

  .reader-head { padding: 0 0 8px; }
  .reader-title { font-size: 20pt; }
  .reader-no { color: #444 !important; }
  .reader-by { color: #333 !important; }

  .sheet {
    position: relative;
    border: 0; box-shadow: none; border-radius: 0;
    padding: 0; margin: 0;
    background: #fff !important;
  }

  /* The watermark: visible on paper, still behind the words. It was hidden
     entirely before, which is why the PDF had none. */
  .sheet::before {
    content: '' !important;
    display: block !important;
    position: absolute; inset: 0;
    background: #000 !important;
    opacity: .16 !important;
    -webkit-mask: url('/img/watermark-mask.png') center 42% / 62mm no-repeat;
    mask: url('/img/watermark-mask.png') center 42% / 62mm no-repeat;
    z-index: 0;
  }

  .lyrics { position: relative; z-index: 1; font-size: 12pt; color: #000 !important; }
  .lyrics .u .c { color: #1b46b3 !important; font-weight: 700; }
  .sheet-foot { display: none; }

  /* logo, top right, like a channel mark */
  .printmark {
    display: block !important;
    position: fixed; top: 0; right: 0; z-index: 2;
  }
  .printmark img { width: 16mm; height: 16mm; border-radius: 50%; }

  /* site link + phone along the bottom of every printed page */
  .printfoot {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
    justify-content: space-between; align-items: baseline;
    padding-top: 2mm;
    border-top: .4pt solid #bbb;
    font-size: 9pt; color: #333 !important;
  }
  .printfoot a { color: #1b46b3 !important; text-decoration: underline; }

  a[href]::after { content: none !important; }
}

/* --- I. About Us: versioned appreciations + contact cards ----------------- */
.versions { display: grid; gap: 12px; margin: 0 0 1.6em; }
.version {
  padding: 18px 20px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand-line);
}
.version.is-current { border-left-color: var(--brand); background: var(--brand-soft); }
.version > header {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: .5em;
}
.version-no {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--brand-ink);
}
.version-year {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.version p { margin: 0; font-size: var(--step-0); }

.people { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 1.6em; }
@media (max-width: 640px) { .people { grid-template-columns: 1fr; } }
.person {
  display: flex; align-items: center; gap: 13px;
  padding: 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.person:hover { border-color: var(--brand-line); transform: translateY(-2px); }
.person-ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink);
}
.person-body { display: flex; flex-direction: column; min-width: 0; }
.person-body b { font-size: var(--step-0); }
.person-body small { font-size: var(--step--1); color: var(--ink-3); }
.person-tel { font-size: var(--step--1); color: var(--brand-ink); font-variant-numeric: tabular-nums; }

.aboutstores { display: flex; gap: 10px; flex-wrap: wrap; }
.aboutsign {
  margin-top: 2em; padding-top: 1.2em;
  border-top: 1px solid var(--line-soft);
  font-size: var(--step-0);
}

/* --- C. the search dropdown must sit above everything -------------------- */
/* The .reveal* entrance animations create stacking contexts, so a z-index on
   the dropdown alone was trapped inside its own section and the hymn list
   painted over it. The section that holds the search gets its own layer. */
.searchlayer { position: relative; z-index: 30; }

.results {
  z-index: 70;
  max-height: min(70vh, 520px);
  background: var(--surface);          /* fully opaque, never see-through */
  box-shadow: 0 18px 50px -12px rgba(18, 26, 48, .35), 0 2px 6px rgba(18, 26, 48, .14);
  overscroll-behavior: contain;
}
:root[data-theme='dark'] .results {
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .5);
}

@media (max-width: 640px) {
  /* full width, comfortable rows, and tall enough to be worth scrolling */
  .results { max-height: min(64vh, 440px); left: 0; right: 0; }
  .result { padding: 11px 10px; }
  .result-no { flex-basis: 2rem; }
  .result-title { font-size: var(--step-0); }
}

/* The field owns its own positioning context so the magnifier and the clear
   button stay centred on the INPUT, not on the input plus the open results
   panel (which previously dragged them down into the middle of the list). */
.search-field { position: relative; }
.search-wrap { position: relative; }
.search-field .i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); pointer-events: none;
}
.search-field .search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
}
.search-wrap-sm .search-field .i { left: 14px; }

/* The search sits in a grid/flex container, where items default to
   min-width:auto and refuse to shrink below the input's intrinsic size. That
   pushed the field past the right edge on a 360px phone. */
.filterbar, .filterbar-row { min-width: 0; }
.search-wrap, .search-field { min-width: 0; max-width: 100%; }
.search-field .search { min-width: 0; width: 100%; }
.results { max-width: 100%; box-sizing: border-box; }


/* ===========================================================================
   Revision 5: more brand blue at the top of the home page, better A to Z.
   Chord and lyric surfaces are deliberately NOT tinted here.
   =========================================================================== */

/* Soft blue wash behind the hero. Fades to the page colour so there is no
   visible edge, and sits behind content (isolation keeps it off the search
   dropdown's stacking). */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, var(--brand-soft), transparent 72%),
    linear-gradient(to bottom, var(--brand-tint), transparent 88%);
  border-top: 3px solid var(--brand);
}
:root[data-theme='dark'] .hero {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, var(--brand-soft), transparent 72%),
    linear-gradient(to bottom, rgba(91, 139, 255, 0.08), transparent 88%);
}

/* Featured hymns: thin blue rule above the header, firmer blue numbers. */
.band-featured .band-head {
  border-top: 2px solid var(--brand);
  padding-top: 14px;
  border-bottom-color: var(--brand-line);
}
.band-featured .band-head h2 { color: var(--brand-ink); }
.band-featured .entry-no { color: var(--brand); font-weight: 600; }

/* Browse A to Z: available letters read as blue and clickable, missing ones
   recede, hover and press give clear feedback. CSS only. */
.az-k:not(.is-off):not(:disabled) {
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-color: var(--brand-line);
  font-weight: 600;
  text-decoration: none;
}
.az-k:not(.is-off):not(:disabled):hover {
  background: var(--brand); border-color: var(--brand); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px var(--brand);
}
.az-k:not(.is-off):not(:disabled):active { transform: translateY(0); box-shadow: none; }
.az-k.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.az-k.is-off, .az-k:disabled {
  opacity: 1;
  color: var(--ink-3); background: transparent;
  border-color: var(--line-soft); border-style: dashed;
  font-weight: 400; cursor: default;
}
.az-lg { gap: 7px; }
@media (prefers-reduced-motion: reduce) {
  .az-k:not(.is-off):not(:disabled):hover { transform: none; }
}


/* ===========================================================================
   Banners (managed from the admin panel: Web > Web Banners)
   Four tones. Text only, never HTML. Mobile: stack text above the button.
   =========================================================================== */
.kbanner {
  --kb-bg: var(--brand-tint); --kb-line: var(--brand-line); --kb-ink: var(--brand-deep);
  --kb-btn: var(--brand); --kb-btn-ink: #fff;
  background: var(--kb-bg); color: var(--kb-ink);
  border-bottom: 1px solid var(--kb-line);
}
.kbanner-success { --kb-bg: #e6f5ec; --kb-line: #b6e0c6; --kb-ink: #12402a; --kb-btn: #1a7f4b; }
.kbanner-warning { --kb-bg: #fff4dc; --kb-line: #f0d9a0; --kb-ink: #5a3d05; --kb-btn: #b7791f; }
.kbanner-promo   { --kb-bg: var(--brand); --kb-line: var(--brand); --kb-ink: #fff; --kb-btn: #fff; --kb-btn-ink: var(--brand-ink); }
:root[data-theme='dark'] .kbanner { --kb-bg: #16203a; --kb-line: #27345a; --kb-ink: #e7ebf5; --kb-btn: var(--brand); --kb-btn-ink: #0b1020; }
:root[data-theme='dark'] .kbanner-success { --kb-bg: #12261c; --kb-line: #24503a; --kb-ink: #d6f2e1; --kb-btn: #3fbf7f; }
:root[data-theme='dark'] .kbanner-warning { --kb-bg: #2b2210; --kb-line: #5a4616; --kb-ink: #f6e3b4; --kb-btn: #e0a63a; }
:root[data-theme='dark'] .kbanner-promo   { --kb-bg: #1b46b3; --kb-line: #1b46b3; --kb-ink: #fff; --kb-btn: #fff; --kb-btn-ink: #13234a; }

.kbanner-in { display: flex; align-items: center; gap: 14px; padding-block: 10px; min-width: 0; }
.kbanner-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.kbanner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--step--1); line-height: 1.45; }
.kbanner-text strong { font-weight: 700; }
.kbanner-cta {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  background: var(--kb-btn); color: var(--kb-btn-ink); font-size: var(--step--1); font-weight: 600;
}
.kbanner-cta:hover { filter: brightness(1.08); }
.kbanner-x {
  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .7;
}
.kbanner-x:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.kbanner-at-hymn_top, .kbanner-at-footer { border-top: 1px solid var(--kb-line); }
@media (max-width: 576px) {
  .kbanner-in { flex-wrap: wrap; gap: 8px 10px; }
  .kbanner-text { flex-basis: calc(100% - 52px); }
  .kbanner-cta { margin-left: 0; }
  .kbanner-img + .kbanner-text + .kbanner-cta { margin-left: 50px; }
}
@media print { .kbanner { display: none !important; } }


/* ===========================================================================
   Header, redesigned. Brand blue with a soft top-light gradient (matches the
   footer). Links are quiet pills: translucent on hover, brighter when current.
   "Submit a song" is a white pill with the WhatsApp green icon, so it reads as
   the one action without introducing a colour that is not in the brand.
   =========================================================================== */
.topbar {
  background: linear-gradient(180deg, #3d78ff 0%, var(--brand) 100%);
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 1px 0 rgba(19, 35, 74, .20), 0 10px 24px -14px rgba(19, 35, 74, .6);
}
:root[data-theme='dark'] .topbar {
  background: linear-gradient(180deg, #182c68 0%, #12204e 100%);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.topbar-in { height: 64px; gap: 16px; }
.topbar .brand-name { color: #fff; }
.topbar :focus-visible { outline-color: #fff; }

.topbar .nav { gap: 4px; }
.topbar .nav a {
  padding: 8px 14px; border-radius: 999px; font-weight: 500;
  color: rgba(255, 255, 255, .9);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.topbar .nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.topbar .nav a.on { background: rgba(255, 255, 255, .22); color: #fff; font-weight: 600; }
.topbar .nav a.on::after { display: none; }

.topbar .iconbtn {
  color: #fff; background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .26);
  border-radius: 10px;
}
.topbar .iconbtn:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .7); color: #fff; }

/* Submit a song */
.topbar .nav a.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 10px; padding: 8px 16px !important; border-radius: 999px;
  background: #fff !important; border: 1px solid #fff !important;
  color: var(--brand-ink) !important; font-weight: 600;
  box-shadow: 0 3px 10px -3px rgba(8, 20, 60, .45);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.topbar .nav a.nav-cta svg { color: #1faa59; }
.topbar .nav a.nav-cta:hover {
  background: #eef3ff !important; border-color: #eef3ff !important; color: var(--brand-deep) !important;
  transform: translateY(-1px); box-shadow: 0 6px 14px -4px rgba(8, 20, 60, .5);
}
.topbar .nav a.nav-cta:active { transform: translateY(0); box-shadow: 0 2px 6px -2px rgba(8, 20, 60, .45); }
:root[data-theme='dark'] .topbar .nav a.nav-cta { color: #13234a !important; }

/* Phones: a slightly shorter bar with comfortable 40px buttons. The full nav
   and the Submit button live in the drawer (menu button) at this width. */
@media (max-width: 1060px) {
  .topbar-in { height: 58px; gap: 10px; }
  .topbar .iconbtn { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
  .topbar-in { gap: 8px; }
  .topbar .iconbtn { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar .nav a.nav-cta, .topbar .nav a.nav-cta:hover { transition: none; transform: none; }
}

/* The header is blue now, so the hero no longer needs its own blue top rule. */
.hero { border-top: 0; }

/* Space between the header and the breadcrumb on hymn pages. */
.reader .crumbs { padding-top: 20px; }
@media (max-width: 576px) {
  .reader .crumbs { padding-top: 14px; }
}


/* ===========================================================================
   Footer on phones and tablets (<= 820px). Desktop is unchanged.
   One long column became a grouped layout:
     brand + socials   (full width)
     get the app       (two store buttons side by side, Contact below)
     Browse | Watch and learn   (two compact columns)
     credit lines      (centred, stacked)
   =========================================================================== */
@media (max-width: 820px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand  brand"
      "app    app"
      "browse watch";
    gap: 24px 20px;
  }
  .foot-brand { grid-area: brand; }
  .foot-app { grid-area: app; }
  .foot-browse { grid-area: browse; }
  .foot-watch { grid-area: watch; }

  /* brand: a real title, not a tiny label */
  .foot-brand h4 {
    font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.01em;
    text-transform: none; color: #fff; margin: 0 0 8px; font-weight: 600;
  }
  .foot-about { max-width: none; line-height: 1.55; }
  .socials { gap: 10px; margin-top: 14px; }
  .socials a { width: 42px; height: 42px; }

  /* store buttons: icon BESIDE text (the generic mobile rule that makes every
     footer link inline-block is what stacked them), two across, Contact below */
  .foot-app h4 { margin-bottom: 10px; }
  .foot .stores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0; }
  .foot .stores .store {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 10px; min-height: 46px; border-radius: 12px; font-weight: 500;
    background: rgba(255, 255, 255, .10);
  }
  .foot .stores .store:nth-child(3) { grid-column: 1 / -1; }

  /* the two link lists, tidy and easy to tap */
  .foot-browse h4, .foot-watch h4 { margin-bottom: 6px; }
  .foot-browse a, .foot-watch a { padding-block: 8px; }

  /* credit lines: centred, stacked, a little air above */
  .foot-base {
    flex-direction: column; align-items: center; text-align: center;
    gap: 4px; margin-top: 26px; padding-top: 16px; font-size: .78rem;
  }
}
@media (max-width: 380px) {
  .foot .stores { grid-template-columns: 1fr; }
}


/* ===========================================================================
   Fullscreen lyrics: never clip the top.
   The sheet was a flex column with `justify-content: center` AND scrolling. When
   a hymn is taller than the screen, centred flex content overflows equally at
   the top and bottom, and the top part can never be scrolled to (the head of
   the hymn was cut off). Auto margins centre short hymns just the same but, for
   tall ones, collapse to zero so the content starts at the top and scrolls.
   =========================================================================== */
.sheet:fullscreen { justify-content: flex-start; }
.sheet:fullscreen .lyrics { margin-block: auto; }
/* keep the first line clear of the floating exit button */
.sheet:fullscreen { padding-top: clamp(64px, 8vh, 84px); }


/* ===========================================================================
   Credit block (footer + About), site name on the hymn sheet, and a more
   visible watermark in fullscreen lyrics.
   =========================================================================== */

/* Three-line production credit: name, site, company. */
.credit { display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.credit-name { font-weight: 600; }
.foot .credit-site { padding-block: 0; }
.foot-base { align-items: flex-end; }
.aboutsign .credit { align-items: center; margin-bottom: 8px; }
@media (max-width: 820px) {
  .foot-base .credit { align-items: center; }
  .foot .credit-site { padding-block: 2px; }
}

/* The site name under each hymn: plain lowercase, not shouted capitals. */
.sheet-foot { text-transform: none; letter-spacing: 0.03em; font-size: 0.78rem; }
@media (max-width: 576px) { .sheet-foot { font-size: 0.74rem; } }

/* Fullscreen watermark: was .07 / .10, too faint to notice. Still well behind
   the words so projected lyrics stay easy to read. */
.sheet:fullscreen::before { opacity: .17; }
:root[data-theme='dark'] .sheet:fullscreen::before { opacity: .22; }

/* Phones/tablets: centre the whole credit block (this must come AFTER the
   desktop `.foot-base { align-items: flex-end }` above, which it was losing to). */
@media (max-width: 820px) {
  .foot-base { align-items: center; }
  .foot-base .credit { align-items: center; text-align: center; }
}

/* Fullscreen watermark: it is drawn as a MASK, so the earlier `background-size`
   did nothing and it stayed 330px and scrolled away with the text. Make it
   large, centre it, and pin it to the screen so it stays behind the words. */
.sheet:fullscreen::before {
  position: fixed; inset: 0;
  -webkit-mask-size: min(58vh, 560px); mask-size: min(58vh, 560px);
  -webkit-mask-position: center; mask-position: center;
}

/* The credit is a single line now: centre it against "Developed by" on desktop
   (the earlier flex-end alignment was for a three-line block). */
.foot-base { align-items: center; }
.credit { display: inline; }


/* View-count placeholder (filled from /data/view-counts.json) and the second
   line of the app section. */
.views b { font-weight: inherit; }
.appbanner p + .appbanner-sub { margin-top: 10px; color: #fff; font-weight: 500; }


/* ===========================================================================
   Header: logo only, plus the "Watch & Learn" dropdown (desktop) and the
   matching expandable group in the mobile drawer.
   =========================================================================== */
.topbar .brand img { width: 46px; height: 46px; }
@media (max-width: 1060px) { .topbar .brand img { width: 42px; height: 42px; } }

.navdrop { position: relative; }
.topbar .nav .navdrop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(255, 255, 255, .9);
  font: inherit; font-size: var(--step--1); font-weight: 500; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.topbar .nav .navdrop-btn:hover,
.topbar .nav .navdrop.open .navdrop-btn { background: rgba(255, 255, 255, .16); color: #fff; }
.navdrop-btn .i { transition: transform .18s var(--ease); }
.navdrop.open .navdrop-btn .i { transform: rotate(180deg); }

.navdrop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 214px; padding: 6px; z-index: 70;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 44px -16px rgba(10, 25, 70, .5);
}
/* These links live inside .nav, so they must undo the white-on-blue header
   link styling that applies to everything else in there. */
.topbar .nav .navdrop-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: transparent;
  color: var(--ink-2); font-size: var(--step--1); font-weight: 500;
}
.topbar .nav .navdrop-menu a:hover { background: var(--brand-soft); color: var(--ink); }
.navdrop-menu a .i { color: var(--brand); flex: 0 0 auto; }

/* Mobile drawer group (native <details>, no script). */
.drawer-group summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 12px; border-radius: var(--r-sm);
  font-size: var(--step-0); color: var(--ink-2);
}
.drawer-group summary::-webkit-details-marker { display: none; }
.drawer-group summary::marker { content: ''; }
.drawer-group summary:hover { background: var(--brand-soft); color: var(--ink); }
.drawer-group summary .i { color: var(--ink-3); transition: transform .18s var(--ease); }
.drawer-group[open] summary .i { transform: rotate(90deg); }
.drawer-sub { display: flex; flex-direction: column; padding: 2px 0 6px 12px; }
.drawer-nav .drawer-sub a {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 11px 12px; font-size: var(--step--1);
}
.drawer-nav .drawer-sub a .i { color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .navdrop-btn .i, .drawer-group summary .i { transition: none; }
}


/* ===========================================================================
   Banners start INVISIBLE and slide in a couple of seconds after the page loads
   (site.js adds .is-in). A banner the visitor already closed is removed by the
   script before it is ever shown, so it can no longer flash on every page.
   Without JavaScript the <noscript> rule in the layout shows them normally.
   =========================================================================== */
.kbanner {
  max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
  border-bottom-width: 0;
  transition: max-height .5s var(--ease), opacity .45s var(--ease), border-width .45s var(--ease), visibility 0s linear .5s;
}
.kbanner.is-in {
  max-height: 320px; opacity: 1; visibility: visible; border-bottom-width: 1px;
  transition: max-height .5s var(--ease), opacity .45s var(--ease), border-width .45s var(--ease), visibility 0s;
}
.kbanner-at-hymn_top, .kbanner-at-footer { border-top-width: 0; }
.kbanner-at-hymn_top.is-in, .kbanner-at-footer.is-in { border-top-width: 1px; }
@media (prefers-reduced-motion: reduce) {
  .kbanner, .kbanner.is-in { transition: none; }
}


/* ===========================================================================
   Auto-scroll play button in the brand blue (it was near-black), and the
   arranger credit line hidden in fullscreen lyrics (words only).
   =========================================================================== */
.as-fab {
  background: var(--brand); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(43, 101, 247, .65), var(--e3);
}
.as-fab:hover { background: var(--brand-ink); color: #fff; }
/* In dark mode the brand blue is a light blue, so the icon goes dark for contrast. */
:root[data-theme='dark'] .as-fab { background: var(--brand); color: #0b1020; box-shadow: 0 10px 24px -8px rgba(91, 139, 255, .55), var(--e3); }
:root[data-theme='dark'] .as-fab:hover { background: #7ea2ff; color: #0b1020; }

.sheet:fullscreen .l.is-credit,
.sheet:fullscreen .gap.is-credit-gap { display: none; }