/* Letter pages — extends ../styles.css */

.letter-page .nav { position: sticky; }

.letter-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 62svh; display: grid; align-items: end;
  padding: clamp(96px, 14vw, 160px) 0 clamp(40px, 6vw, 72px);
}
.letter-hero__art { position: absolute; inset: 0; z-index: -1; }
.letter-hero__art img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 45%; filter: brightness(.7) saturate(.9); will-change: transform; }
.letter-hero__wash { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(15.5% 0.012 75 / .5) 0%, transparent 30%), linear-gradient(0deg, var(--bg) 0%, oklch(15.5% 0.012 75 / .85) 30%, transparent 70%); }
.letter-hero__body { max-width: 860px; }
.letter-title { font-size: clamp(2.8rem, 1.6rem + 6vw, 6rem); }
.letter-sub { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--text-2); margin: 18px 0 0; max-width: 40ch; }

.prose { max-width: 68ch; padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 8vw, 104px); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.7; color: var(--text-2); }
.prose p { margin: 0 0 1.5em; }
.prose p strong { color: var(--text); font-weight: 500; }
.prose p em { font-style: italic; color: var(--text); }
.prose__lead { color: var(--text); font-size: 1.08em; }
.prose__lead::first-letter {
  font-family: var(--font-display); font-size: 4.2em; line-height: .78; float: left;
  padding: .08em .14em 0 0; color: var(--gold);
}

.pull {
  font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.15; color: var(--text);
  border-left: 1px solid var(--gold); padding: 6px 0 6px 24px; margin: 2.2em 0 2.2em -1px;
}
@media (min-width: 1100px) { .pull { margin-left: -120px; max-width: 24ch; } }

.plate { margin: 3.2em calc(-1 * clamp(0px, 8vw, 160px)); position: relative; }
.plate img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: radial-gradient(ellipse 52% 60% at 50% 50%, #000 30%, oklch(0% 0 0 / .55) 66%, transparent 99%);
          mask-image: radial-gradient(ellipse 52% 60% at 50% 50%, #000 30%, oklch(0% 0 0 / .55) 66%, transparent 99%);
  filter: saturate(.92) brightness(.92);
  transform: scale(1.02); will-change: transform;
}
.plate figcaption { text-align: center; margin-top: -8px; }

.prose__end { margin-top: 3em; padding-top: 2em; border-top: 1px solid oklch(80% 0.11 85 / .25); display: grid; gap: 14px; }
.prose__mark { width: 20px; height: 20px; color: var(--gold); }
.prose__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.foot .mono a { color: var(--text-3); text-decoration: none; }

/* motion: reveals, parallax */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .letter-hero__art img, .plate img { transform: none !important; }
}