/* ============================================================
   Amanda & Alex — shared design system
   Used by every page. Page-specific rules live in each page's
   own <style> block.
   Design canvas is 1080px wide; the vw values below are derived
   from that (e.g. 60.76px at 1080 = 5.626vw) and clamp to the
   design value once the viewport passes 1080.
   ============================================================ */
:root{
  --green:#7b8348;
  --green-deep:#727d3f;
  --cream:#fffef2;
  --blue:#a6c2d6;
  --blue-deep:#9bbacf;
  --lime:#d4cd5d;
  --coral:#f2a87e;
  --coral-deep:#f0996c;
  --pink:#e35e97;
  --ink:#565759;
  --serif:"bogart", 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --sans:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --script:'Meow Script', 'Snell Roundhand', cursive;
  --wrap:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- shared type helpers ---------- */
.caps{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:400;
  line-height:2;
}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.narrow{max-width:640px}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

section{position:relative}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.82rem;
  font-weight:500;
  text-decoration:none;
  text-align:center;
  line-height:1;
  padding:.62em 1em;
  min-width:160px;
  border-radius:999px;
  border:2px solid currentColor;
  background:transparent;
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn--cream{color:var(--cream)}
.btn--cream:hover{background:var(--cream);color:var(--green)}
.btn--green{color:var(--green)}
.btn--green:hover{background:var(--green);color:var(--cream)}
.btn--coral{color:var(--cream)}
.btn--coral:hover{background:var(--cream);color:var(--coral-deep)}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ============================================================
   NAV — identical on every page
   ============================================================ */
.nav{background:var(--cream)}
/* 7 items now, so the gap is tighter than the design's 4-item nav — at the old
   37px max the row ended 56px from the edge and a slow font could wrap it. */
.nav ul{
  list-style:none;margin:0;padding:42px 20px 0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px clamp(14px,2.78vw,30px);
}
.nav a{
  text-decoration:none;color:var(--green);
  text-transform:uppercase;letter-spacing:.13em;
  font-size:1rem;font-weight:500;white-space:nowrap;
  padding-bottom:3px;border-bottom:1.5px solid transparent;
  transition:border-color .25s ease,opacity .25s ease;
}
.nav a:hover{border-color:var(--green);opacity:.85}
.nav a[aria-current="page"]{border-bottom-color:currentColor}

/* ============================================================
   PAGE HERO LOCKUP — flower cluster + "Wedding <script>"
   Shared by wedding-party.html and wedding-details.html; the
   design places both identically (cluster centred at x=563 on
   the 1080 canvas, i.e. 23px right of centre).
   ============================================================ */
.page-hero{background:var(--cream);text-align:center;padding:clamp(52px,10.4vw,112px) 24px 0}
.page-hero__flowers{
  width:clamp(76px,10.41vw,112.44px);
  margin:0 auto;
  transform:translateX(clamp(8px,2.13vw,23px));
}
.page-title{
  margin:clamp(12px,2.29vw,24.7px) 0 0;
  display:flex;align-items:baseline;justify-content:center;
  line-height:1;white-space:nowrap;
}
.page-title__serif{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.5rem,9.26vw,100px);
  color:var(--green);letter-spacing:.005em;
}
.page-title__script{
  font-family:var(--script);font-weight:400;
  font-size:clamp(3.6rem,13.24vw,143px);
  color:var(--lime);
  transform:translateY(-.056em);   /* design lifts the script ~8px above the serif baseline */
}
/* the design tucks "Details" back under "Wedding"; "party" sits just clear of it */
.page-title__script--tuck{margin-left:clamp(-13px,-1.19vw,0px)}
.page-title__script--clear{margin-left:clamp(0px,.3vw,3.2px)}

@media (max-width:680px){
  .page-title{flex-direction:column;align-items:center}
  .page-title__script{transform:none;margin-top:-.18em;margin-left:0}
}

/* ============================================================
   SECTION ARCS
   Each boundary in the design is a real cubic Bezier lifted
   straight out of the PDF. The <svg> sits in normal flow above
   its section: its background is the colour ABOVE the boundary,
   its path is filled with the colour BELOW it.
   preserveAspectRatio="none" keeps the horizontal shape exact
   at any width while the height follows the design proportion.
   ============================================================ */
.arc{display:block;width:100%;margin-bottom:-1px;position:relative;z-index:0}
.arc + section,.arc + .arc-sec{margin-top:0}

/* depth = design px at 1080 → vw, clamped so it never exceeds the design */
.arc--party  {height:clamp(26px,5.63vw,60.76px);  background:var(--cream)}
.arc--faq    {height:clamp(62px,13.2vw,142.53px); background:var(--cream)}
.arc--bbq    {height:clamp(28px,5.84vw,63.07px);  background:var(--lime)}
.arc--bigday {height:clamp(28px,5.84vw,63.05px);  background:var(--lime)}
.arc--rsvp   {height:clamp(28px,5.84vw,63.05px);  background:var(--cream)}

/* ============================================================
   FOOTER — identical on every page
   ============================================================ */
.footer{background:var(--green);padding:62px 24px}
.footer__row{
  max-width:950px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.footer__mono{width:clamp(70px,8.3vw,90px);flex:0 0 auto}
.footer__script{width:clamp(180px,24.4vw,263px)}
.footer__logo{width:clamp(150px,20.9vw,226px);flex:0 0 auto}

/* ============================================================
   REVEAL animation
   ============================================================ */
.reveal{transition:opacity .8s ease,transform .8s ease}
.js .reveal{opacity:0;transform:translateY(22px)}   /* only hide when JS can reveal it */
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

@media (max-width:680px){
  .footer__row{flex-direction:column;gap:34px}
}
@media (max-width:430px){
  .nav ul{gap:10px 16px}
  .nav a{font-size:.82rem;letter-spacing:.1em}
}