/* ============================================================
   Chhath Puja · Research Triangle
   Design system + layout
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Ink */
  --ink:        #16130F;
  --ink-2:      #4C453B;
  --ink-3:      #7E7466;

  /* Ground */
  --cream:      #FFFCF6;
  --cream-2:    #FBF4E8;
  --cream-3:    #F5EBDA;

  /* Night (pre-dawn river) */
  --night:      #0C1626;
  --night-2:    #142438;
  --night-3:    #1E3550;

  /* Sun */
  --saffron:    #DE7C15;
  --saffron-2:  #F3A63A;
  --vermilion:  #B4342A;
  --gold:       #C08A2E;

  --line:       rgba(22,19,15,.10);
  --line-2:     rgba(22,19,15,.06);
  --line-light: rgba(255,252,246,.16);

  --shadow-sm:  0 1px 2px rgba(22,19,15,.05), 0 3px 10px rgba(22,19,15,.045);
  --shadow-md:  0 2px 4px rgba(22,19,15,.05), 0 12px 32px rgba(22,19,15,.08);
  --shadow-lg:  0 4px 8px rgba(22,19,15,.06), 0 28px 64px rgba(22,19,15,.12);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.2,.7,.25,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --ff-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-deva:    "Tiro Devanagari Hindi", "Nirmala UI", serif;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--saffron); color:#fff; }

h1,h2,h3{
  font-family:var(--ff-display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
h2{ font-size:clamp(2rem,3.4vw,3.1rem); }
h3{ font-size:clamp(1.3rem,1.6vw,1.6rem); letter-spacing:-.012em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:var(--cream);
  padding:12px 18px; border-radius:0 0 var(--r-sm) var(--r-sm);
  text-decoration:none; transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

:focus-visible{ outline:2.5px solid var(--saffron); outline-offset:3px; border-radius:3px; }

/* ---------- 3. Shared type ---------- */
.kicker{
  font-size:.735rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--saffron); margin:0 0 1em;
}
.kicker--light{ color:var(--saffron-2); }
.lead{ font-size:clamp(1.02rem,.5vw + .92rem,1.16rem); color:var(--ink-2); }
.lead em{ font-style:normal; color:var(--ink); font-weight:600; }
[lang="hi"]{ font-family:var(--ff-deva); }

.section{ padding:clamp(72px,9vw,132px) 0; position:relative; }
.section--tint{ background:var(--cream-2); }
.section--dark{ background:var(--night); color:#F3EDE3; }
.section--dark h2{ color:#FFFCF6; }

.section__head{ max-width:660px; margin-bottom:clamp(40px,5vw,64px); }
.section__head--light .section__intro{ color:rgba(243,237,227,.72); }
.section__intro{ color:var(--ink-2); margin-top:-.2em; }

.note{
  margin-top:36px; font-size:.94rem; color:var(--ink-3);
  border-left:2px solid var(--saffron); padding-left:16px;
}
.note a{ color:var(--vermilion); text-decoration-thickness:1px; text-underline-offset:3px; }

/* ---------- 4. Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:15px 28px; border-radius:100px; border:1px solid transparent;
  font-size:.925rem; font-weight:560; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .32s var(--ease-out), box-shadow .32s var(--ease-out),
             background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--solid{
  background:linear-gradient(135deg,var(--saffron-2),var(--saffron) 55%,#C96A12);
  color:#fff; box-shadow:0 2px 6px rgba(180,90,15,.22), 0 12px 28px rgba(180,90,15,.20);
}
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(180,90,15,.24), 0 18px 40px rgba(180,90,15,.28); }
.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.hero .btn--ghost{ color:#FFFCF6; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.07); }
.hero .btn--ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.btn--onDark{ color:#F3EDE3; border-color:var(--line-light); }
.btn--onDark:hover{ border-color:#F3EDE3; background:rgba(255,255,255,.07); }
/* Deep vermilion — deliberately a different hue from the saffron
   Sign Up button so the two calls to action never blur together. */
.btn--donate{
  background:linear-gradient(135deg,#C93E31,var(--vermilion) 58%,#8E241C);
  color:#fff; font-weight:600; letter-spacing:.012em;
  box-shadow:0 2px 6px rgba(140,32,24,.26), 0 12px 30px rgba(140,32,24,.24);
}
.btn--donate:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(140,32,24,.30), 0 20px 44px rgba(140,32,24,.32);
}
.btn--donate span{ transition:transform .3s var(--ease-out); display:inline-block; }
.btn--donate:hover span{ transform:translateX(3px); }
.nav .btn--donate{ font-size:.875rem; }

.btn--lg{ padding:18px 34px; font-size:1.02rem; }
.btn--sm{ padding:11px 20px; font-size:.86rem; }
.btn--block{ width:100%; padding:17px 28px; font-size:.98rem; }
.btn[disabled]{ opacity:.6; pointer-events:none; }

.link-btn{
  background:none; border:0; padding:0; margin-top:14px; cursor:pointer;
  font-size:.84rem; font-weight:560; color:var(--vermilion); letter-spacing:.01em;
  border-bottom:1px solid transparent; transition:border-color .2s var(--ease), opacity .2s;
}
.link-btn:hover{ border-color:currentColor; }
.link-btn.is-done{ color:var(--ink-3); }
a.link-btn{ display:inline-block; text-decoration:none; }

.cal-foot{
  margin:30px 0 0; padding-left:64px;
  font-size:.9rem; color:var(--ink-3);
}
.cal-foot .link-btn{ margin-top:0; }

.ulink{
  display:inline-block; margin-top:6px; color:var(--saffron-2);
  text-decoration:none; font-weight:520; font-size:.94rem;
  border-bottom:1px solid rgba(243,166,58,.35); padding-bottom:2px;
  transition:border-color .2s var(--ease);
}
.ulink:hover{ border-color:var(--saffron-2); }

/* ---------- 5. Scroll progress + nav ---------- */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--saffron-2),var(--vermilion));
  transition:width .1s linear;
}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:20px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .4s var(--ease);
}
.nav.is-stuck, .nav--solid{
  background:rgba(255,252,246,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line), 0 8px 30px rgba(22,19,15,.05);
}
.nav.is-stuck .nav__inner{ padding-block:12px; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand__mark{ width:34px; height:34px; color:var(--saffron-2); flex:none; }
.brand__mark svg{ width:100%; height:100%; }
.brand__rays{ transform-origin:50% 50%; animation:spin 44s linear infinite; }
.brand__text{ display:flex; flex-direction:column; line-height:1.16; }
.brand__text strong{
  font-family:var(--ff-display); font-weight:600; font-size:1.09rem;
  letter-spacing:-.012em; color:#FFFCF6; transition:color .4s var(--ease);
}
.brand__text em{
  font-style:normal; font-size:.665rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,252,246,.62); transition:color .4s var(--ease);
}
.nav.is-stuck .brand__mark, .nav--solid .brand__mark{ color:var(--saffron); }
.nav.is-stuck .brand__text strong, .nav--solid .brand__text strong{ color:var(--ink); }
.nav.is-stuck .brand__text em, .nav--solid .brand__text em{ color:var(--ink-3); }

