/* Hatolie is a licensed display font (not distributed via Google Fonts / CDN).
     If it's installed locally it will be picked up here; otherwise Playfair
     Display — a close elegant-serif match — is used as the fallback. To use
     the real Hatolie file, add an @font-face rule pointing at your own
     hosted .woff2/.otf and it will take over automatically. */
  @font-face{
    font-family:'Hatolie';
    src:local('Hatolie');
    font-display:swap;
  }
  /* Titania Shadow is likewise a freeware display font not on Google Fonts.
     Same approach: picked up if installed locally, otherwise falls back to
     the display serif so buttons still look intentional. */
  @font-face{
    font-family:'Titania Shadow';
    src:local('Titania Shadow');
    font-display:swap;
  }
  :root{
    /* ---- bright, playful (light) ---- */
    --bg: #FFF3E1;
    --bg-soft: #FFE7C2;
    --ink: #241732;
    --ink-soft: #5a4c6b;
    --coral: #E0611F;
    --teal: #2E9653;
    --yellow: #FFC93C;
    --pink: #FF8AC0;
    --violet: #6C4EF2;
    --card-border: rgba(36,23,50,0.14);

    --display: 'Hatolie', 'Playfair Display', serif;
    --button-font: 'Titania', 'Playfair Display', serif;
    --body: 'Cormorant Garamond', serif;
    --utility: 'Marcellus', serif;

    --max: 1200px;
    --nav-h: 76px;
    --radius: 10px;

    color-scheme: light;
  }

  [data-theme="dark"]{
    --bg: #1C1330;
    --bg-soft: #251B41;
    --ink: #FBEFDD;
    --ink-soft: #C9BAD9;
    --coral: #FFA64D;
    --teal: #6EE28A;
    --yellow: #FFDD79;
    --pink: #FFA6D6;
    --violet: #A796FF;
    --card-border: rgba(251,239,221,0.16);
    color-scheme: dark;
  }

  /* section background tints — derived from theme vars so they auto-adapt */
  :root, [data-theme="dark"]{
    --sec-hero: var(--bg);
    --sec-overview: color-mix(in srgb, var(--teal) 13%, var(--bg));
    --sec-details: color-mix(in srgb, var(--pink) 13%, var(--bg));
    --sec-stay: color-mix(in srgb, var(--violet) 12%, var(--bg));
    --sec-faq: var(--bg);
    --sec-contact: color-mix(in srgb, var(--yellow) 15%, var(--bg));
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--body);
    font-size:19px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    transition:background .4s ease, color .4s ease;
  }

  a{color:inherit;}
  ::selection{background:var(--yellow); color:var(--ink);}

  :focus-visible{
    outline:2px solid var(--violet);
    outline-offset:3px;
  }

  h1,h2,h3{ font-family:var(--display); margin:0; }

  .eyebrow{
    font-family:var(--utility);
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:12px;
    color:var(--coral);
    font-weight:700;
  }
  .eyebrow::before{
    content:"◆";
    display:inline-block;
    font-size:.65em;
    margin-right:.6em;
    color:var(--violet);
    transform:translateY(-1px);
  }

