/* ── Contrast contract ─────────────────────────────────────────────────
   Parsed by the Tier-4 contrast gate. -large and -3to1 require 3:1;
   everything else requires 4.5:1.                                        */
/* @contrast-pair:       --fg on --surface */
/* @contrast-pair:       --fg on --card-bg */
/* @contrast-pair:       --fg on --banner-bg */
/* @contrast-pair:       --fg on --wash-bg */
/* @contrast-pair:       --fg on --wash-floor */
/* @contrast-pair:       --muted on --surface */
/* @contrast-pair:       --muted on --card-bg */
/* @contrast-pair:       --muted on --banner-bg */
/* @contrast-pair:       --link-fg on --surface */
/* @contrast-pair:       --link-fg on --card-bg */
/* @contrast-pair:       --link-fg on --banner-bg */
/* @contrast-pair:       --link-fg on --wash-floor */
/* @contrast-pair:       --accent on --surface */
/* @contrast-pair:       --accent on --card-bg */
/* @contrast-pair:       --accent on --banner-bg */
/* @contrast-pair:       --accent on --nav-bg */
/* @contrast-pair:       --error-fg on --surface */
/* @contrast-pair:       --error-fg on --card-bg */
/* @contrast-pair:       --error-fg on --banner-bg */
/* @contrast-pair:       --warn-fg on --banner-bg */
/* @contrast-pair:       --success-fg on --banner-bg */
/* @contrast-pair:       --success-fg on --card-bg */
/* @contrast-pair:       --nav-fg on --nav-bg */
/* @contrast-pair:       --on-accent on --accent */
/* @contrast-pair:       --on-accent on --accent-hover-bg */
/* @contrast-pair:       --on-sage on --sage */
/* @contrast-pair:       --on-sage on --sage-hover-bg */
/* @contrast-pair:       --hero-fg on --hero-band-bg */
/* @contrast-pair:       --hero-accent on --hero-band-bg */
/* @contrast-pair:       --foot-fg on --foot-bg */
/* @contrast-pair-large: --accent on --wash-floor */
/* @contrast-pair-3to1:  --focus-ring on --surface */
/* @contrast-pair-3to1:  --focus-ring on --focus-ring-halo */
/* @contrast-pair-3to1:  --focus-ring on --wash-floor */
/* @contrast-pair-3to1:  --focus-ring-halo on --hero-band-bg */
/* @contrast-pair-3to1:  --focus-ring-halo on --foot-bg */
/* @contrast-pair-3to1:  --control-fg on --card-bg */
/* @contrast-pair-3to1:  --control-fg on --surface */
/* @contrast-pair-3to1:  --sage on --surface */
/* @contrast-pair-3to1:  --sage on --card-bg */
/* @contrast-pair-3to1:  --on-accent on --icon-sage-bg */
/* @contrast-pair-3to1:  --on-accent on --icon-lilac-bg */
/* @contrast-pair-3to1:  --icon-sage-bg on --card-bg */
/* @contrast-pair-3to1:  --icon-lilac-bg on --card-bg */

