/* ════════════════════════════════════════════════════════
 R EVIE*W PAGE
 ════════════════════════════════════════════════════════ */

    /* — THERE WAS NO PRE-EXISTING VARIABLE BLOCK FOR THIS FILE — */

:root {

    /* ── Colors ─────────────────────────────────────────────────────── */

    /* — Review text — */
    --color-meta-row-border: rgba(0,0,0,0.1); /* Divider under the author/date row — NOTE: literal rgba value, not tied to --ink/--rule/etc. like everything else. Was this meant to reference a token? */
    --color-date-text: var(--ink); /* Publication date text */

    /* — Film data card: page — */
    --color-page-text: #1a1008; /* Base body text color for the entire .film-page wrapper */

    /* — Film data card: masthead —
     *       NOTE: unlike film.css, this file has no .film-year-tag, no
     *       .film-title, no .film-director-byline, and no ::before rule
     *       on .film-masthead — the title is instead the plain
     *       .film-header div (styled only inside the responsive block,
     *       with no color/font declared anywhere, base or mobile).
     *       The border-top below is present but set to 0px here, so the
     *       color is currently invisible — kept in case that's temporary. */
    --color-masthead-border-top: #1a1008; /* .film-masthead top border — currently 0px wide ("Kept 0px for review page layout" per the source comment), so not visibly rendered */
    --color-masthead-border-bottom: #6b3f0f; /* Thin bottom rule closing out the masthead */
    --color-masthead-divider-lower: #6b3f0f; /* ::after hairline (this file only has the lower ::after divider, not the upper ::before one from film.css) */

    /* — Rule dividers — */
    --color-double-rule: #6b3f0f; /* Double-line <hr> between review text and film body */
    --color-thin-rule: #6b3f0f; /* Single-line <hr> between body and lower sections */

    /* — Body layout — */
    --color-body-border-bottom: #6b3f0f; /* Bottom border closing the poster+vitals grid row */
    --color-poster-col-border: #6b3f0f; /* Right-hand divider between poster column and vitals column */

    /* — Poster — */
    --color-poster-border: #1a1008; /* Solid border framing the actual poster <img> */
    --color-poster-shadow: #6b3f0f; /* Offset drop-shadow behind the poster image */
    --color-poster-placeholder-bg: rgba(107,63,15,.18); /* Fill color of the "No Poster Available" box */
    --color-poster-placeholder-border: #6b3f0f; /* Border of the "No Poster Available" box */
    --color-poster-placeholder-shadow: #6b3f0f; /* Offset drop-shadow behind the placeholder box */
    --color-poster-placeholder-label: #6b3f0f; /* "NO POSTER / AVAILABLE" text inside the placeholder */
    --color-poster-ornament: #6b3f0f; /* Decorative ❧ glyph inside the placeholder */

    /* — Rating medallion — */
    --color-medallion-border: #1a1008; /* Outer border of the rating medallion box */
    --color-medallion-bg: #1a1008; /* Fill of the rating medallion box */
    --color-medallion-text: #f0c878; /* Grade letter, score, and percentile text (and the ✦ corner marks, inherited) */

    /* — Vitals table — */
    --color-vitals-section-head-text: #6b3f0f; /* "Particulars" / "Principal Cast" section labels */
    --color-vitals-section-head-border: rgba(107,63,15,.18); /* Hairline under each vitals section label */
    --color-vitals-row-border: rgba(107,63,15,.18); /* Divider line between each row of the vitals table */
    --color-vitals-label-text: #6b3f0f; /* Left-column labels in vitals table (Runtime, Certificate, etc.) */
    --color-vitals-value-text: var(--ink-warm); /* Right-column values in vitals table */

    /* — Seen counter — */
    --color-seen-counter-border: rgba(107,63,15,.18); /* Top divider separating the seen-counter row from the table above */
    --color-seen-dot-filled: #1a1008; /* Solid dot representing one viewing */
    --color-seen-dot-empty-border: #6b3f0f; /* Outline of an unfilled/empty seen dot */
    --color-seen-label-text: #6b3f0f; /* "Seen × N" label and the "Last: date" label */
    --color-seen-overflow-count-text: #6b3f0f; /* [inline style, film-review.njk L142] "+N" shown when times_seen exceeds 10 dots */

    /* — Credits — */
    --color-section-banner-bg: #1a1008; /* Fill behind "✦ Credits ✦" / "✦ Appears On ✦" banners */
    --color-section-banner-text: #f0c878; /* Text/glyph color inside the section banners */
    --color-credit-row-border: rgba(107,63,15,.18); /* Divider line between each credit row */
    --color-credit-label-text: #6b3f0f; /* Credit role labels (Direction, Screenplay, Music, etc.) */
    --color-credit-value-text: var(--ink-warm); /* Credit names (the people/values) */

    /* — Cast list (inline style in film-review.njk) — */
    --color-cast-list-text: var(--ink-warm); /* [inline style, film-review.njk L123] Principal cast names cell */

    /* — Lists / tags —
     *       NOTE: unlike film.css, .list-tag is declared ONLY ONCE here —
     *       there's no bordered/legacy version to reconcile. */
    --color-list-tag-text: var(--ink-warm); /* Borderless tag text color */
    --color-list-tag-hover-text: #6b3f0f; /* Tag text color on hover */
    --color-list-sep: #6b3f0f; /* ✦ separator glyph between list tags */

    /* — Footer —
     *       NOTE: unlike film.css, .back-link is declared ONLY ONCE here —
     *       there's no bordered/legacy version to reconcile. */
    --color-footer-border: #6b3f0f; /* Double-line top border of the page footer */
    --color-footer-ornament: #6b3f0f; /* "· ✦ · ✦ · ✦ ·" decorative line in the footer */
    --color-back-link-text: var(--ink-warm); /* "Return to Reviews" link text color */
    --color-back-link-hover-text: #6b3f0f; /* Hover color of the back link */
    --color-release-note-text: #6b3f0f; /* "N days after the dawn of cinema" footnote */

    /* — Ledger links —
     *       NOTE: this file still defines the .film-director-byline-scoped
     *       override rules for a.vitals-link, even though no element in
     *       film-review.njk actually has that class (no byline exists on
     *       this page). Included for completeness since the CSS exists,
     *       but it is currently dead/unreachable. */
    --color-vitals-link-text: var(--ink-warm); /* Default color of a.vitals-link (used in vitals table + credits) */
    --color-vitals-link-hover-text: #6b3f0f; /* Hover color of a.vitals-link */


    /* ── Fonts ───────────────────────────────────────────────────────
     *   None of these are currently tokenized — every value below is
     *   copied verbatim from its hardcoded font-family stack.
     *   ──────────────────────────────────────────────────────────────── */

    /* — Review text — */
    --font-review-body: 'century731', serif; /* Main review paragraph text — NOTE: shorter fallback stack than the card's --font-page-body; no 'century731'/Georgia step */
    --font-review-drop-cap: 'thalia', serif; /* ::first-letter drop cap — unique font, not used anywhere else on either page */
    --font-author: 'lamar-pen', serif; /* Byline author name ("Herman Yersin") — NOTE: missing the 'clarendon' fallback step that other Clarendon-BQ stacks in this project have */
    --font-date: 'silentina-film', serif; /* Publication date — same shorter stack as --font-review-body */

    /* — Film data card: page — */
    --font-page-body: 'century731', 'century731', Georgia, serif; /* Base body font for .film-page */

    /* — Film data card: masthead —
     *       NOTE: no --font-year-tag / --font-title / --font-byline here —
     *       those classes don't exist in this file. .film-header (the
     *       visible title-equivalent) has no font-family declared at all,
     *       even in its one @media rule, so it currently inherits
     *       --font-page-body by default. */

    /* — Poster — */
    --font-poster-placeholder-label: 'clarendon', 'clarendon', serif; /* "NO POSTER / AVAILABLE" text */

    /* — Rating medallion — */
    --font-rating-grade: 'block', 'globe', Impact, serif; /* Big letter grade (A, B+, etc.) */
    --font-rating-score: 'block', 'clarendon', serif; /* "NN / 100" score line */
    --font-rating-percentile: 'century731', 'century731', serif; /* "Nth percentile" line */

    /* — Vitals table — */
    --font-vitals-section-head: 'globe', 'globe', 'clarendon', 'clarendon', serif; /* "Particulars" / "Principal Cast" labels */
    --font-vitals-label: 'clarendon', 'clarendon', serif; /* Left-column row labels */
    --font-vitals-value: 'century731', 'century731', Georgia, serif; /* Right-column row values */

    /* — Seen counter — */
    --font-seen-label: 'clarendon', 'clarendon', serif; /* "Seen × N" / "Last:" labels */
    --font-seen-overflow-count: 'clarendon', serif; /* [inline style, film-review.njk L142] "+N" overflow count — shorter fallback stack than --font-seen-label */

    /* — Credits — */
    --font-section-banner: 'globe', 'globe', 'clarendon', serif; /* "✦ Credits ✦" / "✦ Appears On ✦" banners */
    --font-credit-label: 'clarendon', 'clarendon', serif; /* Credit role labels */
    --font-credit-value: 'century731', 'century731', Georgia, serif; /* Credit names */

    /* — Cast list (inline style in film-review.njk) — */
    --font-cast-list: 'century731', 'century731', Georgia, serif; /* [inline style, film-review.njk L123] Principal cast names cell */

    /* — Lists / tags — */
    --font-list-tag: 'clarendon', 'clarendon', serif; /* .list-tag (only one declaration in this file) */

    /* — Footer — */
    --font-back-link: 'clarendon', 'clarendon', serif; /* .back-link (only one declaration in this file) */
    --font-release-note: 'century731', 'century731', Georgia, serif; /* Italic footnote under the footer */

}


