/* ═══════════════════════════════════════════════════════════
   YEEHAW! — A Little Cowboy Is On The Way
   Baby shower invite · Elle & Noah Alvarez · Oct 10 2026
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1. Tokens ---------- */
:root{
  --denim:      #2C4A6E;
  --denim-lt:   #4E7099;
  --denim-pale: #9FC0DE;
  --saddle:     #5A3A22;
  --saddle-lt:  #7C5330;
  --leather:    #8A5D36;
  --parchment:  #F5E9D2;
  --parchment-2:#EADCC0;
  --cream:      #FBF4E6;
  --rope:       #C9A87C;
  --rope-dk:    #9C7A50;
  --sky-1:      #7FB6DE;
  --sky-2:      #B9D6EE;
  --sky-3:      #EAF4FB;
  --sand:       #DCC49C;
  --sand-dk:    #C4A97E;
  --ink:        #3B2A1C;
  --ink-soft:   #6B5744;

  --f-display: 'Rye', 'Bevan', serif;
  --f-slab:    'Bevan', Georgia, serif;
  --f-body:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-sm: 0 2px 8px rgba(59,42,28,.10);
  --shadow-md: 0 10px 30px rgba(59,42,28,.16);
  --shadow-lg: 0 26px 60px rgba(59,42,28,.24);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;

  --maxw: 1180px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--parchment);
  line-height:1.65;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
/* must outrank component display rules — .cal-menu etc. set display explicitly */
[hidden]{ display:none !important; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--denim); }
h1,h2,h3{ margin:0; line-height:1.05; }
p{ margin:0 0 1em; }
address{ font-style:normal; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
:focus-visible{ outline:3px solid var(--denim); outline-offset:3px; border-radius:4px; }

/* paper grain, applied to warm surfaces */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  opacity:.35; mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(140,110,70,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(140,110,70,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 85%, rgba(140,110,70,.07) 0 2px, transparent 3px);
  background-size:90px 90px, 130px 130px, 70px 70px;
}

/* ---------- 3. Layout helpers ---------- */
.wrap{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem, 780px); }

section{ position:relative; padding:clamp(4.5rem,10vw,8.5rem) 0; }

