/* Archive pages (/archives/...). Everything is scoped under .archive-pages so nothing leaks into other library pages. */
.archive-pages {
    --ap-accent: var(--accent, #cf1417);
    --ap-accent-strong: #8f0e10;
    --ap-ink: #111;
    --ap-text: #222;
    --ap-body: #3a352e;
    --ap-muted: #5b564e;
    --ap-faint: #8a857c;
    --ap-rule: #e2ded6;
    --ap-rule-strong: #2a2a2a;
    --ap-border: #cfcac1;
    --ap-tint: #f6f5f1;
    --ap-paper: #fff;
    --ap-highlight: #fff2a8;
    --ap-decade-on: #4fc3dd;
    --ap-year-on: #0092b8;
    --ap-serif: "Inria Serif", Georgia, "Times New Roman", serif;
    --ap-sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ap-shell: 1200px;
    --ap-gutter: clamp(16px, 4vw, 40px);
    color: var(--ap-text);
    font-family: var(--ap-sans);
    background: var(--ap-paper);
    padding-bottom: 48px;
}

.archive-pages *,
.archive-pages *::before,
.archive-pages *::after {
    box-sizing: border-box;
}

.archive-pages a {
    color: var(--ap-accent);
}

.archive-pages a:hover {
    color: var(--ap-accent-strong);
}

.archive-pages :focus-visible {
    outline: 2px solid var(--ap-accent);
    outline-offset: 2px;
}

.archive-pages .ap-shell {
    max-width: var(--ap-shell);
    margin: 0 auto;
    padding: 0 var(--ap-gutter);
}

/* Decade and year bars */
.archive-pages .ap-decades {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 4px;
    padding: 2px var(--ap-gutter);
    background: #111;
}

/* Spacing lives on the links so the space around each label is clickable; same visual rhythm as before. */
.archive-pages .ap-decades a,
.archive-pages .ap-years a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 10px 9px;
}

.archive-pages .ap-decades a {
    font: 500 0.875rem/1.2 var(--ap-sans);
    color: #fff;
    text-decoration: none;
}

.archive-pages .ap-decades a:hover,
.archive-pages .ap-decades a.on {
    color: var(--ap-decade-on);
}

.archive-pages .ap-years {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 4px;
    padding: 2px 0;
    border-bottom: 1.5px solid var(--ap-rule);
}

.archive-pages .ap-years a {
    font: 500 0.9375rem/1.2 var(--ap-sans);
    color: var(--ap-body);
    text-decoration: none;
}

.archive-pages .ap-years a:hover,
.archive-pages .ap-years a.on {
    color: var(--ap-year-on);
}

/* Breadcrumb */
.archive-pages .ap-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 14px 0;
    font: 500 0.75rem/1.3 var(--ap-sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ap-faint);
}

.archive-pages .ap-crumbs li + li::before {
    content: "\203A";
    margin: 0 6px 0 2px;
    font-size: 1.125rem;
    line-height: 0.75;
    position: relative;
    top: 1px;
    color: var(--ap-muted);
}

.archive-pages .ap-crumbs a {
    color: var(--ap-body);
    text-decoration: none;
}

.archive-pages .ap-crumbs a:hover {
    text-decoration: underline;
}

.archive-pages .ap-crumbs [aria-current] {
    color: var(--ap-ink);
}

/* Type */
.archive-pages .ap-eye {
    font: 600 0.75rem/1 var(--ap-sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ap-accent);
    margin-bottom: 10px;
}

.archive-pages .ap-display {
    font: 400 clamp(2rem, 4vw, 2.875rem)/1.05 var(--ap-serif);
    color: var(--ap-ink);
    margin: 0 0 14px;
}

.archive-pages .ap-issue-copy .ap-display {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    line-height: 1.1;
}

.archive-pages .ap-lede {
    font: 400 0.9375rem/1.55 var(--ap-sans);
    color: var(--ap-muted);
    max-width: 60ch;
    margin: 0 0 18px;
}

