/* Guest pages (spec 7, 11). Built on site.css tokens + app.css parts. Tokens only, no new colors, no left borders.
   Sizes 16/18/22/28/35/44 px; spacing 4/8/12/16/24/32/48/64/96 px, all in rem. Mobile first. */

/* the footer sits at the bottom of short pages */
body.guest { background: var(--page); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.guest > .app-main { flex: 1 0 auto; }
body.guest > .app-header, body.guest > .app-foot { flex: none; }
[hidden] { display: none !important; }
.js .nojs-only { display: none; }
/* Script-moved focus (status boxes, headings after a save) shows no ring; keyboard focus rings stay (S5). */
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* header and footer line up with the one content column */
body.guest .app-header .wrap, body.guest .app-foot .wrap { max-width: 42rem; }
body.guest:has(.gw.wide) .app-header .wrap, body.guest:has(.gw.wide) .app-foot .wrap { max-width: 64rem; }

/* header: the language switch stays visible on phones (site.css hides .lang below 60em) */
body.guest .lang {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem;
  border: 2px solid var(--link); border-radius: var(--r-btn);
  color: var(--link); font-size: 1rem; font-weight: 700; text-decoration: none;
}
body.guest .lang:hover { text-decoration: underline; }

/* one calm column */
.gw { max-width: 42rem; }
.gw.wide { max-width: 64rem; }
.gw > * + * { margin-top: 1.5rem; }
.crumb-event { color: var(--text-2); font-weight: 700; font-size: 1rem; }

/* ---------- invite hero: band color, white type, the logo ring motif with a small ribbon ---------- */
.invite-hero { padding: 1.5rem 1.5rem 6rem; }
.invite-hero > * + * { margin-top: 0.5rem; }
.invite-hero .hero-eyebrow { font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.invite-hero .hero-when { margin-top: 1rem; font-family: var(--display); font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.invite-hero .hero-where { margin-top: 0.25rem; }
.invite-hero .hero-name { font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
/* phones: the whole ring at 7.5rem, never cropped; it sits below the text in the lower right (visual review 3) */
.invite-hero { padding-bottom: 10rem; }
.invite-hero [data-motif].hero-motif { right: 1.25rem; bottom: 1.25rem; width: 7.5rem; height: 7.5rem; color: #ffffff; }
/* answer step on phones: a short hero so the answer and "Continue" fit on the first screen (motif hidden) */
@media (max-width: 39.99em) {
  .invite-hero.phone-compact { padding: 1rem 1.25rem; }
  .invite-hero.phone-compact h1 { font-size: 1.75rem; }
  .invite-hero.phone-compact .hero-when { margin-top: 0.25rem; font-size: 1.125rem; }
  .invite-hero.phone-compact > * + * { margin-top: 0.25rem; }
  .invite-hero.phone-compact [data-motif] { display: none; }
  /* FIXES-R13 VISUAL M1: the venue line waits for the summary, so Continue is on the first screen */
  .invite-hero.phone-compact .hero-where { display: none; }
}
.invite-hero.compact { padding-bottom: 10rem; }
.invite-hero.compact .hero-when { margin-top: 0.5rem; }
.invite-hero.compact [data-motif].hero-motif { bottom: 1.25rem; width: 7.5rem; height: 7.5rem; }
@media (min-width: 40em) {
  .invite-hero, .invite-hero.compact { padding: 2.5rem 13rem 2.5rem 2.5rem; min-height: 14rem; }
  .invite-hero.compact { min-height: 12rem; padding-block: 2rem; }
  .invite-hero [data-motif].hero-motif, .invite-hero.compact [data-motif].hero-motif {
    top: 50%; bottom: auto; right: 2rem; width: 9.5rem; height: 9.5rem; transform: translateY(-50%);
  }
}

/* event facts sit on the tinted page, no card (not site.css .facts, which is a 3-column grid) */
.invite-facts > * + * { margin-top: 1rem; }
.invite-facts .event-facts dd + dt { margin-top: 0.5rem; }
@media (min-width: 40em) { .invite-facts .event-facts dd + dt { margin-top: 0; } }

/* ---------- RSVP form ---------- */
.rsvp .q { display: block; font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--text); }
.rsvp legend .q { margin-bottom: 0.25rem; }
.stepno { color: var(--text-2); font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; }
.stepno + .q, .stepno + fieldset { margin-top: 0.25rem; }
.group { margin-top: 1.5rem; }
.q + .group, .q + p { margin-top: 1rem; }
.group + .group, .group + .sms-block, .sms-block + .group { margin-top: 2rem; }
.group .hint { margin-bottom: 0.5rem; }
.group legend + .choices, .group .field-error + .choices { margin-top: 0.25rem; }
.answer-choices .choice { min-height: 3.5rem; font-size: 1.125rem; }
.choices.cols-2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .choices.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field.sub { margin-top: 0.75rem; }
.group > .field + .field { margin-top: 1rem; }
select.num { max-width: 8rem; }
.attendee { padding-top: 1.5rem; }
.attendee .field + .field { margin-top: 1rem; }
.not-sent { margin-top: 2rem; color: var(--text-2); font-size: 1rem; font-weight: 700; }
.not-sent + .actions { margin-top: 0.75rem; }

.sms-block { margin-top: 1.5rem; }
.sms-block > * + * { margin-top: 1rem; }
.consent { background: var(--page); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 1rem; }
.consent.has-error { border: 2px solid var(--error); }
.consent .field-error { margin-bottom: 0.5rem; }
.consent-label { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 400; cursor: pointer; }
.consent-label input { flex: none; width: 1.375rem; height: 1.375rem; margin-top: 0.25rem; accent-color: var(--band); }
.consent .hint { margin-top: 0.5rem; }
.consent-label span { font-weight: 700; }
.consent-terms { margin-top: 0.75rem; }
.consent-terms summary { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--link); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.consent-terms p { margin-top: 0.5rem; font-size: 1rem; }
.req { font-weight: 400; color: var(--text-2); font-size: 1rem; }

/* Who's coming: paired steppers with one live total */
.party-counts > * + * { margin-top: 1rem; }
.party-counts .stepper-field { margin-top: 1.5rem; }
.party-counts .party-limit { margin-top: 0.5rem; }
.party-total { font-weight: 700; }

.linkbtn.back, .actions .linkbtn { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; padding: 0 0.25rem; font-weight: 700; }
a.linkbtn { color: var(--link); }
.actions.center { justify-content: center; }
.keep-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; font-weight: 700; }   /* aligned with the button edge (visual 4) */
/* round 4: hint inside a choice (staff "on shift" under Yes), STOP note under the contact line, inbox answered list */
.choice.has-hint > span { display: grid; gap: 0.125rem; }
.choice-hint { display: block; color: var(--text-2); font-weight: 400; font-size: 1rem; }
.stop-note { display: block; margin-top: 0.25rem; }
.released-again { margin-top: 1rem; }

/* ---------- summary ---------- */
.summary > * + * { margin-top: 1.5rem; }
.summary h1 { font-size: 1.75rem; }
.summary > h1 + .status-box { margin-top: 0.75rem; }
/* one large block (the h1); the status lines are body text, the first one bold (max 2 large blocks, T5) */
.status-box { display: grid; gap: 0.5rem; justify-items: start; }
.status-line { font-size: 1.125rem; font-weight: 700; line-height: 1.45; }
.status-box .status-line + .status-line { font-weight: 400; }
/* FIXES-R7 VISUAL H2: the text column never collapses under a long Change link (EN+ES at 360/390) */
.summary-list > div { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, auto); gap: 0.25rem 1rem; padding-block: 0.75rem; border-top: 1px solid var(--line); align-items: baseline; }
.summary-list > div:last-child { border-bottom: 1px solid var(--line); }
.summary-list dt { font-weight: 700; grid-column: 1; }
/* FIXES-R8 VISUAL L1/L2: on a phone the label and its Change link share the first line, the value runs full width
   below; every row keeps one height so the list reads as a steady rhythm */
/* FIXES-R9 VISUAL L1: no fixed row height (short rows no longer look empty); rows keep a small gap */
.summary-list > div { row-gap: 0.25rem; }
.summary-list dd { margin: 0; grid-column: 1; }
.summary-list dd:not(.act) { grid-column: 1 / -1; }
.summary-list dd.act { grid-column: 2; grid-row: 1; align-self: start; text-align: right; }
@media (min-width: 30em) {
  .summary-list > div { grid-template-columns: 11rem minmax(0, 1fr) auto; }
  .summary-list dd, .summary-list dd:not(.act) { grid-column: 2; }
  .summary-list dd.act { grid-column: 3; grid-row: 1; align-self: start; }
}
/* FIXES-R10 VISUAL L1: no extra space under the row; the padding keeps the 44px tap target (1.5rem line + 2 x 0.625rem) */
.summary-list a.change { display: inline-flex; align-items: center; min-height: 0; padding-block: 0.625rem; margin-block: -0.625rem; line-height: 1.5rem; font-weight: 700; }
/* summary actions (visual review 3): the primary action on its own row, the secondary ones on the next row */
.summary-actions { display: grid; gap: 0.75rem; justify-items: start; }
.summary-actions .act-primary, .summary-actions .act-secondary { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 29.99em) {
  .summary-actions { justify-items: stretch; }
  .summary-actions .act-primary .btn { width: 100%; justify-content: center; }
}
.finish-details .btn { margin-top: 0.25rem; }
.attendee-list li .muted { font-size: 1rem; }
/* per-item "How many people?" under the food choices */
.counts { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.counts .count-field { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.counts .count-field label { font-weight: 400; }
.counts select.num { width: 5.5rem; }
.hotel-note { margin-top: 0.5rem; }
.asl-note { margin-bottom: 0.75rem; }
.consent-links { margin-top: 0.5rem; font-size: 1rem; }
.consent.just-shown { outline: 3px solid var(--band); outline-offset: 2px; }
.attendee-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-block: 0.75rem; border-top: 1px solid var(--line); max-width: none; }
.notice p + p { margin-top: 0.5rem; }
.notice p { font-weight: 400; }
.release-link a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.reconfirm { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.reconfirm > * + * { margin-top: 0.75rem; }
.reconfirm h2, .offer-box h2 { font-size: 1.375rem; }
.reconfirm .actions { margin-top: 1rem; }
.offer-box > * + * { margin-top: 1rem; }
.offer-box h1 { font-size: 1.75rem; }
.offer-box > .offer-by { margin-top: 0.25rem; }
.pass .pass-ready { margin-top: 1.5rem; }
.offer-box .actions { margin-top: 1rem; }
.sms-stop { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.sms-stop .btn { margin-top: 0.5rem; }

/* ---------- entry pass ---------- */
.pass { position: relative; }
.pass > * + * { margin-top: 1rem; }
.pass .eyebrow { text-transform: uppercase; letter-spacing: 0.06em; }
.pass h1.pass-name { font-size: 2.1875rem; margin-top: 0.25rem; }
.pass .pass-event { font-family: var(--display); font-size: 1.375rem; font-weight: 700; margin-top: 0.25rem; }
.pass .qr { display: block; margin-inline: auto; }
.pass p { margin-inline: auto; }
/* phones: the whole ring at 7.5rem, centred above the name; wider screens: top right (visual review 3) */
.pass [data-motif].pass-motif { position: static; display: block; width: 7.5rem; height: 7.5rem; margin: 0 auto 0.5rem; color: #1a7eb0; }
/* FIXES-R5 visual L-1: the same 7.5rem ring on wider screens; the centred heading lines keep clear of it */
@media (min-width: 40em) {
  .pass [data-motif].pass-motif { position: absolute; width: 7.5rem; height: 7.5rem; top: 1.25rem; right: 1.25rem; margin: 0; }
  .pass > .eyebrow, .pass > h1.pass-name, .pass > .pass-event { padding-inline: 7rem; }
}
.pass-facts { display: grid; gap: 0; max-width: 24rem; margin-inline: auto; text-align: left; }
.pass-facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.75rem; border-top: 1px solid var(--line); }
.pass-facts dt { font-weight: 700; }
.pass-facts dd { margin: 0; }

/* ---------- check-in ---------- */
.here-form { margin-top: 1.5rem; }
.welcome > * + * { margin-top: 0.75rem; }
.welcome h1 { font-size: 2.1875rem; }
.vip-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 700; }
/* FIXES-R11 VISUAL M3: the ring motif, 120px, above the h1 of the done page and the find-your-invitation page */
.gw [data-motif].here-motif { display: block; width: 7.5rem; height: 7.5rem; margin: 0 0 0.75rem; color: #1a7eb0; }
.arrive-find .arrive-printed { margin-top: 0.5rem; }
/* FIXES-R12 personas L: Face ID sits below "Send me my link" (quiet), separated like the form above it */
.arrive-find .email-link + .passkey-signin { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
/* FIXES-R12 personas M2: "Your seats: N" always shown above the stepper, so the check-in button never moves */
.here-form .limit-note { margin-top: 0.25rem; }
/* FIXES-R12 VISUAL M1: the guest date on the answer step */
.hint .answer-by { display: block; margin-top: 0.25rem; color: var(--text); }
.later-note { margin-top: 1.5rem; }
.later-note + details.more { margin-top: 0.5rem; }
/* VISUAL L3: a sent link is good news (success style, not a plain notice) */
.notice.ok { border-color: var(--ok); background: var(--ok-bg); }
/* FIXES-R11 Decision: "This phone is set up for Maria. Switch to Carlos?" */
.device-switch { margin-top: 1rem; }
.device-switch .notice { margin-bottom: 0; }
.device-switch form { margin-top: 0.75rem; }
/* FIXES-R13: first-remember note and "Forget this phone" */
.device-set { margin-top: 1rem; }
.device-set .notice { margin-bottom: 0; }
.device-forget { margin-top: 1rem; }
.device-forget .linkbtn { min-height: 2.75rem; padding: 0 0.25rem; }
details.more { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
details.more summary { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--link); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.door-show { text-align: center; }
.door-show > * + * { margin-top: 1rem; }
.door-show .eyebrow { font-size: 1.125rem; }
.door-show .door-name { font-size: 2.75rem; line-height: 1.1; }
.door-show .door-party { font-family: var(--display); font-size: 1.75rem; font-weight: 700; }
.door-show p { margin-inline: auto; }

/* ---------- /in, unknown code ---------- */
.lede.body-face { font-family: var(--body); font-size: 1.125rem; line-height: 1.45; }
.email-link { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.email-link h2 { font-size: 1.75rem; }
.email-link .field { margin-top: 1rem; }
.panel h2 { font-size: 1.75rem; }
/* a heading inside a panel starts a new group: more space above than below (L2) */
.panel > h2:not(:first-child), .panel > .email-link > h2 { margin-top: 2rem; }
.panel > .email-link { margin-top: 2rem; }
.panel > .email-link > h2 { margin-top: 0; }
.panel .error-summary h2 { font-size: 1.375rem; margin-top: 0; }
/* a heading right after hidden inputs is still the first thing in its panel (visual review 3) */
.panel > input[type=hidden] + h2 { margin-top: 0; }
/* the second-language title on the bilingual 404/429 (visual review 3: 1.75rem, not the display h2 size) */
.panel[lang] > h2.second-lang-title { font-size: 1.75rem; line-height: 1.2; margin-top: 0; }

/* ---------- guest passkeys (spec 7.2, 7.3) ---------- */
.js-only, .no-webauthn { display: none; }
.has-webauthn .js-only { display: block; }
.has-webauthn .actions.js-only { display: flex; }
.no-webauthn-browser .no-webauthn, html:not(.js) .no-webauthn { display: block; }
.pk-status:empty { display: none; }
.pk-status { font-weight: 700; }
.pk-status.bad { color: var(--error); }
.passkey-box { padding-top: 1rem; border-top: 1px solid var(--line); }
.passkey-box .hint { margin-top: 0.5rem; }
.passkey-signin { margin-top: 1rem; }
.passkey-signin > * + * { margin-top: 0.5rem; }

/* ---------- camera + album (the file picker rule lives in app.css, shared with the photographer page) ---------- */
.album { margin-top: 1.5rem; }
.album li { max-width: none; }
.album a { display: block; border-radius: var(--r-btn); }

/* ---------- legal pages ---------- */
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2rem; }
.prose ul.plain { list-style: disc; padding-left: 1.5rem; display: grid; gap: 0.5rem; }
.prose .event-facts { margin-top: 1.5rem; }

/* ---------- fix round 6 ---------- */
/* long email addresses wrap inside the panel on a phone (visual review 6) */
.nowrap-any { overflow-wrap: anywhere; }
/* footer help line: "Questions? Call ... or email ..." (spec 7) */
.app-foot .help-line { overflow-wrap: anywhere; }
.pk-set-line, .closed-note { margin-top: 0.75rem; }
.attendee-list li .att-status { color: var(--text-2); }
.inbox-status-lead { margin-top: 1rem; }
/* FIXES-R9 VISUAL L3: the name stands on its own (no colon); bold so it reads as the label when the line stacks */
.attendee-list li .att-name { font-weight: 700; }

/* ---------- Holiday theme (2026-10-09, owner: "use a festive background"; revised after independent design review) ----------
   The guest pages take the printed card's look: deep pine page with the card's wreath and ornaments, the card's
   lettering in the hero (Fraunces display italic, gold Fraunces year), and an ivory paper column so every form stays
   dark-on-light. Palette from the card: pine #0b2418, ivory #fbf7ee, gold #e2c27a, cranberry #a8162b. No left borders. */
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); }
body.guest {
  --pine: #0b2418; --gold: #e2c27a; --gold-soft: #f1dda8; --gold-deep: #9a7432; --ivory-text: #fbf3df;
  --page: #fbf7ee; --card: #fffdf8; --line: #ddd2bd; --alt: #f3ecdd;
  --text-2: #5c5347; --line-strong: #857660;
  --band: var(--pine); --link: #17603a; --cta: #a8162b; --cta-hover: #86101f;
  background: var(--pine) url("/assets/img/festive-bg.jpg") right top / cover no-repeat fixed;
}
/* phones: plain pine page; the hero carries the art (a 50 px strip of art under the header looked accidental) */
@media (max-width: 39.99em) { body.guest { background: var(--pine); } }

/* header and footer: dark glass, ivory and gold type */
body.guest .app-header { background: rgb(11 36 24 / 0.86); border-bottom: 1px solid rgb(226 194 122 / 0.35); }
body.guest .app-header .brand, body.guest .app-header .wordmark { color: var(--ivory-text); }
/* the real logo file, whole (object-fit: contain), on an ivory disc with a gold ring, as on the card */
body.guest .app-header .brand img {
  width: 2.75rem; height: 2.75rem; aspect-ratio: 1; object-fit: contain; padding: 3px; border-radius: 50%;
  background: #fbf7ee; box-shadow: 0 0 0 2px var(--gold);
}
body.guest .lang { border-color: var(--gold); color: var(--gold-soft); }
body.guest .app-header .call { background: var(--gold); border-color: var(--gold); color: var(--pine); }
/* small phones: the call button becomes a 44 px phone icon so the header stays one row (the number is in the footer) */
@media (max-width: 29.99em) {
  body.guest .app-header .call { width: 2.75rem; padding: 0; justify-content: center; }
  body.guest .app-header .call svg { display: block; }
  body.guest .app-header .call .call-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.guest .app-header .wordmark { font-size: 0.9375rem; }
  body.guest .app-header .bar { flex-wrap: nowrap; gap: 0.5rem; }
}
body.guest .app-foot { background: rgb(11 36 24 / 0.92); border-top: 1px solid rgb(226 194 122 / 0.35); color: var(--ivory-text); }
body.guest .app-foot a { color: var(--gold-soft); }
body.guest .app-foot .foot-small { color: rgb(251 243 223 / 0.8); }

/* the paper column; one layer only: panels inside it lose their own card frame and are split by a thin rule */
body.guest .app-main { padding-inline: 0.75rem; }
body.guest .app-main > .wrap {
  background: var(--page); border-radius: 1rem; padding-block: 1rem 1.5rem;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.25), 0 18px 48px rgb(0 0 0 / 0.35);
}
@media (min-width: 40em) { body.guest .app-main > .wrap { padding: 1.5rem 1.75rem 2rem; } }
body.guest .app-main > .wrap .panel { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
body.guest .app-main > .wrap.gw > .panel + *, body.guest .app-main > .wrap.gw > * + .panel { border-top: 1px solid var(--line); padding-top: 1.5rem; }
/* right under the hero the hero itself is the divider */
body.guest .app-main > .wrap.gw > .invite-hero + * { border-top: 0; padding-top: 0.5rem; }
body.guest .choice { background: #fffdf8; }
body.guest .choice:has(input:checked) { background: #f6efe0; border-color: var(--pine); }
body.guest .choice input { accent-color: var(--pine); }
body.guest .pass [data-motif], body.guest [data-motif].here-motif { color: var(--gold-deep); }

/* hero: the card's lettering on pine; the wreath art fades in from the right (no hard seam) */
body.guest .invite-hero {
  background: var(--pine); color: var(--ivory-text); padding: 1.5rem; min-height: 0;
  isolation: isolate; position: relative; overflow: clip;
}
body.guest .invite-hero::before {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 62%; z-index: -1;
  background: url("/assets/img/festive-hero.jpg") right 20% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
body.guest .invite-hero [data-motif] { display: none; }
body.guest .invite-hero .hero-eyebrow { color: var(--gold); letter-spacing: 0.18em; }
body.guest .invite-hero h1, body.guest .invite-hero .hero-name {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 144; color: var(--ivory-text); font-size: 2.25rem; line-height: 1.02; letter-spacing: -0.01em;
}
body.guest .invite-hero .hero-year {
  font-family: "Fraunces", Georgia, serif; font-style: normal; font-weight: 600; font-variation-settings: "opsz" 144; color: var(--gold);
}
/* a short gold rule under the title, as on the card (a top rule, never a left border) */
body.guest .invite-hero .hero-when::before { content: ""; display: block; width: 3.5rem; height: 2px; background: var(--gold); margin: 0.25rem 0 0.875rem; }
body.guest .invite-hero .hero-when { color: var(--ivory-text); }
body.guest .invite-hero .hero-where { color: rgb(251 243 223 / 0.9); }
@media (max-width: 39.99em) {
  body.guest .invite-hero { padding-right: 4.5rem; }
  /* phones: the art keeps to the right edge so it never sits under the date or the eyebrow */
  body.guest .invite-hero::before { width: 38%; background-position: 20% 20%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 65%); mask-image: linear-gradient(90deg, transparent 0%, #000 65%); }
  body.guest .invite-hero .hero-eyebrow { letter-spacing: 0.12em; }
  body.guest .invite-hero .hero-when .sep { display: none; }
  body.guest .invite-hero .hero-when .nw:last-child { display: block; }
  /* answer step: "Continue" stays on the first screen (FIXES-R13 VISUAL M1) */
  body.guest .invite-hero.phone-compact { padding: 1rem 4.5rem 1rem 1.25rem; }
  body.guest .invite-hero.phone-compact h1 { font-size: 1.875rem; }
  body.guest .invite-hero.phone-compact .hero-when::before { margin: 0.125rem 0 0.5rem; }
}
@media (min-width: 40em) {
  body.guest .invite-hero, body.guest .invite-hero.compact { padding: 2.25rem 13rem 2.25rem 2.25rem; min-height: 0; }
  body.guest .invite-hero h1, body.guest .invite-hero .hero-name { font-size: 3.25rem; }
  body.guest .invite-hero.compact .hero-name { font-size: 2.5rem; }
}
/* wide screens: the page art already shows the wreath, so the hero is plain pine (no second wreath beside the first) */
@media (min-width: 64em) {
  body.guest .invite-hero::before { display: none; }
  body.guest .invite-hero, body.guest .invite-hero.compact { background: linear-gradient(90deg, #0b2418, #0f2e1f); padding-right: 2.25rem; }
}
@media (forced-colors: active) {
  body.guest, body.guest .invite-hero { background-image: none !important; }
  body.guest .invite-hero::before { display: none; }
}
@media print {
  body.guest, body.guest .app-main > .wrap, body.guest .panel, body.guest .invite-hero, body.guest .app-header, body.guest .app-foot { background: #ffffff !important; box-shadow: none !important; }
  body.guest .invite-hero::before { display: none !important; }
  body.guest .app-header .wordmark, body.guest .app-foot, body.guest .app-foot .foot-small,
  body.guest .invite-hero .hero-eyebrow, body.guest .invite-hero .hero-when, body.guest .invite-hero .hero-where,
  body.guest .invite-hero h1, body.guest .invite-hero .hero-name, body.guest .invite-hero .hero-year { color: #1a2733 !important; }
  body.guest .invite-hero .hero-when::before { background: #1a2733; }
  /* the guest's own link never prints (it carries their personal code) */
  body.guest a[href^="/"]::after, body.guest a.change::after, body.guest .linkbtn::after { content: none !important; }
}

@media (forced-colors: active) {
  .invite-hero { border: 1px solid CanvasText; }
  .invite-hero [data-motif], .pass [data-motif], .gw [data-motif].here-motif { color: CanvasText; }
  .consent { border: 1px solid CanvasText; }
  .btn-danger { border: 2px solid CanvasText; }
}

/* FIXES-R9 VISUAL L6: the pass prints on US letter with half-inch margins */
@media print {
  @page { size: letter; margin: 0.5in; }
  body.guest { background: #ffffff; font-size: 12pt; }
  .print-hide, [data-print], .lang, .lang-form, details.more { display: none !important; }
  .app-main { padding-block: 0; }
  .panel, .pass { border: 0; box-shadow: none; padding: 0; }
  .pass .qr { width: 3in; height: 3in; border: 0; padding: 0; }
  .invite-hero { background: #ffffff; color: var(--text); border: 1px solid var(--line); }
  .invite-hero h1, .invite-hero p { color: var(--text); }
  .invite-hero [data-motif] { color: var(--band); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 1rem; overflow-wrap: anywhere; }
}

/* Spec v25: the public program on the pass page (titles and times only). */
.pass-program { margin-top: 1.5rem; text-align: left; }
.pass-program h2 { font-size: 1.375rem; }
.pass-program-list { list-style: none; padding: 0; margin: 0.75rem 0 0.5rem; display: grid; gap: 0.25rem; }
.pass-program-list li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; padding: 0.375rem 0; border-top: 1px solid var(--line); max-width: none; }
.pass-program-list li:first-child { border-top: 0; }
.pass-program-time { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Open RSVP form (routes/rsvp-open.js): the bot trap field is never shown (CSP blocks inline styles, so it lives here). */
.rsvp-open .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }