/* ═══════════════════════════════════════════════════════════════════
   LetrasTango — Design System
   Fonts: Bodoni Moda · Newsreader · Manrope
   Themes: dark (default) · light (data-theme="light")

   Breakpoint scale (single source of truth — see design-system/tokens.css):
     --bp-lg   1120px   desktop → tablet ancha (nav collapse, container, detail grids)
     --bp-md    900px   tablet (2→1 column grids); companion min-width: 901
     --bp-sm    720px   phone landscape / small tablet (most used)
     --bp-xs    560px   phone portrait
     --bp-xxs   420px   small phone (title fine-tune)
   @media can't use var(); each query is snapped to a scale value and tagged
   with its token in a trailing CSS comment reading "--bp-md" etc. Non-width
   queries (prefers-reduced-motion, hover) are exempt.
═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   Contents — one definition per component, sections in source order.
   ───────────────────────────────────────────────────────────────────
    1. Custom Properties            13. Page Hero (non-home)
    2. Reset                        14. Section Headers
    3. Typography Base              15. Cards
    4. Site Shell / Backdrop        16. Category editorial
    5. Container                    17. Alphabet Nav
    6. Header                       18. Pagination
    7. Navigation                   19. Breadcrumbs (+19b. Listing)
    8. Main                         20. Lyric Detail
    9. Global Buttons               21. Artist Detail
   10. Inputs                       22. Videos
   11. Search Autocomplete          23. Contact
   12. Hero / Home                  24. Footer

   25. Spotify                      31. Responsive
   26. Pill link (+26b. Milonga)    32. Home — poster + editorial
   27. Admin links                  33. Letras / Obras — display hero
   28. WhatsApp share               34. Milongas — cards + index (+34b)
   29. Utilities                    35. Fotos — photo wall
   30. Light theme overrides
═══════════════════════════════════════════════════════════════════ */

/* ── 0. Fonts (self-hosted) ─────────────────────────────────────────
   The three families are ours, not Google's. Until 2026-08-06 they came from
   `fonts.googleapis.com`, and the mobile CWV baseline measured what that cost:
   a 2.2 KB stylesheet that blocked rendering LONGER than this 59 KB file
   (796-834 ms vs 597 ms), because it headed a three-deep critical chain across
   two extra origins. Now: one origin, and the middle hop is this stylesheet,
   which the page was already waiting for.

   These files are BUILT, never hand-edited — `scripts/build_web_fonts.py`
   writes them plus `manifest.json`, and `test_self_hosted_fonts.py` compares.

   The `font-weight` ranges below are load-bearing: the woff2 ship upstream's
   FULL axis (Newsreader wght 200-800, Bodoni Moda 400-900) exactly as Google
   serves them, because instancing the axis to the used range was measured to
   change the glyphs — same advance widths, visibly heavier Bodoni at 800.
   So these descriptors are the only thing clamping the axes. Widening one
   without rebuilding starts rendering weights the design never had.

   `latin-ext` exists so a Central-European name still renders in the right
   face; Spanish lives entirely in `latin`, so a normal page never fetches it.
   ────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: "Bodoni Moda";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/bodoni-moda-normal-latin.25272cdb960b.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: "Bodoni Moda";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/bodoni-moda-normal-latin-ext.5068813314b7.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: "Bodoni Moda";
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/bodoni-moda-italic-latin.97cdff6fc310.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: "Bodoni Moda";
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/bodoni-moda-italic-latin-ext.922f6260a8c4.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: "Manrope";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/manrope-normal-latin.35615c2050ad.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: "Manrope";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/manrope-normal-latin-ext.8fae2d3875fe.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: "Newsreader";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/newsreader-normal-latin.944bcf1c147c.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: "Newsreader";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/newsreader-normal-latin-ext.242b0c98b649.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: "Newsreader";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/newsreader-italic-latin.22c3160dce1b.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: "Newsreader";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/newsreader-italic-latin-ext.65ae5d166327.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;
}

/* ── 0b. Metric-adjusted fallbacks ──────────────────────────────────
   GENERATED — `.venv/bin/python scripts/build_web_fonts.py --print-css`
   writes this block and records every number in fonts/manifest.json.
   `test_self_hosted_fonts.py` compares the two, so these cannot become
   hand-edited magic numbers. Do not tweak a value here; change the recipe.

   Why: measured against production 2026-08-18, `article.lyric-sheet` shifted
   0.16-0.39 on the top-traffic letras — CLS 4x the threshold — because the five
   woff2 are discovered only when this stylesheet finishes parsing and land a
   few milliseconds AFTER first paint. `font-display: swap` then re-lays the
   page out. Each rule below is the same fallback the CSS stack would have used
   anyway, with its metrics scaled onto the webfont's, so the swap changes glyph
   shapes and nothing else. Zero bytes, zero FCP — unlike a preload, which was
   measured at +255 ms and rejected (docs/self-hosted-fonts.md).

   `src: local()` only: a platform that does not have the face skips the rule
   and falls through to the next family in the stack, so nothing is ever
   downloaded. Roboto and Noto Serif come FIRST because Android aliases the
   Microsoft core names — `local("Times New Roman")` there resolves to Noto
   Serif, which is 20% wider than the real Times New Roman on Spanish text, so
   the Arial/Times rules would otherwise capture Android with the wrong numbers.
   ────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: "Bodoni Moda Fallback Noto Serif";
    font-style: normal;
    font-weight: 400 800;
    src: local("Noto Serif");
    size-adjust: 98.262%;
    ascent-override: 114.490%;
    descent-override: 40.707%;
    line-gap-override: 0.000%;
}

@font-face {
    font-family: "Bodoni Moda Fallback Times New Roman";
    font-style: normal;
    font-weight: 400 800;
    src: local("Times New Roman");
    size-adjust: 117.640%;
    ascent-override: 95.630%;
    descent-override: 34.002%;
    line-gap-override: 0.000%;
}

@font-face {
    font-family: "Bodoni Moda Fallback Noto Serif";
    font-style: italic;
    font-weight: 400 800;
    src: local("Noto Serif");
    size-adjust: 93.728%;
    ascent-override: 120.028%;
    descent-override: 42.677%;
    line-gap-override: 0.000%;
}

@font-face {
    font-family: "Bodoni Moda Fallback Times New Roman";
    font-style: italic;
    font-weight: 400 800;
    src: local("Times New Roman");
    size-adjust: 109.275%;
    ascent-override: 102.952%;
    descent-override: 36.605%;
    line-gap-override: 0.000%;
}

@font-face {
    font-family: "Manrope Fallback Roboto";
    font-style: normal;
    font-weight: 400 700;
    src: local("Roboto");
    size-adjust: 102.479%;
    ascent-override: 104.021%;
    descent-override: 29.274%;
    line-gap-override: 0.000%;
}

@font-face {
    font-family: "Manrope Fallback Arial";
    font-style: normal;
    font-weight: 400 700;
    src: local("Arial");
    size-adjust: 102.335%;
    ascent-override: 104.168%;
    descent-override: 29.315%;
    line-gap-override: 0.000%;
}

@font-face {
    font-family: "Newsreader Fallback Noto Serif";
    font-style: normal;
    font-weight: 400 700;
    src: local("Noto Serif");
    size-adjust: 83.775%;
    ascent-override: 87.735%;
    descent-override: 31.632%;
    line-gap-override: 0.000%;
}

@font-face {
    font-family: "Newsreader Fallback Georgia";
    font-style: normal;
    font-weight: 400 700;
    src: local("Georgia");
    size-adjust: 91.256%;
    ascent-override: 80.543%;
    descent-override: 29.039%;
    line-gap-override: 0.000%;
}

@font-face {
    font-family: "Newsreader Fallback Noto Serif";
    font-style: italic;
    font-weight: 400 700;
    src: local("Noto Serif");
    size-adjust: 83.685%;
    ascent-override: 87.829%;
    descent-override: 31.666%;
    line-gap-override: 0.000%;
}

@font-face {
    font-family: "Newsreader Fallback Georgia";
    font-style: italic;
    font-weight: 400 700;
    src: local("Georgia");
    size-adjust: 86.837%;
    ascent-override: 84.641%;
    descent-override: 30.517%;
    line-gap-override: 0.000%;
}

/* ── 1. Custom Properties ───────────────────────────────────────── */

:root,
html[data-theme="dark"] {
    /* The advance width of "0" in each family, i.e. what `ch` resolves to, frozen
       as an em constant. GENERATED — the numbers are `webfont_zero_width` in
       fonts/manifest.json and `test_self_hosted_fonts.py` compares them.

       Why they exist: `ch` is defined against whichever font is *currently*
       rendering, so `max-width: 10ch` on a heading is 24% narrower under Times
       New Roman than under Bodoni Moda. When the webfont swaps in, the box
       widens, the title loses a line, and everything below it jumps — measured
       2026-08-18 as a 44 px jump that moved `article.lyric-sheet` and scored
       0.18-0.33 of CLS on its own. A metric-adjusted fallback cannot fix this:
       one `size-adjust` cannot match both the average advance (what wrapping
       needs) and the "0" advance (what `ch` needs). Freezing the box in `em`
       makes it identical in both states, which is what these are for.

       Only the hero boxes above the fold were converted — those are the ones
       measured to move. Do not add `ch` back to a rule that sizes anything
       above the fold on a detail page. */
    --ch-display: 0.6435em;
    --ch-display-italic: 0.6305em;
    --ch-ui: 0.61em;
    --ch-reading: 0.553em;
    --ch-reading-italic: 0.5755em;
    --font-ui: "Manrope", "Manrope Fallback Roboto", "Manrope Fallback Arial", "Segoe UI", system-ui, sans-serif;
    --font-display: "Bodoni Moda", "Bodoni Moda Fallback Noto Serif", "Bodoni Moda Fallback Times New Roman", "Times New Roman", Georgia, serif;
    --font-reading: "Newsreader", "Newsreader Fallback Noto Serif", "Newsreader Fallback Georgia", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --measure-reading: 38rem;

    --reading-surface: rgba(24, 20, 24, 0.98);
    --reading-surface-soft: rgba(255, 246, 236, 0.035);
    --reading-border: rgba(255, 245, 230, 0.10);
    --reading-text: #f4eee8;
    --reading-soft-text: #d8ccc1;
    --reading-muted-text: #a6988f;
    --reading-link: #dfb18b;
    --reading-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);

    /* Backgrounds */
    --bg-main: #0d0b0d;
    --bg-shell: #131013;
    --bg-panel: rgba(22, 18, 22, 0.92);
    --bg-panel-strong: rgba(26, 21, 26, 0.96);
    --bg-soft: rgba(255, 248, 240, 0.045);

    /* Text */
    --text-main: #f3ede6;
    --text-soft: #d0c3b8;
    --text-muted: #9e9087;

    /* Lines */
    --line-soft: rgba(255, 245, 230, 0.10);
    --line-strong: rgba(255, 245, 230, 0.20);

    /* Accent — warm bronze */
    --accent: #c9a87a;
    --accent-strong: #e6cb9e;
    --accent-text: #e6cb9e;
    --accent-deep: #8a6840;

    /* Motion */
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Paper (for reading surfaces) */
    --paper: #f0e8de;
    --paper-text: #231c1a;
    --paper-shadow: rgba(8, 6, 8, 0.08);

    /* Shadows — restrained, only for floating elements */
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.38);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);

    /* Geometry */
    --max-width: 1360px;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
}

html[data-theme="light"] {
    --bg-main: #ede5da;
    --bg-shell: #f5ede4;
    --bg-panel: rgba(255, 251, 245, 0.90);
    --bg-panel-strong: rgba(255, 252, 247, 0.96);
    --bg-soft: rgba(58, 40, 32, 0.04);

    --text-main: #1e1716;
    --text-soft: #4a3c38;
    --text-muted: #705d55;

    --line-soft: rgba(68, 48, 40, 0.11);
    --line-strong: rgba(68, 48, 40, 0.20);

    --accent: #8f6c43;
    --accent-strong: #a98a5c;
    --accent-text: #765532;
    --accent-deep: #5c4326;

    --paper: #fefaf5;
    --paper-text: #1e1716;
    --paper-shadow: rgba(28, 20, 18, 0.07);

    --shadow-lg: 0 20px 60px rgba(50, 32, 24, 0.10);
    --shadow-md: 0 8px 24px rgba(50, 32, 24, 0.08);
    --shadow-sm: 0 2px 8px rgba(50, 32, 24, 0.06);

    --reading-surface: #fdfaf4;
    --reading-surface-soft: rgba(122, 82, 59, 0.04);
    --reading-border: rgba(68, 48, 40, 0.10);
    --reading-text: #201816;
    --reading-soft-text: #4b3c38;
    --reading-muted-text: #8b7469;
    --reading-link: #8a5338;
    --reading-shadow: 0 22px 60px rgba(50, 32, 24, 0.08);
}

/* Layout tokens are theme-independent, so they live in a plain :root instead of
   the blocks above. Those are selected as `html[data-theme="…"]`, which outranks
   a bare `:root` — a responsive override declared on `:root` would silently lose
   to them in whichever theme is active. */
:root {
    /* Breathing room where reading text (lyric verse / bio prose) hands off to
       the editorial disclosure stack. One value for every detail page so the
       boundary reads the same on letras, obras, discos and artistas. */
    --editorial-boundary-gap: 2.4rem;
    --artist-bio-stack-gap: 0.85rem;
}

/* ── 2. Reset ───────────────────────────────────────────────────── */

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

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

html {
    font-size: 21px;
}

p { margin: 0; }

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

/* ── 3. Typography Base ─────────────────────────────────────────── */

body {
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
    background:
        radial-gradient(ellipse 1320px 620px at -8% -12%, rgba(181, 136, 98, 0.16), transparent 70%),
        radial-gradient(ellipse 980px 640px at 105% 4%, rgba(122, 66, 50, 0.14), transparent 66%),
        linear-gradient(125deg, rgba(181, 136, 98, 0.05) 0%, transparent 28%),
        linear-gradient(180deg, #171216 0%, var(--bg-main) 26%, #0a080a 100%);
    transition: background-color 220ms ease, color 220ms ease;
}

::selection {
    background: rgba(181, 136, 98, 0.28);
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.0;
    letter-spacing: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

/* ── 4. Site Shell / Backdrop ───────────────────────────────────── */

.site-shell {
    position: relative;
    overflow: clip;
    isolation: isolate;
}

.site-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

/* Minimal backdrop: subtle staff lines only, no orbs */
.backdrop-orb {
    display: none;
}

.backdrop-staff {
    position: absolute;
    top: 8rem;
    right: -12%;
    width: min(72rem, 100vw);
    height: 14rem;
    border-top: 1px solid rgba(255, 245, 230, 0.045);
    border-bottom: 1px solid rgba(255, 245, 230, 0.025);
    transform: rotate(-6deg);
    pointer-events: none;
}

.backdrop-staff::before,
.backdrop-staff::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    border-top: 1px solid rgba(255, 245, 230, 0.03);
}

.backdrop-staff::before { top: 33%; }
.backdrop-staff::after  { top: 66%; }

.staff-secondary {
    top: 50rem;
    left: -12%;
    right: auto;
    width: min(64rem, 90vw);
    opacity: 0.5;
    transform: rotate(5deg);
}

/* ── 5. Container ───────────────────────────────────────────────── */

.site-container {
    width: min(var(--max-width), calc(100% - 2.5rem));
    margin: 0 auto;
}

/* ── 6. Header ──────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1); /* merged from Era-1 .site-header */
    background: linear-gradient(180deg, rgba(13, 11, 13, .84), rgba(13, 11, 13, .6));
    border-bottom: 1px solid var(--line-soft);
    padding: 0;
}
.site-header > .site-header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 10px 32px;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
    flex-direction: row;
}

.site-header a.brand,
.site-header .brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    background: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: opacity .2s;
    flex-shrink: 0;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    line-height: 1;
}
.site-header .brand:hover { opacity: .85; }
html .site-header .brand-mark,
html[data-theme="light"] .site-header .brand-mark,
html[data-theme="dark"] .site-header .brand-mark {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--text-main);
    background: none;
    -webkit-text-fill-color: currentColor;
    width: auto;
    height: auto;
    min-width: 0;
    display: inline-block;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 1;
}
.site-header .brand-mark b { font-style: normal; font-weight: 700; }
.site-header .brand-mark svg { display: none; }
.site-header .nav {
    display: flex;
    gap: 30px;
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-soft);
    font-weight: 500;
    flex-direction: row;
    align-items: center;
    background: none;
    padding: 0;
    margin: 0;
    border: 0;
    list-style: none;
}
.site-header .nav a {
    position: relative;
    padding: 6px 2px;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: none;
    transition: color .25s ease;
    display: inline-block;
    min-height: 0;
    min-width: 0;
    border-bottom: 0;
}
.site-header .nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;
    height: 1px;
    width: 0;
    background: var(--accent);
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.site-header .nav a:hover,
.site-header .nav a:focus-visible {
    color: var(--text-main);
    outline: none;
}
.site-header .nav a:hover::after,
.site-header .nav a:focus-visible::after { width: 100%; }
.site-header .nav a.active { color: var(--accent-text); }
.site-header .nav a.active::after { width: 100%; background: var(--accent-strong); }

.site-header .header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-right: 24px;
}
.site-header .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 14px;
    min-height: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.site-header .btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.site-header .btn-ghost-icon { flex: 0 0 auto; }

.site-header .theme-toggle {
    font-size: 12px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 6px 8px;
    width: auto;
    height: auto;
    border-radius: 0;
    min-height: 2.4rem; /* merged from Era-1 .theme-toggle */
    margin-left: 0.5rem; /* merged from Era-1 .theme-toggle */
}

.site-header .theme-toggle:hover {
    color: var(--text-main);
    border-color: var(--line-strong); /* merged from Era-1 .theme-toggle:hover */
    filter: none; /* merged from Era-1 .theme-toggle:hover */
    transform: none; /* merged from Era-1 .theme-toggle:hover */
    box-shadow: none; /* merged from Era-1 .theme-toggle:hover */
}
.site-header .theme-toggle .theme-toggle-glyph {
    font-size: 14px;
    line-height: 1;
}

.site-header .icon-btn,
.site-header a.icon-btn,
.site-header button.icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text-soft);
    cursor: pointer;
    transition: color .25s ease;
    border-radius: 0;
    position: relative;
    padding: 0;
    text-decoration: none;
    box-shadow: none;
    font-size: 0;
    letter-spacing: 0;
    line-height: 1;
}
.site-header .icon-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 22px;
    height: 1px;
    background: var(--accent);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.site-header .icon-btn:hover,
.site-header .icon-btn:focus-visible { color: var(--text-main); outline: none; }
.site-header .icon-btn:hover::after,
.site-header .icon-btn:focus-visible::after { transform: translateX(-50%) scaleX(1); }
.site-header .icon-btn svg { width: 16px; height: 16px; }
.site-header .icon-btn--fav svg { width: 18px; height: 18px; }

/* Mobile nav toggle */
.site-header .nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    min-height: 2.6rem; /* merged from Era-1 .nav-toggle */
    border-radius: var(--radius-sm); /* merged from Era-1 .nav-toggle */
    font-weight: 700; /* merged from Era-1 .nav-toggle */
}
.site-header .nav-toggle:hover,
.site-header .nav-toggle:focus-visible {
    border-color: var(--line-strong); /* merged from Era-1 .nav-toggle:hover */
    box-shadow: none; /* merged from Era-1 .nav-toggle:hover */
}
.site-header .nav-toggle-lines {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}
.site-header .nav-toggle-lines span {
    width: 18px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    display: block; /* merged from Era-1 .nav-toggle-lines span */
    transition: transform 180ms ease, opacity 180ms ease; /* merged from Era-1 */
}
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(2) {
    opacity: 0;
}
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

@media (max-width: 1120px) /* --bp-lg */ {
    .site-header.js-nav-ready .nav-toggle { display: inline-flex; }
    .site-header.js-nav-ready .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(13, 11, 13, .96);
        border-bottom: 1px solid var(--line-soft);
        padding: 12px 32px 18px;
        display: none;
    }
    html[data-theme="light"] .site-header.js-nav-ready .nav {
        background: rgba(245, 237, 228, .96);
    }
    .site-header.js-nav-ready .nav.is-open { display: flex; }
    .site-header.js-nav-ready .nav a {
        padding: 12px 0;
        border-bottom: 1px solid var(--line-soft);
    }
    .site-header.js-nav-ready .nav a:last-child { border-bottom: 0; }
}
@media (max-width: 720px) /* --bp-sm */ {
    .site-header > .site-header-inner {
        padding: 10px 16px;
        gap: 12px;
    }
    .site-header .header-actions {
        margin-right: 0;
        gap: 2px;
    }
    .site-header .icon-btn,
    .site-header a.icon-btn,
    .site-header button.icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    .site-header .theme-toggle {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 6px;
    }
    .site-header .btn-ghost {
        min-height: 44px;
        padding: 5px 10px;
        font-size: 11px;
        letter-spacing: .08em;
        gap: 6px;
    }
    .site-header .btn-ghost--account {
        font-size: 0;
        min-width: 44px;
        min-height: 44px;
        padding: 6px 8px;
        gap: 0;
        letter-spacing: 0;
    }
    .site-header .btn-ghost--account .btn-ghost-icon {
        width: 18px;
        height: 18px;
    }
}
@media (max-width: 560px) /* --bp-xs */ {
        .site-header > .site-header-inner {
        padding: 8px 12px;
        gap: 8px;
    }
    .site-header .nav-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 6px 8px;
        gap: 6px;
    }
    .site-header .nav-toggle > span:not(.nav-toggle-lines) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.eyebrow,
.listing-label {
    color: var(--accent-text);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-ui);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.12rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-soft);
    background: linear-gradient(160deg, rgba(38, 26, 28, 0.98), rgba(14, 10, 13, 0.99));
    flex-shrink: 0;
}

html[data-theme="light"] .brand-mark {
    background: linear-gradient(160deg, rgba(251, 243, 232, 0.98), rgba(235, 220, 200, 0.98));
}

/* ── 7. Navigation ──────────────────────────────────────────────── */

/* Auth modal */
.auth-modal {
    width: min(42rem, calc(100vw - 1.5rem));
    max-width: none;
    max-height: min(94dvh, 46rem);
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 1rem;
    background: var(--bg-panel-strong);
    color: var(--text-main);
    box-shadow: var(--shadow-lg);
}

.auth-modal::backdrop {
    background: rgba(9, 7, 10, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.auth-modal__shell {
    position: relative;
    display: grid;
    gap: 0.95rem;
    padding: 1.2rem;
    overflow: auto;
}

.auth-modal__close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
}

.auth-modal__close:hover,
.auth-modal__close:focus-visible {
    color: var(--text-main);
    border-color: var(--line-strong);
}

.auth-modal__eyebrow {
    color: var(--accent-strong);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-modal__intro h2 {
    font-size: clamp(1.85rem, 4.5vw, 2.45rem);
    line-height: 0.95;
}

.auth-modal__lead {
    margin-top: 0.3rem;
    max-width: 32rem;
    color: var(--text-soft);
}

.auth-modal__tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.25rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
}

.auth-modal__tab {
    min-height: 2.5rem;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
}

.auth-modal__tab.is-active {
    background: var(--paper);
    color: var(--paper-text);
    box-shadow: 0 1px 4px var(--paper-shadow);
}

.auth-modal__feedback {
    padding: 0.75rem 0.95rem;
    border: 1px solid rgba(212, 160, 122, 0.2);
    border-radius: 0.75rem;
    background: rgba(181, 136, 98, 0.08);
    color: var(--text-main);
    white-space: pre-line;
}

.auth-modal__feedback.is-error {
    border-color: rgba(191, 90, 90, 0.28);
    background: rgba(140, 36, 36, 0.12);
}

.auth-panel {
    display: none;
}

.auth-panel.is-active {
    display: grid;
    gap: 0.85rem;
}

.auth-google-button,
.auth-submit-button,
.auth-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 2.85rem;
    padding: 0.78rem 1rem;
    border-radius: 0.9rem;
    font-weight: 700;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.auth-google-button {
    width: 100%;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.03);
}

.auth-submit-button {
    width: 100%;
    border: 1px solid transparent;
    background: var(--accent);
    color: #140f10;
}

.auth-submit-button:hover,
.auth-submit-button:focus-visible {
    background: var(--accent-strong);
}

.auth-submit-button--quiet {
    background: transparent;
    border-color: var(--line-soft);
    color: var(--text-main);
}

.auth-submit-button--quiet:hover,
.auth-submit-button--quiet:focus-visible,
.auth-google-button:hover,
.auth-google-button:focus-visible,
.auth-secondary-button:hover,
.auth-secondary-button:focus-visible {
    border-color: var(--line-strong);
}

.auth-secondary-button {
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--text-main);
}

.auth-modal__divider {
    position: relative;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.auth-modal__divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line-soft);
}

.auth-modal__divider span {
    position: relative;
    padding: 0 0.75rem;
    background: var(--bg-panel-strong);
}

.auth-form,
.auth-inline-form {
    display: grid;
    gap: 0.8rem;
}

.auth-field {
    display: grid;
    gap: 0.3rem;
}

.auth-field label {
    color: var(--text-soft);
    font-size: 0.86rem;
    font-weight: 700;
}

.auth-modal .auth-field input {
    min-height: 2.8rem;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line-soft);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
    font-size: 1rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.auth-modal .auth-field input::placeholder {
    color: var(--text-muted);
}

.auth-modal .auth-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(181, 136, 98, 0.12);
}

.auth-account-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem;
    border: 1px solid var(--line-soft);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.03);
}

.auth-account-card h3 {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.auth-account-card__label {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auth-account-card__status {
    font-weight: 700;
}

.auth-account-card__status.is-verified {
    color: var(--accent-strong);
}

.auth-account-card__status.is-unverified {
    color: var(--accent-strong);
}

@media (min-width: 720px) /* --bp-sm */ {
    .auth-form[data-auth-form="signup"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.85rem;
        row-gap: 0.8rem;
    }

    .auth-form[data-auth-form="signup"] .auth-field {
        min-width: 0;
    }

    .auth-form[data-auth-form="signup"] .auth-submit-button {
        grid-column: 1 / -1;
    }
}

/* ── 8. Main ────────────────────────────────────────────────────── */

.site-main {
    padding-bottom: 2.5rem;
}

.site-flash-section {
    position: relative;
    z-index: 1;
    padding-top: 1rem;
}

.site-flash-stack {
    display: grid;
    gap: 0.65rem;
}

.site-flash {
    padding: 0.9rem 1rem;
    border: 1px solid var(--line-soft);
    border-radius: 0.9rem;
    background: var(--bg-panel);
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}

.site-flash--success {
    border-color: rgba(117, 176, 102, 0.28);
    background: rgba(64, 102, 56, 0.16);
}

.site-flash--error {
    border-color: rgba(191, 90, 90, 0.28);
    background: rgba(140, 36, 36, 0.12);
}

.site-flash--warning {
    border-color: rgba(212, 160, 122, 0.32);
    background: rgba(181, 136, 98, 0.10);
}

/* ── 9. Global Buttons ──────────────────────────────────────────── */

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--accent);
    color: #1a120c;
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 160ms ease, transform 160ms ease;
}

button:hover,
button:focus-visible {
    background: var(--accent-strong);
    box-shadow: var(--shadow-sm);
}

/* ── 10. Inputs ─────────────────────────────────────────────────── */

input[type="search"],
input[type="text"] {
    width: 100%;
    min-height: 3.2rem;
    padding: 0 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: rgba(255, 248, 240, 0.04);
    color: var(--text-main);
    font-size: 1rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

input[type="search"]::placeholder,
input[type="text"]::placeholder {
    color: var(--text-muted);
}

input[type="search"]:focus,
input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(181, 136, 98, 0.12);
}

html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="text"] {
    background: rgba(255, 252, 248, 0.7);
    border-color: var(--line-strong);
}

/* ── 11. Search Autocomplete ────────────────────────────────────── */

.hero-search-form,
.inline-search-form {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.hero-search-form[data-search-autocomplete-open="true"],
.inline-search-form[data-search-autocomplete-open="true"] {
    z-index: 60;
}

.search-autocomplete-field {
    position: relative;
    min-width: 0;
}

.search-autocomplete-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 30;
    padding: 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--bg-panel-strong);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
}

.search-autocomplete-status {
    padding: 0.1rem 0.4rem 0.45rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.search-autocomplete-groups {
    display: grid;
    gap: 0.55rem;
    max-height: min(26rem, 70vh);
    overflow-y: auto;
}

.search-autocomplete-group {
    display: grid;
    gap: 0.3rem;
}

.search-autocomplete-group-title {
    margin: 0;
    padding: 0 0.4rem;
    color: var(--accent-text);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.search-autocomplete-options {
    display: grid;
    gap: 0.15rem;
}

.search-autocomplete-option {
    display: grid;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.search-autocomplete-option:hover,
.search-autocomplete-option:focus-visible,
.search-autocomplete-option.is-active {
    background: rgba(181, 136, 98, 0.10);
    color: var(--text-main);
    transform: none;
}

.search-autocomplete-option-label {
    font-size: 0.96rem;
    font-weight: 600;
}

.search-autocomplete-option-subtitle {
    color: var(--text-soft);
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.95rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ── 12. Hero / Home ────────────────────────────────────────────── */

.home-hero {
    padding: clamp(1rem, 2.2vw, 1.8rem) 0 2rem;
}

.page-hero,
.listing-card {
    position: relative;
    overflow: hidden;
}

.page-hero::before,
.listing-card::before {
    display: none;
}

.eyebrow {
    margin-bottom: 0.15rem;
}

.home-hero h1 {
    max-width: 8ch;
    font-size: clamp(4.2rem, 9vw, 8.2rem);
    line-height: 0.88;
    text-wrap: balance;
    margin-top: -0.5rem; /* eyebrow + h1 are one semantic unit — close the gap */
}

.hero-hint {
    max-width: 44ch;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

.hero-hint a {
    color: var(--accent-strong);
    border-bottom: 1px solid rgba(212, 160, 122, 0.3);
    transition: border-color 160ms ease;
}

.hero-hint a:hover {
    border-bottom-color: var(--accent-strong);
}

.hero-stage {
    position: relative;
    min-height: 100%;
    justify-content: flex-end;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line-soft) 94%, transparent);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(24, 18, 22, 0.72), rgba(11, 9, 12, 0.96)),
        var(--bg-panel);
    box-shadow: var(--shadow-lg);
}

.artist-hero::before,
.lyric-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    filter: grayscale(1) contrast(0.92) brightness(0.46);
    transform: scale(1.04);
}

/* Film grain canvas — rendered off main thread via OffscreenCanvas + Worker */
.hero-grain-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.052;
    mix-blend-mode: overlay;
    z-index: 5;
}

.hero-stage::after,
.artist-hero::after,
.lyric-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--bg-panel-strong) 0%, rgba(26, 21, 26, 0.5) 42%, transparent 68%),
        linear-gradient(0deg, var(--bg-panel-strong) 0%, rgba(26, 21, 26, 0.4) 36%, transparent 60%);
}

.hero-stage::after {
    background:
        linear-gradient(95deg, rgba(12, 9, 12, 0.94) 0%, rgba(12, 9, 12, 0.76) 30%, transparent 64%),
        linear-gradient(180deg, rgba(181, 136, 98, 0.12) 0%, transparent 24%),
        linear-gradient(0deg, rgba(12, 9, 12, 0.34), transparent 46%);
}

.artist-hero > :not(.artist-hero-media):not(.artist-hero-credit):not(.hero-grain-canvas),
.lyric-hero > :not(.lyric-hero-media):not(.lyric-hero-credit):not(.hero-grain-canvas) {
    position: relative;
    z-index: 1;
}

.artist-hero h1,
.lyric-hero h1 {
    max-width: calc(10 * var(--ch-display));
    font-size: clamp(2.7rem, 5.2vw, 4.8rem);
    line-height: 0.89;
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
}

.lyric-hero-meta {
    max-width: calc(36 * var(--ch-ui));
    color: color-mix(in srgb, var(--text-soft) 94%, var(--text-main));
    font-size: 1.06rem;
    line-height: 1.76;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.24);
}

.lyric-hero-summary {
    max-width: calc(52 * var(--ch-reading));
    margin-top: 0.6rem;
}

/* Home panel copy */
.page-home .hero-stage {
    padding: 0;
    border: none;
}

.page-home .hero-stage::after {
    display: none;
}

/* ── 13. Page Hero (non-home) ───────────────────────────────────── */

.page-hero {
    padding: clamp(1.1rem, 2vw, 1.6rem);
    border: 1px solid color-mix(in srgb, var(--line-strong) 88%, transparent);
    border-radius: 0;
    background:
        radial-gradient(circle at top right, rgba(181, 136, 98, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(255, 245, 230, 0.05), transparent 36%),
        var(--bg-panel);
    box-shadow: var(--shadow-md);
}

.page-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.45rem, 4.8vw, 4.2rem);
    line-height: 0.9;
    text-wrap: pretty;
}

.page-hero p:last-child {
    max-width: 48ch;
    font-family: var(--font-reading);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.page-hero--artists-collage {
    isolation: isolate;
    min-height: clamp(11rem, 19vw, 13.5rem);
    padding-right: clamp(14rem, 33vw, 28rem);
}

.page-hero--artists-collage > :not(.page-hero-collage):not(.hero-grain-canvas) {
    position: relative;
    z-index: 2;
}

.page-hero--artists-collage::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 14% 22%, rgba(181, 136, 98, 0.14), transparent 28%),
        linear-gradient(
            90deg,
            rgba(17, 13, 16, 1) 0%,
            rgba(17, 13, 16, 1) 38%,
            rgba(17, 13, 16, 0.96) 54%,
            rgba(17, 13, 16, 0.76) 72%,
            rgba(17, 13, 16, 0.28) 90%,
            rgba(17, 13, 16, 0.04) 100%
        );
}

.page-hero-collage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.page-hero-collage::before,
.page-hero-collage::after {
    content: "";
    position: absolute;
}

.page-hero-collage::before {
    inset: 0;
    background-image: url("../img/letrastango_collage_real_bw_8x8_v3.31bb4fc83b4a.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    filter: grayscale(1) contrast(1.02) brightness(0.92);
    opacity: 0.98;
}

.page-hero-collage::after {
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(11, 9, 12, 0.99) 0%,
        rgba(11, 9, 12, 0.99) 16%,
        rgba(11, 9, 12, 0.94) 30%,
        rgba(11, 9, 12, 0.8) 45%,
        rgba(11, 9, 12, 0.48) 62%,
        rgba(11, 9, 12, 0.18) 80%,
        rgba(11, 9, 12, 0.03) 100%
    );
}

/* Artist / lyric heroes */
.artist-hero,
.lyric-hero {
    display: grid;
    gap: 1rem;
    min-height: clamp(15.5rem, 30vw, 20rem);
    align-content: end;
    padding: clamp(1.1rem, 2vw, 1.6rem);
    border: 1px solid var(--line-soft);
    border-radius: 0;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
}

.page-artist-detail .artist-hero::before {
    display: block;
    background-image:
        linear-gradient(180deg, rgba(12, 9, 12, 0.22), rgba(12, 9, 12, 0.72)),
        var(--artist-hero-image, url("../img/hero-artist-gardel.a8004b300e32.jpg"));
    background-position: var(--artist-hero-position, 50% 18%);
    transform: scale(1.02);
}

.page-artist-detail .artist-hero--custom-image::before {
    content: none;
}

.page-lyric-detail .lyric-hero--custom-image::before {
    content: none;
}

.artist-hero-media,
.lyric-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.artist-hero-media img,
.lyric-hero-media img {
    width: 100%;
    height: 100%;
    filter: grayscale(1) contrast(0.92) brightness(0.70);
    transform: scale(1.02);
    opacity: 0.82;
    pointer-events: none;
}

.artist-hero-media img {
    object-fit: cover;
    object-position: var(--artist-hero-position, 50% 18%);
}

