/* ============================================================
   THE SAINT JAMES SHOW
   Palette: vestment purple + antique foil gold (liturgical).
   Type:    Bodoni Moda (display, foil-stamped program covers)
            Archivo (body + utility)
   Signature: the sanctuary arch.
   ============================================================ */

:root{
  --ink:        #0F0418;
  --vestment:   #1E0842;
  --velvet:     #2E1065;
  --pew:        #3B1C7A;
  --amethyst:   #B79CF5;
  --lilac:      #D9CBFA;

  --foil:       #CBA135;
  --foil-lit:   #F3DC97;
  --foil-deep:  #8A6B1C;
  /* the deep stop above drops button labels to 3.66:1 — this one holds
     5.2:1 against #22100A, so it's what solid gold surfaces use */
  --foil-solid: #A8842A;

  --parchment:  #F7F2E7;
  --paper-dim:  #CDBFDF;

  --shell: min(1180px, 100% - 3rem);
  --arch-r: 999px 999px 10px 10px;

  --ease: cubic-bezier(.2,.7,.25,1);
  --dur: .7s;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:var(--shell); margin-inline:auto; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--foil); color:var(--ink);
  padding:.75rem 1.25rem; font-weight:700; text-decoration:none;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2.5px solid var(--foil-lit);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- shared type devices ---------- */

.eyebrow{
  display:flex; align-items:center; gap:.75rem;
  margin:0 0 1.5rem;
  font-size:.7rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--foil);
}
.eyebrow--c{ justify-content:center; }
.eyebrow__rule{
  display:block; width:2.25rem; height:1px; flex:none;
  background:linear-gradient(90deg,transparent,var(--foil));
}
.eyebrow--c .eyebrow__rule{ background:linear-gradient(90deg,transparent,var(--foil)); }

/* the one ornament — a gold rule with a lozenge, used sparingly */
.fleuron{ display:flex; align-items:center; gap:.6rem; margin:1.75rem 0; }
.fleuron--c{ justify-content:center; margin-inline:auto; }
.fleuron__r{
  display:block; width:clamp(2.5rem,7vw,4.5rem); height:1px;
  background:linear-gradient(90deg,transparent,var(--foil),transparent);
}
.fleuron__d{
  width:7px; height:7px; flex:none;
  background:var(--foil); rotate:45deg;
}

.shead{ margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.shead--c{ text-align:center; }
.shead__h{
  font-family:'Bodoni Moda',Georgia,serif;
  font-weight:400;
  font-size:clamp(2.1rem,1.3rem + 3.4vw,3.6rem);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
}
.shead__sub{
  max-width:46ch; margin:1.15rem auto 0;
  color:var(--paper-dim); font-size:1.02rem;
}
.shead:not(.shead--c) .shead__sub{ margin-inline:0; }

.sec{ padding-block:clamp(4.5rem,9vw,8rem); position:relative; }
/* keep jump-links from parking a heading underneath the sticky nav */
.sec[id]{ scroll-margin-top:4.75rem; }

/* ---------- buttons ---------- */

.btn{
  --btn-bg:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.9rem;
  font-family:'Archivo',sans-serif;
  font-size:.83rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  border:1px solid transparent; border-radius:2px;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), color .25s var(--ease);
}
.btn--gold{
  background:linear-gradient(160deg,var(--foil-lit),var(--foil) 46%,var(--foil-solid));
  color:#22100A;
  box-shadow:0 10px 30px -12px rgba(203,161,53,.75);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(203,161,53,.95); }
.btn--ghost{
  border-color:rgba(215,196,255,.35);
  color:var(--parchment);
  background:rgba(255,255,255,.03);
}
.btn--ghost:hover{ border-color:var(--foil); color:var(--foil-lit); transform:translateY(-2px); }
.btn--full{ width:100%; padding-block:1.15rem; }
.btn__ico{ width:1.15em; height:1.15em; }
.btn:active{ transform:translateY(0); }

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(15,4,24,0);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             backdrop-filter .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(15,4,24,.88);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(203,161,53,.22);
}
.nav__in{
  width:var(--shell); margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem;
  padding-block:1rem;
}
.nav__brand{
  display:flex; align-items:center;
  text-decoration:none; margin-right:auto;
}
.nav__logo{
  height:clamp(2.6rem,5vw,3.4rem); width:auto;
  border-radius:7px;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.6);
}
.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--paper-dim);
  padding-block:.35rem;
  transition:color .2s var(--ease);
}
.nav__links a:hover{ color:var(--foil-lit); }
.nav__cta{ padding:.7rem 1.35rem; font-size:.72rem; }

