:root { --red:#f04a32; --ink:#111111; --cream:#f5eedc; --line:#c8bda8; --display:"Avenir Next Condensed","Arial Narrow",Arial,sans-serif; }
* { box-sizing:border-box; }
html { background:var(--cream); }
body { margin:0; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-underline-offset:.22em; }
a:focus-visible { outline:3px solid currentColor; outline-offset:6px; }
.shell { width:min(100% - 96px,1424px); margin-inline:auto; }
.site-header,.index-hero,.article-hero { background:var(--red); }
.site-nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:2px solid var(--ink); }
.brand,.nav-links,.eyebrow,.breadcrumbs,.question-meta,.archive-heading,.question-number,.read-link,.footer-links { font-size:10px; font-weight:800; line-height:1.5; letter-spacing:.14em; text-transform:uppercase; }
.brand { max-width:270px; }
.site-nav a,.site-footer a { text-decoration:none; }
.site-nav a:hover,.site-footer a:hover { text-decoration:underline; }
.nav-links,.footer-links { display:flex; flex-wrap:wrap; gap:26px; }
.nav-links { flex-shrink:0; }
.nav-links [aria-current] { text-decoration:underline; text-decoration-thickness:2px; }
.index-hero { padding:42px 0 60px; }
.eyebrow { margin:0 0 24px; }
.index-title { margin:0 0 34px -.015em; font-family:var(--display); font-size:clamp(70px,15.8vw,238px); font-weight:800; line-height:.88; letter-spacing:-.05em; text-transform:uppercase; }
.index-title span { color:var(--cream); }
.intro { max-width:680px; margin:0 0 0 auto; font-family:Georgia,"Times New Roman",serif; font-size:clamp(20px,2.1vw,28px); line-height:1.4; }
.archive { padding-block:44px 88px; }
.archive-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:24px; border-bottom:1px solid var(--ink); }
.archive-heading h2 { font:inherit; margin:0; }
.question-list { list-style:none; padding:0; margin:0; }
.question-row { display:grid; grid-template-columns:110px minmax(0,1fr); gap:36px; padding:46px 0 48px; border-bottom:1px solid var(--line); }
.question-number { font-size:16px; padding-top:3px; }
.question-meta { display:flex; flex-wrap:wrap; gap:10px 24px; }
.question-title { max-width:1050px; margin:20px 0; font-family:var(--display); font-size:clamp(38px,5.4vw,78px); font-weight:800; line-height:.99; letter-spacing:-.025em; text-transform:uppercase; overflow-wrap:anywhere; }
.question-link { text-decoration:none; }
.question-link:hover { text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--red); }
.question-summary { max-width:650px; margin:0 0 28px; font-family:Georgia,"Times New Roman",serif; font-size:21px; line-height:1.5; }
.read-link { display:inline-block; text-decoration:none; padding-bottom:5px; border-bottom:2px solid var(--ink); }
.read-link:hover { border-color:var(--red); }
.read-link span { margin-left:18px; font-size:18px; }
.article-hero { padding:32px 0 54px; }
.breadcrumbs { display:inline-block; margin-bottom:44px; text-decoration:none; }
.breadcrumbs:hover { text-decoration:underline; }
.article-title { max-width:1150px; margin:0 0 32px; font-family:var(--display); font-size:clamp(52px,8.7vw,132px); font-weight:800; letter-spacing:-.035em; word-spacing:.1em; line-height:.93; text-transform:uppercase; overflow-wrap:anywhere; }
.article-deck { max-width:640px; margin:0 0 0 auto; font-family:Georgia,"Times New Roman",serif; font-size:clamp(20px,2vw,26px); line-height:1.4; }
.article-layout { display:grid; grid-template-columns:190px minmax(0,740px); justify-content:center; gap:70px; padding-block:64px 80px; }
.article-meta { padding-top:7px; }
.article-meta .eyebrow { margin-bottom:28px; }
.article-meta > p:not(.eyebrow) { font-size:14px; margin:0 0 12px; }
.article-meta .question-meta { display:flex; flex-direction:column; gap:8px; font-size:9px; }
.essay { min-width:0; font-family:Georgia,"Times New Roman",serif; font-size:22px; line-height:1.65; }
.essay > p { margin:0 0 1.5em; }
.essay > p:first-child::first-letter { font-size:1.2em; font-weight:bold; }
.essay p a { text-decoration-color:var(--red); text-decoration-thickness:2px; overflow-wrap:anywhere; }
.article-end { margin-top:44px; padding-top:25px; border-top:1px solid var(--line); font-family:Arial,Helvetica,sans-serif; }
.site-footer { background:var(--ink); color:var(--cream); }
.footer-inner { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:32px; padding-block:26px; }
.footer-links { font-size:9px; }
.skip-link { position:absolute; top:8px; left:8px; transform:translateY(-200%); z-index:10; padding:14px; color:var(--cream); background:var(--ink); }
.skip-link:focus { transform:none; }
@media (max-width:1000px) {
  .shell { width:calc(100% - 64px); }
  .index-title { font-size:15.4vw; }
  .question-row { grid-template-columns:50px minmax(0,1fr); gap:24px; }
  .article-layout { grid-template-columns:145px minmax(0,1fr); gap:36px; }
  .essay { font-size:21px; }
}
@media (max-width:640px) {
  .shell { width:calc(100% - 44px); }
  .site-nav { gap:16px; padding-block:16px; }
  .site-nav .brand { max-width:160px; font-size:8px; }
  .nav-links { gap:16px; font-size:8px; }
  .index-hero { padding:30px 0 38px; }
  .eyebrow { font-size:9px; }
  .index-title { font-size:15.2vw; margin-bottom:28px; }
  .intro { font-size:21px; }
  .archive { padding-block:28px 58px; }
  .archive-heading { font-size:9px; padding-bottom:20px; }
  .question-row { grid-template-columns:1fr; gap:18px; padding-block:28px 34px; }
  .question-number { font-size:11px; }
  .question-title { font-size:clamp(38px,10vw,62px); margin-top:18px; }
  .question-meta { font-size:9px; }
  .question-summary { font-size:19px; }
  .article-hero { padding:26px 0 36px; }
  .breadcrumbs { margin-bottom:34px; font-size:9px; }
  .article-title { font-size:clamp(46px,12.7vw,80px); margin-bottom:24px; }
  .article-layout { grid-template-columns:1fr; gap:30px; padding-block:30px 55px; }
  .article-meta { border-bottom:1px solid var(--line); padding-bottom:24px; }
  .article-meta .eyebrow { display:none; }
  .article-meta .question-meta { flex-direction:row; gap:20px; }
  .essay { font-size:20px; line-height:1.6; }
  .footer-inner { align-items:flex-start; flex-direction:column; gap:20px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print {
  .site-nav,.site-footer,.breadcrumbs,.article-end,.skip-link { display:none; }
  .article-hero { background:white; padding-block:0 24px; }
  .article-title { font-size:38pt; }
  .article-layout { display:block; padding-block:24px; }
  .article-meta { margin-bottom:24px; }
  .essay { font-size:12pt; }
  .shell { width:100%; }
}