:root {
  color-scheme: only light;

  /* colour — the reference mock's palette, deepened where text needs it (§7.0) */
  --surface:          #faf7f2;   /* warm cream: the page ground */
  --card-bg:          #fffdf9;   /* cards, the invitation panel */
  --banner-bg:        #f1ecf5;   /* soft lavender tint: banners, chips */
  --wash-bg:          #efe9f4;   /* the RSVP band's base, under the watercolour wash */
  --wash-floor:       #d2cdd7;   /* black at --wash-opacity over --wash-bg: the darkest the wash can composite to (§7.8) */
  --fg:               #34323b;   /* charcoal, never pure black */
  --muted:            #66636f;
  --accent:           #6e5a8e;   /* lavender: primary buttons, the current nav link, script headings */
  --accent-hover-bg:  #5a477a;
  --on-accent:        #fffdf9;
  --link-fg:          #5f4b80;
  --sage:             #5e6f52;   /* sage: secondary buttons */
  --sage-hover-bg:    #4c5b42;
  --on-sage:          #fffdf9;
  --icon-sage-bg:     #7d8d6e;   /* the card icon discs — non-text, 3:1 (§3.2) */
  --icon-lilac-bg:    #9a83ba;
  --error-fg:         #a3271b;
  --warn-fg:          #7a4b00;
  --success-fg:       #2f6b3f;
  --nav-bg:           #faf7f2;   /* 100% alpha — never translucent */
  --nav-fg:           #34323b;
  --hero-band-bg:     #4b5b6e;   /* dusty gray-blue; 100% alpha */
  --hero-fg:          #fbf8f3;
  --hero-accent:      #e2d8ee;   /* the time line on the band */
  --foot-bg:          #5e6f52;   /* the muted green footer bar */
  --foot-fg:          #f6f4ee;
  --control-fg:       #6f6a7a;   /* control strokes: radio/checkbox/input borders */
  --focus-ring:       #0b5fd0;
  --focus-ring-halo:  #fbf8f3;
  --hairline:         #dcd3e3;   /* decorative only; never the sole boundary cue */
  --frame:            #c9bfd6;   /* the invitation's double frame; decorative */
  --leaf:             #8b9a7c;   /* leafy dividers, flourishes, the wreath; decorative */
  --lilac-soft:       #c9b8dd;   /* petals in the inline art; decorative */

  /* type — §12 */
  --font-script: "Wedding Script", "Snell Roundhand", "Apple Chancery", "URW Chancery L", cursive;
  --font-serif:  "Wedding Serif", Georgia, "Times New Roman", serif;
  --step--1: clamp(0.875rem, 0.855rem + 0.09vw, 0.9375rem);
  --step-0:  clamp(1rem,     0.965rem + 0.16vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.06rem  + 0.29vw, 1.375rem);
  --step-2:  clamp(1.375rem, 1.24rem  + 0.6vw,  1.875rem);
  --step-3:  clamp(1.75rem,  1.5rem   + 1.1vw,  2.5rem);
  --step-4:  clamp(2.25rem,  1.75rem  + 2.2vw,  3.75rem);
  --step-5:  clamp(2.75rem,  1.9rem   + 4vw,    5rem);      /* the hero names only */
  --track:    0.14em;   /* letter-spacing of .caps */
  --lh-tight: 1.15;
  --lh-body:  1.6;
  --measure:  65ch;

  /* space — 4px grid */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem;  --space-xs: 0.75rem;
  --space-s:   1rem;    --space-m:   1.5rem;  --space-l:  2rem;
  --space-xl:  3rem;    --space-2xl: 4.5rem;

  /* structure */
  --wrap:       68rem;
  --radius:     2px;    /* the theme's square corners; 8px was the pre-theme value */
  --hairline-w: 1px;
  --nav-h:      6.4rem;
  --progress-h: 4.25rem;
  --tap:        44px;   /* minimum tap target */
  --wash-opacity: 0.12; /* the wash art's opacity; --wash-floor is derived from it (§7.8) */

  /* SC 2.4.11 — nothing is ever hidden behind a sticky bar */
  scroll-padding-top:    calc(var(--nav-h) + var(--space-2xs));
  scroll-padding-bottom: calc(var(--progress-h) + var(--space-2xs));
}

