/* ═══════════ Derrick & Miesha — announcement ═══════════
   Palette drawn from the reveal film: ivory satin, gold foil,
   champagne shadow, petal pink & lilac used only as whispers. */

:root {
  --ivory: #f6f2e9;
  --ivory-deep: #ece5d6;
  --champagne: #d8cdb4;
  --gold: #b8923e;
  --gold-bright: #d4af5e;
  --gold-pale: #e9d9ae;
  --ink: #3a3222;
  --ink-soft: #6b5f45;
  --petal: #c76fae;
  --lilac: #a77fc9;
  --paper: #fffdf7;
  --shadow: 42, 34, 18;
  /* fine paper grain, used on several surfaces */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* satin sheen from the blessing-board photograph, veiled in ivory,
   with a whisper of paper grain over everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    var(--grain),
    linear-gradient(rgba(246,242,233,.86) 0%, rgba(246,242,233,.8) 40%, rgba(240,233,218,.84) 100%),
    url('/assets/satin.jpg');
  background-size: 240px 240px, cover, cover;
  background-position: center;
}

img, video { display: block; max-width: 100%; }

/* ─────────── hero ─────────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 480px;
  background: #0d0c09;
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
  transition: opacity .8s ease;
}

.hero-overlay.gone { opacity: 0; pointer-events: none; }

/* positioned by JS directly over the pill baked into the film */
.reveal-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fffdf4;
  background: linear-gradient(160deg, rgb(196,158,72), rgb(140,105,36));
  border: 1px solid rgba(233,217,174,.95);
  box-shadow:
    0 0 0 4px rgba(184,146,62,.22),
    0 14px 34px rgba(13,12,9,.5),
    inset 0 1px 0 rgba(255,255,255,.5);
  border-radius: 999px;
  cursor: pointer;
  animation: breathe 3.2s ease-in-out infinite;
}

.reveal-btn:hover { filter: brightness(1.08); }

@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.04); }
}

.hero-after {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 18px;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease .4s;
  background: linear-gradient(to top, rgba(13,12,9,.35), transparent 22%);
}

.hero-after.shown { opacity: 1; pointer-events: auto; }

.replay-btn {
  position: absolute;
  top: 18px; right: 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: .14em;
  color: rgba(255,253,244,.85);
  background: rgba(13,12,9,.35);
  border: 1px solid rgba(233,217,174,.5);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.replay-btn:hover { background: rgba(13,12,9,.55); }

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: rgba(255,253,244,.9);
}
.scroll-cue-text {
  font-size: 16px;
  font-style: italic;
  letter-spacing: .08em;
  text-shadow: 0 2px 10px rgba(13,12,9,.7);
}
.scroll-cue-chevron {
  font-size: 30px;
  line-height: .6;
  animation: drift 2.2s ease-in-out infinite;
  text-shadow: 0 2px 10px rgba(13,12,9,.7);
}
@keyframes drift {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(7px); opacity: .5; }
}

/* ─────────── section headings ─────────── */
section { padding: clamp(64px, 10vh, 110px) 20px; }

.section-heading {
  text-align: center;
  margin-bottom: clamp(36px, 6vh, 56px);
}

/* gold ornament: tapering rules meeting a diamond, dots at the tips */
.heading-flourish {
  display: block;
  width: 190px;
  height: 22px;
  margin: 0 auto 12px;
  color: transparent;
  overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 22'%3E%3Cg fill='none' stroke='%23b8923e' stroke-width='1.1'%3E%3Cpath d='M4 11 Q40 8 74 11'/%3E%3Cpath d='M116 11 Q150 14 186 11'/%3E%3C/g%3E%3Cpath d='M95 3.5 l6.5 7.5 -6.5 7.5 -6.5 -7.5 z' fill='none' stroke='%23b8923e' stroke-width='1.2'/%3E%3Cpath d='M95 7 l3.5 4 -3.5 4 -3.5 -4 z' fill='%23b8923e'/%3E%3Ccircle cx='80' cy='11' r='1.7' fill='%23b8923e'/%3E%3Ccircle cx='110' cy='11' r='1.7' fill='%23b8923e'/%3E%3Ccircle cx='4' cy='11' r='1.4' fill='%23b8923e'/%3E%3Ccircle cx='186' cy='11' r='1.4' fill='%23b8923e'/%3E%3C/svg%3E") center / contain no-repeat;
}

.section-heading h2 {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(42px, 7vw, 64px);
  color: var(--ink);
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.heading-sub {
  color: var(--ink-soft);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 20px);
  margin-top: 6px;
}

/* ─────────── letter on aged parchment ─────────── */
.letter-section { max-width: 880px; margin: 0 auto; }

