/* =============================================================================
   Bold — a production direction with Partiful-style energy: dark ground, big
   expressive type, a bright accent, playful but shippable. Real photo cover.
   Uses Loop's landing tokens (coral/gold on aubergine) so it's on-brand-bold.
   ========================================================================== */
body { font-family: var(--font-ui); background: var(--color-landing-ink-deep); color: var(--color-landing-cream); }
.app { inline-size: min(100vw, 30rem); margin-inline: auto; padding-block-end: 6.5rem; position: relative;
  background:
    radial-gradient(80% 30% at 80% 0%, color-mix(in srgb, var(--color-landing-coral) 24%, transparent), transparent 60%),
    radial-gradient(70% 24% at 10% 8%, color-mix(in srgb, var(--color-landing-plum) 26%, transparent), transparent 60%),
    var(--color-landing-ink-deep); }
.i { inline-size: var(--icon-md); block-size: var(--icon-md); stroke: currentcolor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* cover */
.cover { position: relative; margin: var(--space-3); border-radius: var(--radius-lg); overflow: hidden; block-size: 42vh; min-block-size: 17rem;
  box-shadow: 0 24px 50px -22px color-mix(in srgb, var(--color-landing-coral) 50%, transparent); }
.cover > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, #0b0710 88%, transparent), transparent 55%); }
.coverChrome { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 3; display: flex; justify-content: space-between; padding: var(--space-3); }
.gbtn { display: inline-grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill);
  background: color-mix(in srgb, #0b0710 44%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; border: none; }
.gbtnRow { display: inline-flex; gap: var(--space-2); }
.pin { position: absolute; inset-block-end: var(--space-3); inset-inline-start: var(--space-3); z-index: 3; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-landing-coral); color: #fff; font-size: var(--font-size-xs); font-weight: var(--font-weight-heavy); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.head { padding: var(--space-2) var(--space-4) 0; }
.eyebrow { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.02em; color: var(--color-landing-gold); }
.title { margin-block-start: var(--space-1); font-size: clamp(2.6rem, 13vw, 3.8rem); font-weight: var(--font-weight-heavy); line-height: 0.92; letter-spacing: -0.03em; text-wrap: balance; }
.title em { font-style: normal; background: linear-gradient(100deg, var(--color-landing-gold), var(--color-landing-coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.who { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.facepile { display: inline-flex; }
.facepile .a { inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); display: grid; place-items: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: #1a0f14; background: var(--color-landing-cream); box-shadow: 0 0 0 2px var(--color-landing-ink-deep); overflow: hidden; }
.facepile .a img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.facepile .a + .a { margin-inline-start: calc(-1 * var(--space-3)); }
.who .txt { font-size: var(--font-size-sm); }
.who .txt b { font-weight: var(--font-weight-bold); }
.who .txt span { color: color-mix(in srgb, var(--color-landing-cream) 66%, transparent); }
.who .count { margin-inline-start: auto; text-align: end; font-size: var(--font-size-sm); }
.who .count b { display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-heavy); color: var(--color-landing-gold); }
.who .count span { font-size: var(--font-size-xs); color: color-mix(in srgb, var(--color-landing-cream) 60%, transparent); }

.rows { margin-inline: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-landing-cream) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-landing-cream) 14%, transparent); }
.row .tile { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--radius-md); flex: none; color: #1a0f14; }
.tile-a { background: linear-gradient(150deg, var(--color-landing-gold), var(--color-landing-coral)); }
.tile-b { background: linear-gradient(150deg, var(--color-landing-teal), var(--color-landing-plum)); }
.row .body { flex: 1; min-inline-size: 0; }
.row .body b { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.row .body span { font-size: var(--font-size-sm); color: color-mix(in srgb, var(--color-landing-cream) 64%, transparent); }
.row .go { flex: none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-landing-cream) 14%, transparent); color: var(--color-landing-cream); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); border: none; }

.section { margin: var(--space-5) var(--space-4) 0; }
.section h2 { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: color-mix(in srgb, var(--color-landing-cream) 58%, transparent); margin-block-end: var(--space-2); }
.about { font-size: var(--font-size-base); line-height: var(--line-relaxed); color: color-mix(in srgb, var(--color-landing-cream) 90%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-landing-cream) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-landing-cream) 14%, transparent); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

.guests { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gpill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-landing-cream) 8%, transparent); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.gpill .a { inline-size: 1.7rem; block-size: 1.7rem; border-radius: var(--radius-pill); display: grid; place-items: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: #1a0f14; background: var(--color-landing-cream); overflow: hidden; }
.gpill .a img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* sticky RSVP */
.rsvp { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 20; display: flex; justify-content: center; pointer-events: none; }
.rsvpIn { pointer-events: auto; inline-size: min(100vw, 30rem); display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--color-landing-ink-deep) 60%, transparent); }
.big { flex: 2; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--control-lg); border: none; border-radius: var(--radius-pill);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-heavy); color: #1a0f14; background: linear-gradient(120deg, var(--color-landing-gold), var(--color-landing-coral));
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--color-landing-coral) 70%, transparent); }
.maybe { flex: 1; min-block-size: var(--control-lg); border: 1px solid color-mix(in srgb, var(--color-landing-cream) 26%, transparent); border-radius: var(--radius-pill); background: transparent; color: var(--color-landing-cream); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }