/* Full-bleed overrides — base.njk centres and caps all pages at 800px.
T hese rules undo that for the poster archive so the grid fills the   *
full viewport width and reflows columns freely on zoom. */
body { align-items: stretch; }
main { max-width: none; width: 100%; margin-top: 0; padding-bottom: 0; }






:root {

    /* ── Colors — Filmstrip ──────────────────────────────────── */

    --lp-filmstrip-band-color:         #0C0A08;     /* Color of the dark bands in the filmstrip sprocket pattern (top/bottom of the poster grid) */
    --lp-filmstrip-sprocket-color:     #D4A040; /* Color of the amber band between dark bands in the filmstrip pattern */
    --lp-filmstrip-hole-color:         #0C0A08;     /* Color of the punched sprocket-hole segments overlaid on the filmstrip pattern */

    /* ── Colors — Page-title band ────────────────────────────── */

    --lp-page-band-bg-color:           #F2CA8C;  /* Background color of the page-title band at the top of the poster archive */
    --lp-page-band-border-color:       #0C0A08;     /* Border color beneath the page-title band, separating it from the filmstrip */
    --lp-pb-eyebrow-color:             #7A5218; /* Text color of the "Cinemaths · List View" eyebrow label in the page-title band */
    --lp-pb-title-color:               #1A1208;       /* Text color of the list title in the page-title band */
    --lp-pb-sub-color:                 #7A5218; /* Text color of the italic "Ranked by Score" subtitle in the page-title band */
    --lp-pb-right-color:               #7A5218; /* Text color of the film-count line on the right of the page-title band */

    /* ── Colors — Poster wall & card ─────────────────────────── */

    --lp-poster-wall-bg-color:         #0C0A08;     /* Background color of the poster grid container, framing each poster card */
    --lp-card-bg-color:                #1D1810;  /* Placeholder background color of a poster card while its image loads */

    /* ── Colors — Rank stamp ──────────────────────────────────── */

    --lp-stamp-bg-color:               rgba(10,8,5,0.80); /* Background fill color of the circular rank-stamp badge on each poster (stamp's border/text color comes from currentColor via its .g-* grade class) */

    /* ── Colors — Seen-dot indicators ────────────────────────── */

    --lp-view-dot-bg-color:            rgba(212,160,48,0.55); /* Fill color of each "seen" dot shown on hover over a poster */
    --lp-view-dot-border-color:        #D4A040;      /* Border color of each "seen" dot */
    --lp-view-dot-overflow-color:      rgba(212,160,48,0.7);  /* Text color of the "+N" overflow count when a film has been seen more than 10 times */

    /* ── Colors — Overlay scrim ───────────────────────────────── */

    --lp-overlay-scrim-color:          rgba(4,3,1,1);    /* Base color of the dark gradient scrim behind the poster-card overlay text; used at full and reduced opacity across the gradient's stops, fading to transparent at the top */

    /* ── Colors — Overlay: score ──────────────────────────────── */

    --lp-ov-num-color:                 #D4A030;      /* Default text color of the large score number in the poster overlay (overridden per-card by the film's .g-* grade class) */
    --lp-ov-denom-color:               rgba(232,185,106,.45); /* Text color of the "/100" suffix beside the score number */
    --lp-ov-pctile-color:              rgba(232,185,106,.6);  /* Text color of the "Nth percentile" line in the poster overlay */

    /* ── Colors — Overlay: title & meta ──────────────────────── */

    --lp-ov-title-color:               #F4E9D2;     /* Text color of the film title in the poster overlay */
    --lp-ov-meta-color:                rgba(232,185,106,.58); /* Text color of the year / runtime / genre metadata row in the poster overlay */
    --lp-ov-meta-dot-color:            rgba(168,120,40,.45);  /* Fill color of the small separator dots between metadata items */
    --lp-cert-border-color:            rgba(168,120,40,.38);  /* Border color of the MPAA rating badge in the metadata row */
    --lp-cert-color:                   rgba(168,120,40,.55);  /* Text color of the MPAA rating badge in the metadata row */

    /* ── Colors — Overlay: director & footer ─────────────────── */

    --lp-ov-lbl-color:                 rgba(212,160,48,0.72); /* Text color of the "Directed by" label in the poster overlay */
    --lp-ov-director-color:            rgba(244,233,210,.82); /* Text color of the director's name in the poster overlay */
    --lp-ov-foot-color:                rgba(232,185,106,.75); /* Text color of the country / language footer line in the poster overlay */
    --lp-ov-foot-border-color:         rgba(168,120,40,.18);  /* Border color above the country / language footer line */

    /* ── Colors — Grade utility classes ──────────────────────── */
    /* .g-* classes are applied per-card (via gradeClass() in the   */
    /* njk) and drive currentColor for the stamp border/text and    */
    /* the ov-rule accent line, in addition to their own text color */

    --lp-grade-ap-color:               #D4A030; /* Grade color for "A+" films — stamp, score number, and rule accent */
    --lp-grade-a-color:                #C49020;  /* Grade color for "A" films */
    --lp-grade-am-color:               #A87C18; /* Grade color for "A-" films */
    --lp-grade-bp-color:               #8A9070; /* Grade color for "B+" films */
    --lp-grade-b-color:                #7A8060;  /* Grade color for "B" films */
    --lp-grade-bm-color:               #6A7050; /* Grade color for "B-" films */
    --lp-grade-cp-color:               #7A5C48; /* Grade color for "C+" films */
    --lp-grade-c-color:                #6A4C38;  /* Grade color for "C" films */
    --lp-grade-cm-color:               #5A3C2C; /* Grade color for "C-" films */
    --lp-grade-d-color:                #784040;  /* Grade color for "D" films */
    --lp-grade-f-color:                #922020;  /* Grade color for "F" films */


    /* ── Fonts — Page-title band ──────────────────────────────── */

    --lp-pb-eyebrow-font:  'clarendon', 'Libre Baskerville', Georgia, serif;    /* Font of the "Cinemaths · List View" eyebrow label */
    --lp-pb-title-font:    'block', 'playfair-display', Georgia, serif;   /* Font of the list title in the page-title band */
    --lp-pb-sub-font:      'century731', 'im-fell-english', Georgia, serif;    /* Font of the italic "Ranked by Score" subtitle */
    --lp-pb-right-font:    'clarendon', 'Libre Baskerville', Georgia, serif;    /* Font of the film-count line on the right of the page-title band */

    /* ── Fonts — Rank stamp & seen dots ───────────────────────── */

    --lp-stamp-font:              'clarendon', 'Libre Baskerville', Georgia, serif; /* Font of the rank number inside the circular stamp badge */
    --lp-view-dot-overflow-font:  'clarendon', 'Libre Baskerville', Georgia, serif; /* Font of the "+N" overflow count for films seen more than 10 times */

    /* ── Fonts — Overlay: score ────────────────────────────────── */

    --lp-ov-num-font:      'globe', 'UnifrakturMaguntia', Georgia, serif; /* Font of the large score number in the poster overlay */
    --lp-ov-denom-font:    'clarendon', 'Libre Baskerville', Georgia, serif;    /* Font of the "/100" suffix beside the score number */
    --lp-ov-pctile-font:   'clarendon', 'Libre Baskerville', Georgia, serif;    /* Font of the "Nth percentile" line in the poster overlay */

    /* ── Fonts — Overlay: title & meta ────────────────────────── */

    --lp-ov-title-font:    'block', 'playfair-display', Georgia, serif;   /* Font of the film title in the poster overlay */
    --lp-ov-meta-font:     'clarendon', 'Libre Baskerville', Georgia, serif;    /* Font of the year / runtime / genre metadata row */
    --lp-cert-font:        'clarendon', 'Libre Baskerville', Georgia, serif;    /* Font of the MPAA rating badge in the metadata row */

    /* ── Fonts — Overlay: director & footer ───────────────────── */

    --lp-ov-lbl-font:       'century731', 'im-fell-english', Georgia, serif;   /* Font of the "Directed by" label */
    --lp-ov-director-font:  'century731', 'im-fell-english', Georgia, serif;   /* Font of the director's name */
    --lp-ov-foot-font:      'clarendon', 'Libre Baskerville', Georgia, serif;   /* Font of the country / language footer line */


    /* ── Found in list-posters.njk (inline style, not yet in the CSS) ── */
    /* The "View as Text List" link in the page-title band is styled     */
    /* with an inline `style` attribute plus onmouseover/onmouseout JS   */
    /* rather than a class. Flagging here so it isn't lost — consider    */
    /* moving it to a real class (e.g. .pb-textlink) during consolidation. */

    --lp-view-as-text-link-color:         #D4A040;      /* Text color of the "View as Text List" link */
    --lp-view-as-text-link-border-color:  rgba(212, 160, 48, 0.4); /* Underline border color of the link in its default state */
    --lp-view-as-text-link-border-hover-color: #D4A040; /* Underline border color of the link on hover, toggled via inline onmouseover/onmouseout handlers */

}



