/* ═══════════════════════════════════════════════════════════════
 D IREC*TORS' REGISTER — scoped to .dir-page
 ═══════════════════════════════════════════════════════════════ */

main {
    max-width: 1440px !important;
    width: 96% !important;
}

.dir-page {
    /* 8 tracks: # | name | count | bayesian | sum | avg | rewatches | expand */
    --col-layout: 30px 1fr 52px 70px 88px 56px 50px 22px;
}


:root {

    /* ── Colors ──────────────────────────────────────────────────────
     *   Page surfaces & backgrounds
     *   ─────────────────────────────────────────────────────────────── */
    --dir-page-paper:              var(--paper, #f4b97d); /* Base page background for the directors page; inherited from the site-wide paper color */
    --dir-row-stripe-bg:           rgba(0,0,0,0.022);      /* Background tint on every other pair of director rows (zebra striping) */
    --dir-row-hover-bg:            rgba(28,15,5,0.065);    /* Background of a director row on hover, and while its detail panel is open */
    --dir-detail-panel-bg:         rgba(28,15,5,0.038);    /* Background of the expanded detail panel beneath a clicked row */
    --dir-group-header-bg:         var(--paper, #f4b97d);  /* Background of the sticky group header bar (surname/tier grouping) */

    /* ── Colors — Page heading ───────────────────────────────────── */
    --dir-heading-rule-color:      #3d2a18; /* Horizontal rule lines flanking "Directors' Register" title */
    --dir-heading-pip-color:       #151515; /* Small diamond pip decoration centered on the heading rules */
    --dir-heading-title-color:     #151515; /* Text color of the "Directors' Register" title */
    --dir-heading-subtitle-color:  #6b4f32; /* Text color of the italic subtitle line beneath the title */

    /* ── Colors — Stats strip ────────────────────────────────────── */
    --dir-stats-strip-border-color:        rgba(59,40,22,0.3);  /* Outer border around the stats strip */
    --dir-stats-strip-bottom-border-color: #151515;             /* Heavier bottom border closing off the stats strip */
    --dir-stats-cell-divider-color:        rgba(59,40,22,0.3);  /* Vertical divider between individual stat cells */
    --dir-stat-value-color:                #151515;             /* Large stat numbers (e.g. total directors, mean bayesian) */
    --dir-stat-label-color:                #151515;             /* Small uppercase label beneath each stat number */

    /* ── Colors — Controls bar ───────────────────────────────────── */
    --dir-controls-bottom-border-color:    rgba(59,40,22,0.17); /* Bottom border separating controls bar from sort bar */
    --dir-ctrl-label-color:                #6b4f32;             /* "Sort" / "Group by" / "Filmography" labels */
    --dir-ctrl-select-border-color:        #3d2a18;             /* Border of the sort/group/filter dropdown selects */
    --dir-ctrl-select-text-color:          #151515;             /* Text inside the dropdown selects */
    --dir-ctrl-select-arrow-color:         #3d2a18;             /* Fill of the custom dropdown-arrow icon — embedded as an SVG data URI on background-image, so this must be updated by hand (the URI's %23 hex) if the color changes */
    --dir-ctrl-separator-color:            rgba(59,40,22,0.17); /* Vertical divider between control groups */
    --dir-ctrl-search-text-color:          #151515;             /* Typed text in the director search input */
    --dir-ctrl-search-border-color:        #3d2a18;             /* Border of the search input */
    --dir-ctrl-search-focus-border-color:  #151515;             /* Border of the search input while focused */
    --dir-ctrl-search-placeholder-color:   #6b4f32;             /* Placeholder text ("Search director…") */
    --dir-ctrl-search-icon-color:          #6b4f32;             /* Stroke of the magnifying-glass search icon */
    --dir-ctrl-count-color:                #6b4f32;             /* "N of M" result count beside the search box */

    /* ── Colors — Sort bar (column headers) ──────────────────────── */
    --dir-sortbar-bottom-border-color:  #151515; /* Bottom border closing off the sort-header row */
    --dir-sortbar-label-color:          #6b4f32; /* Default text color of column headers (#, Director, Films…) */
    --dir-sortbar-label-hover-color:    #151515; /* Column header text color on hover */
    --dir-sortbar-label-active-color:   #7a1515; /* Column header (and arrow) text color when it's the active sort */

    /* ── Colors — Director rows ──────────────────────────────────── */
    --dir-row-divider-color:            rgba(59,40,22,0.17); /* Bottom border line between director rows */
    --dir-row-number-color:             rgba(59,40,22,0.66); /* Faint row index number (#) */
    --dir-row-name-color:               #151515;             /* Director's name */
    --dir-row-completed-mark-color:     #7a1515;             /* ◆ glyph marking a completed filmography */
    --dir-row-count-color:              #3d2a18;             /* Film-count column figure */
    --dir-row-bayesian-color:           #7a1515;             /* Bayesian average — the ledger's primary rating figure */
    --dir-row-sum-color:                rgba(21,21,21,1);             /* Σ (weighted sum score) column */
    --dir-row-avg-color:                rgba(21,21,21,1);;             /* Raw average rating column */
    --dir-row-rewatches-color:           rgba(21,21,21,1);             /* Rewatches column */
    --dir-row-chevron-color:            rgba(59,40,22,0.17); /* Expand/collapse chevron, default state */
    --dir-row-chevron-active-color:     #6b4f32;             /* Chevron color when its row is hovered or expanded */

    /* ── Colors — Expanded detail panel ──────────────────────────── */
    --dir-detail-border-color:          rgba(59,40,22,0.17); /* Bottom border of the expanded detail panel */
    --dir-detail-label-color:           #6b4f32;             /* Field labels inside the panel (e.g. "Bayesian Avg") */
    --dir-detail-value-color:           #3d2a18;             /* Field values inside the panel */
    --dir-detail-link-color:            #7a1515;             /* "Browse Films →" link text and underline */
    --dir-detail-link-hover-color:      #151515;             /* "Browse Films →" link text and underline on hover */

    /* ── Colors — Score sparkline ─────────────────────────────────── */
    --dir-sparkline-baseline-color:     rgba(59,40,22,0.2); /* Baseline border beneath the per-film score bars */
    --dir-sparkline-caption-color:      rgba(59,40,22,0.75); /* Caption text ("N films • highest to lowest") */
    --dir-sparkline-empty-color:        rgba(59,40,22,0.2); /* Em-dash shown when a director has no scored films */

    /* ── Colors — Group headers (surname / tier grouping) ────────── */
    --dir-group-header-border-color:    #151515;             /* Bottom border under a group header */
    --dir-group-label-color:            #151515;             /* Group name/letter itself (e.g. "A", "10+ Films") */
    --dir-group-rule-color:             rgba(59,40,22,0.3);  /* Horizontal rule extending from the group label */
    --dir-group-stat-label-color:       #6b4f32;             /* Supporting stat text in the group header (e.g. "directors") */
    --dir-group-stat-value-color:       #3d2a18;             /* Bolded numbers within the group header stats */
    --dir-group-gradebar-border-color:  rgba(59,40,22,0.17); /* Border around the mini A–F distribution bar in a group header */

    /* ── Colors — Footnote legend ─────────────────────────────────── */
    --dir-footnote-border-color:        rgba(59,40,22,0.17); /* Top border separating footnote from content above */
    --dir-footnote-text-color:          #6b4f32;             /* Footnote/legend item text */
    --dir-footnote-symbol-color:        #7a1515;             /* ◆ and Σ glyphs within the footnote legend */

    /* ── Colors — Pagination ──────────────────────────────────────── */
    --dir-pagination-top-border-color:          #151515;             /* Top border of the pagination bar */
    --dir-pagination-bottom-border-color:       #3d2a18;             /* Bottom border of the pagination bar */
    --dir-pagination-info-color:                #6b4f32;             /* "Page X of Y — N entries" summary text */
    --dir-pagination-button-border-color:       #3d2a18;             /* Border of individual page-number buttons */
    --dir-pagination-button-text-color:         #3d2a18;             /* Text of page-number buttons */
    --dir-pagination-button-hover-bg:           #151515;             /* Background of a page-number button on hover */
    --dir-pagination-button-hover-text-color:   var(--paper, #f4b97d); /* Text of a page-number button on hover */
    --dir-pagination-current-bg:                #151515;             /* Background of the current-page indicator */
    --dir-pagination-current-text-color:        var(--paper, #f4b97d); /* Text of the current-page indicator */

    /* ── Colors — Empty / error states ────────────────────────────── */
    --dir-empty-state-text-color:       #6b4f32; /* "No entries match…" and "Could not load archive data" messages */

    /* ── Colors — Grade palette (score sparkline bars) ────────────── */
    --dir-grade-aplus-bg:   #0d2b14; /* Sparkline bar color for scores ≥ 90 (A+) */
    --dir-grade-a-bg:       #143520; /* Sparkline bar color for scores 85–89 (A) */
    --dir-grade-aminus-bg:  #1a3d25; /* Sparkline bar color for scores 80–84 (A−) */
    --dir-grade-bplus-bg:   #0e1f3a; /* Sparkline bar color for scores 75–79 (B+) */
    --dir-grade-b-bg:       #142847; /* Sparkline bar color for scores 70–74 (B) */
    --dir-grade-bminus-bg:  #1a3054; /* Sparkline bar color for scores 65–69 (B−) */
    --dir-grade-cplus-bg:   #2e2a08; /* Sparkline bar color for scores 60–64 (C+) */
    --dir-grade-c-bg:       #383310; /* Sparkline bar color for scores 55–59 (C) */
    --dir-grade-cminus-bg:  #403c16; /* Sparkline bar color for scores 50–54 (C−) */
    --dir-grade-dplus-bg:   #3a1010; /* Sparkline bar color for scores 45–49 (D+) */
    --dir-grade-d-bg:       #451515; /* Sparkline bar color for scores 40–44 (D) */
    --dir-grade-dminus-bg:  #4f1818; /* Sparkline bar color for scores 35–39 (D−) */
    --dir-grade-f-bg:       #5c0808; /* Sparkline bar color for scores < 35 (F) */
    --dir-grade-text-color: var(--paper, #f4b97d); /* Reserved text color for use atop grade-colored backgrounds — declared in the source but not currently applied anywhere in directors.css */

    /* ── Colors — Group-header grade distribution bar ─────────────── */
    /*  Same five broad tiers as above, but a separate rendering context
     *    (the mini A/B/C/D/F bar inside each group header) — listed as its
     *    own instance per the "every occurrence" rule, values currently
     *    identical to the corresponding --dir-grade-*-bg entries above.  */
    --dir-groupbar-a-bg:  #143520; /* "A" segment in a group header's grade distribution bar */
    --dir-groupbar-b-bg:  #142847; /* "B" segment in a group header's grade distribution bar */
    --dir-groupbar-c-bg:  #383310; /* "C" segment in a group header's grade distribution bar */
    --dir-groupbar-d-bg:  #451515; /* "D" segment in a group header's grade distribution bar */
    --dir-groupbar-f-bg:  #5c0808; /* "F" segment in a group header's grade distribution bar */


    /* ── Fonts ───────────────────────────────────────────────────────
     *   Page heading
     *   ─────────────────────────────────────────────────────────────── */
    --dir-heading-title-font:      'goldentype-black', serif;                    /* "Directors' Register" title */
    --dir-heading-subtitle-font:   'im-fell-english', Georgia, serif;  /* Italic subtitle beneath the title */

    /* ── Fonts — Stats strip ──────────────────────────────────────── */
    --dir-stat-value-font:  'century731', serif; /* Large stat numbers */
    --dir-stat-label-font:  'centurysc', serif; /* Uppercase stat labels */

    /* ── Fonts — Controls bar ─────────────────────────────────────── */
    --dir-ctrl-label-font:   'goldentype-sc-original', serif;                   /* Control bar labels ("Sort", "Group by", "Filmography") */
    --dir-ctrl-select-font: 'globe', serif;                    /* Text inside the dropdown selects */
    --dir-ctrl-search-font: 'im-fell-english', Georgia, serif;  /* Typed and placeholder text in the search input */
    --dir-ctrl-count-font:  'im-fell-english', Georgia, serif;  /* "N of M" result count beside the search box */

    /* ── Fonts — Sort bar ─────────────────────────────────────────── */
    --dir-sortbar-font: 'goldentype-sc-original', serif; /* Column sort headers (#, Director, Films, Bayes. Avg, Σ, Avg, Rewatches) */

    /* ── Fonts — Director rows ───────────────────────────────────── */
    --dir-row-number-font:          'century731', serif;                   /* Row index number column */
    --dir-row-name-font:            'goldentype-original', Georgia, serif; /* Director's name */
    --dir-row-completed-mark-font:  'goldentype-original', serif;                   /* ◆ completion glyph */
    --dir-row-count-font:           'century731', Georgia, serif; /* Film-count column figure */
    --dir-row-bayesian-font:        'century731', Georgia, serif; /* Bayesian average figure */
    --dir-row-sum-font:             'century731', serif;                   /* Σ (sum score) column */
    --dir-row-avg-font:             'century731', serif;                   /* Raw average column */
    --dir-row-rewatches-font:        'century731', serif;

    /* ── Fonts — Expanded detail panel ───────────────────────────── */
    --dir-detail-label-font: 'goldentype-sc-original', serif;                   /* Field labels (e.g. "Bayesian Avg") */
    --dir-detail-value-font: 'century731', Georgia, serif; /* Field values */
    --dir-detail-link-font:  'goldentype-sc-original', serif;                   /* "Browse Films →" link */

    /* ── Fonts — Score sparkline ──────────────────────────────────── */
    --dir-sparkline-caption-font: 'goldentype-sc-original', serif;                   /* Caption text ("N films • highest to lowest") */
    --dir-sparkline-empty-font:   'im-fell-english', Georgia, serif; /* Em-dash shown when no scores exist */

    /* ── Fonts — Group headers ────────────────────────────────────── */
    --dir-group-label-font: 'goldentype-sc-original', serif; /* Group name/letter (e.g. "A", "10+ Films") */
    --dir-group-stat-font:  'goldentype-sc-original', serif; /* Supporting stat text in the group header */

    /* ── Fonts — Footnote legend ──────────────────────────────────── */
    --dir-footnote-font: 'im-fell-english', Georgia, serif; /* Footnote/legend item text */

    /* ── Fonts — Pagination ───────────────────────────────────────── */
    --dir-pagination-info-font:   'im-fell-english', Georgia, serif; /* "Page X of Y — N entries" summary */
    --dir-pagination-button-font: 'goldentype-sc-original', serif;                  /* Page-number buttons */

    /* ── Fonts — Empty / error states ────────────────────────────── */
    --dir-empty-state-font: 'im-fell-english', Georgia, serif; /* "No entries match…" and "Could not load archive data" messages */

}



/* ── Page heading ─────────────────────────────────────────── */
.dir-page .page-heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.dir-page .heading-rule { display: flex; align-items: center; gap: 0.5rem; }
.dir-page .heading-rule.right { flex-direction: row-reverse; }
.dir-page .heading-rule hr { flex: 1; border: none; border-top: 1px solid var(--dir-heading-rule-color); }
.dir-page .pip { width: 5px; height: 5px; background: var(--dir-heading-pip-color); transform: rotate(45deg); flex-shrink: 0; }
.dir-page .heading-center { text-align: center; }
.dir-page .heading-center h1 {
    font-family: var(--dir-heading-title-font);
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    letter-spacing: 0.07em; color: var(--dir-heading-title-color);
}
.dir-page .heading-center .sub {
    font-family: var(--dir-heading-subtitle-font); font-style: italic;
    font-size: 0.72rem; color: var(--dir-heading-subtitle-color); margin-top: 0.2rem;
}

/* ── Stats strip ──────────────────────────────────────────── */
.dir-page .stats-strip {
    display: flex; align-items: stretch;
    border: 1px solid var(--dir-stats-strip-border-color);
    border-bottom: 2px solid var(--dir-stats-strip-bottom-border-color);
    overflow: hidden;
}
.dir-page .stat-cell {
    flex: 1; text-align: center;
    padding: 0.5rem 0.4rem;
    border-right: 1px solid var(--dir-stats-cell-divider-color);
    min-width: 0;
}
.dir-page .stat-cell:last-child { border-right: none; }
.dir-page .stat-main {
    font-family: var(--dir-stat-value-font); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.05em; color: var(--dir-stat-value-color);
    display: block; line-height: 1;
}
.dir-page .stat-label {
    font-family: var(--dir-stat-label-font); font-size: 0.5rem; letter-spacing: 0.16em;
    font-weight: 400; color: var(--dir-stat-label-color);
    display: block; margin-top: 0.18rem; opacity: 0.75;
}
/* ── Controls ─────────────────────────────────────────────── */
.dir-page .controls {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--dir-controls-bottom-border-color);
}
.dir-page .ctrl-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dir-page .ctrl-label {
    font-family: var(--dir-ctrl-label-font); font-size: 0.62rem; letter-spacing: 0.15em;
    text-transform: lowercase; color: var(--dir-ctrl-label-color); white-space: nowrap;
}
.dir-page .ctrl-select {
    font-family: var(--dir-ctrl-select-font); font-size: 0.5rem; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 0.2rem 1.6rem 0.2rem 0.5rem;
    border: 1px solid var(--dir-ctrl-select-border-color); background: transparent;
    color: var(--dir-ctrl-select-text-color); cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0l3.5 4 3.5-4z' fill='%233b2816'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.38rem center;
}
.dir-page .ctrl-sep { width: 1px; height: 16px; background: var(--dir-ctrl-separator-color); flex-shrink: 0; }
.dir-page .ctrl-search {
    position: relative; display: flex; align-items: center; margin-left: auto;
}
.dir-page .ctrl-search input {
    font-family: var(--dir-ctrl-search-font); font-style: italic; font-size: 0.78rem;
    color: var(--dir-ctrl-search-text-color); padding: 0.2rem 0.5rem 0.2rem 1.5rem;
    border: 1px solid var(--dir-ctrl-search-border-color); background: transparent;
    width: 190px; outline: none;
}
.dir-page .ctrl-search input::placeholder { color: var(--dir-ctrl-search-placeholder-color); }
.dir-page .ctrl-search input:focus { border-color: var(--dir-ctrl-search-focus-border-color); }
.dir-page .ctrl-search svg {
    position: absolute; left: 0.4rem; width: 10px; height: 10px;
    fill: none; stroke: var(--dir-ctrl-search-icon-color); stroke-width: 2;
}
.dir-page .ctrl-count {
    font-family: var(--dir-ctrl-count-font); font-style: italic;
    font-size: 0.7rem; color: var(--dir-ctrl-count-color); white-space: nowrap;
}

/* ── Sort bar ─────────────────────────────────────────────── */
.dir-page .sort-bar {
    display: grid;
    grid-template-columns: var(--col-layout);
    border-bottom: 2px solid var(--dir-sortbar-bottom-border-color);
    padding: 0.3rem 0;
}
.dir-page .sort-bar .sh {
    font-family: var(--dir-sortbar-font); font-size: 0.46rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--dir-sortbar-label-color);
    cursor: pointer; user-select: none; padding: 0 0.3rem;
    display: flex; align-items: center; gap: 0.2rem; transition: color 0.12s;
}
.dir-page .sort-bar .sh:hover  { color: var(--dir-sortbar-label-hover-color); }
.dir-page .sort-bar .sh.active { color: var(--dir-sortbar-label-active-color); }
.dir-page .sort-bar .sh .arr   { opacity: 0.4; font-size: 0.42rem; }
.dir-page .sort-bar .sh.active .arr { opacity: 1; }
.dir-page .sh-count  { justify-content: flex-end; }
.dir-page .sh-avg    { justify-content: flex-end; }
.dir-page .sh-bay    { justify-content: flex-end; }
.dir-page .sh-sum    { justify-content: flex-end; }
.dir-page .sh-rewatches { justify-content: flex-end; }

/* ── Director rows ────────────────────────────────────────── */
.dir-page .ratings-list { position: relative; }
.dir-page .rating-row:nth-child(4n+1),
.dir-page .rating-row:nth-child(4n+2) { background: var(--dir-row-stripe-bg); }
.dir-page .rating-row {
    display: grid;
    grid-template-columns: var(--col-layout);
    align-items: center;
    border-bottom: 1px solid var(--dir-row-divider-color);
    min-height: 28px; cursor: pointer; transition: background 0.08s;
}
.dir-page .rating-row:hover { background: var(--dir-row-hover-bg) !important; }
.dir-page .rating-row.expanded {
    background: var(--dir-row-hover-bg) !important;
    border-bottom-color: transparent;
}
.dir-page .rc { padding: 0.2rem 0.3rem; line-height: 1; }

.dir-page .rc-num {
    font-family: var(--dir-row-number-font); font-size: 0.42rem;
    letter-spacing: 0.04em; color: var(--dir-row-number-color); text-align: right;
}
.dir-page .rc-name {
    font-family: var(--dir-row-name-font); font-size: 0.82rem; color: var(--dir-row-name-color);
    line-height: 1.15; padding-right: 0.4rem; font-weight: 500;
    display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap;
}
.dir-page .rc-name .n-main { font-weight: 700; }
.dir-page .rc-name .n-completed {
    font-family: var(--dir-row-completed-mark-font); font-size: 0.58rem;
    color: var(--dir-row-completed-mark-color); line-height: 1; flex-shrink: 0;
}
.dir-page .rc-count {
    font-family: var(--dir-row-count-font); font-weight: 700;
    font-size: 0.78rem; color: var(--dir-row-count-color); text-align: right;
}
/* Bayesian avg — primary rating, red bold Playfair */
.dir-page .rc-bay {
    font-family: var(--dir-row-bayesian-font); font-weight: 700;
    font-size: 0.78rem; color: var(--dir-row-bayesian-color); text-align: right;
}
/* Sum score — secondary, faint small caps */
.dir-page .rc-sum {
    font-family: var(--dir-row-sum-font); font-size: 0.66rem;
    letter-spacing: 0.04em; color: var(--dir-row-sum-color); text-align: right;
}
/* Raw avg — tertiary, same faint style as sum/runtime */
.dir-page .rc-avg {
    font-family: var(--dir-row-avg-font); font-size: 0.66rem;
    letter-spacing: 0.04em; color: var(--dir-row-avg-color); text-align: right;
}
.dir-page .rc-rewatches {
    font-family: var(--dir-row-rewatches-font); font-size: 0.66rem;
    letter-spacing: 0.05em; color: var(--dir-row-rewatches-color); text-align: right;
}
.dir-page .rc-expand {
    display: flex; align-items: center; justify-content: center;
}
.dir-page .expand-chevron {
    font-size: 0.55rem; color: var(--dir-row-chevron-color);
    transition: transform 0.18s, color 0.14s; line-height: 1;
}
.dir-page .rating-row.expanded .expand-chevron,
.dir-page .rating-row:hover .expand-chevron { color: var(--dir-row-chevron-active-color); }
.dir-page .rating-row.expanded .expand-chevron { transform: rotate(180deg); }

/* ── Expanded detail ──────────────────────────────────────── */
.dir-page .detail-row {
    display: none;
    background: var(--dir-detail-panel-bg);
    border-bottom: 1.5px solid var(--dir-detail-border-color);
    padding: 0.65rem 0.6rem 0.7rem 64px;
}
.dir-page .detail-row.open { display: block; }
.dir-page .detail-cols {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem 2.5rem; align-items: start;
}
.dir-page .det-lbl {
    font-family: var(--dir-detail-label-font); font-size: 0.42rem;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--dir-detail-label-color); display: block; margin-bottom: 0.12rem;
}
.dir-page .det-val {
    font-family: var(--dir-detail-value-font); font-size: 0.72rem; font-weight: 400;
    color: var(--dir-detail-value-color); line-height: 1.4; display: block;
}
.dir-page .det-block { }
.dir-page .det-actions {
    display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end;
}
.dir-page .det-link {
    font-family: var(--dir-detail-link-font); font-size: 0.48rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--dir-detail-link-color); text-decoration: none;
    border-bottom: 1px solid var(--dir-detail-link-color); padding-bottom: 1px; white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
}
.dir-page .det-link:hover { color: var(--dir-detail-link-hover-color); border-color: var(--dir-detail-link-hover-color); }

/* ── Score sparkline (bar chart per film) ─────────────────── */
.dir-page .score-bar-wrap {
    display: flex; align-items: flex-end; gap: 1px;
    height: 44px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--dir-sparkline-baseline-color);
    margin-bottom: 0.3rem;
}
.dir-page .score-bar-seg { flex-shrink: 0; cursor: default; }
.dir-page .score-bar-caption {
    font-family: var(--dir-sparkline-caption-font); font-size: 0.6rem;
    letter-spacing: 0.14em; text-transform: lowercase;
    color: var(--dir-sparkline-caption-color); margin-top: 0.18rem;
}
.dir-page .score-bar-seg.gt-aplus  { background: var(--dir-grade-aplus-bg); }
.dir-page .score-bar-seg.gt-a      { background: var(--dir-grade-a-bg); }
.dir-page .score-bar-seg.gt-aminus { background: var(--dir-grade-aminus-bg); }
.dir-page .score-bar-seg.gt-bplus  { background: var(--dir-grade-bplus-bg); }
.dir-page .score-bar-seg.gt-b      { background: var(--dir-grade-b-bg); }
.dir-page .score-bar-seg.gt-bminus { background: var(--dir-grade-bminus-bg); }
.dir-page .score-bar-seg.gt-cplus  { background: var(--dir-grade-cplus-bg); }
.dir-page .score-bar-seg.gt-c      { background: var(--dir-grade-c-bg); }
.dir-page .score-bar-seg.gt-cminus { background: var(--dir-grade-cminus-bg); }
.dir-page .score-bar-seg.gt-dplus  { background: var(--dir-grade-dplus-bg); }
.dir-page .score-bar-seg.gt-d      { background: var(--dir-grade-d-bg); }
.dir-page .score-bar-seg.gt-dminus { background: var(--dir-grade-dminus-bg); }
.dir-page .score-bar-seg.gt-f      { background: var(--dir-grade-f-bg); }

