/* ════════════════════════════════════════════════════════════
 L IST *PAGE — EXHIBITION CATALOGUE
 All selectors are prefixed .lp- to avoid collision with
 base.njk styles. The only exceptions are overrides to
 the site's `main` element sizing.
 ════════════════════════════════════════════════════════════ */

:root {

    /* ── Colors — Masthead ──────────────────────────────────── */

    --lp-masthead-rule-heavy-color:       var(--ink); /* Color of the thick horizontal rule at the top and bottom of the masthead frame */
    --lp-masthead-rule-thin-color:        var(--ink); /* Color of the thin horizontal rule flanking each heavy rule in the masthead frame */
    --lp-masthead-eyebrow-color:          var(--ink); /* Text color of the small "Cinemaths · Exhibition Catalogue" eyebrow label */
    --lp-masthead-title-color:            var(--ink); /* Text color of the large uppercase list title in the masthead */
    --lp-masthead-subtitle-color:         var(--ink); /* Text color of the italic subtitle/description line beneath the masthead title */
    --lp-masthead-stats-color:            var(--ink); /* Text color of the entry-count / mean-score / ranked-by stats row */

    /* ── Colors — Sort bar ──────────────────────────────────── */

    --lp-sort-label-color:                var(--ink); /* Text color of the "Order —" label at the start of the sort bar */
    --lp-sort-btn-color:                  var(--ink); /* Text color of each sort button (Rank / Title / Year) */
    --lp-sort-btn-underline-color:        var(--ink); /* Color of the underline that appears beneath the active/hovered sort button */
    --lp-sort-sep-color:                  var(--ink); /* Color of the "·" separator dots between sort buttons */

    /* ── Colors — Entry separator ────────────────────────────── */

    --lp-entry-sep-line-color:            var(--ink); /* Color of the thin horizontal lines flanking the ✦ ornament between entries */
    --lp-entry-sep-heavy-color:           var(--ink); /* Color of the heavy-rule separator variant (defined for entry separators) */
    --lp-entry-sep-orn-color:             var(--ink); /* Color of the ✦ ornament glyph between catalogue entries */

    /* ── Colors — Plate number & poster ──────────────────────── */

    --lp-entry-number-color:              var(--ink); /* Color of the large italic plate/rank number printed beside each entry */
    --lp-entry-poster-border-color:       var(--ink); /* Border color around each film poster thumbnail */
    --lp-entry-poster-shadow-color:       rgba(0,0,0,0.22); /* Drop-shadow color beneath each film poster thumbnail (engraved-plate effect) */
    --lp-entry-poster-missing-border-color: var(--ink); /* Border color of the placeholder box shown when a film has no poster */
    --lp-entry-poster-missing-bg-color:   rgba(0,0,0,0.07); /* Background fill color of the "No Plate" placeholder box */
    --lp-entry-poster-missing-text-color: var(--ink); /* Text color of the "No Plate" label inside the placeholder box */
    --lp-entry-poster-missing-shadow-color: rgba(0,0,0,0.14); /* Drop-shadow color beneath the "No Plate" placeholder box */

    /* ── Colors — Info column ────────────────────────────────── */

    --lp-entry-title-color:               var(--ink); /* Text color of the film title in each entry row */
    --lp-entry-year-color:                var(--ink); /* Text color of the film's release year, shown in parentheses next to the title */
    --lp-entry-toggle-color:               var(--ink); /* Color of the ❧ toggle glyph that rotates to indicate the detail panel is open */
    --lp-entry-director-color:            var(--ink); /* Text color of the "Dir. [Name]" credit line beneath the title */
    --lp-entry-chips-color:                var(--ink); /* Text color of the runtime / country / genre / MPAA chip row beneath the director credit (also governs the "·" chip separators, which have no color rule of their own) */

    /* ── Colors — Score measure ──────────────────────────────── */

    --lp-entry-score-measure-bg-color:     rgba(0,0,0,0.1); /* Background (track) color of the horizontal score measure bar */
    --lp-entry-score-measure-border-color: rgba(0,0,0,0.2); /* Border color of the score measure bar track */
    --lp-entry-score-fill-color:          var(--ink); /* Fill color of the score measure bar, representing the film's rating */
    --lp-entry-score-fill-hatch-color:    rgba(255,255,255,0.15); /* Color of the diagonal engraved-hatching stripes overlaid on the score fill */
    --lp-entry-grade-color:               var(--ink); /* Text color of the letter grade (e.g. A+, B-) shown next to the score bar */
    --lp-entry-rating-color:              var(--ink); /* Text color of the numeric "XX/100" rating label next to the score bar */

    /* ── Colors — Detail panel ───────────────────────────────── */

    --lp-entry-detail-inner-border-color:  rgba(0,0,0,0.15); /* Top border color separating the expandable detail panel from the entry row above it */
    --lp-entry-detail-row-border-color:    rgba(0,0,0,0.07); /* Bottom border color under each label/value row inside the detail panel */
    --lp-entry-detail-label-color:        var(--ink); /* Text color of field labels (Director, Writer, Country, etc.) in the detail panel */
    --lp-entry-detail-val-color:          var(--ink); /* Text color of field values in the detail panel */
    --lp-entry-detail-link-border-color:   rgba(0,0,0,0.12); /* Top border color above the "Read full review" link row in the detail panel */
    --lp-entry-detail-link-color:         #7a1515; /* Text color of the "☞ Read full review" link in the detail panel */
    --lp-entry-detail-val-link-color:     var(--ink); /* Text color of linked credit names (director/writer/DOP/etc.) inside detail field values */

    /* ── Colors — Closing rules ──────────────────────────────── */

    --lp-list-closing-color:              var(--ink); /* Color of the heavy closing rule beneath the final entry in the list */
    --lp-list-closing-thin-color:         var(--ink); /* Color of the thin rule beneath the heavy closing rule at the end of the list */

    /* ── Colors — View toggle ────────────────────────────────── */

    --lp-view-toggle-color:               var(--ink); /* Text color of the "VIEW AS POSTERS" link in the masthead stats row */
    --lp-view-toggle-border-color:        rgba(26, 18, 8, 0.2); /* Underline border color of the "VIEW AS POSTERS" link in its default state (hardcoded, does not currently reference --ink) */
    --lp-view-toggle-border-hover-color:  var(--ink); /* Underline border color of the "VIEW AS POSTERS" link on hover */


    /* ── Fonts — Masthead ─────────────────────────────────────── */

    --lp-masthead-eyebrow-font:  'goldentype-sc-original', serif; /* Font of the small eyebrow label above the masthead title */
    --lp-masthead-title-font:    'globe', serif; /* Font of the large uppercase list title in the masthead */
    --lp-masthead-subtitle-font: 'century731', Georgia, serif; /* Font of the italic subtitle/description line in the masthead */
    --lp-masthead-stats-font:    'block', serif; /* Font of the stats row (entry count, mean score, ranked-by) in the masthead */

    /* ── Fonts — Sort bar ─────────────────────────────────────── */

    --lp-sort-font:              'block', serif; /* Font of the sort bar container (label and separators) */
    --lp-sort-btn-font:          'block', serif; /* Font of each individual sort button (Rank / Title / Year) */

    /* ── Fonts — Plate number & poster ───────────────────────── */

    --lp-entry-number-font:      'saturday', Georgia, serif; /* Font of the large italic plate/rank number beside each entry */
    --lp-entry-poster-missing-font: 'goldentype-sc-original', serif; /* Font of the "No Plate" label in the missing-poster placeholder */

    /* ── Fonts — Info column ──────────────────────────────────── */

    --lp-entry-title-font:       'silentina-film', serif; /* Font of the film title in each entry row */
    --lp-entry-year-font:        'century731', Georgia, serif; /* Font of the release year next to the title */
    --lp-entry-director-font:    'centurysc', serif; /* Font of the "Dir. [Name]" credit line */
    --lp-entry-chips-font:       'centurysc', serif; /* Font of the runtime / country / genre / MPAA chip row */

    /* ── Fonts — Score measure ────────────────────────────────── */

    --lp-entry-grade-font:       'block', Georgia, serif; /* Font of the letter grade shown next to the score bar */
    --lp-entry-rating-font:      'silentina-film', serif; /* Font of the numeric "XX/100" rating label next to the score bar */

    /* ── Fonts — Detail panel ─────────────────────────────────── */

    --lp-entry-detail-label-font: 'centurysc', serif; /* Font of field labels (Director, Writer, Country, etc.) in the detail panel */
    --lp-entry-detail-val-font:   'century731', Georgia, serif; /* Font of field values in the detail panel */
    --lp-entry-detail-link-font:  'goldentype-sc', serif; /* Font of the "Read full review" link in the detail panel */

    /* ── Fonts — Empty state ──────────────────────────────────── */

    --lp-empty-font:              'playfair-display', Georgia, serif; /* Font of the "No entries found for this list" empty-state message */

    /* ── Fonts — View toggle ──────────────────────────────────── */

    --lp-view-toggle-font:        'saturday', serif; /* Font of the "VIEW AS POSTERS" link in the masthead stats row */

}


