:root {
  --paper: #f4ead7;
  --paper-deep: #ead9bb;
  --ink: #4a2d1f;
  --gold: #aa7b36;
  --olive: #6d6b3f;
  --sienna: #a65d37;
  --shadow: rgba(47, 26, 17, .30);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 25%, rgba(242, 205, 145, .30), transparent 36%),
    linear-gradient(145deg, #2d1b15, #5a3828 55%, #241510);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,.32) 100%);
  mix-blend-mode: soft-light;
}

button, a { -webkit-tap-highlight-color: transparent; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.leaf {
  position: absolute;
  top: -12vh;
  font-size: clamp(22px, 4vw, 40px);
  opacity: .45;
  animation: drift 12s linear infinite;
  filter: blur(.2px);
}
.leaf-1 { left: 8%; animation-delay: -2s; }
.leaf-2 { left: 30%; animation-delay: -7s; animation-duration: 15s; }
.leaf-3 { left: 72%; animation-delay: -4s; animation-duration: 13s; }
.leaf-4 { left: 90%; animation-delay: -10s; animation-duration: 17s; }

@keyframes drift {
  0% { transform: translate3d(0,-10vh,0) rotate(0deg); }
  35% { transform: translate3d(35px,38vh,0) rotate(110deg); }
  70% { transform: translate3d(-25px,78vh,0) rotate(240deg); }
  100% { transform: translate3d(20px,118vh,0) rotate(380deg); }
}

.sound-toggle {
  position: fixed;
  z-index: 30;
  right: max(16px, env(safe-area-inset-right));
  top: max(16px, env(safe-area-inset-top));
  width: 42px;
  height: 42px;
  border: 1px solid rgba(244,234,215,.6);
  color: var(--paper);
  background: rgba(56,32,23,.65);
  border-radius: 50%;
  font: 600 20px/1 Georgia, serif;
  backdrop-filter: blur(8px);
}
.sound-toggle.muted { opacity: .55; }

.welcome {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  color: var(--paper);
  background:
    radial-gradient(circle at center, rgba(176,112,56,.22), transparent 42%),
    rgba(24,13,10,.72);
  transition: opacity 1s ease, visibility 1s ease;
}
.welcome.hidden { opacity: 0; visibility: hidden; }

.bookplate {
  width: 152px;
  height: 94px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid rgba(209,166,95,.75);
  outline: 1px solid rgba(209,166,95,.35);
  outline-offset: 5px;
  border-radius: 50%;
  color: #d5ad65;
  font: 500 38px/1 "Cormorant Garamond", serif;
  letter-spacing: .08em;
}
.bookplate b { font-size: 19px; font-weight: 400; }

.welcome h1 {
  margin: 0;
  font: 400 clamp(46px, 8vw, 74px)/1.05 "Great Vibes", cursive;
  color: #f6ead6;
}
.welcome p {
  margin: 0 auto 12px;
  max-width: 500px;
  font-size: clamp(18px, 3vw, 23px);
  font-style: italic;
}
.enter-btn {
  justify-self: center;
  margin-top: 10px;
  padding: 12px 22px;
  color: var(--paper);
  border: 1px solid rgba(244,234,215,.65);
  border-radius: 999px;
  background: rgba(105,62,38,.55);
  font: 500 17px "Cormorant Garamond", serif;
  letter-spacing: .05em;
}

.experience {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 74px 18px 28px;
  opacity: 0;
  transform: scale(.985);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.experience.visible { opacity: 1; transform: scale(1); }

.stage {
  width: min(92vw, 520px);
  perspective: 1800px;
}
.book {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.15;
  transform-style: preserve-3d;
}
.page {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 24px 58px var(--shadow);
}
.page-front {
  z-index: 3;
  padding: 0;
  background: var(--paper);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.25s cubic-bezier(.3,.02,.14,1), box-shadow .5s ease;
  cursor: pointer;
}
.page-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.16), transparent 10%, transparent 86%, rgba(255,255,255,.18));
  opacity: .35;
  pointer-events: none;
}
.page-front.flipped {
  transform: rotateY(-178deg);
  box-shadow: -18px 20px 44px rgba(20,10,7,.25);
}
.page-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.turn-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  color: #fff8ea;
  background: rgba(54,30,20,.72);
  font: italic 16px "EB Garamond", serif;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .62; transform: translateX(-50%) translateY(-2px); } }

