/* WeInviteYou — shared wedding website foundation.
   Every theme consumes the same tokens (set per website in <style id="wiy-vars">)
   and restyles composition in static/themes/<theme>/theme.css. Mobile first. */

:root {
  --heading: #3a302a;
  --bg: #fbf7f0; --surface: #fff; --soft: #f3ece0; --ink: #2b2520; --muted: #6f6459; --line: #e3d8c7;
  --accent: #9a7b4f; --accent-ink: #fff; --deep: #3a302a; --deep-ink: #f6f0e6;
  --font-display: Georgia, serif; --font-body: system-ui, sans-serif; --font-accent: var(--font-display);
  /* The accent, pulled towards the ink until small text made of it is readable. Each
     design keeps its own hue; only the lightness moves, and it moves the right way on
     the dark palettes too, because their ink is the light colour. */
  --ink-accent: color-mix(in srgb, var(--accent) 72%, var(--ink));
  --deep-accent: color-mix(in srgb, var(--accent) 72%, var(--deep-ink));
  --btn-radius: 8px;
  --radius: 8px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 12vw, 8.5rem);
  --wrap: 72rem;
  --narrow: 40rem;
  --fs-display: clamp(2.75rem, 11vw, 6.25rem);
  --fs-h2: clamp(2rem, 6vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 3.4vw, 1.6rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--ink); color: var(--bg); padding: .5rem .9rem; border-radius: 6px; }
.skip:focus { left: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); margin-inline: auto; }
.s { position: relative; padding-block: var(--section-y); }
.s + .s { border-top: 1px solid transparent; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--stack, 1rem); }

/* ---------- type ---------- */
.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.02; font-weight: 400; letter-spacing: -.01em; }
.s-title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.1; font-weight: 400; letter-spacing: -.005em; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.25; font-weight: 400; }
/* The eyebrow is small, spaced, uppercase text somebody is meant to read, so it cannot
   sit at the accent's own lightness on a pale background. Pulling it towards the ink
   keeps each design's hue while giving it the contrast small text needs — and because
   ink is light on the dark palettes, the same mix darkens or lightens as it should. */
