/* ─── LETTER PAGE STYLES ──────────────────────────────────────────── */
/* Loaded after style.css. Targets long-form letter pages.            */

body.letter-page{font-family:var(--sans)}

.letter{padding:48px 0 96px}
.letter-wrap{max-width:760px}
.letter-crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:48px}
.letter-crumbs a{color:var(--ink-3)}
.letter-crumbs a:hover{color:var(--coral)}

.letter-header{display:flex;flex-direction:column;gap:24px;margin-bottom:48px}
.letter-issue{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.letter-h{font-family:var(--serif);font-weight:700;font-size:clamp(40px,6.5vw,84px);line-height:.95;letter-spacing:-.03em;margin:0;text-wrap:balance;color:var(--ink)}
.letter-h em{font-family:var(--display);font-style:italic;font-weight:400;color:var(--coral);letter-spacing:-.02em}
.letter-deck-lg{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.45;color:var(--ink-2);margin:0;text-wrap:pretty;max-width:48ch}
.letter-deck-lg em{font-family:var(--display);font-style:italic;color:var(--ink)}

.letter-byline{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--rule);padding-top:20px;margin-top:8px}
.byline-name{font-family:var(--display);font-style:italic;font-size:24px;color:var(--ink);letter-spacing:-.015em}
.byline-where{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

.letter-cover{margin:0 0 56px;border:1px solid var(--rule);overflow:hidden;background:#F2EAD8}
.letter-cover svg,.letter-cover img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}

.letter-body{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.65;color:var(--ink);max-width:64ch;margin:0 auto}
.letter-body > p:first-of-type::first-letter{font-family:var(--display);font-weight:400;font-size:96px;float:left;line-height:.8;padding:8px 14px 0 0;color:var(--coral)}
.letter-body p{margin:0 0 24px}
.letter-body em{font-family:var(--display);font-style:italic;color:var(--ink)}
.letter-body strong{font-weight:700;color:var(--ink)}
.letter-body a{color:var(--coral);border-bottom:1px solid color-mix(in oklab,var(--coral) 50%,transparent);transition:border-color .2s ease}
.letter-body a:hover{border-bottom-color:var(--coral)}

.letter-body h2{font-family:var(--serif);font-weight:700;font-size:clamp(32px,3.6vw,44px);line-height:1.05;letter-spacing:-.022em;margin:64px 0 24px;text-wrap:balance;color:var(--ink)}
.letter-body h2 em{font-family:var(--display);font-style:italic;font-weight:400;color:var(--coral);letter-spacing:-.015em}
.letter-body h3{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.015em;margin:40px 0 16px;color:var(--ink)}
.letter-body h3 em{font-family:var(--display);font-style:italic;font-weight:400;color:var(--coral)}

.letter-body blockquote{margin:32px 0;padding:24px 0 24px 28px;border-left:3px solid var(--coral);font-family:var(--display);font-style:italic;font-size:clamp(22px,2.4vw,28px);line-height:1.35;color:var(--ink);letter-spacing:-.015em}
.letter-body blockquote p{margin:0}

.letter-body ul,.letter-body ol{margin:0 0 24px;padding-left:24px}
.letter-body li{margin-bottom:10px}
.letter-body li::marker{color:var(--coral)}

.letter-body hr{border:0;border-top:1px solid var(--rule);margin:48px auto;max-width:120px}

.letter-callout{background:var(--bone-2);border:1px solid var(--rule);padding:24px 28px;margin:32px 0;font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--ink-2);position:relative}
.letter-callout::before{content:'';position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:1px solid var(--coral);border-left:1px solid var(--coral)}
.letter-callout::after{content:'';position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-bottom:1px solid var(--coral);border-right:1px solid var(--coral)}
.letter-callout strong{font-family:var(--display);font-style:italic;font-weight:400;color:var(--coral);font-size:22px;display:block;margin-bottom:8px;letter-spacing:-.015em}

.letter-rule{border:0;border-top:1px solid var(--rule);margin:64px auto 48px;max-width:200px}

.letter-cta{text-align:center;background:var(--bone-2);border:1px solid var(--rule);padding:48px 32px;margin:48px 0;display:flex;flex-direction:column;gap:18px;align-items:center;position:relative}
.letter-cta::before{content:'';position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:1px solid var(--coral);border-left:1px solid var(--coral)}
.letter-cta::after{content:'';position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-bottom:1px solid var(--coral);border-right:1px solid var(--coral)}
.letter-cta h3{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.2;color:var(--ink);margin:0;letter-spacing:-.015em}
.letter-cta p.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0}

.letter-nav{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-top:64px;padding-top:24px;border-top:1px solid var(--rule)}
.letter-nav a{color:var(--ink-3)}
.letter-nav a:hover{color:var(--coral)}

.foot-letter{padding:32px 0;border-top:1px solid var(--rule);background:var(--bone)}
.foot-letter .foot-bot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);flex-wrap:wrap;gap:16px}

/* ─── Letters archive grid ─────────────────────────────────────────── */
.archive{padding:48px 0 96px}
.archive-head{display:flex;flex-direction:column;gap:24px;margin-bottom:64px;max-width:760px}
.archive-h{font-family:var(--serif);font-weight:700;font-size:clamp(48px,7vw,96px);line-height:.94;letter-spacing:-.03em;margin:0;text-wrap:balance;color:var(--ink)}
.archive-h em{font-family:var(--display);font-style:italic;font-weight:400;color:var(--coral)}
.archive-deck{font-family:var(--serif);font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--ink-2);margin:0;text-wrap:pretty;max-width:54ch}
.archive-deck em{font-family:var(--display);font-style:italic;color:var(--ink)}

.archive-form{display:flex;gap:8px;width:100%;max-width:520px;margin-top:8px}
.archive-form input{flex:1;background:var(--bone-2);border:1px solid var(--rule);color:var(--ink);font-family:var(--mono);font-size:14px;padding:14px 18px;outline:none;transition:border-color .2s ease;letter-spacing:.02em}
.archive-form input:focus{border-color:var(--coral)}
.archive-form .btn{padding:14px 22px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;background:var(--coral);color:var(--bone);font-weight:700;font-family:var(--mono);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .2s ease;white-space:nowrap}
.archive-form .btn:hover{background:#ff7245}
.archive-form .btn .arr{font-family:var(--serif);font-size:14px}

@media(max-width:760px){
  .letter{padding:24px 0 64px}
  .letter-crumbs{margin-bottom:32px}
  .letter-header{margin-bottom:32px;gap:16px}
  .letter-cover{margin-bottom:40px}
  .letter-body{font-size:19px;line-height:1.62}
  .letter-body > p:first-of-type::first-letter{font-size:72px}
  .letter-cta{padding:32px 20px}
  .archive{padding:24px 0 64px}
  .archive-head{gap:16px;margin-bottom:40px}
}