:root {
  --blue: #28166f;
  --blue-deep: #1e1057;
  --orange: #ff6600;
  --paper: #ffffff;
  --gray: #e6e6e6;
  --ink: #252333;
  --line: rgba(40, 22, 111, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(24px, 4vw, 68px);
  color: var(--blue);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(40,22,111,.12);
}
.brand { display: block; width: clamp(170px, 15vw, 235px); text-decoration: none; }
.brand img { display: block; width: 100%; height: auto; }
.closing-note { display: flex; align-items: center; gap: 13px; font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.closing-note i { width: 5px; height: 5px; background: var(--orange); }

.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); background: var(--blue); color: white; }
.hero-copy { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 175px clamp(34px, 7vw, 120px) 80px clamp(24px, 6vw, 96px); }
.hero-copy::after { content: ""; position: absolute; width: 380px; height: 380px; right: -250px; bottom: 60px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 0 44px rgba(255,255,255,.035), 0 0 0 88px rgba(255,255,255,.025); transform: rotate(45deg); }
.eyebrow { margin: 0 0 28px; max-width: 40rem; font-size: 12px; font-weight: 600; line-height: 1.55; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, blockquote { font-family: "Newsreader", serif; font-weight: 400; }
h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(92px, 13vw, 210px); line-height: .72; letter-spacing: -.055em; color: white; }
.lead { margin: 58px 0 52px; font-family: "Newsreader", serif; font-size: clamp(25px, 3vw, 44px); line-height: 1.2; }
.quiet-link { position: relative; z-index: 1; align-self: flex-start; color: inherit; text-decoration: none; padding-bottom: 8px; border-bottom: 2px solid var(--orange); font-size: 14px; }
.quiet-link span { display: inline-block; margin-left: 14px; color: var(--orange); transition: transform .2s ease; }
.quiet-link:hover span { transform: translateY(4px); }
.hero-image { position: relative; margin: 0; min-height: 620px; overflow: hidden; }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40,22,111,.28), transparent 30%), linear-gradient(0deg, rgba(24,12,70,.55), transparent 35%); }
.hero-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(.96); }
.hero-image figcaption { position: absolute; z-index: 1; right: 36px; bottom: 30px; left: 36px; font-family: "Newsreader", serif; font-size: 18px; color: #fff; }

.letter { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 2.15fr); gap: clamp(40px, 7vw, 120px); padding: clamp(90px, 12vw, 180px) clamp(24px, 9vw, 150px); background: linear-gradient(90deg, var(--gray) 0, var(--gray) 25%, white 25%, white 100%); }
.letter::before { content: ""; position: absolute; top: 0; left: clamp(24px, 9vw, 150px); width: 86px; height: 6px; background: var(--orange); }
.letter-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 11px; }
.letter-aside span { padding: 7px 12px; border-left: 3px solid var(--orange); color: var(--blue); background: rgba(255,255,255,.55); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.letter-body { max-width: 830px; }
.letter-body h2 { margin: 0 0 52px; color: var(--blue); font-size: clamp(42px, 5.5vw, 77px); line-height: 1.02; letter-spacing: -.03em; }
.letter-body > p:not(.eyebrow) { max-width: 720px; margin: 0 0 23px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.8; }
.signature { margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--line); }
.signature span, .signature small { display: block; }
.signature strong { display: block; margin: 7px 0 2px; color: var(--blue); font-family: "Newsreader", serif; font-size: 34px; font-weight: 500; }
.signature small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }

.legacy { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 150px) clamp(24px, 9vw, 150px) 60px; color: var(--blue); background: var(--gray); border-top: 8px solid var(--orange); }
.legacy::after { content: "M"; position: absolute; right: -2vw; bottom: -18vw; color: rgba(40,22,111,.055); font-family: Arial, sans-serif; font-size: min(52vw, 720px); font-weight: 900; line-height: 1; }
.legacy blockquote { max-width: 1050px; margin: 0; font-size: clamp(42px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -.035em; }
.year-line { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-top: 95px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.year-line i { height: 2px; background: var(--orange); }

footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px clamp(24px, 4vw, 68px); color: white; background: var(--blue); border-top: 1px solid rgba(255,255,255,.18); font-size: 12px; }

@media (max-width: 800px) {
  .site-header { position: absolute; padding: 16px 20px; }
  .brand { width: 180px; }
  .closing-note { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 78svh; padding: 150px 24px 70px; }
  h1 { font-size: clamp(88px, 29vw, 150px); }
  .lead { margin: 42px 0; }
  .hero-image { min-height: 55svh; }
  .letter { grid-template-columns: 1fr; padding: 86px 24px; background: white; }
  .letter-aside { flex-direction: row; flex-wrap: wrap; }
  .letter-body h2 { margin-bottom: 38px; }
  .legacy { padding: 82px 24px 42px; }
  .year-line { margin-top: 64px; grid-template-columns: 1fr; gap: 14px; }
  .year-line i { display: none; }
  footer { flex-direction: column; padding: 26px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .quiet-link span { transition: none; }
}