/* ═══════════════════════════════════════════════════════════════════
 T HE D*ISPATCHES — Review Index  •  Cinemaths
 In the editorial tradition of the Metropolitan Broadside, c. 1893
 ═══════════════════════════════════════════════════════════════════ */

/* ── Override base main width ─────────────────────────────────── */
main {
    max-width: 1080px !important;
    width: 92% !important;
    margin-top: 32px !important;
    padding-bottom: 80px !important;
}

:root {

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

    /* — Masthead — */
    --color-masthead-eyebrow:              rgba(21,21,21,0.75); /* Text color of the small italic "Cinemaths — A Perennial Disquisition" eyebrow line above the masthead title */
    --color-rule-banner-top:               rgba(21,21,21,0.9);  /* Fill color of the thick top bar in the double-rule ornament that opens/closes the masthead */
    --color-rule-banner-middle:            transparent;         /* Fill color of the thin middle gap in the double-rule ornament (kept transparent as a visual spacer) */
    --color-rule-banner-bottom:            rgba(21,21,21,0.5);  /* Fill color of the thinner bottom bar in the double-rule ornament that opens/closes the masthead */
    --color-masthead-title:                rgba(21,21,21,1);    /* Text color of the large "THE DISPATCHES" masthead heading */
    --color-masthead-subtitle:             rgba(21,21,21,0.75);  /* Text color of the italic subtitle beneath the masthead title */
    --color-masthead-ornament-rule:        rgba(21,21,21,0.25); /* Color of the two horizontal lines flanking the ✦ · ✦ · ✦ ornament below the masthead subtitle */
    --color-masthead-ornament-text:        rgba(21,21,21,0.35); /* Text color of the ✦ · ✦ · ✦ ornament characters themselves */

    /* — Shared atoms (used across lead / secondary / tertiary / register) — */
    --color-datestamp:                     rgba(21,21,21,0.75); /* Text color of the small uppercase date label shown above every review entry's title */
    --color-film-title:                    rgba(21,21,21,1);    /* Text color of every film title heading (lead, secondary, and tertiary entries) */
    --color-excerpt-body:                  rgba(21,21,21,1);    /* Text color of the truncated review excerpt paragraph shown under each film title */
    --color-score:                         rgba(21,21,21,1);    /* Text color of the numeric review score (e.g. "84") shown in a verdict row */
    --color-score-suffix:                  rgba(21,21,21,0.7); /* Effective color of the "/ 100" suffix after the score number, dimmed from the inherited ink color */
    --color-verdict-divider:               rgba(21,21,21,0.28); /* Color of the thin vertical divider line separating the score from the "Read the Full Audit" link in a verdict row */
    --color-read-more-link:                rgba(21,21,21,1);    /* Text color of the "Read the Full Audit ☞" link */
    --tint-poster-default:                 sepia(0.12) contrast(1.05) brightness(0.98); /* Sepia/contrast/brightness filter applied to every poster thumbnail by default, giving the vintage-photograph tone */
    --tint-poster-hover:                   sepia(0.04) contrast(1.08) brightness(1.0);  /* Sepia/contrast/brightness filter applied to a poster thumbnail on hover, lightening the vintage tint */
    --color-poster-caption-bg:             rgba(21,21,21,0.75); /* Background color of the "Theatrical Poster" caption strip beneath the lead poster */
    --color-poster-caption-text:           var(--paper);        /* Text color of the "Theatrical Poster" caption strip; renders at 75% opacity because the caption element's own opacity is set to 0.75 */
    --color-column-rule:                   rgba(21,21,21,0.28); /* Color of the generic vertical rule used to visually separate columns/sections */
    --color-section-banner-border:         rgba(21,21,21,0.38); /* Color of the top and bottom border lines framing a section banner (e.g. the "Register" divider) */
    --color-section-banner-rule:           rgba(21,21,21,0.18); /* Color of the horizontal rule segments flanking a section banner's label text */
    --color-section-banner-text:           rgba(21,21,21,0.9);  /* Text color of a section banner's label (e.g. "The Register — Complete Chronicle of Dispatches") */

    /* — Lead story (index 0) — */
    --color-lead-border:                   rgba(21,21,21,0.45); /* Color of the thick double-line border closing off the bottom of the Lead Story section */
    --color-lead-poster-divider:           rgba(21,21,21,0.28); /* Color of the vertical divider between the lead poster column and the article body */
    --color-lead-kicker-border:            rgba(21,21,21,0.13); /* Color of the thin rule beneath the "Latest Dispatch — Most Recent Audit" kicker row */
    --color-lead-kicker-text:              rgba(21,21,21,0.75); /* Text color of the "Latest Dispatch — Most Recent Audit" kicker label */
    --color-lead-kicker-rule:              rgba(21,21,21,0.14); /* Color of the short horizontal rule beside the kicker label and date in the lead story */
    --color-lead-dropcap:                  rgba(21,21,21,1);    /* Color of the large decorative drop-cap first letter of the lead story's excerpt */

    /* — Secondary pair (index 1–2) — */
    --color-secondary-border:              rgba(21,21,21,0.28); /* Color of the border beneath the entire two-column Secondary Pair section */
    --color-secondary-item-divider:        rgba(21,21,21,0.28); /* Color of the vertical divider between the two secondary review items */
    --color-secondary-poster-divider:      rgba(21,21,21,0.13); /* Color of the vertical divider between a secondary item's text body and its poster sidebar */

    /* — Tertiary row (index 3–5) — */
    --color-tertiary-border:               rgba(21,21,21,0.28); /* Color of the border beneath the entire three-column Tertiary Row section */
    --color-tertiary-item-divider:         rgba(21,21,21,0.28); /* Color of the vertical divider between tertiary review columns */
    --color-tertiary-poster-border:        rgba(21,21,21,0.28); /* Color of the thin frame border around each tertiary item's poster thumbnail */
    --color-tertiary-verdict-border:       rgba(21,21,21,0.13); /* Color of the rule above the score/read-more row in each tertiary item */

    /* — Register (index 6+) — */
    --color-register-column-rule:          rgba(21,21,21,0.28);  /* Color of the vertical rule dividing the Register's two CSS columns */
    --color-register-border:               rgba(21,21,21,0.28);  /* Color of the border beneath the entire Register section */
    --color-register-entry-border:         rgba(21,21,21,0.13);  /* Color of the divider line beneath each individual entry row in the Register */
    --color-register-entry-hover-bg:       rgba(21,21,21,0.025); /* Background tint applied to a Register entry row on hover */
    --color-register-thumb-divider:        rgba(21,21,21,0.13);  /* Color of the vertical divider between a Register entry's thumbnail and its text content */
    --tint-register-thumb-default:         sepia(0.2) contrast(1.03); /* Sepia/contrast filter applied to Register thumbnail images by default */
    --tint-register-thumb-hover:           sepia(0.06);          /* Sepia filter applied to a Register thumbnail image on hover, lightening the vintage tint */
    --color-register-thumb-placeholder-bg: rgba(21,21,21,0.04);  /* Background fill for the blank placeholder box shown when a Register entry has no poster image */
    --color-register-thumb-placeholder-divider: rgba(21,21,21,0.13); /* Color of the vertical divider to the right of the blank thumbnail placeholder */
    --color-register-date:                 rgba(21,21,21,0.75);  /* Text color of the date label in each Register entry row */
    --color-register-title:                rgba(21,21,21,1);     /* Text color of the film title link in each Register entry row */
    --color-register-score-divider:        rgba(21,21,21,0.13);  /* Color of the vertical divider between a Register entry's text content and its score column */
    --color-register-score:                rgba(21,21,21,1);     /* Text color of the numeric score shown in a Register entry's score column */
    --color-register-score-suffix:         rgba(21,21,21,0.7);  /* Text color of the "/100" suffix beneath a Register entry's score */
    --color-register-link-divider:         rgba(21,21,21,0.13);  /* Color of the vertical divider between a Register entry's score column and its "☞" link column */
    --color-register-link:                 rgba(21,21,21,1);  /* Text color of the "☞" read-more manicule link in a Register entry, at rest */
    --color-register-link-hover:           rgba(21,21,21,0.7);   /* Text color of the "☞" read-more manicule link in a Register entry, on hover */

    /* — Coda & empty state — */
    --color-coda-ornament:                 rgba(21,21,21,0.22); /* Text color of the "✦ ✦ ✦" ornament in the page's closing coda */
    --color-coda-text:                     rgba(21,21,21,0.68); /* Text color of the "— Reviewed by Herman Yersin —" byline in the closing coda */
    --color-empty-state:                   rgba(21,21,21,0.7); /* Text color of the italic placeholder message shown when no reviews exist yet */

    /* — Mobile-only (≤640px) — */
    --color-lead-poster-mobile-bg:         rgba(21,21,21,0.02); /* Background tint behind the poster column when the Lead Story stacks vertically on mobile */

    /* — Inline styles in reviews.njk (no-poster fallback in the lead slot) — */
    --color-poster-placeholder-bg:         rgba(21,21,21,0.05); /* Background color of the box shown in the lead poster slot when a review has no film image */
    --color-poster-placeholder-icon:       rgba(21,21,21,0.15); /* Effective visibility of the 🎞 placeholder glyph, produced by the fallback block's own opacity */


    /* ── Fonts ───────────────────────────────────────────────────────── */

    /* — Masthead — */
    --font-masthead-eyebrow:    'goldentype-sc-original', serif;                       /* Font of the "Cinemaths — A Perennial Disquisition" eyebrow line */
    --font-masthead-title:      'globe', 'playfair-display', serif;   /* Font of the large "THE DISPATCHES" masthead heading */
    --font-masthead-subtitle:   'im-fell-english', Georgia, serif;     /* Font of the italic subtitle beneath the masthead title */
    --font-masthead-ornament:   'goldentype-sc-original', serif;                       /* Font of the ✦ · ✦ · ✦ ornament text below the masthead subtitle */

    /* — Shared atoms — */
    --font-datestamp:           'goldentype-sc-original', serif;                       /* Font of the small uppercase date label shown above every review entry's title */
    --font-film-title:          'globe', 'playfair-display', serif;   /* Font of every film title heading (lead, secondary, and tertiary entries) */
    --font-excerpt-body:        'century731', Georgia, serif;       /* Font of the truncated review excerpt paragraph shown under each film title */
    --font-score:                'block', 'playfair-display', serif;  /* Font of the numeric review score in a verdict row */
    --font-score-suffix:        'century731', serif;                       /* Font of the "/ 100" suffix after the score number */
    --font-read-more-link:      'goldentype-black', Georgia, serif;   /* Font of the "Read the Full Audit ☞" link */
    --font-poster-caption:      'goldentype-sc-original', serif;                       /* Font of the "Theatrical Poster" caption strip beneath the lead poster */
    --font-section-banner:      'goldentype-original', serif;                       /* Font of a section banner's label (e.g. "The Register — Complete Chronicle of Dispatches") */

    /* — Lead story — */
    --font-lead-kicker:         'goldentype-sc-original', serif;                       /* Font of the "Latest Dispatch — Most Recent Audit" kicker label */
    --font-lead-dropcap:        'globe', 'playfair-display', serif;   /* Font of the large decorative drop-cap first letter of the lead story's excerpt */

    /* — Register — */
    --font-register-date:       'goldentype-sc-original', serif;                       /* Font of the date label in each Register entry row */
    --font-register-title:      'globe', 'playfair-display', serif;   /* Font of the film title link in each Register entry row */
    --font-register-score:      'block', 'playfair-display', serif;   /* Font of the numeric score in a Register entry's score column */
    --font-register-score-suffix: 'century731', serif;                     /* Font of the "/100" suffix beneath a Register entry's score */
    --font-register-link:       'goldentype-original', Georgia, serif;       /* Font of the "☞" read-more manicule link in a Register entry */

    /* — Coda & empty state — */
    --font-coda-ornament:       'century731', serif;                       /* Font of the "✦ ✦ ✦" ornament in the page's closing coda */
    --font-coda-text:           'silentina-film', serif;                       /* Font of the "— Reviewed by Herman Yersin —" byline in the closing coda */
    --font-empty-state:         'century731', Georgia, serif;     /* Font of the italic placeholder message shown when no reviews exist yet */

}


