:root{
 --night:#0a0d13; --night-2:#111722; --night-3:#1a2231; --on-night:#f1ede4; --night-muted:#a7adb9; --night-rule:#263044;
 --page:#f3efe6; --surface:#fbf8f2; --ink:#12161d; --muted:#585e6a; --rule:#ddd6c8;
 --red:#e1251b; --red-deep:#b5150d; --red-text:#c41a10; --gold:#c9a25c; --night-text:#ddd8cd; --red-light:#ff6a5f;
 --track:.1em; --track-wide:.16em; --bar:64px; --ring:var(--red);
 --cond:'Barlow Condensed','Arial Narrow','Helvetica Neue',Arial,sans-serif;
 --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 --serif:'Source Serif 4','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
 --max:1320px; --gut:clamp(16px,3.2vw,40px); --col:720px;
 --stripes:repeating-linear-gradient(-60deg,var(--red) 0 18px,transparent 18px 30px);
 --hatch:repeating-linear-gradient(-60deg,rgba(225,37,27,.9) 0 26px,transparent 26px 48px);
 --text-card:var(--night);
 --shadow:0 2px 6px rgba(10,13,19,.08),0 18px 40px rgba(10,13,19,.14); color-scheme:light;
}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;
 --night:#05070a; --night-2:#0c1119; --page:#1b2230; --surface:#232b3b; --ink:#ece8df; --muted:#b3b9c4; --rule:#333d50;
 --red-text:var(--red-light); --ring:var(--red-light); --shadow:0 0 0 1px #3d4860,0 18px 40px rgba(0,0,0,.55); --text-card:var(--surface);
}}
/* every dark surface: red text switches to the light red */
.masthead,.cover,.ticker,.band.night,.page-head,.article-head,.article-cover,.cover-credit,.related-band,.card.text,footer.site,.notfound,.legend,.tile{--red-text:var(--red-light)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 1.6rem)}
body{margin:0;background:var(--page);color:var(--ink);font:17px/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--red-deep);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- shared type ---------- */
.cover h1,.band-head h2,.page-head h1,.card h3,.legend h3,.legend-row h2,.tile h3,.print h2,.article-head h1,.article-cover h1,
.prose h2,.prose h3,.prose h4,.notfound h1,.ticker .track span,.legend-row li a{font-family:var(--cond);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.kicker,.btn,.more-link,.menu summary,.ticker label,.legend .go,.tile span,.meta,.tags a,.backlink,nav.primary a,.menu nav a,footer.site nav a,footer.site p.legal,.page-head figcaption{font-family:var(--cond);font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase}
.kicker{font-size:.82rem;color:var(--red-text);margin:0 0 .6rem}
.kicker::before{content:'';display:inline-block;vertical-align:.3em;margin-right:.6rem;width:22px;height:3px;background:var(--red);transform:skewX(-30deg)}
.kicker a{text-decoration:none;padding:.35rem 0}
.kicker a:hover{text-decoration:underline;text-underline-offset:3px}
.btn{display:inline-block;font-size:1rem;text-decoration:none;color:#fff;background:var(--red-deep);padding:.85rem 1.5rem .8rem;transform:skewX(-14deg);transform-origin:0 100%;transition:background .2s ease}
.btn>span{display:inline-block;transform:skewX(14deg);transition:transform .2s ease}
.btn:hover{background:color-mix(in srgb,var(--red-deep) 78%,#000)}
.btn:hover>span{transform:skewX(14deg) translateX(3px)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn.ghost{background:transparent;color:var(--on-night);box-shadow:inset 0 0 0 2px rgba(241,237,228,.55)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--on-night);background:rgba(255,255,255,.06)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.more-link{font-size:.92rem;text-decoration:none;color:var(--red-text);white-space:nowrap;padding:.4rem 0}
.more-link:hover{text-decoration:underline;text-underline-offset:4px}
.count{font-family:var(--cond);font-weight:800;font-style:italic;color:var(--red-text);font-size:1.2em;line-height:0}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:60;background:var(--night);color:var(--on-night);border-top:4px solid var(--red)}
.masthead .bar{display:flex;align-items:center;gap:2rem;min-height:calc(var(--bar) - 4px)}
.wordmark{display:flex;align-items:center;text-decoration:none;flex:none;padding:.5rem 0}
.wordmark img{height:24px;width:auto;filter:brightness(0) invert(1)}
nav.primary{margin-left:auto;display:flex;gap:1.35rem;align-items:center}
nav.primary a,.menu nav a{font-size:.98rem;letter-spacing:var(--track);text-decoration:none;color:var(--night-muted);padding:.4rem 0;position:relative;white-space:nowrap;transition:color .2s}
nav.primary a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--red);
 transform:scaleX(0) skewX(-30deg);transform-origin:left;transition:transform .25s ease}
nav.primary a:hover,.menu nav a:hover{color:#fff}
nav.primary a:hover::after,nav.primary a[aria-current]::after{transform:scaleX(1) skewX(-30deg)}
nav.primary a[aria-current],.menu nav a[aria-current]{color:#fff}
nav.primary a.nav-legends,.menu nav a.nav-legends{color:var(--gold)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;font-size:1rem;color:#fff;display:flex;align-items:center;gap:.6rem;padding:.6rem 0}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:'';width:20px;height:12px;background:linear-gradient(#fff 0 0) top/100% 2px no-repeat,
 linear-gradient(#fff 0 0) center/100% 2px no-repeat,linear-gradient(var(--red) 0 0) bottom/70% 2px no-repeat}
.menu[open] summary::after{width:16px;height:16px;background:linear-gradient(45deg,transparent 45%,#fff 45% 55%,transparent 55%),
 linear-gradient(-45deg,transparent 45%,var(--red) 45% 55%,transparent 55%)}
.menu nav{position:absolute;left:0;right:0;top:100%;background:var(--night);border-top:1px solid var(--night-rule);
 border-bottom:4px solid var(--red);padding:1rem var(--gut) 1.4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.2rem 1.5rem;
 max-height:calc(100svh - var(--bar));overflow-y:auto;overscroll-behavior:contain}
.menu nav a{font-size:1.3rem;padding:.55rem 0}
.menu nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px}
.menu:not([open]) nav{display:none}
@media(max-width:1240px){nav.primary{display:none}.menu{display:block}}
@media(max-width:359px){.wordmark img{height:19px}.masthead .bar{gap:1rem}}
.progress{position:fixed;top:0;left:0;right:0;height:4px;background:var(--gold);transform-origin:left;transform:scaleX(0);z-index:70}
@supports (animation-timeline:scroll()){
 .progress{animation:grow linear both;animation-timeline:scroll(root)}
 @keyframes grow{to{transform:scaleX(1)}}
}

/* ---------- cover (home) ---------- */
.cover{position:relative;isolation:isolate;min-height:max(min(86svh,880px),50vw);display:flex;align-items:flex-end;
 background:var(--night);color:var(--on-night);overflow:hidden}
.cover .bg,.article-cover .bg,.page-head.photo .bg{position:absolute;inset:0;z-index:-2}
.cover .bg img,.article-cover .bg img,.page-head.photo .bg img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 60%);animation:drift 18s ease-out both}
@keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}
.cover::before,.article-cover::before,.page-head.photo::before{content:'';position:absolute;inset:0;z-index:-1;
 background:linear-gradient(180deg,rgba(10,13,19,.3) 0%,rgba(10,13,19,0) 25%,rgba(10,13,19,0) 48%,rgba(10,13,19,.82) 100%),
 linear-gradient(90deg,rgba(10,13,19,.7) 0%,rgba(10,13,19,0) 60%)}
/* section and tag heads: the headline runs most of the width, so the foot is darker all the way across */
.page-head.photo::before{background:linear-gradient(180deg,rgba(10,13,19,.3) 0%,rgba(10,13,19,0) 25%,rgba(10,13,19,.15) 45%,rgba(10,13,19,.62) 68%,rgba(10,13,19,.92) 100%),
 linear-gradient(90deg,rgba(10,13,19,.45) 0%,rgba(10,13,19,0) 60%)}
.cover .inner{width:100%;padding-top:6rem;padding-bottom:clamp(2.2rem,6vh,4.5rem)}
.cover .kicker,.article-head .kicker,.article-cover .kicker,.page-head.photo .kicker{color:#fff}
.cover .kicker,.article-cover .kicker,.page-head.photo .kicker{display:inline-block;background:rgba(10,13,19,.9);padding:.42rem .8rem .38rem .65rem}
.cover h1{
 line-height:.9;font-size:clamp(2.6rem,7.4vw,7rem);margin:0 0 1.1rem;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.cover h1.long{font-size:clamp(2.3rem,5.6vw,5.4rem);max-width:19ch}
.cover h1.xlong{font-size:clamp(2.1rem,4.4vw,4.4rem);max-width:24ch}
.cover p.blurb{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;max-width:52ch;margin:0 0 1.8rem;color:var(--night-text)}
.speedlines,.page-head.photo::after{content:'';position:absolute;right:0;bottom:0;width:min(42vw,560px);height:14px;z-index:1;
 background:var(--stripes)}
@media(max-width:620px){.cover h1{font-size:3.3rem}.cover h1.long{font-size:2.8rem}.cover h1.xlong{font-size:2.3rem}
 .cover p.blurb{font-size:1rem;margin-bottom:1.3rem}}

/* ---------- ticker ---------- */
.ticker{position:relative;background:var(--red-deep);color:#fff;overflow:hidden;white-space:nowrap}
.ticker .track{display:inline-flex;animation:ticker 60s linear infinite;padding:.55rem 0}
.ticker:hover .track,.ticker input:checked~.track{animation-play-state:paused}
.ticker .track span{font-size:1.25rem;letter-spacing:.06em;padding-right:1.6rem;white-space:nowrap}
.ticker .track span::after{content:'/';margin-left:1.6rem;opacity:.55}
.ticker label{position:absolute;right:0;top:0;bottom:0;z-index:2;display:flex;align-items:center;padding:0 var(--gut) 0 5rem;cursor:pointer;background:linear-gradient(90deg,rgba(181,21,13,0),var(--red-deep) 45%);font-size:.8rem;font-style:normal}
.ticker label::before{content:'';width:9px;height:10px;margin-right:.5rem;background:linear-gradient(90deg,#fff 0 3px,transparent 3px 6px,#fff 6px 9px)}
.ticker input:checked+label::before{width:0;height:0;background:none;border-left:9px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.ticker input{position:absolute;opacity:0;width:1px;height:1px}
.ticker input:focus-visible+label{outline:3px solid #fff;outline-offset:-6px}
.ticker .on{display:none}.ticker input:checked+label .off{display:none}.ticker input:checked+label .on{display:inline}
@keyframes ticker{to{transform:translateX(-50%)}}
@media(max-width:620px){.ticker label{padding-left:2.5rem}}

/* ---------- bands ---------- */
.band{padding:clamp(3rem,7vw,5.5rem) 0}
.band.night{background:var(--night);color:var(--on-night)}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin:0 0 2rem;flex-wrap:wrap}
.band-head h2{
 line-height:.9;font-size:clamp(2.2rem,5vw,4rem);margin:0}
.band-head p{text-wrap:pretty;margin:.6rem 0 0;max-width:56ch;font-family:var(--serif);font-size:1.05rem;color:var(--muted)}
.band.night .band-head p{color:var(--night-muted)}
.band-head.sub{margin-top:clamp(2.5rem,5vw,4rem)}
.band-head.sub h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}

/* ---------- page head (sections, tags, gallery, legends) ---------- */
.page-head{background:var(--night);color:var(--on-night);position:relative;overflow:hidden;padding:clamp(3rem,8vw,6rem) 0 clamp(2.2rem,5vw,3.5rem)}
.page-head:not(.photo)::after,.article-head::after{content:'';position:absolute;right:-60px;top:0;bottom:0;width:min(38vw,520px);
 background:var(--hatch);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%);opacity:.5}
.page-head .wrap{position:relative;z-index:1}
.page-head.photo{min-height:min(62svh,600px);display:flex;align-items:flex-end;isolation:isolate}
.page-head.photo>.wrap{width:100%}
.page-head.photo h1{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.page-head h1{
 line-height:.88;font-size:clamp(3rem,10vw,8rem);margin:0 0 1rem}
.page-head p:not(.kicker){text-wrap:pretty;margin:0;max-width:60ch;font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--night-text);line-height:1.5}
.page-head.portrait::after{opacity:.25}
.page-head + .band.night{padding-top:0}
.page-head.portrait .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.page-head figure{margin:0}
.page-head figure .art{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--night-3);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.page-head figure img,.legend img,.legend-row .art img,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-head figcaption small{display:block;margin-top:.25rem;text-transform:none;letter-spacing:.02em}
.page-head figcaption{font-weight:600;letter-spacing:var(--track);font-size:.85rem;color:var(--night-muted);margin-top:.7rem}
@media(max-width:820px){.page-head.portrait .wrap{grid-template-columns:1fr}.page-head.portrait figure{order:-1}.page-head figure .art{aspect-ratio:16/10}}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(1.2rem,2.4vw,2rem);grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}   /* auto-fit: two or three cards fill the row */
.grid>.card:only-child{max-width:40rem}     /* …but a lone card never stretches its picture across the page */
.grid.feature{grid-template-columns:repeat(4,1fr)}
.grid.feature>.card:first-child{grid-column:span 2;grid-row:span 2}
.grid.feature>.card:first-child .shot{aspect-ratio:auto;flex:1;min-height:340px}
.grid.feature>.card:first-child .body{flex:none}
.grid.feature>.card:first-child h3{font-size:clamp(2rem,3.2vw,2.9rem)}
.grid.feature>.card:first-child p{font-size:1.08rem}
.grid.feature>.card:not(:first-child) p:not(.kicker){display:none}
@media(max-width:1200px){.grid.feature{grid-template-columns:repeat(2,1fr)}.grid.feature>.card:first-child{grid-row:auto}
 .grid.feature>.card:first-child .shot{min-height:0;aspect-ratio:16/9}}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);
 box-shadow:0 1px 0 var(--rule);transition:transform .25s ease,box-shadow .25s ease}
.card:is(:hover,:focus-within){transform:translateY(-4px);box-shadow:var(--shadow)}
.card .shot{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--night-2);position:relative}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:is(:hover,:focus-within) .shot img{transform:scale(1.06)}
.card .shot::after{content:'';position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--red);
 transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.card:is(:hover,:focus-within) .shot::after{transform:scaleX(1)}
.card.gift .shot{background:var(--surface)}
.card.gift .shot img{object-fit:contain}
.card .body{padding:1.05rem 1.15rem 1.3rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card .kicker{margin:0}
.card h3{margin:0;font-size:1.5rem;line-height:1}
.card h3 a{text-decoration:none}
.card h3 a::before{content:'';position:absolute;inset:0;z-index:1}
.card h3 a:focus-visible{outline:none}
.card:has(h3 a:focus-visible){outline:3px solid var(--ring);outline-offset:3px}
.card .kicker a{position:relative;z-index:2}
.card p:not(.kicker){margin:0;font-family:var(--serif);font-size:.98rem;color:var(--muted);line-height:1.5}
.card.text{background:linear-gradient(200deg,color-mix(in srgb,var(--text-card) 82%,transparent),var(--text-card) 42%),var(--hatch),var(--text-card);
 color:var(--on-night);box-shadow:inset 0 4px 0 var(--red)}
.card.text .body{padding:1.5rem 1.35rem 1.4rem;gap:.7rem;justify-content:flex-end}
.card.text h3{font-size:1.9rem}
.more>summary{list-style:none;cursor:pointer;margin-top:clamp(1.6rem,3vw,2.4rem)}
.more>summary::-webkit-details-marker{display:none}
.more>summary:focus-visible{outline-color:var(--ink)}
.more>summary>span+span,.more[open]>summary>span:first-child{display:none}
.more[open]>summary>span+span{display:inline-block}
.more>.grid{margin-top:clamp(1.2rem,2.4vw,2rem)}
.card.text p:not(.kicker){color:var(--night-muted);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.related-band .card:not(.text){background:var(--night-2);color:var(--on-night);box-shadow:inset 0 0 0 1px var(--night-rule)}
.related-band .card p:not(.kicker){color:var(--night-muted)}
.related-band .card.text{--text-card:var(--night-2)}
/* phones: after the first, cards become compact rows */
@media(max-width:620px){
 .grid,.grid.feature{grid-template-columns:minmax(0,1fr);gap:.9rem}
 .grid>.card:not(:first-child){flex-direction:row;align-items:stretch}
 .grid>.card:not(:first-child) .shot{flex:0 0 36%;aspect-ratio:1/1}
 .grid>.card:not(:first-child) .body{padding:.75rem .9rem;gap:.3rem;justify-content:center}
 .grid>.card:not(:first-child) p:not(.kicker){display:none}
 .grid>.card:not(:first-child) .kicker{letter-spacing:var(--track)}
 .grid>.card:not(:first-child) h3{font-size:1.25rem}
 .grid>.card.text:not(:first-child) h3{font-size:1.4rem}
 .grid.feature>.card:first-child{grid-column:auto}
 .grid.feature>.card:first-child .shot{aspect-ratio:3/2}
}

/* ---------- legends ---------- */
.legends{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.6rem,1.2vw,1rem)}
@media(max-width:1140px) and (min-width:861px){.legends .legend p{display:none}}
@media(max-width:860px){.legends{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(240px,min(62vw,40%));
 overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.8rem;scrollbar-width:thin}
 .legend{scroll-snap-align:start}}
.legend{position:relative;isolation:isolate;aspect-ratio:3/4.4;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
 padding:1.2rem 1.1rem 1.3rem;text-decoration:none;color:#fff;background:var(--night-3)}
.legend img,.tile img{z-index:-2}
.legend img,.legend-row .art img,.tile img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.legend::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,13,19,0) 25%,rgba(10,13,19,.82) 56%,rgba(10,13,19,.96) 100%)}
.legend:is(:hover,:focus-visible) img{transform:scale(1.05)}
.legend .no,.legend-row .art .no{position:absolute;top:1rem;left:1rem;z-index:1;font-family:var(--cond);font-weight:800;font-style:italic;font-size:1.3rem;
 width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--night)}
.legend h3{font-size:clamp(2rem,3vw,2.8rem);line-height:.86;margin:0 0 .6rem}
.legend h3 small,.legend-row h2 small,.page-head.portrait h1 small{display:table;font-size:.4em;letter-spacing:var(--track-wide);font-weight:700;color:var(--night);background:var(--gold);
 padding:.18em .45em .12em;margin-bottom:.45rem;font-style:normal}
.page-head.portrait h1 small{font-size:.26em}
.legend p{margin:0 0 .8rem;font-family:var(--serif);font-size:.95rem;line-height:1.4;color:var(--night-text)}
.legend .go{font-size:.85rem;color:#fff}
.legend .go b{color:var(--red-text)}
.legend-rows{display:grid;gap:clamp(2.5rem,6vw,4.5rem)}
.legend-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.legend-row:nth-child(even) .art{order:2}
.legend-row .art{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--night-3);display:block}
.legend-row:is(:hover,:focus-within) .art img{transform:scale(1.04)}
.legend-row .art .no{font-size:1.5rem;width:3rem;height:3rem}
.legend-row h2{font-size:clamp(3rem,7vw,5.6rem);line-height:.86;margin:0 0 1rem}
.legend-row h2 a{text-decoration:none}
.legend-row p{font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--night-muted);margin:0 0 1.2rem;max-width:52ch}
.legend-row ul{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.15rem}
.legend-row li a{font-size:1.15rem;letter-spacing:.01em;text-decoration:none;color:var(--on-night);display:flex;gap:.7rem;padding:.3rem 0}
.legend-row li a::before{content:'';flex:none;width:14px;height:3px;background:var(--red);transform:skewX(-30deg);margin-top:.68em}
.legend-row li a:hover{color:var(--red-text)}
@media(max-width:820px){.legend-row{grid-template-columns:1fr}.legend-row:nth-child(even) .art{order:0}}