.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__links > a:not(.btn){
  padding:9px 14px; border-radius:100px; text-decoration:none;
  font-size:.885rem; font-weight:480; color:rgba(255,252,246,.84);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav__links > a:not(.btn):hover{ background:rgba(255,255,255,.12); color:#fff; }
.nav.is-stuck .nav__links > a:not(.btn), .nav--solid .nav__links > a:not(.btn){ color:var(--ink-2); }
.nav.is-stuck .nav__links > a:not(.btn):hover, .nav--solid .nav__links > a:not(.btn):hover{ background:rgba(22,19,15,.055); color:var(--ink); }
.nav__links > a.is-active{ color:#fff; }
.nav.is-stuck .nav__links > a.is-active, .nav--solid .nav__links > a.is-active{ color:var(--vermilion); }
.nav__cta{ margin-left:10px; }

.nav__toggle{
  display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; padding:11px; flex-direction:column; justify-content:space-between;
}
.nav__toggle span{
  display:block; height:1.8px; width:100%; background:#FFFCF6; border-radius:2px;
  transition:transform .35s var(--ease-out), opacity .2s var(--ease), background-color .4s;
}
.nav.is-stuck .nav__toggle span, .nav--solid .nav__toggle span{ background:var(--ink); }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(9.1px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-9.1px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:150px var(--gut) 120px; overflow:hidden; color:#FFFCF6; isolation:isolate;
}
.hero__media{ position:absolute; inset:-6% 0 0; z-index:-2; }
.hero__media img{ width:100%; height:112%; object-fit:cover; object-position:52% 44%; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(118% 78% at 50% 32%, rgba(10,20,34,0) 0%, rgba(10,20,34,.30) 56%, rgba(10,20,34,.66) 100%),
    linear-gradient(180deg,
      rgba(10,20,34,.54) 0%,
      rgba(10,20,34,.20) 26%,
      rgba(10,20,34,.40) 50%,
      rgba(10,20,34,.66) 74%,
      rgba(10,20,34,.86) 100%);
}

/* Sun */
.hero__sun{
  position:absolute; z-index:-1; left:50%; top:36%;
  width:min(560px,86vw); aspect-ratio:1; transform:translate(-50%,-50%);
  animation:sunrise 2.6s var(--ease-out) .15s both;
}
.sun__glow{
  position:absolute; inset:-32%;
  background:radial-gradient(circle, rgba(243,166,58,.30) 0%, rgba(222,124,21,.14) 34%, transparent 66%);
  animation:breathe 7s ease-in-out infinite;
}
.sun__disc{
  position:absolute; inset:33%; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #FFE3A8, #F3A63A 46%, #DE7C15 78%);
  box-shadow:0 0 70px rgba(243,166,58,.45), 0 0 160px rgba(222,124,21,.28);
  opacity:.66;
}
.sun__rays{
  position:absolute; inset:12%; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,214,140,.11) 0deg 2.2deg, transparent 2.2deg 10deg);
  -webkit-mask:radial-gradient(circle, transparent 34%, #000 42%, #000 62%, transparent 78%);
          mask:radial-gradient(circle, transparent 34%, #000 42%, #000 62%, transparent 78%);
  animation:spin 90s linear infinite;
}

.hero__content{ max-width:900px; position:relative; }
.hero__title{
  font-size:clamp(3.1rem,9.6vw,7.2rem); font-weight:400; line-height:.98;
  letter-spacing:-.035em; margin:0 0 .34em;
  text-shadow:0 2px 40px rgba(12,22,38,.35);
}
.hero__title .line{ display:block; }
.hero__sub{
  font-size:clamp(1.05rem,2.5vw,1.85rem); font-style:italic; font-weight:300;
  letter-spacing:.002em; color:rgba(255,252,246,.9); margin-top:.42em;
}
.hero__lead{
  font-size:clamp(1rem,.6vw + .88rem,1.18rem); color:rgba(255,252,246,.9);
  max-width:600px; margin-inline:auto;
  text-shadow:0 1px 20px rgba(8,16,28,.6);
}
.hero .kicker--light{ text-shadow:0 1px 16px rgba(8,16,28,.6); }
.hero__lead strong{ color:#FFE3A8; font-weight:600; white-space:nowrap; }
.hero__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

.hero__meta{
  position:relative; display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(20px,5vw,64px); margin-top:clamp(48px,7vw,84px);
  padding-top:26px; border-top:1px solid rgba(255,255,255,.16);
  width:min(880px,100%);
}
.hero__meta div{ display:flex; flex-direction:column; gap:3px; }
.hero__meta span{
  font-size:.66rem; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,252,246,.55);
}
.hero__meta b{ font-weight:520; font-size:.95rem; color:#FFFCF6; }

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:24px; height:38px; border:1.4px solid rgba(255,255,255,.4); border-radius:14px;
}
.hero__scroll span{
  position:absolute; left:50%; top:8px; width:3px; height:6px; border-radius:2px;
  background:rgba(255,255,255,.85); transform:translateX(-50%);
  animation:wheel 2.1s var(--ease) infinite;
}

@keyframes sunrise{
  from{ transform:translate(-50%,-14%) scale(.82); opacity:0; }
  to  { transform:translate(-50%,-50%) scale(1);   opacity:1; }
}
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.08); opacity:1 } }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes wheel{ 0%{ opacity:0; top:8px } 30%{ opacity:1 } 100%{ opacity:0; top:23px } }

