/* Gail & Glen Turner — 30th Anniversary
   Shared styles for index.html and rsvp.html. */

:root{
  --ivory:#FBF6EC;
  --cream:#F5EDDC;
  --gold:#B8860B;
  --gold-soft:#C9A84C;
  --gold-light:#E7D4A0;
  --crimson:#8B1A1A;
  --crimson-deep:#6e1212;
  --ink:#2C1F12;
  --ink-soft:#4a3a28;
  --white:#FFFDF8;
  --shadow:rgba(44,31,18,.18);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'EB Garamond',Georgia,serif;
  font-size:21px;
  line-height:1.65;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.15;color:var(--ink);}
.script{font-family:'Great Vibes',cursive;font-weight:400;color:var(--crimson);line-height:1.1;}
.label{font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--gold);font-weight:600;}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px;}
section{padding:72px 0;position:relative;}
.section-cream{background:var(--cream);}
.divider{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:18px auto;}
.divider::after{content:"❧";display:block;text-align:center;color:var(--gold);font-size:1.4rem;margin-top:-15px;background:transparent;}
.center{text-align:center;}
.hidden{display:none;}

/* particles */
#particles{position:fixed;inset:0;pointer-events:none;z-index:1;}
.particle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,.9),rgba(201,168,76,0));opacity:.5;animation:float linear infinite;}
@keyframes float{0%{transform:translateY(110vh) scale(1);opacity:0;}10%{opacity:.6;}90%{opacity:.5;}100%{transform:translateY(-10vh) scale(1.3);opacity:0;}}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,246,236,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--gold-light);box-shadow:0 2px 12px var(--shadow);}
.nav-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 22px;gap:10px;}
.nav-name{font-family:'Great Vibes',cursive;font-size:1.7rem;color:var(--crimson);white-space:nowrap;text-decoration:none;}
.nav-links{display:flex;gap:6px;flex-wrap:wrap;}
.nav-links a{font-family:'Montserrat',sans-serif;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:10px 12px;border-radius:6px;font-weight:500;}
.nav-links a:hover,.nav-links a:focus{background:var(--gold-light);color:var(--crimson-deep);}
.nav-links a.current{color:var(--crimson);font-weight:600;}
.nav-toggle{display:none;background:var(--crimson);color:#fff;border:none;font-family:'Montserrat',sans-serif;font-size:1rem;padding:12px 16px;border-radius:8px;min-height:52px;cursor:pointer;}
@media(max-width:860px){
  .nav-links{display:none;width:100%;flex-direction:column;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 12px;font-size:1rem;border-bottom:1px solid var(--gold-light);}
  .nav-toggle{display:block;}
  .nav-inner{flex-wrap:wrap;}
}

/* BUTTONS */
.btn{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.95rem;color:#fff;background:linear-gradient(135deg,var(--crimson),var(--crimson-deep));border:none;border-radius:50px;padding:18px 40px;min-height:56px;cursor:pointer;text-decoration:none;box-shadow:0 6px 18px rgba(139,26,26,.32);transition:transform .15s ease,box-shadow .15s ease;}
.btn:hover,.btn:focus{transform:translateY(-2px);box-shadow:0 10px 24px rgba(139,26,26,.4);}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:var(--ink);box-shadow:0 6px 18px rgba(184,134,11,.32);}
.btn-outline{background:transparent;color:var(--crimson);border:2px solid var(--crimson);box-shadow:none;}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none;}

/* HERO — full-bleed photo. Their names sit in the clear space above their heads,
   the date and RSVP in the darkened band at the bottom. */
.hero{
  position:relative;
  /* Taller than the viewport-ish so more of the two of them shows on a desktop.
     svh keeps it honest on phones, where the browser chrome eats into vh. */
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  text-align:center;
  /* The generous bottom padding is deliberate: it lifts the date and the RSVP
     button back above the fold on a short laptop even though the photo itself
     runs the full height. */
  padding:20px 22px 78px;
  overflow:hidden;
}
/* 18%, not the old 42%: at 42% a wide desktop viewport cropped the tops of their
   heads off under the nav. This slides the visible band up so both faces clear it
   with the blurred balloon arch left open above them for the names. Phones scale
   the photo by height, so there is no vertical overflow and this value does
   nothing there — see the mobile rules at the end of this block instead. */
