/**
 * Series page — premium, semantic, works with no JS.
 * Enqueued only on /series/ routes (see RCF_Series_Router::enqueue()).
 */

/* The "Skip to main content" link that templates/wrapper.php prints.
 *
 * The wrapper is shared by the forum pages and the series pages, but the two
 * load different stylesheets: the forum enqueues forum-styles.css (which owns
 * .rcf-skip-link) only when the `rcf_page` query var is set, and series routes
 * deliberately carry their own vars instead so the pages stay page-cacheable.
 * The result was an anchor with NO rules at all on /series/ - `position: static`,
 * `display: inline`, fully visible - sitting in the flow above the layout, over
 * the site's background image. It must live here as well as in forum-styles.css,
 * NOT be pulled in by enqueuing that 17k-line stylesheet on a public SEO page.
 *
 * Keep in step with the copy in forum-styles.css (section 8, Accessibility). */
.rcf-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    /* The literal values of --rcf-primary and --rcf-radius. Those custom
       properties are declared in forum-styles.css, which is the stylesheet
       this page does not load - hence the copy. */
    background: #c62828;
    color: #fff;
    padding: 12px 24px;
    z-index: 10000;
    border-radius: 0 0 4px 4px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.3s ease;
}
.rcf-skip-link:focus {
    top: 0;
}

.rcf-series-page {
    --rcf-series-bg: #ffffff;
    --rcf-series-surface: #ffffff;
    --rcf-series-surface-alt: #f3f4f6;
    --rcf-series-border: #e3e6ea;
    --rcf-series-text: #111827;
    --rcf-series-text-dim: #6b7280;
    --rcf-series-accent: #1868c9;
    /* Channels, not a hex, so the shelf's accent plane can take an alpha. */
    --rcf-series-accent-rgb: 24 104 201;
    --rcf-series-accent-contrast: #ffffff;
    --rcf-series-radius: 10px;

    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 16px 64px;
    color: var(--rcf-series-text);
}

.rcf-series-page a {
    color: var(--rcf-series-accent);
    text-decoration: none;
}
.rcf-series-page a:hover {
    text-decoration: underline;
}

/* ...but only PROSE links. A card, a related tile and a timeline entry are
   boxes, not sentences: they already signal hover with a border, a lift or a
   colour shift, and an underline drawn across their title, year and count
   reads as a rendering fault.

   These overrides have to be written at THIS specificity and they have to
   live here, next to the rule they are correcting. `.rcf-series-page a:hover`
   is (0,2,1); a `text-decoration: none` written as `.rcf-series-card-link:hover`
   is only (0,2,0), so it loses wherever it sits in the file - which is exactly
   why every card on the index was drawing an accent-coloured underline under
   its own title on hover. Qualifying with `.rcf-series-page` (and the element
   for the card/timeline links) takes them to (0,3,1), which wins. */
.rcf-series-page a.rcf-series-card-link:hover,
.rcf-series-page a.rcf-series-card-link:focus-visible,
.rcf-series-page a.rcf-series-timeline-link:hover,
.rcf-series-page a.rcf-series-timeline-link:focus-visible,
.rcf-series-page .rcf-series-related-card a:hover,
.rcf-series-page .rcf-series-related-card a:focus-visible {
    text-decoration: none;
}

/* Uniform, visible focus ring on every interactive element. */
.rcf-series-page a:focus-visible,
.rcf-series-page input:focus-visible,
.rcf-series-page button:focus-visible {
    outline: 3px solid var(--rcf-series-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Breadcrumb --- */
.rcf-series-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--rcf-series-text-dim);
    margin-bottom: 20px;
}
.rcf-series-breadcrumb-sep {
    color: var(--rcf-series-text-dim);
}
.rcf-series-breadcrumb-current {
    color: var(--rcf-series-text);
}

/* --- Header --- */
.rcf-series-header {
    margin-bottom: 24px;
}
.rcf-series-hero {
    border-radius: var(--rcf-series-radius);
    overflow: hidden;
    margin-bottom: 20px;
    max-height: 360px;
}
.rcf-series-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rcf-series-title {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.rcf-series-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}
.rcf-series-fact {
    background: var(--rcf-series-surface);
    border: 1px solid var(--rcf-series-border);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 96px;
}
.rcf-series-fact dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rcf-series-text-dim);
}
.rcf-series-fact dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.rcf-series-fact-more {
    font-weight: 400;
    color: var(--rcf-series-text-dim);
}