.letter-paper {
  position: relative;
  isolation: isolate;
  padding: clamp(34px, 7vw, 84px) clamp(26px, 7vw, 78px);
  transform: rotate(-.4deg);
}

/* the parchment: a real aged-paper scan (19th-century book stock, public
   domain) under soft stains and vignette — with deckled (displaced) edges */
.letter-paper::before {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  background-color: #efe2c2;
  background-image:
    radial-gradient(48% 34% at 12% 90%, rgba(158,122,60,.14), transparent 70%),
    radial-gradient(34% 26% at 90% 8%, rgba(158,122,60,.12), transparent 70%),
    radial-gradient(115% 115% at 50% 50%, transparent 64%, rgba(122,92,40,.24) 100%),
    url('/assets/parchment.jpg');
  background-size: 100% 100%, 100% 100%, 100% 100%, cover;
  background-position: center;
  filter: url(#deckle) drop-shadow(0 3px 5px rgba(var(--shadow), .18)) drop-shadow(0 26px 48px rgba(var(--shadow), .3));
}

.letter-inner {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.75;
  color: #3b2b16;
}

.letter-inner p { margin-bottom: 1.2em; }

/* "Our / Forever / Begins" — stacked, stepped script opening */
.letter-opening {
  font-family: 'Great Vibes', cursive;
  color: #8a6a28;
  line-height: 1.04;
  margin-bottom: .7em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.letter-opening span {
  display: block;
  font-size: clamp(34px, 5.6vw, 52px);
}
.letter-opening span:nth-child(2) { padding-left: 1.2em; font-size: clamp(40px, 6.6vw, 62px); }
.letter-opening span:nth-child(3) { padding-left: 2.6em; }

/* the vow block: date, small caps, grand script */
.letter-vow {
  text-align: center;
  margin: 1.6em 0 1.5em;
}
.vow-date {
  font-size: clamp(15px, 1.9vw, 18px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #8a6a28;
  margin-bottom: .5em !important;
}
.vow-caps {
  font-size: clamp(13px, 1.7vw, 16px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #7d6a45;
  margin-bottom: .25em !important;
}
.vow-script {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(38px, 6.4vw, 58px);
  color: #43331d;
  line-height: 1.2;
  margin-bottom: 0 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* illuminated drop capital */
.letter-drop::first-letter {
  font-family: 'IM Fell English', serif;
  float: left;
  font-size: 3.35em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: #8a6a28;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 2px 3px rgba(var(--shadow), .25);
}

.letter-inner strong {
  font-weight: 400;
  color: #8a6a28;
  letter-spacing: .04em;
}

.letter-em {
  font-style: italic;
  color: #6d5322;
}

.letter-rule {
  width: 180px;
  height: 12px;
  margin: 2em auto 1.6em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12'%3E%3Cpath d='M4 6 Q46 2 88 6 T176 6' fill='none' stroke='%23a07f38' stroke-width='1'/%3E%3Ccircle cx='90' cy='6' r='2' fill='%23a07f38'/%3E%3C/svg%3E") center / contain no-repeat;
}

.letter-closing {
  font-style: italic;
  margin-bottom: .1em !important;
}

.letter-signature {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(36px, 5.8vw, 50px);
  color: #43331d;
  margin-bottom: .15em !important;
  line-height: 1.3;
}

.letter-surname {
  font-size: clamp(16px, 2vw, 19px);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: #7d6a45;
  margin-bottom: 1.4em !important;
}

.letter-tail {
  font-style: italic;
  font-size: clamp(16px, 2vw, 19px);
  color: #6d5322;
  margin-bottom: 0 !important;
}
.letter-tail em {
  font-family: 'Great Vibes', cursive;
  font-style: normal;
  font-size: 1.5em;
  color: #8a6a28;
  padding-left: .15em;
}

/* the actual wax seal from the film, lifted from the envelope */
.letter-seal {
  width: 96px;
  height: 96px;
  margin: 24px 10px 0 auto;
  background: url('/assets/seal.png') center / contain no-repeat;
  filter: drop-shadow(0 5px 9px rgba(var(--shadow), .38));
  transform: rotate(-7deg);
}

.letter-seal span { display: none; }

/* ─────────── blessing board ─────────── */
.board-section { max-width: 1080px; margin: 0 auto; }

/* the gold pearl pin (SVG injected from the template) */
.note-pin {
  position: absolute !important;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.note-pin svg { width: 100%; height: auto; display: block; }

.form-pin { top: -30px; width: 46px; }
.modal-pin { top: -30px; width: 46px; }

/* the torn-paper form */
.note-form-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(44px, 7vh, 72px);
}

.note-form {
  position: relative;
  isolation: isolate;
  width: min(430px, 92vw);
  padding: 34px 30px 20px;
  transform: rotate(-1.1deg);
}

/* genuinely torn edges: the sheet lives on a displaced layer */
.note-form::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  background-color: #fffef8;
  background-image:
    var(--grain),
    radial-gradient(90% 70% at 50% 8%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(100% 100% at 50% 100%, rgba(214,198,160,.28), transparent 55%),
    repeating-linear-gradient(transparent, transparent 33px, rgba(163,132,72,.20) 33px, rgba(163,132,72,.20) 34px);
  background-size: 240px 240px, 100% 100%, 100% 100%, 100% 100%;
  filter: url(#torn-note) drop-shadow(0 2px 3px rgba(var(--shadow), .16)) drop-shadow(0 18px 28px rgba(var(--shadow), .3));
}

.note-form > * { position: relative; }

.note-label {
  display: block;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 14px 2px 2px;
}

.note-input, .note-textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(163,132,72,.45);
  background: transparent;
  font-family: 'Caveat', cursive;
  font-size: 24px;
  color: #4a4028;
  padding: 4px 2px;
  outline: none;
  resize: none;
}

.note-input:focus, .note-textarea:focus { border-bottom-color: var(--gold); }
.note-input::placeholder, .note-textarea::placeholder { color: rgba(107,95,69,.5); }

.note-textarea { line-height: 34px; }

.note-form-foot {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pin-btn {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fffdf4;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  border: 1px solid var(--gold-pale);
  border-radius: 999px;
  padding: 11px 26px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(184,146,62,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.pin-btn:hover { filter: brightness(1.07); }
.pin-btn:disabled { opacity: .55; cursor: wait; }

.form-status {
  min-height: 24px;
  margin-top: 8px;
  font-style: italic;
  font-size: 16px;
  color: var(--gold);
  text-align: center;
}
.form-status.error { color: #a04545; }

/* the board */
.board-wrap { position: relative; }

.board {
  position: relative;
  container-type: inline-size;
  filter: drop-shadow(0 30px 50px rgba(var(--shadow), .25));
}

.board-img {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.board-notes { position: absolute; inset: 0; }

.board-note {
  position: absolute;
  width: 13%;
  aspect-ratio: 1 / 0.94;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  padding: 1% 1.2%;
  cursor: pointer;
  transition: transform .25s ease;
  overflow: visible;
  isolation: isolate;
}

/* torn paper lives on its own layer so the pearl pin isn't clipped */
.board-note::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #fffef8;
  background-image:
    var(--grain),
    radial-gradient(100% 80% at 50% 0%, rgba(255,255,255,.7), transparent 55%);
  background-size: 240px 240px, 100% 100%;
  clip-path: polygon(
    2% 4%, 10% 1%, 21% 3.5%, 33% 1.2%, 46% 3.2%, 59% 1%, 71% 3%, 84% 1.2%,
    96% 3.6%, 99% 11%, 97.4% 24%, 99.2% 38%, 97.6% 53%, 99% 68%, 97.5% 82%,
    98.6% 93%, 91% 98.8%, 79% 96.8%, 66% 99%, 52% 97%, 38% 99.2%, 25% 97.2%,
    12% 99%, 4% 97%, 1% 90%, 2.6% 77%, 0.8% 63%, 2.4% 48%, 0.9% 34%, 2.5% 20%, 1% 10%
  );
  filter: drop-shadow(0 1cqw 1.6cqw rgba(var(--shadow), .35));
}

.board-note:hover { transform: scale(1.06) rotate(0.5deg) !important; z-index: 3; }

.board-note .note-pin {
  top: -14%;
  width: 24%;
}

.board-note-msg {
  font-family: 'Caveat', cursive;
  font-size: clamp(9px, 1.45cqw, 22px);
  line-height: 1.22;
  color: #4a4028;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  margin-top: 12%;
  flex: 1;
}

.board-note-name {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: clamp(8px, 1.3cqw, 19px);
  color: var(--gold);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4%;
  margin-top: auto;
  flex-shrink: 0;
}

.board-note.fresh { animation: pinDrop .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pinDrop {
  0% { transform: scale(1.6) translateY(-30%); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.board-empty {
  position: absolute;
  top: 49%; left: 58%;
  transform: translate(-50%, -50%) rotate(-10deg);
  font-family: 'Caveat', cursive;
  font-size: clamp(16px, 2.6cqw, 30px);
  color: rgba(107, 95, 69, .75);
  text-align: center;
  width: 60%;
}

.board-nav[hidden] { display: none; }

.board-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}

.board-nav-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--paper);
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(var(--shadow), .15);
}
.board-nav-btn:hover:not(:disabled) { background: var(--gold-pale); }
.board-nav-btn:disabled { opacity: .35; cursor: default; }

.board-nav-label {
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--ink-soft);
}

.board-count {
  text-align: center;
  margin-top: 14px;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 17px;
}

/* ─────────── keepsake ─────────── */
.keepsake-section { max-width: 900px; margin: 0 auto; }

.keepsake-card { text-align: center; }

.keepsake-frame {
  position: relative;
  display: inline-block;
  background:
    var(--grain),
    linear-gradient(150deg, #fffdf6, #f4ecd9);
  background-size: 240px 240px, 100% 100%;
  padding: clamp(12px, 2.2vw, 20px);
  border: 1px solid var(--gold-pale);
  outline: 1px solid rgba(184,146,62,.55);
  outline-offset: 6px;
  box-shadow: 0 30px 60px -18px rgba(var(--shadow), .38);
}

.keepsake-frame .corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
}
.keepsake-frame .c1 { top: -12px; left: -12px; border-top-width: 2px; border-left-width: 2px; }
.keepsake-frame .c2 { top: -12px; right: -12px; border-top-width: 2px; border-right-width: 2px; }
.keepsake-frame .c3 { bottom: -12px; left: -12px; border-bottom-width: 2px; border-left-width: 2px; }
.keepsake-frame .c4 { bottom: -12px; right: -12px; border-bottom-width: 2px; border-right-width: 2px; }

.keepsake-frame img { max-width: 100%; }

.keepsake-actions {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.keepsake-btn {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 13px 28px;
  background: var(--paper);
  box-shadow: 0 6px 16px rgba(var(--shadow), .12);
  transition: all .2s ease;
}

.keepsake-btn.primary {
  color: #fffdf4;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-pale);
  box-shadow: 0 8px 20px rgba(184,146,62,.35), inset 0 1px 0 rgba(255,255,255,.4);
}

.keepsake-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ─────────── footer ─────────── */
.site-foot {
  text-align: center;
  padding: 52px 20px 64px;
  border-top: 1px solid rgba(184,146,62,.28);
  margin-top: 30px;
}

.foot-monogram {
  font-family: 'Great Vibes', cursive;
  font-size: 40px;
  color: var(--gold);
  line-height: 1;
}

.foot-amp { font-size: 22px; vertical-align: middle; color: var(--petal); opacity: .8; }

.foot-line {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ─────────── note modal ─────────── */
.note-modal {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: min(480px, 92vw);
  overflow: visible;
}

.note-modal::backdrop {
  background: rgba(42, 34, 18, .55);
  backdrop-filter: blur(3px);
}

.note-modal-paper {
  position: relative;
  isolation: isolate;
  padding: 56px 38px 34px;
}

.note-modal-paper::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  background-color: #fffef8;
  background-image:
    var(--grain),
    radial-gradient(90% 70% at 50% 8%, rgba(255,255,255,.8), transparent 60%),
    repeating-linear-gradient(transparent, transparent 35px, rgba(163,132,72,.18) 35px, rgba(163,132,72,.18) 36px);
  background-size: 240px 240px, 100% 100%, 100% 100%;
  filter: url(#torn-note) drop-shadow(0 24px 40px rgba(var(--shadow), .45));
}

.note-modal-message {
  font-family: 'Caveat', cursive;
  font-size: 27px;
  line-height: 36px;
  color: #4a4028;
  overflow-wrap: break-word;
}

.note-modal-name {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 24px;
  color: var(--gold);
  text-align: right;
  margin-top: 16px;
}

.note-modal-close {
  display: block;
  margin: 26px auto 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 1px solid rgba(184,146,62,.45);
  border-radius: 999px;
  padding: 8px 24px;
  cursor: pointer;
}
.note-modal-close:hover { background: var(--gold-pale); }

/* ─────────── responsive ─────────── */
@media (max-width: 640px) {
  body { font-size: 17px; }

  .board-note { width: 16%; }
  .board-note .note-pin { width: 28%; top: -16%; }

  .keepsake-actions { flex-direction: column; align-items: center; }
  .keepsake-btn { width: min(340px, 88vw); text-align: center; }

  .replay-btn { top: 12px; right: 12px; font-size: 13px; }

  .pin-btn { font-size: 14px; letter-spacing: .12em; padding: 9px 16px; }

  .letter-seal { margin-right: 0; width: 78px; height: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-btn, .scroll-cue-chevron, .board-note.fresh { animation: none; }
  html { scroll-behavior: auto; }
}