/* Widen main slightly for the list layout */
main {
    max-width: 860px;
}

/* ── Page masthead ──────────────────────────────────────── */

.lp-masthead {
    width: 100%;
    text-align: center;
    margin-bottom: 2.5rem;
}

.lp-masthead__rule-heavy {
    height: 4px;
    background: var(--lp-masthead-rule-heavy-color);
    margin: 0;
}
.lp-masthead__rule-thin {
    height: 1px;
    background: var(--lp-masthead-rule-thin-color);
    margin: 3px 0;
}
.lp-masthead__rule-gap {
    height: 5px;
}

.lp-masthead__eyebrow {
    font-family: var(--lp-masthead-eyebrow-font);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.55em;
    text-transform: lowercase;
    color: var(--lp-masthead-eyebrow-color);
    margin: 0.6rem 0 0.3rem;
    opacity: 0.7;
}

.lp-masthead__title {
    font-family: var(--lp-masthead-title-font);
    font-size: 2.9rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.1rem 0 0.2rem;
    line-height: 1;
    color: var(--lp-masthead-title-color);
}

.lp-masthead__description-container {
    position: relative;
    max-width: 580px;
    margin: 0 auto 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.lp-masthead__subtitle {
    font-family: var(--lp-masthead-subtitle-font);
    font-size: 0.95rem;
    color: var(--lp-masthead-subtitle-color);
    opacity: 0.75;
    margin: 0 0 0.4rem;
    width: 100%;
    text-align: justify;
    line-height: 1.4;
    transition: max-height 0.4s ease-in-out;
}

.lp-masthead__subtitle.is-truncated {
    position: relative;
    max-height: 5.2em; /* 5 lines at 1.4 line-height */
    overflow: hidden;
}

.lp-masthead__subtitle.is-truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.8em;
    background: linear-gradient(to bottom, transparent, var(--paper));
    pointer-events: none;
}