.page-back {
  z-index: 1;
  background:
    linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)),
    radial-gradient(circle at 50% 20%, #fbf2df, #edddc0 68%, #e4cda7);
  border: 1px solid rgba(96,55,31,.3);
}
.rsvp-card {
  height: 100%;
  padding: 7% 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background:
    linear-gradient(90deg, transparent 0 3%, rgba(128,78,43,.18) 3% 3.5%, transparent 3.5% 96.5%, rgba(128,78,43,.18) 96.5% 97%, transparent 97%),
    linear-gradient(transparent 0 3%, rgba(128,78,43,.18) 3% 3.5%, transparent 3.5% 96.5%, rgba(128,78,43,.18) 96.5% 97%, transparent 97%);
}
.mini-bookplate, .story-bookplate { color: var(--gold); letter-spacing: .18em; font-weight: 600; }
.eyebrow { margin: 5% 0 1%; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(11px,2.4vw,14px); }
.rsvp-card h2 {
  margin: 2% 0 0;
  font: 400 clamp(42px, 10vw, 66px)/.95 "Great Vibes", cursive;
  color: var(--ink);
}
.deadline { margin: 0 0 1%; font: 600 clamp(20px,4.6vw,28px) "Cormorant Garamond", serif; }
.ornament { color: var(--gold); font-size: 24px; }
.rsvp-card p { margin: 2% 0; font-size: clamp(15px,3.2vw,19px); }
.rsvp-button {
  display: inline-block;
  margin: 3% 0 2%;
  padding: 10px 30px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff9ed;
  background: var(--ink);
  font: 600 17px "Cormorant Garamond", serif;
  letter-spacing: .12em;
}
.qr { width: min(33%, 150px); border-radius: 3px; mix-blend-mode: multiply; }
.scan { font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; }
.wax-seal {
  position: absolute;
  right: 6%;
  bottom: 5%;
  width: clamp(48px, 12vw, 66px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  color: #e9c98d;
  background:
    radial-gradient(circle at 35% 25%, #9d6844, #68402d 65%, #4f2f22);
  box-shadow: inset 0 0 0 3px rgba(226,183,111,.25), 0 8px 16px rgba(63,36,24,.28);
  font: 600 14px "Cormorant Garamond", serif;
}

.story-dialog {
  width: min(92vw, 700px);
  max-height: 90svh;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
.story-dialog::backdrop { background: rgba(25,14,10,.78); backdrop-filter: blur(5px); }
.story-dialog article {
  position: relative;
  padding: clamp(30px,6vw,64px);
  text-align: center;
  background:
    linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(110,70,35,.025) 3px 4px);
}
.close-story {
  position: absolute; top: 12px; right: 14px;
  border: 0; background: transparent; color: var(--ink);
  font-size: 32px; line-height: 1;
}
.chapter-label {
  margin: 16px 0 2px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--gold);
  font-weight: 600;
}
.story-dialog h2 {
  margin: 0 auto 24px;
  max-width: 520px;
  font: 500 clamp(28px,5vw,42px)/1.05 "Cormorant Garamond", serif;
}
.story-photo {
  width: min(100%, 470px);
  margin: 0 auto 28px;
  padding: 10px 10px 28px;
  background: #f6ecd9;
  border: 1px solid rgba(74,45,31,.18);
  box-shadow: 0 16px 32px rgba(74,45,31,.16);
  transform: rotate(-1deg);
}
.story-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(.92) contrast(.98) sepia(.06);
}
.story-copy {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
  font-size: 18px;
  line-height: 1.62;
}
.story-copy p:first-child::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  color: var(--gold);
  font: 600 3.9em/.78 "Cormorant Garamond", serif;
}
.story-moments {
  max-width: 560px;
  margin: 30px auto 12px;
  padding: 16px 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid rgba(74,45,31,.20);
  border-bottom: 1px solid rgba(74,45,31,.20);
}
.story-moments div {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: baseline;
  gap: 12px;
  text-align: left;
}
.story-moments span {
  color: var(--gold);
  font: 600 14px "Cormorant Garamond", serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.story-moments strong {
  font: 500 18px "EB Garamond", serif;
}
.continued { margin: 30px 0 4px; font: 400 38px "Great Vibes", cursive; }
.gratitude { font-style: italic; color: rgba(74,45,31,.75); }

@media (max-width: 420px) {
  .experience { padding-inline: 10px; }
  .rsvp-card { padding-inline: 7%; }
  .qr { width: 31%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* Version 0.7 cinematic polish */
.desk-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;filter:blur(1.8px);opacity:.42;z-index:0}
.desk-scene:before{content:"";position:absolute;inset:-10%;background:repeating-linear-gradient(4deg,rgba(255,255,255,.018) 0 2px,rgba(63,29,16,.025) 2px 6px),linear-gradient(90deg,rgba(255,255,255,.02),transparent 45%,rgba(0,0,0,.08));transform:rotate(-1deg) scale(1.08)}
.envelope{position:absolute;width:min(38vw,430px);aspect-ratio:1.55;left:-6vw;bottom:4vh;border-radius:4px;background:linear-gradient(145deg,rgba(241,224,193,.88),rgba(205,177,134,.72));box-shadow:0 26px 50px rgba(12,7,5,.34);transform:rotate(-12deg)}
.envelope:before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,50% 58%,100% 0);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(131,89,51,.12))}
.fountain-pen{position:absolute;width:min(44vw,500px);height:18px;right:-7vw;top:18vh;border-radius:999px;background:linear-gradient(90deg,#20130f 0 66%,#b28a4a 66% 72%,#2b1913 72% 100%);box-shadow:0 10px 28px rgba(0,0,0,.35);transform:rotate(-24deg)}
.fountain-pen:after{content:"";position:absolute;left:-24px;top:-4px;width:30px;height:26px;clip-path:polygon(100% 50%,0 0,0 100%);background:linear-gradient(90deg,#c6a15f,#7d5b2e)}
.pressed-leaf{position:absolute;font-size:clamp(48px,7vw,92px);opacity:.55;filter:saturate(.72) sepia(.25)}
.pressed-leaf-a{left:8vw;top:9vh;transform:rotate(-18deg)} .pressed-leaf-b{right:7vw;bottom:8vh;transform:rotate(20deg)}

.bookplate.embossed{position:relative;color:#d6b26d;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.08),transparent 42%),rgba(72,40,28,.22);border-color:rgba(214,178,109,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -3px 8px rgba(43,22,14,.38),0 10px 24px rgba(0,0,0,.24);text-shadow:0 1px 0 rgba(255,242,206,.35),0 -1px 0 rgba(58,30,18,.9),0 0 10px rgba(206,158,82,.22)}
.bookplate.embossed:before{content:"";position:absolute;inset:8px;border:1px solid rgba(214,178,109,.26);border-radius:inherit}

.page-front{overflow:visible}
.page-front:before{content:"";position:absolute;z-index:4;right:-1px;bottom:-1px;width:0;height:0;clip-path:polygon(100% 0,0 100%,100% 100%);filter:drop-shadow(-6px -6px 8px rgba(39,22,15,.26));transition:.38s ease}
.page-front:not(.flipped):hover:before,.page-front:not(.flipped).curl-ready:before{width:84px;height:84px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(224,203,164,.98));border-bottom-right-radius:5px;transform:translate(-2px,-2px)}
.page-front:not(.flipped):hover{transform:rotateY(-5deg) rotateZ(-.15deg);box-shadow:0 30px 70px rgba(31,16,10,.36)}

.story-dialog[open] .reveal{opacity:0;transform:translateY(14px);animation:storyReveal .8s ease forwards}
.story-dialog[open] .reveal-1{animation-delay:.12s}
.story-dialog[open] .reveal-2{animation-delay:.45s}
.story-dialog[open] .reveal-3{animation-delay:.9s}
.story-dialog[open] .reveal-4{animation-delay:1.28s}
.story-dialog[open] .reveal-5{animation-delay:1.7s}
.story-dialog[open] .reveal-6{animation-delay:2.2s}
.story-dialog[open] .reveal-7{animation-delay:3.05s}
@keyframes storyReveal{to{opacity:1;transform:translateY(0)}}
@media(hover:none){.page-front:not(.flipped):before{width:74px;height:74px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(224,203,164,.98));animation:curlBreathe 2.8s ease-in-out infinite}}
@keyframes curlBreathe{50%{transform:translate(-5px,-5px) scale(1.05);filter:drop-shadow(-8px -8px 11px rgba(39,22,15,.30))}}


/* Version 0.8 three-page structure */
.book.three-page { position: relative; }
.page-story-preview {
  z-index: 1;
  background:
    linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)),
    radial-gradient(circle at 50% 20%, #fbf2df, #ead7b6 68%, #e0c79a);
  border: 1px solid rgba(96,55,31,.3);
}
.story-preview-card{
  height:100%;
  padding:10% 9%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    linear-gradient(90deg, transparent 0 3%, rgba(128,78,43,.18) 3% 3.5%, transparent 3.5% 96.5%, rgba(128,78,43,.18) 96.5% 97%, transparent 97%),
    linear-gradient(transparent 0 3%, rgba(128,78,43,.18) 3% 3.5%, transparent 3.5% 96.5%, rgba(128,78,43,.18) 96.5% 97%, transparent 97%);
}
.story-preview-label{
  margin: 8% 0 0;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(12px,2.5vw,14px);
}
.story-preview-card h2{
  margin: 2% 0 1%;
  font: 400 clamp(48px, 11vw, 72px)/.95 "Great Vibes", cursive;
  color: var(--ink);
}
.story-preview-copy{
  max-width: 310px;
  margin: 2% auto 8%;
  font-size: clamp(16px, 3.2vw, 20px);
  line-height: 1.45;
}
.story-page-seal{
  width: clamp(82px, 18vw, 110px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  color: #e9c98d;
  background:
    radial-gradient(circle at 35% 25%, #9d6844, #68402d 65%, #4f2f22);
  box-shadow: inset 0 0 0 4px rgba(226,183,111,.25), 0 10px 20px rgba(63,36,24,.28);
  font: 600 24px "Cormorant Garamond", serif;
}
.open-chapter{
  margin-top: 16px;
  font: italic 18px "EB Garamond", serif;
  letter-spacing: .03em;
}

.page-middle {
  z-index: 2;
  background:
    linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)),
    radial-gradient(circle at 50% 20%, #fbf2df, #edddc0 68%, #e4cda7);
  border: 1px solid rgba(96,55,31,.3);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.25s cubic-bezier(.3,.02,.14,1), box-shadow .5s ease;
  cursor: pointer;
}
.page-middle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.16), transparent 10%, transparent 86%, rgba(255,255,255,.18));
  opacity: .35;
  pointer-events: none;
}
.page-middle.flipped {
  transform: rotateY(-178deg);
  box-shadow: -18px 20px 44px rgba(20,10,7,.25);
}
.page-middle:not(.flipped):hover {
  transform: rotateY(-5deg) rotateZ(-.15deg);
  box-shadow: 0 30px 70px rgba(31,16,10,.36);
}
.page-middle::before{
  content:"";
  position:absolute;
  z-index:4;
  right:-1px;
  bottom:-1px;
  width:0;
  height:0;
  clip-path:polygon(100% 0,0 100%,100% 100%);
  filter:drop-shadow(-6px -6px 8px rgba(39,22,15,.26));
  transition:.38s ease;
}
.page-middle:not(.flipped):hover::before,
.page-middle:not(.flipped).curl-ready::before{
  width:84px;
  height:84px;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(224,203,164,.98));
  border-bottom-right-radius:5px;
  transform:translate(-2px,-2px);
}
.page-middle.flipped::before{ opacity:0; }