/* --- Intro --- */
.rcf-series-intro {
    /* Full width, matching the index intro. 74ch wrapped it at about half the
       content column and left the right-hand side of the page empty. */
    max-width: none;
    line-height: 1.7;
    color: var(--rcf-series-text-dim);
    margin-bottom: 28px;
}
.rcf-series-intro p:first-child {
    margin-top: 0;
}

/* --- Order switcher --- */
.rcf-series-order-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--rcf-series-border);
    border-radius: 999px;
    padding: 4px;
    margin: 0 0 28px;
    width: max-content;
}
.rcf-series-order-switcher legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.rcf-series-order-option {
    position: relative;
    cursor: pointer;
}
.rcf-series-order-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.rcf-series-order-option span {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rcf-series-text-dim);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rcf-series-order-option input:checked + span {
    background: var(--rcf-series-accent);
    color: var(--rcf-series-accent-contrast);
}
.rcf-series-order-option input:focus-visible + span {
    outline: 3px solid var(--rcf-series-accent);
    outline-offset: 2px;
}

/* --- Member sections --- */
.rcf-series-section {
    margin-bottom: 32px;
}
.rcf-series-section h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rcf-series-border);
}

.rcf-series-members-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* 200px so blog_thumb renders at about its natural width rather than
       being upscaled. */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.rcf-series-card {
    display: flex;
    /* Default document order already carries the server-computed release
       order; JS only ever overrides this with an explicit integer. */
    order: 0;
}
.rcf-series-card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--rcf-series-surface);
    border: 1px solid var(--rcf-series-border);
    /* Square, like the home-page cards. The index cards and the featured hero
       set their own 16px radius through more specific rules. */
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.rcf-series-card-link:hover,
.rcf-series-card-link:focus-visible {
    border-color: var(--rcf-series-accent);
    transform: translateY(-2px);
    text-decoration: none;
}
/* 200/315 is the exact ratio of the theme's `blog_thumb` size, which is what
   the home-page grid renders (uploads/alm_templates/default.php calls
   the_post_thumbnail('blog_thumb')). Matching the ratio as well as the size
   means the hard-cropped file lands in the box with no second crop. */
.rcf-series-card-thumb {
    aspect-ratio: 200 / 315;
    background: var(--rcf-series-surface-alt);
    overflow: hidden;
}
.rcf-series-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rcf-series-card-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}
.rcf-series-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px 12px;
}
.rcf-series-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rcf-series-text);
    line-height: 1.3;
}
.rcf-series-card-meta {
    font-size: 12px;
    color: var(--rcf-series-text-dim);
}

/* --- Pagination --- */
.rcf-series-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 32px;
}
.rcf-series-pagination a,
.rcf-series-page-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--rcf-series-border);
    font-size: 13px;
    font-weight: 600;
}
.rcf-series-page-current {
    background: var(--rcf-series-accent);
    color: var(--rcf-series-accent-contrast);
    border-color: var(--rcf-series-accent);
}
/* The elided run. Borderless so it reads as a gap between controls rather
   than as a disabled page you could click. */
.rcf-series-page-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 34px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.55;
    user-select: none;
}
/* Prev/next. The glyphs are single characters, so they need the same tap
   target as a number rather than the width of one chevron. */
.rcf-series-pagination a.rcf-series-page-nav {
    padding: 0 8px;
    font-size: 16px;
    line-height: 1;
}

/* --- Timeline --- */
.rcf-series-timeline-section {
    margin-bottom: 32px;
}
.rcf-series-timeline-section h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 16px;
}
/* Scoped past the theme, and applied to the ITEMS as well as the lists. The
   theme sets list-style on li, so resetting only the ol/ul left an ordinal
   above every year ("4.") and a bullet in front of every title. */
