@charset "UTF-8";
@property --mood {
  syntax: "<color>";
  inherits: true;
  initial-value: #f3dde5;
}
:root {
  color-scheme:light;
  --paper:#fffdfa;
  --ink:#352621;
  --muted:#776b69;
  --mood:#f3dde5;
  transition: --mood 800ms ease;
  --serif:"Iowan Old Style","Baskerville","Palatino Linotype",Georgia,serif;
  font-family:"Avenir Next","Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  scroll-behavior:smooth
}
*,*::before,*::after {
  box-sizing:border-box
}
body {
  margin:0;
  min-width:320px;
  isolation:isolate;
  background-image:radial-gradient(#3526210b .6px,transparent .6px);
  background-size:7px 7px
}
body::before {
  position:fixed;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse at 85% 15%,var(--mood),transparent 72%);
  opacity:.38;
  content:"";
  pointer-events:none;
  transition:background 700ms
}
a {
  color:inherit
}
button,summary,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #9b6475;
  outline-offset:7px
}
button {
  font:inherit;
  color:inherit
}
[hidden] {
  display:none!important;
}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:10;
  background:var(--ink);
  color:var(--paper);
  padding:14px;
  transform:translateY(-180%)
}
.skip-link:focus {
  transform:none
}
.chapter-header {
  display:flex;
  align-items:center;
  gap:30px;
  max-width:1240px;
  margin:auto;
  padding:26px 40px
}
.brand {
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#f3dde5;
  text-decoration:none;
  font:italic 29px var(--serif)
}
.back-link {
  text-decoration:none;
  font-size:12px
}
.back-link:hover {
  text-decoration:underline
}
.chapter-number {
  margin-left:auto;
  font-size:9px;
  letter-spacing:.2em;
  color:var(--muted)
}
.intro {
  position:relative;
  max-width:1060px;
  margin:auto;
  text-align:center;
  padding:80px 25px 95px
}
.eyebrow,.paper-kicker {
  font-size:9px;
  letter-spacing:.2em;
  font-weight:600;
  color:#8c6470
}
.intro h1 {
  margin:27px 0 26px;
  font:400 clamp(66px,9vw,116px)/.96 var(--serif);
  letter-spacing:-.065em
}
.intro h1 em {
  color:#9b6475;
  font-weight:400
}
.intro-copy {
  color:var(--muted);
  font-size:14px;
  line-height:1.9
}
.start-link {
  display:inline-flex;
  gap:30px;
  margin-top:24px;
  padding:12px 0;
  border-bottom:1px solid #35262133;
  text-decoration:none;
  font-size:11px
}
.start-link span {
  font-size:18px
}
.intro-flower {
  display:block;
  font-size:42px;
  color:#a8808d;
  animation:arrive 1s both
}
.margin-note {
  position:absolute;
  right:4%;
  bottom:105px;
  transform:rotate(-9deg);
  font:italic 19px var(--serif);
  color:#a8808d
}
.intro h1,.intro-copy,.start-link {
  animation:arrive 900ms both
}
.intro-copy {
  animation-delay:100ms
}
.start-link {
  animation-delay:200ms
}
.collection {
  max-width:1120px;
  margin:0 auto;
  padding:0 40px 70px;
  scroll-margin-top:35px
}
.collection-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #35262128;
  padding:22px 0 34px
}
.collection-heading h2 {
  font-size:12px;
  font-weight:500
}
.collection-heading p {
  font-size:10px;
  color:var(--muted);
  text-align:right
}
.envelope-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:35px
}
.envelope {
  --envelope:#f3dde5;
  --flap:#ead0da;
  position:relative;
  min-width:0;
  transition:transform 350ms
}
.envelope:nth-child(2) {
  margin-top:45px
}
.envelope:nth-child(4) {
  margin-top:35px
}
.blue {
  --envelope:#dcebf5;
  --flap:#cbdfea
}
.cream {
  --envelope:#f1e9db;
  --flap:#e9decd
}
.grey {
  --envelope:#e8e5e7;
  --flap:#dcd7db
}
.envelope summary {
  position:relative;
  display:flex;
  min-height:263px;
  flex-direction:column;
  justify-content:space-between;
  padding:27px 31px 24px;
  cursor:pointer;
  list-style:none;
  background:var(--envelope);
  border:1px solid #35262112;
  border-radius:3px;
  box-shadow:0 10px 25px #3526210b;
  overflow:hidden;
  transition:box-shadow 350ms
}
.envelope summary::-webkit-details-marker {
  display:none
}
.envelope summary::before {
  position:absolute;
  inset:0;
  background:var(--flap);
  clip-path:polygon(0 0,100% 0,50% 54%);
  opacity:.75;
  content:"";
  transition:clip-path 650ms cubic-bezier(.2,.7,.2,1)
}
.envelope summary::after {
  position:absolute;
  inset:0;
  border:1px solid #fff7;
  margin:8px;
  content:"";
  pointer-events:none
}
.envelope summary:hover {
  box-shadow:0 16px 35px #35262114
}
.envelope summary>* {
  position:relative;
  z-index:1
}
.envelope-index {
  font-size:8px;
  letter-spacing:.18em;
  color:#6e585b
}
.stamp {
  position:absolute!important;
  right:27px;
  top:24px;
  display:grid;
  width:49px;
  height:58px;
  place-items:center;
  border:1px dashed #35262155;
  outline:3px solid #ffffff45;
  font-size:31px;
  color:#9b6475;
  transform:rotate(8deg)
}
.stamp-colors {
  color:#7095a9;
  font-size:15px;
  line-height:.8;
  text-align:center
}
.envelope-title {
  display:block;
  margin:35px 0 25px;
  font:400 clamp(30px,3.6vw,43px)/1.07 var(--serif);
  letter-spacing:-.035em
}
.envelope-title em {
  font-weight:400
}
.open-label {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.17em
}
.open-label span {
  font-size:16px;
  line-height:.7
}
.envelope[open] summary::before {
  clip-path:polygon(0 0,100% 0,50% 10%)
}
.envelope[open] .open-label {
  opacity:.6
}
.envelope[open] .open-label span {
  transform:rotate(90deg)
}
.paper {
  position:relative;
  padding:35px;
  background:#fffefa;
  border:1px solid #35262115;
  border-top:0;
  box-shadow:0 15px 25px #35262108;
  animation:unfold 500ms both;
  transform-origin:top
}
.paper h3 {
  margin:16px 0 22px;
  font:400 34px/1.1 var(--serif);
  letter-spacing:-.035em
}
.paper p {
  font-size:13px;
  line-height:1.9;
  color:var(--muted)
}
.paper .paper-kicker {
  font-size:8px;
  line-height:1.7;
  color:#8c6470
}
.swatches {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  margin:28px 0 15px
}
.swatches button {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:12px;
  padding:6px 0;
  background:none;
  border:0;
  cursor:pointer;
  font-size:8px
}
.swatch {
  width:34px;
  height:34px;
  border:1px solid #35262120;
  border-radius:50%;
  background:var(--swatch);
  transition:transform 200ms,outline-offset 200ms
}
.swatches button:hover .swatch {
  transform:translateY(-3px)
}
.swatches button:disabled {
  cursor: default;
}
.swatches [aria-pressed=true] .swatch {
  outline:1px solid #8c6470;
  outline-offset:4px
}
.small-note {
  font-size:10px!important
}
.text-button {
  display:inline-flex;
  gap:20px;
  padding:10px 0;
  border:0;
  border-bottom:1px solid #35262140;
  background:none;
  font-size:11px;
  cursor:pointer
}
.text-button:hover {
  color:#9b6475
}
.letter-envelope {
  grid-column:1/-1;
  max-width:780px;
  width:100%;
  margin:15px auto 0;
  --envelope:#e9d2db;
  --flap:#dfc1cd
}
.letter-envelope summary {
  min-height:255px;
  text-align:center
}
.letter-envelope .envelope-index,.letter-envelope .open-label {
  text-align:left
}
.letter-envelope .envelope-title {
  margin:14px 0;
  font-size:49px
}
.letter-stamp {
  font:italic 29px var(--serif)
}
.letter-paper {
  padding:55px clamp(25px,7vw,95px)
}
.letter-paper h3 {
  font-size:43px
}
.letter-paper p {
  font-size:14px;
  line-height:2
}
.letter-paper .letter-signature {
  margin-top:35px;
  font:italic 25px/1.4 var(--serif);
  color:#9b6475
}
.collection-end {
  margin:60px 0 0;
  text-align:center;
  font:italic 21px/1.5 var(--serif);
  color:#9b6475
}
.chapter-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  max-width:1120px;
  margin:auto;
  padding:30px 40px 45px;
  border-top:1px solid #35262122
}
.chapter-footer>span {
  font-size:8px;
  letter-spacing:.16em;
  color:var(--muted)
}
.chapter-footer a {
  font-size:12px;
  text-decoration:none
}
.chapter-footer a:hover {
  text-decoration:underline
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stamp::after {
  position: absolute;
  right: -10px;
  bottom: -10px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  color: #9b6475;
  background: #fffdfa;
  box-shadow: 0 2px 6px #3526210d;
  content: "✿";
  font: 15px/1 Georgia, serif;
  transform: scale(0);
  transition: transform 350ms ease;
}

.is-opened .stamp::after {
  transform: scale(1);
}

.bouquet-paper,
.palette-paper,
.music-paper {
  text-align: center;
}

.bouquet {
  --rose-shadow: #dca6ba;
  --rose-petal: #efd0db;
  --rose-inner: #f9e5ec;
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: -18px auto 0;
  overflow: visible;
}

.bouquet[data-arrangement="1"] {
  --rose-shadow: #ded6cc;
  --rose-petal: #faf2e8;
  --rose-inner: #fffaf3;
}

.bouquet[data-arrangement="2"] {
  --rose-shadow: #c78da5;
  --rose-petal: #e5b6ca;
  --rose-inner: #f5d3e1;
}

.bloom {
  transform: rotate(var(--bloom-turn, 0deg));
  transform-origin: 220px 328px;
  transition: transform 850ms cubic-bezier(.2, .7, .2, 1);
}

.stem {
  fill: none;
  stroke: #86a18b;
  stroke-width: 2.8;
  stroke-linecap: round;
}

.leaf {
  fill: #a7bca7;
}

.daisy-petals {
  fill: #fffefa;
  stroke: #e5ddd2;
  stroke-width: .65;
}

.rose-shadow {
  fill: var(--rose-shadow);
}

.rose-petal {
  fill: var(--rose-petal);
}

.rose-petal-inner {
  fill: var(--rose-inner);
}

.rose-shadow,
.rose-petal,
.rose-petal-inner {
  transition: fill 700ms ease;
}

.flower-head {
  transform-box: fill-box;
  transform-origin: center;
}

.envelope[open] .flower-head {
  animation: blossom 850ms var(--bloom-delay, 0ms) both cubic-bezier(.2, .7, .2, 1);
}

.paper .bouquet-caption,
.paper .sunrise-caption {
  margin: 13px 0 22px;
  color: #8c6470;
  font: italic 21px/1.5 var(--serif);
}

.palette-paper {
  padding-top: 45px;
  padding-bottom: 43px;
}

.palette-ribbon {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 30px;
  transform: rotate(-4deg);
}

.palette-ribbon span {
  width: 29px;
  height: 58px;
  background: #f9f4eb;
  border: 1px solid #3526210d;
  box-shadow: 0 3px 8px #35262108;
}

.palette-ribbon span:nth-child(2) { background: #f3dde5; }
.palette-ribbon span:nth-child(3) { background: #dcebf5; }
.palette-ribbon span:nth-child(4) { background: #e8e5e7; }
.palette-ribbon span:nth-child(5) { background: #352621; }

.record {
  position: relative;
  display: grid;
  width: min(190px, 80%);
  aspect-ratio: 1;
  place-items: center;
  margin: 5px auto 30px;
  border: 6px solid #352f30;
  border-radius: 50%;
  background:
    conic-gradient(from 25deg, transparent, #fff2, transparent 34%, #fff1 45%, transparent 65%, #fff2 80%, transparent),
    repeating-radial-gradient(circle, #342f31 0 1px, #242124 2px 3px);
  box-shadow: 0 13px 24px #35262120;
  animation: record-turn 18s linear infinite;
  animation-play-state: paused;
}

.is-playing .record {
  animation-play-state: running;
}

.record-label {
  display: flex;
  width: 43%;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid #f3dde5;
  border-radius: 50%;
  background: #dfb9c9;
}

.record-label span {
  font-size: 8px;
  letter-spacing: .13em;
}

.record-label em {
  font: italic 21px var(--serif);
}

.record-label i {
  width: 6px;
  height: 6px;
  margin-top: 2px;
  border-radius: 50%;
  background: #352f30;
}

.music-paper h3 {
  margin: 10px 0 0;
  font-size: 40px;
}

.music-paper .track-artist {
  margin: 7px 0 25px;
  font-size: 10px;
  letter-spacing: .2em;
}

.music-paper audio {
  display: block;
  width: 100%;
  height: 42px;
  margin: 0 auto;
  accent-color: #9b6475;
}

.music-status {
  min-height: 38px;
  margin: 16px 0 3px;
}

.sunrise-paper {
  padding: 18px 18px 12px;
  text-align: center;
}

.sea-scene {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.15;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 2px 48px 2px 2px;
  background: #d3e3ed;
  cursor: pointer;
  isolation: isolate;
}

.sea-scene:disabled {
  cursor: default;
}

.sky-night,
.sky-day {
  position: absolute;
  inset: 0;
  transition: opacity 3800ms ease;
}

.sky-night {
  background: linear-gradient(#53647f, #a8b4cf 45%, #ecccd8 61%);
  opacity: 0;
}

.sky-day {
  background: linear-gradient(#cde0ef, #f3d9e1 40%, #fae7ce 62%);
}

.sea-stars {
  position: absolute;
  top: 9%;
  right: 12%;
  left: 10%;
  color: #fffdfa;
  font-size: 21px;
  line-height: 1.8;
  opacity: 0;
  transition: opacity 2200ms ease;
}

.sea-sun {
  position: absolute;
  top: calc(50% - 65px);
  left: calc(50% - 35px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff0d2;
  box-shadow: 0 0 35px 18px #fff1d64d;
  transition: transform 3800ms cubic-bezier(.2, .65, .3, 1), opacity 2500ms ease;
}

.sea-water {
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(#b8cbd9, #8fafc2 75%, #83a7bb);
  transition: filter 3800ms ease;
}

.sea-reflection {
  position: absolute;
  top: 50%;
  bottom: 7%;
  left: 35%;
  width: 30%;
  background: repeating-linear-gradient(transparent 0 5px, #fff1d684 6px 8px, transparent 9px 12px);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  filter: blur(2px);
  transition: opacity 3800ms ease;
}

.sea-wave {
  position: absolute;
  top: 64%;
  left: -12%;
  width: 125%;
  height: 24px;
  border-top: 1px solid #fffdfa66;
  border-radius: 50%;
  transform: rotate(-3deg);
}

.sea-wave-two {
  top: 80%;
  left: -5%;
  width: 120%;
  transform: rotate(3deg);
}

.sea-birds {
  position: absolute;
  top: 17%;
  right: 10%;
  width: 65px;
  fill: none;
  stroke: #706977;
  stroke-width: 1.3;
  opacity: .65;
  transition: opacity 2500ms ease;
}

.scene-invitation {
  position: absolute;
  right: 15px;
  bottom: 18px;
  left: 15px;
  color: #fffdfa;
  text-shadow: 0 1px 8px #35262155;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .16em;
}

.sea-scene[data-scene="night"] .sky-night,
.sea-scene[data-scene="night"] .sea-stars { opacity: 1; }

.sea-scene[data-scene="night"] .sky-day,
.sea-scene[data-scene="night"] .sea-reflection,
.sea-scene[data-scene="night"] .sea-birds { opacity: 0; }

.sea-scene[data-scene="night"] .sea-sun {
  opacity: 0;
  transform: translateY(82px);
}

.sea-scene[data-scene="night"] .sea-water {
  filter: brightness(.6) saturate(.7);
}

.sea-scene[data-scene="dawn"] .sea-wave {
  animation: sea-drift 4s ease-in-out both;
}

.sea-scene[data-scene="dawn"] .sea-wave-two {
  animation-direction: reverse;
}

.letter-paper {
  text-align: center;
}

.note-flower {
  display: inline-block;
  margin-bottom: 20px;
  color: #b08798;
  font-size: 33px;
}

.letter-paper > p:not(.letter-signature) {
  font: 400 clamp(21px, 2.8vw, 29px)/1.65 var(--serif);
  letter-spacing: -.025em;
  color: var(--ink);
}

@keyframes blossom {
  from { opacity: 0; transform: scale(.45) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

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

@keyframes sea-drift {
  50% { translate: 12px 4px; }
}

@keyframes arrive {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes unfold {
  from {
    opacity:0;
    transform:translateY(-12px) scaleY(.96)
  }
  to {
    opacity:1;
    transform:translateY(0) scaleY(1)
  }
}
@media(max-width:700px) {
  .chapter-header {
    padding:22px;
    gap:18px
  }
  .chapter-number {
    font-size:8px
  }
  .intro {
    padding:55px 22px 75px
  }
  .intro h1 {
    font-size:clamp(64px,15vw,90px)
  }
  .intro-copy {
    font-size:12px
  }
  .intro-copy br {
    display:none
  }
  .margin-note {
    display:none
  }
  .collection {
    padding:0 22px 55px
  }
  .collection-heading {
    padding:20px 0 25px
  }
  .collection-heading h2 {
    font-size:11px;
    max-width:150px;
    line-height:1.5
  }
  .collection-heading p {
    max-width:125px;
    line-height:1.6
  }
  .envelope-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .envelope:nth-child(2),.envelope:nth-child(4) {
    margin-top:0
  }
  .envelope summary {
    min-height:246px;
    padding:25px
  }
  .envelope-title {
    font-size:38px
  }
  .paper {
    padding:28px
  }
  .sunrise-paper {
    padding: 13px 13px 9px;
  }
  .paper .bouquet-caption,
  .paper .sunrise-caption {
    font-size: 19px;
  }
  .letter-envelope {
    margin-top:0
  }
  .letter-envelope .envelope-title {
    font-size:43px
  }
  .letter-paper {
    padding:35px 28px
  }
  .letter-paper p {
    font-size:13px
  }
  .chapter-footer {
    padding:25px 22px 35px;
    align-items:start
  }
  .chapter-footer>span {
    max-width:115px;
    line-height:1.7
  }
  .chapter-footer a {
    font-size:11px
  }
  .collection-end {
    font-size:19px
  }
  .stamp {
    right:25px
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}