/* ── Outer wrapper ────────────────────────────────────────────── */
.dispatches {
    padding-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════
 I .  M*ASTHEAD
 ═══════════════════════════════════════════════════════════════ */

.dsp-masthead {
    text-align: center;
    padding-top: 1.8rem;
}

.dsp-masthead__eyebrow {
    display: block;
    font-family: var(--font-masthead-eyebrow);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.49em;
    text-transform: lowercase;
    color: var(--color-masthead-eyebrow);
    margin-bottom: 1rem;
}

/* Double rule: thick + thin */
.dsp-rule-banner {
    display: grid;
    grid-template-rows: 4px 3px 1px;
    gap: 2px;
    margin: 0;
}
.dsp-rule-banner .rb-t { background: var(--color-rule-banner-top); }
.dsp-rule-banner .rb-m { background: var(--color-rule-banner-middle); }
.dsp-rule-banner .rb-b { background: var(--color-rule-banner-bottom); }

.dsp-masthead__title {
    font-family: var(--font-masthead-title);
    font-size: clamp(3.4rem, 7.2vw, 5.8rem);
    font-weight: normal;
    letter-spacing: 0.02em;
    line-height: 0.88;
    color: var(--color-masthead-title);
    margin: 0;
    padding: 1.15rem 0 0.75rem;
}

.dsp-masthead__sub {
    font-family: var(--font-masthead-subtitle);
    font-style: italic;
    font-size: 0.92rem;
    letter-spacing: 0.05em;
    color: var(--color-masthead-subtitle);
    margin-bottom: 1rem;
}

.dsp-masthead__orn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0;
}
.dsp-masthead__orn-rule {
    flex: 1;
    max-width: 260px;
    height: 1px;
    background: var(--color-masthead-ornament-rule);
}
.dsp-masthead__orn-text {
    font-family: var(--font-masthead-ornament);
    font-size: 0.48rem;
    letter-spacing: 0.35em;
    color: var(--color-masthead-ornament-text);
    white-space: nowrap;
}

