/* Full-bleed overrides — base.njk centres and caps all pages at 800px.
 T he*se 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 divider (the two decorative strips above/below the grid) ── */
    --color-filmstrip-stripe:        #0C0A08;      /* the repeating black bars in the filmstrip pattern */
    --color-filmstrip-gap:           #D4A040;  /* the amber gap visible between the black bars */
    --color-filmstrip-perforation:   #0C0A08;       /* the "sprocket hole" bars drawn by ::before, punched over the gap */

    /* ── Page title band ("The Poster Archive" header strip) ── */
    --color-page-band-bg:            #F2CA8C;   /* background fill of the whole title band */
    --color-page-band-border:        #0C0A08;      /* 3px bottom border separating band from controls */
    --color-page-eyebrow-text:       #7A5218; /* "Cinemaths · A Complete Survey" small label text */
    --color-page-title-text:         #1A1208;        /* "The Poster Archive" big title text */
    --color-page-subtitle-text:      #7A5218; /* "All Rated Films — Arranged by Score" italic subtitle */
    --color-page-count-text:         #7A5218; /* film-count readout on the right side of the band (#pb-count) */

    /* ── Controls bar (score filter pills + sort dropdown) ── */
    --color-controls-bg:             #131009;       /* background fill of the whole controls bar */
    --color-controls-border:         #131009;
    --color-controls-label-text:     #A87828;   /* "Score:" / "Sort:" field labels */

    --color-pill-border-idle:        rgba(168,120,40,0.28); /* pill outline, default state — numerically = --amber-dk @ 28% opacity */
    --color-pill-text-idle:          rgba(168,120,40,0.6);  /* pill label text, default state — = --amber-dk @ 60% opacity */
    --color-pill-bg-hover:           rgba(168,120,40,0.15); /* pill fill on :hover — = --amber-dk @ 15% opacity */
    --color-pill-border-hover:       #A87828;       /* pill outline on :hover */
    --color-pill-text-hover:         #E9B96A;          /* pill label text on :hover */
    --color-pill-bg-active:          #A87828;       /* pill fill when selected (.pill.on) */
    --color-pill-border-active:      #A87828;       /* pill outline when selected (.pill.on) */
    --color-pill-text-active:        #0C0A08;          /* pill label text when selected (.pill.on) */

    --color-sort-select-bg:          #1D1810;       /* <select> dropdown background */
    --color-sort-select-border:      rgba(168,120,40,0.28); /* <select> dropdown outline — = --amber-dk @ 28% opacity */
    --color-sort-select-text:        rgba(168,120,40,0.7);  /* <select> dropdown text — = --amber-dk @ 70% opacity */

    --color-controls-count-text:     #A87828;       /* "N films" readout inside the controls bar (#ctrl-count) */

    /* ── Poster grid / card shell ── */
    --color-grid-bg:                 #0C0A08;      /* background of the .poster-wall behind the grid gaps */
    --color-card-placeholder-bg:     #1D1810;   /* fallback background shown behind a poster <img> before/if it loads */

    /* ── "Seen" dots (top-right viewing-count indicator on hover) ── */
    --color-view-dot-fill:           rgba(212,160,48,0.55); /* fill of each seen-dot — numerically identical to --g-ap, likely coincidental reuse */
    --color-view-dot-border:         #D4A040;      /* 1.5px ring around each seen-dot */
    --color-view-dot-overflow-text:  rgba(212,160,48,0.7);  /* "+N" text when seen-count exceeds 10 dots — same custom value as --color-view-dot-fill */

    /* ── Card overlay gradient (slide-up panel behind poster info on hover) ── */
    --color-overlay-gradient-solid:       rgba(4,3,1,1.0);  /* bottom-most, fully opaque stop of the overlay gradient — darker/more black than --black */
    --color-overlay-gradient-near-solid:  rgba(4,3,1,0.97); /* mid stop (55%) of the overlay gradient, still nearly opaque */
    --color-overlay-gradient-transparent: rgba(4,3,1,0.0);  /* top-most, fully transparent stop where the gradient fades out */

    /* ── Overlay content: score, meta, credits ── */
    --color-score-number-text:       #D4A030;            /* the big rating number (.ov-num) — deliberately fixed gold for every grade, per existing comment */
    --color-score-denom-text:        rgba(232,185,106,0.45); /* "/100" suffix next to the score — = --amber @ 45% opacity */
    --color-percentile-text:         rgba(232,185,106,0.6);  /* "Nth percentile" line — = --amber @ 60% opacity */
    --color-card-title-text:         #F4E9D2;           /* film title inside the overlay */
    --color-meta-text:               rgba(232,185,106,0.58); /* year / runtime / genre row — = --amber @ 58% opacity */
    --color-meta-separator-dot:      rgba(168,120,40,0.45);  /* small • separators between meta items — = --amber-dk @ 45% opacity */
    --color-cert-border:             rgba(168,120,40,0.38);  /* outline around the MPAA rating badge — = --amber-dk @ 38% opacity */
    --color-cert-text:               rgba(168,120,40,0.55);  /* text inside the MPAA rating badge — = --amber-dk @ 55% opacity */
    --color-director-label-text:     rgba(212,160,48,0.72);  /* "Directed by" label — same custom value as the seen-dots color, @ 72% opacity */
    --color-director-name-text:      rgba(244,233,210,0.82); /* director's name — = --cream @ 82% opacity */
    --color-footer-text:             rgba(232,185,106,0.75); /* country · language footer line — = --amber @ 75% opacity */
    --color-footer-border:           rgba(168,120,40,0.18);  /* top divider rule above the footer line — = --amber-dk @ 18% opacity */

    /* ── Grade badge / accent colors (driven by film grade, e.g. .g-ap on .overlay, .stamp) ── */
    --color-grade-a-plus:            #D4A030; /* A+ grade accent — colors .ov-num (fixed), .ov-rule (via currentColor), stamp badge, etc. */
    --color-grade-a:                 #C49020;  /* A grade accent */
    --color-grade-a-minus:           #A87C18; /* A- grade accent */
    --color-grade-b-plus:            #8A9070; /* B+ grade accent */
    --color-grade-b:                 #7A8060;  /* B grade accent */
    --color-grade-b-minus:           #6A7050; /* B- grade accent */
    --color-grade-c-plus:            #7A5C48; /* C+ grade accent */
    --color-grade-c:                 #6A4C38;  /* C grade accent */
    --color-grade-c-minus:           #5A3C2C; /* C- grade accent */
    --color-grade-d-plus:            #8C4848; /* D+ grade accent */
    --color-grade-d:                 #784040;  /* D grade accent */
    --color-grade-d-minus:           #643838; /* D- grade accent */
    --color-grade-f:                 #922020;  /* F grade accent */


    /* ════════════════════════════════════════════════════════════════
     *   FONTS
     *   ════════════════════════════════════════════════════════════════ */

    /* ── Page title band ── */
    --font-page-eyebrow:      'clarendon', 'Libre Baskerville', Georgia, serif;   /* "Cinemaths · A Complete Survey" small label */
    --font-page-title:        'block', 'playfair-display', Georgia, serif;  /* "The Poster Archive" big title */
    --font-page-subtitle:     'century731', 'im-fell-english', Georgia, serif;   /* "All Rated Films — Arranged by Score" italic subtitle */
    --font-page-count:        'clarendon', 'Libre Baskerville', Georgia, serif;   /* film-count readout on the right of the band (#pb-count) */

    /* ── Controls bar ── */
    --font-controls-label:    'clarendon', 'Libre Baskerville', Georgia, serif;   /* "Score:" / "Sort:" field labels */
    --font-controls-pill:     'clarendon', 'Libre Baskerville', Georgia, serif;   /* score-filter pill buttons (All / 90–100 / etc.) */
    --font-controls-sort:     'clarendon', 'Libre Baskerville', Georgia, serif;   /* sort <select> dropdown text */
    --font-controls-count:    'century731', 'im-fell-english', Georgia, serif;   /* "N films" readout inside the controls bar (#ctrl-count) */

    /* ── Card: seen dots ── */
    --font-card-seen-overflow: 'clarendon', 'Libre Baskerville', Georgia, serif;  /* "+N" overflow text when seen-count exceeds 10 dots */

    /* ── Card overlay: score, meta, credits ── */
    --font-card-score-number: 'globe', 'UnifrakturMaguntia', Georgia, serif; /* the big rating number (.ov-num) */
    --font-card-score-denom:  'clarendon', 'Libre Baskerville', Georgia, serif;    /* "/100" suffix next to the score */
    --font-card-percentile:   'clarendon', 'Libre Baskerville', Georgia, serif;    /* "Nth percentile" line */
    --font-card-title:        'block', 'playfair-display', Georgia, serif;   /* film title inside the overlay */
    --font-card-meta:         'clarendon', 'Libre Baskerville', Georgia, serif;    /* year / runtime / genre row */
    --font-card-cert-badge:   'clarendon', 'Libre Baskerville', Georgia, serif;    /* MPAA rating badge text */
    --font-card-director-label: 'century731', 'im-fell-english', Georgia, serif;  /* "Directed by" label */
    --font-card-director-name:  'century731', 'im-fell-english', Georgia, serif;  /* director's name (italic) */
    --font-card-footer:       'clarendon', 'Libre Baskerville', Georgia, serif;    /* country · language footer line */

}


