.archive-intro { position:relative; overflow:hidden; padding:130px var(--gutter) 90px; background:var(--blue); color:var(--yellow); }
.archive-intro h1 { position:relative; z-index:1; margin:0; font-family:Benzin,sans-serif; font-size:clamp(3.4rem,13vw,14rem); line-height:1; overflow-wrap:anywhere; }
.archive-deck { position:relative; z-index:1; margin:40px 0 0; color:white; font-family:'Instrument Serif',serif; font-size:clamp(1.8rem,3.4vw,3.8rem); line-height:1.15; }
.archive-stripe { position:absolute; width:60vw; height:60px; right:-12vw; bottom:50px; background:white; transform:rotate(-17deg); }
.archive-content,.related-stories { padding:70px var(--gutter) 100px; }
.stories-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 26px; }
.story-card { min-width:0; border-bottom:3px solid var(--black); }
.story-card>a { display:block; text-decoration:none; }
.story-card img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.story-card-copy { padding:24px 0 32px; }
.story-meta { display:flex; flex-wrap:wrap; gap:12px; font-family:Manrope,sans-serif; font-size:.78rem; font-weight:700; line-height:1.4; }
.story-meta span { margin-left:auto; }
.story-card h2,.archive-heading { font-family:Benzin,sans-serif; text-transform:uppercase; font-size:clamp(1.3rem,2vw,2rem); line-height:1.1; overflow-wrap:anywhere; }
.story-card h2 { margin:20px 0; }
.story-card a:hover h2 { color:var(--blue); }
.story-summary { font-family:'Instrument Serif',serif; font-size:1.6rem; line-height:1.3; }
.story-read { display:inline-flex; align-items:center; gap:12px; margin-top:20px; font-weight:700; }
.link-arrow { display:inline-block; flex:none; width:.75em; height:.75em; border-top:2px solid currentColor; border-right:2px solid currentColor; position:relative; margin-inline:.25em; }
.link-arrow::after { content:''; position:absolute; top:-1px; right:-1px; width:1em; height:2px; background:currentColor; transform:rotate(-45deg); transform-origin:right center; }
.archive-empty { max-width:1000px; padding:30px 0; }
.archive-empty h2 { font-family:Benzin,sans-serif; font-size:clamp(1.9rem,4vw,4rem); line-height:1.05; }
.archive-empty p { max-width:42ch; font-family:'Instrument Serif',serif; font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1.35; }
.archive-empty .episode-link { width:fit-content; margin-top:32px; }
.archive-pages { display:flex; gap:20px; padding-top:40px; }
.archive-pages [aria-current] { color:var(--blue); font-weight:bold; }
.story-header { padding:130px var(--gutter) 55px; background:var(--yellow); }
.story-back { display:inline-block; margin-bottom:35px; }
.story-header h1 { max-width:24ch; font-family:Benzin,sans-serif; text-transform:uppercase; font-size:clamp(2rem,4.7vw,5.4rem); line-height:1.05; margin:24px 0; overflow-wrap:anywhere; }
.story-subtitle { max-width:40ch; font-family:'Instrument Serif',serif; font-size:clamp(1.6rem,3vw,3rem); line-height:1.25; }
.story-byline { font-size:.85rem; margin-top:32px; }
.story-hero { max-width:1500px; margin:0 auto 60px; }
.story-hero img { width:100%; height:auto; max-height:900px; object-fit:contain; background:var(--paper); display:block; }
figcaption { font-family:Manrope,sans-serif; font-size:.8rem; line-height:1.5; padding:12px 0; }
.story-hero figcaption { padding-inline:var(--gutter); }
.story-reading { max-width:850px; padding:0 var(--gutter) 70px; margin:auto; }
.story-body { font-family:Manrope,sans-serif; font-weight:400; font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.8; overflow-wrap:break-word; }
.story-body .story-font-manrope { font-family:Manrope,sans-serif; font-weight:400; font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.8; }
.story-body .story-font-instrument { font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(1.5rem,2.3vw,2rem); line-height:1.55; }
.story-body strong,.story-body b { font-weight:700; }
.story-body p { margin:0 0 1.2em; }
.story-body .story-columns,.story-body .story-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin:2em 0; align-items:start; }
.story-body .story-columns>* { min-width:0; }
.story-body .story-columns figure,.story-body .story-gallery figure { margin:0; }
.story-body .story-columns h3 { margin-top:0; }
.story-body .story-callout { background:var(--yellow); padding:clamp(24px,4vw,48px); margin:2em 0; }
.story-body .story-callout h3 { margin-top:0; }
.story-body .story-callout p:last-child { margin-bottom:0; }
.story-body .story-link-card { display:block; padding:24px; border:2px solid var(--black); margin:1.5em 0; font:700 1rem Manrope,sans-serif; }
.story-body .story-link-card:hover { background:var(--yellow); }
.story-body details { border-block:2px solid var(--black); padding:24px 0; margin:1.5em 0; }
.story-body summary { cursor:pointer; font:700 1.1rem Manrope,sans-serif; }
.story-body details[open] summary { margin-bottom:24px; }
.story-body .story-timeline { border-left:4px solid var(--blue); padding-left:40px; }
.story-body .story-timeline li { padding-left:8px; margin:24px 0; }
@media(max-width:600px) { .story-body .story-columns,.story-body .story-gallery { grid-template-columns:minmax(0,1fr); gap:24px; } }
.story-body h2,.story-body h3 { font-family:Benzin,sans-serif; font-size:.85em; line-height:1.25; margin:2.4em 0 1em; }
.story-body blockquote { border-left:6px solid var(--blue); margin:1.6em 0; padding:10px 0 10px 25px; font-size:1.2em; }
.story-body figure { margin:1.8em 0; }.story-body img { display:block; max-width:100%; height:auto; }
.story-notes { margin-top:45px; padding-top:20px; border-top:2px solid; font-size:1rem; line-height:1.7; overflow-wrap:anywhere; }
.story-notes h2 { font-family:Benzin,sans-serif; font-size:1rem; }
.story-notes li { margin-bottom:12px; }
.story-tags { margin-top:50px; color:var(--blue); font-weight:bold; }
.story-platforms { margin-block:55px; }
.story-platforms a { gap:12px; }
.story-community { margin-top:65px; padding-top:30px; border-top:3px solid; display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.story-community p { flex-basis:100%; font-family:'Instrument Serif',serif; font-size:1.8rem; }
.story-community button { background:white; color:black; padding:10px 16px; border:2px solid; border-radius:30px; font:inherit; cursor:pointer; }
.related-stories { background:var(--paper); }
.archive-heading { margin:0 0 45px; }
.preview-banner { padding:20px; background:black; color:var(--yellow); }
:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
@media(max-width:1000px) { .stories-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .stories-grid { grid-template-columns:minmax(0,1fr); } .archive-intro { padding-top:115px; padding-bottom:70px; } .archive-intro h1 { font-size:11.4vw; } .archive-stripe { opacity:.35; right:-35vw; } .story-header { padding-top:100px; } .story-header h1 { font-size:clamp(1.8rem,7.5vw,2.8rem); } .story-reading { padding-inline:24px; } .story-hero { margin-bottom:35px; } }