/* ── Weathered text effect ───────────────────────────── */
.review-text {
    line-height: 1.4em;
    font-size: 1.12rem;
    text-align: justify;
    font-family: var(--font-review-body);
}

/* ── Drop cap ────────────────────────────────────────── */
.review-text::first-letter {
    float: left;
    font-size: 4.2rem;
    line-height: 0.8;
    padding: 4px 8px 0 3px;
    font-family: var(--font-review-drop-cap);
}

.review-text p {
    margin-top: 0;
    margin-bottom: 1.55rem;
    text-indent: 1.5em;
}

.review-text p:first-of-type {
    text-indent: 0;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-meta-row-border);
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.author {
    flex: 1;
    text-align: left;
    font-family: var(--font-author);
    font-weight: 300;
    font-size: 1.25rem;
    padding-bottom: 2px;
}

.date {
    flex: 1;
    text-align: right;
    font-family: var(--font-date);
    font-size: 1.25rem;
    text-transform: normal;
    color: var(--color-date-text);
}


/* ════════════════════════════════════════════════════════
 F ILM *DATA CARD  (reused from film.njk, scoped to .film-page)
 ════════════════════════════════════════════════════════ */

.film-page {
    font-family: var(--font-page-body);
    color: var(--color-page-text);
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

/* ── Masthead / Title block ───────────────────────────── */
.film-masthead {
    text-align: center;
    padding: 28px 12px 20px;
    border-top: 0px solid var(--color-masthead-border-top); /* Kept 0px for review page layout */
    border-bottom: 1px solid var(--color-masthead-border-bottom);
    margin-bottom: 0;
    position: relative;
}

.film-masthead::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--color-masthead-divider-lower);
    margin: 5px auto 0;
    margin-top: 3px;
    width: 50%;
}

