/* ── Are You Coming? — RSVP finale ──────────────────────────────────
     The page closes on a flat burgundy field framed by two vertical bands of
     Tajik ikat — a real cloth scan, cut to a seamless repeat-y tile, mirrored
     left/right. Centred between them: the serif question, a line of invitation
     copy, the deadline as a serif countdown register, and one cream "Let Us
     Know" plate that flips to wine on hover. One cloth, one cream, one ask. */
  .rsvp{
    --rsvp-wine:   #73002E;                 /* the flat velvet field — matches the ikat ground */
    --rsvp-cream:  #FBF9FA;                 /* luminous near-white — heading + numerals */
    --rsvp-dim:    rgba(251,249,250,.62);   /* invitation copy — reads ~#CFA8B8 on wine */
    --rsvp-faint:  rgba(251,249,250,.52);   /* clock labels */
    --rsvp-sep:    rgba(251,249,250,.55);   /* the middot between units */
    --rsvp-plate:  #FBFAF8;                  /* the cream CTA plate */
    --rsvp-ink:    #5E0C29;                  /* deep-wine type pressed into the plate */
    --rsvp-band:   clamp(60px, 21vw, 340px); /* width of each vertical ikat border */

    position: relative;
    z-index: 1;                /* paint above the fixed #gl shader */
    min-height: 100vh;         /* fallback: iOS Safari < 15.4 lacks svh */
    min-height: 100svh;
    display: flex;
    align-items: stretch;      /* the two side bands run the full height */
    background: var(--rsvp-wine);
    color: var(--rsvp-cream);
    font-family: 'LF Serif', 'Fraunces', Georgia, 'Times New Roman', serif;
    font-optical-sizing: auto;
    overflow: hidden;
  }

  /* the two vertical ikat borders — a real cloth scan, cut to a seamless repeat-y tile */
  .rsvp__band{
    flex: 0 0 var(--rsvp-band);
    align-self: stretch;
    background: url('../assets/img/ikat-band.webp') repeat-y center top;
    background-size: 100% auto;
  }
  .rsvp__band--r{ transform: scaleX(-1); }   /* mirror → the borders frame the page symmetrically */

  .rsvp__inner{
    position: relative; z-index: 1;
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: clamp(64px, 9vh, 120px) max(clamp(20px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  }

  /* the question — one upright serif register */
  .rsvp__heading{
    margin: 0;
    font-weight: 430;                  /* natural book weight — wine darkens perceived weight */
    font-size: clamp(38px, 5.6vw, 76px);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--rsvp-cream);
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1, "dlig" 1;
  }
  .rsvp__body{
    margin: clamp(14px, 1.8vw, 22px) auto 0;
    max-width: 46ch;                     /* ~3 lines on desktop, mirroring the invitation copy */
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(13.5px, 1.3vw, 16px);
    line-height: 1.55;
    letter-spacing: -0.003em;
    color: var(--rsvp-dim);
  }

  /* ── countdown — a serif register, centred under the copy ── */
  .rsvp__clock{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(12px, 1.8vw, 30px);
    margin: clamp(40px, 7vh, 96px) 0 clamp(46px, 8vh, 104px);
  }
  .unit{ display:flex; flex-direction:column; align-items:center; gap:.5em; }
  .unit__digits{
    display:flex;
    font-size: clamp(46px, 6vw, 92px);
    line-height: 1;
    font-weight: 420;
    color: var(--rsvp-cream);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
  }
  .digit{
    position: relative;
    display: inline-block;
    width: .60em;
    height: 1em;
    overflow: hidden;
  }
  .digit__face{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .unit__label{
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(11px, 1.1vw, 15px);
    letter-spacing: .02em;
    font-weight: 400;
    color: var(--rsvp-faint);
  }
  .rsvp__sep{
    align-self: flex-start;
    height: 1em;                      /* == numeral height → middot sits at their centre */
    display: flex; align-items: center;
    font-size: clamp(46px, 6vw, 92px);
    line-height: 1;
    font-weight: 300;
    color: var(--rsvp-sep);
  }

  /* ── the cream CTA plate — flips to wine on hover ── */
  .rsvp__cta{
    display: flex; align-items: center; justify-content: center;
    width: min(440px, 100%);
    background: var(--rsvp-plate);
    color: var(--rsvp-ink);
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(12.5px, 1.1vw, 14px);
    letter-spacing: .15em;
    text-indent: .15em;                  /* offset the trailing tracking → optically centred */
    text-transform: uppercase; text-decoration: none;
    padding: clamp(15px, 1.7vw, 20px) clamp(20px, 3vw, 40px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 12px 28px -18px rgba(30,0,12,.6);   /* the cream plate lifts a touch off the wine field */
    transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease;
  }
  .rsvp__cta:hover{
    background: var(--rsvp-wine); color: var(--rsvp-cream);
    border-color: rgba(251,249,250,.5);
    box-shadow: 0 10px 24px -18px rgba(0,0,0,.55);
  }
  .rsvp__cta:active{ transform: translateY(1px); box-shadow: 0 6px 16px -16px rgba(30,0,12,.5); }   /* presses into the cloth */
  .rsvp__cta:focus-visible{ outline: 2px solid var(--rsvp-cream); outline-offset: 3px; }

  .rsvp__note{
    margin-top: clamp(16px, 2.2vw, 24px);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(12px, 1.2vw, 13.5px);
    font-weight: 400;
    color: rgba(251,249,250,.42);
  }

  /* gentle fade + rise as the section scrolls into view (hidden only once JS arms it).
     Targets the heading + the invitation copy; the form / thank-you overlays run
     their own reveal so they are never caught by this entrance state. */
  .rsvp.rsvp-ready .rsvp__heading,
  .rsvp.rsvp-ready .rsvp__intro > *{
    opacity: 0; transform: translateY(26px); filter: blur(8px);
    transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1s ease;
  }
  .rsvp.rsvp-ready.is-in .rsvp__heading,
  .rsvp.rsvp-ready.is-in .rsvp__intro > *{ opacity: 1; transform: none; filter: blur(0); }
  .rsvp.rsvp-ready.is-in .rsvp__intro > *:nth-child(1){ transition-delay: .08s; }
  .rsvp.rsvp-ready.is-in .rsvp__intro > *:nth-child(2){ transition-delay: .16s; }
  .rsvp.rsvp-ready.is-in .rsvp__intro > *:nth-child(3){ transition-delay: .24s; }
  .rsvp.rsvp-ready.is-in .rsvp__intro > *:nth-child(4){ transition-delay: .32s; }
  /* the ikat borders settle in just behind the type */
  .rsvp.rsvp-ready .rsvp__band{ opacity: 0; transition: opacity 1.2s ease .15s; }
  .rsvp.rsvp-ready.is-in .rsvp__band{ opacity: 1; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .rsvp.rsvp-ready .rsvp__heading,
    .rsvp.rsvp-ready .rsvp__intro > *{ opacity:1; transform:none; filter:none; transition:none; }
    .rsvp.rsvp-ready .rsvp__band{ opacity:1; transition:none; }
  }
  @media (max-width: 560px){
    .rsvp{ --rsvp-band: clamp(40px, 13vw, 66px); }
    .rsvp__clock{ gap: clamp(8px, 3vw, 16px); margin: clamp(30px, 6vh, 52px) 0 clamp(34px, 6vh, 60px); }
    .unit__digits, .rsvp__sep{ font-size: clamp(40px, 13vw, 60px); }
    .unit__label{ font-size: 11px; }
    .rsvp__cta{ width: 100%; }
  }

  /* ── the three-step stage: invitation → form → thank-you ─────────────
     One positioning context inside the centred column. The invitation copy
     (.rsvp__intro) stays in normal flow, so the finale centres on it exactly
     as it did before the form existed. The form and thank-you are absolute
     overlays — zero layout cost — until a step is summoned, at which point that
     layer becomes the in-flow one and the section re-settles around it. */
  .rsvp__stage{ position: relative; width: 100%; display: flex; justify-content: center; }
  .rsvp__intro{ position: relative; display: flex; flex-direction: column; align-items: center; }

  .rsvp__form,
  .rsvp__thanks{
    position: absolute; top: 0; left: 0; right: 0; margin-inline: auto;
    width: min(440px, 100%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s linear .55s;
  }
  .rsvp__form{ display: flex; flex-direction: column; gap: clamp(13px, 1.7vw, 16px); text-align: left; }

  /* ① → ② : invitation rises out, the form rises in and takes over the height */
  .rsvp.is-form .rsvp__intro{
    position: absolute; top: 0; left: 0; right: 0; margin-inline: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .45s ease, transform .5s ease, visibility 0s linear .45s;
  }
  .rsvp.is-form .rsvp__form{
    position: relative; margin-inline: auto;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition: opacity .55s ease .12s, transform .6s cubic-bezier(.2,.7,.2,1) .12s, visibility 0s;
  }

  /* ② → ③ : form out, thank-you in */
  .rsvp.is-sent .rsvp__form{
    position: absolute; top: 0; left: 0; right: 0; margin-inline: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .45s ease, transform .5s ease, visibility 0s linear .45s;
  }
  .rsvp.is-sent .rsvp__thanks{
    position: relative; margin-inline: auto;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition: opacity .6s ease .12s, transform .65s cubic-bezier(.2,.7,.2,1) .12s, visibility 0s;
  }
  /* on the thank-you, retire the question so the gratitude stands alone (its
     space is kept, never collapsed, so nothing jumps). Specificity matches the
     entrance selector + .is-sent so it wins cleanly. */
  .rsvp.rsvp-ready.is-in.is-sent .rsvp__heading{
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .45s ease, transform .5s ease, visibility 0s linear .45s;
  }

  /* the invitation lead above the fields — compact, scannable guidance revealed
     the moment the form opens. Kept deliberately quiet so the eye settles on the
     fields; the schedule and the "Important" note each get their own register. */
  .rsvp__form-lead{
    margin: clamp(10px, 1.4vw, 16px) 0 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.05vw, 13px);
    line-height: 1.5;
    letter-spacing: -0.002em;
    color: var(--rsvp-dim);
    text-align: left;
  }
  .rsvp__form-lead p{ margin: 0 0 .7em; }
  .rsvp__form-lead p:last-child{ margin-bottom: 0; }
  .rsvp__form-lead .rsvp__lead-intro{ color: rgba(251,249,250,.72); }   /* the welcome reads a touch brighter */
  .rsvp__dates{ color: var(--rsvp-cream); white-space: nowrap; }
  .rsvp__form-lead .rsvp__lead-sign{ margin-top: .9em; font-size: .96em; color: rgba(251,249,250,.46); }

  /* the wedding schedule — a quiet bordered panel, dates set in cream serif */
  .rsvp__sched{
    margin: clamp(11px, 1.5vw, 15px) 0;
    padding: clamp(11px, 1.4vw, 14px) clamp(13px, 1.6vw, 16px);
    background: rgba(251,249,250,.04);
    border: 1px solid rgba(251,249,250,.12);
    border-radius: 9px;
  }
  .rsvp__sched .rsvp__sched-h{
    margin: 0 0 .7em;
    font-size: clamp(9.5px, .9vw, 10.5px);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(251,249,250,.6);
  }
  .rsvp__sched-list{
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .5em;
  }
  .rsvp__sched-list li{ display: flex; gap: .9em; align-items: baseline; }
  .rsvp__sched-day{
    flex: 0 0 auto; min-width: 4.3em;
    font-family: 'LF Serif', 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 480;
    font-size: clamp(14px, 1.35vw, 16px);
    letter-spacing: .01em;
    color: var(--rsvp-cream);
  }
  .rsvp__sched-ev{ flex: 1 1 auto; font-size: .98em; color: var(--rsvp-dim); }

  /* the "Important" note — held apart in a quiet aside with a cream caps tag */
  .rsvp__form-lead .rsvp__lead-note{
    margin: 0 0 .7em;
    padding: clamp(10px, 1.3vw, 13px) clamp(12px, 1.5vw, 15px);
    background: rgba(251,249,250,.045);
    border: 1px solid rgba(251,249,250,.14);
    border-left: 2px solid rgba(251,249,250,.55);
    border-radius: 8px;
    color: rgba(251,249,250,.66);
  }
  .rsvp__note-tag{
    display: inline-block;
    margin-right: .55em;
    font-size: .82em;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rsvp-cream);
  }

  /* hairline that parts the invitation guidance from the form fields */
  .rsvp__lead-rule{
    height: 1px; width: 100%;
    background: linear-gradient(90deg, transparent, rgba(251,249,250,.22) 18%, rgba(251,249,250,.22) 82%, transparent);
  }

  /* a labelled field — also resets the <fieldset> for the choice row */
  .field{
    display: flex; flex-direction: column; gap: 9px;
    width: 100%; min-width: 0;
    margin: 0; padding: 0; border: 0;
  }
  .field__label{
    padding: 0;                          /* <legend> reset */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(10.5px, 1vw, 11.5px);
    letter-spacing: .16em;               /* the smallest type carries the most tracking so the caps never knit together */
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(251,249,250,.80);        /* well past WCAG AA on the wine field — refined uppercase reads crisp */
  }
  .field__input{
    width: 100%; box-sizing: border-box;
    background: rgba(251,249,250,.045);
    border: 1px solid rgba(251,249,250,.46);   /* ≥3:1 non-text UI contrast (WCAG 1.4.11) so the field boundary is perceptible on wine */
    border-radius: 8px;
    color: var(--rsvp-cream);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 1.5vw, 17px);       /* ≥16px keeps iOS from zooming the field on focus */
    letter-spacing: .035em;                    /* a breath of tracking so the uppercase entry never crowds */
    text-transform: uppercase;
    line-height: 1.25;
    padding: 14px 16px;
    -webkit-appearance: none; appearance: none;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
  }
  .field__input::placeholder{ color: rgba(251,249,250,.34); letter-spacing: .035em; }
  .field__input:hover{ border-color: rgba(251,249,250,.6); }
  .field__input:focus{
    outline: none;
    border-color: rgba(251,249,250,.72);
    background: rgba(251,249,250,.085);
    box-shadow: 0 0 0 3px rgba(251,249,250,.08);
  }
  .field__input:user-invalid{ border-color: rgba(232,150,164,.62); }
  /* keep autofilled fields on the wine field instead of the browser's pale yellow */
  .field__input:-webkit-autofill,
  .field__input:-webkit-autofill:hover,
  .field__input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--rsvp-cream);
    -webkit-box-shadow: 0 0 0 1000px var(--rsvp-wine) inset;
    caret-color: var(--rsvp-cream);
    transition: background-color 9999s ease;
  }

  /* Yes · No · Deciding — three pills that flip to the cream plate when chosen
     (the same cream→wine identity as the CTA, read in reverse) */
  .field--choice{ gap: 9px; }
  .choice{ display: flex; gap: 10px; width: 100%; }
  .pill{ flex: 1 1 0; min-width: 0; position: relative; display: flex; }
  .pill input{
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
  }
  .pill span{
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    padding: 13px 6px;
    border: 1px solid rgba(251,249,250,.46);   /* ≥3:1 non-text UI contrast — the unselected pill outline is perceptible on wine */
    border-radius: 8px;
    background: rgba(251,249,250,.035);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(11.5px, 1.05vw, 13px);
    letter-spacing: .1em;
    text-indent: .1em;                         /* balance the trailing tracking → optically centred */
    text-transform: uppercase;
    color: rgba(251,249,250,.74);              /* AA on wine for the unselected label; flips to ink when chosen */
    -webkit-tap-highlight-color: transparent;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .12s ease;
  }
  .pill:hover span{ border-color: rgba(251,249,250,.66); color: var(--rsvp-cream); }
  .pill input:active + span{ transform: translateY(1px); }
  .pill input:focus-visible + span{ outline: 2px solid var(--rsvp-cream); outline-offset: 2px; }
  .pill input:checked + span{
    background: var(--rsvp-plate); color: var(--rsvp-ink);
    border-color: var(--rsvp-plate);
  }

  .rsvp__submit{ width: 100%; margin-top: clamp(4px, 1vw, 8px); }
  .rsvp__cta[disabled],
  .rsvp__cta[aria-disabled="true"]{ opacity: .6; cursor: default; pointer-events: none; }

  .rsvp__formerr{
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(12px, 1.2vw, 13px);
    line-height: 1.5;
    color: #F2B8C2;                      /* soft rose — legible on wine, never alarming */
    text-align: center;
  }
  .rsvp__formerr[hidden]{ display: none; }

  /* ③ the thank-you */
  .rsvp__thanks{ text-align: center; }
  .rsvp__thanks:focus{ outline: none; }
  .rsvp__thanks-h{
    margin: 0;
    font-family: 'LF Serif', 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 440;
    font-size: clamp(26px, 3.4vw, 40px);
    letter-spacing: -0.01em;
    color: var(--rsvp-cream);
  }
  .rsvp__thanks-b{
    margin: clamp(10px, 1.4vw, 16px) auto 0;
    max-width: 32ch;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(13.5px, 1.3vw, 15.5px);
    line-height: 1.55;
    color: var(--rsvp-dim);
  }

  @media (prefers-reduced-motion: reduce){
    .rsvp__intro, .rsvp__form, .rsvp__thanks,
    .rsvp.is-form .rsvp__intro, .rsvp.is-form .rsvp__form,
    .rsvp.is-sent .rsvp__form, .rsvp.is-sent .rsvp__thanks,
    .rsvp.rsvp-ready.is-in.is-sent .rsvp__heading{ transition: none; }
  }
  @media (max-width: 560px){
    .rsvp__form, .rsvp__thanks{ width: 100%; }
    .choice{ gap: 7px; }
    .pill span{ padding: 12px 4px; letter-spacing: .05em; text-indent: .05em; }
  }
  /* on the narrowest phones the form column is tight (the ikat bands still take
     their share); shrink the pill type/padding a touch so "Deciding" and its two
     siblings sit on one clean row instead of nudging past the form's edge. */
  @media (max-width: 380px){
    .choice{ gap: 5px; }
    .pill span{ padding: 11px 2px; font-size: 12px; letter-spacing: .03em; text-indent: .03em; }
  }