/* ==========================================================================
   In Great Company — components.
   Plain-CSS recreations of the original compiled design system
   (InGreatCompanyDesignSystem_2c43b4.*), matched to the live render.
   ========================================================================== */

/* ---- Layout helpers ------------------------------------------------------- */
.container{max-width:var(--width-page);margin:0 auto}
.section{padding:var(--section-y) var(--gutter-lg)}
.section--page{background:var(--surface-page)}
.section--card{background:var(--surface-card)}
/* Two card bands touching (the voices section between them can be absent) read
   as one continuous slab — the surfaces sit within ~5% luminance of each
   other. A hairline is enough to say "new section" without a colour change. */
.section--card + .section--card{border-top:1px solid var(--border-hairline)}
.section--sunk{background:var(--surface-sunk)}
.section--rose{background:var(--surface-rose)}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.cluster{display:flex;gap:var(--space-3);flex-wrap:wrap}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--gap-card)}
.gallery__item{margin:0;aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;background:var(--cream-200);box-shadow:var(--shadow-sm)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-soft)}
.gallery__item:hover img{transform:scale(1.04)}
.mt-8{margin-top:var(--space-8)}

/* ---- NavBar --------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:var(--z-sticky);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  height:var(--nav-height);padding:0 var(--gutter-lg);
  transition:background var(--dur-base) var(--ease-soft),backdrop-filter var(--dur-base) var(--ease-soft);
}
.nav.is-scrolled{background:var(--glass-fill);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass)}
.nav__logo{display:inline-flex;align-items:center;border:0;background:none;cursor:pointer;padding:0}
.nav__logo img{height:44px;width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:var(--space-6)}
.nav__link{
  color:var(--text-body);text-decoration:none;
  font-size:14.5px;font-weight:var(--weight-medium);letter-spacing:.01em;
  padding:0 0 3px;border:0;border-bottom:2px solid transparent;
  background:none;cursor:pointer;transition:var(--transition-color)
}
.nav__link:hover{color:var(--text-strong)}
.nav__link.is-active{color:var(--brand-on-dark);border-bottom-color:var(--brand-on-dark)}

/* ---- Button --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:15px;line-height:1;
  padding:13px 26px;border-radius:var(--radius-pill);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:var(--transition-base)
}
.btn:hover{transform:var(--hover-lift)}
.btn:active{transform:var(--press-scale)}
.btn--sm{padding:9px 18px;font-size:13px}
.btn--lg{padding:17px 34px;font-size:16px}
.btn--full{width:100%}
.btn .icon,.footer__link .icon{flex:0 0 auto}

/* variants (default = filled rose, deep-ink text for AA contrast) */
.btn--default{background:var(--brand-primary);color:var(--ink-on-rose)}
.btn--default:hover{background:var(--brand-primary-hover);color:var(--ink-on-rose)}
.btn--outline{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.btn--outline:hover{background:rgba(255,250,240,.08);color:var(--text-strong)}
.btn--ghost{background:transparent;color:var(--brand-on-dark);border-color:transparent}
.btn--ghost:hover{background:rgba(239,46,159,.12);color:var(--brand-on-dark)}
.btn--inverse{background:var(--cream-100);color:var(--text-link)}
.btn--inverse:hover{background:#fff;color:var(--brand-primary-press)}

/* ---- Tag / chip ----------------------------------------------------------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-size:12.5px;font-weight:var(--weight-medium);letter-spacing:.01em;
  padding:6px 13px;border-radius:var(--radius-pill);border:1px solid transparent
}
.tag--outlined{background:transparent;color:var(--text-muted);border-color:var(--text-muted)}
.tag--cyan{background:var(--cyan-100);color:var(--cyan-800)}
.tag--rose{background:var(--rose-100);color:var(--rose-800)}
.tag--gold{background:var(--gold-100);color:var(--gold-800)}

/* ---- ScriptAccent (pink Sisterhood word inside headings) ------------------ */
.igc-script{
  color:var(--brand-script);
  display:inline-block;margin:0 .12em;vertical-align:baseline;
  font-size:var(--text-script-l)
}
.igc-script--xl{font-size:var(--text-script-xl)}

/* ---- SectionHeading ------------------------------------------------------- */
.section-heading{text-align:left;max-width:none}
.section-heading--center{text-align:center}
.section-heading__eyebrow{margin-bottom:var(--space-3)}
.section-heading__title{
  font-family:var(--font-display);font-weight:var(--weight-medium);
  font-size:var(--text-display-l);line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);color:var(--text-strong);margin:0
}
.section-heading--xl .section-heading__title{font-size:var(--text-display-xl)}
.section-heading__desc{
  font-size:var(--text-body-l);line-height:var(--leading-body);
  color:var(--text-muted);max-width:var(--measure-narrow);margin-top:var(--space-4)
}
.section-heading--center .section-heading__desc{margin-left:auto;margin-right:auto}

/* ---- EventCard (vertical) ------------------------------------------------- */
.event-card{
  border-radius:var(--radius-lg);padding:var(--pad-card-tight);
  background:var(--surface-card);border:1px solid transparent;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:var(--space-4);align-items:stretch;text-align:left;
  cursor:pointer;transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft)
}
.event-card:hover{transform:var(--hover-lift);box-shadow:var(--shadow-lift)}
.event-card__media{
  position:relative;background:var(--cream-200);border-radius:var(--radius-md);
  overflow:hidden;aspect-ratio:3/2;flex:0 0 auto;display:grid;place-items:center
}
.event-card__media img{width:100%;height:100%;object-fit:cover}
/* Branded photo stand-in (no uploaded image) */
.media-ph{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.media-ph__mark{font-family:var(--font-script);font-size:clamp(64px,14vw,132px);line-height:1;color:rgba(255,250,240,.18)}
.media-ph--cyan{background:linear-gradient(150deg,#155a60 0%,#0A4247 72%)}
.media-ph--rose{background:linear-gradient(150deg,#5a2148 0%,#0A4247 72%)}
.media-ph--gold{background:linear-gradient(150deg,#4a4318 0%,#0A4247 72%)}
.event-card__status{position:absolute;top:12px;left:12px}
.event-card__body{display:flex;flex-direction:column;gap:var(--space-3);flex:1 1 0;padding:4px 6px 8px}
.event-card__meta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.event-card__date{color:var(--brand-on-dark)}
.event-card__title{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:25px;line-height:1.14;letter-spacing:-.015em;color:var(--text-strong);margin:0}
.event-card__blurb{font-size:var(--text-body-s);line-height:1.6;color:var(--text-muted);margin:0}

/* ---- Past gatherings (collapsible) --------------------------------------- */
.past-gatherings{border-top:1px solid var(--border-hairline);padding-top:var(--space-6)}
.past-gatherings__summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:var(--space-2)}
.past-gatherings__summary::-webkit-details-marker{display:none}
.past-gatherings__title{
  display:flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-display);font-weight:var(--weight-medium);
  font-size:var(--text-heading-l);color:var(--text-strong)
}
.past-gatherings__title::after{content:"▸";margin-left:auto;color:var(--text-subtle);font-size:14px;transition:transform var(--dur-slow) var(--ease-soft)}
.past-gatherings[open] .past-gatherings__title::after{transform:rotate(90deg)}
.past-gatherings__count{
  font-family:var(--font-body);font-size:var(--text-body-s);font-weight:var(--weight-semibold);
  color:var(--text-muted);background:var(--border-hairline);border-radius:999px;padding:1px 10px
}
.past-gatherings__list{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-6)}
/* Past cards read as gently archived, not current. */
.past-gatherings__list .event-card{opacity:.72}
.past-gatherings__list .event-card:hover{opacity:1}

/* ---- Quote ---------------------------------------------------------------- */
/* Column layout so a short testimonial pins its citation to the card's floor
   instead of leaving it floating wherever the quote happened to end. */
.quote{
  margin:0;background:var(--surface-card);color:var(--text-body);
  border-radius:var(--radius-xl);padding:var(--space-8);text-align:left;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;justify-content:space-between;height:100%
}
/* --surface-deep is darker than the --surface-sunk band these sit on, which
   read as a hole punched between its two neighbours. Lifted instead. */
.quote--deep{background:var(--surface-accent)}
.quote__body{
  margin:0;font-family:var(--font-display);font-style:italic;font-weight:var(--weight-regular);
  font-size:clamp(22px,2.4vw,30px);line-height:1.34;letter-spacing:-.01em;color:var(--text-strong);max-width:30ch
}
.quote__cite{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.quote__avatar{
  width:36px;height:36px;flex:0 0 auto;border-radius:var(--radius-circle);overflow:hidden;
  display:grid;place-items:center;background:var(--cyan-200);color:var(--teal-700);
  font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:13px;letter-spacing:.02em
}
.quote__avatar img{width:100%;height:100%;object-fit:cover}
.quote__name{display:block;font-size:14px;font-weight:var(--weight-semibold);color:var(--text-strong)}
.quote__detail{display:block;font-size:12.5px;color:var(--text-muted)}

/* ---- Hero ----------------------------------------------------------------- */
.hero{background:var(--wash-sunrise);padding:88px var(--gutter-lg) 96px}
/* The hero is index.html's and app.js hides it off the home route. Stated
   explicitly so adding a `display` above cannot quietly un-hide it. */
.hero[hidden]{display:none}
.hero__grid{max-width:var(--width-page);margin:0 auto;display:grid;grid-template-columns:1.08fr .92fr;gap:var(--space-10);align-items:center}
.hero__title{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-display-xl);line-height:var(--leading-display);letter-spacing:var(--tracking-display);margin:var(--space-4) 0 0;text-wrap:pretty}
.hero__lead{font-size:var(--text-body-l);line-height:var(--leading-body);color:var(--text-muted);max-width:42ch;margin:var(--space-6) 0 0}
.hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-7);flex-wrap:wrap}
.hero__media{aspect-ratio:4/5;background:var(--cyan-200);border-radius:var(--radius-blob);overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-blob)}

/* ---- Prose lead ----------------------------------------------------------- */
.prose-lead{font-size:var(--text-body-l);line-height:var(--leading-body);color:var(--text-muted);max-width:var(--measure-prose);margin-top:var(--space-5)}

/* ---- CTA band ------------------------------------------------------------- */
.cta-band{max-width:840px;margin:0 auto;text-align:center}
.cta-band__title{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-display-l);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:#fff;margin:0}
.cta-band__lead{font-size:var(--text-body-l);line-height:var(--leading-body);color:#fff;max-width:44ch;margin:var(--space-5) auto 0}
.cta-band__actions{display:flex;gap:var(--space-3);justify-content:center;margin-top:var(--space-7)}

/* ---- Footer --------------------------------------------------------------- */
.footer{background:var(--surface-deep);color:var(--cream-100);padding:var(--space-11) var(--gutter-lg) var(--space-8)}
.footer__grid{max-width:var(--width-page);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-9);align-items:start}
.footer__logo{height:84px;width:auto}
.footer__blurb{margin-top:var(--space-5);font-size:var(--text-body-m);line-height:var(--leading-body);color:var(--cyan-200);max-width:34ch}
.footer__col{display:flex;flex-direction:column;gap:var(--space-3)}
.footer__head{color:var(--cyan-300)}
.footer__link{display:inline-flex;align-items:center;gap:10px;padding:0;color:var(--cream-100);text-decoration:none;font-size:14.5px}
.footer__link:hover{color:var(--cyan-200)}
.footer__bar{max-width:var(--width-page);margin:var(--space-9) auto 0;padding-top:var(--space-5);border-top:1px solid rgba(255,250,240,.16);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-size:12.5px;color:var(--teal-200)}
.footer__note{opacity:.75;letter-spacing:.02em}
.footer__legal{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--cream-100);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;transition:var(--transition-color)}
.footer__legal:hover{color:var(--cyan-200)}
.footer__legal:focus-visible{outline:2px solid var(--cyan-300);outline-offset:3px;border-radius:3px}