/* Fonts: the matching preload uses the exact, stable serif URL. */
@font-face { font-family: "Wedding Serif"; src: url("/static/fonts/serif.var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC; }
@font-face { font-family: "Wedding Script"; src: url("/static/fonts/script.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC; }

/* Reset and accessible primitives. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--fg); font: var(--step-0)/var(--lh-body) var(--font-serif); }
img, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
button, summary, label { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
a { color: var(--link-fg); text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
p, h1, h2, h3, figure { margin: 0 0 var(--space-s); }
h1, h2, h3 { font-weight: 400; line-height: var(--lh-tight); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 3px var(--focus-ring-halo); }
[hidden] { display: none !important; }
.vh, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: .5rem; left: .5rem; z-index: 100; padding: .75rem 1rem; background: var(--card-bg); transform: translateY(-180%); }
.skip:focus { transform: translateY(0); }
.caps { font-size: var(--step--1); letter-spacing: var(--track); text-transform: uppercase; }
.script { font-family: var(--font-script); font-size: var(--step-4); font-weight: 400; line-height: 1.2; color: var(--accent); }
.small { font-size: var(--step--1); }
.muted, .field-help { color: var(--muted); }
.page-wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }
.prose { max-width: var(--measure); margin-inline: auto; }
.icon { width: 2.25rem; height: 2.25rem; vertical-align: middle; }
.rule { margin: 1.15rem 0; font-size: 1.5rem; line-height: 1; letter-spacing: .2em; }
.leaf-rule { color: var(--leaf); font-size: 2rem; line-height: 1; }
.button, button { display: inline-flex; justify-content: center; align-items: center; gap: .6rem; min-height: var(--tap); padding: .55rem 1.4rem; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; line-height: 1.35; }
.button:hover, button:hover { background: var(--accent-hover-bg); border-color: var(--accent-hover-bg); text-decoration: none; }
.button--sage { background: var(--sage); color: var(--on-sage); border-color: var(--sage); }
.button--sage:hover { background: var(--sage-hover-bg); border-color: var(--sage-hover-bg); }

/* One semantic menu list, rendered in native narrow/wide containers. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--nav-bg); color: var(--nav-fg); border-bottom: 1px solid var(--hairline); }
.nav-wrap { width: min(76rem, calc(100% - 3rem)); min-height: 6.4rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { position: relative; display: grid; place-items: center; width: 7rem; height: 6rem; flex: 0 0 auto; color: var(--nav-fg); text-decoration: none; }
.brand > span:last-child { font-size: 1.7rem; letter-spacing: 0; word-spacing: -.08em; margin-bottom: .3rem; white-space: nowrap; }
.wreath { position: absolute; inset: 0; background: url("/static/art/monogram-watercolor.webp") center / 100% 100% no-repeat; pointer-events: none; }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1.7rem; list-style: none; padding: 0; margin: 0; }
.nav-links a { display: flex; align-items: center; min-width: var(--tap); min-height: var(--tap); color: var(--nav-fg); font-size: .875rem; letter-spacing: .11em; text-transform: uppercase; text-decoration: none; }
.nav-links a[aria-current], .nav-links a:hover { color: var(--accent); }
.nav-narrow { display: none; }
.nav-narrow summary { padding: .6rem .7rem; min-height: var(--tap); list-style: none; letter-spacing: .1em; }
.nav-narrow summary span { margin-left: 1rem; }

/* The opaque hero band preserves contrast independently of the photograph. */
.hero { position: relative; isolation: isolate; min-height: 39rem; display: grid; grid-template-columns: minmax(20rem, 34%) 1fr; background: var(--hero-band-bg); overflow: hidden; }
.hero-photo { grid-column: 2; grid-row: 1; min-width: 0; }
.hero-photo picture, .hero-photo img { width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 65% center; }
.hero-band { grid-column: 1; grid-row: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 3.5rem 2rem 11rem; background: var(--hero-band-bg); color: var(--hero-fg); text-align: center; z-index: 1; }
.hero-band .kicker { font-size: .875rem; letter-spacing: .2em; }
.hero-band h1 { display: flex; flex-direction: column; width: 100%; margin: .2rem 0 0; font-size: var(--step-5); font-weight: 300; text-transform: uppercase; letter-spacing: .13em; line-height: 1.15; }
.hero-band h1 em { display: block; font-family: var(--font-script); font-size: var(--step-3); font-style: normal; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.hero-band time { display: flex; flex-direction: column; }
.hero-time { color: var(--hero-accent); letter-spacing: .14em; }
.hero-location { font-size: var(--step--1); margin: .4rem 0 1.3rem; }
.hero-button { border: 1px solid var(--hero-accent); }
/* Crop the two distinct ends of one garland into natural, untiled corner accents. */
.hero::before, .hero::after { content: ""; position: absolute; z-index: 2; pointer-events: none; bottom: 0; width: 15rem; height: 10rem; background: url("/static/art/hero-watercolor.webp") bottom left / auto 100% no-repeat; }
.hero::before { left: 0; mask-image: linear-gradient(to right, #000 72%, transparent); }
.hero::after { right: 0; background-position: bottom right; mask-image: linear-gradient(to left, #000 72%, transparent); }

/* Formal invitation: double frame, botanical corners, a portrait and calendar. */
.invite-frame { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: 2.5rem; margin-block: 2rem 1.5rem; border: 1px solid var(--frame); background: var(--card-bg); }
.invite-frame::before, .invite-frame::after { position: absolute; z-index: -1; content: ""; width: 12rem; height: 17rem; pointer-events: none; background-size: contain; background-repeat: no-repeat; }
.invite-frame::before { right: -2.5rem; top: -2.5rem; background-image: url("/static/art/corner-watercolor-a.webp"); }
.invite-frame::after { transform: rotate(180deg); left: -2.5rem; bottom: -3rem; background-image: url("/static/art/corner-watercolor-b.webp"); }
.invite-photo { border: 1px solid var(--frame); padding: .5rem; outline: 1px solid var(--frame); outline-offset: .4rem; }
.invite-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.invite-copy { text-align: center; padding: 1rem 1.3rem; }
.invite-copy .caps { font-size: .875rem; }
.names { color: var(--fg); font-size: var(--step-4); margin: .8rem 0 1rem; }
.names .and { display: block; font-family: var(--font-serif); font-size: 1rem; color: var(--leaf); line-height: 1.7; }
.calendar-block { display: flex; justify-content: center; align-items: center; gap: 1.2rem; margin: 1.7rem 0 .6rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .1em; }
.calendar-block > span { border-block: 1px solid var(--frame); padding: .45rem .2rem; }
.calendar-block > div { padding-inline: 1rem; border-inline: 1px solid var(--frame); }
.calendar-block strong { display: block; font-weight: 400; font-size: 2.8rem; line-height: 1.2; }
.time-line, .little-heart { color: var(--accent); }
.invite-copy address { max-width: 25ch; margin-inline: auto; line-height: 1.4; }
.little-heart { margin-top: .9rem; margin-bottom: 0; }

/* Event facts and editorial cards share the invitation's fine frame. */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem; }
.info-card { padding: 1.5rem 1.4rem 1rem; border: 1px solid var(--hairline); background: var(--card-bg); text-align: center; display: flex; flex-direction: column; align-items: center; }
.icon-disc { display: inline-grid; place-items: center; width: 4.4rem; height: 4.4rem; margin-bottom: 1rem; border-radius: 50%; color: var(--on-accent); background: var(--icon-sage-bg); }
.icon-disc.lilac { background: var(--icon-lilac-bg); }
.info-card h3 { letter-spacing: .12em; text-transform: uppercase; font-size: 1.08rem; margin-bottom: .6rem; }
.info-card .leaf-rule { margin-bottom: .7rem; }
.info-card p { font-size: 1rem; line-height: 1.45; }
.info-card .event-time { color: var(--accent); font-size: .875rem; margin-bottom: .5rem; }
.info-card address { font-size: .95rem; line-height: 1.4; margin-bottom: .8rem; }
.info-card .button { margin-top: auto; width: 100%; font-size: .875rem; padding-inline: .5rem; }
.calendar-link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); font-size: .875rem; margin-top: .7rem; }
.content-section { text-align: center; padding-block: 4.5rem 1rem; }
.content-section > .script { margin-bottom: .4rem; }
.content-section .leaf-rule { margin: .8rem auto 1.5rem; }
.eyebrow { color: var(--muted); }
.story .prose { max-width: 52ch; }
.story-images, .gallery-grid, .party-grid, .extras-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(14rem,1fr)); gap: 1.5rem; margin-top: 2rem; }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gallery-grid img[src*="briana-ryan-dancing"] { object-position: center 20%; }
.gallery-grid img[src*="briana-ryan-stadium"] { object-position: center 25%; }
.gallery-grid figure { margin: 0; }
.gallery-grid figcaption { font-size: var(--step--1); padding: .7rem; }
.link-list { padding: 0; list-style: none; }
.link-list a { display: inline-block; min-height: var(--tap); padding-block: .5rem; }
.faq { max-width: 48rem; margin-inline: auto; padding-bottom: 4rem; }
.faq details { padding: 1rem; margin-top: 1rem; border-block: 1px solid var(--hairline); text-align: left; }
.faq summary { font-size: var(--step-1); min-height: var(--tap); }
.faq details p { margin: .8rem 0 0; }

/* Lavender RSVP wash. Only tested floor-safe foreground colours appear here. */
.rsvp-band { position: relative; isolation: isolate; padding: 3rem 1.5rem 1.5rem; background: var(--wash-bg); color: var(--fg); }
.wash::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/static/art/wash-lavender.webp") center / cover; opacity: var(--wash-opacity); pointer-events: none; }
.rsvp-band-inner { max-width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 1rem 3rem; text-align: center; }
.rsvp-band h2 { margin-bottom: .4rem; }
.rsvp-band p { max-width: 50ch; margin-inline: auto; }
.contact-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2rem; }
.contact-people h3 { margin-bottom: .4rem; }
.contact-people a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.contact-people .icon { width: 1.2rem; height: 1.2rem; margin-right: .5rem; }
.contact-email { flex-basis: 100%; justify-content: center; }
.closing-line { grid-column: 1 / -1; font-style: italic; margin-top: 1rem; }
.site-footer { padding: 1.25rem 1rem; text-align: center; background: var(--foot-bg); color: var(--foot-fg); }
.site-footer p { margin: 0; letter-spacing: .12em; font-size: .9rem; text-transform: uppercase; }
.site-footer .leaf-rule { color: var(--foot-fg); font-size: 1.6rem; vertical-align: middle; margin-inline: .8rem; }
.site-footer a { color: var(--foot-fg); display: inline-flex; align-items: center; min-height: var(--tap); font-size: .88rem; }

/* Forms remain complete and usable without any script. */
.rsvp-shell { max-width: 54rem; margin: 3rem auto 5rem; padding-inline: 1.5rem; }
.rsvp-shell > h1 { text-align: center; margin-bottom: 1.5rem; }
.rsvp-shell > form, .narrow-form { max-width: 40rem; margin-inline: auto; }
.field { display: grid; gap: .35rem; margin: 1.3rem 0; }
.field > label { font-weight: 600; }
input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), textarea, select { width: 100%; min-height: var(--tap); padding: .6rem .8rem; border: 1px solid var(--control-fg); border-radius: var(--radius); background: var(--card-bg); color: var(--fg); }
textarea { min-height: 8rem; resize: vertical; }
input[type="radio"], input[type="checkbox"] { appearance: none; display: inline-grid; place-content: center; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin: .2rem .55rem .2rem 0; border: 2px solid var(--control-fg); background: var(--card-bg); vertical-align: middle; }
input[type="radio"] { border-radius: 50%; }
input[type="radio"]::before, input[type="checkbox"]::before { content: ""; width: .65rem; height: .65rem; background: var(--accent); transform: scale(0); }
input[type="radio"]::before { border-radius: 50%; }
input:checked::before { transform: scale(1); }
fieldset { min-width: 0; margin: 1.2rem 0; padding: 1rem; border: 1px solid var(--hairline); }
legend { padding-inline: .35rem; font-weight: 600; }
fieldset label { display: flex; align-items: center; gap: .4rem; min-height: var(--tap); }
.field-help { margin: 0; font-size: var(--step--1); }
.field-error { color: var(--error-fg); margin: .35rem 0; font-weight: 600; }
[aria-invalid="true"] { border-color: var(--error-fg) !important; }
.guest-card { background: var(--card-bg); border: 1px solid var(--frame); margin-block: 1.5rem; }
.guest-card > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; min-height: 4rem; padding: 1rem 1.3rem; font-size: var(--step-1); }
.guest-card > summary::before { content: "+"; margin-right: .5rem; color: var(--accent); }
.guest-card[open] > summary::before { content: "−"; }
.guest-card-body { padding: 0 1.3rem 1.3rem; }
.chip { display: inline-flex; padding: .2rem .65rem; border-radius: 1rem; background: var(--banner-bg); font-size: var(--step--1); color: var(--fg); }
.banner { padding: 1rem 1.2rem; background: var(--banner-bg); border-left: 3px solid var(--accent); margin-block: 1rem; }
.error-summary { max-width: 54rem; margin: 1rem auto; padding: 1.3rem; border: 2px solid var(--error-fg); background: var(--card-bg); }
.error-summary h2 { font-size: var(--step-2); color: var(--error-fg); }
.error-summary a { color: var(--error-fg); min-height: var(--tap); display: inline-block; padding-block: .4rem; }
.progress-bar, .submit-bar { position: sticky; bottom: 0; z-index: 10; background: var(--card-bg); padding: 1rem; border-top: 1px solid var(--frame); }
/* Browser Tab scrolling can ignore scroll-padding. Keep the save bar out of
   the way while editing, including without JavaScript and at enlarged text sizes. */
#rsvp-form:focus-within .submit-bar { position: static; }
.submit-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
progress { width: min(100%,20rem); height: .6rem; accent-color: var(--sage); }
.meal, .dietary { margin-block: 1rem; }
.dietary summary { min-height: var(--tap); padding-block: .5rem; }
.logout { border-top: 1px solid var(--hairline); padding-top: 1.5rem; margin-top: 2rem; }
.logout button { background: transparent; color: var(--link-fg); }
.logout p { font-size: var(--step--1); }
dl { display: grid; grid-template-columns: minmax(9rem,1fr) 2fr; gap: .6rem 1.5rem; }
dt { font-weight: 600; }
dd { margin: 0; overflow-wrap: anywhere; }
.privacy { padding-block: 3rem 5rem; max-width: 60rem; }
.privacy h2 { margin-top: 2.5rem; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
caption { text-align: left; padding-block: 1rem; color: var(--muted); }
td, th { border-bottom: 1px solid var(--hairline); padding: .8rem; text-align: left; vertical-align: top; }
.bare-masthead { text-align: center; font-size: 2rem; padding: 1.5rem; }
.bare main { max-width: 54rem; margin: 1.5rem auto; padding-inline: 1.5rem; }
dialog { border: 1px solid var(--frame); padding: 1rem; background: var(--card-bg); max-width: 95vw; max-height: 95dvh; }
dialog::backdrop { background: rgb(30 25 40 / .8); }
dialog img { max-height: 78dvh; width: auto; margin-top: 1rem; object-fit: contain; }

/* Mobile, zoom, motion preferences and print are first-class layouts. */
@media (max-width: 999px) {
 .nav-links { gap: .15rem 1rem; }
 .hero { min-height: 34rem; grid-template-columns: minmax(17rem,40%) 1fr; }
 .hero-band { padding-inline: 1.4rem; }
 .invite-frame { gap: 1.5rem; padding: 1.7rem; }
 .invite-copy { padding-inline: .5rem; }
 .info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 699px) {
 :root { --nav-h: 4.5rem; }
 .nav-wrap { min-height: 4.5rem; width: calc(100% - 2rem); }
 .brand { width: 5rem; height: 4.5rem; }
 .brand > span:last-child { font-size: 1.25rem; }
 .nav-wide { display: none; }
 .nav-narrow { display: block; }
 .nav-narrow[open] .nav-links { position: absolute; inset: 4.5rem 0 auto; display: grid; grid-template-columns: 1fr 1fr; padding: 1rem 1.5rem; background: var(--nav-bg); border-bottom: 1px solid var(--hairline); }
 .hero { display: flex; flex-direction: column; }
 .hero-photo { height: 18rem; order: 0; }
 .hero-band { padding: 2.2rem 1.3rem 7rem; order: 1; }
 .hero-band h1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .7rem; font-size: var(--step-4); }
 .hero-band h1 em { flex-basis: 100%; font-size: var(--step-3); line-height: .7; }
 .hero::before, .hero::after { width: 9rem; height: 6rem; }
 .page-wrap { width: calc(100% - 2rem); }
 .invite-frame { grid-template-columns: 1fr; gap: 1.7rem; padding: 1.6rem 1.3rem; margin-top: 1rem; }
 .invite-photo { width: min(100%,21rem); margin: auto; }
 .invite-copy { padding: 1.8rem .3rem 1rem; }
 .invite-frame::before { width: 8rem; right: -1rem; top: -1rem; }
 .invite-frame::after { width: 8rem; left: -1rem; bottom: -2rem; }
 .info-grid { grid-template-columns: 1fr; }
 .info-card { padding: 1.5rem 2rem; }
 .rsvp-band-inner { grid-template-columns: 1fr; gap: 2rem; }
 .contact-people { gap: 1.5rem; }
 .content-section { padding-top: 3rem; }
 .calendar-block { gap: .65rem; }
 .calendar-block > div { padding-inline: .65rem; }
 .site-footer .leaf-rule { display: none; }
 .site-footer p { line-height: 1.8; }
 .rsvp-shell { padding-inline: 1rem; margin-top: 2rem; }
 .submit-bar { padding: .7rem; }
 dl { grid-template-columns: 1fr; gap: .25rem; }
 dd { margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
 html { scroll-behavior: smooth; }
 .button, button { transition: background-color .15s ease; }
}
@media (forced-colors: active) {
 .hero::before, .hero::after, .invite-frame::before, .invite-frame::after, .wash::before, .wreath { display: none; }
 input[type="radio"], input[type="checkbox"] { appearance: auto; }
 .icon-disc { border: 1px solid ButtonText; }
}
@media print {
 :root { --fg: #000; --surface: #fff; --card-bg: #fff; }
 body { font: 11pt/1.4 Georgia,serif; }
 .site-header, .site-footer, .skip, button, .button, .logout, .submit-bar, .progress-bar, dialog, .hero::before, .hero::after, .invite-frame::before, .invite-frame::after, .wash::before, .wreath { display: none !important; }
 .page-wrap, .rsvp-shell, .rsvp-page, .bare main { width: 100%; max-width: none; margin: 0; padding: 0; }
 .guest-card, figure, tr { break-inside: avoid; }
 .guest-card > .guest-card-body { display: block !important; }
 a { color: inherit; }
 .hero-band { color: #000; background: #fff; }
 .invite-frame { border-color: #888; }
 .return-link { overflow-wrap: anywhere; }
}

/* Administrative workflows share the site's palette and accessible form primitives. */
.admin-header nav { width: min(76rem, calc(100% - 3rem)); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding-block: .7rem; }
.admin-header nav a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: .95rem; }
.admin-shell { width: min(76rem, calc(100% - 3rem)); margin-inline: auto; padding-block: 2.5rem 4rem; }
.admin-shell > h1 { margin-bottom: 1.3rem; }
.admin-shell h2 { font-size: var(--step-2); }
.admin-shell h3 { font-size: var(--step-1); }
.admin-shell [role="status"], .admin-shell [role="alert"] { padding: 1rem 1.25rem; background: var(--banner-bg); border-left: 3px solid var(--accent); margin-block: 1.5rem; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-block: 1.5rem 2rem; align-items: start; }
.admin-shell section.guest-card { padding: 1.5rem; }
.admin-grid > section.guest-card { margin: 0; }
.admin-shell form { display: grid; gap: .8rem; margin-block: 1.25rem; }
.admin-shell form + form { border-top: 1px solid var(--hairline); padding-top: 1.25rem; }
.admin-shell label { display: block; }
.admin-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .admin-shell select, .admin-shell textarea { width: 100%; min-height: var(--tap); padding: .65rem .8rem; border: 1px solid var(--frame); border-radius: var(--radius); background: var(--card-bg); color: var(--fg); }
.admin-shell input[type="checkbox"], .admin-shell input[type="radio"] { width: 1.2rem; height: 1.2rem; vertical-align: middle; accent-color: var(--accent); margin-right: .5rem; }
.admin-shell button { justify-self: start; max-width: 100%; }
.admin-shell summary { min-height: var(--tap); padding-block: .6rem; cursor: pointer; }
.admin-shell dl { font-size: .98rem; grid-template-columns: minmax(7rem, 1fr) minmax(0, 1.6fr); }
.admin-shell ul { padding-left: 1.3rem; }
@media (max-width: 48rem) {
 .admin-grid { grid-template-columns: 1fr; }
 .admin-shell, .admin-header nav { width: calc(100% - 2rem); }
 .admin-header nav { gap: .1rem .85rem; }
 .admin-shell { padding-top: 1.8rem; }
 .admin-shell dl { grid-template-columns: 1fr; gap: .2rem; }
 .admin-shell dd { margin-bottom: .6rem; }
 .admin-shell button { justify-self: stretch; }
}

/* Keep the RSVP introduction and progress centered above the guest cards. */
.rsvp-intro, .rsvp-progress { text-align: center; }

/* Invitation lookup: keep the field, primary action and help in one column. */
.identify-form { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.identify-field { display: grid; gap: .5rem; }
.identify-field p, .identify-help { margin: 0; }
.identify-form > button { justify-self: center; }
.identify-help { text-align: center; }
.identify-help a { display: inline-flex; align-items: center; min-height: var(--tap); }

.admin-signin { max-width: 40rem; margin: 3rem auto 5rem; padding-inline: 1.5rem; text-align: center; }
.admin-signin form { display: grid; gap: 1rem; max-width: 28rem; margin: 1.5rem auto 0; }
.admin-signin button { justify-self: center; }

/* Simple, consistent navigation for family administration. */
.admin-header nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .65rem 1.5rem; padding: .85rem 1rem; }
.admin-header nav > a { min-height: var(--tap); display: inline-flex; align-items: center; }
.admin-nav-logout { margin: 0; }
.invitation-code { max-width: 18rem; font-size: 1.5rem; letter-spacing: .12em; text-align: center; }
.admin-more { margin-block: 1.5rem; }
.admin-more > summary { font-size: 1.2rem; padding: 1rem; }

.family-editor > .guest-card { margin-block: .35rem; }
.family-editor .guest-card-body { display: grid; gap: .8rem; }
.family-editor fieldset { display: grid; gap: .8rem; }
.family-editor label:has(input[type=checkbox]) { min-height: var(--tap); display: flex; align-items: center; }