/* ============================================================
   Base + components — GujaratiLyrics
   Class names map 1:1 to future Astro components (see README).
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-guj);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-soft); color: var(--ink); }

.wrap      { max-width: var(--wrap);    margin-inline: auto; padding-inline: var(--s4); }
.wrap-sm   { max-width: var(--wrap-sm); margin-inline: auto; padding-inline: var(--s4); }
.lat       { font-family: var(--font-ui); }
.sr        { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ============ Header ============ */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr__in {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s5);
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s4);
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(140deg, var(--accent), var(--gold));
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-display); font-size: 17px; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.01em; line-height: 1;
}
.brand__name span { color: var(--accent); }

.nav { margin-inline-start: auto; }
.nav .menu { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav .menu > li { position: relative; display: flex; align-items: center; }
.nav .menu a {
  padding: 7px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-base); color: var(--ink-2); font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav .menu a:hover { background: var(--surface-2); color: var(--ink); }
.nav .current-menu-item > a,
.nav .current-menu-ancestor > a,
.nav .current-cat > a { color: var(--accent); background: var(--accent-soft); }

.hdr__acts { display: flex; align-items: center; gap: var(--s2); }

.iconbtn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  transition: border-color .15s, color .15s, background .15s;
}
.iconbtn:hover { border-color: var(--line-strong); color: var(--ink); }
.iconbtn svg { width: 17px; height: 17px; }

/* compact search trigger in header */
.searchmini {
  display: flex; align-items: center; gap: var(--s2);
  height: 36px; padding: 0 12px 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-3);
  font-size: var(--fs-sm); min-width: 190px;
  transition: border-color .15s, box-shadow .15s;
}
.searchmini:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.searchmini svg { width: 15px; height: 15px; flex-shrink: 0; }
.searchmini kbd {
  margin-inline-start: auto; font-family: var(--font-ui); font-size: 10px;
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px;
  background: var(--surface-2); color: var(--ink-3);
}

/* ============ Hero ============ */

.hero {
  /* No overflow:hidden here — it clipped the search suggestions at the
     section edge. The radial gradients below are backgrounds and cannot
     overflow the box, so nothing needs clipping. */
  position: relative;
  padding: var(--s8) 0 var(--s7);
  background:
    radial-gradient(60% 90% at 15% 0%,  var(--accent-soft) 0%, transparent 62%),
    radial-gradient(50% 80% at 88% 8%,  var(--gold-soft)   0%, transparent 60%);
  border-bottom: 1px solid var(--line);
}
.hero__in { max-width: 760px; margin-inline: auto; padding-inline: var(--s4); text-align: center; }
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5.5vw, var(--fs-3xl));
  line-height: 1.25; letter-spacing: -.02em; margin: 0 0 var(--s3);
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__sub {
  color: var(--ink-2); font-size: var(--fs-md);
  max-width: 520px; margin: 0 auto var(--s5);
}

/* ============ Search field ============ */

.searchbox {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-full);
  padding: 6px 6px 6px 18px;
  box-shadow: var(--shadow);
  transition: border-color .18s, box-shadow .18s;
}
.searchbox:hover, .searchbox:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow);
}
.searchbox svg { width: 19px; height: 19px; color: var(--ink-3); flex-shrink: 0; }
.searchbox input {
  flex: 1; border: 0; background: none; outline: none;
  font-family: var(--font-guj); font-size: var(--fs-md); color: var(--ink);
  padding: 12px 0; min-width: 0;
}
.searchbox input::placeholder { color: var(--ink-3); }
.btn-go {
  border: 0; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  padding: 11px 22px; font-weight: 600; font-size: var(--fs-base);
  flex-shrink: 0; transition: background .15s;
}
.btn-go:hover { background: var(--accent-hover); }

.hints {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  justify-content: center; margin-top: var(--s4);
}
.hint {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-full); padding: 6px 13px;
  font-size: var(--fs-sm); color: var(--ink-2);
  transition: border-color .15s, color .15s, background .15s;
}
.hint:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.hint--ai { border-color: var(--indigo-line); background: var(--indigo-soft); color: var(--indigo); }

/* ============ Section shell ============ */