.filmstrip {
    height:20px;
    flex-shrink:0; position:relative;
    background:
    repeating-linear-gradient(90deg,
                            var(--lp-filmstrip-band-color)     0px, var(--lp-filmstrip-band-color)     5px,
                            var(--lp-filmstrip-sprocket-color) 5px, var(--lp-filmstrip-sprocket-color) 17px,
                            var(--lp-filmstrip-band-color)     17px,var(--lp-filmstrip-band-color)     23px);
}
.filmstrip::before {
    content:''; position:absolute; inset:4px 0;
    background:
    repeating-linear-gradient(90deg,
                            transparent 0, transparent 5px,
                            var(--lp-filmstrip-hole-color) 5px, var(--lp-filmstrip-hole-color) 17px,
                            transparent 17px, transparent 23px);
}

.page-band {
    background:var(--lp-page-band-bg-color);
    border-bottom:3px solid var(--lp-page-band-border-color);
    padding:10px 20px 9px; display:flex; align-items:baseline;
    gap:14px; flex-wrap:wrap; justify-content:space-between;
}
.pb-left { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pb-eyebrow {
    font-family:var(--lp-pb-eyebrow-font); font-size:7.5px; letter-spacing:0.4em;
    text-transform:uppercase; color:var(--lp-pb-eyebrow-color); align-self:center;
}
.pb-title {
    font-family:var(--lp-pb-title-font); font-size:24px; font-weight:800;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--lp-pb-title-color); line-height:1;
}
.pb-sub {
    font-family:var(--lp-pb-sub-font); font-style:italic; font-size:10px;
    color:var(--lp-pb-sub-color); align-self:center;
}
.pb-right {
    font-family:var(--lp-pb-right-font);
    font-size:9px; letter-spacing:0.12em;
    color:var(--lp-pb-right-color); text-transform:uppercase; align-self:center;
}

