/* =============================================================================
   Immersive — a production direction with Apple-Invites energy: a full-bleed
   photo hero, elegant centered type, minimal chrome; the details rise as a soft
   sheet over the image. Photo-first, cinematic, refined. Cool Zen sheet.
   ========================================================================== */
body { font-family: var(--font-ui); background: var(--color-surface-page); color: var(--color-text-primary); }
.app { inline-size: min(100vw, 30rem); margin-inline: auto; position: relative; padding-block-end: 6rem; }
.i { inline-size: var(--icon-md); block-size: var(--icon-md); stroke: currentcolor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* hero */
.hero { position: relative; block-size: 82vh; min-block-size: 30rem; overflow: hidden; }
.hero > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(to bottom, color-mix(in srgb, #0b1110 30%, transparent), transparent 26% 46%, color-mix(in srgb, #0b1110 78%, transparent)); }
.chrome { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 3; display: flex; justify-content: space-between; padding: calc(var(--space-3) + env(safe-area-inset-top,0px)) var(--space-4) 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, #0b1110 30%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; border: none; }
.gRow { display: inline-flex; gap: var(--space-2); }
.heroText { position: absolute; inset-block-end: var(--space-8); inset-inline: 0; z-index: 3; padding-inline: var(--space-5); text-align: center; color: #fff; }
.eyebrow { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.9; }
.title { margin-block-start: var(--space-3); font-size: var(--font-size-display); font-weight: var(--font-weight-heavy); line-height: 1.0; letter-spacing: var(--tracking-tight); text-wrap: balance; }
.heroMeta { margin-block-start: var(--space-4); font-size: var(--font-size-base); opacity: 0.92; }
.heroFaces { display: inline-flex; justify-content: center; margin-block-start: var(--space-4); }
.heroFaces .a { inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: var(--radius-pill); display: grid; place-items: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: #1a2422; background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, #0b1110 30%, transparent); overflow: hidden; }
.heroFaces .a img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.heroFaces .a + .a { margin-inline-start: calc(-1 * var(--space-2)); }
.heroFaces .lbl { align-self: center; margin-inline-start: var(--space-2); font-size: var(--font-size-sm); }

/* sheet rising over the photo */
.sheet { position: relative; z-index: 4; margin-block-start: calc(-1 * var(--space-6)); border-start-start-radius: var(--radius-xl); border-start-end-radius: var(--radius-xl);
  background: var(--color-surface-page); padding: var(--space-6) var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }
.grip { position: absolute; inset-block-start: var(--space-2); inset-inline: 0; margin-inline: auto; inline-size: 2.2rem; block-size: 4px; border-radius: 999px; background: var(--color-border-strong); }

.info { display: flex; flex-direction: column; gap: var(--space-4); }
.line { display: flex; align-items: center; gap: var(--space-4); }
.line .tile { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: var(--radius-md); flex: none; }
.tile-d { background: var(--color-sage-soft); color: var(--color-sage-deep); }
.tile-l { background: var(--color-sky-soft); color: var(--color-sky-deep); }
.line .body { flex: 1; min-inline-size: 0; }
.line .body b { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.line .body span { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.line .go { flex: none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }

.section h2 { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); margin-block-end: var(--space-2); }
.about { font-size: var(--font-size-base); line-height: var(--line-relaxed); color: var(--color-text-primary); }
.gtk { display: flex; flex-direction: column; }
.gtkRow { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); font-size: var(--font-size-sm); }
.gtkRow + .gtkRow { border-block-start: 1px solid var(--color-border-default); }
.gtkRow .tile { display: grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem; border-radius: var(--radius-sm); flex: none; }
.gtkRow b { font-weight: var(--font-weight-semibold); }
.gtkRow span { color: var(--color-text-muted); }
.guestGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3) var(--space-2); }
.guest { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.guest .a { inline-size: 2.6rem; block-size: 2.6rem; border-radius: var(--radius-pill); display: grid; place-items: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-on-accent); background: linear-gradient(150deg, var(--color-sky), var(--color-accent-deep)); overflow: hidden; }
.guest .a img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.guest .n { font-size: 0.6rem; color: var(--color-text-muted); }

/* 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-5) calc(var(--space-4) + env(safe-area-inset-bottom,0px)); background: linear-gradient(to top, var(--color-surface-page) 62%, transparent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--control-lg); border-radius: var(--radius-pill); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); border: none; }
.btn-primary { flex: 2; background: var(--color-accent-deep); color: var(--color-text-on-accent); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--color-accent-deep) 80%, transparent); }
.btn-ghost { flex: 1; background: var(--color-surface-raised); border: 1px solid var(--color-border-default); color: var(--color-text-primary); }