:root {
  --paper: #f7f2e9;
  --paper-light: #fcfaf5;
  --ink: #332d2b;
  --muted: #77706a;
  --red: #914e50;
  --rule: #d9cec0;
  --serif: "Cormorant Garamond", "Baskerville", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100%; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.reader-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
a { color: inherit; }
::selection { color: white; background: var(--red); }
[hidden] { display: none !important; }

.home-page { min-height: 100svh; }
.site-header { width: min(100%, 1000px); min-height: 74px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) 16px max(28px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--red); text-decoration: none; }
.wordmark-heart { width: 23px; height: 22px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; transform: rotate(-7deg); }
.wordmark span { font: 500 20px/1 var(--hand); }
.pdf-button { min-height: 40px; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--rule); border-radius: 3px; background: transparent; color: inherit; font-size: 10px; font-weight: 600; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.pdf-button:hover { border-color: var(--red); background: rgba(255,255,255,.4); }
.pdf-button:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.pdf-arrow { color: var(--red); font-size: 15px; line-height: 1; }

.home-main { width: min(100%, 690px); margin: 0 auto; padding: clamp(56px, 9vh, 100px) 28px 35px; }
.intro { text-align: center; }
.intro-kicker { margin: 0 0 22px; display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.intro-kicker i { width: 3px; height: 3px; border-radius: 50%; background: var(--red); }
.intro h1 { margin: 0; font: 500 clamp(57px, 9vw, 88px)/.88 var(--serif); letter-spacing: -.04em; }
.intro h1 strong { color: var(--red); font-weight: 700; }
.opening-copy { max-width: 445px; margin: 26px auto 0; }
.opening-label { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .17em; }
.opening-message { margin-top: 11px; text-align: left; font: 400 17px/1.55 var(--serif); }
.opening-message p { margin: 0 0 12px; }
.opening-message p:first-child { color: var(--red); font-size: 18px; }
.opening-message p:first-child strong { font-weight: 700; }
.handmade-rule { margin: 30px auto 31px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--red); }
.handmade-rule span { width: 82px; height: 1px; background: var(--rule); }
.handmade-rule svg { width: 17px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-7deg); }