.hero::before{
  content:"";position:absolute;inset:0;
  background:url('images/site/hero.jpg') center 18%/cover no-repeat;
}
/* Dark at the very top so the white script reads over the pale balloons, opening
   up through the middle so their faces stay bright, then darkening again through
   the date and melting into the ivory page so there is no hard seam. */
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(28,17,9,.58) 0%,
    rgba(28,17,9,.36) 15%,
    rgba(28,17,9,.12) 34%,
    rgba(38,22,12,.50) 70%,
    rgba(52,30,16,.86) 89%,
    rgba(251,246,236,.97) 100%);
}
.hero-top,.hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;color:#fff;}
.hero .label{color:var(--gold-light);}
.hero-names{font-family:'Great Vibes',cursive;font-size:clamp(2.6rem,10vw,5.8rem);color:#fff;margin:2px 0;text-shadow:0 3px 26px rgba(0,0,0,.6);}
.hero-meta{font-size:1.2rem;color:#fdf2dd;margin-bottom:26px;text-shadow:0 2px 12px rgba(0,0,0,.6);}
/* On a phone the photo is scaled to fit the height, so there is no vertical
   overflow to push their faces down — the only way to keep the script clear of
   them is to keep this block short. Their heads start around 22% down the photo. */
@media(max-width:600px){
  /* Fill exactly what is left of the first screen under the mobile nav (52px
     button + 20px padding), so the RSVP button stays reachable without a scroll
     while their heads still sit well below the script. */
  .hero{min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);padding:14px 18px 34px;}
  .hero-names{font-size:clamp(2.4rem,9.5vw,3.4rem);}
  .hero .label{font-size:.62rem;letter-spacing:.16em;}
  .hero-meta{font-size:1.05rem;margin-bottom:20px;}
}

/* ---- Desktop hero: the announcement above the photo, the details below it ----
   Phones and small tablets keep the signed-off layout with the name over the
   photo, so all of this is gated behind min-width:901px and .hero-intro is
   hidden everywhere else. */
.hero-intro{display:none;}

@media(min-width:901px){
  .hero-intro{
    display:block;text-align:center;background:var(--ivory);
    padding:18px 22px 14px;
  }
  .hero-intro-name{
    font-family:'Great Vibes',cursive;font-weight:400;line-height:1.1;
    color:var(--crimson);font-size:clamp(3rem,4.6vw,4.4rem);
  }
  .hero-intro-sub{
    font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.35;
    font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--ink-soft);
    margin-top:2px;
  }

  /* Nothing is written over the two of them now. The height is what is left of
     the first screen after the nav, the announcement and the details strip, so
     the RSVP button still lands above the fold on a short laptop. */
  .hero{
    min-height:0;
    height:clamp(380px,calc(100vh - 212px),820px);
    justify-content:flex-end;
    padding:0;
  }
  .hero .hero-top{display:none;}
  .hero::before{background-position:center 24%;}
  /* No text to protect, so the photo stays bright — just enough at the bottom
     edge to stop the strip meeting it as a hard line. */
  .hero::after{
    background:linear-gradient(180deg,
      rgba(28,17,9,.10) 0%,
      rgba(28,17,9,0) 20%,
      rgba(28,17,9,0) 76%,
      rgba(44,31,18,.16) 100%);
  }
  /* The details ride as an opaque strip flush along the bottom of the photo,
     which keeps them out of the picture without a second section to size. */
  .hero-inner{
    max-width:none;width:100%;margin:0;color:var(--ink);
    background:var(--cream);border-top:1px solid var(--gold-light);
    padding:16px 22px;
    display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;
  }
  .hero-meta{color:var(--ink);text-shadow:none;margin:0;font-size:1.18rem;text-align:left;}
}

/* STORY */
.story-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;}
@media(min-width:820px){.story-grid{grid-template-columns:1.05fr 1fr;}}
.story-text p{margin-bottom:18px;}
.story-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* These are tall phone portraits, so a centred crop lands on their waists and
   cuts the heads off. Bias the crop upward to keep faces in frame. Re-check
   object-position whenever a story photo is swapped. */
.story-photos img{width:100%;height:230px;object-fit:cover;object-position:center 8%;border-radius:10px;box-shadow:0 8px 22px var(--shadow);border:5px solid var(--white);}
.story-photos img:first-child{grid-column:1/3;height:300px;object-position:center 22%;}
.section-head{text-align:center;margin-bottom:34px;}
.section-head .script{font-size:clamp(2.6rem,8vw,4rem);}