.poster-wall { background:var(--lp-poster-wall-bg-color); padding:3px; }
#grid {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
gap:3px;
}
.card.hidden { display:none; }

.card {
    position:relative; aspect-ratio:2/3;
    overflow:hidden; background:var(--lp-card-bg-color);
}
.card img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .6s cubic-bezier(.25,.46,.45,.94), filter .6s ease;
    filter:saturate(.85) brightness(.92);
}
.card:hover img { transform:scale(1.07); filter:saturate(1) brightness(1); }

.stamp {
    position:absolute; top:8px; left:8px;
    z-index:20;
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--lp-stamp-font); font-weight:700; font-size:13px;
    border:1.5px solid currentColor;
    background:var(--lp-stamp-bg-color);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; transform:scale(0.7);
    transition:opacity .25s, transform .25s;
    user-select:none;
}
.card:hover .stamp { opacity:1; transform:scale(1); }

.views {
    position:absolute; top:9px; right:8px;
    z-index:20;
    display:flex; flex-wrap:wrap; gap:4px; max-width:72px;
    opacity:0; transform:scale(0.8); transform-origin:top left;
    transition:opacity .25s, transform .25s;
}
.card:hover .views { opacity:1; transform:scale(1); }
.view-dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--lp-view-dot-bg-color);
    border:1.5px solid var(--lp-view-dot-border-color);
    display:inline-block; flex-shrink:0;
}
.view-dot-overflow {
    font-family:var(--lp-view-dot-overflow-font); font-size:8px; letter-spacing:.04em;
    color:var(--lp-view-dot-overflow-color); margin-left:1px; align-self:center;
}

.overlay {
    position:absolute; bottom:0; left:0;
    right:0;
    background:linear-gradient(to top,
                                var(--lp-overlay-scrim-color)  0%,
                                rgba(4,3,1,0.97) 55%,
                                rgba(4,3,1,0.0)  100%);
    padding:48px 10px 10px;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.25,.46,.45,.94);
}
.card:hover .overlay { transform:translateY(0); }