/* ---------- custom ---------- */
.centered{

}



  /* ---------- Scroll nav ---------- */
  .site-nav{
    position:fixed;
    top:0; left:0; right:0;
    height:var(--nav-h);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:0 5vw;
    z-index:50;
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:2px solid var(--card-border);
    transition:background .4s ease, border-color .4s ease;
  }

  .nav-left{ display:flex; align-items:center; gap:1.4rem; }
  .nav-right{ display:flex; align-items:center; justify-content:flex-end; gap:1.4rem; }

  .nav-names{
    font-family:var(--display);
    font-weight:700;
    font-size:2rem;
    letter-spacing:.02em;
    text-transform:none;
    text-align:center;
    white-space:nowrap;
    color:var(--ink);
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .4s ease, transform .4s cubic-bezier(.22,.9,.32,1);
  }
  .nav-names .amp{ color:var(--coral); display:inline-block; transform:rotate(-8deg); margin:0 .15em; }
  .site-nav.visible .nav-names{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .nav-link{
    font-family:var(--utility);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:none;
    text-decoration:none;
    color:var(--ink-soft);
    position:relative;
    padding-bottom:2px;
    transition:color .25s ease;
  }
  .nav-link:hover{ color:var(--coral); }
  .nav-link::after{
    content:"";
    position:absolute; left:0; right:100%; bottom:-2px;
    height:2px; background:var(--coral);
    transition:right .25s ease;
  }
  .nav-link:hover::after{ right:0; }

  .theme-toggle{
    width:38px; height:38px;
    border-radius:8px;
    border:2px solid var(--card-border);
    background:var(--bg-soft);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    color:var(--ink);
    padding:0;
    transition:transform .3s ease, background .3s ease;
  }
  .theme-toggle:hover{ transform:rotate(-14deg) scale(1.06); }
  .theme-toggle svg{ width:18px; height:18px; }
  .theme-toggle .sun{ display:none; }
  [data-theme="dark"] .theme-toggle .moon{ display:none; }
  [data-theme="dark"] .theme-toggle .sun{ display:block; }
  [data-theme="dark"] .theme-toggle{
    background:#2B2B2B;
    border-color:#4A4A4A;
    color:#F2F2F2;
  }

  @media(max-width:1080px){ .nav-left{ gap:1rem; } .nav-right{ gap:1rem; } }
  @media(max-width:920px){ .nav-left{ gap:.7rem; } .nav-right{ gap:.7rem; } .nav-link{ font-size:11px; } }
  @media(max-width:820px){
    .nav-left .nav-link, .nav-right .nav-link{ display:none; }
    .nav-right{ justify-content:flex-end; }
  }

  /* ---------- Mobile menu toggle ---------- */
  .menu-toggle{
    display:none;
    width:38px; height:38px;
    border-radius:8px;
    border:2px solid var(--card-border);
    background:var(--bg-soft);
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--ink);
    padding:0;
  }
  .menu-toggle .icon-close{ display:none; }
  .menu-toggle.open .icon-menu{ display:none; }
  .menu-toggle.open .icon-close{ display:block; }
  .menu-toggle svg{ width:18px; height:18px; }
  @media(max-width:820px){ .menu-toggle{ display:flex; } }

  .mobile-menu{ display:none; }
  @media(max-width:820px){
    .mobile-menu{
      display:block;
      position:fixed;
      top:var(--nav-h);
      left:0; right:0;
      z-index:49;
      background:color-mix(in srgb, var(--bg) 96%, transparent);
      backdrop-filter:blur(10px);
      border-bottom:2px solid var(--card-border);
      max-height:0;
      overflow:hidden;
      opacity:0;
      padding:0 5vw;
      transition:max-height .4s ease, opacity .3s ease, padding .4s ease;
    }
    .mobile-menu.open{
      max-height:420px;
      opacity:1;
      padding:.5rem 5vw 1.5rem;
    }
  }
  .mobile-menu-link{
    display:block;
    padding:.9rem 0;
    font-family:var(--utility);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-size:15px;
    color:var(--ink);
    text-decoration:none;
    border-bottom:1px solid var(--card-border);
  }
  .mobile-menu-link:last-child{ border-bottom:none; }

  /* ---------- Placeholder blocks (images / illustrations) ---------- */
  .ph{
    --ph-rotate: 0deg;
    container-type: inline-size;
    border:2px dashed color-mix(in srgb, var(--ink) 38%, transparent);
    border-radius:var(--radius);
    background:color-mix(in srgb, var(--ink) 5%, transparent);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    color:var(--ink-soft);
    font-family:var(--utility);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-align:center;
    padding:1rem;
    transform:rotate(var(--ph-rotate));
    transition:transform .3s ease, border-color .4s ease, background .4s ease;
  }
  .ph svg{ width:26px; height:26px; opacity:.6; stroke:currentColor; transition:width .3s ease, height .3s ease; }
  .ph:hover{ transform:rotate(0deg) scale(1.02); }
  @container (min-width:160px){ .ph{ font-size:11.5px; gap:.6rem; } .ph svg{ width:36px; height:36px; } }
  @container (min-width:220px){ .ph{ font-size:12.5px; gap:.8rem; } .ph svg{ width:46px; height:46px; } }
  @container (min-width:320px){ .ph{ font-size:14px; gap:1rem; } .ph svg{ width:60px; height:60px; } }
  @container (min-width:400px){ .ph{ font-size:15px; gap:1.1rem; } .ph svg{ width:72px; height:72px; } }