.eyebrow{
  font-family:var(--f-body); font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; font-size:clamp(.68rem,1.5vw,.8rem);
  color:var(--denim-lt); text-align:center; margin:0 0 .9rem;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.eyebrow__ico{ width:12px; height:12px; fill:var(--denim-pale); flex:none; }

.h-slab{
  font-family:var(--f-slab);
  font-size:clamp(2.1rem,6vw,3.9rem);
  color:var(--saddle);
  text-align:center;
  letter-spacing:.01em;
  margin:0 0 2.6rem;
  text-shadow:0 2px 0 rgba(255,255,255,.5);
}

/* ---------- 4. Buttons ---------- */
.btn{
  --bg:var(--denim); --fg:#fff; --bd:var(--denim);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem; padding:.85em 1.9em; border:2.5px solid var(--bd); border-radius:999px;
  background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-weight:700; font-size:1rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, background .22s, color .22s;
}
.btn:hover{ transform:translateY(-3px) rotate(-.8deg); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(-1px) scale(.98); }
.btn--ghost{ --bg:transparent; --fg:var(--saddle); --bd:var(--saddle-lt); }
.btn--ghost:hover{ --bg:var(--saddle-lt); --fg:#fff; }

/* ---------- 5. Envelope gate ---------- */
.gate{
  position:fixed; inset:0; z-index:200;
  display:grid; place-content:center; justify-items:center;
  padding:1.5rem;
  background:
    radial-gradient(120% 90% at 50% 20%, var(--sky-3) 0%, var(--sky-2) 45%, #E7D9BC 100%);
}
body.is-loading{ overflow:hidden; }

.gate__stage{ display:grid; justify-items:center; gap:1.6rem; }

.env{
  position:relative;
  width:min(86vw, 460px);
  aspect-ratio:1.52;
  perspective:1400px;
  filter:drop-shadow(0 26px 44px rgba(59,42,28,.32));
}

/* inner lining — what you see once the flap lifts */
.env__back{
  position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(180deg,#A98B5C 0%,#8E7047 100%);
}

/* the card, tucked in the pocket until it slides up */
.env__card{
  position:absolute; left:5%; right:5%; top:7%; height:86%; z-index:2;
  display:grid; align-content:center; justify-items:center; gap:.2rem;
  padding:1rem .9rem; text-align:center;
  background:linear-gradient(180deg,var(--cream) 0%,var(--parchment) 100%);
  border:2px solid var(--rope); border-radius:6px;
  box-shadow:0 -4px 16px rgba(59,42,28,.18);
}
.env__card-kicker{
  margin:0; font-weight:700; font-size:clamp(.58rem,1.7vw,.72rem);
  letter-spacing:.24em; text-transform:uppercase; color:var(--denim-lt);
}
.env__card-title{
  margin:.1rem 0 0; font-family:var(--f-display); color:var(--denim);
  font-size:clamp(1.5rem,6vw,2.5rem); line-height:1;
  text-shadow:1px 2px 0 rgba(255,255,255,.7);
}
.env__card-sub{
  margin:.35rem 0 0; font-family:var(--f-slab); color:var(--saddle);
  font-size:clamp(.72rem,2.4vw,1rem); line-height:1.35;
  letter-spacing:.03em; text-transform:uppercase;
}
.env__card-rule{
  display:block; width:52px; height:2px; margin:.55rem 0;
  background:var(--denim-pale); border-radius:2px;
}
.env__card-date{
  margin:0; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:clamp(.6rem,1.9vw,.78rem); color:var(--ink-soft);
}

/* front pocket — the V-shaped face of the envelope */
.env__front{
  position:absolute; inset:0; z-index:3; border-radius:10px;
  background:linear-gradient(165deg,#E9D8B6 0%,#DCC79F 55%,#CDB489 100%);
  clip-path:polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  display:grid; align-content:end; justify-items:start;
  padding:0 0 8% 8%;
}
.env__to{
  margin:0; font-family:var(--f-body); color:#6E5637;
  font-size:clamp(.62rem,2vw,.82rem); line-height:1.5;
  letter-spacing:.05em; font-style:italic;
}
.env__stamp{
  position:absolute; top:auto; bottom:8%; right:8%;
  width:clamp(34px,8vw,50px); aspect-ratio:1;
  display:grid; place-items:center;
  background:var(--parchment); border:2px dashed var(--rope-dk); border-radius:3px;
}
.env__stamp svg{ width:56%; height:56%; fill:var(--denim-pale); }

/* top flap */
.env__flap{
  position:absolute; top:0; left:0; width:100%; height:58%; z-index:4;
  transform-origin:50% 0%; transform:rotateX(0deg);
  backface-visibility:hidden;
  background:linear-gradient(180deg,#EFE0C2 0%,#DDC9A2 100%);
  clip-path:polygon(0 0, 50% 100%, 100% 0);
  border-radius:10px 10px 0 0;
}

/* wax seal */
.env__seal{
  position:absolute; left:50%; top:58%; z-index:6;
  width:clamp(52px,12vw,74px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  padding:0; border:0; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 36% 32%, #4E7099 0%, #2C4A6E 55%, #1D3350 100%);
  box-shadow:0 4px 10px rgba(29,51,80,.45), inset 0 2px 4px rgba(255,255,255,.28);
}
.env__seal::after{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border:2px dashed rgba(255,255,255,.35);
}
.env__seal svg{ width:46%; height:46%; fill:#EAF4FB; position:relative; }
.env__seal:disabled{ cursor:default; }

.gate__hint{
  margin:0; opacity:0;
  font-family:var(--f-display); font-size:clamp(.9rem,3vw,1.1rem);
  letter-spacing:.08em; color:var(--saddle); text-align:center;
}


/* ---------- 6. Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:rgba(245,233,210,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(154,122,80,.28);
  transform:translateY(-110%);
}
.nav.is-visible{ transform:translateY(0); transition:transform .45s cubic-bezier(.4,0,.2,1); }
.nav__brand{
  font-family:var(--f-display); font-size:1.05rem; color:var(--saddle);
  text-decoration:none; white-space:nowrap;
}
.nav__list{ display:flex; align-items:center; gap:clamp(.5rem,2vw,1.6rem); list-style:none; margin:0; padding:0; }
.nav__list a{
  font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--saddle); padding:.35rem .1rem;
  border-bottom:2px solid transparent; transition:border-color .2s, color .2s;
}
.nav__list a:hover{ color:var(--denim); border-color:var(--denim); }
.nav__cta{
  background:var(--denim); color:#fff !important; border-radius:999px;
  padding:.45rem 1.15rem !important; border-bottom:none !important;
}
.nav__cta:hover{ background:var(--denim-lt); }

/* ═══════════ 6b. THE WORLD (fixed desert backdrop) ═══════════ */
:root{
  /* scroll-driven: main.js tweens these from noon through to dusk */
  --w-sky-top:   #EAF4FB;
  --w-sky-bot:   #F6EAD1;
  --w-ground-t:  #E2CEA6;
  --w-ground-b:  #D3B98C;
  --w-mesa-far:  #CBB79A;
  --w-mesa-near: #B29876;
  --horizon: 52%;          /* where sky meets ground, in viewport height */
}

.world{
  position:fixed; inset:0; z-index:-1;
  overflow:hidden; pointer-events:none;
}
.world__sky{
  position:absolute; left:0; right:0; top:0; bottom:calc(100% - var(--horizon));
  background:linear-gradient(180deg, var(--w-sky-top) 0%, var(--w-sky-bot) 100%);
}
.world__ground{
  position:absolute; left:0; right:0; top:var(--horizon); bottom:0;
  background:linear-gradient(180deg, var(--w-ground-t) 0%, var(--w-ground-b) 100%);
}

/* drifting layers are over-wide so they never run out as they travel */
.world__clouds,.world__mesas,.world__fence,.world__props{
  position:absolute; left:-40%; width:180%;
}
.world__clouds{ top:0; height:var(--horizon); }
.wcloud{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%, #fff 0%, rgba(255,255,255,.85) 55%, rgba(255,255,255,0) 72%);
}
.wcloud--1{ width:300px; height:104px; top:12%; left:6%; opacity:.75; }
.wcloud--2{ width:230px; height:84px;  top:34%; left:34%; opacity:.6; }
.wcloud--3{ width:360px; height:120px; top:20%; left:62%; opacity:.7; }
.wcloud--4{ width:200px; height:74px;  top:46%; left:84%; opacity:.5; }

.world__mesas{ display:block; }
.world__mesas--far{
  bottom:calc(100% - var(--horizon) - 1px); height:16vh; min-height:110px;
  fill:var(--w-mesa-far);
}
.world__mesas--near{
  bottom:calc(100% - var(--horizon) - 1px); height:11vh; min-height:76px;
  fill:var(--w-mesa-near);
}

/* seamless post-and-rail fence sitting on the horizon */
.world__fence{
  top:calc(var(--horizon) - 5.2vh); height:5.4vh; min-height:38px;
  background-repeat:repeat-x; background-size:150px 100%; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='60' viewBox='0 0 150 60'%3E%3Cg fill='none' stroke='%238A6E4C' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M0 22 H150 M0 40 H150'/%3E%3C/g%3E%3Cg fill='%237C6242'%3E%3Crect x='18' y='6' width='9' height='52' rx='2'/%3E%3Crect x='93' y='9' width='8' height='49' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}

.world__props{ top:var(--horizon); bottom:0; }
.wprop{ position:absolute; height:auto; filter:drop-shadow(0 6px 10px rgba(90,58,34,.14)); }
.wprop--windmill{ left:66%; bottom:34%; width:clamp(46px,5.4vw,84px);  aspect-ratio:120/200; opacity:.62; }
/* fan hub sits at (60,52) in the tower's 120x200 box → 50% across, 26% down */
.wmill__tower{ position:absolute; inset:0; width:100%; height:100%; }
.wmill__fan{ position:absolute; left:8.33%; top:1%; width:83.33%; height:50%; transform-origin:50% 50%; }
.wprop--cactus-a{ left:24%; bottom:14%; width:clamp(34px,4.2vw,66px);  aspect-ratio:180/300; opacity:.55; }
.wprop--cactus-b{ left:45%; bottom:29%; width:clamp(24px,3vw,46px);    aspect-ratio:180/300; opacity:.42; }
.wprop--cactus-c{ left:52%; bottom:9%;  width:clamp(40px,5vw,78px);    aspect-ratio:180/300; opacity:.58; }
.wprop--cactus-d{ left:78%; bottom:31%; width:clamp(22px,2.8vw,42px);  aspect-ratio:180/300; opacity:.4; }
.wprop--hay{     left:90%;  bottom:5%;  width:clamp(52px,6.4vw,100px); aspect-ratio:260/150; opacity:.5; }

@media (max-width:700px){
  :root{ --horizon:56%; }
  .wprop--cactus-b,.wprop--cactus-d{ display:none; }
  .world__fence{ opacity:.38; }
}

/* ═══════════ 7. HERO ═══════════ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:grid; place-items:center;
  padding:clamp(4rem,8vh,5.5rem) 1rem clamp(4.5rem,9vh,6rem);
  isolation:isolate;
}
.hero__sky{
  position:absolute; inset:-10% 0 0; z-index:-6;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 42%,var(--sky-3) 72%,#F3E7CE 100%);
}
.hero__clouds{
  position:absolute; inset:0; z-index:-5; pointer-events:none;
  overflow:hidden;   /* clouds ride out past both edges — clip so nothing bleeds */
}

/* Each cloud runs the same track: fully off the left edge → fully off the right.
   --dur sets its speed (far = slow), --phase (0–1) is where in that loop it sits
   at load, applied as a negative delay so the sky starts already populated. */
.cloud{
  position:absolute; left:0; display:block;
  width:var(--w); opacity:var(--o,1);
  animation:cloudDrift var(--dur) linear infinite;
  animation-delay:calc(var(--dur) * var(--phase) * -1);
  will-change:transform;
}
.cloud__art{
  display:block; width:100%; height:auto;
  animation:cloudBob var(--bob,9s) ease-in-out infinite alternate;
  animation-delay:calc(var(--bob,9s) * var(--phase) * -1);
}
@keyframes cloudDrift{
  from{ transform:translate3d(-100%,0,0); }
  to  { transform:translate3d(100vw,0,0); }
}
@keyframes cloudBob{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(0,-8px,0); }
}

/* far tier — small and unhurried. No cast shadow and only a whisper of an
   underside: distance flattens a cloud, and tinting it reads as dirty, not far. */
.cloud--far{ color:#E3EEF8; }
/* near tier — bigger, faster, with real volume and lift */
.cloud--near{ color:#C2DBF1; filter:drop-shadow(0 10px 20px rgba(70,105,150,.15)); }

.cloud--1{ --w:clamp(120px,15vw,210px); --dur:132s; --phase:.06; --o:.72; --bob:11s; top:9%;  }
.cloud--2{ --w:clamp(100px,12vw,170px); --dur:150s; --phase:.44; --o:.6;  --bob:13s; top:21%; }
.cloud--3{ --w:clamp(130px,16vw,225px); --dur:140s; --phase:.78; --o:.66; --bob:12s; top:34%; }
.cloud--4{ --w:clamp(185px,24vw,345px); --dur:82s;  --phase:.18; --o:1;   --bob:8s;  top:4%;  }
.cloud--5{ --w:clamp(165px,21vw,300px); --dur:96s;  --phase:.55; --o:.95; --bob:9s;  top:26%; }
.cloud--6{ --w:clamp(230px,29vw,420px); --dur:74s;  --phase:.86; --o:1;   --bob:7s;  top:45%; }
.cloud--7{ --w:clamp(180px,23vw,330px); --dur:104s; --phase:.32; --o:.9;  --bob:10s; top:57%; }

.hero__mesa{ position:absolute; left:0; right:0; bottom:0; z-index:-4; width:100%; height:34vh; min-height:220px; }
.hero__dunes{
  /* extra slack below the fold so the parallax lag never opens a gap */
  position:absolute; left:-5%; right:-5%; bottom:-10vh; z-index:-3; height:32vh; min-height:220px;
  background:
    radial-gradient(120% 100% at 20% 100%, var(--sand) 55%, transparent 56%),
    radial-gradient(120% 100% at 78% 100%, var(--sand) 55%, transparent 56%),
    linear-gradient(180deg,var(--sand) 0%,var(--sand-dk) 100%);
  background-repeat:no-repeat;
  background-size:60% 70%, 60% 60%, 100% 100%;
  background-position:left bottom, right bottom, center bottom;
}
.hero__cactus{ position:absolute; bottom:2vh; z-index:-2; filter:drop-shadow(0 8px 14px rgba(59,42,28,.18)); }
.hero__cactus--l{ left:2%;  width:clamp(58px,8vw,120px); height:auto; aspect-ratio:180/300; }
.hero__cactus--r{ right:9%; width:clamp(46px,6vw,92px);  height:auto; aspect-ratio:180/300; }

.hero__stage{ position:relative; width:min(100%, 580px); }

.frame{ position:relative; padding:clamp(1.9rem,3.4vw,2.5rem) clamp(1.5rem,3.4vw,2.4rem); }
.frame__rope{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:2; }
.frame__paper{
  position:relative; z-index:1;
  padding:clamp(1.4rem,3vw,2.1rem) clamp(1.1rem,3vw,2rem) clamp(1.5rem,3vw,2.1rem);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--cream) 0%, var(--parchment) 55%, var(--parchment-2) 100%);
  border-radius:clamp(28px,5vw,46px);
  box-shadow:var(--shadow-lg), inset 0 0 40px rgba(180,150,105,.22);
  text-align:center;
}
.frame__paper::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:.4; mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 22% 28%, rgba(150,118,74,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 62%, rgba(150,118,74,.09) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 88%, rgba(150,118,74,.07) 0 2px, transparent 3px);
  background-size:96px 96px, 132px 132px, 74px 74px;
}

.yeehaw{
  font-family:var(--f-display);
  font-size:clamp(2.3rem,9.5vw,4.05rem);
  color:var(--denim);
  letter-spacing:.01em;
  margin:0 0 .2rem;
  text-shadow:2px 3px 0 rgba(255,255,255,.75), 0 6px 12px rgba(44,74,110,.18);
}
.yeehaw .ltr{ display:inline-block; will-change:transform; }

.flourish{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin-bottom:.75rem; color:var(--denim-pale); }
.flourish__arr{ width:clamp(42px,9vw,66px); height:16px; color:var(--denim-pale); }
.flourish__arr.flip{ transform:scaleX(-1); }
.flourish__star{ width:17px; height:17px; fill:var(--denim); flex:none; }

.banner{ position:relative; display:block; margin:0 auto .8rem; width:min(100%,425px); aspect-ratio:520/110; }
.banner__bg{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 5px 9px rgba(59,42,28,.2)); }
.banner__text{
  position:absolute; inset:0; display:grid; place-content:center;
  font-family:var(--f-slab); font-size:clamp(1.05rem,4.2vw,1.85rem);
  color:var(--saddle); letter-spacing:.03em; text-transform:uppercase;
}

.onway{
  font-family:var(--f-display);
  font-size:clamp(1.3rem,5vw,2.15rem);
  color:var(--denim); margin:0 0 .4rem;
  text-shadow:1px 2px 0 rgba(255,255,255,.7);
}
.mini-heart{ width:20px; height:18px; fill:var(--denim-pale); margin:0 auto .7rem; }

.joinus{
  font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  font-size:clamp(.74rem,2.4vw,.95rem); color:var(--saddle); margin:0 0 .35rem;
}
.bigshower{
  font-family:var(--f-slab);
  font-size:clamp(1.8rem,6.8vw,2.85rem);
  color:var(--saddle); margin:0 0 .7rem; letter-spacing:.01em;
  text-shadow:0 2px 0 rgba(255,255,255,.55);
}
.hosts{ font-size:.93rem; color:var(--ink-soft); margin:0 0 1.25rem; }
.hosts strong{ color:var(--denim); }

.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

.hero__hat{
  position:absolute; top:-6%; left:-7%; z-index:3;
  width:clamp(96px,20vw,182px); height:auto; aspect-ratio:220/140;
  transform:rotate(-16deg); transform-origin:70% 80%;
  filter:drop-shadow(0 12px 18px rgba(59,42,28,.3));
  pointer-events:none;
}

.scrollcue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  display:grid; justify-items:center; gap:.35rem; color:var(--saddle);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
}
.scrollcue svg{ width:20px; height:32px; }

/* ═══════════ 8. FLYBY ═══════════ */
.flyby{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#C9B189 0,#DFCDA8 90px,var(--parchment) 270px,var(--parchment) 100%);
  padding-top:clamp(3rem,8vw,5rem);
}
.flyby__path{ position:absolute; top:0; left:0; width:100%; height:clamp(280px,38vw,440px); pointer-events:none; }
.flyby__stork{
  position:absolute; top:0; left:0; z-index:3;
  width:clamp(120px,20vw,250px); height:auto; aspect-ratio:320/260;
  filter:drop-shadow(0 14px 20px rgba(59,42,28,.2));
  pointer-events:none; opacity:0;
}
.flyby__copy{ position:relative; z-index:2; width:min(100% - 2.5rem, 720px); margin-inline:auto; text-align:center; padding-top:clamp(200px,30vw,360px); }
.lede{ font-size:clamp(1rem,2.2vw,1.16rem); color:var(--ink-soft); max-width:52ch; margin-inline:auto; }

.crate{
  position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:.2rem;
  margin-top:2rem; padding:1.05rem 2.4rem .95rem;
  background:linear-gradient(180deg,#5E85B0,#3C5E86);
  border:3px solid #2C4A6E; border-radius:var(--r-sm);
  box-shadow:var(--shadow-md), inset 0 2px 0 rgba(255,255,255,.25);
  font-family:var(--f-slab); font-size:clamp(1.15rem,4vw,1.7rem);
  color:#FBF4E6; letter-spacing:.05em; text-transform:uppercase;
  text-shadow:0 2px 3px rgba(20,40,64,.5);
}
.crate::before,.crate::after{
  content:""; position:absolute; left:6%; right:6%; height:2px;
  background:rgba(255,255,255,.16);
}
.crate::before{ top:26%; } .crate::after{ bottom:26%; }
.crate__star{ width:20px; height:19px; fill:#EAF4FB; }

/* ═══════════ 9. COUNTDOWN ═══════════ */
.countdown{
  background:
    radial-gradient(140% 80% at 50% 0%, var(--cream) 0%, var(--parchment) 60%),
    var(--parchment);
  text-align:center;
}
/* Always one row of four — the boxes and their type shrink rather than wrap.
   minmax(0,1fr) lets a column go narrower than its content's min-content width. */
.clock{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.3rem,1.5vw,1.4rem);
  width:min(100%,760px); margin:0 auto;
}
.clock__unit{
  position:relative;
  padding:clamp(.65rem,2.4vw,1.6rem) clamp(.15rem,.8vw,.4rem) clamp(.5rem,1.8vw,1.1rem);
  background:linear-gradient(180deg,#CFAF83 0%,#B8955F 100%);
  border:clamp(2px,.55vw,3px) solid var(--rope-dk); border-radius:clamp(9px,1.6vw,16px);
  box-shadow:var(--shadow-md), inset 0 2px 0 rgba(255,255,255,.3);
}
.clock__unit::before,.clock__unit::after{
  content:""; position:absolute; border-radius:50%;
  width:clamp(4px,1.3vw,9px); height:clamp(4px,1.3vw,9px);
  top:clamp(4px,1.2vw,8px);
  background:#7B5F38; box-shadow:inset 0 1px 1px rgba(0,0,0,.35);
}
.clock__unit::before{ left:clamp(4px,1.2vw,8px); }
.clock__unit::after{ right:clamp(4px,1.2vw,8px); }
.clock__num{
  display:block; font-family:var(--f-slab);
  font-size:clamp(1.05rem,6.1vw,3.4rem); line-height:1;
  color:#3B2A1C; text-shadow:0 2px 0 rgba(255,255,255,.4);
  font-variant-numeric:tabular-nums;
}
.clock__lbl{
  display:block; margin-top:clamp(.15rem,.6vw,.35rem);
  font-size:clamp(.44rem,1.75vw,.78rem); font-weight:700;
  letter-spacing:clamp(.02em,.35vw,.18em); text-transform:uppercase; color:#5A3A22;
  white-space:nowrap;
}
.clock__done{
  margin-top:1.4rem; font-family:var(--f-display);
  font-size:clamp(1.2rem,4vw,1.8rem); color:var(--denim);
}

.prop-row{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(1.2rem,5vw,3.5rem); margin-top:clamp(2.5rem,6vw,4rem);
}
/* Boxes are sized to the padded Lottie comps (the pad gives rotation room), so
   the widths are scaled up by the same factor to keep the artwork's on-screen
   size unchanged from the static version. */
.prop{ position:relative; height:auto; filter:drop-shadow(0 10px 16px rgba(59,42,28,.18)); }
.prop__fallback,
.prop > svg{ display:block; width:100%; height:100%; overflow:visible; }
.prop--horse{ width:clamp(139px,21.5vw,266px); aspect-ratio:4/3; }
.prop--shoe{ width:clamp(65px,10vw,123px); aspect-ratio:180/200; cursor:pointer; transition:transform .2s; }
.prop--shoe:hover{ transform:translateY(-6px) scale(1.06); }
.prop--boots{ width:clamp(121px,18.7vw,230px); aspect-ratio:302/278; }

/* ═══════════ 10. DETAILS ═══════════ */
.details{ background:linear-gradient(180deg,var(--parchment) 0%,#EFE0C4 100%); }
.details__grid{
  display:grid; gap:clamp(1.2rem,3vw,2rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}

.ticket{
  position:relative; text-align:center;
  padding:clamp(1.8rem,4vw,2.6rem) clamp(1.2rem,3vw,2rem);
  background:linear-gradient(180deg,var(--cream),var(--parchment));
  border:3px dashed var(--rope-dk); border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; justify-content:center;
}
.ticket__notch{
  position:absolute; top:50%; width:26px; height:26px; border-radius:50%;
  background:#EFE0C4; border:3px dashed var(--rope-dk); transform:translateY(-50%);
}
.ticket__notch--l{ left:-16px; clip-path:inset(0 0 0 50%); }
.ticket__notch--r{ right:-16px; clip-path:inset(0 50% 0 0); }
.ticket__kicker{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--denim-lt); margin-bottom:.8rem;
}
.tiny-star{ width:11px; height:11px; fill:var(--denim-pale); flex:none; }
.ticket__day{ font-family:var(--f-display); font-size:clamp(1.1rem,3.4vw,1.5rem); color:var(--saddle); margin:0; }
.ticket__date{ font-family:var(--f-slab); font-size:clamp(2rem,6.4vw,3rem); color:var(--denim); margin:.1rem 0 0; line-height:1; }
.ticket__year{ font-family:var(--f-slab); font-size:clamp(1.2rem,3.8vw,1.7rem); color:var(--denim-lt); margin:.15rem 0 .9rem; letter-spacing:.1em; }
.ticket__time{
  display:inline-block; align-self:center; padding:.35em 1.2em; margin:0 0 1rem;
  background:var(--denim); color:#fff; border-radius:999px;
  font-weight:700; letter-spacing:.1em;
}
.ticket__rsvpby{ margin:0; font-size:.86rem; color:var(--ink-soft); }

.place{
  position:relative; text-align:center;
  padding:clamp(1.8rem,4vw,2.6rem) clamp(1.2rem,3vw,2rem);
  background:linear-gradient(180deg,#C4A275,#AD8B5E);
  border:3px solid #8A6E4C; border-radius:var(--r-md);
  box-shadow:var(--shadow-md), inset 0 2px 0 rgba(255,255,255,.24);
  color:#3B2A1C;
}
.place h3{ font-family:var(--f-display); font-size:clamp(1.3rem,4vw,1.9rem); color:#43301E; margin-bottom:.6rem; }
.place address{ font-size:1.02rem; line-height:1.85; margin-bottom:1.4rem; color:#3B2A1C; }
.place__lantern{
  position:absolute; top:-34px; right:14px;
  width:clamp(42px,7vw,64px); height:auto; aspect-ratio:120/190;
  filter:drop-shadow(0 0 18px rgba(251,176,59,.55));
}
.place__btns{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.place .btn--ghost{ --fg:#43301E; --bd:#6B4526; }
.cal-menu{
  display:grid; gap:.4rem; margin-top:.9rem; padding:.7rem;
  background:rgba(251,244,230,.95); border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);
}
.cal-menu a{
  padding:.5rem .7rem; border-radius:6px; text-decoration:none;
  font-weight:700; font-size:.9rem; color:var(--denim);
  transition:background .18s;
}
.cal-menu a:hover{ background:rgba(44,74,110,.1); }

.mapwrap{
  grid-column:1/-1; overflow:hidden;
  border:3px solid var(--rope-dk); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); background:#DCC49C;
  aspect-ratio:21/9; min-height:280px;
}
.mapwrap iframe{ width:100%; height:100%; border:0; display:block; filter:sepia(.18) saturate(.94); }

/* ═══════════ 11. CONTACT ═══════════ */
.contact{ background:linear-gradient(180deg,#EFE0C4 0%,var(--parchment) 100%); }

/* .card / .card--paper stay shared: contact note + registry letter both use them */
.card{ border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
.card--paper{
  position:relative;
  padding:clamp(1.6rem,4vw,2.6rem);
  background:linear-gradient(180deg,var(--cream),var(--parchment));
  border:3px solid var(--rope);
}

.contact__lede{
  max-width:52ch; margin:0 auto 2.4rem; text-align:center;
  font-size:clamp(1rem,2.2vw,1.12rem); color:var(--ink-soft);
}

/* Flex, not fixed columns: the card count comes from CONFIG.contacts, and a
   two-column grid leaves a single card stranded in the left half. This centres
   whatever it's given — one card, two side by side, or more wrapping to a
   second row — and lets them stack on narrow screens instead of squeezing. */
.contact__grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(.5rem,2vw,1.6rem);
}

.person{
  flex:1 1 260px; max-width:380px;
  position:relative; overflow:hidden;
  padding:clamp(.95rem,3vw,2.1rem) clamp(.5rem,2vw,1.7rem);
  text-align:center;
  background:linear-gradient(180deg,var(--cream),var(--parchment));
  border:3px solid var(--rope); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s, border-color .28s;
}
.person:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--denim); }

.person__badge{
  width:clamp(38px,11vw,64px); height:clamp(38px,11vw,64px);
  margin:0 auto clamp(.5rem,1.7vw,.9rem);
  display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #4E7099, #2C4A6E);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.25);
}
.person__badge svg{ width:54%; height:54%; fill:#EAF4FB; }

.person__name{
  margin:0; font-family:var(--f-slab); letter-spacing:.02em;
  font-size:clamp(.88rem,3.4vw,1.45rem); color:var(--saddle);
}
.person__role{
  margin:.15rem 0 clamp(.6rem,2vw,1.1rem);
  font-size:clamp(.55rem,1.8vw,.74rem); font-weight:700;
  letter-spacing:clamp(.07em,.5vw,.2em); text-transform:uppercase; color:var(--denim-lt);
}

.person__links{ display:grid; gap:clamp(.32rem,1.2vw,.55rem); }
.person__link{
  display:flex; align-items:center; justify-content:center; gap:clamp(.22rem,1vw,.55rem);
  padding:clamp(.5em,1.7vw,.65em) clamp(.45em,1.6vw,1em); text-decoration:none;
  background:rgba(255,255,255,.6);
  border:2px solid var(--rope); border-radius:999px;
  font-weight:700; font-size:clamp(.64rem,2.15vw,.92rem); color:var(--denim);
  /* long email addresses must break rather than push the card wide */
  overflow-wrap:anywhere; line-height:1.3;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.person__link:hover{
  background:var(--denim); border-color:var(--denim); color:#fff;
  transform:translateY(-2px);
}
.person__link span[aria-hidden]{ font-size:clamp(.75rem,2.4vw,1.05rem); line-height:1; flex:none; }
.person__link-txt{ min-width:0; }

.contact__note{
  display:flex; align-items:center; gap:1.1rem;
  margin-top:clamp(1.4rem,3vw,2rem); text-align:left;
}
.contact__note p{ margin:0; color:var(--ink-soft); font-size:.98rem; }
.contact__note strong{ color:var(--denim); white-space:nowrap; }
.contact__note-ico{ width:46px; height:50px; flex:none; }

@media (max-width:520px){
  .contact__note{ flex-direction:column; text-align:center; gap:.8rem; }
}

/* ═══════════ 12. REGISTRY ═══════════ */
.registry{ background:linear-gradient(180deg,var(--parchment) 0%,#E8D8B8 100%); }
.registry__scene{
  position:relative; height:clamp(230px,32vw,330px);
  display:flex; align-items:flex-end; justify-content:center; margin-bottom:-1.5rem;
}
.registry__hay{ width:clamp(190px,32vw,320px); height:auto; aspect-ratio:260/150; filter:drop-shadow(0 12px 18px rgba(59,42,28,.2)); }
.registry__bear{
  /* centred with auto margins, not a transform: GSAP resets the independent
     translate/rotate/scale properties when it takes over an element's transform */
  position:absolute; bottom:32%; left:0; right:0; margin-inline:auto;
  width:clamp(120px,20vw,200px); height:auto; aspect-ratio:240/272;
  filter:drop-shadow(0 12px 18px rgba(59,42,28,.22));
}

.letter{ text-align:left; }
.letter p{ font-size:clamp(.98rem,2vw,1.06rem); color:var(--ink-soft); }
.letter p:last-of-type{ margin-bottom:0; }
.letter__signoff{ margin-top:1.6rem; font-style:italic; text-align:right; color:var(--saddle) !important; }
.letter__names{ font-family:var(--f-display); font-style:normal; font-size:1.25rem; color:var(--denim); }

.regcard{
  display:flex; align-items:center; gap:1.1rem; margin-top:1.8rem;
  padding:1.2rem 1.5rem; text-decoration:none;
  background:linear-gradient(180deg,var(--cream),var(--parchment));
  border:3px solid var(--rope); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s, border-color .28s;
}
.regcard:hover{ transform:translateY(-5px) rotate(-.7deg); box-shadow:var(--shadow-lg); border-color:var(--denim); }
/* Fixed square so the emoji fallback and the Lottie scene occupy the same slot
   and the card never reflows when the swap happens. pointer-events off keeps
   the injected SVG from eating clicks meant for the link. */
.regcard__ico{
  width:66px; height:66px; flex:none; pointer-events:none;
  display:grid; place-items:center;
}
.regcard__ico svg{ width:100%; height:100%; }
.regcard__ico .lottie-fb{ font-size:2rem; line-height:1; }
.regcard__body{ display:grid; gap:.15rem; flex:1; }
.regcard__body strong{ font-family:var(--f-slab); font-size:1.15rem; color:var(--saddle); letter-spacing:.02em; }
.regcard__body em{ font-style:normal; font-size:.9rem; color:var(--ink-soft); }
.regcard__go{ font-size:1.5rem; color:var(--denim); flex:none; transition:transform .28s; }
.regcard:hover .regcard__go{ transform:translateX(6px); }

/* ═══════════ 13. FOOTER ═══════════ */
.footer{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(4rem,9vw,6.5rem) 1.25rem clamp(2rem,5vw,3rem);
  background:linear-gradient(180deg,#E8D8B8 0%,var(--sand) 45%,var(--sand-dk) 100%);
}
.footer__sign{ position:relative; width:min(100%,420px); margin:0 auto; aspect-ratio:300/200; }
.footer__sign-bg{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 12px 20px rgba(59,42,28,.28)); }
.footer__sign-text{
  position:absolute; inset:0; display:grid; align-content:center; gap:.35rem; margin:0;
  font-family:var(--f-slab); color:var(--saddle);
  font-size:clamp(1rem,3.6vw,1.5rem); letter-spacing:.02em; text-transform:uppercase;
}
.footer__sign-text .blue{ color:var(--denim); }

.footer__props{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(1rem,4vw,2.5rem); margin-top:2.5rem; }
.fprop{ height:auto; filter:drop-shadow(0 8px 12px rgba(59,42,28,.2)); }
.fprop--boots{ width:clamp(80px,13vw,150px); aspect-ratio:250/220; }
.fprop--shoe{ width:clamp(40px,6vw,72px); aspect-ratio:140/150; }
.fprop--cactus{ width:clamp(46px,7vw,88px); aspect-ratio:180/300; }

.footer__meta{
  margin:2rem 0 0; font-size:.82rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#6B4526;
}

/* ═══════════ 14. Bluebonnet petals ═══════════ */
.petals{
  position:fixed; inset:0; z-index:6;
  pointer-events:none; overflow:hidden;
}
/* outer element falls, inner sways + spins — two axes without fighting over transform */
.petal{ position:absolute; top:0; left:0; will-change:transform; }
.petal__leaf{ display:block; width:100%; height:100%; }
.petal--a{ color:#4E7099; }
.petal--b{ color:#6E90B4; }
.petal--c{ color:#9FC0DE; }
.petal--hay{ color:#C9A87C; }

/* ═══════════ 15. Floating music toggle ═══════════ */
.music{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:95;
  width:clamp(48px,7vw,58px); height:clamp(48px,7vw,58px);
  display:grid; place-items:center; padding:0;
  border:0; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 34% 30%, #4E7099 0%, #2C4A6E 60%, #1E3550 100%);
  color:#EAF4FB;
  box-shadow:0 6px 18px rgba(29,51,80,.4), inset 0 2px 4px rgba(255,255,255,.22);
  transition:transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s;
}
.music:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 10px 26px rgba(29,51,80,.5); }
.music:active{ transform:translateY(-1px) scale(.97); }

/* rope ring, echoing the hero frame */
.music__ring{
  position:absolute; inset:5px; border-radius:50%;
  border:2px dashed rgba(234,244,251,.42); pointer-events:none;
}
.music__icon{
  width:46%; height:46%; position:relative; color:#EAF4FB;
  transition:opacity .25s, transform .25s;
}
/* Centred on the button rather than left at its static position — as an abspos
   child of a grid container that lands somewhere browser-dependent. */
.music__slash{
  position:absolute; top:50%; left:50%; width:52%; height:52%;
  transform:translate(-50%,-50%); color:#EAF4FB;
  opacity:1; transition:opacity .2s;
}
.music.is-playing .music__slash{ opacity:0; }

/* little equaliser, only while playing */
.music__bars{
  /* bottom offset clears the dashed ring at inset 5px — any lower and a tall
     bar crosses it */
  position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:2px; height:11px; opacity:0; transition:opacity .25s;
}
.music.is-playing .music__bars{ opacity:.9; }
/* lift the note so the bars have their own space under it */
.music.is-playing .music__icon{ opacity:.85; transform:translateY(-5px); }
.music__bars i{ display:block; width:2.5px; background:#EAF4FB; border-radius:1px; height:3px; }
.music.is-playing .music__bars i{ animation:eq .9s ease-in-out infinite; }
/* Each bar gets its own period, not just an offset: bars sharing one duration
   only ever read as a travelling wave — a loading spinner, not audio. These
   have to stay under `.is-playing` to outrank the shorthand above, or the
   shorthand resets duration and delay back to its own values. */
.music.is-playing .music__bars i:nth-child(1){ animation-duration:.72s; }
.music.is-playing .music__bars i:nth-child(2){ animation-duration:1.05s; animation-delay:.15s; }
.music.is-playing .music__bars i:nth-child(3){ animation-duration:.84s; animation-delay:.3s; }
.music.is-playing .music__bars i:nth-child(4){ animation-duration:1.2s; animation-delay:.08s; }
@keyframes eq{ 0%,100%{ height:3px } 50%{ height:11px } }

/* the rope ring turns while the track plays, like a record on a spindle */
.music.is-playing .music__ring{ animation:music-spin 9s linear infinite; }
@keyframes music-spin{ to{ transform:rotate(360deg) } }

/* no track wired up yet */
.music[data-empty]{ opacity:.75; }

/* ═══════════ 16. Floating bits ═══════════ */
/* Weeds live in a clipped fixed layer, so one leaving the frame can't widen the
   page the way a lone fixed element parked off the right edge would. */
.tumbleweeds{
  position:fixed; inset:0; z-index:8;
  pointer-events:none; overflow:hidden;
}
/* Size, vertical band and opacity are all set per weed by main.js from its
   depth. The shadow lives out here, on the element that never rotates — put it
   on the spinning ball and the shadow spins with it. */
.tumbleweed{
  position:absolute; left:0; bottom:4vh; opacity:0;
  filter:drop-shadow(0 6px 8px rgba(59,42,28,.25));
  will-change:transform;
}
.tumbleweed__ball{ display:block; width:100%; height:100%; }
.lasso-cursor{
  position:fixed; top:0; left:0; z-index:120;
  width:44px; height:44px; margin:-22px 0 0 -22px;
  pointer-events:none; opacity:0;
}
.toast{
  position:fixed; left:50%; bottom:2rem; z-index:130;
  transform:translate(-50%,calc(100% + 3rem));
  padding:.85rem 1.5rem; border-radius:999px;
  background:var(--saddle); color:var(--cream);
  font-weight:700; font-size:.92rem; letter-spacing:.04em;
  box-shadow:var(--shadow-lg); pointer-events:none;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.toast.is-up{ transform:translate(-50%,0); }

/* gentle idle float */
@keyframes floatA{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes floatB{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-6px) rotate(1.5deg) } }
.float-a{ animation:floatA 5.5s ease-in-out infinite; }
.float-b{ animation:floatB 6.5s ease-in-out infinite; }
.registry__bear.float-a{ animation:floatA 5.5s ease-in-out infinite; }
.lantern-flame{ transform-origin:center bottom; animation:floatA 2.4s ease-in-out infinite; }

/* reveal base state (JS removes when GSAP takes over) */
.js-anim .reveal{ opacity:0; }

/* ═══════════ 16b. Sections ride on the world ═══════════
   Declared after the section rules above so it wins on cascade order — the
   earlier the override, the more of these gradients would paint over the
   backdrop. The footer keeps its sand gradient to ground the ending. */
.flyby,.countdown,.details,.contact,.registry{ background:transparent; }

/* the flyby's top edge used to blend into the hero's dunes; the world does that now */
.flyby{ background:linear-gradient(180deg, rgba(201,177,137,.85) 0, rgba(223,205,168,.35) 90px, transparent 260px); }

/* ═══════════ 17. Responsive ═══════════ */
@media (max-width:860px){
  .nav__list li:not(:last-child){ display:none; }
  .flyby__copy{ padding-top:clamp(190px,52vw,320px); }
}
@media (max-width:600px){
  .prop-row{ gap:1rem; }
  .mapwrap{ aspect-ratio:4/3; min-height:0; }
  .hero__hat{ left:-4%; top:-4%; }
  .regcard{ flex-wrap:wrap; }
  /* narrow sky: thin the traffic so the parchment keeps a calm backdrop */
  .cloud--3,.cloud--7{ display:none; }
  .cloud--6{ top:52%; }
}

/* ═══════════ 18. Reduced motion ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js-anim .reveal{ opacity:1 !important; transform:none !important; }
  .flyby__stork{ opacity:1; }
  .gate__hint{ opacity:1; }
  .env__flap,.env__card,.env__seal{ transition:none !important; }
  .lasso-cursor,.tumbleweeds,.petals{ display:none; }
  /* Still show the equaliser, just frozen at staggered heights — three identical
     stubs read as broken, an uneven row reads as a paused meter. */
  .music__bars i{ animation:none; }
  .music__bars i:nth-child(1){ height:5px; }
  .music__bars i:nth-child(2){ height:10px; }
  .music__bars i:nth-child(3){ height:6px; }
  .music__bars i:nth-child(4){ height:9px; }
  .music__ring,.music__icon{ animation:none !important; transform:none !important; }

  /* the drift track ends off-screen, so park the clouds at fixed spots instead
     of letting the blanket rule above fast-forward them out of view */
  .cloud,.cloud__art{ animation:none !important; transform:none !important; }
  .cloud--1{ left:4%; }  .cloud--2{ left:70%; }  .cloud--3{ left:38%; }
  .cloud--4{ left:-3%; } .cloud--5{ left:56%; }  .cloud--6{ left:22%; }
  .cloud--7{ left:78%; }
}

/* ═══════════ 19. Print ═══════════ */
@media print{
  .nav,.scrollcue,.tumbleweeds,.lasso-cursor,.toast,.gate,.mapwrap,
  .petals,.music{ display:none !important; }
  body{ background:#fff; }
  .js-anim .reveal{ opacity:1 !important; }
}

/* stack the detail cards before they get too narrow to read */
@media (max-width:760px){
  .details__grid{ grid-template-columns:1fr; }
}