/* Yalle Media: dark theme in the logo's maroon. Same layout as the Themify site, rebuilt lean. */

/* Type: the device's own UI font (Roboto, San Francisco, Segoe UI). No web font to download, so text shows at once
   and the page is laid out once: this is what keeps mobile PageSpeed at 100. (Plus Jakarta Sans and IBM Plex Mono were
   tried in Oct 2026 and cost chord pages 10-15 points on phones; their files are kept in /assets/fonts/ if ever wanted.) */

:root {
  /* surfaces: near-black with a hint of warmth */
  --bg: #141415;
  --surface: #1c1c1e;
  --surface-2: #232325;
  --surface-3: #2c2b2e;
  --line: #2f2e31;
  --line-strong: #403e42;
  --text: #c9c7cb;
  --muted: #918e95;
  --head: #fff;
  /* the logo's maroon, and the reds built from it (all pass WCAG AA where text sits on them) */
  --brand: #5d1616;
  --accent: #a3242a;        /* fills: buttons, badge, current page — white text 7.4:1 */
  --accent-hover: #bd2d34;
  --link: #ec6b73;          /* text links on the dark background — 5.1:1 */
  --link-hover: #ff9aa0;
  --glow: rgba(163, 36, 42, .35);
  --bar: #0b0b0c;
  --input-bg: #111112;
  --r: 14px;
  --r-sm: 10px;
  --r-pill: 999px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 28px);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 100px; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; border-style: none; }
