/* =========================================================
   WETU TURNS 17 · BRAND THEME
   Light look & feel based on the Wetu Brand Guidelines (2025).
   Load this file AFTER the page's own <style> block:
   <link rel="stylesheet" href="wetu-brand.css">
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;600;700&family=Poppins:wght@400;500;600;700&family=Questrial&family=Caveat:wght@500;600;700&display=swap');

:root{
  /* Brand palette */
  --wetu-green:#6BB645;
  --verdant:#3E9D6F;
  --everdeep:#0D5D50;
  --amber:#D46A36;
  --golden:#FCD348;
  --ivory:#F4F0E6;
  --fog:#EBE9F1;
  --sky:#DDEAF5;
  --twilight:#4C4A58;
  --grey:#555361;
  --bg:#FBFAF6;
  --blend:linear-gradient(155deg, #0A8F60 0%, #179C5C 45%, #3FAA45 80%, #5DB33F 100%);
  --blend-soft:linear-gradient(90deg, #0E9F6A, #6BB645);

  /* Remap the variables the existing pages already use */
  --paper:var(--bg);
  --paper-deep:var(--ivory);
  --ink:var(--twilight);
  --ink-soft:#66646F;
  --rust:var(--verdant);
  --petrol:var(--verdant);
  --marigold:var(--golden);
  --sage:var(--wetu-green);
  --curtain:var(--everdeep);
  --curtain-deep:#0A4A40;
  --curtain-light:var(--verdant);
  --card-shadow:0 18px 36px -18px rgba(76,74,88,.38);

  --head:'Rubik', 'Poppins', sans-serif;
  --title:'Poppins', sans-serif;
  --body:'Century Gothic', 'Questrial', 'Poppins', sans-serif;
}

html, body{ background:var(--bg); }
body{ color:var(--twilight); font-family:var(--body); }
::selection{ background:var(--golden); color:var(--twilight); }
.grain{ display:none !important; }
h1, h2, h3{ font-family:var(--title); font-weight:600; color:inherit; }

/* ---------- NAV ---------- */
.site-nav{
  background:rgba(255,255,255,.94);
  border-bottom:0;
  box-shadow:0 1px 0 rgba(76,74,88,.08);
}
.site-nav:after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--blend-soft);
}
.site-nav .brand{
  font-family:var(--title);
  font-weight:600;
  color:var(--twilight);
  display:inline-flex; align-items:center; gap:.55rem;
}
.site-nav .brand:before{
  content:"";
  width:22px; height:11px;
  border:5px solid var(--wetu-green);
  border-bottom:0;
  border-radius:22px 22px 0 0;
  box-sizing:border-box;
  margin-top:-3px;
}
/* real logo in the nav: hide the drawn arch when the logo is present */
.site-nav .brand:has(.brand-logo):before{ display:none; }
.site-nav .brand .brand-logo{
  height:30px;
  width:auto;
  display:block;
}
.site-nav .brand span{
  font-family:var(--title);
  font-weight:600;
  font-size:1rem;
  color:var(--verdant);
  padding-left:.7rem;
  margin-left:.15rem;
  border-left:1.5px solid rgba(76,74,88,.18);
  line-height:1.3;
  margin-top:6px;
}

/* white logo on green */
.hero-logo{
  display:block;
  width:clamp(120px, 14vw, 170px);
  height:auto;
  margin:0 auto 3.4rem;
}
.close-logo{
  display:block;
  width:110px;
  height:auto;
  margin:2.6rem auto 0;
  opacity:.95;
}

.site-nav .links a{
  font-family:var(--title);
  font-weight:500;
  color:var(--grey);
}
.site-nav .links a:hover{ color:var(--everdeep); }
.site-nav .links a.active{ color:var(--verdant); border-bottom-color:var(--wetu-green); }

