/* Hallmark · shape: the church program, read from the door to the altar · genre: editorial · theme: custom · job: attend · idea: "guests step through the church doors into soft light: a round arch frames the couple and gold lines carry the cross and the bells" · vibe: "formal ivory, soft gold light, deep maroon"
 * paper: oklch(97.6% 0.013 88) · accent: oklch(31% 0.1 14) · display: Cinzel · body: Crimson Pro · hero: the names inside a gold round arch under a cross with rays of light · nav: none, one page read top to bottom · footer: a gold flourish, the names, the maker's and music credits · imagery: original gold line SVG (cross, bells, couple, flourish) · signature: the cross with rays of light at the top of a gold arch
 * axes: light/roman-serif/warm · posture: restrained colour, centred canvas hero · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, church-and-gold is a known look; tied it to this family with the S/O and D/O lines, the Ranchi hall in a maroon band and the bells over the real date */
/* Hallmark · waive 80 · couple, bells and cross drawn in gold line SVG · the handover asks for an original couple in gold line and church bells for this look */
/* Hallmark · waive 23 · posture: restrained colour, the closed church doors are maroon wood · once the doors open, maroon stays on the text and the one venue band */
/* Hallmark · answered F4 · the WhatsApp reply keeps its own green because guests know it on sight; maroon stays the page primary */
/* Hallmark · waive 29 · one warm light behind the hero cross · the handover asks the cross to glow softly with soft light on this invite */
@import url("./tokens.css");
@import url("./base.css");