/* Inverted double rule: thin + thick closing the masthead */
.dsp-rule-banner--close {
    grid-template-rows: 1px 3px 4px;
    margin-top: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
 I I.  *SHARED ATOMS
 ═══════════════════════════════════════════════════════════════ */

/* date stamp */
.dsp-datestamp {
    display: block;
    font-family: var(--font-datestamp);
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: lowercase;
    color: var(--color-datestamp);
}

/* Film title — GlobeL, link */
.dsp-film-title {
    font-family: var(--font-film-title);
    font-weight: normal;
    line-height: 0.96;
    letter-spacing: 0.01em;
    color: var(--color-film-title);
    margin: 0;
}
.dsp-film-title a {
    color: inherit;
    text-decoration: none;
}
.dsp-film-title a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Excerpt body */
.dsp-excerpt {
    font-family: var(--font-excerpt-body);
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--color-excerpt-body);
}

/* Score + Read-more footer row */
.dsp-verdict {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-tertiary-verdict-border);
    margin-top: auto;
}

.dsp-score {
    font-family: var(--font-score);
    font-weight: 400;
    line-height: 1;
    color: var(--color-score);
    white-space: nowrap;
}
.dsp-score sup {
    font-family: var(--font-score-suffix);
    font-size: 0.36em;
    letter-spacing: 0.14em;
    vertical-align: super;
    color: var(--color-score-suffix);
    font-weight: normal;
}

