/* app.css — view-specific styles (guest brand surfaces). Tokens from tokens.css. */

.serifbody { font-family: var(--font-display); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }

/* ===== empty / not-found screens ===== */
.emptyscreen { min-height: 80dvh; display: grid; place-content: center; justify-items: center; gap: var(--sp-4); text-align: center; padding: var(--sp-8); }
.emptyhint { display: grid; justify-items: center; gap: var(--sp-3); color: var(--ink-muted); padding: var(--sp-8) 0; }
.emptyhint svg { color: var(--display); }
.evstate__copy,
.emptyhint--editorial { text-align: center; }
.evstate__title,
.emptyhint__title {
  max-width: 13ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.04;
  color: var(--display);
  text-wrap: balance;
}
.emptyhint__title {
  max-width: 16ch;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
}
.evstate__body,
.emptyhint__body {
  max-width: 42ch;
  margin-inline: auto;
  font-family: var(--font-ui);
  color: var(--ink-muted);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
.evstate__skeleton { display: grid; gap: var(--sp-4); width: min(100%, 760px); margin-inline: auto; }
.evstate__hero { height: clamp(220px, 36vw, 360px); border-radius: var(--r-card); }
.evstate__line { height: 22px; }
.evstate__line--short { width: min(48%, 280px); }
.evstate__block { height: 120px; }

/* ===== home (marketing) ===== */
.home__hero { padding-top: clamp(var(--sp-16), 14vh, 160px); }
.home__headline { line-height: 1.04; }
.home__cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.home__cta .btn--primary { white-space: nowrap; }
@media (min-width: 560px) { .home__cta { flex-direction: row; justify-content: center; } }
.home__grid { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 720px) { .home__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.pillar { display: grid; gap: var(--sp-3); padding-top: var(--sp-6); border-top: 2px solid var(--line); }
.pillar__num { font-family: var(--font-display); font-size: 1rem; color: var(--display); }
.pillar__icon { color: var(--plum); }
.pillar__icon svg { width: 26px; height: 26px; }
.home__close { background: var(--surface-warm); }
.home__foot { display: flex; justify-content: space-between; align-items: center; padding-block: var(--sp-8); border-top: 1px solid var(--line); flex-wrap: wrap; gap: var(--sp-2); }
.home__foot .serif { font-size: 1.1rem; }

/* ===== event header (editorial) ===== */
.evhead { position: relative; overflow: hidden; }
.evhead__body { position: relative; z-index: 1; }
.evhead__hero { position: relative; aspect-ratio: 16 / 11; max-height: 52vh; overflow: hidden; }
.evhead__hero img { width: 100%; height: 100%; object-fit: cover; }
.evhead__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in oklch, var(--canvas) 88%, transparent)); }
.evhead__body { text-align: center; padding-block: clamp(var(--sp-8), 6vw, var(--sp-16)) var(--sp-6); }
.evhead__title { margin-top: var(--sp-2); }
.evhead__meta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); color: var(--ink-muted); font-size: var(--fs-sm); }
.evhead__meta span + span::before { content: "·"; margin-right: var(--sp-3); color: var(--line); }
.evhead--compact .evhead__body { padding-block: var(--sp-8) var(--sp-4); }
.evhead--compact .evhead__title { font-size: var(--fs-h1); }

/* ===== full-surface photo hero (Apple-Invites) ===== */
.evhero {
  border-radius: 0;            /* full-bleed at the top of the page */
  width: 100%;
  min-height: min(100svh, 720px);
  display: flex;
  overflow: clip;
  background: var(--ink-strong);
}
/* Sub-pages (seat/camera/rsvp) use a slim hero so their content clears the fold
   and the fixed tab bar — the photo is a banner, not the whole screen. */
.evhero--compact { min-height: min(34svh, 300px); }
.evhero .surface__media { inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Photo-derived scrim: a bottom-up wash of the photo's own sampled accent (falls
   back to --plum when extraction fails, see lib/accent.mjs), densest where the
   title sits. */
