@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --paper: #f8f3ea;
  --paper-deep: #efe5d6;
  --paper-light: #fffdf8;
  --ink: #332445;
  --ink-soft: #6f6178;
  --lavender: #7d5aa8;
  --lavender-dark: #614184;
  --lavender-pale: #e5d9f1;
  --pink: #d99da9;
  --pink-pale: #f3dfe0;
  --yellow: #e9c86d;
  --line: rgba(125, 90, 168, .12);
  --shadow: 0 20px 55px rgba(72, 44, 83, .11), 0 3px 12px rgba(72, 44, 83, .07);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --script: 'Caveat', 'Comic Sans MS', cursive;
  --sans: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
}
button { font: inherit; }
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.reveal-button:focus-visible {
  z-index: 6;
  width: auto;
  height: auto;
  padding: .4rem .65rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  color: #fff;
  background: var(--lavender-dark);
  border-radius: 999px;
  white-space: nowrap;
  bottom: .8rem;
  left: 50%;
  transform: translateX(-50%);
}
.paper-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: .48;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.25));
}
.paper-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
main { position: relative; }
.stage { position: relative; width: min(100%, 1220px); margin: 0 auto; padding: 7rem 2rem; }
.welcome-stage { min-height: 100svh; display: grid; place-items: center; padding: 4rem 1.25rem 5rem; }
.paper-card { background: var(--paper-light); box-shadow: var(--shadow); }
.welcome-paper {
  position: relative;
  width: min(100%, 720px);
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 6vw, 5rem) clamp(3rem, 6vw, 4rem);
  text-align: center;
  transform: rotate(-.7deg);
  border: 1px solid rgba(125,90,168,.1);
  isolation: isolate;
  animation: paper-in 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.welcome-paper::before, .welcome-paper::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8px -8px -8px 8px;
  background: #f1e8dc;
  transform: rotate(1.2deg);
}
.welcome-paper::after { inset: -9px 6px 8px -7px; background: #e9dbd3; transform: rotate(-1.7deg); z-index: -2; }
.tape { position: absolute; width: 115px; height: 32px; background: rgba(233,200,109,.46); box-shadow: 0 2px 4px rgba(73,48,79,.07); }
.tape::after { content: ''; position: absolute; inset: 0; opacity: .25; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.6) 13px 14px); }
.tape-top { top: -15px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.mini-label { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .78rem; color: var(--lavender-dark); background: var(--lavender-pale); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-3deg); }
.label-star, .label-heart { color: var(--pink); font-size: 1rem; }
.eyebrow, .section-kicker { margin: 2rem 0 .7rem; color: var(--lavender); font-size: .7rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -.045em; }
h1 { color: var(--ink); font-size: clamp(4rem, 10vw, 7.5rem); line-height: .82; }
h1 em, h2 em { color: var(--lavender); font-style: normal; }
.handwritten { font-family: var(--script); }
.welcome-subtitle { margin: 1.3rem 0 1.5rem; color: var(--ink-soft); font-size: clamp(1.55rem, 3vw, 2rem); transform: rotate(-2deg); }
.hero-doodle { position: relative; width: 190px; height: 160px; margin: 1rem auto 1.25rem; }
.hero-sun { position: absolute; top: 24px; left: 42px; width: 66px; height: 42px; border: 2px solid var(--pink); border-bottom: 0; border-radius: 50px 50px 0 0; opacity: .5; }
.hero-stem { position: absolute; left: 91px; bottom: 14px; width: 2px; height: 90px; background: var(--lavender); transform: rotate(3deg); }
.hero-leaf { position: absolute; bottom: 48px; width: 29px; height: 15px; border: 2px solid var(--lavender); border-radius: 100% 0 100% 0; }
.hero-leaf-left { left: 63px; transform: rotate(27deg); }
.hero-leaf-right { left: 94px; bottom: 68px; transform: rotate(-27deg) scaleX(-1); }
.hero-flower { position: absolute; top: 11px; left: 63px; width: 64px; height: 64px; }
.hero-flower i { position: absolute; top: 20px; left: 22px; display: block; width: 23px; height: 30px; border-radius: 80% 10% 80% 10%; background: var(--lavender-pale); border: 2px solid var(--lavender); transform-origin: 11px 12px; }
.hero-flower i:nth-child(1) { transform: rotate(0); } .hero-flower i:nth-child(2) { transform: rotate(72deg); } .hero-flower i:nth-child(3) { transform: rotate(144deg); } .hero-flower i:nth-child(4) { transform: rotate(216deg); } .hero-flower i:nth-child(5) { transform: rotate(288deg); }
.hero-flower b { position: absolute; top: 27px; left: 29px; width: 13px; height: 13px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--lavender-dark); }
.tiny-spark { position: absolute; color: var(--pink); font-size: 1.25rem; animation: twinkle 3s ease-in-out infinite; }
.spark-left { top: 55px; left: 18px; } .spark-right { top: 5px; right: 20px; animation-delay: 1.2s; }
.primary-button, .secondary-button, .replay-button, .music-toggle { border: 0; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, opacity .25s ease; }
.primary-button { display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 1.45rem; color: #fff; background: var(--lavender); box-shadow: 0 9px 0 var(--lavender-dark), 0 14px 26px rgba(125,90,168,.2); border-radius: 999px; font-weight: 700; font-size: .82rem; letter-spacing: .03em; }
.primary-button:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 12px 0 var(--lavender-dark), 0 18px 30px rgba(125,90,168,.24); }
.primary-button:active { transform: translateY(5px); box-shadow: 0 4px 0 var(--lavender-dark), 0 8px 15px rgba(125,90,168,.17); }
.button-arrow { font-size: 1.35rem; line-height: 0; }
.tiny-note { margin: 1.2rem 0 0; color: #968a98; font-family: var(--script); font-size: 1.1rem; }
.paper-corner { position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; }
.paper-corner-left { left: 0; border-width: 0 0 33px 33px; border-color: transparent transparent var(--paper) transparent; }
.paper-corner-right { right: 0; border-width: 33px 0 0 33px; border-color: transparent transparent transparent var(--paper); }
.scroll-hint { position: absolute; bottom: 1rem; left: 50%; display: flex; flex-direction: column; gap: .5rem; align-items: center; color: var(--ink-soft); font-family: var(--script); font-size: 1.05rem; transform: translateX(-50%); animation: bob 2.4s ease-in-out infinite; }
.scroll-hint span { display: block; width: 1px; height: 33px; background: var(--lavender); }
.music-toggle { position: fixed; z-index: 20; top: 1.15rem; right: 1.15rem; display: flex; align-items: center; gap: .42rem; padding: .55rem .7rem; color: var(--lavender-dark); background: rgba(255,253,248,.86); border: 1px solid rgba(125,90,168,.17); border-radius: 999px; box-shadow: 0 7px 18px rgba(72,44,83,.08); backdrop-filter: blur(6px); font-size: .7rem; }
.music-toggle:hover { transform: rotate(2deg) translateY(-2px); box-shadow: 0 10px 22px rgba(72,44,83,.13); }
.music-icon { color: var(--lavender); font-size: 1rem; line-height: 1; }
.music-toggle.is-playing .music-icon { animation: music-pulse .7s ease-in-out infinite alternate; }
.truths-stage { padding-top: 8rem; padding-bottom: 8rem; }
.section-intro { max-width: 680px; margin: 0 auto 3.4rem; text-align: center; }
.section-kicker { margin: 0 0 .7rem; }
.section-intro h2, .letter-heading h2 { font-size: clamp(3.5rem, 8vw, 6.5rem); line-height: .88; }
.section-subtitle { margin: 1.2rem 0 0; color: var(--ink-soft); font-size: clamp(1.4rem, 2.8vw, 1.8rem); }
.truths-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; max-width: 980px; margin: 0 auto; }
.truth-card { position: relative; min-height: 245px; padding: 1.6rem; isolation: isolate; transform: rotate(var(--tilt)); transition: transform .35s ease, box-shadow .35s ease; }
.truth-card:nth-child(odd) { --tilt: -.7deg; } .truth-card:nth-child(even) { --tilt: .65deg; }
.truth-card:hover { z-index: 2; transform: translateY(-9px) rotate(0deg); }
.truth-card::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--paper-light); box-shadow: var(--shadow); }
.truth-card::after { content: ''; position: absolute; z-index: -2; inset: 7px -6px -7px 7px; background: var(--paper-deep); transform: rotate(2deg); }
.truth-card:nth-child(3n)::after { transform: rotate(-2deg); background: var(--pink-pale); }
.card-number { position: absolute; top: 1rem; right: 1.15rem; color: var(--lavender); font-family: var(--serif); font-size: 1.5rem; font-weight: 700; opacity: .78; }
.card-decor { position: absolute; left: 1.3rem; top: .8rem; color: var(--pink); font-size: 1.05rem; opacity: .75; }
.card-decor::after { content: '·  ·'; position: absolute; top: -.12rem; left: 1.1rem; color: var(--yellow); letter-spacing: .2rem; }
.card-content { min-height: 210px; display: flex; flex-direction: column; justify-content: center; padding: 1.2rem .5rem .5rem; }
.card-title { margin: .5rem 0 .7rem; color: var(--ink); font-family: var(--serif); font-size: clamp(2rem, 3.3vw, 2.8rem); font-weight: 600; line-height: .95; }
.card-message { max-width: 29rem; margin: 0; color: var(--ink-soft); font-family: var(--script); font-size: 1.35rem; line-height: 1.15; }
.scratch-area { position: absolute; z-index: 3; inset: 0; cursor: crosshair; touch-action: none; border-radius: 2px; transition: opacity .5s ease; }
.scratch-area.is-complete { pointer-events: none; opacity: 0; }
.reveal-chip { position: absolute; left: 50%; top: 50%; z-index: 4; width: max-content; max-width: 70%; padding: .45rem .8rem; color: #fff; background: rgba(97,65,132,.87); border-radius: 999px; font-family: var(--script); font-size: 1.2rem; transform: translate(-50%, -50%) rotate(-4deg); pointer-events: none; }
.truth-card.is-revealed { animation: card-reveal .65s cubic-bezier(.2,.8,.2,1) both; }
.truth-card.is-revealed::before { background: #fffdf9; }
.truth-card.is-revealed .card-title { color: var(--lavender-dark); }
.truth-card.is-revealed .card-decor { color: var(--lavender); }
.truths-footer { max-width: 580px; margin: 4.8rem auto 0; text-align: center; }
.progress-wrap { margin-bottom: 1.7rem; }
.progress-copy { display: flex; justify-content: space-between; align-items: center; margin-bottom: .65rem; color: var(--ink-soft); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.progress-flower { color: var(--pink); font-size: 1.1rem; }
.progress-track { height: 8px; padding: 2px; overflow: hidden; background: var(--lavender-pale); border-radius: 99px; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--lavender), var(--pink)); border-radius: inherit; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.secondary-button { display: inline-flex; align-items: center; gap: .9rem; padding: .95rem 1.35rem; color: #fff; background: var(--lavender); border-radius: 999px; font-size: .8rem; font-weight: 700; box-shadow: 0 6px 0 var(--lavender-dark); }
.secondary-button:not(:disabled):hover { transform: translateY(-3px) rotate(1deg); box-shadow: 0 9px 0 var(--lavender-dark), 0 12px 22px rgba(125,90,168,.16); }
.secondary-button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--lavender-dark); }
.secondary-button:disabled { color: #9d8faa; background: #e6ddea; box-shadow: none; cursor: not-allowed; }
.unlock-note { margin: 1rem 0 0; color: #978b9a; font-family: var(--script); font-size: 1.15rem; }
.letter-stage { padding-top: 8rem; padding-bottom: 7rem; }
.letter-heading { margin: 0 auto 3.2rem; text-align: center; }
.last-thing-pill { display: inline-block; padding: .42rem .8rem; color: var(--lavender-dark); background: var(--pink-pale); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; transform: rotate(2deg); }
.letter-lede { margin: 1rem 0 0; color: var(--ink-soft); font-size: 1.45rem; transform: rotate(-2deg); }
.letter-wrap { position: relative; width: min(100%, 820px); margin: 0 auto; padding: 2rem 1rem 3rem; }
.letter-paper { position: relative; max-width: 650px; min-height: 660px; margin: 0 auto; padding: clamp(3.3rem, 8vw, 5.2rem) clamp(1.5rem, 8vw, 5.5rem) 4.5rem; background: #fffdf7; box-shadow: 0 18px 35px rgba(72,44,83,.1); transform: rotate(.8deg); isolation: isolate; }
.letter-paper::before { content: ''; position: absolute; z-index: -1; inset: 8px -8px -8px 6px; background: #f0e4d4; transform: rotate(-1.7deg); }
.letter-paper::after { content: ''; position: absolute; z-index: -2; inset: -9px 7px 9px -7px; background: #edd6d2; transform: rotate(1deg); }
.letter-lines { position: absolute; inset: 0; z-index: -1; opacity: .37; background: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(125,90,168,.12) 36px 37px); }
.letter-stamp { position: absolute; top: 1.5rem; right: 1.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 65px; height: 65px; color: var(--pink); border: 2px dashed var(--pink); border-radius: 50%; font-size: 1.8rem; line-height: .7; transform: rotate(10deg); opacity: .8; }
.letter-stamp small { margin-top: .3rem; color: var(--lavender); font-family: var(--script); font-size: .8rem; }
.letter-body { position: relative; color: #594861; font-family: var(--script); font-size: clamp(1.43rem, 2.7vw, 1.8rem); line-height: 1.25; }
.letter-body p { margin: 0 0 1.35rem; }
.letter-signoff { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; margin-top: 1.9rem; padding-right: 1rem; }
.letter-signoff strong { color: var(--lavender-dark); font-size: 1.8rem; font-weight: 600; }
.letter-signoff span { color: var(--pink); font-size: 2.35rem; transform: rotate(-8deg); }
.ink-heart { position: absolute; right: 2rem; bottom: 1.4rem; color: var(--pink); font-family: var(--serif); font-size: 3rem; transform: rotate(12deg); }
.scrap { position: absolute; z-index: 3; display: grid; place-items: center; color: var(--lavender-dark); background: var(--lavender-pale); box-shadow: 3px 6px 10px rgba(72,44,83,.1); }
.scrap-left { top: 30px; left: 3%; width: 125px; height: 84px; background: #e9d7ea; transform: rotate(-11deg); }
.scrap-left::before { content: ''; position: absolute; inset: 6px; border: 1px dashed rgba(97,65,132,.35); }
.scrap-left span { font-family: var(--script); font-size: 1.5rem; transform: rotate(-5deg); }
.scrap-right { right: 4%; bottom: 35px; width: 78px; height: 74px; color: var(--pink); background: var(--yellow); font-size: 2rem; transform: rotate(12deg); }
.letter-tape-one { z-index: 4; top: 52px; right: 11%; width: 102px; height: 26px; background: rgba(217,157,169,.44); transform: rotate(25deg); }
.letter-tape-two { z-index: 4; left: 12%; bottom: 45px; width: 98px; height: 26px; background: rgba(233,200,109,.48); transform: rotate(-18deg); }
.sticker { position: absolute; z-index: 4; }
.frog-sticker { right: 1%; top: 170px; width: 100px; height: 86px; padding-top: 17px; background: #b8d09b; border: 3px solid #66825b; border-radius: 52% 48% 48% 52%; box-shadow: 3px 7px 0 rgba(102,130,91,.25); transform: rotate(7deg); }
.frog-sticker::before, .frog-sticker::after { content: ''; position: absolute; top: -15px; width: 29px; height: 29px; border: 3px solid #66825b; background: #b8d09b; border-radius: 50%; }
.frog-sticker::before { left: 15px; } .frog-sticker::after { right: 15px; }
.frog-eyes { position: absolute; z-index: 2; top: -3px; left: 26px; display: flex; gap: 22px; }
.frog-eyes i { display: block; width: 8px; height: 8px; background: var(--ink); border-radius: 50%; }
.frog-face { text-align: center; color: #466146; font-family: var(--script); font-size: 2.5rem; line-height: 1; }
.frog-feet { position: absolute; bottom: -9px; left: 15px; display: flex; justify-content: space-between; width: 70px; }
.frog-feet i { display: block; width: 25px; height: 11px; background: #b8d09b; border: 2px solid #66825b; border-radius: 50%; }
.doodle { position: absolute; z-index: 4; color: var(--pink); font-family: var(--serif); }
.bouquet-doodle { left: 2%; top: 210px; font-size: 3rem; transform: rotate(-17deg); }
.bouquet-doodle span { display: inline-block; color: var(--lavender); font-size: 1.8rem; transform: translate(-9px, 19px) rotate(20deg); }
.bouquet-doodle b { display: inline-block; color: var(--yellow); font-size: 1.5rem; transform: translate(-45px, -21px); }
.sparkle-doodle { right: 11%; top: 65px; color: var(--yellow); font-size: 2rem; transform: rotate(12deg); }
.sparkle-doodle span { color: var(--pink); font-size: 1.4rem; }
.heart-doodle { position: absolute; z-index: 4; left: 10%; bottom: 25px; color: var(--pink); font-size: 2.3rem; transform: rotate(-13deg); }
.letter-ending { margin-top: 2rem; text-align: center; }
.footer-love { margin: 0 0 1rem; color: var(--lavender); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.replay-button { padding: .65rem .9rem; color: var(--ink-soft); background: transparent; border-bottom: 1px dashed var(--lavender); font-family: var(--script); font-size: 1.25rem; }
.replay-button:hover { color: var(--lavender-dark); transform: translateY(-2px) rotate(-1deg); }
.floating-doodles { position: fixed; z-index: -1; inset: 0; pointer-events: none; overflow: hidden; }
.floaty { position: absolute; color: var(--pink); font-family: var(--serif); opacity: .38; animation: float-away 12s ease-in-out infinite; }
.floaty-heart { font-size: 2rem; } .floaty-flower { color: var(--lavender); font-size: 1.6rem; } .floaty-star { color: var(--yellow); font-size: 1.5rem; }
.floaty.one { left: 8%; top: 18%; animation-delay: -2s; } .floaty.two { right: 12%; top: 28%; animation-delay: -6s; } .floaty.three { left: 3%; top: 64%; animation-delay: -9s; } .floaty.four { right: 7%; top: 59%; animation-delay: -4s; } .floaty.five { left: 17%; top: 87%; animation-delay: -7s; } .floaty.six { right: 16%; top: 84%; animation-delay: -1s; }
.reveal-section { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.reveal-section.is-visible { opacity: 1; transform: translateY(0); }
@keyframes paper-in { from { opacity: 0; transform: translateY(22px) rotate(-3deg) scale(.97); } to { opacity: 1; transform: translateY(0) rotate(-.7deg) scale(1); } }
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }
@keyframes twinkle { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15) rotate(8deg); } }
@keyframes float-away { 0%,100% { transform: translate3d(0,0,0) rotate(-8deg); } 50% { transform: translate3d(12px,-24px,0) rotate(10deg); } }
@keyframes card-reveal { 0% { transform: translateY(8px) rotate(var(--tilt)); } 55% { transform: translateY(-4px) rotate(0deg); } 100% { transform: translateY(0) rotate(0deg); } }
@keyframes music-pulse { from { transform: translateY(2px) rotate(-7deg); } to { transform: translateY(-2px) rotate(7deg); } }
@media (max-width: 760px) {
  .stage { padding-right: 1.25rem; padding-left: 1.25rem; }
  .welcome-stage { padding-top: 4.5rem; }
  .truths-stage, .letter-stage { padding-top: 6rem; }
  .truths-spread { grid-template-columns: 1fr; max-width: 520px; gap: 1.8rem; }
  .truth-card, .truth-card:nth-child(even), .truth-card:nth-child(odd) { --tilt: -.4deg; }
  .truth-card:hover { transform: translateY(-5px) rotate(0deg); }
  .letter-wrap { padding-right: .25rem; padding-left: .25rem; }
  .letter-paper { min-height: 700px; padding-top: 4.8rem; }
  .frog-sticker { right: -2%; top: 135px; transform: scale(.78) rotate(7deg); transform-origin: top right; }
  .scrap-left { left: -1%; transform: scale(.8) rotate(-11deg); transform-origin: top left; }
  .scrap-right { right: 0; transform: scale(.8) rotate(12deg); transform-origin: bottom right; }
  .bouquet-doodle { left: -2%; transform: scale(.78) rotate(-17deg); transform-origin: top left; }
  .sparkle-doodle { right: 0; }
  .letter-tape-one { right: 9%; }
  .letter-tape-two { left: 9%; }
}
@media (max-width: 460px) {
  .music-label { display: none; }
  .welcome-paper { padding-right: 1.1rem; padding-left: 1.1rem; }
  h1 { font-size: clamp(3.35rem, 17vw, 5rem); }
  .section-intro h2, .letter-heading h2 { font-size: clamp(3.1rem, 15vw, 4.7rem); }
  .card-title { font-size: 2.35rem; }
  .letter-paper { padding-right: 1.35rem; padding-left: 1.35rem; }
  .letter-stamp { right: 1rem; transform: scale(.8) rotate(10deg); transform-origin: top right; }
  .letter-body { font-size: 1.45rem; }
  .letter-signoff { padding-right: 0; }
  .letter-signoff span { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}