.dsp-vsep {
    width: 1px;
    background: var(--color-verdict-divider);
    align-self: stretch;
    flex-shrink: 0;
}

.dsp-read {
    font-family: var(--font-read-more-link);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-read-more-link);
    text-decoration: none;
    white-space: nowrap;
}
.dsp-read:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Poster — the core component used at all sizes.
 Alway*s shows at true 2:3 ratio, sepia-tinted. */
.dsp-poster {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
}
.dsp-poster a { display: block; }
.dsp-poster img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: top center;
    filter: var(--tint-poster-default);
    transition: filter 0.35s ease;
}
.dsp-poster a:hover img {
    filter: var(--tint-poster-hover);
}
.dsp-poster--caption {
    display: block;
    background: var(--color-poster-caption-bg);
    color: var(--color-poster-caption-text);
    font-family: var(--font-poster-caption);
    font-size: 0.32rem;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    text-align: center;
    padding: 4px 4px 3px;
}

/* Column rule between sections */
.dsp-column-rule {
    width: 1px;
    background: var(--color-column-rule);
    flex-shrink: 0;
    align-self: stretch;
}

/* Section banner — separates major sections */
.dsp-section-banner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--color-section-banner-border);
    border-bottom: 1px solid var(--color-section-banner-border);
    margin: 0;
}
.dsp-section-banner__rule {
    flex: 1;
    height: 1px;
    background: var(--color-section-banner-rule);
}
.dsp-section-banner__text {
    font-family: var(--font-section-banner);
    font-size: 0.42rem;
    letter-spacing: 0.58em;
    text-transform: uppercase;
    color: var(--color-section-banner-text);
    white-space: nowrap;
    padding: 0 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════
 I II. * LEAD STORY
 Asymmetric layout: poster left, editorial text right.
 The poster is the visual anchor — the text earns attention.
 ═══════════════════════════════════════════════════════════════ */

.dsp-lead {
    display: grid;
    grid-template-columns: 240px 1fr;
    border-bottom: 3px double var(--color-lead-border);
    min-height: 360px;
}

.dsp-lead__poster-col {
    border-right: 1px solid var(--color-lead-poster-divider);
    display: flex;
    flex-direction: column;
}

.dsp-lead__poster-col .dsp-poster {
    flex: 1;
}
.dsp-lead__poster-col .dsp-poster img {
    height: 100%;
    aspect-ratio: unset;  /* let it fill the column height */
    min-height: 280px;
    object-fit: cover;
    object-position: top center;
}

.dsp-lead__body {
    padding: 2.4rem 0 2rem 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dsp-lead__kicker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--color-lead-kicker-border);
}
.dsp-lead__kicker-text {
    font-family: var(--font-lead-kicker);
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: lowercase;
    color: var(--color-lead-kicker-text);
    white-space: nowrap;
}
.dsp-lead__kicker-rule {
    flex: 1;
    height: 1px;
    background: var(--color-lead-kicker-rule);
}

