/* WHAT THIS FILE IS: Vasanta's independent visual system. Original paintings
   provide scenery; names, stationery, controls and photo mounts remain live
   HTML. Each chapter has its own composition, with mobile layouts rather than
   a scaled-down desktop canvas. No styles depend on another template. */
@font-face {
  font-family: Vasanta Serif;
  src: url("assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Vasanta Serif;
  src: url("assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Vasanta Sans;
  src: url("assets/fonts/jost-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --cream: #fbf5ea;
  --paper: #fffaf1;
  --ink: #593938;
  --rose: #8c4f58;
  --blush: #e6c6ba;
  --sage: #5c6e59;
  --gold: #a9804f;
  --line: #b3966855;
  --serif: "Vasanta Serif", Georgia, serif;
  --sans: "Vasanta Sans", sans-serif;
  --col: 1920px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: var(--cream);
}
body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.65 var(--sans);
}
body:not(.open) {
  overflow: hidden;
}
body:has(dialog[open]) {
  overflow: hidden;
}
button,
input,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  cursor: default;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
button,
input,
textarea,
a {
  outline-offset: 5px;
}
:focus-visible {
  outline: 2px solid var(--rose);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}
em {
  font-weight: 400;
  color: var(--rose);
}
h2 {
  font-size: clamp(42px, 4.5vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.eyebrow {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.section {
  position: relative;
  padding: 110px 7%;
  scroll-margin-top: 62px;
}
.section-inner {
  position: relative;
  max-width: 1240px;
  margin: auto;
  min-width: 0;
  text-align: center;
}
.section h2 {
  margin: 20px 0 25px;
}
.section-note {
  max-width: 570px;
  margin: 20px auto 36px;
  color: #7c7164;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  z-index: 100;
  left: 15px;
  top: -100px;
  padding: 10px 20px;
  background: var(--paper);
}
.skip-link:focus {
  top: 15px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 48px;
  padding: 14px 28px;
  background: var(--rose);
  color: var(--paper);
  border: 1px solid var(--rose);
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 10px;
  transition:
    background 0.25s,
    transform 0.25s;
}
.button:hover {
  background: #713d46;
  transform: translateY(-2px);
}
.text-button {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-size: 12px;
  letter-spacing: 0.07em;
}
.text-button span {
  margin-left: 16px;
}
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: var(--gold);
  margin: 30px auto;
}
.ornament span {
  width: 70px;
  height: 1px;
  background: var(--line);
}
.chapter-crest {
  width: 64px;
  height: 78px;
  border: 1px solid var(--line);
  border-radius: 50% 50% 45% 45%;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  color: var(--gold);
  box-shadow:
    0 0 0 5px var(--paper),
    0 0 0 6px var(--line);
  font: 30px var(--serif);
}

/* The opening is a keepsake folio, with two painted leaves that part once.
   The underlying page is inert until JS opens it, so hidden controls cannot
   receive keyboard focus. Preview mode bypasses this cover without music. */
.cover {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--cream);
  perspective: 1400px;
  overflow: auto;
}
.cover-door {
  position: absolute;
  inset-block: 0;
  width: 50%;
  background: var(--cream) url("assets/botanical-paper.webp") left center / auto 100%
    no-repeat;
  transition: transform 1.5s cubic-bezier(0.65, 0, 0.2, 1);
}
.door-left {
  left: 0;
  border-right: 1px solid var(--line);
  transform-origin: left;
}
.door-right {
  right: 0;
  transform: scaleX(-1);
  transform-origin: center;
}
.cover-content {
  position: relative;
  width: min(540px, calc(100% - 44px));
  margin: 35px 0;
  padding: 56px 35px 45px;
  text-align: center;
  background: #fff9eae8;
  border: 1px solid #ba9666;
  outline: 1px solid #ba96665c;
  outline-offset: -12px;
  border-radius: 46% 46% 6px 6px / 15% 15% 6px 6px;
  box-shadow: 0 25px 100px #71493520;
  transition:
    opacity 0.55s,
    transform 0.8s;
}
.cover-content > .eyebrow {
  max-width: 240px;
  margin: auto;
  font-size: 8px;
}
.folio-corner {
  font-size: 30px;
  margin: 15px 0;
  color: var(--gold);
}
.folio-label {
  font-size: 9px;
  letter-spacing: 0.25em;
}
.cover-names {
  font: clamp(40px, 5vw, 65px)/1.1 var(--serif);
  margin: 24px 0 10px;
}
.cover-script {
  font: italic 25px var(--serif);
  color: var(--rose);
}
.seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 32px auto 22px;
  border: 1px solid #d7bb8c;
  outline: 1px solid #8c4f5855;
  outline-offset: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 25%, #b47c83, #834752 70%);
  color: #ffebca;
  box-shadow:
    inset 0 0 0 6px #613c3120,
    0 7px 14px #603b3b30;
  font: 24px var(--serif);
  transition: transform 0.3s;
}
.seal:hover {
  transform: rotate(-6deg) scale(1.04);
}
.seal-star {
  position: absolute;
  bottom: 4px;
  font-size: 15px;
}
.open-hint {
  margin-top: 20px !important;
}
.cover-date {
  font: italic 20px var(--serif);
  margin-top: 20px;
}
.opening .cover-content {
  opacity: 0;
  transform: translateY(-20px) scale(0.96);
  pointer-events: none;
}
.opening .door-left {
  transform: translateX(-100%);
}
.opening .door-right {
  transform: translateX(100%) scaleX(-1);
}
.opening .cover {
  background: transparent;
  pointer-events: none;
}

/* The painting deliberately reserves sky for live typography. Mobile uses a
   separate portrait composition; neither painting is non-uniformly scaled. */
.hero {
  position: relative;
  min-height: 740px;
  height: 100svh;
  max-height: 1250px;
  background: #f4e5d4 url("assets/dawn-palace.webp") center / cover no-repeat;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.hero-frame {
  position: absolute;
  inset: 24px;
  border: 1px solid #a9804f70;
  pointer-events: none;
}
.hero-frame::before,
.hero-frame::after {
  content: "✦";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 16px;
}
.hero-frame::before {
  top: -15px;
}
.hero-frame::after {
  bottom: -15px;
}
.hero-copy {
  position: relative;
  padding: clamp(65px, 8svh, 120px) 30px 0;
}
.hero-kicker {
  color: #7f6351;
  font-size: 9px;
}
.hero-monogram {
  border: 1px solid var(--line);
  border-radius: 50% 50% 46% 46%;
  width: 50px;
  height: 64px;
  margin: 20px auto 22px;
  display: grid;
  place-items: center;
  font: italic 21px var(--serif);
  color: var(--rose);
}
h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: clamp(65px, 8.3vw, 142px);
  line-height: 1;
  color: #764951;
  letter-spacing: -0.04em;
}
h1 em {
  font-size: 0.53em;
  color: #a88656;
}
h1 > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.long-names h1 {
  font-size: clamp(50px, 6.2vw, 110px);
}
#memories .letter-signoff {
  display: table;
  margin: 20px auto 0;
  padding: 10px 22px;
  background: #fff9ebed;
  border: 1px solid var(--line);
}
.hero-invite {
  margin-top: 18px;
  font: italic clamp(20px, 2vw, 28px) var(--serif);
  color: #76604d;
}
.hero-details {
  margin: 27px auto 0;
  color: #674c40;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-details p + p {
  font-size: 9px;
  letter-spacing: 0.12em;
  margin-top: 10px;
}
.explore {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 13px 22px;
  color: #493c2e;
  background: #fff7e3ba;
  border: 1px solid #fff8eb77;
  backdrop-filter: blur(7px);
  white-space: nowrap;
}
.explore > span:last-child {
  font-size: 22px;
  line-height: 1;
}
.hero-edition {
  position: absolute;
  left: 37px;
  bottom: 50px;
  writing-mode: vertical-rl;
  font-size: 8px;
  letter-spacing: 0.22em;
}
.fireflies {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fireflies i {
  position: absolute;
  width: 12px;
  height: 8px;
  border-radius: 80% 0 80% 10%;
  background: #c98d8f70;
  top: 12%;
  left: 17%;
  animation: drift 13s ease-in-out infinite alternate;
}
.fireflies i:nth-child(2) {
  left: 82%;
  top: 30%;
  animation-delay: -4s;
}
.fireflies i:nth-child(3) {
  left: 8%;
  top: 70%;
  animation-delay: -8s;
}
.fireflies i:nth-child(4) {
  left: 75%;
  top: 82%;
  animation-delay: -3s;
}
.fireflies i:nth-child(5) {
  left: 30%;
  top: 65%;
  width: 7px;
  animation-delay: -9s;
}
.fireflies i:nth-child(6) {
  left: 90%;
  top: 60%;
  animation-delay: -6s;
}
@keyframes drift {
  to {
    transform: translate(28px, 65px) rotate(100deg);
    opacity: 0.25;
  }
}
.chapter-nav {
  position: sticky;
  z-index: 15;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  min-height: 62px;
  background: #fff9f0f5;
  border-block: 1px solid var(--line);
  backdrop-filter: blur(15px);
}
.chapter-nav a {
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 9px;
  padding: 18px 0;
}
.chapter-nav a:hover {
  color: var(--rose);
}
.chapter-nav span {
  color: var(--gold);
}

/* An illustrated folio uses nested rules and an arched crest, not a generic
   floating card. Family names remain unbounded text with wrapping enabled. */
.paper {
  background: var(--cream) url("assets/botanical-paper.webp") center / cover no-repeat;
}
.welcome {
  padding-block: 100px;
}
.invitation-letter {
  max-width: 1000px;
  padding: 65px 70px 55px;
  border: 1px solid var(--line);
  background: #fffaf0e8;
  box-shadow:
    15px 15px 0 -1px #f4e8d9,
    15px 15px 0 0 var(--line),
    0 30px 60px #64462b0d;
}
.letter-edge {
  position: absolute;
  inset: 12px;
  border: 1px solid #be976631;
  pointer-events: none;
}
.stationery-edition {
  font-size: 8px;
  letter-spacing: 0.24em;
  color: #9a876c;
  margin-bottom: 32px;
}
.invitation-letter h2 {
  font-size: clamp(42px, 4.8vw, 66px);
}
.blessing {
  margin: 28px auto 16px;
  font: italic 22px var(--serif);
  color: var(--rose);
}
.blessing img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin: 0 auto 15px;
}
#blessing-symbol {
  font-size: 40px;
}
.intro {
  font-size: 14px;
  line-height: 1.9;
  max-width: 590px;
  margin: auto;
  color: #7e7261;
}
.hosted {
  margin: 22px auto;
  color: var(--sage);
  font-size: 15px;
}
.families {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
  margin: 36px auto 0;
}
.family {
  flex: 1;
  min-width: 0;
}
.family-cameo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 60px;
  margin: 0 auto 16px;
  border: 1px solid var(--line);
  border-radius: 50% 50% 45% 45%;
  color: var(--rose);
  font: italic 30px var(--serif);
  background: #ecd3c438;
}
.family h3 {
  font-size: 29px;
}
.family p {
  margin-top: 10px;
  font-size: 12px;
  color: #746b60;
}
.family small {
  display: block;
  margin-bottom: 8px;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.family-join {
  font: italic 35px var(--serif);
  color: var(--gold);
}
.letter-signoff {
  font: italic 24px var(--serif);
  color: var(--rose);
}

/* A brass reveal plaque set into the garden. The text timer sits beneath a
   removable canvas; the equivalent button keeps it accessible without touch. */
.countdown {
  background: #eaded0 url("assets/dawn-palace.webp") center 80% / cover;
  padding: 105px 7%;
  isolation: isolate;
}
.countdown::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff4e0bb;
  z-index: -1;
}
.countdown .section-inner {
  max-width: 900px;
}
.chapter-number {
  color: var(--sage);
  font-size: 9px;
  letter-spacing: 0.25em;
  margin-bottom: 45px;
}
.countdown-card {
  position: relative;
  max-width: 720px;
  margin: 45px auto 26px;
  border: 1px solid #a58155;
  border-radius: 120px 120px 8px 8px / 28px 28px 8px 8px;
  overflow: hidden;
  box-shadow: 0 16px 40px #815b3b20;
}
.clock {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 50px 20px 40px;
  min-height: 210px;
  background: #fffaed;
}
.clock strong {
  display: block;
  font: 65px/1 var(--serif);
  color: var(--rose);
}
.clock span {
  display: block;
  color: var(--gold);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.2em;
  margin-top: 12px;
}
.clock b {
  font: 28px var(--serif);
  color: var(--line);
}
#foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  transition: opacity 0.8s;
}
#foil-label {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #60452e;
  transition: opacity 0.3s;
}
#foil-label > span {
  font-size: 27px;
}
#foil-label p {
  font: italic 36px var(--serif);
  margin: 10px 0 15px;
}
#foil-label small {
  font-size: 8px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.revealed #foil,
