/* Self-hosted fonts (China-safe, no CDN). NOTE: this Fraunces build must
   retain the opsz, wght, SOFT and WONK axes — the UI uses WONK 1 on live text.
   If these woff2 have WONK pinned off, re-subset from the variable TTF keeping axes. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/fraunces-roman.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('../fonts/fraunces-italic.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/cinzel.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/inter.woff2') format('woff2')}

/* ===================== PAGE SECTIONS ===================== */
  :root{
    --sky-blue:#7FC7CC;--moss:#4B5B34;--terracotta:#AF5031;
    --cherry:#FDABA5;--wine:#980204;--sunshine:#EAB913;--ink:#243C3E;
  }
  body{color:var(--ink)}
  .paper{position:relative;background:#F4EDE0}
  .paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23p)' opacity='0.4'/></svg>")}
  .sec{position:relative;z-index:1;padding:clamp(80px,11vw,150px) clamp(24px,6vw,90px)}
  .sec-inner{max-width:1080px;margin:0 auto}
  .eyebrow{font-family:var(--font-serif);font-weight:300;font-variation-settings:'WONK' 1;
    font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:#9a7f4f;
    text-align:center;margin-bottom:1.6em}
  .h-serif{font-family:var(--font-serif);font-weight:300;font-variation-settings:'WONK' 1;
    line-height:1.02;letter-spacing:-.01em}
  .rule{width:64px;height:1px;background:rgba(36,60,62,.28);margin:0 auto}

  /* countdown */
  .count{ text-align:center }
  .count-row{display:flex;justify-content:center;gap:clamp(18px,5vw,72px);margin:8px 0 0}
  .count-cell{display:flex;flex-direction:column;align-items:center;min-width:64px}
  .count-num{font-family:var(--font-serif);font-weight:300;font-variation-settings:'WONK' 1;
    font-size:clamp(3rem,9vw,6rem);line-height:1;color:var(--deep-sea)}
  .count-lab{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
    color:#8a7a55;margin-top:.9em}
  .count-sep{font-family:var(--font-serif);font-size:clamp(2rem,6vw,4rem);color:rgba(36,60,62,.25);
    align-self:flex-start;margin-top:.2em}

  /* story */
  .story{text-align:center}
  .story h2{font-size:clamp(2.4rem,6vw,4.2rem);margin-bottom:.5em;color:var(--ink)}
  .story p{font-family:var(--font-serif);font-weight:300;font-size:clamp(1.05rem,1.7vw,1.3rem);
    line-height:1.85;max-width:56ch;margin:1.4em auto 0;color:#3a4a44}
  .drop::first-letter{initial-letter:2;font-weight:400;color:var(--terracotta);margin-right:.06em}

  /* essentials */
  .ess{display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:center;
    border-top:1px solid rgba(36,60,62,.16);border-bottom:1px solid rgba(36,60,62,.16)}
  .ess>div{padding:clamp(34px,5vw,60px) 20px;position:relative}
  .ess>div+div{border-left:1px solid rgba(36,60,62,.16)}
  .ess .lab{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
    color:#9a7f4f;margin-bottom:1.1em}
  .ess .val{font-family:var(--font-serif);font-weight:300;font-variation-settings:'WONK' 1;
    font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.15;color:var(--ink)}
  @media(max-width:680px){.ess{grid-template-columns:1fr}
    .ess>div+div{border-left:0;border-top:1px solid rgba(36,60,62,.16)}}

  /* arcade */
  .arcade{background:var(--deep-sea);color:var(--sand);text-align:center;overflow:hidden}
  .arcade::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:screen;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23a)' opacity='0.25'/></svg>")}
  .arcade h2{font-size:clamp(2rem,5vw,3.4rem);color:var(--sand);margin-bottom:.5em}
  .arcade p{font-family:var(--font-serif);font-weight:300;font-size:clamp(1.05rem,1.7vw,1.25rem);
    line-height:1.8;max-width:52ch;margin:0 auto 2em;color:#d8c7a4}
  .btn-arcade{--sand:#EAB913;font-family:var(--font-serif);font-weight:300;font-variation-settings:'WONK' 1;
    font-size:18px;letter-spacing:.2em;text-transform:uppercase;color:var(--sunshine);
    border:1.5px solid rgba(234,185,19,.5);padding:18px 46px;text-decoration:none;display:inline-flex;
    position:relative;overflow:hidden;isolation:isolate;transition:color .35s}
  .btn-arcade::before{content:"";position:absolute;top:0;bottom:0;left:0;width:130%;z-index:-1;
    background:var(--sunshine);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.6,0,.25,1);
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);mask:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%)}
  .btn-arcade:hover{color:var(--deep-sea)} .btn-arcade:hover::before{transform:scaleX(1)}

  /* rsvp holding */
  .rsvp{text-align:center}
  .rsvp h2{font-size:clamp(2.2rem,5.5vw,3.8rem);margin-bottom:.5em;color:var(--ink)}
  .rsvp .em{font-style:italic;color:var(--terracotta)}
  .rsvp p{font-family:var(--font-serif);font-weight:300;font-size:clamp(1.05rem,1.7vw,1.25rem);
    line-height:1.8;max-width:50ch;margin:0 auto;color:#3a4a44}
  .rsvp .status{margin-top:2.4em;font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.18em;
    text-transform:uppercase;color:#9a7f4f}

  /* footer — nocturne */
  .foot{background:#0b1f22;color:var(--sand);text-align:center;padding:clamp(60px,8vw,100px) 24px}
  .foot .mono{color:var(--sand);opacity:.9}
  .foot .mono{display:flex;justify-content:center;margin-bottom:.4em}
  .foot-logo-svg{height:64px;width:auto;display:block;color:var(--sand);
    filter:drop-shadow(0 2px 20px rgba(0,0,0,.4))}
  .foot .fnames{font-family:var(--font-serif);font-weight:300;font-variation-settings:'WONK' 1;
    font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.02em;margin:1em 0 .3em}
  .foot .fmeta{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.14em;color:#9db0a6}

  /* ---------- NAV ---------- */
  .nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
    justify-content:space-between;padding:22px clamp(20px,4vw,54px);
    transition:background .4s ease,backdrop-filter .4s ease,padding .4s ease,box-shadow .4s ease;
    color:var(--sand)}
  .nav a{color:inherit;text-decoration:none}
  .nav-logo{display:flex;align-items:center;color:var(--cream);transition:color .4s ease}
  .logo-svg{height:46px;width:auto;display:block;transition:height .4s ease;
    filter:drop-shadow(0 2px 12px rgba(9,47,51,.45))}
  .nav-links{display:flex;gap:clamp(20px,2.6vw,44px);align-items:center}
  .nav-links a{font-family:var(--font-serif);font-weight:300;font-variation-settings:'SOFT' 0,'WONK' 1;
    font-size:15px;letter-spacing:.16em;text-transform:uppercase;position:relative;padding:4px 0;
    color:var(--sand);text-shadow:0 2px 16px rgba(9,47,51,.5);transition:color .3s}
  .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .nav-links a:hover::after{transform:scaleX(1)}
  /* scrolled -> frosted cream bar, logo + links switch to ink */
  .nav.scrolled{background:rgba(244,237,224,.82);backdrop-filter:blur(10px) saturate(1.1);
    -webkit-backdrop-filter:blur(10px) saturate(1.1);padding-top:14px;padding-bottom:14px;
    box-shadow:0 1px 0 rgba(36,60,62,.08),0 6px 24px rgba(36,60,62,.06)}
  .nav.scrolled .nav-logo{color:#394E6D}
  .nav.scrolled .logo-svg{height:38px;filter:none}
  .nav.scrolled .nav-links a{color:#243C3E;text-shadow:none}
  /* mobile */
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;color:inherit;padding:6px;
    color:var(--cream)}
  .nav-toggle svg{width:26px;height:26px;filter:drop-shadow(0 2px 10px rgba(9,47,51,.5))}
  .nav.scrolled .nav-toggle{color:#243C3E}
  .nav.scrolled .nav-toggle svg{filter:none}
  @media (max-width:720px){
    .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;
      gap:34px;background:rgba(13,26,18,.94);backdrop-filter:blur(4px);
      transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:30}
    .nav-links.open{transform:translateY(0)}
    .nav-links a{color:var(--sand);font-size:22px;text-shadow:none}
    .nav-toggle{display:block;position:relative;z-index:40}
  }

  :root{--sand:#E4CBA9;--cream:#F4EDE0;--font-serif:'Fraunces',Georgia,serif;--img-ar:2.3333333333333335;}
  *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%}
  body{background:#0d1a12;font-family:var(--font-serif)}
  .hero{position:relative;width:100%;height:100vh;overflow:hidden;background:#0d1a12}
  .stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:max(100vw,calc(100vh * var(--img-ar)));height:max(100vh,calc(100vw / var(--img-ar)))}
  .px{position:absolute;inset:-4%;width:108%;height:108%;will-change:transform;transition:transform .2s cubic-bezier(.22,.61,.36,1)}
  .fill{position:absolute;inset:0;width:100%;height:100%;background-size:100% 100%;background-repeat:no-repeat}
  .sky{background-image:url("../hero/sky.png")}
  .cloudsA{position:absolute;inset:0;height:100%;width:200%;background-image:url("../hero/clouds-long.png");
    background-size:69.9% 100%;background-repeat:repeat-x;background-position:left top;opacity:.9;animation:drift 200s linear infinite}
  @keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .town{background-image:url("../hero/town.png")}
  .cart{position:absolute;height:3%;aspect-ratio:1.919;background-repeat:no-repeat;background-size:contain;background-position:center bottom;transform-origin:50% 90%;will-change:left,top,transform,background-image;z-index:3}
  .towncover{background-image:url("../hero/town-cover.png");z-index:4}
  .treeA{position:absolute;inset:0;width:100%;height:100%;background:url("../hero/tree.png") center bottom/100% 100% no-repeat;transform-origin:50% 100%;animation:sway 13s ease-in-out infinite}
  @keyframes sway{0%,100%{transform:rotate(-0.05deg)}50%{transform:rotate(0.05deg)}}
  .treewrap{z-index:5}
  .darken{position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(to bottom,rgba(20,30,25,.18),rgba(20,30,25,.46))}
  .grain{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.3;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.75%22 numOctaves=%223%22/><feColorMatrix type=%22saturate%22 values=%220%22/></filter><rect width=%22140%22 height=%22140%22 filter=%22url(%23n)%22 opacity=%220.6%22/></svg>")}

  /* content: SVG headline + CTA, centered, above everything */
  .content{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;padding:8vh 5vw 0;text-align:center}
  .headline{width:min(1080px,88vw);height:auto;filter:drop-shadow(0 2px 24px rgba(9,47,51,.4))}
  .headline.mobile{display:none;width:min(420px,80vw)}
  .cta-zone{margin-top:max(80px,10vh);text-align:center}
  .menu-wrap{position:relative;display:inline-block}
  .boxbtn{position:relative;overflow:hidden;isolation:isolate;
    font-family:var(--font-serif);font-weight:300;font-variation-settings:'SOFT' 0,'WONK' 1;
    font-size:18px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);
    border:1.5px solid rgba(228,203,169,.55);padding:18px 46px;cursor:pointer;
    display:inline-flex;align-items:center;transition:color .35s ease,border-color .35s ease;
    text-shadow:0 2px 20px rgba(9,47,51,.4);
    background:rgba(20,30,25,.16);backdrop-filter:blur(2px) saturate(1.05);-webkit-backdrop-filter:blur(2px) saturate(1.05)}
  /* brush-stroke fill sweeping left->right */
  .boxbtn::before{content:"";position:absolute;top:0;bottom:0;left:0;width:130%;z-index:-1;
    background:var(--sand);transform:scaleX(0);transform-origin:left center;
    transition:transform .45s cubic-bezier(.6,0,.25,1);
    /* feather only the leading ~18px; the rest is solid. At scaleX(1) the feather
       overshoots past the button's right edge (overflow:hidden clips it) -> clean fill. */
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
            mask:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%)}
  .boxbtn>*{position:relative;z-index:1}
  .boxbtn:hover{color:#243C3E;border-color:var(--sand);text-shadow:none}
  .boxbtn:hover::before{transform:scaleX(1)}
  .menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
    background:#12242a;border:1px solid rgba(228,203,169,.18);border-radius:6px;padding:6px;min-width:210px;
    display:none;flex-direction:column;z-index:12;box-shadow:0 14px 44px rgba(0,0,0,.5)}
  .menu.open{display:flex}
  .menu a{font-family:var(--font-serif);color:var(--cream);font-size:.95rem;text-decoration:none;padding:11px 16px;border-radius:4px;transition:background .18s}
  .menu a:hover{background:rgba(228,203,169,.1)}
  .fine{margin-top:20px;font-weight:300;font-variation-settings:'SOFT' 0,'WONK' 1;color:#e6d3ac;
    font-size:15px;letter-spacing:.03em;text-shadow:0 2px 20px rgba(9,47,51,.5)}
  .fine .dot{color:rgba(228,203,169,.45);margin:0 .5em}

  @media (max-width:640px){
    .headline.desktop{display:none} .headline.mobile{display:block}
  }
  @media (prefers-reduced-motion:reduce){.cloudsA,.treeA{animation:none}}

  /* ---------- NAV CTA (trimmed nav: logo + single Arcade link) ---------- */
  .nav-cta{font-family:var(--font-serif);font-weight:300;font-variation-settings:'SOFT' 0,'WONK' 1;
    font-size:15px;letter-spacing:.16em;text-transform:uppercase;position:relative;padding:4px 0;
    color:var(--sand);text-shadow:0 2px 16px rgba(9,47,51,.5);transition:color .3s}
  .nav-cta::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .nav-cta:hover::after{transform:scaleX(1)}
  .nav.scrolled .nav-cta{color:#243C3E;text-shadow:none}

  /* Countdown: prevent edge-number clipping on narrow phones */
  @media (max-width:460px){
    .count-row{gap:12px}
    .count-cell{min-width:0}
    .count-sep{display:none}
    .count-num{font-size:clamp(2.1rem,13vw,3rem)}
  }

  /* ===================== BELOW-HERO POLISH ===================== */

  /* Painted wave seams between bands (drawn in the arriving band's colour,
     pulled up to overlap the band above so edges read painted, not stacked). */
  .wave{position:relative;z-index:3;height:44px;margin-top:-44px;pointer-events:none;
    background-repeat:no-repeat;background-position:center bottom;background-size:100% 100%}
  /* torn cream edge rising UP over the hero's bottom (absolute so the
     section's top padding can't push it down into the cream) */
  .wave-cream{position:absolute;left:0;right:0;top:-43px;bottom:auto;height:44px;margin:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'><path d='M0,26 C240,6 480,44 720,24 C960,6 1200,44 1440,22 L1440,48 L0,48 Z' fill='%23F4EDE0'/></svg>");
    background-position:center bottom}
  /* torn cream edge dipping DOWN into the arcade (absolute so section padding
     doesn't push it away from the boundary) */
  .wave-down{position:absolute;left:0;right:0;bottom:-43px;top:auto;height:44px;margin:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,22 C1200,44 960,6 720,26 C480,44 240,6 0,22 Z' fill='%23F4EDE0'/></svg>");
    background-position:center top}

  /* Countdown ornament */
  .count-orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:-.6em 0 1.6em}
  .count-orn .orn-rule{width:clamp(40px,10vw,90px);height:1px;background:rgba(36,60,62,.28)}
  .count-orn .orn-dot{color:var(--terracotta,#AF5031);font-size:12px;opacity:.8}

  /* Arcade: night diorama — scanlines, twinkling sparks, pixel goblin mascot */
  .arcade{position:relative}
  .arcade .sec-inner{position:relative;z-index:2}
  .arcade::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.12;
    background:repeating-linear-gradient(to bottom,rgba(0,0,0,.6) 0 1px,transparent 1px 3px)}
  .arcade-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
  .spark{position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;color:var(--sunshine,#EAB913);
    box-shadow:0 0 7px 1px currentColor;opacity:0;animation:twinkle 4.5s ease-in-out infinite}
  .spark.s1{top:16%;left:14%;color:var(--sunshine,#EAB913);animation-delay:0s}
  .spark.s2{top:26%;left:82%;color:var(--cherry,#FDABA5);animation-delay:1.1s}
  .spark.s3{top:12%;left:58%;color:var(--ember,#FF8A5C);animation-delay:2.2s}
  .spark.s4{top:40%;left:30%;color:var(--sunshine,#EAB913);animation-delay:3s}
  .spark.s5{top:34%;left:68%;color:var(--cherry,#FDABA5);animation-delay:1.7s}
  @keyframes twinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.95;transform:scale(1)}}
  .arcade-goblin{position:absolute;left:clamp(6px,3vw,54px);bottom:0;z-index:1;
    height:clamp(150px,24vw,290px);width:auto;image-rendering:pixelated;pointer-events:none;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
  @media(max-width:820px){.arcade-goblin{height:150px;left:-8px;opacity:.5}}

  /* Footer: nocturne fireworks bookend */
  .foot{position:relative;overflow:hidden}
  .foot>*:not(.fireworks){position:relative;z-index:1}
  .fireworks{position:absolute;inset:0;z-index:0;pointer-events:none}
  .fw{position:absolute;width:3px;height:3px;border-radius:50%;opacity:0;
    background:var(--sunshine-bright,#FFD65A);
    box-shadow:0 -15px 0 var(--ember,#FF8A5C),0 15px 0 var(--ember,#FF8A5C),
      -15px 0 0 var(--cherry,#FDABA5),15px 0 0 var(--cherry,#FDABA5),
      11px 11px 0 var(--sunshine-bright,#FFD65A),-11px -11px 0 var(--sunshine-bright,#FFD65A),
      11px -11px 0 var(--cherry,#FDABA5),-11px 11px 0 var(--sunshine-bright,#FFD65A);
    animation:burst 6s ease-out infinite}
  .fw.f1{top:20%;left:22%;animation-delay:0s}
  .fw.f2{top:30%;left:76%;animation-delay:2s}
  .fw.f3{top:14%;left:54%;animation-delay:4s}
  @keyframes burst{0%{transform:scale(.2);opacity:0}12%{opacity:1}55%{opacity:.55}100%{transform:scale(1.7);opacity:0}}

  @media (prefers-reduced-motion:reduce){
    .spark,.fw{animation:none;opacity:.55}
    .fw{opacity:.4}
  }