:root {
  --ink: #24182d;
  --plum: #563156;
  --berry: #a53158;
  --peach: #f5bea6;
  --mist: #f6f0f6;
  --lilac: #ded3ed;
  --paper: #fffaf8;
  --line: rgb(57 35 67 / 18%);
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Noto Serif SC", "Songti SC", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; }
button, a { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 10; top: -5rem; left: 1rem; padding: .7rem 1rem; background: var(--ink); color: #fff; text-decoration: none; transition: top 180ms var(--ease); }
.skip-link:focus { top: 1rem; }

.cover { position: relative; isolation: isolate; min-height: min(850px, 100svh); overflow: hidden; background: #3f2446; color: #fffafc; }
.cover-image, .cover-wash { position: absolute; inset: 0; }
.cover-image { z-index: -3; background: url("../../public/concept-moment/balloons.jpg") center / cover no-repeat; filter: saturate(.7) contrast(.96) brightness(.63); transform: scale(1.035); }
.cover-wash { z-index: -2; background: linear-gradient(108deg, rgb(53 25 67 / 94%) 4%, rgb(69 28 68 / 74%) 45%, rgb(188 86 105 / 28%) 100%); }
.cover::after { position: absolute; z-index: -1; right: -8vw; bottom: -20vw; width: min(58vw, 760px); aspect-ratio: 1; border: 1px solid rgb(255 239 246 / 40%); border-radius: 50%; box-shadow: 0 0 0 80px rgb(248 202 188 / 8%), 0 0 0 160px rgb(248 202 188 / 5%); content: ""; }
.topbar { display: flex; align-items: center; justify-content: space-between; width: min(100% - 3rem, 1220px); margin: 0 auto; padding: 1.75rem 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.topbar p { margin: 0; color: rgb(255 244 249 / 75%); }
.back { color: #fff; font-size: 1.1rem; letter-spacing: -.03em; text-decoration: none; }
.cover-copy { width: min(100% - 3rem, 1220px); margin: clamp(5rem, 13vh, 9.5rem) auto 0; }
.eyebrow, .section-kicker { margin: 0; color: var(--berry); font-size: .73rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.cover .eyebrow { color: rgb(255 231 235 / 81%); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 700; text-wrap: balance; }
h1 { max-width: 9ch; margin: .8rem 0 1.35rem; font-size: clamp(3.5rem, 8.3vw, 7.75rem); letter-spacing: -.035em; line-height: .98; }
h1 em { color: var(--peach); font-style: normal; }
.cover-note { max-width: 26rem; margin-bottom: 1.7rem; color: rgb(255 245 249 / 85%); font-size: clamp(1rem, 1.5vw, 1.16rem); }
.date { margin: 0 0 2.1rem; color: var(--peach); font-size: 1.05rem; font-weight: 900; letter-spacing: .2em; }
.open-letter, .wish-link { display: inline-flex; align-items: center; gap: 1rem; min-height: 48px; border: 0; padding: .85rem 1.2rem; background: var(--peach); color: var(--ink); cursor: pointer; font-weight: 900; text-decoration: none; transition: transform 220ms var(--ease), background 220ms var(--ease); }
.open-letter:hover, .wish-link:hover { background: #ffe3d4; transform: translateY(-2px); }
.open-letter:focus-visible, .wish-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.concept-mark { position: absolute; right: max(1.5rem, calc((100vw - 1220px) / 2)); bottom: 1.5rem; margin: 0; color: rgb(255 244 249 / 72%); font-size: .75rem; }

.letter-section, .moments, .wish { padding: clamp(5rem, 11vw, 10rem) max(1.5rem, calc((100vw - 1120px) / 2)); }
.letter-section { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(3rem, 8vw, 9rem); background: var(--mist); }
.letter-intro h2, .moments-heading h2, .wish-copy h2 { margin: .7rem 0 0; font-size: clamp(2.15rem, 4.3vw, 4.55rem); letter-spacing: -.035em; line-height: 1.1; }
.letter { position: relative; max-width: 37rem; padding: clamp(2rem, 5vw, 4rem); background: var(--paper); box-shadow: 0 10px 24px rgb(58 39 72 / 12%); font-family: var(--serif); font-size: clamp(1.08rem, 1.8vw, 1.35rem); }
.letter::before { position: absolute; top: 0; left: 0; width: 5rem; height: 5rem; border-top: 2px solid var(--peach); border-left: 2px solid var(--peach); content: ""; }
.letter p { max-width: 24ch; }
.letter footer { margin-top: 2.8rem; color: var(--berry); font-family: var(--sans); font-size: .9rem; font-weight: 900; }

.moments { overflow: hidden; background: var(--paper); }
.moments-heading { position: relative; z-index: 1; max-width: 33rem; }
.memory-wall { position: relative; display: grid; grid-template-columns: minmax(205px, .93fr) minmax(175px, .65fr) minmax(225px, 1fr); grid-template-rows: 275px 205px; gap: clamp(1rem, 3vw, 2.6rem); max-width: 1000px; min-height: 590px; margin: clamp(2.8rem, 2vw, 4rem) 1.5rem 0 auto; }
.memory-frame { position: relative; margin: 0; padding: .72rem .72rem 2.5rem; background: #fffdfa; box-shadow: 0 7px 8px rgb(63 35 64 / 12%); }
.memory-frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(.96); }
.memory-frame figcaption { position: absolute; right: .72rem; bottom: .58rem; left: .72rem; color: #5f4b61; font-size: .77rem; font-weight: 700; line-height: 1.45; }
.memory-frame figcaption b { margin-right: .35rem; color: var(--berry); letter-spacing: .04em; }
.memory-frame--cake { grid-column: 1 / 2; grid-row: 1 / 3; transform: rotate(-4.6deg); }
.memory-frame--cake img { object-position: 56% 55%; }
.memory-frame--flowers { grid-column: 3 / 4; grid-row: 1 / 2; align-self: end; transform: rotate(4deg); }
.memory-frame--flowers img { object-position: 48% 50%; }
.memory-frame--balloons { grid-column: 2 / 3; grid-row: 2 / 3; width: 100%; align-self: center; justify-self: start; transform: rotate(-2deg); }
.memory-frame--balloons img { object-position: 70% 50%; }
.memory-note { grid-column: 2 / 3; grid-row: 1 / 2; align-self: start; padding: 1.35rem 1.25rem; background: var(--peach); color: #4d2f47; transform: rotate(3deg); }
.memory-note p { margin-bottom: .75rem; font-family: var(--serif); font-size: 1.1rem; line-height: 1.45; }
.memory-note span { display: block; margin-top: 2.2rem; font-size: .74rem; font-weight: 900; letter-spacing: .16em; }
.memory-afterword { grid-column: 3 / 4; grid-row: 2 / 3; align-self: end; margin: 0 0 1.2rem; color: #58475d; font-family: var(--serif); font-size: 1.15rem; line-height: 1.65; transform: rotate(2deg); }

.wish { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 8vw, 8rem); align-items: center; background: var(--lilac); }
.wish-photo { position: relative; min-height: 520px; margin: 0; overflow: hidden; }
.wish-photo::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(47 22 61 / 56%), transparent 50%); content: ""; }
.wish-photo img { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: center 53%; filter: saturate(.88) contrast(.94); }
.wish-photo p { position: absolute; z-index: 1; right: 1.5rem; bottom: 1.25rem; left: 1.5rem; margin: 0; color: #fff; font-size: .95rem; font-weight: 700; }
.wish-copy > p:not(.section-kicker) { max-width: 31rem; margin: 1.5rem 0 2rem; color: #4d3e50; font-size: 1.08rem; }
.wish-copy .moment-price { margin-top: -1rem; color: var(--berry); font-size: .88rem; font-weight: 700; line-height: 1.7; }
.wish-link { background: var(--plum); color: #fff; }
.wish-link:hover { background: #39213f; }
.page-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem max(1.5rem, calc((100vw - 1220px) / 2)); background: var(--ink); color: rgb(255 250 252 / 74%); font-size: .78rem; }

body.letter-open .cover-image { transform: scale(1); transition: transform 900ms var(--ease); }
body.letter-open .open-letter { background: #fff5ef; }

@media (max-width: 760px) {
  .topbar { padding: 1.25rem 0; }
  .topbar p { display: none; }
  .cover { min-height: 720px; }
  .cover-copy { margin-top: 22vh; }
  .letter-section, .wish { grid-template-columns: 1fr; }
  .memory-wall { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); grid-template-rows: 265px 210px 250px; min-height: auto; margin-right: 0; }
  .memory-frame--cake { grid-column: 1 / 2; grid-row: 1 / 3; }
  .memory-note { grid-column: 2 / 3; grid-row: 1 / 2; }
  .memory-frame--flowers { grid-column: 2 / 3; grid-row: 2 / 3; }
  .memory-frame--balloons { grid-column: 1 / 2; grid-row: 3 / 4; width: 90%; }
  .memory-afterword { grid-column: 2 / 3; grid-row: 3 / 4; align-self: center; }
  .wish-photo, .wish-photo img { min-height: 400px; }
  .wish-copy { padding-bottom: 1rem; }
  .page-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}