.lyric-hero-media img {
    object-fit: cover;
    object-position: var(--lyric-hero-position, 50% 34%);
}

.artist-sidebar-portrait {
    display: flex;
    justify-content: center;
    margin: 0.3rem 0 1.2rem;
}

.artist-sidebar-avatar {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--accent-strong) 45%, transparent);
    outline: 3px solid color-mix(in srgb, var(--accent-strong) 14%, transparent);
    outline-offset: 3px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    filter: saturate(0.88) contrast(1.05);
}

.page-artist-detail .artist-hero--portrait-image {
    grid-template-columns: minmax(0, 1.05fr) minmax(15rem, 0.75fr);
    align-items: end;
}

.page-artist-detail .artist-hero--portrait-image .artist-hero-media {
    inset: auto 1.6rem 0 auto;
    width: min(100%, clamp(15rem, 34vw, 28rem));
    height: calc(100% - 1.6rem);
    display: flex;
    align-items: end;
    justify-content: center;
}

.page-artist-detail .artist-hero--portrait-image .artist-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: var(--artist-hero-position, 50% 50%);
    filter: grayscale(1) contrast(0.98) brightness(0.84);
    transform: none;
    opacity: 0.9;
}

.page-artist-detail .artist-hero--portrait-image::after {
    background:
        linear-gradient(90deg, rgba(10, 8, 10, 0.88), rgba(10, 8, 10, 0.72) 34%, rgba(10, 8, 10, 0.24) 62%, rgba(10, 8, 10, 0.14) 100%),
        linear-gradient(180deg, rgba(10, 8, 10, 0.16), transparent 22%),
        linear-gradient(0deg, rgba(10, 8, 10, 0.80), rgba(10, 8, 10, 0.28) 32%, transparent 68%);
}

.page-artist-detail .artist-hero--custom-image::after {
    background:
        linear-gradient(180deg, rgba(10, 8, 10, 0.12), transparent 24%),
        linear-gradient(90deg, rgba(10, 8, 10, 0.90), rgba(10, 8, 10, 0.68) 42%, rgba(10, 8, 10, 0.16) 72%, transparent 88%),
        linear-gradient(0deg, rgba(10, 8, 10, 0.80), rgba(10, 8, 10, 0.24) 36%, transparent 68%);
}

/* The fallback bandoneon backdrop, for the ~majority of letras that have no
   portrait of their own. It is the **LCP element** of those pages (measured
   2026-08-05, docs/SEO/cwv-baseline-2026-08-05.md), so two things matter:

   1. `:not(.lyric-hero--custom-image)` — a letra WITH its own hero already
      overrides `content` to `none` two rules up, yet the browser still fetched
      this backdrop for it: 83 KB downloaded and never painted, on every such
      page. Scoping the selector is what actually stops the request.
   2. `image-set()` — the source is a 295x601 photo that CSS then grayscales and
      darkens to 46% brightness, so it survives aggressive compression intact:
      AVIF 4.9 KB / WebP 12.5 KB against the original 85 KB JPEG. The plain
      `url()` declaration above is the fallback for engines without image-set.

   The matching `rel="preload"` lives in `components/lyric_hero_backdrop_preload.html`
   — this backdrop is only discoverable after site.css parses, which cost 329 ms
   of LCP resource-load delay. Keep the two in sync. */
.page-lyric-detail .lyric-hero:not(.lyric-hero--custom-image)::before {
    display: block;
    background-image:
        linear-gradient(180deg, rgba(12, 9, 12, 0.22), rgba(12, 9, 12, 0.64)),
        url("../img/hero-lyric-bandoneon.72844c5ce76c.jpg");
    background-image:
        linear-gradient(180deg, rgba(12, 9, 12, 0.22), rgba(12, 9, 12, 0.64)),
        image-set(
            url("../img/hero-lyric-bandoneon.f58639f134cc.avif") type("image/avif"),
            url("../img/hero-lyric-bandoneon.69ec71b96d85.webp") type("image/webp"),
            url("../img/hero-lyric-bandoneon.72844c5ce76c.jpg") type("image/jpeg")
        );
    background-position: 50% 34%;
    transform: scale(1.03);
}

.page-lyric-detail .lyric-hero--portrait-image {
    grid-template-columns: minmax(0, 1.05fr) minmax(15rem, 0.75fr);
    align-items: end;
}

.page-artist-detail .artist-hero--portrait-image > :not(.artist-hero-media):not(.artist-hero-credit):not(.hero-grain-canvas),
.page-lyric-detail .lyric-hero--portrait-image > :not(.lyric-hero-media):not(.lyric-hero-credit):not(.hero-grain-canvas) {
    grid-column: 1;
}

.page-lyric-detail .lyric-hero--portrait-image .lyric-hero-media {
    inset: auto 1.6rem 0 auto;
    width: min(100%, clamp(15rem, 34vw, 28rem));
    height: calc(100% - 1.6rem);
    display: flex;
    align-items: end;
    justify-content: center;
}

.page-lyric-detail .lyric-hero--portrait-image .lyric-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: var(--lyric-hero-position, 50% 50%);
    filter: grayscale(1) contrast(0.98) brightness(0.84);
    transform: none;
    opacity: 0.9;
}

.page-lyric-detail .lyric-hero--portrait-image::after {
    background:
        linear-gradient(90deg, rgba(10, 8, 10, 0.88), rgba(10, 8, 10, 0.72) 34%, rgba(10, 8, 10, 0.24) 62%, rgba(10, 8, 10, 0.14) 100%),
        linear-gradient(180deg, rgba(10, 8, 10, 0.16), transparent 22%),
        linear-gradient(0deg, rgba(10, 8, 10, 0.80), rgba(10, 8, 10, 0.28) 32%, transparent 68%);
}

.page-lyric-detail .lyric-hero--custom-image::after {
    background:
        linear-gradient(180deg, rgba(10, 8, 10, 0.12), transparent 24%),
        linear-gradient(90deg, rgba(10, 8, 10, 0.90), rgba(10, 8, 10, 0.68) 42%, rgba(10, 8, 10, 0.16) 72%, transparent 88%),
        linear-gradient(0deg, rgba(10, 8, 10, 0.80), rgba(10, 8, 10, 0.24) 36%, transparent 68%);
}

.artist-hero h1 {
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    line-height: 0.93;
}

.artist-hero-subtitle {
    max-width: 26ch;
    font-family: var(--font-reading);
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.32;
    color: var(--text-soft);
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.24);
}

.page-artist-detail .artist-hero-subtitle {
    max-width: min(46ch, 68%);
    margin: 0;
    color: color-mix(in srgb, var(--text-main) 88%, var(--text-soft));
    font-size: clamp(1.25rem, 1.75vw, 1.7rem);
    line-height: 1.4;
    text-wrap: pretty;
}

.artist-hero-alias {
    max-width: min(54ch, 72%);
    margin: 0.15rem 0 0;
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.55;
    text-wrap: pretty;
}

.artist-hero-alias span {
    margin-right: 0.45rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.artist-hero .detail-action-bar {
    margin-top: 0.55rem;
}

.artist-hero-subtitle strong {
    font-style: inherit;
    font-weight: 700;
}

.artist-hero-subtitle .autolinked-content-link,
.lyric-hero-meta .autolinked-content-link {
    color: var(--accent-strong);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 160, 122, 0.3);
    text-shadow: none;
    transition: border-color 160ms ease;
}

.artist-hero-subtitle .autolinked-content-link:hover,
.artist-hero-subtitle .autolinked-content-link:focus-visible,
.lyric-hero-meta .autolinked-content-link:hover,
.lyric-hero-meta .autolinked-content-link:focus-visible {
    color: #f5d4aa;
    border-bottom-color: rgba(212, 160, 122, 0.6);
}

.artist-hero-credit,
.lyric-hero-credit {
    position: absolute;
    right: clamp(0.85rem, 1.8vw, 1.1rem);
    bottom: clamp(0.85rem, 1.8vw, 1rem);
    z-index: 2;
    width: fit-content;
    max-width: min(34ch, calc(100% - 1.8rem));
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(255, 245, 230, 0.14);
    border-radius: var(--radius-sm);
    background: rgba(8, 6, 8, 0.50);
    color: rgba(243, 237, 230, 0.84);
    font-size: 0.76rem;
    line-height: 1.35;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.24);
}

.artist-hero-credit p,
.lyric-hero-credit p { margin: 0; }

.artist-hero-credit a,
.lyric-hero-credit a {
    color: inherit;
    border-bottom: 1px solid rgba(243, 237, 230, 0.22);
}

.artist-hero-credit a:hover,
.artist-hero-credit a:focus-visible,
.lyric-hero-credit a:hover,
.lyric-hero-credit a:focus-visible {
    color: var(--accent-strong);
    border-bottom-color: rgba(212, 160, 122, 0.44);
}

@media (min-width: 1121px) {
    .page-artist-detail .artist-hero-credit {
        top: clamp(0.85rem, 1.8vw, 1rem);
        bottom: auto;
    }
}

/* Hero fact strip */
.hero-fact-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-fact-strip li {
    display: grid;
    align-content: start;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: rgba(255, 248, 240, 0.06);
}

.hero-fact-strip strong {
    color: var(--accent-strong);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.hero-fact-strip span {
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 600;
}

/* ── 14. Section Headers ────────────────────────────────────────── */

.page-section {
    padding: 0.6rem 0 4rem;
}

.page-listing .page-section {
    padding-top: clamp(1rem, 2.5vw, 1.6rem);
}

.section-header {
    margin-bottom: 1.8rem;
}

.section-header h1,
.section-header h2 {
    font-size: clamp(2.4rem, 4.5vw, 4.6rem);
    line-height: 0.9;
}

.section-header p {
    margin-top: 0.85rem;
    max-width: 54ch;
    color: color-mix(in srgb, var(--text-soft) 94%, var(--text-main));
    font-family: var(--font-reading);
    font-size: 1.04rem;
    line-height: 1.82;
}

.section-header.compact {
    margin-bottom: 1.15rem;
}

.page-listing .section-header {
    margin-bottom: 1.6rem;
}

.page-listing .page-hero {
    padding: 1.25rem 1.45rem 1.35rem;
}

.page-listing .page-hero h1 {
    max-width: 14ch;
    font-size: clamp(2.55rem, 4.7vw, 4rem);
}

.page-listing .page-hero p:last-child {
    margin-top: 0.55rem;
    max-width: 44ch;
    font-size: 1rem;
    line-height: 1.7;
}

/* ── 15. Cards ──────────────────────────────────────────────────── */

.listing-card {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    min-height: 100%;
    padding: 1.25rem 1.25rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--line-soft) 92%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--bg-panel-strong) 94%, black 6%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    transition:
        transform 140ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.listing-card h2 {
    font-size: clamp(1.45rem, 2vw, 2.15rem);
    line-height: 0.94;
}

.listing-card h2 a {
    transition: color 200ms var(--ease-out);
}

.listing-card:hover h2 a,
.listing-card:focus-within h2 a {
    color: var(--accent-strong);
}

.title-year {
    margin-left: 0.25em;
    font-family: var(--font-display);
    font-size: 0.55em;
    font-style: italic;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0;
    vertical-align: baseline;
    white-space: nowrap;
}

.listing-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.page-listing .listing-card-heading {
    display: flow-root;
}

.page-listing .listing-card-heading .listing-card-actions {
    float: right;
    margin-left: 0.5rem;
    margin-bottom: 0.15rem;
}

.listing-card-heading h2 {
    flex: 1 1 auto;
    min-width: 0;
}

.listing-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.listing-card p {
    color: var(--text-soft);
    margin-top: 0.1rem;
    font-size: 0.94rem;
    line-height: 1.72;
}

.listing-card small {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-soft);
    font-size: 0.88rem;
}

.listing-card:hover,
.listing-card:focus-within {
    background: color-mix(in srgb, var(--bg-panel-strong) 98%, white 2%);
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line-strong));
    transform: translateY(-0.06rem);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

/* Listing grid */
.listing-grid {
    display: grid;
    row-gap: 0.85rem;
    column-gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    overflow: visible;
}

.listing-grid .listing-card {
    border-radius: 0;
}

.page-listing .listing-card {
    overflow: visible;
    padding: 1.5rem 1.6rem 1.4rem;
    gap: 0.3rem;
}

.page-listing .listing-card::before {
    content: none;
}

.page-listing .listing-card:not(.listing-card--essentials) {
    min-height: clamp(14.5rem, 23vw, 17.5rem);
    padding: 1.6rem 1.65rem 1.45rem;
    gap: 0.45rem;
    background:
        radial-gradient(circle at top right, rgba(181, 136, 98, 0.10), transparent 30%),
        linear-gradient(180deg, rgba(255, 245, 230, 0.05), transparent 34%),
        color-mix(in srgb, var(--bg-panel-strong) 96%, black 4%);
    transition:
        border-color 180ms var(--ease-out),
        background-color 180ms var(--ease-out),
        box-shadow 200ms var(--ease-out),
        transform 200ms var(--ease-out-expo);
}

.page-listing .listing-card:not(.listing-card--essentials):hover,
.page-listing .listing-card:not(.listing-card--essentials):focus-within {
    transform: translateY(-0.08rem);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15);
}

.page-listing .listing-card:not(.listing-card--essentials) .listing-label {
    letter-spacing: 0.14em;
}

.page-listing .listing-card:not(.listing-card--essentials) .artist-listing-copy {
    min-width: 0;
}

.page-listing .listing-card:not(.listing-card--essentials) p {
    margin-top: 0.78rem;
    max-width: 46ch;
    font-size: 0.94rem;
    line-height: 1.68;
}

.page-listing .listing-card:not(.listing-card--essentials) small {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--line-soft) 96%, transparent);
    color: var(--text-muted);
    font-size: 0.84rem;
}

.page-listing .listing-card:not(.listing-card--essentials) h2 {
    font-size: 1.72rem;
}

.page-listing .listing-card:not(.listing-card--essentials) h2 a {
    transition: color 200ms var(--ease-out);
}

.page-listing .listing-card:not(.listing-card--essentials):hover h2 a,
.page-listing .listing-card:not(.listing-card--essentials):focus-within h2 a {
    color: var(--accent-strong);
}

.listing-section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.listing-grid--essentials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1.1rem;
    column-gap: 1.2rem;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.listing-grid--essentials .listing-card {
    border: 1px solid rgba(108, 84, 58, 0.24);
    border-radius: 0;
    background:
        radial-gradient(circle at top left, rgba(168, 116, 57, 0.14), transparent 34%),
        radial-gradient(circle at bottom right, rgba(95, 66, 39, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(244, 236, 226, 0.98), rgba(225, 212, 196, 0.96));
    box-shadow:
        0 12px 24px rgba(67, 46, 24, 0.08),
        inset 0 1px 0 rgba(255, 249, 241, 0.48);
}

.listing-card--essentials {
    padding: 1.3rem 1.4rem 1.2rem;
    color: #2f231b;
}

.listing-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    white-space: nowrap;
    color: rgba(71, 55, 44, 0.72);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

.listing-card--essentials h2 {
    font-size: clamp(1.55rem, 2.1vw, 2rem);
}

.listing-card--essentials h2,
.listing-card--essentials h2 a {
    color: #2b221c;
}

.listing-card--essentials .listing-card-heading {
    align-items: flex-start;
    gap: 0.55rem;
}

.listing-card--essentials .artist-listing-header {
    gap: 0.7rem;
    margin-bottom: 0.18rem;
}

.listing-card--essentials .artist-listing-header + p {
    margin-top: 0.12rem;
}

.listing-card--essentials p {
    color: #47372c;
    font-size: 0.96rem;
}

.listing-card--essentials .listing-meta {
    color: #43342a;
    margin-top: 0.8rem;
}

.listing-card--essentials .listing-meta a {
    color: #7b3f1d;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(123, 63, 29, 0.34);
}

.listing-card--essentials .listing-meta a:hover,
.listing-card--essentials .listing-meta a:focus-visible {
    color: #5f2f15;
    border-bottom-color: rgba(95, 47, 21, 0.56);
}

.listing-card--essentials small {
    color: #665245;
}

.listing-card--essentials h2 a {
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease;
}

.listing-card--essentials h2 a:hover,
.listing-card--essentials h2 a:focus-visible {
    color: #18110d;
}

.listing-card--essentials:hover,
.listing-card--essentials:focus-within {
    background:
        radial-gradient(circle at top left, rgba(168, 116, 57, 0.16), transparent 36%),
        radial-gradient(circle at bottom right, rgba(95, 66, 39, 0.1), transparent 31%),
        linear-gradient(180deg, rgba(248, 240, 231, 0.99), rgba(230, 217, 201, 0.97));
    border-color: rgba(108, 84, 58, 0.36);
}

.listing-actions {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1.35rem;
}

/* Listing meta */
.listing-meta {
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.9rem;
}

.listing-meta a {
    color: var(--accent-strong);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 160, 122, 0.28);
}

.listing-meta a:hover,
.listing-meta a:focus-visible {
    color: #f1d6b6;
    border-bottom-color: rgba(212, 160, 122, 0.56);
}

.listing-card p a,
.listing-card small a {
    color: var(--accent-strong);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 160, 122, 0.28);
}

.listing-card p a:hover,
.listing-card p a:focus-visible,
.listing-card small a:hover,
.listing-card small a:focus-visible {
    color: #f1d6b6;
    border-bottom-color: rgba(212, 160, 122, 0.56);
}

.listing-card--essentials p a,
.listing-card--essentials small a {
    color: #8a3e12;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(138, 62, 18, 0.38);
}

.listing-card--essentials p a:hover,
.listing-card--essentials p a:focus-visible,
.listing-card--essentials small a:hover,
.listing-card--essentials small a:focus-visible {
    color: #5f2508;
    border-bottom-color: rgba(95, 37, 8, 0.62);
}

/* Artist listing headers */
.artist-listing-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.2rem;
}

.page-listing .artist-listing-header {
    gap: 1.2rem;
    margin-bottom: 0;
    align-items: flex-start;
}

.artist-listing-header--essentials {
    align-items: flex-start;
    gap: 1rem;
}

.artist-listing-avatar {
    width: 3.2rem;
    height: 3.2rem;
    flex: 0 0 3.2rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-strong) 45%, transparent);
    border-radius: 50%;
    background: var(--bg-soft);
}

.artist-listing-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.04);
}

.artist-listing-avatar--essentials {
    width: 5rem;
    height: 5rem;
    flex-basis: 5rem;
    border-radius: 50%;
    outline: 2px solid color-mix(in srgb, var(--accent-strong) 14%, transparent);
    outline-offset: 2px;
    box-shadow: 0 10px 18px rgba(67, 46, 24, 0.12);
}

.page-listing .artist-listing-avatar {
    width: 4.5rem;
    height: 4.5rem;
    flex: 0 0 4.5rem;
    border-radius: 50%;
    outline: 2px solid color-mix(in srgb, var(--accent-strong) 14%, transparent);
    outline-offset: 2px;
}

/* Expand cluster container to fully contain the circular items */
.page-listing .listing-avatar-stack--clustered {
    width: 5.4rem;
    height: 5.4rem;
}

/* Stacked items: full size, matching single artistas avatars */
.page-listing .listing-avatar-stack-item--clustered {
    width: 4.5rem;
    height: 4.5rem;
    flex-basis: 4.5rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg-main);
}

/* Tighter horizontal offset so item 2 stays within the container */
.page-listing .listing-avatar-stack-item--clustered:nth-child(2) {
    left: 0.9rem;
}

/* Non-clustered stack items (obras single composer): remove white glow ring */
.page-listing .listing-avatar-stack-item {
    box-shadow: none;
}

.listing-avatar-stack {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    padding-left: 0.1rem;
}

.listing-avatar-stack-item {
    position: relative;
    margin-left: -0.7rem;
    box-shadow: 0 0 0 2px rgba(250, 245, 236, 0.98);
    outline: none;
}

.listing-avatar-stack-item:first-child {
    margin-left: 0;
}

.listing-avatar-stack--clustered {
    position: relative;
    display: block;
    width: 4rem;
    height: 3.3rem;
    padding-left: 0;
}

.listing-avatar-stack-item--clustered {
    position: absolute;
    margin-left: 0;
    width: 2.9rem;
    height: 2.9rem;
    flex-basis: 2.9rem;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(250, 245, 236, 0.72),
        0 8px 14px rgba(47, 31, 14, 0.12);
    overflow: hidden;
}

.listing-avatar-stack-item--clustered:nth-child(1) {
    top: 0.2rem;
    left: 0;
    z-index: 3;
}

.listing-avatar-stack-item--clustered:nth-child(2) {
    top: 0.75rem;
    left: 1.6rem;
    z-index: 2;
}

.listing-avatar-stack--essentials {
    width: 5.9rem;
    height: 4.9rem;
    padding-left: 0;
}

.listing-avatar-stack-item--essentials {
    margin-left: -1rem;
    box-shadow: 0 0 0 3px rgba(255, 250, 243, 0.98);
}

.listing-avatar-stack-item--clustered.artist-listing-avatar--essentials {
    width: 4.1rem;
    height: 4.1rem;
    flex-basis: 4.1rem;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 250, 243, 0.72),
        0 14px 22px rgba(47, 31, 14, 0.14);
}

.listing-avatar-stack--essentials .listing-avatar-stack-item--clustered:nth-child(1) {
    top: 0.2rem;
}

.listing-avatar-stack--essentials .listing-avatar-stack-item--clustered:nth-child(2) {
    top: 1rem;
    left: 2.15rem;
}

.artist-listing-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.artist-listing-copy h2,
.artist-listing-copy h3 {
    margin: 0;
}

.page-listing .artist-listing-copy h2,
.page-listing .artist-listing-copy h3 {
    margin-bottom: 0.2rem;
}

/* Subcategory blocks */
.subcategory-grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
}

.subcategory-grid-compact {
    margin-top: 0.9rem;
}

.subcategory-block {
    padding: 0.85rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: transparent;
}

.subcategory-block h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.subcategory-block h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.subcategory-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.subcategory-block li a {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.84rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    transition: color 160ms ease, border-color 160ms ease;
}

.subcategory-block li a:hover,
.subcategory-block li a:focus-visible {
    border-color: var(--line-strong);
    color: var(--text-main);
    transform: none;
}

/* Listing label */
.listing-label {
    display: block;
    margin-bottom: 0.5rem;
}

.listing-label--with-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.listing-label-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 245, 230, 0.10);
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* ── 16. Category editorial ─────────────────────────────────────── */

.category-editorial-card {
    margin-bottom: 1rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--line-soft) 92%, transparent);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(255, 245, 230, 0.05), transparent 34%),
        var(--bg-panel);
    box-shadow: var(--shadow-md);
}

.page-listing .category-editorial-card {
    padding: 1rem 1.1rem;
}

.category-editorial-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.category-editorial-header small {
    color: var(--text-soft);
}

.category-editorial-text {
    color: var(--text-soft);
    line-height: 1.78;
}

.editorial-grid {
    display: grid;
    gap: 1.3rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    margin-bottom: 1rem;
}

.listing-grid + .category-editorial-card,
.listing-grid + .editorial-grid {
    margin-top: 2rem;
}

.pagination-nav + .category-editorial-card,
.pagination-nav + .editorial-grid {
    margin-top: 1rem;
}

.editorial-card h2 {
    margin-bottom: 0.6rem;
    font-size: clamp(1.7rem, 2.5vw, 2.45rem);
    line-height: 0.98;
}

.editorial-summary {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.editorial-link-list {
    display: grid;
    gap: 0.7rem;
    margin: 1rem 0 0;
    padding-left: 0;
    list-style: none;
}

.editorial-link-list li {
    margin: 0;
}

.editorial-link-list a {
    display: grid;
    gap: 0.3rem;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--line-soft) 92%, transparent);
    border-radius: 0;
    background: rgba(255, 245, 230, 0.04);
    text-decoration: none;
    transition: transform 200ms var(--ease-out-expo), border-color 160ms ease, background-color 160ms ease;
}

.editorial-link-list a:hover,
.editorial-link-list a:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line-strong));
    background: rgba(181, 136, 98, 0.08);
    transform: translateX(0.22rem);
}

.editorial-link-list strong {
    color: var(--text-main);
    font-size: 0.95rem;
}

.editorial-link-list span {
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.category-editorial-text .autolinked-content-link,
.lyric-text .autolinked-content-link,
.lyric-hero-meta .autolinked-content-link,
.artist-hero-subtitle .autolinked-content-link,
.artist-bio-intro .autolinked-content-link,
.artist-bio-section-content .autolinked-content-link,
.artist-bio-text .autolinked-content-link {
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition: color 160ms ease;
}

.category-editorial-text .autolinked-content-link:hover,
.lyric-text .autolinked-content-link:hover,
.lyric-hero-meta .autolinked-content-link:hover,
.artist-hero-subtitle .autolinked-content-link:hover,
.artist-bio-intro .autolinked-content-link:hover,
.artist-bio-section-content .autolinked-content-link:hover,
.artist-bio-text .autolinked-content-link:hover {
    color: var(--text-main);
}

/* ── 17. Alphabet Nav ───────────────────────────────────────────── */

.alphabet-panel {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: clamp(1.2rem, 2.5vw, 1.75rem);
    border: 1px solid var(--line-soft);
    border-radius: 0;
    background: var(--bg-panel);
}

.page-listing .alphabet-panel {
    gap: 0.8rem;
    margin-bottom: 1.3rem;
    padding: 1rem 1.1rem 1.05rem;
}

.alphabet-panel-header {
    display: grid;
    gap: 0.4rem;
}

.alphabet-panel-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.alphabet-panel-header h2 {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
}

.alphabet-panel-header p:last-child {
    color: var(--text-soft);
    max-width: 58ch;
}

.page-listing .alphabet-panel-header p:last-child {
    line-height: 1.55;
}

.alphabet-context-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    padding: 0 0.85rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.alphabet-context-link:hover,
.alphabet-context-link:focus-visible {
    color: var(--text-main);
    border-color: var(--accent);
    background: rgba(181, 136, 98, 0.10);
    transform: none;
}

.alphabet-toolbar {
    display: grid;
    gap: 0.75rem;
}

.alphabet-home,
.alphabet-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    font-weight: 600;
    transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

.alphabet-home {
    padding: 0 0.85rem;
    justify-self: start;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.alphabet-grid {
    display: grid;
    gap: 0.3rem;
    grid-template-columns: repeat(auto-fit, minmax(2.1rem, 1fr));
}

.alphabet-link {
    font-family: "Bodoni Moda", "Times New Roman", serif;
    font-size: clamp(0.95rem, 1.4vw, 1.12rem);
    line-height: 1;
}

.alphabet-home:hover,
.alphabet-home:focus-visible,
.alphabet-link:hover,
.alphabet-link:focus-visible {
    color: var(--text-main);
    border-color: var(--accent);
    background: rgba(181, 136, 98, 0.10);
}

.alphabet-home.is-active,
.alphabet-link.is-active {
    color: var(--text-main);
    border-color: var(--accent);
    background: rgba(181, 136, 98, 0.20);
    font-weight: 700;
    transform: none;
}

.alphabet-link.is-disabled {
    color: var(--text-muted);
    opacity: 0.38;
    pointer-events: none;
}

.listing-section-header {
    margin-top: 0.25rem;
    padding-top: 1.25rem;
}

.page-listing .listing-section-header {
    margin-top: 0;
    padding-top: 1rem;
}

.listing-section-header::before {
    content: "";
    display: block;
    width: 2.4rem;
    height: 1px;
    margin-bottom: 1rem;
    background: var(--accent);
    opacity: 0.6;
}

.page-listing .listing-section-header::before {
    margin-bottom: 0.7rem;
}

.listing-section-header h2 {
    font-size: clamp(2.4rem, 4.5vw, 4.5rem);
}

/* ── 18. Pagination ─────────────────────────────────────────────── */

.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.pagination-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.pagination-link,
.pagination-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-soft);
    background: transparent;
}

.pagination-link {
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.pagination-link:hover,
.pagination-link:focus-visible {
    border-color: var(--line-strong);
    background: var(--bg-soft);
    transform: none;
}

.pagination-link.is-current {
    border-color: var(--accent);
    background: rgba(181, 136, 98, 0.12);
    color: var(--text-main);
}

.pagination-status {
    color: var(--text-soft);
    font-size: 0.88rem;
}

.pagination-ellipsis {
    min-width: 2.4rem;
}

.listing-load-more-link {
    gap: 0.55rem;
}

.listing-load-more-link.htmx-request,
.listing-load-more-link[disabled] {
    pointer-events: none;
    opacity: 0.72;
}

.listing-load-more-indicator {
    display: none;
    width: 0.95rem;
    height: 0.95rem;
    border: 2px solid rgba(123, 63, 29, 0.22);
    border-top-color: #7b3f1d;
    border-radius: 50%;
    animation: listing-load-more-spin 720ms linear infinite;
}

.listing-load-more-link.htmx-request .listing-load-more-indicator {
    display: inline-flex;
}

@keyframes listing-load-more-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── 19. Breadcrumbs ────────────────────────────────────────────── */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.7rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    color: var(--accent-strong);
}

.breadcrumbs [aria-current="page"] {
    color: var(--text-main);
}

/* ── 19b. Lyric & Obra Listing ──────────────────────────────────── */

/* Poem/obra titles read as literary entries, not artist names */
.page-listing-letra .listing-card h2,
.page-listing-obra .listing-card h2 {
    font-family: var(--font-reading);
    line-height: 1.18;
    font-weight: 500;
    text-wrap: pretty;
}

.page-listing-letra .listing-card h2 a,
.page-listing-obra .listing-card h2 a {
    color: var(--text-main);
}

.page-listing-letra .listing-card--essentials h2,
.page-listing-letra .listing-card--essentials h2 a,
.page-listing-obra .listing-card--essentials h2,
.page-listing-obra .listing-card--essentials h2 a {
    color: #2b221c;
    text-shadow: none;
}

.page-listing-letra .listing-card h2 a:hover,
.page-listing-letra .listing-card h2 a:focus-visible,
.page-listing-obra .listing-card h2 a:hover,
.page-listing-obra .listing-card h2 a:focus-visible {
    color: var(--accent-strong);
}

.page-listing-letra .listing-card--essentials h2 a:hover,
.page-listing-letra .listing-card--essentials h2 a:focus-visible,
.page-listing-obra .listing-card--essentials h2 a:hover,
.page-listing-obra .listing-card--essentials h2 a:focus-visible {
    color: #18110d;
}

.page-listing-letra .listing-card p,
.page-listing-obra .listing-card p {
    margin-top: 0.6rem;
    font-size: 0.93rem;
}

.page-listing-letra .listing-card small,
.page-listing-obra .listing-card small {
    font-size: 0.91rem;
}

/* ── 20. Lyric Detail ───────────────────────────────────────────── */

.lyric-detail-section {
    padding-top: 0.35rem;
}

.lyric-detail-layout {
    display: grid;
    gap: 1rem;
}

.lyric-hero {
    gap: 0.75rem;
    padding: clamp(1.5rem, 2.6vw, 2.35rem);
}

.lyric-hero h1 {
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    line-height: 0.93;
}

.lyric-hero-credits {
    display: grid;
    gap: 0.3rem;
    max-width: min(calc(54 * var(--ch-ui)), 70%);
}

.lyric-hero-credit-line {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    margin: 0;
    max-width: none;
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: clamp(0.92rem, 1.15vw, 1.05rem);
    font-style: normal;
    font-weight: 650;
    line-height: 1.5;
}

.lyric-hero-composer {
    color: color-mix(in srgb, var(--text-main) 88%, var(--text-soft));
}

.lyric-hero-credit-label {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lyric-hero-composer a {
    color: var(--accent-strong);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 160, 122, 0.3);
    transition: border-color 160ms ease, color 160ms ease;
}

.lyric-hero-composer a:hover,
.lyric-hero-composer a:focus-visible {
    color: #f5d4aa;
    border-bottom-color: rgba(212, 160, 122, 0.6);
}

.page-lyric-detail .lyric-hero-summary {
    max-width: min(46ch, 68%);
    margin: 0.45rem 0 0;
    color: color-mix(in srgb, var(--text-main) 88%, var(--text-soft));
    font-family: var(--font-reading);
    font-size: clamp(1.22rem, 1.65vw, 1.62rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.42;
    text-wrap: pretty;
}

.page-lyric-detail .lyric-hero .detail-action-bar {
    margin-top: 0.45rem;
}

.lyric-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.7fr);
    align-items: start;
}

/* Lyric sheet (main reading surface) */
.lyric-sheet,
.lyric-sidebar-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 0;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.lyric-sheet::before,
.lyric-sidebar-card::before {
    display: none;
}

html[data-theme="dark"] .lyric-sheet {
    background: var(--reading-surface);
}

html[data-theme="dark"] .lyric-sidebar-card {
    background: var(--bg-panel-strong);
}

.lyric-sheet {
    padding: clamp(1.7rem, 3vw, 2.8rem);
    border-color: var(--reading-border);
    background: var(--reading-surface);
    box-shadow: var(--reading-shadow);
}

.lyric-sheet-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 1.55rem;
}

.lyric-sheet-header small {
    color: var(--reading-muted-text);
    font-size: 0.82rem;
}

.lyric-text {
    color: var(--reading-text);
    width: min(38rem, 100%);
    max-width: 100%;
    margin-inline: auto;
    font-family: var(--font-reading);
    font-size: clamp(1.32rem, 1.1rem + 0.4vw, 1.54rem);
    line-height: 1.86;
    letter-spacing: 0.002em;
    font-weight: 400;
    font-optical-sizing: auto;
    font-feature-settings: "liga" 1, "kern" 1;
    text-wrap: pretty;
}

.lyric-editorial-sections {
    width: min(38rem, 100%);
    margin-inline: auto;
}

/* Verse -> editorial disclosures. The last verse has margin-bottom: 0, so
   without this the first disclosure box sits flush against it and reads as
   part of the lyric. Kept off the ad-slot case, which has its own spacing
   below and stops matching this adjacent-sibling selector anyway. */
.lyric-text + .lyric-editorial-sections {
    margin-top: var(--editorial-boundary-gap);
}

/* Phones read in a narrower column, so the same gap costs proportionally more
   scrolling. Overriding the token here moves both boundary rules at once. */
@media (max-width: 560px) /* --bp-xs */ {
    :root {
        --editorial-boundary-gap: 1.8rem;
    }
}

.lyric-text p {
    margin: 0 0 1.6rem;
}

.lyric-text br {
    content: "";
    display: block;
    margin-bottom: 0.28em;
}

.lyric-text br + br {
    margin-bottom: 1.1em;
}

.lyric-text > p:first-of-type::first-letter {
    float: left;
    margin: 0.04em 0.16em 0 0;
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 5.1vw, 5.3rem);
    line-height: 0.84;
    font-weight: 600;
    color: var(--reading-text);
}

.lyric-text p:last-child {
    margin-bottom: 0;
}

.lyric-content-ad-slot,
.artist-bio-ad-slot {
    padding: 1.35rem 0 0;
}

.artist-bio-ad-slot {
    padding-top: 1.15rem;
    padding-bottom: 0.35rem;
}

.lyric-content-ad-slot .content-ad-shell,
.artist-bio-ad-slot .content-ad-shell,
.content-ad-slot .content-ad-shell {
    width: min(100%, 748px);
}

.lyric-content-ad-slot .content-ad-frame,
.artist-bio-ad-slot .content-ad-frame,
.content-ad-slot .content-ad-frame {
    min-height: 90px;
    max-height: 90px;
    height: 90px;
    overflow: hidden;
}

.lyric-content-ad-slot .content-adsbygoogle,
.artist-bio-ad-slot .content-adsbygoogle,
.content-ad-slot .content-adsbygoogle {
    display: block;
    width: 728px !important;
    height: 90px !important;
    min-height: 90px;
    max-height: 90px;
}