.revealed #foil-label {
  opacity: 0;
  pointer-events: none;
}
.countdown-footnote {
  margin-top: 28px;
  font: italic 23px var(--serif);
  color: var(--sage);
}

/* The celebration atlas is a painting beside an actual letter. Long venues
   and all eight ceremony tabs wrap; custom event imagery replaces the art. */
#celebrations {
  background-position: center top;
}
.tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 35px auto;
}
.tabs button {
  background: #fffbf1;
  border: 1px solid var(--line);
  padding: 12px 25px;
  font-size: 11px;
  letter-spacing: 0.08em;
  min-height: 44px;
}
.tabs button[aria-selected="true"] {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--paper);
}
.event-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 25px 65px #624c3a10;
}
.event-scene {
  position: relative;
  min-height: 650px;
  overflow: hidden;
}
.event-scene > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}
.event-scene-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff5dfdc;
  padding: 15px 24px;
  border: 1px solid #d2b787;
}
#event-number {
  font: italic 36px var(--serif);
  color: var(--rose);
}
.event-copy {
  position: relative;
  padding: 55px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-wrap: anywhere;
}
.event-copy::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.small-crest {
  width: 45px;
  height: 55px;
  font-size: 22px;
}
#event-name {
  font-size: clamp(48px, 5vw, 74px);
  margin: 14px 0 0;
  color: var(--rose);
  line-height: 1;
}
.event-time {
  margin: 16px 0;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.short-rule {
  width: 60px;
  height: 1px;
  background: var(--line);
  margin: 12px 0 22px;
}
.venue-name {
  font: 25px/1.3 var(--serif);
}
#event-address {
  font-size: 12px;
  margin-top: 6px;
  color: #847765;
}
.event-note {
  font-size: 14px;
  line-height: 1.8;
  margin-top: 25px;
}
.dress-code {
  margin-top: 22px;
  font: italic 19px/1.4 var(--serif);
  color: var(--sage);
}
.event-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  margin-top: 30px;
}