/* ── Stats grid inside detail panel ──────────────────────── */
.dir-page .det-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.52rem 1.6rem;
}
.dir-page .det-stat-pair { display: flex; flex-direction: column; }

/* ── Group headers ────────────────────────────────────────── */
.dir-page .year-group-hdr {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 1rem 0 0.35rem;
    border-bottom: 1.5px solid var(--dir-group-header-border-color);
    position: sticky; top: 0;
    background: var(--dir-group-header-bg);
    z-index: 4; margin-bottom: 0;
}
.dir-page .ygh-label {
    font-family: var(--dir-group-label-font); font-size: 0.88rem;
    letter-spacing: 0.1em; color: var(--dir-group-label-color); white-space: nowrap;
}
.dir-page .ygh-rule { flex: 1; border: none; border-top: 1px solid var(--dir-group-rule-color); }
.dir-page .ygh-stats {
    display: flex; gap: 1rem; align-items: center; flex-shrink: 0;
}
.dir-page .ygh-stat {
    font-family: var(--dir-group-stat-font); font-size: 0.46rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--dir-group-stat-label-color);
}
.dir-page .ygh-stat strong { font-weight: 700; color: var(--dir-group-stat-value-color); margin-right: 0.2rem; }
.dir-page .ygh-gradebar {
    display: flex; height: 8px; width: 80px; overflow: hidden;
    flex-shrink: 0; border: 1px solid var(--dir-group-gradebar-border-color);
}
.dir-page .ygh-gradebar-seg { height: 100%; }
.dir-page .seg-a { background: var(--dir-groupbar-a-bg); }
.dir-page .seg-b { background: var(--dir-groupbar-b-bg); }
.dir-page .seg-c { background: var(--dir-groupbar-c-bg); }
.dir-page .seg-d { background: var(--dir-groupbar-d-bg); }
.dir-page .seg-f { background: var(--dir-groupbar-f-bg); }