.lyric-content-ad-slot .content-adsbygoogle iframe,
.artist-bio-ad-slot .content-adsbygoogle iframe,
.content-ad-slot .content-adsbygoogle iframe {
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
}

.lyric-content-ad-slot + .lyric-editorial-sections {
    margin-top: 1.1rem;
}

.artist-bio-ad-slot + .artist-bio-sections,
.artist-bio-ad-slot + .artist-bio-text {
    margin-top: 0.9rem;
}

.lyric-sidebar {
    display: grid;
    gap: 1rem;
}

.lyric-sidebar-card {
    padding: 1.4rem;
}

/* Cover images inside sidebar cards (release portada/contratapa) */
.lyric-sidebar-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
}

.lyric-sidebar-card h2 {
    font-family: var(--font-reading);
    font-size: clamp(1.55rem, 2vw, 2rem);
    line-height: 1.1;
    margin-bottom: 0.6rem;
    font-weight: 500;
}

.lyric-meta-group {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
}

.lyric-meta-group:first-of-type {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
}

.lyric-meta-list {
    margin: 0.55rem 0 0;
    padding-left: 1rem;
    color: var(--text-soft);
    display: grid;
    gap: 0.4rem;
    font-size: 0.96rem;
}

.lyric-meta-list a {
    color: var(--accent-strong);
    text-decoration: none;
}

.lyric-meta-list a:hover,
.lyric-meta-list a:focus-visible {
    text-decoration: underline;
}

/* Recording year beside an interpreter credit (Phase 5). Muted and tabular so a
   column of years reads as a discography instead of competing with the names;
   `--text-muted` is redefined per data-theme, so both themes are covered. */
.credit-year {
    color: var(--text-muted);
    font-size: 0.86em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── 21. Artist Detail ──────────────────────────────────────────── */

.artist-detail-section {
    padding-top: 0.35rem;
}

.artist-detail-layout {
    display: grid;
    gap: 1rem;
}

.artist-bio-card,
.artist-sidebar-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 0;
    background: var(--bg-panel);
    box-shadow: none;
}

.artist-bio-card::before,
.artist-sidebar-card::before {
    display: none;
}

html[data-theme="light"] .artist-bio-card {
    background: var(--reading-surface);
}

.artist-hero::before {
    display: none;
}

.artist-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.8fr);
    align-items: start;
}

.artist-bio-card {
    padding: clamp(1.7rem, 3vw, 2.9rem);
    border-color: var(--reading-border);
    background: var(--reading-surface);
    box-shadow: var(--reading-shadow);
}

.artist-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 1.55rem;
}

.artist-card-header small {
    color: var(--reading-muted-text);
    font-size: 0.82rem;
}

.artist-bio-text,
.artist-bio-intro,
.artist-bio-section-content {
    color: var(--reading-text);
    font-family: var(--font-reading);
    font-size: clamp(1.16rem, 1rem + 0.34vw, 1.34rem);
    line-height: 1.9;
    letter-spacing: 0.003em;
    max-width: var(--measure-reading);
    font-optical-sizing: auto;
    font-feature-settings: "liga" 1, "kern" 1;
    text-wrap: pretty;
}

.artist-bio-intro {
    color: var(--reading-soft-text);
    font-size: clamp(1.24rem, 1.08rem + 0.36vw, 1.46rem);
    line-height: 1.82;
    padding-bottom: 0.35rem;
}

.artist-bio-intro > p:first-of-type::first-letter,
.artist-bio-text > p:first-of-type::first-letter {
    float: left;
    margin: 0.08em 0.08em 0 0;
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 4.5vw, 4.9rem);
    line-height: 0.82;
    font-weight: 600;
    color: var(--reading-text);
}

.artist-bio-text {
    margin-top: 1.4rem;
}

.artist-bio-structured {
    display: grid;
    gap: var(--artist-bio-stack-gap);
}

/* Same prose -> editorial disclosures boundary as the lyric page, on obras,
   discos and artistas. The grid gap already separates the two, so subtract it
   to land on one shared total instead of stacking two spacings. */
.artist-bio-intro + .artist-bio-sections {
    margin-top: calc(var(--editorial-boundary-gap) - var(--artist-bio-stack-gap));
}

.milonga-answer-box {
    margin: 0 0 1.4rem;
    padding: 0;
    color: var(--reading-text);
    font-size: clamp(1.1rem, 0.98rem + 0.32vw, 1.28rem);
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-wrap: pretty;
}

.artist-bio-sections {
    display: grid;
    gap: 0.6rem;
}

.artist-bio-text p,
.artist-bio-intro p,
.artist-bio-section-content p {
    margin: 0 0 1.35rem;
}

.artist-bio-text p:last-child,
.artist-bio-intro p:last-child,
.artist-bio-section-content p:last-child {
    margin-bottom: 0;
}

.artist-bio-section-content h3,
.artist-bio-section-content h4,
.artist-bio-section-content h5,
.artist-bio-section-content h6 {
    margin: 1.2rem 0 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--reading-muted-text);
}

.artist-bio-section-content h3:first-child,
.artist-bio-section-content h4:first-child,
.artist-bio-section-content h5:first-child,
.artist-bio-section-content h6:first-child {
    margin-top: 0;
}

.artist-bio-section-content ul,
.artist-bio-section-content ol {
    margin: 0 0 1.1rem;
    padding-left: 1.3rem;
}

.artist-bio-section-content li + li {
    margin-top: 0.4rem;
}

.artist-bio-section-content {
    max-width: none;
    padding: 1rem 1.2rem 1.2rem;
    font-size: clamp(1.08rem, 0.98rem + 0.26vw, 1.22rem);
    line-height: 1.9;
    background: var(--reading-surface-soft);
}

/* Disclosures */
.artist-disclosure,
.artist-bio-disclosure {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--reading-surface-soft);
    overflow: hidden;
}

.artist-disclosure summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    color: var(--reading-text);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.artist-disclosure summary::-webkit-details-marker {
    display: none;
}

.artist-disclosure summary small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 1.7rem;
    padding: 0.14rem 0.45rem;
    border-radius: 0;
    background: rgba(255, 245, 230, 0.10);
    color: var(--reading-soft-text);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0;
}

/* Expand affordance: chevron next to the count, rotates when open. */
.artist-disclosure summary small::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    flex: 0 0 auto;
    border-right: 2px solid var(--accent-strong);
    border-bottom: 2px solid var(--accent-strong);
    transform: translateY(-0.1rem) rotate(45deg);
    transition: transform 180ms var(--ease-out);
}

.artist-disclosure[open] summary small::after {
    transform: translateY(0.1rem) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
    .artist-disclosure summary small::after {
        transition: none;
    }
}

.artist-disclosure[open] summary {
    border-bottom: 1px solid var(--line-soft);
}

.artist-disclosure summary:hover,
.artist-disclosure summary:focus-visible {
    background: rgba(181, 136, 98, 0.08);
    color: var(--reading-text);
    outline: none;
}

.artist-disclosure-summary {
    margin: 0;
    padding: 0.8rem 1rem 0;
    color: var(--reading-muted-text);
    font-size: 0.88rem;
    line-height: 1.5;
}

.artist-section-list {
    margin: 0;
    padding: 0.8rem 1rem 1rem 1.15rem;
}

.artist-sidebar {
    display: grid;
    gap: 1rem;
}

.detail-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem;
    margin-top: 0.9rem;
    align-items: flex-end;
}

.detail-action-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.detail-action-button {
    width: auto;
    justify-content: center;
}

.detail-action-button--spotify {
    flex: 0 0 auto;
}

.detail-action-cluster--primary {
    flex: 0 0 auto;
}

.detail-action-button--spotify svg,
.favorite-toggle--action-bar .favorite-toggle__icon svg,
.vote-card--action-bar .vote-card__icon svg {
    width: 1rem;
    height: 1rem;
}

.detail-action-button--spotify .spotify-play-glyph {
    width: 1.45rem;
    height: 1.45rem;
    color: #1DB954;
    transition: transform 160ms var(--ease-out, ease), color 160ms ease;
}

.detail-action-button--spotify:hover .spotify-play-glyph {
    color: #1ed760;
    transform: scale(1.05);
}

.detail-action-button--spotify:active .spotify-play-glyph {
    transform: scale(0.94);
}

.artist-sidebar-card {
    padding: 1.35rem;
    box-shadow: var(--shadow-sm);
}

.artist-sidebar-card .listing-label + h2,
.lyric-sidebar-card .listing-label + h2 {
    margin-top: 0.35rem;
}

.artist-sidebar-card h2,
.lyric-sidebar-card h2 {
    text-wrap: pretty;
}

.artist-sidebar-card .editorial-summary,
.lyric-sidebar-card .editorial-summary {
    color: var(--text-soft);
    line-height: 1.7;
}

.favorite-toggle-wrap {
    display: grid;
    gap: 0.45rem;
}

.favorite-toggle-wrap--action-bar {
    display: flex;
    align-items: center;
}

.favorite-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.72rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-panel) 58%, transparent);
    color: var(--text-soft);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.favorite-toggle--action-bar {
    width: 2.45rem;
    min-width: 2.45rem;
    height: 2.45rem;
    min-height: 2.45rem;
    padding: 0;
    justify-content: center;
}

.favorite-toggle:hover,
.favorite-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line-soft));
    color: var(--text-main);
    outline: none;
}

.favorite-toggle.is-active {
    border-color: color-mix(in srgb, #f2c66d 62%, var(--line-soft));
    background: color-mix(in srgb, #f2c66d 18%, var(--bg-panel));
    color: var(--text-main);
    box-shadow: inset 0 0 0 1px rgba(242, 198, 109, 0.18);
}

.favorite-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--text-muted) 82%, var(--text-main));
}

.favorite-toggle.is-active .favorite-toggle__icon {
    color: #f2c66d;
}

.favorite-toggle__text {
    white-space: nowrap;
}

.favorite-toggle__status {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.vote-card {
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: grid;
    gap: 0.95rem;
    background: var(--bg-panel-strong);
    background-image: none;
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .vote-card {
    background: var(--paper);
}

.vote-card--action-bar {
    display: grid;
    gap: 0.32rem;
    margin-left: 0.2rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="light"] .vote-card--action-bar {
    background: transparent;
    box-shadow: none;
}

.vote-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: inherit;
}

.vote-card--action-bar::after {
    display: none;
}

.vote-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vote-card__toolbar-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
}

.vote-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: auto;
    min-width: 4rem;
    min-height: 2.45rem;
    padding: 0.42rem 0.72rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-panel) 56%, transparent);
    color: var(--text-soft);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.vote-card__button:hover,
.vote-card__button:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line-soft));
    background: color-mix(in srgb, var(--bg-soft) 65%, var(--bg-panel));
    color: var(--text-main);
    outline: none;
}

.vote-card__button.is-active {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line-soft));
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-panel));
    color: var(--text-main);
}

.vote-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    opacity: 0.82;
}

.vote-card--action-bar .vote-card__button > span:last-of-type {
    flex: 0 0 auto;
}

.vote-card__button strong {
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: var(--text-main);
}

.vote-card__status {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.vote-card--action-bar .vote-card__status,
.favorite-toggle-wrap--action-bar .favorite-toggle__status {
    width: 100%;
    margin-top: 0.1rem;
    font-size: 0.74rem;
}

.artist-graph-card {
    display: grid;
    gap: 0.7rem;
}

/*
 * Hide the graph deep-link on the same viewports /grafo/ itself rejects:
 * the graph page shows a "no se ve bien en pantallas chicas" fallback at
 * max-width 720px (see graph.css .graph-mobile-fallback), so linking there
 * from artist pages would only lead mobile users to that dead end.
 */
@media (max-width: 720px) /* --bp-sm */ {
    .artist-graph-card {
        display: none;
    }
}

.artist-graph-card-lead {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/*
 * "Ver la red de <artist>" chip (components/graph_network_cta.html), shared by
 * the lyric and work credit cards. Hidden at ≤720px for the same reason as
 * .artist-graph-card above: /grafo/ rejects small screens with a fallback.
 */
.graph-network-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.35rem;
    margin-top: 0.9rem;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.graph-network-cta:hover,
.graph-network-cta:focus-visible {
    color: var(--accent-strong);
    border-color: var(--line-strong);
}

.graph-network-cta-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--accent);
}

@media (max-width: 720px) /* --bp-sm */ {
    .graph-network-cta {
        display: none;
    }
}

.artist-life-list {
    margin: 0.8rem 0 0;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 0;
}

.artist-life-list li {
    margin: 0;
    padding: 0.74rem 0;
    color: var(--text-main);
    border-top: 1px solid var(--line-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.artist-life-list li:first-child {
    border-top: none;
    padding-top: 0.15rem;
}

.artist-life-list strong {
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 0.3rem;
}

.artist-placeholder-list {
    margin: 0.7rem 0 0;
    padding-left: 1rem;
    color: var(--text-soft);
    display: grid;
    gap: 0.4rem;
    font-size: 0.92rem;
}

.artist-works-sort {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.artist-works-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    padding: 0.22rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    line-height: 1;
}

.artist-works-chip--active {
    border: 1.5px solid var(--accent);
    color: var(--accent-strong);
    font-weight: 500;
    cursor: default;
}

/* The global button:hover/:focus-visible rule paints every button with
   --accent-strong, and these chips never overrode it: the ACTIVE chip's own
   colour is --accent-strong too, so hovering it produced gold text on a gold
   pill — the label simply vanished (reported on /artistas/astor-piazzolla/,
   2026-08-27). A sort chip is a quiet control, not a call to action: it stays
   transparent in every state and signals hover with its border and text, which
   is what the rule below always intended. Same fix as `.lyric-recirc-grip`.
   Note :hover sticks after a tap on iOS, so a filled state here would also
   leave one chip painted at random. */
.artist-works-chip:hover,
.artist-works-chip:focus-visible {
    background: transparent;
    box-shadow: none;
}

.artist-works-chip:not(.artist-works-chip--active):hover {
    border-color: var(--line-soft);
    color: var(--reading-text);
}

/* The active chip is the current state, not a target — hovering it must not
   suggest it can be pressed. */
.artist-works-chip--active:hover {
    color: var(--accent-strong);
}

/* Spinner */
.artist-works-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--line-soft);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: artist-works-spin 0.6s linear infinite;
    margin: 0.6rem auto 0.4rem;
}

.artist-works-loading .artist-works-spinner {
    display: block;
}

@keyframes artist-works-spin {
    to { transform: rotate(360deg); }
}

.artist-works-loading .artist-disclosure {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.15s;
}

.artist-relationship-sections {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.6rem;
}

.artist-work-list li {
    display: grid;
    gap: 0.18rem;
}

.artist-work-heading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* A discography row carries two dates (composition + "grabó …"), so on a narrow
   rail it wraps. A wrapped flex line restarts at the container edge — under the
   play button — which reads as a stray line rather than a continuation. Hanging
   the button in a gutter aligns every wrapped line with the title. Scoped with
   `:has()` so the button-less rows of "Trabajo con" keep their layout. */
.artist-work-heading:has(.artist-work-spot-btn) {
    padding-left: calc(22px + 0.45rem);
}

.artist-work-heading:has(.artist-work-spot-btn) .artist-work-spot-btn {
    margin-left: calc(-22px - 0.45rem);
}

.artist-work-spot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 0.1rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #1DB954;
    cursor: pointer;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, transform 160ms var(--ease-out, ease);
}

.artist-work-spot-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.artist-work-spot-btn:hover,
.artist-work-spot-btn:focus-visible {
    color: #1ed760;
    transform: scale(1.12);
}

.artist-work-spot-btn:active {
    transform: scale(0.94);
}

.artist-work-spot-btn:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

.artist-work-spot-btn:focus:not(:focus-visible) {
    outline: none;
}

.artist-work-list a {
    color: var(--accent-strong);
    text-decoration: none;
    font-size: 0.94rem;
}

.artist-work-list a:hover,
.artist-work-list a:focus-visible {
    text-decoration: underline;
}

.artist-work-list small {
    color: var(--text-muted);
}

.artist-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.artist-role-badges small {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.artist-role-group-label {
    margin: 0.65rem 0 0.2rem;
    padding-left: 1.15rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── 22. Videos ─────────────────────────────────────────────────── */

.videos-page-layout,
.artist-videos-layout {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.artist-videos-hero,
.videos-artist-block,
.artist-video-card,
.videos-empty-state {
    overflow: hidden;
}

.videos-artist-sections {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.2rem);
}

.videos-artist-block {
    padding: 1.5rem;
    display: grid;
    gap: 1.35rem;
    border: 1px solid var(--line-soft);
    border-radius: 0;
    background:
        radial-gradient(circle at top right, rgba(181, 136, 98, 0.10), transparent 24%),
        linear-gradient(180deg, rgba(255, 245, 230, 0.04), transparent 34%),
        var(--bg-panel);
    box-shadow: var(--shadow-sm);
}

.videos-artist-block .video-showcase {
    position: static;
    padding: 0.9rem;
    margin-top: 0;
    border: 1px solid var(--line-soft);
    border-radius: 0;
    background: transparent;
}

.videos-artist-block .video-player-frame {
    min-height: 18rem;
}

.videos-load-more-button[disabled] {
    opacity: 0.7;
    cursor: wait;
}

.videos-artist-block-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--line-soft);
}

.videos-artist-block-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.videos-artist-block-header h2,
.artist-video-card h2 {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 1.95rem);
    line-height: 1.05;
}

.artist-video-card {
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
}

.artist-videos-hero p,
.videos-empty-state p:not(.listing-label) {
    max-width: 58ch;
}

.videos-empty-state,
.artist-videos-hero {
    padding: 1.35rem;
    border: 1px solid var(--line-soft);
    border-radius: 0;
    background:
        radial-gradient(circle at top right, rgba(181, 136, 98, 0.10), transparent 26%),
        linear-gradient(180deg, rgba(255, 245, 230, 0.04), transparent 34%),
        var(--bg-panel);
    box-shadow: var(--shadow-sm);
}

/* Video player */
.video-showcase {
    position: sticky;
    top: 1rem;
}

/* When the sticky video card is taller than the viewport (many videos), cap
   it to the viewport and let it scroll internally so every playlist item stays
   reachable. Without this the pinned card overflows the bottom of the screen
   and its last items can never be scrolled into view. Scoped to the lyric/work
   sidebar variant so the static artist-block showcase is untouched. */
.video-showcase.lyric-sidebar-card {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 136, 98, 0.3) rgba(255, 245, 230, 0.04);
    padding: 1.05rem 1.1rem;
}

.video-showcase.lyric-sidebar-card .video-showcase-shell {
    gap: 0.85rem;
}

.video-showcase-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.2rem;
}

.video-showcase-header {
    display: grid;
    gap: 0.85rem;
}

.video-showcase-intro {
    display: grid;
    gap: 0.35rem;
}

.video-showcase h2 {
    margin: 0;
    font-size: clamp(1.3rem, 1.75vw, 1.78rem);
    line-height: 1.1;
}

.video-showcase h2 a {
    color: inherit;
}

.video-showcase h2 a:hover,
.video-showcase h2 a:focus-visible {
    color: var(--accent-strong);
}

.video-player-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 0;
    background: var(--bg-main);
}

.video-player-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-player-current {
    color: var(--text-main);
    font-family: "Bodoni Moda", "Times New Roman", serif;
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.4;
}

.video-playlist-header p:last-child,
.video-playlist-copy small {
    color: var(--text-muted);
}

.video-playlist-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line-soft);
}

.video-playlist-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.video-playlist-list--horizontal {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 21rem);
    overflow-x: auto;
    padding: 0.1rem 0 0.45rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 136, 98, 0.3) rgba(255, 245, 230, 0.04);
}

.video-playlist-list--horizontal li {
    scroll-snap-align: start;
    min-height: 100%;
}

.video-playlist-item {
    width: 100%;
    display: grid;
    grid-template-columns: auto 4.6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--line-soft);
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 180ms var(--ease-out-expo);
}

.video-playlist-item:hover,
.video-playlist-item:focus-visible,
.video-playlist-item.is-active {
    border-color: var(--accent);
    background: rgba(181, 136, 98, 0.08);
    transform: translateY(-0.08rem);
}

.video-playlist-index {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0;
    border: 1px solid var(--line-soft);
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: normal;
    background: transparent;
}

.video-playlist-item.is-active .video-playlist-index {
    border-color: var(--accent);
    background: rgba(181, 136, 98, 0.14);
    color: var(--text-main);
}

.video-playlist-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    display: block;
    object-fit: cover;
    background: var(--bg-soft);
}

.video-playlist-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.15rem;
}

.video-playlist-copy strong {
    color: var(--text-main);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
}

/* "Now playing" marker — only shown on the active row so inactive rows stay
   compact (the active state is otherwise carried by the accent border/index). */
.video-playlist-now {
    display: none;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.video-playlist-item.is-active .video-playlist-now {
    display: block;
    color: var(--accent-strong);
}

.video-showcase .pill-link {
    min-height: 2.5rem;
}

/* Videos redesign — display hero (text + 2×2 mosaic) and standalone spotlight player below.
   The hero mirrors /milongas/: short H1, counter, and a mosaic of video thumbnails on the
   right that links to each artist. The spotlight iframe player gets its own section so the
   YouTube embed never has to fight the hero grid for height/width. */

.page-hero--display.page-hero--videos-display .mosaic {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    aspect-ratio: 1 / 1;
    max-width: 320px;
    margin-left: auto;
    align-self: start;
    width: 100%;
}

.page-hero.page-hero--display.page-hero--videos-display {
    align-items: start;
    padding: 0 0 8px;
}

.page-hero.page-hero--display.page-hero--videos-display h1.page-hero-display {
    font-size: clamp(48px, 5.2vw, 80px);
    margin-bottom: 14px;
}

@media (min-width: 901px) /* --bp-md +1 */ {
    .page-hero.page-hero--display.page-hero--videos-display {
        grid-template-columns: minmax(280px, 1.6fr) minmax(280px, 0.7fr);
        gap: 48px;
    }
}

.page-videos-index .videos-page-layout {
    gap: 8px;
}

.page-videos-index.page-listing .page-section {
    padding-top: 0.3rem;
}

/* Spotlight player section — full-width within the content grid, never overlaps the hero. */

.videos-spotlight-current {
    margin: 0;
    color: var(--text-soft);
    font-family: var(--font-reading);
    font-size: 1rem;
    line-height: 1.4;
}

@media (max-width: 720px) /* --bp-sm */ {
    .page-hero--videos-display .mosaic {
        max-width: 420px;
        margin-inline: auto;
    }
    }

.videos-artist-block-heading {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.videos-artist-block-heading .eyebrow {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.videos-artist-block-title {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    text-shadow: none;
    max-width: none;
}

.videos-artist-block-title a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms var(--ease-out);
}

.videos-artist-block-title a:hover,
.videos-artist-block-title a:focus-visible {
    color: var(--accent-strong);
}

.page-artist-videos .lyric-hero h1.page-hero-display.detail-hero-display {
    font-size: clamp(2.6rem, 5.4vw, 4.8rem);
}

.artist-video-card--empty {
    grid-column: 1 / -1;
    text-align: center;
}

.videos-editorial {
    margin-top: clamp(2.5rem, 6vw, 5rem);
}

/* ── Videos: page head ──────────────────────────────────────────── */

.videos-page-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2.5rem;
    padding: 1.4rem 0 1.6rem;
}

.videos-page-head-main {
    display: grid;
    gap: 0.55rem;
}

.videos-page-head-main .eyebrow {
    margin: 0;
}

.videos-page-head-main .page-hero-display {
    margin: 0;
}

.videos-page-head-main .page-hero-lede {
    margin: 0.4rem 0 0;
}

.videos-head-stats {
    display: flex;
    gap: 2.4rem;
    padding-bottom: 0.4rem;
    margin: 0;
}

.videos-stat {
    text-align: right;
}

.videos-stat dd {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.01em;
    margin: 0;
}

.videos-stat dt {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 5px;
}

/* ── Videos: featured spotlight ─────────────────────────────────── */

.videos-featured {
    padding: 0.5rem 0 1rem;
}

.videos-feat-label {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent-strong);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1rem;
}

.videos-feat-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(202, 160, 112, 0.16);
    flex: none;
}

.videos-feat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(220px, 1fr);
    gap: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--bg-shell);
    align-items: stretch;
}

.videos-feat-stage .video-player-frame {
    border: 0;
    border-radius: 0;
}

.videos-feat-side {
    padding: 2.4rem 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(160deg, rgba(202, 160, 112, 0.06), transparent 60%);
}

.videos-feat-kicker {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.videos-feat-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.8vw, 2.75rem);
    line-height: 1.0;
    letter-spacing: -0.015em;
    margin: 0;
}

.videos-feat-name a {
    color: inherit;
    transition: color 0.25s ease;
}

.videos-feat-name a:hover,
.videos-feat-name a:focus-visible {
    color: var(--accent-strong);
}

.videos-feat-vid-title {
    font-family: var(--font-reading);
    font-style: italic;
    color: var(--text-soft);
    font-size: 15.5px;
    line-height: 1.45;
    margin: 1.35rem 0 0;
}

.videos-feat-cta {
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-strong);
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    transition: border-color 0.3s, gap 0.3s;
}

.videos-feat-cta:hover,
.videos-feat-cta:focus-visible {
    border-color: var(--accent);
    gap: 16px;
    outline: none;
}

/* ── Videos: jump rail ───────────────────────────────────────────── */

.videos-jump {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0 0.25rem;
    border-top: 1px solid var(--line-soft);
    margin-top: 0.5rem;
}

.videos-jump-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.videos-jump-chips {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.videos-jump-chip {
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text-soft);
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
    white-space: nowrap;
}

.videos-jump-chip:hover,
.videos-jump-chip:focus-visible {
    border-color: var(--accent);
    color: var(--accent-strong);
    background: var(--bg-soft);
    outline: none;
}

/* ── Videos: artist block identity (with avatar) ─────────────────── */

.videos-artist-block-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.videos-artist-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line-strong);
    filter: grayscale(0.25) sepia(0.2) contrast(1.04);
    flex: none;
}

/* ── Video theater layout ──────────────────────────────────────────── */

.video-theater {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-shell);
    box-shadow: var(--shadow-md);
}

.video-theater-stage {
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--line-soft);
}

/* Single-column theater (sidebar / mobile): the stage no longer borrows its
   height from the playlist column, so it needs an explicit 16:9 box. */
.video-theater--compact {
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.video-theater--compact .video-theater-stage,
.video-theater-stage:only-child {
    aspect-ratio: 16 / 9;
    border-right: 0;
}

.video-theater--compact .video-theater-stage {
    border-bottom: 1px solid var(--line-soft);
}

.video-theater--compact .video-theater-playlist {
    max-height: 264px;
}

.video-theater-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--line-soft);
}

.video-theater-head .listing-label {
    margin: 0;
}

.video-theater-head .pill-link {
    flex: none;
}

.video-theater-stage .video-player-frame {
    border: 0;
    border-radius: 0;
}

.video-theater-playlist {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 420px;
    overflow: hidden;
}

.video-theater-playlist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--line-soft);
    flex: none;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.video-theater-playlist-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.video-theater-playlist-scroll::-webkit-scrollbar {
    width: 6px;
}

.video-theater-playlist-scroll::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 6px;
}

.video-theater-playlist-scroll .video-playlist-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.video-theater-playlist-foot {
    flex: none;
    display: flex;
    justify-content: center;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--line-soft);
}

.video-theater-playlist-foot .videos-load-more-button {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* ── Theater playlist items ─────────────────────────────────────── */

.vt-pl-item {
    display: grid;
    grid-template-columns: 22px 88px 1fr;
    gap: 0.7rem;
    align-items: center;
    padding: 0.6rem 0.85rem 0.6rem 0.75rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    color: inherit;
    font-family: inherit;
    transition: background 0.2s ease;
}

.vt-pl-item:last-child {
    border-bottom: 0;
}

.vt-pl-item:hover {
    background: var(--bg-soft);
}

.vt-pl-item.active {
    background: linear-gradient(90deg, rgba(202, 160, 112, 0.12), transparent 90%);
}

.vt-pl-num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.vt-pl-item.active .vt-pl-num {
    color: var(--accent-strong);
}

.vt-pl-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #000;
    flex: none;
}

.vt-pl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.84) grayscale(0.15);
    transition: filter 0.25s ease;
}

.vt-pl-item:hover .vt-pl-thumb img,
.vt-pl-item.active .vt-pl-thumb img {
    filter: none;
}

.vt-pl-title {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vt-pl-item.active .vt-pl-title {
    color: var(--text-main);
}

/* ── Video facade (poster → iframe) ─────────────────────────────── */

.video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: block;
    background: #000;
    overflow: hidden;
}

.video-facade img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 1.1s var(--ease-out-expo), filter 0.5s ease;
    filter: brightness(0.82) contrast(1.03);
}

.video-facade:hover img,
.video-facade:focus-visible img {
    transform: scale(1.05);
    filter: brightness(0.92) contrast(1.05);
}

.video-facade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 11, 13, 0.04) 30%, rgba(8, 7, 8, 0.5) 100%);
    pointer-events: none;
}

.video-play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    z-index: 2;
    background: rgba(13, 11, 13, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
    transition: background 0.3s, transform 0.35s var(--ease-out-expo), border-color 0.3s;
}

.video-facade:hover .video-play-btn,
.video-facade:focus-visible .video-play-btn {
    background: var(--accent);
    color: var(--bg-main);
    border-color: var(--accent);
    transform: translate(-50%, -50%) scale(1.08);
}

.video-play-btn svg {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}

.video-facade-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1rem 1.1rem;
    pointer-events: none;
}

.video-facade-cap-title {
    font-family: var(--font-reading);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.3;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* theater poster (inside theater stage) reuses video-facade */
.video-theater-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: block;
    background: #000;
    overflow: hidden;
}

.video-theater-poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 1.1s var(--ease-out-expo), filter 0.5s ease;
    filter: brightness(0.82) contrast(1.03);
}

.video-theater-poster:hover img,
.video-theater-poster:focus-visible img {
    transform: scale(1.05);
    filter: brightness(0.92) contrast(1.05);
}

.video-theater-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 11, 13, 0.04) 30%, rgba(8, 7, 8, 0.5) 100%);
    pointer-events: none;
}

.video-theater-poster .video-play-btn {
    pointer-events: none;
}

.video-theater-poster-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1rem 1.1rem;
    pointer-events: none;
}

.video-theater-poster-title {
    font-family: var(--font-reading);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.3;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Light theme overrides ──────────────────────────────────────── */

html[data-theme="light"] .video-theater {
    background: var(--paper);
}

html[data-theme="light"] .video-theater-poster .video-play-btn,
html[data-theme="light"] .video-facade .video-play-btn {
    background: rgba(245, 237, 228, 0.42);
    color: var(--text-main);
    border-color: rgba(68, 48, 40, 0.4);
}

html[data-theme="light"] .video-theater-poster:hover .video-play-btn,
html[data-theme="light"] .video-facade:hover .video-play-btn {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

html[data-theme="light"] .videos-feat-grid {
    background: var(--paper);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 900px) /* --bp-md */ {
    .videos-feat-grid {
        grid-template-columns: 1fr;
    }

    .videos-feat-side {
        order: 2;
        padding: 1.6rem 1.5rem;
    }
}

@media (max-width: 720px) /* --bp-sm */ {
    .video-theater {
        grid-template-columns: 1fr;
    }

    .video-theater-stage {
        aspect-ratio: 16 / 9;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .video-theater-playlist {
        max-height: 320px;
    }
}

@media (max-width: 720px) /* --bp-sm */ {
    .videos-page-head {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .videos-head-stats {
        gap: 1.75rem;
    }

    .videos-stat {
        text-align: left;
    }

    .videos-artist-block-identity {
        gap: 0.75rem;
    }

    .videos-artist-avatar {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 560px) /* --bp-xs */ {
    .videos-jump {
        flex-direction: column;
        align-items: flex-start;
    }

    .video-play-btn {
        width: 56px;
        height: 56px;
    }

    .video-play-btn svg {
        width: 20px;
        height: 20px;
    }

    .vt-pl-item {
        grid-template-columns: 18px 72px 1fr;
    }
}

/* ── 23. Contact ────────────────────────────────────────────────── */

.contact-hero {
    background: var(--bg-panel);
}

.contact-hero h1 {
    max-width: 18ch;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
}

.contact-lead {
    max-width: 70ch;
    color: var(--text-soft);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.72;
}

.contact-reference-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-reference-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    padding: 1.3rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
}

/* The flex `gap` owns the vertical rhythm, so cancel the children's own
   margins (header margin-bottom + the paragraph's default block margins)
   that would otherwise stack and make the spacing uneven. */
.contact-reference-card .category-editorial-header {
    margin-bottom: 0;
}

.contact-reference-copy {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.contact-link-list {
    display: grid;
    gap: 0.6rem;
}

.contact-link-card {
    display: grid;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: transparent;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.contact-link-card strong {
    font-size: 1rem;
}

.contact-link-card span {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.contact-link-card:hover,
.contact-link-card:focus-visible {
    border-color: var(--line-strong);
    background: var(--bg-soft);
    transform: none;
}

.contact-reference-copy a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.contact-reference-copy a:hover,
.contact-reference-copy a:focus-visible {
    color: var(--text-main);
}

/* ── 24. Footer ─────────────────────────────────────────────────── */

/* Milonga change report */
.milonga-report-layout { max-width: 1120px; }

.milonga-report-header {
    max-width: 72ch;
    margin: 2rem 0;
}

.milonga-report-header h1 {
    margin: 0.3rem 0 0.75rem;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1;
}

.milonga-report-header > p:last-child {
    color: var(--text-soft);
    font-size: 1.05rem;
}

.milonga-report-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr);
    gap: 1.5rem;
    align-items: start;
}

.milonga-report-context,
.milonga-report-form-panel {
    padding: 1.5rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
}

.milonga-report-context h2 {
    margin: 0.2rem 0 1rem;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.milonga-report-context dl,
.milonga-report-context dd { margin: 0; }

.milonga-report-context dl > div {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--line-soft);
}

.milonga-report-context dt,
.milonga-report-field label {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.milonga-report-context dd {
    overflow-wrap: anywhere;
    color: var(--text-soft);
}

.milonga-report-context dd a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.milonga-report-note {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.milonga-report-form,
.milonga-report-field { display: grid; }
.milonga-report-form { gap: 1rem; }
.milonga-report-field { gap: 0.35rem; }

.milonga-report-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.milonga-report-field label span {
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.milonga-report-field input,
.milonga-report-field select,
.milonga-report-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text-main);
}

.milonga-report-field textarea {
    min-height: 9rem;
    resize: vertical;
}

.milonga-report-field input::placeholder,
.milonga-report-field textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.milonga-report-field input:focus-visible,
.milonga-report-field select:focus-visible,
.milonga-report-field textarea:focus-visible,
.milonga-report-submit:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

.milonga-report-hint,
.milonga-report-submit-note {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.milonga-report-errors,
.milonga-report-error-summary {
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--accent-deep);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text-main);
    font-size: 0.86rem;
}

.milonga-report-errors { padding-left: 1.8rem; }

.milonga-report-feedback {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}

.milonga-report-feedback--error { border-color: var(--accent-deep); }

.milonga-report-submit {
    justify-self: start;
    min-height: 48px;
    padding: 0.65rem 1.2rem;
    border: 1px solid var(--accent-deep);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--bg-main);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.milonga-report-submit:hover:not(:disabled) { background: var(--accent-strong); }

.milonga-report-submit:disabled {
    cursor: wait;
    opacity: 0.62;
}

.milonga-report-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 720px) /* --bp-sm */ {
    .milonga-report-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) /* --bp-xs */ {
    .milonga-report-context,
    .milonga-report-form-panel { padding: 1rem; }

    .milonga-report-row { grid-template-columns: 1fr; }
    .milonga-report-submit { width: 100%; }
}

.site-footer {
    padding: 3.375rem 0 2.5rem;
    border-top: 1px solid var(--line-soft);
    background: rgba(13, 11, 13, 0.4);
}

html[data-theme="light"] .site-footer {
    background: rgba(245, 237, 228, 0.4);
}

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    margin-bottom: 2.25rem;
    align-items: start;
}

.footer-brand {
    display: grid;
    gap: 0.75rem;
}

.footer-brand .brand-mark {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text-main);
    line-height: 1;
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

html[data-theme="light"] .footer-brand .brand-mark,
html[data-theme="dark"] .footer-brand .brand-mark {
    background: none;
}

.footer-brand .brand-mark b {
    font-style: normal;
    font-weight: 700;
}

.footer-brand p {
    color: var(--text-soft);
    font-family: var(--font-reading);
    font-size: 0.875rem;
    line-height: 1.55;
    max-width: 30rem;
    margin: 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.625rem 1.375rem;
    font-family: var(--font-reading);
    padding-top: 0.375rem;
}

.footer-links a {
    color: var(--text-main);
    font-size: 0.9375rem;
    transition: color 160ms ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--accent-strong);
}

.footer-fine {
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    gap: 1.125rem;
    flex-wrap: wrap;
    font-family: var(--font-reading);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.footer-fine-links {
    display: flex;
    gap: 1.375rem;
    flex-wrap: wrap;
}

.footer-fine-links a {
    color: var(--text-soft);
    transition: color 160ms ease;
}

.footer-fine-links a:hover,
.footer-fine-links a:focus-visible {
    color: var(--accent-strong);
}

.footer-fine-meta {
    display: flex;
    gap: 1.125rem;
    flex-wrap: wrap;
    align-items: center;
}

.content-ad-slot {
    padding: 0.8rem 0;
}

.content-ad-inner {
    display: flex;
    justify-content: center;
}

.content-ad-shell {
    width: min(100%, 748px);
    display: grid;
    gap: 0.3rem;
    padding: 0.7rem 0.55rem 0.6rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--bg-soft);
    overflow: hidden;
}

.content-ad-frame {
    padding: 0 0.15rem;
}

.content-ad-label {
    color: var(--text-muted);
    font-size: 0.46rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    opacity: 0.4;
    text-transform: uppercase;
}

.content-adsbygoogle {
    width: 728px;
    max-width: 100%;
    height: 90px;
    margin-inline: auto;
}

.content-ad-shell--placeholder {
    border-style: dashed;
}

.content-adsbygoogle--placeholder {
    display: grid;
    place-items: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-panel) 65%, transparent);
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 720px) /* --bp-sm */ {
    .content-ad-shell {
        width: min(100%, 336px);
        padding: 0.45rem 0.45rem 0.5rem;
    }

    .content-ad-frame {
        padding: 0;
    }

    .content-adsbygoogle {
        width: 320px;
        height: 50px;
    }

    .lyric-content-ad-slot .content-ad-frame,
    .artist-bio-ad-slot .content-ad-frame,
    .content-ad-slot .content-ad-frame {
        min-height: 50px;
        max-height: 50px;
        height: 50px;
    }

    .lyric-content-ad-slot .content-adsbygoogle,
    .artist-bio-ad-slot .content-adsbygoogle,
    .content-ad-slot .content-adsbygoogle {
        width: 320px !important;
        height: 50px !important;
        min-height: 50px;
        max-height: 50px;
    }

    .lyric-content-ad-slot .content-adsbygoogle iframe,
    .artist-bio-ad-slot .content-adsbygoogle iframe,
    .content-ad-slot .content-adsbygoogle iframe {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }
}

