/* Archive surfaces share the cinematic homepage and regular article palette. */
body.has-cinema-archive { background:#080c0f; color:#eef0f4; color-scheme:dark; }
.has-cinema-archive .site-header { --bg:#080c0f; --fg:#f5f5f6; --line:#242c32; }
.archive-cinema { --c-ink:#f2f3f5; --c-steel:#bcc2ca; --c-mist:#94a0ae; --c-line:#29323b; --c-crimson:#f32232; font-family:Heebo,Arial,sans-serif; background:radial-gradient(ellipse at 0% 70%,rgb(144 18 33 / 10%),transparent 35%),#080c0f; padding-block-end:56px; }
.archive-cinema__hero { position:relative; isolation:isolate; display:flex; align-items:end; min-block-size:360px; padding:60px 0 68px; overflow:hidden; background:#111820; }
.archive-cinema__hero::before { content:""; position:absolute; z-index:-2; inset:0; background:var(--archive-backdrop) center 45% / cover no-repeat; }
.archive-cinema__hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,#080c0f,transparent 65%),linear-gradient(270deg,rgb(3 7 11 / 80%),rgb(3 7 11 / 24%) 70%); }
.archive-cinema__trail { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-block-end:18px; color:#bfc6d1; font-size:12px; }
.archive-cinema__trail a { color:inherit; text-decoration:none; }
.archive-cinema__trail a:hover { color:#fff; }
.archive-cinema__trail > [aria-hidden] { color:#7c8a99; }
.archive-cinema__hero h1 { margin:0 0 14px; max-inline-size:20ch; color:#fff; font-size:clamp(2.3rem,6.5vw,4.5rem); font-weight:800; letter-spacing:-.03em; line-height:1.15; overflow-wrap:anywhere; text-wrap:balance; }
.archive-cinema__hero > .container { text-align:right; }
.archive-cinema__hero > .container > :is(h1,.archive-cinema__trail,.archive-cinema__intro,.archive-cinema__placeholder) { margin-inline:0; }
.archive-cinema__intro { max-inline-size:55ch; color:#c1c8d2; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.7; }
.archive-cinema__intro p { margin:0; }
.archive-cinema__placeholder { display:block; margin-block-start:14px; color:#8b96a6; font-size:10px; }
.archive-cinema__content { position:relative; }
.archive-controls { margin-block:0 28px; }
.archive-search { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(180px,1fr) auto; align-items:center; gap:12px; margin:0 0 18px; }
.archive-search:not(:has(select)) { grid-template-columns:minmax(0,1fr); }
.archive-search:not(:has(input[type=search])) { grid-template-columns:minmax(0,1fr) auto; }
.archive-search__field,.archive-search__select { position:relative; min-inline-size:0; }
.archive-search input[type=search],.archive-search select { display:block; inline-size:100%; min-inline-size:0; block-size:52px; padding:10px 18px; border:1px solid #35414c; border-radius:16px; background:linear-gradient(120deg,#11181e,#090d11); color:#e9edf2; font:inherit; font-size:15px; line-height:1.5; box-shadow:inset 0 1px 0 rgb(255 255 255 / 2%); }
.archive-search input[type=search] { padding-inline-end:54px; }
.archive-search input::placeholder { color:#8e99a8; opacity:1; }
.archive-search input[type=search]::-webkit-search-cancel-button { display:none; }
.archive-search__field button { position:absolute; inset-inline-end:5px; inset-block:4px; display:grid; place-items:center; inline-size:44px; padding:0; border:0; border-radius:10px; background:none; color:#e3e8ef; cursor:pointer; }
.archive-search__field button:hover { background:#202a34; }
.archive-search select { appearance:none; padding-inline-end:44px; cursor:pointer; }
.archive-search select option { background:#11181e; color:#e9edf2; }
.archive-search__select > .icon { position:absolute; pointer-events:none; inset-inline-end:16px; inset-block-start:17px; inline-size:18px; block-size:18px; color:#c4ccd7; }
.archive-search__apply { min-block-size:44px; padding:8px 16px; border:1px solid #3a454f; border-radius:12px; background:#121a22; color:#e7ebf1; font:inherit; font-size:13px; cursor:pointer; }
.archive-search__apply:hover { border-color:var(--c-crimson); color:#fff; }
.archive-chips { display:flex; flex-wrap:wrap; gap:9px; }
.archive-chips a { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-block-size:42px; padding:7px 19px; border:1px solid #29333d; border-radius:999px; background:linear-gradient(130deg,#121a21,#0b1015); color:#dbe1e9; text-decoration:none; font-size:14px; line-height:1.5; transition:border-color .15s,background-color .15s,color .15s; }
.archive-chips a .icon { inline-size:17px; block-size:17px; }
.archive-chips a:hover { background:#19212a; border-color:#6a7788; color:#fff; }
.archive-chips a[aria-current] { border-color:var(--c-crimson); color:#ff3c49; background:#1b1014; box-shadow:0 0 18px rgb(243 34 50 / 8%); }
.archive-cinema__grid { display:grid; grid-template-columns:repeat(var(--archive-cols,3),minmax(0,1fr)); align-items:stretch; gap:24px; }
.archive-story { min-inline-size:0; position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid #29323b; border-radius:14px; background:linear-gradient(130deg,#10171c,#090d11); box-shadow:0 8px 24px rgb(0 0 0 / 12%); }
.archive-story__media { position:relative; aspect-ratio:16 / 8.5; overflow:hidden; background:#161f28; }
.archive-story__media > a,.archive-story__media img,.archive-story__placeholder { display:block; inline-size:100%; block-size:100%; }
.archive-story__media img { object-fit:cover; transition:transform .35s ease; }
.archive-story:hover .archive-story__media img { transform:none; }
.archive-story__placeholder { display:grid; place-items:center; background:radial-gradient(ellipse at 30% 30%,#38212b,transparent 65%),#121c25; color:#657486; }
.archive-story__placeholder .icon { inline-size:40px; block-size:40px; stroke-width:1; }
.archive-story__category { position:absolute; inset-inline-end:16px; inset-block-end:10px; z-index:1; max-inline-size:calc(100% - 32px); padding:4px 13px; border-radius:999px; background:var(--c-crimson); color:#fff; font-size:12px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.archive-story__body { display:flex; flex:1; flex-direction:column; padding:18px 18px 14px; }
.archive-story h2 { margin:0 0 12px; color:#f1f3f6; font-size:clamp(1.15rem,1.7vw,1.45rem); font-weight:700; line-height:1.4; letter-spacing:-.025em; overflow-wrap:anywhere; text-wrap:pretty; }
.archive-story h2 a { color:inherit; text-decoration:none; }
.archive-story h2 a::after { content:""; position:absolute; inset:0; z-index:2; border-radius:14px; }
.archive-story:has(h2 a:focus-visible) { outline:2px solid var(--c-crimson); outline-offset:4px; }
.archive-story h2 a:hover { color:#fff; }
.archive-story__excerpt { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 18px; color:#b9c2ce; font-size:15px; line-height:1.75; }
.archive-story__meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-block-start:auto; padding-block-start:12px; border-block-start:1px solid #222d37; color:#9ca9b8; font-size:12px; line-height:1.5; }
.archive-story__meta > :is(span,time) { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-inline-size:0; white-space:nowrap; }
.archive-story__meta > :is(span,time) + span { padding-inline-start:8px; border-inline-start:1px solid #34404c; }
.archive-story__meta .icon { inline-size:17px; block-size:17px; flex:none; stroke-width:1.5; }
.archive-pagination { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-block:30px 0; }
.archive-load { display:inline-flex; align-items:center; justify-content:center; gap:10px; inline-size:min(100%,400px); min-block-size:46px; padding:9px 24px; border:1px solid var(--c-crimson); border-radius:999px; color:#ff3c49; background:#0b0e12; text-decoration:none; font-size:15px; font-weight:500; transition:background-color .15s,color .15s; }
.archive-load .icon { inline-size:18px; block-size:18px; }
.archive-load:hover { color:#fff; background:#c41c2b; }
.archive-load[aria-disabled=true] { cursor:wait; opacity:.65; }
.archive-load[hidden] { display:none; }
.archive-previous { display:inline-flex; align-items:center; min-block-size:44px; color:#aeb9c6; font-size:13px; }
.archive-empty { padding:40px 20px; border:1px solid #29323b; border-radius:14px; background:#10171c; text-align:center; }
.archive-empty h2 { font-size:1.4rem; color:#f1f4f7; }
.archive-empty p { color:#abb6c4; }
.archive-empty a { color:#ff5260; }
.archive-status:not(.screen-reader-text) { margin-block:18px 0; text-align:center; color:#c3cdd9; font-size:14px; }
.archive-cinema .card { --card-accent:#f32232; --card-ink:#f0f2f5; --card-muted:#abb4c0; --card-line:#29323b; --card-surface:#10171c; }
.archive-cinema .card--xs,.archive-cinema .card--sm { align-self:start; }
@media (max-width:1099px) { .archive-cinema__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .archive-story__body { padding:16px 16px 13px; } }
@media (max-width:700px) {
 .archive-cinema__hero { min-block-size:310px; padding:36px 0 48px; }
 .archive-search { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:10px; }
 .archive-search__apply { grid-column:1 / -1; min-block-size:36px; justify-self:end; padding:5px 16px; }
 .archive-chips { gap:8px; }
 .archive-chips a { min-block-size:40px; padding:6px 14px; font-size:13px; }
 .archive-story__meta { font-size:11px; gap:5px; }
 .archive-story__meta > :is(span,time) + span { padding-inline-start:5px; }
 .archive-story__meta .icon { inline-size:15px; block-size:15px; }
}
@media (max-width:599px) {
 .archive-cinema { padding-block-end:36px; }
 .archive-cinema__hero { min-block-size:300px; }
 .archive-cinema__hero h1 { font-size:clamp(2rem,9vw,3rem); }
 .archive-cinema__trail { font-size:11px; gap:7px; }
 .archive-cinema__intro { font-size:16px; }
 .archive-controls { margin-block-end:22px; }
 .archive-search { grid-template-columns:minmax(0,1fr) auto; margin-block-end:14px; }
 .archive-search__field { grid-column:1 / -1; }
 .archive-search__apply { grid-column:auto; align-self:stretch; justify-self:stretch; min-block-size:44px; }
 .archive-search input[type=search],.archive-search select { block-size:48px; border-radius:13px; font-size:16px; }
 .archive-search__select > .icon { inset-block-start:15px; }
 .archive-cinema__grid { grid-template-columns:minmax(0,1fr); gap:18px; }
 .archive-story__media { aspect-ratio:16 / 8; }
 .archive-story h2 { font-size:20px; }
 .archive-story__excerpt { font-size:14px; -webkit-line-clamp:2; margin-block-end:14px; }
 .archive-story__meta { font-size:12px; }
 .archive-pagination { margin-block-start:24px; }
}
@media (prefers-reduced-motion:reduce) { .archive-story__media img,.archive-load,.archive-chips a { transition:none; } }
@media print { body.has-cinema-archive,.archive-cinema { background:#fff; color:#111; } .archive-controls,.archive-pagination { display:none; } .archive-cinema__hero { min-block-size:0; background:none; padding:20px 0; } .archive-cinema__hero::before,.archive-cinema__hero::after { display:none; } .archive-cinema__hero h1,.archive-story h2 { color:#111; } .archive-story { break-inside:avoid; background:#fff; border-color:#ccc; } .archive-story__excerpt,.archive-story__meta { color:#333; } }

/* Shared alignment for the archive heading, cards and pagination. */
.archive-cinema { --archive-gutter:clamp(20px,3vw,40px); }
.archive-cinema__hero > .container,
.archive-cinema > .archive-cinema__content {
 box-sizing:border-box; inline-size:min(100%,calc(var(--wrap,1200px) + 2 * var(--archive-gutter)));
 max-inline-size:none; margin-inline:auto; padding-inline:var(--archive-gutter);
}
.archive-cinema > .archive-cinema__content { padding-block-start:24px; }
.archive-cinema__intro { max-inline-size:65ch; }
.archive-cinema__intro > :first-child { margin-block-start:0; }
.archive-cinema__intro > :last-child { margin-block-end:0; }
.archive-cinema__grid > * { min-inline-size:0; margin:0; align-self:stretch; }
.archive-cinema__grid .sc-card__body { flex:1; }
.archive-cinema__grid .sc-card__meta { margin-block-start:auto; }
.archive-cinema .archive-pagination { inline-size:100%; margin-inline:0; }
@media(max-width:700px) {
 .archive-cinema { --archive-gutter:18px; }
 .archive-cinema > .archive-cinema__content { padding-block-start:16px; }
 .archive-cinema__grid { gap:14px; }
 .archive-cinema__hero h1 { letter-spacing:0; }
}