:root {
  --ink:#161716; --paper:#fbfbf9; --rule:#d6d8d1; --lime:#a8bf4a; --black:#111211;
  --serif:"Bodoni Moda", Georgia, serif; --sans:"DM Sans", Arial, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); overflow-x:clip; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-header { position:relative; z-index:10; color:#fff; background:var(--black); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:64px; max-width:1320px; margin:auto; padding:0 28px; }
.brand { display:inline-flex; flex-direction:column; font-size:10px; font-weight:600; line-height:.9; letter-spacing:.13em; white-space:nowrap; }
.brand b { font-size:18px; letter-spacing:.04em; }
.desktop-nav { display:flex; align-items:stretch; height:64px; gap:4px; }
.desktop-nav > a, .nav-group button { display:grid; place-items:center; border:0; background:transparent; color:#fff; padding:0 13px; font:500 13px var(--sans); cursor:pointer; }
.nav-group { position:relative; display:grid; place-items:center; }
.nav-group button { display:flex; gap:8px; align-items:center; }
.nav-group button span { font-size:18px; font-weight:300; }
.nav-panel { position:absolute; top:100%; left:0; display:none; min-width:205px; padding:10px; background:#252724; border:1px solid #3c3f3a; }
.nav-group:last-of-type .nav-panel { right:0; left:auto; }
.nav-group.is-open .nav-panel { display:grid; }
.nav-panel a { padding:9px 10px; font-size:13px; }
.nav-panel a:hover { background:var(--lime); color:var(--ink); }
.menu-toggle { display:none; grid-template-columns:20px auto; grid-template-rows:repeat(3,1px); align-items:center; column-gap:10px; row-gap:5px; border:0; background:none; color:#fff; font:600 12px var(--sans); letter-spacing:.05em; text-transform:uppercase; }
.menu-toggle span { display:block; grid-column:1; width:19px; height:1px; background:currentColor; }
.menu-toggle span:nth-of-type(1) { grid-row:1; }
.menu-toggle span:nth-of-type(2) { grid-row:2; }
.menu-toggle span:nth-of-type(3) { grid-row:3; }
.menu-toggle i { grid-column:2; grid-row:1 / 4; margin:0; font-style:normal; }
.mobile-menu { padding:12px 28px 22px; background:#1d1f1c; border-top:1px solid #3c3f3a; }
.mobile-menu[hidden] { display:none !important; }
.mobile-menu a, .mobile-menu summary { display:block; color:#fff; padding:12px 0; border-bottom:1px solid #3c3f3a; font-size:15px; cursor:pointer; }
.mobile-menu details > a { padding-left:15px; color:#e1e2db; font-size:14px; }
.mobile-menu summary { list-style:none; }
.mobile-menu summary::-webkit-details-marker { display:none; }

.article-head { max-width:1080px; margin:48px auto 0; }
.hero-photo { margin:0; overflow:hidden; background:#e6e8e1; }
.hero-photo img { width:100%; aspect-ratio:16/8.2; object-fit:cover; filter:saturate(.88) contrast(1.04); }
.head-copy { max-width:1080px; margin:36px auto 0; }
.eyebrow { margin:0 0 14px; color:#596052; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.head-copy h1 { max-width:100%; margin:0; font:500 clamp(32px,4vw,56px)/.96 var(--serif); letter-spacing:-.045em; text-wrap:balance; }
.dek { max-width:900px; margin:18px 0 22px; color:#363835; font:400 18px/1.55 var(--serif); }
.byline { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:13px 2px; border-block:1px solid var(--rule); color:#686b65; font-size:10px; }
.byline span + span { padding-left:14px; border-left:1px solid var(--rule); }

.article-prose { width:min(calc(100% - 44px),1080px); margin:34px auto 0; color:#333530; font:400 16px/1.72 var(--sans); }
.article-prose p { margin:0 0 20px; }
.article-prose .lead { color:#232420; font:400 20px/1.55 var(--serif); }
.article-prose .lead:first-letter { float:left; padding:9px 8px 0 0; color:var(--lime); font:500 66px/.72 var(--serif); }
.article-prose h2 { margin:48px 0 14px; color:#191a18; font:500 31px/1.08 var(--serif); letter-spacing:-.03em; }
.article-prose h3 { margin:28px 0 9px; color:#191a18; font:600 15px/1.25 var(--sans); }
.article-prose ul { margin:0 0 22px; padding-left:20px; }
.article-prose li { margin:7px 0; }
.article-prose strong { font-weight:700; }
.article-prose code { padding:2px 4px; background:#e8e9e3; font:12px/1.4 monospace; overflow-wrap:anywhere; }
.table-wrap { overflow:auto; margin:28px 0; border-block:1px solid var(--rule); }
table { width:100%; min-width:560px; border-collapse:collapse; font-size:13px; }
th,td { padding:10px 9px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; }
th { background:#f0f1eb; color:#22251f; font-weight:700; }

.faq { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:50px; max-width:1080px; margin:74px auto 72px; padding-top:30px; border-top:1px solid var(--rule); }
.faq h2, .newsletter h2 { margin:0; font:500 clamp(30px,3vw,43px)/1 var(--serif); letter-spacing:-.04em; }
.faq-list { border-top:1px solid var(--ink); }
.faq details { border-bottom:1px solid var(--rule); }
.faq summary { position:relative; padding:17px 26px 17px 0; font-size:15px; font-weight:600; list-style:none; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:'+'; position:absolute; right:2px; top:12px; font-size:21px; font-weight:400; }
.faq details[open] summary:after { content:'–'; }
.faq summary span { margin-right:13px; color:#7d8575; font-size:10px; letter-spacing:.1em; }
.faq details p { margin:0; padding:0 28px 18px 31px; color:#50534e; font-size:14px; line-height:1.6; }

.newsletter { display:flex; align-items:center; justify-content:space-between; gap:36px; padding:34px max(28px,calc((100% - 1080px)/2)); background:var(--lime); }
.newsletter .eyebrow { color:#36400f; }
.newsletter h2 { font-size:31px; }
.newsletter form { display:flex; min-width:min(100%,420px); }
.newsletter input { min-width:0; width:100%; padding:13px 14px; border:1px solid #19200b; background:#fafaf6; font:14px var(--sans); }
.newsletter button { border:1px solid #19200b; background:#141510; color:#fff; padding:0 20px; font:600 12px var(--sans); text-transform:uppercase; cursor:pointer; }
footer { display:flex; flex-direction:column; align-items:flex-start; gap:18px; min-height:248px; padding:48px max(28px,calc((100% - 1080px)/2)); background:#111211; color:#d5d7d1; }
footer .brand { color:#fff; }
footer p { max-width:340px; margin:0; font:400 16px/1.5 var(--serif); }
footer small { margin-top:auto; color:#91958d; font-size:10px; }

@media (max-width:800px) {
  .desktop-nav { display:none; }
  .nav-wrap { min-height:56px; padding:0 20px; }
  .menu-toggle { display:grid; }
  .mobile-menu { padding-inline:20px; }
  .article-head { margin-top:25px; }
  .head-copy, .article-prose, .faq { width:min(calc(100% - 40px),680px); }
  .head-copy { margin-top:27px; }
  .dek { font-size:17px; }
  .article-prose { font-size:15px; }
  .article-prose .lead { font-size:19px; }
  .article-prose h2 { margin-top:38px; font-size:28px; }
  .faq { display:block; margin-block:52px; }
  .faq > div:first-child { margin-bottom:24px; }
  .newsletter { display:block; padding:31px 20px; }
  .newsletter h2 { margin-bottom:23px; font-size:29px; }
  .newsletter form { width:100%; min-width:0; }
  footer { min-height:230px; padding:42px 20px; }
}
@media (max-width:440px) {
  .brand b { font-size:16px; }
  .head-copy h1 { font-size:39px; }
  .byline { gap:8px; }
  .byline span + span { padding-left:8px; }
  .article-prose .lead:first-letter { font-size:58px; }
  .newsletter button { padding-inline:13px; }
}