/* Hallmark · shape: app screen · genre: modern-minimal · theme: brand (Zonuru, DESIGN.md) under the host's photo colour and fonts · redesign: full (shared parts) · surface: absolute
 * paper: from the host's photo · accent: from the host's photo · display: the host's title font · body: Hanken Grotesk (Clean), or the host's text font
 * nav: kept, the mark and wordmark, quiet · signature: the host's photo and title, with the countdown and the one main action in the first panel · states: before, on the day, after, empty, sent
 * axes: light-or-dark/grotesk-sans/warm · posture: settled · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the giving panel stacked grey boxes inside a white panel; the totals now lead as a figure and the boxes are rows */
/* Hallmark · waive 7b · panel #FFFFFF on the photo-tinted page · white panels on a tint taken from the host's photo are the approved event page (CLAUDE.md, Decisions) */
/* Hallmark · finish-review: subagent · 8 findings · 8 resolved (double thank-you, give-or-pledge as one track, selection in ink, sticky hover, cut placeholder, checkbox alignment, amounts on the name line, photo name asked after picking) */
/* Hallmark · waive 39b · the envelope seal 64px · the wax seal on the optional envelope opening is a picture you tap, not a toolbar button */
/* avoid-ai-design-ignore: SD4d (Hallmark's stamp uses middle dots by design) */
@import url("./tokens.css");

/* Event page, built to docs/DESIGN.md Part 2.
   Layout: Luma (cover, title, host, date and place rows, action card, quiet sections; two columns on desktop).
   Colour: the accent comes from the host's photo; the page itself is flat (Apple grouped surfaces). No gradients.
   One main action, as on Posh and Dice. */
:root {
  --accent: #1d1d1f;
  --on-accent: #ffffff;
  --sans: var(--z-sans);
  --title-font: var(--sans); --title-weight: 700; --title-style: normal; --title-tracking: -0.025em;
  --page: #f2f2f7;
  --ink: #111113;
  --muted: rgba(17,17,19,.56);
  --hair: rgba(17,17,19,.1);
  --surface: rgba(255,255,255,.68);
  --surface-line: rgba(17,17,19,.08);
  --tile: rgba(255,255,255,.7);
  --veil: rgba(255,255,255,.72);
  --material: #ffffff;
  --fill: rgba(118,118,128,.12);
  --fill-2: rgba(118,118,128,.2);
  --seg-on: #ffffff;
  --edge: rgba(17,17,19,.5);
  --knob: #ffffff;
  --shadow-photo: 0 1px 2px rgba(0,0,0,.08), 0 24px 48px -24px rgba(0,0,0,.4);
  --shadow-panel: 0 1px 2px rgba(0,0,0,.04);
  --shadow-knob: 0 2px 4px rgba(0,0,0,.2);
  --pass-bg: #ffffff; --pass-ink: #111113; --pass-mute: #555555;
  --env-back: #e6e0d4; --env-card: #fffdf8; --env-front: #efe9dd; --env-front-2: #ebe4d7; --env-flap: #e2dbcd;
  --env-seal-ink: rgba(255,255,255,.9); --shadow-env: 0 30px 60px -25px rgba(0,0,0,.4); --shadow-seal: 0 6px 14px rgba(0,0,0,.3);
  --light-btn: #f5f5f7; --light-btn-ink: #111113;
}
:root[data-mode="dark"] {
  --page: #000000;
  --ink: #f5f5f7;
  --muted: rgba(245,245,247,.6);
  --hair: rgba(255,255,255,.12);
  --surface: rgba(255,255,255,.065);
  --surface-line: rgba(255,255,255,.08);
  --tile: rgba(255,255,255,.08);
  --veil: rgba(8,8,9,.7);
  --material: #1c1c1e;
  --fill: rgba(118,118,128,.24);
  --fill-2: rgba(118,118,128,.32);
  --seg-on: #636366;
  --edge: rgba(255,255,255,.42);
}
body.z { --link: color-mix(in oklab, var(--accent) 78%, var(--ink)); background: var(--page); color: var(--ink); min-height: 100vh; color-scheme: light; }
body.z[data-mode="dark"] { --link: var(--ink); color-scheme: dark; }