.evhero .surface__scrim {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--accent-photo) 92%, black) 0%,
    color-mix(in oklab, var(--accent-photo) 55%, transparent) 34%,
    transparent 65%);
  /* A touch more saturation so the scrim reads as the event's colour rather
     than a flat dark wash. Applied to the scrim layer only (it sits behind
     the title/meta in its own stacking layer, z-index 1 vs content's 2), so
     it never touches the white text drawn on top -- contrast is unaffected. */
  filter: saturate(1.15);
}
.evhero__content {
  align-self: flex-end; width: 100%;
  padding-top: 72px; padding-bottom: clamp(var(--sp-8), 10vh, 96px);
}
.evhero--compact .evhero__content { padding-top: 56px; }
.evhero--compact .evhero__title { font-size: clamp(1.9rem, 7vw, 3.2rem); }
.evhero__eyebrow {
  font: 600 var(--fs-label)/1 var(--font-ui); letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 18px rgba(0,0,0,0.45);
}
.evhero__title {
  margin-top: var(--sp-3); color: #fff;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 9vw, 4rem); line-height: 1.02; letter-spacing: 0;
  text-wrap: balance; text-shadow: 0 1px 24px rgba(0,0,0,0.35);
}
.evhero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
/* Sizing lives here; the frosted look itself comes from the shared .glass +
   .glass-chip utilities (styles/effects.css) applied alongside this class in
   GuestShell.mjs. */
.evhero__chip { text-shadow: 0 1px 12px rgba(0,0,0,0.45); }

/* ===== event body ===== */
/* Bottom padding clears the floating .rsvpcta pill (fixed, so it overlays
   whatever is at the viewport's bottom edge at full scroll): the pill's own
   footprint is its bottom offset (sp-4 + safe-area) plus a btn--lg (sp-12)
   plus shadow, so sp-32 leaves clear room for the last section (InstallHint
   or the final evsection) to never sit under it, verified at 390x844. */
.evbody { padding-block: var(--sp-8) calc(var(--sp-32) + env(safe-area-inset-bottom, 0)); }
.evsection .label { margin-bottom: var(--sp-3); }
.evsection__h {
  font: 500 1.5rem/1.2 var(--font-display);
  color: var(--ink-strong);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
.evsection__h--sub { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.evstory { white-space: pre-line; }

.story {
  list-style: none;
  padding: 0;
  display: grid;
}
.story__entry {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(180px, 320px);
  gap: var(--sp-5);
  align-items: start;
  padding-block: var(--sp-5);
}
.story__entry:first-child { padding-top: 0; }
.story__entry:last-child { padding-bottom: 0; }
.story__entry::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(var(--sp-5) + 18px);
  bottom: calc(var(--sp-5) * -1);
  width: 1px;
  background: var(--line);
}
.story__entry:last-child::after { display: none; }
.story__entry--text {
  grid-template-columns: 24px minmax(0, var(--maxw-prose));
  padding-block: var(--sp-3);
}
.story__entry--text::after {
  top: calc(var(--sp-3) + 18px);
  bottom: calc(var(--sp-3) * -1);
}
.story__marker {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--canvas);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 4px var(--surface-warm);
}
.story__body {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}
.story__date {
  font-family: var(--font-grotesque);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--accent);
}
.story__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--display);
  text-wrap: balance;
}
.story__copy {
  max-width: var(--maxw-prose);
  white-space: pre-wrap;
  color: var(--ink);
  text-wrap: pretty;
}
.story__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--elev-float);
}
@media (max-width: 720px) {
  .story__entry,
  .story__entry--text {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--sp-4);
  }
  .story__photo {
    grid-column: 2;
    max-height: 320px;
  }
}

