/* 07 — Letter from the editor (closing CTA) + colophon footer */

.closing { padding-top: clamp(72px, 10vw, 150px); padding-bottom: clamp(56px, 7vw, 110px); }
.letter { row-gap: 40px; }
.letter__margin, .letter__main { grid-column: 1 / -1; }
.letter__ps {
  max-width: 26ch; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule);
  font: 400 1rem/1.5 var(--f-text); color: var(--ink-2);
}
.letter__ps em { color: var(--accent); }

.letter__title {
  font: 400 clamp(56px, 15.4vw, 168px)/.9 var(--f-display); letter-spacing: -.028em; text-wrap: balance;
}
.letter__title em { color: var(--accent); }
.letter__sub {
  margin-top: 26px;
  font: 500 12px/1.5 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.letter__body { max-width: 34ch; margin-top: 32px; font-size: clamp(1.25rem, 3.2vw, 1.5rem); line-height: 1.45; }

.letter__links { margin-top: 40px; border-top: 1px solid var(--ink); max-width: 640px; }
.letter__links li {
  display: grid; grid-template-columns: 6.2em 1fr; align-items: baseline; gap: 12px;
  padding: 15px 0 14px; border-bottom: 1px solid var(--rule);
}
.letter__links span { font: 500 10.5px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.letter__links a {
  font: 400 clamp(22px, 5.6vw, 32px)/1.1 var(--f-display); letter-spacing: -.005em;
  text-decoration: underline; text-decoration-color: rgba(27, 58, 87, .45); text-underline-offset: .22em;
  transition: color .4s var(--ease), text-decoration-color .4s var(--ease);
  overflow-wrap: anywhere;
}
.letter__links a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.sign { display: flex; align-items: flex-end; gap: 14px; margin-top: 44px; color: var(--accent); }
.sign__svg { width: clamp(200px, 48vw, 300px); height: auto; overflow: visible; }
.sign__svg path {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.sign__name { padding-bottom: 6px; font: italic 400 30px/1 var(--f-display); color: var(--ink); }

@media (min-width: 960px) {
  .letter__margin { grid-column: 1 / 4; padding-top: 18px; }
  .letter__main { grid-column: 4 / 13; }
  .letter__body { max-width: 40ch; }
}

/* colophon */
.colophon { border-top: 1px solid var(--ink); padding-block: 22px 30px; color: var(--muted); }
.colophon .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; }
.colophon p, .colophon li { font: 500 11px/1.5 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.colophon ul { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.colophon a { text-decoration-color: var(--rule); transition: color .4s var(--ease); }
.colophon a:hover { color: var(--accent); }
.colophon__note { font-family: var(--f-text); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 14px; }