/* A scrapbook spread, with separate photo and paper layers. No decorative
   pixels contain the couple's details. Photo-less entries have no empty mount. */
.story {
  background:
    linear-gradient(#e9e4d6c9, #e9e4d6dd),
    url("assets/botanical-paper.webp") center / cover;
  border-block: 1px solid var(--line);
}
.story::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background: repeating-linear-gradient(90deg, transparent 0 69px, #aaa17d18 70px 71px);
}
.story-heading {
  text-align: left;
  padding-left: 25px;
  margin-bottom: 50px;
}
.story-heading h2 {
  font-size: clamp(52px, 5.5vw, 84px);
}
.story-layout {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 0 25px;
}
.story-photo-wrap {
  position: relative;
  padding: 16px 16px 0;
  background: var(--paper);
  transform: rotate(-3deg);
  box-shadow: 0 18px 28px #4f473122;
  border: 1px solid #b3a18150;
}
.story-photo-wrap::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 32px;
  background: #c6a48066;
  border-inline: 1px dashed #a8824e77;
  z-index: 2;
  top: -12px;
  left: 38%;
  transform: rotate(4deg);
}
#story-photo {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 48% 48% 2px 2px / 25% 25% 2px 2px;
}
.photo-inscription {
  display: block;
  font: italic 17px var(--serif);
  color: var(--sage);
  padding: 22px 5px;
}
.story-copy {
  position: relative;
  background: #fff9eb;
  border: 1px solid #bba98955;
  text-align: left;
  padding: 45px 42px;
  box-shadow:
    9px 9px 0 -1px #f0e5d5,
    9px 9px 0 0 #bba98955;
}
.story-progress {
  color: #93846c;
  font-size: 8px;
}
.story-tabs {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 20px 0 30px;
}
.story-tabs button {
  width: 40px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50% 50% 0 0;
  font: 20px var(--serif);
}
.story-tabs button[aria-selected="true"] {
  background: var(--sage);
  color: var(--paper);
}
#story-heading {
  font-size: clamp(32px, 3.3vw, 49px);
  line-height: 1.12;
  margin: 18px 0 25px;
}
#story-body {
  font-size: 14px;
  line-height: 1.9;
  color: #7e7361;
  white-space: pre-line;
}
.chapter-prompt {
  font: italic 19px var(--serif);
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--rose);
}
.story-layout.without-photo {
  display: block;
  max-width: 850px;
  margin: auto;
}