.dsp-lead__title {
    font-size: clamp(2rem, 4vw, 3.4rem);
    margin-bottom: 0.65rem;
}

.dsp-lead__date {
    margin-bottom: 1.3rem;
}

/* Drop cap on lead excerpt — cinematic, period-accurate */
.dsp-lead__excerpt {
    flex: 1;
    margin-bottom: 0;
}
.dsp-lead__excerpt::first-letter {
    font-family: var(--font-lead-dropcap);
    font-size: 3.8rem;
    line-height: 0.76;
    float: left;
    margin-right: 0.1em;
    margin-top: 0.07em;
    color: var(--color-lead-dropcap);
    font-weight: normal;
}

.dsp-lead__verdict {
    margin-top: 1.4rem;
}
.dsp-lead__verdict .dsp-score { font-size: 3.2rem; }


/* ═══════════════════════════════════════════════════════════════
 I V.  *SECONDARY PAIR  (reviews 2 & 3)
 Two columns divided by a column rule. Each has a portrait
 poster on the right — pulling the eye through the text.
 ═══════════════════════════════════════════════════════════════ */

.dsp-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--color-secondary-border);
}

.dsp-secondary__item {
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow: hidden;
}
.dsp-secondary__item + .dsp-secondary__item {
    border-left: 1px solid var(--color-secondary-item-divider);
}

