:root {
  --ink: #24231f;
  --paper: #f4f0e7;
  --accent: #c95f3d;
  --line: rgba(36, 35, 31, .18);
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 73%, rgba(201,95,61,.07) 73% 73.15%, transparent 73.15%),
    var(--paper);
  font: 17px/1.7 Georgia, "Times New Roman", serif;
}

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.shell { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 108px;
  border-bottom: 1px solid var(--line);
}

.brand { font: 700 22px/1.1 ui-rounded, "Avenir Next", sans-serif; text-decoration: none; letter-spacing: -.03em; }
nav { display: flex; gap: 24px; font: 600 13px/1 ui-rounded, "Avenir Next", sans-serif; letter-spacing: .08em; text-transform: uppercase; }

main { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); gap: clamp(48px, 9vw, 130px); padding: clamp(72px, 11vw, 140px) 0; }
.eyebrow { color: var(--accent); font: 700 12px/1.2 ui-rounded, "Avenir Next", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 16px 0 0; font-size: clamp(50px, 8vw, 104px); line-height: .88; letter-spacing: -.07em; font-weight: 400; }
.date { margin-top: 30px; font-style: italic; color: #6b685f; }
.content { max-width: 690px; }
.lede { margin: 0 0 64px; font-size: clamp(23px, 3vw, 34px); line-height: 1.35; letter-spacing: -.025em; }
section { border-top: 1px solid var(--line); padding: 32px 0 38px; }
h2 { margin: 0 0 12px; font: 700 15px/1.3 ui-rounded, "Avenir Next", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
p { margin: 0 0 16px; }
ul { margin: 12px 0 0; padding-left: 1.2em; }
li { margin: 7px 0; }
footer { border-top: 1px solid var(--line); padding: 28px 0 44px; font: 13px/1.5 ui-rounded, "Avenir Next", sans-serif; color: #6b685f; }

@media (max-width: 720px) {
  header { min-height: 88px; }
  nav { gap: 14px; font-size: 11px; }
  main { grid-template-columns: 1fr; gap: 54px; padding: 68px 0; }
  h1 { font-size: clamp(56px, 19vw, 88px); }
  .lede { margin-bottom: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  header, .intro, .content { animation: arrive .7s both cubic-bezier(.2,.7,.2,1); }
  .intro { animation-delay: .08s; }
  .content { animation-delay: .16s; }
  @keyframes arrive { from { opacity: 0; transform: translateY(14px); } }
}