/* ============================================================
   Feature article (magazine layout) — ported from the claude.ai
   National Night Out article. EVERYTHING is scoped under .feature
   so it can't collide with site.css / pages.css (which already
   define .eyebrow, .quote, .sec, etc.). Fonts come from the site
   (--display / --body / --mono); the article's colour tokens are
   redefined locally on .feature.
   ============================================================ */
.feature{
  --orange:#E85D22; --charcoal:#1B1D1F; --charcoal-2:#2A2D30;
  --a-bone:#F4F1EC; --a-bone-2:#E7E2D9; --a-steel:#7C848B; --a-steel-dk:#5A6167;
  --a-rule:rgba(27,29,31,.14); --maxw:1180px; --colw:720px;
  background:var(--a-bone); color:var(--charcoal);
  font-family:var(--body); font-size:18px; line-height:1.65;
}
.feature img{display:block;max-width:100%}
.feature a{color:inherit}
.feature :focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* review banner (kept on staging for Mike/David; remove before production) */
.feature .review{background:#1B1D1F;color:#F4F1EC;border-bottom:3px solid var(--orange);font-family:var(--mono);font-size:12.5px;line-height:1.55}
.feature .review .inner{max-width:var(--maxw);margin:0 auto;padding:18px 24px}
.feature .review h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:0 0 10px;font-weight:600}
.feature .review ul{margin:0;padding-left:18px}
.feature .review li{margin:0 0 6px}
.feature .review li:last-child{margin-bottom:0}
.feature .review b{color:#fff;font-weight:600}

/* layout wrappers */
.feature .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.feature .col{max-width:var(--colw);margin:0 auto}

/* article header */
.feature header.article{padding:clamp(40px,6vw,64px) 0 40px}
.feature .eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:12px;margin:0 0 22px}
.feature .eyebrow::before{content:none}
.feature .eyebrow .dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--orange);flex:0 0 auto}
.feature .eyebrow .sep{color:var(--a-steel);font-weight:400}
.feature h1{font-family:var(--display);font-weight:400;font-size:clamp(2.35rem,6.2vw,4.15rem);line-height:.98;letter-spacing:-.015em;margin:0 0 26px;text-wrap:balance;text-transform:none;color:var(--charcoal)}
.feature .standfirst{font-size:clamp(1.12rem,2.1vw,1.32rem);line-height:1.55;color:var(--charcoal-2);margin:0 0 30px;max-width:44ch}
.feature .byline{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--a-steel-dk);border-top:1px solid var(--a-rule);padding-top:16px}

/* figures */
.feature figure{margin:0}
.feature .fig{margin:44px 0}
.feature .fig.bleed{max-width:var(--maxw)}
.feature .fig button.shot{display:block;width:100%;padding:0;border:0;background:var(--a-bone-2);cursor:zoom-in;position:relative;overflow:hidden}
.feature .fig button.shot img{width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.feature .fig button.shot:hover img{transform:scale(1.014)}
.feature figcaption{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--a-steel-dk);padding:12px 0 0;border-top:1px solid var(--a-rule);margin-top:10px;max-width:62ch}
.feature .hero-fig{margin:0 0 8px}

/* body */
.feature .body p{margin:0 0 1.35em}
.feature .body p.lead::first-letter{font-family:var(--display);float:left;font-size:4.15rem;line-height:.8;padding:6px 12px 0 0;color:var(--orange)}
.feature h2.sec{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);line-height:1.08;letter-spacing:-.01em;margin:56px 0 20px;padding:0;text-transform:none;color:var(--charcoal);background:none}
.feature h2.sec::before{content:"";display:block;width:34px;height:3px;background:var(--orange);margin-bottom:16px}

/* fact strip */
.feature .facts{background:var(--charcoal);color:var(--a-bone);margin:64px 0;padding:38px 0}
.feature .facts .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.feature .facts dt{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:0 0 8px}
.feature .facts dd{margin:0;font-size:15px;line-height:1.5;color:#DDD8CF}
.feature .facts dd b{color:#fff;font-weight:600;display:block}
@media(max-width:860px){.feature .facts .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.feature .facts .grid{grid-template-columns:1fr}}

/* pull quote (draft) */
.feature .quote{margin:60px auto;max-width:var(--colw);position:relative;padding:34px 0 0;border-top:3px solid var(--orange);background:none;border-bottom:0}
.feature .quote blockquote{margin:0;font-family:var(--body);font-weight:500;font-size:clamp(1.3rem,2.9vw,1.72rem);line-height:1.34;letter-spacing:-.01em;text-wrap:pretty;color:var(--charcoal)}
.feature .quote cite{display:block;margin-top:22px;font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--a-steel-dk)}
.feature .quote cite b{display:block;color:var(--charcoal);font-weight:600;letter-spacing:.08em}
.feature .draft-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--orange);color:#fff;padding:4px 9px;margin-bottom:18px}
.feature .alt-quote{margin:22px 0 0;padding:18px 20px;border:1px solid var(--a-bone-2);background:rgba(27,29,31,.03);font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--a-steel-dk)}
.feature .alt-quote b{color:var(--charcoal)}