/* ---------- 7. Countdown ---------- */
.countdown{
  background:var(--night-2); color:#F3EDE3; padding:34px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.countdown__inner{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:22px 46px; }
.countdown__label{
  margin:0; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(243,237,227,.55);
}
.countdown__grid{ display:flex; gap:clamp(18px,4vw,44px); }
.cd{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:56px; }
.cd b{
  font-family:var(--ff-display); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:400;
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FFE3A8,var(--saffron-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cd span{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,237,227,.5); }

/* ---------- 8. About ---------- */
.about{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,84px); align-items:start; }
.about__figure{ margin:0; position:sticky; top:110px; }
.about__figure img{
  width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  aspect-ratio:4/3.1; object-fit:cover; object-position:62% center;
}
.about__figure figcaption{
  margin-top:14px; font-size:.82rem; color:var(--ink-3); letter-spacing:.01em;
  padding-left:14px; border-left:2px solid var(--saffron);
}

.pillars{ list-style:none; padding:0; margin:44px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:26px 30px; }
.pillars li{ padding-top:20px; border-top:1px solid var(--line); }
.pillars__icon{
  display:block; font-size:1.05rem; color:var(--saffron); margin-bottom:8px; line-height:1;
}
.pillars b{ display:block; font-size:.98rem; font-weight:600; margin-bottom:5px; }
.pillars p{ margin:0; font-size:.88rem; color:var(--ink-3); line-height:1.6; }

/* ---------- 9. Timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.tl{ display:grid; grid-template-columns:64px 1fr; gap:0; }
.tl__rail{ position:relative; display:flex; justify-content:center; }
.tl__rail::before{
  content:""; position:absolute; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,var(--line),var(--line));
}
.tl:first-child .tl__rail::before{ top:34px; }
.tl:last-child  .tl__rail::before{ bottom:calc(100% - 34px); }
.tl__dot{
  position:absolute; top:28px; width:13px; height:13px; border-radius:50%;
  background:var(--cream-2); border:2px solid var(--saffron);
  box-shadow:0 0 0 5px var(--cream-2);
  transition:background-color .5s var(--ease), transform .5s var(--ease-out);
}
.section--tint .tl__dot{ background:var(--cream-2); box-shadow:0 0 0 5px var(--cream-2); }
.tl.is-visible .tl__dot{ background:var(--saffron); transform:scale(1.12); }

.tl__card{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px); margin:0 0 22px;
  box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
}
.tl__card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(222,124,21,.34); }
.tl__card header{ margin-bottom:12px; }
.tl__num{
  display:inline-block; font-size:.66rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:9px;
}
.tl__card h3{ margin:0 0 6px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.tl__card h3 span[lang="hi"]{ font-size:.72em; color:var(--saffron); font-weight:400; }
.tl__date{ margin:0; font-size:.9rem; color:var(--vermilion); }
.tl__date b{ font-weight:560; }
.tl__card > p{ color:var(--ink-2); font-size:.955rem; margin:0; }
.tl__card--accent{
  background:linear-gradient(180deg,#fff 0%,#FFF8EC 100%);
  border-color:rgba(222,124,21,.25);
}

/* ---------- 10. Vrati grid ---------- */
.vgrid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:16px;
}
.vcard{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:24px 22px 22px; overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
.vcard::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--saffron-2),var(--vermilion));
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease-out);
}
.vcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:transparent; }
.vcard:hover::after{ transform:scaleY(1); }
.vcard__n{
  display:block; font-size:.66rem; letter-spacing:.18em; color:var(--ink-3); margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.vcard b{
  display:block; font-family:var(--ff-display); font-size:1.12rem; font-weight:500;
  letter-spacing:-.01em; margin-bottom:4px;
}
.vcard a{
  font-size:.9rem; color:var(--ink-3); text-decoration:none;
  font-variant-numeric:tabular-nums; transition:color .2s var(--ease);
}
.vcard a:hover{ color:var(--vermilion); }

/* ---------- 11. Venue ---------- */
.venue{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vpanel{
  background:rgba(255,255,255,.045); border:1px solid var(--line-light);
  border-radius:var(--r-lg); padding:clamp(28px,3.4vw,44px);
  transition:transform .45s var(--ease-out), background-color .35s var(--ease);
}
.vpanel:hover{ transform:translateY(-3px); background:rgba(255,255,255,.075); }
.vpanel__tag{
  font-size:.66rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--saffron-2); margin:0 0 12px;
}
.vpanel h3{ margin:0 0 4px; color:#FFFCF6; font-size:clamp(1.5rem,2.2vw,2rem); }
.vpanel__where{
  font-family:var(--ff-display); font-style:italic; font-size:1.06rem;
  color:rgba(243,237,227,.72); margin:0 0 18px;
}
.vpanel address{
  font-style:normal; font-size:.98rem; line-height:1.7; color:#F3EDE3;
  margin:0 0 18px; padding-left:15px; border-left:2px solid var(--saffron);
}
.vpanel p{ color:rgba(243,237,227,.72); font-size:.95rem; }
.vpanel .btn{ margin-top:22px; }
.vpanel--primary{
  background:
    linear-gradient(150deg, rgba(222,124,21,.16) 0%, rgba(180,52,42,.10) 60%, rgba(255,255,255,.04) 100%);
  border-color:rgba(243,166,58,.34);
}
.vpanel--primary:hover{ background:linear-gradient(150deg, rgba(222,124,21,.22) 0%, rgba(180,52,42,.13) 60%, rgba(255,255,255,.05) 100%); }

/* ---------- 12. Gallery ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(180px,20vw,250px); gap:14px;
}
.gitem{
  position:relative; overflow:hidden; border-radius:var(--r); border:0; padding:0;
  cursor:zoom-in; background:var(--cream-3); grid-column:span 1; grid-row:span 2;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.gitem--wide{ grid-column:span 2; grid-row:span 2; }
.gitem img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out), filter .5s var(--ease);
}
.gitem::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(12,22,38,.72) 100%);
  opacity:0; transition:opacity .4s var(--ease);
}
.gitem__cap{
  position:absolute; left:20px; right:20px; bottom:16px; z-index:2;
  color:#FFFCF6; font-size:.85rem; font-weight:500; text-align:left;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .45s var(--ease-out);
}
.gitem:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.gitem:hover img{ transform:scale(1.06); }
.gitem:hover::after,
.gitem:focus-visible::after{ opacity:1; }
.gitem:hover .gitem__cap,
.gitem:focus-visible .gitem__cap{ opacity:1; transform:none; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(9,16,28,.94); backdrop-filter:blur(8px); padding:clamp(20px,5vw,64px);
  animation:fadeIn .3s var(--ease) both;
}
.lightbox[hidden]{ display:none; }
.lightbox__fig{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:14px; align-items:center; }
.lightbox__fig img{
  max-width:min(1100px,100%); max-height:78vh; object-fit:contain;
  border-radius:var(--r); box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:lbIn .45s var(--ease-out) both;
}
.lightbox__fig figcaption{ color:rgba(255,252,246,.72); font-size:.88rem; text-align:center; max-width:60ch; }
.lightbox__close,
.lightbox__nav{
  position:absolute; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  color:#FFFCF6; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; transition:background-color .25s var(--ease), transform .25s var(--ease-out);
}
.lightbox__close{ top:22px; right:22px; width:44px; height:44px; font-size:1rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:1.9rem; line-height:0; padding-bottom:5px; }
.lightbox__nav--prev{ left:clamp(10px,2vw,26px); }
.lightbox__nav--next{ right:clamp(10px,2vw,26px); }
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(255,255,255,.2); }
.lightbox__close:hover{ transform:rotate(90deg); }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes lbIn{ from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:none } }

/* ---------- 13. Sign-up ---------- */
.signup{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.signup__aside > p{ color:var(--ink-2); }
.checklist{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px; }
.checklist li{ position:relative; padding-left:30px; font-size:.925rem; color:var(--ink-2); }
.checklist li::before{
  content:""; position:absolute; left:0; top:.42em; width:16px; height:16px; border-radius:50%;
  background:rgba(222,124,21,.14);
  box-shadow:inset 0 0 0 1px rgba(222,124,21,.3);
}
.checklist li::after{
  content:""; position:absolute; left:5px; top:.72em; width:6px; height:3.2px;
  border-left:1.6px solid var(--saffron); border-bottom:1.6px solid var(--saffron);
  transform:rotate(-45deg);
}
.signup__figure{ margin:36px 0 0; }
.signup__figure img{
  width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 62%;
  border-radius:var(--r-lg); box-shadow:var(--shadow-md);
}

.signup__formwrap{ position:relative; }
.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,44px); box-shadow:var(--shadow-lg);
  display:grid; gap:18px;
}
.field{ display:grid; gap:7px; border:0; padding:0; margin:0; min-width:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field label,
.field legend{
  font-size:.79rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); padding:0;
}
.req{ color:var(--vermilion); }
.field input,
.field select,
.field textarea{
  width:100%; font:inherit; font-size:.96rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:13px 15px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease);
}
.field textarea{ resize:vertical; min-height:88px; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%237E7466' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:11px;
  padding-right:40px;
}
.field input::placeholder,
.field textarea::placeholder{ color:#B6ABA0; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; background:#fff; border-color:var(--saffron);
  box-shadow:0 0 0 3.5px rgba(222,124,21,.13);
}
.field.is-invalid input,
.field.is-invalid select{ border-color:var(--vermilion); box-shadow:0 0 0 3.5px rgba(180,52,42,.10); }
.err{
  margin:0; font-size:.79rem; color:var(--vermilion); min-height:0;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .25s var(--ease), opacity .25s var(--ease);
}
.err.is-shown{ max-height:40px; opacity:1; margin-top:-1px; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:3px; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:9px 17px; border-radius:100px;
  border:1px solid var(--line); background:var(--cream);
  font-size:.87rem; color:var(--ink-2);
  transition:all .25s var(--ease);
}
.chip:hover span{ border-color:var(--saffron); color:var(--ink); }
.chip input:checked + span{
  background:linear-gradient(135deg,var(--saffron-2),var(--saffron));
  border-color:transparent; color:#fff; font-weight:520;
  box-shadow:0 4px 12px rgba(180,90,15,.22);
}
.chip input:focus-visible + span{ outline:2.5px solid var(--saffron); outline-offset:2px; }

