/* WHAT THIS FILE IS: Chandrika's illustrated inner chapters. This layer deliberately
   excludes the approved cover/hero. Each chapter uses original decorative art
   with real HTML content; portrait art is recomposed, never stretched, for phones. */
.welcome,
#celebrations,
#memories {
  background: #f3ead5 url("assets/garden-paper.webp") center / cover no-repeat;
  position: relative;
  isolation: isolate;
}
.welcome {
  padding: 110px 14% 140px;
}
.welcome::before,
.welcome::after {
  display: none;
}
.invitation-letter {
  max-width: 880px;
}
.chapter-crest {
  width: 66px;
  height: 66px;
  margin: 0 auto 32px;
  display: grid;
  place-items: center;
  position: relative;
  color: #9a7a3e;
  font: 34px var(--serif);
}
.chapter-crest::before,
.chapter-crest::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #b99b5b88;
  border-radius: 45% 45% 10% 10%;
  transform: rotate(45deg);
  pointer-events: none;
}
.chapter-crest::after {
  inset: 7px;
  transform: rotate(-45deg);
}
.welcome .intro {
  max-width: 490px;
  color: #52604f;
}
.welcome .blessing {
  color: #74653f;
}
.welcome .families {
  gap: 24px;
  align-items: start;
  margin-top: 40px;
}
.family-cameo {
  display: grid;
  place-items: center;
  width: 66px;
  height: 80px;
  margin: 0 auto 18px;
  border: 1px solid #ac8c4d;
  border-radius: 50% 50% 42% 42%;
  outline: 1px solid #ad965755;
  outline-offset: 5px;
  color: #e3c795;
  background: radial-gradient(ellipse at 40% 30%, #335344, #122e26);
  box-shadow: 0 6px 15px #24433a18;
  font: italic 38px var(--serif);
}
.welcome .family h3 {
  font-size: clamp(30px, 3vw, 42px);
}
.welcome .family p {
  max-width: 270px;
  margin-inline: auto;
  color: #5b6655;
}
.welcome .family-join {
  margin-top: 83px;
}
.letter-signoff {
  margin-top: 20px;
  font: italic 24px var(--serif);
  color: #847047;
}

/* The midnight garden supplies illustrated margins. Its quiet central field
   keeps the live countdown and chapter text legible without opaque overlays. */
.countdown,
.story,
.reply,
.film-section {
  background: #102e29 url("assets/midnight-garden.webp?v=5") center / cover no-repeat;
  position: relative;
}
.countdown {
  padding-block: 120px 140px;
}
.countdown .section-inner {
  max-width: 820px;
}
.celestial-mark {
  width: 94px;
  height: 94px;
  margin: 0 auto 38px;
  border: 1px solid #cba66a66;
  border-radius: 50%;
  outline: 1px solid #cba66a30;
  outline-offset: 8px;
  display: grid;
  place-items: center;
  position: relative;
  color: #e1c28a;
  font: 58px var(--serif);
  background: #102e2955;
}
.celestial-mark::before,
.celestial-mark::after {
  content: "✧";
  position: absolute;
  top: 33px;
  left: -33px;
  font-size: 20px;
}
.celestial-mark::after {
  left: auto;
  right: -33px;
}
.countdown-card {
  width: min(100%, 640px);
  margin-block: 44px 25px;
  border-radius: 120px 120px 18px 18px;
  background: #0a211d99;
  box-shadow:
    0 0 0 5px #102e29,
    0 0 0 6px #cba66a66,
    0 24px 60px #061a1570;
}
.countdown-card::before {
  content: "✧";
  position: absolute;
  inset: -28px 0 auto;
  width: 54px;
  margin: auto;
  z-index: 2;
  background: var(--forest);
  border: 1px solid #cba66a77;
  border-radius: 50%;
  color: var(--gold);
  font: 30px/52px var(--serif);
  pointer-events: none;
}
.countdown .clock {
  min-height: 205px;
  gap: 27px;
  padding: 48px 24px 34px;
}
.countdown .clock strong {
  font-size: 68px;
}
#foil {
  border-radius: inherit;
}
#foil-label {
  padding-top: 18px;
}
#foil-label p {
  font-size: 36px;
}
.countdown-footnote {
  color: #c8cbb5;
  margin-top: 26px;
  font: italic 24px var(--serif);
}

/* A diptych: illustrated pavilion at left, an inset stationery arch at right.
   Only decorative geometry is fixed; event copy is allowed to grow naturally. */