/* ════════════════════════════════════════════════════════════════
 F IL*MSTRIP DIVIDER
 ════════════════════════════════════════════════════════════════ */
.filmstrip {
    height:20px; flex-shrink:0; position:relative;
    background:
    repeating-linear-gradient(90deg,
                              var(--color-filmstrip-stripe) 0px, var(--color-filmstrip-stripe) 5px,
                              var(--color-filmstrip-gap)    5px, var(--color-filmstrip-gap)    17px,
                              var(--color-filmstrip-stripe) 17px,var(--color-filmstrip-stripe) 23px);
}
.filmstrip::before {
    content:''; position:absolute; inset:4px 0;
    background:
    repeating-linear-gradient(90deg,
                              transparent 0, transparent 5px,
                              var(--color-filmstrip-perforation) 5px, var(--color-filmstrip-perforation) 17px,
                              transparent 17px, transparent 23px);
}

/* ════════════════════════════════════════════════════════════════
 P AG*E TITLE BAND
 ════════════════════════════════════════════════════════════════ */
.page-band {
    background:var(--color-page-band-bg); border-bottom:3px solid var(--color-page-band-border);
    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(--font-page-eyebrow); font-size:7.5px; letter-spacing:0.4em;
    text-transform:uppercase; color:var(--color-page-eyebrow-text); align-self:center;
}
.pb-title {
    font-family:var(--font-page-title); font-size:24px; font-weight:800;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--color-page-title-text); line-height:1;
}
.pb-sub {
    font-family:var(--font-page-subtitle); font-style:italic; font-size:10px;
    color:var(--color-page-subtitle-text); align-self:center;
}
.pb-right {
    font-family:var(--font-page-count); font-size:9px; letter-spacing:0.12em;
    color:var(--color-page-count-text); text-transform:uppercase; align-self:center;
}