.rcf-series-page ol.rcf-series-timeline,
.rcf-series-page ol.rcf-series-timeline > li,
.rcf-series-page ul.rcf-series-timeline-entries,
.rcf-series-page ul.rcf-series-timeline-entries > li {
    list-style: none;
    list-style-type: none;
    list-style-image: none;
}
.rcf-series-page ol.rcf-series-timeline > li::marker,
.rcf-series-page ul.rcf-series-timeline-entries > li::marker {
    content: '';
}
.rcf-series-timeline {
    margin: 0;
    padding: 0 0 0 26px;
    /* The spine. Drawn on the list, not per item, so it is continuous through
       the gap markers. */
    border-left: 2px solid var(--rcf-series-border);
}
.rcf-series-timeline-group {
    position: relative;
    margin: 0;
    padding: 0 0 26px;
}
.rcf-series-timeline-group:last-child {
    padding-bottom: 4px;
}
/* The year sits ON the spine as a pill, so the eye reads years first and
   releases second - which is what a chronology is. */
.rcf-series-timeline-year {
    display: inline-block;
    position: relative;
    left: -38px;
    margin-bottom: -12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--rcf-series-accent);
    color: var(--rcf-series-accent-contrast);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
/* A break in the run. Costs nothing - the years were already here - and for a
   franchise a long silence is genuinely part of the story. */
.rcf-series-timeline-gap {
    position: relative;
    left: -14px;
    margin: 0 0 10px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--rcf-series-text-dim);
}
.rcf-series-timeline-gap::before {
    content: '';
    position: absolute;
    left: -13px;
    top: 50%;
    width: 10px;
    border-top: 1px dashed var(--rcf-series-border);
}
.rcf-series-timeline-entries {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rcf-series-timeline-entry {
    margin: 0;
    padding-left: 2px;
}
.rcf-series-timeline-link {
    display: inline-block;
}
.rcf-series-timeline-link:hover .rcf-series-timeline-title,
.rcf-series-timeline-link:focus-visible .rcf-series-timeline-title {
    color: var(--rcf-series-accent);
}
.rcf-series-timeline-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rcf-series-text);
    transition: color 0.15s ease;
}
/* The narrative line: what this release did, and what it set up. Measure is
   capped because this is prose, unlike the facts strip above it. */
.rcf-series-timeline-note-line {
    margin: 3px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--rcf-series-text-dim);
}
.rcf-series-timeline-note {
    margin: 10px 0 0;
    font-size: 12px;
    font-style: italic;
    color: var(--rcf-series-text-dim);
}
/* --- Related series --- */
.rcf-series-related h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rcf-series-border);
}
.rcf-series-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.rcf-series-related-card a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: var(--rcf-series-radius);
    border: 1px solid var(--rcf-series-border);
    background: var(--rcf-series-surface);
}
.rcf-series-related-card img {
    display: block;
    width: 100%;
    border-radius: 6px;
    object-fit: cover;
}
.rcf-series-related-name {
    font-weight: 700;
    font-size: 13px;
}
.rcf-series-related-count {
    font-size: 11.5px;
    color: var(--rcf-series-text-dim);
}

/* --- Index: header --- */
.rcf-series-index-header {
    margin-bottom: 20px;
}
/* --- The optional index cross-link -----------------------------------------
   Only applied when the link is actually present, so a header without one
   keeps its original plain block layout rather than becoming a one-column
   grid that behaves subtly differently.

   The link sits in a second column spanning the eyebrow and heading rows and
   is centred against them, which is what puts it OPPOSITE the heading rather
   than above or below it. The intro paragraph spans both columns underneath,
   so its full-width wrap is unchanged. */
.rcf-series-index-header--linked {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    align-items: start;
}
.rcf-series-index-header--linked .rcf-series-eyebrow   { grid-column: 1; grid-row: 1; }
.rcf-series-index-header--linked .rcf-series-index-h1  { grid-column: 1; grid-row: 2; }
.rcf-series-index-header--linked .rcf-series-index-link {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
}
.rcf-series-index-header--linked .rcf-series-index-intro {
    grid-column: 1 / -1;
    grid-row: 3;
}
/* A text link, deliberately not a button: it is a secondary route out of this
   page, and a filled button here would compete with the featured card below. */