.dsp-secondary__body {
    flex: 1;
    padding: 1.8rem 1.6rem 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.dsp-secondary__date { margin-bottom: 0.75rem; }

.dsp-secondary__title {
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    margin-bottom: 0.85rem;
}

.dsp-secondary__excerpt {
    flex: 1;
    margin-bottom: 0;
    font-size: 0.88rem;
    line-height: 1.6;
}

.dsp-secondary__verdict {
    margin-top: 1.2rem;
}
.dsp-secondary__verdict .dsp-score { font-size: 1.85rem; }

/* Poster — right side, narrower */
.dsp-secondary__poster-col {
    flex-shrink: 0;
    width: 108px;
    border-left: 1px solid var(--color-secondary-poster-divider);
    display: flex;
    flex-direction: column;
    align-self: stretch;
}
.dsp-secondary__poster-col .dsp-poster {
    flex: 1;
}
.dsp-secondary__poster-col .dsp-poster img {
    height: 100%;
    aspect-ratio: unset;
    min-height: 180px;
    object-fit: cover;
    object-position: top center;
}


/* ═══════════════════════════════════════════════════════════════
 V .  T*ERTIARY ROW  (reviews 4, 5, 6)
 Three-column broadsheet grid. Each entry: poster floated
 in the text column, headline, excerpt, verdict.
 This is the most newspaper-authentic section.
 ═══════════════════════════════════════════════════════════════ */

.dsp-tertiary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--color-tertiary-border);
}

.dsp-tertiary__item {
    padding: 1.6rem 1.2rem 1.4rem;
    border-right: 1px solid var(--color-tertiary-item-divider);
    display: flex;
    flex-direction: row;
    gap: 0.9rem;
    overflow: hidden;
}
.dsp-tertiary__item:last-child {
    border-right: none;
}

.dsp-tertiary__poster-col {
    flex-shrink: 0;
    width: 80px;
    display: flex;
    flex-direction: column;
    margin-top: 1.05rem;
}
.dsp-tertiary__poster-col .dsp-poster img {
    aspect-ratio: 2 / 3;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-tertiary-poster-border);
}

.dsp-tertiary__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dsp-tertiary__date { margin-bottom: 0.4rem; }

.dsp-tertiary__title {
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.dsp-tertiary__excerpt {
    font-size: 0.82rem;
    line-height: 1.45;
    flex: 1;
}

.dsp-tertiary__verdict {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-tertiary-verdict-border);
}
.dsp-tertiary__verdict .dsp-score { font-size: 1.15rem; }
.dsp-tertiary__verdict .dsp-read { font-size: 0.62rem; }


/* ═══════════════════════════════════════════════════════════════
 V I.  *REGISTER  (reviews 7+)
 CSS `columns: 2` lets the browser flow entries naturally,
keeping pairs balanced without any JS splitting logic.
Each entry is a compact strip: poster thumb | text | score.
═══════════════════════════════════════════════════════════════ */

.dsp-register {
    column-count: 2;
    column-gap: 0;
    column-rule: 1px solid var(--color-register-column-rule);
    border-bottom: 1px solid var(--color-register-border);
}

.dsp-register__entry {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-register-entry-border);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    transition: background 0.15s ease;
}
.dsp-register__entry:hover {
    background: var(--color-register-entry-hover-bg);
}