/* ── Footnote ─────────────────────────────────────────────── */
.dir-page .footnote-bar {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    padding: 0.45rem 0;
    border-top: 1px solid var(--dir-footnote-border-color); margin-top: 0;
}
.dir-page .fn-item {
    display: flex; align-items: center; gap: 0.3rem;
    font-family: var(--dir-footnote-font); font-size: 0.65rem;
    color: var(--dir-footnote-text-color); font-style: italic;
}
.dir-page .fn-item .fn-sym { color: var(--dir-footnote-symbol-color); font-style: normal; }

/* ── Pagination ───────────────────────────────────────────── */
.dir-page .pagination {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 2.5rem;
    border-top: 2px solid var(--dir-pagination-top-border-color); border-bottom: 1px solid var(--dir-pagination-bottom-border-color);
    padding: 0.48rem 0;
}
.dir-page .pag-info {
    font-family: var(--dir-pagination-info-font); font-style: italic;
    font-size: 0.72rem; color: var(--dir-pagination-info-color);
}
.dir-page .pag-nav { display: flex; }
.dir-page .pag-nav a,
.dir-page .pag-nav span {
    font-family: var(--dir-pagination-button-font); font-size: 0.54rem; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 0.26rem 0.65rem;
    border: 1px solid var(--dir-pagination-button-border-color); border-right: none;
    color: var(--dir-pagination-button-text-color); text-decoration: none; cursor: pointer; transition: all 0.12s;
}
.dir-page .pag-nav :last-child { border-right: 1px solid var(--dir-pagination-button-border-color); }
.dir-page .pag-nav a:hover { background: var(--dir-pagination-button-hover-bg); color: var(--dir-pagination-button-hover-text-color); border-color: var(--dir-pagination-button-hover-bg); }
.dir-page .pag-nav span.cur { background: var(--dir-pagination-current-bg); color: var(--dir-pagination-current-text-color); }