.rcf-series-index-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--rcf-series-accent);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color 120ms ease, opacity 120ms ease;
}
.rcf-series-index-link:hover,
.rcf-series-index-link:focus-visible {
    border-bottom-color: currentColor;
    text-decoration: none;
}
.rcf-series-index-link-arrow {
    font-size: 17px;
    line-height: 1;
}
.rcf-series-index-intro {
    /* Full width. 72ch wrapped it at roughly half the container, which read
       as a column of text stranded on the left rather than a page intro. */
    max-width: none;
    margin: 10px 0 14px;
    color: var(--rcf-series-text-dim);
    font-size: 15px;
    line-height: 1.6;
}
.rcf-series-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rcf-series-accent);
}
.rcf-series-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rcf-series-accent);
    flex: none;
}
.rcf-series-index-h1 {
    /* Big and tight, the way a section front page reads - this is the only
       place the series layer gets to announce itself. */
    font-size: clamp(30px, 5.2vw, 54px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0;
    text-transform: uppercase;
}
.rcf-series-h1-lead {
    color: var(--rcf-series-text);
}
.rcf-series-h1-accent {
    color: var(--rcf-series-accent);
}

/* One band: stats on the left, sort and filter on the right, sharing a single
   rule. Previously these were two stacked blocks - a header, then a bordered
   control panel - which pushed the grid a long way down the page. */
.rcf-series-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 24px;
    padding-top: 16px;
    border-top: 1px solid var(--rcf-series-border);
}

/* Stat bar: number over label, divided by hairlines. */
.rcf-series-statbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
}
.rcf-series-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 22px;
    border-left: 1px solid var(--rcf-series-border);
}
.rcf-series-stat:first-child {
    padding-left: 0;
    border-left: 0;
}
.rcf-series-stat-n {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--rcf-series-text);
    font-variant-numeric: tabular-nums;
}
.rcf-series-stat-l {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rcf-series-text-dim);
}
.rcf-series-index-empty {
    padding: 32px 0;
    color: var(--rcf-series-text-dim);
}

/* --- Index: controls --- */
.rcf-series-index-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 20px;
}
.rcf-series-jumpbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.rcf-series-jumpbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rcf-series-text-dim);
}
.rcf-series-jumpbar a:hover,
.rcf-series-jumpbar a:focus-visible {
    color: var(--rcf-series-accent-contrast);
    background: var(--rcf-series-accent);
    text-decoration: none;
}
.rcf-series-index-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.rcf-series-pillbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rcf-series-pill {
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--rcf-series-border);
    background: var(--rcf-series-surface-alt);
    color: var(--rcf-series-text-dim);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rcf-series-pill:hover {
    color: var(--rcf-series-text);
    border-color: var(--rcf-series-accent);
}
.rcf-series-pill.is-active {
    background: var(--rcf-series-accent);
    border-color: var(--rcf-series-accent);
    color: var(--rcf-series-accent-contrast);
}
.rcf-series-index-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rcf-series-text-dim);
}
.rcf-series-index-filter select {
    background: var(--rcf-series-surface-alt);
    color: var(--rcf-series-text);
    border: 1px solid var(--rcf-series-border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 13px;
}
.rcf-series-index-scope-note {
    margin: 0;
    font-size: 12px;
    color: var(--rcf-series-text-dim);
    font-style: italic;
}

/* --- Index: card grid --- */
.rcf-series-index-grid {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    /* Fewer, larger cards: at 200px the shelf was too small for the covers to
       read, which is the whole point of the card. */
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}
.rcf-series-index-card .rcf-series-card-link {
    height: 100%;
}
/* The shelf. Deliberately short and wide: a 2:3 box fanned five across can
   only be ~30% of the shelf's width before the outer boxes clip the edge, and
   a box that wide is only ~45% as tall as a 16/10 shelf - which strands the
   art in an empty rectangle. 16/9 lets the boxes fill it. */
.rcf-series-shelf {
    position: relative;
    /* 3/2 rather than 16/9. A 2:3 cover at 30% width fills ~80% of a 16/9
       shelf, leaving about 6px of headroom - so a cover that lifts AND scales
       for the wave gets its top sliced off by the overflow below. The taller
       box buys that headroom, and makes the art bigger while it is at it. */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px 10px 0;
    background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
}
/* The plane the boxes stand on - a hairline of brand colour and a short wash
   above it. Without it the covers float in an empty rectangle. */
.rcf-series-shelf::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 15%;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(var(--rcf-series-accent-rgb) / 0.14) 0%, transparent 100%);
    border-top: 1px solid rgb(var(--rcf-series-accent-rgb) / 0.30);
}
.rcf-series-boxes {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    /* Has to clear the FAN, not just the shelf edge. Each cover rotates about
       its bottom centre, so an outer one at ~10.5deg swings its lower corner
       (w/2)*sin(10.5deg) = 3.2% of the row width BELOW the baseline. At 2%
       the shelf's overflow cut those two corners off. 4.5% clears the dip
       with ~4px to spare on the narrowest card. */
    padding-bottom: 4.5%;
}
/* Boxes are sized as a % of the shelf so they scale with the card - an
   absolute max-width caps them on wide cards and strands them. */