@media(max-width:900px){
  .nav__links{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  /* no bottom padding: the cutout runs flush to the marquee strip below */
  padding-block:clamp(3rem,7vw,6rem) 0;
  background:
    radial-gradient(120% 90% at 78% 22%, rgba(74,32,150,.75), transparent 62%),
    linear-gradient(178deg, var(--vestment) 0%, var(--ink) 88%);
  overflow:hidden;
}
/* soft light shaft behind the portrait — "light through the window" */
.hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 55% at 74% 34%, rgba(203,161,53,.20), transparent 70%),
    radial-gradient(60% 40% at 12% 8%, rgba(183,156,245,.13), transparent 70%);
}
.hero__in{
  position:relative;
  width:var(--shell); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}

.hero__h1{ margin:0; }
.hero__line{
  display:block;
  font-family:'Bodoni Moda',Georgia,serif;
  line-height:.94;
}
.hero__line--sm{
  font-weight:400; font-style:italic;
  font-size:clamp(1.6rem,.9rem + 2.9vw,2.9rem);
  color:var(--lilac);
  letter-spacing:-.01em;
}
.hero__line--lg{
  /* Bodoni's hairlines vanish at display size, so the wordmark runs heavy and
     skips the large-optical-size thinning. The gradient stays luminous top to
     bottom — letting it darken made the lower half read as mud on the purple. */
  font-weight:900;
  font-optical-sizing:none;
  font-size:clamp(3rem,1.1rem + 8.6vw,7rem);
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin-top:.1em;
  background:linear-gradient(172deg,var(--foil-lit) 6%,var(--foil) 55%,#BE9633 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  padding-bottom:.06em;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.45));
}
.hero__verse{
  max-width:34ch; margin:0;
  font-family:'Bodoni Moda',Georgia,serif;
  font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);
  line-height:1.5;
  color:var(--paper-dim);
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.25rem; }

/* ---------- the signature: sanctuary arch ---------- */

.arch{ margin:0; }
.arch__frame{
  position:relative;
  border-radius:var(--arch-r);
  padding:6px;
  background:linear-gradient(155deg,var(--foil-lit),var(--foil) 32%,var(--foil-deep) 62%,var(--foil) 100%);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(243,220,151,.35),
    0 0 90px -30px rgba(203,161,53,.5);
}
.arch__frame::after{
  content:''; position:absolute; inset:6px;
  border-radius:var(--arch-r);
  box-shadow:inset 0 0 60px -14px rgba(46,16,101,.65);
  pointer-events:none;
}
.arch__frame img{
  border-radius:var(--arch-r);
  width:100%; height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
}
.arch__cap{
  margin-top:1.15rem; text-align:center;
  font-size:.68rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--foil);
}
/* Hero figure: transparent cutout floating on the gradient, no frame.
   Bottom-aligned so he stands on the fold; a soft shadow lifts him off. */
.hero__figure{
  margin:0; align-self:end; justify-self:end;
  width:min(112%,48rem);
}
.hero__cutout{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.5));
}

@media(max-width:860px){
  /* stacked: figure on top, so restore bottom padding under the buttons */
  .hero{ padding-bottom:clamp(2.5rem,6vw,4rem); }
  .hero__in{ grid-template-columns:1fr; text-align:center; gap:1.5rem; }
  .hero__type{ order:2; }
  .hero__figure{ order:1; width:min(78%,22rem); }
  .eyebrow{ justify-content:center; }
  .fleuron{ justify-content:center; }
  .hero__verse{ margin-inline:auto; }
  .hero__acts{ justify-content:center; }
}
@media(max-width:560px){
  .hero{ padding-block:1.75rem 3.25rem; }
  .hero__figure{ width:min(84%,17rem); }
  .hero .fleuron{ margin-block:1.15rem; }
  .hero__acts{ margin-top:1.75rem; }
  .hero__acts .btn{ width:100%; }
  /* a lone rule floating beside centred, wrapped text reads as a stray mark */
  .eyebrow--c .eyebrow__rule,
  .hero .eyebrow .eyebrow__rule{ display:none; }
}

