/* A little more pink, a little more sunshine. */
:root {
  --paper: #fff4f6;
  --ink: #61484f;
  --muted: #a48691;
  --rose: #d17d96;
  --rose-dark: #bd6682;
  --line: #eed9df;
}
body {
  background-image: radial-gradient(ellipse at 92% 7%, #fbdce470 0, transparent 29%),
    radial-gradient(ellipse at 1% 30%, #fff9f2 0, transparent 36%),
    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='%23925c70' opacity='.025' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.brand-mark { background: #f9e0e7; border-color: #e0a5b8; }
.hero { gap: 42px; padding-top: 66px; padding-bottom: 66px; }
.hero-description { color: #9b7884; }
.soft-text, .heading-dot { color: #bb7b90; }
.word-underline { stroke: #de98af; }
.button { border-radius: 9px; }
.button-primary { box-shadow: 0 4px 0 #be758b20; }
.button-primary:hover { box-shadow: 0 7px 18px #be758b26; }
.hero-copy { animation: soft-arrive .8s both; }
.hero-decoration { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-decoration svg { position: absolute; color: #e2a1b7; opacity: .55; }
.floating-heart { width: 19px; height: 19px; fill: #f4d0dc; animation: little-float 8s ease-in-out infinite; }
.floating-flower { width: 23px; height: 23px; animation: little-float 11s ease-in-out infinite reverse; }
.decoration-one { top: 8%; left: 35%; animation-delay: -2s; }
.decoration-two { top: 66%; left: 43%; animation-delay: -6s; }
.decoration-three { bottom: 6%; left: 13%; animation-delay: -4s; }
.decoration-four { top: 4%; right: 3%; animation-delay: -8s; }
.hero .featured-collage { height: auto; margin: 28px 0 21px; max-width: none; }
.featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 13px; }
.featured-shot { position: relative; padding: 7px 7px 0; transform: rotate(-2deg); transition: transform .3s, box-shadow .3s; animation: soft-arrive .8s both; border-color: #edd9dc; box-shadow: 0 7px 23px #ad6e8415; }
.featured-shot:nth-child(2) { animation-delay: .12s; }
.featured-shot:nth-child(3) { transform: rotate(2deg); animation-delay: .22s; }
.featured-shot:nth-child(4) { transform: rotate(-1deg); animation-delay: .32s; }
.featured-shot:hover, .featured-shot:focus-within { transform: translateY(-5px) rotate(0); box-shadow: 0 12px 28px #ad6e8428; z-index: 3; }
.featured-landscape { grid-column: 1 / -1; margin: 0 13px 0 20px; padding: 10px 10px 0; transform: rotate(2deg); }
.photo-link { display: block; width: 100%; background: #fff9f4; padding: 0; border-radius: 1px; overflow: hidden; }
.featured-shot .photo-link { aspect-ratio: 2 / 3; }
.featured-landscape .photo-link { aspect-ratio: 1.8; }
.featured-shot .photo-link img { display: block; width: 100%; height: 100%; object-fit: contain; }
.featured-shot figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 35px; padding: 7px 2px; font-family: var(--hand); font-size: 10px; line-height: 1.65; letter-spacing: .4px; text-align: center; color: #ae7f8b; }
.featured-landscape figcaption { font-size: 13px; min-height: 43px; gap: 30px; }
.featured-landscape figcaption span { font-size: 23px; line-height: 1; color: #d991a9; }
.featured-collage .note-top { left: 35px; top: -39px; color: #b98c9a; }
.featured-collage .note-top svg { left: 185px; width: 61px; height: 39px; }
.featured-collage .note-bottom { bottom: -30px; right: 4px; color: #bd8fa0; }
.featured-collage .collage-spark { top: 28%; left: -18px; color: #c4af8c; }
.featured-shot .tape-main { background-color: #e9bac8b8; width: 103px; }
.featured-shot .tape-mini { background-color: #c1cbb4bd; width: 55px; height: 19px; }
.time-strip { margin-bottom: 25px; }
.time-caption { color: #a78791; }
.time-intro .heart-outline { color: #cf91a7; }
.everyday-strip { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 25px; padding: 4px 0 26px; border-bottom: 1px dashed #e8cdd6; margin-bottom: 63px; }
.everyday-intro .eyebrow { font-size: 8px; letter-spacing: 2px; color: #bf98a5; }
.everyday-intro h2 { font: 400 18px/1.7 var(--hand); letter-spacing: 1.5px; margin-top: 8px; color: #a87e8b; }
.everyday-intro h2 span { color: #d299ad; margin-left: 4px; }
.everyday-intro > p:last-child { font-size: 10px; margin-top: 6px; letter-spacing: .7px; color: #b59ba3; }
.everyday-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 125px)); gap: 19px; justify-content: end; }
.everyday-moment { padding: 6px 6px 0; background: #fffdfa; border: 1px solid #ecdde0; box-shadow: 0 3px 9px #ad6e840b; transform: rotate(-2deg); transition: transform .25s; }
.everyday-moment:nth-child(2) { transform: rotate(2deg); }
.everyday-moment:nth-child(3) { transform: rotate(-1deg); }
.everyday-moment:hover { transform: translateY(-3px) rotate(0); }
.everyday-moment .photo-link { aspect-ratio: 1; }
.everyday-moment img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.everyday-moment .map-photo img { object-fit: contain; background: #eff3e9; }
.everyday-moment figcaption { font: 10px/1.6 var(--hand); letter-spacing: .3px; color: #af8c97; text-align: center; padding: 8px 0; }
.start-card { background: #f8e8ed; border-color: #ebd0da; }
.start-day, .start-card h3 { color: #a87486; }
.start-day svg { stroke: #ce95ab; }
.start-bottom { border-color: #e5c6d1; }
.little-note { background-color: #eef0e5; }
.memories-section { background: #f7e8ee88; border-color: #eddae0; }
.filter.active { color: #a9647e; background: #f0d4df; }
.filter:hover { background: #f0d4df80; }
.album-toolbar { border-color: #e8d2dc; }
.album-count { color: #bd8a9d; }
.memory-button { border-color: #eddee0; box-shadow: 1px 4px 13px #ad6e840c; }
.image-category { background: #fff1f5ee; color: #ac7b8d; }
.memory-caption p { color: #a27585; }
.memory-caption .mini-heart { color: #d99db2; }
.button-secondary { border-color: #d9adbe; color: #b07c91; }
.button-secondary:hover { background: #f2dce5; }
.memories-section + .closing { border-top: 0; }
.closing > p span { color: #c08b9e; }
.lightbox { background: #fff6f8; border-color: #ebd5df; }
.lightbox::backdrop { background: #3d2636d9; }
.icon-button:hover { background: #f1dce5; }
@keyframes little-float { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-12px) rotate(9deg); } }
@keyframes soft-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1190px) {
  .hero { gap: 29px; padding-top: 58px; }
  .featured-grid { gap: 16px 10px; }
  .featured-shot figcaption { font-size: 9px; letter-spacing: .1px; }
  .featured-landscape { margin-inline: 9px; }
  .featured-landscape figcaption { font-size: 12px; }
  .everyday-photos { grid-template-columns: repeat(3, minmax(0, 113px)); gap: 15px; }
}
@media (max-width: 900px) {
  .hero { gap: 20px; }
  .featured-shot { padding: 5px 5px 0; }
  .featured-shot figcaption { font-size: 8px; padding: 6px 0; min-height: 37px; }
  .featured-landscape { padding: 8px 8px 0; }
  .featured-landscape figcaption { min-height: 35px; font-size: 10px; }
  .featured-collage .note-top { left: 12px; font-size: 10px; }
  .featured-collage .note-top svg { left: 145px; width: 43px; }
  .everyday-strip { grid-template-columns: .9fr 1.3fr; gap: 17px; margin-bottom: 48px; }
  .everyday-intro h2 { font-size: 16px; letter-spacing: .8px; }
  .everyday-intro > p:last-child { font-size: 9px; letter-spacing: .3px; }
  .everyday-photos { gap: 11px; }
  .everyday-moment figcaption { font-size: 8px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 35px; padding-bottom: 34px; gap: 0; }
  .hero .featured-collage { max-width: 430px; margin: 58px 0 28px; }
  .featured-grid { gap: 16px 10px; }
  .featured-landscape { margin: 0 10px; padding: 8px 8px 0; }
  .featured-landscape .photo-link { aspect-ratio: 1.6; }
  .featured-landscape figcaption { font-size: 10px; gap: 21px; min-height: 34px; }
  .featured-shot figcaption { font-size: 8px; padding: 7px 0; min-height: 40px; line-height: 1.7; }
  .featured-collage .note-top { font-size: 10px; left: 46px; top: -33px; }
  .featured-collage .note-top svg { left: 147px; width: 46px; }
  .featured-collage .note-bottom { font-size: 11px; bottom: -27px; right: 7px; }
  .featured-collage .collage-spark { top: 23%; left: -5px; width: 15px; }
  .hero-decoration .decoration-one { top: 2%; left: 87%; }
  .hero-decoration .decoration-two { top: 45%; left: 84%; }
  .hero-decoration .decoration-three { bottom: 1%; left: 20%; }
  .hero-decoration .decoration-four { top: 26%; right: 5%; width: 16px; }
  .time-strip { margin-bottom: 26px; }
  .everyday-strip { display: block; padding: 0 0 23px; margin-bottom: 39px; }
  .everyday-intro .eyebrow { font-size: 7px; }
  .everyday-intro h2 { font-size: 17px; margin-top: 6px; }
  .everyday-intro > p:last-child { display: none; }
  .everyday-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 335px; gap: 13px; margin-top: 17px; }
  .everyday-moment { padding: 5px 5px 0; }
  .everyday-moment figcaption { font-size: 8px; padding: 7px 0; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Separate pages of the same little album. */
.album-shortcuts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 38px; padding-bottom: 22px; border-bottom: 1px dashed #e1c5d1; }
.album-jump { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff8fa; border: 1px solid #ecd5df; border-radius: 24px; font-size: 11px; transition: background .2s, transform .2s; }
.album-jump:hover { background: #f7dce6; transform: translateY(-2px); }
.album-jump-number { color: #bf8c9e; font: 12px Georgia, serif; }
.album-jump small { color: #b38f9c; }
.album-module { scroll-margin-top: 35px; padding-top: 8px; }
.album-module + .album-module { margin-top: 52px; padding-top: 42px; border-top: 1px dashed #ddbdcd; }
.album-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.album-heading .eyebrow { font-size: 8px; color: #b3899b; letter-spacing: 2px; }
.album-heading h3 { font: 400 27px/1.7 var(--hand); letter-spacing: 2px; margin: 8px 0; }
.album-heading h3 span { color: #d499b0; }
.album-description { font-size: 11px; color: #ae8d9b; }
.album-quantity { color: #b7889c; white-space: nowrap; font-size: 11px; }
.album-quantity strong { font: 30px Georgia, serif; margin-right: 4px; }
.album-bottom { text-align: center; margin-top: 32px; }
.album-bottom > p { font-size: 10px; color: #ae8d9b; letter-spacing: 1px; margin-bottom: 15px; }
.album-bottom .album-finished { font: 14px/1.8 var(--hand); margin: 20px 0 0; }
.album-finished span { color: #ce91aa; }
.gallery-her .memory-image-wrap { aspect-ratio: 3 / 4; background: #f7edf1; }
.gallery-her .memory-image-wrap img, .gallery-couple .memory-image-wrap img { object-fit: contain; }
.gallery-couple .memory-image-wrap { background: #f7edf1; }
.everyday-strip { grid-template-columns: .8fr 1.5fr; }
.everyday-photos { grid-template-columns: repeat(4, minmax(0, 125px)); }
.everyday-moment:nth-child(4) { transform: rotate(1.5deg); }
.everyday-moment img { object-fit: contain; background: #fff4f5; }

.story-start-banner { display: flex; align-items: center; gap: 30px; padding: 24px 30px; margin-bottom: 32px; background: #f9e6ed; border: 1px solid #ebcfda; border-radius: 4px; }
.story-start-date { font: 30px Georgia, serif; letter-spacing: 1px; color: #ba8295; }
.story-start-banner h3 { font: 400 20px/1.8 var(--hand); }
.story-start-banner p { font-size: 11px; color: #aa8494; margin-top: 4px; }
.story-start-heart { font: 42px var(--hand); color: #d49cb1; margin-left: auto; }
.story-sequence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.story-moment { position: relative; padding: 9px 9px 0; border: 1px solid #eddae1; background: #fffdfa; box-shadow: 0 5px 20px #a86f8510; transform: rotate(-1deg); }
.story-moment:nth-child(even) { transform: rotate(1deg); }
.story-moment .photo-link { aspect-ratio: 3 / 4; background: #f8eef0; }
.story-moment img { width: 100%; height: 100%; object-fit: contain; }
.story-moment figcaption { display: flex; gap: 10px; align-items: baseline; padding: 17px 3px; font: 15px/1.5 var(--hand); color: #a7798b; }
.story-moment-number { font: 13px Georgia, serif; color: #c9a8b4; }
.story-moment small { display: block; font: 9px/1.9 var(--sans); margin-top: 7px; color: #b59aa5; }
.story-sequence-note { font: 16px/1.9 var(--hand); color: #a98393; text-align: center; margin-top: 30px; }
.story-sequence-note span { color: #cf96ac; }

/* Petals move across the viewport without capturing any touch or click. */
.sakura-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; contain: strict; }
.sakura-petal { position: absolute; top: -25px; left: var(--petal-x); width: var(--petal-size); height: calc(var(--petal-size) * 1.3); animation: sakura-fall var(--petal-duration) var(--petal-delay) linear infinite; will-change: transform; }
.sakura-petal-shape { display: block; width: 100%; height: 100%; border-radius: 80% 12% 70% 30%; background: linear-gradient(135deg, #fbdce8d9, #e6a2bd99); box-shadow: inset 1px 1px 2px #fff8; animation: sakura-sway var(--sway-duration) ease-in-out infinite alternate; }
.sakura-petal:nth-child(3n) { opacity: .55; }
.sakura-layer.is-paused * { animation-play-state: paused; }
.sakura-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 25; display: flex; align-items: center; gap: 6px; border: 1px solid #e7c7d5; border-radius: 24px; background: #fff6f9ed; padding: 9px 13px; color: #b47992; font-size: 10px; box-shadow: 0 3px 15px #b4789217; }
.sakura-toggle svg { width: 17px; height: 17px; }
.sakura-toggle[aria-pressed="false"] { opacity: .75; }
@keyframes sakura-fall { from { transform: translate3d(0, -25px, 0) rotate(0); } to { transform: translate3d(var(--petal-drift), calc(100dvh + 60px), 0) rotate(var(--petal-spin)); } }
@keyframes sakura-sway { from { transform: translateX(-10px) rotateY(-35deg) rotate(-15deg); } to { transform: translateX(10px) rotateY(45deg) rotate(20deg); } }

/* The shared moment, counted in real seconds. */
.time-strip { flex-wrap: wrap; }
.time-intro { flex: 1 1 190px; }
.day-counter { flex: 1.6 1 350px; }
.love-clock { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.clock-part { display: inline-flex; align-items: baseline; gap: 4px; }
.day-counter .clock-part strong { font: 32px/1.2 Georgia, serif; font-variant-numeric: tabular-nums; min-width: 1.12em; }
.day-counter .clock-days strong { font-size: 40px; }
.next-date { flex: 1 1 145px; }
@media (max-width: 900px) {
  .everyday-strip { display: block; }
  .everyday-photos { justify-content: start; margin-top: 18px; }
  .story-sequence { gap: 14px; }
  .story-moment figcaption { font-size: 12px; gap: 7px; }
  .story-moment small { font-size: 8px; }
  .day-counter { padding-inline: 12px; }
}
@media (max-width: 600px) {
  .everyday-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 9px; }
  .everyday-moment { padding: 4px 4px 0; }
  .everyday-moment figcaption { font-size: 7px; }
  .story-start-banner { padding: 19px 17px; gap: 15px; flex-wrap: wrap; }
  .story-start-date { font-size: 23px; }
  .story-start-banner h3 { font-size: 16px; }
  .story-start-banner p { font-size: 9px; }
  .story-start-heart { display: none; }
  .story-sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 15px; }
  .story-moment { padding: 6px 6px 0; }
  .story-moment figcaption { padding: 13px 1px; }
  .story-sequence-note { font-size: 13px; text-align: left; }
  .album-shortcuts { gap: 8px; margin-bottom: 28px; }
  .album-jump { padding: 8px 11px; font-size: 10px; gap: 7px; }
  .album-heading { gap: 10px; margin-bottom: 25px; }
  .album-heading h3 { font-size: 20px; letter-spacing: .5px; }
  .album-heading .eyebrow { font-size: 6px; letter-spacing: 1px; }
  .album-description { font-size: 9px; }
  .album-quantity strong { font-size: 24px; }
  .album-quantity { font-size: 9px; }
  .album-module + .album-module { margin-top: 34px; padding-top: 30px; }
  .album-bottom .album-finished { font-size: 12px; }
  .sakura-toggle { right: 12px; bottom: 12px; padding: 8px 11px; }
  .time-intro { flex: 1 1 100%; width: 100%; }
  .day-counter { flex: 1 1 100%; width: 100%; border-left: 0; padding: 8px 0 13px; justify-content: space-between; border-bottom: 1px dashed #ecd5df; }
  .day-counter .time-caption { max-width: 55px; font-size: 9px; }
  .love-clock { gap: 11px; }
  .day-counter .clock-part strong { font-size: 27px; }
  .day-counter .clock-days strong { font-size: 33px; }
  .clock-part { gap: 3px; }
  .next-date { flex: 1 1 40%; width: calc(50% - 5px); padding-top: 0; }
  .couple-since { letter-spacing: 0; }
}
@media (max-width: 360px) {
  .love-clock { gap: 7px; }
  .day-counter .clock-part strong { font-size: 24px; }
  .day-counter .clock-days strong { font-size: 29px; }
  .couple { flex-wrap: wrap; }
  .everyday-photos { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sakura-layer, .sakura-toggle { display: none; }
}
.story-start-date small { display: block; font: 9px/1.8 var(--sans); letter-spacing: 2px; margin-top: 7px; color: #b58e9e; }