.rcf-series-box {
    position: relative;
    flex: none;
    /* 34%. Sized against BOTH edges at the narrowest card the grid can
       produce (290px): the crest at the top (6.5px of slack) and the fan's
       rotation dip at the bottom (4.0px). 36% left under a pixel at each,
       which is what clipped the outer covers' corners. Still 28% more cover
       area than the 30% this started at. */
    width: 34%;
    aspect-ratio: 2 / 3;
    z-index: var(--z, 1);
    transform-origin: bottom center;
    transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0)) scale(var(--sc, 1));
    /* Its own perspective, so the page inside swings in real depth. Putting it
       here rather than on the row avoids needing a preserve-3d chain through
       the outer box's own 2D transform. */
    perspective: 900px;
    /* Short and springy, with NO delay. The crest tracks the cursor, so any
       stagger would read as lag rather than choreography - the overshoot is
       what still gives it the pop. */
    transition: transform 0.26s cubic-bezier(0.34, 1.38, 0.64, 1);
}

/* The page. Carries the chrome and the clipping the outer box gave up, and
   swings on its LEFT edge - the spine - so hovering riffles the stack open
   like the pages of a book rather than flipping it as one slab. */
.rcf-series-box-inner {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    background: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.30), 0 12px 26px -10px rgba(0, 0, 0, 0.35);
    transform-origin: left center;
    transform: rotateY(0deg);
    backface-visibility: hidden;
    transition:
        transform 0.26s cubic-bezier(0.34, 1.38, 0.64, 1),
        box-shadow 0.26s ease;
}
/* Five still fit across the shelf: 0.34 + 4 x (0.34 - 0.20) = 0.90 of the row
   width, and the looser overlap reveals more of each cover than before. */
.rcf-series-box:not(:first-child) {
    margin-left: -20%;
}
.rcf-series-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Fewer covers means a tighter cluster, not smaller art - the width is held
   at 36% for every count so the shelf's vertical fit is identical in all of
   them, and only the overlap changes. */
.rcf-series-shelf.is-quad .rcf-series-box:not(:first-child) { margin-left: -16%; }
.rcf-series-shelf.is-trio .rcf-series-box:not(:first-child) { margin-left: -12%; }
.rcf-series-shelf.is-duo  .rcf-series-box:not(:first-child) { margin-left: -8%; }

/* HOVER - the shelf straightens up. Tilts go to zero, bottoms line up, every
   box returns to full size and the row spreads just enough to read the covers.
   The usual move is to explode the fan outward; this is the opposite, and it
   says what the card is actually selling: this series is complete, and in
   order. */