/* ── Responsive ───────────────────────────────────────────── */

/* <1100px — drop rewatches (7 tracks) */
@media (max-width: 1100px) {
    .dir-page { --col-layout: 28px 1fr 50px 68px 84px 52px 20px; }
    .dir-page .rc-rewatches  { display: none; }
    .dir-page .sh-rewatches  { display: none; }
}

/* <800px — also drop raw avg (6 tracks) */
@media (max-width: 800px) {
    .dir-page { --col-layout: 24px 1fr 46px 66px 82px 20px; }
    .dir-page .rc-avg  { display: none; }
    .dir-page .sh-avg  { display: none; }
    .dir-page .detail-row { padding-left: 1rem; }
    .dir-page .detail-cols { grid-template-columns: 1fr auto; }
}

@media (max-width: 640px) {
    .dir-page {
        --col-layout: 1fr 45px 55px 20px;
    }
    /* Hide columns on mobile to fit nicely */
    .dir-page .rc-num, .dir-page .sh-num,
    .dir-page .rc-sum, .dir-page .sh-sum,
    .dir-page .rc-avg, .dir-page .sh-avg,
    .dir-page .rc-rewatches, .dir-page .sh-rewatches {
        display: none !important;
    }

    /* Page heading mobile stacking */
    .dir-page .page-heading {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .dir-page .heading-rule {
        display: none;
    }
    .dir-page .heading-center h1 {
        font-size: 1.35rem;
    }

    /* Stats strip wrapped layout */
    .dir-page .stats-strip {
        flex-wrap: wrap;
    }
    .dir-page .stat-cell {
        flex-basis: 33.333%;
        border-right: 1px solid var(--dir-stats-cell-divider-color);
        border-bottom: 1px solid var(--dir-stats-cell-divider-color);
    }
    .dir-page .stat-cell:nth-child(3),
    .dir-page .stat-cell:nth-child(6) {
        border-right: none;
    }
    .dir-page .stat-cell:nth-child(4),
    .dir-page .stat-cell:nth-child(5),
    .dir-page .stat-cell:nth-child(6) {
        border-bottom: none;
    }

    /* Controls grid */
    .dir-page .controls {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem 0.8rem;
        padding: 0.8rem 0;
    }
    .dir-page .ctrl-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }
    .dir-page .ctrl-select {
        width: 100%;
        padding: 0.35rem 1.6rem 0.35rem 0.5rem;
        font-size: 0.62rem;
    }
    .dir-page .ctrl-label {
        font-size: 0.52rem;
    }
    .dir-page .ctrl-sep {
        display: none;
    }
    .dir-page .ctrl-search {
        grid-column: span 2;
        margin-left: 0;
        width: 100%;
        margin-top: 0.2rem;
    }
    .dir-page .ctrl-search input {
        width: 100%;
        padding: 0.35rem 0.5rem 0.35rem 1.8rem;
        font-size: 0.8rem;
    }
    .dir-page .ctrl-count {
        grid-column: span 2;
        text-align: right;
        font-size: 0.72rem;
        margin-top: -0.2rem;
    }

    /* Expanded detail column stacking */
    .dir-page .detail-cols {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .dir-page .detail-row {
        padding: 0.6rem 1rem;
    }
    .dir-page .det-actions {
        align-items: flex-start;
        margin-top: 0.4rem;
    }
    .dir-page .score-bar-wrap {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Group headers */
    .dir-page .year-block {
        margin-bottom: 0.5rem;
    }
    .dir-page .year-group-hdr {
        padding: 0.8rem 0 0.35rem;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .dir-page .ygh-label {
        font-size: 0.82rem;
    }
    .dir-page .ygh-rule {
        display: none;
    }
    .dir-page .ygh-stats {
        margin-left: auto;
        gap: 0.6rem;
    }
    .dir-page .ygh-stat {
        font-size: 0.42rem;
    }
    .dir-page .ygh-gradebar {
        width: 60px;
        height: 7px;
    }

    /* Footnote */
    .dir-page .footnote-bar {
        justify-content: center;
        gap: 0.8rem;
        text-align: center;
        padding: 0.6rem 0;
    }
    .dir-page .fn-item {
        font-size: 0.6rem;
    }

    /* Pagination */
    .dir-page .pagination {
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
        padding: 0.6rem 0;
    }
    .dir-page .pag-info {
        font-size: 0.68rem;
    }
    .dir-page .pag-nav a,
    .dir-page .pag-nav span {
        padding: 0.3rem 0.5rem;
        font-size: 0.52rem;
    }
}

@keyframes dirFadeUp {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dir-page .year-block { animation: dirFadeUp 0.28s ease both; }
.dir-page .year-block:nth-child(1) { animation-delay: 0.03s; }
.dir-page .year-block:nth-child(2) { animation-delay: 0.07s; }
.dir-page .year-block:nth-child(3) { animation-delay: 0.11s; }
.dir-page .year-block:nth-child(4) { animation-delay: 0.15s; }