html { scroll-behavior: smooth; }
body { font-size: 1.1875rem; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-accent-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-gold-deep); }
.btn--quiet:hover { background: var(--color-paper-2); }
.btn--wa { background: var(--color-whatsapp); border-color: var(--color-whatsapp); color: var(--color-whatsapp-ink); }
.btn--wa:hover { background: color-mix(in oklab, var(--color-whatsapp) 85%, var(--color-ink)); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

/* Church doors: shown only when scripting runs */
.doors { display: none; }
.js .doors { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-content: center; justify-items: center; gap: var(--space-xs); padding: var(--space-md); background: var(--color-paper-2); transition: opacity var(--dur-long) var(--ease-out) 700ms; }
.js.sealed body { overflow: hidden; }
.doors__arch { position: relative; width: min(78vw, 340px, 52svh); aspect-ratio: 5 / 8; margin-bottom: var(--space-md); overflow: hidden; border: 2px solid var(--color-gold); border-radius: 999px 999px 0 0; background: var(--color-light); perspective: 900px; }
.door { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--color-ink); transition: transform 1100ms var(--ease-in-out); }
.door::after { content: ""; position: absolute; inset: 14% 14% 8%; border: 1px solid var(--color-gold); }
.door--l { left: 0; transform-origin: left center; border-right: 1px solid var(--color-gold-deep); }
.door--r { right: 0; transform-origin: right center; }
.door--l::after { border-radius: 999px 0 0 0; }
.door--r::after { border-radius: 0 999px 0 0; }
.doors__open { position: absolute; left: 50%; top: 55%; z-index: var(--z-raised); display: grid; place-items: center; width: 72px; height: 72px; translate: -50% -50%; padding: 0; border: 1px solid var(--color-gold); border-radius: 50%; background: var(--color-ink); color: var(--color-gold); cursor: pointer; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.doors__open:hover { transform: scale(1.05); }
.doors__open:active { transform: scale(0.97); }
.doors__open:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.doors__to { font: 400 var(--text-xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.doors__hint { font-size: var(--text-md); color: var(--color-muted); }
.doors.is-open .door--l { transform: rotateY(-100deg); }
.doors.is-open .door--r { transform: rotateY(100deg); }
.doors.is-open .doors__open { opacity: 0; transform: scale(0.85); }
.doors.is-open { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .js .doors, .door { transition: opacity 200ms linear; } .doors.is-open .door--l, .doors.is-open .door--r { transform: none; } }

/* White petals: one shower after the doors open */
.petals { position: fixed; inset: 0; z-index: var(--z-sticky); pointer-events: none; overflow: hidden; }
.petals i { position: absolute; top: -40px; left: calc(var(--x) * 1%); width: 14px; height: 10px; border-radius: 80% 10% 80% 10%; background: var(--color-light); box-shadow: inset 0 0 0 1px var(--color-rule); opacity: 0; }
.petals i:nth-child(3n) { background: var(--color-gold); width: 8px; height: 6px; box-shadow: none; }
.petals i:nth-child(1) { --x: 6; --d: 0s; } .petals i:nth-child(2) { --x: 18; --d: 0.5s; } .petals i:nth-child(3) { --x: 27; --d: 0.2s; } .petals i:nth-child(4) { --x: 38; --d: 0.9s; } .petals i:nth-child(5) { --x: 47; --d: 0.4s; } .petals i:nth-child(6) { --x: 56; --d: 1.1s; }
.petals i:nth-child(7) { --x: 64; --d: 0.1s; } .petals i:nth-child(8) { --x: 72; --d: 0.7s; } .petals i:nth-child(9) { --x: 80; --d: 0.3s; } .petals i:nth-child(10) { --x: 88; --d: 1s; } .petals i:nth-child(11) { --x: 94; --d: 0.6s; } .petals i:nth-child(12) { --x: 12; --d: 1.2s; }
.is-showering .petals i { animation: petal-fall 3.6s linear var(--d) 1 both; }
@keyframes petal-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  10% { opacity: 0.9; }
  50% { transform: translate3d(28px, 50dvh, 0) rotate(160deg); }
  85% { opacity: 0.8; }
  100% { opacity: 0; transform: translate3d(-12px, 105dvh, 0) rotate(320deg); }
}
@media (prefers-reduced-motion: reduce) { .petals { display: none; } }

/* Music toggle */
.sound { position: fixed; top: var(--space-md); right: var(--space-md); z-index: var(--z-sticky-nav); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-gold-deep); border-radius: 50%; background: color-mix(in oklab, var(--color-paper) 88%, transparent); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.sound:hover { background: var(--color-paper-2); }
.sound:active { background: var(--color-paper-3); }
.sound:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sound .sound__on, .sound[aria-pressed="true"] .sound__off { display: none; }
.sound[aria-pressed="true"] .sound__on { display: inline; }

/* Hero: the names inside a gold round arch, soft light from above */
.hero { display: grid; place-items: center; min-height: 100svh; padding: var(--space-xl) var(--space-md); background: linear-gradient(180deg, var(--color-light), var(--color-paper) 70%); }
.hero__arch { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--space-sm); width: min(100%, 600px); min-height: min(86svh, 760px); padding: var(--space-3xl) var(--space-lg) var(--space-2xl); border: 1px solid var(--color-gold); border-bottom: 0; border-radius: 999px 999px 0 0; text-align: center; }
.hero__arch::before { content: ""; position: absolute; inset: var(--space-sm) var(--space-sm) 0; border: 1px solid var(--color-rule); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; }
.cross { position: relative; width: clamp(120px, 26vw, 170px); margin-bottom: var(--space-xs); }
.cross::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: var(--color-light); filter: blur(24px); opacity: 0.6; }
.cross img { position: relative; width: 100%; height: auto; }
.is-open-page .cross::before { animation: cross-glow 3.2s var(--ease-in-out) 700ms 1 both; }
@keyframes cross-glow { 0% { opacity: 0.2; transform: scale(0.8); } 45% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0.6; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .is-open-page .cross::before { animation: none; } }
.hero__greet { font-size: var(--text-lead); font-style: italic; color: var(--color-ink-2); }
.names { margin-bottom: var(--space-lg); font: 400 var(--text-names)/1.1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.names__amp { display: block; margin-block: var(--space-2xs); font-size: 0.5em; line-height: 1; color: var(--color-gold-deep); }

/* Sections */
section { position: relative; width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--section-gap-s) var(--gutter); }