/* The photo salon is swipeable and uses native buttons, not draggable divs.
   A fixed card width avoids squeezing eight photographs into tiny thumbnails. */
.gallery-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin: 34px 0 16px;
}
.gallery-controls > span {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.gallery-controls button {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line);
}
.gallery {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 25px 18px 35px;
  scroll-snap-type: x mandatory;
  scrollbar-color: #c2a286 transparent;
  scrollbar-width: thin;
}
.gallery > button {
  flex: 0 0 calc((100% - 56px) / 3);
  min-width: 240px;
  scroll-snap-align: center;
  border: 1px solid var(--line);
  background: #fffaf1;
  padding: 15px;
  box-shadow: 0 10px 16px #85593d12;
  transition: transform 0.3s;
}
.gallery > button:nth-child(2n) {
  transform: translateY(12px);
}
.gallery > button:hover {
  transform: translateY(-4px);
}
.memory-mount {
  display: block;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 50% 50% 0 0 / 28% 28% 0 0;
  overflow: hidden;
}
.memory-mount img {
  aspect-ratio: 3/4;
  width: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.gallery-caption {
  display: block;
  padding: 24px 5px 12px;
  font: italic 25px/1.2 var(--serif);
}
.gallery-caption small {
  display: block;
  margin-top: 14px;
  font: 8px var(--sans);
  letter-spacing: 0.2em;
  color: var(--gold);
}

/* The film is a dusk interlude with its own colour and composition, while the
   frame remains true 16:9. Empty-state copy is honest and non-interactive. */
.film-section {
  background: #58333d url("assets/rose-nocturne.webp") center / cover no-repeat;
  color: #fff4df;
  isolation: isolate;
}
.film-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #452d3b88;
  z-index: -1;
}
.film-section .eyebrow {
  color: #e1bc8c;
}
.film-section em {
  color: #efc1b6;
}
.film-section .section-note {
  color: #e8d8c4;
}
.film-frame {
  position: relative;
  width: 100%;
  max-width: 950px;
  margin: 44px auto 0;
  aspect-ratio: 16/9;
  padding: 12px;
  border: 1px solid #e9c99770;
  background: #241920;
  box-shadow:
    0 0 0 6px #4b303955,
    0 0 0 7px #decba03b;
}
.film-placeholder,
.play-film {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff7e8;
  background:
    linear-gradient(#3a253455, #3a2534c9),
    url("assets/rose-nocturne.webp") center / cover;
  border: 1px solid #f6d3ad60;
  padding: 25px;
}
.film-frame:has(.film-placeholder:not([hidden])) {
  min-height: 306px;
}
.film-reel,
.play-circle {
  flex: 0 0 auto;
  border: 1px solid #f6d5ad;
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  font-size: 33px;
  line-height: 1;
  margin-bottom: 22px;
}
.film-placeholder p {
  font: clamp(30px, 4vw, 54px)/1.1 var(--serif);
}
.film-placeholder > span:not(.film-reel) {
  font: italic 22px var(--serif);
  margin-top: 10px;
}
.film-placeholder small {
  font-size: 8px;
  letter-spacing: 0.23em;
  text-transform: uppercase;
  margin-top: 25px;
}
.play-film {
  position: relative;
  font: 28px var(--serif);
}
.play-film img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.play-film span {
  position: relative;
}
.film-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* RSVP is correspondence: a painted left leaf and a usable right-hand form.
   The two stack on phones; neither side is allowed to crop form controls. */
.reply {
  background: var(--cream) url("assets/botanical-paper.webp") center / cover;
}
.reply-layout {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  margin-top: 55px;
  box-shadow: 0 25px 60px #80584215;
}
.reply-vignette {
  background:
    linear-gradient(#fff7e9c9, #fff7e935),
    url("assets/rose-pavilion.webp") center / cover;
  padding: 55px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--line);
  border-right: 0;
}
.reply-vignette > p {
  margin-top: 28px;
  font: 48px/1.05 var(--serif);
}
.vignette-initials {
  display: grid;
  place-items: center;
  border: 1px solid #a78352;
  border-radius: 50%;
  width: 78px;
  height: 78px;
  margin-top: auto;
  background: #fff3dfd9;
  color: var(--rose);
  font: italic 28px var(--serif);
}
.rsvp-stationery {
  position: relative;
  border: 1px solid var(--line);
  background: #fffbf1;
  padding: 55px 48px 40px;
}
.reply-seal {
  color: var(--rose);
  font: italic 25px var(--serif);
  letter-spacing: 0.04em;
}
.reply-letter-title {
  font: italic 38px var(--serif);
  margin-top: 12px;
}
.rsvp-stationery .ornament {
  margin: 20px auto 28px;
}
.rsvp-form {
  text-align: left;
}
fieldset {
  padding: 0;
  border: 0;
  margin: 0 0 28px;
}
legend,
.rsvp-form label {
  font-size: 11px;
  color: #745d50;
}
legend {
  margin-bottom: 12px;
}
.reply-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.reply-choices label {
  position: relative;
}
.reply-choices input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.reply-choices span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid var(--line);
  padding: 9px;
}
.reply-choices input:checked + span {
  background: var(--sage);
  color: #fff9e9;
  border-color: var(--sage);
}
.reply-choices input:focus-visible + span {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}
.reply-choices i {
  font-style: normal;
  font-size: 18px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px 20px;
}
.form-grid .full {
  grid-column: 1/-1;
}
.form-grid label {
  display: block;
  min-width: 0;
}
input:not([type="radio"]),
textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  padding: 14px 0;
  color: var(--ink);
  font-size: 16px;
}
textarea {
  resize: vertical;
  min-height: 90px;
}
input::placeholder,
textarea::placeholder {
  color: #9d9584;
  font-size: 13px;
}
#send-rsvp {
  margin-top: 30px;
  width: 100%;
}
#rsvp-status {
  font-size: 13px;
  margin-top: 15px;
  color: var(--sage);
}
.contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.contacts a {
  border-bottom: 1px solid var(--line);
  padding: 8px 16px;
  font-size: 12px;
}