/* ---------- section tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,22vw,280px);gap:clamp(.6rem,1.2vw,1rem)}
@media(min-width:521px){
 .tiles .tile:nth-child(1){grid-column:span 2;grid-row:span 2}
 .tiles .tile:nth-child(2),.tiles .tile:last-child:nth-child(odd){grid-column:span 2}}
@media(max-width:920px){.tiles{grid-template-columns:repeat(2,1fr)}.tiles .tile:nth-child(1){grid-row:span 1}}
@media(max-width:520px){.tiles{grid-template-columns:1fr 1fr;grid-auto-rows:140px}.tiles .tile:nth-child(1){grid-column:span 2}.tiles .tile{padding:.9rem}.tiles .tile:not(:first-child) h3{font-size:clamp(.95rem,4.6vw,1.35rem)}}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
 padding:1.1rem 1.2rem;text-decoration:none;color:#fff;background:var(--night-3)}
.tile::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,13,19,.2) 20%,rgba(10,13,19,.85) 100%)}
.tile:is(:hover,:focus-visible) img{transform:scale(1.06)}
.tile h3{font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:.9;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.tile:nth-child(1) h3{font-size:clamp(2.3rem,4.4vw,4.2rem)}
.tile span{font-size:.82rem;color:#fff;margin-top:.35rem;text-shadow:0 1px 10px rgba(0,0,0,.8)}

/* ---------- print band ---------- */
.print{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.print .frame{display:block;justify-self:center;background:#fff;padding:clamp(10px,1.6vw,22px);box-shadow:0 30px 60px rgba(0,0,0,.45);transform:rotate(-1.2deg);transition:transform .4s ease}
.print .frame:hover{transform:rotate(0) scale(1.01)}
.print .frame img{max-height:72vh;object-fit:contain}
.print h2{font-size:clamp(2.2rem,4.6vw,4rem);line-height:.9;margin:0 0 1rem}
.print p:not(.kicker){font-family:var(--serif);font-size:1.1rem;line-height:1.55;color:var(--night-muted);margin:0 0 1.6rem}
@media(max-width:820px){.print{grid-template-columns:1fr}}

/* ---------- article ---------- */
.article-head{position:relative;overflow:hidden;background:var(--night);color:var(--on-night);padding:clamp(2.6rem,6vw,4.5rem) 0 clamp(5rem,9vw,7rem)}
.article-head::after{width:min(30vw,420px);opacity:.35}
.article-head .wrap{position:relative;z-index:1}
.article-head.bare{padding-bottom:clamp(2.6rem,6vw,4.5rem)}
.article-head .inner{max-width:calc(var(--col) + 2*var(--gut))}
.article-cover h1{max-width:18ch}.article-cover h1.long{max-width:22ch}.article-cover h1.xlong{max-width:26ch}
.article-cover .meta,.cover p.blurb,.page-head.photo p{text-shadow:0 1px 12px rgba(0,0,0,.7)}
.article-head h1,.article-cover h1{line-height:.9;font-size:clamp(2.4rem,5vw,4.4rem);margin:0 0 1.2rem}
.article-head h1.long,.article-cover h1.long{font-size:clamp(2.2rem,4.4vw,3.9rem)}
.article-head h1.xlong,.article-cover h1.xlong{font-size:clamp(2rem,3.6vw,3.3rem)}
.meta{font-weight:600;font-size:.95rem;color:var(--night-muted);margin:0}
.meta span+span::before{content:'';display:inline-block;width:6px;height:6px;background:var(--red);transform:skewX(-20deg);margin:0 .8rem .15rem}
.article-cover{position:relative;isolation:isolate;overflow:hidden;min-height:min(82svh,860px);display:flex;align-items:flex-end;color:var(--on-night);background:var(--night)}
.article-cover .inner{width:100%;padding-top:6rem;padding-bottom:clamp(2rem,5vh,3.5rem)}
@media(max-width:620px){.cover,.article-cover{display:block;min-height:0}:is(.cover,.article-cover) .bg{position:static}:is(.cover,.article-cover) .bg img{height:auto}
 .cover::before,.article-cover::before{display:none}:is(.cover,.article-cover) .inner{padding-top:1.4rem}:is(.cover,.article-cover) .kicker{background:none;padding:0}}
.cover-credit{background:var(--night);margin:0}
.cover-credit .credit{padding:.5rem 0;color:var(--night-muted)}
.lead-pic{max-width:calc(1040px + 2*var(--gut));margin:calc(-1*clamp(4rem,7.5vw,5.8rem)) auto 0;padding:0 var(--gut);position:relative;z-index:2}
.lead-pic img{margin:0 auto;box-shadow:var(--shadow)}
.lead-pic.portrait img{max-height:85vh;width:auto}
.lead-pic .credit{margin-top:.6rem}
.article{max-width:calc(var(--col) + 2*var(--gut));margin:0 auto;padding:clamp(2rem,4vw,3rem) var(--gut) clamp(2.5rem,5vw,4rem)}
.prose{font-family:var(--serif);font-size:1.17rem;line-height:1.75;overflow-wrap:break-word}
.prose p{margin:0 0 1.2em}
.prose>:first-child,.prose>:first-child>.pic:first-child{margin-top:0}
.prose img{margin:2rem auto;box-shadow:var(--shadow)}
.prose .pic,.prose figure.video{position:relative;left:50%;transform:translateX(-50%);width:min(1040px,calc(100vw - 2*var(--gut)))}
.prose .pic{display:block;margin:2.2rem 0}
.prose .pic img{margin:0 auto .55rem}
.prose figure{margin:2rem 0}
.prose figure .pic{margin:0 0 .4rem}
.prose figure img{margin:0 auto .5rem}
.prose p.caption,.prose figcaption{font-family:var(--cond);font-weight:600;font-size:.98rem;letter-spacing:.04em;color:var(--muted);margin:.2rem 0 .3rem;text-align:center}
.prose figure>.credit{margin-bottom:2rem}
.prose figure.video{aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:var(--shadow)}
.prose figure.video iframe{width:100%;height:100%;border:0;display:block}
.prose a{color:var(--red-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose h2,.prose h3,.prose h4{line-height:.95;margin:2.4rem 0 .8rem}
.prose h2{font-size:2.1rem}.prose h3{font-size:1.7rem}.prose h4{font-size:1.35rem}
.prose ul{padding-left:1.3rem}
.prose blockquote{margin:2.4rem 0;padding:0 0 0 1.4rem;border-left:5px solid var(--red);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--ink)}
.band.night .credit{color:var(--night-muted);margin-top:1.4rem}
.credit{display:block;font-family:var(--sans);font-size:.74rem;line-height:1.4;color:var(--muted);text-align:center;letter-spacing:.01em}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:2.6rem 0 0;padding-top:1.4rem;border-top:2px solid var(--ink)}
.tags a{font-size:.85rem;letter-spacing:var(--track);text-decoration:none;color:var(--ink);padding:.4rem .75rem;box-shadow:inset 0 0 0 1px var(--rule);background:var(--surface)}
.tags a:hover{box-shadow:inset 0 0 0 1px var(--red);color:var(--red-text)}
.backlink{display:inline-flex;align-items:center;gap:.5rem;margin:2rem 0 0;font-size:.95rem;color:var(--red-text);text-decoration:none;padding:.4rem 0}
.backlink:hover{text-decoration:underline;text-underline-offset:4px}
.related-band{background:var(--night);color:var(--on-night);padding:clamp(3rem,6vw,4.5rem) 0}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .ticker label,.ticker input{display:none}
 .card:is(:hover,:focus-within),.print .frame:hover{transform:none}
 .card:is(:hover,:focus-within) .shot img,.legend:is(:hover,:focus-visible) img,.tile:is(:hover,:focus-visible) img,.legend-row:is(:hover,:focus-within) .art img{transform:none}
}

/* ---------- footer ---------- */
footer.site{background:var(--night);color:var(--night-muted);border-top:4px solid var(--red);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem}
footer.site .mark{display:inline-block;margin:0 0 2rem}
footer.site .mark img{height:clamp(30px,4vw,44px);width:auto;filter:brightness(0) invert(1)}
footer.site .cols{display:grid;grid-template-columns:1.2fr 2fr;gap:2rem}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr}}
footer.site .about{font-family:var(--serif);font-size:1rem;line-height:1.55;margin:0;max-width:40ch}
footer.site nav{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;align-content:flex-start}
footer.site nav a{font-size:1rem;letter-spacing:var(--track);text-decoration:none;color:var(--on-night);padding:.35rem 0}
footer.site nav a:hover{color:var(--red-text)}
footer.site nav.more{margin-top:.8rem}
footer.site nav.more a{font-weight:600;color:var(--night-muted);font-size:.9rem}
footer.site p.legal{margin:2.5rem 0 0;font-weight:600;font-size:.85rem;color:var(--night-muted)}
.wrap.pad{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(3rem,6vw,5rem)}

/* ---------- 404 ---------- */
.notfound{background:var(--night);color:var(--on-night);text-align:center;padding:clamp(4rem,10vw,8rem) 0}
.notfound .dnf{font-family:var(--cond);font-weight:800;font-style:italic;font-size:clamp(7rem,26vw,18rem);line-height:.8;margin:0;
 color:transparent;-webkit-text-stroke:2px var(--red)}
.notfound h1{font-size:clamp(2rem,5vw,3.4rem);line-height:.95;margin:1rem 0 .8rem}
.notfound p{font-family:var(--serif);color:var(--night-muted);font-size:1.1rem;margin:0 auto 1.6rem;max-width:46ch}
.notfound .actions{justify-content:center}