:root{
    --ink:#1a1a1a;--soft:#4a4744;--line:#d8d3cc;
    --paper:#faf8f5;--paper2:#f2eee8;--white:#fff;
    --shadow:0 20px 60px -30px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Jost',sans-serif;color:var(--ink);background:var(--paper);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3{font-weight:400}

  .lang{position:fixed;top:18px;right:18px;z-index:120;display:flex;gap:2px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:100px;padding:3px;font-size:12px;letter-spacing:.08em}
  .lang button{border:0;background:transparent;cursor:pointer;padding:5px 12px;border-radius:100px;font-family:'Jost',sans-serif;letter-spacing:.1em;color:var(--soft);transition:.25s}
  .lang button.active{background:var(--ink);color:#fff}

  /* ===== STACKED PINNED SCENE =====
     .scene is tall; a sticky .stage holds three stacked layers.
     JS maps scroll progress (0..1) across the scene:
       phase A (0 .. .5)  -> glass rotates 0..80deg
       phase B (.5 .. 1)  -> image rotates 0..80deg
     Info layer sits underneath, static. */
  .scene{position:relative;height:320vh}
  .stage{position:sticky;top:0;height:100vh;overflow:hidden}
  .layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

  /* info layer (bottom) — styled like the back of the invitation */
  .layer-info{background:var(--white);z-index:1;padding:40px 24px;overflow-y:auto}
  .info-card{max-width:640px;width:100%;text-align:center;color:var(--ink)}
  .info-invite{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.5rem,4.4vw,2.15rem);line-height:1.4;color:var(--ink);max-width:520px;margin:0 auto}
  .info-date{font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(1.15rem,3.4vw,1.5rem);letter-spacing:.04em;margin-top:22px}
  .info-divider{width:120px;height:1px;background:var(--ink);opacity:.85;margin:clamp(26px,5vw,44px) auto}
  .info-tl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,4vw,34px)}
  .itl{text-align:center}
  .itl-ic{height:74px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:16px}
  .itl-ic svg{height:70px;width:auto;stroke:var(--ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .itl-time{font-family:'Jost',sans-serif;font-weight:500;font-size:1.15rem;letter-spacing:.04em}
  .itl-title{font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:.92rem;margin:6px 0 6px}
  .itl-place{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.12rem;line-height:1.3;color:var(--ink)}
  .info-note{font-family:'Cormorant Garamond',serif;font-size:clamp(1.05rem,3vw,1.3rem);line-height:1.5;color:var(--ink);max-width:460px;margin:0 auto}
  .info-contacts{font-family:'Cormorant Garamond',serif;font-size:clamp(1.05rem,3vw,1.3rem);margin-top:16px;letter-spacing:.02em}
  .info-contacts .sep{margin:0 10px;color:var(--line)}
  .info-contacts a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .25s}
  .info-contacts a:hover,.info-contacts a:focus-visible{border-color:var(--ink)}
  .scroll-hint{margin-top:26px;letter-spacing:.3em;font-size:10px;color:var(--soft);text-transform:uppercase;opacity:.6}

  /* image layer (middle) */
  .layer-img{z-index:2}
  .swing-img{transform-origin:center 26px;transform:rotate(var(--rotImg,0deg));will-change:transform;position:absolute;inset:0}
  .swing-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(100%)}
  .swing-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.14))}

  /* glass layer (top) — full viewport, matches invitation front; pivots around the ring */
  .layer-glass{z-index:3}
  .swing-glass{transform-origin:center 26px;transform:rotate(var(--rotGlass,0deg));will-change:transform;position:absolute;inset:0}
  .glass{color:var(--ink);background:rgba(255,255,255,.16);backdrop-filter:blur(3px) saturate(112%);-webkit-backdrop-filter:blur(3px) saturate(112%);width:100%;height:100%;position:relative;padding:26px 32px 48px}
  .stage-ring{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:15px;height:15px;border:2.5px solid var(--ink);border-radius:50%;z-index:10;pointer-events:none}
  .names-art{position:absolute;top:44%;left:0;right:0;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center}
  .names-art span{font-family:'Parisienne',cursive;color:var(--ink);line-height:.82;display:block}
  .n-ena{font-size:clamp(3rem,10vw,6.5rem);text-align:center;transform:translateX(-14%)}
  .n-amp{font-size:clamp(2rem,6vw,4rem);text-align:center;margin:.02em 0}
  .n-luka{font-size:clamp(3rem,10vw,6.5rem);text-align:center;transform:translateX(14%)}
  .front-foot{position:absolute;left:0;right:0;bottom:12%;text-align:center}
  .front-foot .date{font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.28em;font-size:clamp(1rem,3vw,1.4rem);text-indent:.28em}
  .front-foot .rule{width:88px;height:1.5px;background:var(--ink);margin:12px auto}
  .front-foot .place{font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem,3.4vw,1.7rem);letter-spacing:.06em}
  .glass .names{font-family:'Parisienne',cursive;font-size:clamp(3.4rem,11vw,6.2rem);line-height:.92}
  .glass .amp{display:block;font-size:.5em;margin:.02em 0}
  .glass .date{margin-top:22px;letter-spacing:.35em;font-size:clamp(.95rem,2.6vw,1.25rem);text-indent:.35em}
  .glass .rule{width:64px;height:1px;background:rgba(26,26,26,.5);margin:14px auto}
  .glass .place{letter-spacing:.5em;font-size:clamp(.8rem,2.4vw,1rem);text-indent:.5em}

  /* ===== normal sections below the scene ===== */
  section.block{padding:clamp(64px,10vw,120px) 24px}
  .wrap{max-width:940px;margin:0 auto}
  .eyebrow{text-align:center;letter-spacing:.4em;font-size:12px;color:var(--soft);text-transform:uppercase;margin-bottom:22px;text-indent:.4em}
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
  .reveal.in{opacity:1;transform:none}

  .countdown{background:var(--ink);color:#fff}
  section.block.countdown{padding-bottom:clamp(20px,3vw,36px)}
  .countdown .eyebrow{color:#bcb6ad}
  .cd-grid{display:flex;justify-content:center;gap:clamp(18px,6vw,64px);flex-wrap:wrap}
  .cd-item{text-align:center;min-width:64px}
  .cd-num{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,8vw,4rem);line-height:1}
  .cd-lab{letter-spacing:.25em;font-size:11px;text-transform:uppercase;color:#bcb6ad;margin-top:10px}
  .cd-msg{text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.6rem}

  .rsvp{background:var(--ink);color:#fff}
  section.block.rsvp{padding-top:clamp(20px,3vw,36px)}
  .rsvp .eyebrow{color:#bcb6ad}
  .rsvp h2{text-align:center;font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,6vw,3rem);margin-bottom:8px}
  .rsvp .sub{text-align:center;color:#cfc9c0;font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.2rem;margin-bottom:40px}
  form{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
  .field label{display:block;letter-spacing:.15em;font-size:11px;text-transform:uppercase;color:#bcb6ad;margin-bottom:9px}
  .field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #4a4744;color:#fff;font-family:'Jost',sans-serif;font-size:16px;font-weight:300;padding:9px 2px;transition:.25s}
  .field textarea{resize:vertical;min-height:70px;border:1px solid #4a4744;border-radius:2px;padding:12px}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#fff}
  .field select option{background:#1a1a1a}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .attending-only{display:flex;flex-direction:column;gap:22px}
  .guest-names{display:flex;flex-direction:column;gap:22px}
  .guest-names:empty{display:none}
  .choice{display:flex;gap:12px}
  .choice label{flex:1;text-align:center;border:1px solid #4a4744;border-radius:2px;padding:14px;cursor:pointer;letter-spacing:.1em;font-size:13px;text-transform:uppercase;transition:.25s;color:#cfc9c0}
  .choice input{position:absolute;opacity:0;pointer-events:none}
  .choice input:checked + span{color:#fff}
  .choice label:has(input:checked){background:#fff;color:#1a1a1a;border-color:#fff}
  .choice label:has(input:checked) span{color:#1a1a1a}
  .submit{margin-top:8px;background:#fff;color:#1a1a1a;border:0;padding:17px;letter-spacing:.25em;text-transform:uppercase;font-size:13px;font-family:'Jost',sans-serif;cursor:pointer;border-radius:2px;transition:.25s}
  .submit:hover{background:#e8e2d9}
  .submit:disabled{opacity:.5;cursor:default}
  .thanks{text-align:center;padding:40px 20px}
  .thanks .mark{font-size:2.4rem;margin-bottom:14px}
  .thanks p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.5rem;color:#fff}
  .thanks .again{margin-top:20px;background:transparent;border:1px solid #4a4744;color:#cfc9c0;padding:11px 22px;border-radius:2px;cursor:pointer;letter-spacing:.15em;font-size:12px;text-transform:uppercase;font-family:'Jost',sans-serif}

  footer{background:var(--paper2);text-align:center;padding:70px 24px}
  footer .ring{width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;margin:0 auto 22px}
  footer .fnames{font-family:'Parisienne',cursive;font-size:2.6rem;line-height:1}
  footer .fdate{letter-spacing:.35em;font-size:13px;color:var(--soft);margin-top:14px;text-indent:.35em}

  .admin-toggle{position:fixed;bottom:14px;left:14px;z-index:110;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--soft);cursor:pointer;font-size:15px;opacity:.35;transition:.25s}
  .admin-toggle:hover{opacity:1}
  .admin{position:fixed;inset:0;z-index:130;background:rgba(20,20,20,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
  .admin.open{display:flex}
  .admin-panel{background:#fff;border-radius:6px;max-width:900px;width:100%;max-height:85vh;overflow:auto;padding:28px;box-shadow:var(--shadow)}
  .admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}
  .admin-head h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem}
  .admin-actions{display:flex;gap:8px;flex-wrap:wrap}
  .admin-actions button{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:9px 16px;border-radius:3px;cursor:pointer;font-size:12px;letter-spacing:.1em;font-family:'Jost',sans-serif}
  .admin-actions .ghost{background:transparent;color:var(--ink)}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
  th{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;color:var(--soft);font-weight:500}
  .empty{text-align:center;color:var(--soft);font-style:italic;padding:30px;font-family:'Cormorant Garamond',serif;font-size:1.2rem}
  .count-pill{background:var(--paper2);border-radius:100px;padding:4px 12px;font-size:12px;letter-spacing:.05em}

  @media(max-width:720px){
    .row{grid-template-columns:1fr}
    .glass{padding:40px 24px}
    .info-tl{gap:10px}
    .itl-ic{height:56px}
    .itl-ic svg{height:52px}
    .itl-title{font-size:.78rem;letter-spacing:.04em}
    .itl-place{font-size:.95rem}
    .itl-time{font-size:1rem}
  }
  @media(prefers-reduced-motion:reduce){
    .scene{height:auto}
    .stage{position:relative;height:auto}
    .layer{position:relative;inset:auto;min-height:70vh}
    .layer-img{min-height:80vh}
    .swing-img,.swing-glass{transform:none!important}
    .swing-img{position:relative}
    .reveal{opacity:1;transform:none;transition:none}
  }