.archive-pages .ap-lede--wide {
    max-width: 75ch;
}

.archive-pages .ap-dek {
    font: 400 0.875rem/1.5 var(--ap-sans);
    color: var(--ap-muted);
    margin: 0;
}

.archive-pages .ap-cap {
    font: 400 0.875rem/1.4 var(--ap-sans);
    color: var(--ap-body);
}

.archive-pages .ap-tiny {
    font: 500 0.75rem/1.3 var(--ap-sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ap-faint);
}

.archive-pages .ap-empty {
    padding: 32px 0;
    color: var(--ap-muted);
}

/* Hero */
.archive-pages .ap-hero {
    padding: 32px 0 40px;
    margin-bottom: 8px;
}

.archive-pages .ap-hero--tinted {
    background: var(--ap-tint);
    border-top: 1.5px solid var(--ap-rule);
    border-bottom: 1.5px solid var(--ap-rule);
}

.archive-pages .ap-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.archive-pages .ap-hero-media {
    position: relative;
    min-height: 260px;
}

.archive-pages .ap-hero-media img {
    display: block;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--ap-rule);
    background: var(--ap-paper);
}

.archive-pages .ap-hero-media--image img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    box-shadow: none;
}

.archive-pages .ap-hero-media--fan {
    container-type: inline-size;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
}

/* Covers are sized from the column width so the fan never overflows into the hero copy;
   each cover after the first shows --ap-fan-step of its width, and 64px leaves room for the rotated corners. */
.archive-pages .ap-hero-media--fan img {
    --ap-fan-step: 0.6;
    --ap-fan-cover: min(170px, calc((100cqi - 64px) / (1 + (var(--ap-count) - 1) * var(--ap-fan-step))));
    width: var(--ap-fan-cover);
    aspect-ratio: auto 3 / 4;
    object-fit: contain;
    margin-left: calc(var(--ap-fan-cover) * (var(--ap-fan-step) - 1));
    transform: rotate(calc((var(--ap-i) - (var(--ap-count) - 1) / 2) * 5deg));
    transform-origin: bottom center;
}

.archive-pages .ap-hero-media--fan img:first-child {
    margin-left: 0;
}

.archive-pages .ap-hero-media--stack {
    display: flex;
    min-height: 0;
    aspect-ratio: 4 / 3;
    /* Bottom-aligned so covers of different proportions share a baseline; the padding keeps the group near center. */
    align-items: flex-end;
    padding-bottom: 15%;
    justify-content: center;
    background: var(--ap-tint);
    overflow: hidden;
}

.archive-pages .ap-hero-media--stack img {
    width: 34%;
    aspect-ratio: auto 3 / 4;
    object-fit: contain;
    margin-left: -12%;
}

.archive-pages .ap-hero-media--stack img:first-child {
    margin-left: 0;
}

.archive-pages .ap-stats,
.archive-pages .ap-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 8px 0 0;
}

.archive-pages .ap-stats dt,
.archive-pages .ap-meta dt {
    font: 500 0.75rem/1.3 var(--ap-sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ap-faint);
}

.archive-pages .ap-stats dd {
    font: 400 1.4375rem/1.2 var(--ap-serif);
    color: var(--ap-ink);
    margin: 2px 0 0;
}

/*
 * ArchiveRollingNumber: each digit is a clipped 0–9 strip (drawn by ::before so the DOM text stays clean)
 * shifted to --ap-d; DecadePageComponent.razor.js rolls it. The window is taller than the line so glyphs
 * aren't clipped at tight line-heights, and the negative margins keep the line box unchanged.
 */
.archive-pages .ap-roll-word {
    white-space: nowrap;
}