.rcf-series-card-link:hover .rcf-series-box,
.rcf-series-card-link:focus-visible .rcf-series-box {
    z-index: var(--zh, 1);
    /* The row straightens and spreads, then --w lifts and enlarges whichever
       cover the cursor is nearest. At --w:0 this is exactly the tidy row; at
       --w:1 the cover is 14% larger and 20px proud of its neighbours. */
    transform:
        translateX(var(--tx-h, 0))
        translateY(calc(-4px - var(--w, 0) * 8px))
        scale(calc(1 + var(--w, 0) * 0.04));
}
.rcf-series-card-link:hover .rcf-series-box-inner,
.rcf-series-card-link:focus-visible .rcf-series-box-inner {
    /* The cover under the cursor turns furthest toward the viewer, like a page
       being lifted as your thumb passes over it. */
    transform: rotateY(calc(var(--w, 0) * -20deg));
    box-shadow:
        0 calc(4px + var(--w, 0) * 8px) calc(10px + var(--w, 0) * 14px) -2px rgba(0, 0, 0, 0.34),
        0 calc(12px + var(--w, 0) * 14px) calc(26px + var(--w, 0) * 18px) -10px rgba(0, 0, 0, 0.40);
}

/* Card shell: a white panel, the shelf on top, the label underneath. */
.rcf-series-index-card .rcf-series-card-link {
    background: var(--rcf-series-surface);
    border: 1px solid var(--rcf-series-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.rcf-series-index-card .rcf-series-card-link:hover,
.rcf-series-index-card .rcf-series-card-link:focus-visible {
    transform: translateY(-4px);
    border-color: var(--rcf-series-accent);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.25);
}
.rcf-series-index-card .rcf-series-card-body {
    gap: 8px;
    padding: 14px 16px 16px;
}
.rcf-series-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.rcf-series-index-card .rcf-series-card-title {
    font-size: 15px;
}
.rcf-series-card-count {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}
.rcf-series-card-count-n {
    font-size: 21px;
    font-weight: 800;
    color: var(--rcf-series-text);
    font-variant-numeric: tabular-nums;
}
.rcf-series-card-count-l {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rcf-series-text-dim);
}
.rcf-series-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* The year span rides in the pill row as plain dim text, not a pill - it is a
   fact about the series, not a filterable attribute like the platform. */
.rcf-series-card-pills .rcf-series-card-meta {
    align-self: center;
    font-size: 11px;
}
.rcf-series-card-pill {
    border: 1px solid var(--rcf-series-border);
    background: var(--rcf-series-surface-alt);
    color: var(--rcf-series-text-dim);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* --- Featured series: the hero of the index --- */
.rcf-series-featured {
    /* Pinned first. JS sorting deliberately skips this card, so nothing
       overrides the order and the hero cannot be shuffled into the middle. */
    order: -1;
}
/* Only span once the grid genuinely has two columns to span. Below that the
   explicit grid is one column wide and a span-2 item would spill into an
   implicit second column - i.e. off the side of the page. */
@media (min-width: 720px) {
    .rcf-series-featured {
        grid-column: span 2;
        grid-row: span 2;
    }
}
.rcf-series-featured .rcf-series-card-link {
    position: relative;
    height: 100%;
    min-height: 360px;
    justify-content: flex-end;
    border-radius: 16px;
    overflow: hidden;
}
.rcf-series-featured-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.rcf-series-featured-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Scaled past the edges so the blur has material to smear and does not
       feather into transparency at the borders. */
    transform: scale(1.2);
    filter: blur(26px) saturate(1.35) brightness(0.62);
}
.rcf-series-featured-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.60) 55%,
        rgba(0, 0, 0, 0.86) 100%);
}

/* An image uploaded specifically for this card. Shown as it is: no blur, no
   dimming, no upscale. The scrim only covers the lower half, where the title
   and summary sit - above that the artwork is untouched, which is the whole
   reason for having a separate field. */
.rcf-series-featured-bg--sharp img {
    transform: none;
    filter: none;
}
.rcf-series-featured-bg--sharp::after {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 38%,
        rgba(0, 0, 0, 0.55) 66%,
        rgba(0, 0, 0, 0.88) 100%);
}
.rcf-series-featured-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    /* The backdrop is always darkened, so this text is white in every theme. */
    color: #fff;
}
.rcf-series-featured-title {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.rcf-series-featured-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: none;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.87);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.rcf-series-featured-meta {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* Wraps rather than overflows: below 720px the card stops spanning and its
   content box is only ~240px, which will not hold five covers on one line. */
.rcf-series-featured-covers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
}
/* Sized as a share of the card so the covers grow with it. At 42px they were
   the SMALLEST game art on the page, on the largest card - next to regular
   cards showing a full fan. Percentage-based, with a floor for the wrapped
   narrow case and a ceiling so they do not dominate a very wide card. */