/* ── Double rule divider ──────────────────────────────── */
.double-rule {
    border: none;
    border-top: 3px double var(--color-double-rule);
    margin: 0;
}
.thin-rule {
    border: none;
    border-top: 1px solid var(--color-thin-rule);
    margin: 0;
}

/* ── Main body: poster + vitals ───────────────────────── */
.film-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    border-bottom: 1px solid var(--color-body-border-bottom);
    margin-top: 0;
}

/* ── Poster column ────────────────────────────────────── */
.film-poster-col {
    border-right: 1px solid var(--color-poster-col-border);
    padding: 18px 18px 18px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.film-poster-wrap {
    position: relative;
    width: 100%;
}
.film-poster-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border: 2px solid var(--color-poster-border);
    box-shadow: 4px 4px 0 var(--color-poster-shadow);
}
.film-poster-placeholder {
    width: 100%;
    aspect-ratio: 2/3;
    background: var(--color-poster-placeholder-bg);
    border: 2px solid var(--color-poster-placeholder-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    box-shadow: 4px 4px 0 var(--color-poster-placeholder-shadow);
}
.film-poster-placeholder span {
    font-family: var(--font-poster-placeholder-label);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-poster-placeholder-label);
    opacity: .7;
}
.poster-ornament {
    font-size: 28px;
    color: var(--color-poster-ornament);
    opacity: .5;
    line-height: 1;
}

