
:root {
  --ink: #1f2524;
  --muted: #656d6a;
  --line: #d9ddda;
  --paper: #f4f5f2;
  --white: #ffffff;
  --brand: #0a5668;
  --brand-dark: #073d49;
  --accent: #dfff76;
  --accent-2: #ff6b2c;
  --max: 1240px;
  --radius: 2px;
  --font: "Nexa", "Arial Narrow", Arial, Helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  line-height: 1.48;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
button, input { font: inherit; }

.site-topline {
  min-height: 32px;
  background: var(--accent);
  color: #26301f;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}
.site-topline .inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.brandbar {
  background: var(--brand-dark);
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.brandbar .inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  min-height: 90px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.brandbar .brand { display:flex; justify-content:center; align-items:center; }
.brandbar .brand img { width: min(335px, 54vw); height: auto; }
.brand-actions { justify-self: end; display:flex; align-items:center; gap:14px; font-size:12px; font-weight:700; }
.brand-actions .pill { border:1px solid rgba(255,255,255,.55); padding:8px 12px; border-radius:999px; }
.brand-kicker { font-size:11px; letter-spacing:.15em; text-transform:uppercase; opacity:.72; }

.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.navbar .inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navlinks { display:flex; align-items:center; gap: 24px; list-style:none; margin:0; padding:0; font-size:12px; font-weight:700; }
.navlinks a { padding:17px 0 14px; display:block; border-bottom:3px solid transparent; }
.navlinks a:hover { border-bottom-color: var(--accent-2); }
.menu-toggle { display:none; background:none; border:0; padding:12px; cursor:pointer; color:var(--ink); }
.menu-toggle span { display:block; width:24px; height:2px; background:currentColor; margin:5px 0; }

.page-shell { width:min(var(--max), calc(100% - 40px)); margin:0 auto; }
.mast-meta { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:32px 0 11px; border-bottom:1px dotted #828a86; font-size:11px; font-weight:700; }
.mast-meta .topics { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.mast-meta .topics a::after { content:" ·"; margin-left:10px; color:#a4aaa7; }
.mast-meta .topics a:last-child::after { display:none; }

.hero-grid {
  display:grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(210px, .55fr) minmax(240px, .65fr);
  gap:42px;
  padding:28px 0 44px;
}
.hero-main h1 { margin:0 0 12px; font-size:clamp(38px, 5.2vw, 74px); line-height:.98; letter-spacing:-.045em; font-weight:800; max-width:930px; }
.hero-main .dek { max-width:760px; font-family:var(--serif); font-size:20px; line-height:1.45; color:#454c49; margin:0 0 20px; }
.hero-main .byline { font-size:11px; font-weight:700; display:flex; gap:8px; align-items:center; margin:0 0 24px; }
.hero-main .hero-img { width:100%; aspect-ratio: 16/9; object-fit:cover; background:#ddd; }
.hero-main .eyebrow, .section-eyebrow { color:var(--brand); text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:800; margin-bottom:12px; }

.side-col h2, .featured-col h2 { font-size:11px; margin:0; padding:0 0 10px; border-bottom:1px solid #8a918e; text-transform:none; }
.latest-list { list-style:none; padding:0; margin:0; }
.latest-list li { padding:15px 0; border-bottom:1px solid var(--line); }
.latest-list a { font-family:var(--serif); font-size:17px; line-height:1.24; display:block; }
.latest-list .mini { margin-top:7px; font-size:10px; font-family:var(--font); color:var(--muted); font-weight:700; }
.feature-card { padding:14px 0 16px; border-bottom:1px solid var(--line); }
.feature-card img { width:100%; aspect-ratio: 16/9; object-fit:cover; margin-bottom:9px; }
.feature-card h3 { font-family:var(--serif); font-size:18px; line-height:1.28; margin:0 0 7px; font-weight:500; }
.feature-card .meta { font-size:10px; color:var(--muted); font-weight:700; }

.band { border-top:2px solid var(--ink); padding:18px 0 48px; }
.band-head { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:20px; }
.band-head h2 { margin:0; font-size:31px; line-height:1; letter-spacing:-.025em; }
.band-head p { margin:0; font-family:var(--serif); color:var(--muted); max-width:620px; }
.card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.story-card { border-top:1px solid var(--ink); padding-top:10px; }
.story-card img { width:100%; aspect-ratio: 4/3; object-fit:cover; margin-bottom:12px; }
.story-card .tag { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--brand); font-weight:800; margin-bottom:7px; }
.story-card h3 { font-family:var(--serif); font-size:22px; line-height:1.17; margin:0 0 8px; font-weight:500; }
.story-card p { font-family:var(--serif); color:#535b57; margin:0; font-size:15px; }

.split-feature { display:grid; grid-template-columns:1.1fr .9fr; background:var(--brand-dark); color:white; margin:10px 0 50px; }
.split-feature img { width:100%; height:100%; min-height:390px; object-fit:cover; }
.split-copy { padding:45px; display:flex; flex-direction:column; justify-content:center; }
.split-copy .kicker { color:var(--accent); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.split-copy h2 { font-size:clamp(34px,4vw,56px); line-height:1.02; margin:12px 0 18px; letter-spacing:-.04em; }
.split-copy p { font-family:var(--serif); font-size:18px; opacity:.82; margin:0 0 22px; }
.read-link { display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.11em; }
.read-link::after { content:"→"; font-size:16px; }

.newsletter { margin:0 0 52px; padding:26px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
.newsletter h2 { font-size:30px; margin:0 0 6px; }
.newsletter p { margin:0; font-family:var(--serif); color:var(--muted); }
.newsletter .cta { justify-self:end; background:var(--accent); color:#26301f; padding:12px 18px; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }

.site-footer { background:#18201e; color:#e5e9e7; margin-top:30px; }
.site-footer .inner { width:min(var(--max), calc(100% - 40px)); margin:0 auto; padding:38px 0 28px; display:grid; grid-template-columns:1.1fr 2fr; gap:48px; }
.site-footer img { width:270px; margin-bottom:16px; }
.site-footer p { max-width:430px; color:#aeb7b3; font-family:var(--serif); }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer-links h3 { color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.footer-links a { display:block; font-family:var(--serif); color:#e5e9e7; margin:7px 0; }
.footer-bottom { border-top:1px solid #333c39; color:#909a96; font-size:10px; padding:14px 0 20px; width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

/* Article pages */
.article-shell { width:min(1080px, calc(100% - 40px)); margin:0 auto; }
.article-head { padding:42px 0 28px; border-bottom:1px solid var(--line); }
.article-head .crumbs { font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color:var(--brand); margin-bottom:18px; }
.article-head h1 { font-size:clamp(42px,6.2vw,78px); letter-spacing:-.045em; line-height:.98; margin:0 0 18px; max-width:1000px; }
.article-head .lead { font-family:var(--serif); font-size:21px; line-height:1.48; color:#4e5753; max-width:820px; margin:0 0 18px; }
.article-head .article-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; font-weight:700; color:#5b625f; }
.article-hero { width:100%; aspect-ratio:16/8.2; object-fit:cover; margin:28px 0 0; }
.article-grid { display:grid; grid-template-columns:minmax(0, 740px) 1fr; gap:62px; padding:36px 0 56px; align-items:start; }
.article-body { font-family:var(--serif); font-size:19px; line-height:1.72; }
.article-body p { margin:0 0 24px; }
.article-body h2 { font-family:var(--font); font-size:32px; line-height:1.08; letter-spacing:-.025em; margin:40px 0 16px; }
.article-body h3 { font-family:var(--font); font-size:24px; margin:34px 0 12px; }
.article-body ul, .article-body ol { padding-left:24px; margin:0 0 24px; }
.article-body li { margin-bottom:9px; }
.article-aside { position:sticky; top:76px; border-top:2px solid var(--ink); padding-top:12px; }
.article-aside h3 { margin:0 0 14px; font-size:12px; }
.article-aside a { display:block; padding:12px 0; border-bottom:1px solid var(--line); font-family:var(--serif); line-height:1.25; }
.article-aside .tag { display:inline-block; background:var(--accent); color:#25301f; border-radius:999px; font-family:var(--font); font-size:10px; font-weight:800; padding:5px 8px; margin:0 5px 7px 0; }

/* Category pages */
.category-head { padding:46px 0 22px; border-bottom:1px solid var(--line); }
.category-head h1 { font-size:clamp(44px,6vw,72px); line-height:1; letter-spacing:-.04em; margin:0 0 12px; }
.category-head p { max-width:760px; font-family:var(--serif); font-size:19px; color:var(--muted); margin:0; }
.category-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:30px 0 60px; }
.category-list .story-card h3 { font-size:24px; }

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr); gap:30px; }
  .featured-col { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .featured-col > h2 { grid-column:1 / -1; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-grid { grid-template-columns:1fr; gap:26px; }
  .article-aside { position:static; }
  .category-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .site-topline .inner, .brandbar .inner, .navbar .inner, .page-shell, .site-footer .inner, .footer-bottom, .article-shell { width:min(100% - 28px, var(--max)); }
  .site-topline { min-height:28px; }
  .site-topline .inner { font-size:10px; }
  .site-topline .inner span:last-child { display:none; }
  .brandbar .inner { min-height:72px; grid-template-columns:40px 1fr 40px; }
  .brand-kicker, .brand-actions { display:none; }
  .brandbar .brand img { width:min(280px, 72vw); }
  .navbar .inner { justify-content:space-between; min-height:48px; }
  .menu-toggle { display:block; margin-left:auto; }
  .navlinks { display:none; position:absolute; top:48px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); padding:10px 14px 14px; gap:0; flex-direction:column; align-items:stretch; box-shadow:0 15px 22px rgba(0,0,0,.09); }
  .navlinks.open { display:flex; }
  .navlinks a { padding:12px 4px; border-bottom:1px solid #ecefed; }
  .mast-meta { padding-top:22px; align-items:flex-start; }
  .mast-meta .topics { display:none; }
  .hero-grid { display:block; padding-top:22px; }
  .hero-main h1 { font-size:clamp(42px,12vw,62px); }
  .hero-main .dek { font-size:18px; }
  .side-col { margin-top:28px; }
  .featured-col { display:grid; grid-template-columns:1fr 1fr; margin-top:28px; }
  .feature-card h3 { font-size:17px; }
  .band { padding-bottom:36px; }
  .band-head { display:block; }
  .band-head p { margin-top:8px; }
  .card-grid { grid-template-columns:1fr 1fr; gap:18px 14px; }
  .story-card h3 { font-size:20px; }
  .story-card p { font-size:14px; }
  .split-feature { grid-template-columns:1fr; }
  .split-feature img { min-height:260px; }
  .split-copy { padding:28px 22px 32px; }
  .newsletter { grid-template-columns:1fr; }
  .newsletter .cta { justify-self:start; }
  .site-footer .inner { grid-template-columns:1fr; gap:22px; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .article-head { padding-top:30px; }
  .article-head h1 { font-size:clamp(42px,12vw,62px); }
  .article-head .lead { font-size:18px; }
  .article-hero { aspect-ratio:4/3; }
  .article-grid { padding-top:28px; }
  .article-body { font-size:18px; line-height:1.65; }
  .article-body h2 { font-size:28px; }
  .category-list { grid-template-columns:1fr 1fr; gap:18px 14px; }
}

@media (max-width: 500px) {
  .hero-main h1 { font-size:40px; }
  .featured-col, .card-grid, .category-list { grid-template-columns:1fr; }
  .feature-card { display:grid; grid-template-columns:115px 1fr; gap:12px; align-items:start; }
  .feature-card img { margin:0; aspect-ratio:1/1; }
  .feature-card .meta { grid-column:2; }
  .footer-links { grid-template-columns:1fr; }
  .story-card img { aspect-ratio:16/10; }
  .article-head h1 { font-size:39px; }
}