/* ---- EventCard (horizontal, gatherings list) ------------------------------ */
/* The media used to be a square at 34% of the container, which in a 1200px
   page is a 388px side and forced every row to 430px tall against ~135px of
   text. A fixed landscape thumbnail lets the copy set the height instead. */
.event-card--row{flex-direction:row;gap:var(--space-5);align-items:stretch}
.event-card--row .event-card__media{aspect-ratio:4/3;flex:0 0 220px;align-self:stretch}
.event-card--row .event-card__body{padding:4px 4px 4px 0;justify-content:space-between}

.gathering-list{display:flex;flex-direction:column;gap:var(--space-5)}

/* ---- Loading skeleton ----------------------------------------------------- */
/* Holds the calendar's shape while /api/events is in flight, so the section
   cannot flash "nothing scheduled" before it knows. Decorative only — the
   surrounding live region announces the result, not the wait. The global
   prefers-reduced-motion rule in base.css flattens the pulse. */
.skel-card{
  border-radius:var(--radius-lg);padding:var(--pad-card-tight);background:var(--surface-card);
  display:flex;flex-direction:column;gap:var(--space-4);
  animation:skel-pulse 1.6s var(--ease-soft) infinite alternate
}
.skel-card__media{
  background:var(--cream-200);border-radius:var(--radius-md);aspect-ratio:3/2;flex:0 0 auto
}
.skel-card__body{display:flex;flex-direction:column;gap:var(--space-3);flex:1 1 0;padding:4px 6px 8px}
.skel-line{display:block;height:11px;border-radius:var(--radius-pill);background:var(--cream-200)}
.skel-line--meta{width:42%}
.skel-line--title{width:78%;height:20px}
.skel-line--text{width:62%}
.skel-card--row{flex-direction:row;gap:var(--space-5)}
.skel-card--row .skel-card__media{aspect-ratio:4/3;flex:0 0 220px;align-self:stretch}
.skel-card--row .skel-card__body{padding:4px 4px 4px 0;justify-content:center}
/* Stagger so the three read as one group breathing, not three separate blinks. */
.skel-card:nth-child(2){animation-delay:.18s}
.skel-card:nth-child(3){animation-delay:.36s}
@keyframes skel-pulse{from{opacity:1}to{opacity:.55}}

/* ---- Empty state ---------------------------------------------------------- */
/* The calendar with nothing in it, in both of its flavours. A designed slot
   rather than a stray sentence: an empty calendar is a real state here, not
   an error, and it still has to offer somewhere to go. */
.empty-state{
  background:var(--surface-sunk);border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl);padding:var(--space-9) var(--space-7);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4)
}
.empty-state__title{
  margin:0;font-family:var(--font-display);font-weight:var(--weight-medium);
  font-size:clamp(20px,3vw,26px);line-height:1.25;letter-spacing:var(--tracking-display);
  color:var(--text-strong)
}
.empty-state__note{
  margin:0;font-size:var(--text-body-l);line-height:var(--leading-body);
  color:var(--text-muted);max-width:46ch
}
.empty-state__actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-2)
}

/* ---- Touch targets --------------------------------------------------------
   --touch-min has been declared in tokens.css and consumed by nothing. These
   five controls all sat under it (21–36px). The nav links and the seat stepper
   grow via a centred pseudo-element rather than padding, because their visual
   size is the design: padding would drag the active underline off the word and
   resize the stepper pills. The footer links are in columns where real padding
   is free, so they take it — and the column gap shrinks to keep neighbouring
   targets from overlapping each other. */
.nav__link,.nav__logo,.seats__btn{position:relative}
.nav__link::after,.nav__logo::after,.seats__btn::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:100%;min-width:var(--touch-min);height:var(--touch-min)
}
.footer__col{gap:2px}
.footer__head{margin-bottom:6px}
.footer__link{padding-block:10px}
.footer__legal{display:inline-flex;align-items:center;min-height:var(--touch-min)}