/* ---------- GREEN HERO (all pages) ---------- */
.hero,
.new-act-intro,
.act3-open,
.landing-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--blend) !important;
  color:#fff;
}
.new-act-intro,
.act3-open{
  max-width:none !important;
  margin:0 !important;
  padding-left:max(6vw, calc((100% - 1320px) / 2 + 6vw)) !important;
  padding-right:max(6vw, calc((100% - 1320px) / 2 + 6vw)) !important;
  padding-bottom:16vh !important;
}
.landing-hero{ padding:14vh 6vw 20vh !important; }
.hero{ padding-bottom:18vh; }

/* big faint "hut" arch */
.hero:before,
.new-act-intro:before,
.act3-open:before,
.landing-hero:before{
  content:"";
  position:absolute;
  z-index:-1;
  right:-6vw;
  bottom:4vh;
  width:min(58vw, 680px);
  aspect-ratio:2 / 1;
  border:clamp(46px, 8vw, 110px) solid rgba(255,255,255,.09);
  border-bottom:0;
  border-radius:999px 999px 0 0;
  box-sizing:border-box;
  pointer-events:none;
}
/* white swoosh at the bottom, like the brand slides */
.hero:after,
.new-act-intro:after,
.act3-open:after,
.landing-hero:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0; right:0; bottom:-1px;
  height:11vh;
  background:var(--bg);
  border-top-left-radius:100% 100%;
  pointer-events:none;
}

/* hero text */
.hero h1,
.act3-open h1{
  font-family:var(--head);
  font-weight:700;
  color:#fff;
  letter-spacing:-.015em;
}
.hero h1 em,
.act3-open h1 em{
  font-style:normal;
  color:var(--golden);
}
.hero .eyebrow{ color:var(--golden); }
.hero p.sub,
.act3-open .lead{
  color:rgba(255,255,255,.92);
  font-family:var(--body);
}
.date-strip span{
  font-family:var(--title);
  color:#fff;
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.08);
}
.hero .scroll-cue{ bottom:13vh; color:#fff; }
.act3-open .scroll-cue{
  font-family:var(--title);
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
}

/* pill labels on green */
.act-ribbon,
.new-act-intro .act-label,
.landing-hero .act-label{
  display:inline-block;
  align-self:flex-start;
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,.75) !important;
  border-radius:999px !important;
  box-shadow:none !important;
  font-family:var(--title) !important;
  font-weight:600 !important;
  font-size:.8rem !important;
  letter-spacing:.24em !important;
  text-transform:uppercase;
  padding:.45rem 1.3rem !important;
  transform:none !important;
}
.hero .act-ribbon{ align-self:center; }

.new-act-intro h2{
  font-family:var(--head);
  font-weight:700;
  color:#fff;
  max-width:none;
  margin-top:1.2rem;
}
.new-act-intro .short-line{
  font-family:var(--title);
  color:rgba(255,255,255,.9);
}

/* index page hero (inline styles need !important) */
.landing-hero .big-number{
  font-family:var(--head) !important;
  font-weight:700;
  color:#fff !important;
  opacity:1 !important;
}
.landing-hero h2{ font-family:var(--title); color:#fff; }
.landing-hero p{ color:rgba(255,255,255,.9) !important; font-family:var(--title); }

/* ---------- SECTION LABELS & HEADINGS ---------- */
.chapter{ background:linear-gradient(var(--bg) 80%, rgba(251,250,246,0)); }
.chapter .num,
.moment-label,
.stop .stop-head .loc{
  display:inline-block;
  font-family:var(--title);
  font-weight:600;
  font-size:.76rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--everdeep);
  border:1.5px solid rgba(62,157,111,.55);
  border-radius:999px;
  padding:.35rem 1rem;
  transform:none;
}
.chapter h2,
.stop .stop-head h3,
.moment-head h2{
  font-family:var(--title);
  font-weight:600;
  color:var(--twilight);
}
.chapter .rule{
  height:2px;
  background:var(--blend-soft);
  opacity:.8;
}
.stop .stop-head p,
.moment-head p{ color:var(--ink-soft); }
.stop .stop-head h3{ margin-top:.8rem; }
.moment-head h2{ margin-top:.9rem; }