a { color: var(--link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #fff; }
h1, h2, h3, h4, h5, h6 { color: var(--head); font-weight: 750; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); line-height: 1.15; letter-spacing: -.035em; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1.2rem; line-height: 1.6; }
h6 { font-size: 1rem; }
p { margin: 0 0 1.25em; text-wrap: pretty; }
[hidden] { display: none !important; }   /* "hidden" always wins over a component's own display (the instrument tabs rely on it) */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--accent); color: #fff; border-radius: var(--r-sm); }
.skip:focus { top: 8px; color: #fff; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.eyebrow { margin: 0 0 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--link); }

/* ---- Buttons & fields ---------------------------------------------------------- */
input[type="search"], input[type="text"], input[type="email"], textarea {
  min-width: 0; width: 100%; padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--input-bg); color: #fff; font: inherit; font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus { outline: 0; border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--glow); }
input::placeholder, textarea::placeholder { color: #77747b; }
button[type="submit"], .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.3;
  cursor: pointer; white-space: nowrap; transition: background-color .15s, transform .15s, box-shadow .15s;
}
button[type="submit"]:hover, .btn:hover { background: var(--accent-hover); color: #fff; box-shadow: 0 6px 20px -6px var(--glow); }
button[type="submit"]:active, .btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips a, .chip {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text); font-size: .88rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color .15s, color .15s, box-shadow .15s;
}
.chips a:hover { background: var(--accent); color: #fff; box-shadow: none; }

/* ---- Header ------------------------------------------------------------------------ */
.hw { position: sticky; top: 0; z-index: 50; background: var(--bar); padding: 14px 0; transition: background-color .25s, padding .25s; }
/* No backdrop-filter here: it would trap the fixed mobile menu inside the header. */
.hw.is-stuck { background: rgba(11, 11, 12, .94); padding: 8px 0; box-shadow: 0 1px 0 var(--line); }
.hd {
  display: flex; align-items: center; gap: 6px;
  min-height: 72px; padding: 0 14px 0 18px;
  background: var(--surface); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: min-height .25s;
}
.is-stuck .hd { min-height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.logo:hover { color: #fff; }
.logo img { width: 48px; height: 48px; }
.logo__name { font-size: 1.05rem; }
.hsearch { position: relative; display: flex; align-items: center; margin-left: 8px; isolation: isolate; }
.hsearch__btn, .mysongs-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: #fff; cursor: pointer; transition: background-color .15s;
}
.hsearch__btn:hover { background: var(--accent); }
.hsearch__btn svg { width: 18px; height: 18px; }
.hsearch__q {
  width: 0; padding: 0; border-width: 0; opacity: 0; pointer-events: none; height: 40px;
  transition: width .25s, opacity .2s, padding .25s, margin .25s;
}
.hsearch.is-open .hsearch__q { width: min(280px, 40vw); padding: 0 14px; opacity: 1; pointer-events: auto; border-width: 1px; margin-left: 8px; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a { position: relative; display: block; padding: 10px 14px; border-radius: var(--r-pill); color: #e9e7ea; font-size: .97rem; font-weight: 600; }
.nav a:hover { background: var(--surface-2); color: #fff; }
.nav a[aria-current="page"] { color: #fff; background: var(--accent); }
.menu-btn, .nav-search { display: none; }
/* dropdown (Chords): opens on hover, keyboard focus, or the arrow button (touch) */
.nav li { position: relative; }
.has-sub { display: flex; align-items: center; }
.nav .has-sub > a { padding-right: 4px; }
.sub-btn {
  display: grid; place-items: center; width: 26px; height: 26px; margin-right: 4px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #e9e7ea; cursor: pointer;
}
.sub-btn:hover { background: var(--surface-2); color: #fff; }
.sub-btn svg { width: 12px; height: 12px; transition: transform .2s; }
.nav ul.sub {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 62; flex-direction: column; gap: 0; min-width: 200px; padding: 8px;
  border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -12px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.nav ul.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav .sub a { padding: 9px 12px; border-radius: var(--r-sm); white-space: nowrap; font-size: .93rem; }
.nav .sub a:hover { background: var(--surface-3); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .sub-btn[aria-expanded="true"] + .sub { opacity: 1; visibility: visible; transform: none; }
.has-sub:hover > .sub-btn svg, .sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---- Layout -------------------------------------------------------------------------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; }
/* (doubled class: a full-width page stays one column at tablet widths too, where a later rule sets the sidebar column) */
.layout.layout--full { grid-template-columns: minmax(0, 1fr); }
.content { padding: 48px 0 64px; min-width: 0; }
.sidebar { padding: 48px 0 80px; font-size: .95rem; }
.widget { margin: 0 0 28px; padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.widget__title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }
.wsearch__row { display: flex; gap: 8px; }
.wsearch__row button { padding-inline: 16px; }
.wlist { list-style: none; margin: 0; padding: 0; }
.wlist li + li { border-top: 1px solid var(--line); }
.wlist a { display: block; padding: 9px 0; color: var(--text); font-weight: 600; font-size: .93rem; line-height: 1.4; }
.wlist a:hover { color: #fff; }
.wlist--tools a { display: flex; align-items: baseline; gap: 8px; }
.wlist--tools a span { flex: none; width: 1.2em; color: var(--link); text-align: center; }
.wlist--tools small { margin-left: auto; color: var(--muted); font-size: .78rem; font-weight: 500; text-align: right; }
.chips--tools { margin-top: 10px; align-items: center; }
.chips__label { color: var(--muted); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 901px) {
  .sidebar__sticky { position: sticky; top: 112px; }
}

/* ---- Home -------------------------------------------------------------------------- */
/* Hero: one job first (find a song), browse second, tools last. No overflow:hidden, so search
   suggestions can drop below the box. */
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  align-items: center; margin-bottom: 40px; padding: clamp(28px, 4.5vw, 48px);
  border-radius: calc(var(--r) + 6px); background:
    radial-gradient(120% 140% at 100% 0%, rgba(163, 36, 42, .45), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(93, 22, 22, .55), transparent 60%),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hero h1 { max-width: 15ch; margin-bottom: .3em; }
.hero__lead { max-width: 46ch; color: #dedbe0; font-size: 1.08rem; margin-bottom: 24px; }
/* the search is one pill: icon, field, "/" hint, button */
.hero__search {
  display: flex; align-items: center; gap: 4px; max-width: 560px; height: 58px; margin-bottom: 20px; padding: 5px 5px 5px 18px;
  border-radius: var(--r-pill); background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px var(--line-strong), 0 14px 34px -18px rgba(0, 0, 0, .9);
  transition: box-shadow .15s;
}
.hero__search:focus-within { box-shadow: inset 0 0 0 1px var(--accent-hover), 0 0 0 4px var(--glow); }
.hero__glass { flex: none; width: 20px; height: 20px; color: #8d8a92; }
.hero .hero__search input { flex: 1; min-width: 0; height: 100%; padding: 0 8px; border: 0; background: transparent; box-shadow: none; font-size: 1.05rem; }
.hero .hero__search input::-webkit-search-cancel-button { filter: grayscale(1); }
.hero__kbd { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border-radius: 7px;
  color: #8d8a92; font: 700 .8rem/1 inherit; box-shadow: inset 0 0 0 1px var(--line-strong); }
.hero__search:focus-within .hero__kbd { visibility: hidden; }
.hero__search button { flex: none; height: 48px; padding-inline: 24px; border-radius: var(--r-pill); }
.hero__browse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hero .chips a { background: rgba(0, 0, 0, .35); }
/* tools panel */
.hero__tools { padding: 18px; border-radius: var(--r); background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px var(--line); }
.hero__tools-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hero__tools h2 { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero__tools-head a { font-size: .85rem; font-weight: 700; }
.hero__tools ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hero__tools li a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--text); transition: background-color .15s; }
.hero__tools li a:hover, .hero__tools li a:focus-visible { background: rgba(255, 255, 255, .06); color: #fff; }
.hero__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(163, 36, 42, .22); color: var(--link); box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .22); }
.hero__ico svg { width: 20px; height: 20px; }
.hero__tt { display: grid; min-width: 0; line-height: 1.25; }
.hero__tt b { color: #fff; font-size: .95rem; }
.hero__tt small { color: var(--muted); font-size: .8rem; }
/* wide screens show the sidebar's own Search and Free tools boxes next to the hero, so the hero keeps one column
   there and its tools panel appears only once the sidebar has dropped below the content */
@media (min-width: 901px) {
  .hero__tools { display: none; }
}
@media (max-width: 900px) {
  .hero__kbd { display: none; }
}
@media (max-width: 760px) {
  .hero { padding: 22px 18px; gap: 18px; }
  .hero h1 { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.2rem); }
  .hero__lead { font-size: 1rem; margin-bottom: 18px; }
  .hero__search { height: 54px; margin-bottom: 16px; padding-left: 14px; }
  .hero__search button { height: 44px; padding-inline: 18px; }
  /* one swipeable row instead of stacked chip rows */
  .hero__browse { flex-wrap: nowrap; }
  .hero__browse .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -18px; padding-right: 18px; }
  .hero__browse .chips::-webkit-scrollbar { display: none; }
  .hero__browse .chips li { flex: none; }
  /* tools: three tiles across, name only */
  .hero__tools { padding: 14px; }
  .hero__tools ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__tools li a { flex-direction: column; justify-content: flex-start; height: 100%; gap: 6px; padding: 10px 4px; text-align: center; background: rgba(255, 255, 255, .03); }
  .hero__tt b { font-size: .84rem; }
  .hero__tt small { display: none; }
}
@media (max-width: 340px) {
  .hero__search button { width: 44px; padding: 0; font-size: 0; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 4l-1.4 1.4 5.6 5.6H4v2h12.2l-5.6 5.6L12 20l8-8z'/%3E%3C/svg%3E") center / 20px no-repeat; }
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-head h2 { margin: 0; font-size: 1.35rem; }
.section-head a { font-weight: 700; font-size: .92rem; }

/* Post cards */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card__link {
  display: flex; align-items: center; gap: 16px; height: 100%; padding: 12px;
  border-radius: var(--r); background: var(--surface); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color .15s, box-shadow .15s, transform .15s;
}
.card__link:hover { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent), 0 12px 30px -16px var(--glow); transform: translateY(-2px); }
.card__img { flex: none; width: 76px; height: 76px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); }
.card__img img { display: block; width: 76px; height: 76px; object-fit: cover; }
.card__body { min-width: 0; }
.card time { display: block; margin-bottom: 4px; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.card__title { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 700; line-height: 1.32; letter-spacing: -.015em; }
.card__link:hover .card__title { color: var(--link-hover); }

/* Pager */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 32px 0 8px; }
.pager__n {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--surface); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line);
}
.pager__n:hover { background: var(--surface-3); color: #fff; }
.pager__n.is-current { background: var(--accent); box-shadow: none; }
.pager__nav { font-size: 1.25rem; }
/* the home page: three numbers, then a clear way on to every chord */
.pager__more { display: inline-flex; align-items: center; gap: 8px; height: 42px; margin-left: 6px; padding: 0 20px; border-radius: var(--r-pill);
  background: rgba(163, 36, 42, .18); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .45); text-decoration: none; }
.pager__more:hover { background: var(--accent); color: #fff; }

/* ---- Single post ------------------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 22px; font-size: .84rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: var(--text); }
.post__head { text-align: center; }
.post__img { margin: 0 auto; width: 300px; max-width: 100%; }
.post__img img { display: block; width: 300px; height: 120px; border-radius: var(--r); object-fit: cover; box-shadow: var(--shadow); }
.post__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 104px; height: 104px; margin: -70px auto 18px; position: relative;
  border-radius: 50%; background: var(--accent); color: #fff; line-height: 1;
  box-shadow: 0 0 0 6px var(--bg), 0 12px 30px -8px var(--glow);
}
.post__date span { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.post__date b { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; margin: 4px 0; }
.post__head:not(:has(.post__img)) .post__date { margin-top: 0; }
.post__title { font-size: clamp(1.85rem, 1.2rem + 2.3vw, 2.9rem); margin-bottom: .45em; }
.post__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; font-size: .9rem; }
.post__meta a { padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-weight: 600; }
.post__meta a:hover { color: #fff; background: var(--accent); box-shadow: none; }
.entry { text-align: left; }
.entry a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(236, 107, 115, .45); }
.entry a:not(.btn):hover { text-decoration-color: currentColor; }
.entry h2, .entry h3 { margin-top: 1.6em; }
.entry ul, .entry ol { padding-left: 1.4em; margin: 0 0 1.3em; }
.entry li { margin-bottom: .35em; }
.entry li::marker { color: var(--link); }
.entry img { border-radius: var(--r); }
.entry figure { margin: 0 0 1.4em; }
.entry figcaption { color: var(--muted); font-size: .85rem; margin-top: 6px; }
.entry blockquote { margin: 0 0 1.4em; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); color: #e1dfe3; }
.entry table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; display: block; overflow-x: auto; }
.entry th, .entry td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }
.entry th { background: var(--surface-2); color: #fff; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }

/* Chord tools: chords used, text size, auto-scroll. They never touch the sheet's spacing. */
.tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 24px; padding: 14px 16px;
  border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.tools__chords { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 260px; margin: 0; }
.tools__label { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-right: 4px; }
.tools .chip { padding: 3px 10px; font-family: var(--mono); font-size: .86rem; color: #fff; background: rgba(163, 36, 42, .22); box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .35); }
.tools__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tools__ctl button {
  min-width: 38px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--surface-3); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.tools__ctl button:hover, .tools__ctl button[aria-pressed="true"] { background: var(--accent); }
.tools__ctl button:disabled { opacity: .4; cursor: default; }

/* Chord sheets. The spacing inside <pre> IS the music: chords sit over exact
   syllables, so it never wraps and never leaves a monospaced font. */
/* text size is set on .entry by the A−/A+ buttons */
.entry { --pre-size: .9rem; }
.entry pre {
  margin: 0 0 1.6em; padding: 18px 20px;
  border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--mono); font-size: var(--pre-size); line-height: 1.85;
  color: #e6e4e8; white-space: pre; overflow-x: auto; tab-size: 8;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.entry pre::-webkit-scrollbar { height: 6px; }
.entry pre::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.yt { position: relative; display: block; max-width: 640px; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; margin: 0 0 1.4em; }
.yt img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: .85; }
.yt::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 68px; height: 48px; translate: -50% -50%;
  border-radius: 14px; background: #f00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* YouTube policy III.C.1: nothing of ours over a player (see ytGuard in ym.js) */
.yt--on::after { content: none; }
.ytduck { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important; }
.yt--covered iframe { visibility: hidden; }

/* Key takeaways / FAQ blocks used in the Tips articles */
.takeaways { margin: 0 0 1.6em; padding: 18px 20px; border-radius: var(--r); background: linear-gradient(135deg, rgba(163, 36, 42, .16), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.takeaways h2 { margin: 0 0 .5em; font-size: 1.1rem; }
.takeaways ul { margin: 0; }
.faq { margin: 2em 0 1.6em; }
.faq h2 { margin-top: 0; }
.faq details { margin: 0 0 10px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.faq summary { padding: 14px 18px; color: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--link); font-weight: 800; }
.faq details[open] summary::after { content: "–"; }
.faq details > div, .faq details > p { padding: 0 18px 14px; }
.faq details > p { margin: 0; }
.faq details > div p:last-child { margin: 0; }

.post-nav { margin: 40px 0; }
.post-nav a {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: #fff; font-weight: 700; line-height: 1.4;
}
.post-nav a:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.post-nav small { display: block; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.post-nav__arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M14.5 6 8.5 12l6 6 1.4-1.4L11.3 12l4.6-4.6z'/%3E%3C/svg%3E") center / 20px no-repeat; }
.related { margin: 8px 0 40px; }
.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.related__item { padding: 16px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.related__cats { margin: 0 0 6px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.related h3 { font-size: 1rem; line-height: 1.35; margin: 0; }
.related h3 a { color: #fff; }
.related h3 a:hover { color: var(--link-hover); }

/* Comments */
.comments { margin: 40px 0 8px; }
.comments__list { list-style: none; margin: 0 0 28px; padding: 0; }
.comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.comment__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; }
.comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; }
.comment__name { color: #fff; font-weight: 700; }
.comment__staff { padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.comment time { color: var(--muted); font-size: .8rem; }
.comment__text p { margin: 0 0 .6em; }
.comment__reply { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.comment .comments__list { margin: 8px 0 0; }
.comment .comment { border-top: 0; padding-bottom: 0; }
.respond { padding: 22px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.respond h3 { margin-bottom: 4px; }
.respond__note { color: var(--muted); font-size: .88rem; }
.respond__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.respond label { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 700; color: #e6e4e8; }
.respond__msg { margin: 12px 0 0; font-weight: 600; }
.respond__msg.is-ok { color: #8fd19e; }
.respond__msg.is-err { color: var(--link-hover); }
.respond__replying { display: none; margin-bottom: 10px; font-size: .9rem; }
.respond__replying.is-on { display: block; }
.comments__closed { padding: 16px 18px; border-radius: var(--r); background: var(--surface); color: var(--muted); }

/* Newsletter box */
.nl {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 32px; align-items: center;
  margin: 40px 0; padding: clamp(22px, 4vw, 32px); border-radius: calc(var(--r) + 4px);
  background: radial-gradient(120% 160% at 0% 0%, rgba(163, 36, 42, .4), transparent 60%), var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.nl__title { font-size: 1.35rem; margin-bottom: .3em; }
.nl__text p { margin: 0; color: #d8d5da; }
.nl__form { display: flex; flex-wrap: wrap; gap: 10px; }
.nl__form input[type="email"] { flex: 1 1 200px; width: auto; height: 48px; border-radius: var(--r-pill); padding-inline: 18px; }
.nl__form button { height: 48px; }
.nl__msg { flex-basis: 100%; margin: 0; font-size: .9rem; font-weight: 600; min-height: 1.2em; }
.nl__msg.is-ok { color: #8fd19e; }
.nl__msg.is-err { color: var(--link-hover); }

/* ---- Archives & search ------------------------------------------------------------- */
.archive__head { margin-bottom: 30px; padding: clamp(20px, 4vw, 32px); border-radius: calc(var(--r) + 4px); background: radial-gradient(120% 160% at 100% 0%, rgba(163, 36, 42, .35), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.archive__title { margin-bottom: .15em; }
.archive__title em { color: var(--link); font-style: normal; }
.archive__count { color: var(--muted); margin: 0; font-weight: 600; }
.archive__desc { margin-top: 10px; max-width: 62ch; color: var(--text); }
.archive__desc p:last-child { margin: 0; }
.archive__search { display: flex; gap: 10px; max-width: 520px; margin-top: 16px; }

/* ---- Pages ------------------------------------------------------------------------- */
.page__title { margin-bottom: .5em; }
.lead { font-size: 1.15rem; color: #e1dfe3; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; margin: 40px 0; }
.split figure { margin: 0; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 40px; }
.features section { padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.features h3 { font-size: 1.05rem; margin-top: 0; }
.features p { margin: 0; font-size: .95rem; }
.cta { padding: 32px; border-radius: calc(var(--r) + 4px); background: radial-gradient(120% 160% at 50% 0%, rgba(163, 36, 42, .4), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.cta h2 { margin-top: 0; }
.cta p:last-child { margin: 0; }
.contact { display: grid; grid-template-columns: 160px 1fr; gap: 16px 24px; margin: 32px 0; }
.contact dt { color: #fff; font-weight: 700; }
.contact dd { margin: 0; }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.social a { display: block; padding: 7px 16px; border-radius: var(--r-pill); background: var(--surface-2); color: #fff; text-decoration: none !important; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.social a:hover { background: var(--accent); color: #fff; box-shadow: none; }
/* Services */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 48px; align-items: stretch; }
.svc { display: flex; flex-direction: column; padding: 24px; border-radius: calc(var(--r) + 2px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.svc--featured { background: radial-gradient(120% 70% at 50% 0%, rgba(163, 36, 42, .28), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.svc h2 { margin: 0 0 6px; font-size: 1.3rem; }
.svc__tag { align-self: flex-start; margin: 0 0 12px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--surface-3); color: #fff; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.svc--featured .svc__tag { background: var(--accent); }
.svc__price { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.svc__price strong { display: block; color: #fff; font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.entry .svc__list { margin: 0 0 16px; padding: 0; list-style: none; }
.entry .svc__list li { position: relative; margin: 0 0 8px; padding-left: 26px; font-size: .95rem; }
.svc__list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border: solid var(--link); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.svc__note { color: var(--muted); font-size: .88rem; }
.svc__cta { margin: auto 0 0; padding-top: 8px; }
.svc .btn { display: block; text-align: center; }
.svc-admin { margin: 0 0 48px; padding: 28px; border-radius: calc(var(--r) + 2px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.svc-admin h2 { margin-top: 0; }
.svc-admin .svc__cta { margin: 0; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.plan { padding: 20px; border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.plan h3 { margin: 0 0 8px; font-size: 1.05rem; }
.plan p:last-child { margin: 0; font-size: .92rem; }
.steps-wrap { margin: 0 0 40px; }
.entry ol.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; }
.entry .steps li { margin: 0; padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
.steps strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 4px; }
.steps span { font-size: .95rem; }
/* Contact form */
.enq { margin: 8px 0 32px; padding: 26px; border-radius: calc(var(--r) + 2px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 110px; }
.enq h2 { margin-top: 0; }
.enq__note { color: var(--muted); }
.enq__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.enq__field { margin: 0 0 14px; }
.enq label { display: block; margin-bottom: 6px; font-size: .88rem; font-weight: 700; color: #e6e4e8; }
.enq label span { color: var(--muted); font-weight: 500; }
.enq select, .enq input[type="tel"] {
  width: 100%; min-width: 0; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--input-bg); color: #fff; font: inherit; font-size: 1rem;
}
.enq select { appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ec6b73' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; }
.enq select:focus, .enq input[type="tel"]:focus { outline: 0; border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--glow); }
.enq textarea { min-height: 0; }
.enq__msg { margin: 12px 0 0; font-weight: 600; }
.enq__msg.is-ok { color: #8fd19e; }
.enq__msg.is-err { color: var(--link-hover); }
.job { padding: 22px; margin: 0 0 18px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.job h2 { margin-top: 0; }
.job__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.job__meta li { padding: 3px 12px; border-radius: var(--r-pill); background: var(--surface-3); font-size: .85rem; font-weight: 600; }

/* Tips tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile a { display: flex; flex-direction: column; height: 100%; border-radius: var(--r); background: var(--surface); color: var(--text); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); transition: transform .15s, box-shadow .15s; }
.tile a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--accent), 0 14px 30px -16px var(--glow); color: var(--text); }
.tile__img { display: block; aspect-ratio: 5 / 4; background: var(--surface-3); }
.tile__img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tile__img--empty { background: radial-gradient(circle at 30% 30%, rgba(163, 36, 42, .5), transparent 60%), var(--surface-3); }
.tile__title { margin: 0; padding: 14px 16px 18px; color: #fff; font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; }
.packs { margin-top: 48px; }
.packs__more { text-align: center; margin-top: 24px; }

/* 404 */
.nf { padding: 44px 28px; border-radius: calc(var(--r) + 4px); background: radial-gradient(100% 140% at 50% 0%, rgba(163, 36, 42, .4), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; margin-bottom: 40px; }
.nf__code { margin: 0; font-size: 5rem; font-weight: 800; line-height: 1; color: var(--link); letter-spacing: -.05em; }
.nf__title { font-size: 2.2rem; margin: 8px 0; }
.nf__search { display: flex; gap: 10px; max-width: 460px; margin: 24px auto; }
.nf__links .btn { margin: 4px; }

/* Ads (only when switched on at go-live; space reserved so nothing jumps) */
.ad { margin: 28px 0; min-height: 280px; }
/* AdSense's own code puts style="display:block" on the unit; our pages carry no inline styles, so it is set here.
   Responsive units size themselves to this box: left inline, the box is 0 px wide and Google serves nothing. */
.ad ins.adsbygoogle { display: block; width: 100%; }
/* a spot Google leaves empty folds away instead of leaving a gap */
.ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.ad__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 6px; text-align: center; }

/* ---- Footer ------------------------------------------------------------------------ */
.ft { position: relative; margin-top: 24px; background: var(--bar); color: var(--muted); font-size: .92rem; border-top: 1px solid var(--line); }
.ft a { color: var(--text); }
.ft a:hover { color: #fff; }
.ft__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 32px; padding: 56px 0 40px; }
.ft__brand p { margin: 14px 0 16px; max-width: 34ch; }
.ft__logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.ft__logo img { width: 44px; height: 44px; }
.ft h2 { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #fff; margin: 4px 0 14px; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft li { margin: 0 0 8px; }
.ft .nl { display: block; margin: 0; padding: 0; background: none; box-shadow: none; }
.ft .nl__title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 4px 0 10px; }
.ft .nl__text p { font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.ft .nl__form input[type="email"], .ft .nl__form button { height: 44px; }
.ft__social { display: flex; gap: 8px; }
.ft__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ft__social a:hover { background: var(--accent); box-shadow: none; }
.ft__social svg { width: 17px; height: 17px; }
.ft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 20px 0 28px; border-top: 1px solid var(--line); font-size: .84rem; }
.ft__bottom p { margin: 0; }
.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 7.6 5.6 14 7 15.4l5-5 5 5 1.4-1.4z'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 10px 24px -8px var(--glow);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s;
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }

/* ---- Tablet & phone ---------------------------------------------------------------- */
@media (max-width: 1080px) {
  .layout { column-gap: 32px; grid-template-columns: minmax(0, 1fr) 270px; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
}
/* tablets: the full menu still fits beside the logo (without its name) */
@media (max-width: 1000px) {
  .logo__name { display: none; }
  .nav a { padding-inline: 11px; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { padding: 0 0 48px; }
  .content { padding: 28px 0 40px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl { grid-template-columns: minmax(0, 1fr); }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hw { padding: 10px 0; }
  .hd { min-height: 62px; padding: 0 8px 0 10px; }
  .logo img { width: 44px; height: 44px; }
  .logo__name { display: none; }
  .hsearch { margin-left: auto; }
  .hsearch__btn, .mysongs-btn { width: 46px; height: 46px; }
  .menu-btn {
    position: relative; z-index: 61; display: grid; place-items: center; margin-left: 8px; width: 46px; height: 46px;
    border: 0; border-radius: 50%; background: var(--surface-2); cursor: pointer;
  }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; position: relative; transition: transform .25s, background-color .2s;
  }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
  .menu-btn span::before { top: -6px; }
  .menu-btn span::after { top: 6px; }
  .menu-btn[aria-expanded="true"] span { background: transparent; }
  .menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(320px, 86vw); margin: 0; padding: 88px 20px 24px;
    background: var(--surface); box-shadow: -20px 0 50px rgba(0, 0, 0, .6);
    transform: translateX(105%); visibility: hidden; transition: transform .3s, visibility .3s; overflow-y: auto;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav ul { flex-direction: column; gap: 4px; }
  .nav a { padding: 13px 16px; font-size: 1.05rem; border-radius: var(--r-sm); }
  .has-sub { flex-wrap: wrap; }
  .nav .has-sub > a { flex: 1; padding-right: 16px; }
  .sub-btn { display: none; }
  .nav ul.sub {
    position: static; width: 100%; min-width: 0; margin: 0 0 6px 14px; padding: 0 0 0 10px; border-left: 2px solid var(--line-strong);
    border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: inherit; transform: none;
  }
  .nav ul.sub::before { content: none; }
  .nav .sub a { padding: 9px 14px; font-size: .98rem; color: #cfcdd2; }
  .nav-search { display: flex; gap: 8px; margin-bottom: 18px; }
  .nav-search button { padding-inline: 16px; }
  body.menu-open { overflow: hidden; }
  body.menu-open .hw { z-index: 70; }
  body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .65); }

  .hero { margin-bottom: 28px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .card__img, .card__img img { width: 64px; height: 64px; }
  .crumbs span[aria-current], .crumbs__sep:has(+ [aria-current]) { display: none; }
  .post__date { width: 90px; height: 90px; margin-top: -58px; }
  .post__date b { font-size: 1.9rem; }
  .entry { --pre-size: .82rem; }
  .entry pre { padding: 14px; margin-inline: calc(-1 * var(--gut) / 2); }
  .related__grid { grid-template-columns: minmax(0, 1fr); }
  .respond__row { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .tiles { gap: 10px; }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .enq { padding: 20px 16px; margin-inline: calc(-1 * var(--gut) / 2); }
  .enq__row, .plans, .entry ol.steps { grid-template-columns: minmax(0, 1fr); }
  .svc-admin { padding: 20px 16px; }
  .contact dd { margin-bottom: 16px; }
  .ft__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  /* a printed song (or a saved PDF) is the title and the sheet, in the key and view chosen on screen */
  .hw, .sidebar, .ft, .post-nav, .related, .crumbs, .totop, .tools, .comments, .nl, .ad, .consent, .mysongs, .pbar, .cpop,
  .post__img, .post__date, .post__meta, .post__updated, .guide, .yt, .video, .respond, .gen-cta, .sugg { display: none !important; }
  .entry pre .ch, .entry .psheet .ch { color: #000 !important; font-weight: 800; }
  .entry pre .sec, .entry pre .nc { color: #444 !important; }
  .entry pre { font-size: 11pt !important; line-height: 1.6; page-break-inside: auto; }
  .post__title { font-size: 20pt; margin: 0 0 8pt; }
  body { background: #fff; color: #000; }
  .layout { display: block; }
  .post__title, .entry h5 { color: #000; }
  .entry pre { color: #000; background: none; box-shadow: none; overflow: visible; }
}

/* Contents list (from the old [ez-toc] shortcode) */
.toc { margin: 0 0 1.6em; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.toc summary { padding: 12px 18px; color: #fff; font-weight: 800; cursor: pointer; }
.toc ol { margin: 0; padding: 0 18px 14px 40px; }
.toc li { margin: 4px 0; }
.toc .toc__sub { margin-left: 18px; list-style: circle; }
.toc a { text-decoration: none !important; }

/* ---- Chord guide under each sheet, chord pages, Chord Shape Generator ------------- */
.guide { margin: 36px 0 8px; padding: 24px; border-radius: calc(var(--r) + 2px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.guide h2 { margin-top: 0; font-size: 1.35rem; }
.guide h3 { font-size: 1.05rem; margin: 1.4em 0 .6em; }
.guide .faq { margin: 1.6em 0 0; }
.guide__more, .gen-cta { color: var(--muted); font-size: .95rem; }
.chord-tabs__list, .gen__inst { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chord-tabs__list button, .gen__inst button, .gen__row button {
  padding: 7px 16px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line);
}
.chord-tabs__list button:hover, .gen__inst button:hover, .gen__row button:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.chord-tabs__list [aria-selected="true"], .gen__inst [aria-pressed="true"], .gen__row [aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }
.chords-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
#cp-piano.chords-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.chord { margin: 0; padding: 10px 6px 8px; border-radius: var(--r-sm); background: var(--surface-2); text-align: center; scroll-margin-top: 110px; }
.entry .chord img, .chord img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 0; }
.chord figcaption { margin-top: 4px; font-size: .82rem; color: var(--muted); }
.chord figcaption a, .chord figcaption b { display: block; color: #fff; font-size: .95rem; font-weight: 800; text-decoration: none !important; }
.chord figcaption code { display: block; color: var(--link); font-family: var(--mono); font-size: .85rem; }
.chord:target { box-shadow: inset 0 0 0 2px var(--accent); }
.tools__chords a.chip { text-decoration: none; }
.tools__chords a.chip:hover { background: var(--accent); }
.cb-sec { margin: 0 0 32px; }
.cb-songs { columns: 2 260px; column-gap: 28px; }
.cb-songs li { break-inside: avoid; }
.cb-all details { margin: 0 0 8px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cb-all summary { padding: 12px 16px; color: #fff; font-weight: 700; cursor: pointer; }
.cb-all .chips { padding: 0 16px 14px; }
.entry .chips { padding-left: 0; }
.entry .chips li { margin: 0; }
.entry .chips a { text-decoration: none; }
.gen { margin: 24px 0 36px; padding: 22px; border-radius: calc(var(--r) + 2px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.gen__row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.gen__row button { min-width: 48px; }
.gen__row--ctl { align-items: center; gap: 10px 14px; }
.gen__row--ctl label { color: #fff; font-weight: 700; font-size: .9rem; }
.gen select {
  min-width: 0; flex: 1 1 220px; max-width: 360px; padding: 9px 36px 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ec6b73' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
  color: #fff; font: inherit; appearance: none; cursor: pointer;
}
.gen__inst { margin: 0; }
.gen__out { padding-top: 12px; border-top: 1px solid var(--line); }
.gen__name { margin: 4px 0; font-size: 1.5rem; }
.gen__name a { color: #fff; }
.gen__notes { color: var(--muted); }
.gen__shapes { min-height: 186px; }
@media (max-width: 760px) {
  .guide, .gen { padding: 18px 14px; margin-inline: calc(-1 * var(--gut) / 2); }
  .chords-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
}
.guide ol, .guide ul { padding-left: 1.4em; margin: 0 0 1.2em; }
.guide li { margin-bottom: .35em; }
.guide li::marker { color: var(--link); }
.guide p a, .guide li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(236, 107, 115, .45); }

/* YouTube video under the chord sheet */
.video { margin: 32px 0 0; }
.video h2 { font-size: 1.15rem; margin: 0 0 12px; }
.video .yt { margin-bottom: 8px; }
.video__by { color: var(--muted); font-size: .88rem; margin: 0; }

/* instrument note on song cards (piano: key · guitar: capo · ukulele: difficulty) */

.post__updated { margin: 6px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.post__meta + .post__updated { margin: -18px 0 26px; }
/* Tablets: there is no room for the search field inside the bar, so it opens as a full-width field just under
   the header instead of pushing the menu off the screen. */
@media (max-width: 1100px) {
  .hd { position: relative; }
  .hsearch { position: static; }
  .hsearch__q, .hsearch.is-open .hsearch__q {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
    width: auto; height: 52px; margin: 0; border-radius: var(--r);
    background: var(--surface-2); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .75);
  }
  .hsearch.is-open .hsearch__q { padding: 0 18px; border-width: 1px; }
}

/* Key control: − [key] + (Reset). Sits in the chord toolbar; on phones it takes its own row. */
.tools__key { display: flex; align-items: center; gap: 6px; }
.tools__key button {
  min-width: 34px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-3); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.tools__key button:hover { background: var(--accent); }
.tools__key .tools__reset { font-size: .82rem; font-weight: 700; background: none; color: var(--link); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tools__key select {
  height: 34px; min-width: 112px; padding: 0 30px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); appearance: none; cursor: pointer;
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ec6b73' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center / 11px;
  color: #fff; font: inherit; font-size: .9rem; font-weight: 700;
}
.tools__key select:focus { outline: 0; border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--glow); }
.tools__keynote { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) { .tools__key { flex: 1 1 100%; } }

/* ---- Player (chord posts with the Key control) ---------------------------------------------- */
/* chords stand out from the lyrics so you can read ahead while playing; tap one to see its shape */
.entry pre .ch { color: var(--link); font-weight: 800; cursor: pointer; border-radius: 4px; }
.entry pre .ch:hover, .entry pre .ch:focus-visible { outline: 0; background: rgba(236, 107, 115, .16); color: #fff; }
.entry pre .nc { color: var(--muted); }
.entry pre .sec { color: var(--muted); font-weight: 700; }
.tools .tools__capo { min-width: 104px; }
.btn--small { padding: 6px 14px; font-size: .85rem; vertical-align: middle; }
.guide__capo .btn { margin-left: 4px; }
/* tap-a-chord panel: a sheet at the bottom of the screen, never covering the line being played for long */
.cpop {
  position: fixed; z-index: 80; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px)); padding: 14px 16px 16px; border-radius: 18px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 60px -12px rgba(0, 0, 0, .8);
}
.has-pbar .cpop { bottom: calc(76px + env(safe-area-inset-bottom)); }
.cpop__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cpop__head b { color: #fff; font-size: 1.4rem; font-weight: 800; }
.cpop__notes { color: var(--muted); font-size: .9rem; flex: 1; }
.cpop__x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-3); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cpop__tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.cpop__tabs button { padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.cpop__tabs [aria-pressed="true"] { background: var(--accent); color: #fff; }
.cpop__shapes { display: flex; justify-content: center; gap: 12px; min-height: 162px; align-items: center; }
.cpop__shapes img { max-width: 100%; height: auto; border-radius: 0; }
.cpop__more { display: block; margin-top: 8px; text-align: center; font-size: .9rem; font-weight: 700; }
/* playing bar: key, scroll and speed while the sheet is on screen */
.pbar {
  position: fixed; z-index: 70; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(520px, calc(100vw - 20px));
  padding: 8px 10px; border-radius: var(--r-pill); background: rgba(28, 28, 30, .96); box-shadow: inset 0 0 0 1px var(--line-strong), 0 16px 40px -10px rgba(0, 0, 0, .8);
}
.pbar__grp { display: flex; align-items: center; gap: 4px; }
.pbar button { min-width: 38px; height: 38px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; }
.pbar__name, .pbar__speed { min-width: 44px; text-align: center; color: #fff; font-weight: 800; font-size: .95rem; }
.pbar__capo { color: var(--link); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.pbar .pbar__play { padding: 0 16px; background: var(--accent); font-size: .9rem; }
.pbar .pbar__play[aria-pressed="true"] { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--accent); }
.has-pbar .totop { bottom: 84px; }
@media print { .pbar, .cpop { display: none !important; } .entry pre .ch { color: #000; } }
/* layout fixes: centre the panel and bar with side margins (no transform), wrap the Key row on small screens */
.cpop { left: 12px; right: 12px; transform: none; width: auto; max-width: 440px; margin-inline: auto; }
.pbar { left: 10px; right: 10px; transform: none; width: auto; max-width: 520px; margin-inline: auto; gap: 6px; padding: 7px 8px; }
.pbar button { min-width: 34px; height: 36px; font-size: .95rem; }
.pbar__name, .pbar__speed { min-width: 38px; font-size: .9rem; }
.pbar .pbar__play { padding: 0 12px; white-space: nowrap; font-size: .85rem; }
.tools__key { flex-wrap: wrap; row-gap: 8px; }
.tools[data-key-root] ~ .entry pre:last-of-type { margin-bottom: 84px; }   /* room above the player bar at the end of the sheet */
/* intro lines and labels inside posts (were H5/H6): same look, no longer headings */
.entry .post__lead { color: var(--head); font-size: 1.2rem; font-weight: 750; line-height: 1.6; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: wrap; }   /* one sentence, wrapped naturally (balance broke it early) */
@media print { .entry .post__lead { color: #000; } }
/* the footer's text links are underlined, not told apart by colour alone */
.ft__bottom a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* chords are coloured on every sheet; they are tappable (and look it) only where the player is on */
.entry pre .ch { cursor: default; }
.post--player .entry pre .ch { cursor: pointer; }
.entry pre .ch:hover { background: none; color: var(--link); }
.post--player .entry pre .ch:hover, .post--player .entry pre .ch:focus-visible { background: rgba(236, 107, 115, .16); color: #fff; }

/* older posts: the sheet is in paragraphs (.psheet); chords look and behave as in a <pre> sheet */
.entry .psheet .ch { color: var(--link); font-weight: 800; border-radius: 4px; }
.post--player .entry .psheet .ch { cursor: pointer; }
.post--player .entry .psheet .ch:hover, .post--player .entry .psheet .ch:focus-visible { outline: 0; background: rgba(236, 107, 115, .16); color: #fff; }
.entry .psheet .nc, .entry .psheet .sec { color: var(--muted); }
.entry .psheet .sec { font-weight: 700; }
.tools[data-key-root] ~ .entry .psheet[data-last] { margin-bottom: 84px; }
@media print { .entry .psheet .ch { color: #000; } }

/* Artist showcase at the top of the Chords and instrument pages: round photos and names in a grid that grows with
   the screen (3 across on phones, 4 on tablets, 6 on wide screens); the whole tile is the link */
.artists { margin: 4px 0 36px; }
.artists__title, .list-title { margin: 0 0 16px; font-size: 1.3rem; }
.artists__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 560px) { .artists__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .artists__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.artist { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text); text-align: center; text-decoration: none; border-radius: var(--r-sm); }
.artist img, .artist__initial { width: 100%; max-width: 104px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--surface-3);
  box-shadow: 0 0 0 2px var(--line); transition: transform .2s ease, box-shadow .2s ease; }
.artist__initial { display: grid; place-items: center; color: #fff; font-size: 2rem; font-weight: 800; }
.artist__name { color: #fff; font-size: .92rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.artist:hover img, .artist:focus-visible img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--link), 0 12px 26px -12px var(--glow); }
.artist:hover .artist__name { color: var(--link); }
.artist:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .artist img { transition: none; } .artist:hover img { transform: none; } }

/* Search suggestions under any search box: artists first, then songs, then "All results" */
.sugg { position: absolute; z-index: 70; max-height: min(60vh, 440px); overflow-y: auto; padding: 6px; border-radius: var(--r);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -16px rgba(0, 0, 0, .85); text-align: left; }
.sugg a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm);
  color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.sugg a:hover, .sugg a[aria-selected="true"] { background: var(--surface-3); }
.sugg__k { flex: none; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(163, 36, 42, .3); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sugg a.sugg__all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--link); font-weight: 700; }
.archive__search, .hero__search, .nf__search { position: relative; }

/* My songs: the header button and its panel (recently played, saved) */
.mysongs-btn { flex: none; margin-left: 8px; }
.mysongs-btn:hover, .mysongs-btn[aria-expanded="true"] { background: var(--accent); }
.mysongs { position: fixed; z-index: 80; top: 84px; right: max(16px, calc((100vw - var(--wrap)) / 2)); width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px); overflow-y: auto; padding: 12px; border-radius: var(--r); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 50px -18px rgba(0, 0, 0, .9); }
.mysongs__tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mysongs__tabs button { flex: 1; padding: 9px 10px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: #fff; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.mysongs__tabs [aria-selected="true"] { background: var(--accent); }
.mysongs__list { list-style: none; margin: 0; padding: 0; }
.mysongs__list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 10px; border-radius: var(--r-sm); color: #fff; font-weight: 600; line-height: 1.35; text-decoration: none; }
.mysongs__list a:hover { background: var(--surface-3); }
.mysongs__k { flex: none; color: var(--link); font-size: .8rem; font-weight: 700; }
.mysongs__empty { margin: 6px 4px 8px; color: var(--muted); }
.mysongs__clear { display: block; margin: 8px auto 2px; padding: 6px 10px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) { .mysongs { top: 76px; } }

/* Cookie choices: a small bar at the bottom, shown once */
.consent { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), 0 20px 44px -14px rgba(0, 0, 0, .9); }
.consent p { margin: 0; font-size: .9rem; line-height: 1.5; }
.consent__btns { display: flex; flex: none; gap: 8px; }
.consent__min { background: var(--surface-3); }
@media (max-width: 600px) { .consent { flex-direction: column; align-items: stretch; } .consent__btns > * { flex: 1; } }
.ft__consent { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* links inside sentences are underlined, not told apart by colour alone */
.consent p a, .archive__desc a, .artists__lead a { text-decoration: underline; text-underline-offset: 3px; }

/* Chord view row (Simplify, Numbers, Left-handed) and the Left-handed switch beside diagrams */
.tools__view { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.tools__view button, .lefty-btn {
  height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--surface-3); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.tools__view button:hover, .tools__view button[aria-pressed="true"], .lefty-btn:hover, .lefty-btn[aria-pressed="true"] { background: var(--accent); }
.chord-tabs .lefty-btn { margin: 0 0 12px; }
.lefty-row { margin: 0 0 18px; }
.gen__row--ctl .lefty-btn { margin-left: 4px; }

/* ---- Chord toolbar, 2026 pass: three groups (key, view, actions) + "More"; every control a 44px target with a word */
.tools__act, .tools__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; }
.tools__act button, .tools__more .tools__opt, .tools__view button, .tools__more .tools__ctl button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-3); color: #fff; font: inherit; font-size: .9rem; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.tools__act button:active, .tools__view button:active, .tools__more .tools__opt:active { transform: scale(.97); }
.tools__act button:hover, .tools__act button[aria-pressed="true"], .tools__act button[aria-expanded="true"],
.tools__more .tools__opt:hover, .tools__more .tools__opt[aria-pressed="true"] { background: var(--accent); color: #fff; }
.tools__act svg { flex: none; }
.tools__more { padding-top: 12px; border-top: 1px solid var(--line); }
.tools__more[hidden] { display: none !important; }
.tools__more .tools__ctl { flex-basis: auto; }
.tools__key button, .tools__key select { min-height: 44px; }
.tools__key button { min-width: 44px; }
@media (max-width: 480px) {
  .tools__act { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tools__act button { justify-content: center; padding: 0 8px; }
}

/* setlist picker: a sheet at the bottom on phones (thumb reach), a panel by the toolbar on wide screens */
.setpick { top: auto; bottom: 16px; }
.mysongs__title { margin: 4px 6px 10px; color: #fff; font-weight: 800; line-height: 1.35; }
.setpick__item { flex: 1; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none; color: #fff; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.setpick__item:hover, .setpick__item[aria-pressed="true"] { background: var(--surface-3); }
.setpick .mysongs__list li { display: flex; align-items: center; gap: 8px; padding-right: 8px; }
.setpick__new { display: flex; gap: 8px; margin: 10px 0 6px; }
.setpick__new input, .setcard__rename { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--input-bg); color: #fff; font: inherit; }
.mysongs__all { display: block; margin: 6px 6px 2px; font-weight: 700; text-decoration: none; }
@media (max-width: 760px) { .setpick { left: 12px; right: 12px; width: auto; bottom: 12px; border-radius: calc(var(--r) + 4px); } }

/* playing from a setlist: where you are, and the next song one tap away */
.setnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -10px 0 22px; padding: 12px 16px; border-radius: var(--r); background: rgba(163, 36, 42, .14); box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .3); }
.setnav__name { color: var(--muted); font-size: .85rem; font-weight: 700; flex-basis: 100%; }
.setnav a { font-weight: 700; text-decoration: none; }
.setnav__next { margin-left: auto; }

/* the Setlists page */
.setpage { margin: 0 0 32px; }
.setcard { margin: 0 0 18px; padding: 18px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.setcard--shared { box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .45); }
.setcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.setcard__name { margin: 0; font-size: 1.2rem; }
.setcard__songs { margin: 0 0 14px; padding-left: 1.4em; }
.setcard__songs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.setcard__songs li::marker { color: var(--muted); }
.setcard__songs a { flex: 1 1 auto; color: #fff; font-weight: 700; text-decoration: none; }
.setcard__ctl { display: inline-flex; gap: 4px; }
.setcard__ctl button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-3); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.setcard__ctl button:hover { background: var(--accent); }
.setcard__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.setcard__acts .btn { min-height: 44px; }
.setcard__empty { padding: 18px; border-radius: var(--r); background: var(--surface); color: var(--muted); }
.setpage__new { max-width: 520px; }

/* setlist rows: title, key, controls on one line; titles are plain links (the row itself reads as a list) */
.entry .setcard__songs a, .entry .setcard a.btn, .entry .setnav a { text-decoration: none; }
.setcard__songs li { flex-wrap: nowrap; }
.setcard__songs a { min-width: 0; overflow-wrap: anywhere; }
.setcard__songs .mysongs__k { flex: none; }
.setcard__ctl { flex: none; margin-left: auto; }

/* Tools page: one card per tool, the whole card is the link */
.toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 6px 0 30px; }
.entry a.toolcard { display: grid; gap: 6px; padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text); text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.entry a.toolcard:hover, .entry a.toolcard:focus-visible { box-shadow: inset 0 0 0 1px var(--link), 0 14px 30px -18px var(--glow); transform: translateY(-2px); }
.toolcard__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(163, 36, 42, .22); color: var(--link); font-size: 1.4rem; }
.toolcard__name { color: #fff; font-size: 1.1rem; font-weight: 800; }
.toolcard__text { font-size: .92rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .entry a.toolcard { transition: none; } .entry a.toolcard:hover { transform: none; } }

/* ---- Song toolbar: summary (key, capo, Controls) + icon actions on the page, every control in a bottom sheet */
.tsum { display: flex; align-items: stretch; gap: 8px; flex-basis: 100%; }
/* Key and Capo: one joined control, each a small label over its value, both centred on the same lines */
.tsum__seg { display: flex; flex: 1 1 auto; max-width: 280px; padding: 4px; border-radius: 16px; background: var(--surface-3); }
.tsum__pill { display: grid; align-content: center; gap: 3px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px;
  background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease; }
.tsum__seg .tsum__pill { flex: 1 1 0; min-width: 0; }
.tsum__seg .tsum__pill + .tsum__pill { box-shadow: -4px 0 0 -3px var(--line-strong); }
.tsum__pill small { color: #b0adb4; font-size: .66rem; font-weight: 800; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.tsum__pill b { font-size: 1.02rem; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.tsum__seg .tsum__pill:hover { background: rgba(255, 255, 255, .07); }
/* Controls: sized to its words, a tonal accent rather than a solid red slab */
.tsum__pill--all { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 16px;
  background: rgba(163, 36, 42, .2); color: #ffd9dc; box-shadow: inset 0 0 0 1px rgba(236, 107, 115, .35); font-weight: 800; }
.tsum__pill--all:hover { background: var(--accent); color: #fff; }
.tsum__badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: .72rem; font-style: normal; }
.tools__act--icons { display: flex !important; gap: 8px; }
.tools__act--icons button { width: 44px; min-width: 44px; padding: 0 !important; justify-content: center; }
.tools__act--icons button span:not([aria-hidden]), .tools__act--icons [data-save] { font-size: 0; }
.tools__act--icons [data-save] span[aria-hidden] { font-size: 1.1rem; }
.tools__act--icons button:last-child { width: auto; padding: 0 16px !important; margin-left: auto; }
.tools__act--icons button:last-child span { font-size: .9rem; }
.tsheet__scrim { position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, .55); }
.tsheet { position: fixed; z-index: 86; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; padding: 8px 18px 24px;
  border-radius: 22px 22px 0 0; background: var(--surface-2); box-shadow: 0 -20px 50px -10px rgba(0, 0, 0, .8); transform: translateY(100%); transition: transform .22s ease; }
.tsheet.is-open { transform: none; }
.tsheet::before { content: ""; display: block; width: 44px; height: 5px; margin: 4px auto 10px; border-radius: 3px; background: var(--line-strong); }
.tsheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tsheet__title { margin: 0; color: #fff; font-size: 1.1rem; font-weight: 800; }
.tsheet__sec { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.tsheet__sec .tools__key, .tsheet__sec .tools__view { margin: 0; }
.tsheet__sec .tools__more, .tsheet__sec > .tools__ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.tsheet__sec .tools__opt, .tsheet__sec .tools__ctl button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-3); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.tsheet__sec .tools__opt[aria-pressed="true"] { background: var(--accent); }
@media (min-width: 761px) { .tsheet { left: auto; right: 24px; bottom: 24px; width: 420px; border-radius: 22px; } }
body.has-sheet { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .tsheet { transition: none; } }

.tsheet__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tsheet__row .tools__ctl { flex-basis: 100%; }
.tools__act--icons button:last-child { width: 44px; padding: 0 !important; margin-left: 0; }
.tools__act--icons button:last-child span { font-size: 0; }
.tools__opt > span[aria-hidden] { margin-left: 2px; opacity: .75; }
.pbar .pbar__set { display: grid; place-items: center; padding: 0; }
.pbar .pbar__set:hover { background: var(--accent); }
@media (max-width: 400px) { .pbar__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pbar .pbar__play { padding: 0; min-width: 40px; } }
/* before ym.js moves them into the sheet, the full controls are not shown (the summary stands in for them) */
.tools--a > .tools__key, .tools--a > .tools__keynote, .tools--a > .tools__view, .tools--a > .tools__more, .tools--a [data-more] { display: none !important; }
/* ---- Play along: the song's video in a small floating player while the chords scroll (YouTube asks for 200 × 200 at least) */
.ytmini { position: fixed; z-index: 71; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); width: 212px; padding: 6px 6px 0;
  border-radius: 16px; background: #1c1c1e; box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -10px rgba(0, 0, 0, .85); transition: transform .15s ease; }
.ytmini--left { right: auto; left: 10px; }
.ytmini iframe { display: block; width: 200px; height: 200px; border: 0; border-radius: 10px; background: #000; }
.ytmini__bar { display: flex; align-items: center; gap: 6px; padding: 6px 2px 8px 4px; cursor: grab; touch-action: none; user-select: none; }
.ytmini__t { flex: 1; min-width: 0; color: #fff; font-size: .74rem; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytmini__t small { display: block; color: var(--muted); font-weight: 600; }
.ytmini__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; margin-right: 5px; }
.ytmini__eq i { display: block; width: 2px; background: var(--link); animation: ymeq .9s ease-in-out infinite alternate; }
.ytmini__eq i:nth-child(2) { animation-delay: -.3s; } .ytmini__eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes ymeq { from { height: 3px; } to { height: 10px; } }
.ytmini__b { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--surface-3); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
.ytmini__b:hover { background: var(--accent); }
.ytmini__note { margin: 0; padding: 0 4px 8px; color: #ffd9dc; font-size: .7rem; line-height: 1.35; }
.has-pbar .totop { bottom: 84px; }
@media (prefers-reduced-motion: reduce) { .ytmini, .ytmini__eq i { transition: none; animation: none; } }
@media print { .ytmini { display: none !important; } }