/* ============================================================
   MARQUEE — the church announcement board
   ============================================================ */

.marquee{
  border-block:1px solid rgba(203,161,53,.3);
  background:linear-gradient(90deg,var(--velvet),var(--vestment) 50%,var(--velvet));
  padding-block:.95rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.marquee__set{
  display:flex; align-items:center; gap:1.5rem;
  padding-right:1.5rem; white-space:nowrap;
  font-family:'Bodoni Moda',serif;
  font-size:clamp(1rem,.9rem + .5vw,1.4rem);
  letter-spacing:.04em;
  color:var(--lilac);
}
.marquee__set i{ color:var(--foil); font-style:normal; font-size:.7em; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   WATCH
   ============================================================ */

.sec--watch{ background:linear-gradient(180deg,var(--ink),var(--vestment) 130%); }

/* Two equal, side-by-side feature tiles: YouTube + the Patreon sanctuary */
.features{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
.feature{
  display:flex; flex-direction:column;
  border-radius:8px; overflow:hidden; text-decoration:none;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(203,161,53,.35);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.feature:hover{ transform:translateY(-4px); border-color:var(--foil); box-shadow:0 42px 72px -30px rgba(0,0,0,.95); }

.feature__thumb{
  position:relative; width:100%; aspect-ratio:16/9;
  display:grid; place-items:center;
}
/* placeholder look for the YouTube thumbnail slot */
.ph{
  background:
    repeating-linear-gradient(135deg, rgba(203,161,53,.05) 0 14px, transparent 14px 28px),
    linear-gradient(155deg, #26105c, #170733);
  border-bottom:1px dashed rgba(203,161,53,.4);
}
.ph__tag{
  position:absolute; top:1rem; left:1rem;
  font-size:.62rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--foil);
  padding:.4rem .75rem;
  border:1px solid rgba(203,161,53,.4); border-radius:2px;
  background:rgba(15,4,24,.5);
}
.feature__play{
  width:clamp(3.5rem,7vw,4.75rem); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(155deg,var(--foil-lit),var(--foil) 55%,var(--foil-solid));
  color:#22100A;
  box-shadow:0 0 0 6px rgba(15,4,24,.42), 0 14px 36px -8px rgba(0,0,0,.8);
  transition:transform .35s var(--ease);
}
.feature__play svg{ width:46%; height:46%; margin-left:8%; }
.feature:hover .feature__play{ transform:scale(1.09); }

/* Patreon visual — same footprint as the thumbnail, so equal prominence */
.feature__thumb--patreon{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(203,161,53,.14), transparent 60%),
    linear-gradient(155deg, #3a1a7d, #1d0a44);
}
.feature--patreon{ border-color:rgba(203,161,53,.5); }
/* single centred child -> place-items:center on .feature__thumb centres it */
.feature__plogo{ width:clamp(4rem,9vw,6.5rem); height:auto; color:var(--foil-lit); }
/* badge sits in the corner, mirroring the YouTube tile's thumbnail tag */
.feature__badge{
  position:absolute; top:1rem; left:1rem;
  font-size:.62rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--foil);
  padding:.4rem .8rem; border:1px solid rgba(203,161,53,.4); border-radius:999px;
  background:rgba(15,4,24,.5);
}

.feature__bar{
  display:flex; flex-direction:column; gap:.35rem;
  padding:clamp(1.1rem,2.5vw,1.6rem);
}
.feature__eyebrow{
  font-size:.64rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--foil);
}
.feature__title{
  font-family:'Bodoni Moda',serif; font-size:clamp(1.35rem,1.1rem + .8vw,1.85rem);
  line-height:1.08; color:var(--parchment);
}
.feature__note{ font-size:.87rem; line-height:1.5; color:var(--paper-dim); }

@media(max-width:720px){
  .features{ grid-template-columns:1fr; }
}

/* ============================================================
   ABOUT
   ============================================================ */

.sec--about{ background:var(--vestment); }
.about{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,6vw,5rem); align-items:center;
}
.about__photo{
  margin:0; justify-self:center; width:min(100%,26rem);
}
.about__photo img{
  width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover; object-position:54% 22%;
  border-radius:12px;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.85);
}