/* DETAILS */
.detail-cards{display:grid;grid-template-columns:1fr;gap:22px;margin-top:14px;}
@media(min-width:760px){.detail-cards{grid-template-columns:repeat(3,1fr);}}
.detail-card{background:var(--white);border:1px solid var(--gold-light);border-radius:14px;padding:34px 26px;text-align:center;box-shadow:0 6px 18px var(--shadow);}
.detail-card .icon{font-size:2rem;color:var(--gold);margin-bottom:10px;}
.detail-card h3{font-size:1.7rem;color:var(--crimson);margin-bottom:8px;}
.detail-card p{font-size:1.1rem;}
.detail-note{text-align:center;margin-top:34px;font-size:1.25rem;font-style:italic;color:var(--ink-soft);}
.detail-note strong{color:var(--crimson);font-style:normal;}

/* ===== ENVELOPE — closed by default, opens on the way to the RSVP page ===== */
.envelope-zone{text-align:center;margin:0 auto;max-width:520px;}
.envelope-link{display:block;text-decoration:none;color:inherit;border-radius:14px;}
.envelope-link:focus-visible{outline:3px solid var(--gold);outline-offset:10px;}
.envelope{
  position:relative;width:100%;max-width:440px;height:300px;margin:0 auto;
  cursor:pointer;perspective:1400px;
  transition:transform .3s ease;
}
.envelope-link:hover .envelope,
.envelope-link:focus-visible .envelope{transform:translateY(-6px);}
.env-back{position:absolute;inset:0;background:linear-gradient(135deg,#9a2020,#7a1717);border-radius:10px;box-shadow:0 14px 36px rgba(0,0,0,.3);z-index:1;}
.env-letter{
  position:absolute;left:6%;right:6%;top:8%;bottom:14%;
  background:var(--white);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px;text-align:center;z-index:2;
  transition:transform 1.1s cubic-bezier(.22,.9,.3,1) .85s;
}
.env-letter .script{font-size:2.1rem;}
.env-letter p{font-size:1rem;color:var(--ink-soft);margin-top:4px;}
.env-flap{
  position:absolute;left:0;right:0;top:0;height:55%;
  background:linear-gradient(135deg,#a82323,#8B1A1A);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top;transition:transform .9s cubic-bezier(.4,.02,.3,1) .25s;z-index:4;border-radius:10px 10px 0 0;
}
/* Left and right flaps. Without these the top flap and bottom pocket leave two
   triangular gaps at the sides, and the letter shows through a "closed" envelope. */
.env-side{position:absolute;top:0;height:100%;width:50%;z-index:5;}
.env-side-l{left:0;clip-path:polygon(0 0,0 100%,100% 50%);background:linear-gradient(90deg,#911e1e,#7c1818);border-radius:10px 0 0 10px;}
.env-side-r{right:0;clip-path:polygon(100% 0,100% 100%,0 50%);background:linear-gradient(270deg,#911e1e,#7c1818);border-radius:0 10px 10px 0;}
.env-pocket{position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(135deg,#8B1A1A,#6e1212);clip-path:polygon(0 100%,100% 100%,50% 0);z-index:6;border-radius:0 0 10px 10px;}

/* Wax seal, split into two halves so it can crack apart on open */
.wax{
  position:absolute;top:42%;left:50%;margin:-37px 0 0 -37px;
  width:74px;height:74px;z-index:7;display:flex;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.45));
  animation:sealPulse 3s ease-in-out infinite;
}
.wax-half{
  width:50%;height:100%;position:relative;overflow:hidden;
  background-image:radial-gradient(circle at 35% 30%,#b32a2a,#7a1414);
  background-size:74px 74px;background-repeat:no-repeat;
  transition:transform .85s cubic-bezier(.34,.05,.6,1),opacity .85s ease;
}
.wax-l{border-radius:37px 0 0 37px;background-position:0 0;}
/* Overlap the halves by a hair, otherwise antialiasing leaves a seam down the seal. */
.wax-r{border-radius:0 37px 37px 0;background-position:-36.5px 0;margin-left:-.5px;}
.wax-mono{
  position:absolute;top:0;width:74px;height:74px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Great Vibes',cursive;color:#f3d98a;font-size:2rem;
}
.wax-l .wax-mono{left:0;}
/* -36.5px, not -37px: cancels the half-pixel overlap above so the two halves of
   the monogram line up exactly and the seal reads as one piece. */
.wax-r .wax-mono{left:-36.5px;}
@keyframes sealPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.055);}}

/* Opening sequence: seal cracks, flap lifts, letter rises, then we navigate. */
.envelope.opening{cursor:default;}
.envelope.opening .wax{animation:none;}
.envelope.opening .wax-l{transform:translate(-46px,62px) rotate(-62deg);opacity:0;}
.envelope.opening .wax-r{transform:translate(46px,62px) rotate(62deg);opacity:0;}
.envelope.opening .env-flap{transform:rotateX(180deg);z-index:0;}
/* Above the pocket and side flaps, so the letter reads as sliding out of the envelope. */
.envelope.opening .env-letter{transform:translateY(-122px) scale(1.03);z-index:8;}

/* Warm glow behind the seal at the moment it cracks */
.env-burst{
  position:absolute;left:50%;top:42%;width:160px;height:160px;margin:-80px 0 0 -80px;
  border-radius:50%;pointer-events:none;opacity:0;z-index:3;
  background:radial-gradient(circle,rgba(255,236,175,.9),rgba(212,175,55,.4) 45%,rgba(212,175,55,0) 72%);
}
.envelope.opening .env-burst{animation:burst 1.1s ease-out forwards;}
@keyframes burst{
  0%{opacity:0;transform:scale(.25);}
  22%{opacity:.95;}
  100%{opacity:0;transform:scale(2.8);}
}

/* Gold flakes. Each one gets its own drift, spin and timing from JS. */
.env-flake{
  position:absolute;left:50%;top:42%;
  width:var(--w);height:var(--h);background:var(--bg);border-radius:var(--br);
  pointer-events:none;opacity:0;z-index:9;
  animation:flake var(--dur) cubic-bezier(.16,.68,.4,1) var(--delay) forwards;
}
@keyframes flake{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg);}
  12%{opacity:1;}
  72%{opacity:1;}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(var(--sc)) rotate(var(--rot));}
}

.env-hint{
  font-family:'Montserrat',sans-serif;font-size:.8rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);margin-top:18px;font-weight:600;
}
/* Fills over the length of the animation so the wait reads as intentional. */
.env-progress{
  width:220px;height:3px;margin:14px auto 0;border-radius:2px;
  background:rgba(184,134,11,.2);overflow:hidden;
  opacity:0;transition:opacity .35s ease;
}
.envelope-zone.opening .env-progress{opacity:1;}
.env-progress span{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold));
}
.env-cta{margin-top:16px;}
.envelope-zone.opening .env-cta{opacity:.35;transition:opacity .4s ease;}
/* The flap swings up over this heading and the letter rises past it, so clear it
   out of the way and let the envelope have the moment to itself. */