.sec { padding: var(--s7) 0; }
.sec__hd {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s5); flex-wrap: wrap;
}
.sec__hd h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-xl); letter-spacing: -.015em; margin: 0;
}
.sec__hd p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.sec__more {
  margin-inline-start: auto; font-size: var(--fs-sm);
  color: var(--accent); font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.sec__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ Song card (grid) ============ */

.grid { display: grid; gap: var(--s4); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s4) var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card__rank {
  position: absolute; top: -9px; inset-inline-start: var(--s4);
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-full); padding: 3px 9px; letter-spacing: .04em;
}
.card__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-lg); line-height: 1.4; margin: 0;
  letter-spacing: -.01em;
}
.card:hover .card__title { color: var(--accent); }
.card__rom {
  font-family: var(--font-ui); font-size: var(--fs-sm);
  color: var(--ink-3); letter-spacing: .01em; margin: 0;
}
.card__meta {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: auto; padding-top: var(--s3);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.card__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }

/* ============ Chips / tags ============ */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 4px 11px; font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink-2); background: var(--surface-2);
  transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--accent-line); color: var(--accent); }
.chip--accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chip--gold   { background: var(--gold-soft);   border-color: var(--gold-line);   color: var(--gold); }
.chip--ai     { background: var(--indigo-soft); border-color: var(--indigo-line); color: var(--indigo); }

/* ============ Category tiles ============ */

.cat {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s3) var(--s4);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cat:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cat__ico {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 19px;
  background: var(--accent-soft);
}
.cat__ico--gold { background: var(--gold-soft); }
.cat__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); line-height: 1.3; }
.cat__n { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-3); }

/* ============ Artist row ============ */

/* The mockup's horizontal artist strip lived here. Removed: its
   `.artist { width: 96px }` collided with the artist-page hero below,
   and no template rendered the strip. */

/* ============ Compact list rows ============ */

.rows { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
.row__i {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  color: var(--ink-3); width: 24px; flex-shrink: 0; text-align: end;
}
.row__body { min-width: 0; flex: 1; }
.row__t {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  line-height: 1.4; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row:hover .row__t { color: var(--accent); }
.row__s {
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink-3); margin: 1px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__aside { flex-shrink: 0; display: flex; align-items: center; gap: var(--s3); }
.row__views { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ============ Ad slot ============ */

.ad {
  display: grid; place-items: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r);
  background: var(--surface-2); color: var(--ink-3);
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  min-height: 96px; margin-block: var(--s5);
}
.ad--lb { min-height: 108px; }
.ad--rect { min-height: 260px; }
.ad--inline { min-height: 250px; margin-block: var(--s6); }

/* ============ Breadcrumb ============ */

.crumbs {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--ink-3);
  padding: var(--s4) 0 0;
}
.crumbs a:hover { color: var(--accent); }
.crumbs svg { width: 13px; height: 13px; opacity: .5; }

/* ============ Page head (category) ============ */

.phead {
  padding: var(--s5) 0 var(--s6);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4) var(--s5);
  align-items: start;
}
/* Title, description and stats stack in the first column; the search box
   sits in the second and spans the rows beside them. */
.phead > :not(.phead__find) { grid-column: 1; }
.phead__find { grid-column: 2; grid-row: 1 / -1; align-self: center; }

@media (max-width: 860px) {
  .phead { grid-template-columns: 1fr; }
  .phead > :not(.phead__find), .phead__find { grid-column: 1; }
  .phead__find { grid-row: auto; }
}
.phead h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 4.5vw, var(--fs-2xl));
  letter-spacing: -.02em; line-height: 1.25; margin: 0 0 var(--s2);
}
.phead__rom { font-family: var(--font-ui); font-size: var(--fs-base); color: var(--ink-3); margin: 0 0 var(--s3); }
.phead__desc { color: var(--ink-2); margin: 0; }
.phead__desc p { margin: 0 0 var(--s2); }
.phead__desc p:last-child { margin-bottom: 0; }
.phead__stats { display: flex; gap: var(--s4); margin-top: var(--s4); flex-wrap: wrap; }
.stat { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink-2); }
.stat b { color: var(--ink); font-weight: 600; }

/* ============ Toolbar (filters) ============ */