/* ---- Back link ------------------------------------------------------------ */
.back-link{display:inline-block;font-size:14px;text-decoration:none;letter-spacing:.01em;color:var(--text-body);background:none;border:0;padding:0;cursor:pointer;transition:var(--transition-color)}
.back-link:hover{color:var(--brand-on-dark)}

/* ---- Event detail --------------------------------------------------------- */
.event-detail{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--space-9);margin-top:var(--space-6);align-items:start}
.event-detail__media{position:relative;aspect-ratio:3/2;max-height:380px;background:var(--cream-200);border-radius:var(--radius-xl);display:grid;place-items:center;padding:24px;text-align:center;overflow:hidden}
.event-detail__media img{width:100%;height:100%;object-fit:cover}
.event-detail__meta{color:var(--brand-on-dark);margin-top:var(--space-6)}
.event-detail__title{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-display-l);line-height:var(--leading-display);letter-spacing:var(--tracking-display);margin:var(--space-3) 0 0}
.event-detail__prose{font-size:var(--text-body-l);line-height:var(--leading-body);color:var(--text-muted);max-width:var(--measure-prose);margin-top:var(--space-5)}
.event-detail__tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-6)}

/* ---- Ticket / RSVP panel -------------------------------------------------- */
.ticket{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-7);position:sticky;top:96px}
.ticket__head{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(22px,6vw,30px);line-height:1.12;margin:var(--space-3) 0 0;color:var(--text-strong)}
.ticket__note{font-size:var(--text-body-s);line-height:1.7;color:var(--text-muted);margin:var(--space-3) 0 0}
.seats{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-3) var(--space-4);background:var(--surface-sunk);border-radius:var(--radius-pill)}
.seats__label{font-size:14px;font-weight:var(--weight-medium)}
.seats__ctrls{display:flex;align-items:center;gap:var(--space-4)}
.seats__btn{width:34px;height:34px;border-radius:var(--radius-pill);border:1px solid var(--border-hairline);background:var(--surface-card);color:var(--text-strong);font-family:var(--font-body);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:var(--transition-color)}
.seats__btn:hover{background:var(--rose-100);color:var(--brand-primary)}
.seats__btn:disabled{opacity:.4;cursor:not-allowed}
.seats__btn:disabled:hover{background:var(--surface-card);color:var(--text-strong);transform:none}
.seats__qty{font-size:16px;font-weight:var(--weight-semibold);min-width:14px;text-align:center}
.ticket__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--space-5);font-size:15px}
.ticket__total-label{color:var(--text-muted)}
.ticket__total-val{font-family:var(--font-display);font-size:clamp(20px,5.5vw,26px);color:var(--text-strong)}
.ticket__actions{margin-top:var(--space-5)}
.ticket__fine{font-size:12px;line-height:1.6;color:var(--text-muted);margin:var(--space-4) 0 0;text-align:center}
.ticket__confirm-actions{margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}

