@charset "UTF-8";
:root {
  --cream:#f6f1e7;
  --paper:#fffcf5;
  --red:#943c4c;
  --red-dark:#6f2b39;
  --ink:#493b36;
  --muted:#8c7e72;
  --line:#dcd2c3;
  --olive:#79805d;
  --serif:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei",Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:20;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  cursor:pointer;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible,a:focus-visible {
  outline:3px solid var(--olive);
  outline-offset:7px;
}

button {
  color:inherit;
}

::selection {
  background:#ebc8c4;
  color:var(--red-dark);
}

.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  padding:14px;
  background:var(--paper);
  z-index:100;
}

.skip-link:focus {
  top:15px;
}

.reading-progress {
  position:fixed;
  top:0;
  left:0;
  height:3px;
  background:var(--red);
  width:0;
  z-index:60;
}

#confetti {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:80;
}

.site-header {
  height:102px;
  max-width:1440px;
  margin:auto;
  padding:0 6.2%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #dcd2c380;
}

.wordmark {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:15px;
  font-weight:600;
  letter-spacing:2px;
}

.brand-heart {
  color:var(--red);
  font:36px Georgia,serif;
  line-height:1;
}

.wordmark-note {
  font:italic 12px Georgia,serif;
  letter-spacing:.4px;
  margin-left:10px;
  color:var(--muted);
}

.header-actions {
  display:flex;
  align-items:center;
  gap:27px;
}

.edition {
  font-size:11px;
  letter-spacing:2px;
  color:var(--muted);
}

.sound-toggle {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #cfc5b6;
  border-radius:24px;
  padding:10px 15px;
  background:transparent;
  font-size:11px;
  min-height:40px;
}

.sound-bars {
  display:flex;
  align-items:center;
  gap:3px;
  height:14px;
}

.sound-bars i {
  width:2px;
  height:5px;
  background:var(--red);
  border-radius:2px;
}

.sound-bars i:nth-child(2) {
  height:12px;
}

.sound-bars i:nth-child(3) {
  height:9px;
}

.sound-toggle[aria-pressed=true] i {
  animation:equalizer .75s ease-in-out infinite alternate;
}

.sound-bars i:nth-child(2) {
  animation-delay:-.4s!important;
}

.sound-bars i:nth-child(3) {
  animation-delay:-.2s!important;
}

.hero {
  max-width:1440px;
  min-height:750px;
  margin:auto;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:65px 6.2% 112px;
  gap:20px;
  overflow:hidden;
}

.eyebrow {
  font-size:10px;
  letter-spacing:2.5px;
  font-weight:500;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.8;
}

.hero .eyebrow>span {
  width:20px;
  height:1px;
  background:var(--red);
}

h1,h2,h3,p {
  margin-top:0;
}

h1 {
  font-family:var(--serif);
  font-size:clamp(39px,4.6vw,66px);
  font-weight:500;
  line-height:1.4;
  letter-spacing:3px;
  margin:27px 0 24px;
  color:var(--red-dark);
}

.name-line {
  position:relative;
}

.name-line::after {
  content:"";
  position:absolute;
  bottom:-8px;
  left:0;
  width:100%;
  height:12px;
  border-top:2px solid #bd847c;
  border-radius:50%;
  transform:rotate(-3deg);
}

.title-star {
  width:31px;
  height:31px;
  position:absolute;
  right:-49px;
  top:13px;
  color:#ad8460;
  animation:star-turn 16s linear infinite;
}

.hero-heart {
  display:inline-block;
  font:1em Georgia,serif;
  transform:rotate(-15deg);
  margin-left:12px;
  color:var(--red);
}

.hero-description {
  font-size:14px;
  line-height:2.1;
  color:#827166;
  letter-spacing:1.2px;
  margin-bottom:28px;
}

.primary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  background:var(--red);
  border:1px solid var(--red);
  color:#fff9ee;
  border-radius:3px;
  min-height:54px;
  padding:15px 27px;
  font-size:13px;
  letter-spacing:1px;
  box-shadow:0 5px 0 #943c4c0b;
  transition:background .25s,transform .25s,box-shadow .25s;
}

.primary-button>span {
  font-size:22px;
  line-height:1;
}

.primary-button:hover {
  background:var(--red-dark);
  transform:translateY(-3px);
  box-shadow:0 8px 18px #943c4c20;
}

.hero-footnote {
  font-size:10px;
  letter-spacing:1px;
  margin:18px 0 0;
  color:var(--muted);
}

.tiny-heart {
  color:var(--red);
  margin-right:7px;
}

.hero-art {
  height:520px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1000px;
  isolation:isolate;
}

.hero-art::before {
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  max-width:100%;
  border-radius:50%;
  background:#e8d4ba55;
  filter:blur(35px);
  z-index:-1;
}

.orbit {
  position:absolute;
  width:480px;
  height:380px;
  max-width:110%;
  border:1px solid #bba69040;
  border-radius:50%;
  transform:rotate(-24deg);
  pointer-events:none;
}

.orbit-two {
  width:400px;
  height:490px;
  transform:rotate(34deg);
  border-style:dashed;
  border-color:#bba69030;
}

.handwritten {
  font-family:"Snell Roundhand","Segoe Script","URW Chancery L",cursive;
  font-style:italic;
}

.art-note {
  position:absolute;
  top:12px;
  right:31px;
  transform:rotate(8deg);
  font-size:21px;
  color:var(--red);
  z-index:3;
}

.envelope-scene {
  width:370px;
  height:285px;
  position:relative;
  transform:rotate(-8deg) translateY(30px);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 24px 22px #694d3b20);
  animation:envelope-in 1.4s cubic-bezier(.2,.7,.2,1) both;
}

.envelope-back {
  position:absolute;
  inset:0;
  background:#ddc2a1;
  border-radius:4px;
}

.envelope-back::before {
  content:"";
  position:absolute;
  top:-120px;
  left:0;
  width:100%;
  height:123px;
  background:#dfc5a6;
  clip-path:polygon(0 100%,50% 0,100% 100%);
}