.bar {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
  position: sticky; top: var(--header-h); z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
}
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; }
.seg button {
  border: 0; background: none; border-radius: 6px;
  padding: 6px 13px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.bar__sp { margin-inline-start: auto; }
.select {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  padding: 7px 11px; font-size: var(--fs-sm); font-family: inherit;
}

/* ============ Two-column layout ============ */

.cols { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--s7); align-items: start; padding-block: var(--s6); }
.side { position: sticky; top: calc(var(--header-h) + var(--s4)); display: grid; gap: var(--s4); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.panel h3 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  margin: 0 0 var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.panel li a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 7px 9px; border-radius: var(--r-sm); font-size: var(--fs-base); color: var(--ink-2);
  transition: background .15s, color .15s;
}
.panel li a:hover { background: var(--surface-2); color: var(--accent); }
.panel li span { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-3); }

/* ============ Pagination ============ */

.pager { display: flex; justify-content: center; align-items: center; gap: var(--s2); padding: var(--s7) 0; }
.pager a, .pager span {
  min-width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface);
  padding-inline: 12px;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager [aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pager .gap { border: 0; background: none; }

/* ============ Lyric page ============ */

.lyric-head { padding: var(--s5) 0 var(--s5); }
.lyric-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.5rem); line-height: 1.28;
  letter-spacing: -.02em; margin: 0 0 var(--s2);
}
.lyric-head__rom {
  font-family: var(--font-ui); font-size: var(--fs-md); color: var(--ink-3);
  margin: 0 0 var(--s4); letter-spacing: .005em;
}
.credits { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.credit { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.credit b { font-weight: 600; color: var(--ink); }
.credit svg { width: 14px; height: 14px; color: var(--ink-3); }

/* action bar */
.acts {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3) var(--s3); margin-block: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
}
.act {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; padding: 7px 11px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.act:hover { background: var(--surface-2); color: var(--ink); }
.act svg { width: 15px; height: 15px; }
.act--on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.acts__sp { margin-inline-start: auto; }
.sizer { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.sizer button { border: 0; background: var(--surface); padding: 7px 12px; font-size: var(--fs-sm); color: var(--ink-2); font-family: var(--font-ui); }
.sizer button:hover { background: var(--surface-2); color: var(--accent); }
.sizer button + button { border-inline-start: 1px solid var(--line); }

/* lyric body */
.lyrics { max-width: var(--read); }
.verse { margin-bottom: var(--s6); }
.verse__lbl {
  display: inline-block; font-family: var(--font-ui);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border-radius: var(--r-full); padding: 3px 10px; margin-bottom: var(--s3);
}
.verse p {
  font-family: var(--font-lyric);
  font-size: var(--lyric-size);
  line-height: var(--lyric-leading);
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
/* Lyric variants.
   A song may carry several versions from the CMS (post body + ACF fields).
   Exactly one is visible; the toolbar moves the .is-on class.
   Posts with a single variant render no toggle at all. */
.variant { display: none; }
.variant.is-on { display: block; }
/* No-JS / pre-hydration: the first variant is server-rendered with .is-on,
   so a single-variant post needs no script at all. */

.variant__note {
  font-family: var(--font-ui); font-size: var(--fs-xs);
  color: var(--ink-3); margin: 0 0 var(--s4);
}

/* Latin-script variants read better a touch smaller and tighter. */
.variant[data-script="latin"] p,
.variant[data-script="mixed"] p {
  font-family: var(--font-ui);
  font-size: calc(var(--lyric-size) * .86);
  line-height: calc(var(--lyric-leading) * .82);
}

.note {
  display: flex; gap: var(--s3);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
  border-radius: var(--r); background: var(--gold-soft);
  padding: var(--s4); margin-block: var(--s5);
  font-size: var(--fs-base); color: var(--ink-2);
}
.note svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.note b { color: var(--ink); }

/* meaning block */
.meaning { max-width: var(--read); padding-block: var(--s5); }
.meaning h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl);
  letter-spacing: -.015em; margin: 0 0 var(--s2);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.meaning p { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.85; margin: 0 0 var(--s4); }

/* details table */
.dl {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; max-width: var(--read);
}
.dl__r { display: grid; grid-template-columns: 148px 1fr; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.dl__r:last-child { border-bottom: 0; }
.dl__k { font-size: var(--fs-sm); color: var(--ink-3); }
.dl__v { font-size: var(--fs-base); color: var(--ink); font-weight: 500; }
.dl__v a { color: var(--accent); }
.dl__v a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* mobile sticky action bar */
.mbar {
  display: none;
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 9px var(--s4) calc(9px + env(safe-area-inset-bottom));
  justify-content: space-around; align-items: center;
}
.mbar .act { flex-direction: column; gap: 3px; font-size: 10px; padding: 4px 10px; }
.mbar .act svg { width: 18px; height: 18px; }

/* ============ Search overlay ============ */

.ov {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 9vh, 96px) var(--s4) var(--s4);
}
.ov[data-open] { display: flex; }
.ov__box {
  width: min(660px, 100%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; max-height: 82vh; display: flex; flex-direction: column;
}
.ov__in { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--line); }
.ov__in svg { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; }
.ov__in input {
  flex: 1; border: 0; outline: none; background: none;
  font-family: var(--font-guj); font-size: var(--fs-lg); color: var(--ink); min-width: 0;
}
.ov__in input::placeholder { color: var(--ink-3); }
.ov__esc { font-family: var(--font-ui); font-size: 10px; border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; color: var(--ink-3); background: var(--surface-2); }
.ov__body { overflow-y: auto; padding: var(--s3); }
.ov__grp { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: var(--s3) var(--s3) var(--s2); }
.res { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s3); border-radius: var(--r-sm); transition: background .12s; }
.res:hover, .res[data-sel] { background: var(--surface-2); }
.res__ico { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.res__b { min-width: 0; flex: 1; }
.res__t { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res__s { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res__why {
  font-family: var(--font-ui); font-size: 10px; font-weight: 600;
  color: var(--indigo); background: var(--indigo-soft); border: 1px solid var(--indigo-line);
  border-radius: var(--r-full); padding: 3px 8px; flex-shrink: 0;
}

/* ============ Footer ============ */

.ftr { border-top: 1px solid var(--line); background: var(--surface); margin-top: var(--s8); }
.ftr__in { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s6); padding-block: var(--s7); }
.ftr h4 { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s3); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ftr a { font-size: var(--fs-base); color: var(--ink-2); }
.ftr a:hover { color: var(--accent); }
.ftr__ab { color: var(--ink-2); font-size: var(--fs-base); max-width: 34ch; margin: var(--s3) 0 0; }
.ftr__btm { border-top: 1px solid var(--line); padding-block: var(--s4); display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); color: var(--ink-3); }
.ftr__btm .sp { margin-inline-start: auto; }

/* ============ Responsive ============ */

@media (max-width: 980px) {
  .cols { grid-template-columns: 1fr; gap: var(--s5); }
  .side { position: static; }
  .ftr__in { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}

@media (max-width: 720px) {
  :root { --lyric-size: 1.25rem; --lyric-leading: 2; }
  .searchmini kbd { display: none; }
  .searchmini { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .searchmini span { display: none; }
  .hero { padding: var(--s6) 0 var(--s6); }
  .sec { padding: var(--s6) 0; }
  .grid--4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mbar { display: flex; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .acts { display: none; }
  .dl__r { grid-template-columns: 1fr; gap: 2px; }
  .ftr__in { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============ Language toggle (UI chrome only) ============ */

.langtog {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); overflow: hidden; height: 36px;
}
.langtog button {
  border: 0; background: none; padding: 0 11px; height: 100%;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3);
  transition: background .15s, color .15s;
}
.langtog button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.langtog button:hover { color: var(--ink); }

@media (max-width: 720px) {
  .langtog button { padding: 0 9px; }
}

/* ============================================================
   WordPress additions
   Everything above is shared with the design prototype.
   Below is what a real WP theme needs on top of it.
   ============================================================ */

/* ---- Skip link: hidden until keyboard-focused ---- */
.sr:focus {
  position: fixed; top: 10px; inset-inline-start: 10px;
  width: auto; height: auto; clip: auto; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; box-shadow: var(--shadow-lg);
}

/* ---- Nav menu.
   wp_nav_menu uses items_wrap '%3$s', so <li> elements sit directly in
   .nav with no <ul>. Strip list styling and lay them out inline. ---- */


.ftr ul li { list-style: none; }
.ftr .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

/* ---- Ad slots.
   min-height is set inline per widget so the space exists before the ad
   script runs. Without that, a late ad pushes content down and costs CLS,
   which is a ranking input. ---- */
.ad-zone { margin-block: var(--s5); }

.ad-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s3);
}
.ad-slot__label {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.ad-slot__inner { width: 100%; display: flex; justify-content: center; }
.ad-slot__inner > * { max-width: 100%; }

@media (max-width: 720px) {
  .ad-slot--desktop { display: none; }
}

/* An ad placed inside post content should not inherit lyric typography. */
.verse .ad-zone { font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.6; }

/* ---- Widgets ---- */
.widget {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4);
}
.widget + .widget { margin-top: var(--s4); }
.widget__title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  margin: 0 0 var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.widget li a {
  display: block; padding: 7px 9px; border-radius: var(--r-sm);
  font-size: var(--fs-base); color: var(--ink-2);
  transition: background .15s, color .15s;
}
.widget li a:hover { background: var(--surface-2); color: var(--accent); }
/* The ad widget supplies its own chrome. */
.widget.pfl-ad-widget { background: none; border: 0; padding: 0; }

/* ---- Video embed ---- */
.song-video { max-width: var(--read); padding-block: var(--s5); }
.song-video h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl);
  letter-spacing: -.015em; margin: 0 0 var(--s3);
}
.song-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.song-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.song-details { padding-block: var(--s5); }

/* ---- WordPress core classes ---- */
.alignleft   { float: left;  margin: 0 var(--s4) var(--s3) 0; }
.alignright  { float: right; margin: 0 0 var(--s3) var(--s4); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption {
  font-family: var(--font-ui); font-size: var(--fs-sm);
  color: var(--ink-3); text-align: center; margin-top: var(--s2);
}
.sticky .card, .sticky .row { border-color: var(--accent-line); }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Tables and blockquotes inside post content */
.verse table { width: 100%; border-collapse: collapse; margin-block: var(--s4); }
.verse th, .verse td { border: 1px solid var(--line); padding: var(--s2) var(--s3); text-align: start; }
.verse blockquote {
  margin: var(--s4) 0; padding: var(--s3) var(--s4);
  border-inline-start: 3px solid var(--accent);
  background: var(--surface-2); border-radius: 0 var(--r) var(--r) 0;
}
.verse a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.verse img { border-radius: var(--r); margin-block: var(--s3); }

/* ---- Comments ---- */
.comments { max-width: var(--read); padding-block: var(--s6); border-top: 1px solid var(--line); margin-top: var(--s6); }
.comments h2, .comments h3 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); margin: 0 0 var(--s4);
}
.comment-list { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s4); }
.comment-list ol.children { list-style: none; margin: var(--s4) 0 0; padding-inline-start: var(--s5); display: grid; gap: var(--s4); }
.comment-body {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s4);
}
.comment-author { display: flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: var(--fs-base); }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: var(--s2); }
.comment-content p { margin: 0 0 var(--s2); }
.comment-respond { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
.comment-form label { display: block; font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 4px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: var(--s3);
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.comment-form .submit {
  border: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  padding: 11px 22px; font-weight: 600; font-size: var(--fs-base);
}
.comment-form .submit:hover { background: var(--accent-hover); }

/* ---- Pagination produced by the_posts_pagination() ---- */
.pager .nav-links { display: flex; justify-content: center; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pager .page-numbers {
  min-width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: var(--fs-sm);
  color: var(--ink-2); background: var(--surface); padding-inline: 12px;
}
.pager a.page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pager .page-numbers.current {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600;
}
.pager .page-numbers.dots { border: 0; background: none; }

/* ============ Search suggestions ============ */

.searchbox.has-suggest,
.ov__in.has-suggest { position: relative; }

/* The dropdown overhangs whatever section follows the hero, so the field
   needs its own stacking context above that content. Only while open, so
   it never sits over the sticky header. */
.searchbox.has-suggest:focus-within { z-index: 60; }

.suggest {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: 0;
  z-index: 120;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden auto;
  max-height: min(58vh, 420px);
  padding: var(--s2);
  text-align: start;
}

/* In the overlay the field is square-cornered and full width, so the
   dropdown sits flush beneath it rather than floating. */
.ov__in .suggest {
  top: 100%;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  border-inline: 0;
  border-bottom: 0;
  box-shadow: none;
  max-height: min(64vh, 460px);
}

.suggest__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: background .12s;
}
.suggest__item:hover,
.suggest__item[data-sel] { background: var(--surface-2); }
.suggest__item[data-sel] { box-shadow: inset 2px 0 0 var(--accent); }

.suggest__t {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-md); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggest__s {
  font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggest__empty {
  margin: 0; padding: var(--s4);
  text-align: center; font-size: var(--fs-sm); color: var(--ink-3);
}

@media (max-width: 720px) {
  .suggest { max-height: 50vh; }
  .suggest__t { font-size: var(--fs-base); }
}

/* ============================================================
   Nested menus + mobile drawer
   ============================================================ */

/* ---- Submenu disclosure button ---- */
.submenu-toggle {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border: 0; background: none; color: var(--ink-3);
  border-radius: 6px; cursor: pointer;
  transition: color .15s, background .15s, transform .18s;
}
.submenu-toggle svg { width: 14px; height: 14px; }
.submenu-toggle:hover { color: var(--accent); background: var(--surface-2); }
.submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--accent); }

/* ---- Desktop dropdown ---- */
.nav .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 70;
  min-width: 210px;
  list-style: none; margin: 0; padding: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  display: none;
}
.nav .sub-menu li { display: block; }
.nav .sub-menu a { display: block; padding: 8px 11px; white-space: normal; }