/* Thumbnail — true 2:3 ratio within a fixed width */
.dsp-register__thumb {
    flex-shrink: 0;
    width: 40px;
    overflow: hidden;
    border-right: 1px solid var(--color-register-thumb-divider);
    align-self: stretch;
}
.dsp-register__thumb a { display: block; height: 100%; }
.dsp-register__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    filter: var(--tint-register-thumb-default);
    transition: filter 0.2s ease;
}
.dsp-register__thumb a:hover img { filter: var(--tint-register-thumb-hover); }
.dsp-register__thumb-none {
    flex-shrink: 0;
    width: 40px;
    background: var(--color-register-thumb-placeholder-bg);
    border-right: 1px solid var(--color-register-thumb-placeholder-divider);
}

.dsp-register__content {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.12rem;
}
.dsp-register__date {
    font-family: var(--font-register-date);
    font-size: 0.42rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: var(--color-register-date);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsp-register__title {
    font-family: var(--font-register-title);
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.1;
    color: var(--color-register-title);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsp-register__title a {
    color: inherit;
    text-decoration: none;
}
.dsp-register__title a:hover { text-decoration: underline; }

/* Score column */
.dsp-register__score-col {
    flex-shrink: 0;
    width: 50px;
    border-left: 1px solid var(--color-register-score-divider);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.4rem 0;
}
.dsp-register__score {
    font-family: var(--font-register-score);
    font-size: 1.0rem;
    font-weight: normal;
    line-height: 1;
    color: var(--color-register-score);
}
.dsp-register__score-sub {
    font-family: var(--font-register-score-suffix);
    font-size: 0.29rem;
    letter-spacing: 0.15em;
    color: var(--color-register-score-suffix);
}

/* Link manicule */
.dsp-register__link-col {
    flex-shrink: 0;
    border-left: 1px solid var(--color-register-link-divider);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.55rem;
}
.dsp-register__link {
    font-family: var(--font-register-link);
    font-size: 0.78rem;
    color: var(--color-register-link);
    text-decoration: none;
    line-height: 1;
    transition: color 0.15s ease;
}
.dsp-register__link:hover { color: var(--color-register-link-hover); }


/* ═══════════════════════════════════════════════════════════════
 V II. * CODA
 ═══════════════════════════════════════════════════════════════ */

.dsp-coda {
    padding: 2rem 0 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}
.dsp-coda__orn {
    font-family: var(--font-coda-ornament);
    font-size: 0.7rem;
    letter-spacing: 0.6em;
    color: var(--color-coda-ornament);
}
.dsp-coda__text {
    font-family: var(--font-coda-text);
    font-size: 0.41rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--color-coda-text);
}

/* ── Empty state ─────────────────────────────────────────────── */
.dsp-empty {
    text-align: center;
    padding: 5rem 0;
    font-family: var(--font-empty-state);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--color-empty-state);
}

