/* Article page — long-form reading view */
html{scroll-behavior:smooth}
body{font-size:19px;line-height:1.8}

.progress{position:fixed;top:0;left:0;height:3px;background:var(--ox);width:0;z-index:300}

.hero{position:relative;height:74vh;min-height:480px;overflow:hidden;display:flex;align-items:flex-end}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(0.62)}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,26,26,0.35),rgba(26,26,26,0.15) 40%,rgba(26,26,26,0.88))}
.hero .htext{position:relative;z-index:2;max-width:1000px;margin:0 auto;width:100%;padding:0 30px 50px}
.hero .tag{font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ox)}
.hero h1{color:#ffffff;font-family:"Archivo Black",sans-serif;font-size:clamp(30px,7vw,67px);line-height:0.73;letter-spacing:-0.06em;text-transform:uppercase;margin:18px 0 0;max-width:20ch}

.shell{max-width:1000px;margin:0 auto;padding:0 30px}
.standfirst{font-family:"Roboto Mono",monospace;font-weight:400;font-size:16px;line-height:22px;letter-spacing:-0.3px;color:var(--bone-soft);max-width:680px;margin:44px auto 0}
.byline{max-width:680px;margin:28px auto 0;padding-bottom:30px;border-bottom:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--bone-dim)}
.byline b{color:var(--bone)}
.byline .dot{color:var(--ox)}

.body{max-width:680px;margin:0 auto;padding:46px 0 10px}
.body p{margin-bottom:26px}
.body a{color:var(--ox);text-decoration:none;border-bottom:1px solid rgba(186,137,53,0.5);transition:.2s}
.body a:hover{color:#000;border-color:#000}

.pull{max-width:680px;margin:44px auto;padding-left:24px;border-left:2px solid var(--ox)}
.pull blockquote{font-family:"Roboto Mono",monospace;font-weight:500;font-size:20px;line-height:1.5;letter-spacing:-0.3px;color:var(--bone)}
.pull blockquote .ox{color:var(--ox)}

figure{margin:44px auto}
figure.wide{max-width:1000px}
figure img{width:100%;filter:grayscale(1) contrast(1.06) brightness(0.9);border:1px solid var(--line)}
figure figcaption{font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:0.1em;color:var(--bone-dim);margin-top:12px;text-transform:uppercase}
figure figcaption .ox{color:var(--ox)}

.gallery{max-width:1000px;margin:44px auto 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery img{cursor:pointer;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(0.86);transition:filter .4s}
.gallery img:hover{filter:grayscale(0)}
@media(max-width:560px){.gallery{grid-template-columns:1fr 1fr}}

/* lightbox */
.lightbox{display:none;position:fixed;inset:0;z-index:500;background:rgba(10,9,7,0.94);align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lb-img{max-width:88vw;max-height:84vh;object-fit:contain;filter:grayscale(1) contrast(1.05)}
.lb-close{position:absolute;top:22px;right:30px;background:none;border:none;color:#fff;font-size:34px;line-height:1;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:28px;cursor:pointer;padding:14px;opacity:.75;transition:opacity .2s}
.lb-nav:hover{opacity:1}
.lb-prev{left:14px}
.lb-next{right:14px}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--bone-dim);font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:0.14em}

.credits{max-width:1000px;margin:0 auto;font-family:"Roboto Mono",monospace;font-size:12px;letter-spacing:0.08em;color:var(--bone-dim);font-style:normal}
.credits .ox{color:var(--ox)}

.listen{max-width:680px;margin:54px auto 0;padding-top:34px;border-top:1px solid var(--line-2)}
.listen .intro{font-weight:500;color:var(--bone-soft);font-size:18px;margin-bottom:22px}
.listen iframe{border:0;border-radius:0;width:100%;margin-bottom:14px;filter:grayscale(0.3)}
.listen .judge{font-family:"Roboto Mono",monospace;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--bone);margin-top:18px;font-weight:700}

.tags{max-width:680px;margin:44px auto 0;display:flex;flex-wrap:wrap;gap:10px}
.tags span{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--bone-dim);border:1px solid var(--line-2);padding:6px 12px}

.author{max-width:680px;margin:36px auto 0;padding:24px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;gap:18px;align-items:center}
.author .av{width:62px;height:62px;flex:none;border-radius:50%;background:repeating-linear-gradient(45deg,#dddce1 0 2px,transparent 2px 8px),var(--ash);border:1px solid var(--line-2);object-fit:cover}
.author .nm{font-family:"Roboto Mono",monospace;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--bone)}
.author .bio{font-size:15px;color:var(--bone-dim);line-height:1.5;margin-top:4px;font-family:"Roboto Mono",monospace}

.related{max-width:680px;margin:56px auto 0;padding:0 30px}
.related .rhead{font-family:"Roboto Mono",monospace;font-size:13px;letter-spacing:0.26em;text-transform:uppercase;color:var(--ox);border-bottom:1px solid var(--line-2);padding-bottom:14px;margin-bottom:8px}
.related .tabs{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:16px 0}

.join{margin-top:80px}