:root {
  --ink: #11202a;
  --muted: #58656c;
  --paper: #f5f6f4;
  --line: rgba(17, 32, 42, 0.18);
  --blue: #294b60;
  --sans: 'Manrope', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --pad: clamp(24px, 6vw, 92px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #517187; outline-offset: 6px; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 10; padding: 10px 16px; background: #fff; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
header { display: flex; align-items: center; justify-content: space-between; min-height: 88px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); font-size: 13px; }
.brand { font-weight: 650; }
.back { display: inline-flex; align-items: center; gap: 12px; }
main { width: min(100%, 1500px); margin: 0 auto; padding: clamp(90px, 12vw, 180px) var(--pad) 120px; }
article { max-width: 1050px; }
.eyebrow { margin: 0 0 28px; font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
h1 { max-width: 1050px; margin: 0; font-size: clamp(58px, 8vw, 122px); font-weight: 470; line-height: .98; letter-spacing: -.065em; text-wrap: balance; }
.deck { margin: 34px 0 0; font-family: var(--serif); font-size: clamp(25px, 3vw, 42px); font-style: italic; color: #60717a; }
.letter { max-width: 790px; margin: clamp(75px, 9vw, 125px) 0 0 18%; }
.letter p { margin: 0 0 28px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.8; letter-spacing: -.012em; }
.letter .commitment { margin-block: 48px; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.58; font-weight: 620; letter-spacing: -.025em; }
.citation { margin-left: 3px; color: #45687a; font-size: .65em; vertical-align: super; text-decoration: underline; }
.letter .closing { margin-top: 45px; font-size: clamp(23px, 2vw, 31px); font-weight: 600; line-height: 1.45; }
.signature { margin-top: 50px !important; font-weight: 650; }
.signature span { font-weight: 450; color: var(--muted); }
.letter .tagline { margin-top: 40px; color: #6d5b31; font-weight: 650; }
.sources { margin-top: 130px; padding-top: 75px; border-top: 1px solid var(--line); }
.sources h2 { margin: 0 0 50px; font-size: clamp(35px, 4vw, 58px); font-weight: 520; letter-spacing: -.045em; }
.sources ol { max-width: 920px; margin: 0; padding-left: 24px; }
.sources li { padding: 0 0 28px 14px; font-size: 15px; line-height: 1.7; }
.sources li a { text-decoration: underline; text-decoration-color: rgba(17,32,42,.3); text-underline-offset: 4px; }
.sources li span { display: block; margin-top: 7px; color: var(--muted); font-size: 14px; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 42px var(--pad); color: #e7edf0; background: var(--ink); font-size: 13px; }
footer p { margin: 0; font-weight: 650; }
footer a { display: inline-flex; gap: 15px; align-items: center; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.45); }

@media (max-width: 760px) {
  header { min-height: 76px; }
  main { padding-top: 75px; padding-bottom: 80px; }
  h1 { font-size: clamp(51px, 14vw, 82px); }
  .letter { margin-left: 0; margin-top: 70px; }
  .letter p { font-size: 16px; line-height: 1.75; }
  .letter .commitment { margin-block: 38px; font-size: 20px; }
  .sources { margin-top: 85px; padding-top: 55px; }
  footer { align-items: flex-start; flex-direction: column; }
}

header .brand img { display: block; width: 236px; height: auto; }
@media (max-width: 560px) { header .brand img { width: 205px; } }