@font-face {
  font-family: Letter;
  src: url('assets/serif.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: Letter;
  src: url('assets/italic.woff') format('woff');
  font-style: italic;
  font-display: swap;
}
:root{--ivory:#fbf4e7;--cream:#eee0c8;--rose:#b47b6c;--ink:#34242a;--muted:#78675d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--ivory);color:var(--ink);font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}header{height:98px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid #b47b6c30}.monogram{font-family:Letter, Georgia, serif;font-size:38px;letter-spacing:-4px}.monogram span{font-style:italic;font-size:23px;color:var(--rose);margin:0 5px}nav{display:flex;gap:36px;font-size:12px}.edition,.eyebrow,.attribution{font-size:9px;letter-spacing:2.5px}.edition{color:var(--muted)}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:740px}.hero-copy{padding:83px 9% 40px 10%}.eyebrow{color:#916354;margin:0 0 29px;line-height:1.7}h1,h2,h3,p{margin-top:0}h1{font-family:Letter, Georgia, serif;font-weight:400;font-size:clamp(65px,6.7vw,112px);line-height:.97;letter-spacing:-4px;margin-bottom:30px}em{font-weight:400;color:#9b665c}.intro{font-family:Letter, Georgia, serif;font-size:19px;line-height:1.5;color:var(--muted);margin-bottom:29px}.text-link{font-size:11px;border-bottom:1px solid var(--rose);padding-bottom:10px;display:inline-flex;gap:44px}.text-link span{color:var(--rose)}.anniversary{display:flex;gap:19px;align-items:center;margin-top:56px}.number{font:47px Letter, Georgia, serif;color:var(--rose)}.anniversary div{font-size:8px;letter-spacing:1.8px;line-height:2}.anniversary div span{font-family:Letter, Georgia, serif;letter-spacing:.3px;font-size:12px;color:var(--muted)}.hero-photo{margin:26px 26px 26px 0;position:relative;overflow:hidden;min-height:690px}.hero-photo img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:50% 55%}.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 58%,#171313b3)}figcaption{position:absolute;bottom:59px;left:35px;color:#fff5e5;font:italic 30px Letter, Georgia, serif;z-index:1}.photo-index{position:absolute;bottom:34px;left:36px;font-size:8px;letter-spacing:2px;color:#f7e9d5;z-index:1}.opening{padding:110px 20% 75px;text-align:center}h2{font:400 clamp(37px,4vw,62px)/1.05 Letter, Georgia, serif;letter-spacing:-1.5px;margin-bottom:25px}.opening-quote{font:20px/1.6 Letter, Georgia, serif;color:var(--muted);margin-top:34px}.attribution{font-size:8px;color:var(--rose)}.date-line{display:flex;align-items:center;gap:20px;margin:50px auto 0;max-width:500px;font-size:9px;letter-spacing:2px;color:var(--muted)}.date-line i{flex:1;height:1px;background:#b47b6c50}.gallery-section{padding:60px 6% 75px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.section-heading h2{margin:0}.section-heading>p{font:17px/1.6 Letter, Georgia, serif;color:var(--muted)}.gallery{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:22px}.memory{position:relative;min-height:455px;overflow:hidden;border:0;text-align:left;padding:0;background:var(--cream);color:var(--ink)}button.memory{cursor:pointer}.featured>img{width:100%;height:100%;object-fit:cover;position:absolute;transition:transform .6s}.featured:hover>img{transform:scale(1.04)}.featured:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#201b1cba)}.memory-info{position:absolute;bottom:28px;left:26px;right:26px;z-index:1;color:var(--ivory)}.memory-info small{font-size:8px;letter-spacing:1.8px;display:block;margin-bottom:11px}.memory-info strong{font:italic 31px Letter, Georgia, serif}.plus{float:right;font-size:26px;font-weight:400}.invitation{padding:30px;display:flex;flex-direction:column;justify-content:end;background:#eee3d1}.third{background:#f0e3db}.slot-number{position:absolute;top:28px;left:28px;font-size:9px;letter-spacing:1.5px;color:var(--rose)}.arch-decoration{position:absolute;left:50%;top:37px;transform:translateX(-50%);width:103px;height:154px;border:1px solid #b47b6c50;border-radius:90px 90px 0 0;display:grid;place-items:center}.arch-decoration span{font:30px Letter, Georgia, serif;color:var(--rose)}.slot-label{text-transform:uppercase;font-size:8px;letter-spacing:2px;color:var(--muted);margin-bottom:13px}h3{font:33px/1.08 Letter, Georgia, serif;margin-bottom:19px;letter-spacing:-.7px}.slot-description{font:15px/1.4 Letter, Georgia, serif;color:var(--muted);margin:0}.album-note{text-align:center;font-size:8px;letter-spacing:2.2px;margin:30px 0 0;color:var(--muted)}.interlude{background:#ead7c8;padding:70px 20px;text-align:center}.tiny-flower{font:40px Letter, Georgia, serif;color:var(--rose);display:block;margin-bottom:15px}.interlude p{font:italic clamp(25px,3vw,42px)/1.2 Letter, Georgia, serif;color:#68463e;margin-bottom:24px}.interlude .eyebrow{font-size:8px}.letter-section{display:grid;grid-template-columns:1fr 1.15fr;gap:12%;padding:110px 10%}.seal{margin-top:50px;border:1px solid #b47b6c70;border-radius:50%;width:90px;height:90px;display:flex;align-items:center;justify-content:center;font:italic 29px Letter, Georgia, serif;color:var(--rose)}.seal span{font-size:20px;margin:0 3px}.letter{font:19px/1.6 Letter, Georgia, serif}.letter p{margin-bottom:25px}.salutation{font-style:italic;font-size:27px}.closing{font-style:italic;color:#925d54}.signature{font-style:italic;font-size:30px}.excerpt-note{font:7px Arial;letter-spacing:1.7px;color:var(--muted)}footer{border-top:1px solid #b47b6c40;margin:0 5%;padding:30px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}footer span{font-size:8px;letter-spacing:1.5px;color:var(--muted)}footer p{font:italic 16px Letter, Georgia, serif;margin:0}dialog{border:0;background:#241c20;color:var(--ivory);padding:30px;max-height:95dvh;max-width:95vw;text-align:center}dialog::backdrop{background:#21181cea}dialog img{max-height:76dvh;max-width:80vw;display:block;margin:auto}dialog p{font:italic 22px Letter, Georgia, serif;margin:20px 0 0}.close{position:absolute;right:5px;top:0;color:white;background:transparent;border:0;font-size:29px;cursor:pointer;padding:8px}a:focus-visible,button:focus-visible{outline:2px solid var(--rose);outline-offset:5px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.opening{position:relative}.orchid{position:absolute;width:150px;height:250px;object-fit:contain;left:3%;top:80px;transform:rotate(-16deg);opacity:.9;pointer-events:none}@media(max-width:760px){.orchid{position:relative;display:block;left:auto;top:auto;width:60px;height:100px;margin:0 auto 22px;transform:rotate(8deg)}}
/* An album laid out by hand, with a story on each reverse. */
.polaroid-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:62px 18px 65px;position:relative}
.polaroid{position:relative;display:block;border:0;padding:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;perspective:1500px;isolation:isolate;min-height:430px;transform:rotate(var(--angle));transition:transform .35s ease,z-index 0s;z-index:1;-webkit-tap-highlight-color:transparent}
.polaroid.sea{--angle:-7deg;margin-top:5px}
.polaroid.details{--angle:5deg;margin-top:62px}
.polaroid.ocean{--angle:-4deg;margin-top:-10px}
.polaroid:hover,.polaroid:focus-visible{transform:rotate(0deg) translateY(-9px);z-index:3}
.polaroid.is-flipped{z-index:4;transform:rotate(0deg) translateY(-5px)}
.polaroid-turn{display:grid;position:relative;width:100%;height:100%;min-height:430px;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,.7,.2,1)}
.polaroid.is-flipped .polaroid-turn{transform:rotateY(180deg)}
.polaroid-face{grid-area:1/1;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 12px 24px #49312620,0 2px 4px #49312619;min-width:0}
.polaroid-front{padding:17px 17px 19px;background:#fffdf6;border:1px solid #e3d6c34d;transform:rotateY(0deg)}
.polaroid-photo{display:block;width:100%;height:290px;overflow:hidden;background:var(--cream)}
.polaroid-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 69%;pointer-events:none}
.details .polaroid-photo img{transform:scale(2.15);transform-origin:50% 100%}
.ocean .polaroid-photo img{transform:scale(2.35);transform-origin:50% 36%}
.polaroid-caption{font:italic clamp(23px,2.3vw,34px)/1.15 Letter, Georgia, serif;margin:23px 5px 14px}
.polaroid-meta{display:flex;justify-content:space-between;gap:10px;margin:auto 5px 0;font-size:7px;letter-spacing:1.5px;color:#956958;line-height:1.5}
.tape{position:absolute;top:-13px;left:35%;width:90px;height:30px;background:#dcc6a88c;transform:rotate(-5deg);clip-path:polygon(2% 0,98% 3%,100% 90%,1% 100%);z-index:2}
.details .tape{background:#d8b2a875;left:38%;transform:rotate(7deg)}
.polaroid-back{padding:34px 30px 25px;transform:rotateY(180deg);background:linear-gradient(140deg,#fff9e9,#efe0cc);border:1px solid #d1b6a0;overflow:hidden}
.back-eyebrow{font-size:7px;letter-spacing:2px;color:#956958;display:block;padding-bottom:24px;border-bottom:1px solid #b47b6c40}
.back-heading{font:italic 33px/1.1 Letter, Georgia, serif;color:#9b665c;margin:28px 0 22px}
.back-story{font:22px/1.45 Letter, Georgia, serif;display:block}
.back-closing{font:italic 20px/1.3 Letter, Georgia, serif;color:#9b665c;margin:20px 0}
.back-source{display:block;font-size:8px;line-height:1.5;letter-spacing:.7px;color:#78675d;margin-top:auto;padding-top:12px}
.back-return{display:block;font-size:7px;letter-spacing:1.6px;color:#956958;margin-top:23px;padding-top:15px;border-top:1px solid #b47b6c40}
@media(min-width:1100px){.polaroid-board{gap:32px;padding-inline:25px}.polaroid{min-height:455px}.polaroid-turn{min-height:455px}.polaroid-photo{height:310px}}
@media(max-width:900px) and (min-width:761px){.polaroid-board{gap:15px;padding-inline:0}.polaroid-front{padding:11px}.polaroid-photo{height:220px}.polaroid,.polaroid-turn{min-height:370px}.polaroid-back{padding:25px 19px}.back-heading{font-size:27px;margin:20px 0 15px}.back-story{font-size:19px}.back-closing{font-size:17px}.back-eyebrow{padding-bottom:15px}}
@media(prefers-reduced-motion:reduce){.polaroid,.polaroid-turn{transition:none!important}}

.music-toggle {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 10;
  min-height: 44px;
  padding: 8px 15px;
  color: var(--ink);
  background: #fffaed;
  border: 1px solid #b47b6c65;
  border-radius: 24px;
  box-shadow: 0 4px 15px #49312620;
  font: italic 16px Letter, Georgia, serif;
  cursor: pointer;
}

.music-toggle span:first-child {
  color: #916354;
  margin-right: 4px;
}

@media (max-width: 760px) {
  header {
    height: 64px;
    padding-inline: 16px;
    gap: 10px;
  }

  .edition, .desktop, .seal { display: none; }

  .monogram, nav a, .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .monogram { flex: 0 0 auto; font-size: 32px; }
  .monogram span { font-size: 20px; }

  nav {
    gap: clamp(2px, 2vw, 14px);
    font-size: 13px;
  }

  nav a { padding-inline: 5px; white-space: nowrap; }

  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { padding: 33px 6% 23px; }
  .hero-copy .eyebrow { margin-bottom: 17px; }

  h1 {
    font-size: clamp(49px, 14vw, 80px);
    letter-spacing: -.045em;
    margin-bottom: 18px;
  }

  .intro { font-size: 17px; margin-bottom: 8px; }
  .text-link { padding-bottom: 0; font-size: 13px; gap: 23px; }
  .anniversary { margin-top: 13px; gap: 12px; }
  .number { font-size: 38px; }
  .anniversary div span { font-size: 13px; }

  .hero-photo {
    height: auto;
    aspect-ratio: 4 / 5;
    min-height: 0;
    margin: 0 16px;
  }

  .hero-photo img { object-position: 50% 62%; }
  .hero-photo figcaption {
    font-size: clamp(23px, 6.7vw, 32px);
    inset-inline: 16px;
    bottom: 40px;
  }
  .photo-index { left: 16px; bottom: 22px; letter-spacing: 1.6px; }

  .opening { padding: 48px 6% 34px; }
  .opening-quote { margin-top: 22px; }
  .date-line { margin-top: 33px; }
  .gallery-section { padding: 36px 6% 48px; }
  .section-heading { display: block; margin-bottom: 20px; }
  .section-heading > p { margin: 14px 0 0; }

  .polaroid-board {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 23px 10px 10px;
    max-width: 400px;
    margin-inline: auto;
  }

  .polaroid.sea, .polaroid.details, .polaroid.ocean { margin-top: 0; }
  .polaroid.sea { --angle: -3deg; }
  .polaroid.details { --angle: 3deg; }
  .polaroid.ocean { --angle: -2deg; }
  .polaroid, .polaroid-turn { min-height: 0; }
  .polaroid-front { padding: 12px 12px 16px; }
  .polaroid-photo { height: auto; aspect-ratio: 1; }
  .polaroid-caption { font-size: clamp(24px, 7vw, 31px); margin: 16px 4px 12px; }
  .polaroid-meta, .back-eyebrow, .back-return { font-size: 9px; }
  .polaroid-back { padding: 20px; }
  .back-eyebrow { padding-bottom: 15px; }
  .back-heading { font-size: 28px; margin: 18px 0 13px; }
  .back-story { font-size: clamp(19px, 5.5vw, 23px); }
  .back-closing { margin: 14px 0; }
  .back-return { margin-top: 14px; padding-top: 13px; }

  .interlude { padding: 47px 6%; }
  .letter-section { grid-template-columns: 1fr; padding: 52px 7%; gap: 20px; }
  .letter { font-size: 19px; }
  footer {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
  footer p { width: 100%; order: -1; }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
  }

  .music-toggle {
    font-size: 15px;
  }
}

@media (hover: none) {
  .polaroid:hover:not(.is-flipped):not(:focus-visible) {
    transform: rotate(var(--angle));
    z-index: 1;
  }
}

.album-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 24px;
}

.album-index a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #b47b6c65;
  border-radius: 24px;
  background: #fffaf0;
  font-size: 13px;
}

.album-index a:hover { background: #f0e3d2; }

.album-chapter {
  border-top: 1px solid #b47b6c45;
  padding: 24px 0 36px;
}

.chapter-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
}

.chapter-heading h3 { margin: 0; font-style: italic; }
.chapter-heading > span { color: var(--muted); font-size: 9px; letter-spacing: 1.8px; }

.album-chapter .polaroid-board {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  max-width: calc(var(--photo-count) * 305px);
  margin-inline: auto;
  padding: 30px 12px 15px;
}

.album-chapter .polaroid { --angle: -3deg; }
.album-chapter .polaroid:nth-child(even) { --angle: 3deg; }
.album-chapter .polaroid:nth-child(3n) { --angle: -1.5deg; }
.album-chapter .polaroid, .album-chapter .polaroid-turn { min-height: 0; }
.album-chapter .polaroid-photo { height: auto; aspect-ratio: 4 / 5; }
.album-chapter .polaroid-caption { font-size: clamp(24px, 2.1vw, 30px); }
.album-chapter .back-story { font-size: clamp(18px, 1.65vw, 22px); }
.album-chapter .back-return { margin-top: auto; }

@media (max-width: 760px) {
  .album-index { padding-bottom: 18px; }
  .album-index a { padding-inline: 11px; font-size: 12px; }
  .album-chapter { padding: 18px 0 25px; }
  .chapter-heading h3 { font-size: 29px; }
  .album-chapter .polaroid-board {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
  }
  .album-chapter .back-story { font-size: clamp(19px, 5.5vw, 23px); }
  .album-chapter .polaroid-photo { aspect-ratio: 1 / 1; }
}

.clip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 12px 12px 16px;
  background: #fffdf6;
  border: 1px solid #e3d6c34d;
  box-shadow: 0 12px 24px #49312620, 0 2px 4px #49312619;
}

.clip-card video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #241c20;
}

.clip-card figcaption {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 4px 0;
  color: var(--muted);
  font: 15px/1.35 Letter, Georgia, serif;
}

.clip-card figcaption strong {
  color: var(--ink);
  font: italic clamp(24px, 2.1vw, 30px)/1.1 Letter, Georgia, serif;
}

.clip-kicker { font: 9px Arial, sans-serif; letter-spacing: 1.6px; color: #956958; }

@media (max-width: 760px) {
  .clip-card video { aspect-ratio: 1; }
}

.hero-photo img { object-position: 54% 54%; }

@media (max-width: 760px) {
  .hero-photo {
    order: -1;
    margin-top: 12px;
    aspect-ratio: 1 / 1;
  }

  .hero-photo img { object-position: 53% 51%; }
}

.polaroid-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: #fffdf6;
}

.polaroid-collage img {
  min-width: 0;
  min-height: 0;
}

.polaroid-collage img:first-child { grid-row: span 2; }

.letter-section {
  background: #f3e6d6;
  border-block: 1px solid #b47b6c45;
}

.letter-side h2 { overflow-wrap: anywhere; }

.letter-milestone {
  padding-block: 15px;
  border-block: 1px solid #b47b6c65;
  color: #925d54;
  font: italic clamp(23px, 2.5vw, 33px)/1.2 Letter, Georgia, serif;
}

.letter .signature {
  margin-bottom: 0;
  line-height: 1.25;
}

/* Sand, sea glass and rose gold. */
:root {
  --ivory: #fff3df;
  --cream: #ead6b7;
  --ink: #382822;
  --muted: #6e5449;
  --rose: #ad6a56;
  --sea-glass: #d8e6df;
  --deep-water: #315853;
}

body { background: linear-gradient(180deg, #ffeed4, var(--ivory) 52rem, #f7e5cf); }
.hero h1 { max-width: 9.5em; font-size: clamp(46px, 6.25vw, 104px); }
.hero-photo figcaption { max-width: 19ch; bottom: 34px; text-wrap: balance; }
.hero-photo::after { background: linear-gradient(180deg, transparent 49%, #29180cbf); }
.hero .text-link { border-color: var(--rose); }

.shore-note, .season {
  text-align: center;
  padding: clamp(45px, 8vw, 100px) 7%;
  background: linear-gradient(160deg, #e5ede3, var(--sea-glass) 65%, #f0e2cc);
}

.letter-quote {
  margin: 0 auto;
  max-width: 26ch;
  color: var(--deep-water);
  font: italic clamp(28px, 4.4vw, 53px)/1.14 Letter, Georgia, serif;
  text-wrap: balance;
}

.shore-note p {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
}

.shore-note p span { margin-inline: 5px; color: var(--rose); }

.quote-ready .reveal-quote {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s ease, transform .65s ease;
}
.quote-ready .reveal-quote.is-visible { opacity: 1; transform: none; }

@font-face {
  font-family: 'Pen Script';
  src: url('assets/pen-script.otf') format('opentype');
  font-display: swap;
}

.beach-letter {
  display: block;
  padding: clamp(38px, 6vw, 86px) clamp(10px, 4vw, 44px);
  background: radial-gradient(ellipse at 50% 28%, #fff7e7, #eddbc2);
}

.letter-scroll {
  position: relative;
  isolation: isolate;
  max-width: 770px;
  margin-inline: auto;
  padding: clamp(40px, 7vw, 78px) clamp(22px, 7vw, 82px);
  filter: drop-shadow(0 14px 18px #543d2c45);
}

.letter-scroll::before,
.letter-scroll::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(1% 0, 97% 0, 99% 1%, 99.1% 8%, 98.3% 11%, 99.6% 16%, 99% 24%, 100% 33%, 98.7% 39%, 99.6% 48%, 99% 57%, 100% 63%, 98.7% 73%, 99.5% 81%, 98.8% 88%, 99.6% 94%, 98% 100%, 2% 100%, 0 98%, 1.2% 92%, .2% 84%, 1.4% 79%, .4% 72%, 1.1% 62%, 0 53%, 1.3% 45%, .1% 38%, 1% 30%, 0 20%, 1.2% 13%, .2% 7%);
}

.letter-scroll::before {
  z-index: -2;
  background:
    radial-gradient(ellipse at 3% 9%, #5b3b2faa 0%, transparent 18%),
    radial-gradient(ellipse at 98% 85%, #4d423577 0%, transparent 24%),
    radial-gradient(ellipse at 15% 66%, #857b6740 0%, transparent 35%),
    radial-gradient(ellipse at 75% 46%, #fff2cead 0%, transparent 63%),
    linear-gradient(96deg, #4d3026 0%, #9a6647 1.5%, #e0bc8e 5%, #f0d7ad 14%, #f4dfb7 54%, #e7c798 89%, #b4815c 96%, #56382b 100%);
  box-shadow: inset 0 0 42px 7px #66422d9c;
}

.letter-scroll::after {
  z-index: -1;
  background: url('assets/paper-grain.svg') repeat;
  opacity: .23;
  mix-blend-mode: multiply;
}

.scroll-roll {
  position: absolute;
  z-index: 1;
  inset-inline: -3px;
  height: 17px;
  border-radius: 14px;
  background: linear-gradient(#694332, #a97152 18%, #f1c68e 45%, #c58b62 63%, #79513a 84%, #452e25);
  box-shadow: 0 4px 8px #4327195e;
}
.scroll-roll-top { top: 0; }
.scroll-roll-bottom { bottom: 0; transform: rotate(180deg); }
.letter-scroll .eyebrow { color: #745142; margin-bottom: 14px; }
.letter-scroll h2 { color: #43281f; text-wrap: balance; }
.letter-scroll .letter { color: #39291f; }
.letter-scroll .salutation { font-size: clamp(22px, 3vw, 27px); line-height: 1.25; }
.letter-scroll .letter-milestone, .letter-scroll .closing { color: #6e3c33; }
.letter-scroll .signature { font: italic 19px/1.45 Letter, Georgia, serif; }
.pen-signature {
  display: inline-block;
  margin: 12px 0 0;
  padding: 0 .13em;
  color: #30221e;
  font: clamp(55px, 9vw, 90px)/1 'Pen Script', 'Brush Script MT', cursive;
  letter-spacing: -.055em;
  transform: rotate(-6deg);
  text-shadow: 1px 1px 0 #704c3c55;
}

.beach-gallery { background: linear-gradient(180deg, #fff4e2, #f9e8d2); }
.heart-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(6px, 2vw, 24px) 0 10px;
  row-gap: clamp(1px, .65vw, 8px);
  isolation: isolate;
}
.heart-board::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8% 3% 6%;
  background: radial-gradient(ellipse at center, #e2b49b66, transparent 68%);
  pointer-events: none;
}
.heart-slot { grid-row: var(--heart-row); grid-column: var(--heart-col) / span 2; min-width: 0; padding: 0 2px; }
.heart-slot .polaroid {
  --angle: -5deg;
  display: block;
  width: 100%;
  min-height: 0;
}
.heart-slot:nth-of-type(even) .polaroid { --angle: 4deg; }
.heart-slot .polaroid-turn { min-height: 0; }
.heart-slot .polaroid-front {
  padding: clamp(2px, .5vw, 8px);
  border: 1px solid #b77b6860;
  box-shadow: 0 3px 9px #75534436;
}
.heart-slot .polaroid-photo { height: auto; aspect-ratio: 1; }
.heart-slot .polaroid-caption {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(6px, 1.1vw, 14px);
  line-height: 1.05;
  min-height: 2.1em;
  margin: 4px 0 1px;
  overflow-wrap: anywhere;
}
.heart-slot .tape, .heart-slot .polaroid-meta, .heart-slot .polaroid-back { display: none; }
.heart-quote {
  grid-area: 3 / 5 / 4 / 13;
  align-self: center;
  text-align: center;
  max-width: 20ch;
  padding-inline: clamp(2px, 1.2vw, 14px);
  color: #794b3d;
  font-size: clamp(13px, 3vw, 35px);
  line-height: 1.1;
}

.film-intro { margin-top: clamp(45px, 7vw, 90px); }
.film-intro .eyebrow { margin-bottom: 11px; }

dialog.memory-viewer {
  overflow: visible;
  max-width: min(440px, calc(100vw - 54px));
  max-height: calc(100dvh - 80px);
  width: 100%;
  padding: 0;
  background: transparent;
  color: var(--ink);
}
.memory-viewer::backdrop { background: #241812c9; }
.viewer-card .polaroid, .viewer-card .polaroid-turn {
  width: 100%;
  min-height: 0;
  transform: none;
}
.viewer-card .polaroid.is-flipped .polaroid-turn { transform: rotateY(180deg); }
.viewer-card .polaroid-face { max-height: calc(100dvh - 80px); overflow-y: auto; }
.viewer-card .polaroid-photo { height: min(290px, 42dvh); }
.viewer-card .polaroid-front, .viewer-card .polaroid-back { padding: 18px; }
.viewer-card .polaroid-caption { margin: 16px 0; }
.viewer-card .back-heading { margin: 18px 0 12px; }
.viewer-card .back-story { font-size: clamp(19px, 5vw, 23px); }
.viewer-card .back-return { margin-top: auto; }
.viewer-card .tape { display: none; }
.viewer-close {
  position: absolute;
  z-index: 6;
  top: -19px;
  right: -17px;
  width: 44px;
  height: 44px;
  border: 1px solid #bc8676;
  border-radius: 50%;
  color: #4e3027;
  background: #fff2dd;
  font-size: 25px;
  cursor: pointer;
}

.season h2 {
  margin: 30px 0 15px;
  color: #6f4639;
  font: 600 clamp(14px, 2vw, 20px)/1.4 Arial, sans-serif;
  letter-spacing: .04em;
}
.season-progress {
  position: relative;
  overflow: hidden;
  width: min(100%, 460px);
  height: 16px;
  margin-inline: auto;
  border: 1px solid #ad6a5680;
  border-radius: 999px;
  background: #ffeed9;
  box-shadow: inset 0 2px 4px #6247371a;
}
.season-progress span {
  display: block;
  width: 66%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(100deg, #ad6a56, #f0bb9e, #bd8067, #f7d4b7, #ad6a56);
  background-size: 240% 100%;
  transform-origin: left center;
  animation: season-render 3.8s ease-in-out infinite;
}
@keyframes season-render {
  0% { transform: scaleX(.3); background-position: 0 50%; }
  72%, 100% { transform: scaleX(1.5); background-position: 100% 50%; }
}

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(46px, 13vw, 76px); }
  .hero-photo figcaption { bottom: 19px; }
  .beach-gallery { padding-inline: 10px; }
  .beach-gallery > :not(.heart-board) { margin-inline: 3%; }
  .heart-board { padding-inline: 2px; }
  .heart-slot { padding-inline: 1px; }
  .heart-slot .polaroid-caption { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-ready .reveal-quote { opacity: 1; transform: none; }
  .season-progress span { animation: none; }
}

.shore-note, .season {
  background-image: url('assets/shoreline.svg'), linear-gradient(160deg, #e9eee2, #d8e6df 65%, #f0e2cc);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 95px, cover;
}