.turn-hint-story{
  bottom: 14px;
}

@media(hover:none){
  .page-middle:not(.flipped)::before{
    width:74px;
    height:74px;
    background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(224,203,164,.98));
    animation:curlBreathe 2.8s ease-in-out infinite;
  }
}


/* Version 0.9 — iPhone Safari RSVP typography fix */
.page-middle,
.page-middle button,
.page-middle a,
.page-middle p,
.page-middle span,
.page-middle h2 {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.page-middle {
  font-family: "EB Garamond", Georgia, serif;
  -webkit-appearance: none;
  appearance: none;
}
.page-middle .eyebrow,
.page-middle .scan,
.page-middle .deadline {
  font-family: "Cormorant Garamond", Georgia, serif;
}
.page-middle .rsvp-button {
  color: #fff9ed !important;
  -webkit-text-fill-color: #fff9ed !important;
}
.page-middle a {
  text-decoration: none;
}


/* Version 1.0 — stronger next-page prompt visibility */
.turn-hint-story {
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  text-shadow: 0 1px 2px rgba(32, 17, 11, 0.35);
  font-weight: 500;
  letter-spacing: .01em;
  background: rgba(74, 45, 31, 0.92) !important;
  border: 1px solid rgba(255, 250, 240, 0.18);
  box-shadow: 0 6px 18px rgba(32, 17, 11, 0.18);
  opacity: 1 !important;
}
.page-middle .turn-hint-story,
.page-middle .turn-hint-story * {
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
}


/* Version 1.1 — realistic wax seal on the story page */
.story-page-seal.realistic-seal {
  width: clamp(118px, 25vw, 170px);
  aspect-ratio: 1;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: transform .22s ease, filter .22s ease;
}
.story-page-seal.realistic-seal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(60, 34, 23, 0.24));
  border-radius: 50%;
}
.story-page-seal.realistic-seal:hover,
.story-page-seal.realistic-seal:focus-visible {
  transform: translateY(-2px) scale(1.03);
}
.story-page-seal.realistic-seal:hover img,
.story-page-seal.realistic-seal:focus-visible img {
  filter: drop-shadow(0 14px 22px rgba(60, 34, 23, 0.28));
}
.open-chapter {
  margin-top: 14px;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}


