:root {
  color-scheme: light;
  --paper: #f3efe6;
  --paper-deep: #e7e0d1;
  --ink: #161616;
  --muted: #656158;
  --rule: #bdb5a5;
  --signal: #e14b2f;
  --signal-dark: #a82d19;
  --white: #fffdf8;
  --shell: min(1180px, calc(100% - 40px));
  --serif: Iowan Old Style, Baskerville, Times New Roman, serif;
  --sans: Inter, Helvetica Neue, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--signal-dark); }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.masthead { border-bottom: 1px solid var(--ink); }
.masthead-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.masthead-top > :last-child { justify-self: end; }
.sam-link { color: var(--ink); font-weight: 750; text-decoration: none; }
.brand {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  padding: 22px 0 16px;
}
.brand > a,
.mini-brand,
.footer-brand {
  font-weight: 950;
  letter-spacing: -.095em;
  line-height: .8;
  text-decoration: none;
}
.brand > a { font-size: clamp(4.5rem, 10vw, 8rem); }
.brand > a span,
.mini-brand span,
.footer-brand span { color: var(--signal); }
.brand p {
  margin: 0 0 .4rem;
  max-width: 280px;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.15;
}
.sections {
  display: flex;
  gap: 27px;
  align-items: center;
  overflow-x: auto;
  min-height: 42px;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sections a { color: var(--signal-dark); }

.lead {
  display: grid;
  grid-template-columns: minmax(135px, .32fr) minmax(0, 1.7fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(30px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--ink);
}
.lead-marker {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--signal);
}
.lead-marker::before,
.lead-marker::after {
  content: "";
  position: absolute;
  width: 130%;
  height: 1px;
  top: 50%;
  left: -15%;
  background: rgba(255,255,255,.7);
  transform: rotate(38deg);
}
.lead-marker::after { transform: rotate(-38deg); }
.lead-marker b {
  position: absolute;
  left: -.06em;
  bottom: -.18em;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(9rem, 16vw, 14rem);
  font-weight: 400;
  line-height: .7;
}
.lead-marker span {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  color: var(--white);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--signal-dark);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
}
.lead h1 {
  max-width: 740px;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.15;
}
.lead h1 a,
.story-card h3 a { text-decoration: none; }
.lead-dek {
  max-width: 680px;
  margin: 16px 0 18px;
  color: #36342f;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.39;
}
.read-link {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.latest { padding: 38px 0 76px; }
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 17px;
  border-bottom: 5px solid var(--ink);
}
.section-heading h2 { margin: 0; font-size: 1.12rem; letter-spacing: -.02em; text-transform: uppercase; }
.section-heading span { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.story-card {
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: 24px 22px 22px 0;
  border-bottom: 1px solid var(--rule);
}
.story-card:not(:nth-child(3n+1)) { padding-left: 25px; border-left: 1px solid var(--rule); }
.story-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
}
.story-card > p:not(.eyebrow) { color: var(--muted); font-family: var(--serif); font-size: 1rem; line-height: 1.39; }
.story-card .read-link { margin-top: auto; }
.quiet-state { color: var(--muted); font-family: var(--serif); font-size: 1.3rem; }

.empty-edition { max-width: 900px; padding: clamp(80px, 14vw, 180px) 0; }
.empty-edition h1 { margin: 0; font-family: var(--serif); font-size: clamp(4rem, 11vw, 9rem); font-weight: 500; letter-spacing: -.07em; line-height: .86; }
.empty-edition > p:last-child { max-width: 700px; color: var(--muted); font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; }