.consent{ display:flex; gap:11px; align-items:flex-start; font-size:.87rem; color:var(--ink-2); cursor:pointer; }
.consent input{ margin-top:3px; width:17px; height:17px; accent-color:var(--saffron); flex:none; }
.form__foot{ margin:0; font-size:.79rem; color:var(--ink-3); text-align:center; }

.success{
  background:#fff; border:1px solid rgba(222,124,21,.28); border-radius:var(--r-lg);
  padding:clamp(34px,4vw,56px); box-shadow:var(--shadow-lg); text-align:center;
  animation:popIn .5s var(--ease-out) both;
}
.success__mark{ width:62px; height:62px; margin:0 auto 20px; }
.success__mark svg{ width:100%; height:100%; fill:none; stroke:var(--saffron); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.success__mark circle{ stroke-dasharray:145; stroke-dashoffset:145; animation:draw .7s var(--ease-out) .1s forwards; }
.success__mark path{ stroke-dasharray:36; stroke-dashoffset:36; animation:draw .4s var(--ease-out) .6s forwards; }
.success h3{ margin-bottom:.4em; }
.success p{ color:var(--ink-2); font-size:.95rem; margin-bottom:1.6em; }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes popIn{ from{ opacity:0; transform:translateY(14px) scale(.985) } to{ opacity:1; transform:none } }

/* ---------- 13b. Support band (home page) ---------- */
.supportband__inner{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,72px); align-items:center;
}
.supportband__text .btn{ margin-top:28px; }