/* ── 25. Spotify ────────────────────────────────────────────────── */

.spotify-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--bg-panel-strong);
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.spotify-player-inner {
    display: flex;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.3rem 1rem;
    gap: 0.65rem;
}

.spotify-embed-container {
    flex: 1;
    min-width: 0;
}

.spotify-embed-container iframe {
    display: block;
    width: 100%;
    height: 80px;
    border: none;
    border-radius: var(--radius-sm);
}

.spotify-player-close {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--line-soft);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    width: 2rem;
    height: 2rem;
    min-height: unset;
    padding: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 160ms ease, border-color 160ms ease;
}

.spotify-player-close:hover {
    color: var(--text-main);
    border-color: var(--line-strong);
    filter: none;
    transform: none;
}

body {
    transition: padding-bottom 220ms ease;
}

body.player-active {
    padding-bottom: 5.5rem;
}

.spotify-play-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(29, 185, 84, 0.12);
    color: #d7f7e1;
    border: 1px solid rgba(29, 185, 84, 0.3);
    border-radius: var(--radius-sm);
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
    width: 100%;
    justify-content: center;
    text-transform: none;
}

.detail-action-button--spotify.spotify-play-btn {
    width: 2.45rem;
    min-width: 2.45rem;
    height: 2.45rem;
    min-height: 2.45rem;
    padding: 0;
    border-radius: 999px;
    background: rgba(29, 185, 84, 0.12);
}

.spotify-play-btn:hover {
    background: rgba(29, 185, 84, 0.18);
    border-color: rgba(29, 185, 84, 0.42);
    color: #ebfff1;
    transform: none;
    filter: none;
    box-shadow: none;
}

.spotify-play-btn:active {
    transform: scale(0.98);
}

.spotify-player-status {
    flex: 1;
    padding: 0 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── 26. Pill link / utility ────────────────────────────────────── */

.pill-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0 1rem;
    border: 1px solid color-mix(in srgb, var(--line-strong) 94%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-panel) 84%, transparent);
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
    transition:
        transform 180ms var(--ease-out-expo),
        border-color 160ms ease,
        color 160ms ease,
        background-color 160ms ease;
}

.pill-link:hover,
.pill-link:focus-visible {
    border-color: var(--accent);
    color: var(--accent-strong);
    background: rgba(181, 136, 98, 0.10);
    transform: translateY(-0.12rem);
}

.page-section .milonga-card {
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    transition:
        transform 200ms var(--ease-out-expo),
        background-color 160ms var(--ease-out),
        border-color 160ms var(--ease-out),
        box-shadow 160ms var(--ease-out);
}

.page-section .milonga-card:hover,
.page-section .milonga-card:focus-within {
    transform: translateY(-0.12rem);
    background:
        linear-gradient(180deg, rgba(212, 160, 122, 0.08), transparent 62%),
        var(--bg-soft);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line-strong));
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.16);
}

.page-section .milonga-card:hover .milonga-card-image,
.page-section .milonga-card:focus-within .milonga-card-image {
    transform: scale(1.03);
}

.page-section .milonga-card h3 a:focus-visible,
.page-section .milonga-region-link:focus-visible {
    color: var(--accent-strong);
}

.page-section .milonga-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.1rem;
}

.page-section .milonga-link:focus-visible {
    background: rgba(181, 136, 98, 0.10);
    color: var(--text-main);
    border-color: var(--accent);
}

@keyframes editorial-rise {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .page-home .hero-stage {
        animation: editorial-rise 820ms var(--ease-out-expo) 90ms both;
    }

    .page-home .editorial-card {
        animation: editorial-rise 760ms var(--ease-out-expo) 300ms both;
    }
}

.favorites-page {
    display: grid;
    gap: 1.5rem;
}

.favorites-page__hero,
.favorites-filters-card,
.favorites-empty-card,
.favorites-card {
    padding: clamp(1.1rem, 2vw, 1.4rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-panel-strong);
    box-shadow: var(--shadow-sm);
}

.favorites-page__hero h1,
.favorites-empty-card h2,
.favorites-card h2 {
    margin: 0;
}

.favorites-page__summary,
.favorites-page__count,
.favorites-card__meta {
    margin: 0;
    color: var(--text-muted);
}

.favorites-filters-form {
    display: grid;
    gap: 1rem;
}

.favorites-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.favorites-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.favorites-filter-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-panel) 76%, transparent);
    color: var(--text-soft);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.favorites-filter-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.favorites-filter-chip span {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    padding: 0 0.95rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.favorites-filter-chip.is-active,
.favorites-filter-chip:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line-soft));
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
    color: var(--text-main);
}

.favorites-filters-submit {
    justify-self: start;
}

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.favorites-card {
    display: grid;
    gap: 0.85rem;
}

.favorites-card h2 a {
    color: inherit;
    text-decoration: none;
}

.favorites-card h2 a:hover,
.favorites-card h2 a:focus-visible {
    color: var(--accent);
}

/* ── 26b. Milonga detail ────────────────────────────────────────── */

.milonga-detail-meta {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.milonga-detail-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 0.18rem 0.55rem;
}

.page-milonga-detail .artist-hero {
    padding: clamp(1.5rem, 2.8vw, 2.25rem);
    background:
        radial-gradient(circle at top right, rgba(181, 136, 98, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255, 245, 230, 0.05), transparent 34%),
        var(--bg-panel);
}

.page-milonga-detail .artist-hero h1 {
    max-width: 14ch;
}

.page-milonga-detail .milonga-detail-meta {
    margin-top: 0.55rem;
    color: var(--text-soft);
}

.page-milonga-detail .artist-sidebar-card .artist-placeholder-list a,
.page-milonga-detail .artist-sidebar-card .artist-life-list a {
    color: var(--accent-strong);
    text-decoration: none;
}

.page-milonga-detail .artist-sidebar-card .artist-placeholder-list a:hover,
.page-milonga-detail .artist-sidebar-card .artist-placeholder-list a:focus-visible,
.page-milonga-detail .artist-sidebar-card .artist-life-list a:hover,
.page-milonga-detail .artist-sidebar-card .artist-life-list a:focus-visible {
    color: #f1d6b6;
    text-decoration: underline;
}

@media (max-width: 720px) /* --bp-sm */ {
    .detail-action-bar {
        gap: 0.45rem 0.55rem;
        align-items: center;
    }

    /* Flatten the primary cluster and the vote widget so the Spotify
       button, favorite toggle and both vote buttons share a single row
       instead of each control claiming its own line. */
    .detail-action-cluster--primary,
    .vote-card--action-bar,
    .vote-card--action-bar .vote-card__actions {
        display: contents;
    }

    .vote-card--action-bar {
        margin-left: 0;
    }

    .vote-card__toolbar-label {
        flex-basis: 100%;
        width: 100%;
        order: -1;
        margin-bottom: 0.05rem;
        white-space: normal;
    }
}

/* ── 27. Admin links ────────────────────────────────────────────── */

.admin-edit-link {
    margin-left: 0.5rem;
    color: var(--accent-strong);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.admin-edit-link:hover,
.admin-edit-link:focus-visible {
    text-decoration: underline;
}

/* ── 28. WhatsApp share ── (removed 2026-07: floating button annoyed reading) */

/* ── 29. Utilities ──────────────────────────────────────────────── */

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

.empty-state {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.taxomesh-error-card code,
.taxomesh-error-card pre {
    font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
}

.taxomesh-error-card code {
    color: var(--accent-strong);
    word-break: break-word;
}

.taxomesh-error-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.taxomesh-error-grid h2 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.taxomesh-error-grid pre {
    margin: 0;
    padding: 0.85rem;
    overflow-x: auto;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text-soft);
    line-height: 1.6;
}

.category-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── 30. Light theme overrides ──────────────────────────────────── */

html[data-theme="light"] body {
    background:
        radial-gradient(ellipse 1200px 500px at 0% -10%, rgba(138, 83, 56, 0.06), transparent 70%),
        radial-gradient(ellipse 900px 500px at 100% 5%, rgba(92, 46, 34, 0.07), transparent 65%),
        linear-gradient(180deg, var(--bg-shell) 0%, var(--bg-main) 30%, var(--bg-shell) 100%);
}

html[data-theme="light"] .site-header {
    background: linear-gradient(180deg, rgba(245, 237, 228, 0.88), rgba(245, 237, 228, 0.62));
}

html[data-theme="light"] .hero-stage {
    background:
        linear-gradient(180deg, rgba(255, 250, 244, 0.54), rgba(255, 250, 244, 0.88)),
        var(--paper);
    box-shadow: 0 24px 58px rgba(50, 32, 24, 0.12);
}

html[data-theme="light"] .hero-stage::after {
    background:
        linear-gradient(95deg, rgba(255, 250, 244, 0.94) 0%, rgba(255, 250, 244, 0.74) 30%, transparent 64%),
        linear-gradient(180deg, rgba(168, 104, 72, 0.10) 0%, transparent 24%),
        linear-gradient(0deg, rgba(255, 250, 244, 0.18), transparent 46%);
}

html[data-theme="light"] .page-artist-detail .artist-hero::before {
    filter: grayscale(1) contrast(0.86) brightness(0.82);
    opacity: 0.22;
}

html[data-theme="light"] .page-lyric-detail .lyric-hero::before {
    filter: grayscale(1) contrast(0.88) brightness(0.86);
    opacity: 0.20;
}

html[data-theme="light"] .artist-hero::after,
html[data-theme="light"] .lyric-hero::after {
    background:
        linear-gradient(90deg, rgba(255, 250, 244, 0.92) 0%, rgba(255, 250, 244, 0.5) 38%, transparent 64%),
        linear-gradient(0deg, rgba(255, 250, 244, 0.94) 0%, rgba(255, 250, 244, 0.42) 36%, transparent 62%);
}

html[data-theme="light"] .page-artist-detail .artist-hero--custom-image .artist-hero-media img {
    filter: grayscale(1) contrast(0.88) brightness(0.90);
    opacity: 0.62;
}

html[data-theme="light"] .page-lyric-detail .lyric-hero--custom-image .lyric-hero-media img {
    filter: grayscale(1) contrast(0.88) brightness(0.90);
    opacity: 0.62;
}

html[data-theme="light"] .page-artist-detail .artist-hero--custom-image::after {
    background:
        linear-gradient(90deg, rgba(255, 250, 244, 0.92) 0%, rgba(255, 250, 244, 0.72) 42%, rgba(255, 250, 244, 0.18) 72%, transparent 88%),
        linear-gradient(0deg, rgba(255, 250, 244, 0.72) 0%, rgba(255, 250, 244, 0.22) 38%, transparent 68%);
}

html[data-theme="light"] .page-lyric-detail .lyric-hero--custom-image::after {
    background:
        linear-gradient(90deg, rgba(255, 250, 244, 0.92) 0%, rgba(255, 250, 244, 0.72) 42%, rgba(255, 250, 244, 0.18) 72%, transparent 88%),
        linear-gradient(0deg, rgba(255, 250, 244, 0.72) 0%, rgba(255, 250, 244, 0.22) 38%, transparent 68%);
}

html[data-theme="light"] .artist-hero-credit,
html[data-theme="light"] .lyric-hero-credit {
    background: rgba(255, 250, 244, 0.70);
    border-color: rgba(68, 48, 40, 0.12);
    color: var(--paper-text);
    text-shadow: none;
}

html[data-theme="light"] .artist-hero-credit a,
html[data-theme="light"] .lyric-hero-credit a {
    border-bottom-color: rgba(40, 30, 28, 0.22);
}

html[data-theme="light"] .lyric-sheet {
    background: var(--reading-surface);
}

html[data-theme="light"] .lyric-sidebar-card {
    background: var(--paper);
}

html[data-theme="light"] .artist-sidebar-card {
    background: var(--paper);
}

html[data-theme="light"] .page-hero,
html[data-theme="light"] .category-editorial-card,
html[data-theme="light"] .listing-card {
    background:
        radial-gradient(circle at 18% 18%, rgba(138, 83, 56, 0.10), transparent 32%),
        linear-gradient(155deg, rgba(92, 46, 34, 0.04), transparent 42%),
        var(--paper);
}

html[data-theme="light"] .page-hero--artists-collage::before {
    background:
        radial-gradient(circle at 14% 22%, rgba(138, 83, 56, 0.12), transparent 28%),
        linear-gradient(
            90deg,
            rgba(245, 238, 228, 1) 0%,
            rgba(245, 238, 228, 1) 38%,
            rgba(245, 238, 228, 0.95) 56%,
            rgba(245, 238, 228, 0.74) 74%,
            rgba(245, 238, 228, 0.24) 90%,
            rgba(245, 238, 228, 0.04) 100%
        );
}

html[data-theme="light"] .page-hero-collage::before {
    filter: grayscale(1) sepia(0.08) contrast(0.98) brightness(0.98);
    opacity: 0.88;
}

html[data-theme="light"] .page-hero-collage::after {
    background: linear-gradient(
        90deg,
        rgba(245, 238, 228, 0.99) 0%,
        rgba(245, 238, 228, 0.99) 16%,
        rgba(245, 238, 228, 0.94) 30%,
        rgba(245, 238, 228, 0.8) 46%,
        rgba(245, 238, 228, 0.46) 64%,
        rgba(245, 238, 228, 0.16) 82%,
        rgba(245, 238, 228, 0.03) 100%
    );
}

html[data-theme="light"] .alphabet-panel {
    background: var(--paper);
}

html[data-theme="light"] .videos-artist-block,
html[data-theme="light"] .artist-video-card,
html[data-theme="light"] .videos-empty-state,
html[data-theme="light"] .artist-videos-hero {
    background: var(--paper);
}

html[data-theme="light"] .contact-reference-card {
    background: var(--paper);
}

html[data-theme="light"] .artist-bio-card .autolinked-content-link,
html[data-theme="light"] .lyric-sheet .autolinked-content-link {
    color: var(--reading-link);
}

html[data-theme="light"] .artist-bio-card .autolinked-content-link:hover,
html[data-theme="light"] .lyric-sheet .autolinked-content-link:hover {
    color: var(--reading-text);
}

.artist-bio-card .autolinked-content-link,
.lyric-sheet .autolinked-content-link {
    color: var(--reading-link);
}

.artist-bio-card .autolinked-content-link:hover,
.artist-bio-card .autolinked-content-link:focus-visible,
.lyric-sheet .autolinked-content-link:hover,
.lyric-sheet .autolinked-content-link:focus-visible {
    color: var(--reading-text);
}

html[data-theme="light"] .backdrop-staff {
    border-color: rgba(68, 48, 40, 0.04);
    opacity: 0.5;
}

/* ── 31. Responsive ─────────────────────────────────────────────── */

@media (max-width: 1120px) /* --bp-lg */ {
    .contact-reference-grid,
    .lyric-detail-grid,
    .artist-detail-grid {
        grid-template-columns: 1fr;
    }

    .video-showcase,
    .video-showcase.lyric-sidebar-card {
        position: static;
        max-height: none;
        overflow: hidden;
    }

    .videos-artist-block .video-player-frame {
        min-height: 0;
    }

}

@media (max-width: 1120px) /* --bp-lg */ {
    .site-container {
        width: min(var(--max-width), calc(100% - 1.6rem));
    }

    .brand {
        min-width: 0;
    }

    .nav-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }

    .header-actions {
        width: 100%;
    }

    .auth-modal {
        width: min(100vw - 0.8rem, 42rem);
        max-height: 96dvh;
    }

    .auth-modal__shell {
        padding: 1.1rem;
    }

    .auth-modal__tabs {
        width: 100%;
    }

    .home-hero {
        padding-top: 2.8rem;
    }

    .home-hero h1 {
        max-width: none;
        font-size: clamp(2.8rem, 11vw, 4.4rem);
    }

    .hero-search-form,
    .inline-search-form {
        grid-template-columns: 1fr;
    }

    .search-autocomplete-panel {
        position: static;
        margin-top: 0.45rem;
    }

    .subcategory-grid {
        grid-template-columns: 1fr;
    }

    .listing-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .listing-grid--essentials {
        grid-template-columns: minmax(0, 1fr);
    }

    .artist-listing-avatar--essentials {
        width: 4.3rem;
        height: 4.3rem;
        flex-basis: 4.3rem;
    }

    .listing-avatar-stack-item--essentials {
        margin-left: -0.8rem;
    }

    .listing-avatar-stack--clustered {
        width: 3.55rem;
        height: 3rem;
    }

    .listing-avatar-stack-item--clustered {
        width: 2.45rem;
        height: 2.45rem;
        flex-basis: 2.45rem;
    }

    .listing-avatar-stack-item--clustered:nth-child(1) {
        top: 0.1rem;
    }

    .listing-avatar-stack-item--clustered:nth-child(2) {
        top: 0.6rem;
        left: 1.15rem;
    }

    .listing-avatar-stack--essentials {
        width: 4.9rem;
        height: 4.1rem;
    }

    .listing-avatar-stack-item--clustered.artist-listing-avatar--essentials {
        width: 3.35rem;
        height: 3.35rem;
        flex-basis: 3.35rem;
    }

    .listing-avatar-stack--essentials .listing-avatar-stack-item--clustered:nth-child(2) {
        top: 0.75rem;
        left: 1.6rem;
    }

    .category-index-grid {
        grid-template-columns: 1fr;
    }

    .alphabet-home {
        justify-self: stretch;
    }
}

@media (max-width: 720px) /* --bp-sm */ {
    .video-playlist-list--horizontal {
        grid-auto-columns: minmax(13rem, 80vw);
    }

    .videos-artist-block,
    .artist-video-card {
        padding: 0.9rem;
    }

    .videos-artist-block-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .videos-artist-block-actions {
        width: 100%;
    }

    .videos-artist-block-header {
        padding-bottom: 0.75rem;
    }
}

@media (max-width: 560px) /* --bp-xs */ {
    .brand {
        gap: 0.6rem;
    }

    .brand-mark {
        width: 2.9rem;
        height: 2.9rem;
    }

    .nav-toggle {
        min-height: 2.6rem;
        padding: 0 0.75rem;
    }

    .page-hero,
    .lyric-hero,
    .lyric-sheet,
    .lyric-sidebar-card,
    .artist-hero,
    .artist-bio-card,
    .artist-sidebar-card,
    .alphabet-panel,
    .category-editorial-card {
        border-radius: 0;
    }

    .section-header h1,
    .section-header h2 {
        font-size: clamp(2rem, 9.5vw, 3rem);
    }

    .page-hero--artists-collage {
        padding-right: clamp(8.5rem, 32vw, 10.75rem);
    }

    .page-hero-collage::before {
        inset: 0;
    }

    .subcategory-grid {
        grid-template-columns: 1fr;
    }

    .alphabet-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .alphabet-home,
    .alphabet-link {
        min-width: 44px;
        min-height: 44px;
    }

    .video-showcase {
        max-width: 36rem;
        margin-inline: auto;
    }

    .video-showcase-header {
        justify-items: center;
        text-align: center;
    }

    @media (max-width: 560px) /* --bp-xs */ {
        .page-hero--artists-collage {
            padding-right: clamp(1rem, 4vw, 1.4rem);
        }

        .page-hero--artists-collage::before {
            background:
                radial-gradient(circle at 18% 18%, rgba(181, 136, 98, 0.14), transparent 28%),
                linear-gradient(180deg, rgba(17, 13, 16, 0.08), rgba(17, 13, 16, 0.02));
        }

        .page-hero-collage {
            display: none;
        }
    }

    .video-playlist-item {
        grid-template-columns: auto 4.6rem minmax(0, 1fr);
    }

    .hero-fact-strip li {
        min-width: 0;
        flex: 1 1 100%;
    }

    .artist-hero,
    .lyric-hero {
        min-height: 14rem;
        padding: 1.35rem;
    }
}

@media (max-width: 1120px) /* --bp-lg */ {
    .artist-detail-grid,
    .lyric-detail-grid {
        grid-template-columns: 1fr;
    }

    .page-artist-detail .artist-hero::before {
        background-position: var(--artist-hero-position-md, var(--artist-hero-position, 50% 24%));
        transform: scale(1.01);
    }

    .artist-hero-media img {
        object-position: var(--artist-hero-position-md, var(--artist-hero-position, 50% 24%));
        transform: scale(1.01);
    }

    .lyric-hero-media img {
        object-position: var(--lyric-hero-position-md, var(--lyric-hero-position, 50% 40%));
        transform: scale(1.01);
    }

    .page-artist-detail .artist-hero--portrait-image {
        grid-template-columns: 1fr;
    }

    .page-artist-detail .artist-hero--portrait-image .artist-hero-media {
        inset: 0 0 0 auto;
        width: min(58%, 21rem);
        height: 100%;
    }

    .page-artist-detail .artist-hero--portrait-image .artist-hero-media img {
        object-position: var(--artist-hero-position-md, var(--artist-hero-position, 50% 50%));
        transform: none;
    }

    .page-lyric-detail .lyric-hero--portrait-image {
        grid-template-columns: 1fr;
    }

    .page-lyric-detail .lyric-hero--portrait-image .lyric-hero-media {
        inset: 0 0 0 auto;
        width: min(58%, 21rem);
        height: 100%;
    }

    .page-lyric-detail .lyric-hero--portrait-image .lyric-hero-media img {
        object-position: var(--lyric-hero-position-md, var(--lyric-hero-position, 50% 50%));
        transform: none;
    }

    .artist-hero-credit {
        position: relative;
        right: auto;
        bottom: auto;
        display: inline-block;
        margin-top: 0.65rem;
        max-width: min(34ch, 100%);
    }

    .lyric-hero-credit {
        position: relative;
        right: auto;
        bottom: auto;
        display: inline-block;
        margin-top: 0.65rem;
        max-width: min(34ch, 100%);
    }

    .page-lyric-detail .lyric-hero::before {
        background-position: 50% 40%;
        transform: scale(1.02);
    }
}

@media (max-width: 720px) /* --bp-sm */ {
    .site-container {
        width: min(var(--max-width), calc(100% - 1.2rem));
    }

    .home-hero {
        padding-top: 1.9rem;
    }

    .page-artist-detail .artist-hero::before {
        background-position: var(
            --artist-hero-position-sm,
            var(--artist-hero-position-md, var(--artist-hero-position, 50% 14%))
        );
        transform: scale(1);
    }

    .artist-hero-media img {
        object-position: var(
            --artist-hero-position-sm,
            var(--artist-hero-position-md, var(--artist-hero-position, 50% 14%))
        );
        transform: scale(1);
    }

    .lyric-hero-media img {
        object-position: var(
            --lyric-hero-position-sm,
            var(--lyric-hero-position-md, var(--lyric-hero-position, 54% 38%))
        );
        transform: scale(1);
    }

    .page-artist-detail .artist-hero--portrait-image .artist-hero-media {
        right: 0.8rem;
        width: min(62%, 16rem);
        height: calc(100% - 0.8rem);
    }

    .page-artist-detail .artist-hero--portrait-image .artist-hero-media img {
        object-position: var(
            --artist-hero-position-sm,
            var(--artist-hero-position-md, var(--artist-hero-position, 50% 50%))
        );
        transform: none;
    }

    .page-lyric-detail .lyric-hero--portrait-image .lyric-hero-media {
        right: 0.8rem;
        width: min(62%, 16rem);
        height: calc(100% - 0.8rem);
    }

    .page-lyric-detail .lyric-hero--portrait-image .lyric-hero-media img {
        object-position: var(
            --lyric-hero-position-sm,
            var(--lyric-hero-position-md, var(--lyric-hero-position, 50% 50%))
        );
        transform: none;
    }

    .page-lyric-detail .lyric-hero::before {
        background-position: 54% 38%;
        transform: scale(1.01);
    }

    .lyric-hero-credits,
    .page-lyric-detail .lyric-hero-summary {
        max-width: 100%;
    }

    .page-lyric-detail .lyric-hero-summary {
        font-size: clamp(1.08rem, 5vw, 1.28rem);
        line-height: 1.44;
    }

    .lyric-hero-credit-label {
        font-size: 0.875rem;
        letter-spacing: 0.08em;
    }

    .page-lyric-detail .lyric-hero {
        gap: 0.65rem;
        padding: 1.15rem;
    }

    .artist-listing-header {
        align-items: flex-start;
    }

    .page-artist-detail .artist-hero-subtitle,
    .artist-hero-alias {
        max-width: 100%;
    }

    .page-artist-detail .artist-hero-subtitle {
        font-size: clamp(1.12rem, 5.2vw, 1.38rem);
        line-height: 1.45;
    }

    .artist-hero-alias span {
        display: block;
        margin: 0 0 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

.home-hero .hero-stage-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.65rem, 2.6vw, 2.2rem);
    line-height: 1.08;
    color: var(--text-main);
    margin: 0.15rem 0 0.35rem;
    text-wrap: balance;
}

/* ═══ Editorial H2s on home (2026-04) ═══ */

.home-editorial-h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1.02;
    letter-spacing: -0.005em;
    color: var(--text-main);
    margin: 0;
    text-wrap: balance;
}

.section-sub {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-family: var(--font-reading);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 52ch;
}

/* ═══ Footer responsive (2026-04) ═══ */

@media (max-width: 720px) /* --bp-sm */ {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .footer-links {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 0.625rem 1.125rem;
    }

    .footer-fine {
        justify-content: flex-start;
    }
}

/* ═══ Responsive (2026-04) ═══ */

@media (max-width: 560px) /* --bp-xs */ {
    .home-editorial-h2 {
        font-size: clamp(1.7rem, 7vw, 2.1rem);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   32. HOME — poster + editorial sections (redesign)
   Scoped under .page-home to override prior home rules without
   leaking into other templates that share class names.
═══════════════════════════════════════════════════════════════════ */

/* ── Hero (poster) ─────────────────────────────────────────────── */
.page-home .home-hero {
    position: relative;
    z-index: 2;
    min-height: 0;
    padding: clamp(2.25rem, 3.4vw, 3.25rem) 0;
    color: #f3ede6;
    isolation: isolate;
    overflow: visible;
}
.page-home .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: image-set(
        url("/static/content_catalog/img/hero-artist-piazzolla.04a206ed2540.avif") type('image/avif'),
        url("/static/content_catalog/img/hero-artist-piazzolla.e37223aa26c1.webp") type('image/webp'),
        url("/static/content_catalog/img/hero-artist-piazzolla.4cbe0bec0cd6.jpg") type('image/jpeg')
    );
    background-size: cover;
    background-position: 72% 56%;
    filter: grayscale(.45) contrast(1.05) brightness(.5);
}
.page-home .home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 900px 500px at 18% 45%, rgba(138, 90, 54, .3), transparent 60%),
        linear-gradient(90deg, rgba(13, 11, 13, .88) 0%, rgba(13, 11, 13, .6) 46%, rgba(13, 11, 13, .26) 76%, rgba(13, 11, 13, .48) 100%),
        linear-gradient(180deg, rgba(13, 11, 13, .3) 0%, rgba(13, 11, 13, .48) 68%, var(--bg-main) 100%);
}
html[data-theme="light"] .page-home .home-hero { color: #f5ede4; }
html[data-theme="light"] .page-home .home-hero::before { filter: grayscale(.6) contrast(.95) brightness(.55); }

.page-home .home-hero[data-hero="archive"]::before {
    background-image: url("/static/content_catalog/img/letrastango_collage_real_bw_8x8_v3.31bb4fc83b4a.png");
    background-position: center center;
    filter: grayscale(1) contrast(1.1) brightness(.42);
}
.page-home .home-hero[data-hero="archive"]::after {
    background:
        linear-gradient(90deg, rgba(13, 11, 13, .85) 0%, rgba(13, 11, 13, .55) 55%, rgba(13, 11, 13, .7) 100%),
        linear-gradient(180deg, rgba(13, 11, 13, .4) 0%, rgba(13, 11, 13, .55) 60%, var(--bg-main) 100%);
}
html[data-theme="light"] .page-home .home-hero[data-hero="archive"]::before { filter: grayscale(1) contrast(1.05) brightness(.5); }

.page-home .hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(18rem, .82fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: end;
}
@media (max-width: 900px) /* --bp-md */ { .page-home .hero-inner { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 720px) /* --bp-sm */ { .page-home .hero-inner { padding: 0 20px; } }

.page-home .hero-eyebrow {
    color: var(--accent-strong);
    font-size: 13px;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.page-home .hero-title {
    font-family: var(--font-display);
    font-size: clamp(54px, 6.2vw, 90px);
    line-height: .94;
    font-weight: 500;
    letter-spacing: -.024em;
    font-style: italic;
    max-width: none;
    margin-top: 0;
}
.page-home .hero-title .line-1 { display: block; }
.page-home .hero-title .line-2 {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: .58em;
    letter-spacing: -.01em;
    margin-top: 6px;
    color: rgba(243, 237, 230, .92);
}
.page-home .hero-lede {
    font-family: var(--font-reading);
    font-size: clamp(17px, 1.35vw, 19px);
    line-height: 1.55;
    max-width: 34rem;
    margin-top: 22px;
    color: rgba(243, 237, 230, .86);
}
.page-home .hero-lede a { border-bottom: 1px solid rgba(224, 185, 138, .4); color: #fff; }
.page-home .hero-lede a:hover { color: var(--accent-strong); border-color: var(--accent-strong); }

.page-home .hero-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    margin-top: 26px;
    border: 1px solid rgba(255, 245, 230, .22);
    background: rgba(13, 11, 13, .6);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    max-width: 34rem;
    transition: border-color .2s, background .2s;
    position: relative;
}
.page-home .hero-search:focus-within { border-color: var(--accent); background: rgba(13, 11, 13, .75); }
.page-home .hero-search > svg { width: 20px; height: 20px; color: rgba(243, 237, 230, .6); flex: 0 0 auto; }
.page-home .hero-search input,
.page-home .hero-search input[type="text"],
.page-home .hero-search input[type="search"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f3ede6 !important;
    font-family: var(--font-reading) !important;
    font-size: 18px !important;
    outline: none !important;
    box-shadow: none !important;
}
.page-home .hero-search input:focus,
.page-home .hero-search input:focus-visible {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.page-home .hero-search input::placeholder { color: rgba(243, 237, 230, .5); font-style: italic; }
.page-home .hero-search-kbd {
    font-family: var(--font-ui);
    font-size: 13px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 245, 230, .22);
    border-radius: 4px;
    color: rgba(243, 237, 230, .55);
}

.page-home .hero-search { isolation: isolate; }
.page-home .hero-search[data-search-autocomplete-open="true"] { z-index: 60; }
.page-home .hero-search input::-webkit-search-cancel-button,
.page-home .hero-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.page-home .hero-search .search-autocomplete-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: -1px;
    right: -1px;
    z-index: 60;
    padding: 10px;
    border: 1px solid rgba(255, 245, 230, .22);
    border-radius: var(--radius-md);
    background: #0d0b0d;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.page-home .hero-search .search-autocomplete-status { color: rgba(243, 237, 230, .65); }
.page-home .hero-search .search-autocomplete-group-title { color: var(--accent-strong); }
.page-home .hero-search .search-autocomplete-option { color: #f3ede6; }
.page-home .hero-search .search-autocomplete-option-subtitle {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(243, 237, 230, .62);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.page-home .hero-search .search-autocomplete-groups {
    max-height: min(24rem, calc(100dvh - 21rem));
}
.page-home .hero-search .search-autocomplete-option:hover,
.page-home .hero-search .search-autocomplete-option:focus-visible,
.page-home .hero-search .search-autocomplete-option.is-active {
    background: rgba(224, 185, 138, .14);
    color: #fff;
}

.page-home .hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.page-home .hero-chip {
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid rgba(255, 245, 230, .18);
    color: rgba(243, 237, 230, .75);
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.page-home .hero-chip:hover,
.page-home .hero-chip:focus-visible {
    border-color: var(--accent);
    color: #fff;
    background: rgba(224, 185, 138, .06);
    outline: none;
}

/* Verse-of-the-day card */
.page-home .hero-verse {
    margin: 0 0 .2rem;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    border-top: 1px solid rgba(255, 245, 230, .24);
    border-bottom: 1px solid rgba(255, 245, 230, .14);
    background: linear-gradient(90deg, rgba(13, 11, 13, .62), rgba(13, 11, 13, .28));
    position: relative;
    max-width: 31rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px 20px;
    align-items: start;
}
.page-home .hero-verse-text {
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(25px, 2.35vw, 34px);
    line-height: 1.24;
    color: #f3ede6;
    margin: 0;
    letter-spacing: -.005em;
    min-height: 0;
    transition: opacity .35s ease;
}
.page-home .hero-verse-text.is-fading { opacity: 0; }
.page-home .hero-verse-meta {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-ui);
    font-size: 13px;
    color: rgba(243, 237, 230, .7);
    padding-top: 12px;
    border-top: 1px solid rgba(255, 245, 230, .08);
}
.page-home .hero-verse-meta a {
    color: var(--accent-strong);
    border-bottom: 1px solid transparent;
    transition: border-color .25s;
}
.page-home .hero-verse-meta a:hover { border-bottom-color: var(--accent); }
.page-home .hero-verse-meta .dot { color: rgba(243, 237, 230, .3); }
.page-home .hero-verse > .read-link {
    grid-column: 2;
    align-self: end;
    padding-top: 12px;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(243, 237, 230, .78);
    white-space: nowrap;
    border-bottom: 1px solid rgba(224, 185, 138, .46);
}

/* Hero right — Qué vas a encontrar */
.page-home .hero-stage {
    position: relative;
    border: 1px solid rgba(255, 245, 230, .18);
    background: rgba(13, 11, 13, .55);
    backdrop-filter: blur(16px);
    padding: 34px 34px 28px;
    border-radius: 3px;
    box-shadow: var(--shadow-lg);
    aspect-ratio: auto;
    min-height: 0;
}
.page-home .hero-stage::before,
.page-home .hero-stage::after { content: none; }
.page-home .hero-stage-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 3vw, 40px);
    font-style: italic;
    line-height: 1.02;
    letter-spacing: -.01em;
    font-weight: 600;
    margin-bottom: 22px;
}

/* Pillars nav */
.page-home .hero-pillars {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 245, 230, .14);
    margin-bottom: 14px;
}
.page-home .hero-pillar {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr auto 24px;
    column-gap: 16px;
    align-items: baseline;
    padding: 22px 2px;
    border-bottom: 1px solid rgba(255, 245, 230, .14);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    overflow: hidden;
    transition: transform .45s var(--ease-out);
}
.page-home .hero-pillar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(202, 160, 112, .14), rgba(202, 160, 112, 0) 55%);
    opacity: 0;
    transition: opacity .4s var(--ease-out);
    z-index: -1;
}
.page-home .hero-pillar:hover::before,
.page-home .hero-pillar:focus-visible::before { opacity: 1; }
.page-home .hero-pillar:hover,
.page-home .hero-pillar:focus-visible { transform: translateX(8px); }