/* Hover and keyboard focus work with no JavaScript; the toggle button
   adds an explicit open state for touch. */
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu,
.nav .menu-item-has-children.is-open > .sub-menu { display: block; }

/* ---- Burger (mobile only) ---- */
.burger {
  display: none;
  width: 36px; height: 36px;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
}
.burger span {
  display: block; width: 16px; height: 2px; border-radius: 2px;
  background: var(--ink-2); transition: transform .2s, opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hdr__toggles { display: flex; align-items: center; gap: var(--s2); }

/* ---- Drawer ---- */
.drawer { position: fixed; inset: 0; z-index: 150; }
.drawer[hidden] { display: none; }

.drawer__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 46%, transparent);
  opacity: 0; transition: opacity .2s ease;
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(320px, 86vw);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-inline-start: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--paper); z-index: 1;
}
.drawer__title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
}

/* Navigation first, as an accordion. */
.drawer__nav { padding: var(--s3) var(--s3) var(--s4); }
.drawer__nav .menu,
.drawer__nav .sub-menu { list-style: none; margin: 0; padding: 0; }
.drawer__nav .menu > li { border-bottom: 1px solid var(--line); }
.drawer__nav .menu > li:last-child { border-bottom: 0; }
.drawer__nav li { display: flex; flex-wrap: wrap; align-items: center; }
.drawer__nav a {
  flex: 1; min-width: 0;
  padding: 12px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-md); font-weight: 500; color: var(--ink);
}
.drawer__nav a:hover { background: var(--surface-2); color: var(--accent); }
.drawer__nav .submenu-toggle { width: 34px; height: 34px; }
.drawer__nav .submenu-toggle svg { width: 16px; height: 16px; }

