:root{
    --parchment:#F6F1E6;
    --parchment-light:#FBF8F2;
    --ink:#2A241E;
    --ink-soft:#5B5344;
    --bottle:#3B4830;
    --brass:#A9824A;
    --hero-overlay-top: rgba(18,15,10,0.15);
    --hero-overlay-bottom: rgba(15,13,9,0.62);
    --maxw: 1200px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    margin:0;
    background:var(--parchment);
    color:var(--ink);
    font-family:'EB Garamond', Georgia, serif;
    font-size:18px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img{max-width:100%; display:block;}

  h1,h2,h3{
    font-family:'Bodoni Moda', 'Times New Roman', serif;
    font-weight:500;
    margin:0;
  }

  a{color:inherit; text-decoration:none;}

  .eyebrow{
    font-family:'EB Garamond', serif;
    text-transform:uppercase;
    letter-spacing:0.32em;
    font-size:0.72rem;
    font-weight:600;
    color:var(--bottle);
    margin:0 0 1.1rem 0;
  }
  .eyebrow.center{text-align:center;}
  .eyebrow.on-dark{color:var(--parchment-light);}

  /* every photo gets the same warm, unifying color grade */
  .graded{
    filter: sepia(0.22) saturate(1.28) contrast(1.06) brightness(0.98) hue-rotate(-6deg);
  }

  /* ---------- NAV ---------- */
  .site-nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.6rem clamp(1.25rem, 5vw, 3.5rem);
    transition:background .5s ease, box-shadow .5s ease, padding .4s ease;
    color:var(--parchment-light);
  }
  .site-nav.scrolled{
    background:rgba(246,241,230,0.92);
    backdrop-filter:blur(6px);
    box-shadow:0 1px 0 rgba(42,36,30,0.08);
    color:var(--ink);
    padding:1rem clamp(1.25rem, 5vw, 3.5rem);
  }
  .monogram{
    font-family:'Bodoni Moda', serif;
    font-size:1.25rem;
    letter-spacing:0.05em;
  }
  .monogram .amp{font-style:italic; color:var(--brass); padding:0 .15em;}
  .nav-links{display:flex; gap:clamp(1rem, 3vw, 2.5rem); font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase;}
  .nav-links a{position:relative; padding-bottom:4px;}
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s ease;
  }
  .nav-links a:hover::after{transform:scaleX(1); transform-origin:left;}
  .nav-links a:focus-visible, .monogram:focus-visible{outline:2px solid var(--brass); outline-offset:4px;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    height:100svh;
    min-height:560px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
  }
  .hero-media{position:absolute; inset:0; overflow:hidden;}
  .hero-img{
    width:100%; height:100%; object-fit:cover;
    transform:scale(1.12);
    will-change:transform;
  }
  .hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, var(--hero-overlay-top) 0%, transparent 38%, var(--hero-overlay-bottom) 100%);
  }
  .hero-content{
    position:relative; z-index:2;
    padding:0 clamp(1.25rem, 6vw, 4.5rem) clamp(3rem, 9vh, 6rem);
    max-width:1000px;
    opacity:0; transform:translateY(24px);
    animation:heroIn 1.4s cubic-bezier(.22,.68,0,1) .3s forwards;
  }
  @keyframes heroIn{to{opacity:1; transform:translateY(0);}}
  .hero .eyebrow{color:var(--parchment-light); opacity:0.92;}
  .hero-names{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:0 0.5rem;
    color:var(--parchment-light);
    font-size:clamp(3rem, 11vw, 7.2rem);
    line-height:0.98;
    letter-spacing:0.01em;
  }
  .hero-names .amp{
    font-style:italic;
    font-size:0.55em;
    color:var(--brass);
    padding:0 .05em;
  }
  .hero-date{
    margin-top:1.4rem;
    color:var(--parchment-light);
    font-size:clamp(0.95rem,1.6vw,1.15rem);
    letter-spacing:0.08em;
    opacity:0.92;
  }
  .scroll-cue{
    position:absolute; bottom:1.8rem; right:clamp(1.25rem,6vw,4.5rem); z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:.6rem;
    color:var(--parchment-light);
    font-size:0.68rem; letter-spacing:0.24em; text-transform:uppercase;
    opacity:.85;
  }
  .scroll-cue span{
    width:1px; height:34px; background:currentColor;
    position:relative; overflow:hidden;
  }
  .scroll-cue span::after{
    content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
    background:var(--brass);
    animation:cueDrop 2.2s ease-in-out infinite;
  }
  @keyframes cueDrop{
    0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}
  }

  /* ---------- SECTION SHELL ---------- */
  section{padding:clamp(4.5rem,10vh,7.5rem) clamp(1.25rem,6vw,4.5rem);}
  .inner{max-width:var(--maxw); margin:0 auto;}

  /* ---------- STORY ---------- */
  .story{background:var(--parchment);}
  .story-intro{max-width:720px; margin:0 auto clamp(3rem,8vh,5rem); text-align:center;}
  .story-lede{
    font-family:'Bodoni Moda', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.4rem,3.4vw,2.1rem);
    line-height:1.4;
    color:var(--ink);
  }

  .story-row{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:clamp(2rem,5vw,4.5rem);
    align-items:center;
    max-width:var(--maxw);
    margin:0 auto;
    padding:clamp(2rem,5vh,3.2rem) 0;
    opacity:0; transform:translateY(36px);
    transition:opacity .9s cubic-bezier(.22,.68,0,1), transform .9s cubic-bezier(.22,.68,0,1);
  }
  .story-row.is-visible{opacity:1; transform:translateY(0);}
  .story-row.reverse{grid-template-columns:0.9fr 1.1fr;}
  .story-row.reverse .story-image{order:2;}
  .story-row.reverse .story-text{order:1;}
  .story-image img{
    width:100%; height:100%; object-fit:cover;
    aspect-ratio:4/5;
    box-shadow:0 30px 60px -25px rgba(42,36,30,0.35);
  }
  .story-image.wide img{aspect-ratio:16/11;}
  .story-cap{
    font-family:'Bodoni Moda', serif;
    font-style:italic;
    font-size:clamp(1.15rem,2.2vw,1.55rem);
    line-height:1.5;
    color:var(--ink);
    max-width:30ch;
  }
  .story-outro{
    text-align:center; max-width:560px; margin:clamp(1rem,4vh,2rem) auto 0;
    font-size:1rem; color:var(--ink-soft);
  }

  /* photobooth strip: show the full strip uncropped, framed like a real print */
  .story-row.strip-row{grid-template-columns:0.65fr 1.35fr;}
  .story-row.strip-row .story-image{
    background:var(--parchment-light);
    padding:16px;
    display:flex;
    justify-content:center;
    box-shadow:0 30px 60px -25px rgba(42,36,30,0.35);
  }
  .story-row.strip-row .story-image img{
    aspect-ratio:auto;
    width:auto;
    height:auto;
    max-height:min(620px, 66vh);
    box-shadow:none;
  }

  /* ---------- FULL-SECTION VIDEO ---------- */
  .video-section{
    position:relative;
    height:min(92vh, 820px);
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    background:var(--ink);
  }
  .video-section video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .video-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(15,13,9,0.08) 0%, transparent 42%, rgba(15,13,9,0.58) 100%);
  }
  .video-caption{
    position:relative; z-index:2;
    padding:0 clamp(1.25rem,6vw,4.5rem) clamp(2.4rem,7vh,3.8rem);
    max-width:640px;
    color:var(--parchment-light);
    font-family:'Bodoni Moda', serif;
    font-style:italic;
    font-size:clamp(1.2rem,2.7vw,1.85rem);
    line-height:1.4;
    opacity:0; transform:translateY(22px);
    transition:opacity .9s ease, transform .9s ease;
  }
  .video-caption.is-visible{opacity:1; transform:translateY(0);}

  .video-toggle{
    position:absolute; z-index:3; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:64px; height:64px; padding:0;
    border-radius:50%;
    border:1px solid rgba(251,248,242,0.8);
    background:rgba(15,13,9,0.32);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    opacity:1;
    transition:opacity .35s ease, background .25s ease;
    color:var(--parchment-light);
  }
  .video-toggle:hover{background:rgba(15,13,9,0.5);}
  .video-toggle:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}
  .video-toggle svg{width:20px; height:20px;}
  .video-toggle .icon-pause{display:none;}
  .video-section.is-playing .video-toggle{opacity:0;}
  .video-section.is-playing .video-toggle:hover,
  .video-section.is-playing .video-toggle:focus-visible{opacity:1;}
  .video-section.is-playing .video-toggle .icon-play{display:none;}
  .video-section.is-playing .video-toggle .icon-pause{display:block;}

  /* ---------- MOMENTS ---------- */
  .moments{background:var(--bottle); color:var(--parchment-light);}
  .moments .eyebrow{color:var(--brass);}
  .moments-title{
    text-align:center; color:var(--parchment-light);
    font-size:clamp(1.9rem,4.4vw,3rem);
    margin-bottom:clamp(2.5rem,6vh,4rem);
  }
  .moments-grid{
    max-width:var(--maxw); margin:0 auto;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:14vw;
    gap:clamp(0.6rem,1.6vw,1.2rem);
  }
  .m-item{
    margin:0; overflow:hidden; position:relative;
    grid-column:span 3;
    grid-row:span 2;
    opacity:0; transform:translateY(28px) scale(0.98);
    transition:opacity .8s ease, transform .8s ease;
  }
  .m-item.is-visible{opacity:1; transform:translateY(0) scale(1);}
  .m-item img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease;}
  .m-item:hover img{transform:scale(1.06);}
  .m-large{grid-column:span 4; grid-row:span 3;}
  .m-tall{grid-column:span 2; grid-row:span 3;}
  .m-cap{
    position:absolute; left:0; right:0; bottom:0;
    padding:1.6rem 1.2rem .9rem;
    background:linear-gradient(0deg, rgba(15,13,9,.72), transparent);
    font-size:0.82rem; letter-spacing:0.03em; font-style:italic;
    font-family:'Bodoni Moda', serif;
    opacity:0; transition:opacity .35s ease;
  }
  .m-item:hover .m-cap, .m-item:focus-within .m-cap{opacity:1;}

  /* ---------- DETAILS ---------- */
  .details{background:var(--parchment-light);}
  .details-card{
    max-width:640px; margin:0 auto; text-align:center;
    padding:clamp(3rem,7vh,4.5rem) clamp(1.5rem,5vw,4rem);
    border:1px solid rgba(169,130,74,0.4);
    position:relative;
    opacity:0; transform:translateY(24px);
    transition:opacity .9s ease, transform .9s ease;
  }
  .details-card.is-visible{opacity:1; transform:translateY(0);}
  .details-card::before, .details-card::after{
    content:''; position:absolute; width:22px; height:22px;
    border:1px solid var(--brass);
  }
  .details-card::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
  .details-card::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}
  .details-date{
    font-family:'Bodoni Moda', serif;
    font-size:clamp(2.6rem,7vw,4.2rem);
    letter-spacing:0.02em;
    margin:0.4rem 0 0.6rem;
  }
  .details-date .dot{color:var(--brass); padding:0 .18em; font-style:italic;}
  .details-sub{
    text-transform:uppercase; letter-spacing:0.3em; font-size:0.9rem;
    color:var(--ink-soft); margin-bottom:1.6rem;
  }
  .details-note{color:var(--ink-soft); font-size:1rem; line-height:1.7;}

  /* ---------- RSVP ---------- */
  .rsvp{background:var(--parchment);}
  .rsvp-wrap{max-width:620px; margin:0 auto;}
  .rsvp-intro{text-align:center; margin-bottom:clamp(2.5rem,6vh,3.5rem);}
  .rsvp-title{font-size:clamp(1.9rem,4.4vw,3rem); margin-bottom:0.7rem;}
  .rsvp-sub{color:var(--ink-soft); font-size:1.05rem;}

  .rsvp-form{display:grid; gap:1.5rem; opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
  .rsvp-form.is-visible{opacity:1; transform:translateY(0);}

  .field-label{display:block; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.16em; color:var(--bottle); margin-bottom:0.55rem; font-weight:600;}
  .field-hint{display:block; text-transform:none; letter-spacing:normal; font-weight:400; color:var(--ink-soft); font-size:0.85rem; margin-top:0.2rem;}

  .rsvp-form input[type="text"], .rsvp-form input[type="email"], .rsvp-form select, .rsvp-form textarea{
    width:100%; padding:0.85rem 1rem;
    font-family:'EB Garamond', serif; font-size:1.05rem; color:var(--ink);
    background:var(--parchment-light); border:1px solid rgba(42,36,30,0.28);
    border-radius:1px;
  }
  .rsvp-form textarea{resize:vertical; min-height:5.5rem;}
  .rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus{
    outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(169,130,74,0.16);
  }

  .attend-toggle{display:flex; gap:0.8rem;}
  .attend-option{flex:1; position:relative;}
  .attend-option input{position:absolute; opacity:0; width:1px; height:1px;}
  .attend-option label{
    display:block; text-align:center; padding:0.9rem 0.6rem;
    border:1px solid rgba(42,36,30,0.28); cursor:pointer;
    font-family:'Bodoni Moda', serif; font-style:italic; font-size:1.02rem;
    color:var(--ink-soft); transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .attend-option input:checked + label{background:var(--bottle); border-color:var(--bottle); color:var(--parchment-light);}
  .attend-option input:focus-visible + label{outline:2px solid var(--brass); outline-offset:2px;}

  .guest-count-row{display:none;}
  .guest-count-row.show{display:block;}

  .rsvp-submit{
    justify-self:start; margin-top:0.2rem;
    padding:0.95rem 2.6rem; background:var(--ink); color:var(--parchment-light);
    border:none; font-family:'EB Garamond', serif; text-transform:uppercase; letter-spacing:0.16em; font-size:0.85rem;
    cursor:pointer; transition:background .25s ease;
  }
  .rsvp-submit:hover{background:var(--bottle);}
  .rsvp-submit:disabled{opacity:0.55; cursor:default;}
  .rsvp-submit:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}

  .rsvp-status{margin-top:0.9rem; font-size:0.92rem; min-height:1.3em;}
  .rsvp-status.error{color:#8a3a3a;}

  .rsvp-success{text-align:center; padding:2rem 0.5rem;}
  .rsvp-success p{
    font-family:'Bodoni Moda', serif; font-style:italic;
    font-size:clamp(1.25rem,2.8vw,1.7rem); line-height:1.5; max-width:32ch; margin:0 auto;
  }

  /* ---------- HOST ACCESS + DASHBOARD MODAL ---------- */
  .host-link{
    display:inline-block; margin-top:1.7rem; background:none; border:none; padding:0.3rem;
    color:rgba(251,248,242,0.38); font-family:'EB Garamond', serif; font-size:0.78rem;
    letter-spacing:0.05em; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
  }
  .host-link:hover, .host-link:focus-visible{color:rgba(251,248,242,0.75);}

  .modal-overlay{
    position:fixed; inset:0; z-index:300;
    background:rgba(15,13,9,0.72);
    display:flex; align-items:center; justify-content:center;
    padding:1.4rem;
  }
  .modal-overlay[hidden]{display:none;}
  .modal-panel{
    position:relative; background:var(--parchment-light); color:var(--ink);
    max-width:600px; width:100%; max-height:88vh; overflow-y:auto;
    padding:clamp(2.1rem,5vw,3rem);
    box-shadow:0 40px 90px -20px rgba(0,0,0,0.55);
  }
  .modal-close{
    position:absolute; top:0.9rem; right:1rem; background:none; border:none;
    font-size:1.7rem; line-height:1; color:var(--ink-soft); cursor:pointer; padding:0.3rem;
    font-family:'EB Garamond', serif;
  }
  .modal-close:focus-visible{outline:2px solid var(--brass);}
  .modal-title{font-size:clamp(1.4rem,3.2vw,1.9rem); text-align:center; margin:0.2rem 0 1.3rem;}

  .host-pass-input{
    width:100%; padding:0.85rem 1rem; margin-bottom:1rem;
    font-family:'EB Garamond', serif; font-size:1.05rem;
    border:1px solid rgba(42,36,30,0.28); background:#fff;
  }
  .host-pass-input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(169,130,74,0.16);}
  #hostGate .rsvp-submit, #dashRefreshBtn{width:100%;}

  .dash-stats{display:flex; gap:1.2rem; justify-content:center; margin:0.4rem 0 1.6rem; flex-wrap:wrap;}
  .dash-stat{text-align:center; min-width:64px;}
  .dash-stat b{display:block; font-family:'Bodoni Moda', serif; font-size:1.7rem; color:var(--bottle);}
  .dash-stat span{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft);}

  .dash-refresh{
    display:block; margin:0 auto 1.5rem; background:none; border:1px solid rgba(42,36,30,0.28);
    padding:0.55rem 1.3rem; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer;
    font-family:'EB Garamond', serif; color:var(--ink-soft);
  }
  .dash-refresh:hover{border-color:var(--brass); color:var(--ink);}

  .dash-list{max-height:44vh; overflow-y:auto; border-top:1px solid rgba(42,36,30,0.12);}
  .dash-entry{border-bottom:1px solid rgba(42,36,30,0.12); padding:0.85rem 0.1rem;}
  .dash-entry-head{display:flex; justify-content:space-between; align-items:baseline; gap:0.6rem;}
  .dash-entry-name{font-family:'Bodoni Moda', serif; font-size:1.08rem;}
  .dash-entry-badge{font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; padding:0.18rem 0.55rem; border-radius:20px; white-space:nowrap;}
  .dash-entry-badge.yes{background:rgba(59,72,48,0.15); color:var(--bottle);}
  .dash-entry-badge.no{background:rgba(138,58,58,0.12); color:#8a3a3a;}
  .dash-entry-meta{font-size:0.84rem; color:var(--ink-soft); margin-top:0.2rem;}
  .dash-entry-msg{font-style:italic; font-size:0.92rem; margin-top:0.4rem; color:var(--ink);}
  .dash-empty{text-align:center; color:var(--ink-soft); padding:2rem 0;}

  /* ---------- FOOTER ---------- */
  .site-footer{
    background:var(--ink); color:var(--parchment-light);
    text-align:center;
    padding:clamp(3.5rem,8vh,5.5rem) 1.5rem clamp(2.5rem,5vh,3.5rem);
  }
  .monogram-large{
    font-family:'Bodoni Moda', serif; font-size:clamp(2rem,5vw,3rem);
    letter-spacing:0.06em; margin-bottom:1rem;
  }
  .monogram-large .amp{font-style:italic; color:var(--brass);}
  .footer-line{color:rgba(251,248,242,0.75); font-size:1rem; margin-bottom:2rem;}
  .footer-fine{color:rgba(251,248,242,0.45); font-size:0.78rem; letter-spacing:0.08em;}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:820px){
    .nav-links{gap:1rem; font-size:0.72rem;}
    .story-row, .story-row.reverse{grid-template-columns:1fr; gap:1.5rem;}
    .story-row.reverse .story-image{order:1;} .story-row.reverse .story-text{order:2;}
    .story-image img{aspect-ratio:4/3;}
    .story-row.strip-row{grid-template-columns:1fr;}
    .story-row.strip-row .story-image img{aspect-ratio:auto; max-height:52vh;}
    .moments-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:44vw;}
    .m-item, .m-large, .m-tall{grid-column:span 1; grid-row:span 1;}
    .video-section{height:min(78vh, 640px);}
  }
  @media (max-width:480px){
    body{font-size:16.5px;}
    .site-nav{padding:1.2rem 1.1rem;}
    .site-nav.scrolled{padding:0.85rem 1.1rem;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .hero-content{animation:none; opacity:1; transform:none;}
    .hero-img{transform:none !important;}
    .story-row, .m-item, .details-card, .video-caption, .rsvp-form{opacity:1; transform:none; transition:none;}
    .scroll-cue span::after{animation:none;}
  }