.invite { display: grid; justify-items: center; gap: var(--space-sm); text-align: center; }
.invite__open { font-size: var(--text-lead); font-style: italic; color: var(--color-ink-2); }
.invite__event { font: 500 var(--text-section)/1.15 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: 16ch; }
.flourish { width: min(70%, 280px); height: auto; margin-block: var(--space-sm); }
.families { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); justify-items: center; width: 100%; margin-top: var(--space-md); padding: var(--space-xl) var(--space-lg); border: 1px solid var(--color-rule); outline: 1px solid var(--color-rule); outline-offset: calc(-1 * var(--space-xs)); background: var(--color-light); }
.family { display: grid; gap: var(--space-xs); }
.family__name { font: 500 clamp(1.75rem, 2vw + 1rem, 2.75rem)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.family__parents { font-size: var(--text-md); color: var(--color-muted); }
.families__amp { font: 400 var(--text-2xl)/1 var(--font-display); color: var(--color-gold-deep); }
@media (min-width: 52rem) { .families { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: var(--space-2xl) var(--space-xl); } }

.verse { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; padding-block: var(--section-gap); }
.verse__couple { margin: 0; justify-self: center; width: min(100%, 440px); }
.verse__couple img { width: 100%; height: auto; }
.verse__text { margin: 0; text-align: center; }
.verse__text p { font: 400 clamp(2rem, 2.5vw + 1rem, 3.25rem)/1.25 var(--font-body); font-style: italic; color: var(--color-ink); max-width: 28ch; margin-inline: auto; text-wrap: balance; }
.verse__text footer { margin-top: var(--space-md); font: 400 var(--text-md)/1.3 var(--font-body); color: var(--color-muted); }
.verse__text cite { font-style: normal; }
@media (min-width: 56rem) { .verse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .verse__text { text-align: left; } .verse__text p { margin-inline: 0; } }

.when { display: grid; justify-items: center; text-align: center; padding-block: var(--section-gap-s) var(--section-gap); }
.bells { width: min(64%, 260px); height: auto; margin-bottom: var(--space-lg); transform-origin: 50% 10%; }
.when.is-in .bells { animation: ring 1.8s var(--ease-in-out) 300ms 1; }
@keyframes ring { 20% { transform: rotate(5deg); } 45% { transform: rotate(-4deg); } 70% { transform: rotate(2deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .when.is-in .bells { animation: none; } }
.when__day { display: grid; gap: var(--space-xs); font: 400 var(--text-2xl)/1.1 var(--font-body); color: var(--color-ink-2); }
.when__day span { font-family: var(--font-display); letter-spacing: var(--tracking-display); font-size: clamp(2.5rem, 5vw + 1rem, 5rem); font-weight: 500; color: var(--color-ink); }
.when__time { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); }
.countdown { display: none; }
.js .countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); width: min(100%, 30rem); margin-top: var(--space-xl); }
.countdown p { display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-2xs); border: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.countdown b { font: 400 var(--text-2xl)/1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums lining-nums; }

/* Venue: the one deep maroon band */
.venue { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); max-width: none; padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-accent-ink); text-align: center; }
.venue__text { display: grid; justify-items: center; gap: var(--space-sm); }
.venue h2 { font: 500 var(--text-section)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.venue__addr { max-width: 30ch; margin-bottom: var(--space-sm); font-size: var(--text-lead); }
.venue .btn--quiet { color: var(--color-accent-ink); border-color: var(--color-gold); }
.venue .btn--quiet:hover { background: var(--color-ink-2); }
.venue .btn:focus-visible { outline-color: var(--color-gold); }
.calendar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm); padding-top: var(--space-xl); border-top: 1px solid var(--color-gold-deep); }
.calendar__label { flex-basis: 100%; font-size: var(--text-md); }
@media (min-width: 56rem) { .venue { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); } .calendar { padding-top: 0; padding-left: var(--space-2xl); border-top: 0; border-left: 1px solid var(--color-gold-deep); } }

.rsvp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--section-gap) var(--section-gap-s); }
.rsvp__head { display: grid; justify-items: start; gap: var(--space-md); align-content: start; }
.rsvp__head h2 { font: 500 var(--text-section)/1.15 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.rsvp__head p { max-width: 34ch; color: var(--color-ink-2); }
.form { display: grid; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg); border: 1px solid var(--color-rule); background: var(--color-light); }
.field { display: grid; gap: var(--space-xs); }
.field label, .seg legend { font-size: var(--text-md); color: var(--color-ink); }
.field input, .field select { min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: 1px; }
.field input:hover, .field select:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid] { border-color: var(--color-error); }
.field input:disabled, .field select:disabled { opacity: 0.55; cursor: not-allowed; }
.seg { margin: 0; padding: 0; border: 0; }
.seg legend { margin-bottom: var(--space-xs); padding: 0; }
.seg__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-sm); border: 1px solid var(--color-muted); background: var(--color-paper); color: var(--color-ink); text-align: center; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.seg label:last-of-type { border-left: 0; }
.seg label:hover { background: var(--color-paper-2); }
.seg input:checked + label { background: var(--color-ink); color: var(--color-accent-ink); border-color: var(--color-ink); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.form__send { justify-self: start; }
.form__help { min-height: 1lh; font-size: var(--text-md); color: var(--color-ink-2); }
@media (min-width: 56rem) { .rsvp { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }

/* Footer */
.foot { display: grid; justify-items: center; gap: var(--space-xs); padding: var(--space-2xl) var(--gutter) var(--space-3xl); text-align: center; background: var(--color-paper-2); }
.foot__names { font: 400 var(--text-2xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.foot__credit { font-size: var(--text-sm); color: var(--color-muted); }

/* One reveal per section, visible without scripting */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }
.names:focus { outline: none; }