@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/eb-garamond.woff2) format('woff2');
}

:root {
  --paper: #e9e3dc;
  --ink: #141412;
  --taupe: #655d50;
  --rule: #9a9184;
  --green: #223329;
  --green-deep: #172219;
  --button: #161615;
  --button-ink: #eeeae1;

  --serif: 'EB Garamond', 'Garamond', 'Georgia', serif;
  --caps-track: 0.12em;

  /* One comp pixel at the 1536px frame the design was approved at. */
  --u: calc(100vw / 1536);
  --edge: calc(58 * var(--u));
  --inset: calc(57 * var(--u));
  --inset-r: calc(65 * var(--u));
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--green) url(assets/plates/green-ground.png) repeat;
  color: var(--ink);
  scrollbar-color: var(--green) var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--serif);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--green); color: var(--button-ink); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 3;
  padding: 0.6rem 1rem;
  background: var(--button);
  color: var(--button-ink);
  font: 500 0.95rem/1 var(--serif);
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 1rem; }

.caps {
  font-weight: 400;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
}

/* The sheet: one long letter lying on the green blotter. */
.sheet {
  position: relative;
  width: calc(100% - var(--edge));
  min-height: 100vh;
  background:
    linear-gradient(155deg, rgba(60, 45, 30, 0) 30%, rgba(60, 45, 30, 0.075) 100%) fixed,
    var(--paper) url(assets/plates/paper.png) repeat;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.7),
    inset -2px 0 1px rgba(120, 110, 95, 0.18),
    calc(3 * var(--u)) 0 calc(4 * var(--u)) rgba(2, 6, 4, 0.95),
    calc(8 * var(--u)) calc(2 * var(--u)) calc(16 * var(--u)) rgba(4, 9, 6, 0.6);
}

/* Masthead */
.masthead {
  position: relative;
  height: calc(120 * var(--u));
  margin: 0 var(--inset-r) 0 var(--inset);
  border-bottom: 1px solid var(--rule);
}

.logo {
  position: absolute;
  left: 0;
  top: calc(44 * var(--u));
  display: block;
  width: calc(436 * var(--u));
  color: var(--ink);
}
.logo svg { display: block; width: 100%; height: auto; }

.nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nav a { pointer-events: auto; }