.evcta { display: grid; gap: var(--sp-3); }
.evcta__card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.evcta__card:hover {
  text-decoration: none; background: var(--surface-warm);
  box-shadow: var(--elev-2); border-color: color-mix(in oklch, var(--accent) 35%, var(--line));
}
.evcta__card > svg:first-child {
  flex: none; width: 44px; height: 44px; padding: 11px; box-sizing: border-box;
  border-radius: 50%; background: var(--plum-tint); color: var(--accent);
}
.evcta__card div { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.evcta__card strong { font-weight: 600; font-size: 1.05rem; }
.evcta__card .muted { font-size: var(--fs-sm); }
.evcta__go { margin-left: auto; color: var(--ink-muted); flex: none; transition: color var(--dur) var(--ease-out); }
.evcta__card:hover .evcta__go { color: var(--accent); }

/* back-to-event bar (replaces the old bottom tab bar on tool pages) */
.backbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--sp-12); padding: calc(var(--sp-2) + env(safe-area-inset-top, 0)) var(--sp-4) var(--sp-2);
  color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.backbar:hover { text-decoration: none; }
.backbar__chev { font-size: 1.6rem; line-height: 1; color: var(--plum); margin-top: -2px; }
.backbar__title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-muted); }

/* Floating RSVP CTA (Partiful pattern): a centered pill anchored above the safe
   area, not a full-width bar. Only the pill itself is clickable so the page
   content underneath stays reachable. */
.rsvpcta {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0));
  z-index: var(--z-sticky);
  display: flex; justify-content: center;
  padding-inline: var(--sp-4);
  pointer-events: none;
}
.rsvpcta .btn {
  pointer-events: auto;
  width: auto;
  min-width: min(320px, 100%);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12), var(--elev-2);
}
.rsvpcta .btn:hover { background: var(--surface); filter: brightness(0.98); }
.rsvpcta .btn svg { color: var(--accent); }

/* ===== install hint (PWA, M3) =====
   Quiet page-context chrome (no .glass — this sits on the plain canvas below
   the fold, not on a photo). Reuses .panel for the surface/border/radius. */
.installhint {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.installhint__body { display: grid; gap: 2px; min-width: 0; }
.installhint__body strong { font-weight: 600; color: var(--ink-strong); }
.installhint__line { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-muted); font-size: var(--fs-sm); }
.installhint__line svg { flex: none; color: var(--ink-muted); }
.installhint__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* timeline */
.timeline { list-style: none; padding: 0; display: grid; gap: var(--sp-5); }
.timeline__item { display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-4); align-items: baseline; }
.timeline__time { color: var(--display); font-size: 1.05rem; }
.timeline__body { display: grid; gap: 2px; }
.timeline__body strong { font-weight: 600; }
.timeline__loc { font-size: var(--fs-sm); }
.detail .label { margin-bottom: var(--sp-2); }

/* ===== seat ===== */
.seat { padding-block: var(--sp-6) var(--sp-12); max-width: 560px; }
.seat__results { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.seat__result { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-input); color: var(--ink); text-align: left; font-weight: 500; transition: background var(--dur) var(--ease-out); }
.seat__result:hover { background: var(--surface-warm); }
.seat__result-go { color: var(--ink-muted); flex: none; }
.seat__name { font-size: clamp(2.2rem, 9vw, 3.4rem); }
.seat__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-8) var(--sp-6); width: 100%; max-width: 360px; display: grid; gap: var(--sp-1); justify-items: center; }
.seat__card .label { margin: 0; }
.seat__number { font-size: var(--fs-counter); line-height: 1; color: var(--display); font-weight: 300; }
.seat__seat { font-size: 1.05rem; color: var(--ink); }
.seat__count { font-size: var(--fs-sm); margin-top: var(--sp-2); }
.seat__card--blur .seat__number { filter: blur(14px); user-select: none; }
.seat__banner { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .seat__reveal .seat__card { animation: pop var(--dur-reveal) var(--ease-out) both; }
}
@keyframes pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }

/* ===== camera ===== */
.camera-join, .camera-full { padding-block: var(--sp-12); max-width: 460px; }
.camera-join__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--plum-tint); color: var(--plum); }