.supportband__list{
  list-style:none; margin:0; padding:0; display:grid; gap:0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(168deg,#FFF9EF 0%,#FDF1DC 70%,#FBE8CB 100%);
}
.supportband__list li{
  padding:20px 24px; display:grid; gap:3px;
}
.supportband__list li + li{ border-top:1px solid rgba(222,124,21,.18); }
.supportband__list b{ font-size:.97rem; font-weight:600; }
.supportband__list span{ font-size:.87rem; color:var(--ink-2); line-height:1.55; }

/* ---------- 13c. Donate page ---------- */
.dhero{
  position:relative; isolation:isolate; color:#FFFCF6;
  padding:calc(150px + env(safe-area-inset-top)) 0 clamp(56px,7vw,88px);
  overflow:hidden;
}
.dhero__media{ position:absolute; inset:0; z-index:-2; }
.dhero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.dhero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,20,34,.86) 0%, rgba(10,20,34,.66) 46%, rgba(10,20,34,.88) 100%);
}
.dhero__content{ max-width:760px; }
.dhero h1{
  font-size:clamp(2.3rem,5.4vw,3.7rem); font-weight:400; letter-spacing:-.028em;
  margin:0 0 .38em; text-wrap:balance;
}
.dhero p{
  font-size:clamp(1rem,.6vw + .9rem,1.16rem); color:rgba(255,252,246,.84);
  max-width:56ch; margin:0;
}
.backlink{
  display:inline-block; margin-bottom:22px; text-decoration:none;
  font-size:.83rem; letter-spacing:.06em; color:var(--saffron-2);
  border-bottom:1px solid rgba(243,166,58,.34); padding-bottom:2px;
  transition:border-color .22s var(--ease);
}
.backlink:hover{ border-color:var(--saffron-2); }

.dgive__wrap{ max-width:660px; }
.dpanel{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg,#FFF9EF 0%,#FDF1DC 62%,#FBE8CB 100%);
  border:1px solid rgba(222,124,21,.28); border-radius:var(--r-lg);
  padding:clamp(26px,3.6vw,44px); box-shadow:var(--shadow-lg);
}
.dpanel::before{
  content:""; position:absolute; inset:auto -70px -100px auto; z-index:0;
  width:270px; height:270px; border-radius:50%;
  background:radial-gradient(circle, rgba(243,166,58,.32), transparent 66%);
  pointer-events:none;
}
.dpanel > *{ position:relative; z-index:1; }
.dpanel__h{
  font-size:clamp(1.25rem,1.9vw,1.5rem); margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.dpanel__h--pay span{ font-size:1.05em; line-height:1; }
.dpanel__rule{ border:0; border-top:1px solid rgba(22,19,15,.11); margin:30px 0 26px; }
.dgive__free{
  margin:26px 0 0; text-align:center; font-size:.92rem; color:var(--ink-3);
}
.dgive__free a{ color:var(--vermilion); }

.stripe-embed{ margin-bottom:18px; }
.stripe-embed[hidden]{ display:none; }

.section__head--center{ margin-inline:auto; text-align:center; }

.impact{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.icard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,34px); box-shadow:var(--shadow-sm);
  transition:transform .42s var(--ease-out), box-shadow .42s var(--ease-out), border-color .3s;
}
.icard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(222,124,21,.32); }
.icard__icon{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:18px;
  border-radius:15px; font-size:1.5rem; line-height:1;
  background:linear-gradient(150deg, rgba(243,166,58,.24), rgba(222,124,21,.13));
  border:1px solid rgba(222,124,21,.24);
}
.icard h3{ margin:0 0 8px; font-size:1.24rem; }
.icard p{ margin:0; font-size:.925rem; color:var(--ink-2); line-height:1.62; }