.about__h{
  font-family:'Bodoni Moda',Georgia,serif;
  font-weight:400;
  font-size:clamp(2.1rem,1.2rem + 3.6vw,3.5rem);
  line-height:1.04; letter-spacing:-.02em;
  margin:0 0 1.75rem;
}
.about__h em{
  font-style:italic;
  background:linear-gradient(150deg,var(--foil-lit),var(--foil) 60%,var(--foil-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about__body p{ margin:0 0 1.1rem; color:var(--lilac); max-width:56ch; }
.about__body p:last-child{ margin-bottom:0; }

.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1.5rem;
  margin:2.5rem 0 0; padding-top:2rem;
  border-top:1px solid rgba(203,161,53,.28);
}
.facts__i dt{
  font-size:.63rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--foil); margin-bottom:.4rem;
}
.facts__i dd{
  margin:0; font-family:'Bodoni Moda',serif; font-size:1.08rem; line-height:1.3;
}

@media(max-width:860px){
  .about{ grid-template-columns:1fr; }
  .about__photo{ width:min(100%,20rem); }
}

/* ============================================================
   JOIN — the conversion moment
   ============================================================ */

.sec--join{
  background:linear-gradient(180deg,var(--vestment),var(--velvet) 46%,var(--vestment));
  overflow:hidden;
}
.joinglow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(48% 46% at 50% 42%, rgba(203,161,53,.16), transparent 70%);
}
.join{ position:relative; max-width:44rem; }

.card{
  background:linear-gradient(168deg, rgba(24,8,52,.94), rgba(15,4,24,.97));
  border:1px solid rgba(203,161,53,.42);
  border-radius:4px;
  padding:clamp(1.6rem,4vw,3rem);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.95), 0 0 70px -34px rgba(203,161,53,.4);
}

.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:560px){ .form__row{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.15rem; }
.field label{
  display:block; margin-bottom:.45rem;
  font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--foil);
}
.field__hint{
  font-weight:500; letter-spacing:.06em; text-transform:none;
  color:var(--paper-dim); font-size:.72rem;
}
.field input{
  width:100%;
  padding:.95rem 1rem;
  font-family:'Archivo',sans-serif; font-size:1rem;
  color:var(--parchment);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(183,156,245,.28);
  border-radius:3px;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder{ color:rgba(205,191,223,.45); }
.field input:hover{ border-color:rgba(183,156,245,.5); }
.field input:focus{
  outline:none;
  border-color:var(--foil);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(203,161,53,.2);
}
.field.is-bad input{ border-color:#F0899B; background:rgba(240,137,155,.08); }

.err{ margin:.4rem 0 0; font-size:.8rem; color:#F0899B; min-height:0; }
.err:empty{ display:none; }

.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__fine{
  margin:1rem 0 0; text-align:center;
  font-size:.76rem; line-height:1.55; color:var(--paper-dim);
}
.form__alert{ margin:1rem 0 0; text-align:center; font-size:.88rem; color:#F0899B; }
.form__alert:empty{ display:none; }

.spinner{
  display:none; width:1rem; height:1rem; flex:none;
  border:2px solid rgba(34,16,10,.3); border-top-color:#22100A;
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ rotate:360deg; } }
#submit.is-busy{ pointer-events:none; opacity:.75; }
#submit.is-busy .spinner{ display:block; }

.done{ text-align:center; padding-block:1rem; }
.done__seal{
  width:3.5rem; height:3.5rem; margin:0 auto 1.35rem;
  display:grid; place-items:center;
  font-size:1.35rem; color:var(--foil-lit);
  border:1px solid var(--foil); border-radius:50% 50% 6px 6px;
  box-shadow:0 0 40px -10px rgba(203,161,53,.7);
}
.done__h{
  font-family:'Bodoni Moda',serif; font-weight:400;
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);
  margin:0 0 .75rem;
}
.done__p{ margin:0 auto 1.75rem; max-width:38ch; color:var(--lilac); }

/* ============================================================
   FOLLOW
   ============================================================ */

.sec--follow{ background:var(--ink); }
.plats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:1rem;
}
.plat{
  --brand:var(--foil);
  position:relative; display:flex; flex-direction:column; gap:.15rem;
  padding:1.5rem;
  text-decoration:none;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(183,156,245,.16);
  border-radius:5px;
  overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.plat::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--brand); opacity:0;
  transition:opacity .3s var(--ease);
}
.plat:hover{ transform:translateY(-3px); background:rgba(255,255,255,.06); border-color:rgba(203,161,53,.45); }
.plat:hover::before{ opacity:1; }
.plat__ico{
  width:1.55rem; height:1.55rem; margin-bottom:.85rem;
  color:var(--paper-dim);
  transition:color .3s var(--ease);
}
.plat:hover .plat__ico{ color:var(--brand); }
.plat__n{ font-family:'Bodoni Moda',serif; font-size:1.22rem; line-height:1.2; }
.plat__h{ font-size:.82rem; color:var(--paper-dim); word-break:break-word; }

