@charset "utf-8";
/*
 * Músicos Católicos — site styles.
 *
 * Mobile first: base rules are the phone layout; desktop comes in at 900px.
 * Tokens live on :root so the biography, album and song pages can reuse them.
 * Class names are prefixed (site-*, page-*, bio-*, album-*, ad-*) to avoid Bootstrap's
 * generic ones (.nav, .lead, .search…) while the legacy pages still load Bootstrap.
 * page-* are the parts the biography and album pages share (partial/_*.twig).
 */

/* ===== Tokens ===== */
:root {
    --bg: #101216;
    --surface: #181b21;
    --surface-2: #1f232b;
    --surface-3: #242932;
    --line: #242932;
    --line-soft: #1f232b;
    --border: #2e3440;
    --text: #eceff4;
    --text-2: #d5dae3;
    --muted: #a3abb9;
    --faint: #8a93a3;
    --disabled: #3e4450;
    --accent: #6cb8ff;
    --accent-hover: #9ccfff;
    --on-accent: #0b1220;
    --accent-soft: rgba(108, 184, 255, 0.15);
    --accent-rule: rgba(108, 184, 255, 0.45);
    --hover: var(--surface-3); /* a link row or card under the cursor (or the finger) */
    --changed: #f0b429; /* a setting that is not the default (the transposed key) */
    --changed-soft: rgba(240, 180, 41, 0.16);
    --ad-label: #7d8594;
    --ad-border: #353b46;
    --stripe: #14171c; /* every other row of a long table (desktop) */

    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;

    --radius: 14px;
    --gutter: 20px;
    --maxw: 1200px;
    --tap: 44px; /* minimum touch target */

    color-scheme: dark;
}

/* ===== Fonts (self-hosted, public/fonts/, SIL Open Font License) =====
 * The same files Google Fonts serves, so nothing reaches Google on a visit. latin covers
 * Spanish; latin-ext only downloads for a name that needs it (unicode-range).
 * The Google version is in the file name: the server caches fonts for a year (immutable),
 * so a newer file needs a new name. Bricolage is one variable file for 700 and 800. */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/atkinson-hyperlegible-v12-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/atkinson-hyperlegible-v12-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/atkinson-hyperlegible-v12-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/atkinson-hyperlegible-v12-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 700 800;
    font-display: swap;
    src: url('/fonts/bricolage-grotesque-v9-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 700 800;
    font-display: swap;
    src: url('/fonts/bricolage-grotesque-v9-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Bootstrap bridge (legacy pages) =====
 * Maps Bootstrap 5's variables to the tokens so pages not yet redesigned share the new
 * background, text and link colors. Harmless where Bootstrap is not loaded. */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-bg-rgb: 16, 18, 22;
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font-body);
    --bs-secondary-bg: var(--surface);
    --bs-tertiary-bg: var(--surface);
    --bs-border-color: var(--border);
    --bs-link-color: var(--accent);
    --bs-link-color-rgb: 108, 184, 255;
    --bs-link-hover-color: var(--accent-hover);
    --bs-link-hover-color-rgb: 156, 207, 255;
}

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

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
}

body > main {
    flex: 1 0 auto;
    width: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}

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

/* Components set their own display; keep the hidden attribute authoritative */
[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    padding: 10px 16px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    border-radius: 8px;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
    color: var(--on-accent);
}

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Legacy pages: align Bootstrap's container with the header and footer */
main.container-md {
    max-width: var(--maxw);
    padding-right: var(--gutter);
    padding-left: var(--gutter);
}

/* Legacy breadcrumb sits directly under the header */
ol.breadcrumb {
    margin: 0;
}

/* ===== Header ===== */
.site-header {
    border-bottom: 1px solid var(--line);
}

/* Wraps to two rows on very narrow phones instead of overflowing */
.site-header__inner {
    min-height: 64px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--tap);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
    white-space: nowrap;
}

.site-brand:hover {
    color: var(--text);
}

.site-brand svg {
    flex-shrink: 0;
    stroke: var(--accent);
}

.site-nav {
    display: flex;
    gap: 14px;
}

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--muted);
    font-size: 15px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.site-nav__link.is-active {
    color: var(--text);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

/* ===== Page title (shared) ===== */
.page-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
}

/* ===== Biography index: intro + search ===== */
.bio-index__intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 0 16px;
}

.bio-index__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

/* Mobile: "Compartir" on its own line above the title, at the right, as on the biography
   page (where it shares the "Artista" line). Desktop puts it back beside the title. */
.bio-index__title-row > .share {
    order: -1;
    flex-basis: 100%;
    display: flex;
    justify-content: flex-end;
}

/* The artist count sits right next to the title, on its baseline */
.bio-index__heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.bio-index__count {
    font-size: 15px;
    color: var(--muted);
}

.bio-index__lead {
    max-width: 720px;
    margin: 0;
    font-size: 16px;
    color: var(--muted);
}

.bio-index__lead cite {
    font-style: normal;
}

.bio-index__source {
    font-size: 14px;
    white-space: nowrap;
}

/* The index's search only works with JS: hidden without it (no layout shift when JS
   runs). The 404's is a real form (search-field--form), so it always shows. */
.no-js .search-field:not(.search-field--form) {
    display: none;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 720px;
    height: 56px;
    padding: 0 16px;
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    color: var(--muted);
}

.search-field:focus-within {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.search-field svg {
    flex-shrink: 0;
}

.search-field__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text);
    font: inherit;
    font-size: 18px;
}

.search-field__input::placeholder {
    color: var(--faint);
}

/* Focus is shown on the whole field (:focus-within) */
.search-field__input:focus-visible {
    outline: none;
}

/* ===== A–Z index ===== */
.az-index {
    display: flex;
    gap: 6px;
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.az-index::-webkit-scrollbar {
    display: none;
}

.az-index__letter {
    flex: 0 0 var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
}

a.az-index__letter {
    background: var(--surface);
    color: var(--text);
}

a.az-index__letter:hover {
    background: var(--surface-2);
    color: var(--accent-hover);
}

/* Selected filter */
a.az-index__letter[aria-current="true"] {
    background: var(--accent);
    color: var(--on-accent);
}

.az-index__letter--all {
    flex: 0 0 auto;
    padding: 0 14px;
    font-size: 16px;
}

/* On phones the index scrolls sideways: keep "Todas" pinned so the filter can
   always be cleared without scrolling back */
a.az-index__letter--all {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 8px 0 8px -2px var(--bg);
}

/* Resetting the filter needs JS; without it the letters are plain anchors */
.no-js .az-index__letter--all {
    display: none;
}

.az-index__letter.is-disabled {
    background: transparent;
    color: var(--disabled);
    pointer-events: none;
}

/* ===== Biography index: list ===== */
.bio-index__layout {
    padding: 8px 0 48px;
}

.letter-group {
    scroll-margin-top: 16px;
}

.letter-group__title {
    margin: 0;
    padding: 22px 0 6px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    color: var(--accent);
}

.letter-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.artist-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
}

/* Every artist in the index is published (all links), so the names stay white at rest */
.artist-link {
    margin: 0 -12px;
    padding: 0 12px;
    border-radius: 10px;
}

.artist-link:hover,
.artist-link:active {
    background: var(--hover);
    box-shadow: inset 3px 0 0 var(--accent);
    color: var(--text);
}

.artist-link:hover .artist-link__name,
.artist-link:active .artist-link__name {
    color: var(--accent);
}

.artist-link__name {
    flex: 1;
}

.avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bio-index__empty {
    margin: 32px 0;
    color: var(--muted);
}

/* ===== Ads =====
 * Heights are reserved so nothing jumps when the ad loads. */
.ad-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 28px 0 8px;
}

.ad-slot__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ad-label);
}

.ad-slot__unit {
    width: 320px;
    max-width: 100%;
    min-height: 100px;
    border: 1px dashed var(--ad-border);
    border-radius: 8px;
}

.ad-slot--rail {
    display: none;
}

/* Real ad: the box only reserves the space; AdSense draws the ad inside it */
.ad-slot__unit--live {
    border: 0;
}

/* Real ads sit in a card of the site's own surface, so the white creative reads as framed
 * content and not as a hole in the page. Only the box around the ad is styled: the ad itself
 * is never dimmed, filtered or covered (AdSense policy), and "Publicidad" stays visible.
 * No side padding: the fixed 320px unit must still fit a 360px phone. */
.ad-slot--live {
    align-items: center;
    padding: 8px 0 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.ad-slot--live .ad-slot__label {
    align-self: flex-start;
    padding-inline: 12px;
}

/* Preview placeholders (AD_PLACEHOLDERS=true): the slot's size in the dashed box */
.ad-slot__unit--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ad-label);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.ad-slot__size--desktop {
    display: none;
}

/* Content: medium rectangle on mobile, leaderboard on desktop. The unit is responsive but
 * not full-width-responsive: that makes Google stretch the ad to the screen width on mobile
 * and out of its card. */
.ad-slot--content .ad-slot__unit {
    width: 300px;
    min-height: 250px;
}

/* Between the sections of a long text: fluid, as wide as the text */
.ad-slot--article {
    margin: 24px 0;
}

.ad-slot--article .ad-slot__unit {
    width: 100%;
    min-height: 250px;
}

/* ===== Share button (partial/_share.twig) =====
 * A <details>: the summary is the "Compartir" button, the panel floats under it so
 * opening it never moves the page. */
.share {
    position: relative;
    margin-left: auto; /* stays at the right when its row wraps */
}

.share__toggle {
    gap: 8px;
    color: var(--text);
    list-style: none;
    user-select: none;
}

/* No disclosure triangle */
.share__toggle::-webkit-details-marker {
    display: none;
}

.share__details[open] > .share__toggle {
    border-color: var(--accent);
}

.share__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: max-content;
    max-width: min(360px, calc(100vw - 2 * var(--gutter)));
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.share__title {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--muted);
}

.share__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Copying needs JS */
.no-js .share__copy {
    display: none;
}

.chip.chip--primary {
    background: var(--accent);
    border: 0;
    color: var(--on-accent);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.chip.chip--primary:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
}

/* "Enlace copiado": a toast at the bottom of the screen, so it never covers the text
   around the button nor reflows the page */
.share__status {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 20;
    transform: translateX(-50%);
    padding: 10px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 15px;
    white-space: nowrap;
}

.share__status:empty {
    display: none;
}

/* ===== Shared page parts: breadcrumbs, section headings, pill button, chip ===== */
.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    margin: 0;
    padding: 14px 0 0;
    list-style: none;
    font-size: 14px;
    color: var(--ad-label);
}

.crumbs__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crumbs__item + .crumbs__item::before {
    content: '\203A';
    color: var(--ad-label);
}

.crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--muted);
}

.crumbs [aria-current] {
    color: var(--text);
}

/* Phones, on every page: one row back to the parent ("‹ Disco") instead of the whole trail.
   Desktop keeps the trail. A trail of one item (nothing to go back to) shows as it is */
@media screen and (max-width: 899.98px) {
    .crumbs .crumbs__item:not(:only-child) {
        display: none;
    }

    .crumbs .crumbs__item:nth-last-child(2) {
        display: flex;
    }

    .crumbs .crumbs__item:nth-last-child(2)::before {
        content: '\2039';
        color: var(--muted);
    }

    /* The header's first row (kicker, buttons) sits close under the link: 30px between the two
       texts instead of 52. The row is pulled up over the link's 44px touch area, so the row lets
       taps through except on its buttons, and the link keeps its touch area */
    .crumbs + .page-layout .page-head__top {
        margin-top: -22px;
        pointer-events: none;
    }

    .crumbs + .page-layout .page-head__top > :not(.page-head__kicker) {
        pointer-events: auto;
    }
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
}

.section-head__count {
    font-size: 14px;
    color: var(--faint);
}

.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
}

.pill-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 22px;
    color: var(--accent);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.pill-button:hover {
    border-color: var(--accent);
    color: var(--accent-hover);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--tap);
    padding: 0 14px 0 12px;
    background: var(--surface-3);
    border-radius: 22px;
    color: var(--text);
    font-size: 15px;
}

.chip:hover {
    background: var(--border);
    color: var(--text);
}

.avatar--lg {
    width: 72px;
    height: 72px;
    font-size: 20px;
}

/* ===== Biography and album pages: shared layout and parts (page-*) ===== */

/* Mobile: one column. Both wrappers dissolve and `order` interleaves their blocks:
   header, photos, links, intro, general data; everything else keeps document order
   (discography, ads, biography, related, references).
   Album: header, images, links, intro, songs, general data, then the rest. */
.page-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 8px 0 48px;
}

.page-main,
.page-side {
    display: contents;
}

.page-main > *,
.page-side > * {
    order: 10;
}

.page-main > .page-head {
    order: 1;
}

.page-side > .page-media-section {
    order: 2;
}

.page-main > .page-links {
    order: 3;
}

.page-main > .page-lead {
    order: 4;
}

.page-side > .page-facts {
    order: 5;
}

.page-main > .album-tracks {
    order: 5;
}

.album-page .page-side > .page-facts {
    order: 6;
}

/* Intro: the lead of the biography, right under the header */
.page-lead {
    font-size: 18px;
    line-height: 1.65;
    color: var(--text-2);
}

.page-lead > :first-child {
    margin-top: 0;
}

.page-lead > :last-child {
    margin-bottom: 0;
}

.page-lead p {
    margin: 0 0 14px;
}

/* Header */
.page-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.page-head__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-head__kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--accent);
}

.page-head__track {
    white-space: nowrap;
}

.page-head__sub {
    margin: 4px 0 0;
    font-size: 16px;
    color: var(--muted);
}

/* Photos. Mobile: every photo is a slide in a swipeable row (scroll-snap), with a "2 / 7"
   counter; a tap opens the gallery. Desktop: the first photo and the thumbnails. */