.vf { position: fixed; inset: 0; background: #14110f; display: flex; flex-direction: column; z-index: var(--z-modal); }
/* Letterboxed on pure black so the live feed floats like a real viewfinder
   aperture, distinct from the camera body chrome around it. */
.vf__stage { position: relative; flex: 1; overflow: hidden; display: grid; place-items: center; background: #000; }
.vf__back { position: absolute; top: calc(var(--sp-4) + env(safe-area-inset-top, 0)); left: var(--sp-4); z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; line-height: 1; color: #fff; background: rgba(0,0,0,0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.25); }
/* branded onz frame the guest shoots through (composited into the photo too) */
.vf__frame { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vf__frame::before { content: ""; position: absolute; inset: 3.5%; border: 2px solid rgba(255,255,255,0.92); border-radius: 2px; }
.vf__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 13%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); }
.vf__mark { position: absolute; left: 6%; bottom: 5%; z-index: 1; font-family: var(--font-grotesque); font-weight: 800; color: #fff; font-size: clamp(1rem, 5vw, 1.6rem); letter-spacing: -0.02em; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.vf__caption { position: absolute; right: 6%; bottom: 5.5%; z-index: 1; max-width: 55%; font-family: var(--font-ui); font-weight: 500; color: rgba(255,255,255,0.92); font-size: clamp(0.7rem, 3.2vw, 0.95rem); text-align: right; text-shadow: 0 1px 4px rgba(0,0,0,0.4); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vf__video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vf__fallback { color: #f3ece4; display: grid; justify-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-8); }
.vf__fallback .muted { color: #c9bfb4; }
.vf__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.vf__flash.is-on { opacity: 0.85; transition: opacity var(--dur) var(--ease-out); }
.vf__grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vf__counter { position: absolute; top: var(--sp-4); right: var(--sp-4); text-align: right; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); display: grid; justify-items: end; }
.vf__count { font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 0.9; font-weight: 300; }
.vf__counter .label { color: rgba(255,255,255,0.85); }
.vf__controls { padding: var(--sp-5) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom,0)); display: grid; justify-items: center; gap: var(--sp-2); background: #14110f; }
.vf__hint { color: #c9bfb4; font-size: var(--fs-sm); }
.vf__upload-err { border: none; width: 100%; max-width: 380px; font-family: inherit; cursor: pointer; text-align: center; }
.vf__upload-err:disabled { opacity: 0.6; cursor: default; }
.shutter { width: 76px; height: 76px; border-radius: 50%; background: transparent; border: 4px solid rgba(255,255,255,0.9); display: grid; place-items: center; transition: transform var(--dur) var(--ease-out); }
.shutter:active { transform: scale(0.92); }
.shutter:disabled { opacity: 0.45; }
.shutter__ring { width: 58px; height: 58px; border-radius: 50%; background: #fff; transition: background var(--dur) var(--ease-out); }
.shutter.is-busy .shutter__ring { background: var(--plum); }

/* ===== gallery ===== */
.gallery { padding-block: var(--sp-6) var(--sp-12); }
.gallery__countdown { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent); }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--sp-2); }
@media (min-width: 600px) { .gallery__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); } }
.gallery__grid--loading { width: 100%; padding-top: var(--sp-2); }
.gallery__cell {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--surface-warm);
  border: 1px solid transparent;
  padding: 0;
  transition: border-color var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.gallery__cell:hover { border-color: color-mix(in oklch, var(--accent) 38%, var(--line)); filter: contrast(1.03); }
.gallery__cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(20,17,15,0.92); display: grid; place-items: center; padding: var(--sp-4); }
.lightbox img { max-width: 100%; max-height: 92dvh; border-radius: var(--r-photo); box-shadow: var(--elev-float); }
.lightbox__close {
  position: absolute; top: calc(var(--sp-4) + env(safe-area-inset-top, 0)); right: var(--sp-5);
  font-size: 2rem; color: #fff; line-height: 1;
}
.lightbox__bar { position: absolute; left: 0; right: 0; bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0)); display: flex; justify-content: center; gap: var(--sp-3); }
.lightbox__bar a { text-decoration: none; }
.lightbox__bar a:hover { text-decoration: none; filter: brightness(1.08); }
/* The sheet-only Close action mirrors the corner × on small screens (see the
   <=560px block below); on larger screens it stays hidden and out of tab order. */