.z-bar { max-width: 880px; margin: 0 auto; height: 52px; display: flex; align-items: center; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.z-bar { height: 64px; }
.z-bar .wm { display: inline-flex; align-items: center; gap: var(--z-2); text-decoration: none; color: var(--muted); border-radius: var(--z-r-tag); }
.z-bar .wm img { width: 24px; height: 24px; border-radius: 6px; }
.z-bar .wm span { font-family: var(--z-mark); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }

/* Layout */
.z-page { max-width: 880px; margin: 0 auto; padding: 4px max(20px, env(safe-area-inset-right)) 72px max(20px, env(safe-area-inset-left)); display: grid; gap: 24px; font-family: var(--body-font, var(--sans)); letter-spacing: -0.011em; }
.z-left, .z-right { display: grid; gap: 20px; align-content: start; min-width: 0; }
.z-right { gap: 16px; }
@media (min-width: 900px) {
  .z-page { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; padding-top: 20px; }
  .z-left { position: sticky; top: 24px; }
}

.z-cover { aspect-ratio: 4 / 5; border-radius: var(--z-r-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-photo); }
.z-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A personal invitation leads with the guest's own named card, at its true shape */
.z-named { margin: 0; display: grid; gap: var(--z-3); }
.z-named img { width: 100%; height: auto; display: block; border-radius: var(--z-r-field); box-shadow: var(--shadow-photo); }
.z-named figcaption { font: var(--z-w-strong) 15px var(--sans); }
.z-named a { color: var(--link); text-decoration: underline; text-underline-offset: 0.16em; }

.z-title { margin: 0; font-family: var(--title-font); font-weight: var(--title-weight); font-style: var(--title-style); letter-spacing: var(--title-tracking); font-size: 34px; line-height: 38px; text-wrap: balance; overflow-wrap: anywhere; }
@media (min-width: 900px) { .z-title { font-size: 42px; line-height: 50px; } }

/* Host row with share and calendar (Posh) */
.z-host { display: grid; gap: 12px; font: 400 15px/21px var(--sans); color: var(--muted); }
.z-host-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.z-host-row > span { min-width: 0; }
.z-host-side { padding-top: 4px; }
.z-host-side .z-host-row { padding-bottom: 12px; border-bottom: 1px solid var(--hair); color: var(--ink); font-weight: 500; }
.z-side-n { margin: 0; font-size: 14px; color: var(--ink); font-weight: 500; }
.z-side-link { font-size: 14px; color: var(--muted); text-decoration: none; }
.z-icons { display: flex; gap: 4px; flex: none; }
.z-icon { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.z-icon:hover { background: var(--surface); color: var(--ink); }
.z-host-row { justify-content: flex-start; }
.z-host .z-icons { margin-left: auto; }
.z-face { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--material); }

/* Three facts in one row with hairlines between (Airbnb) */
.z-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: var(--z-4) 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-family: var(--sans); }
.z-fact { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 0 var(--z-3); text-align: center; text-decoration: none; color: var(--ink); border-radius: var(--z-r-tag); transition: background-color .15s var(--z-ease); }
.z-fact + .z-fact { border-left: 1px solid var(--hair); }
.z-fact b { font-size: 20px; line-height: 26px; font-weight: var(--z-w-display); letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.z-fact span { font-size: 13px; line-height: 18px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .z-fact:hover { background: var(--fill); } }
.z-fact:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.z-who { margin: calc(-1 * var(--z-1)) 0 0; font: 400 15px/21px var(--sans); color: var(--muted); }

/* The newest few things on the page (Partiful) */
.z-latest ul { list-style: none; margin: 0; padding: var(--z-1) var(--z-6) var(--z-2); }
.z-latest li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--z-3); padding: var(--z-3) 0; border-top: 1px solid var(--hair); font-size: 15px; line-height: 21px; }
.z-latest li:first-child { border-top: 0; }
.z-latest li span { min-width: 0; color: var(--muted); }
.z-latest li b { color: var(--ink); font-weight: 600; }
.z-latest time { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.z-answers label { flex: 1 1 0; }

/* Phones: the photo runs edge to edge; the page rises over its bottom edge as a sheet (Apple Invites, Airbnb) */
@media (max-width: 899px) {
  .z-page { padding-top: 0; }
  .z-left .z-cover { margin: 0 calc(-1 * max(20px, env(safe-area-inset-right))) 0 calc(-1 * max(20px, env(safe-area-inset-left))); border-radius: 0; box-shadow: none; aspect-ratio: 4 / 5; max-height: 76svh; }
  .z-left:has(.z-cover) + .z-right { position: relative; margin: -56px calc(-1 * max(20px, env(safe-area-inset-right))) 0 calc(-1 * max(20px, env(safe-area-inset-left))); padding: 28px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); border-radius: 28px 28px 0 0; background: var(--page); }
}