.dquestions{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,64px); align-items:center; }
.dquestions p{ color:rgba(243,237,227,.74); }
.dquestions__card{
  background:rgba(255,255,255,.05); border:1px solid var(--line-light);
  border-radius:var(--r-lg); padding:28px 26px;
}
.dquestions__card address{
  font-style:normal; font-size:.98rem; line-height:1.7; color:#F3EDE3; margin:0 0 6px;
}

/* ---------- 13d. Amounts + methods (shared) ---------- */
.fundlist{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:0; }
.fundlist li{
  position:relative; padding:14px 0 14px 30px;
  font-size:.945rem; color:var(--ink-2);
  border-bottom:1px solid var(--line-2);
}
.fundlist li:first-child{ border-top:1px solid var(--line-2); }
.fundlist li::before{
  content:""; position:absolute; left:2px; top:1.42em;
  width:7px; height:7px; border-radius:50%; background:var(--saffron);
  box-shadow:0 0 0 4px rgba(222,124,21,.13);
}

.donate__tag{
  font-size:.66rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--saffron); margin:0 0 10px;
}

.chips--amount{ margin-bottom:4px; }
.chips--amount .chip span{ min-width:76px; text-align:center; background:rgba(255,255,255,.72); }
.chips--six{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.chips--six .chip{ display:flex; }
.chips--six .chip span{ width:100%; min-width:0; padding:15px 12px; font-size:1rem; font-weight:520; }

.customamt{ margin-top:16px; display:grid; gap:7px; }
/* [hidden] must beat the display rules above it */
.customamt[hidden], .chips[hidden]{ display:none; }
.customamt label{
  font-size:.79rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
}
.customamt__field{
  display:flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.82); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:0 14px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.customamt__field:focus-within{ border-color:var(--saffron); box-shadow:0 0 0 3.5px rgba(222,124,21,.13); }
.customamt__field span{ color:var(--ink-3); font-size:.98rem; }
.customamt__field input{
  flex:1; min-width:0; font:inherit; font-size:.98rem; color:var(--ink);
  background:none; border:0; padding:13px 4px; outline:none;
  font-variant-numeric:tabular-nums;
}

.methods{ display:grid; gap:10px; margin-top:24px; }
.method{
  display:flex; align-items:center; gap:14px;
  padding:15px 18px; border-radius:var(--r);
  background:rgba(255,255,255,.78); border:1px solid rgba(22,19,15,.09);
  text-decoration:none; color:var(--ink); text-align:left; cursor:pointer;
  transition:transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .25s;
}
.method:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(222,124,21,.4); }
.method__icon{
  flex:none; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  font-family:var(--ff-display); font-size:1.02rem; font-weight:600; color:#fff;
  background:linear-gradient(140deg,var(--saffron-2),var(--saffron));
}
.method__body{ flex:1; min-width:0; }
.method__name{ display:block; font-weight:600; font-size:.96rem; line-height:1.35; }
.method__hint{
  display:block; font-size:.82rem; color:var(--ink-3); line-height:1.45;
  overflow-wrap:anywhere;
}
.method__go{ flex:none; color:var(--ink-3); font-size:1.05rem; }
.method--static{ cursor:default; }
.method--static:hover{ transform:none; box-shadow:none; border-color:rgba(22,19,15,.09); }
.method.is-copied .method__hint{ color:var(--saffron); font-weight:560; }

.methods__empty{
  padding:18px; border-radius:var(--r); font-size:.92rem; color:var(--ink-2);
  background:rgba(255,255,255,.7); border:1px dashed rgba(222,124,21,.42);
}
.methods__empty a{ color:var(--vermilion); }

.donate__foot{
  margin:20px 0 0; padding-top:16px; border-top:1px solid rgba(22,19,15,.09);
  font-size:.78rem; line-height:1.6; color:var(--ink-3);
}