/* Version 1.2 — integrated invitation-style wax seal */
.story-page-seal.invitation-seal{
  position: relative;
  width: clamp(98px, 22vw, 128px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 48% 52% 49% 51% / 50% 47% 53% 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,245,223,.58), transparent 18%),
    radial-gradient(circle at 50% 44%, #d6ba8e 0%, #b59466 48%, #9a774d 76%, #8b6943 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,248,233,.38),
    inset 0 -4px 8px rgba(101,71,42,.34),
    0 7px 16px rgba(63,36,24,.18);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  overflow: visible;
}
.story-page-seal.invitation-seal::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.7px solid rgba(132,98,56,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,247,230,.32),
    0 0 0 1px rgba(238,220,187,.18);
}
.story-page-seal.invitation-seal::after{
  content:"";
  position:absolute;
  inset: 17px;
  border-radius: 50%;
  border: 1px solid rgba(120,86,49,.28);
}
.story-page-seal.invitation-seal:hover,
.story-page-seal.invitation-seal:focus-visible{
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    inset 0 2px 2px rgba(255,248,233,.42),
    inset 0 -4px 9px rgba(101,71,42,.36),
    0 10px 22px rgba(63,36,24,.22);
  filter: saturate(1.03);
}
.seal-initials{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding-top: 2px;
  color: #7b5833;
  font: 500 clamp(28px, 5.4vw, 36px)/1 "Cormorant Garamond", serif;
  letter-spacing: .01em;
  text-shadow:
    0 1px 0 rgba(248,236,208,.42),
    0 -1px 0 rgba(117,83,46,.24);
  z-index: 1;
}
.seal-initials em{
  font-style: italic;
  font-size: .92em;
  margin: 0 .04em;
  opacity: .98;
}
.story-preview-card .open-chapter{
  margin-top: 14px;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  font: italic 18px "EB Garamond", serif;
}


