:root {
  --paper: #F7F7F2; --ink: #20211F; --blue: #304CB4; --blue-soft: #E0E5FF;
  --wash: #EFF0E9; --line: #CACBC3; --muted: #65665F;
  --sans: "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(20px, 4.4vw, 56px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
main.wrap > * { max-width: 900px; }
.hdr .wrap { padding-block: 30px 24px; }
.mark { font-weight: 600; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.08; letter-spacing: .005em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
main.wrap { padding-block: clamp(40px, 7vw, 88px); }
.label { margin: 0 0 24px; font-weight: 600; font-size: 14px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; transform: skewX(-14deg); background: var(--blue); vertical-align: .08em; }
.display { margin: 0 0 28px; font-weight: 200; font-size: clamp(44px, 7.6vw, 95px); line-height: .92; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.lede { max-width: 34em; margin: 0; font-weight: 300; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.3; text-wrap: pretty; }
.letters { margin-top: clamp(48px, 7vw, 88px); }
.letters ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.letters li a { display: grid; grid-template-columns: 110px 1fr; gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.letters li a:hover .t { color: var(--blue); }
.date { grid-row: span 2; font: 600 12px/1.8 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.t { font-weight: 300; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.01em; }
.sub { color: var(--muted); font-size: 15px; }
.btn { margin-top: 32px; padding: 16px 24px; border: 0; background: var(--ink); color: var(--paper); font: 600 14px/1 var(--sans); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.btn:hover, .btn:focus-visible { background: var(--blue); }
.ftr .wrap { display: flex; flex-wrap: wrap; gap: 28px; padding-block: 32px 48px; border-top: 1px solid var(--line); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ftr a { color: var(--muted); }
@media (max-width: 560px) {
  .letters li a { grid-template-columns: 1fr; }
  .date { grid-row: auto; }
}