.eyebrow { font-family: var(--font-body); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-accent); font-weight: 700; }
.lede { font-size: clamp(1.1rem, 2.6vw, 1.3rem); color: var(--muted); line-height: 1.6; text-wrap: pretty; }
.muted { color: var(--muted); }
.prose p + p { margin-top: 1em; }
.prose { text-wrap: pretty; }
.amp { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
.s-head { margin-bottom: clamp(2.25rem, 6vw, 3.75rem); }
.s-head .eyebrow + .s-title { margin-top: .75rem; }
.s-head .s-title + .lede { margin-top: 1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .8rem 1.5rem; border-radius: var(--btn-radius);
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-body); font-size: .9375rem; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--ink-accent); }
.btn--ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.btn--light { background: #fff; color: #1a1a1a; border-color: #fff; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; font-weight: 600; }
.icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- navigation ----------
   An invitation, not a site header: a hairline of progress, and one mark that opens
   the index once the cover is behind the guest. Nothing sits over the names. */
.site-nav { position: fixed; inset: 0 0 auto 0; z-index: 40; pointer-events: none; }
.site-nav__progress { height: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.site-nav__progress i { display: block; height: 100%; width: 0; background: var(--accent); transform-origin: left; transition: width .12s linear; }
.site-nav__mark {
  pointer-events: auto; position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; backdrop-filter: saturate(1.2) blur(10px);
  box-shadow: 0 10px 30px -18px rgba(20, 12, 8, .7);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease), background-color .3s;
}
.site-nav__mark.is-ready { opacity: 1; transform: none; pointer-events: auto; }
.site-nav__mark:hover { background: var(--surface); }
.site-nav__lines { display: grid; gap: 5px; width: 1.05rem; }
.site-nav__lines i { height: 1px; background: currentColor; transition: transform .35s var(--ease), opacity .25s; }
.site-nav__mark[aria-expanded='true'] .site-nav__lines i:first-child { transform: translateY(3px) rotate(45deg); }
.site-nav__mark[aria-expanded='true'] .site-nav__lines i:last-child { transform: translateY(-3px) rotate(-45deg); }

.site-menu { position: fixed; inset: 0; z-index: 41; display: grid; place-items: center; padding: var(--gutter);
  background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.site-menu.is-open { opacity: 1; pointer-events: auto; }
.site-menu__sheet { position: relative; width: min(100%, 34rem); text-align: center; display: grid; gap: clamp(1.5rem, 5vw, 2.5rem); }
.site-menu__mono { font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: .04em; color: var(--heading); overflow-wrap: anywhere; }
.site-menu__links { display: grid; gap: clamp(.35rem, 2vw, .75rem); }
.site-menu__links a {
  font-family: var(--font-display); font-size: clamp(1.4rem, 5.5vw, 2.1rem); line-height: 1.25;
  text-decoration: none; color: var(--ink); padding: .35rem .5rem; border-radius: 4px;
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .2s;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.site-menu.is-open .site-menu__links a { opacity: 1; transform: none; }
.site-menu__links a:hover { color: var(--accent); }
.site-menu__date { font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.site-menu__close { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .site-nav__mark, .site-menu, .site-menu__links a { transition: none; }
}
/* The gallery preview is a whole invitation being browsed, so it keeps its index.
   The small read-only preview on the dashboard is a picture of one, and a floating
   button over a thumbnail is only clutter. */
.is-embed .site-nav__mark, .is-embed .site-menu { display: none; }

/* ---------- hero defaults ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: rgba(12, 8, 6, var(--overlay, .35)); }
.hero__scroll { position: absolute; bottom: 1.5rem; left: 50%; translate: -50% 0; font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; text-decoration: none; display: grid; justify-items: center; gap: .5rem; opacity: .85; }
.hero__scroll::after { content: ''; width: 1px; height: 2.5rem; background: currentColor; transform-origin: top; animation: wiy-scroll 2.2s var(--ease) infinite; }
@keyframes wiy-scroll { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- events (shared default) ---------- */
.events { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .events { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .events--3 { grid-template-columns: repeat(3, 1fr); } }
.event { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.event__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); }
.event__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.event:hover .event__img img { transform: scale(1.04); }
.event__body { padding: 1.5rem; display: grid; gap: .6rem; }
.event__when { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.event__name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; font-weight: 400; }
.event__where { color: var(--muted); font-size: .9375rem; }
.event__desc { font-size: .9375rem; color: var(--muted); }
.event__map { margin-top: .35rem; font-size: .875rem; }

.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; }
.meta-row > span { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- story ---------- */
.story-grid { display: grid; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 56rem) { .story-grid { grid-template-columns: 1fr 1fr; } }
.story-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--soft); }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.milestones { display: grid; gap: 1.25rem; margin-top: 2rem; margin-left: 4px; border-left: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding-left: 1.25rem; }
.milestone { position: relative; }
.milestone::before { content: ''; position: absolute; left: calc(-1.25rem - 4px); top: .55rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.milestone__date { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.milestone__title { font-family: var(--font-display); font-size: 1.2rem; }

/* ---------- couple ---------- */
.couple { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .couple { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); } }
.person { text-align: center; display: grid; gap: .9rem; justify-items: center; }
.person__photo { width: min(100%, 20rem); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--soft); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; }

/* ---------- venue ---------- */
.venue { display: grid; gap: 2rem; align-items: stretch; }
@media (min-width: 56rem) { .venue { grid-template-columns: 1fr 1.1fr; } }
.venue__map { min-height: 18rem; border-radius: var(--radius); overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.venue__map iframe { width: 100%; height: 100%; min-height: 18rem; border: 0; filter: saturate(.85); }
.venue__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; }
.venue__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- countdown ---------- */
.countdown { display: flex; justify-content: center; gap: clamp(.75rem, 4vw, 2.5rem); flex-wrap: wrap; }
.countdown__unit { display: grid; justify-items: center; min-width: 4.5rem; }
.countdown__num { font-family: var(--font-display); font-size: clamp(2.6rem, 10vw, 5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__label { margin-top: .5rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* ---------- family ---------- */
.families { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .families { grid-template-columns: 1fr 1fr; } }
.family { text-align: center; display: grid; gap: .6rem; }
.family__side { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.family__names { font-family: var(--font-display); font-size: clamp(1.35rem, 3.5vw, 1.75rem); line-height: 1.35; }
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1.25rem; margin-top: 3rem; text-align: center; }
.member__name { font-weight: 600; }
.member__rel { font-size: .875rem; color: var(--muted); }

/* ---------- gallery ---------- */
.gallery { display: grid; gap: .6rem; }
.gallery__item { position: relative; overflow: hidden; border-radius: calc(var(--radius) - 2px); background: var(--soft); cursor: zoom-in; border: 0; padding: 0; width: 100%; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .4s; }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__cap { position: absolute; left: .75rem; bottom: .6rem; right: .75rem; color: #fff; font-size: .8125rem; text-shadow: 0 1px 8px rgba(0,0,0,.6); text-align: left; }
.gallery--grid { grid-template-columns: repeat(2, 1fr); }
.gallery--grid .gallery__item { aspect-ratio: 1; }
@media (min-width: 48rem) { .gallery--grid { grid-template-columns: repeat(3, 1fr); gap: .9rem; } }
.gallery--feature { grid-template-columns: repeat(2, 1fr); }
.gallery--feature .gallery__item { aspect-ratio: 1; }
.gallery--feature .gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
@media (min-width: 48rem) {
  .gallery--feature { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 14rem; gap: .9rem; }
  .gallery--feature .gallery__item { aspect-ratio: auto; }
  .gallery--feature .gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}
.gallery--masonry { display: block; columns: 2; column-gap: .6rem; }
.gallery--masonry .gallery__item { margin-bottom: .6rem; break-inside: avoid; display: block; }
.gallery--masonry .gallery__item img { height: auto; }
@media (min-width: 48rem) { .gallery--masonry { columns: 3; column-gap: .9rem; } .gallery--masonry .gallery__item { margin-bottom: .9rem; } }
.gallery--strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .9rem; padding-bottom: .75rem; scrollbar-width: thin; }
.gallery--strip .gallery__item { flex: 0 0 min(80%, 26rem); aspect-ratio: 4 / 5; scroll-snap-align: center; }

.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(8, 6, 5, .94); display: grid; place-items: center; padding: 3.5rem 1rem; opacity: 0; pointer-events: none; transition: opacity .25s; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-height: 82svh; width: auto; border-radius: 4px; }
.lightbox figcaption { color: #eee; text-align: center; margin-top: .75rem; font-size: .875rem; }
.lightbox button { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.lightbox button:hover { background: rgba(255,255,255,.2); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: .75rem; top: 50%; translate: 0 -50%; }
.lightbox__next { right: .75rem; top: 50%; translate: 0 -50%; }

/* ---------- video ---------- */
.video { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- faq / travel / registry ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; font-family: var(--font-display); font-size: 1.2rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: .35rem; top: 50%; width: .7rem; height: .7rem; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); translate: 0 -70%; rotate: 45deg; transition: rotate .25s var(--ease); }
.faq details[open] summary::after { rotate: -135deg; translate: 0 -20%; }
.faq details > div { padding: 0 0 1.4rem; color: var(--muted); }
.cards { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }

/* ---------- RSVP ---------- */
.rsvp { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); padding: clamp(1.5rem, 5vw, 2.75rem); text-align: left; }
.field { display: grid; gap: .45rem; }
.field + .field, .field + .field-row, .field-row + .field, .field-row + .field-row { margin-top: 1.1rem; }
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 36rem) { .field-row { grid-template-columns: 1fr 1fr; } .field-row .field + .field { margin-top: 0; } }
.label { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.label .opt { font-weight: 400; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 3rem; padding: .75rem .9rem; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: min(var(--btn-radius), 10px); font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 6rem; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field.has-error .input, .field.has-error .select { border-color: #b3362f; }
.field__error { color: #b3362f; font-size: .8125rem; }
.choices { display: grid; gap: .6rem; }
@media (min-width: 36rem) { .choices { grid-template-columns: repeat(3, 1fr); } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.25rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: min(var(--btn-radius), 10px); background: var(--bg); font-size: .9375rem; transition: border-color .2s, background-color .2s, color .2s; }
.choice input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: .8125rem; color: var(--muted); margin-top: 1rem; text-align: center; }
.rsvp-done { text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1rem; }
.rsvp-done__mark { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; color: var(--accent); }
.rsvp-done__mark circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: wiy-draw 1s var(--ease) forwards; }
.rsvp-done__mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: wiy-draw .5s .7s var(--ease) forwards; }
@keyframes wiy-draw { to { stroke-dashoffset: 0; } }
.alert { padding: .8rem 1rem; border-radius: 8px; font-size: .9rem; margin-bottom: 1rem; }
.alert--error { background: #fbeceb; color: #8f2a24; border: 1px solid #f0c9c5; }

/* ---------- footer ---------- */
.site-footer { padding-block: clamp(4rem, 10vw, 6rem) 2rem; text-align: center; }
.site-footer__names { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.1; }
.site-footer__made { margin-top: 3.5rem; font-size: .75rem; letter-spacing: .08em; opacity: .8; }
.site-footer__made a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- decoration controls ---------- */
.orn { color: var(--accent); pointer-events: none; }
.decor-subtle .orn { opacity: .5; }
.decor-subtle .orn--xl { display: none; }
.decor-none .orn { display: none !important; }
.bg-paper { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* The cards of a scroll-stacked events block are left out: the scroll itself moves and fades them. */
.is-preview .reveal:not(.is-evstack [data-evstack-card]) { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- music ---------- */
.music { position: fixed; left: max(1rem, env(safe-area-inset-left)); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 45; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px -10px rgba(0,0,0,.35); }
.music__bars { display: flex; gap: 2px; align-items: end; height: 14px; }
.music__bars i { width: 2px; height: 4px; background: currentColor; }
.music.is-playing .music__bars i { animation: wiy-bars .9s ease-in-out infinite; }
.music.is-playing .music__bars i:nth-child(2) { animation-delay: .15s; }
.music.is-playing .music__bars i:nth-child(3) { animation-delay: .3s; }
@keyframes wiy-bars { 50% { height: 14px; } }

/* ---------- builder preview affordances ---------- */
.is-preview [data-section] { cursor: pointer; }
.is-preview [data-section]::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow .15s; z-index: 30; }
.is-preview [data-section]:hover::after { box-shadow: inset 0 0 0 2px rgba(122, 46, 58, .55); }
.is-preview [data-section].is-selected::after { box-shadow: inset 0 0 0 2px #7a2e3a; }
.edit-tag { position: absolute; top: .75rem; left: .75rem; z-index: 31; font: 600 12px/1 system-ui, sans-serif; letter-spacing: 0; text-transform: none; background: #7a2e3a; color: #fff; padding: .45rem .6rem; border-radius: 6px; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.is-preview [data-section]:hover > .edit-tag, .is-preview [data-section].is-selected > .edit-tag { opacity: 1; transform: none; }
.empty-slot { margin: 0 auto; width: min(100% - 2 * var(--gutter), 34rem); border: 1.5px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 10px; padding: 2rem 1.5rem; text-align: center; font-family: system-ui, sans-serif; color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.empty-slot strong { display: block; font-size: 1rem; margin-bottom: .35rem; }
.empty-slot span { font-size: .875rem; color: var(--muted); }
.s.is-empty { padding-block: 3rem; }
.is-flash { animation: wiy-flash 1s var(--ease); }
@keyframes wiy-flash { from { background-color: color-mix(in srgb, var(--accent) 10%, transparent); } }

/* Live editing: a section switched off, or an optional line with nothing in it. */
[data-wiy-off], [data-wiy-empty] { display: none !important; }

/* ---------- user content protection ----------
   A couple may enter four letters or forty without a space. Long words break inside
   their own line rather than pushing the page sideways; bridge.js scales a heading
   down before it comes to that, so ordinary names keep the design's own typography. */
[data-wiy-fit], .display, .s-title, .h3, .hero__title,
.event__name, .person__name, .family__names, .site-footer__names, .milestone__title {
  overflow-wrap: anywhere;
  min-width: 0;
}
.lede, .prose, .prose p, .muted, .event__where, .event__desc, .member__rel,
.gallery__cap, .faq summary, .card, .field__error {
  overflow-wrap: break-word;
}
.hero__inner, .s-head, .wrap, .wrap--narrow, .rsvp, .event__body, .family, .person { min-width: 0; }
.venue__address, .event__where, .form-note { overflow-wrap: anywhere; }

/* ---------- what the couple can change about a section ----------
   Each of these falls back to the design's own value, so a section nobody has touched
   renders exactly as it was drawn. builder/styles.py writes the properties. */
.s { padding-block: calc(var(--section-y) * var(--sec-space, 1)); }
[data-section] { text-align: var(--sec-align, inherit); }
[data-section] .center { text-align: var(--sec-align, center); }

.display { font-family: var(--sec-head-font, var(--font-display)); font-size: var(--sec-head-size, var(--fs-display));
  font-weight: var(--sec-head-weight, 400); color: var(--sec-head-color, inherit);
  line-height: var(--sec-head-lh, 1.02); letter-spacing: var(--sec-head-ls, -.01em); }
.s-title { font-family: var(--sec-head-font, var(--font-display)); font-size: var(--sec-head-size, var(--fs-h2));
  font-weight: var(--sec-head-weight, 400); color: var(--sec-head-color, var(--heading));
  line-height: var(--sec-head-lh, 1.1); letter-spacing: var(--sec-head-ls, -.005em); }
[data-section] .lede, [data-section] .prose, [data-section] .prose p {
  font-size: var(--sec-text-size, inherit); color: var(--sec-text-color, inherit); }
[data-section] .lede { font-size: var(--sec-text-size, clamp(1.1rem, 2.6vw, 1.3rem)); }

.story-photo img, .venue__img img, .person__photo img, .event__img img, .gallery__item img, .hero__media img {
  object-fit: var(--sec-img-fit, cover); object-position: var(--sec-img-pos, center); }
.story-photo, .venue__img, .person__photo, .event__img, .gallery__item {
  border-radius: var(--sec-img-radius, var(--radius)); }

/* ---------- letting long words shrink their own box ----------
   A grid or flex child defaults to min-width:auto, which means "never narrower than my
   longest word". One forty-letter name in an event card therefore widens the whole
   track, and the card, and the row — the layout breaks far away from the text that
   caused it. Allowing these to be narrower than their content lets the wrapping and
   the scaling in bridge.js do their work instead.

   Written with :where() so it carries no specificity: every design's own rules still
   win, and buttons and form controls are left with their natural minimum. */
:where([data-section], .site-menu) :where(article, aside, div, dl, dd, figure, figcaption,
  footer, form, h1, h2, h3, h4, header, label, li, main, ol, p, section, span, time, ul, blockquote) {
  min-width: 0;
}

/* ---------- events, scroll-stacked (themes/event-stack.js) ----------
   Only while the stack runs (.is-evstack): each event becomes one card of this design,
   laid over the last by the scroll. Without it the layout above is untouched. */
.is-evstack .events { max-width: 56rem; margin-inline: auto; }
.is-evstack .event { box-shadow: 0 26px 50px -34px rgba(0, 0, 0, .45); }
@media (min-width: 48rem) {
  .is-evstack .event { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .is-evstack .event__img { aspect-ratio: auto; min-height: 100%; }
  .is-evstack .event__body { align-content: center; padding: 2rem 2.25rem; }
}