.compact-masthead .brand { padding-block: 20px 15px; }
.compact-masthead .brand > a { font-size: clamp(4.5rem, 9vw, 7rem); }
.compact-masthead .brand p { max-width: 520px; font-size: clamp(1.25rem, 2.5vw, 2rem); }
.listing-header { padding: clamp(58px, 9vw, 110px) 0 45px; border-bottom: 1px solid var(--ink); }
.listing-header h1 { margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.listing-header > p:last-child { max-width: 720px; margin: 30px 0 0; color: var(--muted); font-family: var(--serif); font-size: 1.35rem; line-height: 1.4; }
.empty-section { min-height: 320px; padding: 70px 0 100px; }
.empty-section p { max-width: 720px; color: var(--muted); font-family: var(--serif); font-size: 1.45rem; line-height: 1.45; }

.manifesto {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: clamp(30px, 6vw, 100px);
  margin-bottom: 100px;
  padding: 55px;
  background: var(--ink);
  color: var(--white);
}
.manifesto-index { margin: 0; color: #aaa69d; font-size: .7rem; font-weight: 750; letter-spacing: .1em; }
.manifesto h2 { max-width: 800px; margin: 0 0 28px; font-family: var(--serif); font-size: clamp(2.2rem, 4.7vw, 4.4rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.manifesto div p { max-width: 760px; color: #d7d3ca; font-family: var(--serif); font-size: 1.12rem; line-height: 1.55; }

.article-topbar { border-bottom: 1px solid var(--ink); }
.article-topbar .shell { display: flex; justify-content: space-between; align-items: center; min-height: 72px; }
.article-topbar .shell > a:last-child { font-size: .73rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.mini-brand { font-size: 2.35rem; }
.article-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.article-header { max-width: 980px; padding: clamp(58px, 9vw, 115px) 0 55px; }
.back-link { display: inline-block; margin-bottom: 70px; color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.article-header h1 { margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.03; }
.article-dek { max-width: 820px; margin: 28px 0; color: #403d37; font-family: var(--serif); font-size: clamp(1.125rem, 1.8vw, 1.4rem); line-height: 1.35; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 25px; color: var(--muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.update-note { max-width: 760px; margin-top: 30px; padding: 14px 18px; border-left: 4px solid var(--signal); background: var(--paper-deep); font-family: var(--serif); line-height: 1.45; }
.article-layout { display: grid; grid-template-columns: minmax(0, 730px) 220px; gap: clamp(50px, 9vw, 130px); padding: 65px 0 100px; border-top: 1px solid var(--ink); }
.article-body p { margin: 0 0 1.55em; font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.52rem); line-height: 1.62; }
.article-body p:first-child::first-letter { float: left; margin: .08em .12em 0 0; color: var(--signal); font-size: 4.8em; line-height: .68; }
.article-body sup { margin-left: .18em; font-family: var(--sans); font-size: .52em; font-weight: 800; }
.article-body sup a { color: var(--signal-dark); text-decoration: none; }
.article-aside { align-self: start; position: sticky; top: 25px; padding-top: 15px; border-top: 5px solid var(--signal); }
.article-aside span { font-size: 1.9rem; font-weight: 950; letter-spacing: -.08em; }
.article-aside p { color: var(--muted); font-family: var(--serif); font-size: .95rem; line-height: 1.45; }
.sources { padding: 55px 0 100px; border-top: 5px solid var(--ink); }
.sources h2 { margin: 0 0 35px; font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 500; letter-spacing: -.04em; }
.sources ol { margin: 0; padding: 0; list-style: none; counter-reset: sources; }
.sources li { counter-increment: sources; display: grid; grid-template-columns: 42px 1fr auto; gap: 16px; align-items: start; padding: 19px 0; border-top: 1px solid var(--rule); }
.sources li::before { content: counter(sources, decimal-leading-zero); color: var(--signal-dark); font-size: .72rem; font-weight: 800; }
.sources li a { display: flex; flex-direction: column; gap: 4px; font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; }
.sources li a span { color: var(--muted); font-family: var(--sans); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sources li small { color: var(--muted); font-size: .65rem; }
.source-policy { max-width: 760px; margin-top: 35px; color: var(--muted); font-family: var(--serif); font-size: .95rem; line-height: 1.5; }
.end-nav { padding: 65px 0; background: var(--signal); color: var(--white); }
.end-nav .shell { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.end-nav p { max-width: 720px; margin: 0; font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 4.2rem); letter-spacing: -.04em; line-height: .98; }
.end-nav a { flex: 0 0 auto; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.site-footer { padding: 45px 0; background: var(--ink); color: #cac5ba; }
.site-footer .shell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.footer-brand { color: var(--white); font-size: 2.2rem; }
.site-footer p { margin: 0; font-family: var(--serif); }
.site-footer div > div { display: flex; justify-content: flex-end; gap: 20px; font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 850px) {
  .brand { align-items: start; flex-direction: column; gap: 18px; }
  .brand > a { font-size: clamp(5rem, 23vw, 8rem); }
  .lead { grid-template-columns: 1fr; }
  .lead-marker { min-height: 130px; }
  .lead-marker b { font-size: 10rem; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-card:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .story-card:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--rule); }
  .manifesto { grid-template-columns: 1fr; padding: 38px; }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; max-width: 350px; }
  .site-footer .shell { grid-template-columns: 1fr; }
  .site-footer div > div { justify-content: flex-start; }
}

@media (max-width: 560px) {
  :root { --shell: min(100% - 28px, 1180px); }
  .masthead-top { grid-template-columns: 1fr auto; }
  .masthead-top span { display: none; }
  .brand { padding-top: 26px; }
  .brand p { font-size: 1.18rem; }
  .lead { padding: 30px 0 42px; }
  .lead h1 { font-size: 1.375rem; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card,
  .story-card:nth-child(even) { min-height: 0; padding: 28px 0; border-left: 0; }
  .story-card .read-link { margin-top: 20px; }
  .manifesto { margin-inline: -14px; padding: 33px 24px; }
  .article-shell { width: min(100% - 28px, 1120px); }
  .back-link { margin-bottom: 55px; }
  .article-header h1 { font-size: clamp(2.25rem, 10vw, 3.25rem); }
  .article-layout { padding-top: 42px; }
  .sources li { grid-template-columns: 32px 1fr; }
  .sources li small { grid-column: 2; }
  .end-nav .shell { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
