/* ============================================================
   Family Unity Day standalone event site.
   GBCA design system: Fraunces headings, Sora body, the
   forest/bone/paper/clay/gold palette, kicker + .btn patterns
   from the main site. Freeform festival layout, mobile first.
   ============================================================ */
:root{
  --ink:#1c1a17; --ink-soft:#4d4942;
  --bone:#f4f1ea; --bone-d:#e7e1d4; --paper:#fdfcf9;
  --clay:#b8542f; --clay-dk:#8f3f22;
  --forest:#1f3a32; --forest-2:#2c4f44; --gold:#d8a23a;
  --gold-soft:#f3dcae;
  --line:rgba(28,26,23,.14);
  --maxw:1080px; --ease:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; background:#fff; }
body{ margin:0 auto; font-family:'Sora',sans-serif; background:var(--paper);
  color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:'Fraunces',serif; font-weight:500; line-height:1.08;
  letter-spacing:-.02em; }
::selection{ background:var(--clay); color:#fff; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--clay);
  outline-offset:3px; }
.band--forest a:focus-visible, .ctaband a:focus-visible,
.hero a:focus-visible{ outline-color:var(--gold); }

.skip{ position:absolute; left:-999px; background:var(--forest); color:#fff;
  padding:.8rem 1.3rem; z-index:999; }
.skip:focus{ left:0; top:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.4rem; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 1.4rem; }
@media(min-width:760px){
  .wrap{ padding:0 2.5rem; }
  .wrap-narrow{ padding:0 2.5rem; }
}

.kicker{ display:inline-flex; align-items:center; gap:.7rem;
  font-size:.72rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--clay-dk); }
.kicker::before{ content:""; width:2.4rem; height:1px; background:var(--clay); }
.kicker--on-dark{ color:#e9b96a; }
.kicker--on-dark::before{ background:var(--gold); }

.btn{ display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.9rem; font-size:.95rem; font-weight:600; cursor:pointer;
  text-decoration:none; border:2px solid transparent; min-height:48px;
  transition:transform .35s var(--ease),background .35s var(--ease); }
.btn .ar{ transition:transform .3s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn-solid{ background:var(--clay); color:#fff; }
.btn-solid:hover{ transform:translateY(-3px); background:var(--clay-dk); }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ transform:translateY(-3px); background:#e5b453; }

/* ---------- header lockup ---------- */
.lockup{ position:sticky; top:0; z-index:100;
  background:rgba(253,252,249,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); }
.lockup__inner{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; max-width:var(--maxw); margin:0 auto; padding:.85rem 1.4rem; }
@media(min-width:760px){ .lockup__inner{ padding:1rem 2.5rem; } }
.lockup__brands{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.brand{ font-family:'Fraunces',serif; font-size:1.25rem; font-weight:600;
  color:var(--ink); }
.brand i{ font-style:normal; color:var(--clay); }
.lockup__x{ color:var(--gold); font-weight:600; }
.lockup__uhp{ font-size:.8rem; font-weight:600; letter-spacing:.04em;
  color:var(--ink-soft); }
.langswitch{ display:flex; align-items:center; gap:.5rem; font-size:.88rem;
  color:var(--ink-soft); flex-shrink:0; }
.langswitch a{ text-decoration:none; color:var(--ink); font-weight:600;
  padding:.45rem .6rem; min-height:44px; display:inline-flex;
  align-items:center; }
.langswitch a[aria-current="page"]{ color:var(--clay-dk);
  box-shadow:inset 0 -2px 0 var(--clay); }

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--forest); color:var(--bone);
  overflow:hidden; }
.hero__photo{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  pointer-events:none; }
.hero::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(31,58,50,.5) 0%,
    rgba(31,58,50,.66) 45%, rgba(31,58,50,.88) 100%); }
.hero__inner{ position:relative; z-index:1; max-width:var(--maxw);
  margin:0 auto; padding:2.6rem 1.4rem 2.8rem; }
@media(min-width:760px){ .hero__inner{ padding:4.5rem 2.5rem 5rem; } }
.hero h1{ font-size:clamp(2.7rem,9vw,5rem); color:var(--bone);
  margin:.9rem 0 1rem; }
.hero__badge{ display:inline-block; background:var(--gold); color:var(--ink);
  font-size:.98rem; font-weight:500; line-height:1.45;
  padding:.65rem 1rem; border-radius:6px; max-width:34ch;
  box-shadow:0 2px 0 var(--clay-dk); }
.hero__badge strong{ font-weight:700; }
.hero__date{ margin:1.3rem 0 1.6rem; font-size:1.05rem; line-height:1.5;
  color:rgba(244,241,234,.92); }
.hero__date strong{ color:#fff; font-size:1.15rem; }
.hero__cta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.hero__cta-note{ font-size:.85rem; color:rgba(244,241,234,.85); max-width:24ch; }

/* ---------- festival graphics ---------- */
.bunting{ line-height:0; }
.bunting svg{ display:block; }
.bunting--hero{ position:absolute; top:0; left:0; right:0; z-index:1; }
.band--bunted{ position:relative; padding-top:3.4rem; }
@media(min-width:760px){ .band--bunted{ padding-top:4.4rem; } }
.bunting--band{ position:absolute; top:0; left:0; right:0; }
.hero__burst{ position:absolute; z-index:2; top:2.4rem; right:4vw;
  width:clamp(88px,14vw,132px); transform:rotate(-11deg);
  filter:drop-shadow(0 4px 10px rgba(28,26,23,.35)); }
.hero__burst svg{ width:100%; height:auto; display:block; }
.hero__burst text{ font-family:'Fraunces',serif; font-weight:700;
  font-size:29px; fill:var(--ink); }
html[lang="es"] .hero__burst text{ font-size:21px; letter-spacing:.5px; }
@media(max-width:759px){
  .hero__burst{ width:86px; top:3rem; right:.9rem; }
  .hero h1{ padding-right:92px; }
  .hero .kicker{ display:block; padding-right:96px; }
}
.scallop{ height:16px; background-repeat:repeat-x;
  background-size:32px 16px; }
.scallop--clay{ background-color:var(--paper);
  background-image:radial-gradient(circle at 16px 16px, var(--clay) 15px, transparent 15.8px); }
.scallop--bone{ background-color:var(--clay);
  background-image:radial-gradient(circle at 16px 16px, var(--bone-d) 15px, transparent 15.8px); }
.scallop--forest{ background-color:var(--bone-d);
  background-image:radial-gradient(circle at 16px 16px, var(--forest) 15px, transparent 15.8px); }
.scallop--paper{ background-color:var(--forest);
  background-image:radial-gradient(circle at 16px 16px, var(--paper) 15px, transparent 15.8px); }

/* ---------- bands ---------- */
.band{ padding:2.6rem 0; }
@media(min-width:760px){ .band{ padding:3.6rem 0; } }
.band--paper{ background:var(--paper); }
.band--bone{ background:var(--bone-d); }
.band--forest{ background:var(--forest); color:var(--bone); }
.band h2{ font-size:clamp(1.9rem,5.5vw,2.7rem); color:var(--forest);
  margin:.9rem 0 1.3rem; }
.band--forest h2{ color:var(--bone); }
.band--forest a{ color:#e9b96a; }

/* ---------- what's happening cards ---------- */
.cards{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:.6rem; }
@media(min-width:760px){ .cards{ grid-template-columns:1fr 1fr; gap:1.3rem; } }
.card{ background:var(--bone); border:1px solid var(--line); border-radius:10px;
  padding:1.4rem 1.4rem 1.5rem; position:relative; }
.card--gold{ background:var(--gold-soft); border-color:var(--gold);
  border-width:2px; }
.card__num{ font-family:'Fraunces',serif; font-size:.95rem; font-weight:600;
  color:var(--clay-dk); display:inline-flex; width:2rem; height:2rem;
  align-items:center; justify-content:center; border:1.5px solid var(--gold);
  border-radius:50%; background:#fff; position:absolute;
  top:1.15rem; right:1.15rem; }
.card__icon{ display:block; width:62px; height:62px; margin:.15rem 0 .85rem; }
.card__icon svg{ width:100%; height:100%; display:block; }
.card h3{ font-size:1.25rem; margin-bottom:.45rem; color:var(--forest); }
.card p{ font-size:.95rem; color:var(--ink-soft); }
.card--gold h3{ color:var(--clay-dk); }
.card--gold p{ color:var(--ink); }
.free-note{ margin-top:1.5rem; font-family:'Fraunces',serif; font-style:italic;
  font-size:1.12rem; color:var(--clay-dk); }

/* ---------- mid-page CTA band ---------- */
.ctaband{ background:var(--clay); color:#fff; padding:2.6rem 0;
  background-image:
    radial-gradient(5px 5px at 8% 22%, rgba(216,162,58,.85) 98%, transparent),
    radial-gradient(4px 4px at 18% 74%, rgba(244,241,234,.55) 98%, transparent),
    radial-gradient(6px 6px at 30% 16%, rgba(244,241,234,.4) 98%, transparent),
    radial-gradient(4px 4px at 43% 82%, rgba(216,162,58,.8) 98%, transparent),
    radial-gradient(5px 5px at 57% 24%, rgba(244,241,234,.5) 98%, transparent),
    radial-gradient(4px 4px at 68% 68%, rgba(216,162,58,.85) 98%, transparent),
    radial-gradient(6px 6px at 80% 18%, rgba(244,241,234,.45) 98%, transparent),
    radial-gradient(4px 4px at 90% 60%, rgba(216,162,58,.8) 98%, transparent),
    radial-gradient(5px 5px at 96% 30%, rgba(244,241,234,.5) 98%, transparent); }
.ctaband h2{ font-size:clamp(1.7rem,5vw,2.3rem); color:#fff;
  margin-bottom:.5rem; }
.ctaband p{ max-width:52ch; margin-bottom:1.3rem;
  color:rgba(255,255,255,.92); }

/* ---------- resources ---------- */
.resources{ display:grid; grid-template-columns:1fr; gap:1.8rem;
  align-items:center; }
@media(min-width:900px){ .resources{ grid-template-columns:7fr 5fr;
  gap:3rem; } }
.resources__intro{ color:var(--ink-soft); max-width:56ch;
  margin-bottom:1.1rem; }
.resources__list{ list-style:none; display:grid; gap:.9rem; }
.resources__list li{ padding:.95rem 1.1rem; background:var(--paper);
  border-left:4px solid var(--gold); border-radius:0 8px 8px 0;
  font-size:.97rem; display:flex; align-items:flex-start; gap:.85rem; }
.res-ico{ flex:0 0 36px; width:36px; height:36px; margin-top:.1rem; }
.res-ico svg{ width:100%; height:100%; display:block; }
.resources__list strong{ color:var(--forest); }
.resources__media img{ border-radius:12px; width:100%; height:100%;
  object-fit:cover; box-shadow:0 10px 30px rgba(28,26,23,.16); }

/* ---------- when & where ---------- */
.where__grid{ display:grid; grid-template-columns:1fr; gap:1.2rem;
  margin:.4rem 0 1.4rem; }
@media(min-width:700px){ .where__grid{ grid-template-columns:1fr 1fr; } }
.where__block{ background:var(--forest-2); border-radius:10px;
  padding:1.3rem 1.4rem; }
.where__block h3{ font-size:1rem; text-transform:uppercase;
  letter-spacing:.14em; font-family:'Sora',sans-serif; font-weight:600;
  color:#e9b96a; margin-bottom:.6rem; }
.where__block p{ color:rgba(244,241,234,.94); }
.where__block strong{ color:#fff; }
.where__maplink{ display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.7rem; font-weight:600; text-decoration:none;
  border-bottom:1.5px solid var(--gold); padding-bottom:.1rem;
  min-height:44px; }
.where__note{ color:rgba(244,241,234,.85); font-size:.95rem; max-width:64ch;
  margin-top:.5rem; }

/* ---------- RSVP section ---------- */
.rsvp__intro{ color:var(--ink-soft); max-width:58ch; margin-bottom:1.6rem; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:rgba(244,241,234,.85); padding:2.2rem 0;
  font-size:.9rem; }
.foot .lockup__brands{ margin-bottom:.8rem; }
.brand--on-dark{ color:var(--bone); }
.foot .lockup__uhp{ color:rgba(244,241,234,.7); }
.foot a{ color:#e9b96a; }
.foot p+p{ margin-top:.4rem; }

/* ============================================================
   RSVP form module (.fud-*), markup emitted by /js/fud.js
   ============================================================ */
.fud-root[data-fud-mode="form"] .fud-success{ display:none; }
.fud-root[data-fud-mode="success"] .fud-welcome,
.fud-root[data-fud-mode="success"] .fud-form{ display:none; }

.fud-welcome h2{ font-size:1.5rem; color:var(--forest); margin-bottom:.4rem; }
.fud-welcome h2 em{ color:var(--clay-dk); }
.fud-welcome p{ color:var(--ink-soft); font-size:.95rem; max-width:56ch;
  margin-bottom:1.4rem; }

.fud-form{ background:var(--bone); border:1px solid var(--line);
  border-radius:12px; padding:1.5rem 1.3rem; }
@media(min-width:700px){ .fud-form{ padding:2rem 2rem 1.8rem; } }
.fud-section{ border:0; margin-bottom:1.5rem; }
.fud-section__legend{ font-family:'Fraunces',serif; font-size:1.12rem;
  color:var(--forest); margin-bottom:.9rem; }
.fud-row{ display:grid; grid-template-columns:1fr; gap:.9rem;
  margin-bottom:.9rem; }
@media(min-width:640px){ .fud-row{ grid-template-columns:1fr 1fr; } }
.fud-fld{ display:flex; flex-direction:column; gap:.35rem;
  margin-bottom:.9rem; }
.fud-row .fud-fld{ margin-bottom:0; }
.fud-lbl{ font-size:.85rem; font-weight:600; }
.fud-req{ color:var(--clay); margin-left:.2rem; }
.fud-opt{ color:var(--ink-soft); font-weight:400; }
.fud-input,.fud-select{ font-family:'Sora',sans-serif; font-size:1rem;
  padding:.75rem .85rem; border:1.5px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink); min-height:48px; width:100%; }
.fud-input:focus,.fud-select:focus{ outline:2px solid var(--clay);
  outline-offset:1px; border-color:var(--clay); }
.fud-fld[data-error="true"] .fud-input,
.fud-fld[data-error="true"] .fud-select{ border-color:var(--clay-dk);
  background:#fdf1ec; }
.fud-err{ display:none; font-size:.8rem; color:var(--clay-dk);
  font-weight:600; }
.fud-fld[data-error="true"] .fud-err{ display:block; }
.fud-checkgrid{ display:grid; grid-template-columns:1fr; gap:.5rem; }
@media(min-width:640px){ .fud-checkgrid{ grid-template-columns:1fr 1fr; } }
.fud-check{ display:flex; align-items:center; gap:.6rem; background:#fff;
  border:1.5px solid var(--line); border-radius:8px; padding:.65rem .8rem;
  cursor:pointer; font-size:.92rem; min-height:48px; }
.fud-check:has(input:checked){ border-color:var(--gold); background:var(--gold-soft); }
.fud-check input{ width:1.15rem; height:1.15rem; accent-color:var(--clay);
  flex-shrink:0; }
.fud-submit-row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:.4rem; }
.fud-submit{ display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.9rem; font-size:.98rem; font-weight:600;
  font-family:'Sora',sans-serif; cursor:pointer; border:2px solid transparent;
  background:var(--clay); color:#fff; min-height:48px;
  transition:transform .35s var(--ease),background .35s var(--ease); }
.fud-submit:hover{ transform:translateY(-3px); background:var(--clay-dk); }
.fud-submit:disabled{ opacity:.6; transform:none; cursor:wait; }
.fud-submit-note{ font-size:.85rem; color:var(--ink-soft); }
.fud-alert{ display:none; margin-top:1rem; padding:.8rem 1rem;
  background:#fdf1ec; border-left:4px solid var(--clay-dk);
  color:var(--clay-dk); font-weight:600; font-size:.92rem; border-radius:0 8px 8px 0; }
.fud-alert.is-shown{ display:block; }

.fud-success{ background:var(--forest); color:var(--bone); border-radius:12px;
  padding:2.2rem 1.8rem; }
.fud-success__kicker{ display:inline-block; font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
  background:var(--gold); padding:.3rem .7rem; border-radius:4px;
  margin-bottom:1rem; }
.fud-success h2{ color:var(--bone); font-size:1.9rem; margin-bottom:.6rem; }
.fud-success p{ color:rgba(244,241,234,.9); max-width:52ch;
  margin-bottom:1.2rem; }
.fud-success__event{ background:var(--forest-2); border-radius:8px;
  padding:1rem 1.2rem; line-height:1.8; }
.fud-success__event strong{ display:block; color:#e9b96a;
  font-family:'Fraunces',serif; font-size:1.1rem; margin-bottom:.2rem; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn,.fud-submit,.btn .ar{ transition:none; }
}