.closing {
  text-align: center;
  background: var(--cream);
}
.closing-scene {
  min-height: 640px;
  background: url("assets/dawn-palace.webp") center / cover;
  padding: 65px 30px 380px;
}
.closing-names {
  font: clamp(46px, 6vw, 90px)/1.1 var(--serif);
  margin: 24px 0 15px;
  color: var(--rose);
  overflow-wrap: anywhere;
}
#hashtag,
#instagram {
  font-size: 11px;
  letter-spacing: 0.06em;
}
#instagram {
  display: inline-block;
  margin-top: 12px;
}
.closing .eyebrow {
  color: #795c42;
}
.closing-credit {
  padding: 23px 80px calc(23px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.credit {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #89735b;
}
.music {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid #b99a63;
  border-radius: 40px;
  color: #f8e7cb;
  background: #774d57ed;
  font-size: 9px;
  letter-spacing: 0.07em;
}
.music-bars {
  height: 15px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.music-bars i {
  display: block;
  width: 2px;
  height: 6px;
  background: currentColor;
}
.music-bars i:nth-child(2) {
  height: 13px;
}
.music-bars i:nth-child(3) {
  height: 9px;
}
.music[aria-pressed="true"] i {
  animation: sound 1s infinite alternate;
}
.music[aria-pressed="true"] i:nth-child(2) {
  animation-delay: -0.4s;
}
@keyframes sound {
  to {
    transform: scaleY(0.4);
  }
}
dialog {
  color: var(--cream);
  border: 1px solid #d5b98a;
  background: #38292b;
  padding: 35px;
  max-width: min(950px, 92vw);
  max-height: 92svh;
}
dialog::backdrop {
  background: #231d1fea;
  backdrop-filter: blur(8px);
}
dialog figure {
  margin: 0;
}
#lightbox-image {
  width: 100%;
  max-height: 70svh;
  object-fit: contain;
}
#lightbox-caption {
  text-align: center;
  font: italic 23px var(--serif);
  margin-top: 15px;
}
.lightbox-close {
  position: absolute;
  top: 3px;
  right: 6px;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-size: 28px;
  width: 35px;
  height: 35px;
}
.lightbox-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 20px;
  font-size: 12px;
}
.lightbox-controls button {
  border: 1px solid #d5b98a70;
  background: transparent;
  color: var(--cream);
  width: 44px;
  height: 44px;
}
.noscript {
  position: fixed;
  z-index: 90;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--paper);
  text-align: center;
  padding: 20px;
}
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.85s,
    transform 1s;
}
.motion-ready .reveal.visible {
  opacity: 1;
  transform: none;
}

