:root {
    --bg: #080a09;
    --bg-soft: #111411;
    --panel: #151916;
    --line: #2a2f2b;
    --text: #f5f4ed;
    --muted: #aeb5ae;
    --accent: #d7f24b;
    --accent-2: #f4cb48;
    --paper: #f2f0e7;
    --ink: #151713;
    --max: 1460px;
    --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-family: "Nunito", "Avenir Next", "Trebuchet MS", Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.eyebrow { color: var(--accent); font-weight: 900; font-size: 0.78rem; letter-spacing: .09em; text-transform: uppercase; }
.muted { color: var(--muted); }

.site-header { position: relative; border-bottom: 1px solid var(--line); background: rgba(8,10,9,.96); z-index: 20; }
.header-top { min-height: 118px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.header-note { font-size: .78rem; color: var(--muted); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.brand { display: inline-flex; align-items: center; gap: 14px; font-weight: 1000; font-size: clamp(2rem,4vw,3.3rem); letter-spacing: -.055em; }
.brand-mark { width: 48px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); position: relative; flex: 0 0 auto; }
.brand-mark::after { content:""; position:absolute; width:18px; height:18px; background:var(--bg); border-radius:50%; inset:50% auto auto 50%; transform:translate(-50%,-50%); }
.header-cta { justify-self: end; background: var(--accent); color: var(--ink); border-radius: 4px; padding: 13px 18px; font-weight: 1000; font-size: .8rem; text-transform: uppercase; }
.tagline { grid-column: 1 / -1; text-align: center; margin-top: -28px; padding-bottom: 18px; color: #d7dbd4; font-weight: 700; }
.nav-row { border-top: 1px solid var(--line); }
.nav-inner { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 34px; }
.nav-inner a { font-weight: 850; font-size: .92rem; }
.nav-inner a:hover { color: var(--accent); }
.menu-btn { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 50%; }

.hero { padding: 30px 0 18px; }
.hero-grid { display:grid; grid-template-columns: 0.88fr 1.72fr 0.82fr; gap: 22px; align-items: start; }
.hero-copy { display:flex; flex-direction:column; justify-content:flex-start; padding: 14px 8px 0 0; }
.hero-copy h1 { margin: 10px 0 12px; font-size: clamp(2.2rem,3.4vw,4.6rem); line-height:.95; letter-spacing:-.045em; }
.hero-copy p { color:#c4cbc3; margin:0 0 18px; font-size:1.03rem; }
.byline { font-size:.78rem; font-weight:850; color:#dfe3dd; }
.hero-image { height: 515px; min-height: 0; border-radius: 2px; overflow:hidden; background:#1d211d; }
.hero-image img { width:100%; height:100%; object-fit:cover; }
.hero-rail { border-left: 1px solid var(--line); padding-left: 20px; }
.rail-card { padding: 0 0 22px; margin-bottom: 22px; border-bottom:1px solid var(--line); }
.rail-card:last-child { border-bottom:0; }
.rail-card img { aspect-ratio: 16/9; object-fit: cover; margin-bottom: 13px; }
.rail-card h2 { margin:5px 0 7px; line-height:1.05; font-size:clamp(1.3rem,1.7vw,2rem); letter-spacing:-.03em; }
.rail-card p { color:var(--muted); font-size:.9rem; margin:0; }

.section { padding: 48px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:20px; border-top:1px solid var(--line); padding-top:18px; }
.section-head h2 { margin:0; font-size:clamp(1.8rem,3vw,3.4rem); letter-spacing:-.045em; }
.section-link { color:var(--accent); font-weight:900; font-size:.88rem; }

.story-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.story-card { padding:16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0; }
.story-card img { width:100%; aspect-ratio: 16/10; object-fit:cover; margin-bottom:16px; }
.story-card h3 { font-size:clamp(1.35rem,2vw,2.15rem); line-height:1.06; letter-spacing:-.035em; margin:6px 0 10px; }
.story-card p { color:var(--muted); margin:0 0 14px; }
.story-meta { display:flex; gap:12px; font-size:.75rem; font-weight:800; color:#d2d7d1; }

.feature-strip { display:grid; grid-template-columns:1.15fr .85fr; gap:0; border:1px solid var(--line); background:var(--panel); }
.feature-strip img { width:100%; height:100%; min-height:430px; object-fit:cover; }
.feature-copy { padding: clamp(28px,5vw,70px); display:flex; flex-direction:column; justify-content:center; }
.feature-copy h2 { font-size:clamp(2.2rem,4.4vw,5.8rem); line-height:.92; letter-spacing:-.055em; margin:10px 0 20px; }
.feature-copy p { color:#c7cec6; max-width:60ch; }
.text-link { display:inline-flex; align-items:center; gap:10px; color:var(--accent); font-weight:950; margin-top:12px; }
.text-link::after { content:"→"; transition:.2s; }
.text-link:hover::after { transform:translateX(4px); }

.newsletter { background:var(--accent); color:var(--ink); padding:34px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; }
.newsletter h2 { font-size:clamp(2rem,4vw,4.5rem); line-height:.92; letter-spacing:-.05em; margin:0 0 8px; }
.newsletter p { margin:0; max-width:65ch; }
.newsletter .badge { border:2px solid var(--ink); padding:14px 18px; font-weight:950; text-transform:uppercase; font-size:.8rem; }

.site-footer { border-top:1px solid var(--line); padding:38px 0 55px; margin-top:30px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px; }
.footer-brand { font-size:2rem; font-weight:1000; letter-spacing:-.04em; }
.footer-grid h3 { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin:0 0 12px; }
.footer-grid a { display:block; color:#c9cec8; margin:6px 0; }
.footer-grid p { color:var(--muted); max-width:55ch; }
.copyright { color:#7f877f; margin-top:24px; font-size:.76rem; }

/* article */
.article-hero { padding:58px 0 28px; }
.article-hero .narrow { max-width:1080px; margin:auto; }
.article-hero h1 { font-size:clamp(3rem,7vw,7.6rem); line-height:.89; letter-spacing:-.06em; margin:12px 0 20px; }
.article-dek { color:#c2c9c1; font-size:clamp(1.06rem,2vw,1.42rem); max-width:850px; }
.article-meta { display:flex; gap:18px; flex-wrap:wrap; font-size:.8rem; font-weight:900; margin-top:22px; }
.article-cover { width:min(calc(100% - 48px), 1320px); margin:0 auto; }
.article-cover img { width:100%; max-height:740px; object-fit:cover; }
.article-layout { width:min(calc(100% - 48px), 1180px); margin:48px auto 80px; display:grid; grid-template-columns:220px minmax(0,760px); gap:64px; justify-content:center; }
.article-aside { position:sticky; top:24px; align-self:start; font-size:.8rem; color:var(--muted); }
.article-aside strong { color:var(--text); display:block; margin-bottom:8px; }
.article-body { color:#e5e8e2; font-size:1.08rem; }
.article-body p { margin:0 0 1.25em; }
.article-body h2 { font-size:clamp(1.8rem,3vw,3.1rem); letter-spacing:-.04em; line-height:1; margin:1.7em 0 .55em; color:#fff; }
.article-body ul { padding-left:1.2em; }
.article-body li { margin:.5em 0; }
.article-body blockquote { margin:2em 0; padding:1.3em 1.5em; border-left:5px solid var(--accent); background:#141814; font-size:1.32rem; line-height:1.35; }
.source-note { color:#9ea79e; font-size:.85rem; border-top:1px solid var(--line); padding-top:16px; }
.related { width:min(calc(100% - 48px), 1180px); margin:0 auto 70px; }

/* listing / about */
.page-hero { padding:70px 0 30px; }
.page-hero h1 { font-size:clamp(3.6rem,8vw,8.5rem); line-height:.86; letter-spacing:-.065em; margin:0 0 20px; }
.page-hero p { color:var(--muted); font-size:1.2rem; max-width:760px; }
.listing { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-bottom:70px; }
.list-item { display:grid; grid-template-columns:190px 1fr; gap:18px; padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.list-item img { width:100%; height:150px; object-fit:cover; }
.list-item h2 { font-size:1.45rem; line-height:1.05; margin:5px 0 8px; letter-spacing:-.03em; }
.list-item p { color:var(--muted); font-size:.9rem; margin:0; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; margin-bottom:70px; }
.about-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; position:sticky; top:24px; }
.about-copy { font-size:1.08rem; color:#dce1da; }
.about-copy h2 { font-size:2.5rem; line-height:1; letter-spacing:-.04em; }
.fact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:32px 0; }
.fact { background:var(--bg-soft); padding:22px; }
.fact strong { font-size:2rem; display:block; color:var(--accent); }

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr 1.5fr; }
    .hero-rail { grid-column:1 / -1; border-left:0; padding-left:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; border-top:1px solid var(--line); padding-top:20px; }
    .hero-rail .rail-card { border-bottom:0; padding:0; margin:0; }
    .story-grid { grid-template-columns:repeat(2,1fr); }
    .article-layout { grid-template-columns:160px minmax(0,720px); gap:36px; }
}

@media (max-width: 760px) {
    .shell { width:min(calc(100% - 28px), var(--max)); }
    .header-top { min-height:86px; grid-template-columns:auto 1fr auto; }
    .header-note, .header-cta, .tagline { display:none; }
    .brand { justify-self:start; font-size:2rem; gap:10px; }
    .brand-mark { width:34px; }
    .brand-mark::after { width:12px; height:12px; }
    .menu-btn { display:inline-grid; place-items:center; justify-self:end; }
    .nav-row { border-top:0; }
    .nav-inner { display:none; position:absolute; inset:86px 0 auto; background:#0b0e0c; padding:14px; flex-direction:column; align-items:flex-start; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .nav-inner.open { display:flex; }
    .nav-inner a { width:100%; padding:14px 10px; border-bottom:1px solid var(--line); }
    .hero { padding-top:18px; }
    .hero-grid { grid-template-columns:1fr; gap:18px; }
    .hero-copy { order:2; padding:0; }
    .hero-image { order:1; min-height:300px; }
    .hero-copy h1 { font-size:2.7rem; }
    .hero-rail { order:3; grid-template-columns:1fr; }
    .rail-card { display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:start; border-bottom:1px solid var(--line)!important; padding-bottom:14px!important; }
    .rail-card img { margin:0; aspect-ratio:1.3; height:100%; object-fit:cover; }
    .rail-card h2 { font-size:1.35rem; }
    .story-grid { grid-template-columns:1fr; }
    .story-card { padding:14px; }
    .feature-strip { grid-template-columns:1fr; }
    .feature-strip img { min-height:300px; }
    .feature-copy h2 { font-size:3rem; }
    .newsletter { grid-template-columns:1fr; padding:24px; }
    .footer-grid { grid-template-columns:1fr; }
    .article-hero { padding-top:38px; }
    .article-hero h1 { font-size:3.25rem; }
    .article-cover { width:calc(100% - 28px); }
    .article-layout { width:calc(100% - 28px); grid-template-columns:1fr; margin-top:30px; }
    .article-aside { position:static; border-bottom:1px solid var(--line); padding-bottom:16px; }
    .article-body { font-size:1rem; }
    .page-hero h1 { font-size:4rem; }
    .listing { grid-template-columns:1fr; }
    .list-item { grid-template-columns:115px 1fr; }
    .list-item img { height:110px; }
    .about-grid { grid-template-columns:1fr; }
    .about-grid img { position:static; }
    .fact-grid { grid-template-columns:1fr; }
}