.drawer__nav .sub-menu {
  flex-basis: 100%;
  display: none;
  padding: 0 0 var(--s2) var(--s4);
  border-inline-start: 2px solid var(--line);
  margin-inline-start: 10px;
}
.drawer__nav .menu-item-has-children.is-open > .sub-menu { display: block; }
.drawer__nav .sub-menu a { font-size: var(--fs-base); font-weight: 400; color: var(--ink-2); padding: 9px 10px; }
.drawer__nav .current-menu-item > a { color: var(--accent); }

/* Language and dark mode, beneath the navigation. */
.drawer__foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: var(--s4);
  display: grid; gap: var(--s3);
}
.drawer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.drawer__label { font-size: var(--fs-base); color: var(--ink-2); }

/* ---- Breakpoint: bar becomes drawer ---- */
@media (max-width: 860px) {
  .nav { display: none; }
  .hdr__toggles { display: none; }
  .burger { display: flex; }
}
@media (min-width: 861px) {
  .drawer { display: none; }
}

/* ============ PDF download page ============ */

.dlcard {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-block: var(--s5);
  max-width: var(--read);
}
.dlcard__icon {
  width: 52px; height: 52px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent);
}
.dlcard__icon svg { width: 26px; height: 26px; }
.dlcard__body { flex: 1; min-width: 180px; }
.dlcard__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-lg); margin: 0 0 4px; line-height: 1.3;
}
.dlcard__meta { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.dlcard__action { flex-shrink: 0; }
.dlcard__action .btn-go { display: inline-block; text-align: center; }
.dlcard__hint {
  margin: var(--s2) 0 0; font-size: var(--fs-xs); color: var(--ink-3);
  max-width: 28ch;
}

.dlback { max-width: var(--read); margin: 0 0 var(--s5); }
.dlback a { color: var(--accent); font-size: var(--fs-base); font-weight: 500; }
.dlback a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .dlcard { padding: var(--s4); }
  .dlcard__action, .dlcard__action .btn-go { width: 100%; }
}