.rcf-series-featured-cover {
    display: block;
    position: relative;
    width: clamp(54px, 12%, 104px);
    flex: none;
    aspect-ratio: 2 / 3;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    /* Same crest as the shelf, driven by the same --w. No :hover gate is
       needed - --w is zero unless the cursor is actually over this strip. */
    transform-origin: bottom center;
    transform: translateY(calc(var(--w, 0) * -10px)) scale(calc(1 + var(--w, 0) * 0.09));
    transition: transform 0.26s cubic-bezier(0.34, 1.38, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
    .rcf-series-featured-cover {
        transform: none;
        transition: none;
    }
}
.rcf-series-featured-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rcf-series-featured-more {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}
.rcf-series-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--rcf-series-accent);
    color: var(--rcf-series-accent-contrast);
    font-size: 13.5px;
    font-weight: 700;
    transition: transform 0.18s ease;
}
.rcf-series-featured .rcf-series-card-link:hover .rcf-series-featured-cta {
    transform: translateX(3px);
}

.rcf-series-index-card[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    /* Still straighten - it is the affordance, not decoration - but land on it
       immediately, skip the staggered riffle, and do not swing the pages: a
       springy 3D rotation is exactly what this setting asks us not to do. */
    .rcf-series-box,
    .rcf-series-box-inner {
        transition: none;
    }
    .rcf-series-card-link:hover .rcf-series-box,
    .rcf-series-card-link:focus-visible .rcf-series-box {
        transition: none;
        transform: translateX(var(--tx-h, 0)) scale(1);
    }
    .rcf-series-card-link:hover .rcf-series-box-inner,
    .rcf-series-card-link:focus-visible .rcf-series-box-inner {
        transform: none;
    }
}

/* --- Light theme --- */
/* No prefers-color-scheme override: these surfaces are deliberately light in
   every case. Both sites are light-only, so following the OS into dark mode
   put dark cards on a white page - which is the thing that looked wrong. */

/* --- Motion --- */
@media (prefers-reduced-motion: reduce) {
    .rcf-series-card-link {
        transition: none;
    }
    .rcf-series-card-link:hover,
    .rcf-series-card-link:focus-visible {
        transform: none;
    }
}

@media (max-width: 600px) {
    /* Below this the two-column header stops paying for itself - the heading
       is large and the link would be squeezed to a couple of characters per
       line. Fall back to the normal stacked flow, link under the heading. */
    .rcf-series-index-header--linked {
        display: block;
    }
    .rcf-series-index-header--linked .rcf-series-index-link {
        margin-top: 4px;
    }
}

@media (max-width: 480px) {
    .rcf-series-members-list,
    .rcf-series-related-list,
    .rcf-series-index-grid {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    }
    /* The 128px tracks above give a phone TWO or three columns, and the
       featured card has no span below 720px - so the hero of the index was
       being rendered in a single ~170px column: title wrapped to four lines,
       summary clipped mid-word, and the fanned shelf collapsed into a vertical
       stack of covers. `1 / -1` rather than `span 2`, so it fills whatever
       number of tracks auto-fill produced instead of guessing at two. */
    .rcf-series-featured {
        grid-column: 1 / -1;
    }
}

/* Long-form article, below the game list and timeline. Matches the section
   heading treatment above it; the prose column is capped because a 1400px-wide
   line of body text is unreadable regardless of how wide the page is. */
.rcf-series-body {
    margin-bottom: 32px;
}
.rcf-series-body h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rcf-series-border);
}
.rcf-series-body-prose {
    /* Full width, for the same reason .rcf-series-index-intro is: 72ch lands
       at roughly HALF this 1180px container, and the h2 above already draws
       its border across the whole width - so the capped text read as a column
       stranded on the left with the section rule hanging over empty space. */
    max-width: none;
    font-size: 15.5px;
    line-height: 1.75;
}
.rcf-series-body-prose p {
    margin: 0 0 1em;
}
.rcf-series-body-prose p:last-child {
    margin-bottom: 0;
}