/* ── Rating medallion ─────────────────────────────────── */
.rating-medallion {
    width: 100%;
    border: 2px solid var(--color-medallion-border);
    padding: 10px 8px;
    text-align: center;
    background: var(--color-medallion-bg);
    color: var(--color-medallion-text);
    position: relative;
}
.rating-medallion::before,
.rating-medallion::after {
    content: '✦';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: .6;
}
.rating-medallion::before { left: 8px; }
.rating-medallion::after  { right: 8px; }

.rating-grade {
    font-family: var(--font-rating-grade);
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    display: block;
    letter-spacing: -.02em;
}
.rating-score {
    font-family: var(--font-rating-score);
    font-size: 11px;
    letter-spacing: .18em;
    display: block;
    margin-top: 2px;
    opacity: .85;
}
.rating-percentile {
    font-family: var(--font-rating-percentile);
    font-size: 9px;
    letter-spacing: .12em;
    display: block;
    opacity: .65;
    margin-top: 1px;
    font-style: italic;
}

/* ── Vitals column ────────────────────────────────────── */
.film-vitals-col {
    padding: 18px 0 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vitals-section-head {
    font-family: var(--font-vitals-section-head);
    font-size: 8px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--color-vitals-section-head-text);
    border-bottom: 1px solid var(--color-vitals-section-head-border);
    padding-bottom: 3px;
    margin: 16px 0 8px;
}
.vitals-section-head:first-child { margin-top: 0; }

.vitals-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.vitals-table tr {
    border-bottom: 1px solid var(--color-vitals-row-border);
}
.vitals-table tr:last-child {
    border-bottom: none;
}
.vitals-table td {
    padding: 5px 0;
    vertical-align: top;
    line-height: 1.45;
}
.vitals-table td:first-child {
    font-family: var(--font-vitals-label);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-vitals-label-text);
    width: 110px;
    padding-right: 10px;
    padding-top: 7px;
}
.vitals-table td:last-child {
    font-family: var(--font-vitals-value);
    color: var(--color-vitals-value-text);
}

.vitals-table tr td.cast-list-cell {
    padding-top: 3px;
    padding-bottom: 3px;
    font-family: var(--font-cast-list);
    color: var(--color-cast-list-text);
    font-size: 12.5px;
    line-height: 1.55;
    text-transform: none;
}

/* ── Seen counter ─────────────────────────────────────── */
.seen-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-seen-counter-border);
}
.seen-overflow-count {
    font-size: 9px;
    letter-spacing: .05em;
    font-family: var(--font-seen-overflow-count);
    color: var(--color-seen-overflow-count-text);
    margin-left: 2px;
}
.seen-dots {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.seen-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-seen-dot-filled);
    display: inline-block;
}
.seen-dot.empty {
    background: transparent;
    border: 1.5px solid var(--color-seen-dot-empty-border);
    opacity: .4;
}
.seen-label {
    font-family: var(--font-seen-label);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-seen-label-text);
}

/* ── Full-width sections below the fold ───────────────── */
.film-lower {
    padding: 22px 0 0;
}

/* ── Credits block ────────────────────────────────────── */
.credits-block {
    margin-bottom: 24px;
}