.nav-links {
  position: absolute;
  top: calc(52.5 * var(--u));
  right: max(calc(300 * var(--u)), calc(270 * var(--u) + 28px));
  display: flex;
  gap: calc(38 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: block;
  font-size: max(13px, calc(17.08 * var(--u)));
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  padding-block: calc(4 * var(--u));
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover { background-size: 100% 1px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--button);
  color: var(--button-ink);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;
}
.button:hover { background: var(--green-deep); }

.nav .button {
  position: absolute;
  right: 0;
  top: calc(37 * var(--u));
  width: calc(270 * var(--u));
  height: max(44px, calc(53 * var(--u)));
  font-size: max(13px, calc(17.08 * var(--u)));
}

/* The letter */
.letter {
  position: relative;
  height: calc(765 * var(--u));
  margin: 0 var(--inset-r) 0 var(--inset);
}

.meta {
  position: absolute;
  left: 0;
  top: calc(87.7 * var(--u));
  margin: 0;
  color: var(--taupe);
  font-size: max(12px, calc(16.15 * var(--u)));
  line-height: 1;
}
.meta p { margin: 0 0 calc(42.8 * var(--u)); }
.meta a { text-decoration: none; letter-spacing: 0.055em; }
.meta a:hover { text-decoration: underline; }

.letter-text {
  position: absolute;
  left: calc(226 * var(--u));
  top: 0;
  width: calc(690 * var(--u));
}

.letter h1 {
  position: absolute;
  top: calc(78 * var(--u));
  left: 0;
  width: calc(700 * var(--u));
  margin: 0;
  font-size: calc(113.2 * var(--u));
  font-weight: 425;
  line-height: calc(98.5 * var(--u));
  letter-spacing: -0.022em;
}
.letter h1 .l { display: block; }

.lede {
  position: absolute;
  top: calc(415 * var(--u));
  left: 0;
  width: calc(690 * var(--u));
  margin: 0;
  font-size: calc(33.8 * var(--u));
  line-height: calc(40.7 * var(--u));
  letter-spacing: 0;
  font-weight: 405;
}

.close {
  position: absolute;
  top: calc(612 * var(--u));
  left: 0;
  margin: 0;
  font-size: calc(31.54 * var(--u));
  line-height: calc(40 * var(--u));
  letter-spacing: -0.005em;
}

.deboss {
  position: absolute;
  left: calc(710 * var(--u));
  top: calc(90 * var(--u));
  width: calc(434 * var(--u));
  height: calc(466 * var(--u));
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* The enclosure */
.enclosure {
  margin: 0 var(--inset-r) 0 var(--inset);
  padding-top: calc(29.7 * var(--u));
  border-top: 1px solid var(--rule);
}
.enclosure h2 {
  margin: 0;
  color: var(--taupe);
  font-size: calc(26.15 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.175em;
  text-transform: uppercase;
}
.schedule {
  margin: calc(2.6 * var(--u)) 0 0;
}
.schedule div {
  display: grid;
  grid-template-columns: calc(242 * var(--u)) minmax(0, 1fr);
  align-items: baseline;
  padding-block: calc(14 * var(--u));
}
.schedule dt {
  color: var(--taupe);
  font-size: max(12px, calc(21.54 * var(--u)));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.146em;
  text-transform: uppercase;
}
.schedule dd {
  margin: 0;
  font-size: calc(29.38 * var(--u));
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* The reply */
.reply {
  display: grid;
  grid-template-columns: calc(226 * var(--u)) minmax(0, 1fr) auto;
  column-gap: 0;
  margin: calc(84 * var(--u)) var(--inset-r) 0 var(--inset);
  padding-top: calc(30 * var(--u));
  border-top: 1px solid var(--rule);
}
.reply h2 {
  margin: calc(8 * var(--u)) 0 0;
  color: var(--taupe);
  font-size: max(12px, calc(16.15 * var(--u)));
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
}
.reply-body p {
  margin: 0;
  max-width: 34ch;
  font-size: calc(34.46 * var(--u));
  line-height: calc(40.7 * var(--u));
  letter-spacing: -0.021em;
}
.address {
  display: block;
  width: fit-content;
  margin-top: calc(18 * var(--u));
  font-size: calc(84 * var(--u));
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 200ms ease-out;
}
.address:hover { text-decoration-color: var(--ink); }

.reply-actions {
  margin-left: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(22 * var(--u));
  padding-top: calc(4 * var(--u));
}
.reply-actions .place {
  margin: calc(10 * var(--u)) 0 0;
  color: var(--taupe);
  font-size: max(12px, calc(16.15 * var(--u)));
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
}
.reply-actions .button {
  height: max(44px, calc(53 * var(--u)));
  padding-inline: calc(28 * var(--u));
  font-size: max(13px, calc(17.08 * var(--u)));
}
.copy {
  padding: calc(6 * var(--u)) 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 max(13px, calc(17.08 * var(--u))) / 1 var(--serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  transition: border-color 200ms ease-out;
}
.copy:hover { border-color: var(--ink); }
.copy[data-state='done'] { color: var(--green); border-color: var(--green); }

.footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: calc(96 * var(--u)) var(--inset-r) 0 var(--inset);
  padding: calc(22 * var(--u)) 0 calc(48 * var(--u));
  border-top: 1px solid var(--rule);
  color: var(--taupe);
  font-size: max(12.5px, calc(16.15 * var(--u)));
  line-height: 1.4;
}
.footer p { margin: 0; }

/* The seal presses into the paper once, on arrival. */
@media (prefers-reduced-motion: no-preference) {
  .deboss { animation: press 1100ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both; }
  @keyframes press {
    from { opacity: 0.25; transform: scale(1.025); filter: contrast(0.55) brightness(1.04); }
    to { opacity: 1; transform: none; filter: none; }
  }
}

/* Past 1920px, stop scaling and centre the letter on the sheet. */
@media (min-width: 1921px) {
  :root { --u: calc(1920px / 1536); }
  .masthead, .letter, .enclosure, .reply, .footer {
    width: calc(1356 * var(--u));
    margin-left: auto;
    margin-right: auto;
  }
}

/* Narrow screens: the letter reflows into one column. */
@media (max-width: 1179px) {
  :root { --edge: 12px; --inset: clamp(20px, 5.5vw, 44px); --inset-r: var(--inset); }
  .letter h1 .l { display: inline; }

  .sheet { box-shadow: 4px 0 10px rgba(8, 14, 10, 0.5), 1px 0 2px rgba(8, 14, 10, 0.5); }

  .masthead {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 0 18px;
  }
  .logo { position: static; width: min(300px, 74%); }
  .nav { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; pointer-events: auto; }
  .nav-links { position: static; gap: 18px; flex-wrap: wrap; }
  .nav-links a { font-size: 14.5px; padding-block: 6px; }
  .nav .button { position: static; width: auto; height: 44px; padding-inline: 18px; font-size: 14.5px; }

  .letter { height: auto; display: flex; flex-direction: column; padding: 34px 0 40px; position: relative; }
  .meta { position: static; order: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .meta p { margin: 0; }
  .letter-text { position: static; width: auto; order: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
  .letter-text > h1, .letter-text > .lede { grid-column: 1 / -1; }
  .letter h1 { position: static; width: auto; margin-top: 26px; font-size: clamp(42px, 11.5vw, 84px); line-height: 0.95; letter-spacing: -0.025em; text-wrap: balance; }
  .lede { position: static; width: auto; max-width: 36ch; margin-top: 24px; font-size: clamp(19px, 4.9vw, 26px); line-height: 1.32; }
  .close { position: static; margin-top: 26px; font-size: clamp(18px, 4.6vw, 24px); line-height: 1.32; }
  .deboss { position: static; width: clamp(120px, 44vw, 220px); height: auto; aspect-ratio: 434 / 466; margin-right: -6px; }

  .enclosure { padding-top: 26px; }
  .enclosure h2 { font-size: 17px; letter-spacing: 0.16em; }
  .schedule { margin-top: 14px; }
  .schedule div { grid-template-columns: 1fr; gap: 4px; padding-block: 14px; }
  .schedule dt { font-size: 13.5px; }
  .schedule dd { font-size: clamp(19px, 4.9vw, 24px); }

  .reply { grid-template-columns: 1fr; gap: 16px; margin-top: 48px; padding-top: 26px; }
  .reply h2 { margin: 0; font-size: 13px; }
  .reply-body p { font-size: clamp(19px, 4.9vw, 26px); line-height: 1.32; }
  .address { font-size: clamp(30px, 8.6vw, 60px); overflow-wrap: anywhere; }
  .reply-actions { gap: 18px; margin: 10px 0 0; }
  .reply-actions .place { font-size: 13px; }
  .reply-actions .button { height: 48px; padding-inline: 20px; font-size: 14.5px; }
  .copy { font-size: 14.5px; padding: 8px 0; }

  .footer { flex-direction: row; margin-top: 56px; padding: 18px 0 32px; font-size: 13.5px; }
}