.lightbox__sheetclose { display: none; }

/* One-hand mobile: the lightbox becomes a bottom sheet — image on top, both
   actions as full-width bottom-anchored buttons, no drag (tap-to-close only).
   Scoped to the gallery lightbox (identified by its action bar); the plain
   floor-plan lightbox (Seat.mjs) keeps the simple centered image + corner ×. */
@media (max-width: 560px) {
  .lightbox:has(.lightbox__bar) {
    display: flex; flex-direction: column; align-items: stretch; padding: 0;
  }
  .lightbox:has(.lightbox__bar) img {
    flex: 1; min-height: 0; width: 100%; max-height: none;
    object-fit: contain; border-radius: 0; margin: auto;
  }
  .lightbox:has(.lightbox__bar) .lightbox__close { display: none; }
  .lightbox:has(.lightbox__bar) .lightbox__bar {
    position: static; display: grid; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0));
    background: #14110f;
  }
  .lightbox__bar a,
  .lightbox__sheetclose { width: 100%; justify-content: center; }
  .lightbox__sheetclose { display: inline-flex; }
}
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .lightbox { animation: lightbox-sheet-in 240ms var(--ease-out) both; }
}
@keyframes lightbox-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ===== rsvp ===== */
.rsvp, .rsvp-done { padding-block: var(--sp-6) var(--sp-12); max-width: 520px; }
.rsvp__toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: var(--sp-1); background: var(--surface-warm); border-radius: var(--r-pill); border: 1px solid var(--line); }
.rsvp__opt { min-height: 48px; border-radius: var(--r-pill); font-weight: 600; color: var(--ink-muted); transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.rsvp__opt.is-on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.rsvp__toggle--sm { max-width: 260px; }
.rsvp__toggle--sm .rsvp__opt { min-height: 40px; font-size: var(--fs-sm); }

/* multi-event sub-event cards */
.rsvp-sub { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); }
.rsvp-sub__head { display: grid; gap: 2px; }
.rsvp-sub__head strong { font-weight: 600; }
.rsvp-sub__head .muted { font-size: var(--fs-sm); }
.rsvp-sub__info { font-size: var(--fs-sm); }
.rsvp-sub__plus { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.stepper { display: inline-flex; align-items: center; gap: var(--sp-3); }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-warm); font-size: 1.1rem; line-height: 1; color: var(--ink); }
.stepper button:hover { background: var(--canvas); }
.stepper span { min-width: 1.2em; text-align: center; font-weight: 600; }
.rsvp-summary { width: 100%; max-width: 360px; }
.rsvp-summary__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.rsvp-summary__row:last-child { border-bottom: none; }

/* ===== streaming (Partiful-style) RSVP ===== */
.stream { padding-block: var(--sp-6) var(--sp-16); max-width: 560px; }
.stream__counts { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; color: var(--ink-muted); }
.stream__counts strong { font-family: var(--font-grotesque); font-weight: 800; font-size: 1.5rem; color: var(--ink-strong); margin-right: 4px; }
.stream__glyphs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.glyphbtn {
  display: grid; gap: 6px; justify-items: center; padding: var(--sp-4) var(--sp-2);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-card);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.glyphbtn:hover { box-shadow: var(--elev-2); }
.glyphbtn:active { transform: translateY(0); }
.glyphbtn.is-on { border-color: var(--accent); background: var(--plum-tint); box-shadow: 0 0 0 3px var(--plum-tint); }
.glyphbtn__emoji { font-size: 1.9rem; line-height: 1; }
.glyphbtn__label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.stream__name { display: grid; gap: var(--sp-3); }