.page-home .hp-num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    color: var(--accent-strong);
    line-height: 1;
    transform: translateY(4px);
    opacity: .7;
    transition: opacity .3s;
}
.page-home .hero-pillar:hover .hp-num { opacity: 1; }

.page-home .hp-body { min-width: 0; }
.page-home .hp-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1.05;
    letter-spacing: -.012em;
    margin: 0 0 10px;
    color: #fff;
}
.page-home .hp-title-inner {
    display: inline;
    background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
    background-size: 0 1.5px;
    background-repeat: no-repeat;
    background-position: 0 92%;
    transition: background-size .55s var(--ease-out);
}
.page-home .hero-pillar:hover .hp-title-inner,
.page-home .hero-pillar:focus-visible .hp-title-inner { background-size: 100% 1.5px; }

.page-home .hp-desc {
    margin: 0;
    font-family: var(--font-reading);
    font-size: 16px;
    line-height: 1.55;
    color: rgba(243, 237, 230, .72);
    max-width: 32rem;
}
.page-home .hp-meta {
    align-self: center;
    justify-self: end;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    font-family: var(--font-ui);
    color: var(--text-soft);
    text-align: right;
    white-space: nowrap;
}
.page-home .hp-meta b {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    font-weight: 500;
    color: var(--accent-strong);
    margin-bottom: 4px;
}
.page-home .hp-meta span {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.page-home .hp-arrow {
    align-self: center;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transform: translateX(-6px);
    opacity: .4;
    transition: transform .4s var(--ease-out), opacity .3s, color .3s;
}
.page-home .hero-pillar:hover .hp-arrow,
.page-home .hero-pillar:focus-visible .hp-arrow {
    transform: translateX(0);
    opacity: 1;
    color: var(--accent-strong);
}

/* Milongas — secondary pill */
.page-home .hero-pillar--aside {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr 20px;
    column-gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(202, 160, 112, .28);
    background: rgba(202, 160, 112, .05);
    border-radius: 2px;
    text-decoration: none;
    color: inherit;
    transition: border-color .25s, background .25s;
}
.page-home .hero-pillar--aside:hover {
    border-color: var(--accent);
    background: rgba(202, 160, 112, .12);
}
.page-home .hp-aside-tag {
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent-strong);
    padding: 5px 12px;
    border: 1px solid rgba(202, 160, 112, .4);
}
.page-home .hp-aside-title {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}
.page-home .hp-aside-desc {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-reading);
    font-size: 15px;
    color: rgba(243, 237, 230, .7);
    line-height: 1.5;
    margin-top: 5px;
}
.page-home .hero-pillar--aside .hp-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
}

@media (max-width: 720px) /* --bp-sm */ {
    .page-home .hero-stage { padding: 26px 22px 22px; }
    .page-home .hero-pillar {
        grid-template-columns: 30px 1fr auto;
        column-gap: 14px;
        padding: 18px 0;
    }
    .page-home .hero-pillar .hp-arrow { display: none; }
    .page-home .hp-desc { font-size: 13px; }
    .page-home .hp-meta b { font-size: 18px; }
    /* The aside keeps its own layout: the numbered-pillar grid above must not
       collapse the "Directorio" badge into a 30px cell (its text would overflow
       onto the "Milongas" title). */
    .page-home .hero-pillar--aside {
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        padding: 14px 16px;
    }
}

html[data-theme="light"] .page-home .hero-stage {
    border-color: var(--line-soft);
    background: rgba(255, 255, 255, .7);
}
html[data-theme="light"] .page-home .hero-pillars,
html[data-theme="light"] .page-home .hero-pillar { border-color: var(--line-soft); }
html[data-theme="light"] .page-home .hp-title { color: var(--text-main); }
html[data-theme="light"] .page-home .hp-desc { color: var(--text-soft); }
html[data-theme="light"] .page-home .hp-aside-title { color: var(--text-main); }
html[data-theme="light"] .page-home .hp-aside-desc { color: var(--text-soft); }

/* Primary catalogue navigation follows the hero instead of repeating the
   introductory copy inside it. The four destinations stay equally visible,
   but the typography makes content type and catalogue depth scannable. */
.page-home .home-catalog-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.page-home .home-catalog-link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    gap: .65rem 1rem;
    min-width: 0;
    min-height: 8.75rem;
    padding: 1.35rem 1.5rem 1.2rem;
    border-right: 1px solid var(--line-soft);
    color: var(--text-main);
    transition: background 220ms var(--ease-out), color 220ms var(--ease-out);
}

.page-home .home-catalog-link:last-child {
    border-right: 0;
}

.page-home .home-catalog-link:hover,
.page-home .home-catalog-link:focus-visible {
    background: var(--bg-soft);
    color: var(--accent-strong);
    outline: none;
}

.page-home .home-catalog-link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent-strong);
}

.page-home .home-catalog-name {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.4vw, 2.35rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1;
}

.page-home .home-catalog-description {
    grid-column: 1 / -1;
    max-width: 25ch;
    color: var(--text-soft);
    font-family: var(--font-reading);
    font-size: .94rem;
    line-height: 1.45;
}

.page-home .home-catalog-count {
    align-self: end;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.page-home .home-catalog-count strong {
    margin-right: .28rem;
    color: var(--accent-strong);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
}

.page-home .home-catalog-link .hp-arrow {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 1.15rem;
    height: 1.15rem;
    opacity: .55;
    transform: none;
    transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}

.page-home .home-catalog-link:hover .hp-arrow,
.page-home .home-catalog-link:focus-visible .hp-arrow {
    opacity: 1;
    transform: translateX(.2rem);
}

@media (max-width: 900px) /* --bp-md */ {
    .page-home .home-catalog-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-home .home-catalog-link:nth-child(2) {
        border-right: 0;
    }

    .page-home .home-catalog-link:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line-soft);
    }
}

@media (max-width: 560px) /* --bp-xs */ {
    .page-home .home-catalog-link {
        min-height: 7.5rem;
        padding: 1.2rem 1rem;
    }

    .page-home .home-catalog-description {
        display: none;
    }

    .page-home .home-catalog-name {
        font-size: 1.55rem;
    }
}

/* ── Dual section: artistas + letras ───────────────────────────── */
.page-home .dual {
    padding: 44px 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
}
@media (max-width: 900px) /* --bp-md */ { .page-home .dual { grid-template-columns: 1fr; gap: 44px; } }

.page-home .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}
.page-home .section-head h2 {
    font-size: clamp(32px, 3.6vw, 46px);
    font-style: italic;
    letter-spacing: -.01em;
}
.page-home .section-head .see-all {
    font-family: var(--font-ui);
    font-size: 14px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-soft);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--accent);
    white-space: nowrap;
}
.page-home .section-head .see-all:hover { color: var(--accent-strong); }
.page-home .section-sub {
    font-family: var(--font-reading);
    font-size: 17px;
    color: var(--text-soft);
    margin: -14px 0 22px;
    line-height: 1.6;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 720px) /* --bp-sm */ {
    .page-home .section-sub { white-space: normal; }
}

/* Featured letras list (numbered, editorial) */
.page-home .featured-letras {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-soft);
}
.page-home .fletra {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr 76px 72px;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: center;
    transition: background .25s;
}
.page-home .fletra .year { grid-column: 3; justify-self: end; }
.page-home .fletra > .home-item-actions { grid-column: 4; }
.page-home .fletra:hover { background: var(--bg-soft); }
.page-home .fletra .num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    color: var(--accent-strong);
    padding-left: 4px;
}
.page-home .fletra h3 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 29px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.005em;
    margin-bottom: 6px;
}
.page-home .fletra h3 a {
    display: inline;
    background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s;
}
.page-home .fletra:hover h3 a { background-size: 100% 1px; }
.page-home .fletra .meta {
    font-family: var(--font-reading);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
}
.page-home .fletra .meta .dot { color: var(--text-muted); margin: 0 6px; }
.page-home .fletra .meta a { color: var(--text-main); }
.page-home .fletra .meta a:hover { color: var(--accent-strong); }
.page-home .fletra .year {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--text-soft);
}

/* Artistas esenciales list (portrait rows) */
.page-home .artists-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-soft);
}
.page-home .art-row {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr 92px 72px;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: center;
    transition: background .25s;
}
.page-home .art-row .a-years { grid-column: 3; justify-self: end; }
.page-home .art-row > .home-item-actions { grid-column: 4; }
.page-home .art-row:hover { background: var(--bg-soft); }
.page-home .art-row img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(.5);
    transition: filter .3s;
}
.page-home .art-row:hover img { filter: grayscale(0); }
.page-home .art-row .a-body h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.1;
}
.page-home .art-row .a-body h3 a {
    background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s;
}
.page-home .art-row:hover h3 a { background-size: 100% 1px; }
.page-home .art-row .a-role {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 5px;
    color: var(--text-soft);
    font-family: var(--font-reading);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.42;
    text-transform: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.page-home .art-row .a-years {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--text-soft);
}

/* ── Obras fundamentales ────────────────────────────────────────── */
.page-home .works-section {
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid var(--line-soft);
}
.page-home .works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 900px) /* --bp-md */ { .page-home .works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) /* --bp-xs */ { .page-home .works-grid { grid-template-columns: 1fr; } }
.page-home .wcard {
    position: relative;
    padding: 20px 20px 18px;
    border: 1px solid var(--line-soft);
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .3s var(--ease-out), border-color .25s, background .25s;
}
html[data-theme="light"] .page-home .wcard { background: var(--bg-shell); }
.page-home .wcard:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.page-home .wcard .w-kind {
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent-strong);
}
.page-home .wcard h3 {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.005em;
    margin-top: 2px;
}
.page-home .wcard h3 a {
    background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s;
    padding-bottom: 1px;
}
.page-home .wcard:hover h3 a { background-size: 100% 1px; }
.page-home .wcard .w-meta {
    font-family: var(--font-reading);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.page-home .wcard .w-meta a { color: var(--text-main); }
.page-home .wcard .w-meta a:hover { color: var(--accent-strong); }
.page-home .wcard .w-year {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--text-muted);
    margin-left: auto;
}
.page-home .wcard .w-wave {
    width: 100%;
    height: 28px;
    margin-top: 14px;
    color: var(--accent);
    opacity: .55;
    transition: opacity .3s, color .3s;
}
.page-home .wcard:hover .w-wave { opacity: .9; color: var(--accent-strong); }

/* ── Milongas ───────────────────────────────────────────────────── */
.page-home .milongas {
    padding: 40px 0;
}
.page-home .milongas-wrap {
    position: relative;
    padding: 32px 34px;
    border: 1px solid var(--line-soft);
    background:
        linear-gradient(165deg, rgba(202, 160, 112, .06), transparent 55%),
        var(--bg-panel);
    overflow: hidden;
}
.page-home .milongas-wrap::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(202, 160, 112, .14), transparent 70%);
    pointer-events: none;
}
@media (max-width: 720px) /* --bp-sm */ { .page-home .milongas-wrap { padding: 32px 24px; } }

.page-home .milongas-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
    margin-bottom: 22px;
}
@media (max-width: 720px) /* --bp-sm */ { .page-home .milongas-head { grid-template-columns: 1fr; } }
.page-home .milongas-head h2 {
    font-size: clamp(38px, 4.5vw, 58px);
    font-style: italic;
    letter-spacing: -.01em;
}
.page-home .milongas-head .lede {
    font-family: var(--font-reading);
    font-size: 17px;
    color: var(--text-soft);
    margin-top: 10px;
    max-width: 42rem;
}

.page-home .city-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.page-home .city-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    color: var(--text-soft);
    background: var(--bg-soft);
    border-radius: 99px;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.page-home .city-chip:hover { border-color: var(--accent); color: var(--accent-strong); }
.page-home .city-chip.on,
.page-home .city-chip.is-active {
    border-color: var(--accent);
    color: var(--accent-strong);
    background: rgba(202, 160, 112, .12);
}
.page-home .city-chip small {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--font-display);
    font-style: italic;
}

.page-home .milongas-top-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.page-home .milongas-top-head .hl {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent-strong);
    font-size: 20px;
    letter-spacing: 0;
    text-transform: none;
}
.page-home .milongas-top-head a {
    font-size: 13px;
    letter-spacing: .22em;
    color: var(--text-soft);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
}

.page-home .milongas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 900px) /* --bp-md */ { .page-home .milongas-grid { grid-template-columns: 1fr; } }
.page-home .mcard {
    position: relative;
    padding: 20px 22px 22px;
    border: 1px solid var(--line-soft);
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .3s var(--ease-out), border-color .25s, background .25s;
    min-height: 270px;
}
html[data-theme="light"] .page-home .mcard { background: var(--bg-shell); }
.page-home .mcard:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.page-home .mcard .m-barrio {
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent-strong);
}
.page-home .mcard h3 {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.005em;
}
.page-home .mcard h3 a {
    background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s;
}
.page-home .mcard:hover h3 a { background-size: 100% 1px; }
.page-home .mcard .m-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-reading);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
    margin-top: 2px;
}
.page-home .mcard .m-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.page-home .mcard .m-ico {
    width: 16px;
    height: 16px;
    color: var(--accent-strong);
    flex-shrink: 0;
}
.page-home .mcard .m-bio {
    font-family: var(--font-reading);
    font-size: 15px;
    color: var(--text-soft);
    line-height: 1.55;
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.page-home .mcard .m-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--line-soft);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.page-home .mcard .m-btn {
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-soft);
    transition: border-color .2s, color .2s, background .2s;
}
.page-home .mcard .m-btn:hover {
    border-color: var(--accent-strong);
    color: var(--accent-strong);
}

/* ── Editorial closing ──────────────────────────────────────────── */
.page-home .editorial {
    padding: 44px 0;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 56px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 900px) /* --bp-md */ { .page-home .editorial { grid-template-columns: 1fr; } }
.page-home .editorial .ed-label {
    font-size: 13px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.page-home .editorial h2 {
    margin-top: 14px;
    font-size: clamp(38px, 4vw, 54px);
    font-style: italic;
    letter-spacing: -.01em;
    line-height: 1.02;
}
.page-home .editorial-body {
    font-family: var(--font-reading);
    font-size: 19px;
    line-height: 1.65;
    color: var(--text-soft);
}
.page-home .editorial-body p + p { margin-top: 1em; }
.page-home .editorial-body em { color: var(--accent-strong); font-style: italic; }

/* ── Home item actions (favorite + Spotify icons on item rows/cards) ──
   Editorial pattern: minimal icons fading in on hover. On rows (fletra,
   art-row) the cluster sits in its own grid column to the right of the
   year so they never overlap. On cards (wcard, mcard) it floats at the
   top-right corner where there is no metadata to collide with. */
.page-home .home-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    z-index: 3;
    pointer-events: auto;
}
.page-home .wcard .home-item-actions,
.page-home .mcard .home-item-actions {
    position: absolute;
    top: 14px;
    right: 14px;
}
.page-home .home-fav-wrap {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
/* Lock each icon to its own grid slot in the row clusters so layout
   never shifts when one of them is conditionally rendered. */
.page-home .fletra .home-item-actions .home-fav-wrap,
.page-home .art-row .home-item-actions .home-fav-wrap {
    grid-column: 1;
    justify-self: center;
}
.page-home .fletra .home-item-actions .home-spot-btn,
.page-home .art-row .home-item-actions .home-spot-btn {
    grid-column: 2;
    justify-self: center;
}
.page-home .home-fav-status {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px 10px;
    background: var(--bg-panel, var(--bg-soft));
    border: 1px solid var(--line-soft);
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: .04em;
    white-space: nowrap;
    border-radius: 2px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.page-home .home-fav-btn,
.page-home .home-spot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: opacity .25s var(--ease-out, ease), transform .25s var(--ease-out, ease), color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
/* Favorite stays visible always — outline by default, filled when active.
   Spotify keeps the editorial reveal-on-hover pattern. */
.page-home .home-fav-btn {
    opacity: .55;
    transform: none;
}
.page-home .home-spot-btn {
    opacity: 0;
    transform: translateY(-3px);
    color: #1DB954;
}
.page-home .home-fav-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
}
.page-home .home-fav-btn svg,
.page-home .home-spot-btn svg {
    width: 17px;
    height: 17px;
    transition: transform .25s var(--ease-out-expo);
}
.page-home .home-fav-btn svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

/* Reveal Spotify on parent hover or when it receives focus.
   Favorite is already visible (outline) — bump it to full opacity too. */
.page-home .fletra:hover .home-item-actions > *,
.page-home .wcard:hover .home-item-actions > *,
.page-home .art-row:hover .home-item-actions > *,
.page-home .mcard:hover .home-item-actions > *,
.page-home .home-item-actions > *:focus-visible,
.page-home .home-item-actions > *:focus-within {
    opacity: 1;
    transform: translateY(0);
}

/* When a favorite is saved, keep the heart fully visible and filled
   so the reader can scan their archive at a glance. */
.page-home .home-fav-btn.is-active {
    opacity: 1;
    transform: none;
    color: var(--accent-strong);
}
.page-home .home-fav-btn.is-active svg path {
    fill: currentColor;
    stroke: currentColor;
}

/* Hover/focus states */
.page-home .home-fav-btn:hover,
.page-home .home-fav-btn:focus-visible {
    color: var(--accent-strong);
}
.page-home .home-fav-btn:hover svg {
    transform: scale(1.08);
}
.page-home .home-spot-btn:hover,
.page-home .home-spot-btn:focus-visible {
    color: #1ed760;
}
.page-home .home-spot-btn:hover svg {
    transform: scale(1.12);
}

.page-home .home-fav-btn:focus-visible,
.page-home .home-spot-btn:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: -4px;
    border-radius: 4px;
}
/* Suppress the focus ring after a click — only show it for keyboard focus. */
.page-home .home-fav-btn:focus:not(:focus-visible),
.page-home .home-spot-btn:focus:not(:focus-visible) {
    outline: none;
}

/* Disabled / pressed micro-feedback */
.page-home .home-fav-btn:active,
.page-home .home-spot-btn:active {
    transform: translateY(0) scale(.96);
}
.page-home .home-fav-btn:disabled,
.page-home .home-spot-btn:disabled {
    cursor: progress;
    opacity: .65;
}

/* fletra & art-row: actions sit in their own grid column with two fixed
   slots so the favorite icon always lands in the same x across rows
   whether or not the Spotify icon is visible. */
.page-home .fletra .home-item-actions,
.page-home .art-row .home-item-actions {
    display: grid;
    grid-template-columns: 30px 30px;
    align-items: center;
    gap: 2px;
    align-self: center;
    justify-self: end;
}

/* mcard: pull a touch tighter into the corner of the card. */
.page-home .mcard .home-item-actions {
    top: 12px;
    right: 12px;
}

/* On narrow viewports: keep them visible (no hover on touch) and
   reduce footprint so they don't crowd the header. */
@media (max-width: 720px) /* --bp-sm */ {
    .page-home .home-item-actions > * {
        opacity: 1;
        transform: none;
    }
    .page-home .home-fav-btn,
    .page-home .home-spot-btn {
        width: 26px;
        height: 26px;
    }
    .page-home .home-fav-btn svg,
    .page-home .home-spot-btn svg {
        width: 15px;
        height: 15px;
    }
}

/* Mobile: simplify fletra/art-row to two-column grid with year + actions
   wrapping below the heading. */
@media (max-width: 560px) /* --bp-xs */ {
    .page-home .fletra {
        grid-template-columns: 30px minmax(0, 1fr) 58px;
        gap: 8px 12px;
    }
    .page-home .fletra .num { grid-column: 1; grid-row: 1 / span 2; }
    .page-home .fletra > div { grid-column: 2; grid-row: 1; }
    .page-home .fletra .year { grid-column: 2; grid-row: 2; font-size: 14px; justify-self: start; }
    .page-home .fletra .home-item-actions { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin-left: 0; }
    .page-home .art-row {
        grid-template-columns: 56px minmax(0, 1fr) 58px;
        gap: 8px 12px;
    }
    .page-home .art-row img { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; }
    .page-home .art-row .a-body { grid-column: 2; grid-row: 1; }
    .page-home .art-row .a-years { grid-column: 2; grid-row: 2; justify-self: start; }
    .page-home .art-row .home-item-actions { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin-left: 0; }
}

/* Hero search input — overrides the global input[type="text"] min-height/padding/border */
.page-home .hero-search {
    padding: 12px 18px !important;
}
.page-home .hero-search input,
.page-home .hero-search input[type="text"],
.page-home .hero-search input[type="search"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f3ede6 !important;
    font-family: var(--font-reading) !important;
    font-size: 18px !important;
    outline: none !important;
    box-shadow: none !important;
}
.page-home .hero-search input:focus,
.page-home .hero-search input:focus-visible,
.page-home .hero-search input[type="text"]:focus,
.page-home .hero-search input[type="search"]:focus {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ════ 33. Letras / Obras index — page-hero variant "display" (lyrics-display, works-display) ════
   Mirror of `Letras redesign.html` Variant A (.va-hero / .va-tools / .top-heading / .editorial). */

/* Hero is an open two-column layout — text on the left, 3×3 mosaic on the right.
   Mirrors `.va-hero` from `Letras redesign.html`. */
.page-hero.page-hero--display {
    padding: 48px 0 40px;
    margin: 0;
    max-width: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(440px, 1.35fr);
    gap: 56px;
    align-items: end;
}

.page-hero.page-hero--display::before,
.page-hero.page-hero--display::after {
    display: none;
    content: none;
}

.page-hero.page-hero--display .hero-grain-canvas {
    display: none;
}

.page-hero--display .page-hero-content {
    display: block;
    min-width: 0;
}

.page-hero--display .page-hero-content--minimal {
    padding-block: 0;
}

.page-hero.page-hero--display:has(.page-hero-content--minimal) {
    padding: 24px 0 20px;
    align-items: start;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) /* --bp-sm */ {
    .page-hero.page-hero--display:has(.page-hero-content--minimal) h1.page-hero-display {
        white-space: nowrap;
        font-size: clamp(56px, 8vw, 116px);
    }
}

.page-hero--display .page-hero-content--minimal .hero-search {
    margin-top: 20px;
}

@media (max-width: 900px) /* --bp-md */ {
    .page-hero.page-hero--display {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.page-hero--display .page-hero-admin {
    margin-top: 16px;
}

.page-hero--display .eyebrow {
    margin: 0 0 18px;
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--accent-text);
}

.page-hero.page-hero--display h1.page-hero-display {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(64px, 9vw, 132px);
    line-height: 0.88;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
    max-width: none;
    text-wrap: balance;
    text-shadow: none;
}

.page-hero-display em {
    font-style: normal;
    font-weight: 700;
    color: var(--accent-strong);
}

.page-hero.page-hero--display h1.page-hero-display .page-hero-display-main {
    display: block;
}

.page-hero.page-hero--display h1.page-hero-display .page-hero-display-sub {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    margin-top: 16px;
    line-height: 1;
}

.page-hero.page-hero--display h1.page-hero-display .page-hero-display-sub-rule {
    flex: 0 0 auto;
    width: clamp(28px, 4vw, 56px);
    height: 1px;
    background: var(--accent-strong);
    opacity: 0.85;
}

.page-hero.page-hero--display h1.page-hero-display .page-hero-display-sub-label {
    font-family: var(--font-ui);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(11px, 0.85vw, 13px);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}

.page-hero.page-hero--display h1.page-hero-display .page-hero-display-sub-key {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 1.7vw, 24px);
    letter-spacing: -0.005em;
    color: var(--accent-strong);
    line-height: 1;
}

.page-hero.page-hero--display p.page-hero-lede {
    font-family: var(--font-reading);
    font-size: 19px;
    line-height: 1.5;
    color: var(--text-soft);
    max-width: 30rem;
    margin: 0;
}

/* Counter strip — number on top (display), label uppercase below. */
.page-hero-counter {
    display: flex;
    gap: 36px;
    margin: 28px 0 0;
    padding: 0;
    flex-wrap: wrap;
}

.page-hero-counter > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    margin: 0;
}

.page-hero-counter dt {
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--text-muted);
    margin: 0;
}

.page-hero-counter dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 500;
    color: var(--text-main);
    letter-spacing: 0;
    line-height: 1;
}

/* Hero search — uses mockup `.search-box` aesthetic (not the dark glassmorphism of the home). */
.page-hero--display .hero-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    margin-top: 32px;
    max-width: 100%;
    border: 1px solid var(--line-strong);
    background: var(--bg-panel);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
    position: relative;
    isolation: isolate;
}

.page-hero--display .hero-search:focus-within {
    border-color: var(--accent);
}

.page-hero--display .hero-search[data-search-autocomplete-open="true"] {
    z-index: 60;
}

.page-hero--display .hero-search > svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex: 0 0 auto;
}

.page-hero--display .hero-search input,
.page-hero--display .hero-search input[type="text"],
.page-hero--display .hero-search input[type="search"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-main) !important;
    font-family: var(--font-reading) !important;
    font-size: 17px !important;
    outline: none !important;
    box-shadow: none !important;
}

.page-hero--display .hero-search input:focus,
.page-hero--display .hero-search input:focus-visible {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.page-hero--display .hero-search input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.page-hero--display .hero-search input::-webkit-search-cancel-button,
.page-hero--display .hero-search input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.page-hero--display .hero-search-kbd {
    font-family: var(--font-ui);
    font-size: 11px;
    padding: 2px 7px;
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    color: var(--text-muted);
}

.page-hero--display .hero-search .search-autocomplete-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: -1px;
    right: -1px;
    z-index: 60;
    padding: 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--bg-panel-strong);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.page-hero--display .hero-search .search-autocomplete-status {
    color: var(--text-soft);
}

.page-hero--display .hero-search .search-autocomplete-group-title {
    color: var(--accent-text);
}

.page-hero--display .hero-search .search-autocomplete-option {
    color: var(--text-main);
}

.page-hero--display .hero-search .search-autocomplete-option-subtitle {
    color: var(--text-soft);
}

.page-hero--display .hero-search .search-autocomplete-option:hover,
.page-hero--display .hero-search .search-autocomplete-option:focus-visible,
.page-hero--display .hero-search .search-autocomplete-option.is-active {
    background: rgba(224, 185, 138, 0.14);
    color: var(--text-main);
}

/* Variant-scoped alphabet — flat horizontal layout, no boxed cells. */
.page-hero-variant-display .alphabet-panel {
    border: 0;
    background: transparent;
    padding: 0;
    margin-top: 16px;
}

.page-hero-variant-display .alphabet-panel-heading-row h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--text-main);
    letter-spacing: -0.01em;
    margin: 0;
}

.page-hero-variant-display .alphabet-panel-header > p {
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--text-muted);
    margin: 4px 0 14px;
}

.page-hero-variant-display .alphabet-toolbar {
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 14px 0;
}

.page-hero-variant-display .alphabet-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.page-hero-variant-display .alphabet-link {
    flex: 1 1 0;
    min-width: 40px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 22px;
    padding: 10px 0;
    color: var(--text-soft);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    transition: background 0.2s, color 0.2s;
}

.page-hero-variant-display .alphabet-link:hover {
    color: var(--accent-text);
    background: var(--bg-soft);
}

.page-hero-variant-display .alphabet-link.is-active {
    color: var(--accent-text);
    background: var(--bg-soft);
}

.page-hero-variant-display .alphabet-link.is-disabled {
    color: var(--text-muted);
    opacity: 0.4;
    background: transparent;
}

/* Tighten the display-variant alphabet on phones: the 22px serif letters
   with 10px vertical padding make the grid needlessly tall. */
@media (max-width: 560px) /* --bp-xs */ {
    .page-hero-variant-display .alphabet-toolbar {
        padding: 10px 0;
    }

    .page-hero-variant-display .alphabet-grid {
        gap: 1px;
    }

    .page-hero-variant-display .alphabet-link {
        min-width: 44px;
        min-height: 44px;
        font-size: 17px;
        padding: 6px 0;
    }

    /* Tighten spacing before the Top-N section on phones. */
    .page-hero-variant-display .listing-section-header {
        margin-top: 20px;
        padding-top: 0;
    }

    .page-hero-variant-display .listing-section-header::before {
        display: none;
    }
}

/* Variant-scoped Top-N section heading. */
.page-hero-variant-display .listing-section-header {
    margin: 52px 0 22px;
    border: 0;
    padding: 28px 0 0;
    background: transparent;
}

.page-hero-variant-display .listing-section-header .eyebrow {
    margin-bottom: 6px;
}

.page-hero-variant-display .listing-section-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.page-hero-variant-display .listing-section-heading-row h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--text-main);
    margin: 0;
}

.page-hero-variant-display .listing-section-heading-row .count-em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--accent-strong);
    font-size: 0.7em;
    letter-spacing: 0;
    margin-left: 0.2em;
}

/* Replace the rounded pill with an underlined view-all link in this variant. */
.page-hero-variant-display .listing-section-heading-row .pill-link {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--accent);
    border-radius: 0;
    padding: 0 0 2px;
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-soft);
    box-shadow: none;
    white-space: nowrap;
}

.page-hero-variant-display .listing-section-heading-row .pill-link:hover,
.page-hero-variant-display .listing-section-heading-row .pill-link:focus-visible {
    color: var(--accent-strong);
    background: transparent;
    border-bottom-color: var(--accent-strong);
}

.page-hero-variant-display .listing-actions .pill-link {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--accent);
    border-radius: 0;
    padding: 0 0 2px;
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-soft);
    box-shadow: none;
}

/* Editorial card — match the home editorial typography & layout. */
.page-hero-variant-display .category-editorial-card {
    margin-top: 60px;
    padding: 40px 0 0;
    border: 0;
    border-top: 1px solid var(--line-soft);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.page-hero-variant-display .category-editorial-card .category-editorial-header {
    margin-bottom: 18px;
}

.page-hero-variant-display .category-editorial-card .listing-label {
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.page-hero-variant-display .editorial-grid {
    margin-top: 32px;
}

.page-hero-variant-display .category-editorial-card h2,
.page-hero-variant-display .editorial-grid .category-editorial-card h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: var(--text-main);
    margin: 0;
    text-wrap: balance;
}

.page-hero-variant-display .category-editorial-text {
    font-family: var(--font-reading);
    font-size: 19px;
    line-height: 1.65;
    color: var(--text-soft);
}

/* Hero verse-of-the-day quote — ported from `Letras redesign.html` Variant A. */
.page-hero--display .hero-quote {
    margin: 28px 0 0;
    padding: 22px 0 4px 26px;
    border-left: 2px solid var(--accent);
    max-width: 32rem;
    position: relative;
}

.page-hero--display .hero-quote::before {
    content: "\201C";
    position: absolute;
    left: 14px;
    top: -12px;
    font-family: var(--font-display);
    font-size: 60px;
    line-height: 1;
    color: var(--accent-strong);
    opacity: 0.55;
    pointer-events: none;
}

.page-hero--display .hero-quote blockquote {
    margin: 0;
}

.page-hero--display .hero-quote blockquote p {
    font-family: var(--font-reading);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(19px, 1.6vw, 23px);
    line-height: 1.4;
    color: var(--text-main);
    margin: 0;
    text-wrap: pretty;
    transition: opacity 0.35s var(--ease-out, cubic-bezier(0.25, 1, 0.5, 1));
}

.page-hero--display .hero-quote figcaption {
    margin-top: 12px;
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    transition: opacity 0.35s var(--ease-out, cubic-bezier(0.25, 1, 0.5, 1));
}

.page-hero--display .hero-quote figcaption .author {
    color: var(--accent-text);
    border-bottom: 1px solid rgba(202, 160, 112, 0.4);
    padding-bottom: 1px;
    transition: border-color 0.2s, color 0.2s;
}

.page-hero--display .hero-quote figcaption .author[aria-disabled="true"] {
    pointer-events: none;
    border-bottom-color: transparent;
}

.page-hero--display .hero-quote figcaption .author:hover {
    color: var(--text-main);
    border-bottom-color: var(--accent-strong);
}

.page-hero--display .hero-quote figcaption .ctx {
    color: var(--text-muted);
}

.page-hero--display .hero-quote figcaption .ctx:empty {
    display: none;
}

.page-hero--display .hero-quote figcaption .ctx:not(:empty)::before {
    content: "·";
    margin-right: 10px;
    color: var(--text-muted);
}

.page-hero--display .hero-quote figcaption .ctx a {
    color: var(--text-soft);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.page-hero--display .hero-quote figcaption .ctx a:hover {
    color: var(--accent-text);
    border-bottom-color: var(--accent-strong);
}

.page-hero--display .hero-quote.is-fading blockquote p,
.page-hero--display .hero-quote.is-fading figcaption {
    opacity: 0;
}

/* Mosaic 3×3 — right-side companion to the hero text. */
.page-hero--display .mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    aspect-ratio: 1 / 1;
    position: relative;
    box-shadow: var(--shadow-lg);
    min-width: 0;
}

.page-hero--display .mosaic-tile {
    position: relative;
    overflow: hidden;
    background: #1a1418;
    border-radius: 2px;
    isolation: isolate;
    display: block;
}

.page-hero--display .mosaic-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(0.25) contrast(1.05) brightness(0.9);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s;
}

.page-hero--display .mosaic-tile:hover img {
    transform: scale(1.06);
    filter: grayscale(0) brightness(1);
}

.page-hero--display .mosaic-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 11, 13, 0) 40%, rgba(13, 11, 13, 0.82));
    z-index: 1;
}

.page-hero--display .mosaic-tile .m-label {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 2;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    line-height: 1.15;
    color: #f3ede6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.page-hero--display .mosaic-tile .m-label small {
    display: block;
    font-family: var(--font-ui);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(243, 237, 230, 0.72);
    margin-bottom: 3px;
}