/* new */
.ph.has-image{
  border-style:solid;
  border-color:transparent;
  background:none;
  padding:0;
  overflow:hidden;
}
.ph.has-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ph.has-image svg,
.ph.has-image span{ display:none; }

  /* ---------- Hero ---------- */
  .hero{
    background-color:var(--sec-hero);
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    padding:calc(8vh + var(--nav-h)) 6vw 6vh;
    overflow:hidden;
  }

  .hero-dots{ position:absolute; inset:0; z-index:0; }
  .hero-inner{ position:relative; z-index:1; max-width:780px; }

  .hero-headline{
    font-family:var(--display);
    font-weight:700;
    font-style:italic;
    font-size:clamp(1.5rem, 8vw, 4.3rem);
    letter-spacing: 0.1em;
    color:var(--coral);
    margin:0;
    opacity:0;
    animation:rise 1s ease forwards .15s;
  }

  .hero-invite{
    font-family:var(--utility);
    font-weight:700;
    letter-spacing:.12em;
    font-size:12.5px;
    text-transform:none;
    color:var(--ink-soft);
    line-height:1.9;
    margin:1.1em 0 0;
    opacity:0;
    animation:rise 1s ease forwards .35s;
  }

  .hero-names{
    font-family:var(--display);
    font-weight:800;
    text-transform:none;
    font-size:clamp(2.9rem, 15vw, 10.2rem);
    line-height:.9;
    margin:.5em 0 .3em;
    letter-spacing:0.04em;
    color:transparent;
    -webkit-text-stroke:0.01px var(--teal);
    text-stroke:0.01px var(--teal);
    paint-order:stroke fill;
    cursor:default;
    text-shadow:0 0 0 transparent;
    transition:text-shadow .35s ease, -webkit-text-stroke-color .35s ease;
    opacity:0;
    animation:rise 1s ease forwards .55s;
  }
  .hero-names:hover{ text-shadow:0.06em 0.07em 0 var(--coral); }

  /* .hero-amp{
    display:inline-block;
    font-style:italic;
    font-weight:800;
    font-size:.8em;
    -webkit-text-stroke:2px var(--teal);
    text-stroke:2px var(--teal);
    transform:rotate(-6deg) translateY(-.02em);
    margin:0 .1em;
  } */

  .hero-date-block{
    margin-top:2.6rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.2rem;
    opacity:0;
    animation:rise 1s ease forwards .75s;
  }
  .hero-date-block .rule{ width:36px; height:3px; background:var(--yellow); border-radius:2px; }
  .hero-date{
    font-family:var(--display);
    font-weight:700;
    font-size:1.8em;
    color:var(--violet);
  }

  .hero-location{
    font-family:var(--utility);
    font-size:12.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:.8rem;
    text-align:center;
    opacity:0;
    animation:rise 1s ease forwards .85s;
  }

  .hero-cta{ margin-top:3rem; opacity:0; animation:rise 1s ease forwards .95s; }

  @keyframes rise{
    from{opacity:0; transform:translateY(16px);}
    to{opacity:1; transform:translateY(0);}
  }

  .btn{
    font-family:var(--button-font);
    font-size:1em;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    display:inline-block;
    padding:1em 2.1em;
    border:2px solid var(--coral);
    color:var(--coral);
    background:transparent;
    border-radius:var(--radius);
    cursor:pointer;
    transition:background .3s ease, color .3s ease, transform .2s ease;
  }
  .btn:hover{ background:var(--coral); color:var(--bg); transform:translateY(-2px); }
  .btn:active{ transform:translateY(0); }
  .btn-solid{ background:var(--coral); color:#fff8ee; }
  .btn-solid:hover{ background:var(--pink); border-color:var(--violet); color:#fff8ee; }

  /* ---------- Carousel ---------- */
  .carousel{
    position:relative;
    background-color:var(--sec-hero);
    max-width:var(--max);
    margin:0 auto;
    padding:0 6vw 5rem;
    transition:background-color .4s ease;
  }
  .carousel-track{
    display:flex;
    gap:1.2rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:.3rem .1rem 1rem;
  }
  .carousel-track::-webkit-scrollbar{ display:none; }
  .carousel-slide{
    flex:0 0 auto;
    width:clamp(260px, 68vw, 460px);
    aspect-ratio:4/3;
    scroll-snap-align:start;
  }
  /* .carousel-slide:nth-child(odd){ --ph-rotate:-2deg; }
  .carousel-slide:nth-child(even){ --ph-rotate:2deg; } */
  .carousel-btn{
    position:absolute;
    top:calc(50% - 1rem);
    transform:translateY(-50%);
    width:44px; height:44px;
    border-radius:50%;
    border:2px solid var(--card-border);
    background:var(--bg);
    color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    font-family:var(--display);
    font-weight:700;
    font-size:20px;
    line-height:1;
    transition:background .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
    z-index:2;
  }
  .carousel-btn:hover{ background:var(--coral); color:#fff8ee; border-color:var(--coral); transform:translateY(-50%) scale(1.06); }
  .carousel-btn.prev{ left:-6px; }
  .carousel-btn.next{ right:-6px; }
  @media(max-width:760px){ .carousel-btn{ display:none; } }

  /* ---------- shared section ---------- */
  section{
    max-width:var(--max);
    margin:0 auto;
    padding:6rem 6vw;
    transition:background-color .4s ease;
  }

  .section-head{ text-align:center; max-width:var(--max); margin:0 auto 3.5rem; }
  .section-title{
    font-family:var(--display);
    font-weight:800;
    text-transform:none;
    letter-spacing:-.01em;
    font-size:clamp(2rem, 6vw, 3.6rem);
    color:var(--ink);
    margin:.3em 0 0;
  }

  /* ---------- Overview / timeline ---------- */
  .overview{ background-color:var(--sec-overview); }

  .illustration-banner{
    width:clamp(180px, 32vw, 280px);
    aspect-ratio:1/1;
    margin:0 auto 2.5rem;
  }

  .timeline{ position:relative; margin-top:2rem; }
  .timeline::before{
    content:"";
    position:absolute;
    left:28px; top:8px; bottom:8px; width:3px;
    background:linear-gradient(var(--coral), var(--teal), var(--yellow), var(--pink));
    opacity:.6;
    border-radius:2px;
  }
  @media(min-width:760px){ .timeline::before{ left:50%; } }

  .t-item{
    position:relative;
    display:grid;
    grid-template-columns:56px 1fr;
    column-gap:1.2rem;
    row-gap:.5rem;
    padding:1.6rem 0;
  }
  .t-node{ grid-column:1; grid-row:1 / span 2; }
  .t-time{ grid-column:2; grid-row:1; }
  .t-body{ grid-column:2; grid-row:2; }

  @media(min-width:760px){
    .t-item{ grid-template-columns:1fr 56px 1fr; column-gap:1.4rem; row-gap:0; align-items:center; }
    .t-node, .t-time, .t-body{ grid-column:auto; grid-row:auto; }
    .t-item:nth-of-type(odd) .t-time{ text-align:right; order:1;}
    .t-item:nth-of-type(odd) .t-node{ order:2; }
    .t-item:nth-of-type(odd) .t-body{ order:3; }
    .t-item:nth-of-type(even) .t-time{ order:3; text-align:left; }
    .t-item:nth-of-type(even) .t-node{ order:2; }
    .t-item:nth-of-type(even) .t-body{ order:1; text-align:right; }
  }

  .t-node{
    width:56px; height:56px;
    border-radius:50%;
    background:var(--bg);
    border:2px solid var(--node-color, var(--coral));
    display:flex; align-items:center; justify-content:center;
    z-index:1;
    transition:background .4s ease;
  }
  .t-node svg{ width:26px; height:26px; stroke:var(--node-color, var(--coral)); }

  .t-time{
    font-family:var(--utility);
    font-weight:700;
    font-size:12.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--node-color, var(--coral));
  }
  .t-body{ display:flex; flex-direction:column; align-items:stretch; gap:1rem; }
  .t-body-text{ flex:1; min-width:0; }
  .t-body .ph{
    width:100%;
    aspect-ratio:16/9;
    --ph-rotate:0deg;
  }
  @media(min-width:760px){
    .t-body{ flex-direction:row; align-items:center; gap:1.3rem; }
    .t-body .ph{ width:clamp(120px, 16vw, 190px); aspect-ratio:1/1; flex-shrink:0; }
    .t-item:nth-of-type(even) .t-body{ flex-direction:row-reverse; }
  }
  .t-body h3{
    font-family:var(--display);
    font-weight:700;
    text-transform:none;
    letter-spacing:.01em;
    font-size:1.35rem;
    margin:.1em 0 .3em;
    color:var(--node-color, var(--ink));
  }
  .t-body p{ margin:0; color:var(--ink-soft); font-size:1.05rem; }

  /* ---------- Details cards ---------- */
  .details-section{ background-color:var(--sec-details); }
  .details-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem;
    margin-top:1rem;
  }
  @media(max-width:980px){ .details-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media(max-width:560px){ .details-grid{ grid-template-columns:1fr; } }
  .detail-card{
    text-align:center;
    padding:1.6rem 1.4rem 2.2rem;
    border:2px solid var(--card-border);
    border-radius:16px;
    transition:transform .25s ease, border-color .4s ease;
  }
  .detail-card:hover{ transform:translateY(-4px); }
  .detail-card .ph{ aspect-ratio:4/3; margin-bottom:1.3rem; --ph-rotate:0deg; border-color:color-mix(in srgb, var(--card-color, var(--teal)) 55%, transparent); color:var(--card-color, var(--teal)); }
  .detail-card h3{
    font-family:var(--display);
    font-weight:700;
    text-transform:none;
    font-size:1.2rem;
    margin:0 0 .5em;
    color:var(--card-color, var(--ink));
  }
  .detail-card p{ margin:0; color:var(--ink-soft); }

  /* ---------- Accommodations ---------- */
  .stay-section{ background-color:var(--sec-stay); }
  .stay-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem;
    margin-top:1rem;
    justify-content: center;
  }
  @media(max-width:980px){ .stay-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media(max-width:560px){ .stay-grid{ grid-template-columns:1fr; } }
  .stay-card{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1.4rem;
    border:2px solid var(--card-border);
    border-radius:16px;
    transition:transform .25s ease, border-color .4s ease;
  }
  .stay-card:hover{ transform:translateY(-4px); }
  .stay-card .ph{ aspect-ratio:4/3; --ph-rotate:0deg; border-color:color-mix(in srgb, var(--card-color, var(--violet)) 55%, transparent); color:var(--card-color, var(--violet)); }
  .stay-card h3{
    font-family:var(--display);
    font-weight:700;
    text-transform:none;
    font-size:1.4em;
    letter-spacing: .05em;
    margin:0;
    color:var(--card-color, var(--ink));
  }
  .stay-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem 1rem;
    font-family:var(--utility);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .stay-meta strong{ color:var(--card-color, var(--violet)); font-weight:700; }
  .stay-card p{ margin:0; color:var(--ink-soft); flex:1; }
  .stay-card .btn{ align-self:flex-start; padding:.7em 1.5em; font-size:11px; }

  /* ---------- FAQ ---------- */
  .faq-section{ background-color:var(--sec-faq); }
  .faq-list{ max-width:var(--max); margin:0 auto; }
  .faq-item{
    border-bottom:2px solid var(--card-border);
    padding:1.3rem 0;
  }
  .faq-item summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    font-family:var(--body);
    /* text-transform: lowercase; */
    font-weight:700;
    font-size:1.5rem;
    color:var(--ink);
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+";
    flex-shrink:0;
    width:28px; height:28px;
    border-radius:50%;
    border:2px solid var(--coral);
    color:var(--coral);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--utility);
    font-size:16px;
    transition:transform .25s ease, background .25s ease, color .25s ease;
  }
  .faq-item[open] summary::after{ content:"–"; background:var(--coral); color:#fff8ee; transform:rotate(180deg); }
  .faq-item p{
    margin:.9rem 0 0;
    color:var(--ink-soft);
    font-family:var(--body);
    font-size:1.3rem;
    max-width:90ch;
  }
  .contact{ background-color:var(--sec-contact); }
  .contact-grid{
    display:grid;
    grid-template-columns:clamp(180px, 32vw, 300px) 1fr;
    gap:3rem;
    align-items:center;
  }
  @media(max-width:700px){
    .contact-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; }
    .contact-portrait.ph{ width:min(60vw, 260px); }
  }
  .contact-portrait.ph{ width:100%; aspect-ratio:1/1; border-radius:50%; --ph-rotate:0deg; }
  .contact-list{ display:grid; gap:1.6rem; }
  .contact-item .label{
    font-family:var(--utility);
    font-weight:700;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--coral);
    display:block;
    margin-bottom:.3rem;
  }
  .contact-item .value{
    font-family:var(--utility);
    font-weight:700;
    font-size:1.4rem;
    color:var(--ink);
  }
  .contact-item .value a{
    text-decoration:none;
    border-bottom:2px solid transparent;
    transition:border-color .2s ease;
  }
  .contact-item .value a:hover{ border-color:var(--coral); }
  .contact-item .sub{ font-family:var(--body); font-size:1.1rem; color:var(--ink-soft); margin-top:.15rem; }

  /* ---------- RSVP (fixed showcase tone, independent of theme) ---------- */
  .rsvp{
    background:#1C1330;
    color:#FBEFDD;
    position:relative;
  }
  .rsvp .section-title{ color:#FFDD79; }
  .rsvp .eyebrow{ color:#FFA64D; }
  .rsvp .eyebrow::before{ color:#A796FF; }
  .rsvp .section-head p{ color:#C9BAD9; }

  form{ max-width:640px; margin:0 auto; display:grid; gap:1.6rem; }

  .field{ display:grid; gap:.5rem; }
  .field label{
    font-family:var(--utility);
    font-weight:700;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#FFDD79;
  }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
  @media(max-width:560px){ .field-row{ grid-template-columns:1fr; } }

  input[type=text], input[type=email], input[type=number], select, textarea{
    font-family:var(--body);
    font-size:18px;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(251,239,221,0.3);
    color:#FBEFDD;
    padding:.6em .1em;
    outline:none;
    transition:border-color .25s ease;
  }
  input::placeholder, textarea::placeholder{ color:rgba(251,239,221,0.4); }
  input:focus, select:focus, textarea:focus{ border-color:#FFA64D; }
  select{ appearance:none; }
  select option{ color:#1C1330; }
  textarea{ resize:vertical; min-height:5.5em; }

  fieldset{ border:none; padding:0; margin:0; display:grid; gap:.9rem; }
  fieldset legend{
    font-family:var(--utility);
    font-weight:700;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#FFDD79;
    padding:0;
    margin-bottom:.3rem;
  }
  .radio-row{ display:flex; gap:2rem; flex-wrap:wrap; }
  .radio-option{
    display:flex; align-items:center; gap:.6rem;
    font-family:var(--utility);
    font-size:14px;
    cursor:pointer;
  }
  .radio-option input{
    appearance:none;
    width:18px; height:18px;
    border:1px solid #FFA64D;
    border-radius:50%;
    display:grid; place-items:center;
    margin:0; cursor:pointer; flex-shrink:0;
  }
  .radio-option input::before{
    content:"";
    width:9px; height:9px;
    border-radius:50%;
    background:#FFA64D;
    transform:scale(0);
    transition:transform .15s ease;
  }
  .radio-option input:checked::before{ transform:scale(1); }

  .rsvp-submit{ margin-top:1rem; justify-self:start; }
  .rsvp .btn{ border-color:#FFDD79; color:#FFDD79; }
  .rsvp .btn:hover{ background:#FFDD79; color:#1C1330; }

  .guest-count-wrap{ display:none; }
  .guest-count-wrap.show{ display:grid; }

  .form-note{ font-family:var(--utility); font-size:12.5px; color:#A796FF; margin-top:-.6rem; }

  .confirmation{ display:none; text-align:center; padding:3rem 1rem; }
  .confirmation.show{ display:block; }
  .confirmation svg{ width:42px; height:42px; margin-bottom:1rem; stroke:#6EE28A; }
  .confirmation h3{
    font-family:var(--display);
    font-weight:700;
    text-transform:uppercase;
    font-size:1.6rem;
    color:#FFDD79;
    margin:0 0 .5em;
  }
  .confirmation p{ color:#C9BAD9; margin:0; }

  /* ---------- Footer ---------- */
  footer{
    background-color:var(--sec-contact);
    text-align:center;
    padding:3rem 6vw 4rem;
    font-family:var(--utility);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    transition:background-color .4s ease;
  }
  /* footer .amp{ color:var(--pink); } */