@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/cormorant-garamond-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/manrope-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/manrope-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  font-family: 'Manrope', sans-serif;
  color: #51433e;
  background: #f7f0e7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --rose: #a66f69;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse 85% 700px at 100% 0%, #ead2c333, transparent), radial-gradient(ellipse 80% 1000px at 0% 65%, #fdf9ef99, transparent); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: url('./grain.svg') repeat; opacity: .035; }
::selection { color: #48362f; background: #e9cbc0; }
.letter { position: relative; max-width: 680px; margin: 0 auto; padding: calc(40px + env(safe-area-inset-top)) 20px calc(50px + env(safe-area-inset-bottom)); }
.dedication, .ending { display: flex; align-items: center; justify-content: center; gap: 18px; }
.dedication { color: #94796a; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; }
.hairline { display: block; width: 32px; height: 1px; background: #d9c6b5; }
.note { max-width: 420px; margin: 35px auto 0; font-size: 13px; line-height: 1.9; color: #79665d; }
.note p { margin: 0; }
.note p + p { margin-top: 15px; }
.poem-heading { padding: 35px 0 0; text-align: center; }
.rose { display: block; width: 75px; height: auto; margin: 0 auto 22px; }
h1 { margin: 0; color: var(--rose); font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 10.5vw, 59px); line-height: 1.05; letter-spacing: -1.2px; text-wrap: balance; }
.title-rule { display: block; height: 1px; width: 42px; margin: 28px auto 35px; background: #cfb5a5; }
.poem-body { width: fit-content; max-width: 100%; margin-inline: auto; font-family: var(--serif); font-size: clamp(16px, 5vw, 24px); line-height: 1.65; }
.stanza { margin: 0 0 1.4em; break-inside: avoid; }
.stanza:last-child { margin-bottom: 0; }
.verse { display: block; white-space: pre-wrap; overflow-wrap: break-word; padding-left: 14px; text-indent: -14px; }
.ending { margin-top: 45px; opacity: .85; }

@media (min-width: 700px) {
  .letter { padding: 65px 26px; }
  .note { margin-top: 42px; font-size: 14px; }
  .poem-heading { padding-top: 42px; }
  .rose { width: 85px; }
  .title-rule { margin-bottom: 45px; }
}
@media (max-width: 360px) {
  .note { font-size: 12px; }
}
@media print {
  body { background: white; }
  body::before { display: none; }
  .letter { padding: 0; }
  .poem-body { font-size: 16pt; }
  .note { font-size: 10pt; }
}