.page-hero--display .mosaic-tile--center {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #1c1419, #0c0a0c);
    color: var(--accent-strong);
    overflow: hidden;
}

.page-hero--display .mosaic-tile--center::after {
    display: none;
}

.page-hero--display .mosaic-tile--center .stamp {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 0.95;
    text-align: center;
    letter-spacing: -0.01em;
}

.page-hero--display .mosaic-tile--center .stamp small {
    display: block;
    margin-top: 6px;
    font-family: var(--font-ui);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    text-transform: uppercase;
}

@media (max-width: 720px) /* --bp-sm */ {
    .page-hero.page-hero--display {
        padding: 28px 0 24px;
    }
    .page-hero-counter {
        gap: 22px;
    }
    .page-hero-counter dd {
        font-size: 30px;
    }
}

/* Task-first Letras index, used as the single default presentation. */

body.lyrics-task-first .page-hero.page-hero--lyrics-display {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
    padding-block: 32px 20px;
}

body.lyrics-task-first .page-hero--lyrics-display .page-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: 64px;
    width: 100%;
}

body.lyrics-task-first .page-hero--lyrics-display .eyebrow {
    display: none;
}

body.lyrics-task-first .page-hero.page-hero--lyrics-display h1.page-hero-display {
    order: 1;
    grid-column: 1;
    grid-row: 1;
    max-width: 10ch;
    margin-bottom: 16px;
    font-size: clamp(48px, 6.5vw, 76px);
    line-height: 0.94;
}

body.lyrics-task-first .page-hero--lyrics-display .letras-index-v2-lede {
    display: block;
    order: 2;
    grid-column: 1;
    grid-row: 2;
    max-width: 60ch;
    font-size: 22px;
    line-height: 1.5;
    color: var(--text-soft);
}

body.lyrics-task-first .page-hero--lyrics-display .hero-search {
    order: 3;
    grid-column: 1;
    grid-row: 3;
    margin-top: 24px;
    padding: 18px 20px;
    border-color: var(--line-strong);
}

body.lyrics-task-first .page-hero--lyrics-display .hero-search input,
body.lyrics-task-first .page-hero--lyrics-display .hero-search input[type="text"] {
    font-size: 20px !important;
}

body.lyrics-task-first .letras-index-start {
    display: block;
    order: 4;
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    min-width: 0;
    margin-top: 0;
    padding-block: 0;
    border-top: 0;
}

.letras-index-start-heading {
    margin-bottom: 10px;
}

.letras-index-start-heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 32px;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    color: var(--text-main);
    white-space: nowrap;
}

.letras-index-start-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(300px, 1.18fr);
    gap: 12px;
    height: 301px;
}

.letras-index-start-list {
    display: flex;
    min-width: 0;
    height: 301px;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    overscroll-behavior-block: contain;
    margin: 0;
    padding: 0 6px 0 0;
    list-style: none;
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
}

.letras-index-start-list::-webkit-scrollbar {
    width: 3px;
}

.letras-index-start-list::-webkit-scrollbar-thumb {
    background: var(--line-strong);
}

.letras-index-start-list:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 4px;
}

.letras-index-start-list li {
    flex: 0 0 44px;
    min-width: 0;
}

.letras-index-start a {
    position: relative;
    overflow: hidden;
    min-width: 0;
    height: 100%;
    color: var(--text-main);
    transition: color 180ms var(--ease-out);
}

.letras-index-start a:hover,
.letras-index-start a:focus-visible {
    color: var(--accent-text);
}

.letras-index-start a img {
    display: block;
    object-fit: cover;
    filter: saturate(0.78) contrast(1.04);
    transition: filter 180ms var(--ease-out);
}

.letras-index-start a:hover img,
.letras-index-start a:focus-visible img {
    filter: saturate(1) contrast(1.08);
}

.letras-index-start-copy {
    min-width: 0;
}

.letras-index-start-copy strong {
    display: block;
    font-family: var(--font-reading);
    font-weight: 600;
    line-height: 1.15;
}

.letras-index-start-copy small {
    display: block;
    margin-top: 4px;
    font-family: var(--font-ui);
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

a.letras-index-start-featured {
    min-height: 301px;
    background: var(--bg-soft);
}

a.letras-index-start-featured::after {
    content: "";
    position: absolute;
    inset: 38% 0 0;
    background: linear-gradient(to bottom, transparent, rgba(8, 6, 9, 0.92));
    pointer-events: none;
}

a.letras-index-start-featured img {
    width: 100%;
    height: 100%;
}

a.letras-index-start-featured .letras-index-start-copy {
    position: absolute;
    z-index: 1;
    inset: auto 16px 14px;
    color: #fff;
}

a.letras-index-start-featured .letras-index-start-copy strong {
    font-size: 24px;
}

a.letras-index-start-featured .letras-index-start-copy small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.82);
}

.letras-index-start-list a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line-soft);
}

.letras-index-start-list img {
    width: 44px;
    height: 44px;
}

.letras-index-start-list .letras-index-start-copy strong {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.letras-index-start-list .letras-index-start-copy small {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.lyrics-task-first .page-hero--lyrics-display .mosaic {
    display: none;
}

body.lyrics-task-first .page-hero--lyrics-display .hero-quote {
    display: block;
    order: 5;
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    max-width: 100%;
    margin-top: 30px;
    padding-block: 12px 2px;
}

body.lyrics-task-first .page-hero--lyrics-display .hero-quote blockquote p {
    font-size: clamp(18px, 1.35vw, 21px);
    min-height: 4.2em;
}

body.lyrics-task-first .page-hero--lyrics-display .hero-quote figcaption {
    min-height: 4.4em;
    align-content: flex-start;
}

body.lyrics-task-first .page-hero--lyrics-display .page-hero-counter {
    display: grid;
    order: 6;
    grid-column: 2;
    grid-row: 4;
    grid-template-columns: repeat(2, max-content);
    align-items: start;
    align-self: end;
    justify-content: flex-start;
    gap: clamp(28px, 4vw, 52px);
    margin-top: 30px;
}

body.lyrics-task-first .page-hero--lyrics-display .page-hero-counter > div {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 6px;
}

body.lyrics-task-first .page-hero--lyrics-display .page-hero-counter dd {
    grid-row: 1;
    font-size: clamp(34px, 3.2vw, 42px);
    line-height: 1;
    color: var(--accent-text);
}

body.lyrics-task-first .page-hero--lyrics-display .page-hero-counter dt {
    grid-row: 2;
    max-width: 18ch;
    font-size: 10px;
    line-height: 1.35;
}

body.lyrics-task-first .page-hero--lyrics-display .page-hero-admin {
    order: 7;
}

body.lyrics-task-first .page-hero--lyrics-display .mosaic-tile--center,
body.lyrics-task-first .listing-section-heading-row .count-em {
    display: none;
}

body.lyrics-task-first .alphabet-panel {
    gap: 12px;
    margin-top: 28px;
}

body.lyrics-task-first .alphabet-panel-header {
    gap: 2px;
}

body.lyrics-task-first .alphabet-panel-header > p {
    margin: 2px 0 6px;
}

body.lyrics-task-first .listing-section-header {
    margin-top: 28px;
    padding-top: 0;
    border-top: 0;
}

body.lyrics-task-first .listing-section-header::before {
    display: none;
}

body.lyrics-task-first .lcard {
    gap: 16px;
    padding: 24px 22px;
    transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}

body.lyrics-task-first .lcard:hover {
    transform: none;
}

body.lyrics-task-first .lcard h2 a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background-image: none;
}

body.lyrics-task-first .lcard-read-affordance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--accent);
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--accent-text);
}

body.lyrics-task-first .lcard-meta,
body.lyrics-task-first .lcard-snippet,
body.lyrics-task-first .lcard-summary {
    font-size: 18px;
    line-height: 1.5;
}

body.lyrics-task-first .lcard-snippet,
body.lyrics-task-first .lcard-summary {
    padding: 0 0 0 14px;
    border: 0;
    border-left: 2px solid var(--accent);
    background: transparent;
}

body.lyrics-task-first .lcard-snippet--long {
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

body.lyrics-task-first .letras-index-v2-disclosure {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

[data-task-first-index-results] > .lcard[hidden],
[data-task-first-index-disclosure] [data-task-first-index-show-more][hidden] {
    display: none !important;
}

.letras-index-v2-disclosure button {
    gap: 10px;
    min-height: 52px;
    font-size: 18px;
}

@media (max-width: 720px) /* --bp-sm */ {
    body.lyrics-task-first .page-hero.page-hero--lyrics-display {
        gap: 0;
        padding-block: 22px 16px;
    }

    body.lyrics-task-first .page-hero--lyrics-display .page-hero-content {
        display: flex;
        flex-direction: column;
    }

    body.lyrics-task-first .page-hero.page-hero--lyrics-display h1.page-hero-display {
        max-width: 9ch;
        margin-bottom: 12px;
        font-size: clamp(44px, 13vw, 58px);
        line-height: 0.94;
    }

    body.lyrics-task-first .page-hero--lyrics-display .letras-index-v2-lede {
        font-size: 20px;
    }

    body.lyrics-task-first .page-hero--lyrics-display .hero-search {
        margin-top: 18px;
        padding: 15px 16px;
    }

    body.lyrics-task-first .page-hero--lyrics-display .hero-search input,
    body.lyrics-task-first .page-hero--lyrics-display .hero-search input[type="text"] {
        font-size: 18px !important;
    }

    body.lyrics-task-first .letras-index-start {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
        overflow: hidden;
    }

    body.lyrics-task-first .page-hero--lyrics-display .hero-quote {
        order: 5;
        width: 100%;
        margin-top: 28px;
    }

    body.lyrics-task-first .page-hero--lyrics-display .page-hero-counter {
        display: grid;
        order: 6;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 24px;
        margin-top: 24px;
    }

    body.lyrics-task-first .page-hero--lyrics-display .page-hero-counter > div {
        display: grid;
        grid-template-rows: auto auto;
        align-content: start;
        gap: 6px;
    }

    body.lyrics-task-first .page-hero--lyrics-display .page-hero-counter dd {
        grid-row: 1;
        font-size: clamp(30px, 9vw, 34px);
        line-height: 1;
    }

    body.lyrics-task-first .page-hero--lyrics-display .page-hero-counter dt {
        grid-row: 2;
    }

    .letras-index-start-layout {
        display: flex;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .letras-index-start-layout::-webkit-scrollbar {
        display: none;
    }

    .letras-index-start-layout > a.letras-index-start-featured,
    .letras-index-start-list li {
        flex: 0 0 min(72vw, 280px);
        height: 170px;
        scroll-snap-align: start;
    }

    .letras-index-start-list {
        display: contents;
    }

    a.letras-index-start-featured,
    .letras-index-start-list a {
        display: block;
        min-height: 170px;
        border: 0;
        background: var(--bg-soft);
    }

    .letras-index-start-list a::after {
        content: "";
        position: absolute;
        inset: 38% 0 0;
        background: linear-gradient(to bottom, transparent, rgba(8, 6, 9, 0.92));
        pointer-events: none;
    }

    a.letras-index-start-featured img,
    .letras-index-start-list img {
        width: 100%;
        height: 100%;
    }

    a.letras-index-start-featured .letras-index-start-copy,
    .letras-index-start-list .letras-index-start-copy {
        position: absolute;
        z-index: 1;
        inset: auto 14px 12px;
        color: #fff;
    }

    a.letras-index-start-featured .letras-index-start-copy strong,
    .letras-index-start-list .letras-index-start-copy strong {
        overflow: visible;
        font-size: 20px;
        text-overflow: clip;
        white-space: normal;
    }

    a.letras-index-start-featured .letras-index-start-copy small,
    .letras-index-start-list .letras-index-start-copy small {
        display: block;
        overflow: visible;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.82);
        -webkit-line-clamp: initial;
    }

    body.lyrics-task-first .alphabet-panel {
        margin-top: 24px;
    }

    body.lyrics-task-first .listing-section-header {
        margin-top: 24px;
        padding-top: 0;
    }
}

/* Obras task-first index, used as the single default presentation. */
body.works-task-first .page-hero.page-hero--works-display {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
    padding-block: 32px 20px;
}

body.works-task-first .page-hero--works-display .page-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.88fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 64px;
    width: 100%;
}

body.works-task-first .page-hero--works-display .eyebrow,
body.works-task-first .page-hero--works-display .mosaic {
    display: none;
}

body.works-task-first .page-hero.page-hero--works-display h1.page-hero-display {
    order: 1;
    grid-column: 1;
    grid-row: 1;
    max-width: 10ch;
    margin-bottom: 16px;
    font-size: clamp(48px, 6.5vw, 76px);
    line-height: 0.94;
}

body.works-task-first .page-hero--works-display .obras-index-v2-lede {
    order: 2;
    grid-column: 1;
    grid-row: 2;
    max-width: 60ch;
    font-size: 22px;
    line-height: 1.5;
    color: var(--text-soft);
}

body.works-task-first .page-hero--works-display .hero-search {
    order: 3;
    grid-column: 1;
    grid-row: 3;
    margin-top: 24px;
    padding: 18px 20px;
    border-color: var(--line-strong);
}

body.works-task-first .page-hero--works-display .hero-search input,
body.works-task-first .page-hero--works-display .hero-search input[type="text"] {
    font-size: 20px !important;
}

body.works-task-first .letras-index-start {
    display: block;
    order: 4;
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    min-width: 0;
    margin-top: 0;
    padding-block: 0;
    border-top: 0;
}

body.works-task-first .letras-index-start-layout,
body.works-task-first .letras-index-start-list {
    height: 330px;
}

body.works-task-first .letras-index-start-layout {
    grid-template-columns: minmax(0, 0.72fr) minmax(310px, 1.28fr);
}

body.works-task-first a.letras-index-start-featured {
    min-height: 330px;
}

body.works-task-first .page-hero--works-display .page-hero-counter {
    display: grid;
    order: 5;
    grid-column: 1;
    grid-row: 4;
    grid-template-columns: repeat(2, max-content);
    align-items: start;
    justify-content: flex-start;
    gap: clamp(28px, 4vw, 52px);
    margin-top: 30px;
}

body.works-task-first .page-hero--works-display .page-hero-counter > div {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 6px;
}

body.works-task-first .page-hero--works-display .page-hero-counter dd {
    grid-row: 1;
    font-size: clamp(34px, 3.2vw, 42px);
    line-height: 1;
    color: var(--accent-text);
}

body.works-task-first .page-hero--works-display .page-hero-counter dt {
    grid-row: 2;
    max-width: 18ch;
    font-size: 10px;
    line-height: 1.35;
}

body.works-task-first .alphabet-panel {
    gap: 12px;
    margin-top: 28px;
}

body.works-task-first .alphabet-panel-header {
    gap: 2px;
}

body.works-task-first .alphabet-panel-header > p {
    margin: 2px 0 6px;
}

body.works-task-first .listing-section-header {
    margin-top: 28px;
    padding-top: 0;
    border-top: 0;
}

body.works-task-first .listing-section-header::before {
    display: none;
}

body.works-task-first .lcard {
    gap: 16px;
    padding: 24px 22px;
    transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}

body.works-task-first .lcard:hover {
    transform: none;
}

body.works-task-first .lcard h2 a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background-image: none;
}

body.works-task-first .lcard-read-affordance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--accent);
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--accent-text);
}

body.works-task-first .lcard-meta,
body.works-task-first .lcard-snippet,
body.works-task-first .lcard-summary {
    font-size: 18px;
    line-height: 1.5;
}

body.works-task-first .lcard-snippet,
body.works-task-first .lcard-summary {
    padding: 0 0 0 14px;
    border: 0;
    border-left: 2px solid var(--accent);
    background: transparent;
}

body.works-task-first .lcard-snippet--long {
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

body.works-task-first .letras-index-v2-disclosure {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

@media (max-width: 720px) /* --bp-sm */ {
    body.works-task-first .page-hero.page-hero--works-display {
        gap: 0;
        padding-block: 22px 16px;
    }

    body.works-task-first .page-hero--works-display .page-hero-content {
        display: flex;
        flex-direction: column;
    }

    body.works-task-first .page-hero.page-hero--works-display h1.page-hero-display {
        max-width: 9ch;
        margin-bottom: 12px;
        font-size: clamp(44px, 13vw, 58px);
        line-height: 0.94;
    }

    body.works-task-first .page-hero--works-display .obras-index-v2-lede {
        font-size: 20px;
    }

    body.works-task-first .page-hero--works-display .hero-search {
        margin-top: 18px;
        padding: 15px 16px;
    }

    body.works-task-first .page-hero--works-display .hero-search input,
    body.works-task-first .page-hero--works-display .hero-search input[type="text"] {
        font-size: 18px !important;
    }

    body.works-task-first .letras-index-start {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
        overflow: hidden;
    }

    body.works-task-first .letras-index-start-layout,
    body.works-task-first .letras-index-start-list {
        height: auto;
    }

    body.works-task-first .page-hero--works-display .page-hero-counter {
        display: grid;
        order: 5;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 24px;
        margin-top: 24px;
    }

    body.works-task-first .page-hero--works-display .page-hero-counter dd {
        grid-row: 1;
        font-size: clamp(30px, 9vw, 34px);
        line-height: 1;
    }

    body.works-task-first .page-hero--works-display .page-hero-counter dt {
        grid-row: 2;
    }

    body.works-task-first .alphabet-panel,
    body.works-task-first .listing-section-header {
        margin-top: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .letras-index-start a,
    body.lyrics-task-first .lcard,
    body.works-task-first .lcard {
        transition: none;
    }
}

/* Obras index has no hero quote, so the text panel is shorter than letras.
   Give the text panel more horizontal room and shrink the mosaic so the two
   columns end at roughly the same height. */
@media (min-width: 901px) /* --bp-md +1 */ {
    .page-hero.page-hero--artists-display {
        grid-template-columns: minmax(320px, 1.4fr) minmax(320px, 0.92fr);
        gap: 44px;
    }

    .page-hero.page-hero--artists-display .mosaic {
        width: min(100%, 700px);
        justify-self: end;
    }

    .page-hero.page-hero--works-display {
        grid-template-columns: minmax(280px, 1.45fr) minmax(360px, 0.85fr);
        gap: 64px;
    }
}

.page-hero--display .hero-verses-stack {
    align-self: stretch;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-hero--display .hero-verses-stack-eyebrow {
    margin: 0 0 4px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.page-hero--display .hero-verse-feature {
    position: relative;
    min-width: 0;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, #1c1419 0%, #100c10 70%, #0a0709 100%);
    border-radius: 2px;
    border-left: 2px solid rgba(212, 160, 122, 0.45);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    isolation: isolate;
    flex: 1 1 0;
    min-height: 0;
}

.page-hero--display .hero-verse-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(212, 160, 122, 0.12), transparent 55%);
    z-index: 0;
    pointer-events: none;
}

.page-hero--display .hero-verse-feature > * {
    position: relative;
    z-index: 1;
}

.page-hero--display .hero-verse-feature-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    justify-content: space-between;
}

.page-hero--display .hero-verse-feature-figure blockquote {
    margin: 0;
}

.page-hero--display .hero-verse-feature-text {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(17px, 1.55vw, 22px);
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: #f3ede6;
    text-wrap: balance;
    transition: opacity 0.36s ease;
}

.page-hero--display .hero-verse-feature-text::before { content: "« "; }
.page-hero--display .hero-verse-feature-text::after { content: " »"; }

.page-hero--display .hero-verse-feature-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-soft);
    transition: opacity 0.36s ease;
}

.page-hero--display .hero-verse-feature-figure.is-fading .hero-verse-feature-text,
.page-hero--display .hero-verse-feature-figure.is-fading .hero-verse-feature-meta {
    opacity: 0;
}

.page-hero--display .hero-verse-feature-author {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(14px, 1.15vw, 17px);
    color: #f3ede6;
    text-decoration: none;
    border: 0;
    width: fit-content;
}

.page-hero--display a.hero-verse-feature-author:hover {
    color: var(--accent-strong);
}

.page-hero--display .hero-verse-feature-author[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-soft);
}

.page-hero--display .hero-verse-feature-ctx {
    color: var(--text-muted);
    letter-spacing: 0.02em;
    min-height: 1em;
}

.page-hero--display .hero-verse-feature-ctx a {
    color: var(--text-soft);
    border-bottom: 1px solid rgba(212, 160, 122, 0.32);
}

.page-hero--display .hero-verse-feature-ctx a:hover {
    color: var(--accent-strong);
    border-bottom-color: var(--accent-strong);
}

.page-hero--display .hero-verse-feature-cta {
    align-self: flex-start;
    margin-top: 6px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-strong);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.page-hero--display .hero-verse-feature-cta:hover {
    color: #f3ede6;
}

/* Variant cards — port of `.lcard` from `Letras redesign.html` Variant A. */
.listing-grid--lcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.lcard {
    position: relative;
    padding: 22px 20px;
    background: var(--bg-panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.4s var(--ease-out, cubic-bezier(0.25, 1, 0.5, 1)), border-color 0.3s, background 0.3s;
    overflow: hidden;
    isolation: isolate;
}

.lcard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, rgba(202, 160, 112, 0.08), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}

.lcard:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
}

.lcard:hover::before {
    opacity: 1;
}

.lcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}

.lcard-portraits {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
}

.lcard-portraits img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-panel);
    margin-left: -10px;
    filter: grayscale(0.5);
    transition: filter 0.4s;
}

.lcard-portraits img:first-child {
    margin-left: 0;
}

.lcard:hover .lcard-portraits img {
    filter: grayscale(0);
}

.lcard .home-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: auto;
    z-index: 3;
    pointer-events: auto;
}

.lcard .home-fav-wrap {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative;
}

.lcard .home-fav-status {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px 10px;
    background: var(--bg-panel, var(--bg-soft));
    border: 1px solid var(--line-soft);
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-radius: 2px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.lcard .home-fav-btn,
.lcard .home-spot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: opacity 0.25s var(--ease-out, ease), transform 0.25s var(--ease-out, ease), color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.lcard .home-fav-btn {
    opacity: 0.55;
    transform: none;
}

.lcard .home-spot-btn {
    opacity: 0;
    transform: translateY(-3px);
    color: #1DB954;
}

.lcard .home-fav-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
}

.lcard .home-fav-btn svg,
.lcard .home-spot-btn svg {
    width: 17px;
    height: 17px;
    transition: transform 0.25s var(--ease-out-expo);
}

.lcard .home-fav-btn svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.lcard:hover .home-item-actions > *,
.lcard .home-item-actions > *:focus-visible,
.lcard .home-item-actions > *:focus-within {
    opacity: 1;
    transform: translateY(0);
}

/* Touch devices have no hover: keep the actions always visible and skip the
   lift, otherwise iOS spends the first tap applying :hover (content reveal)
   and the lyric link only activates on the second tap. Same intent as the
   `.page-home` ≤720px rule above. */
@media (hover: none) {
    .lcard:hover {
        transform: none;
    }
    .lcard .home-item-actions > * {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 720px) /* --bp-sm */ {
    .lcard .home-fav-btn,
    .lcard .home-spot-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
}

.lcard .home-fav-btn.is-active {
    opacity: 1;
    transform: none;
    color: var(--accent-strong);
}

.lcard .home-fav-btn.is-active svg path {
    fill: currentColor;
    stroke: currentColor;
}

.lcard .home-fav-btn:hover,
.lcard .home-fav-btn:focus-visible {
    color: var(--accent-strong);
}

.lcard .home-fav-btn:hover svg {
    transform: scale(1.08);
}

.lcard .home-spot-btn:hover,
.lcard .home-spot-btn:focus-visible {
    color: #1ed760;
}

.lcard .home-spot-btn:hover svg {
    transform: scale(1.12);
}

.lcard .home-fav-btn:focus-visible,
.lcard .home-spot-btn:focus-visible {
    outline: 1px solid currentColor;
}

/* Listing-card (artists list) — same icon-only fav/spotify treatment as the lcards. */
.listing-card .home-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    z-index: 3;
    pointer-events: auto;
}

.listing-card .home-fav-wrap {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative;
}

.listing-card .home-fav-status {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px 10px;
    background: var(--bg-panel, var(--bg-soft));
    border: 1px solid var(--line-soft);
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-radius: 2px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.listing-card .home-fav-btn,
.listing-card .home-spot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: opacity 0.25s var(--ease-out, ease), transform 0.25s var(--ease-out, ease), color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    opacity: 1;
    transform: none;
}

.listing-card .home-spot-btn {
    color: #1DB954;
}

.listing-card .home-fav-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
}

.listing-card .home-fav-btn svg,
.listing-card .home-spot-btn svg {
    width: 17px;
    height: 17px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.listing-card .home-fav-btn svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.listing-card .home-fav-btn.is-active {
    color: var(--accent-strong);
}

.listing-card .home-fav-btn.is-active svg path {
    fill: currentColor;
    stroke: currentColor;
}

.listing-card .home-fav-btn:hover,
.listing-card .home-fav-btn:focus-visible {
    color: var(--accent-strong);
}

.listing-card .home-fav-btn:hover svg {
    transform: scale(1.08);
}

.listing-card .home-spot-btn:hover,
.listing-card .home-spot-btn:focus-visible {
    color: #1ed760;
}

.listing-card .home-spot-btn:hover svg {
    transform: scale(1.12);
}

.listing-card .home-fav-btn:focus-visible,
.listing-card .home-spot-btn:focus-visible {
    outline: 1px solid currentColor;
}

.lcard h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text-main);
}

.lcard h2 a {
    color: inherit;
    display: inline;
    background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.4s;
}

.lcard:hover h2 a {
    background-size: 100% 1px;
}

.lcard-meta {
    font-family: var(--font-reading);
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-soft);
    margin: 0;
}

.lcard-meta a {
    color: var(--text-main);
    border-bottom: 1px solid rgba(202, 160, 112, 0.4);
    transition: color 0.2s, border-color 0.2s;
}

.lcard-meta a:hover {
    color: var(--accent-text);
    border-color: var(--accent-strong);
}

.lcard-snippet {
    font-family: var(--font-reading);
    font-style: italic;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-soft);
    padding-left: 14px;
    border-left: 2px solid var(--accent);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lcard-summary {
    font-family: var(--font-reading);
    font-style: italic;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-soft);
    padding-left: 14px;
    border-left: 2px solid var(--accent);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lcard-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lcard-foot .year {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-soft);
}

.lcard-foot .has-video {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-text);
}

.lcard-admin {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.lcard-rank {
    position: absolute;
    top: 14px;
    left: 16px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    z-index: 2;
    pointer-events: none;
}

.lcard--ranked {
    padding-top: 38px;
}

.lcard--empty {
    align-items: center;
    text-align: center;
    color: var(--text-muted);
}

/* Editorial tail — port of `.editorial` from mockup Variant A. */
.lyrics-editorial {
    margin-top: 80px;
    padding: 48px 0 72px;
    border-top: 1px solid var(--line-soft);
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
}

@media (max-width: 900px) /* --bp-md */ {
    .lyrics-editorial {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.lyrics-editorial .ed-label {
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

.lyrics-editorial h2 {
    margin-top: 14px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: -0.01em;
    line-height: 1.02;
    color: var(--text-main);
}

.lyrics-editorial-body {
    font-family: var(--font-reading);
    font-size: 19px;
    line-height: 1.65;
    color: var(--text-soft);
}

.lyrics-editorial-body p {
    margin: 0;
}

.lyrics-editorial-body p + p {
    margin-top: 1em;
}

.lyrics-editorial-body em {
    color: var(--accent-strong);
    font-style: italic;
}

/* Detail pages — H1 uses the display hero typography from listings (/letras/, /obras/, /letras/esenciales/). */
.lyric-hero h1.page-hero-display.detail-hero-display,
.artist-hero h1.page-hero-display.detail-hero-display {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
    max-width: none;
    text-wrap: balance;
    text-shadow: none;
}

.artist-hero h1.page-hero-display.detail-hero-display {
    margin-bottom: 0.5rem;
}

.lyric-hero h1.page-hero-display.detail-hero-display {
    max-width: calc(14 * var(--ch-display-italic));
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
}

.lyric-hero h1.page-hero-display.detail-hero-display .title-year,
.artist-hero h1.page-hero-display.detail-hero-display .title-year {
    font-family: var(--font-ui);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 18px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-left: 0.6em;
    vertical-align: middle;
    white-space: nowrap;
}

/* Detail browse block — search + alphabet + lcards mirroring /letras/ and /obras/ chrome. */
.detail-browse-block {
    display: grid;
    gap: 1.4rem;
    margin-top: clamp(2rem, 4vw, 3.2rem);
    padding-top: clamp(1.6rem, 3vw, 2.4rem);
    border-top: 1px solid var(--line-soft);
}

.detail-browse-header {
    display: grid;
    gap: 0.6rem;
}

.detail-browse-header .eyebrow {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--accent-strong);
}

.detail-browse-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

h2.detail-browse-heading.page-hero-display {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(32px, 4.6vw, 64px);
    line-height: 0.95;
    letter-spacing: -0.015em;
    color: var(--text-main);
    text-wrap: balance;
}

h2.detail-browse-heading.page-hero-display em {
    font-style: normal;
    font-weight: 700;
    color: var(--accent-strong);
}

.detail-browse-search.hero-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin: 0;
    max-width: 100%;
    border: 1px solid var(--line-strong);
    background: var(--bg-panel);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
    position: relative;
    isolation: isolate;
}

.detail-browse-search.hero-search:focus-within {
    border-color: var(--accent);
}

.detail-browse-search.hero-search[data-search-autocomplete-open="true"] {
    z-index: 60;
}

.detail-browse-search.hero-search > svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex: 0 0 auto;
}

.detail-browse-search.hero-search input,
.detail-browse-search.hero-search input[type="text"],
.detail-browse-search.hero-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 0; /* the global input[type=text] min-height (3.2rem) would inflate the box */
    height: auto;
    line-height: 1.4;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-main);
    font-family: var(--font-reading);
    font-size: 16px;
    outline: none;
    box-shadow: none;
}

.detail-browse-search.hero-search input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.detail-browse-search.hero-search-kbd,
.detail-browse-search .hero-search-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 11px;
    flex: 0 0 auto;
}

.detail-browse-grid.listing-grid--lcards {
    margin-top: 0.4rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1120px) /* --bp-lg */ {
    .detail-browse-grid.listing-grid--lcards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) /* --bp-xs */ {
    .detail-browse-grid.listing-grid--lcards {
        grid-template-columns: 1fr;
    }
}

/* In the narrow 4-col browse cards ("Más artistas del archivo") the
   Spotify/favorite action bar used to sit to the LEFT of the name, squeezing the
   large display-serif title into a thin column that wrapped into 2–3 ragged
   lines. Stack the heading instead: name on top at full card width, actions
   dropped below it. */
.detail-browse-grid .listing-card-heading {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.55rem;
}

.detail-browse-grid .listing-card-heading h2 {
    width: 100%;
    font-size: clamp(1.3rem, 1.55vw, 1.7rem);
    line-height: 1.02;
    text-wrap: balance;
}

/* ════ 34. Milongas — base card, grid, list chrome ════ */

.milonga-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    margin-bottom: 3rem;
}

.milonga-card {
    position: relative;
    overflow: hidden;
    background: var(--bg-panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.milonga-card-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-soft);
}

.milonga-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.01);
    transition: transform 0.24s ease;
}

.milonga-card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.4rem 1.5rem 1.2rem;
}

.milonga-card--compact .milonga-card-media {
    aspect-ratio: 2.25 / 1;
}

.milonga-card--compact .milonga-card-body {
    gap: 0.55rem;
    padding: 1rem 1rem 0.95rem;
}

.milonga-card:hover {
    background: var(--bg-soft);
    border-color: var(--line-strong);
}

.milonga-card:hover .milonga-card-image {
    transform: scale(1.02);
}

.milonga-card h3 {
    font-family: "Bodoni Moda", serif;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    margin: 0;
    line-height: 1.15;
}

.milonga-card--compact h3 {
    font-size: clamp(1.1rem, 1.4vw, 1.35rem);
}

.milonga-card-title-link {
    color: inherit;
    text-decoration: none;
}

.milonga-card-admin-link {
    font-size: 0.8rem;
    line-height: 1;
    color: rgba(246, 225, 198, 0.12);
    text-decoration: none;
    user-select: none;
    flex: 0 0 auto;
}

.milonga-card-admin-link:hover,
.milonga-card-admin-link:focus-visible {
    color: rgba(246, 225, 198, 0.35);
}

.milonga-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.92rem;
    color: var(--text-soft);
}

.milonga-card--compact .milonga-meta-row {
    gap: 0.3rem 0.75rem;
    font-size: 0.86rem;
}

.milonga-meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.milonga-bio {
    font-size: 0.98rem;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.62;
}

.milonga-bio--compact {
    font-size: 0.91rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.milonga-updated-at {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.milonga-card--compact .milonga-updated-at {
    font-size: 0.83rem;
}

.milonga-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

.milonga-card--compact .milonga-links {
    gap: 0.4rem;
    padding-top: 0.15rem;
}

.milonga-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-strong);
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.milonga-card--compact .milonga-link {
    font-size: 0.73rem;
    padding: 0.22rem 0.55rem;
}

.milonga-link:hover {
    background: rgba(181, 136, 98, 0.10);
    color: var(--text-main);
    border-color: var(--accent);
}

.milonga-maps-link {
    color: var(--text-muted);
    border-color: var(--line-soft);
}

.milonga-maps-link:hover {
    color: var(--text-soft);
    background: var(--bg-soft);
}

.milonga-barrio-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--accent-strong);
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0.12rem 0.45rem;
}

.milonga-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
}

.milonga-faq {
    margin-top: 3rem;
}

.milonga-faq h2 {
    margin-bottom: 1rem;
}

.milonga-faq details {
    margin-bottom: 0.6rem;
    padding: 0.9rem 1rem;
    background: transparent;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
}

.milonga-faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-soft);
}

.milonga-faq p {
    margin: 0.75rem 0 0;
    color: var(--text-muted);
}

.milonga-city-intro {
    margin: 0 0 2.2rem;
    padding: 1.4rem 1.6rem;
    background: var(--bg-panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
}

.milonga-city-intro h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
}

.milonga-city-intro p {
    max-width: 72rem;
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.78;
}

.milonga-city-intro p + p {
    margin-top: 1rem;
}

.milonga-city-intro p strong {
    color: var(--text-main);
}

.day-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.4rem;
    padding: 0.9rem 1.1rem;
    background: transparent;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
}

.day-filter-label {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    white-space: nowrap;
}

.day-filter-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.day-btn {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
    background: transparent;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 0.28rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    line-height: 1.4;
}

.day-btn:hover {
    background: rgba(181, 136, 98, 0.08);
    color: var(--text-main);
    border-color: var(--accent);
}

.day-btn.active {
    background: rgba(181, 136, 98, 0.12);
    color: var(--accent-strong);
    border-color: var(--accent);
}

.day-filter-hint {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-style: italic;
}

.milonga-filter-empty {
    display: none;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-style: italic;
}

@media (max-width: 560px) /* --bp-xs */ {
    .milonga-grid {
        grid-template-columns: 1fr;
    }
    .milonga-card-body {
        padding: 1.1rem 1.15rem;
    }
    .day-filter-bar {
        gap: 0.6rem;
    }
}

/* ════ 34b. Milongas index — display-hero variant overrides ════
   The right column is a 3×3 city mosaic (vs lyrics/works mosaic which uses item images).
   When there is no mosaic (city detail), the hero collapses to a single text column. */

.page-hero.page-hero--milongas-city {
    grid-template-columns: 1fr;
}

.page-hero.page-hero--milongas-city .page-hero-content {
    max-width: 60rem;
}

.page-hero-variant-milongas-display h1.page-hero-display em {
    color: var(--accent-strong);
}

/* Milongas mosaic: small 2×2 layout, capped height so it never out-grows the left column.
   Hide the central count stamp — the page-hero-counter on the left already shows totals. */