/* Version 1.3 — refined wax seal inspired by reference */
.story-page-seal.invitation-seal{
  border-radius: 47% 53% 50% 50% / 51% 48% 52% 49%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,229,199,.28), transparent 16%),
    radial-gradient(circle at 50% 42%, #b55d33 0%, #8f4728 46%, #6e3420 74%, #552717 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,235,212,.22),
    inset 0 -4px 8px rgba(74,32,20,.34),
    0 7px 16px rgba(63,36,24,.18);
}
.story-page-seal.invitation-seal::before{
  border-color: rgba(91,43,26,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,236,213,.16),
    0 0 0 1px rgba(255,220,190,.08);
}
.story-page-seal.invitation-seal::after{
  border-color: rgba(85,37,22,.18);
}
.story-page-seal.invitation-seal:hover,
.story-page-seal.invitation-seal:focus-visible{
  box-shadow:
    inset 0 2px 2px rgba(255,235,212,.24),
    inset 0 -4px 9px rgba(74,32,20,.36),
    0 10px 22px rgba(63,36,24,.22);
}

.seal-initials{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  letter-spacing: -0.035em;
  color: #f4d7bb;
  font: 500 clamp(30px, 5.4vw, 38px)/1 "Cormorant Garamond", serif;
  text-shadow:
    0 1px 0 rgba(83,36,22,.24),
    0 -1px 0 rgba(255,226,196,.12);
}
.seal-initials em{
  font-style: italic;
  font-size: 1em;
  margin: 0 -0.09em 0 -0.05em;
  opacity: .98;
}