/* ════════════════════════════════════════════════════════════════
 C ON*TROLS BAR
 ════════════════════════════════════════════════════════════════ */
.controls {
    background:var(--color-controls-bg); border-bottom:2px solid var(--color-controls-border);
    padding:7px 14px; display:flex; align-items:center;
    justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.ctrl-group { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.ctrl-lbl {
    font-family:var(--font-controls-label); font-size:7.5px; letter-spacing:0.28em;
    text-transform:uppercase; color:var(--color-controls-label-text); margin-right:2px;
}
.pill {
    font-family:var(--font-controls-pill); font-size:7.5px; letter-spacing:0.1em;
    text-transform:uppercase; background:transparent;
    border:1px solid var(--color-pill-border-idle); color:var(--color-pill-text-idle);
    padding:3px 9px 2px; cursor:pointer; line-height:1.5;
    transition:background .16s, color .16s, border-color .16s;
}
.pill:hover { background:var(--color-pill-bg-hover); border-color:var(--color-pill-border-hover); color:var(--color-pill-text-hover); }
.pill.on    { background:var(--color-pill-bg-active); border-color:var(--color-pill-border-active); color:var(--color-pill-text-active); }
.sort-sel {
    font-family:var(--font-controls-sort); font-size:7.5px; letter-spacing:0.08em;
    text-transform:uppercase; background:var(--color-sort-select-bg);
    border:1px solid var(--color-sort-select-border); color:var(--color-sort-select-text);
    padding:3px 9px 2px; cursor:pointer; appearance:none; -webkit-appearance:none;
}
.ctrl-count {
    font-family:var(--font-controls-count); font-size:9px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--color-controls-count-text);
}

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

/* ════════════════════════════════════════════════════════════════
 C AR*D
 ════════════════════════════════════════════════════════════════ */
.card {
    position:relative; aspect-ratio:2/3;
    overflow:hidden; background:var(--color-card-placeholder-bg);
}
.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); }


