/* Home page featured story. Phone first. */
.feature-story{background:var(--navy);color:var(--cream);border-bottom:6px solid var(--acid)}
.feature-inner{max-width:1440px;margin:auto;display:grid;grid-template-columns:1fr;gap:0}
.feature-media{position:relative;margin:0;background:#0b1d3d}
.feature-media img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 45%}
.feature-media figcaption{font-size:10px;line-height:1.5;color:#aeb9cd;padding:8px 5vw 0}
.feature-media figcaption a{color:inherit}
.feature-tag{position:absolute;left:5vw;top:14px;background:var(--acid);color:var(--navy);font-size:10px;font-weight:700;letter-spacing:.12em;padding:6px 10px}
.feature-copy{padding:20px 5vw 28px;min-width:0}
.feature-copy .eyebrow{color:var(--acid);margin-bottom:12px;font-size:10px}
.feature-copy h2{font-size:clamp(34px,9.4vw,72px);line-height:1;letter-spacing:-.045em;font-weight:600;margin:0 0 14px}
.feature-copy h2 em{color:var(--acid)}
.feature-deck{font-size:16px;line-height:1.6;color:#dfe5ef;max-width:620px;margin:0 0 18px}
.feature-facts{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:0;border-top:1px solid #33405b}
.feature-facts li{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #33405b;font-size:14px;line-height:1.5}
.feature-facts b{font-family:var(--head);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--acid);font-weight:600;padding-top:2px}
.feature-label{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;margin-left:6px;vertical-align:1px;border-radius:2px}
.feature-label.reported{background:#c9b8ff;color:#0b1630}
.feature-label.listing{background:#f6e2c2;color:#5c3b12}
.feature-label.fact{background:#caff24;color:#07152f}
.feature-actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.feature-actions .button{font-size:13px;padding:13px 18px}
.feature-actions .feature-more{font-size:13px;font-weight:600;color:var(--cream)}
.feature-note{font-size:11px;line-height:1.6;color:#aeb9cd;margin:16px 0 0}
@media(min-width:900px){
.feature-inner{grid-template-columns:1.05fr 1fr}
.feature-inner{align-items:start}
.feature-media{position:sticky;top:0}
.feature-media figcaption{padding:10px 4vw 14px}
.feature-tag{left:4vw;top:22px}
.feature-copy{padding:44px 4vw 44px 3.5vw}
.feature-copy h2{font-size:clamp(44px,4.6vw,78px)}
.feature-deck{font-size:18px}
.feature-facts li{grid-template-columns:120px 1fr;font-size:15px}
}

/* Second feature: lighter card under the lead story. Phone first. */
.feature-second{background:var(--cream);color:var(--navy);border-bottom:1px solid var(--line)}
.second-inner{max-width:1440px;margin:auto;display:grid;grid-template-columns:1fr;gap:0}
.second-art{margin:0;background:#0b1d3d}
.second-art img{width:100%;height:auto;aspect-ratio:16/10;display:block}
.second-art figcaption{font-size:10px;line-height:1.5;color:#aeb9cd;padding:8px 5vw 10px}
.second-copy{padding:22px 5vw 30px;min-width:0}
.second-copy .eyebrow{color:var(--blue);margin-bottom:12px;font-size:10px}
.second-copy h2{font-size:clamp(28px,7.6vw,56px);line-height:1.02;letter-spacing:-.04em;font-weight:600;margin:0 0 14px}
.second-copy h2 em{color:var(--blue)}
.second-deck{font-size:16px;line-height:1.6;color:#2b3850;max-width:620px;margin:0 0 18px}
.second-facts{border-top-color:var(--line)}
.second-facts li{border-bottom-color:var(--line)}
.second-facts b{color:var(--blue)}
.second-more{font-size:13px;font-weight:600;color:var(--navy)}
.second-note{font-size:11px;line-height:1.6;color:var(--muted);margin:16px 0 0}
@media(min-width:900px){
.second-inner{grid-template-columns:1fr 1.05fr;align-items:start}
.second-art{order:2;position:sticky;top:0}
.second-art figcaption{padding:10px 4vw 14px}
.second-copy{padding:40px 3.5vw 44px 4vw}
.second-copy h2{font-size:clamp(36px,3.6vw,60px)}
.second-deck{font-size:17px}
.second-facts li{grid-template-columns:120px 1fr;font-size:15px}
}

/* Feature carousel: the day's feature stories side by side, one at a time. Swipe, the tabs, or the arrows.
   Works without JavaScript: the tabs are anchor links and the track scrolls. public/feature-carousel.js adds arrows and state. */
.feature-carousel{position:relative;background:var(--navy)}
.feature-carousel-bar{display:flex;align-items:center;gap:10px;padding:10px 5vw;background:var(--navy);border-bottom:1px solid #33405b;overflow-x:auto;scrollbar-width:none}
.feature-carousel-bar::-webkit-scrollbar{display:none}
.feature-carousel-label{font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--acid);white-space:nowrap;margin-right:4px}
.feature-carousel-tabs{display:flex;gap:8px;flex:1 1 auto}
.feature-carousel-tabs a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:600;color:#dfe5ef;text-decoration:none;border:1px solid #33405b;border-radius:999px;padding:6px 12px}
.feature-carousel-tabs a span{font-size:10px;color:#aeb9cd}
.feature-carousel-tabs a[aria-current="true"]{background:var(--acid);border-color:var(--acid);color:var(--navy)}
.feature-carousel-tabs a[aria-current="true"] span{color:var(--navy)}
.feature-carousel-arrows{display:flex;gap:6px}
.feature-carousel-arrows[hidden]{display:none}
.feature-carousel-arrows button{width:34px;height:34px;border-radius:999px;border:1px solid #33405b;background:transparent;color:var(--cream);font-size:16px;line-height:1;cursor:pointer}
.feature-carousel-arrows button:disabled{opacity:.35;cursor:default}
.feature-carousel-arrows button:focus-visible,.feature-carousel-tabs a:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.feature-carousel-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
.feature-carousel-track::-webkit-scrollbar{display:none}
.feature-carousel-track:focus-visible{outline:2px solid var(--acid);outline-offset:-2px}
.feature-carousel-track>section{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;border-bottom:0}
.feature-carousel .feature-media,.feature-carousel .second-art{position:relative;top:auto}
.feature-carousel-foot{height:6px;background:var(--acid)}
@media(prefers-reduced-motion:reduce){.feature-carousel-track{scroll-behavior:auto}}

/* EZPZ card: warm variant of the second-feature card. */
.feature-ezpz{background:#fff4e6}
.feature-ezpz .second-art{background:#ff8a5c}
.feature-ezpz .second-art figcaption{color:#5c3b12;background:#fff4e6}
.feature-ezpz .second-copy .eyebrow,.feature-ezpz .second-copy h2 em,.feature-ezpz .second-facts b{color:#b4441f}
.feature-bonfire{background:#fff1e3}
.feature-bonfire .second-art{background:#e8692c}
.feature-bonfire .second-art img{object-fit:cover}
.feature-bonfire .second-art figcaption{color:#5c2a12;background:#fff1e3}
.feature-bonfire .second-copy .eyebrow,.feature-bonfire .second-copy h2 em,.feature-bonfire .second-facts b{color:#b8431c}