.collection { width: min(100%, 520px); margin: 0 auto; }
.collection-heading { padding: 0 3px 10px; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--rule); }
.collection-heading h2 { margin: 0; font: 600 20px/1 var(--serif); }
.collection-heading span { color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.letter-list { display: grid; }
.letter-list a { min-height: 57px; display: grid; grid-template-columns: 38px 1fr 24px; align-items: center; gap: 10px; border-bottom: 1px solid var(--rule); text-decoration: none; transition: padding .22s ease, color .22s ease; }
.letter-list a:hover { padding-inline: 8px; color: var(--red); }
.list-number { color: var(--red); font: 500 14px/1 var(--serif); }
.list-title { font: 500 23px/1 var(--serif); }
.list-arrow { justify-self: end; color: var(--red); font-size: 14px; opacity: 0; transform: translate(-3px, 3px); transition: opacity .2s ease, transform .2s ease; }
.letter-list a:hover .list-arrow, .letter-list a:focus-visible .list-arrow { opacity: 1; transform: translate(0, 0); }
.load-error { margin: 16px 0 0; color: var(--red); font-size: 13px; line-height: 1.5; }
.home-footer { margin: 29px auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font: 500 15px/1 var(--hand); }
.home-footer svg { width: 12px; height: 11px; fill: none; stroke: var(--red); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.letter-reader { position: fixed; z-index: 50; inset: 0; width: 100%; height: 100vh; height: 100dvh; overflow: auto; overscroll-behavior: contain; background: var(--paper-light); animation: reader-open .32s ease-out both; }
.reader-header { position: sticky; z-index: 2; top: 0; min-height: 58px; padding: max(9px, env(safe-area-inset-top)) max(clamp(15px, 4vw, 42px), env(safe-area-inset-right)) 9px max(clamp(15px, 4vw, 42px), env(safe-area-inset-left)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; border-bottom: 1px solid rgba(217, 206, 192, .82); background: rgba(252, 250, 245, .93); backdrop-filter: blur(9px); }
.back-button { justify-self: start; min-height: 38px; padding: 5px 7px 5px 0; display: inline-flex; align-items: center; gap: 9px; border: 0; background: none; color: var(--ink); font-size: 11px; cursor: pointer; }
.back-button span:first-child { color: var(--red); font-size: 17px; transition: transform .2s ease; }
.back-button:hover span:first-child { transform: translateX(-4px); }
.reader-count { color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: .12em; }
.reader-pdf { justify-self: end; min-height: 36px; padding: 6px 10px; }
.reader-progress { position: sticky; z-index: 2; top: 58px; height: 2px; background: transparent; }
.reader-progress span { width: 0; height: 100%; display: block; background: var(--red); transition: width .14s linear; }
.letter-page { width: min(100%, 760px); margin: 0 auto; padding: clamp(55px, 10vh, 95px) clamp(25px, 7vw, 72px) max(60px, env(safe-area-inset-bottom)); }
.letter-title-block { margin-bottom: 38px; text-align: center; animation: title-arrive .42s ease both; }
.letter-kicker { margin: 0 0 7px; color: var(--red); font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.letter-title-block h2 { margin: 0; font: 500 clamp(59px, 10vw, 88px)/.9 var(--serif); letter-spacing: -.045em; }
.letter-title-block h2.letter-title-long { font-size: clamp(43px, 7.2vw, 62px); letter-spacing: -.035em; }
.letter-title-mark { width: 32px; height: 1px; display: block; margin: 18px auto 0; background: var(--red); transform: rotate(-2deg); }
.letter-content { color: #3d3733; font: 400 clamp(18px, 2.2vw, 20px)/1.78 var(--serif); animation: text-arrive .48s .05s ease both; }
.letter-content p { margin: 0 0 1.25em; }
.letter-content h2, .letter-content h3 { margin: 1.4em 0 .55em; color: var(--ink); font: 500 1.4em/1 var(--serif); }
.letter-content blockquote { margin: 1.5em 0; padding: 3px 0 3px 17px; border-left: 1px solid var(--red); color: var(--muted); font-style: italic; }
.letter-content ul, .letter-content ol { margin: 0 0 1.3em; padding-left: 1.5em; }
.letter-content li { margin: .4em 0; }
.letter-content a { color: var(--red); text-underline-offset: 3px; }
.letter-pagination { margin: 47px 0 0; padding: 18px 0; display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.page-link { max-width: 48%; display: grid; gap: 6px; text-decoration: none; }
.page-next { text-align: right; }
.page-link[aria-disabled="true"] { visibility: hidden; pointer-events: none; }
.page-direction { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .12em; }
.page-link strong { overflow: hidden; font: 500 22px/1 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.page-link:hover strong { color: var(--red); }
.end-button { margin: 20px auto 0; padding: 10px; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--muted); font: 500 17px/1 var(--hand); cursor: pointer; }
.end-button span { color: var(--red); font: 14px var(--sans); }
.end-button:hover { color: var(--red); }

.noscript-message { max-width: 600px; margin: 20px auto; padding: 12px; color: var(--red); }

@keyframes reader-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes title-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes text-arrive { from { opacity: .45; } to { opacity: 1; } }

@media (max-width: 600px) {
  .site-header { min-height: 62px; padding: max(11px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 11px max(16px, env(safe-area-inset-left)); }
  .wordmark { gap: 6px; }
  .wordmark span { font-size: 18px; }
  .pdf-button { min-height: 36px; gap: 7px; padding: 7px 9px; font-size: 9px; }
  .home-main { padding: 9vh 22px 28px; }
  .intro-kicker { margin-bottom: 19px; font-size: 7px; }
  .intro h1 { font-size: clamp(48px, 12vw, 72px); }
  .opening-copy { max-width: 330px; margin-top: 23px; }
  .opening-message { font-size: 16px; }
  .opening-message p:first-child { font-size: 17px; }
  .handmade-rule { margin: 25px auto 23px; }
  .collection-heading h2 { font-size: 19px; }
  .letter-list a { min-height: 54px; grid-template-columns: 31px 1fr 20px; gap: 8px; }
  .list-title { font-size: 22px; }
  .list-arrow { opacity: .75; transform: none; }
  .home-footer { margin-top: 24px; }
  .reader-header { min-height: 54px; padding-inline: 12px; }
  .reader-progress { top: 54px; }
  .back-button { gap: 6px; font-size: 10px; }
  .reader-count { font-size: 7px; }
  .reader-pdf { min-height: 33px; padding-inline: 8px; }
  .letter-page { padding: 50px 23px 36px; }
  .letter-title-block { margin-bottom: 29px; }
  .letter-title-block h2 { font-size: clamp(55px, 14vw, 72px); }
  .letter-content { font-size: 19px; line-height: 1.72; }
  .letter-content p { margin-bottom: 1.18em; }
  .letter-pagination { margin-top: 34px; }
  .page-link strong { max-width: 140px; font-size: 20px; }
}

@media (max-width: 360px) {
  .site-header { padding-inline: 12px; }
  .wordmark span { font-size: 16px; }
  .pdf-button { font-size: 8px; }
  .home-main { padding-inline: 17px; }
  .letter-page { padding-inline: 18px; }
  .letter-content { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}