.stream__guests .label { margin-bottom: var(--sp-3); }
.stream__avatars { display: flex; flex-wrap: wrap; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; margin-left: -8px;
  border: 2px solid var(--canvas); font-size: 0.78rem; font-weight: 700; color: #fff;
  background: var(--surface-warm); box-shadow: var(--elev-1);
}
.avatar:first-child { margin-left: 0; }
.avatar--sm { width: 30px; height: 30px; margin: 0; font-size: 0.68rem; flex: none; }
.avatar--more, .avatar--ghost { background: var(--surface-warm); color: var(--ink-muted); }
.avatar--ghost { border-color: var(--canvas); }
.stream__avatars--blur { filter: blur(5px); opacity: 0.7; }
.stream__gate { display: grid; gap: var(--sp-3); justify-items: center; padding: var(--sp-6); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-card); }
.stream__feed { list-style: none; padding: 0; margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.stream__row { display: flex; align-items: center; gap: var(--sp-3); }
.stream__row strong { font-weight: 600; }
.stream__pill {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0) + var(--sp-4));
  z-index: var(--z-sticky); padding: var(--sp-3) var(--sp-5); font-weight: 600; color: var(--ink-strong);
  background: color-mix(in srgb, var(--plum-tint) 80%, var(--surface));
  border: 1px solid var(--line); box-shadow: var(--elev-3);
}

/* tablet/desktop: give guest pages a comfortable measure */
@media (min-width: 880px) {
  .evcta { grid-template-columns: 1fr 1fr; }
  .evcta__card:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}

/* ============================================================================
   Landing page (pre-signup brand showcase). Editorial bone + warm ink + plum,
   Archivo grotesque display, Fraunces serif accents. Not a wedding-cream clone.
   ============================================================================ */
.land { --land-pad: clamp(var(--sp-12), 9vw, 120px); background: var(--canvas); }
.land__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--sp-5); position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.land__brand {
  font-family: var(--font-grotesque); font-weight: 800; font-size: 1.6rem;
  letter-spacing: -0.04em; color: var(--ink-strong);
}
.land__brand--sm { font-size: 1.2rem; }

/* hero */
.land__hero {
  position: relative; isolation: isolate; overflow: clip;
  text-align: center; padding-top: clamp(var(--sp-16), 12vh, 150px); padding-bottom: var(--land-pad);
}
/* Slow animated gradient wash behind the hero copy, so first paint has depth
   instead of flat white. Very low saturation coral/peach/soft-blue stops. */
.land__hero::before {
  content: ""; position: absolute; inset: -20% -10%; z-index: -1;
  background: linear-gradient(120deg,
    oklch(0.95 0.020 42), oklch(0.945 0.016 250),
    oklch(0.955 0.022 20), oklch(0.94 0.014 210));
  background-size: 320% 320%;
}
@media (prefers-reduced-motion: no-preference) {
  .land__hero::before { animation: land-wash 18s ease-in-out infinite; }
}
@keyframes land-wash {
  0%, 100% { background-position: 0% 45%; }
  50%      { background-position: 100% 55%; }
}
/* Fixed grain texture, matched to the .has-grain technique (SVG feTurbulence). */
.land__hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: soft-light; background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.land__eyebrow {
  font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
}
.land__headline {
  display: flex; flex-wrap: wrap; gap: 0 0.28em; justify-content: center; align-items: baseline;
  margin-top: var(--sp-5); line-height: 0.98;
  font-size: clamp(3.4rem, 14vw, 8.5rem); letter-spacing: -0.03em;
}
.land__static { font-family: var(--font-grotesque); font-weight: 800; color: var(--ink-strong); }
.land__slot   { color: var(--plum); font-weight: 500; letter-spacing: 0; }
.land__slot .slotword__ch { line-height: 1; overflow: visible; padding-bottom: 0.1em; }
.land__sub {
  max-width: 46ch; margin: var(--sp-6) auto 0; font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.6; color: var(--ink-muted); text-wrap: pretty;
}
.land__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; align-items: center; margin-top: var(--sp-8); }

/* One-shot entrance stagger on the hero's direct children (eyebrow, headline,
   sub, cta): 80ms steps, translateY(12px)+fade, 400ms ease-out. Instant under
   reduced motion (no animation at all, so nothing is gated on a transition). */