/* ---------- 14. Contact ---------- */
.contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.contact__card{
  background:rgba(255,255,255,.045); border:1px solid var(--line-light);
  border-radius:var(--r); padding:26px 24px;
  transition:transform .4s var(--ease-out), background-color .3s var(--ease), border-color .3s;
}
.contact__card:hover{ transform:translateY(-3px); background:rgba(255,255,255,.075); border-color:rgba(243,166,58,.3); }
.contact__tag{
  font-size:.64rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--saffron-2); margin:0 0 12px;
}
.contact__name{
  display:block; font-family:var(--ff-display); font-size:1.14rem; font-weight:500;
  color:#FFFCF6; letter-spacing:-.01em;
}
.contact__card address{ font-style:normal; font-size:.96rem; line-height:1.65; color:#F3EDE3; margin:0; }

/* ---------- 15. Footer ---------- */
.footer{ background:#08111E; color:rgba(243,237,227,.7); padding:60px 0 30px; }
.footer__inner{
  display:flex; justify-content:space-between; align-items:flex-start; gap:34px; flex-wrap:wrap;
  padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.08);
}
.footer__brand{ display:flex; gap:14px; align-items:center; }
.footer__brand strong{
  display:block; font-family:var(--ff-display); font-size:1.1rem; font-weight:500;
  color:#FFFCF6; letter-spacing:-.012em;
}
.footer__brand p{ margin:2px 0 0; font-size:.83rem; }
.brand__mark--sm{ width:30px; height:30px; color:var(--saffron-2); }
.footer__links{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.footer__links a{
  text-decoration:none; font-size:.885rem; color:rgba(243,237,227,.68);
  transition:color .22s var(--ease);
}
.footer__links a:hover{ color:var(--saffron-2); }
.footer__base{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:24px; font-size:.79rem; color:rgba(243,237,227,.44);
}
.footer__base p{ margin:0; }
.footer__credit{ letter-spacing:.01em; }
.footer__credit strong{
  font-weight:520; color:rgba(243,237,227,.72);
  border-bottom:1px solid rgba(243,166,58,.34); padding-bottom:1px;
}
.footer__mantra{ font-family:var(--ff-deva); font-size:.95rem; color:var(--saffron-2); opacity:.8; }

/* ---------- 15b. Mobile action bar ---------- */
.mobilebar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:105;
  gap:10px; padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(12,22,38,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid rgba(255,255,255,.10);
  transform:translateY(110%);
  transition:transform .42s var(--ease-out);
}
.mobilebar.is-shown{ transform:none; }
.mobilebar__btn{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:50px; border-radius:100px; text-decoration:none;
  font-size:.95rem; font-weight:560; letter-spacing:.005em;
  color:#F3EDE3; border:1px solid rgba(255,255,255,.24);
}
.mobilebar__btn--primary{
  flex:1.35; color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--saffron-2),var(--saffron) 60%,#C96A12);
  box-shadow:0 4px 16px rgba(180,90,15,.34);
}
.mobilebar__btn--donate{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#C93E31,var(--vermilion) 60%,#8E241C);
  box-shadow:0 4px 16px rgba(140,32,24,.32);
}
.mobilebar__btn:active{ transform:scale(.98); }

.swipe-hint{ display:none; }

/* ---------- 16. Back to top ---------- */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:100;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:var(--ink); color:var(--cream); border:0; font-size:1.05rem;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.9);
  transition:opacity .35s var(--ease), transform .4s var(--ease-out), visibility .35s, background-color .25s;
}
.totop.is-shown{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--saffron); }

/* ---------- 17. Reveal animation ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .82s var(--ease-out), transform .82s var(--ease-out);
  transition-delay:calc(var(--d,0) * 85ms);
  will-change:opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- 18. Responsive ---------- */
@media (max-width:1120px){
  .nav__links{ gap:2px; }
  .nav__links > a:not(.btn){ padding:9px 10px; font-size:.845rem; }
  .nav__cta{ margin-left:6px; }
}