.page-media {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-media__stage {
    position: relative;
}

.page-media__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: 18px;
}

.page-media__track::-webkit-scrollbar {
    display: none;
}

.page-media__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* One photo per swipe, however fast */
    scroll-snap-stop: always;
}

.page-media__main,
.page-media__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--surface-2);
    cursor: zoom-in;
}

.page-media__main {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
}

.page-media__main img,
.page-media__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crops keep the upper part: portraits lose feet, not faces */
    object-position: 50% 25%;
}

.page-media__thumbs {
    display: none; /* desktop only: mobile swipes through the photos instead */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-media__thumb {
    aspect-ratio: 1;
    min-height: var(--tap);
    border-radius: 12px;
}

.page-media__count,
.page-media__position {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(10, 12, 15, 0.75);
    border-radius: 999px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

/* "2 fotos" is for desktop, where the other photo is not in sight */
.page-media__count {
    display: none;
}

.page-media__position {
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Without JS nothing updates the counter */
.no-js .page-media__position {
    display: none;
}

.page-media__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 15, 0.7);
    color: var(--text);
    font-size: 17px;
    font-weight: 700;
}

/* Social and streaming links */
.page-links__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-links__icon {
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-2);
}

.page-links__icon:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* The row shows the first 5 links on mobile (10 on desktop); the rest are in the panel.
   Without JS the panel cannot open, so every link stays in the row. */
.js .page-links__item:nth-child(n + 6) {
    display: none;
}

.no-js .page-links__more,
.page-links__count-desktop {
    display: none;
}

.page-links__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

/* Optional visible label above the icons ("Disponible en", song page) */
.page-links__title,
.page-links__group-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}

.page-links__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* General data */
.page-facts {
    padding: 18px 18px 6px;
    background: var(--surface);
    border-radius: 18px;
}

.page-facts__title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}

.page-facts__list:focus {
    outline: none;
}

.page-facts__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}

.page-facts__row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
}

.page-facts__row dt {
    font-size: 14px;
    color: var(--faint);
    overflow-wrap: anywhere;
}

.page-facts__row dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Stored as rich text: keep paragraphs and lists compact inside a row */
.page-facts__row dd > :first-child {
    margin-top: 0;
}

.page-facts__row dd > :last-child {
    margin-bottom: 0;
}

.page-facts__row dd ul,
.page-facts__row dd ol {
    padding-left: 18px;
}

/* Mobile: long data sheets show 4 rows until "Ver todos los datos" (JS only) */
.js .page-facts.is-collapsed .page-facts__row:nth-child(n + 5) {
    display: none;
}

.no-js .page-facts__more {
    display: none;
}

.page-facts__more {
    margin: 6px 0 12px;
}

/* Discography */
.album-list__cols {
    display: none;
}

.album-list__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.album-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    border-top: 1px solid var(--line-soft);
    color: var(--text);
}

/* Rows and cards that link somewhere share one language: a published item has its title in
   blue; under the cursor (or a finger) the row lightens and gets a blue bar at its left. An
   item that is only saved (no link) stays as it is */
a.album-row {
    margin: 0 -12px;
    padding: 0 12px;
    border-radius: 10px;
}

a.album-row .album-row__title {
    color: var(--accent);
}

a.album-row:hover,
a.album-row:active {
    background: var(--hover);
    box-shadow: inset 3px 0 0 var(--accent);
    color: var(--text);
}

.album-row__cover {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}

.album-row__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.album-row__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.album-row__meta {
    font-size: 14px;
    color: var(--muted);
}

.album-row__year,
.album-row__songs {
    display: none;
}

.album-row__chevron {
    flex-shrink: 0;
    color: var(--disabled);
}

/* Discography: type filter and "Ver los N discos" (JS; without it every album shows) */
.album-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 12px;
}

.no-js .album-filter {
    display: none;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap);
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    color: var(--text-2);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.filter-chip:hover {
    border-color: var(--accent);
}

.filter-chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}

.filter-chip__count {
    font-size: 13px;
    opacity: 0.8;
}

/* Lists that show their first items (discography, "Ha colaborado con"): the rest are
   in the HTML, hidden until "Ver los N …" (bio.js). Without JS everything shows. */
.js .is-extra {
    display: none;
}

.no-js .list-more {
    display: none;
}

.list-more {
    margin-top: 12px;
}

/* Biography text */
.page-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.page-text__body {
    width: 100%;
    font-size: 18px;
    line-height: 1.65;
    color: var(--text-2);
    overflow-wrap: break-word;
}

.page-text__body:focus {
    outline: none;
}

.page-text__body > :first-child {
    margin-top: 0;
}

.page-text__body p {
    margin: 0 0 14px;
}

.page-text__body h3 {
    margin: 24px 0 10px;
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.25;
    color: var(--text);
    scroll-margin-top: 16px;
}

.page-text__body img,
.page-text__body iframe {
    max-width: 100%;
    height: auto;
}

/* Mobile: the full text is in the HTML (SEO) but clipped until "Leer biografía completa".
   Only with JS, since the button needs it. */
.js .page-text__body.is-clamped {
    max-height: 440px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent);
}

/* Not requested while nobody can see them: bio.js activates them once the text expands */
.js .page-text__body.is-clamped .ad-slot--article {
    display: none;
}

.no-js .page-text__more {
    display: none;
}

.page-text__more {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 24px;
    font-size: 16px;
}

/* Related artists */
.related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.related-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    background: var(--surface);
    border-radius: 16px;
    color: var(--text);
    text-align: center;
}

.related-card:hover,
.related-card:active {
    background: var(--hover);
    box-shadow: inset 3px 0 0 var(--accent);
    color: var(--text);
}

.related-card:not(.related-card--static) .related-card__name {
    color: var(--accent);
}

/* No biography published yet: listed, but not a link */
.related-card--static:hover,
.related-card--static:active {
    background: var(--surface);
    box-shadow: none;
}

.related-card--static .related-card__name {
    color: var(--text-2);
}

.related-card__name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.related-card__reason {
    font-size: 13px;
    color: var(--faint);
}

/* References */
.page-refs__title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--muted);
}

.page-refs__body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.page-refs__body ol,
.page-refs__body ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
}

.page-refs__body p {
    margin: 0 0 6px;
}

/* Square images (album covers): no portrait crop */
.page-media--square .page-media__main {
    aspect-ratio: 1;
}

.page-media--square .page-media__main img {
    object-position: 50% 50%;
}

/* No cover: the same disc placeholder as the discography list */
.page-media__main--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    cursor: default;
}

/* Data list in the main column (album technical details): values in the body color */
.page-facts--muted .page-facts__row dd {
    color: var(--text-2);
}

/* ===== Album page ===== */

/* Previous / next album of the artist: compact under the gallery, cards at the end */
.album-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.page-media-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.album-nav__link {
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
}

.album-nav__link:hover {
    border-color: var(--accent);
    color: var(--text);
}

.album-nav__link:hover .album-nav__title {
    color: var(--accent);
}

/* Next keeps the right column even when there is no previous album */
.album-nav__link--next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}

.album-nav__label {
    font-size: 12px;
    color: var(--faint);
}

.album-nav__title {
    max-width: 100%;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.album-nav--cards .album-nav__link {
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--radius);
}

.album-nav--cards .album-nav__label {
    font-size: 13px;
}

.album-nav--cards .album-nav__title {
    font-size: 16px;
    white-space: normal;
}

.album-nav__year {
    font-size: 14px;
    color: var(--muted);
}

/* Tracklist (partial/_tracks.twig) */
.tracks {
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
}

.tracks th {
    padding: 8px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: left;
}

.tracks td,
.tracks tbody th,
.tracks tfoot th {
    height: 52px;
    padding: 0;
    border-top: 1px solid var(--line-soft);
    vertical-align: middle;
}

.tracks .tracks__n {
    width: 40px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.tracks .tracks__t {
    width: 64px;
    padding-left: 8px;
    text-align: right;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.tracks .tracks__go {
    width: 28px;
    text-align: right;
    color: var(--disabled);
}

.tracks__go svg {
    vertical-align: middle;
}

.tracks__title {
    padding-right: 8px;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

/* A published song: the whole row is the link (the link's box covers the row) */
.tracks__row.is-linked {
    position: relative;
}

/* A published song (the row links): its title is blue */
.tracks__title a {
    color: var(--accent);
}

.tracks__title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.tracks__row.is-linked:hover td,
.tracks__row.is-linked:active td {
    background: var(--hover);
}

.tracks__row.is-linked:hover td:first-child,
.tracks__row.is-linked:active td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

/* The focus ring goes around the whole row, like the click area */
.tracks__title a:focus-visible {
    outline: none;
}

.tracks__title a:focus-visible::after {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
    border-radius: 6px;
}

.tracks tfoot th,
.tracks tfoot td {
    height: 56px;
    border-top: 2px solid var(--border);
    font-size: inherit;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
}

.tracks tfoot .tracks__t {
    color: var(--accent);
}

/* ===== Song page (song/single.twig) ===== */

/* Mobile order: the title, then the lyrics right away; videos, links and general data
   after them (on desktop those are the side column), then about, previous / next, ad,
   references */
.song-page .song-lyrics {
    order: 2;
}

.song-page .song-media {
    order: 3;
}

.song-page .page-links {
    order: 4;
}

.song-page .page-facts {
    order: 5;
}

.song-page .page-text {
    order: 6;
}

.song-page .song-nav {
    order: 7;
}

.song-page .song-page__ad {
    order: 8;
}

/* "2 videos ↓": a text link, mobile only; the videos come after the lyrics */
.song-jump {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    min-height: var(--tap);
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}

.song-jump:hover {
    color: var(--text);
}

/* The toolbar sits closer to the title: the lyrics section starts 12px into the gap */
.song-page .song-lyrics {
    margin-top: -12px;
}

/* Musical data, one discreet line between the toolbar and the lyrics, like the heading of
   a chord sheet: "Tono original Sol · Capo 2 · Compás 4/4 · 72 BPM · Duración 4:21" */
.song-note {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--faint);
}

.song-note__item {
    display: inline-flex;
    gap: 5px;
}

/* The separator ends an item (never starts a wrapped line) */
.song-note__item:not(:last-child)::after {
    content: '\00B7';
    margin: 0 8px 0 3px;
}

.song-note dd {
    margin: 0;
    font-weight: 700;
    color: var(--muted);
}

/* Lyrics toolbar: sticks to the top while the lyrics scroll. Needs JS (song.js) */
.song-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 10px var(--gutter);
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.no-js .song-toolbar {
    display: none;
}

.song-toolbar__group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Without chords only the size group is left: keep it at the right */
.song-toolbar__group:only-child {
    margin-left: auto;
}

.song-toolbar__label {
    display: none;
    margin-right: 4px;
    font-size: 14px;
    color: var(--faint);
}

.song-toolbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    height: var(--tap);
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.song-toolbar__button:hover {
    border-color: var(--accent);
}

.song-toolbar__button[aria-disabled="true"] {
    border-color: var(--line);
    color: var(--disabled);
    cursor: default;
}

.song-toolbar__button--large {
    font-size: 18px;
}

/* The current key; transposed, a button back to the original key */
.song-toolbar__key {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 60px;
    height: var(--tap);
    padding: 0 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: inherit;
    font: inherit;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
}

.song-toolbar__key[aria-disabled="true"] {
    cursor: default;
}

/* Transposed: the box turns yellow, so it is clear the chords are not in the original key. The
   number and the caption say it too, so the colour is never the only sign */
.song-toolbar__key:not([aria-disabled="true"]) {
    position: relative;
    border-color: var(--changed);
    background: var(--changed-soft);
}

.song-toolbar__key:not([aria-disabled="true"]):hover {
    border-color: var(--accent);
}

.song-toolbar__key small {
    font-size: 11px;
    color: var(--faint);
}

.song-toolbar__key b {
    font-size: 17px;
    color: var(--accent);
}

.song-toolbar__key:not([aria-disabled="true"]) b,
.song-toolbar__key:not([aria-disabled="true"]) small {
    color: var(--changed);
}

.song-toolbar__reset {
    display: none;
    height: var(--tap);
    padding: 0 6px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.song-toolbar__reset:hover {
    color: var(--accent-hover);
}

/* The tools button and its panel exist on phones only (below) */
.song-tools-button,
.song-tools {
    display: none;
}

/* Phones: print and share are bare blue icons; on desktop the "Compartir" button keeps its text
   and its box. The lyrics toolbar becomes a panel under a "tools" button (song.js moves it into
   .song-tools; until then it stays hidden, so it never flashes at the top of the lyrics) */
@media screen and (max-width: 899.98px) {
    .song-lyrics > .song-toolbar {
        display: none;
    }

    /* Where the toolbar strip used to start the lyrics: a full-width hairline between the header
       and the musical data, and the same room on both sides of it */
    .song-page .song-lyrics {
        margin-right: calc(var(--gutter) * -1);
        margin-left: calc(var(--gutter) * -1);
        padding: 16px var(--gutter) 0;
        border-top: 1px solid var(--line);
    }

    .song-page .song-lyrics .song-note {
        margin-top: 0;
    }

    .js .song-tools-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: var(--tap);
        min-height: var(--tap);
        padding: 0 10px;
        background: transparent;
        border: 0;
        border-radius: 22px;
        color: var(--accent);
        font: inherit;
        font-size: 15px;
        cursor: pointer;
    }

    .js .song-tools-button:hover {
        color: var(--accent-hover);
    }

    .song-tools-button.is-open {
        background: var(--surface-2);
    }

    /* Not the original key: yellow, and the key shows */
    .song-tools-button.is-changed {
        background: var(--changed-soft);
        color: var(--changed);
    }

    .song-tools:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 30;
        display: block;
        width: max-content;
        max-width: calc(100vw - 2 * var(--gutter));
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    }

    /* The toolbar inside the panel: one compact row (it wraps on the narrowest phones), the
       controls of a group joined into one box */
    .song-tools .song-toolbar {
        position: static;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        margin: 0;
        padding: 10px;
        background: none;
        border: 0;
    }

    .song-tools .song-toolbar__group {
        gap: 0;
        margin: 0;
    }

    .song-tools .song-toolbar__key {
        border-color: var(--border);
        border-radius: 0;
    }

    .song-tools .song-toolbar__key:not([aria-disabled="true"]) {
        border-color: var(--changed);
    }

    .song-tools [data-transpose],
    .song-tools [data-size] {
        border-radius: 0;
    }

    .song-tools [data-transpose="1"],
    .song-tools [data-size="1"],
    .song-tools .song-toolbar__key {
        margin-left: -1px;
    }

    .song-tools [data-transpose="-1"],
    .song-tools [data-size="-1"] {
        border-radius: 12px 0 0 12px;
    }

    .song-tools [data-transpose="1"],
    .song-tools [data-size="1"] {
        border-radius: 0 12px 12px 0;
    }

    .song-tools .song-toolbar__button--wide {
        margin-right: 8px;
    }

    .song-page .page-head__actions .pill-button {
        justify-content: center;
        min-width: var(--tap);
        padding: 0;
        border-color: transparent;
        color: var(--accent);
    }

    .song-page .page-head__actions .pill-button:hover,
    .song-page .page-head__actions .share__details[open] > .share__toggle {
        color: var(--accent-hover);
    }

    /* The label stays for screen readers */
    .song-page .share__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Print: in the lyrics toolbar on desktop, beside "Compartir" on phones (the toolbar is full
   there). With chords, a menu under the button picks the sheet. Needs JS (song.js) */
.song-print {
    position: relative;
    display: inline-flex;
}

.song-print--toolbar,
.no-js .song-print {
    display: none;
}

.page-head__actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Beside "Compartir", the menu hangs from the right edge of both buttons, inside the screen */
.song-print--head {
    position: static;
}

/* Icon only, as tall as "Compartir" */
.song-print__head-button {
    justify-content: center;
    width: 44px;
    padding: 0;
    color: var(--text);
}

.song-print__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.song-print__menu[hidden] {
    display: none;
}

.song-print__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.song-print__option:hover,
.song-print__option:focus-visible {
    background: var(--surface-2);
}

.song-print__option small {
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
}

/* Lyrics (ChordSheet). Each word is a row of segments, a chord over the text sung from
   it; lines wrap between words only. --lyric-step is the A− / A+ setting (song.js). */
.song-sheet {
    --lyric-size: 19px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-top: 20px;
    font-size: calc(var(--lyric-size) + var(--lyric-step, 0) * 2px);
}

.song-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.song-section__label {
    align-self: flex-start;
    margin: 0;
    padding: 4px 10px;
    background: var(--surface-2);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* The label sits close to its first line; the space before it (between sections) stays */
.song-section__label + * {
    margin-top: -6px;
}

/* Chorus ({soc} … {eoc}, {c: Coro}, {chorus}): a rule at its left instead of a box, so it
   takes no extra room. Bridge, intro, final… (other): an italic label. See ChordPro. */
.song-section--chorus {
    padding-left: 12px;
    border-left: 3px solid var(--accent-rule);
}

.song-section--other .song-section__label {
    font-style: italic;
}

.song-sheet .line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    line-height: 1.35;
}

.song-sheet .line--plain {
    display: block;
}

/* An annotation in the stanza ({ci: x2}) */
.song-sheet .line--note {
    display: block;
    font-size: 0.8em;
    font-style: italic;
    color: var(--faint);
}

.song-sheet .w {
    display: inline-flex;
    align-items: flex-end;
}

.song-sheet .seg {
    display: inline-flex;
    flex-direction: column;
}

.song-sheet .lyr {
    white-space: pre;
}

.song-sheet .ch {
    min-height: 1.2em;
    padding-right: 0.35em;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

/* The syllable the chord falls on */
.song-sheet .syl {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

/* Tutorial videos: after the lyrics on mobile, the side column on desktop */
.song-media {
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-margin-top: 16px;
}

.song-video {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.song-video__frame,
.song-video__player {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
}

.song-video__frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--surface-2);
}

.song-video__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.song-video__play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--accent);
    border-radius: 50%;
    color: var(--on-accent);
}

.song-video__frame:hover .song-video__play {
    background: var(--accent-hover);
}

.song-video__player {
    display: block;
    border: 0;
}

/* The video's only text: what it is ("Video oficial", "Tutorial · Guitarra") */
.song-video__label {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Previous / next song (album-nav cards): with a previous song, "Volver al disco" gets its own row */
.song-nav__back {
    grid-column: 1 / -1;
}

/* ===== 404 (error/404.twig) ===== */
.notfound-page {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-bottom: 48px;
}

.notfound__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 24px;
}

.notfound__text {
    max-width: 640px;
    margin: 4px 0 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-2);
}