.page-hero--milongas-display .mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    aspect-ratio: 1 / 1;
    max-width: 420px;
    max-height: 420px;
    margin-left: auto;
    align-self: end;
    width: 100%;
}

.page-hero--milongas-display .mosaic-tile--center {
    display: none;
}

@media (min-width: 901px) /* --bp-md +1 */ {
    .page-hero.page-hero--milongas-display:not(.page-hero--milongas-city) {
        grid-template-columns: minmax(280px, 1.5fr) minmax(280px, 0.85fr);
        gap: 56px;
    }
}

/* Milonga grid (display variant) — keeps imagery + favorite icon, with cleaner typography
   that aligns with the lcard aesthetic in /letras/ and /obras/. */
.milonga-grid--display {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin: 1rem 0 2.4rem;
}

.milonga-grid--display .milonga-card {
    background: var(--bg-panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    transition: transform 0.4s var(--ease-out, cubic-bezier(0.25, 1, 0.5, 1)), border-color 0.3s, background 0.3s;
}

.milonga-grid--display .milonga-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
    background: var(--bg-panel);
}

.milonga-grid--display .milonga-card-body {
    gap: 0.8rem;
    padding: 1.2rem 1.25rem 1.1rem;
}

.milonga-grid--display .milonga-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 32px;
}

.milonga-grid--display .milonga-card-head-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.milonga-grid--display .milonga-card h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.4rem, 1.85vw, 1.75rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--text-main);
    margin: 0;
}

.milonga-grid--display .milonga-card h3 a {
    color: inherit;
    text-decoration: underline solid transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-skip-ink: auto;
    transition: text-decoration-color 0.4s ease;
}

.milonga-grid--display .milonga-card:hover h3 a {
    text-decoration-color: var(--accent-strong);
}

.milonga-grid--display .milonga-meta-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem 0.9rem;
    font-family: var(--font-ui);
    font-size: 0.86rem;
    color: var(--text-soft);
    line-height: 1.4;
}

.milonga-grid--display .milonga-meta-item {
    display: block;
}

.milonga-grid--display .milonga-meta-address {
    color: var(--text-soft);
}

.milonga-grid--display .milonga-meta-dias {
    color: var(--text-main);
}

.milonga-grid--display .milonga-meta-horario {
    color: var(--text-muted);
}

.milonga-grid--display .milonga-bio {
    font-family: var(--font-reading);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-soft);
}

.milonga-grid--display .milonga-updated-at {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

.milonga-grid--display .milonga-barrio-badge {
    border-color: var(--line-soft);
    color: var(--text-muted);
    background: transparent;
}

.milonga-grid--display .milonga-card .home-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: auto;
    z-index: 3;
    pointer-events: auto;
}

.milonga-grid--display .milonga-card .home-fav-wrap {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative;
}

.milonga-grid--display .milonga-card .home-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.25s ease, color 0.2s ease, transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.milonga-grid--display .milonga-card .home-fav-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
}

.milonga-grid--display .milonga-card .home-fav-btn svg {
    width: 17px;
    height: 17px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.milonga-grid--display .milonga-card .home-fav-btn svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.milonga-grid--display .milonga-card:hover .home-fav-btn,
.milonga-grid--display .milonga-card .home-fav-btn:focus-visible,
.milonga-grid--display .milonga-card .home-fav-btn.is-active {
    opacity: 1;
}

.milonga-grid--display .milonga-card .home-fav-btn:hover {
    color: var(--accent-strong);
}

.milonga-grid--display .milonga-card .home-fav-btn:hover svg {
    transform: scale(1.08);
}

.milonga-grid--display .milonga-card .home-fav-btn.is-active {
    color: var(--accent-strong);
}

.milonga-grid--display .milonga-card .home-fav-btn.is-active svg path {
    fill: currentColor;
    stroke: currentColor;
}

.milonga-grid--display .milonga-card .home-fav-btn:focus-visible {
    outline: 1px solid currentColor;
}

.milonga-grid--display .milonga-card .home-fav-status {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px 10px;
    background: var(--bg-panel, var(--bg-soft));
    border: 1px solid var(--line-soft);
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-radius: 2px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* City panel — flat horizontal navigation that replaces the alphabet on /milongas/ */
.city-panel {
    margin: 1.6rem 0 2rem;
}

.city-panel-header {
    margin-bottom: 12px;
}

.city-panel-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.city-panel-heading-row h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--text-main);
    letter-spacing: -0.01em;
    margin: 0;
}

.city-panel-header > p {
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--text-muted);
    margin: 4px 0 14px;
}

.city-panel-toolbar {
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 12px 0;
}

.city-panel-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.city-panel-link {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    color: var(--text-soft);
    background: transparent;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.city-panel-link:hover,
.city-panel-link.is-active {
    color: var(--accent-strong);
    background: var(--bg-soft);
}

.city-panel-name {
    color: inherit;
}

.city-panel-count {
    font-family: var(--font-ui);
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.city-panel-link:hover .city-panel-count,
.city-panel-link.is-active .city-panel-count {
    color: var(--text-soft);
}

/* Milongas root decision hub — compact city/date routing before editorial depth. */
.milongas-hub .breadcrumbs {
    margin-bottom: 0;
}

.milongas-hub-hero {
    max-width: 72rem;
    padding: 2rem 0 2.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
    gap: 2rem 4rem;
    align-items: end;
    border-bottom: 1px solid var(--line-soft);
}

.milongas-hub-hero-copy {
    max-width: 42rem;
}

.milongas-hub-hero h1 {
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 4.4rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-wrap: balance;
}

.milongas-hub-hero-copy p {
    max-width: 62ch;
    margin: 1rem 0 0;
    color: var(--text-soft);
    font-family: var(--font-reading);
    font-size: 1.05rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.milongas-hub-search.hero-search {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 3.25rem;
    margin: 0;
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid var(--line-strong);
    background: var(--bg-panel);
}

.milongas-hub-search.hero-search:focus-within {
    border-color: var(--accent);
}

.milongas-hub-search.hero-search[data-search-autocomplete-open="true"] {
    z-index: 60;
}

.milongas-hub-search.hero-search > svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    color: var(--text-muted);
}

.milongas-hub-search.hero-search input,
.milongas-hub-search.hero-search input[type="search"] {
    min-width: 0;
    min-height: 2.75rem;
    padding: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--font-reading);
    font-size: 1rem;
    outline: 0;
}

.milongas-hub-search .hero-search-kbd {
    min-width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--line-soft);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 0.7rem;
}

.milongas-hub-search.hero-search input::placeholder {
    color: var(--text-soft);
    opacity: 1;
}

.milongas-city-ledger,
.milongas-date-router,
.milongas-hub-selection {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.milongas-city-ledger {
    border-bottom: 0;
}

.milongas-hub-section-heading {
    margin-bottom: 1.2rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.milongas-hub-section-heading h2 {
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 2rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
}

.milongas-hub-section-heading p {
    max-width: 62ch;
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: right;
}

.milongas-city-ledger-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line-soft);
}

.milongas-city-ledger-link {
    min-height: 4rem;
    padding: 0.7rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease;
}

.milongas-city-ledger-link:nth-child(odd) {
    border-right: 1px solid var(--line-soft);
}

.milongas-city-ledger-link:hover,
.milongas-city-ledger-link:focus-visible {
    background: var(--bg-soft);
    color: var(--accent-strong);
}

.milongas-city-ledger-link:focus-visible,
.milongas-today-link:focus-visible,
.milongas-weekday-links a:focus-visible,
.milongas-hub-result a:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: -2px;
}

.milongas-city-ledger-link > span:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.milongas-city-ledger-link strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.1;
}

.milongas-city-ledger-link small,
.milongas-city-ledger-count {
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-style: normal;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.milongas-city-ledger-link--priority {
    background: var(--bg-panel);
}

.milongas-city-ledger-link--priority strong {
    color: var(--accent-strong);
}

.milongas-city-ledger-count {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.milongas-date-router {
    display: grid;
    grid-template-columns: minmax(17rem, 0.8fr) minmax(0, 1.2fr);
    gap: 0 2rem;
}

.milongas-date-router .milongas-hub-section-heading {
    grid-column: 1 / -1;
}

.milongas-today-link {
    min-height: 3.5rem;
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--line-strong);
    color: var(--accent-strong);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease;
}

.milongas-today-link:hover,
.milongas-today-link:focus-visible {
    border-color: var(--accent);
    background: var(--bg-soft);
}

.milongas-weekday-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.milongas-weekday-links a {
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--line-strong);
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease;
}

.milongas-weekday-links a:hover,
.milongas-weekday-links a:focus-visible {
    background: var(--bg-soft);
    color: var(--accent-strong);
}

/* A picked day has to read as picked at a glance, because several can be on at
   once: the accent underline plus the panel fill separate it from the hover
   state, which shares the same fill. */
.milongas-weekday-links a.is-active {
    border-bottom-color: var(--accent);
    background: var(--bg-soft);
    color: var(--accent-strong);
}

.milongas-date-router__active {
    margin: 0.75rem 0 0;
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    color: var(--text-soft);
    font-family: var(--font-ui);
}

.milongas-date-router__active a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--accent-strong);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.milongas-hub-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line-soft);
}

.milongas-hub-result {
    min-width: 0;
    padding: 1.1rem 0.9rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    border-bottom: 1px solid var(--line-soft);
}

.milongas-hub-result:nth-child(odd) {
    border-right: 1px solid var(--line-soft);
}

.milongas-hub-result-copy {
    min-width: 0;
}

.milongas-hub-result-place,
.milongas-hub-result-schedule,
.milongas-hub-result .milonga-updated-at {
    margin: 0;
    font-family: var(--font-ui);
}

.milongas-hub-result-place {
    color: var(--text-muted);
    font-size: 0.69rem;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
}

.milongas-hub-result h3 {
    margin: 0.35rem 0 0;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.1;
    text-wrap: balance;
}

.milongas-hub-result h3 a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: inherit;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.milongas-hub-result h3 a:hover {
    text-decoration-color: var(--accent-strong);
}

.milongas-hub-result-schedule {
    margin-top: 0.45rem;
    color: var(--text-soft);
    font-size: 0.8rem;
    line-height: 1.4;
}

.milongas-hub-result .milonga-updated-at {
    margin-top: 0.45rem;
    color: var(--accent-strong);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.milongas-hub-result-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
}

.milongas-hub-result-actions a {
    min-width: 6.4rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    color: var(--accent-strong);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
}

.milongas-hub-result-actions a:hover,
.milongas-hub-result-actions a:focus-visible {
    background: var(--bg-soft);
    border-color: var(--accent);
}

.milongas-hub-trust {
    padding: 2.75rem 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    border-bottom: 1px solid var(--line-soft);
}

.milongas-hub-trust h2 {
    margin: 0 0 0.8rem;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.1;
}

.milongas-hub-trust p {
    max-width: 66ch;
    margin: 0;
    color: var(--text-soft);
    font-family: var(--font-reading);
    line-height: 1.65;
    text-wrap: pretty;
}

.milongas-hub-trust p + p {
    margin-top: 0.7rem;
}

.milongas-hub-editorial.lyrics-editorial {
    margin-top: 0;
}

@media (max-width: 720px) /* --bp-sm */ {
    .milongas-hub-hero {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .milongas-date-router {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .milongas-hub-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .milongas-hub-section-heading p {
        text-align: left;
    }

    .milongas-hub-results,
    .milongas-hub-trust {
        grid-template-columns: 1fr;
    }

    .milongas-hub-result:nth-child(odd) {
        border-right: 0;
    }
}

@media (max-width: 560px) /* --bp-xs */ {
    .milongas-hub-hero {
        padding: 1.4rem 0 1.6rem;
    }

    .milongas-hub-hero h1 {
        font-size: 3.1rem;
    }

    .milongas-city-ledger,
    .milongas-date-router,
    .milongas-hub-selection {
        padding: 1.8rem 0;
    }

    .milongas-city-ledger-grid {
        grid-template-columns: 1fr;
    }

    .milongas-city-ledger-link:nth-child(odd) {
        border-right: 0;
    }

    .milongas-weekday-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .milongas-weekday-links a:last-child {
        grid-column: 1 / -1;
    }

    .milongas-hub-result {
        grid-template-columns: 1fr;
    }

    .milongas-hub-result-actions {
        flex-direction: row;
        justify-content: flex-start;
    }

    .milongas-hub-result-actions a {
        flex: 1 1 0;
    }

    .milongas-hub-trust {
        padding: 2rem 0;
        gap: 2rem;
    }
}

/* Milonga browse block — same chrome as detail_browse_block but using milonga-grid */
.milonga-browse-block.detail-browse-block {
    margin-top: 3rem;
}

.milonga-browse-block .detail-browse-grid {
    margin-top: 1.2rem;
}

/* City detail extras */
.milonga-detail-meta-row {
    margin: 0 0 1.2rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.milonga-detail-meta-row .milonga-detail-count {
    color: var(--text-soft);
}

@media (max-width: 720px) /* --bp-sm */ {
    .milonga-grid--display {
        grid-template-columns: 1fr;
    }
    .city-panel-link {
        font-size: 16px;
        padding: 6px 12px;
    }
}

/* Milongas Phase 07 — bounded SSR city and agenda listings. */
.milonga-listing-page .breadcrumbs {
    margin-bottom: 0;
}

.milonga-listing-header {
    max-width: 68rem;
    padding: 24px 0 28px;
    border-bottom: 1px solid var(--line-soft);
}

.milonga-listing-header .eyebrow {
    margin: 0 0 8px;
    font-size: 13px;
}

.milonga-listing-header h1 {
    max-width: 18ch;
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: clamp(42px, 5vw, 60px);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.98;
    text-wrap: balance;
}

.milonga-listing-header h1 em {
    color: var(--accent-strong);
}

.milonga-listing-header > p:last-child {
    max-width: 68ch;
    margin: 12px 0 0;
    color: var(--text-soft);
    font-family: var(--font-reading);
    font-size: 18px;
    line-height: 1.45;
    text-wrap: pretty;
}

.milonga-city-controls {
    padding: 20px 0 22px;
    border-bottom: 1px solid var(--line-soft);
}

.milonga-city-controls > h2 {
    margin: 0 0 1rem;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-style: italic;
    font-weight: 500;
}

.milonga-city-search > label,
.milonga-weekday-filter > p:first-child {
    display: block;
    margin: 0 0 7px;
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.milonga-city-search > div {
    max-width: 46rem;
    display: flex;
    gap: 8px;
}

.milonga-city-search input[type="search"] {
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 9px 12px;
    flex: 1 1 auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-panel);
    color: var(--text-main);
    font-family: var(--font-reading);
    font-size: 16px;
    line-height: 24px;
}

.milonga-city-search input[type="search"]::placeholder {
    color: var(--text-soft);
    opacity: 1;
}

.milonga-city-search button {
    min-height: 44px;
    padding-block: 8px;
    font-size: 14px;
}

.milonga-weekday-filter {
    margin-top: 16px;
}

.milonga-weekday-filter > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.milonga-weekday-filter a,
.milonga-day-navigation a {
    min-height: 44px;
    padding: 9px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-decoration: none;
}

.milonga-weekday-filter a:hover,
.milonga-weekday-filter a:focus-visible,
.milonga-weekday-filter a.is-active,
.milonga-day-navigation a:hover,
.milonga-day-navigation a:focus-visible,
.milonga-day-navigation a.is-active {
    border-color: var(--accent);
    background: var(--bg-soft);
    color: var(--accent-strong);
}

.milonga-weekday-filter__short {
    display: none;
}

/* AJAX day-filter swap (progressive enhancement): while htmx fetches the
   #milonga-swap results fragment, hx-indicator adds .htmx-request to the
   container — dim the controls + results and float a small centered spinner.
   Themed via tokens (both data-themes) and disabled under reduced motion. */
#milonga-swap {
    position: relative;
}

.milonga-swap-indicator {
    position: absolute;
    inset-inline: 0;
    top: 0;
    display: flex;
    justify-content: center;
    padding-top: 18px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 140ms ease;
    z-index: 3;
}

#milonga-swap.htmx-request .milonga-swap-indicator {
    opacity: 1;
    visibility: visible;
}

#milonga-swap.htmx-request .milonga-city-controls,
#milonga-swap.htmx-request .milonga-results {
    opacity: 0.5;
    transition: opacity 140ms ease;
}

.milonga-swap-spinner {
    width: 1.6rem;
    height: 1.6rem;
    border: 3px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: milonga-swap-spin 720ms linear infinite;
}

@keyframes milonga-swap-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .milonga-swap-indicator,
    #milonga-swap.htmx-request .milonga-city-controls,
    #milonga-swap.htmx-request .milonga-results {
        transition: none;
    }
    .milonga-swap-spinner {
        animation: none;
    }
}

.milonga-weekday-filter > p:last-child,
.milonga-schedule-caution {
    max-width: 72ch;
    margin: 9px 0 0;
    color: var(--text-soft);
    font-family: var(--font-reading);
    font-size: 16px;
    line-height: 24px;
}

.milonga-active-filters {
    margin-top: 14px;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    border-top: 1px solid var(--line-soft);
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 15px;
}

.milonga-active-filters a {
    min-height: 44px;
    padding: 9px 11px;
    display: inline-flex;
    align-items: center;
    color: var(--accent-strong);
    font-weight: 700;
}

.milonga-day-navigation {
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--line-soft);
}

.milonga-schedule-caution {
    margin-top: 14px;
}

.milonga-results {
    padding: 26px 0 34px;
}

.milonga-results-header {
    margin-bottom: 14px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px 24px;
}

.milonga-results-header .eyebrow {
    margin: 0 0 5px;
    font-size: 13px;
}

.milonga-results-header h2 {
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 30px;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
}

.milonga-results-header > p {
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 20px;
    text-align: right;
}

.milonga-result-list {
    border-top: 1px solid var(--line-strong);
}

.milonga-result-row {
    min-width: 0;
    padding: 16px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.42fr) minmax(7rem, auto);
    align-items: center;
    gap: 14px 24px;
    border-bottom: 1px solid var(--line-soft);
}

.milonga-result-row__identity,
.milonga-result-row__schedule {
    min-width: 0;
}

.milonga-result-row__place,
.milonga-result-row__status,
.milonga-result-row__address,
.milonga-result-row__schedule p {
    margin: 0;
}

.milonga-result-row__place,
.milonga-result-row__status {
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
}

.milonga-result-row__status {
    color: var(--accent-strong);
}

.milonga-result-row h3 {
    margin: 4px 0 0;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.12;
    text-wrap: balance;
}

.milonga-result-row h3 a {
    color: inherit;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.milonga-result-row h3 a:hover,
.milonga-result-row h3 a:focus-visible {
    text-decoration-color: var(--accent-strong);
}

.milonga-result-row__address,
.milonga-result-row__schedule {
    margin-top: 5px;
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 23px;
}

.milonga-result-row__schedule p + p {
    margin-top: 3px;
}

.milonga-result-row__schedule .milonga-result-row__verified {
    margin-top: 6px;
    color: var(--accent-strong);
    font-size: 13px;
}

.milonga-result-row__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.milonga-result-row__actions a,
.milonga-pagination a,
.milonga-empty-state > a {
    min-height: 44px;
    padding: 9px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--accent-strong);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.milonga-result-row__actions a:hover,
.milonga-result-row__actions a:focus-visible,
.milonga-pagination a:hover,
.milonga-pagination a:focus-visible,
.milonga-empty-state > a:hover,
.milonga-empty-state > a:focus-visible {
    border-color: var(--accent);
    background: var(--bg-soft);
}

.milonga-pagination {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px 16px;
}

.milonga-pagination > a:last-child {
    justify-self: end;
}

.milonga-pagination > span {
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 14px;
    text-align: center;
}

.milonga-empty-state {
    padding: 2rem 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-soft);
}

.milonga-empty-state h3 {
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
}

.milonga-empty-state p {
    max-width: 66ch;
    margin: 0.55rem 0 1rem;
    color: var(--text-soft);
}

.milonga-agenda-group + .milonga-agenda-group {
    margin-top: 24px;
}

.milonga-agenda-group > header {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.milonga-agenda-group > header h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-style: italic;
    font-weight: 500;
}

.milonga-agenda-group > header h3 a {
    color: var(--accent-strong);
}

.milonga-agenda-group > header span {
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 14px;
}

.milonga-agenda-links,
.milonga-other-cities {
    padding: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 1rem;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-ui);
    font-size: 0.78rem;
}

.milonga-agenda-links a,
.milonga-other-cities a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--accent-strong);
}

.milonga-other-cities > span {
    color: var(--text-muted);
    font-weight: 700;
}

.milonga-city-intro--phase07 {
    margin: 2.25rem 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.milonga-city-intro--phase07 p {
    max-width: 72ch;
}

@media (max-width: 720px) /* --bp-sm */ {
    .milonga-listing-header h1 {
        font-size: 48px;
    }

    .milonga-result-row {
        grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.45fr);
    }

    .milonga-result-row__actions {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .milonga-result-row__actions a {
        flex: 1 1 0;
    }
}

@media (max-width: 560px) /* --bp-xs */ {
    .milonga-listing-header {
        padding: 14px 0 15px;
    }

    .milonga-listing-header h1 {
        font-size: 40px;
    }

    .milonga-city-controls {
        padding: 14px 0;
    }

    .milonga-weekday-filter {
        margin-top: 12px;
    }

    .milonga-weekday-filter > p:last-child {
        margin-top: 6px;
    }

    .milonga-active-filters,
    .milonga-results-header {
        align-items: stretch;
        flex-direction: column;
    }

    .milonga-city-search button,
    .milonga-active-filters a {
        flex: 0 0 auto;
    }

    .milonga-day-navigation {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Weekday picker is 7 single-letter chips — keep them on one row. */
    .milonga-weekday-filter > div {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 5px;
    }

    .milonga-weekday-filter a {
        padding-left: 0;
        padding-right: 0;
    }

    .milonga-weekday-filter__full {
        display: none;
    }

    .milonga-weekday-filter__short {
        display: inline;
    }

    .milonga-results {
        padding: 18px 0 28px;
    }

    .milonga-results-header > p {
        text-align: left;
    }

    .milonga-result-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .milonga-result-row__schedule,
    .milonga-result-row__address {
        margin-top: 0.25rem;
    }

    .milonga-pagination {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .milonga-pagination > span {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .milonga-pagination a {
        width: 100%;
    }

    .milonga-agenda-group > header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.15rem;
    }
}

/* Milongas typography legibility across root and detail surfaces. */
.milongas-hub .milongas-city-ledger-link small,
.milongas-hub .milongas-city-ledger-count,
.milongas-hub .milongas-hub-result-place {
    font-size: 15px;
}

.milongas-hub .milongas-hub-result-actions a {
    font-size: 16px;
}

.milongas-hub .ed-label,
.page-milonga-detail .detail-browse-header .eyebrow {
    font-size: 13px;
}

.page-milonga-detail .listing-label,
.page-milonga-detail .milonga-link {
    font-size: 16px;
}

.page-milonga-detail .milonga-detail-badge,
.page-milonga-detail .milonga-barrio-badge {
    font-size: 15px;
}

/* Phase 08: practical-first Milonga detail pages. */
.page-milonga-detail .artist-hero-subtitle {
    max-width: min(54ch, 76%);
    margin: 0;
    color: var(--text-soft);
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
    line-height: 1.5;
    text-wrap: pretty;
}

.milonga-practical-card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.9fr);
    gap: 1.25rem clamp(1.5rem, 3vw, 3rem);
    padding: clamp(1.25rem, 2.7vw, 2.2rem);
    border: 1px solid var(--line-strong);
    background: var(--bg-panel-strong);
}

.milonga-practical-status {
    min-width: 0;
}

.milonga-practical-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.milonga-practical-labels .listing-label,
.milonga-practical-labels .milonga-schedule-state {
    margin: 0;
}

.milonga-practical-status h2 {
    max-width: 28ch;
    margin: 0.55rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.7rem);
    font-weight: 600;
    line-height: 1.08;
    text-wrap: balance;
}

.milonga-practical-status > p:not(.listing-label),
.milonga-verification p:last-child,
.milonga-related-header > p {
    max-width: 58ch;
    margin: 0.7rem 0 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.6;
    text-wrap: pretty;
}

.milonga-schedule-state {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    margin-top: 0.55rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--line-strong);
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.milonga-schedule-state--cancelled,
.milonga-schedule-state--suspended,
.milonga-schedule-state--ended {
    border-color: color-mix(in srgb, #c98176 55%, var(--line-strong));
    color: color-mix(in srgb, #e7a69b 82%, var(--text-main));
}

.milonga-practical-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line-soft);
}

.milonga-practical-facts > div {
    min-width: 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.milonga-practical-facts > div:nth-child(even):not(.milonga-practical-facts__wide) {
    padding-left: 1rem;
    border-left: 1px solid var(--line-soft);
}

.milonga-practical-facts__wide {
    grid-column: 1 / -1;
}

.milonga-practical-facts dt {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.milonga-practical-facts dd {
    margin: 0.3rem 0 0;
    color: var(--text-main);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.milonga-primary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
}

.milonga-primary-action,
.milonga-secondary-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 1rem;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.milonga-primary-action {
    min-width: 9rem;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #17100d;
}

.milonga-primary-action:hover,
.milonga-primary-action:focus-visible {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
    color: #17100d;
}

.milonga-primary-action:focus {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

.milonga-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.65rem;
}

.milonga-secondary-actions a {
    padding-inline: 0.35rem;
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
    text-underline-offset: 0.2em;
}

.milonga-secondary-actions a:hover,
.milonga-secondary-actions a:focus-visible {
    color: var(--text-main);
    text-decoration-color: currentColor;
}

.milonga-verification {
    padding: 1rem 1.1rem;
    border: 1px solid var(--line-soft);
    background: var(--bg-soft);
}

.milonga-verification strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-main);
    font-size: 16px;
}

.milonga-verification p:last-child {
    margin-top: 0.35rem;
}

.milonga-verification--expired {
    border-color: color-mix(in srgb, #b67b54 45%, var(--line-soft));
}

.milonga-community-actions {
    padding: 0.2rem 0;
}

.milonga-community-actions .detail-action-bar {
    margin: 0;
}

.page-milonga-detail .artist-card-header h2 {
    margin: 0.35rem 0 0;
    font-size: clamp(1.45rem, 1.2rem + 0.7vw, 2rem);
}

.milonga-editorial-summary {
    max-width: 56ch;
    margin: 0 0 1.35rem;
    color: var(--reading-soft-text);
    font-family: var(--font-reading);
    font-size: clamp(1.1rem, 1rem + 0.25vw, 1.25rem);
    line-height: 1.65;
    text-wrap: pretty;
}

.milonga-related-section {
    display: grid;
    gap: 1rem;
    padding: clamp(1.25rem, 2.7vw, 2rem);
    border: 1px solid var(--line-soft);
    background: var(--bg-panel);
}

.milonga-related-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.milonga-related-header h2 {
    margin: 0.35rem 0 0;
    font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.9rem);
}

.milonga-related-header > p {
    margin: 0;
}

.milonga-related-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.milonga-related-list a {
    display: grid;
    align-content: start;
    min-height: 100%;
    padding: 1rem;
    border: 1px solid var(--line-soft);
    color: var(--text-main);
    text-decoration: none;
}

.milonga-related-list a:hover,
.milonga-related-list a:focus-visible {
    border-color: var(--accent);
    background: var(--bg-soft);
}

.milonga-related-list strong {
    font-size: 16px;
    line-height: 1.35;
}

.milonga-related-list span {
    margin-top: 0.6rem;
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.milonga-related-list small {
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.45;
}

@media (max-width: 1120px) /* --bp-lg */ {
    .milonga-practical-card {
        grid-template-columns: 1fr;
    }

    .milonga-related-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) /* --bp-sm */ {
    .page-milonga-detail .breadcrumbs {
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
    }

    .page-milonga-detail .artist-hero {
        min-height: 0;
        padding: 1.1rem;
    }

    .page-milonga-detail .artist-hero > .eyebrow {
        display: none;
    }

    .page-milonga-detail .detail-hero-display {
        font-size: clamp(2.35rem, 12.5vw, 3rem);
        line-height: 0.94;
    }

    .page-milonga-detail .artist-hero-subtitle {
        max-width: 100%;
    }

    .milonga-practical-card {
        gap: 0.5rem;
        padding: 1rem;
    }

    .milonga-practical-status h2 {
        font-size: clamp(1.6rem, 7.5vw, 2rem);
    }

    .milonga-primary-actions,
    .milonga-secondary-actions {
        width: 100%;
    }

    .milonga-primary-action {
        width: 100%;
    }

    .milonga-secondary-actions a {
        flex: 1 1 auto;
    }

    .milonga-related-header {
        align-items: start;
        flex-direction: column;
    }

    .milonga-related-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .milonga-practical-facts {
        grid-template-columns: 1fr;
    }

    .milonga-practical-facts > div:nth-child(even):not(.milonga-practical-facts__wide) {
        padding-left: 0;
        border-left: 0;
    }

    .milonga-secondary-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Milongas accessible type scale across root, city, agenda, detail, and report. */
.milongas-hub,
.milonga-listing-page,
.artist-detail-section[data-milongas-page],
.milonga-report-page {
    --milongas-type-compact: 0.762rem;
    --milongas-type-supporting: 0.81rem;
    --milongas-type-body: 0.857rem;
    --milongas-type-lede: 0.952rem;
}

.milongas-hub .breadcrumbs,
.milonga-listing-page .breadcrumbs,
.artist-detail-section[data-milongas-page] .breadcrumbs,
.milonga-report-page .breadcrumbs {
    font-size: var(--milongas-type-supporting);
    line-height: 1.5;
}

.milongas-hub-hero-copy p,
.milonga-listing-header > p:last-child,
.milonga-weekday-filter > p:last-child,
.milonga-schedule-caution,
.milonga-report-header > p:last-child {
    font-size: var(--milongas-type-lede);
    line-height: 1.6;
}

.milongas-hub-search.hero-search input,
.milongas-hub-search.hero-search input[type="search"],
.milonga-city-search input[type="search"] {
    font-size: var(--milongas-type-lede);
    line-height: 1.5;
}

.milongas-hub-section-heading p,
.milongas-hub .milongas-city-ledger-link small,
.milongas-hub .milongas-city-ledger-count,
.milongas-today-link,
.milongas-weekday-links a,
.milongas-date-router__active,
.milongas-hub .milongas-hub-result-place,
.milongas-hub-result .milonga-updated-at,
.milongas-hub .milongas-hub-result-actions a {
    font-size: var(--milongas-type-supporting);
    line-height: 1.5;
}

.milongas-hub-result-schedule,
.milongas-hub-trust p {
    font-size: var(--milongas-type-body);
    line-height: 1.6;
}

.milongas-hub-result h3 {
    font-size: 1.5rem;
}

.milonga-result-row h3 {
    font-size: 1.3rem;
}

.milongas-hub .ed-label,
.milonga-listing-header .eyebrow,
.milonga-results-header .eyebrow,
.milonga-result-row__place,
.milonga-result-row__status,
.milonga-result-row__schedule .milonga-result-row__verified,
.artist-detail-section[data-milongas-page] .listing-label,
.artist-detail-section[data-milongas-page] .detail-browse-header .eyebrow,
.milonga-schedule-state,
.milonga-practical-facts dt,
.milonga-related-list span,
.milonga-report-context dt,
.milonga-report-field label {
    font-size: var(--milongas-type-compact);
    line-height: 1.5;
}

.artist-detail-section[data-milongas-page] .artist-hero > .eyebrow {
    font-size: var(--milongas-type-compact);
}

.artist-detail-section[data-milongas-page] .vote-card__toolbar-label {
    font-size: var(--milongas-type-supporting);
    line-height: 1.5;
}

.milonga-city-search > label,
.milonga-weekday-filter > p:first-child,
.milonga-city-search button,
.milonga-weekday-filter a,
.milonga-day-navigation a,
.milonga-active-filters,
.milonga-results-header > p,
.milonga-result-row__actions a,
.milonga-pagination a,
.milonga-pagination > span,
.milonga-empty-state > a,
.milonga-agenda-group > header span,
.milonga-agenda-links,
.milonga-other-cities {
    font-size: var(--milongas-type-supporting);
    line-height: 1.5;
}

.milonga-result-row__address,
.milonga-result-row__schedule,
.milonga-empty-state p,
.milonga-city-intro--phase07 p {
    font-size: var(--milongas-type-body);
    line-height: 1.55;
}

.artist-detail-section[data-milongas-page] .artist-hero-subtitle,
.milonga-practical-status > p:not(.listing-label),
.milonga-verification p:last-child,
.milonga-related-header > p,
.milonga-practical-facts dd,
.milonga-verification strong,
.milonga-related-list strong,
.milonga-related-list small {
    font-size: var(--milongas-type-body);
    line-height: 1.55;
}

.artist-detail-section[data-milongas-page] .milonga-detail-badge,
.artist-detail-section[data-milongas-page] .milonga-barrio-badge,
.artist-detail-section[data-milongas-page] .milonga-link,
.milonga-primary-action,
.milonga-secondary-actions a {
    font-size: var(--milongas-type-supporting);
}

.milonga-report-context dd,
.milonga-report-note,
.milonga-report-field input,
.milonga-report-field select,
.milonga-report-field textarea,
.milonga-report-feedback {
    font-size: var(--milongas-type-body);
    line-height: 1.55;
}

.milonga-report-hint,
.milonga-report-submit-note,
.milonga-report-errors,
.milonga-report-error-summary,
.milonga-report-submit {
    font-size: var(--milongas-type-supporting);
    line-height: 1.5;
}

.milongas-hub-search .hero-search-kbd {
    font-size: var(--milongas-type-compact);
}

@media (min-width: 900px) {
    .milongas-hub,
    .milonga-listing-page,
    .artist-detail-section[data-milongas-page],
    .milonga-report-page {
        --milongas-type-compact: 0.81rem;
        --milongas-type-supporting: 0.857rem;
        --milongas-type-body: 0.952rem;
        --milongas-type-lede: 1.048rem;
    }

    .milonga-result-row h3 {
        font-size: 1.4rem;
    }

    .milonga-city-search input[type="search"],
    .milonga-city-search button,
    .milonga-weekday-filter a,
    .milonga-day-navigation a,
    .milonga-result-row__actions a,
    .milonga-pagination a,
    .milonga-empty-state > a {
        min-height: 2.476rem;
    }
}

@media (max-width: 720px) /* --bp-sm */ {
    .artist-detail-section[data-milongas-page] .artist-hero {
        padding: 0.75rem;
    }

    .milonga-practical-card {
        gap: 0.35rem;
        padding: 0.8rem;
    }
}

.comments-card {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line-soft);
    border-radius: 24px;
    background: var(--bg-panel, var(--bg-soft));
}

.comments-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.comments-card__header h2 {
    margin: 0.35rem 0 0;
}

.comments-card__count {
    margin: 0;
    color: var(--text-muted);
    white-space: nowrap;
}

.comments-card__composer {
    margin-top: 1.25rem;
}

.comments-card__gate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.1rem;
    border: 1px dashed var(--line-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
}

.comments-card__gate p,
.comments-card__empty,
.comments-card__status,
.comments-form__hint,
.comments-list__time {
    color: var(--text-muted);
}

/* Way off the login wall to the no-account correction channel. Quieter than the
   gate itself: it is an alternative, not a second call to action. */
.comments-card__gate-alt {
    margin: 0.7rem 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.comments-card__gate-alt a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.comments-card__empty,
.comments-card__status {
    margin-top: 1rem;
}

.comments-card__status.is-error {
    color: #d25a5a;
}

.comments-form textarea {
    width: 100%;
    min-height: 8rem;
    resize: vertical;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: var(--bg-soft);
    color: var(--text-main);
    font: inherit;
}

.comments-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    margin-top: 0.9rem;
}

.comments-form__hint {
    margin: 0;
    font-size: 0.95rem;
}

.comments-form__submit {
    border: 0;
    cursor: pointer;
}

.comments-list {
    display: grid;
    gap: 1rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.comments-list__item {
    padding: 1rem 1.1rem;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: var(--bg-soft);
}

.comments-list__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.comments-list__author {
    font-size: 1rem;
}

.comments-list__time {
    font-size: 0.9rem;
}

.comments-list__body {
    margin: 0.65rem 0 0;
    white-space: pre-line;
}

@media (max-width: 720px) /* --bp-sm */ {
    .comments-card__header,
    .comments-form__footer,
    .comments-card__gate,
    .comments-list__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .comments-card__count {
        white-space: normal;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   35. /fotos/ — the cross-catalog photo wall ("El tango, cara a cara").
   Imported from the Claude Design "Fotos.html" mockup; design tokens, header,
   footer and theme come from the shared layout above. Lives inside
   .site-container, so horizontal centring/padding is inherited.
   ═══════════════════════════════════════════════════════════════════════════ */

.fotos-shell {
    padding-bottom: 8px;
}

/* ── Title band ── */
.fotos-shell .gallery-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding: 30px 0 22px;
}
.fotos-shell .gh-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.fotos-shell .gh-eyebrow::after {
    content: "";
    width: 54px;
    height: 1px;
    background: var(--line-strong);
}
.fotos-shell .gh-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(38px, 6.2vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.015em;
}
.fotos-shell .gh-title b {
    font-style: normal;
    font-weight: 600;
}
.fotos-shell .gh-lede {
    max-width: 46ch;
    margin: 16px 0 0;
    font-family: var(--font-reading);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-soft);
}
.fotos-shell .gh-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 4px;
}
.fotos-shell .gh-count {
    text-align: right;
}
.fotos-shell .gh-count .n {
    display: block;
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
}
.fotos-shell .gh-count .l {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── The wall (masonry columns) ── */
.fotos-shell .reel {
    position: relative;
    columns: 5 248px;
    column-gap: 16px;
    padding: 6px 0 56px;
}
@media (max-width: 1120px) /* --bp-lg */ {
    .fotos-shell .reel {
        columns: 4 220px;
    }
}
@media (max-width: 900px) /* --bp-md */ {
    .fotos-shell .reel {
        columns: 3 200px;
    }
}
@media (max-width: 560px) /* --bp-xs */ {
    /* iOS WebKit (Chrome on iPhone runs WebKit) fails to paint the in-flow
       content — image, card bg, gradients — of the 2nd+ multicol column on this
       page; only the absolutely-positioned vote overlay survives, so cards look
       like they "disappear". The per-card filter + mix-blend-mode compositing is
       the trigger. Use a real 2-col CSS grid on phones instead of CSS columns:
       no masonry stagger, but bulletproof. */
    .fotos-shell .reel {
        columns: auto;
        column-gap: normal;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        align-items: start;
    }
}
/* grain + vignette over the reel */
.fotos-shell .reel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: overlay;
}

/* ── Photo card ── */
.photo-vote {
    display: flex;
    align-items: center;
    gap: 4px;
}
.photo-vote__button {
    appearance: none;
    min-width: 42px;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: var(--bg-shell);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease-out);
}
.photo-vote__button:hover,
.photo-vote__button:focus-visible {
    color: var(--text-main);
    border-color: var(--line-strong);
}
.photo-vote__button:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}
.photo-vote__button:active {
    transform: translateY(1px);
}
.photo-vote__button.is-active {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent-strong) 65%, transparent);
    background: color-mix(in srgb, var(--accent-strong) 12%, var(--bg-shell));
}
.photo-vote__button:disabled {
    cursor: wait;
    opacity: 0.65;
}
.photo-vote__button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.photo-vote__button strong {
    min-width: 1ch;
    font-family: var(--font-ui);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.photo-vote--overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.35s ease, transform 0.35s var(--ease-out-expo);
}
.fotos-shell .ph:hover .photo-vote--overlay,
.fotos-shell .ph:focus-visible .photo-vote--overlay {
    opacity: 1;
    transform: scale(1);
}
@media (hover: none) {
    .photo-vote--overlay {
        opacity: 1;
        transform: scale(1);
    }
}
.photo-vote--overlay .photo-vote__button {
    min-width: 38px;
    min-height: 36px;
    color: rgba(243, 237, 230, 0.82);
    border-color: rgba(243, 237, 230, 0.26);
    background: rgba(13, 11, 13, 0.68);
    backdrop-filter: blur(6px);
}
.photo-vote--overlay .photo-vote__button.is-active {
    color: var(--accent-strong);
    border-color: var(--accent-strong);
    background: rgba(13, 11, 13, 0.88);
}
.fotos-shell .ph {
    position: relative;
    display: block;
    margin: 0 0 16px;
    overflow: hidden;
    break-inside: avoid;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--bg-shell);
    cursor: pointer;
    isolation: isolate;
    transition: border-color 0.4s var(--ease-out), transform 0.55s var(--ease-out-expo),
        opacity 0.6s var(--ease-out);
}
@media (max-width: 560px) /* --bp-xs */ {
    /* grid `gap` handles spacing now; the column-flow margin would double it */
    .fotos-shell .ph {
        margin-bottom: 0;
    }
}
.reveal-on .fotos-shell .ph {
    opacity: 0;
    transform: translateY(22px);
}
.reveal-on .fotos-shell .ph.in {
    opacity: 1;
    transform: none;
}
/* iOS/Blink multicol repaint bug: transforming break-inside:avoid cards inside a
   CSS-columns reel makes whole columns flicker ("appear/disappear") on scroll.
   On touch devices (incl. Chrome on iPhone, which runs WebKit), skip the
   scroll-reveal so the column layout stays painted. Desktop keeps the animation. */