.moment{ border-top:0; }
.moment + .moment:before{
  content:"";
  position:absolute; top:0; left:6vw; right:6vw; height:1px;
  background:linear-gradient(90deg, rgba(62,157,111,.35), rgba(107,182,69,0));
}
.moment-num{
  font-family:var(--head);
  font-weight:700;
  background:var(--blend-soft);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:1;
}

/* ---------- PHOTO CARDS ---------- */
.polaroid,
.virtual-photo,
.sa-card,
.featured .frame,
.featured-video{
  background:#fff;
  border-radius:10px;
  box-shadow:var(--card-shadow);
  outline:1px solid rgba(76,74,88,.06);
}
.polaroid img, .polaroid video,
.virtual-photo img,
.sa-card img, .sa-card video,
.featured video,
.featured-video video{
  border-radius:6px;
  background:var(--ivory);
}
.polaroid:hover{ box-shadow:0 26px 46px -18px rgba(13,93,80,.4); }
.polaroid figcaption,
.virtual-photo figcaption,
.sa-card figcaption,
.featured-video figcaption{ color:var(--twilight); }
.polaroid .count{
  color:#8A8794;
  font-family:var(--title);
  font-size:.78rem;
  letter-spacing:.12em;
  bottom:.65rem;
}
.polaroid .pin{
  background:radial-gradient(circle at 35% 30%, #fff, var(--golden) 55%, #d9a91c 100%);
}
.featured figcaption{ color:var(--twilight); }

/* Act 2 */
.virtual-act{ background:var(--bg) !important; }
.virtual-note{
  font-family:var(--title);
  font-weight:600;
  font-size:clamp(1.3rem, 3vw, 2rem);
  color:var(--verdant);
  transform:none;
}

/* ---------- CAROUSEL (Act 3) ---------- */
.carousel-progress{ background:#E4E1D8; border-radius:2px; }
.carousel-progress span{ background:var(--blend-soft); }
.carousel-counter{ font-family:var(--title); color:var(--ink-soft); }
.carousel-btn{
  border:1.5px solid var(--verdant);
  color:var(--verdant);
  background:#fff;
}
.carousel-btn:hover:not(:disabled){ background:var(--verdant); color:#fff; }
.swipe-hint{
  color:var(--verdant);
  font-family:var(--title);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@media (max-width:640px){ .swipe-hint{ display:none; } }

/* ---------- LANDING CARDS (index) ---------- */
.landing-cards{
  position:relative;
  z-index:2;
  margin-top:-12vh !important;
}
.landing-card{
  background:#fff;
  border:1px solid rgba(76,74,88,.08);
  border-radius:16px;
  box-shadow:0 22px 44px -24px rgba(76,74,88,.45);
  overflow:hidden;
  position:relative;
}
.landing-card:before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--blend-soft);
}
.landing-card:hover{ border-color:rgba(62,157,111,.5); }
.landing-card .act-label{
  font-family:var(--title);
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--everdeep);
  border:1.5px solid rgba(62,157,111,.55);
  border-radius:999px;
  padding:.3rem .9rem;
  transform:none;
}
.landing-card h3{ font-family:var(--title); font-weight:600; color:var(--twilight); margin-top:1rem; }
.landing-card p{ color:var(--ink-soft); }

/* ---------- GREEN CLOSING (all pages) ---------- */
.closing,
.act3-close,
.final-anniversary{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--blend) !important;
  color:#fff;
  padding-top:20vh !important;
}
/* top swoosh (reuses the old curtain pseudo-elements) */
.closing:before,
.act3-close:before,
.final-anniversary:before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-1px; left:0; right:0; bottom:auto;
  width:auto;
  height:11vh;
  background:var(--bg);
  border-radius:0;
  border-bottom-right-radius:100% 100%;
  box-shadow:none;
  opacity:1;
}
.closing:after,
.act3-close:after,
.final-anniversary:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-8vw; right:auto; top:auto;
  bottom:-2px;
  width:min(52vw, 600px);
  aspect-ratio:2 / 1;
  border:clamp(40px, 7vw, 100px) solid rgba(255,255,255,.09);
  border-bottom:0;
  border-radius:999px 999px 0 0;
  box-sizing:border-box;
  background:none;
  box-shadow:none;
  opacity:1;
}
.closing h2, .act3-close h2, .final-anniversary h2{ color:#fff; font-family:var(--title); }
.closing p, .final-anniversary p{ color:rgba(255,255,255,.9); }
.closing .sign{ color:var(--golden); }
.act3-close .big-number,
.final-anniversary .big-number{
  font-family:var(--head);
  font-weight:700;
  color:#fff;
  opacity:1;
}
.act3-close .toast{
  font-family:var(--title);
  font-weight:600;
  font-size:clamp(1.2rem, 2.6vw, 1.7rem);
  color:var(--golden);
}
.act3-close .sign{
  color:rgba(255,255,255,.85);
  font-family:var(--title);
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.closing .act2-teaser{ border-top-color:rgba(255,255,255,.3); }
.closing .act2-label{
  color:#fff;
  border:1.5px solid rgba(255,255,255,.75);
  border-radius:999px;
  font-family:var(--title);
}
.closing .act2-line{
  font-family:var(--title);
  font-weight:600;
  font-size:clamp(1.3rem, 3vw, 1.9rem);
  color:var(--golden);
}
.closing .act2-title{ font-family:var(--head); color:#fff; }
.closing .act2-detail{ color:var(--sky); font-family:var(--title); }
.closing .act2-note{ color:rgba(255,255,255,.85); }
.closing .wetu-mark{ color:rgba(255,255,255,.7); }

/* curtain intro, if a page still uses it */
.curtain-panel{ background:var(--blend) !important; }
.curtain-panel:before{ background:linear-gradient(90deg, rgba(252,211,72,.8), rgba(252,211,72,0)); }

/* ---------- LIGHTBOX ---------- */
.lightbox{ background:rgba(28,30,34,.93); }
.lightbox .lb-close,
.lb-btn{
  color:#fff;
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);
}
.lb-count{ color:rgba(255,255,255,.8); font-family:var(--title); }
.lightbox img, .lightbox video{ border-radius:8px; }

@media (max-width:640px){
  .hero:after, .new-act-intro:after, .act3-open:after, .landing-hero:after{ height:7vh; }
  .closing:before, .act3-close:before, .final-anniversary:before{ height:7vh; }
  .landing-cards{ margin-top:-8vh !important; }
}

/* ---------- DATES ---------- */
.act-date{
  align-self:flex-start;
  display:inline-block;
  margin-top:1.8rem;
  padding:.5rem 1.1rem;
  border:1.5px solid rgba(255,255,255,.6);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-family:var(--title);
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.card-date{
  display:inline-block;
  margin-top:1.1rem;
  padding:.35rem .9rem;
  border-radius:999px;
  background:var(--ivory);
  color:var(--everdeep);
  font-family:var(--title);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.06em;
}

/* =========================================================
   INDEX · ONE-PAGE OPENING (fits the screen without scrolling)
   ========================================================= */
body.landing{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
body.landing .landing-hero{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:5vh 6vw 15vh !important;
}
body.landing .hero-logo{
  width:auto;
  height:clamp(28px, 5.2vh, 48px);
  margin:0 auto 2.6vh;
}
body.landing .landing-hero .big-number{
  font-size:clamp(4.2rem, 19vh, 12rem) !important;
  line-height:.85 !important;
}
body.landing .landing-hero h2{
  margin-top:1.6vh !important;
  font-size:clamp(1.5rem, 5.2vh, 3.2rem) !important;
  line-height:1.1;
}
body.landing .landing-hero p{
  margin-top:1.3vh !important;
  font-size:clamp(.72rem, 1.6vh, .85rem) !important;
}
body.landing .landing-cards{
  margin:-11vh auto 4vh !important;
  width:100%;
  gap:1.4rem;
}
body.landing .landing-card{
  padding:clamp(1.1rem, 3vh, 2rem) 1.4rem clamp(1rem, 2.6vh, 1.8rem);
}
body.landing .landing-card h3{
  margin-top:clamp(.5rem, 1.4vh, 1rem);
  font-size:clamp(1.3rem, 3.2vh, 1.7rem);
}
body.landing .landing-card p{ margin-top:.35rem; }
body.landing .card-date{ margin-top:clamp(.6rem, 1.6vh, 1.1rem); }

/* phone: compact rows so the 3 acts fit on one screen */
@media (max-width:640px){
  body.landing .landing-hero{ padding:4.5vh 6vw 11vh !important; }
  body.landing .hero-logo{ height:clamp(24px, 4.2vh, 36px); margin-bottom:2vh; }
  body.landing .landing-hero .big-number{ font-size:clamp(3.6rem, 13vh, 7rem) !important; }
  body.landing .landing-hero h2{ font-size:clamp(1.4rem, 4vh, 2rem) !important; }
  body.landing .landing-cards{
    margin:-7vh auto 3vh !important;
    padding:0 5vw;
    grid-template-columns:1fr;
    gap:.75rem;
  }
  body.landing .landing-card{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "label arrow"
      "title arrow"
      "date  arrow";
    align-items:center;
    gap:.3rem .8rem;
    text-align:left;
    padding:1rem 1.1rem .95rem;
    border-radius:14px;
  }
  body.landing .landing-card:before{ top:0; bottom:0; left:0; right:auto; width:5px; height:auto; }
  body.landing .landing-card .act-label{ grid-area:label; justify-self:start; font-size:.66rem; padding:.22rem .7rem; }
  body.landing .landing-card h3{ grid-area:title; margin:0; font-size:1.25rem; }
  body.landing .landing-card p{ display:none; }
  body.landing .landing-card .card-date{
    grid-area:date;
    margin:0;
    padding:0;
    background:none;
    font-size:.72rem;
    color:var(--ink-soft);
    text-align:left;
    justify-self:start;
  }
  body.landing .landing-card:after{
    content:"→";
    grid-area:arrow;
    width:34px; height:34px;
    align-self:center;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--verdant);
    color:#fff;
    font-size:.95rem;
  }
}

/* =========================================================
   MOBILE POLISH (all pages)
   ========================================================= */
@media (max-width:700px){
  .site-nav{
    flex-direction:column;
    align-items:stretch;
    gap:.55rem;
    padding:.75rem 5vw .6rem;
  }
  .site-nav .brand .brand-logo{ height:26px; }
  .site-nav .links{
    gap:1.1rem;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .site-nav .links::-webkit-scrollbar{ display:none; }
  .site-nav .links a{ white-space:nowrap; font-size:.7rem; letter-spacing:.08em; }

  .new-act-intro, .act3-open{
    min-height:auto !important;
    padding-top:7vh !important;
    padding-bottom:12vh !important;
  }
  .hero:before, .new-act-intro:before, .act3-open:before{ width:80vw; right:-20vw; }
  .act-date{ font-size:.68rem; letter-spacing:.1em; margin-top:1.3rem; }
  .moment{ padding:7vh 5vw 8vh; }
  .carousel-track{ gap:1.2rem; }
  .carousel-track .polaroid{ flex-basis:72vw; }
  .featured-video{ transform:none; }
}

/* ---------- NEXT ACT LINK ---------- */
.next-act{
  position:relative;
  z-index:2;
  display:inline-block;
  margin-top:2.4rem;
  padding:.8rem 1.6rem;
  border-radius:999px;
  background:#fff;
  color:var(--everdeep);
  font-family:var(--title);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.4);
  transition:transform .25s ease, background .25s ease;
}
.next-act:hover{ transform:translateY(-3px); background:var(--golden); }
.closing .close-logo{ position:relative; z-index:2; }