#celebrations {
  padding: 105px 9% 120px;
}
#celebrations .section-inner {
  max-width: 1060px;
}
.tabs {
  gap: 10px;
  counter-reset: ceremony;
  margin-bottom: 32px;
}
.tabs button {
  counter-increment: ceremony;
  border: 1px solid #aa91496b;
  border-radius: 30px;
  background: #fbf6e7c9;
  color: #344c3d;
  padding: 10px 22px;
  box-shadow: 0 4px 12px #645e3610;
}
.tabs button::before {
  content: counter(ceremony, decimal-leading-zero);
  color: #9c7c3d;
  padding-right: 12px;
  font: italic 19px var(--serif);
}
.tabs button[aria-selected="true"] {
  background: var(--forest);
  color: var(--ivory);
  border-color: #b89956;
  box-shadow: 0 4px 16px #152e2828;
}
.tabs button[aria-selected="true"]::before {
  color: #ddc494;
}
.event-panel {
  min-height: 650px;
  grid-template-columns: 0.95fr 1.05fr;
  background: #fbf7ec;
  box-shadow: 0 20px 65px #3d462129;
  border: 1px solid #b99856;
  padding: 10px;
  gap: 10px;
}
.event-scene {
  border-radius: 230px 230px 3px 3px;
  min-height: 620px;
}
.event-scene img {
  object-position: center;
}
.event-scene::after {
  border-radius: inherit;
  inset: 9px;
  border-color: #e3c88980;
}
.event-scene-label {
  inset: auto 25px 22px;
  padding: 40px 10px 5px;
  text-shadow: 0 2px 8px #061911;
}
.event-copy {
  padding: 45px 36px 35px;
  border: 1px solid #b99b5b66;
  border-radius: 230px 230px 3px 3px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0, #d1b87822, transparent 55%),
    radial-gradient(ellipse at 90% 100%, #b3c3a526, transparent 45%), #fbf7ec;
}
.small-crest {
  width: 44px;
  height: 44px;
  margin-bottom: 26px;
  font-size: 27px;
}
.event-copy .short-rule {
  margin-inline: auto;
}
.event-copy h3 {
  font-size: clamp(44px, 4vw, 60px);
}
.event-copy .event-note {
  max-width: 330px;
  margin-inline: auto;
}
.event-copy .event-actions {
  justify-content: center;
}

.story {
  padding: 110px 8% 135px;
}
.story .section-inner {
  max-width: 1120px;
}
.story-layout {
  gap: 20px;
  grid-template-columns: 1.1fr 1fr;
}
.story-photo-wrap {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  width: 100%;
  filter: drop-shadow(0 20px 28px #00120e80);
}
/* The painted frame's actual opening runs from 13.5% to 86.5%, not the
   requested prompt's nominal dimensions. Match the inspected image here. */
.story-photo-wrap #story-photo {
  position: absolute;
  top: 13.5%;
  left: 13.5%;
  width: 73%;
  height: 73%;
  aspect-ratio: auto;
  border-radius: 20px;
  object-fit: cover;
}
.story-photo-wrap .story-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0;
  pointer-events: none;
}
.story-copy {
  position: relative;
  color: var(--ink);
  background: #f6efdc;
  padding: 40px 38px;
  border: 1px solid #d5bc82;
  box-shadow:
    8px 8px 0 -2px #14332d,
    8px 8px 0 -1px #cba66a77,
    0 22px 50px #03140e55;
}
.story-copy::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid #ac925838;
  pointer-events: none;
}
.story-progress {
  color: #897342;
  margin-bottom: 14px;
  font-size: 8px;
}
.story-tabs {
  gap: 10px;
  margin-bottom: 26px;
}
.story-tabs button {
  border-color: #af965a77;
  color: #526345;
}
.story-tabs button[aria-selected="true"] {
  background: var(--forest);
  color: #e9d8ae;
}
.story-copy #story-when {
  color: #8d703b;
  margin-bottom: 15px;
}
#story-heading {
  font-size: clamp(32px, 3.4vw, 47px);
}
.story-copy #story-body {
  color: #65705d;
  font-size: 14px;
  margin-top: 20px;
}
.story-copy .chapter-prompt {
  border-top: 1px solid #af965a44;
  padding-top: 20px;
  margin-top: 25px;
  color: #8b713b;
}