/* ═══════════════════════════════════════════════════════════════
 R ESPO*NSIVE DESIGN (Breakpoint: 640px)
 ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* I. Masthead styling adjustments */
    .dsp-masthead {
        padding-top: 1.2rem;
    }
    .dsp-masthead__eyebrow {
        font-size: 0.38rem;
        letter-spacing: 0.35em;
        margin-bottom: 0.75rem;
    }
    .dsp-masthead__title {
        font-size: clamp(2.0rem, 9vw, 3.2rem);
        padding: 0.8rem 0 0.5rem;
    }
    .dsp-masthead__sub {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 0.75rem;
        padding: 0 0.5rem;
    }
    .dsp-masthead__orn-rule {
        max-width: 80px;
    }
    .dsp-rule-banner {
        grid-template-rows: 3px 2px 1px;
        gap: 1px;
    }
    .dsp-rule-banner--close {
        grid-template-rows: 1px 2px 3px;
        margin-top: 0.75rem;
    }

    /* II. Lead Story vertical stack */
    .dsp-lead {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .dsp-lead__poster-col {
        border-right: none;
        border-bottom: 1px solid var(--color-lead-poster-divider);
        padding: 1.5rem 0;
        align-items: center;
        background: var(--color-lead-poster-mobile-bg);
    }
    .dsp-lead__poster-col .dsp-poster {
        width: 170px;
        margin: 0 auto;
    }
    .dsp-lead__poster-col .dsp-poster img {
        aspect-ratio: 2 / 3;
        min-height: auto;
    }
    .dsp-lead__poster-col .dsp-poster--caption {
        width: 170px;
        margin: 0 auto;
    }
    .dsp-lead__body {
        padding: 1.5rem 0;
    }
    .dsp-lead__kicker {
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    .dsp-lead__kicker-text {
        font-size: 0.38rem;
        letter-spacing: 0.3em;
        white-space: normal;
        text-align: center;
    }
    .dsp-lead__kicker-rule {
        display: none;
    }
    .dsp-lead__title {
        font-size: 1.9rem;
        text-align: center;
    }
    .dsp-lead__date {
        text-align: center;
        margin-bottom: 1rem;
    }
    .dsp-lead__excerpt::first-letter {
        font-size: 3.2rem;
    }
    .dsp-lead__verdict {
        justify-content: center;
    }
    .dsp-lead__verdict .dsp-score {
        font-size: 2.6rem;
    }

    /* III. Secondary Pair stack */
    .dsp-secondary {
        grid-template-columns: 1fr;
    }
    .dsp-secondary__item {
        flex-direction: row; /* keep horizontal, text on left, poster on right */
        align-items: flex-start;
    }
    .dsp-secondary__item + .dsp-secondary__item {
        border-left: none;
        border-top: 1px solid var(--color-secondary-item-divider);
    }
    .dsp-secondary__body {
        padding: 1.4rem 1rem 1.4rem 0;
    }
    .dsp-secondary__title {
        font-size: 1.35rem;
    }
    .dsp-secondary__excerpt {
        font-size: 0.84rem;
        line-height: 1.5;
    }
    .dsp-secondary__poster-col {
        width: 90px;
        border-left: 1px solid var(--color-secondary-poster-divider);
        margin-top: 1.4rem;
        align-self: flex-start;
    }
    .dsp-secondary__poster-col .dsp-poster img {
        aspect-ratio: 2 / 3;
        min-height: auto;
    }
    .dsp-secondary__verdict .dsp-score {
        font-size: 1.55rem;
    }

    /* IV. Tertiary Story stack */
    .dsp-tertiary {
        grid-template-columns: 1fr;
    }
    .dsp-tertiary__item {
        border-right: none;
        border-bottom: 1px solid var(--color-tertiary-item-divider);
        padding: 1.4rem 0;
        flex-direction: row;
        gap: 0.8rem;
    }
    .dsp-tertiary__item:last-child {
        border-bottom: none;
    }
    .dsp-tertiary__poster-col {
        width: 75px;
        margin-top: 1.05rem;
    }
    .dsp-tertiary__body {
        padding: 0;
    }
    .dsp-tertiary__title {
        font-size: 1.15rem;
    }
    .dsp-tertiary__excerpt {
        font-size: 0.82rem;
        line-height: 1.45;
    }
    .dsp-tertiary__verdict .dsp-score {
        font-size: 1.25rem;
    }

    /* V. Register columns */
    .dsp-register {
        column-count: 1;
    }

    /* VI. Section Banners and Coda */
    .dsp-section-banner {
        padding: 0.45rem 0;
    }
    .dsp-section-banner__text {
        font-size: 0.36rem;
        letter-spacing: 0.28em;
        white-space: normal;
        text-align: center;
        line-height: 1.4;
        padding: 0 0.3rem;
    }
    .dsp-coda__text {
        font-size: 0.38rem;
        letter-spacing: 0.3em;
    }
}