.notfound__actions {
    margin: 0;
}

.notfound__block {
    max-width: 760px;
}

.notfound__block .section-title {
    margin-bottom: 8px;
}

.search-field__submit {
    flex-shrink: 0;
    min-height: var(--tap);
    padding: 0 16px;
    background: var(--accent);
    border: 0;
    border-radius: 10px;
    color: var(--on-accent);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.search-field__submit:hover {
    background: var(--accent-hover);
}

/* Photo gallery (native <dialog>) */
.lightbox {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(6, 7, 9, 0.95);
    color: var(--text);
}

.lightbox::backdrop {
    background: rgba(6, 7, 9, 0.8);
}

.lightbox__inner {
    height: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px var(--gutter) 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lightbox__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    color: var(--text-2);
}

.lightbox__close,
.lightbox__nav {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
}

.lightbox__close {
    background: var(--surface-2);
    border: 0;
    color: var(--text);
}

.lightbox__stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lightbox__track {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.lightbox__track::-webkit-scrollbar {
    display: none;
}

.lightbox__slide {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.lightbox__img {
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.lightbox__caption {
    margin: 0;
    text-align: center;
    font-size: 15px;
    color: var(--muted);
}

.lightbox__caption a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lightbox__caption a:hover {
    color: var(--text);
}

.lightbox__nav {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.lightbox__nav--next {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* Phones: arrows go under the photo so it can use the full width */
@media (max-width: 599px) {
    .lightbox__stage {
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
    }

    .lightbox__track {
        flex-basis: 100%;
        height: calc(100% - 64px);
        order: -1;
    }
}

/* ===== Footer ===== */
.site-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

/* Mobile: the links wrap in rows, the © line below them. Desktop: one row, © at the end */
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
    min-height: 60px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--text);
}

.site-footer__link[aria-current] {
    color: var(--accent);
}

.site-footer__copy {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}

/* ===== Text pages: about, contact, privacy, legal notice, copyright (legal/_page.twig) =====
 * One reading column (~720px) on the page background, no card. */
.legal-page {
    padding-top: 28px;
    padding-bottom: 56px;
}

.legal {
    max-width: 720px;
}

.legal__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legal__updated {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

.legal__lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-2);
}

.legal__lead p {
    margin: 0;
}

.legal-toc {
    margin-top: 28px;
    padding: 16px 20px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.legal-toc__title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.legal-toc__list {
    margin: 0;
    padding-left: 22px;
    font-size: 16px;
    color: var(--faint);
}

/* Each entry is a comfortable tap target without looking like a menu */
.legal-toc__list a {
    display: inline-block;
    padding: 6px 0;
}

.legal__body {
    font-size: 18px;
    line-height: 1.65;
    color: var(--text-2);
    overflow-wrap: break-word;
}

.legal__h2 {
    margin: 40px 0 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    scroll-margin-top: 16px;
}

.legal__body h3 {
    margin: 24px 0 8px;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.25;
    color: var(--text);
}

.legal__body p,
.legal__body ul,
.legal__body ol,
.legal__body dl {
    margin: 0 0 14px;
}

.legal__body ul,
.legal__body ol {
    padding-left: 24px;
}

.legal__body li + li {
    margin-top: 6px;
}

.legal__body strong {
    color: var(--text);
}

/* Links inside running text are underlined: color alone is not enough to spot them */
.legal__body a:not(.pill-button) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.legal__body code {
    padding: 1px 6px;
    background: var(--surface-2);
    border-radius: 6px;
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

/* "Quién es responsable": label / value rows */
.legal-facts > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.legal-facts dt {
    font-size: 15px;
    color: var(--muted);
}

.legal-facts dd {
    margin: 0;
    color: var(--text);
}

/* Cookie table. Mobile: one block per row, each cell with its column name */
.legal-table-wrap {
    margin: 0 0 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.5;
}

.legal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.legal-table tr {
    display: block;
    padding: 12px 16px;
}

.legal-table tr + tr {
    border-top: 1px solid var(--line);
}

.legal-table td {
    display: block;
    padding: 2px 0;
}

.legal-table td::before {
    content: attr(data-label) ': ';
    font-weight: 700;
    color: var(--text);
}

.legal-contact__address {
    font-size: 22px;
    font-weight: 700;
}

.legal-contact__subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 !important;
    list-style: none;
}

.legal-contact__subjects li + li {
    margin-top: 0;
}

/* ===== Desktop ===== */
@media (min-width: 900px) {
    :root {
        --gutter: 40px;
    }

    .site-header__inner {
        min-height: 72px;
    }

    .site-brand {
        gap: 10px;
        font-size: 19px;
    }

    .site-nav {
        gap: 28px;
    }

    .site-nav__link {
        font-size: 17px;
    }

    .page-title {
        font-size: 64px;
    }

    .bio-index__intro {
        gap: 20px;
        padding-top: 56px;
    }

    .bio-index__count {
        font-size: 18px;
    }

    .bio-index__title-row > .share {
        order: 0;
        flex-basis: auto;
    }


    .site-footer {
        font-size: 15px;
    }

    /* One row, the links separated by a dot */
    .site-footer__links {
        column-gap: 0;
    }

    .site-footer__links > li + li::before {
        content: '\00B7';
        padding: 0 12px;
        color: var(--faint);
    }

    .legal-page {
        padding-top: 48px;
        padding-bottom: 80px;
    }

    .legal__title {
        font-size: 52px;
    }

    .legal__h2 {
        font-size: 30px;
    }

    .legal-table thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .legal-table tr {
        display: table-row;
        padding: 0;
    }

    .legal-table th,
    .legal-table td {
        display: table-cell;
        padding: 10px 14px;
        text-align: left;
        vertical-align: top;
    }

    .legal-table th {
        background: var(--surface);
        font-size: 14px;
        color: var(--muted);
    }

    .legal-table tr + tr,
    .legal-table thead + tbody tr {
        border-top: 1px solid var(--line);
    }

    .legal-table td::before {
        content: none;
    }

    .search-field {
        height: 60px;
    }

    /* One row: letters share the width (about 36–44px each at 1200px) */
    .az-index {
        gap: 4px;
        overflow: visible;
    }

    .az-index__letter {
        flex: 1 1 0;
        min-width: 0;
        max-width: var(--tap);
    }

    .az-index__letter--all {
        flex: 0 0 auto;
        max-width: none;
        margin-right: 8px;
    }

    a.az-index__letter--all {
        position: static;
        box-shadow: none;
    }

    .bio-index__layout {
        display: flex;
        align-items: flex-start;
        gap: 80px;
        padding-top: 28px;
    }

    .bio-index__list {
        flex: 1;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 40px;
        row-gap: 28px;
    }

    /* The empty-results message spans the whole grid */
    .bio-index__empty {
        grid-column: 1 / -1;
        margin: 4px 0;
    }

    .letter-group__title {
        padding: 0 0 4px;
        font-size: 26px;
    }

    .artist-link {
        gap: 12px;
        min-height: 48px;
        border-bottom: 0;
        border-top: 1px solid var(--line-soft);
    }

    .avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* On desktop the ad lives in the sticky right rail, not between letters */
    .ad-slot--inline {
        display: none;
    }

    .ad-slot--rail {
        display: flex;
        flex-shrink: 0;
        width: 300px;
        margin: 0;
        position: sticky;
        top: 24px;
    }

    .ad-slot--rail .ad-slot__unit {
        width: 300px;
        min-height: 600px;
    }

    /* The card's two 1px borders around the 300px ad */
    .ad-slot--rail.ad-slot--live {
        width: 302px;
    }

    /* ===== Biography page ===== */
    .crumbs__list {
        padding-top: 24px;
        font-size: 15px;
    }

    .section-title {
        font-size: 32px;
    }

    .page-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
        padding-top: 16px;
    }

    .page-main {
        flex: 1;
        min-width: 0;
        max-width: 760px;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    /* Not sticky: it holds photos, data and the ad; only the ad sticks (below). It stretches
       to the row's height so the ad has room to travel. The album's is 400px wide: a
       square cover reads better larger. */
    .page-side {
        width: 340px;
        flex-shrink: 0;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .page-layout--wide-side .page-side {
        width: 400px;
    }

    .page-head__sub {
        font-size: 19px;
    }

    .page-media__main {
        border-radius: 20px;
    }

    /* The first photo and the thumbnails; the other slides (lazy) are never loaded */
    .page-media__track {
        overflow: visible;
    }

    .page-media__slide + .page-media__slide,
    .page-media__position {
        display: none;
    }

    .page-media__thumbs {
        display: grid;
    }

    .page-media__count {
        display: flex;
    }

    /* The rail ad sticks under the header while the biography scrolls */
    .page-side .ad-slot--rail {
        align-self: center;
    }

    .js .page-links__item:nth-child(n + 6) {
        display: block;
    }

    .js .page-links__item:nth-child(n + 11),
    .page-links__more--mobile-only,
    .page-links__count-mobile {
        display: none;
    }

    .page-links__count-desktop {
        display: inline;
    }

    .page-facts {
        padding: 20px 20px 8px;
    }

    /* Desktop: the side column fits the whole data sheet */
    .js .page-facts.is-collapsed .page-facts__row:nth-child(n + 5) {
        display: grid;
    }

    .page-facts__more {
        display: none;
    }

    .page-facts__row {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .page-lead {
        font-size: 19px;
        line-height: 1.7;
    }

    .album-list__cols,
    .album-row {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) 90px 90px 24px;
        align-items: center;
        gap: 16px;
    }

    .album-list--no-songs .album-list__cols,
    .album-list--no-songs .album-row {
        grid-template-columns: 56px minmax(0, 1fr) 90px 24px;
    }

    .album-list__cols {
        padding: 8px 0;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--faint);
    }

    .album-row {
        min-height: 72px;
    }

    .album-row__title {
        font-size: 18px;
    }

    .album-row__meta {
        display: none;
    }

    .album-row__year,
    .album-row__songs {
        display: block;
        font-size: 16px;
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }

    .ad-slot--content {
        margin: 0;
    }

    .ad-slot--content .ad-slot__unit {
        width: 728px;
        min-height: 90px;
    }

    /* A slot with a different desktop size shows that one */
    .ad-slot__size--mobile {
        display: none;
    }

    .ad-slot__size--desktop {
        display: inline;
    }

    .page-text__body {
        font-size: 19px;
        line-height: 1.7;
    }

    /* Desktop shows the whole text */
    .js .page-text__body.is-clamped {
        max-height: none;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .js .page-text__body.is-clamped .ad-slot--article {
        display: flex;
    }

    .page-text__more {
        display: none;
    }

    .related-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .related-card {
        padding: 20px 12px;
    }

    .avatar.avatar--lg {
        width: 80px;
        height: 80px;
        font-size: 22px;
    }

    /* ===== Album page ===== */

    /* A data list in the main column has room for two columns */
    .page-facts--wide .page-facts__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
    }

    .page-facts--wide .page-facts__row {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .album-nav__title {
        font-size: 16px;
    }

    .album-nav--cards {
        gap: 16px;
    }

    .album-nav--cards .album-nav__link {
        padding: 18px 20px;
    }

    .album-nav--cards .album-nav__title {
        font-size: 18px;
    }

    .tracks {
        font-size: 18px;
    }

    .tracks td,
    .tracks tbody th {
        height: 54px;
    }

    .tracks .tracks__n {
        width: 56px;
        padding-left: 12px;
    }

    .tracks .tracks__go {
        width: 40px;
        padding-right: 12px;
    }

    .tracks tbody tr:nth-child(even) td {
        background: var(--stripe);
    }

    .notfound__head {
        padding-top: 40px;
    }

    /* ===== Song page ===== */
    .song-jump,
    .song-page__ad {
        display: none;
    }

    .song-page .song-lyrics {
        margin-top: -20px;
    }

    /* Aligned with the lyrics (.song-sheet's side padding) */
    .song-note {
        padding: 0 8px;
        font-size: 15px;
    }

    .song-toolbar {
        margin: 0;
        padding: 12px 16px;
        border: 1px solid var(--line);
        border-radius: 16px;
    }

    .song-toolbar__label {
        display: inline;
    }

    .song-print--toolbar {
        display: inline-flex;
    }

    .song-print--head {
        display: none;
    }

    /* Mobile has no room: there the key itself goes back to the original */
    .song-toolbar__reset {
        display: inline;
    }

    .song-sheet {
        --lyric-size: 22px;
        gap: 30px;
        padding: 20px 8px 0;
    }

    .song-media {
        gap: 16px;
    }

    .song-media__title {
        font-size: 22px;
    }
}

/* The song's printed page: its margins, and the footer at the foot of every page (the song
   and its address; the text comes from single.twig, built from the song's data). Page
   margin boxes: Chrome and Edge; other browsers print without the footer */
@page song {
    margin: 12mm 12mm 16mm;

    /* The song on one line, its address under it (a long address fits the whole width) */
    @bottom-left {
        width: 100%;
        vertical-align: top;
        padding-top: 4pt;
        font: 8pt/1.4 'Atkinson Hyperlegible', system-ui, sans-serif;
        color: #555;
        white-space: pre-line;
    }
}

/* ===== Print (song page): title, musical data and lyrics, in black and white =====
 * The tokens turn black on white, so every rule above prints without its own colors. */
@media print {
    :root {
        --bg: #fff;
        --surface: #fff;
        --surface-2: #fff;
        --text: #000;
        --text-2: #000;
        --muted: #333;
        --faint: #333;
        --accent: #000;
        --border: #999;
        --line: #999;
    }

    body:has(.song-page) .site-header,
    body:has(.song-page) .site-footer,
    body:has(.song-page) .skip-link,
    .song-page .crumbs,
    .song-page .share,
    .song-page .song-jump,
    .song-page .page-links,
    .song-page .song-toolbar,
    .song-page .page-text,
    .song-page .song-nav,
    .song-page .page-refs,
    .song-page .page-side,
    .song-page .ad-slot {
        display: none !important;
    }

    .song-page {
        page: song;
    }

    /* On screen the body is at least one screen tall; on paper that is one page, and a
       browser that rounds it up prints a blank second page (Chrome on Android) */
    body:has(.song-page) {
        display: block;
        min-height: 0;
    }

    /* The musical data print with the lyrics (.song-note); the data sheet does not */
    .song-page .page-layout,
    .song-page .page-main {
        display: block;
        padding: 0;
    }

    .song-page .page-main > * + * {
        margin-top: 8pt;
    }

    /* Header: no "Canto · Pista x de x" (nor the share buttons, already hidden); the title
       and the artist on one row */
    .song-page .page-head__top {
        display: none;
    }

    .song-page .page-head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 10pt;
        row-gap: 2pt;
    }

    .song-page .page-title {
        font-size: 20pt;
    }

    .song-page .page-head__sub {
        margin: 0;
        font-size: 11pt;
    }

    .song-note {
        margin: 0;
        padding: 0 0 6pt;
        border-bottom: 1px solid var(--border);
        font-size: 10pt;
    }

    /* ----- The sheet with chords (data-print="chords", and Ctrl+P) -----
       A− / A+ (an inline --lyric-step) does not apply on paper. The chords, and the line
       under their syllable, keep one color: a dark red that stands out without tiring the
       eye (contrast 6.5:1 on white) and prints dark grey in black and white */
    .song-sheet {
        --chord-ink: #c00000;
        counter-reset: verse;
        gap: 12pt;
        padding: 10pt 0 0 1.8em;
        font-size: 13pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .song-section {
        gap: 5pt;
    }

    .song-section__label + * {
        margin-top: -2pt;
    }

    .song-sheet .line {
        line-height: 1.15;
    }

    .song-sheet .ch {
        min-height: 0;
        font-size: 0.8em;
        line-height: 1.1;
        color: var(--chord-ink);
    }

    .song-sheet .syl {
        text-decoration-color: var(--chord-ink);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.15em;
    }

    /* A line of chords only (an intro) has no text row under them */
    .song-sheet .line--chords .lyr {
        display: none;
    }

    /* The labels are plain bold text on paper */
    .song-section__label {
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .song-section--chorus {
        padding-left: 1.2em;
        border-left: 1.5pt solid var(--border);
    }

    /* Each verse stanza is numbered (1., 2.…) in a margin at the left of the lyrics, on the
       row of the words of its first sung line (under the chords, if any); the text keeps its
       place. A label that only says "Verso 1" is left out: the number says it in less room */
    .song-section__label--verse {
        display: none;
    }

    .song-section--verse .line--first {
        counter-increment: verse;
    }

    .song-section--verse .line--first.line--plain,
    .song-section--verse .line--first > .w:first-child > .seg:first-child > .lyr {
        position: relative;
    }

    .song-section--verse .line--first.line--plain::before,
    .song-section--verse .line--first > .w:first-child > .seg:first-child > .lyr::before {
        content: counter(verse) ".";
        position: absolute;
        top: 0;
        right: 100%;
        padding-right: 0.5em;
        font-style: normal;
        font-weight: 700;
    }

    /* A stanza is never split between two pages */
    .song-section {
        break-inside: avoid;
    }

    /* ----- The sheet to hand out (data-print="lyrics", and songs without chords) -----
       Lyrics only, larger (for every age), the chorus in bold as in hymn books; no musical
       data, and no line that only had chords */
    .song-page[data-print="lyrics"] .song-note,
    .song-page[data-print="lyrics"] .song-sheet .ch,
    .song-page[data-print="lyrics"] .song-sheet .line--chords {
        display: none;
    }

    .song-page[data-print="lyrics"] .song-sheet {
        display: block;
        font-size: 16pt;
    }

    .song-page[data-print="lyrics"] .song-section {
        gap: 2pt;
    }

    .song-page[data-print="lyrics"] .song-section + .song-section {
        margin-top: 12pt;
    }

    /* A line too long for the width goes on indented, as in hymn books, so it does not read
       as a new line */
    .song-page[data-print="lyrics"] .song-sheet .line {
        display: block;
        padding-left: 1em;
        text-indent: -1em;
        line-height: 1.3;
    }

    .song-page[data-print="lyrics"] .song-sheet .w,
    .song-page[data-print="lyrics"] .song-sheet .seg {
        display: inline;
    }

    .song-page[data-print="lyrics"] .song-sheet .lyr {
        white-space: normal;
    }

    .song-page[data-print="lyrics"] .song-sheet .syl {
        text-decoration: none;
    }

    .song-page[data-print="lyrics"] .song-section--chorus {
        font-weight: 700;
    }

    /* ----- When the sheet would not fit on a page (PrintLayout) -----
       Compact: slightly smaller type, in one column. Columns: the same type in two columns on
       one page, when even that does not fit. Pages: two columns over several pages */
    .song-page[data-print="chords"] :is(.song-sheet--compact-chords, .song-sheet--columns-chords, .song-sheet--pages-chords) {
        font-size: 12pt;
    }

    .song-page[data-print="chords"] :is(.song-sheet--compact-chords, .song-sheet--columns-chords, .song-sheet--pages-chords) .ch {
        font-size: 0.75em;
    }

    .song-page[data-print="lyrics"] :is(.song-sheet--compact-lyrics, .song-sheet--columns-lyrics, .song-sheet--pages-lyrics) {
        font-size: 14pt;
    }

    /* Two columns. A stanza never splits; the gap holds the numbers of the right column's
       verses. The Chrome quirks decide the rest: in columns with an open height it adds a
       blank page after the lyrics, unless the columns balance, and flex sections do the same */
    .song-page[data-print="chords"] :is(.song-sheet--columns-chords, .song-sheet--pages-chords),
    .song-page[data-print="lyrics"] :is(.song-sheet--columns-lyrics, .song-sheet--pages-lyrics) {
        display: block;
        columns: 2;
        column-gap: 1.8em;
    }

    /* On one page: the first column fills down to the foot of the page, then the second
       (column-fill: auto), so the song reads down the left first. That needs a height: one
       page at most (100vh is the printed page, less room for the header). PrintLayout keeps
       a wide margin, since an overflow would be cut */
    .song-page[data-print="chords"] .song-sheet--columns-chords,
    .song-page[data-print="lyrics"] .song-sheet--columns-lyrics {
        column-fill: auto;
    }

    .song-page[data-print="chords"] .song-sheet--columns-chords {
        max-height: calc(100vh - 140px);
    }

    .song-page[data-print="lyrics"] .song-sheet--columns-lyrics {
        max-height: calc(100vh - 100px);
    }

    /* Over several pages: an open height, so nothing is ever cut; every page is full but
       the last (column-fill: balance, which also avoids the blank page) */
    .song-page[data-print="chords"] .song-sheet--pages-chords,
    .song-page[data-print="lyrics"] .song-sheet--pages-lyrics {
        column-fill: balance;
    }

    .song-page[data-print="chords"] :is(.song-sheet--columns-chords, .song-sheet--pages-chords) {
        padding-left: 1.5em;
    }

    /* Block sections, spaced with margins between them: a margin after the last one, at the
       foot of a full page, also opens a blank page */
    .song-page[data-print="chords"] :is(.song-sheet--columns-chords, .song-sheet--pages-chords) .song-section,
    .song-page[data-print="lyrics"] :is(.song-sheet--columns-lyrics, .song-sheet--pages-lyrics) .song-section {
        display: block;
        margin-bottom: 0;
    }

    .song-page[data-print="chords"] :is(.song-sheet--columns-chords, .song-sheet--pages-chords) .song-section + .song-section,
    .song-page[data-print="lyrics"] :is(.song-sheet--columns-lyrics, .song-sheet--pages-lyrics) .song-section + .song-section {
        margin-top: 12pt;
    }

    .song-page[data-print="chords"] :is(.song-sheet--columns-chords, .song-sheet--pages-chords) .song-section > * + * {
        margin-top: 5pt;
    }

    .song-page[data-print="chords"] :is(.song-sheet--columns-chords, .song-sheet--pages-chords) .song-section__label + * {
        margin-top: 3pt;
    }

    .song-page[data-print="lyrics"] :is(.song-sheet--columns-lyrics, .song-sheet--pages-lyrics) .song-section > * + * {
        margin-top: 2pt;
    }

    .song-page[data-print="chords"] :is(.song-sheet--columns-chords, .song-sheet--pages-chords) .song-section--chorus {
        padding-left: 0.6em;
    }

    /* Chords after the last word hang past the end of the line (into the gap) instead of
       dropping to a row of their own */
    .song-page[data-print="chords"] :is(.song-sheet--columns-chords, .song-sheet--pages-chords) .w--tail {
        width: 0;
        min-width: 0;
    }
}