/* ============================================================
   SUPPORT
   ============================================================ */

.sec--support{ background:linear-gradient(180deg,var(--ink),var(--vestment)); }
.gives{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));
  gap:1.15rem;
}
.give{
  display:flex; flex-direction:column;
  padding:clamp(1.5rem,3vw,2.15rem);
  text-decoration:none;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(183,156,245,.18);
  border-radius:5px;
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.give:hover{ transform:translateY(-4px); border-color:rgba(203,161,53,.55); background:rgba(255,255,255,.06); }
.give--hi{
  border-color:rgba(203,161,53,.5);
  background:linear-gradient(165deg,rgba(203,161,53,.12),rgba(255,255,255,.03));
}
.give__k{
  font-size:.63rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--foil); margin-bottom:.7rem;
}
.give__n{
  font-family:'Bodoni Moda',serif;
  font-size:clamp(1.5rem,1.2rem + .9vw,1.95rem);
  line-height:1.1; margin-bottom:.7rem;
}
.give__p{ font-size:.92rem; line-height:1.6; color:var(--lilac); margin-bottom:1.5rem; }
.give__p strong{ color:var(--foil-lit); font-weight:700; }
.give__go{
  margin-top:auto;
  font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--foil-lit);
  display:inline-flex; align-items:center; gap:.5rem;
}
.give__go i{ font-style:normal; transition:transform .3s var(--ease); }
.give:hover .give__go i{ transform:translateX(4px); }

/* ============================================================
   CLOSING
   ============================================================ */

.sec--close{
  background:linear-gradient(180deg,var(--vestment),var(--ink));
  text-align:center;
}
.close__q{
  font-family:'Bodoni Moda',Georgia,serif;
  font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 2vw,2.5rem);
  line-height:1.3;
  max-width:22ch; margin:0 auto 2.25rem;
  color:var(--lilac);
}

/* ============================================================
   FOOTER
   ============================================================ */

.foot{ background:var(--ink); border-top:1px solid rgba(203,161,53,.25); }
.foot__in{
  display:grid; grid-template-columns:1fr 1.35fr;
  gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(3rem,5vw,4rem);
}
.foot__logo{
  height:clamp(3.25rem,7vw,4rem); width:auto;
  margin:0 0 .9rem;
  border-radius:9px;
  border:1px solid rgba(203,161,53,.3);
}
.foot__tag{
  margin:0; font-family:'Bodoni Moda',serif; font-style:italic;
  color:var(--paper-dim); font-size:.98rem;
}
/* Contact gets the wider track so the email sits on one line */
.foot__cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.foot__col h3{
  margin:0 0 .9rem;
  font-family:'Archivo',sans-serif;
  font-size:.65rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--foil);
}
/* break-word is a safety net — only breaks if a string truly can't fit,
   so the email stays whole wherever there's room for it */
.foot__col p{ margin:0 0 .6rem; font-size:.9rem; color:var(--paper-dim); line-height:1.6; overflow-wrap:break-word; }
.foot__col a{ text-decoration:none; transition:color .2s var(--ease); overflow-wrap:break-word; }
.foot__col a:hover{ color:var(--foil-lit); }

.foot__base{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  justify-content:space-between;
  padding-block:1.5rem;
  border-top:1px solid rgba(255,255,255,.07);
}
.foot__base p{ margin:0; font-size:.76rem; color:rgba(205,191,223,.65); }

@media(max-width:760px){
  .foot__in{ grid-template-columns:1fr; }
}
/* On phones the three link columns sit two-up with a firm gap so the
   Contact block can't crowd Watch. Contact spans the full row since its
   address and email need the width. */
@media(max-width:560px){
  .foot__cols{ grid-template-columns:1fr 1fr; gap:1.75rem 1.5rem; }
  .foot__col:first-child{ grid-column:1 / -1; }
}

/* ============================================================
   REVEAL
   ============================================================ */

.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.reveal.is-in{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}