.letter-peek {
  position:absolute;
  left:23px;
  right:23px;
  top:-96px;
  height:308px;
  background:#fffaf0;
  border:1px solid #e6daca;
  border-radius:3px;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:24px 12px;
  transform:rotate(3deg);
  box-shadow:0 2px 10px #79604a10;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}

.letter-peek::before {
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid #d9cbb680;
  pointer-events:none;
}

.peek-heading {
  font-family:var(--serif);
  font-size:21px;
  color:var(--red);
}

.princess-bird {
  width:135px;
  height:135px;
  margin-top:3px;
}

.peek-message {
  font-family:var(--serif);
  font-size:11px;
  color:#917060;
  letter-spacing:1px;
}

.peek-heart {
  font:23px Georgia,serif;
  color:var(--red);
  margin-top:9px;
}

.envelope-front {
  position:absolute;
  inset:0;
  background:#ecd7ba;
  clip-path:polygon(0 0,50% 51%,100% 0,100% 100%,0 100%);
  border-radius:3px;
}

.envelope-fold {
  position:absolute;
  inset:0;
  background:#efdcc1;
  clip-path:polygon(0 100%,0 92%,50% 40%,100% 92%,100% 100%);
  border-bottom:1px solid #cdb493;
}

.wax-seal {
  position:absolute;
  top:94px;
  left:calc(50% - 28px);
  height:58px;
  width:58px;
  border:4px double #b26b71;
  background:#974553;
  color:#f1c8bc;
  border-radius:47% 53% 48% 52%;
  box-shadow:2px 4px 6px #6a354b30,inset 0 0 0 3px #83384355;
  transition:transform .3s;
}

.wax-seal:hover {
  transform:rotate(15deg) scale(1.12);
}

.wax-seal span {
  font:27px Georgia,serif;
  text-shadow:0 2px #69323f;
}

.envelope-address {
  position:absolute;
  left:28px;
  bottom:51px;
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:3px;
  color:#8b6758;
}

.envelope-stamp {
  position:absolute;
  right:20px;
  bottom:20px;
  padding:8px 6px;
  border:1px dashed #9a755f80;
  color:#9a755f;
  font-size:5px;
  letter-spacing:1px;
  text-align:center;
  transform:rotate(4deg);
}

.envelope-stamp span {
  font:26px Georgia,serif;
}

.envelope-scene.opened {
  transform:rotate(0deg) translateY(30px);
}

.envelope-scene.opened .letter-peek {
  transform:translateY(-95px) rotate(0deg);
}

.art-flower {
  position:absolute;
  z-index:2;
}

.flower-one {
  width:100px;
  height:100px;
  bottom:69px;
  left:-10px;
  color:#ac6b6c;
  transform:rotate(-15deg);
  animation:flower-sway 6s ease-in-out infinite;
}

.flower-two {
  width:57px;
  height:57px;
  top:79px;
  right:0;
  color:#90916a;
  animation:flower-sway 7s ease-in-out infinite reverse;
}

.art-spark {
  position:absolute;
  color:#a78958;
  z-index:3;
}

.spark-one {
  font-size:47px;
  top:45px;
  left:18px;
}

.spark-two {
  font-size:25px;
  right:10px;
  bottom:124px;
}

.postmark {
  width:108px;
  height:108px;
  border:1px solid #98695788;
  border-radius:50%;
  position:absolute;
  bottom:46px;
  right:2px;
  transform:rotate(14deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#987665;
  background:#f6f1e788;
}

.postmark span {
  font-size:6px;
  letter-spacing:1px;
}

.postmark b {
  font-family:var(--serif);
  font-size:13px;
  font-weight:400;
  letter-spacing:2px;
}

.art-caption {
  position:absolute;
  bottom:0;
  left:55px;
  right:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:10px;
  color:var(--muted);
  letter-spacing:1px;
}

.caption-line {
  width:32px;
  height:1px;
  background:#bcaa94;
}

.scroll-cue {
  position:absolute;
  bottom:28px;
  left:6.2%;
  display:flex;
  align-items:center;
  gap:22px;
  font-size:10px;
  color:var(--muted);
  letter-spacing:2px;
}

.scroll-cue span:last-child {
  font-size:23px;
  animation:down 2s ease-in-out infinite;
}

.hero-bottom-note {
  position:absolute;
  bottom:34px;
  right:6.2%;
  font-size:8px;
  letter-spacing:1.7px;
  color:#978577;
}

.love-ribbon {
  overflow:hidden;
  background:#e9e5d7;
  border-top:1px solid #d8d3c3;
  border-bottom:1px solid #d8d3c3;
  color:#6e7556;
  padding:18px 0;
}

.love-ribbon>div {
  width:max-content;
  display:flex;
  align-items:center;
  gap:36px;
  white-space:nowrap;
  font-size:11px;
  letter-spacing:2px;
  animation:marquee 45s linear infinite;
}

.love-ribbon span {
  font-size:20px;
  line-height:1;
}

.section-shell {
  max-width:1260px;
  padding-left:6%;
  padding-right:6%;
  margin:auto;
}

.journey {
  padding-top:96px;
  padding-bottom:100px;
}

.section-intro {
  text-align:center;
}

.section-intro .eyebrow {
  justify-content:center;
}

h2 {
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(27px,3vw,39px);
  line-height:1.6;
  letter-spacing:2px;
  margin:15px 0;
}

h2 em {
  font-style:normal;
  color:var(--red);
}

.section-intro>p {
  font-size:12px;
  color:var(--muted);
  line-height:2;
  letter-spacing:1px;
}

.timeline {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:60px;
}

.timeline-stop {
  position:relative;
  padding-right:8px;
}

.stop-number {
  display:block;
  font-size:9px;
  letter-spacing:2px;
  color:#9c8a78;
  margin-bottom:20px;
}

.timeline-stop::after {
  content:"";
  position:absolute;
  top:36px;
  left:6px;
  right:-6px;
  height:1px;
  background:#cfc2ae;
}

.timeline-stop:last-child::after {
  display:none;
}

.stop-dot {
  position:relative;
  z-index:1;
  display:block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ad967e;
  margin-bottom:24px;
  border:2px solid var(--cream);
  outline:1px solid #ad967e;
}

.timeline h3 {
  font-family:var(--serif);
  font-size:19px;
  font-weight:500;
  margin-bottom:11px;
}

.timeline h3 span {
  color:var(--red);
  font-family:Georgia,serif;
  font-size:17px;
}

.timeline p {
  font-size:10px;
  color:var(--muted);
  letter-spacing:.5px;
}

.current .stop-dot {
  background:var(--red);
  outline-color:var(--red);
}

.future .stop-dot {
  color:var(--red);
  background:var(--cream);
  outline:0;
  font-size:17px;
  line-height:8px;
  width:16px;
}

.future h3 {
  color:var(--red);
}

.letter-section {
  background:#ece7dc;
  border-top:1px solid #e2dacb;
  border-bottom:1px solid #e2dacb;
  padding:84px 0 95px;
}

.letter-layout {
  display:grid;
  grid-template-columns:30% 1fr;
  gap:8%;
}

.letter-sidebar-inner {
  position:sticky;
  top:58px;
}

.letter-sidebar h2 {
  font-size:32px;
  line-height:1.75;
  margin-top:20px;
}

.letter-sidebar p {
  font-size:12px;
  line-height:2.2;
  color:var(--muted);
  letter-spacing:1px;
}

.letter-sidebar .eyebrow {
  font-size:8px;
  letter-spacing:1.5px;
}

.chapter-nav {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:35px;
}

.chapter-nav a {
  font-size:9px;
  color:#95887a;
  display:flex;
  gap:18px;
  align-items:center;
  padding:10px 0;
  border-left:2px solid transparent;
  padding-left:15px;
  transition:color .3s,border-color .3s;
}

.chapter-nav a span {
  font-size:11px;
  letter-spacing:1px;
}

.chapter-nav a:hover,.chapter-nav a.active {
  color:var(--red);
  border-color:var(--red);
}

.sidebar-flower {
  display:block;
  width:65px;
  height:65px;
  color:#aaa584;
  margin:42px 0 17px 12px;
}

.sidebar-sign {
  font-size:23px;
  color:#8f7464;
  display:block;
  transform:rotate(-8deg);
  margin-left:9px;
}

.letter-paper {
  background:var(--paper);
  padding:36px 52px 24px;
  box-shadow:0 3px 18px #5d453809;
  position:relative;
  border:1px solid #e7ded0;
}

.letter-paper::before {
  content:"";
  width:110px;
  height:30px;
  position:absolute;
  top:-15px;
  left:calc(50% - 55px);
  background:#d7c49f75;
  transform:rotate(-3deg);
  clip-path:polygon(0 4%,98% 0,100% 91%,2% 100%,4% 80%,0 60%,3% 40%);
}

.paper-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:2px;
  color:#ad9580;
  padding-bottom:24px;
  border-bottom:1px solid #e9e0d2;
  margin-bottom:38px;
}

.paper-top span:last-child {
  font-size:23px;
  color:var(--red);
}

.chapter-label {
  font-size:8px;
  line-height:1.8;
  letter-spacing:1.6px;
  color:#ad9580;
  margin-bottom:18px;
}

.letter-group {
  scroll-margin-top:40px;
}

.letter-group h3 {
  font-family:var(--serif);
  font-size:24px;
  line-height:1.7;
  font-weight:500;
  color:var(--red-dark);
  margin-bottom:22px;
}

.letter-group p {
  font-family:var(--serif);
  font-size:16px;
  line-height:2.2;
  letter-spacing:.65px;
  margin:0 0 15px;
  color:#63544a;
  overflow-wrap:anywhere;
}

.letter-group .love-line {
  color:var(--red);
  font-size:20px;
  margin:20px 0;
}

.letter-divider {
  display:flex;
  align-items:center;
  gap:16px;
  color:#c0aa8f;
  font-size:22px;
  margin:38px 0;
}

.letter-divider::before,.letter-divider::after {
  content:"";
  height:1px;
  flex:1;
  background:#e9e0d2;
}

blockquote {
  margin:29px -10px;
  padding:29px 16px;
  background:#f3e8e3;
  border-left:2px solid #b8757d;
  color:var(--red);
  font-family:var(--serif);
  font-size:25px;
  text-align:center;
  line-height:1.8;
  transform:rotate(-1deg);
}

blockquote span {
  display:block;
  font:9px var(--sans);
  letter-spacing:1.2px;
  margin-top:14px;
  color:#ab8580;
}

.underlined-promise {
  text-decoration:underline;
  text-decoration-color:#d3a397;
  text-decoration-thickness:3px;
  text-underline-offset:7px;
}

.letter-group .final-love {
  font-size:26px;
  color:var(--red);
  line-height:1.9;
  margin:30px 0;
}

.letter-signature {
  display:flex;
  align-items:flex-end;
  flex-direction:column;
  margin:30px 0 45px;
}

.letter-signature>span:first-child {
  font-size:11px;
  color:var(--muted);
  letter-spacing:2px;
}

.letter-signature strong {
  font-family:var(--serif);
  font-size:30px;
  color:var(--red);
  font-weight:500;
  margin:12px 0;
}

.letter-signature .handwritten {
  font-size:17px;
  color:#ab8d78;
}

.paper-bottom {
  font-size:7px;
  letter-spacing:1.1px;
  border-top:1px solid #e9e0d2;
  padding-top:23px;
  color:#af9c87;
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.paper-bottom span {
  color:var(--red);
}

.family {
  padding-top:98px;
  padding-bottom:86px;
}

.family-hint {
  display:block;
  font-size:10px;
  margin-top:4px;
}

.family-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px;
  max-width:880px;
  margin:58px auto 0;
  padding:0 10px;
}

.family-card {
  border:1px solid #e2d8c9;
  position:relative;
  background:var(--paper);
  padding:16px 16px 28px;
  box-shadow:0 6px 18px #5d45380b;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .35s,box-shadow .35s;
}

.bird-card {
  transform:rotate(-5deg);
}

.capy-card {
  transform:rotate(2deg) translateY(13px);
}

.cat-card {
  transform:rotate(-3deg);
}

.family-card:hover,.family-card:focus-visible {
  transform:rotate(0) translateY(-10px);
  box-shadow:0 15px 28px #5d453815;
}

.family-card.tapped .card-art svg {
  animation:character-jump .65s ease;
}

.card-tape {
  position:absolute;
  width:70px;
  height:24px;
  top:-12px;
  left:calc(50% - 35px);
  background:#d8c8aa80;
  transform:rotate(4deg);
  z-index:2;
}

.card-art {
  width:100%;
  aspect-ratio:1.12;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f0e7d7;
  position:relative;
}

.capy-card .card-art {
  background:#e9e8db;
}

.cat-card .card-art {
  background:#e9e2dd;
}

.card-art svg {
  position:absolute;
  inset:0;
  margin:auto;
  width:85%;
  height:95%;
}

.card-doodle {
  position:absolute;
  right:15px;
  top:13px;
  font-family:Georgia,serif;
  font-size:30px;
  color:#b39675;
  transform:rotate(12deg);
}

.card-role {
  font-size:7px;
  letter-spacing:1.6px;
  color:#aa9380;
  margin:23px 0 10px;
}

.family-card strong {
  font-family:var(--serif);
  font-size:23px;
  font-weight:500;
  letter-spacing:2px;
  color:var(--red-dark);
}

.card-description {
  font-size:10px;
  color:var(--muted);
  margin-top:12px;
  line-height:1.8;
}

.card-heart {
  font:22px Georgia,serif;
  color:#b87f7e;
  margin-top:17px;
}

.family-message {
  max-width:660px;
  margin:40px auto 0;
  text-align:center;
  font-family:var(--serif);
  font-size:16px;
  color:var(--red);
  line-height:1.9;
  min-height:32px;
  transition:opacity .2s;
}

.wish-section {
  position:relative;
  text-align:center;
  padding:80px 24px 70px;
  background:#eee5df;
  border-top:1px solid #e1d5cd;
  overflow:hidden;
}

.wish-section .section-intro {
  position:relative;
  z-index:1;
}

.wish-flower {
  position:absolute;
  width:340px;
  height:340px;
  color:#e6d6ce;
  top:-100px;
  right:-90px;
  transform:rotate(18deg);
}

.wish-section .eyebrow {
  color:#a2857b;
}

.cake-wrap {
  position:relative;
  width:280px;
  margin:45px auto 30px;
  padding:48px 0 32px;
}

.cake {
  height:140px;
  position:relative;
  width:194px;
  margin:auto;
  filter:drop-shadow(0 10px 8px #6d463615);
}

.cake-body {
  position:absolute;
  top:28px;
  height:101px;
  width:194px;
  background:#d58f96;
  border-radius:0 0 50% 50% / 0 0 18% 18%;
  overflow:hidden;
  border-bottom:7px solid #bc727d;
}

.cake-top {
  position:absolute;
  top:12px;
  height:40px;
  width:194px;
  background:#fff4d9;
  border-radius:50%;
  z-index:2;
  border:1px solid #e9d7b9;
}

.icing {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:42px;
  background:#fff4d9;
  clip-path:polygon(0 0,100% 0,100% 40%,96% 57%,90% 49%,84% 82%,78% 90%,72% 70%,68% 50%,63% 58%,60% 95%,55% 100%,49% 84%,47% 58%,40% 65%,35% 90%,28% 82%,24% 50%,17% 58%,12% 85%,6% 70%,0 47%);
}

.cake-decoration {
  position:absolute;
  top:54px;
  left:0;
  right:0;
  color:#fff0da;
  font:21px Georgia,serif;
  letter-spacing:5px;
}

.cake-plate {
  position:absolute;
  bottom:-1px;
  left:-25px;
  width:244px;
  height:34px;
  background:#c5c3a5;
  border-radius:50%;
  z-index:-1;
  border-bottom:5px solid #acac8c;
}

.candles {
  position:absolute;
  top:-33px;
  left:53px;
  display:flex;
  gap:27px;
  z-index:3;
}

.candle {
  position:relative;
  height:66px;
  width:10px;
  border-radius:3px;
  background:repeating-linear-gradient(35deg,#f9e8c8 0px,#f9e8c8 6px,#ab626b 6px,#ab626b 10px);
}

.candle:nth-child(2) {
  top:-9px;
}

.flame {
  width:13px;
  height:23px;
  position:absolute;
  top:-27px;
  left:-1px;
  background:#edb35b;
  border-radius:50% 50% 45% 45%;
  box-shadow:0 0 18px #f7c15da0;
  transform-origin:center bottom;
  animation:flicker .5s ease-in-out infinite alternate;
  transition:opacity .35s,scale .35s;
}

.flame::after {
  content:"";
  position:absolute;
  bottom:2px;
  left:4px;
  width:5px;
  height:12px;
  border-radius:50%;
  background:#fff0b3;
}

.candle:nth-child(2) .flame {
  animation-delay:-.25s;
}

.candle:nth-child(3) .flame {
  animation-delay:-.4s;
}

.blown .flame {
  opacity:0;
  scale:0;
}

.candle::after {
  content:"";
  position:absolute;
  top:-5px;
  left:4px;
  width:2px;
  height:5px;
  background:#655443;
}

.cake-note {
  position:absolute;
  bottom:-4px;
  right:-12px;
  color:#aa857b;
  font-size:20px;
  transform:rotate(-6deg);
}

.wish-button {
  margin-top:13px;
  min-width:224px;
}

.wish-button:disabled {
  cursor:default;
  background:var(--olive);
  border-color:var(--olive);
  transform:none;
  box-shadow:none;
}

.wish-result {
  margin:21px auto 0;
  font-size:12px;
  line-height:1.9;
  color:#9c776b;
  letter-spacing:1px;
  max-width:500px;
}

.relight-button {
  border:0;
  border-bottom:1px solid #bb968b;
  background:transparent;
  font-size:11px;
  letter-spacing:1px;
  padding:8px 0;
  margin-top:15px;
  color:var(--red);
}

footer {
  position:relative;
  text-align:center;
  padding:44px 24px 36px;
}

.footer-brand {
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:3px;
  color:var(--red-dark);
}

.footer-brand span {
  color:var(--red);
  margin-left:9px;
  font-family:Georgia,serif;
}

footer p {
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  margin:16px 0 24px;
}

.footer-note {
  font-size:7px;
  letter-spacing:2px;
  color:#a59481;
}

.back-top {
  position:absolute;
  right:6%;
  bottom:45px;
  border:1px solid #d4c6b7;
  border-radius:50%;
  height:40px;
  width:40px;
  display:grid;
  place-items:center;
  color:var(--red);
}

.noscript-note {
  padding:20px;
  text-align:center;
  font-size:12px;
}

.js-ready .reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);
}

.js-ready .reveal.visible {
  opacity:1;
  transform:translateY(0);
}

.hero-copy {
  animation:copy-in 1s ease both;
}

.hero-copy .eyebrow {
  animation:copy-in 1s .1s both;
}

.hero h1 {
  animation:copy-in 1s .2s both;
}

.hero-description {
  animation:copy-in 1s .35s both;
}

@keyframes copy-in {
  from {
    opacity:0;
    transform:translateY(18px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes envelope-in {
  from {
    opacity:0;
    transform:translateY(65px) rotate(-14deg);
  }
  to {
    opacity:1;
    transform:translateY(30px) rotate(-8deg);
  }
}

@keyframes down {
  50% {
    transform:translateY(5px);
  }
}

@keyframes flower-sway {
  50% {
    transform:rotate(12deg) translateY(-6px);
  }
}

@keyframes star-turn {
  to {
    transform:rotate(360deg);
  }
}

@keyframes marquee {
  to {
    transform:translateX(-50%);
  }
}

@keyframes flicker {
  to {
    transform:rotate(7deg) scale(.91,1.06);
  }
}

@keyframes equalizer {
  to {
    height:3px;
  }
}

@keyframes character-jump {
  30% {
    transform:translateY(-15px) rotate(-5deg);
  }
  60% {
    transform:translateY(-4px) rotate(5deg);
  }
}

@media(min-width:1441px) {
  .site-header {
    padding-left:80px;
    padding-right:80px;
  }
  .hero {
    padding-left:80px;
    padding-right:80px;
  }
  .hero h1 {
    font-size:66px;
  }
}

@media(max-width:1050px) {
  .hero {
    min-height:700px;
    padding-left:5%;
    padding-right:5%;
    gap:0;
  }
  .hero-art {
    scale:.87;
    transform-origin:center;
  }
  .hero h1 {
    font-size:46px;
    letter-spacing:1px;
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.6px;
  }
  .hero-bottom-note {
    font-size:6px;
  }
  .wordmark-note {
    display:none;
  }
  .letter-layout {
    gap:5%;
    grid-template-columns:28% 1fr;
  }
  .letter-sidebar h2 {
    font-size:26px;
  }
  .letter-paper {
    padding-left:35px;
    padding-right:35px;
  }
  .family-cards {
    gap:25px;
  }
  .timeline h3 {
    font-size:16px;
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:30px;
  }
  .site-header {
    height:78px;
    padding:0 6%;
  }
  .wordmark {
    font-size:12px;
    gap:8px;
  }
  .brand-heart {
    font-size:29px;
  }
  .edition {
    display:none;
  }
  .sound-toggle {
    font-size:10px;
    padding:9px 12px;
  }
  .hero {
    grid-template-columns:1fr;
    padding:46px 7% 70px;
    min-height:auto;
    gap:3px;
    overflow:hidden;
  }
  .hero-copy {
    text-align:center;
    position:relative;
    z-index:4;
  }
  .hero .eyebrow {
    justify-content:center;
    font-size:8px;
    letter-spacing:1.8px;
  }
  .hero h1 {
    font-size:clamp(37px,7.7vw,54px);
    line-height:1.45;
    letter-spacing:3px;
    margin:22px 0 20px;
  }
  .title-star {
    width:25px;
    height:25px;
    right:-36px;
    top:8px;
  }
  .hero-description {
    font-size:12px;
    line-height:2;
    letter-spacing:1px;
    margin-bottom:23px;
  }
  .primary-button {
    min-height:50px;
    padding:13px 24px;
    font-size:12px;
  }
  .hero-footnote {
    font-size:9px;
    margin-top:15px;
  }
  .hero-art {
    width:100%;
    max-width:480px;
    margin:15px auto -8px;
    height:440px;
    scale:.88;
    transform-origin:center;
  }
  .envelope-scene {
    width:340px;
    height:260px;
  }
  .envelope-back::before {
    top:-109px;
    height:112px;
  }
  .letter-peek {
    top:-91px;
    height:285px;
  }
  .peek-heading {
    font-size:19px;
  }
  .princess-bird {
    width:115px;
    height:115px;
  }
  .wax-seal {
    top:85px;
  }
  .envelope-address {
    font-size:12px;
    bottom:45px;
  }
  .art-note {
    right:5px;
    top:-5px;
    font-size:21px;
  }
  .orbit {
    width:420px;
    height:320px;
  }
  .orbit-two {
    width:350px;
    height:420px;
  }
  .flower-one {
    width:82px;
    height:82px;
    left:-5px;
    bottom:45px;
  }
  .flower-two {
    width:52px;
    height:52px;
    top:53px;
    right:-4px;
  }
  .postmark {
    bottom:21px;
    right:-13px;
    width:100px;
    height:100px;
  }
  .art-caption {
    bottom:-18px;
    left:27px;
    font-size:9px;
  }
  .spark-one {
    top:15px;
    left:12px;
  }
  .spark-two {
    bottom:82px;
    right:-7px;
  }
  .scroll-cue {
    left:50%;
    transform:translateX(-50%);
    bottom:20px;
    white-space:nowrap;
    font-size:9px;
    gap:14px;
  }
  .hero-bottom-note {
    display:none;
  }
  .love-ribbon {
    padding:14px 0;
  }
  .love-ribbon>div {
    font-size:9px;
    gap:25px;
    letter-spacing:1.5px;
  }
  .journey {
    padding-top:64px;
    padding-bottom:60px;
  }
  .section-shell {
    padding-left:7%;
    padding-right:7%;
  }
  .section-intro>p {
    font-size:11px;
    letter-spacing:.5px;
  }
  h2 {
    font-size:28px;
    letter-spacing:1px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:2px;
  }
  .timeline {
    display:block;
    max-width:340px;
    margin:35px auto 0;
    padding-left:28px;
  }
  .timeline-stop {
    display:grid;
    grid-template-columns:45px 1fr;
    grid-template-rows:auto auto;
    padding:0 0 28px 29px;
    column-gap:6px;
  }
  .timeline-stop:last-child {
    padding-bottom:0;
  }
  .timeline-stop::after {
    top:8px;
    bottom:-8px;
    left:0;
    width:1px;
    height:auto;
    right:auto;
  }
  .stop-dot {
    position:absolute;
    left:-4px;
    top:5px;
    margin:0;
  }
  .stop-number {
    grid-row:1/3;
    font-size:8px;
    margin:4px 0 0;
  }
  .timeline h3 {
    font-size:18px;
    margin:0 0 8px;
  }
  .timeline p {
    margin:0;
    font-size:10px;
    grid-column:2;
  }
  .future .stop-dot {
    left:-6px;
    top:8px;
  }
  .letter-section {
    padding:51px 0;
  }
  .letter-layout {
    display:block;
  }
  .letter-sidebar-inner {
    position:static;
  }
  .letter-sidebar h2 {
    font-size:28px;
    line-height:1.6;
    margin:12px 0;
  }
  .letter-sidebar h2 br {
    display:none;
  }
  .letter-sidebar p {
    font-size:11px;
  }
  .letter-sidebar p br {
    display:none;
  }
  .chapter-nav {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:5px 16px;
    margin:19px 0 34px;
  }
  .chapter-nav a {
    gap:6px;
    padding:7px 0;
    border-left:0;
    border-bottom:1px solid transparent;
  }
  .chapter-nav a span {
    font-size:10px;
    letter-spacing:0;
  }
  .sidebar-flower,.sidebar-sign {
    display:none;
  }
  .letter-paper {
    padding:26px 26px 23px;
  }
  .paper-top {
    font-size:8px;
    margin-bottom:28px;
  }
  .letter-group h3 {
    font-size:23px;
  }
  .letter-group p {
    font-size:16px;
    line-height:2.2;
    letter-spacing:.3px;
    margin-bottom:15px;
  }
  .chapter-label {
    font-size:7px;
    letter-spacing:1.3px;
  }
  .letter-divider {
    margin:30px 0;
  }
  .letter-group .final-love {
    font-size:25px;
  }
  blockquote {
    font-size:24px;
    padding:24px 8px;
  }
  .family {
    padding-top:61px;
    padding-bottom:54px;
  }
  .family-cards {
    gap:13px;
    padding:0;
    margin-top:40px;
  }
  .family-card {
    padding:8px 8px 16px;
  }
  .card-role {
    font-size:5px;
    letter-spacing:.7px;
    margin:16px 0 8px;
  }
  .family-card strong {
    font-size:16px;
    letter-spacing:1px;
  }
  .family-card.cat-card strong {
    font-size:12px;
    letter-spacing:0;
    white-space:nowrap;
  }
  .card-description {
    font-size:9px;
    line-height:1.8;
    margin-top:8px;
    max-width:85px;
  }
  .card-heart {
    font-size:18px;
    margin-top:10px;
  }
  .card-tape {
    width:44px;
    height:18px;
    top:-9px;
    left:calc(50% - 22px);
  }
  .card-doodle {
    font-size:20px;
    right:5px;
    top:4px;
  }
  .family-message {
    font-size:13px;
    margin:36px auto 0;
    min-height:49px;
  }
  .wish-section {
    padding-top:59px;
    padding-bottom:49px;
  }
  .wish-flower {
    width:240px;
    height:240px;
  }
  .cake-wrap {
    margin-top:40px;
  }
  .wish-result {
    font-size:11px;
  }
  footer {
    padding-top:34px;
  }
  .back-top {
    width:34px;
    height:34px;
    right:6%;
    bottom:30px;
  }
}

@media(max-width:370px) {
  .hero-art {
    scale:.78;
    margin-top:-2px;
    margin-bottom:-25px;
  }
  .hero h1 {
    font-size:35px;
    letter-spacing:1px;
  }
  .hero .eyebrow {
    font-size:7px;
    letter-spacing:1.3px;
  }
  .letter-paper {
    padding-left:21px;
    padding-right:21px;
  }
  .family-cards {
    gap:9px;
  }
  .family-card {
    padding:6px 6px 13px;
  }
  .family-card strong {
    font-size:14px;
  }
  .card-role {
    font-size:4px;
  }
  .letter-sidebar h2 {
    font-size:25px;
  }
  .section-intro h2 {
    font-size:25px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .js-ready .reveal {
    opacity:1;
    transform:none;
  }
  .hero-art {
    will-change:auto;
  }
}

#letter-title:focus {
  outline:none;
}

@media(max-width:760px) {
  .letter-sidebar h2 br {
    display:initial;
  }
}

@media print {
  .site-header,.hero,.love-ribbon,.journey,.letter-sidebar,.family,.wish-section,footer,#confetti,.reading-progress {
    display:none;
  }
  .letter-section {
    padding:0;
    background:white;
    border:0;
  }
  .letter-layout {
    display:block;
    padding:0;
  }
  .letter-paper {
    box-shadow:none;
    border:0;
    padding:20px;
  }
  .letter-paper::before {
    display:none;
  }
  .js-ready .reveal {
    opacity:1;
    transform:none;
  }
  .letter-group {
    break-inside:auto;
  }
  .letter-group h3 {
    break-after:avoid;
  }
  body {
    background:white;
  }
  body::after {
    display:none;
  }
}

/* A touch-first, starlit edition. The letter itself stays quiet and readable. */
:root { --night:#211323; --gold:#f3d1a0; }
body { background:#f5efe6; }
.site-header { max-width:none; background:var(--night); color:#f4dacb; border-color:#f4dacb15; }
.site-header .brand-heart,.site-header .sound-bars i { color:#efb7bc; }
.site-header .sound-bars i { background:#efb7bc; }
.site-header .wordmark-note,.site-header .edition { color:#c1a3ac; }
.sound-toggle { border-color:#e2bec337; color:#e9c6c9; min-height:44px; }
.hero { max-width:none; isolation:isolate; background:var(--night); min-height:760px; padding-top:52px; padding-bottom:112px; }
.hero::after { content:""; position:absolute; width:650px; height:650px; left:-400px; bottom:-370px; border:1px solid #eec79822; border-radius:50%; pointer-events:none; }
#starlight { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.aurora { position:absolute; z-index:-2; width:70%; height:90%; pointer-events:none; filter:blur(50px); border-radius:50%; opacity:.5; }
.aurora-one { right:-5%; top:-15%; background:radial-gradient(ellipse,#a7447455,transparent 68%); animation:aurora-drift 16s ease-in-out infinite alternate; }
.aurora-two { left:-20%; bottom:-45%; background:radial-gradient(ellipse,#ae785438,transparent 65%); animation:aurora-drift 19s ease-in-out -8s infinite alternate-reverse; }
.hero-copy { position:relative; z-index:2; transform:translateY(var(--scroll-shift,0px)); }
.hero h1 { color:#f6dfc1; font-size:clamp(42px,5.2vw,76px); line-height:1.6; text-shadow:0 0 50px #d89b7730; }
.hero .name-line { background:linear-gradient(110deg,#eacda6 10%,#fff8e7 35%,#dfa6ad 60%,#f6dfc1 80%); background-size:220% 100%; color:transparent; background-clip:text; -webkit-background-clip:text; animation:gold-flow 9s ease-in-out infinite; }
.hero .name-line::after { border-color:#d3a58f88; }
.hero .title-star,.hero-heart { color:#e3b2b5; }
.hero-description { color:#d0b8b9; }
.hero .primary-button { background:#e6b5b2; border-color:#f4ccc9; color:#512b3e; box-shadow:0 0 30px #d894a61f; position:relative; overflow:hidden; }
.hero .primary-button::after { content:""; position:absolute; width:35%; height:160%; background:linear-gradient(90deg,transparent,#fff8,transparent); transform:skewX(-25deg); top:-30%; left:-70%; animation:button-sheen 5s ease-in-out infinite; pointer-events:none; }
.hero .primary-button:hover { background:#f3d0c2; box-shadow:0 0 36px #dfa3a635; }
.hero-footnote,.hero .scroll-cue,.hero-bottom-note { color:#bea0ab; }
.hero .tiny-heart { color:#e8aab5; }
.hero-art { transform:translateY(calc(var(--scroll-shift,0px) * -.4)); z-index:1; }
.hero-art::before { background:#deaf9060; filter:blur(70px); animation:envelope-halo 6s ease-in-out infinite; }
.art-note { color:#e2b8bd; }
.orbit { border-color:#e4bd9f33; box-shadow:0 0 26px #d79c8307; }
.orbit-two { border-color:#e4bd9f22; }
.art-spark { color:#e6bf89; }
.art-caption { color:#c5a9af; }
.caption-line { background:#b88c7b; }
.postmark { background:#452a3cb3; border-color:#c29d8177; color:#dbb695; }
.envelope-scene { touch-action:pan-y; user-select:none; -webkit-user-select:none; animation:none; transform-style:preserve-3d; transform:translate3d(var(--drag-x,0px),30px,0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(-8deg); transition:transform .38s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 30px 22px #08030955); }
.envelope-scene .letter-peek { animation:letter-breathe 6s ease-in-out infinite; }
.envelope-scene.opened { transform:translateY(10px) rotate(0deg) scale(1.04); }
.envelope-scene.opened .letter-peek { animation:none; transform:translateY(-115px) rotate(0deg); }
.envelope-scene.opened .wax-seal { transform:scale(1.3) rotate(30deg); opacity:0; transition:transform .5s,opacity .45s; pointer-events:none; }
.envelope-glint { position:absolute; inset:-130px -30px -30px; background:radial-gradient(ellipse,#ffedc025,transparent 68%); z-index:-1; opacity:0; transition:opacity .5s; }
.unsealing .envelope-glint { opacity:1; }
.unsealing .hero-art::before { animation:none; background:#e8c6aa99; }
.wax-seal { animation:seal-beat 3.4s ease-in-out infinite; }
.motion-paused *, .motion-paused::before { animation-play-state:paused!important; }
.journey { padding-top:58px; padding-bottom:62px; }
.timeline { margin-top:0; }
.letter-section { padding:74px 0; background:radial-gradient(ellipse at 50% 0,#e2c8c480,transparent 450px),#eee7dd; }
.letter-layout { display:block; max-width:920px; }
.letter-paper { padding:62px 68px 46px; border-radius:3px; box-shadow:0 20px 90px #79504c0b,0 1px 3px #61463610; }
.letter-paper:focus { outline:none; }
.letter-paper::before { width:130px; height:34px; left:calc(50% - 65px); }
.letter-group + .letter-group { margin-top:30px; }
.letter-group .salutation { font-size:27px; color:var(--red-dark); margin-bottom:25px; }
.letter-group p { font-size:18px; line-height:2.25; }
.letter-group .final-love { margin-bottom:0; }
.js-ready .ink-reveal { transform:translateY(16px); transition:opacity .85s,transform 1s cubic-bezier(.2,.7,.2,1); }
.js-ready .ink-reveal.visible { transform:none; }
.family { padding-top:62px; padding-bottom:62px; }
.gesture-hint { font-size:11px; letter-spacing:2px; color:var(--muted); text-align:center; margin-bottom:36px; }
.gesture-hint span { margin-left:9px; display:inline-block; animation:swipe-hint 2.5s ease-in-out infinite; }
.family-cards { margin-top:0; align-items:stretch; }
.family-card { perspective:1100px; display:block; border:0; background:transparent; padding:0; box-shadow:none; text-align:center; -webkit-touch-callout:none; }
.family-card:hover,.family-card:focus-visible { box-shadow:none; }
.card-inner { display:grid; width:100%; height:100%; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.22,.8,.25,1); }
.card-front,.card-back { grid-area:1/1; width:100%; height:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:1px solid #e2d8c9; box-shadow:0 8px 25px #65453012; padding:16px 16px 28px; display:flex; flex-direction:column; align-items:center; background:var(--paper); }
.card-front { transform:rotateY(0deg); }
.card-back { transform:rotateY(180deg); justify-content:center; padding:30px; background:linear-gradient(145deg,#754254,#392237); color:#f6dcca; border-color:#ad778088; gap:22px; }
.card-back>span:nth-child(2) { font:19px/1.9 var(--serif); letter-spacing:1px; }
.flip-heart { font:56px Georgia,serif; color:#e7b2b9; }
.flip-return { color:#c8a4ab; font-size:10px; letter-spacing:1px; }
.family-card.flipped .card-inner { transform:rotateY(180deg); }
.family-card.flipped { transform:rotate(0deg) translateY(-5px); }
.family-message { margin-top:42px; }
.wish-section { background:radial-gradient(ellipse at 50% 50%,#623448,transparent 70%),#261829; border-color:#422a3a; padding:106px 24px 78px; isolation:isolate; }
.wish-section::before,.wish-section::after { content:""; position:absolute; width:470px; height:470px; top:50%; left:50%; margin:-255px 0 0 -235px; border:1px solid #d2a48029; border-radius:50%; pointer-events:none; z-index:-1; }
.wish-section::after { width:520px; height:520px; margin:-280px 0 0 -260px; border-style:dashed; animation:star-turn 70s linear infinite; }
.wish-flower { color:#603a4c; opacity:.6; }
.cake-wrap { margin-top:15px; margin-bottom:35px; z-index:1; }
.cake { display:block; padding:0; border:0; background:transparent; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; isolation:isolate; overflow:visible; }
.cake:focus-visible { outline:2px solid #ecc493; outline-offset:24px; border-radius:20px; }
.wish-orbit { position:absolute; z-index:-2; width:280px; height:280px; left:50%; top:50%; translate:-50% -55%; border-radius:50%; background:conic-gradient(from -90deg,#f4d08e calc(var(--charge,0) * 1turn),#eac4a013 0); mask:radial-gradient(transparent 66%,#000 67%,#000 68%,transparent 69%); -webkit-mask:radial-gradient(transparent 66%,#000 67%,#000 68%,transparent 69%); opacity:0; transition:opacity .25s; }
.charging .wish-orbit { opacity:1; }
.charging { filter:drop-shadow(0 0 22px #f6c48555); }
.charging .flame { scale:1.3; }
.cake-note { color:#d0a6b0; font:12px var(--sans); bottom:-12px; left:-20px; right:-20px; transform:none; letter-spacing:2px; }
.cake-plate { background:#aeb096; border-color:#939d83; }
.cake-top,.cake-body { left:0; }
.wish-button { background:#e5b1b7; border-color:#e8bdc3; color:#4c293c; min-height:56px; }
.wish-button:hover { background:#efd0c4; }
.wish-button:disabled { background:#6e715c; border-color:#909075; color:#fff5df; }
.wish-result { color:#c9a5b0; }
.relight-button { color:#f4c9ca; border-color:#b28596; min-height:44px; }
.celebrating .cake { animation:cake-celebrate .9s cubic-bezier(.2,.8,.2,1); }
.birthday-bloom { position:fixed; inset:0; z-index:70; background:radial-gradient(ellipse,#281528ed,#211323cf); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px; color:#f5dbb9; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .7s,visibility .7s; }
.birthday-bloom span { font:clamp(27px,5vw,62px)/1.7 var(--serif); letter-spacing:5px; transform:translateY(30px) scale(.95); transition:transform 1.2s cubic-bezier(.2,.7,.2,1); text-shadow:0 0 38px #eabca450; }
.birthday-bloom span:last-child { font-size:clamp(18px,3vw,35px); color:#e7b5c2; transition-delay:.15s; }
.birthday-bloom.show { opacity:1; visibility:visible; }
.birthday-bloom.show span { transform:none; }
@keyframes aurora-drift { to { transform:translate(12%,8%) rotate(25deg) scale(1.2); } }
@keyframes gold-flow { 50% { background-position:100% 50%; } }
@keyframes button-sheen { 0%,55% { left:-70%; } 85%,100% { left:150%; } }
@keyframes envelope-halo { 50% { opacity:.5; transform:scale(.85); } }
@keyframes letter-breathe { 50% { transform:translateY(-10px) rotate(1deg); } }
@keyframes seal-beat { 0%,65%,100% { box-shadow:0 0 0 0 #efb0a800,2px 4px 6px #6a354b30; } 35% { box-shadow:0 0 0 13px #efb0a822,2px 4px 6px #6a354b30; } }
@keyframes swipe-hint { 50% { transform:translateX(5px); } }
@keyframes cake-celebrate { 35% { transform:translateY(-12px) rotate(-3deg); } 65% { transform:rotate(3deg); } }
@media(min-width:1600px) { .hero { padding-left:calc((100vw - 1240px)/2); padding-right:calc((100vw - 1240px)/2); } }
@media(max-width:760px) {
  .site-header { height:72px; }
  .hero { min-height:auto; padding-top:24px; padding-bottom:55px; gap:0; }
  .hero-copy { display:flex; flex-direction:column; align-items:center; }
  .hero h1 { font-size:clamp(35px,9.2vw,52px); line-height:1.65; margin:8px 0 12px; letter-spacing:3px; }
  .hero .title-star { width:23px; height:23px; right:-36px; top:10px; }
  .hero-description { font-size:11px; line-height:1.9; margin-bottom:16px; }
  .hero .primary-button { min-height:48px; }
  .hero-footnote { font-size:8px; margin-top:12px; }
  .hero-art { margin:12px auto -22px; height:407px; scale:.83; }
  .art-note { font-size:19px; top:5px; }
  .art-caption { left:20px; bottom:-13px; font-size:10px; }
  .postmark { right:-15px; bottom:6px; }
  .hero .scroll-cue { bottom:14px; }
  .aurora { filter:blur(30px); }
  .journey { padding-top:42px; padding-bottom:42px; }
  .timeline { margin-top:0; }
  .letter-section { padding:38px 0; }
  .letter-layout { padding:0 4%; }
  .letter-paper { padding:37px 25px 38px; }
  .letter-group p { font-size:17px; line-height:2.2; letter-spacing:.3px; }
  .letter-group .salutation { font-size:25px; margin-bottom:22px; }
  .letter-group + .letter-group { margin-top:28px; }
  .letter-group .final-love { font-size:26px; margin-top:26px; }
  .family { padding:40px 0 35px; overflow:hidden; }
  .gesture-hint { margin-bottom:14px; font-size:10px; }
  .family-cards { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:14vw; gap:25px; padding:25px 14vw 30px; max-width:none; scrollbar-width:none; overscroll-behavior-x:contain; }
  .family-cards::-webkit-scrollbar { display:none; }
  .family-card { flex:0 0 72vw; scroll-snap-align:center; padding:0; transform:rotate(-2deg); }
  .capy-card { transform:rotate(2deg); }
  .cat-card { transform:rotate(-1.5deg); }
  .family-card:hover { transform:rotate(-2deg); }
  .family-card.flipped { transform:rotate(0deg); }
  .card-front { padding:16px 16px 24px; }
  .card-art { aspect-ratio:1.2; }
  .card-art svg { width:88%; height:95%; }
  .card-tape { width:74px; height:25px; top:-11px; left:calc(50% - 37px); }
  .card-role { font-size:8px; letter-spacing:1.3px; margin-top:21px; }
  .family-card strong,.family-card.cat-card strong { font-size:24px; letter-spacing:2px; }
  .card-description { max-width:none; font-size:11px; margin-top:10px; }
  .card-heart { font-size:24px; margin-top:14px; }
  .card-doodle { top:12px; right:14px; font-size:28px; }
  .card-back { padding:28px; }
  .card-back>span:nth-child(2) { font-size:22px; }
  .family-message { padding:0 8%; margin:10px auto 0; min-height:48px; }
  .wish-section { padding:92px 20px 46px; }
  .wish-section::before { width:350px; height:350px; margin:-220px 0 0 -175px; }
  .wish-section::after { width:390px; height:390px; margin:-240px 0 0 -195px; }
  .cake-wrap { margin-top:0; margin-bottom:37px; }
  .cake-note { font-size:11px; letter-spacing:1px; }
  .birthday-bloom span { letter-spacing:3px; }
}
@media(max-width:370px) {
  .hero-art { scale:.75; margin-top:-7px; margin-bottom:-38px; }
  .hero h1 { font-size:34px; }
  .letter-paper { padding-left:23px; padding-right:23px; }
  .letter-group p { font-size:16px; }
  .family-card.cat-card strong { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-copy,.hero-art { transform:none!important; }
  .js-ready .ink-reveal { opacity:1; transform:none; }
  .birthday-bloom { display:none; }
  .family-cards { scroll-behavior:auto; }
}
@media print {
  .birthday-bloom,.aurora,#starlight { display:none!important; }
  .letter-paper { padding:0; }
}

/* Keep the page focused on the letter and its interactions. */
.hero h1 { margin-bottom:32px; }
.journey { padding-top:40px; padding-bottom:40px; }
.timeline { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:25px 42px; padding:0; max-width:none; }
.timeline-stop { display:flex; flex-direction:column; align-items:center; padding:0; }
.timeline-stop::after { display:none; }
.timeline-stop .stop-dot { position:static; margin:0 0 18px; }
.timeline-stop h3 { margin:0; font-size:17px; }
.family-card strong { margin-top:22px; }
.card-back .flip-heart { font-size:88px; }
.card-back .flip-return { font:20px var(--sans); }
.wish-result.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
footer { padding:25px; }
footer .back-top { position:static; margin:auto; }
@media(max-width:760px) {
  .hero h1 { margin-bottom:23px; }
  .hero-art { margin-top:30px; }
  .journey { padding:31px 6%; }
  .timeline { gap:23px; }
  .timeline-stop h3 { font-size:13px; }
  .timeline-stop .stop-dot { margin-bottom:12px; }
  .family-card strong { margin-top:20px; }
  .family { padding-bottom:27px; }
}