#rsvp.opening .section-head{opacity:0;transition:opacity .45s ease;}

@media(prefers-reduced-motion:reduce){
  .particle{animation:none;}
  .wax{animation:none;}
  .envelope,.env-letter,.env-flap,.wax-half{transition:none;}
  .env-flake,.env-burst{display:none;}
}

/* RSVP */
.card-soft{background:var(--white);border:1px solid var(--gold-light);border-radius:16px;box-shadow:0 8px 26px var(--shadow);padding:30px 26px;max-width:640px;margin:0 auto;}
label.fld{display:block;font-family:'Montserrat',sans-serif;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:16px 0 7px;font-weight:600;}
input[type=text],input[type=search],textarea{width:100%;font-family:'EB Garamond',serif;font-size:1.15rem;padding:15px 16px;min-height:54px;border:2px solid var(--gold-light);border-radius:10px;background:var(--ivory);color:var(--ink);}
input:focus,textarea:focus{outline:none;border-color:var(--gold);background:#fff;}
input.field-error{border-color:var(--crimson);}
textarea{min-height:110px;resize:vertical;}
.name-row{display:grid;grid-template-columns:1fr;gap:0 16px;}
@media(min-width:560px){.name-row{grid-template-columns:1fr 1fr;}}
.hint{font-size:1rem;color:var(--ink-soft);font-style:italic;margin-top:10px;}
.party-card{margin-top:22px;border-top:2px dashed var(--gold-light);padding-top:20px;}
.party-name{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:var(--crimson);text-align:center;margin-bottom:4px;}
.seats-note{text-align:center;font-size:1rem;color:var(--ink-soft);margin-bottom:14px;}
.matched-note{text-align:center;font-size:1.05rem;color:var(--ink-soft);margin-bottom:14px;}
.matched-note strong{color:var(--crimson);}
.guest-line{margin-top:6px;padding:14px 0;border-bottom:1px solid var(--gold-light);}
.guest-name{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--ink);}
.guest-attend{display:flex;align-items:center;gap:10px;margin-top:10px;}
.guest-attend input[type=checkbox]{width:28px;height:28px;min-height:28px;accent-color:#2d6b2d;cursor:pointer;}
.guest-attend label{font-family:'Montserrat',sans-serif;font-size:.95rem;letter-spacing:.04em;color:var(--ink-soft);cursor:pointer;font-weight:500;}
.attend-group{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;}
.attend-btn{flex:1;min-width:130px;min-height:56px;border:2px solid var(--gold);background:#fff;color:var(--ink);font-family:'Montserrat',sans-serif;font-weight:600;letter-spacing:.05em;border-radius:10px;cursor:pointer;font-size:1rem;text-transform:uppercase;}
.attend-btn.yes.active{background:#2d6b2d;border-color:#2d6b2d;color:#fff;}
.attend-btn.no.active{background:var(--crimson);border-color:var(--crimson);color:#fff;}
.party-picker{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
.picker-btn{width:100%;min-height:60px;text-align:center;border:2px solid var(--gold);background:#fff;color:var(--ink);font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;border-radius:12px;cursor:pointer;padding:14px 18px;}
.picker-btn:hover,.picker-btn:focus{background:var(--cream);border-color:var(--crimson);}
.optional-fields.hidden{display:none;}
.msg-error{color:var(--crimson);font-weight:500;margin-top:12px;}
.success-box{text-align:center;padding:20px;}
.success-box .script{font-size:2.6rem;}
.success-box .check{font-size:3rem;color:#2d6b2d;}

/* RSVP page header */
.page-head{
  text-align:center;padding:56px 22px 10px;
  background:radial-gradient(ellipse at 50% 0%,rgba(231,212,160,.5),transparent 65%);
}
.page-head .script{font-size:clamp(2.8rem,9vw,4.2rem);}
.page-head p{font-size:1.15rem;color:var(--ink-soft);margin-top:6px;}

/* GUESTBOOK */
.wishes{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px;}
@media(min-width:720px){.wishes{grid-template-columns:1fr 1fr;}}
.wish{background:var(--white);border:1px solid var(--gold-light);border-left:5px solid var(--gold);border-radius:12px;padding:20px 22px;box-shadow:0 5px 16px var(--shadow);}
.wish .msg{font-style:italic;font-size:1.15rem;margin-bottom:10px;}
.wish .from{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--crimson);font-size:1.2rem;}
.wish .from::before{content:"— ";}
.empty-note{text-align:center;font-style:italic;color:var(--ink-soft);font-size:1.1rem;margin-top:20px;}

/* MEMORY WALL */
.drop-area{border:3px dashed var(--gold);border-radius:16px;background:var(--white);padding:40px 24px;text-align:center;cursor:pointer;transition:background .2s;}
.drop-area:hover,.drop-area.drag{background:var(--cream);}
.drop-area .icon{font-size:2.6rem;color:var(--gold);}
.drop-area h3{font-size:1.6rem;color:var(--crimson);margin:8px 0;}
.drop-area .btn{margin-top:14px;}
.upload-meta{max-width:520px;margin:20px auto 0;}
/* Masonry columns rather than a fixed-height grid: every photo keeps its own
   shape, so a tall phone portrait stays tall and a landscape shot stays wide and
   nothing gets cropped. break-inside stops a photo splitting across a column. */
.gallery{column-count:2;column-gap:12px;margin-top:26px;}
@media(min-width:620px){.gallery{column-count:3;}}
@media(min-width:900px){.gallery{column-count:4;}}
.gallery img{
  width:100%;height:auto;
  margin:0 0 12px;break-inside:avoid;
  border-radius:10px;border:4px solid var(--white);box-shadow:0 6px 16px var(--shadow);
}
.upload-note{text-align:center;font-style:italic;color:var(--ink-soft);margin-top:18px;font-size:1.05rem;}

/* FOOTER */
.footer{background:linear-gradient(135deg,var(--crimson-deep),#4d0d0d);color:#fdf2dd;text-align:center;padding:60px 22px;}
.footer .script{color:#f3d98a;font-size:clamp(2.6rem,9vw,3.8rem);}
.footer p{margin-top:8px;font-size:1.15rem;color:#f6e6c8;}
.footer .label{color:var(--gold-light);margin-top:18px;display:block;}