#memories {
  padding: 105px 10% 130px;
}
#memories .gallery {
  gap: 26px;
  padding-top: 14px;
}
.memory-mount {
  display: block;
  position: relative;
  background: #19372d;
  padding: 16px;
  border: 1px solid #a78949;
  border-radius: 170px 170px 2px 2px;
  box-shadow: 0 16px 32px #3045292c;
}
.memory-mount::after {
  content: "✧";
  position: absolute;
  inset: auto 0 -18px;
  color: #e2c387;
  font: 28px/36px var(--serif);
  text-align: center;
  width: 36px;
  margin: auto;
  background: var(--forest);
  border: 1px solid #ac8c4d;
  border-radius: 50%;
}
.memory-mount img {
  border: 1px solid #c4a35e;
  padding: 5px;
  border-radius: 150px 150px 0 0;
}
.gallery button:hover img {
  transform: none;
}
.gallery .gallery-caption {
  padding-top: 32px;
}
.film-section {
  padding-inline: 10%;
}
/* Preserve the approved chapter spacing after removing the painted moons. */
.story,
.reply,
.film-section {
  padding-top: 180px;
}
.film-frame {
  /* An explicit width prevents a tall empty-state minimum from expanding
     the auto-sized 16:9 box horizontally on narrow phones. */
  width: 100%;
  min-width: 0;
  padding: 10px;
  background: #102e29;
  outline: 1px solid #cba66a55;
  outline-offset: 7px;
  box-shadow: 0 20px 50px #00120e88;
}
/* An empty video is a designed poster, not a disabled/fake play control.
   Real configured films continue to use the 16:9 click-to-load player. */