/* ---- Page hero (privacy) -------------------------------------------------- */
.story-hero{background:var(--wash-sunrise);padding:80px var(--gutter-lg)}
.story-hero__inner{max-width:900px;margin:0 auto}
.story-hero__title{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-display-xl);line-height:var(--leading-display);letter-spacing:var(--tracking-display);margin:var(--space-4) 0 0;text-wrap:pretty}
.story-hero__lead{font-size:var(--text-body-l);line-height:var(--leading-body);color:var(--text-muted);max-width:var(--measure-prose);margin-top:var(--space-6)}

/* ---- Legal (privacy policy) ----------------------------------------------- */
.legal{max-width:var(--measure-prose);margin:0 auto}
.legal h2{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-heading-m);color:var(--text-strong);margin:var(--space-8) 0 var(--space-3)}
.legal p,.legal li{font-size:var(--text-body-m);line-height:var(--leading-body);color:var(--text-body)}
.legal p{margin:var(--space-3) 0 0}
.legal ul{margin:var(--space-3) 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--space-2)}
.legal a{color:var(--text-link)}
.legal a:hover{color:var(--text-link-hover)}
.legal__updated{font-size:var(--text-body-s);color:var(--text-muted);margin-top:var(--space-4)}

/* ---- Responsive (matches the live hand-tuned breakpoint) ------------------ */
@media (max-width:820px){
  :root{
    --gutter-lg:20px;--section-y:52px;--space-10:44px;--space-11:52px;--gap-card:16px;
    --nav-height:60px;
    --text-display-xl:clamp(30px,8vw,44px);--text-display-l:clamp(26px,7vw,38px);
    --text-script-xl:72px;--text-script-l:52px;
  }
  /* Keep the sticky nav to one compact row — never let it stack and eat the viewport. */
  .nav{gap:var(--space-3);flex-wrap:nowrap}
  .nav__links{gap:var(--space-4);flex-wrap:nowrap;white-space:nowrap;min-width:0}
  .nav__links .btn{display:none}   /* redundant on mobile — the links reach every page */
  .nav__logo img{height:36px}
  .nav__link{font-size:14px}
  .hero__grid,.grid-3,.footer__grid,.event-detail{grid-template-columns:1fr}
  .hero__media{max-width:300px;margin-left:auto;margin-right:auto}
  .ticket{position:static;top:auto}
  .event-card--row,.skel-card--row{flex-direction:column}
  .event-card--row .event-card__media,.skel-card--row .skel-card__media{aspect-ratio:3/2;flex:0 0 auto}
  /* Stacked, the body drives the card's height, so content stacks from the top
     and the slack from the equal-height rule below collects at the bottom.
     (Wide screens keep space-between, where the 220px media sets the height.) */
  .event-card--row .event-card__body{padding:4px 6px 8px;justify-content:flex-start}

  /* Once the cards stack, each one sizes to its own content — so a gathering
     with no category chip, or no blurb, ends up visibly shorter than the one
     above it, and by however much the data happens to differ. Worse, the chip
     cost nothing when the date fitted beside it and a whole extra line when it
     did not, so the gap moved with the length of a venue name.

     Sizing every row to the tallest card settles it: the amount is the same
     for every card, which is what the three-column grid already does on wider
     screens. Only the calendar lists — [data-calendar] — are equalised;
     testimonials vary in length on purpose and would just gain dead space. */
  [data-calendar] .grid-3{grid-auto-rows:1fr}
  .gathering-list{display:grid;grid-auto-rows:1fr}

  /* And a bound, so one long blurb cannot set the height for the whole list. */
  .event-card__blurb{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  }
  .skel-card--row .skel-card__body{padding:4px 6px 8px;justify-content:flex-start}
  .empty-state{padding:var(--space-8) var(--space-5)}
  .footer__bar{flex-direction:column;gap:var(--space-2)}
}