@media (min-width: 1600px) {
  .hero-copy {
    padding-top: 10svh;
  }
  .hero-details {
    margin-top: 34px;
  }
}
@media (max-width: 1000px) {
  .section {
    padding: 85px 5%;
  }
  .event-copy {
    padding: 45px 30px;
  }
  .event-scene {
    min-height: 600px;
  }
  .story-layout {
    gap: 35px;
    padding: 0 10px;
  }
  .story-copy {
    padding: 35px 28px;
  }
  .rsvp-stationery {
    padding: 40px 28px;
  }
  .reply-vignette > p {
    font-size: 38px;
  }
}
@media (max-width: 700px) {
  .section {
    padding: 75px 24px;
    scroll-margin-top: 53px;
  }
  .section h2 {
    margin-top: 17px;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 0.22em;
  }
  .section-note {
    font-size: 13px;
  }
  .cover-content {
    padding: 46px 26px 35px;
  }
  .cover-names {
    font-size: 46px;
  }
  .hero {
    height: 100svh;
    min-height: 720px;
    max-height: 980px;
    background-image: url("assets/dawn-palace-portrait.webp");
    background-position: center bottom;
  }
  .hero-frame {
    inset: 14px;
  }
  .hero-copy {
    padding: 64px 22px 0;
  }
  .hero-monogram {
    width: 42px;
    height: 53px;
    margin: 19px auto 20px;
    font-size: 17px;
  }
  h1 {
    flex-wrap: wrap;
    column-gap: 13px;
    row-gap: 0;
    font-size: clamp(52px, 14.6vw, 82px);
  }
  h1 em {
    font-size: 0.5em;
  }
  .long-names h1 {
    font-size: clamp(32px, 10.5vw, 56px);
    row-gap: 4px;
  }
  .long-names h1 > span {
    flex-basis: 100%;
  }
  .long-names .closing-names,
  .long-names .cover-names {
    font-size: clamp(29px, 9vw, 45px);
    overflow-wrap: anywhere;
  }
  .hero-invite {
    font-size: 20px;
    max-width: 240px;
    margin: 19px auto 0;
  }
  .hero-details {
    font-size: 9px;
    margin-top: 24px;
  }
  .hero-details p + p {
    font-size: 8px;
    max-width: 230px;
    margin: 10px auto 0;
  }
  .hero-edition {
    left: 24px;
    bottom: 30px;
    font-size: 6px;
  }
  .explore {
    bottom: 28px;
    font-size: 7px;
    padding: 10px 18px;
  }
  .chapter-nav {
    gap: 17px;
    min-height: 53px;
  }
  .chapter-nav a {
    font-size: 8px;
    letter-spacing: 0.09em;
    padding: 17px 0;
  }
  .chapter-nav span {
    font-size: 11px;
  }
  .welcome {
    padding: 55px 21px 65px;
  }
  .invitation-letter {
    padding: 42px 25px 38px;
    box-shadow:
      7px 7px 0 -1px #f4e8d9,
      7px 7px 0 0 var(--line);
  }
  .stationery-edition {
    font-size: 6px;
    letter-spacing: 0.14em;
    margin-bottom: 28px;
  }
  .invitation-letter h2 {
    font-size: 41px;
  }
  .intro {
    font-size: 13px;
  }
  .families {
    flex-direction: column;
    gap: 22px;
  }
  .family-cameo {
    display: none;
  }
  .family h3 {
    font-size: 29px;
  }
  .family-join {
    font-size: 25px;
  }
  .family p {
    max-width: 240px;
  }
  .letter-signoff {
    font-size: 21px;
  }
  .chapter-number {
    font-size: 7px;
    margin-bottom: 28px;
  }
  .countdown-card {
    margin-top: 30px;
  }
  .clock {
    min-height: 165px;
    padding: 30px 10px;
  }
  .clock strong {
    font-size: 39px;
  }
  .clock span {
    font-size: 7px;
    letter-spacing: 0.09em;
  }
  .clock b {
    font-size: 18px;
  }
  #foil-label p {
    font-size: 27px;
  }
  #foil-label small {
    font-size: 7px;
  }
  .countdown-footnote {
    font-size: 20px;
  }
  .tabs {
    gap: 7px;
  }
  .tabs button {
    padding: 10px 15px;
    font-size: 10px;
  }
  .event-panel {
    grid-template-columns: 1fr;
  }
  .event-scene {
    min-height: 0;
    height: 390px;
  }
  .event-scene > img {
    object-position: center 55%;
  }
  .event-scene-label {
    left: 15px;
    right: 15px;
    bottom: 15px;
    padding: 10px 16px;
  }
  .event-copy {
    padding: 40px 27px;
  }
  #event-name {
    font-size: 51px;
  }
  .event-note {
    font-size: 13px;
  }
  .event-actions {
    gap: 12px;
    flex-direction: column;
    align-items: center;
  }
  .story-heading {
    padding-left: 0;
    text-align: center;
    margin-bottom: 40px;
  }
  .story-heading h2 {
    font-size: 49px;
  }
  .story-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 6px;
  }
  .story-photo-wrap {
    margin: 0 10px;
    padding: 12px 12px 0;
  }
  #story-photo {
    aspect-ratio: 1/1;
  }
  .photo-inscription {
    font-size: 15px;
    padding: 18px 0;
  }
  .story-copy {
    padding: 32px 25px;
  }
  #story-heading {
    font-size: 35px;
  }
  #story-body {
    font-size: 13px;
  }
  .gallery {
    margin-inline: -7px;
    padding-inline: 7px;
    gap: 20px;
  }
  .gallery > button {
    flex-basis: 83%;
    min-width: 230px;
    padding: 12px;
  }
  .gallery-caption {
    font-size: 23px;
  }
  .gallery-controls {
    gap: 20px;
  }
  .film-frame {
    padding: 6px;
  }
  .film-placeholder {
    padding: 23px 12px;
  }
  .film-placeholder > span:not(.film-reel) {
    font-size: 18px;
  }
  .film-reel,
  .play-circle {
    width: 53px;
    height: 53px;
    font-size: 26px;
    margin-bottom: 18px;
  }
  .reply-layout {
    grid-template-columns: 1fr;
    margin-top: 35px;
  }
  .reply-vignette {
    min-height: 320px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    padding: 30px 20px;
    background-position: center 43%;
  }
  .reply-vignette > p {
    font-size: 36px;
    margin-top: 20px;
  }
  .vignette-initials {
    width: 58px;
    height: 58px;
    margin-top: 25px;
    font-size: 23px;
  }
  .rsvp-stationery {
    padding: 35px 22px;
  }
  .reply-letter-title {
    font-size: 34px;
  }
  .reply-choices {
    gap: 8px;
  }
  .reply-choices span {
    font-size: 10px;
    padding: 8px 4px;
  }
  .form-grid {
    gap: 22px 15px;
  }
  .closing-scene {
    min-height: 690px;
    padding: 70px 24px 360px;
    background-image: url("assets/dawn-palace-portrait.webp");
    background-position: center bottom;
  }
  .closing-names {
    font-size: 53px;
  }
  .music {
    bottom: 14px;
    right: 14px;
    padding: 12px;
  }
  #music-label {
    display: none;
  }
  dialog {
    padding: 35px 16px 20px;
  }
  #lightbox-caption {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .motion-ready .reveal {
    opacity: 1;
    transform: none;
  }
}