:root {
  --paper:#f5f2e9;
  --ink:#303b2e;
  --muted:#67705f;
  --gold:#aa822c;
  --line:#d9ddcd;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}
body:before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
  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='.8' 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
}
a:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:6px
}
.topbar {
  max-width:1320px;
  margin:auto;
  padding:29px 60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand {
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:12px
}
.brand-flower {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.sunflower-photo {
  display: block;
  object-fit: cover;
  object-position: 72% 40%;
  border-radius: 50%;
  box-shadow: 0 4px 14px #303b2e22;
}
.sunflower-photo--xs { width: 28px; height: 28px; }
.sunflower-photo--sm { width: 30px; height: 30px; }
.sunflower-photo--md { width: 72px; height: 72px; }
.sunflower-photo--seal { width: 36px; height: 36px; }
.sunflower-photo--hero {
  width: min(160px, 42vw);
  height: min(160px, 42vw);
  box-shadow: 0 16px 40px #b8872640;
}
.welcome-flower {
  display: block;
  margin-bottom: 18px;
  line-height: 0;
}
.flower-illu {
  display: block;
  margin-inline: auto;
  overflow: visible;
}
.flower-illu--hero {
  width: min(140px, 38vw);
  height: auto;
}
.envelope-seal {
  background: #fff7dc;
  overflow: hidden;
  padding: 4px;
}
.art-frame--photo {
  display: none;
}
.botanical-photo {
  display: none;
}
.envelope-seal {
  background: #fff7dc;
  color: transparent;
  padding: 0;
  overflow: hidden;
}
.envelope-paper {
  justify-content: center;
}
.envelope-paper span {
  font: italic 28px var(--serif);
}
.aside-flower {
  display: inline-block;
  line-height: 0;
  margin-top: 32px;
}
.signature-mark {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
  line-height: 0;
  position: absolute;
  right: 4px;
  top: 20px;
}
.signature strong { display: none; }
footer {
  max-width: 1320px;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 28px 60px;
  margin: auto;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  width: 100%;
}
footer .credit {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid #c5b27a;
}
footer .credit:hover {
  color: var(--gold);
}
.music-toggle {
  text-transform: lowercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.date {
  font-size:10px;
  letter-spacing:2px;
  font-weight:600
}
.date>span {
  padding:0 10px;
  color:var(--gold)
}
.hero {
  max-width:1320px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:50px;
  align-items:center;
  margin:auto;
  padding:64px 60px 66px
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:2.2px;
  line-height:1.8;
  margin:0 0 25px
}
.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:12px
}
.eyebrow>span {
  width:24px;
  height:1px;
  background:var(--gold)
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font:500 clamp(48px,5.4vw,77px)/1.03 var(--serif);
  letter-spacing:-2.8px;
  margin-bottom:26px
}
em {
  font-weight:400;
  color:#8a6b2a
}
.intro {
  font-size:13px;
  line-height:1.95;
  max-width:360px;
  color:var(--muted);
  margin-bottom:30px
}
.button {
  display:inline-flex;
  gap:37px;
  align-items:center;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  padding:18px 24px;
  font-size:11px;
  letter-spacing:.3px;
  transition:background .2s,transform .2s
}
.button:hover {
  background:#4a563d;
  transform:translateY(-2px)
}
.button span {
  font-size:18px
}
.hero-caption {
  font-size:10px;
  color:var(--muted);
  margin:17px 0 0
}
.botanical {
  margin:0;
  min-width:0
}
.art-frame {
  position:relative;
  background:#e9ecdf;
  border-radius:48% 48% 2px 2px;
  overflow:hidden;
  aspect-ratio: .85;
  box-shadow:inset 0 0 80px #c8ceb327
}
.art-frame:before {
  content:"";
  position:absolute;
  inset:15px;
  border:1px solid #b8c1a35c;
  border-radius:inherit
}
.art-number {
  position:absolute;
  top:41px;
  left:0;
  right:0;
  text-align:center;
  font:italic 26px var(--serif);
  color:#637052
}
.art-number span {
  display:block;
  font:8px var(--sans);
  letter-spacing:2px;
  margin-top:6px
}
.art-frame svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.art-label {
  position:absolute;
  bottom:26px;
  width:100%;
  text-align:center;
  font:italic 17px var(--serif);
  color:#59634c
}
figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:15px;
  gap:12px
}
figcaption span:first-child {
  font-size:8px;
  letter-spacing:1.6px
}
figcaption span:last-child {
  font:italic 17px var(--serif);
  color:var(--muted)
}
.flower-head {
  transform-box:fill-box;
  transform-origin:center;
  animation:breathe 7s ease-in-out infinite alternate
}
.divider {
  padding:25px 24px;
  border-block:1px solid var(--line);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(20px,5vw,80px);
  font-size:9px;
  letter-spacing:2px;
  color:var(--muted)
}
.divider>span:nth-child(even) {
  font-size:22px;
  color:var(--gold)
}
.letter-section {
  max-width:1150px;
  margin:auto;
  padding:100px 60px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
  align-items:center
}
.letter-aside h2 {
  font:500 44px/1.08 var(--serif);
  letter-spacing:-1px;
  margin-bottom:20px
}
.letter-aside>p:not(.eyebrow) {
  color:var(--muted);
  font-size:12px;
  line-height:1.9
}
.aside-flower {
  display: block;
  margin-top: 32px;
  line-height: 0;
}
.letter {
  background:#fffdf6;
  border:1px solid #e3dfd1;
  padding:44px 42px;
  box-shadow:6px 8px 0 #e9e7dc;
  position:relative
}
.letter-date {
  display:block;
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  text-align:right;
  margin-bottom:28px
}
.letter h3 {
  font:500 40px var(--serif);
  margin-bottom:18px
}
.letter p {
  font-size:12px;
  line-height:1.95;
  color:#5c6355;
  margin-bottom:18px
}
.letter .letter-wish {
  font:italic 24px/1.2 var(--serif);
  color:#866a2b;
  margin:26px 0
}
.signature {
  border-top:1px solid var(--line);
  padding-top:22px;
  position:relative
}
.signature>span:first-child {
  font-size:10px;
  color:var(--muted)
}
.signature strong {
  display:block;
  font:italic 25px var(--serif);
  margin-top:5px
}
.signature-mark {
  position: absolute;
  right: 4px;
  top: 20px;
  line-height: 0;
}
.closing {
  text-align:center;
  background:#e9ecdf;
  padding:60px 24px
}
.closing .eyebrow {
  margin-bottom:15px
}
.closing>p:not(.eyebrow) {
  font:500 44px/1.05 var(--serif);
  margin-bottom:27px
}
.closing a {
  font-size:10px;
  text-decoration:none;
  border-bottom:1px solid #9ea78d;
  padding-bottom:5px
}
.closing a span {
  margin-left:14px
}
footer {
  max-width: 1320px;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 28px 60px;
  margin: auto;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  width: 100%;
}
@keyframes breathe {
  from {
    rotate:-1deg
  }
  to {
    rotate:1deg
  }

}
@media(min-width:1500px) {
  .hero {
    padding-block:80px
  }
  .art-frame {
    max-height:650px
  }

}
@media(max-width:800px) {
  .topbar {
    padding:22px 26px
  }
  .hero {
    gap:26px;
    padding:50px 26px
  }
  h1 {
    font-size:50px;
    letter-spacing:-1.8px
  }
  .intro {
    font-size:12px
  }
  .letter-section {
    gap:35px;
    padding:70px 26px
  }
  .letter {
    padding:30px 26px
  }
  .letter-aside h2 {
    font-size:36px
  }
  footer {
    padding:26px
  }

}
@media(max-width:600px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 28px 20px 20px;
    gap: 18px;
    min-height: auto;
    align-content: start;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-copy .intro {
    margin-inline: auto;
  }
  .hero-copy .button {
    margin-inline: auto;
  }
  h1 {
    font-size: clamp(34px, 9vw, 48px);
    letter-spacing: -1.2px;
    margin-bottom: 14px;
  }
  .intro {
    max-width: 34ch;
    font-size: 12px;
    margin-bottom: 16px;
  }
  .button {
    padding: 14px 18px;
  }
  .hero-caption {
    font-size: 9px;
    margin-top: 12px;
  }
  .botanical {
    width: min(100%, 280px);
    max-width: 280px;
    justify-self: center;
    margin-inline: auto;
  }
  .art-frame {
    aspect-ratio: 0.82;
  }
  .art-frame svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0;
  }
  .art-number {
    top: 18px;
    font-size: 18px;
  }
  .art-label {
    bottom: 14px;
    font-size: 13px;
  }
  figcaption {
    margin-top: 10px;
  }
  .letter-section {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 18px 20px;
    min-height: auto;
  }
  .letter-aside .eyebrow {
    margin-bottom: 10px;
  }
  .letter-aside h2 {
    font-size: 32px;
  }
  .aside-flower {
    display: none;
  }
  .letter {
    padding: 24px 20px;
  }
  .letter p {
    font-size: 12px;
  }
  .closing {
    padding: 36px 20px;
  }
  .closing>p:not(.eyebrow) {
    font-size: 34px;
  }
  footer {
    padding: 14px 20px 20px;
    font-size: 9px;
    justify-content: center;
    text-align: center;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

}

/* A separate scene for each step, with native hash/back navigation. */
[hidden] { display: none !important; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; }
.screen { animation: scene-in .7s cubic-bezier(.2,.7,.2,1) both; }
.screen :is(h1,h2,h3):focus, .screen:focus { outline: none; }
.welcome-screen, .envelope-screen { min-height: 72dvh; padding: 55px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.welcome-screen h1 { font-size: clamp(44px,6vw,80px); }
.welcome-screen .intro { margin: 0 0 28px; }
.envelope-screen h2 { font: 500 clamp(38px,5vw,58px)/1.05 var(--serif); letter-spacing: -1px; }
.envelope { position: relative; width: min(340px,85vw); height: 220px; margin: 70px 0 30px; border: 0; border-radius: 3px; background: #c5ccb5; cursor: pointer; perspective: 1000px; box-shadow: 0 20px 45px #303b2e20; color: var(--ink); }
.envelope:focus-visible { outline: 2px solid var(--gold); outline-offset: 10px; }
.envelope-paper { position: absolute; inset: 15px 20px; background: #fffdf6; padding: 35px 10px; display: flex; flex-direction: column; gap: 18px; font: 25px var(--serif); transition: transform .85s .35s ease; }
.envelope-paper span:last-child { font: 10px var(--sans); color: var(--muted); }
.envelope-front { position: absolute; inset: 0; background: #d9decb; clip-path: polygon(0 0,50% 53%,100% 0,100% 100%,0 100%); z-index: 3; }
.envelope-flap { position: absolute; inset: 0; background: #e3e6d7; clip-path: polygon(0 0,100% 0,50% 57%); transform-origin: center top; transition: transform .65s ease; z-index: 4; backface-visibility: hidden; }
.envelope-seal { position: absolute; z-index: 5; top: 91px; left: calc(50% - 24px); border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; font-size: 30px; background: #bba260; color: #fff7dc; box-shadow: 0 2px 5px #70531d24; transition: opacity .2s, transform .3s; }
.envelope:not(.is-open):hover .envelope-seal { transform: scale(1.1); }
.envelope.is-open .envelope-flap { transform: rotateX(180deg); }
.envelope.is-open .envelope-paper { transform: translateY(-110px); }
.envelope.is-open .envelope-seal { opacity: 0; transform: scale(.8); }
.envelope-hint { font-size: 11px; color: var(--muted); }
.text-link { display: inline-block; font-size: 11px; text-underline-offset: 5px; margin-top: 18px; }
.letter-next { margin-top: 26px; }
.letter-section { min-height: 72dvh; }
#carta .letter { animation: letter-arrive .9s ease both; }
#flores .botanical { animation: bouquet-arrive 1.3s ease both; }
.closing.screen { min-height: 72dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.closing.screen>p:not(.eyebrow) { font-size: clamp(48px,7vw,80px); }
.steps { display: flex; justify-content: center; gap: 17px; padding: 22px; }
.steps a { display: block; width: 8px; height: 8px; border-radius: 50%; background: #c8cdbd; position: relative; transition: background .3s, transform .3s; }
.steps a:before { content: ''; position: absolute; inset: -10px; }
.steps a[aria-current] { background: var(--gold); transform: scale(1.35); }
.noscript-message { text-align: center; }
@keyframes scene-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes letter-arrive { from { opacity: 0; transform: translateY(70px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes bouquet-arrive { from { opacity: 0; transform: translateY(35px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes flower-turn { to { transform: rotate(360deg); } }
@media(max-width:600px) {
  .welcome-screen,
  .envelope-screen,
  .closing.screen {
    min-height: auto;
    padding: 64px 20px 28px;
    justify-content: flex-start;
  }
  .welcome-screen h1 {
    font-size: clamp(36px, 10vw, 48px);
    letter-spacing: -1.2px;
    margin-bottom: 14px;
  }
  .welcome-screen .intro {
    margin-bottom: 18px;
    font-size: 12px;
  }
  .welcome-flower {
    margin-bottom: 12px;
  }
  .flower-illu--hero {
    width: 110px;
  }
  .envelope {
    height: 190px;
    margin: 36px 0 20px;
  }
  .envelope-seal {
    top: 74px;
  }
  .envelope-paper {
    font-size: 22px;
    padding: 28px 10px;
  }
  .letter-section {
    padding-top: 28px;
  }
  .letter-aside > p:not(.eyebrow) {
    display: none;
  }
  .steps {
    padding: 12px;
    gap: 14px;
  }
}
@media(prefers-reduced-motion:reduce) { .screen,.screen * { animation:none!important; transition:none!important; } }

.noscript-message { text-align: center; }