/* Copy of src/components/themes/gading/gading.css for the static demo; container queries become media queries. */
/* Gading: an ivory card in a forest-green envelope, scoped to the native renderer.
   public/themes/gading/css/style.css is a copy of this file for the static demo. */
@font-face {
  font-family: "gading-Ibarra Real Nova";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/themes/gading/assets/fonts/ibarra-real-nova-400.ttf") format("truetype");
}
@font-face {
  font-family: "gading-Ibarra Real Nova";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/themes/gading/assets/fonts/ibarra-real-nova-500.ttf") format("truetype");
}
@font-face {
  font-family: "gading-Ibarra Real Nova";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/themes/gading/assets/fonts/ibarra-real-nova-600.ttf") format("truetype");
}
@scope (.local-gading) {
  :scope {
    --forest: #1f3329;
    --forest-deep: #16251d;
    --forest-soft: #2a4337;
    --ivory: #f4eee2;
    --ivory-deep: #ebe3d3;
    --ink: #1d2a23;
    --muted: #4b5a51;
    --brass: #b98b4e;
    --brass-light: #d6b47c;
    --clay: #9c4a32;
    --on-forest: #f4eee2;
    --on-forest-muted: #c3cdc4;
    --serif: "gading-Ibarra Real Nova", Georgia, serif;
    --screen-height: min(870px, calc(100dvh - 68px));
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-fold: cubic-bezier(0.65, 0, 0.35, 1);
    /* Shared local-theme rules read these names. */
    --gold: var(--brass);
    --paper: #fbf8f1;

    background: var(--forest-deep);
    color: var(--ink);
    margin: 0;
    font: 400 15px / 1.7 var(--serif);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  button,
  input,
  textarea,
  select {
    font: inherit;
  }
  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    cursor: pointer;
    color: inherit;
  }
  a {
    color: inherit;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  h1,
  h2,
  h3,
  h4,
  p {
    margin: 0;
  }
  h1,
  h2,
  h3,
  h4 {
    font-weight: 500;
    text-wrap: balance;
  }
  button:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 4px;
  }
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
  }
  [hidden] {
    display: none !important;
  }
  svg:not(.gading-seal svg, .envelope-flap svg) {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Stage */
  .desktop-scene {
    display: none;
  }
  .preview-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 26px 20px;
  }
  .phone-shell {
    position: relative;
    width: 440px;
    max-width: 100%;
    padding: 6px;
    background: var(--forest-soft);
    border-radius: 30px;
    box-shadow:
      0 28px 80px #050c0866,
      0 0 0 1px #b98b4e40;
  }
  /* The envelope cover is one screen; the page scrolls only after it opens. */
  .invitation:has(> .cover:not([hidden])) {
    overflow-y: hidden;
  }
  .invitation {
    position: relative;
    height: var(--screen-height);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 24px;
    background: var(--ivory);
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior: contain;
    container-type: inline-size;
  }
  .invitation::-webkit-scrollbar {
    display: none;
  }

  /* Shared type */
  .eyebrow {
    font: 400 12px / 1.5 var(--serif);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clay);
  }
  .names {
    font: 500 clamp(36px, 11cqw, 46px) / 1 var(--serif);
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .names > .name {
    display: block;
  }
  .names > .amp {
    font-weight: 400;
    color: var(--clay);
  }
  .names.stacked > .amp {
    display: inline-block;
    margin: 0.08em 0.18em 0 0.9em;
    font-size: 0.72em;
  }
  .names.stacked > .amp + .name {
    display: inline;
  }
  .names.inline > .name {
    display: inline;
  }
  .names.inline > .amp {
    margin-inline: 0.22em;
  }
  .gading-lines {
    display: grid;
    gap: 3px;
    width: 56px;
    margin: 18px 0 0;
  }
  .gading-lines::before,
  .gading-lines::after,
  .gading-lines > i {
    content: "";
    display: block;
    height: 1px;
    background: var(--brass);
    opacity: 0.75;
  }
  .gading-lines > i {
    width: 70%;
  }
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 46px;
    padding: 11px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    font: 500 15px / 1.3 var(--serif);
    letter-spacing: 0.02em;
    transition:
      background-color 0.2s,
      color 0.2s,
      transform 0.2s var(--ease);
  }
  .button:active {
    transform: scale(0.97);
  }
  .primary,
  .button-dark {
    background: var(--forest);
    color: var(--on-forest);
  }
  .primary:hover,
  .button-dark:hover {
    background: var(--forest-soft);
  }
  .outline {
    background: transparent;
    border-color: var(--brass);
    color: var(--ink);
  }
  .outline:hover {
    background: var(--ivory-deep);
  }
  .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: 15px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    text-decoration-color: var(--brass);
  }
  .small {
    font-size: 13px;
    color: var(--muted);
  }

  /* Wax seal: initials pressed into an irregular disc */
  .gading-seal {
    position: relative;
    display: grid;
    place-items: center;
    width: 84px;
    aspect-ratio: 1;
    color: var(--ivory);
    filter: drop-shadow(0 6px 10px #0c140f55);
  }
  .gading-seal > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .gading-seal .wax {
    fill: var(--clay);
  }
  .gading-seal .ring {
    fill: none;
    stroke: #d79a80;
    stroke-width: 1;
    opacity: 0.7;
  }
  .gading-seal > span {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.06em;
    font: 500 26px / 1 var(--serif);
    letter-spacing: 0.02em;
  }
  .gading-seal > span > i {
    font-style: normal;
    font-weight: 400;
    font-size: 0.68em;
    opacity: 0.85;
  }

  /* Cover: the envelope */
  .cover {
    --flap: clamp(120px, calc(var(--screen-height) * 0.26), 250px);

    position: relative;
    isolation: isolate;
    min-height: var(--screen-height);
    overflow: hidden;
    background: var(--forest);
    color: var(--on-forest);
    perspective: 1100px;
  }
  .envelope-flap {
    position: absolute;
    z-index: 3;
    inset: 0 0 auto;
    height: var(--flap);
    transform-origin: top center;
  }
  .envelope-flap svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .envelope-flap .flap-fill {
    fill: var(--forest-soft);
  }
  .envelope-flap .flap-line {
    fill: none;
    stroke: var(--brass);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }
  .envelope-flap .flap-line.faint {
    opacity: 0.45;
  }
  .cover-seal {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: calc(var(--flap) - 46px);
    translate: -50% 0;
  }
  .cover-content {
    position: relative;
    z-index: 2;
    min-height: var(--screen-height);
    padding: calc(var(--flap) + 54px) 28px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .cover-address {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
  }
  .guest {
    min-width: 0;
    overflow-wrap: break-word;
  }
  .guest p {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass-light);
  }
  .guest strong {
    display: block;
    margin-top: 6px;
    font: 400 clamp(24px, 7.4cqw, 30px) / 1.15 var(--serif);
  }
  .cover-photo {
    width: 92px;
    aspect-ratio: 4 / 5;
    padding: 6px;
    background: var(--ivory);
    rotate: 3deg;
    mask:
      linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat,
      radial-gradient(circle 3px at 3px 3px, #0000 96%, #000) -3px -3px / 8px 8px round;
    box-shadow: 0 6px 16px #0b130e66;
  }
  .cover-photo > :is(img, .ja-adjusted-photo) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cover-rule {
    height: 1px;
    margin: 26px 0 22px;
    background: linear-gradient(90deg, var(--brass), #b98b4e00);
  }
  .cover .eyebrow {
    color: var(--brass-light);
  }
  .cover .names {
    margin-top: 10px;
    color: var(--on-forest);
  }
  .cover .names > .amp {
    color: var(--brass-light);
  }
  .cover-date {
    margin: 14px 0 32px;
    font-size: 15px;
    letter-spacing: 0.12em;
    color: var(--on-forest-muted);
  }
  .cover-button {
    align-self: flex-start;
    background: var(--ivory);
    color: var(--forest);
  }
  .cover-button:hover {
    background: #fff9ee;
  }
  .cover-reveal {
    animation: gading-rise 1s var(--ease) both;
  }
  .cover-reveal:nth-child(2) {
    animation-delay: 0.12s;
  }
  .cover-reveal:nth-child(3) {
    animation-delay: 0.24s;
  }
  .cover-reveal:nth-child(4) {
    animation-delay: 0.36s;
  }
  .cover-reveal:nth-child(5) {
    animation-delay: 0.48s;
  }
  .cover-reveal:nth-child(6),
  .cover-reveal:nth-child(7) {
    animation-delay: 0.6s;
  }
  .cover-seal {
    animation: gading-sealPress 0.9s var(--ease) 0.2s both;
  }
  .cover.is-opening {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    pointer-events: none;
    animation: gading-coverExit 1.1s var(--ease-fold) both;
  }
  .cover.is-opening .envelope-flap {
    animation: gading-flapOpen 0.55s var(--ease-fold) both;
  }
  .cover.is-opening .cover-seal {
    animation: gading-sealBreak 0.4s var(--ease) both;
  }

  /* Opening card */
  .page-content {
    position: relative;
  }
  .opening-motion {
    animation: gading-fade 0.9s var(--ease) both;
  }
  .hero {
    position: relative;
    display: flex;
    min-height: var(--screen-height);
    padding: 16px 16px 92px;
    background: var(--forest);
  }
  .hero-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 6px;
    background: var(--ivory);
  }
  .hero-slides {
    position: relative;
    flex: 0 0 auto;
    height: clamp(230px, calc(var(--screen-height) * 0.44), 400px);
    overflow: hidden;
    border-radius: 3px;
    background: var(--ivory-deep);
  }
  .hero-slides > :is(img, .ja-adjusted-photo) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0;
    transition: opacity 1.3s ease;
  }
  .hero-slides > .active {
    opacity: 1;
  }
  .hero-seal {
    width: 128px;
    margin: 0 0 8px 6px;
  }
  .hero-seal > span {
    font-size: 34px;
  }
  .hero-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 10px 4px;
  }
  .hero-copy .eyebrow {
    margin-bottom: 10px;
  }
  .hero-date {
    margin: 14px 0 0;
    font-size: 15px;
    color: var(--muted);
  }
  .countdown {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #b98b4e66;
  }
  .countdown > div {
    display: flex;
    align-items: baseline;
    gap: 5px;
  }
  .countdown strong {
    font: 500 clamp(21px, 6.6cqw, 26px) / 1 var(--serif);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  .countdown span {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--muted);
  }
  .scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: auto;
    padding: 18px 0 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
  }
  .scroll-cue span {
    animation: gading-cue 2.4s ease-in-out infinite;
  }
  .opening-motion .hero-card {
    animation: gading-cardIn 1.2s var(--ease) both;
  }
  .opening-motion .hero-copy > * {
    animation: gading-rise 1.1s var(--ease) both;
  }
  .opening-motion .hero-copy > :nth-child(2) {
    animation-delay: 0.45s;
  }
  .opening-motion .hero-copy > :nth-child(3) {
    animation-delay: 0.55s;
  }
  .opening-motion .hero-copy > :nth-child(n + 4) {
    animation-delay: 0.7s;
  }

  /* Sections */
  .section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    scroll-margin-top: 0;
    background: var(--ivory);
  }
  .section.tone-forest {
    background: var(--forest);
    color: var(--on-forest);
  }
  .section.tone-forest::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid #b98b4e55;
    border-radius: 4px;
    pointer-events: none;
  }
  .section.tone-sand {
    background: var(--ivory-deep);
  }
  .section-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 56px);
    max-width: 390px;
    margin: 0 auto;
    padding: 76px 0 84px;
  }
  .section-heading {
    margin-bottom: 30px;
  }
  .section-heading h2 {
    margin-top: 8px;
    font: 500 clamp(30px, 9cqw, 36px) / 1.05 var(--serif);
    letter-spacing: -0.01em;
  }
  .section-heading > .local-prose {
    margin-top: 18px;
    color: var(--muted);
  }
  .tone-forest .eyebrow {
    color: var(--brass-light);
  }
  .tone-forest .section-heading > .local-prose,
  .tone-forest .local-prose {
    color: var(--on-forest-muted);
  }

  /* Intro */
  .arabic {
    font:
      400 22px / 1.9 Georgia,
      serif;
    text-align: center;
    color: var(--forest);
  }
  .intro .arabic:first-child {
    margin-bottom: 40px;
  }
  .intro .section-inner > .local-prose {
    font-size: 16px;
  }
  .verse {
    margin-top: 34px;
    padding: 26px 22px;
    border-radius: 4px;
    background: var(--forest);
    color: var(--on-forest);
  }
  .verse .arabic {
    margin-bottom: 18px;
    color: var(--on-forest);
  }
  .verse blockquote {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--on-forest);
  }
  .verse .eyebrow {
    color: var(--brass-light);
  }

  /* Couple */
  .person {
    position: relative;
  }
  .person-photo {
    position: relative;
    width: min(100%, 300px);
    aspect-ratio: 4 / 5;
    margin: 0 0 26px;
  }
  .person-photo::after {
    content: "";
    position: absolute;
    inset: 10px -10px -10px 10px;
    z-index: -1;
    border: 1px solid var(--brass);
    border-radius: 3px;
  }
  .person-photo > :is(img, .ja-adjusted-photo) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: 3px;
  }
  .person.groom .person-photo {
    margin-left: auto;
  }
  .person.groom .person-photo::after {
    inset: 10px 10px -10px -10px;
  }
  .person .gading-seal {
    margin-bottom: 22px;
  }
  .person h3 {
    margin: 6px 0 12px;
    font: 500 clamp(28px, 8.4cqw, 34px) / 1.08 var(--serif);
  }
  .person .local-prose {
    color: var(--muted);
  }
  .person.groom {
    text-align: right;
  }
  .person.groom .gading-seal {
    margin-left: auto;
  }
  .instagram {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: 6px;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-color: var(--brass);
    text-underline-offset: 5px;
  }
  .couple-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 44px 0;
    font: 400 44px / 1 var(--serif);
    color: var(--clay);
  }
  .couple-divider::before,
  .couple-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #b98b4e88;
  }

  /* Interlude */
  .photo-interlude {
    position: relative;
    height: min(440px, 110cqw);
    overflow: hidden;
    background: var(--forest);
  }
  .photo-interlude > :is(img, .ja-adjusted-photo) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
  }
  .photo-interlude::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(#1f332900 40%, #16251dd9);
  }
  .photo-interlude > p {
    position: absolute;
    z-index: 1;
    left: 28px;
    right: 28px;
    bottom: 30px;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass-light);
  }
  .photo-interlude > p > span {
    display: block;
    margin-top: 6px;
    font: 500 34px / 1.1 var(--serif);
    letter-spacing: 0;
    text-transform: none;
    color: var(--on-forest);
  }

  /* Events: tickets */
  .event-card {
    position: relative;
    margin-bottom: 16px;
    padding: 22px 22px 18px;
    border: 1px solid var(--brass);
    border-radius: 6px;
    background: var(--ivory);
    mask:
      radial-gradient(circle 10px at 0 64px, #0000 97%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle 10px at 100% 64px, #0000 97%, #000) right / 51% 100% no-repeat;
  }
  .event-card:nth-of-type(even) {
    background: var(--forest);
    color: var(--on-forest);
  }
  .event-date-line {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .event-card:nth-of-type(even) .event-date-line {
    color: var(--brass-light);
  }
  .event-card h3 {
    margin-top: 6px;
    font: 500 26px / 1.15 var(--serif);
  }
  .event-time {
    margin-top: 4px;
    font-size: 15px;
    color: var(--muted);
  }
  .event-card:nth-of-type(even) :is(.event-time, .local-prose) {
    color: var(--on-forest-muted);
  }
  .event-location {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #b98b4e99;
  }
  .event-location h4 {
    font: 500 17px / 1.35 var(--serif);
  }
  .event-location .local-prose {
    margin-top: 2px;
    font-size: 14px;
    color: var(--muted);
  }
  .event-card .text-link {
    margin-top: 10px;
  }
  .event-note {
    margin-top: 28px;
  }
  .event-note p {
    color: var(--muted);
  }
  .event-note .button {
    margin-top: 18px;
  }

  /* Story */
  .story-entry {
    position: relative;
    margin-top: 30px;
    padding-left: 54px;
  }
  .story-entry > span {
    position: absolute;
    left: 0;
    top: 2px;
    font: 500 22px / 1 var(--serif);
    color: var(--brass-light);
  }
  .story-entry h3 {
    margin-bottom: 8px;
    font: 500 22px / 1.25 var(--serif);
  }
  .story-period {
    display: block;
    margin-bottom: 4px;
  }
  .story .local-wide-photo {
    margin: 0 0 8px;
    border-radius: 3px;
  }

  /* Schedule */
  .timeline {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .timeline li {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #b98b4e66;
  }
  .timeline li:last-child {
    border-bottom: 1px solid #b98b4e66;
  }
  .timeline time {
    grid-row: span 2;
    padding-top: 3px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--clay);
  }
  .timeline h3 {
    font: 500 19px / 1.3 var(--serif);
  }
  .timeline .local-prose {
    margin-top: 4px;
    font-size: 14px;
    color: var(--muted);
  }

  /* Gift */
  .gift-note {
    margin-bottom: 20px;
    color: var(--muted);
  }
  .bank-list {
    display: grid;
    gap: 10px;
  }
  .bank-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 14px;
    padding: 14px 16px;
    border-radius: 6px;
    background: var(--ivory-deep);
  }
  .bank-label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    overflow-wrap: anywhere;
  }
  .bank-number {
    font: 500 22px / 1.25 var(--serif);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .bank-row > .copy-button {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
  .copy-button {
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--forest);
    color: var(--on-forest);
    font-size: 14px;
    transition: background-color 0.2s;
  }
  .copy-button:hover {
    background: var(--forest-soft);
  }
  .physical-gift {
    margin-top: 10px;
  }
  .address-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 12px 16px;
    border: 1px solid var(--brass);
    border-radius: 6px;
    background: transparent;
    font-size: 16px;
    text-align: left;
  }
  .address-toggle svg {
    width: 18px;
    height: 18px;
    transition: rotate 0.25s var(--ease);
  }
  .address-toggle[aria-expanded="true"] svg {
    rotate: 180deg;
  }
  .address-panel {
    padding: 16px;
    border: 1px solid var(--brass);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    margin-top: -4px;
  }
  .address-panel > strong {
    font: 500 19px var(--serif);
  }
  .address-panel .local-prose {
    margin-top: 4px;
    color: var(--muted);
  }
  .address-panel .small {
    margin-top: 8px;
  }
  .address-panel .copy-button {
    margin-top: 14px;
  }
  .address-toggle[aria-expanded="true"] {
    border-radius: 6px 6px 0 0;
  }

  /* Wishes */
  .rsvp-form {
    padding: 22px 20px;
    border-radius: 6px;
    background: var(--ivory);
  }
  .rsvp-form label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
  }
  .rsvp-form input,
  .rsvp-form select,
  .rsvp-form textarea,
  .rsvp-form .ja-theme-select-trigger {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 6px 0 18px;
    padding: 11px 12px;
    border: 1px solid #b98b4e99;
    border-radius: 4px;
    background: #fbf8f1;
    color: var(--ink);
    font-size: 15px;
  }
  .rsvp-form textarea {
    min-height: 120px;
    resize: vertical;
  }
  .rsvp-form .ja-theme-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    text-align: left;
  }
  .rsvp-form .ja-theme-select-field > label {
    margin-bottom: 0;
  }
  .rsvp-form .button {
    width: 100%;
  }
  .local-note {
    padding: 18px;
    border: 1px dashed #b98b4e99;
    border-radius: 6px;
    font-size: 14px;
    color: var(--muted);
  }
  /* The shared form announces the party limit with a generic Alert; keep it a quiet hint. */
  .rsvp-form .ja-response-limit {
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 0;
    border-radius: 4px;
    background: var(--ivory-deep);
    color: var(--muted);
    box-shadow: none;
    font-size: 14px;
  }
  .rsvp-form .ja-response-limit * {
    color: inherit;
    font: inherit;
  }
  .rsvp-form + .local-note {
    margin-top: 12px;
    padding: 0 4px;
    border: 0;
  }
  .form-message {
    margin-top: 12px;
    font-size: 14px;
    color: var(--clay);
  }
  .wish-stats {
    display: flex;
    gap: 28px;
    margin: 30px 0 4px;
  }
  .wish-stats p {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .wish-stats strong {
    font: 500 28px / 1 var(--serif);
    color: var(--clay);
  }
  .wish-stats span {
    font-size: 14px;
    color: var(--muted);
  }
  .wish-list {
    overflow-wrap: anywhere;
  }
  .wish {
    padding: 18px 0;
    border-bottom: 1px solid #b98b4e55;
    animation: gading-rise 0.5s var(--ease) both;
  }
  .wish-name {
    font: 500 16px / 1.4 var(--serif);
  }
  .wish .local-prose,
  .wish > p {
    margin-top: 6px;
    color: var(--muted);
  }
  .load-more {
    display: flex;
    margin: 22px 0 0;
  }

  /* Gallery */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .gallery-item {
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    border-radius: 3px;
    overflow: hidden;
    background: var(--forest-soft);
  }
  .gallery-item :is(img, .ja-adjusted-photo) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transition: scale 0.5s var(--ease);
  }
  .gallery-item:hover :is(img, .ja-adjusted-photo) {
    scale: 1.04;
  }
  .gallery-item:first-child,
  .gallery-item:nth-child(even):last-child {
    grid-column: span 2;
    aspect-ratio: 3 / 2;
  }

  /* Closing */
  .closing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--screen-height);
    text-align: center;
  }
  .closing .section-inner {
    padding: 80px 0 96px;
  }
  .closing h2 {
    margin: 8px 0 18px;
    font: 500 clamp(34px, 10cqw, 42px) / 1.05 var(--serif);
  }
  .closing .section-inner > .local-prose {
    color: var(--on-forest-muted);
  }
  .closing-photo {
    position: relative;
    width: min(76%, 260px);
    aspect-ratio: 4 / 5;
    margin: 36px auto 30px;
  }
  .closing-photo::after {
    content: "";
    position: absolute;
    inset: 10px -10px -10px 10px;
    z-index: -1;
    border: 1px solid var(--brass);
    border-radius: 3px;
  }
  .closing-photo > :is(img, .ja-adjusted-photo) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
  }
  .closing-seal {
    width: 120px;
    margin: 36px auto 30px;
  }
  .closing-seal > span {
    font-size: 36px;
  }
  .closing .names {
    font-size: clamp(30px, 9cqw, 38px);
    color: var(--on-forest);
  }
  .closing .names > .amp {
    color: var(--brass-light);
  }
  .closing .gading-lines {
    margin: 20px auto;
  }
  .closing-family {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-light) !important;
  }
  .footer {
    padding: 22px 24px 96px;
    background: var(--forest-deep);
    color: var(--on-forest-muted);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
  }

  /* Chrome */
  .floating-controls {
    position: absolute;
    z-index: 50;
    top: 18px;
    right: 17px;
    display: flex;
    gap: 6px;
  }
  .floating-controls button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #b98b4e88;
    border-radius: 6px;
    background: #f4eee2eb;
    color: var(--forest);
  }
  .floating-controls svg {
    width: 17px;
    height: 17px;
  }
  .floating-controls button[aria-pressed="true"] {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--on-forest);
  }
  .floating-controls button:disabled {
    opacity: 0.5;
    cursor: default;
  }
  .bottom-nav {
    position: absolute;
    z-index: 50;
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: 62px;
    padding: 0 8px 4px;
    display: grid;
    grid-template-columns: repeat(var(--nav-count, 7), minmax(0, 1fr));
    border-top: 1px solid #b98b4e66;
    border-radius: 0 0 24px 24px;
    background: var(--forest);
  }
  .bottom-nav :is(button, a) {
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9fb0a4;
    transition: color 0.2s;
  }
  .bottom-nav :is(button, a)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brass-light);
    translate: -50% 0;
    scale: 0;
    transition: scale 0.25s var(--ease);
  }
  .bottom-nav :is(button, a)[aria-current] {
    color: var(--on-forest);
  }
  .bottom-nav :is(button, a)[aria-current]::after {
    scale: 1;
  }
  .bottom-nav svg {
    width: 20px;
    height: 20px;
  }

  /* Lightbox and toast */
  .lightbox {
    width: min(92vw, 700px);
    max-height: 94dvh;
    padding: 12px;
    border: 0;
    border-radius: 6px;
    overflow: visible;
    background: var(--ivory);
    color: var(--ink);
  }
  .lightbox::backdrop {
    background: #0f1a14eb;
  }
  .lightbox > img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 78dvh;
    margin: auto;
    object-fit: contain;
  }
  .lightbox > .lightbox-close {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--forest);
    color: var(--on-forest);
    font-size: 24px;
    line-height: 1;
  }
  .lightbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 10px;
    font-size: 14px;
  }
  .lightbox-toolbar button {
    width: 44px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 22px;
  }
  .toast {
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: 92px;
    max-width: 90vw;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--forest);
    color: var(--on-forest);
    font-size: 14px;
    text-align: center;
    box-shadow: 0 8px 24px #0c140f40;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition:
      opacity 0.2s,
      transform 0.2s,
      visibility 0.2s;
  }
  .toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  /* Scroll reveal */
  .reveal {
    opacity: 1;
  }
  .motion-ready .reveal {
    opacity: 0;
  }
  .motion-ready .reveal.is-visible {
    animation: gading-rise 1s var(--ease) both;
  }
  .motion-ready .event-card.is-visible {
    animation: gading-ticketIn 0.9s var(--ease) both;
  }

  /* Without photos the opening card centers on the seal instead of leaving a void. */
  :is(.no-photo .hero-card, .hero-card:not(:has(.hero-slides))) {
    justify-content: center;
    padding: 28px 18px;
  }
  :is(.no-photo .hero-card, .hero-card:not(:has(.hero-slides))) .hero-copy {
    flex: none;
  }
  :is(.no-photo .hero-card, .hero-card:not(:has(.hero-slides))) .names {
    font-size: clamp(42px, 13cqw, 54px);
  }
  :is(.no-photo .hero-card, .hero-card:not(:has(.hero-slides))) .scroll-cue {
    margin-top: 36px;
  }

  @keyframes gading-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes gading-ticketIn {
    from {
      opacity: 0;
      transform: translateY(16px) rotate(-1deg);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes gading-cardIn {
    from {
      opacity: 0;
      transform: translateY(48px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes gading-sealPress {
    from {
      opacity: 0;
      scale: 1.35;
    }
    60% {
      opacity: 1;
      scale: 0.96;
    }
    to {
      opacity: 1;
      scale: 1;
    }
  }
  @keyframes gading-sealBreak {
    to {
      opacity: 0;
      scale: 0.7;
      rotate: -12deg;
    }
  }
  @keyframes gading-flapOpen {
    to {
      transform: rotateX(178deg);
      opacity: 0.4;
    }
  }
  /* The flap opens first, then the whole envelope slides away to reveal the card. */
  @keyframes gading-coverExit {
    0%,
    40% {
      transform: none;
    }
    to {
      transform: translateY(-100%);
    }
  }
  @keyframes gading-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes gading-cue {
    50% {
      translate: 0 4px;
    }
  }

  @media (min-width: 1100px) {
    .desktop-scene {
      position: fixed;
      inset: 0 500px 0 0;
      display: block;
      overflow: hidden;
      background: var(--forest-deep);
    }
    .desktop-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: center 40%;
    }
    .desktop-shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #16251df2 0%, #16251d99 42%, #16251d1a 75%);
    }
    .desktop-copy {
      position: absolute;
      z-index: 2;
      left: clamp(48px, 7vw, 110px);
      bottom: 12%;
      max-width: 520px;
      color: var(--on-forest);
    }
    .desktop-copy .gading-seal {
      width: 96px;
      margin-bottom: 30px;
    }
    .desktop-copy .eyebrow {
      color: var(--brass-light);
    }
    .desktop-copy h2 {
      margin-top: 14px;
      font: 500 clamp(52px, 5.4vw, 76px) / 1 var(--serif);
      letter-spacing: -0.015em;
    }
    .desktop-copy h2 > .amp {
      color: var(--brass-light);
    }
    .desktop-copy .gading-lines {
      margin: 26px 0 20px;
    }
    .desktop-copy > p:last-child {
      font-size: 18px;
      letter-spacing: 0.08em;
      color: var(--on-forest-muted);
    }
    .preview-stage {
      --screen-height: 100dvh;
      width: 500px;
      margin-left: auto;
      padding: 0;
    }
    .phone-shell {
      width: 100%;
      padding: 0;
      border-radius: 0;
      background: none;
      box-shadow: -1px 0 0 #b98b4e55;
    }
    .invitation {
      border-radius: 0;
    }
    .bottom-nav {
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 0;
    }
    .toast {
      left: auto;
      right: 32px;
      max-width: 420px;
      transform: translateY(10px);
    }
    .toast.show {
      transform: translateY(0);
    }
  }
  @media (max-width: 600px) {
    .preview-stage {
      --screen-height: 100dvh;
      min-height: 100dvh;
      padding: 0;
    }
    .phone-shell {
      width: 100%;
      max-width: 500px;
      padding: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
    }
    .invitation {
      border-radius: 0;
    }
    .section-inner {
      width: calc(100% - 48px);
    }
    .cover-content {
      padding-inline: 24px;
    }
    .floating-controls {
      top: 13px;
      right: 13px;
    }
    .bottom-nav {
      left: 0;
      right: 0;
      bottom: 0;
      height: calc(60px + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
      border-radius: 0;
    }
  }
  @media (max-height: 700px) {
    .cover {
      --flap: clamp(120px, calc(var(--screen-height) * 0.24), 170px);
    }
    .cover-content {
      padding-top: calc(var(--flap) + 54px);
      padding-bottom: 28px;
    }
    .cover-rule {
      margin: 18px 0 14px;
    }
    .hero-slides {
      height: clamp(200px, calc(var(--screen-height) * 0.38), 320px);
    }
  }
  @media (max-width: 360px) {
    .section-inner {
      width: calc(100% - 40px);
    }
    .cover-photo {
      width: 78px;
    }
    .event-card {
      padding: 20px 18px 16px;
    }
    .rsvp-form {
      padding: 18px 14px;
    }
    .timeline li {
      grid-template-columns: 70px minmax(0, 1fr);
    }
    .floating-controls button {
      width: 33px;
      height: 33px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
    .motion-ready .reveal {
      opacity: 1 !important;
      transform: none !important;
    }
    .cover.is-opening {
      opacity: 0;
      transform: none;
    }
  }
}