.lp-masthead__subtitle.is-expanded {
    max-height: 40em; /* plenty of space for long descriptions */
}

.lp-masthead__description-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--ink);
    opacity: 0.35;
    padding: 0.3rem;
    line-height: 1;
    transition: opacity 0.15s ease, transform 0.3s ease;
    display: none; /* Shown dynamically by JS */
    margin-top: -0.2rem;
}

.lp-masthead__description-toggle:hover {
    opacity: 0.8;
}

.lp-masthead__description-toggle.is-active {
    transform: rotate(90deg);
    opacity: 0.8;
}



.lp-masthead__stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    font-family: var(--lp-masthead-stats-font);
    font-size: 0.5rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--lp-masthead-stats-color);
    opacity: 0.65;
    margin-bottom: 0.6rem;
}
.lp-masthead__stats-sep {
    margin: 0 0.8rem;
    opacity: 0.5;
}

/* ── Sort bar ───────────────────────────────────────────── */

.lp-sort {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
    font-family: var(--lp-sort-font);
    font-size: 0.5rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}
.lp-sort__label {
    color: var(--lp-sort-label-color);
    opacity: 0.5;
    margin-right: 0.7rem;
}
.lp-sort__btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--lp-sort-btn-font);
    font-size: 0.5rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--lp-sort-btn-color);
    opacity: 0.55;
    padding: 0.2rem 0.5rem;
    transition: opacity 0.15s ease;
    position: relative;
}
.lp-sort__btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0.5rem;
    right: 0.5rem;
    height: 1px;
    background: var(--lp-sort-btn-underline-color);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.lp-sort__btn:hover { opacity: 0.85; }