/* Version 1.4 — user-provided custom wax seal */
.story-page-seal.custom-seal-button{
  width: clamp(108px, 24vw, 138px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: transform .22s ease, filter .22s ease;
}
.story-page-seal.custom-seal-button img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(60, 34, 23, 0.18));
}
.story-page-seal.custom-seal-button:hover,
.story-page-seal.custom-seal-button:focus-visible{
  transform: translateY(-2px) scale(1.03);
}
.story-page-seal.custom-seal-button:hover img,
.story-page-seal.custom-seal-button:focus-visible img{
  filter: drop-shadow(0 14px 22px rgba(60, 34, 23, 0.22));
}


/* Version 1.6 — refreshed intro monogram */
.intro-monogram{
  width: min(76vw, 360px);
  margin: 0 auto 14px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.intro-rule{
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(213,173,101,.55) 18%, rgba(213,173,101,.92) 50%, rgba(213,173,101,.55) 82%, transparent 100%);
  box-shadow: 0 0 10px rgba(213,173,101,.14);
}
.intro-names{
  color: #d5ad65;
  font: 500 clamp(26px, 5.2vw, 34px)/1.05 "Cormorant Garamond", serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(255,242,206,.24),
    0 0 12px rgba(206,158,82,.18);
}
.intro-names span{
  display: inline-block;
  margin: 0 .12em;
  font-style: italic;
  letter-spacing: .03em;
}