/* Let the artwork be the surface. Only the letter and photographs retain
   their physical stationery edges; reading areas and controls stay open. */
.events-content > .section-heading,
.event-note,
.event-tabs button,
.event-controls,
.gallery-controls,
.story-letter,
.travel-content,
.rsvp-stationery,
.wish-actions,
.controls {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.text-button,
.button,
.event-tabs button,
.calendar-actions a {
  min-height: 44px;
}

.button {
  background: transparent;
  color: var(--ruby);
  padding: 14px 8px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

.text-button:hover,
.button:hover {
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

/* The type is kept out of the moving picture's crop at every screen ratio. */
.events-content {
  width: 43%;
  padding: clamp(45px,8svh,100px) 4vw 55px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.events-content > .section-heading {
  padding: 0;
}

.events .section-heading h2 {
  font-size: clamp(34px,3.4vw,55px);
}

.event-tabs {
  gap: 2px 14px;
  margin: 22px -15px 12px;
}

.event-tabs button {
  padding: 10px 2px;
  font-size: 10px;
  line-height: 1.5;
  color: #493125;
}

.event-tabs button[aria-selected="true"] {
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.event-note-wrap {
  margin: 0;
  padding: 0;
}

.event-note {
  width: 100%;
  max-width: 420px;
  min-height: 0;
  padding: 23px 5px 7px;
  color: #493125;
}

.event-note h3 {
  font-size: clamp(39px,3.6vw,57px);
  margin: 14px 0 12px;
}

.event-description {
  max-width: 350px;
  margin: 16px auto;
}

.event-controls,
.gallery-controls {
  padding: 0;
  gap: 32px;
}

.event-controls button,
.gallery-controls button {
  min-width: 48px;
  min-height: 48px;
  padding: 8px 10px;
}

.story-letter {
  padding: 25px 0;
}

.story-copy > p:first-child {
  font-size: clamp(20px,1.8vw,25px);
}

.memory-tags span {
  border: 0;
  padding: 0;
}

.gallery-controls {
  margin-top: 14px;
}

/* The photographs reserve their real height, including the paper edges. */
.gallery-grid {
  --memory-width: min(31vw,330px);
  height: calc(var(--memory-width) * 4 / 3 + 44px);
  max-height: none;
}

.photo-button {
  width: var(--memory-width);
}

.photo-dialog .event-controls {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 12px;
  width: 100%;
}

/* Reserve the caption and navigation before sizing the photograph, including
   on a rotated phone where 72vh alone would push the controls out of view. */
.photo-dialog img {
  max-height: min(72svh,calc(90dvh - 160px));
}

.photo-dialog .event-controls button {
  font-size: 14px;
  line-height: 1.3;
  padding: 10px 4px;
  min-width: 0;
}

.photo-dialog .event-controls .counter {
  white-space: nowrap;
  letter-spacing: .08em;
}

.form-row {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.form-row > label {
  min-width: 0;
}

form input:not([type=checkbox]),form select,form textarea {
  font-size: 16px;
}

/* This quiet carved wall is a full scene, with room for longer guest details. */
.travel {
  background: #f1e6d3 url('assets/memories-wide.webp') center/cover no-repeat;
  padding: 90px 24px 135px;
}

.travel > .scene-picture {
  display: none;
}

.travel-content {
  width: min(540px,80vw);
  padding: 10px 12px;
}

.guest-details details,
.guest-details details:last-child {
  border: 0;
}

.guest-details details + details {
  margin-top: 3px;
}

.guest-details summary {
  min-height: 52px;
  padding: 14px 0;
}

.guest-details summary::after {
  margin-left: 12px;
}

.rsvp-stationery {
  padding: 30px 15px;
  width: min(530px,86vw);
}

.rsvp .button {
  margin: 26px 0 20px;
  font-size: 12px;
  padding: 15px 8px;
}

.wish-actions {
  padding: 0;
  bottom: 7%;
}

.wish-actions .text-button,
.wish-actions p {
  color: #fff3dd;
  text-shadow: 0 1px 6px #211322;
}

.wish-actions .text-button {
  font-size: 10px;
  line-height: 1.7;
}

/* Music and section navigation leave the scene visible behind them. */
.controls {
  inset: auto 22px max(9px,env(safe-area-inset-bottom)) auto;
  z-index: 35;
  gap: 24px;
  padding: 0;
}

.controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 0;
  color: var(--ruby);
  text-shadow: 0 1px 8px #fff5e5;
  font-size: 10px;
  letter-spacing: .06em;
  border: 0;
}

.controls button + button {
  border: 0;
}

.invitation-page[data-controls-tone="dark"] .controls button {
  color: #fff2da;
  text-shadow: 0 1px 8px #211322;
}

.controls button:focus-visible {
  outline-color: currentColor;
}

.nav-menu {
  inset: 0;
  width: 100%;
  max-height: none;
  min-width: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 1px;
  border: 0;
  padding: 45px 24px 80px;
  background: #f5ece0 url('assets/silk-wide.webp') center/cover no-repeat;
}

.nav-menu a {
  min-height: 44px;
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: clamp(23px,3.2svh,34px);
  padding: 7px 20px;
  color: var(--ruby);
}

.nav-menu a > span {
  font-family: 'Jost',sans-serif;
}

@media (min-width:760px) {
  /* Edge-to-edge silk and the celebration share one full-height scene.
     Neither area is an inset panel, and video can crop without reaching text. */
  .events {
    min-height: 100svh;
    background: #f4ece1;
  }

  .events > .scene-picture,
  .events > .scene-art {
    inset: 0 0 0 44%;
    width: 56%;
    height: 100%;
  }

  .events > .scene-picture .scene-art,
  .events > .scene-art {
    object-position: right center;
  }

  .events-content {
    width: 44%;
    max-width: none;
    min-height: max(100svh,690px);
    padding: 60px clamp(28px,3.5vw,80px);
    background: url('assets/silk-wide.webp') center/cover no-repeat;
  }

  .events .section-heading h2 {
    font-size: clamp(32px,3.2vw,50px);
  }

  .event-note {
    padding-inline: 0;
  }

  .event-tabs {
    margin-inline: -10px;
    gap: 0 12px;
  }
}

@media (min-width:760px) and (max-height:600px) {
  .events-content {
    min-height: 620px;
    padding-block: 35px 45px;
  }

  .events .section-heading h2 {
    font-size: 32px;
  }

  .events .section-heading .eyebrow {
    margin-bottom: 12px;
  }

  .event-note h3 {
    font-size: 39px;
  }

  .event-tabs {
    margin-top: 14px;
    margin-bottom: 4px;
  }
}

@media (max-width:759px) {
  /* Uninterrupted moving artwork first; free text follows on full-width silk.
     This avoids laying small live type across flowers, fire, or dark foliage. */
  .events {
    min-height: 0;
    background: #f4ece1 url('assets/silk-wide.webp') center bottom/auto 62% no-repeat;
  }

  .events > .scene-picture,
  .events > .scene-art {
    height: 76svh;
    min-height: 470px;
    bottom: auto;
  }

  .events > .scene-picture .scene-art,
  .events > .scene-art {
    object-position: center;
  }

  .events-content {
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: calc(max(76svh,470px) + 37px) 30px 72px;
    background: none;
    justify-content: flex-start;
  }

  .events-content > .section-heading {
    margin: 0;
    padding: 0;
    background: none;
  }

  .events .section-heading h2 {
    font-size: 36px;
  }

  .events .section-heading .eyebrow {
    font-size: 8px;
    margin-bottom: 11px;
  }

  .event-tabs {
    gap: 0 13px;
    margin: 19px -10px 8px;
  }

  .event-tabs button {
    font-size: 9px;
    padding: 10px 0;
    min-height: 44px;
  }

  .event-note-wrap {
    margin: 0;
    padding: 0;
  }

  .event-note {
    padding: 22px 0 6px;
    min-height: 0;
    max-width: 370px;
  }

  .event-note h3 {
    font-size: 44px;
  }

  .event-note .eyebrow {
    font-size: 9px;
    line-height: 1.6;
  }

  .event-venue {
    font-size: 23px;
  }

  .event-description {
    font-size: 19px;
    line-height: 1.55;
    margin: 17px auto;
  }

  .event-dress {
    font-size: 14px;
  }

  .event-controls {
    margin-top: 10px;
  }

  .story {
    background: #f2e8d8 url('assets/memories-wide.webp') center/auto 100% no-repeat;
    padding: 65px 30px 90px;
  }

  .story-letter {
    padding: 0;
  }

  .story-copy > p:first-child {
    font-size: 22px;
  }

  .gallery {
    padding-bottom: 80px;
  }

  .gallery-grid {
    --memory-width: min(70vw,300px);
  }

  .gallery-controls {
    gap: 20px;
    max-width: 100%;
  }

  .gallery-controls p {
    font-size: 10px;
  }

  .travel {
    min-height: 100svh;
    padding: 65px 20px 125px;
    background-position: center;
  }

  .travel-content {
    width: min(390px,84vw);
    padding: 0;
  }

  .travel .section-heading > p:not(.eyebrow) {
    font-size: 20px;
  }

  .venue-copy {
    margin-top: 28px;
  }

  .venue-copy p,
  .guest-details details p {
    font-size: 18px;
  }

  .guest-details summary {
    font-size: 22px;
  }

  .rsvp {
    min-height: 76svh;
    padding: 70px 25px;
  }

  .rsvp-stationery {
    width: 100%;
    max-width: 390px;
    padding: 0;
  }

  .rsvp .section-heading > p:not(.eyebrow) {
    font-size: 22px;
  }

  .rsvp .button {
    font-size: 11px;
  }

  .wish-actions {
    max-width: 88%;
    bottom: 9%;
  }

  .wish-actions .text-button {
    font-size: 10px;
  }

  .controls {
    left: 22px;
    right: 22px;
    bottom: max(6px,env(safe-area-inset-bottom));
    justify-content: space-between;
    gap: 15px;
  }

  .controls button {
    font-size: 9px;
    min-height: 44px;
    padding: 12px 0;
  }

  .nav-menu {
    inset: 0;
    padding-bottom: 78px;
  }
}

@media (max-width:480px) {
  #rsvp-dialog {
    padding: 24px 20px;
  }

  #rsvp-dialog .dialog-head { gap: 12px; }
  #rsvp-dialog .dialog-head h2 { font-size: clamp(32px,8vw,38px); line-height: 1.1; }
  .dialog-head [data-close] { white-space: nowrap; flex-shrink: 0; min-height: 44px; }

  .form-row {
    grid-template-columns: minmax(0,1fr);
    gap: 0;
  }
}

@media (max-width:360px) {
  .events-content {
    padding-inline: 23px;
  }

  .events .section-heading h2 {
    font-size: 33px;
  }

  .event-tabs {
    gap: 0 11px;
  }

  .event-note h3 {
    font-size: 40px;
  }
}