.lp-sort__btn.is-active {
    opacity: 1;
    font-weight: 800;
}
.lp-sort__btn.is-active::after { opacity: 1; }
.lp-sort__sep {
    color: var(--lp-sort-sep-color);
    opacity: 0.3;
    font-size: 0.55rem;
}

/* ── Entry list container ───────────────────────────────── */

.lp-list {
    width: 100%;
    --lp-number-width: 78px;
    --lp-number-padding-right: 12px;
    --lp-number-font-size: 3.8rem;
    --lp-number-letter-spacing: -0.04em;
}

.lp-list--3digit {
    --lp-number-width: 104px;
    --lp-number-padding-right: 10px;
    --lp-number-font-size: 3.8rem;
    --lp-number-letter-spacing: -0.04em;
}

/* ── Entry separator ────────────────────────────────────── */

.lp-entry__sep {
    display: flex;
    align-items: center;
    margin: 0 0 0;
    gap: 0;
}
.lp-entry__sep-line {
    flex: 1;
    height: 1px;
    background: var(--lp-entry-sep-line-color);
    opacity: 0.25;
}
.lp-entry__sep-heavy {
    height: 3px;
    background: var(--lp-entry-sep-heavy-color);
    margin-bottom: 1px;
}
.lp-entry__sep-orn {
    font-size: 0.6rem;
    color: var(--lp-entry-sep-orn-color);
    opacity: 0.4;
    padding: 0 0.6rem;
    flex-shrink: 0;
}

/* ── Entry article ──────────────────────────────────────── */

.lp-entry {
    opacity: 0;
    transform: translateY(8px);
    /* JS adds .is-visible */
}

.lp-entry.is-visible {
    animation: lp-entry-appear 0.5s ease forwards;
}

@keyframes lp-entry-appear {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Entry main row ─────────────────────────────────────── */

.lp-entry__row {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 1.1rem 0 0.8rem;
    cursor: pointer;
}

.lp-entry__row:hover .lp-entry__poster img {
    filter: sepia(0.1) contrast(1.06);
}

/* ── Plate number ───────────────────────────────────────── */

.lp-entry__number {
    flex-shrink: 0;
    width: var(--lp-number-width);
    text-align: right;
    padding-right: var(--lp-number-padding-right);
    padding-top: 4px;
    font-family: var(--lp-entry-number-font);
    font-weight: 400;

    font-size: var(--lp-number-font-size);
    line-height: 1;
    color: var(--lp-entry-number-color);
    opacity: 0.18;
    letter-spacing: var(--lp-number-letter-spacing);
    transition: opacity 0.2s ease;
    user-select: none;
}
.lp-entry__row:hover .lp-entry__number {
    opacity: 0.38;
}

/* ── Poster ─────────────────────────────────────────────── */

.lp-entry__poster {
    flex-shrink: 0;
    width: 88px;
    margin-right: 18px;
}

.lp-entry__poster img {
    display: block;
    width: 88px;
    height: 130px;
    object-fit: cover;
    object-position: center top;
    /* Plate / engraving treatment */
    filter: sepia(0.28) contrast(1.08) brightness(0.97);
    border: 1px solid var(--lp-entry-poster-border-color);
    box-shadow: 2px 3px 0 var(--lp-entry-poster-shadow-color);
    transition: filter 0.25s ease, box-shadow 0.2s ease;
}
.lp-entry__poster-missing {
    width: 88px;
    height: 130px;
    border: 1px solid var(--lp-entry-poster-missing-border-color);
    background: var(--lp-entry-poster-missing-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lp-entry-poster-missing-font);
    font-size: 0.38rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--lp-entry-poster-missing-text-color);
    opacity: 0.4;
    box-shadow: 2px 3px 0 var(--lp-entry-poster-missing-shadow-color);
}