/* Programme: the event's parts, set like a printed programme */
.z-parts { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 20px; font-family: var(--sans); }
.z-parts li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.z-cal { width: 44px; border-radius: 10px; border: 1px solid var(--hair); overflow: hidden; text-align: center; background: var(--material); }
.z-cal span { display: block; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--fill); padding: 2px 0 1px; }
.z-cal b { display: block; font-size: 17px; line-height: 24px; font-weight: 600; }
.z-part-t { display: grid; gap: 1px; min-width: 0; }
.z-part { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.015em; }
.z-when { font-size: 15px; line-height: 21px; font-weight: 400; }
.z-parts li:has(.z-part) .z-when { color: var(--ink); }
.z-yours { color: var(--muted); font-weight: 400; }
.z-where { font-size: 14px; line-height: 20px; color: var(--muted); }
.z-where { display: flex; flex-wrap: wrap; column-gap: var(--z-3); }
.z-where a { color: var(--link); text-decoration: none; font-weight: 600; }
.z-where a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.z-life { display: flex; flex-wrap: wrap; column-gap: var(--z-4); margin: -12px 0 0; font-size: 17px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Action card (Luma) with one main button (Posh, Dice) */
/* Panels: white on the tinted page (dark panels on black). No borders, no blur, no gradients. */
.z-card, .z-sec { border-radius: var(--z-r-card); background: var(--material); box-shadow: var(--shadow-panel); color: var(--ink); font-family: var(--sans); }
body.z[data-mode="dark"] .z-card, body.z[data-mode="dark"] .z-sec { box-shadow: none; }
.z-card { overflow: hidden; }
/* A small header strip on a card (Luma): the label sits on a faint band, the content below */
.z-card-h { padding: 12px 24px; font-size: 14px; font-weight: 600; color: var(--muted); background: color-mix(in oklab, var(--ink) 4%, var(--material)); border-bottom: 1px solid var(--hair); }
.z-card-b { padding: 24px 24px 24px; display: grid; gap: 20px; }
/* Section titles in the event's own font */
/* Section titles keep the event's lettering, smaller, so the event title is the only large type */
.z-card-t, .z-sec h2 { margin: 0; font-family: var(--title-font); font-weight: var(--title-weight); font-style: var(--title-style); letter-spacing: var(--title-tracking); font-size: 22px; line-height: 28px; color: var(--ink); text-wrap: balance; }
@media (min-width: 900px) { .z-card-t, .z-sec h2 { font-size: 24px; line-height: 30px; } }
.z-going { margin: 0; font-size: 15px; color: var(--muted); }
.z-going b { color: var(--ink); font-weight: 600; }
.z-card-b p { margin: 0; font-size: 15px; line-height: 21px; }
.z-main { width: 100%; height: var(--z-control); border: 0; border-radius: var(--z-r-pill); background: var(--accent); color: var(--on-accent); font: var(--z-w-display) 19px/1 var(--sans); letter-spacing: -0.01em; cursor: pointer; transition: filter .15s var(--z-ease), transform .15s var(--z-ease); }
.z-main:hover { filter: brightness(1.08); }
.z-main:active { transform: scale(.98); }
.z-main:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body.z[data-mode="dark"] .z-main.on-dark-light { background: var(--light-btn); color: var(--light-btn-ink); }

/* Sections: each one a card on the photo-tinted page, titled in the event's font (Joy's named
   sections, given the weight of the top of the page). */
.z-sec { display: grid; gap: 20px; padding: 24px 24px 24px; scroll-margin-top: 16px; }
.z-sec > header { display: grid; gap: 8px; }
.z-sec-t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.z-sec-t span { flex: none; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

.z-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.z-note b { color: var(--ink); font-weight: 600; }
.z-h3 { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.z-prose { margin: 0; white-space: pre-line; font-size: 16px; line-height: 25px; }
.z-tag { margin: -12px 0 0; font-size: 15px; color: var(--muted); }


/* Buttons inside sections */
/* Secondary: outlined pills, never a second filled button */
.z-btn { position: relative; justify-self: start; height: var(--z-control-sm); padding: 0 var(--z-4); border-radius: var(--z-r-pill); border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); font: var(--z-w-strong) 15px var(--sans); cursor: pointer; transition: background-color .15s var(--z-ease), transform .15s var(--z-ease); }
.z-btn::after { content: ""; position: absolute; inset: -2px 0; }
.z-btn:hover { background: var(--fill); }
.z-btn:active { transform: scale(.98); }
.z-btn:focus-visible, .z-link:focus-visible, .z-icon:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.z-btn.sm { height: 36px; padding: 0 var(--z-4); font-size: 14px; }
.z-btn.wide { justify-self: stretch; width: 100%; height: var(--z-control); font-size: 17px; }
.z-link { justify-self: start; border: 0; background: none; padding: 0; color: var(--link); font: var(--z-w-strong) 15px var(--sans); cursor: pointer; text-decoration: none; }
.z-link:hover { text-decoration: underline; text-underline-offset: 0.16em; }

/* Forms on the page */
.z-form { display: grid; gap: 12px; }
.z-form { gap: 16px; }
.z-form label { display: grid; gap: var(--z-2); font-size: 15px; font-weight: var(--z-w-regular); color: var(--ink); min-width: 0; }
.z-form input:not([type=checkbox]):not([type=radio]), .z-form select, .z-form textarea { width: 100%; min-width: 0; height: var(--z-control); padding: 0 var(--z-4); border-radius: var(--z-r-field); border: 0; background: var(--material); box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); font: 400 17px var(--body-font, var(--sans)); -webkit-appearance: none; appearance: none; }
.z-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23888' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.z-form input[type=date] { padding-top: 0; padding-bottom: 0; line-height: 52px; }
.z-form textarea { height: auto; min-height: 104px; padding: var(--z-3) var(--z-4); resize: vertical; }
.z-form input::placeholder, .z-form textarea::placeholder { color: var(--muted); opacity: .8; }
.z-form input:not([type=checkbox]):not([type=radio]):hover, .z-form select:hover, .z-form textarea:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.z-form input:not([type=checkbox]):focus, .z-form select:focus, .z-form textarea:focus { outline: 2px solid var(--ink); outline-offset: -2px; box-shadow: none; }
.z-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Choices: pills; the chosen one is ink */
.z-seg { display: flex; gap: var(--z-2); }
.z-seg label { flex: 1 1 auto; min-width: 0; }
.z-seg label { display: block !important; position: relative; color: var(--ink) !important; }
.z-seg input { position: absolute; opacity: 0; pointer-events: none; }
.z-seg span { display: grid; place-items: center; height: 44px; padding: 0 var(--z-3); border-radius: var(--z-r-pill); box-shadow: inset 0 0 0 1px var(--edge); font-size: 15px; white-space: nowrap; font-weight: var(--z-w-strong); cursor: pointer; text-align: center; line-height: 1.15; transition: background-color .15s var(--z-ease), color .15s var(--z-ease); }
@media (hover: hover) { .z-seg span:hover { background: var(--fill); } }
.z-seg span:active { transform: scale(.98); }
.z-seg input:checked + span { background: var(--ink); color: var(--material); box-shadow: none; }
.z-seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Payment details, shown openly */
/* Payment details as rows on the panel, not boxes inside it */
.z-pay { display: grid; gap: 0; }
.z-paycard { display: grid; gap: 2px; padding: var(--z-4) 0; border-top: 1px solid var(--hair); position: relative; }
.z-pay .z-paycard:first-child { border-top: 0; padding-top: 0; }
.z-paycard .m { font-size: 14px; color: var(--muted); }
.z-paycard b { font-size: var(--z-h2); line-height: var(--z-h2-lh); font-weight: var(--z-w-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.z-paycard .n { font-size: 15px; font-weight: 500; }
.z-paycard .z-btn { position: absolute; top: var(--z-4); right: 0; }
.z-pay .z-paycard:first-child .z-btn { top: 0; }
.z-listhead { display: flex; justify-content: space-between; align-items: end; gap: var(--z-3); flex-wrap: wrap; font-size: 15px; padding-top: var(--z-1); }
.z-fig { display: grid; gap: var(--z-1); }
.z-fig span { font-size: 14px; color: var(--muted); }
.z-fig b { font-size: 40px; line-height: 1; font-weight: var(--z-w-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.z-item { margin-left: var(--z-2); }
.z-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.z-toggle input { -webkit-appearance: none; appearance: none; position: relative; width: 38px; height: 23px; margin: 0; border-radius: 999px; background: var(--fill-2); cursor: pointer; transition: background .2s ease; }
.z-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--knob); box-shadow: var(--shadow-knob); transition: transform .2s ease; }
.z-toggle input:checked { background: var(--ink); }
.z-toggle input:checked::after { transform: translateX(15px); }

.z-list { list-style: none; margin: 0; padding: 0; }
.z-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.z-list li:last-child { border-bottom: 0; }
.z-list .k { min-width: 0; }
.z-list .k b { display: block; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.z-list .k span { display: block; color: var(--muted); font-size: 14px; }
.z-list li:has(.k span):has(> .v) { align-items: start; }
.z-list .v { line-height: 22px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.z-list .v.strong { color: var(--ink); font-weight: 600; }
.z-list a { color: var(--link); text-decoration: none; font-weight: 500; }
.z-prog { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.z-prog li { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 16px; line-height: 22px; }
.z-prog li:last-child { border-bottom: 0; }
.z-prog li span { font: 500 14px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.z-prog li.now { font-weight: 600; }
.z-family { margin: 0; display: grid; gap: 12px; }
.z-family div { display: grid; gap: 2px; }
.z-family dt { font-size: 13px; color: var(--muted); }
.z-family dd { margin: 0; font-size: 16px; font-weight: 500; }
.z-swatches { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.z-swatches span { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.z-swatches i { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair); }
.z-quotes { display: grid; gap: 4px; }
.z-quote { margin: 0; padding: 16px 0; border-top: 1px solid var(--hair); }
.z-quotes .z-quote:first-child { border-top: 0; padding-top: 4px; }
.z-quote p { margin: 0 0 8px; font-size: 17px; line-height: 25px; overflow-wrap: anywhere; }
.z-quote cite { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.z-notice { margin: 0; font-size: 14px; color: var(--muted); }
.z-ver { display: block; font-weight: 600; color: var(--ink); }

/* Countdown inside the main card, in the event's font */
.z-count { display: flex; gap: 28px; }
.z-count div { display: grid; gap: 2px; }
.z-count b { font-family: var(--title-font); font-weight: var(--title-weight); font-style: var(--title-style); letter-spacing: var(--title-tracking); font-size: 36px; line-height: 40px; font-variant-numeric: tabular-nums; }
.z-count span { font-size: 13px; color: var(--muted); }

/* Giving: form, then where to send, then thank you */
.z-check { display: flex !important; align-items: center; gap: 12px; font-weight: 400 !important; font-size: 15px !important; color: var(--ink) !important; }
.z-check { min-height: 44px; }
.z-check input { width: 18px !important; height: 18px; margin: 0; accent-color: var(--ink); }
.z-sendto { display: grid; gap: 12px; }
.z-paycard .n.big { font-size: 19px; font-weight: 700; }
.z-ref { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--z-3); padding: var(--z-4) 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.z-ref span { font-size: 14px; color: var(--muted); grid-column: 1; }
.z-ref b { font-size: var(--z-h2); line-height: var(--z-h2-lh); font-weight: var(--z-w-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; grid-column: 1; }
.z-ref .z-btn { grid-column: 2; grid-row: 1 / span 2; }
.z-row2 { display: grid; gap: 12px; justify-items: center; }
.z-done { display: grid; gap: var(--z-2); justify-items: start; }
.z-done b { font-size: var(--z-h3); line-height: var(--z-h3-lh); }
.z-done p { margin: 0; font-size: 15px; color: var(--muted); }

/* Personal invitation with entry pass */
.z-invname { margin: 0; font-family: var(--title-font); font-weight: var(--title-weight); font-style: var(--title-style); letter-spacing: var(--title-tracking); font-size: 24px; line-height: 28px; }
.z-pass { display: grid; justify-items: center; gap: 12px; padding: 20px 16px 16px; border-radius: 18px; background: var(--pass-bg); color: var(--pass-ink); }
.z-pass .z-note { color: var(--pass-mute); text-align: center; }
.z-pass img, .z-pass canvas { display: block; }

/* Shared photo album */
.z-album { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-1); border-radius: var(--z-r-field); overflow: hidden; }
.z-album a { aspect-ratio: 1; display: block; background: var(--tile); }
.z-album img { width: 100%; height: 100%; object-fit: cover; display: block; }
.z-filebtn { position: relative; display: grid !important; place-items: center; height: var(--z-control); align-self: end; border-radius: var(--z-r-pill); background: transparent; box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink) !important; font: 600 15px var(--sans) !important; cursor: pointer; }
.z-filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Voice notes */
.z-voice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.z-voice audio, .z-quote audio { height: 40px; max-width: 100%; }
.z-quote audio { display: block; margin-bottom: 8px; }

/* Give now or pledge */
/* Give now or pledge: one track, the chosen side a pill inside it (not two buttons) */
.z-seg.z-mode { gap: 0; padding: var(--z-1); border-radius: var(--z-r-pill); background: var(--fill); }
.z-mode label { flex: 1 1 0; }
.z-mode span { height: 36px; box-shadow: none; font-weight: var(--z-w-regular); }
.z-mode input:checked + span { background: var(--material); color: var(--ink); font-weight: var(--z-w-strong); box-shadow: var(--shadow-panel); }

/* Announcements */
.z-updates { list-style: none; margin: 0; padding: 0; display: grid; }
.z-updates li { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--hair); }
.z-updates li:first-child { border-top: 0; padding-top: 0; }
.z-updates time { font-size: 13px; color: var(--muted); }
.z-updates p { margin: 0; font-size: 16px; line-height: 23px; font-weight: 500; }
.z-recap { margin: 0; font-size: 16px; line-height: 23px; }
.z-foot { display: flex; flex-wrap: wrap; gap: var(--z-1) var(--z-4); padding-top: var(--z-4); font-size: 13px; color: var(--muted); }
.z-foot a { color: var(--muted); }
@media (max-width: 380px) { .z-two { grid-template-columns: 1fr; } }

/* Envelope opening (Paperless Post), optional */
.env-stage { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; align-content: center; gap: 24px; background: var(--page); transition: opacity .7s ease .9s, visibility 0s 1.6s; font-family: var(--sans); }
.env-stage.open { opacity: 0; visibility: hidden; }
.env { position: relative; width: min(82vw, 360px); aspect-ratio: 1.45; perspective: 1200px; }
.env-back, .env-front, .env-flap { position: absolute; inset: 0; border-radius: 6px; }
.env-back { background: var(--env-back); box-shadow: var(--shadow-env); }
.env-card { position: absolute; left: 8%; right: 8%; top: 9%; height: 82%; background: var(--env-card); border-radius: 3px; overflow: hidden; transition: transform 1s cubic-bezier(.2,.8,.2,1) .45s; }
.env-card img { width: 100%; height: 100%; object-fit: cover; }
.env-front { background: linear-gradient(to top right, var(--env-front) 50%, transparent 50.2%) left / 50.2% 100% no-repeat, linear-gradient(to top left, var(--env-front) 50%, transparent 50.2%) right / 50.2% 100% no-repeat, linear-gradient(to top, var(--env-front-2) 0 48%, transparent 48%); z-index: 2; }
.env-flap { height: 58%; background: var(--env-flap); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .6s ease; z-index: 3; }
.env-seal { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 4; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: var(--env-seal-ink); font: 600 13px var(--sans); box-shadow: var(--shadow-seal); transition: opacity .3s; }
.env-stage.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.env-stage.open .env-seal, .env-stage.open .env-hint { opacity: 0; }
.env-stage.open .env-card { transform: translateY(-46%); z-index: 2; }
.env-hint { margin: 0; font-size: 14px; color: var(--muted); }
.z-row2 .z-link { justify-self: center; }
body.z[data-mode="dark"] .z-toggle input:checked { background: var(--light-btn); }
body.z[data-mode="dark"] .z-toggle input:checked::after { background: var(--material); }

/* Host block: under the title on phones, under the photo on desktop (Luma) */
.z-host.z-host-side { display: none; }
@media (min-width: 900px) { .z-host.z-host-side { display: grid; } .z-host.z-host-main { display: none; } }
@media (min-width: 900px) { .z-card-b, .z-sec { padding-left: 28px; padding-right: 28px; } }

@media (prefers-reduced-motion: reduce) {
  .z-main, .z-btn, .z-seg span, .z-toggle input, .z-toggle input::after, .env-card, .env-flap, .env-seal, .env-stage { transition: none; }
  .z-main:active, .z-btn:active { transform: none; }
}