/* ---- RSVP modal ------------------------------------------------------------
   A <dialog>: the browser supplies the modal semantics, focus trap, Escape and
   backdrop. A cream card on the dark site, so it reads as a distinct surface. */
.rsvp{
  width:min(440px,100% - 40px);padding:0;border:0;border-radius:var(--radius-md);
  background:var(--cream-100);color:var(--igc-teal);
  box-shadow:0 20px 60px rgba(10,66,71,.35);font-family:var(--font-body);
}
.rsvp::backdrop{background:rgba(10,66,71,.55)}
.rsvp__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);padding:20px 22px 0}
/* Explicit colour, not inherited: base.css paints headings --text-strong,
   which the dark theme makes cream — invisible on this cream card. */
.rsvp__title{font-family:var(--font-display);font-size:22px;font-weight:var(--weight-semibold);margin:0;color:var(--igc-teal)}
.rsvp__sub{font-size:13px;opacity:.7;margin:2px 0 0}
/* The event's when-and-where. Weighted a step up from the title's subtitle:
   it is the fact being agreed to, not a caption. Empty when we have none. */
.rsvp__when{font-size:13px;font-weight:var(--weight-semibold);margin:4px 0 0;color:rgba(10,66,71,.82)}
.rsvp__when:empty{display:none}
.rsvp__close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:inherit;padding:0}
.rsvp__form{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4) 22px 22px}
.rsvp__row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.rsvp__row .rsvp__field{flex:1 1 140px;min-width:0}
.rsvp__field{display:flex;flex-direction:column;gap:5px}
.rsvp__label{font-size:12px;font-weight:var(--weight-semibold);letter-spacing:.02em;text-transform:uppercase;color:rgba(10,66,71,.75)}
.rsvp__optional{font-weight:var(--weight-regular);opacity:.6;text-transform:none;letter-spacing:0}
.rsvp__input{
  width:100%;font:inherit;font-size:15px;color:var(--igc-teal);background:#fff;
  border:1px solid rgba(10,66,71,.18);border-radius:9px;padding:10px 11px;
}
.rsvp__input--area{resize:vertical}
.rsvp__input:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--border-focus)}
/* Rose is the error colour, darkened to clear AA on the cream card. */
.rsvp__msg{font-size:13px;min-height:18px;margin:0;color:var(--rose-700)}
.rsvp__msg.is-ok{color:var(--cyan-800)}
.rsvp__submit{
  border:0;background:var(--igc-rose);color:var(--ink-on-rose);font:inherit;
  font-weight:var(--weight-semibold);font-size:15px;padding:12px;border-radius:var(--radius-sm);cursor:pointer;
}
.rsvp__submit:disabled{opacity:.7;cursor:default}
.rsvp__fine{font-size:11px;line-height:1.5;text-align:center;margin:0;opacity:.6}
.rsvp__fine a{color:inherit}