/* ── Info column ────────────────────────────────────────── */

.lp-entry__info {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.lp-entry__title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
    line-height: 1.1;
}

.lp-entry__title {
    font-family: var(--lp-entry-title-font);
    font-size: 1.25rem;
    font-weight: normal;
    letter-spacing: 0.03em;
    color: var(--lp-entry-title-color);
}

.lp-entry__year {
    font-family: var(--lp-entry-year-font);
    font-size: 0.9rem;
    color: var(--lp-entry-year-color);
    opacity: 0.6;
    flex-shrink: 0;
}

.lp-entry__toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--lp-entry-toggle-color);
    opacity: 0.35;
    padding: 0 0 0 0.3rem;
    line-height: 1;
    transition: opacity 0.15s ease, transform 0.3s ease;
    flex-shrink: 0;
    /* Don't inherit the pointer from the parent row */
    pointer-events: none;
}
.lp-entry.is-open .lp-entry__toggle {
    opacity: 0.7;
    transform: rotate(90deg);
}

.lp-entry__director {
    font-family: var(--lp-entry-director-font);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: lowercase;
    color: var(--lp-entry-director-color);
    opacity: 0.7;
    margin-bottom: 0.3rem;
}

.lp-entry__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0;
    font-family: var(--lp-entry-chips-font);
    font-size: 0.52rem;
    letter-spacing: 0.25em;
    text-transform: lowercase;
    color: var(--lp-entry-chips-color);
    opacity: 0.55;
    margin-bottom: 0.55rem;
}
.lp-entry__chip-sep {
    margin: 0 0.3rem;
    opacity: 0.5;
}

/* ── Score measure ──────────────────────────────────────── */

.lp-entry__score-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.1rem;
}

.lp-entry__score-measure {
    flex: 1;
    max-width: 160px;
    height: 5px;
    background: var(--lp-entry-score-measure-bg-color);
    border: 1px solid var(--lp-entry-score-measure-border-color);
    position: relative;
    overflow: hidden;
}
.lp-entry__score-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--lp-entry-score-fill-color);
    /* JS sets the width after animation trigger */
    width: 0;
    transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Engraved hatching overlay on the fill */
.lp-entry__score-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 2px,
        var(--lp-entry-score-fill-hatch-color) 2px,
                                                var(--lp-entry-score-fill-hatch-color) 4px
    );
}

.lp-entry__grade {
    font-family: var(--lp-entry-grade-font);
    font-weight: normal;
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--lp-entry-grade-color);
    letter-spacing: -0.02em;
}

.lp-entry__rating {
    font-family: var(--lp-entry-rating-font);
    font-size: 0.48rem;
    letter-spacing: 0.2em;
    color: var(--lp-entry-rating-color);
    opacity: 0.55;
}

/* ── Detail panel ───────────────────────────────────────── */

.lp-entry__detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lp-entry.is-open .lp-entry__detail {
    max-height: 400px;
}