@media (max-width:1000px){
  .about{ grid-template-columns:1fr; }
  .about__figure{ position:static; order:-1; }
  .about__figure img{ aspect-ratio:16/10; }
  .signup{ grid-template-columns:1fr; }
  .signup__figure{ display:none; }
  .venue{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gitem--wide{ grid-column:span 2; }
  .supportband__inner{ grid-template-columns:1fr; }
  .impact{ grid-template-columns:1fr; }
  .dquestions{ grid-template-columns:1fr; }
}

/* ── Tablet and below: drawer navigation ── */
@media (max-width:820px){
  .nav__toggle{ display:flex; }
  .nav__inner{ padding-top:calc(16px + env(safe-area-inset-top)); }
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(340px,86vw);
    flex-direction:column; align-items:stretch; justify-content:center; gap:2px;
    background:rgba(12,22,38,.97);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    padding:calc(72px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
    box-shadow:-20px 0 60px rgba(0,0,0,.35);
    transform:translateX(102%); transition:transform .5s var(--ease-out);
    overflow-y:auto;
  }
  .nav.is-open .nav__links{ transform:none; }
  .nav__links > a:not(.btn){
    display:flex; align-items:center; min-height:54px;
    color:rgba(255,252,246,.86) !important; font-size:1.12rem; font-family:var(--ff-display);
    padding:0 12px; border-bottom:1px solid rgba(255,255,255,.07); border-radius:0;
  }
  .nav__links > a:not(.btn):hover{ background:transparent !important; color:var(--saffron-2) !important; }
  .nav__cta{ margin:24px 0 0; justify-content:center; min-height:52px; }
  .nav__cta + .nav__cta{ margin-top:10px; }
  .nav.is-open .nav__toggle span{ background:#FFFCF6 !important; }
  body.is-locked{ overflow:hidden; }

  /* mobile action bar replaces the back-to-top button */
  .mobilebar{ display:flex; }
  .totop{ display:none; }
  /* keep the last footer line clear of the fixed bar */
  .footer{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }

  /* 16px stops iOS from zooming the page when a field is focused */
  .field input,
  .field select,
  .field textarea{ font-size:16px; padding:14px 15px; }
  .field select{ background-position:right 14px center; }

  /* comfortable tap targets throughout */
  .chip span{ padding:12px 18px; font-size:.92rem; }
  .consent{ padding:4px 0; font-size:.9rem; }
  .consent input{ width:20px; height:20px; margin-top:2px; }
  .link-btn{ display:inline-block; min-height:34px; padding:6px 0; }
  a, button{ -webkit-tap-highlight-color:rgba(222,124,21,.16); }
}

/* ── Phones ── */
@media (max-width:700px){
  .section{ padding:clamp(56px,11vw,80px) 0; }
  .section__head{ margin-bottom:32px; }
  .pillars{ grid-template-columns:1fr; gap:0; margin-top:34px; }
  .pillars li{ padding:18px 0; }
  .field-row{ grid-template-columns:1fr; }

  /* Hero — let the photograph breathe, keep the fold reachable */
  .hero{
    min-height:auto; padding:calc(112px + env(safe-area-inset-top)) var(--gut) 74px;
    justify-content:flex-start;
  }
  .hero__media img{ object-position:54% 46%; }
  .hero__sun{ top:30%; width:min(300px,62vw); }
  .hero__title{ font-size:clamp(2.9rem,15vw,4.2rem); }
  .hero__lead{ font-size:1rem; }
  .hero__actions{ margin-top:28px; }
  .hero__scroll{ display:none; }

  /* hero facts read as a compact list, not three stranded columns */
  .hero__meta{
    display:grid; grid-template-columns:1fr; gap:0;
    margin-top:38px; padding-top:0; border-top:0;
    background:rgba(8,16,28,.42); border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .hero__meta div{
    flex-direction:row; align-items:baseline; justify-content:space-between; gap:14px;
    padding:13px 16px; text-align:left;
  }
  .hero__meta div + div{ border-top:1px solid rgba(255,255,255,.11); }
  .hero__meta span{ flex:none; }
  .hero__meta b{ text-align:right; font-size:.92rem; }

  .countdown{ padding:26px 0; }
  .countdown__inner{ flex-direction:column; gap:14px; }
  .countdown__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; width:100%; }
  .cd{ min-width:0; }
  .cd + .cd{ border-left:1px solid rgba(255,255,255,.1); }

  .tl{ grid-template-columns:26px 1fr; }
  .cal-foot{ padding-left:26px; }
  .tl__card{ margin-bottom:16px; }

  /* one family per row, whole card is a phone link */
  .vgrid{ grid-template-columns:1fr; gap:10px; }
  .vcard{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:16px 18px; }
  .vcard__n{ margin:0; }
  .vcard b{ margin:0; font-size:1.05rem; }
  .vcard a{ min-height:44px; display:flex; align-items:center; color:var(--vermilion); }

  /* gallery becomes a swipeable strip */
  .gallery{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gut) * -1);
    padding:2px var(--gut) 12px; scroll-padding-inline:var(--gut);
    scrollbar-width:none;
  }
  .gallery::-webkit-scrollbar{ display:none; }
  .gitem, .gitem--wide{ flex:0 0 80%; height:300px; scroll-snap-align:center; }
  .gitem::after{ opacity:1; }
  .gitem__cap{ opacity:1; transform:none; }
  .swipe-hint{
    display:block; margin:6px 0 0; font-size:.78rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-3);
  }

  .venue{ gap:16px; }
  .contact{ gap:12px; }

  .supportband__list li{ padding:16px 18px; }
  .dhero{ padding-top:calc(120px + env(safe-area-inset-top)); }
  .chips--six{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .chips--six .chip span{ padding:15px 10px; }
  .dpanel__h{ font-size:1.2rem; }
  .icard__icon{ width:46px; height:46px; font-size:1.3rem; margin-bottom:14px; }
  .mobilebar__btn{ font-size:.86rem; padding-inline:6px; }
  .mobilebar__btn--primary{ flex:1.15; }
  .fundlist{ margin-top:26px; }
  .fundlist li{ padding:12px 0 12px 28px; font-size:.92rem; }
  .chips--amount .chip span{ min-width:0; flex:1; padding:13px 16px; }
  .chips--amount{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .chips--amount .chip{ display:flex; }
  .chips--amount .chip span{ width:100%; text-align:center; }
  .method{ padding:14px 16px; min-height:64px; }
  .customamt__field input{ font-size:16px; }
  .footer__inner{ gap:24px; }
  .footer__links{ gap:2px 20px; }
  .footer__links a{ min-height:40px; display:flex; align-items:center; }
  .footer__base{ justify-content:center; text-align:center; }

  .lightbox{ padding:16px; }
  .lightbox__nav{ width:46px; height:46px; font-size:1.6rem; }
}

@media (max-width:520px){
  .lightbox__nav{ top:auto; bottom:calc(14px + env(safe-area-inset-bottom)); transform:none; }
  .lightbox__nav--prev{ left:calc(50% - 62px); }
  .lightbox__nav--next{ right:calc(50% - 62px); }
  .lightbox__close{ top:calc(14px + env(safe-area-inset-top)); right:16px; }
  .lightbox__fig img{ max-height:62vh; }
  .btn{ padding:15px 22px; min-height:50px; }
  .hero__actions{ flex-direction:column; }
  .hero__actions .btn{ width:100%; }
  .gitem, .gitem--wide{ flex:0 0 84%; height:270px; }
}

/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__sun{ opacity:1; transform:translate(-50%,-50%); }
}

/* ---------- 20. Print ---------- */
@media print{
  .nav,.totop,.mobilebar,.hero__scroll,.scroll-progress,.countdown,.lightbox,.signup__formwrap{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section--dark{ background:#fff; color:#000; }
  .section--dark h2,.vpanel h3,.contact__name{ color:#000; }
  .reveal{ opacity:1 !important; transform:none !important; }
}
