:root {
  --ink:#10110f;
  --paper:#f5efd9;
  --white:#fffdf6;
  --sun:#eebd2c;
  --teal:#0c9995;
  --turquoise:#0c9995;
  --red:#c9162b;
  --muted:rgba(16,17,15,.67);
  --line:rgba(16,17,15,.2);
}
* { box-sizing:border-box; }
html { background:var(--paper); }
body {
  margin:0;
  color:var(--ink);
  background:linear-gradient(90deg,rgba(12,153,149,.075) 1px,transparent 1px) 0 0/38px 38px,var(--paper);
  font-family:Georgia,"Times New Roman",serif;
}
a { color:inherit; }
img { display:block; width:100%; }
.topbar {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:13px clamp(16px,4vw,52px);
  border-bottom:1px solid var(--line);
  background:rgba(245,239,217,.96);
  backdrop-filter:blur(14px);
  font-family:Arial,sans-serif;
}
.brand { text-decoration:none; font-weight:950; }
.brand strong { font-size:clamp(30px,4vw,56px); line-height:.78; }
.brand span { margin-left:12px; color:var(--muted); font-size:13px; font-weight:800; }
.back {
  padding:10px 12px;
  border:1px solid var(--ink);
  background:var(--sun);
  text-decoration:none;
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
}
main { width:min(1460px,100%); margin:0 auto; padding:clamp(18px,3vw,44px); }
.hero {
  display:grid;
  grid-template-columns:minmax(500px,.92fr) minmax(520px,1.08fr);
  gap:clamp(24px,4vw,58px);
  align-items:center;
  min-height:calc(100vh - 128px);
}
.kicker {
  display:inline-block;
  padding:8px 10px;
  color:var(--paper);
  background:var(--red);
  font:950 12px/1 Arial,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
h1 {
  max-width:760px;
  margin:20px 0 0;
  font:950 clamp(48px,4.6vw,76px)/1.02 Arial,sans-serif;
  letter-spacing:-.055em;
  hyphens:none;
}
.headline-line { display:block; white-space:nowrap; }
.stripe {
  display:grid;
  grid-template-columns:1.5fr .75fr 1fr;
  width:min(390px,78%);
  height:14px;
  margin:20px 0 0;
}
.stripe i:nth-child(1) { background:var(--red); }
.stripe i:nth-child(2) { background:var(--sun); }
.stripe i:nth-child(3) { background:var(--teal); }
.lead {
  max-width:680px;
  margin:22px 0 0;
  color:var(--muted);
  font:750 clamp(21px,2vw,29px)/1.24 Arial,sans-serif;
}
.deck {
  margin:22px 0 0;
  font:950 12px/1.35 Arial,sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.hero figure { margin:0; border:1px solid var(--ink); background:var(--ink); }
.hero img { aspect-ratio:3/2; object-fit:cover; }
.hero figcaption {
  padding:10px 12px;
  color:var(--muted);
  background:var(--paper);
  font:800 13px/1.35 Arial,sans-serif;
}
.sonya-byline { max-width:1180px; }
.story {
  display:grid;
  grid-template-columns:minmax(0,820px) minmax(220px,300px);
  gap:clamp(28px,5vw,72px);
  align-items:start;
  width:min(1190px,100%);
  margin:24px auto 0;
}
.body {
  padding:clamp(24px,4vw,52px);
  border-top:9px solid var(--sun);
  background:var(--white);
  box-shadow:0 0 0 1px var(--line);
}
.body p { margin:18px 0 0; font:600 20px/1.57 Georgia,"Times New Roman",serif; }
.body h2 {
  margin:58px 0 0;
  font:950 clamp(34px,4.2vw,58px)/1.02 Arial,sans-serif;
  letter-spacing:-.045em;
  text-wrap:balance;
  hyphens:none;
}
.body h2:first-child { margin-top:0; }
.body h2 + p { margin-top:20px; }
.body code { padding:0 .16em; background:#eee4cc; font:inherit; font-style:italic; }
.art { margin:40px -22px 0; }
.art img { aspect-ratio:3/2; object-fit:cover; border:1px solid var(--ink); }
.art figcaption {
  padding:10px 22px 0;
  color:var(--muted);
  font:800 13px/1.35 Arial,sans-serif;
}
.sources { margin-top:58px; padding-top:24px; border-top:4px solid var(--teal); }
.sources h2 { margin:0; font-size:30px; }
.sources ul { margin:18px 0 0; padding-left:20px; }
.sources li { margin:10px 0; color:var(--muted); font:700 13px/1.45 Arial,sans-serif; }
.sources a { text-decoration-thickness:1px; text-underline-offset:3px; }
.aside {
  position:sticky;
  top:112px;
  padding:20px;
  border-top:8px solid var(--red);
  background:linear-gradient(145deg,#fff5d4,#e1f1e9);
  box-shadow:0 0 0 1px var(--line);
  font-family:Arial,sans-serif;
}
.aside strong { display:block; font-size:17px; line-height:1.1; text-transform:uppercase; }
.aside dl { margin:18px 0 0; }
.aside dt { margin-top:15px; color:var(--red); font-size:11px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.aside dd { margin:4px 0 0; color:var(--muted); font-size:15px; font-weight:800; line-height:1.3; }
.aside p { margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:800; line-height:1.35; }
footer {
  width:min(1190px,calc(100% - 36px));
  margin:46px auto 24px;
  padding-top:18px;
  border-top:8px solid var(--red);
  color:var(--muted);
  font:900 12px/1.4 Arial,sans-serif;
  text-transform:uppercase;
}
@media (max-width:1050px) {
  .hero { grid-template-columns:1fr; min-height:0; }
  .hero-copy { max-width:900px; }
  .hero figure { order:-1; }
  .hero img { aspect-ratio:16/9; }
  .story { grid-template-columns:1fr; }
  .aside { position:static; }
}
@media (max-width:620px) {
  .topbar { position:static; align-items:flex-start; }
  .brand span { display:none; }
  main { padding:14px; }
  .hero { gap:20px; }
  h1 { font-size:clamp(34px,9vw,44px); line-height:1.04; }
  .lead { font-size:20px; }
  .sonya-byline { margin:16px 14px 20px; }
  .body { padding:24px 18px; }
  .body p { font-size:18px; line-height:1.55; }
  .body h2 { margin-top:46px; font-size:38px; line-height:1.04; }
  .art { margin-left:0; margin-right:0; }
  .art figcaption { padding-left:0; padding-right:0; }
}