.ov-score { display:flex; align-items:baseline; line-height:1; margin-bottom:2px; }
.ov-num {
    font-family:var(--lp-ov-num-font);
    font-size:40px; line-height:.88; letter-spacing:-0.02em;
    color:var(--lp-ov-num-color);
}
.ov-denom {
    font-family:var(--lp-ov-denom-font);
    font-size:8px; letter-spacing:0.15em;
    color:var(--lp-ov-denom-color); text-transform:uppercase;
    margin-left:4px; margin-bottom:3px; align-self:flex-end;
}
.ov-pctile {
    font-family:var(--lp-ov-pctile-font); font-size:7px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--lp-ov-pctile-color); margin-bottom:6px;
}
.ov-rule {
    height:1px; margin-bottom:6px;
    background:linear-gradient(90deg,transparent,currentColor 20%,currentColor 80%,transparent);
    opacity:.2;
}
.ov-title {
    font-family:var(--lp-ov-title-font); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.05em;
    color:var(--lp-ov-title-color); line-height:1.22; margin-bottom:4px;
}
.ov-meta {
    font-family:var(--lp-ov-meta-font); font-size:7px; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--lp-ov-meta-color);
    margin-bottom:7px;
    display:flex; align-items:center; flex-wrap:wrap; gap:4px;
}
.dot { width:2px; height:2px; border-radius:50%; background:var(--lp-ov-meta-dot-color); display:inline-block; }
.cert {
    font-family:var(--lp-cert-font); font-size:6px;
    border:1px solid var(--lp-cert-border-color); padding:0 3px;
    color:var(--lp-cert-color); letter-spacing:0.04em;
}
.ov-lbl {
    font-family:var(--lp-ov-lbl-font); font-size:7px; letter-spacing:0.28em;
    text-transform:uppercase; color:var(--lp-ov-lbl-color); margin-bottom:1px;
}
.ov-director {
    font-family:var(--lp-ov-director-font); font-style:italic; font-size:9px;
    color:var(--lp-ov-director-color); margin-bottom:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ov-foot {
    font-family:var(--lp-ov-foot-font); font-size:6.5px; letter-spacing:0.15em;
    text-transform:uppercase; color:var(--lp-ov-foot-color);
    border-top:1px solid var(--lp-ov-foot-border-color);
    padding-top:5px; margin-top:2px;
}

.g-ap{color:var(--lp-grade-ap-color);} .g-a{color:var(--lp-grade-a-color);}   .g-am{color:var(--lp-grade-am-color);}
.g-bp{color:var(--lp-grade-bp-color);} .g-b{color:var(--lp-grade-b-color);}   .g-bm{color:var(--lp-grade-bm-color);}
.g-cp{color:var(--lp-grade-cp-color);} .g-c{color:var(--lp-grade-c-color);}   .g-cm{color:var(--lp-grade-cm-color);}
.g-d {color:var(--lp-grade-d-color);}  .g-f {color:var(--lp-grade-f-color);}

/* ════════════════════════════════════════════════════════════════
M OB*ILE  ≤ 640 px
════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── Page-title band ── */
    .page-band {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 14px 7px;
    }
    .pb-left    { gap: 6px; flex-wrap: wrap; }
    .pb-eyebrow { font-size: 6.5px; letter-spacing: 0.28em; }
    .pb-title   { font-size: 18px; }
    .pb-sub     { font-size: 9px; }
    .pb-right   { font-size: 8px; align-self: flex-start; }

    /* ── Poster grid — four columns ── */
    #grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    }

    /* ── Neutralise CSS :hover effects on touch devices ── */
    @media (hover: none) {
        .card:hover img      { transform: none; filter: saturate(.85) brightness(.92); }
        .card:hover .overlay { transform: translateY(100%); }
        .card:hover .stamp   { opacity: 0; transform: scale(0.7); }
        .card:hover .views   { opacity: 0; transform: scale(0.8); }
    }

    /* ── Active card (tapped) — mirrors desktop :hover exactly ── */
    .card.active img       { transform: scale(1.07); filter: saturate(1) brightness(1); }
    .card.active .overlay  { transform: translateY(0); }
    .card.active .stamp    { opacity: 1; transform: scale(1); }
    .card.active .views    { opacity: 1; transform: scale(1); }

    /* ── Overlay internals — scaled down for ~95 px card width ── */
    .overlay {
        padding: 22px 5px 5px;  /* much less top feather, tighter sides */
    }
    .ov-num   { font-size: 18px; }
    .ov-denom { font-size: 5px; margin-left: 2px; margin-bottom: 1px; }
    .ov-score { margin-bottom: 1px; }
    .ov-pctile {
        font-size: 5px; letter-spacing: 0.1em;
        margin-bottom: 3px;
    }
    .ov-rule  { margin-bottom: 3px; }
    .ov-title {
        font-size: 6px; letter-spacing: 0.03em;
        line-height: 1.18; margin-bottom: 2px;
    }
    .ov-meta {
        font-size: 5px; letter-spacing: 0.08em;
        gap: 2px; margin-bottom: 3px;
    }
    .cert { font-size: 4.5px; padding: 0 2px; }
    .ov-lbl  { font-size: 5px; letter-spacing: 0.16em; margin-bottom: 0; }
    .ov-director {
        font-size: 6px; margin-bottom: 3px;
    }
    .ov-foot {
        font-size: 5px; letter-spacing: 0.08em;
        padding-top: 3px; margin-top: 1px;
    }
}