@media (hover: none) {
    .reveal-on .fotos-shell .ph,
    .reveal-on .fotos-shell .ph.in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
.fotos-shell .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.28) sepia(0.32) contrast(1.04) brightness(0.92);
    transition: filter 0.6s var(--ease-out), transform 1.1s var(--ease-out-expo);
}
.fotos-shell .ph::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(150deg, rgba(202, 160, 112, 0.16), rgba(13, 11, 13, 0) 42%);
    mix-blend-mode: soft-light;
    transition: opacity 0.5s ease;
}
.fotos-shell .ph::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(13, 11, 13, 0) 38%, rgba(13, 11, 13, 0.42) 64%, rgba(8, 7, 8, 0.93) 100%);
}
.fotos-shell .ph:hover {
    transform: translateY(-3px) scale(1.012);
    border-color: var(--line-strong);
}
.fotos-shell .ph:hover img {
    filter: grayscale(0) sepia(0.04) contrast(1.06) brightness(1);
    transform: scale(1.05);
}
.fotos-shell .ph:hover::before {
    opacity: 0;
}
.fotos-shell .ph:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}
.fotos-shell .ph-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 16px 15px;
}
.fotos-shell .ph-epithet {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--accent-strong);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s var(--ease-out) 0.02s, transform 0.45s var(--ease-out-expo) 0.02s;
}
.fotos-shell .ph:hover .ph-epithet,
.fotos-shell .ph:focus-visible .ph-epithet {
    opacity: 1;
    transform: translateY(0);
}
.fotos-shell .ph-names {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}
.fotos-shell .ph-name {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.05;
    color: #fff;
    text-decoration: none;
}
.fotos-shell a.ph-name {
    position: relative;
    transition: color 0.25s ease;
}
.fotos-shell a.ph-name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 0;
    background: var(--accent-strong);
    transition: width 0.3s var(--ease-out);
}
.fotos-shell a.ph-name:hover,
.fotos-shell a.ph-name:focus-visible {
    color: var(--accent-strong);
    outline: none;
}
.fotos-shell a.ph-name:hover::after,
.fotos-shell a.ph-name:focus-visible::after {
    width: 100%;
}
.fotos-shell .ph-sep {
    color: rgba(243, 237, 230, 0.55);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    line-height: 1;
}
/* Photo credit — the caption is editorial, the credit is a factual/legal
   footnote, so it sits a step quieter and on its own line. Rendered only where
   a license requires it or a real author is known (components/photo_credit.html),
   which today is a small minority of the gallery. Lives in site.css rather than
   photo_gallery.css because /fotos/ does not load the gallery sheet. */
.photo-credit {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    line-height: 1.3;
    opacity: 0.7;
}
.photo-credit a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.fotos-shell .photo-credit {
    color: rgba(243, 237, 230, 0.75);
}
.fotos-shell .ph-num {
    position: absolute;
    top: 11px;
    left: 13px;
    z-index: 2;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
}
.fotos-shell .ph-plus {
    position: absolute;
    top: 54px;
    right: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    background: rgba(13, 11, 13, 0.3);
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.35s ease, transform 0.35s var(--ease-out-expo), background 0.3s ease;
}
.fotos-shell .ph-plus svg {
    width: 13px;
    height: 13px;
}
.fotos-shell .ph:hover .ph-plus,
.fotos-shell .ph:focus-visible .ph-plus {
    opacity: 1;
    transform: scale(1);
}

/* ── Load more ── */
.fotos-load-more {
    display: flex;
    justify-content: center;
    padding: 8px 0 56px;
}
.fotos-load-more-indicator {
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
}
.fotos-load-more-indicator.htmx-request,
.htmx-request .fotos-load-more-indicator {
    animation: fotos-spin 0.7s linear infinite;
}
@keyframes fotos-spin {
    to {
        transform: rotate(360deg);
    }
}
.fotos-empty {
    padding: 40px 0 80px;
    color: var(--text-muted);
    font-family: var(--font-reading);
}

/* ── Lightbox ── */
body.fotos-lightbox-open {
    overflow: hidden;
}
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vh 5vw;
    background: rgba(8, 7, 8, 0.86);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.lightbox.open {
    display: flex;
    opacity: 1;
}
.lightbox .lb-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    max-width: 980px;
    width: 100%;
    max-height: 92vh;
    overflow: hidden;
    background: var(--bg-shell);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: translateY(14px) scale(0.985);
    transition: transform 0.45s var(--ease-out-expo);
}
.lightbox.open .lb-inner {
    transform: translateY(0) scale(1);
}
.lightbox .lb-figure {
    position: relative;
    min-height: 300px;
    background: #000;
}
.lightbox .lb-figure img {
    width: 100%;
    height: 100%;
    max-height: 92vh;
    object-fit: cover;
    filter: contrast(1.04) brightness(0.97);
}
.lightbox .lb-side {
    display: flex;
    flex-direction: column;
    padding: 34px 30px;
}
.lightbox .lb-kicker {
    margin-bottom: 18px;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.lightbox .lb-epithet {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 19px;
    line-height: 1.25;
    color: var(--accent-strong);
}
.lightbox .lb-name {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--text-main);
}
.lightbox .lb-name-link {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color 0.25s ease, background-size 0.3s var(--ease-out);
}
.lightbox .lb-name-link:hover,
.lightbox .lb-name-link:focus-visible {
    color: var(--accent-strong);
    background-size: 100% 1px;
    outline: none;
}
.lightbox .lb-name-sep {
    color: var(--text-muted);
}
.lightbox .lb-rule {
    height: 1px;
    margin: 22px 0;
    background: var(--line-soft);
}
.lightbox .lb-links {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.lightbox .lb-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 3px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-strong);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, gap 0.3s ease;
}
.lightbox .lb-link:hover {
    border-color: var(--accent);
    gap: 16px;
}
.lightbox .lb-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 40px;
    height: 40px;
    /* Override the global button{} reset (min-height:3rem, padding, gradient)
       which would otherwise stretch this into an ellipse and hide the ×. */
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(13, 11, 13, 0.62);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.25s ease, color 0.25s ease;
}
.lightbox .lb-close:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #0d0b0d;
}
.lightbox .lb-close svg {
    width: 16px;
    height: 16px;
}

/* ── Responsive ── */
@media (max-width: 900px) /* --bp-md */ {
    .lightbox .lb-inner {
        grid-template-columns: 1fr;
    }
    .lightbox .lb-figure {
        max-height: 50vh;
    }
    .lightbox .lb-side {
        padding: 24px;
    }
}
@media (max-width: 900px) /* --bp-md */ {
    .fotos-shell .gallery-head {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 0 18px;
    }
    .fotos-shell .gh-aside {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .fotos-shell .gh-count {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fotos-shell .ph,
    .fotos-shell .ph img,
    .fotos-shell .ph-epithet,
    .fotos-shell .ph-plus,
    .photo-vote--overlay,
    .lightbox,
    .lightbox .lb-inner {
        transition: none;
    }
}

/* ── Home: mejoras de móvil (hero compacto) ── */
@media (max-width: 720px) /* --bp-sm */ {
    .page-home .home-hero { min-height: auto; padding: 42px 0 48px; }
    .page-home .hero-inner { gap: 30px; align-items: start; }
    .page-home .hero-title { font-size: clamp(42px, 12vw, 56px); line-height: .96; }
    .page-home .hero-title .line-2 { margin-top: 2px; }
    .page-home .hero-lede { font-size: 17px; line-height: 1.5; margin-top: 16px; }
    .page-home .hero-search { margin-top: 20px; padding: 13px 15px; }
    .page-home .hero-search input,
    .page-home .hero-search input[type="text"] { font-size: 16px !important; }
    .page-home .hero-chips { margin-top: 12px; }
    .page-home .hero-verse { max-width: none; padding: 20px; }
    .page-home .hero-verse-text { font-size: clamp(24px, 7.2vw, 30px); }
    .page-home .hero-verse-meta { grid-column: 1 / -1; }
    .page-home .hero-verse > .read-link { grid-column: 1 / -1; justify-self: start; padding-top: 0; }
    .page-home .dual { padding: 48px 0 24px; }
    .page-home .section-head { margin-bottom: 20px; padding-bottom: 12px; }
    .page-home .section-sub { margin: -10px 0 18px; }
    .page-home .works-section { margin-top: 40px; padding-top: 40px; }
    .page-home .milongas { padding: 48px 0; }
    .page-home .milongas-wrap { padding: 28px 20px; }
    .page-home .editorial { padding: 48px 0; gap: 28px; }
}
@media (max-width: 420px) /* --bp-xxs */ {
    .page-home .hero-title { font-size: 40px; }
    .page-home .hero-lede { font-size: 16px; }
}

/* Botones de milonga: nunca partir el texto en dos líneas */
.page-home .mcard .m-btn,
.milonga-link { white-space: nowrap; }

/* ── 32. Lyric detail: recirculación (rail sticky / bottom sheet / mazo) ──
   Desktop (≥901px): dos columnas — letra + rail sticky con scroll interno.
   Móvil (≤900px) sin JS: el rail queda en flujo después de la letra.
   Móvil con JS: lyric_recirc.js agrega .is-sheet → hoja inferior fija con
   peek, arrastre por el grip y auto-open al final de la letra. */

.lyric-reader-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 17.5rem);
    align-items: start;
}

.lyric-recirc {
    position: sticky;
    top: 4.6rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 5.6rem);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-panel-strong);
    box-shadow: var(--shadow-sm);
}

.lyric-recirc-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1.05rem 1.05rem 1.3rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-deep) transparent;
}

.lyric-recirc-scroll::-webkit-scrollbar {
    width: 6px;
}

.lyric-recirc-scroll::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 3px;
}

.lyric-recirc-cap {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--line-soft);
}

.lyric-recirc-grip {
    display: none;
    border: 0;
    background: transparent;
    padding: 0;
}

/* The global button:hover/:focus-visible rule paints buttons with
   --accent-strong; on iOS :hover sticks after a tap, so the full-width grip
   flashed as a solid tan band across the sheet. The grip is a drag handle,
   not a call-to-action — keep it transparent in every state (keyboard focus
   keeps the global outline ring). */
.lyric-recirc-grip:hover,
.lyric-recirc-grip:focus-visible {
    background: transparent;
    box-shadow: none;
}

.lyric-recirc-sec {
    margin-top: 1.5rem;
}

.recirc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.recirc-head h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.05;
    color: var(--text-main);
    margin: 0;
}

.recirc-head a {
    font-size: 0.62rem;
    color: var(--accent-strong);
    font-weight: 600;
    white-space: nowrap;
}

.recirc-head a:hover,
.recirc-head a:focus-visible {
    text-decoration: underline;
}

.recirc-summary {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.6rem;
}

/* Autor + intérpretes */
.recirc-author {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(201, 168, 122, 0.10), transparent 70%);
    transition: border-color 160ms ease, transform 160ms ease;
}

a.recirc-author:hover,
a.recirc-author:focus-visible {
    border-color: var(--accent-deep);
    transform: translateY(-1px);
}

.recirc-author-avatar {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}

.recirc-author-avatar--initial {
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: #1a120c;
    background: linear-gradient(150deg, var(--accent-strong), var(--accent-deep));
}

.recirc-author-info {
    flex: 1;
    min-width: 0;
}

.recirc-author-role {
    display: block;
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}

.recirc-author-name {
    display: block;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.12;
}

.recirc-author-go {
    font-size: 0.62rem;
    color: var(--accent-strong);
    font-weight: 700;
    white-space: nowrap;
}

.recirc-people {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.recirc-person {
    flex: 1 1 6.4rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    transition: border-color 160ms ease;
}

a.recirc-person:hover,
a.recirc-person:focus-visible {
    border-color: var(--accent-deep);
}

.recirc-person-avatar {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}

.recirc-person-avatar--initial {
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-main);
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
}

.recirc-person-info {
    min-width: 0;
}

.recirc-person-role {
    display: block;
    font-size: 0.45rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}

.recirc-person-name {
    display: block;
    font-size: 0.66rem;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Más de {autor}" — carrusel horizontal */
.recirc-hscroll {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-deep) transparent;
}

.recirc-hscroll::-webkit-scrollbar {
    height: 5px;
}

.recirc-hscroll::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 3px;
}

.recirc-tcard {
    flex: 0 0 7.2rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    padding: 0.65rem;
    background: var(--bg-panel);
    scroll-snap-align: start;
    transition: border-color 160ms ease, transform 160ms ease;
}

.recirc-tcard:hover,
.recirc-tcard:focus-visible {
    border-color: var(--accent-deep);
    transform: translateY(-2px);
}

.recirc-tcard-k {
    font-size: 0.45rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}

.recirc-tcard-t {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.08;
    margin: 0.3rem 0 0.4rem;
    overflow-wrap: break-word;
}

.recirc-tcard-y {
    font-size: 0.56rem;
    color: var(--text-soft);
    margin-top: auto;
}

/* Ver y escuchar */
.recirc-spotify {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: rgba(30, 215, 96, 0.10);
    color: var(--text-main);
    font-size: 0.66rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.recirc-spotify:hover,
.recirc-spotify:focus-visible {
    border-color: rgba(30, 215, 96, 0.5);
    background: rgba(30, 215, 96, 0.16);
}

.recirc-spotify svg {
    width: 0.85rem;
    height: 0.85rem;
    color: #1ed760;
}

/* Mazo "Próximo tango" — sin JS: lista simple de links */
.lyric-deck-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.lyric-deck-list a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    transition: border-color 160ms ease;
}

.lyric-deck-list a:hover,
.lyric-deck-list a:focus-visible {
    border-color: var(--accent-deep);
}

.lyric-deck-k {
    font-size: 0.48rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-strong);
    font-weight: 700;
}

.lyric-deck-t {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.05;
    color: var(--text-main);
}

.lyric-deck-m {
    font-size: 0.62rem;
    color: var(--text-soft);
    font-family: var(--font-reading);
}

.lyric-deck-hint {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-family: var(--font-reading);
    margin-bottom: 0.55rem;
}

/* Mazo con JS: cartas apiladas */
.lyric-deck.is-deck {
    position: relative;
    height: 10.2rem;
    touch-action: pan-y;
}

.lyric-deck.is-deck .lyric-deck-list {
    display: contents;
}

.lyric-deck.is-deck .lyric-deck-list li {
    display: contents;
}

.lyric-deck.is-deck .lyric-deck-list a {
    position: absolute;
    inset: 0;
    justify-content: flex-start;
    gap: 0.2rem;
    padding: 0.95rem;
    border-radius: var(--radius-lg);
    background: var(--bg-panel-strong);
    box-shadow: var(--shadow-md);
    will-change: transform, opacity;
    user-select: none;
    -webkit-user-select: none;
}

.lyric-deck.is-deck .lyric-deck-list a[data-deck-pos="hidden"] {
    display: none;
}

.lyric-deck.is-deck .lyric-deck-t {
    font-size: 1.45rem;
    margin-top: 0.25rem;
}

.lyric-deck.is-deck .lyric-deck-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: var(--line-strong);
    color: var(--text-main);
    opacity: 0;
    transition: opacity 120ms ease;
}

.lyric-deck-ctl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.8rem;
}

.lyric-deck-ctl button {
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    min-height: 2.3rem;
    padding: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--bg-soft);
    color: var(--text-soft);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.lyric-deck-ctl button:active {
    transform: scale(0.92);
}

.lyric-deck-ctl button svg {
    width: 1rem;
    height: 1rem;
}

.lyric-deck-ctl .lyric-deck-open {
    border-color: transparent;
    background: var(--accent);
    color: #1a120c;
}

.lyric-deck-ctl .lyric-deck-open:hover {
    background: var(--accent-strong);
}

.lyric-deck-count {
    font-size: 0.58rem;
    color: var(--text-muted);
    min-width: 2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.lyric-deck-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    text-align: center;
    padding: 0.95rem;
}

.lyric-deck-empty[hidden] {
    display: none;
}

.lyric-deck-empty-t {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-soft);
}

.lyric-deck-empty button {
    border: 0;
    background: transparent;
    color: var(--accent-strong);
    font-weight: 700;
    font-size: 0.68rem;
    cursor: pointer;
}

/* Empujón a comentarios */
.lyric-recirc-nudge {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.5rem;
    padding: 0.8rem 0.9rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    transition: border-color 160ms ease;
}

.lyric-recirc-nudge:hover,
.lyric-recirc-nudge:focus-visible {
    border-color: var(--accent-deep);
}

.lyric-recirc-nudge-q {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.6rem;
    color: var(--accent);
    line-height: 0.5;
}

.lyric-recirc-nudge-t {
    font-size: 0.66rem;
    color: var(--text-soft);
    line-height: 1.45;
}

.lyric-recirc-nudge-t b {
    color: var(--text-main);
}

/* Marca de fin de letra (sentinela del auto-open) */
.lyric-endmark {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.4rem;
    color: var(--text-muted);
}

.lyric-endmark-line {
    flex: 1;
    height: 1px;
    background: var(--line-soft);
}

.lyric-endmark-dots {
    font-size: 0.62rem;
    letter-spacing: 0.4em;
}

/* Bloque determinista de datos: oración-respuesta de autoría + versiones
   grabadas (components/lyric_kb_block.html, datos de content_catalog/
   lyric_kb_block.py). Cierra la zona editorial, nunca precede a la letra.
   Comparte la columna de lectura de .lyric-text para no abrir un ancho nuevo. */
.lyric-facts {
    width: min(38rem, 100%);
    margin: 1.9rem auto 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line-soft);
}

/* La oración va primero y sin rótulo: es la respuesta, y una etiqueta encima
   solo agregaría cromo entre el lector y el dato. */
.lyric-facts-answer {
    margin: 0;
    color: var(--reading-text);
    font-family: var(--font-reading);
    font-size: 1.02rem;
    line-height: 1.62;
    text-wrap: pretty;
}

.lyric-facts-title {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.4rem 0 0.6rem;
}

.lyric-facts-versions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.36rem;
}

.lyric-facts-version {
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-soft);
}

.lyric-facts-year {
    flex: none;
    min-width: 2.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.lyric-facts-credit a {
    color: inherit;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 0.16em;
}

.lyric-facts-credit a:hover,
.lyric-facts-credit a:focus-visible {
    color: var(--accent-deep);
}

.lyric-facts-note {
    margin: 0.85rem 0 0;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* El año en su propia línea gana más de lo que cuesta a ~360px: en una sola fila
   el crédito queda con 2-3 palabras por renglón. Reusa el breakpoint existente. */
@media (max-width: 560px) {
    .lyric-facts-version {
        flex-direction: column;
        gap: 0.1rem;
    }

    .lyric-facts-year {
        min-width: 0;
    }
}

/* Ficha dentro del rail */
.recirc-ficha .lyric-meta-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ── Móvil (≤900px): rail en flujo sin JS; hoja inferior con JS ── */
@media (max-width: 900px) {
    .lyric-reader-grid {
        grid-template-columns: 1fr;
    }

    /* The bottom sheet is secondary navigation. Keep the shared editorial hero
       above its fixed peek while the two overlap, then let the sheet take over
       naturally once the hero scrolls away. This also keeps image credits and
       the action row fully readable on short phone viewports.
       (Was scoped to [data-ab-variant="v2"] during the letras_detail A/B; that
       attribute was dropped at the 2026-07-18 close, silently disabling this
       rule — now unconditional so it never couples to a later experiment's
       variant marker, e.g. letras_search_module.) */
    .lyric-detail-section .lyric-hero {
        z-index: 46;
    }

    .lyric-recirc {
        position: static;
        max-height: none;
    }

    .lyric-recirc-scroll {
        overflow-y: visible;
        padding: 1rem 1rem 1.3rem;
    }
}

/* Hoja inferior (activada por JS solo ≤900px) */
.lyric-recirc.is-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    /* Fit the content (now only "Datos del tango"), capped — no empty margin
       below when the card is short. */
    height: auto;
    max-height: 86dvh;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 1rem 1rem 0 0;
    background: #1a151a;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
    transform: translateY(calc(100% - 4.5rem));
    /* z-index drops back below the hero only after the close slide finishes,
       so the sheet never slides down *behind* the hero card mid-animation. */
    transition: transform 340ms var(--ease-out-expo), visibility 340ms, z-index 0s 340ms;
    /* The closed peek is one big drag/tap surface (see lyric_recirc.js); let
       pointer events own the gesture instead of the browser's pan-to-scroll. */
    touch-action: none;
    /* The sheet is navigation, not prose: a drag must never paint a text
       selection (the ::selection tan tint over the peek). Kill selection and
       the iOS long-press callout on the whole subtree. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

html[data-theme="light"] .lyric-recirc.is-sheet {
    background: #fffcf7;
}

html[data-theme="light"] .lyric-recirc.is-sheet {
    box-shadow: 0 -18px 50px rgba(50, 32, 24, 0.22);
}

.lyric-recirc.is-sheet.is-open {
    transform: translateY(0);
    /* Above the hero (z-index 46): the hero only wins while the sheet is a
       closed peek. An open sheet that stays underneath gets its "Datos del
       tango" header and body hidden behind the hero card. */
    z-index: 47;
    transition: transform 340ms var(--ease-out-expo), visibility 340ms, z-index 0s;
    /* Open sheet scrolls its content normally. */
    touch-action: auto;
}

.lyric-recirc.is-sheet.is-away {
    transform: translateY(100%);
    visibility: hidden;
}

.lyric-recirc.is-sheet.is-dragging {
    transition: none;
    z-index: 47;
    /* Promote to its own layer so the big shadow isn't repainted per frame. */
    will-change: transform;
}

.lyric-recirc.is-sheet .lyric-recirc-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.7rem;
    flex: 0 0 auto;
    margin-top: 0.2rem;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    /* Wider invisible hit-area so the grip is easy to grab. */
    padding: 0.4rem 0;
}

.lyric-recirc.is-sheet.is-dragging .lyric-recirc-grip {
    cursor: grabbing;
}

.lyric-recirc.is-sheet .lyric-recirc-grip-bar {
    width: 2rem;
    height: 4px;
    border-radius: 2px;
    background: var(--line-strong);
}

.lyric-recirc.is-sheet .lyric-recirc-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lyric-recirc.is-sheet:not(.is-open) .lyric-recirc-scroll {
    overflow-y: hidden;
}

/* "Datos del tango" leads the mobile sheet. The closed peek keeps only the
   grip + title so it never covers the hero action row; opening reveals facts. */
.lyric-recirc.is-sheet .lyric-recirc-scroll {
    display: flex;
    flex-direction: column;
}

.lyric-recirc.is-sheet .lyric-recirc-sec--ficha {
    order: -1;
    margin-top: 0;
}

/* The generic "Seguí explorando" cap is redundant once Datos leads. */
.lyric-recirc.is-sheet .lyric-recirc-cap {
    display: none;
}

.recirc-head--ficha {
    align-items: center;
}

/* La hoja en peek no debe tapar el final de la lectura. Con el resto del recirc
   ya movido al flujo (que va debajo), la letra no es el final de página, así que
   basta un respiro chico en vez de 7rem. */
.lyric-reader-grid.has-sheet {
    padding-bottom: 1.5rem;
    /* A mouse-drag in the lyric paints a full-width selection band at the
       sheet's edge that reads as "selecting the sheet". Disable selection in
       the reading column while the sheet is active (real touch never selects
       on scroll, so this only affects mouse/QA). */
    user-select: none;
    -webkit-user-select: none;
}

/* Mobile-only: recirc sections relocated out of the sheet by lyric_recirc.js.
   Hidden + empty on desktop (the sidebar keeps them). */
.lyric-recirc-flow[hidden] {
    display: none;
}

.lyric-recirc-flow {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin-top: 0;
    /* The layout is a CSS grid; without this the flow (a grid item) takes its
       content min-width — a video thumbnail (~800px) — and blows out the page
       to the right ("estirado a lo ancho"). Let it shrink to the track. */
    min-width: 0;
    max-width: 100%;
}

.lyric-recirc-flow > *,
.lyric-recirc-flow .recirc-hscroll {
    min-width: 0;
    max-width: 100%;
}

.lyric-recirc-flow img {
    max-width: 100%;
    height: auto;
}

.lyric-recirc-flow .lyric-recirc-sec {
    margin-top: 0;
}

/* Symmetric spacing: match the button's top gap to the 1.75rem section gap
   below it (mobile flow only; the desktop sidebar keeps its own spacing). */
.lyric-recirc-flow .recirc-spotify {
    margin-top: 1.75rem;
}

.lyric-recirc-flow .lyric-recirc-cap {
    margin-bottom: -0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .lyric-recirc.is-sheet,
    .recirc-author,
    .recirc-person,
    .recirc-tcard,
    .lyric-deck-list a,
    .lyric-deck-ctl button {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   "¿Viste un error o sabés algo que falta?" — zero-registration editorial
   correction channel at the foot of the reading sheet on letras / obras /
   artistas (components/content_error_report.html).

   Deliberately the quietest thing on the page: a hairline seam and a muted
   one-line summary. Editorial content > navigation > this. It sits INSIDE
   .lyric-sheet, so every colour comes from the --reading-* tokens (the sheet
   is paper-coloured in light theme; --text-main would read wrong there).
   --------------------------------------------------------------------------- */
.ficha-report {
    margin-top: 2.2rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--reading-border);
}

/* One divider per seam (docs/frontend.md): on the v1 lyric reader the end-of-text
   mark sits immediately above, so a second hairline would be stacked dead space. */
.lyric-endmark + .ficha-report {
    margin-top: 0.9rem;
    border-top: 0;
}

.ficha-report-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 48px; /* touch-target floor (docs/frontend.md) */
    cursor: pointer;
    list-style: none;
    color: var(--reading-muted-text);
    font-family: var(--font-ui);
    font-size: 0.86rem;
}

.ficha-report-summary::-webkit-details-marker {
    display: none;
}

.ficha-report-summary:hover .ficha-report-q {
    color: var(--reading-text);
}

.ficha-report-summary:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

.ficha-report-q {
    transition: color 180ms var(--ease-out);
}

.ficha-report-cue {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    color: var(--accent-strong);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ficha-report-cue::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
    transition: transform 180ms var(--ease-out);
}

.ficha-report[open] .ficha-report-cue::after {
    transform: translateY(0.1rem) rotate(225deg);
}

.ficha-report-panel {
    display: grid;
    gap: 1rem;
    padding-bottom: 0.4rem;
}

.ficha-report-note,
.ficha-report-hint {
    margin: 0;
    color: var(--reading-muted-text);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ficha-report-form,
.ficha-report-field {
    display: grid;
}

.ficha-report-form { gap: 0.9rem; }
.ficha-report-field { gap: 0.35rem; }

.ficha-report-field label {
    color: var(--reading-muted-text);
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ficha-report-field label span {
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.ficha-report-field input,
.ficha-report-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--reading-border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--reading-text);
    font-family: var(--font-ui);
    font-size: 0.95rem;
}

.ficha-report-field textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.5;
}

.ficha-report-field input::placeholder,
.ficha-report-field textarea::placeholder {
    color: var(--reading-muted-text);
    opacity: 0.75;
}

.ficha-report-field input:focus-visible,
.ficha-report-field textarea:focus-visible,
.ficha-report-submit:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

/* Escapes nothing from the global button pill on purpose: the submit is only
   visible once the reader opened the panel, where a clear primary is correct. */
.ficha-report-submit {
    justify-self: start;
}

.ficha-report-submit:disabled {
    cursor: wait;
    opacity: 0.62;
}

.ficha-report-feedback {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--reading-text);
    font-family: var(--font-ui);
    font-size: 0.88rem;
}

.ficha-report-feedback--error { border-color: var(--accent-deep); }

.ficha-report-errors {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--accent-strong);
    font-family: var(--font-ui);
    font-size: 0.8rem;
}

.ficha-report-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 560px) /* --bp-xs */ {
    .ficha-report { margin-top: 1.6rem; }

    .ficha-report-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.55rem 0;
    }

    .ficha-report-q { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ficha-report-q,
    .ficha-report-cue::after {
        transition: none;
    }
}

/* ==========================================================================
   Milongas — proximity panel and zone index
   Tokens only, so both data-themes follow automatically (see docs/frontend.md).
   ========================================================================== */

.milonga-nearby {
    margin: 0 0 1.6rem;
    padding: 1.1rem 1.3rem;
    background: var(--bg-panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
}

.milonga-nearby__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.milonga-nearby__intro {
    min-width: 0;
}

.milonga-nearby__lede {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 17px;
    line-height: 1.45;
}

.milonga-nearby__toggle {
    flex: 0 0 auto;
    /* 44px minimum touch target (frontend.md) */
    min-height: 44px;
    padding: 0 1.15rem;
    color: var(--text-main);
    background: transparent;
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.milonga-nearby__toggle:hover,
.milonga-nearby__toggle:focus-visible {
    background: color-mix(in srgb, var(--accent-strong) 14%, transparent);
}

.milonga-nearby__toggle[disabled] {
    cursor: progress;
    opacity: 0.6;
}

.milonga-nearby__privacy,
.milonga-nearby__summary,
.milonga-nearby__empty {
    margin: 0.9rem 0 0;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.5;
}

.milonga-nearby__results:not([hidden]) {
    margin-top: 0.4rem;
}

.milonga-nearby__list {
    margin-top: 0.2rem;
}

.milonga-result-row__distance {
    margin: 5px 0 0;
    color: var(--accent-strong);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.milonga-zones {
    margin: 0 0 2.2rem;
    padding: 1.4rem 1.6rem;
    background: var(--bg-panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
}

.milonga-zones__header h2 {
    margin: 0.2rem 0 0.6rem;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.milonga-zones__lede {
    max-width: 72rem;
    margin: 0;
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 17px;
    line-height: 1.7;
}

.milonga-zones__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 14px 24px;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.milonga-zones__zone {
    min-width: 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line-soft);
}

.milonga-zones__name {
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 19px;
    font-style: italic;
    line-height: 1.2;
}

.milonga-zones__count {
    margin: 3px 0 0;
    color: var(--accent-strong);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.milonga-zones__barrios {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.5;
}

.milonga-zones__others {
    margin: 1.2rem 0 0;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 720px) {
    .milonga-nearby,
    .milonga-zones {
        padding: 1.05rem 1.1rem;
    }

    .milonga-zones__list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 560px) {
    .milonga-nearby__bar {
        flex-direction: column;
        align-items: stretch;
    }

    .milonga-nearby__toggle {
        width: 100%;
    }
}