.card:hover .stamp { opacity:1; transform:scale(1); }

/* Seen dots — top-left, hidden until hover */
.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(--color-view-dot-fill);
    border:1.5px solid var(--color-view-dot-border);
    display:inline-block; flex-shrink:0;
}
.view-dot-overflow {
    font-family:var(--font-card-seen-overflow); font-size:8px; letter-spacing:.04em;
    color:var(--color-view-dot-overflow-text); margin-left:1px; align-self:center;
}

/* Slide-up overlay — fully hidden until hover */
.overlay {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(to top,
                               var(--color-overlay-gradient-solid)       0%,
                               var(--color-overlay-gradient-near-solid)  55%,
                               var(--color-overlay-gradient-transparent) 100%);
    padding:48px 10px 10px;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.25,.46,.45,.94);
}
.card:hover .overlay { transform:translateY(0); }

/* globe hero score — fixed gold for all ratings */
.ov-score { display:flex; align-items:baseline; line-height:1; margin-bottom:2px; }
.ov-num {
    font-family:var(--font-card-score-number);
    font-size:40px; line-height:.88; letter-spacing:-0.02em;
    color:var(--color-score-number-text);
}
.ov-denom {
    font-family:var(--font-card-score-denom); font-size:8px; letter-spacing:0.15em;
    color:var(--color-score-denom-text); text-transform:uppercase;
    margin-left:4px; margin-bottom:3px; align-self:flex-end;
}
.ov-pctile {
    font-family:var(--font-card-percentile); font-size:7px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--color-percentile-text); 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(--font-card-title); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.05em;
    color:var(--color-card-title-text); line-height:1.22; margin-bottom:4px;
}
.ov-meta {
    font-family:var(--font-card-meta); font-size:7px; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--color-meta-text);
    margin-bottom:7px;
    display:flex; align-items:center; flex-wrap:wrap; gap:4px;
}
.dot { width:2px; height:2px; border-radius:50%; background:var(--color-meta-separator-dot); display:inline-block; }
.cert {
    font-family:var(--font-card-cert-badge); font-size:6px;
    border:1px solid var(--color-cert-border); padding:0 3px;
    color:var(--color-cert-text); letter-spacing:0.04em;
}
.ov-lbl {
    font-family:var(--font-card-director-label); font-size:7px; letter-spacing:0.28em;
    text-transform:uppercase; color:var(--color-director-label-text); margin-bottom:1px;
}
.ov-director {
    font-family:var(--font-card-director-name); font-style:italic; font-size:9px;
    color:var(--color-director-name-text); margin-bottom:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ov-foot {
    font-family:var(--font-card-footer); font-size:6.5px; letter-spacing:0.15em;
    text-transform:uppercase; color:var(--color-footer-text);
    border-top:1px solid var(--color-footer-border);
    padding-top:5px; margin-top:2px;
}

/* Grade colour classes */
.g-ap{color:var(--color-grade-a-plus);} .g-a{color:var(--color-grade-a);}   .g-am{color:var(--color-grade-a-minus);}
.g-bp{color:var(--color-grade-b-plus);} .g-b{color:var(--color-grade-b);}   .g-bm{color:var(--color-grade-b-minus);}
.g-cp{color:var(--color-grade-c-plus);} .g-c{color:var(--color-grade-c);}   .g-cm{color:var(--color-grade-c-minus);}
.g-dp{color:var(--color-grade-d-plus);} .g-d {color:var(--color-grade-d);}  .g-dm{color:var(--color-grade-d-minus);} .g-f {color:var(--color-grade-f);}

/* ════════════════════════════════════════════════════════════════
 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; }

    /* ── Controls bar — stack into two rows ── */
    .controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 8px 10px;
    }
    .ctrl-group { gap: 4px; flex-wrap: wrap; }
    .ctrl-lbl   { font-size: 7px; }
    .pill       { font-size: 7px; padding: 3px 7px 2px; }
    .sort-sel   { font-size: 7px; padding: 3px 7px 2px; }
    .ctrl-count { display: none; } /* count shown in page-band already */

    /* ── 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;
    }
}