.lp-entry__detail-inner {
    /* Indent to align with info column */
    padding: 0 0 1.2rem calc(var(--lp-number-width) + 88px + 18px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    border-top: 1px solid var(--lp-entry-detail-inner-border-color);
    margin-top: 0;
    padding-top: 0.8rem;
}

.lp-entry__detail-col {}

.lp-entry__detail-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--lp-entry-detail-row-border-color);
    padding-bottom: 0.3rem;
}

.lp-entry__detail-label {
    font-family: var(--lp-entry-detail-label-font);
    font-size: 0.52rem;
    font-weight: 400;
    letter-spacing: 0.33em;
    text-transform: lowercase;
    color: var(--lp-entry-detail-label-color);
    opacity: 0.5;
    flex-shrink: 0;
    min-width: 58px;
}

.lp-entry__detail-val {
    font-family: var(--lp-entry-detail-val-font);
    font-size: 0.7rem;
    color: var(--lp-entry-detail-val-color);
    line-height: 1.3;
    font-weight: 400;
    font-style: italic;
    opacity: 0.77;
}

.lp-entry__detail-link {
    grid-column: 1 / -1;
    text-align: left;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--lp-entry-detail-link-border-color);
}

.lp-entry__detail-link a {
    font-family: var(--lp-entry-detail-link-font);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lp-entry-detail-link-color);
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.lp-entry__detail-link a:hover { opacity: 1; color: var(--ink);}

.lp-entry__detail-val a {
    color: var(--lp-entry-detail-val-link-color);
    text-decoration: none;
    background: none;
    transition: opacity 0.15s ease;
}
.lp-entry__detail-val a:hover {
    opacity: 0.55;
    background: none;
}

/* ── Last entry: closing heavy rule ────────────────────── */
.lp-list__closing {
    height: 3px;
    background: var(--lp-list-closing-color);
    margin-top: 0;
    margin-bottom: 1px;
}
.lp-list__closing-thin {
    height: 1px;
    background: var(--lp-list-closing-thin-color);
    opacity: 0.3;
}

/* ── No-results state ───────────────────────────────────── */
.lp-empty {
    text-align: center;
    padding: 3rem 0;
    font-family: var(--lp-empty-font);
    font-style: italic;
    font-size: 1rem;
    opacity: 0.5;
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lp-entry { animation: none !important; opacity: 1 !important; transform: none !important; }
    .lp-entry__score-fill { transition: none; }
    .lp-entry__detail { transition: none; }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .lp-masthead {
        padding: 0 10px;
    }
    .lp-masthead__title {
        font-size: 2rem;
        line-height: 1.1;
    }
    .lp-masthead__subtitle {
        text-align: center;
    }
    .lp-masthead__stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 0.6rem;
    }
    .lp-masthead__stats-sep {
        display: none;
    }
    .lp-sort {
        flex-wrap: wrap;
        gap: 0.3rem 0.5rem;
    }
    .lp-list {
        --lp-number-width: 48px;
        --lp-number-padding-right: 8px;
        --lp-number-font-size: 2.4rem;
        --lp-number-letter-spacing: -0.04em;
    }
    .lp-list--3digit {
        --lp-number-width: 68px;
        --lp-number-padding-right: 6px;
        --lp-number-font-size: 2.4rem;
        --lp-number-letter-spacing: -0.04em;
    }
    .lp-entry__poster { width: 70px; margin-right: 12px; }
    .lp-entry__poster img,
    .lp-entry__poster-missing { width: 70px; height: 104px; }
    .lp-entry__title { font-size: 1rem; }
    .lp-entry__detail-inner {
        grid-template-columns: 1fr;
        padding-left: calc(var(--lp-number-width) + 70px + 12px);
    }
}


.lp-view-toggle {
    font-family: var(--lp-view-toggle-font); /* Matching your existing header font */
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--lp-view-toggle-color);
    text-decoration: none;
    border-bottom: 1px solid var(--lp-view-toggle-border-color);
    transition: border-bottom-color 0.2s;
    margin-left: 2px;
}
.lp-view-toggle:hover {
    border-bottom-color: var(--lp-view-toggle-border-hover-color);
}