/* Printing a song should give a clean sheet of lyrics, since the
   browser's print-to-PDF is the fallback when no file is generated. */
@media print {
  .hdr, .ftr, .side, .acts, .mbar, .ad, .ad-slot, .ad-zone,
  .crumbs, .ov, .drawer, .sec, .dlcard, .dlback { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .cols { display: block; }
  .wrap { max-width: none; padding: 0; }
  .lyrics { max-width: none; }
  .verse p { font-size: 12pt; line-height: 1.8; color: #000; }
  a { text-decoration: none; color: #000; }
}

/* Suggestion: title line + "in lyrics" badge */
.suggest__line { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.suggest__line .suggest__t { flex: 1; min-width: 0; }
.suggest__why {
  flex-shrink: 0;
  font-family: var(--font-ui); font-size: 10px; font-weight: 600;
  color: var(--indigo); background: var(--indigo-soft);
  border: 1px solid var(--indigo-line);
  border-radius: var(--r-full); padding: 2px 7px;
}

/* ============ "Type in" toggle ============ */

.typetog {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: var(--s3);
  font-family: var(--font-ui);
}
.typetog__label { font-size: var(--fs-xs); color: var(--ink-3); margin-inline-end: 2px; }
.typetog__btn {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-full); padding: 4px 12px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.typetog__btn:hover { border-color: var(--accent-line); color: var(--accent); }
.typetog__btn[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
}

/* ============ PWA install banner ============ */

.pwa {
  position: fixed;
  inset-inline: var(--s4);
  bottom: var(--s4);
  z-index: 140;
  display: flex; align-items: center; gap: var(--s3);
  max-width: 460px; margin-inline: auto;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: pwa-in .3s cubic-bezier(.4, 0, .2, 1);
}
.pwa[hidden] { display: none; }

@keyframes pwa-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.pwa__icon { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.pwa__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pwa__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); }
.pwa__text { font-size: var(--fs-xs); color: var(--ink-3); }

.pwa__install {
  flex-shrink: 0; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-full); padding: 8px 16px;
  font-size: var(--fs-sm); font-weight: 600;
}
.pwa__install:hover { background: var(--accent-hover); }

.pwa__x {
  flex-shrink: 0; width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--ink-3);
  border-radius: 50%; cursor: pointer;
}
.pwa__x:hover { background: var(--surface-2); color: var(--ink); }
.pwa__x svg { width: 15px; height: 15px; }

/* Clear the sticky lyric action bar on phones. */
@media (max-width: 720px) {
  .pwa { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* Inside an installed app the banner is pointless. */
@media (display-mode: standalone) {
  .pwa { display: none !important; }
}

/* ============ Archive mini-search ============ */

.phead__find {
  position: relative;
  display: flex; align-items: center; gap: var(--s2);
  width: min(320px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 4px 4px 4px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.phead__find:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.phead__find > svg { width: 16px; height: 16px; color: var(--ink-3); flex-shrink: 0; }
.phead__find input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font-family: var(--font-guj); font-size: var(--fs-sm); color: var(--ink);
  padding: 8px 0;
}
.phead__find input::placeholder { color: var(--ink-3); }
.phead__find button {
  flex-shrink: 0; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-full); padding: 7px 14px;
  font-size: var(--fs-xs); font-weight: 600;
}
.phead__find button:hover { background: var(--accent-hover); }

/* The suggestion dropdown is positioned against this box too. */
.phead__find.has-suggest { position: relative; }

/* A search form inside a widget should fill its column. */
.widget .phead__find { width: 100%; }

/* ============================================================
   Core block widgets
   Per-block stylesheets are disabled for weight, so the handful of
   blocks that can realistically appear in a widget area are styled
   here instead. Without this they render completely unstyled.
   ============================================================ */

.wp-block-search__label {
  display: block;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  margin: 0 0 var(--s3); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.wp-block-search__inside-wrapper {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 4px 4px 4px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.wp-block-search__inside-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.wp-block-search__input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font-family: var(--font-guj); font-size: var(--fs-sm); color: var(--ink);
  padding: 8px 0;
}
.wp-block-search__input::placeholder { color: var(--ink-3); }
.wp-block-search__button {
  flex-shrink: 0; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-full); padding: 7px 14px;
  font-size: var(--fs-xs); font-weight: 600;
}
.wp-block-search__button:hover { background: var(--accent-hover); }
.wp-block-search__button svg { fill: currentColor; width: 16px; height: 16px; }

/* List-style blocks inherit the .widget list rules; these just remove the
   browser defaults the block CSS would normally have handled. */
.wp-block-categories, .wp-block-archives, .wp-block-latest-posts,
.wp-block-page-list, .wp-block-latest-comments {
  list-style: none; margin: 0; padding: 0;
}
.wp-block-categories li, .wp-block-archives li,
.wp-block-latest-posts li, .wp-block-page-list li { margin: 0; }
.wp-block-latest-posts a, .wp-block-latest-comments a {
  display: block; padding: 7px 9px; border-radius: var(--r-sm);
  font-size: var(--fs-base); color: var(--ink-2);
}
.wp-block-latest-posts a:hover, .wp-block-latest-comments a:hover {
  background: var(--surface-2); color: var(--accent);
}
.wp-block-group__inner-container > * + * { margin-top: var(--s3); }

/* ============================================================
   Artist pages
   ============================================================ */

.artist {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  padding: var(--s5) 0 var(--s6);
  border-bottom: 1px solid var(--line);
}

.artist__photo img,
.artist__photo--none {
  width: 168px; height: 168px;
  border-radius: var(--r-lg);
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
}
.artist__photo--none {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--surface-3), var(--surface-2));
  font-family: var(--font-display); font-size: 3.5rem; color: var(--ink-3);
}

.artist__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 4.5vw, var(--fs-2xl));
  letter-spacing: -.02em; line-height: 1.2; margin: 0 0 var(--s2);
}
.artist__roles {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  color: var(--accent); margin: 0 0 var(--s3);
  text-transform: uppercase; letter-spacing: .06em;
}
.artist__intro { color: var(--ink-2); margin: 0 0 var(--s4); max-width: 68ch; }

.artist__social { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0 0 var(--s3); padding: 0; }
.artist__social-link {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 5px 13px; font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink-2); background: var(--surface);
  transition: border-color .15s, color .15s, background .15s;
}
.artist__social-link:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

.artist__count { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }
.artist__count b { color: var(--ink); }

.artist__bio { padding-block: var(--s5); max-width: var(--read); color: var(--ink-2); }
.artist__bio p { margin: 0 0 var(--s3); }

@media (max-width: 640px) {
  .artist { grid-template-columns: 1fr; gap: var(--s4); text-align: center; }
  .artist__photo img, .artist__photo--none { width: 120px; height: 120px; margin-inline: auto; }
  .artist__intro { margin-inline: auto; }
  .artist__social { justify-content: center; }
}

/* ---- Artist card, used on the directory hubs ---- */
.acard {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s3) var(--s4);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.acard:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.acard__img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; border: 1px solid var(--line);
}
.acard__img--none {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--surface-3), var(--surface-2));
  font-family: var(--font-display); font-size: 1.4rem; color: var(--ink-2);
}
.acard__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acard__name {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acard:hover .acard__name { color: var(--accent); }
.acard__role { font-family: var(--font-ui); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.acard__count { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-3); }