/* gallery */
.feature .gallery-head{margin:76px 0 26px;display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--a-rule);padding-bottom:16px;flex-wrap:wrap}
.feature .gallery-head h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);margin:0;letter-spacing:-.01em;text-transform:none;color:var(--charcoal)}
.feature .gallery-head p{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--a-steel-dk)}
.feature .grid-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.feature .grid-gal button{padding:0;border:0;background:var(--a-bone-2);cursor:zoom-in;position:relative;aspect-ratio:3/2;overflow:hidden}
.feature .grid-gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .3s}
.feature .grid-gal button:hover img,.feature .grid-gal button:focus-visible img{transform:scale(1.05)}
.feature .grid-gal button::after{content:attr(data-n);position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;color:#fff;background:rgba(27,29,31,.72);padding:3px 7px;opacity:0;transition:opacity .25s}
.feature .grid-gal button:hover::after,.feature .grid-gal button:focus-visible::after{opacity:1}
@media(max-width:860px){.feature .grid-gal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.feature .grid-gal{grid-template-columns:repeat(2,1fr);gap:6px}}

/* lightbox */
.feature .lb{position:fixed;inset:0;z-index:1000;background:rgba(15,16,17,.96);display:none}
.feature .lb.open{display:block}
body.lb-open{overflow:hidden}
.feature .lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:64px 20px 108px}
.feature .lb-stage.actual{align-items:flex-start;justify-content:flex-start}
.feature .lb-stage img{max-width:100%;max-height:calc(100vh - 176px);width:auto;height:auto;margin:auto;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.feature .lb-stage.actual img{max-width:none;max-height:none;margin:0;cursor:grab}
.feature .lb-bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#EDE8DF}
.feature .lb-count{color:var(--orange);font-weight:600}
.feature .lb-tools{display:flex;gap:8px;align-items:center}
.feature .lb button{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid rgba(237,232,223,.32);color:#EDE8DF;padding:7px 13px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.feature .lb button:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.feature .lb button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.feature .lb-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 22px;background:linear-gradient(to top,rgba(15,16,17,.95),rgba(15,16,17,0));font-family:var(--mono);font-size:13px;line-height:1.5;color:#D6D0C6;text-align:center}
.feature .lb-cap span{display:block;max-width:70ch;margin:0 auto}
.feature .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:80px;display:flex;align-items:center;justify-content:center;font-size:22px!important;letter-spacing:0!important;border:0!important;background:rgba(15,16,17,.45)!important}
.feature .lb-nav:hover{background:var(--orange)!important}
.feature .lb-prev{left:8px}.feature .lb-next{right:8px}
@media(max-width:640px){
  .feature .lb-stage{padding:58px 8px 116px}
  .feature .lb-nav{width:42px;height:64px}
  .feature .lb-bar .lb-title{display:none}
}
@media(prefers-reduced-motion:reduce){
  .feature .fig button.shot:hover img,.feature .grid-gal button:hover img{transform:none}
}
@media print{.feature .review,.feature .lb{display:none}}

/* --- photographic article hero (cover image behind the headline) --- */
.feature .article-hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:#15181A center 32%/cover no-repeat;
  min-height:clamp(440px,58vw,660px);display:flex;align-items:flex-end;
  border-bottom:6px solid var(--orange);
}
.feature .article-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(15,16,17,.34),rgba(15,16,17,0) 30%,rgba(15,16,17,.30) 56%,rgba(15,16,17,.94)),
    linear-gradient(90deg,rgba(15,16,17,.74),rgba(15,16,17,.22) 60%,transparent 86%);
}
.feature .article-hero .inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.feature .article-hero header.article{padding:clamp(90px,12vw,150px) 0 clamp(34px,4.5vw,60px);max-width:800px;margin:0}
.feature .article-hero .eyebrow .sep{color:rgba(244,241,236,.6)}
.feature .article-hero h1{color:#fff}
.feature .article-hero .standfirst{color:rgba(244,241,236,.92);max-width:52ch}
.feature .article-hero .byline{color:rgba(244,241,236,.75);border-top-color:rgba(255,255,255,.26)}