.archive-pages .ap-roll-digit {
    display: inline-block;
    vertical-align: top;
    height: 1.6em;
    margin-block: -0.2em;
    margin-block: calc((1lh - 1.6em) / 2);
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

.archive-pages .ap-roll-strip {
    display: block;
    line-height: 1.6em;
    white-space: pre;
    text-align: center;
    transform: translateY(calc(var(--ap-d, 0) * -10%));
}

.archive-pages .ap-roll-strip::before {
    content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
}

.archive-pages .ap-meta {
    padding: 14px 18px;
    border: 1.5px solid var(--ap-rule);
    background: var(--ap-tint);
}

.archive-pages .ap-meta dd {
    font: 400 0.9375rem/1.4 var(--ap-sans);
    color: var(--ap-ink);
    margin: 2px 0 0;
}

.archive-pages .ap-page-head {
    padding: 8px 0 24px;
}

/* Sections */
.archive-pages .ap-section {
    padding: 32px 0 8px;
}

.archive-pages .ap-section--tinted {
    background: var(--ap-tint);
    margin: 32px calc(-1 * var(--ap-gutter)) 0;
    padding: 32px var(--ap-gutter);
}

.archive-pages .ap-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    border-bottom: 1.5px solid var(--ap-rule-strong);
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.archive-pages .ap-section-head h2 {
    font: 400 1.625rem/1.15 var(--ap-serif);
    color: var(--ap-ink);
    margin: 0;
}

.archive-pages .ap-section-head a {
    font: 500 0.875rem/1.3 var(--ap-sans);
    color: var(--ap-body);
    text-decoration: none;
}

.archive-pages .ap-section-head a:hover {
    color: var(--ap-accent);
}

/* Grids */
.archive-pages .ap-grid {
    display: grid;
    gap: 28px 20px;
}

.archive-pages .ap-grid--six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.archive-pages .ap-grid--four,
.archive-pages .ap-grid--picks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.archive-pages .ap-grid--collections {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Issue cards */
.archive-pages .ap-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.archive-pages .ap-card-link {
    display: block;
    text-decoration: none;
}

.archive-pages .ap-cover {
    display: block;
    width: 100%;
    height: auto;
    /* Covers keep their own proportions; 3:4 only reserves space until the image loads (and sizes empty placeholders). */
    aspect-ratio: auto 3 / 4;
    object-fit: contain;
    border: 1px solid var(--ap-rule);
    background: var(--ap-tint);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Each grid row's cover track is as tall as its tallest cover; shorter covers sit at the bottom so captions line up. */
@supports (grid-template-rows: subgrid) {
    .archive-pages .ap-grid > .ap-card {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        row-gap: 10px;
    }

    .archive-pages .ap-grid > .ap-card > .ap-card-link {
        align-self: end;
    }
}

.archive-pages .ap-cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    font: 500 0.75rem/1.35 var(--ap-sans);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ap-faint);
    background: repeating-linear-gradient(45deg, #eceae4 0 8px, #f6f5f1 8px 16px);
}

.archive-pages .ap-card-link:hover .ap-cover,
.archive-pages .ap-card-link:focus-visible .ap-cover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.archive-pages .ap-card--locked .ap-cover {
    filter: grayscale(0.35);
    opacity: 0.85;
}

.archive-pages .ap-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.archive-pages .ap-card-body .ap-eye {
    margin-bottom: 0;
}

.archive-pages .ap-card-headline {
    font: 400 1.0625rem/1.25 var(--ap-serif);
    color: var(--ap-ink);
}

.archive-pages .ap-lock {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    margin-top: 4px;
    padding: 3px 10px;
    border: 1.5px dashed #b6b1a8;
    border-radius: 999px;
    font: 600 0.75rem/1.4 var(--ap-sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ap-faint);
}

.archive-pages .ap-lock .material-symbols-outlined {
    font-size: 0.9rem;
}

/* Collection cards */
.archive-pages .ap-collection-card-link {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.archive-pages .ap-collection-card-media .ap-hero-media {
    min-height: 0;
}

.archive-pages .ap-collection-card-media .ap-hero-media--image img {
    aspect-ratio: 4 / 3;
    max-height: none;
}

.archive-pages .ap-collection-card-title {
    font: 400 1.375rem/1.2 var(--ap-serif);
    color: var(--ap-ink);
    margin: 0 0 4px;
}

.archive-pages .ap-collection-card-link:hover .ap-collection-card-title {
    text-decoration: underline;
}

/* Buttons and chips */
.archive-pages .ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1.5px solid #1a1a1a;
    border-radius: 999px;
    background: var(--ap-paper);
    font: 600 0.875rem/1.2 var(--ap-sans);
    color: #1a1a1a;
    text-decoration: none;
    cursor: pointer;
}

.archive-pages .ap-btn:hover {
    background: #1a1a1a;
    color: #fff;
}

.archive-pages .ap-btn--dark {
    background: #1a1a1a;
    color: #fff;
}

.archive-pages .ap-btn--dark:hover {
    background: #000;
    color: #fff;
}

.archive-pages .ap-btn--accent {
    background: var(--ap-accent);
    border-color: var(--ap-accent);
    color: #fff;
}

.archive-pages .ap-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.archive-pages .ap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.archive-pages .ap-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1.5px solid var(--ap-border);
    border-radius: 999px;
    font: 500 0.8125rem/1.2 var(--ap-sans);
    color: var(--ap-body);
    text-decoration: none;
}

.archive-pages .ap-chip:hover {
    border-color: #111;
    color: #111;
}

.archive-pages .ap-chip.on {
    background: #111;
    border-color: #111;
    color: #fff;
}

/* Issue page */
.archive-pages .ap-issue-hero {
    display: grid;
    grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
    gap: 40px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.archive-pages .ap-issue-cover .ap-cover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Stacked, each the full width of the cover column. */
.archive-pages .ap-issue-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.archive-pages .ap-issue-actions .ap-btn {
    width: 100%;
}

.archive-pages .ap-issue-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1.5px solid var(--ap-rule);
    margin-top: 32px;
    padding-bottom: 0;
}

.archive-pages .ap-issue-pager-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Archive home (/archives) */
.archive-pages .ap-home-signin {
    max-width: var(--ap-shell);
    margin: 0 auto;
    padding: 10px var(--ap-gutter) 0;
    text-align: right;
    font: 500 0.875rem/1.3 var(--ap-sans);
}

.archive-pages .ap-home-banners:empty {
    display: none;
}

.archive-pages .ap-home-hero .ap-display {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
}

.archive-pages .ap-home-hero .ap-display:has(+ .ap-home-subhead) {
    margin-bottom: 6px;
}

.archive-pages .ap-home-subhead {
    font: italic 400 clamp(1.25rem, 2.2vw, 1.625rem)/1.25 var(--ap-serif);
    color: var(--ap-body);
    margin: 0 0 14px;
}

.archive-pages .ap-home-hero .ap-stats {
    margin-top: 20px;
}

/* The home fan shows five covers, so it overlaps more than the decade fan to stay inside its column. */
.archive-pages .ap-home-hero .ap-hero-media--fan {
    --ap-fan-w: clamp(96px, 11vw, 160px);
    align-items: center;
    min-height: 0;
}

.archive-pages .ap-home-hero .ap-hero-media--fan img {
    width: var(--ap-fan-w);
    margin-left: calc(var(--ap-fan-w) * -0.55);
}

.archive-pages .ap-home-hero .ap-hero-media--fan img:first-child {
    margin-left: 0;
}

.archive-pages .ap-home-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 24px;
    max-width: 30rem;
}