.film-section .section-note {
  color: #cad0bc;
}
.film-frame:has(.film-placeholder:not([hidden])) {
  min-height: 320px;
}
.film-placeholder {
  height: 100%;
  min-height: 296px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background:
    linear-gradient(#0a211d90, #0a211dbb),
    url("assets/celebration-pavilion.webp?v=3") center 65% / cover;
  border: 1px solid #cba66a77;
  color: var(--ivory);
}
.film-reel {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 20px;
  border: 1px solid #d9bd85;
  border-radius: 50%;
  background: #102e2988;
  color: #e8d2a4;
  font-size: 28px;
}
.film-placeholder p {
  font: clamp(31px, 4vw, 52px) var(--serif);
}
.film-placeholder > span:not(.film-reel) {
  font: italic 21px var(--serif);
  margin-top: 8px;
  color: #e4d5b7;
}
.film-placeholder small {
  margin-top: 22px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #dfc696;
}

/* The reply is a real letter set over a dark garden. Two offset gold outlines
   evoke an envelope; neither adds a click target or changes form semantics. */
.reply {
  padding: 110px 30px 150px;
  color: var(--ivory);
}
.reply .section-note {
  color: #cad0bc;
  margin-bottom: 65px;
}
.rsvp-stationery {
  position: relative;
  width: min(100%, 670px);
  padding: 52px 54px 32px;
  margin: auto;
  background: radial-gradient(ellipse at 0 0, #dcc58b22, transparent 55%), #f8f2e4;
  color: var(--ink);
  border: 1px solid #dac18a;
  box-shadow: 0 28px 70px #00150c80;
  isolation: isolate;
}
.rsvp-stationery::before {
  content: "";
  position: absolute;
  inset: 12px -13px -13px 12px;
  border: 1px solid #c7aa71aa;
  z-index: -1;
  pointer-events: none;
}
.rsvp-stationery::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid #b89a5c55;
  pointer-events: none;
}
.reply-seal {
  position: absolute;
  top: -31px;
  left: calc(50% - 31px);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ede0ba;
  background: radial-gradient(circle at 40% 25%, #355848, #102e29 70%);
  border: 3px double #b49759;
  outline: 1px solid #c4ac7b;
  outline-offset: 4px;
  font: italic 23px var(--serif);
  box-shadow: 0 5px 10px #102e2929;
}
.reply-letter-title {
  font: italic 35px var(--serif);
}
.rsvp-stationery > .ornament {
  margin: 14px 0 27px;
  gap: 15px;
  font-size: 12px;
}
.rsvp-stationery > .ornament span {
  width: 45px;
}
.reply .contacts {
  color: #e5d3ab;
}

/* Tablet layout changes before the photo/letter diptych can become cramped. */
@media (min-width: 701px) and (max-width: 1050px) {
  .welcome {
    padding-inline: 10%;
  }
  #celebrations {
    padding-inline: 5%;
  }
  .event-copy {
    padding-inline: 24px;
  }
  .story {
    padding-inline: 5%;
  }
  .story-copy {
    padding: 32px 26px;
  }
  #memories {
    padding-inline: 7%;
  }
}
@media (max-width: 700px) {
  .welcome,
  #celebrations,
  #memories {
    background-image: url("assets/garden-paper-portrait.webp");
  }
  .countdown,
  .story,
  .reply,
  .film-section {
    background-image: url("assets/midnight-garden-portrait.webp?v=5");
  }
  .welcome {
    padding: 95px 40px 120px;
  }
  .welcome h2 {
    font-size: 42px;
  }
  .welcome .intro {
    font-size: 14px;
    line-height: 1.85;
  }
  .welcome .families {
    gap: 20px;
    align-items: center;
  }
  .welcome .family-join {
    margin-top: 0;
  }
  .family-cameo {
    width: 51px;
    height: 63px;
    font-size: 30px;
  }
  .welcome .family h3 {
    font-size: 35px;
  }
  .welcome .family p {
    font-size: 12px;
  }
  .welcome .ornament {
    margin-top: 30px;
  }
  .letter-signoff {
    font-size: 21px;
  }
  .countdown {
    padding: 100px 32px 115px;
  }
  .countdown h2 {
    font-size: 42px;
  }
  .celestial-mark {
    width: 76px;
    height: 76px;
    font-size: 47px;
  }
  .celestial-mark::before,
  .celestial-mark::after {
    top: 25px;
  }
  .countdown-card {
    border-radius: 85px 85px 12px 12px;
  }
  .countdown .clock {
    min-height: 184px;
    gap: 9px;
    padding: 48px 12px 30px;
  }
  .countdown .clock strong {
    font-size: 38px;
    min-width: 36px;
  }
  #foil-label p {
    font-size: 28px;
  }
  .countdown-footnote {
    font-size: 21px;
  }
  #celebrations {
    padding: 95px 26px 100px;
  }
  #celebrations h2 {
    font-size: 43px;
  }
  .tabs {
    gap: 8px;
    margin-block: 28px 24px;
  }
  .tabs button {
    padding: 9px 14px;
    font-size: 10px;
  }
  .tabs button::before {
    font-size: 16px;
    padding-right: 7px;
  }
  .event-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 8px;
    gap: 8px;
  }
  .event-scene {
    min-height: 380px;
    border-radius: 180px 180px 2px 2px;
  }
  .event-scene img {
    object-position: center;
  }
  .event-copy {
    border-radius: 0;
    padding: 36px 20px 30px;
  }
  .event-copy h3 {
    font-size: 48px;
  }
  .event-copy .eyebrow {
    font-size: 9px;
  }
  .story {
    padding: 95px 25px 110px;
  }
  .story-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .story-heading {
    margin-bottom: 25px;
  }
  .story-photo-wrap {
    width: min(100%, 430px);
  }
  .story-copy {
    padding: 34px 30px;
    margin-inline: 5px;
  }
  #story-heading {
    font-size: 36px;
  }
  .story-copy #story-body {
    font-size: 14px;
  }
  .story-tabs {
    gap: 8px;
  }
  .story-tabs button {
    width: 40px;
    height: 40px;
  }
  #memories {
    padding: 95px 30px 110px;
  }
  #memories .gallery {
    gap: 20px;
    padding: 10px 4px 25px;
  }
  .gallery button {
    flex-basis: 86%;
  }
  .memory-mount {
    padding: 13px;
  }
  #memories .ornament {
    margin-top: 22px;
  }
  .film-section {
    padding: 85px 30px;
  }
  .film-frame {
    padding: 5px;
  }
  .reply {
    padding: 95px 26px 110px;
  }
  .reply .section-note {
    padding-inline: 15px;
    font-size: 14px;
  }
  .rsvp-stationery {
    padding: 51px 27px 28px;
  }
  .rsvp-stationery::before {
    inset: 9px -8px -9px 9px;
  }
  .rsvp-stationery::after {
    inset: 9px;
  }
  .reply-choices {
    flex-direction: column;
    gap: 8px;
  }
  .reply-choices span {
    min-height: 46px;
    font-size: 12px;
  }
  .reply .form-grid {
    grid-template-columns: 1fr;
  }
  .reply-letter-title {
    font-size: 31px;
  }
  .story,
  .reply,
  .film-section {
    padding-top: 150px;
  }
}