.section-banner {
    background: var(--color-section-banner-bg);
    color: var(--color-section-banner-text);
    text-align: center;
    padding: 5px 12px;
    font-family: var(--font-section-banner);
    font-size: 9px;
    letter-spacing: .38em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.credits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    font-size: 12.5px;
}
.credit-row {
    display: flex;
    flex-direction: column;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-credit-row-border);
    gap: 1px;
}
.credit-row:last-child { border-bottom: none; }
.credit-label {
    font-family: var(--font-credit-label);
    font-size: 8.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-credit-label-text);
}
.credit-value {
    font-family: var(--font-credit-value);
    color: var(--color-credit-value-text);
    line-height: 1.4;
}

/* ── Lists section ────────────────────────────────────── */
.lists-block {
    margin-bottom: 24px;
}

.lists-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 4px 0 8px;
}

/* ── Ornamental footer ────────────────────────────────── */
.film-footer {
    text-align: center;
    padding: 24px 0 0;
    margin-top: 8px;
    border-top: 3px double var(--color-footer-border);
}
.film-footer-ornament {
    font-size: 20px;
    color: var(--color-footer-ornament);
    display: block;
    margin: 0 0 14px;
    letter-spacing: .35em;
}

/* ── Release date footnote ────────────────────────────── */
.release-note {
    font-family: var(--font-release-note);
    font-style: italic;
    font-size: 11px;
    color: var(--color-release-note-text);
    text-align: center;
    margin: 10px 0 0;
    opacity: .8;
}

/* ── Ledger links ───────────────────────────────── */
a.vitals-link {
    color: var(--color-vitals-link-text);
    text-decoration: none;
    border-bottom: none;
    background: none;
    padding: 0;
    margin: 0;
    transition: color .14s;
}

a.vitals-link:hover {
    color: var(--color-vitals-link-hover-text);
    background: none;
}

/* Inside the director byline */
.film-director-byline a.vitals-link {
    text-decoration: none;
}

.film-director-byline a.vitals-link:hover {
    background: none;
}

/* ── Lists section ──────────────────────────────── */
.list-sep {
    font-size: 8px;
    color: var(--color-list-sep);
    opacity: .6;
    margin: 0 6px;
    vertical-align: middle;
}

.list-tag {
    font-family: var(--font-list-tag);
    font-size: 10px;
    letter-spacing: .1em;
    border: none;
    background: none;
    padding: 0;
    color: var(--color-list-tag-text);
    text-decoration: none;
    transition: color .14s;
}

.list-tag:hover {
    background: none;
    color: var(--color-list-tag-hover-text);
}

/* ── Footer ─────────────────────────────────────── */
.back-link {
    font-family: var(--font-back-link);
    font-size: 9px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--color-back-link-text);
    text-decoration: none;
    border-bottom: none;
    background: none;
    padding: 0;
    transition: color .14s;
}

.back-link:hover {
    color: var(--color-back-link-hover-text);
    background: none;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
    .film-header {
        font-size: 1.8rem;
        margin-bottom: 20px;
        line-height: 1.1;
    }
    .meta-row {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        text-align: center;
        padding-bottom: 12px;
        margin-bottom: 20px;
    }
    .author {
        text-align: center;
        font-size: 1.2rem;
    }
    .date {
        text-align: center;
        font-size: 1.1rem;
    }
    .review-text {
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    .review-text::first-letter {
        font-size: 3.5rem;
        padding: 2px 6px 0 2px;
    }
    .film-page {
        padding: 0 12px 40px;
    }
    .film-body {
        grid-template-columns: 1fr;
    }
    .film-poster-col {
        border-right: none;
        border-bottom: 1px solid var(--color-poster-col-border);
        padding: 18px 0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    .film-poster-col .film-poster-wrap,
    .film-poster-col .film-poster-placeholder {
        width: 140px;
        max-width: 100%;
        flex-shrink: 0;
    }
    .film-poster-col .rating-medallion {
        width: 140px;
        flex-shrink: 0;
    }
    .film-vitals-col {
        padding: 18px 0 10px;
    }
    .seen-counter {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .seen-dots {
        order: 3;
        width: 100%;
        margin-top: 6px;
    }
    .credits-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}