.archive-pages .ap-home-search input[type="search"] {
    flex: 1 1 14rem;
    border-radius: 999px;
    border-color: var(--ap-border);
}

.archive-pages .ap-home-latest-grid {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.archive-pages .ap-home-latest-cover .ap-cover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.archive-pages .ap-home-latest-title {
    font: 400 clamp(1.75rem, 3vw, 2.25rem)/1.1 var(--ap-serif);
    color: var(--ap-ink);
    margin: 4px 0 12px;
}

.archive-pages .ap-home-latest-title a {
    color: inherit;
    text-decoration: none;
}

.archive-pages .ap-home-latest-title a:hover {
    text-decoration: underline;
}

.archive-pages .ap-home-latest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.archive-pages .ap-home-decades {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.archive-pages .ap-home-month {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, calc((100% - 5 * 20px) / 6));
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 12px;
}

.archive-pages .ap-home-month-item {
    scroll-snap-align: start;
    min-width: 0;
}

/* Covers share a baseline so the dates line up, matching the grids' subgrid alignment. */
.archive-pages .ap-home-month-item > .ap-card {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
}

.archive-pages .ap-home-month-item > .ap-card > .ap-card-link {
    align-self: end;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .archive-pages .ap-grid--six {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .archive-pages .ap-home-decades {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .archive-pages .ap-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .archive-pages .ap-hero-media {
        min-height: 200px;
    }

    .archive-pages .ap-grid--four,
    .archive-pages .ap-grid--picks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .archive-pages .ap-grid--collections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .archive-pages .ap-issue-hero {
        grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
        gap: 24px;
    }

    .archive-pages .ap-home-latest-grid {
        grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
        gap: 24px;
    }

    .archive-pages .ap-home-decades {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .archive-pages .ap-grid--six {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .archive-pages .ap-grid--four,
    .archive-pages .ap-grid--picks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .archive-pages .ap-issue-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .archive-pages .ap-issue-cover {
        max-width: 260px;
    }

    .archive-pages .ap-home-latest-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .archive-pages .ap-home-latest-cover {
        max-width: 220px;
    }
}

@media (max-width: 575.98px) {
    .archive-pages .ap-grid {
        gap: 20px 14px;
    }

    .archive-pages .ap-grid--six {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .archive-pages .ap-grid--collections {
        grid-template-columns: minmax(0, 1fr);
    }

    .archive-pages .ap-home-decades {
        grid-template-columns: minmax(0, 1fr);
    }

    .archive-pages .ap-home-month {
        grid-auto-columns: 42%;
        gap: 14px;
    }

    .archive-pages .ap-home-latest-actions .ap-btn {
        flex: 1 1 100%;
    }

    .archive-pages .ap-decades,
    .archive-pages .ap-years {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0;
    }

    .archive-pages .ap-section-head h2 {
        font-size: 1.375rem;
    }
}

/* Image fade-in; html.ap-fade is set by archive-image-fade.js, so images stay visible without JS. */
html.ap-fade .archive-pages img:not([data-ap-loaded]) {
    opacity: 0;
}

html.ap-fade .archive-pages img[data-ap-loaded="fade"] {
    animation: ap-img-fade-in 0.4s ease-out;
}

@keyframes ap-img-fade-in {
    from {
        opacity: 0;
    }
}

/* Cross-document view transitions between archive pages (Chromium 126+, Safari 18.2+; others navigate normally).
   Only archive pages load this stylesheet, so only archive-to-archive navigations animate. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* Names must be unique per page; collection cards reuse the hero markup, so scope to the decade hero. */
.archive-pages.ap-decade-page .ap-hero .ap-display {
    view-transition-name: ap-decade-title;
}

/* In-place decade switches roll the title's digits live, which a snapshot cross-fade would hide. */
html.ap-vt-decade .archive-pages.ap-decade-page .ap-hero .ap-display {
    view-transition-name: none;
}

.archive-pages.ap-decade-page .ap-hero .ap-hero-media img:nth-child(1) { view-transition-name: ap-decade-hero-1; }
.archive-pages.ap-decade-page .ap-hero .ap-hero-media img:nth-child(2) { view-transition-name: ap-decade-hero-2; }
.archive-pages.ap-decade-page .ap-hero .ap-hero-media img:nth-child(3) { view-transition-name: ap-decade-hero-3; }
.archive-pages.ap-decade-page .ap-hero .ap-hero-media img:nth-child(4) { view-transition-name: ap-decade-hero-4; }
.archive-pages.ap-decade-page .ap-hero .ap-hero-media img:nth-child(5) { view-transition-name: ap-decade-hero-5; }

::view-transition-group(ap-decade-hero-1),
::view-transition-group(ap-decade-hero-2),
::view-transition-group(ap-decade-hero-3),
::view-transition-group(ap-decade-hero-4),
::view-transition-group(ap-decade-hero-5) {
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-group(ap-decade-hero-2) { animation-delay: 40ms; }
::view-transition-group(ap-decade-hero-3) { animation-delay: 80ms; }
::view-transition-group(ap-decade-hero-4) { animation-delay: 120ms; }
::view-transition-group(ap-decade-hero-5) { animation-delay: 160ms; }

::view-transition-old(ap-decade-hero-1), ::view-transition-new(ap-decade-hero-1),
::view-transition-old(ap-decade-hero-2), ::view-transition-new(ap-decade-hero-2),
::view-transition-old(ap-decade-hero-3), ::view-transition-new(ap-decade-hero-3),
::view-transition-old(ap-decade-hero-4), ::view-transition-new(ap-decade-hero-4),
::view-transition-old(ap-decade-hero-5), ::view-transition-new(ap-decade-hero-5) {
    animation-duration: 0.6s;
    /* Keep each cover's aspect ratio while the group resizes. */
    height: 100%;
    object-fit: cover;
}

::view-transition-group(ap-decade-title) {
    animation-duration: 0.4s;
}

/* Skip the default whole-page cross-fade so unchanged chrome (navbar, logo) doesn't pulse; only the named hero parts animate. */
::view-transition-old(root) {
    display: none;
}

::view-transition-new(root) {
    animation: none;
}

/* styles.css names the navbar logo (page-logo) for the dark-mode swap animation; hold it still during archive transitions. */
html.ap-vt::view-transition-old(page-logo) {
    display: none;
}

html.ap-vt::view-transition-new(page-logo) {
    animation: none;
}

/* Issue cover morph: the clicked tile's cover is named in archive-transitions.js; the issue page names its own. */
.archive-pages.ap-issue-page .ap-issue-hero .ap-cover {
    view-transition-name: ap-issue-cover;
}

::view-transition-group(ap-issue-cover) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* archive-transitions.js scales the group from its final size, anchored at the top-left like the UA translate. */
    transform-origin: 0 0;
}

::view-transition-old(ap-issue-cover),
::view-transition-new(ap-issue-cover) {
    animation-duration: 0.45s;
    height: 100%;
    object-fit: cover;
}

/* Morphing covers must be visible when snapshotted, so they skip the hidden-until-loaded fade-in. */
html.ap-vt .archive-pages .ap-issue-hero img.ap-cover:not([data-ap-loaded]),
html.ap-vt .archive-pages img.ap-cover[data-ap-vt]:not([data-ap-loaded]) {
    opacity: 1;
}

/* Issue copy follows the cover in, only after a transition from another archive page. */
html.ap-arrived .archive-pages .ap-issue-copy > * {
    animation: ap-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html.ap-arrived .archive-pages .ap-issue-copy > :nth-child(1) { animation-delay: 80ms; }
html.ap-arrived .archive-pages .ap-issue-copy > :nth-child(2) { animation-delay: 130ms; }
html.ap-arrived .archive-pages .ap-issue-copy > :nth-child(3) { animation-delay: 180ms; }
html.ap-arrived .archive-pages .ap-issue-copy > :nth-child(n + 4) { animation-delay: 230ms; }

@keyframes ap-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.ap-fade .archive-pages img[data-ap-loaded="fade"] {
        animation: none;
    }

    .archive-pages .ap-cover {
        transition: none;
    }

    .archive-pages .ap-card-link:hover .ap-cover,
    .archive-pages .ap-card-link:focus-visible .ap-cover {
        transform: none;
    }

    html.ap-arrived .archive-pages .ap-issue-copy > * {
        animation: none;
    }
}