@media (prefers-reduced-motion: no-preference) {
  .land__hero > * { animation: land-hero-in 400ms var(--ease-out) both; }
  .land__hero > *:nth-child(1) { animation-delay: 0ms; }
  .land__hero > *:nth-child(2) { animation-delay: 80ms; }
  .land__hero > *:nth-child(3) { animation-delay: 160ms; }
  .land__hero > *:nth-child(4) { animation-delay: 240ms; }
}
@keyframes land-hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.land__h2 { font-family: var(--font-grotesque); font-weight: 800; font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: -0.025em; color: var(--ink-strong); text-wrap: balance; }

/* templates showcase */
.land__templates { padding-block: var(--land-pad); background: var(--surface-warm); }
.land__templates .land__eyebrow { display: block; }
.land__templates .land__h2 { margin-top: var(--sp-2); margin-bottom: var(--sp-8); }
.land__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (min-width: 720px) { .land__cards { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }
/* Each card reads as a mini event-hero preview: gradient/photo backdrop, a mood
   chip, the mood's display font on the title, and a tiny fake glass RSVP pill. */
.tcard { display: grid; gap: var(--sp-3); }
.tcard__photo {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-card); overflow: clip;
  box-shadow: var(--elev-3); display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--sp-4);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.tcard:hover .tcard__photo, .tcard:focus-within .tcard__photo, .tcard:active .tcard__photo {
  transform: translateY(-4px); box-shadow: var(--elev-float);
}
.tcard__photo img {
  width: 100%; height: 100%; object-fit:cover; display: block;
  position: absolute; inset: 0; z-index: 0;
}
.tcard__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 40%, transparent 65%, rgba(0,0,0,0.28));
}
.tcard__mood {
  position: relative; z-index: 2; align-self: flex-start;
  font-size: 0.7rem; padding: 4px var(--sp-3); min-height: auto;
}
.tcard__foot { position: relative; z-index: 2; display: grid; gap: var(--sp-2); justify-items: start; }
.tcard__title {
  color: #fff; font-size: clamp(1.1rem, 3vw, 1.5rem);
  line-height: 1.05; text-shadow: 0 1px 14px rgba(0,0,0,0.4); letter-spacing: -0.01em;
}
.tcard__rsvp { font-size: 0.68rem; padding: 4px var(--sp-2); min-height: auto; }

/* pillars */
.land__pillars { padding-block: var(--land-pad); }
.land__grid { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 760px) { .land__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.lpillar { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 2px solid var(--ink-strong); }
.lpillar__icon { color: var(--plum); }
.lpillar__icon svg { width: 26px; height: 26px; }
.lpillar__k { font-family: var(--font-grotesque); font-weight: 700; font-size: 1.3rem; color: var(--ink-strong); }
.lpillar__d { color: var(--ink-muted); line-height: 1.55; }

/* Pillar vignettes: small pure-CSS/HTML compositions standing in for a
   screenshot, one per pillar (RSVP pill, seat card, mini black-frame photo). */
.pv { position: relative; width: 132px; height: 76px; border-radius: var(--r-card); overflow: clip; }
.pv--rsvp { box-shadow: var(--elev-2); }
.pv__backdrop {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, oklch(0.80 0.09 42), oklch(0.60 0.11 32));
}
.pv__pill {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-size: 0.72rem; padding: 6px var(--sp-3); min-height: auto; white-space: nowrap;
}
.pv--seat {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--elev-1);
}
.pv__seat-num { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--display); }
.pv__seat-label { font-size: 0.68rem; color: var(--ink-muted); }
.pv--camera {
  background: #000; display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
}
.pv__frame-mark { font-family: var(--font-grotesque); font-weight: 800; font-size: 0.72rem; color: rgba(255,255,255,0.9); }
.pv__counter {
  font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,154,60,0.95);
  text-shadow: 0 0 6px rgba(255,154,60,0.75);
}

/* close + footer */
.land__close { padding-block: var(--land-pad); background: var(--surface-warm); }
.land__foot { display: flex; justify-content: space-between; align-items: center; padding-block: var(--sp-8); border-top: 1px solid var(--line); flex-wrap: wrap; gap: var(--sp-2); }
.land__foot .muted { font-size: var(--fs-sm); }