/* An invitation page. Colours, fonts and outlines come from the shared themes.css;
   sizes are in em so a block's own size setting scales everything inside it. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-weight: var(--body-weight); font-size: var(--body-size); line-height: 1.55;
  transition: background-color .5s, color .5s; -webkit-tap-highlight-color: transparent;
}
body::before { content: ""; position: fixed; inset: 0; background: var(--texture); pointer-events: none; z-index: 0; }
a { color: inherit; }
:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

/* The drawing line behind everything */
/* A photo behind the whole page (settings.backdrop): kept faint so the words stay easy to read */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: center / cover no-repeat; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) var(--backdrop-wash, 82%), transparent); }
.bgline { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.bgline path { fill: none; stroke: var(--line); stroke-linecap: round; stroke-linejoin: round; filter: url(#rough) var(--glow); }
.l-main { stroke-width: var(--lw); opacity: var(--line-op); }
.l-echo { stroke-width: calc(var(--lw) * .6); opacity: calc(var(--line-op) * .55); }

/* Outlined things */
/* Buttons and fields take the style's --radius (a pill in Minimal); boxes and photos take --box-radius,
   which is the same unless a style sets it, so a pill style doesn't turn a tall box into an oval */
.btn, .field input, .field textarea, .field select, .choice span, .ask input { border: var(--bw) solid var(--ink); border-radius: var(--radius); }
.events, .faq, .rsvp, .welcome, .map-frame, .map-empty, .ev, .lock, .card { border: var(--bw) solid var(--ink); border-radius: var(--box-radius, var(--radius)); }

main.inv { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 8px 0 24px; }
.blk { position: relative; padding: 16px 24px; text-align: center; font-size: calc(1em * var(--k, 1)); overflow-wrap: break-word; }
.blk h1, .blk h2, .blk p { margin: 0; }
.blk > * + * { margin-top: 10px; }

/* The opening: drawing and names fill most of the first screen */
.b-couple:first-child { padding-top: max(9vh, 48px); }
.b-hero { min-height: 46vh; min-height: 46svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 32px; padding-bottom: 32px; }
.b-hero:first-child { min-height: 78vh; min-height: 78svh; }
.b-couple + .b-hero { min-height: 0; padding-top: 0; }
.b-hero > * + * { margin-top: 4px; }
.eyebrow { font-family: var(--head); font-size: calc(1.1em * var(--head-scale)); color: var(--muted); }
/* A long name stays whole and inside its box (no breaking mid-word), so render.js sees it overflow and shrinks it to fit */
.names { font: var(--names-weight) calc(min(3.1em, 15vw) * var(--names-scale))/1 var(--names); max-width: 100%; overflow-wrap: normal; }
.names .amp { color: var(--accent); }
.lead { font-family: var(--head); font-size: calc(1.5em * var(--head-scale)); line-height: 1.25; }
.squiggle { display: block; width: min(64vw, 260px); height: 18px; margin: 6px auto 2px; overflow: visible; }
.squiggle path { fill: none; stroke: var(--accent); stroke-width: 2.5px; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease .5s; filter: url(#rough); }
.squiggle.drawn path { stroke-dashoffset: 0; }
.divider { height: 34px; }
.divider use { color: var(--accent); stroke: var(--accent); stroke-width: 2.5px; }

.sil, .squiggle { opacity: 0; transition: opacity .2s; }
.sil.drawn, .squiggle.drawn { opacity: 1; }
.sil { display: block; color: var(--ink); stroke: currentColor; stroke-width: 2.2px; filter: url(#rough) var(--glow); overflow: visible; }
.sil use, .sil path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.45, .05, .3, 1); }
.sil.drawn use, .sil.drawn path { stroke-dashoffset: 0; }
.couple { width: min(62vw, 270px); margin: 0 auto; }

h2 { font: var(--head-weight) calc(2.5em * var(--head-scale))/1.05 var(--head); }
.b-heading { padding-top: 48px; padding-bottom: 4px; }
.b-heading + .blk { padding-top: 6px; }
.prose { max-width: 32ch; margin-left: auto; margin-right: auto; white-space: pre-line; }
.blk.full .prose { max-width: none; }
.blk[style*="text-align: left"] .prose, .blk[style*="text-align: right"] .prose { max-width: none; }
.muted, .place { color: var(--muted); }
.venue { font-family: var(--head); font-weight: var(--head-weight); font-size: calc(1.3em * var(--head-scale)); }
.count { font-family: var(--head); font-size: calc(1.25em * var(--head-scale)); color: var(--muted); }
.count b { font-size: 1.5em; color: var(--ink); margin-right: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 22px;
  font: var(--head-weight) calc(1.2em * var(--head-scale)) var(--head); color: var(--ink); background: transparent; text-decoration: none; cursor: pointer;
  transition: transform .15s; -webkit-appearance: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px !important; }
.btn-row .btn { font-size: calc(1.05em * var(--head-scale)); padding: 6px 10px; }

/* Map */
.map-frame { position: relative; overflow: hidden; height: 240px; padding: 0; }
.map-frame::before { content: "Loading map…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.map-frame iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; }
.map-empty { display: grid; place-items: center; height: 140px; color: var(--muted); border-style: dashed; }
.b-map .btn { margin-top: 14px; }

/* Events: one card each */
.ev-list { display: grid; gap: 16px; margin-top: 14px !important; }
.ev { position: relative; padding: 22px 18px 20px; }
.ev > * + * { margin-top: 6px; }
.ev h3 { margin: 0; font: var(--names-weight) calc(1.9em * var(--names-scale))/1.1 var(--names); color: var(--accent); }
.ev p { margin: 0; }
.ev .btn-row { margin-top: 14px !important; }
.ev-host { font-style: italic; color: var(--muted); }
.ev-dress { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 4px; }
.ev-dress-label { font: 600 12px/1.6 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ev-swatches { display: inline-flex; gap: 6px; }
.ev-swatches i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.ev-tag { position: absolute; top: 10px; right: 10px; font: 600 11px/1 -apple-system, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--bg); padding: 5px 8px; border-radius: 999px; }

/* The password screen and the address form */
.lock { position: relative; z-index: 1; width: calc(100% - 32px); max-width: 420px; margin: 12vh auto 0; padding: 28px 22px; text-align: center; display: grid; gap: 14px; }
.lock h1 { margin: 0; font: var(--names-weight) calc(2.4em * var(--names-scale))/1.1 var(--names); color: var(--accent); }
.lock p { margin: 0; }
.lock form { display: grid; gap: 12px; text-align: left; }

/* Schedule */
.events { list-style: none; padding: 4px 18px; text-align: left; margin-bottom: 0; }
.events li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.events li:last-child { border-bottom: 0; }
.events b { font: var(--head-weight) calc(1.3em * var(--head-scale)) var(--head); }
.events .t { color: var(--accent); }
.events .v { flex-basis: 100%; color: var(--muted); font-size: .9em; margin-top: -6px; }

/* Story timeline */
.milestones { list-style: none; padding: 0; margin-bottom: 0; text-align: left; display: grid; gap: 24px; }
.milestones li { position: relative; padding-left: 40px; }
.milestones li::before { content: ""; position: absolute; left: 6px; top: 8px; width: 16px; height: 16px; border: 2px solid var(--accent); border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; }
.milestones li:last-child::before { background: var(--accent); }
.milestones li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 30px; bottom: -20px; border-left: 2px dashed var(--muted); opacity: .5; }
.milestones b { display: block; font: var(--head-weight) calc(1.4em * var(--head-scale))/1.15 var(--head); }

/* Where we're from */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 4px; }
.person { margin: 0; min-width: 0; }
.person .sil { width: 100%; max-width: 140px; margin: 0 auto; }
.person .land { max-width: 150px; margin-bottom: 8px; }
.person b { display: block; font: var(--names-weight) calc(min(1.6em, 6.6vw * var(--k, 1)) * var(--names-scale))/1.1 var(--names); margin-top: 6px; overflow-wrap: normal; }
.person .where { display: block; line-height: 1.3; }
.person .clock { display: block; margin-top: 4px; font-size: .85em; color: var(--muted); }
.gap { align-self: center; font-family: var(--head); font-size: calc(1em * var(--head-scale)); color: var(--accent); padding-bottom: 50px; max-width: 76px; line-height: 1.2; }
.gap svg { display: block; width: 64px; height: 20px; overflow: visible; margin: 0 auto 4px; }
.gap path { fill: none; stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 4 6; stroke-linecap: round; }

/* Questions */
.faq { text-align: left; padding: 2px 18px; }
.faq details { border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 14px 28px 14px 0; position: relative; font-family: var(--head); font-weight: var(--head-weight); font-size: calc(1.2em * var(--head-scale)); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 1.4em; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 14px; color: var(--muted); white-space: pre-line; }

/* RSVP */
.b-rsvp { padding-top: 40px; }
.rsvp { margin-top: 14px; padding: 20px 18px 18px; text-align: left; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; font-family: var(--head); font-size: calc(1.1em * var(--head-scale)); color: var(--muted); }
.field input, .field textarea { font: var(--body-weight) 17px var(--body); color: var(--ink); background: transparent; padding: 12px 14px; width: 100%; -webkit-appearance: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .7; }
.field input[aria-invalid="true"] { border-color: var(--accent); border-style: dashed; }
.choices { display: grid; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: 56px; font: var(--head-weight) calc(1.3em * var(--head-scale)) var(--head); cursor: pointer; transition: background .2s, color .2s; color: var(--ink); }
.choice input:checked + span { background: var(--ink); color: var(--bg); }
.choice input:focus-visible + span { outline: 2px dashed var(--accent); outline-offset: 3px; }
.counter { display: flex; align-items: center; gap: 16px; }
.btn.round { width: 52px; padding: 0; border-radius: 50%; }
.counter output { min-width: 2ch; text-align: center; font: var(--head-weight) 2rem var(--head); color: var(--ink); }
.if-yes { display: grid; gap: 14px; }
.send { width: 100%; }
/* Each person on the reply, the events they'll come to, and the couple's questions */
.people, .hq { display: grid; gap: 16px; }
.hq:empty { display: none; }
.person { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 12px; }
.person:has(+ .person) { border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); padding-bottom: 18px; }
.person-name { padding: 0; font: var(--names-weight) calc(1.7em * var(--names-scale))/1.1 var(--names); color: var(--accent); }
.who-row { display: flex; gap: 10px; align-items: end; }
.who-row .grow { flex: 1; min-width: 0; }
.ev-row { display: grid; gap: 8px; }
.ev-name { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.ev-name b { font: var(--head-weight) calc(1.25em * var(--head-scale)) var(--head); color: var(--ink); }
.ev-name small { color: var(--muted); }
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice.small span { min-height: 46px; font-size: calc(1.05em * var(--head-scale)); }
.field select { font: var(--body-weight) 17px var(--body); color: var(--ink); background: transparent; padding: 12px 40px 12px 14px; width: 100%; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 20px center, right 14px center; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { color: #222; background: #fff; }
.field [aria-invalid="true"] { border-color: var(--accent); border-style: dashed; }
.btn.round.small { width: 46px; min-height: 46px; height: 46px; flex: none; }
.add-guest { justify-self: start; font-size: calc(1.05em * var(--head-scale)); }
.ev-sum { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 2px; color: var(--muted); }
.ev-sum b { color: var(--ink); font-family: var(--head); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The form sits on its own card, so the drawn line passes behind it rather than through the buttons */
.rsvp { position: relative; background: var(--bg); }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 16px; border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.quick[hidden] { display: none; }
.quick .btn { min-height: 48px; padding: 8px 10px; line-height: 1.15; font-size: calc(1.05em * var(--head-scale)); }
.quick-yes { background: var(--ink); color: var(--bg); }
/* Each event on one line where there's room: its name on the left, the two answers on the right.
   On a phone the answers ("Attending", "Not attending") sit under the name instead. */
.choice.small span { white-space: nowrap; }
@media (min-width: 480px) {
  .ev-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .ev-name { flex-direction: column; gap: 0; }
  .ev-row .yesno { grid-template-columns: repeat(2, minmax(88px, auto)); gap: 6px; }
  .ev-row .choice.small span { min-height: 42px; padding: 0 10px; }
}
.person { gap: 10px; }
.rsvp-sum { margin: 0; text-align: center; color: var(--muted); }
.rsvp-sum:empty { display: none; }
.rsvp-sum span { white-space: nowrap; }
.rsvp-sum b { color: var(--ink); font-family: var(--head); font-weight: var(--head-weight); }
.form-status { color: var(--muted); margin: -4px 0 0; }
.form-status:empty { display: none; }
.thanks { text-align: center; }
.thanks-heart { width: 56px; height: 50px; margin: 0 auto; color: var(--accent); stroke: var(--accent); stroke-width: 2.5px; }
.thanks-heart use { transition-duration: 1.2s; }
.thanks-heart.drawn { animation: pop .7s cubic-bezier(.34, 1.56, .64, 1) .9s both; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.thanks-big { font: var(--names-weight) calc(2.2em * var(--names-scale))/1.1 var(--names); color: var(--accent); }
.btn.imessage { width: 100%; margin-top: 12px; gap: 8px; }
.btn.imessage::before { content: ""; width: 20px; height: 18px; background: #34c759; border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%; flex: none; }

/* A personal hello when a guest opens their own link */
.welcome { position: relative; z-index: 1; width: calc(100% - 32px); max-width: 512px; margin: 14px auto 0; padding: 10px 16px; text-align: center; border-style: dashed; border-color: var(--accent); font-family: var(--head); font-size: calc(1.1rem * max(var(--head-scale), .9)); }
.welcome b { font-family: var(--names); font-weight: var(--names-weight); font-size: 1.35em; color: var(--accent); }
.preview-note { position: sticky; top: 0; z-index: 30; background: #2B1B33; color: #FFF6F7; font: 13px/1.3 -apple-system, system-ui, sans-serif; text-align: center; padding: 8px 12px; }
.preview-note a { color: #F7A3C7; }

/* Footer */
.foot { position: relative; z-index: 1; text-align: center; padding: 24px 20px 48px; }
.foot-heart { display: block; margin: 0 auto 6px; width: 34px; height: 30px; color: var(--accent); stroke: currentColor; stroke-width: 2.5px; filter: url(#rough); }
.foot-names { font: var(--names-weight) calc(1.8rem * var(--names-scale)) var(--names); }
.foot small { display: block; margin-top: 18px; color: var(--muted); font-size: 12px; }
.foot small a { color: inherit; }
.state { position: relative; z-index: 1; min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--muted); }

@media (min-width: 900px) { body { font-size: calc(var(--body-size) + 1px); } }
@media (prefers-reduced-motion: reduce) { .sil use, .sil path, .squiggle path { transition: none; } .thanks-heart.drawn { animation: none; } }

/* ── Photos ── */
/* height: auto keeps a picture's shape: it carries its pixel size (to hold its place while loading), which would otherwise set its height */
.blk img { display: block; max-width: 100%; height: auto; }
.photo-empty { display: grid; place-items: center; min-height: 160px; padding: 16px; border: var(--bw) dashed color-mix(in srgb, var(--ink) 40%, transparent); border-radius: var(--box-radius, var(--radius)); color: var(--muted); font-family: var(--body); }
.b-cover { padding: 0; }
.cover { position: relative; display: grid; min-height: 78vh; min-height: 78svh; overflow: hidden; }
.b-cover:not(:first-child) .cover { min-height: 62vh; min-height: 62svh; }
.cover-photo { position: absolute; inset: 0; }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; }
.cover-text { position: relative; z-index: 1; align-self: end; display: flex; flex-direction: column; align-items: center; padding: 120px 24px 44px; min-width: 0; }
.cover-text > * + * { margin-top: 4px; }
.shade-dark .cover-text { color: #fff; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6)); }
.shade-dark .cover-text .names, .shade-dark .cover-text .eyebrow, .shade-dark .cover-text .lead { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.shade-light .cover-text { background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), color-mix(in srgb, var(--bg) 88%, transparent) 55%); }
.photo { margin: 0 auto; }
.photo img { width: 100%; height: auto; border-radius: var(--box-radius, var(--radius)); }
.photo.size-m { max-width: 340px; }
.photo.size-l { max-width: 520px; }
.b-photo:has(.size-full) { padding-left: 0; padding-right: 0; }
.photo.size-full img { border-radius: 0; }
.photo.shape-arch img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px var(--box-radius, var(--radius)) var(--box-radius, var(--radius)); }
.photo.shape-circle img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.photo.shape-polaroid { max-width: 360px; padding: 10px 10px 34px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); transform: rotate(-1.5deg); }
.photo.shape-polaroid img { border-radius: 2px; }
.photo.shape-polaroid figcaption { color: #3a3a3a; }
.photo figcaption { margin-top: 10px; font-family: var(--body); color: var(--muted); }
.gallery { display: grid; gap: 8px; }
.g-grid { grid-template-columns: repeat(2, 1fr); }
.g-collage { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 112px; }
.g-collage .g-item:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
.g-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; overscroll-behavior-x: contain; }
.g-item { display: block; padding: 0; border: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: var(--box-radius, var(--radius)); overflow: hidden; cursor: zoom-in; aspect-ratio: 1; }
.g-collage .g-item { aspect-ratio: auto; }
.g-carousel .g-item { flex: 0 0 80%; aspect-ratio: 4 / 5; scroll-snap-align: center; }
.g-item img { width: 100%; height: 100%; object-fit: cover; }
.story { display: grid; gap: 16px; align-items: center; text-align: left; }
.story-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--box-radius, var(--radius)); }
.story-text > * + * { margin-top: 10px; }
@media (min-width: 540px) { .story { grid-template-columns: 1fr 1fr; } .story.side-right .story-photo, .story.side-right .photo-empty { order: 2; } }
.lightbox { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgb(12, 10, 14); }
.lightbox::backdrop { background: rgba(12, 10, 14, .94); }
.lb-img { width: 100%; height: 100%; object-fit: contain; }
.lb-close, .lb-prev, .lb-next { position: fixed; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 32px/1 system-ui, sans-serif; cursor: pointer; }
.lb-close { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-count { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; text-align: center; color: rgba(255, 255, 255, .8); font: 14px system-ui, sans-serif; }

/* The envelope guests open first */
body.sealed { overflow: hidden; }
.envelope-wrap { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 24px; background: var(--bg); transition: opacity .6s ease; }
.envelope-wrap::before { content: ""; position: absolute; inset: 0; background: var(--texture); pointer-events: none; }
.envelope-wrap.gone { opacity: 0; pointer-events: none; }
.envelope { position: relative; width: min(84vw, 380px); aspect-ratio: 1.45; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1000px; color: var(--ink); }
.envelope:focus-visible { outline-offset: 10px; }
.env-back, .env-card { position: absolute; border: var(--bw) solid var(--ink); }
.env-back { inset: 0; border-radius: 6px; background: color-mix(in srgb, var(--ink) 10%, var(--bg)); }
.env-card { left: 7%; right: 7%; top: 7%; bottom: 7%; z-index: 1; display: grid; place-items: center; padding: 12px; border-radius: 4px; background: var(--bg);
  font: var(--names-weight) calc(1.5rem * var(--names-scale))/1.15 var(--names); color: var(--accent); text-align: center; transition: transform 1s cubic-bezier(.2, .8, .2, 1) .55s; }
.env-front, .env-flap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.env-front { z-index: 2; }
.env-front path, .env-flap path { fill: color-mix(in srgb, var(--ink) 5%, var(--bg)); stroke: var(--ink); stroke-width: var(--bw); stroke-linejoin: round; }
.env-flap { z-index: 3; transform-origin: 50% 0; transition: transform .7s cubic-bezier(.4, 0, .2, 1) .15s, z-index 0s .5s; }
.env-flap path { fill: color-mix(in srgb, var(--ink) 14%, var(--bg)); }
.env-seal { position: absolute; z-index: 4; left: 50%; top: 60%; width: 16%; transform: translate(-50%, -50%); transition: opacity .3s, transform .3s; }
.env-seal circle { fill: var(--accent); }
.env-seal path { fill: var(--bg); }
.env-to { position: absolute; z-index: 4; left: 0; right: 0; bottom: 9%; display: grid; justify-items: center; line-height: 1.1; transition: opacity .3s; }
.env-to small { font: italic calc(.95rem * var(--head-scale)) var(--head); color: var(--muted); }
.env-to b { font: var(--names-weight) calc(1.6rem * var(--names-scale))/1.15 var(--names); color: var(--ink); max-width: 86%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-hint { position: relative; margin: 0; font-family: var(--head); color: var(--muted); animation: env-pulse 2.4s ease-in-out infinite; }
.open .env-seal { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
.open .env-to, .open .env-hint { opacity: 0; }
.open .env-flap { transform: rotateX(180deg); z-index: 0; }
.open .env-card { transform: translateY(-58%); }
@keyframes env-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .envelope-wrap, .env-card, .env-flap, .env-seal { transition: none; } .env-hint { animation: none; } }

/* Registry, travel and things to do */
.cards { display: grid; gap: 14px; margin-top: 14px !important; }
.card { padding: 20px 18px; display: grid; gap: 6px; justify-items: center; }
.card h3 { margin: 0; font: var(--names-weight) calc(1.6em * var(--names-scale))/1.15 var(--names); color: var(--accent); }
.card p { margin: 0; }
.card .eyebrow { margin-bottom: -2px; }
.card .btn { margin-top: 8px; }
.code-tag { font-family: var(--head); color: var(--muted); }
.code-tag b { color: var(--ink); letter-spacing: .04em; }
/* A long section folded under its heading, with a + to open it */
.fold > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { margin: 0; }
.fold > summary::after { content: "+"; flex: none; width: 1.5em; height: 1.5em; display: grid; place-items: center; border: var(--bw) solid var(--accent); border-radius: 50%; color: var(--accent); font: 1.3em/1 var(--head); }
.fold[open] > summary::after { content: "–"; }
.fold[open] > summary { margin-bottom: 14px; }
.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
.todo { list-style: none; padding: 0; margin: 12px 0 0; text-align: left; }
.todo li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.todo li:last-child { border-bottom: 0; }
.todo b { font: var(--head-weight) calc(1.25em * var(--head-scale)) var(--head); }
.todo span { grid-column: 1; color: var(--muted); font-size: .95em; }
.todo a { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--head); color: var(--accent); }

/* Guests' photos and questions */
.album-add { margin-top: 16px !important; }
.album-add .btn { width: 100%; }
.ask { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px !important; }
.ask input { min-width: 0; font: var(--body-weight) 17px var(--body); color: var(--ink); background: transparent; padding: 12px 14px; -webkit-appearance: none; }
.answers { display: grid; gap: 12px; margin-top: 14px !important; text-align: left; }
.qa { display: grid; gap: 6px; }
.qa p { margin: 0; }
.qa .q { justify-self: end; max-width: 85%; padding: 8px 14px; border-radius: 18px 18px 4px 18px; background: var(--ink); color: var(--bg); }
.qa .a { justify-self: start; max-width: 90%; padding: 8px 14px; border-radius: 18px 18px 18px 4px; border: var(--bw) solid var(--ink); }

/* Switching between the page's two languages */
.lang-switch { position: relative; z-index: 2; display: flex; justify-content: center; gap: 6px; padding: 12px 16px 0; }
.lang-switch button { min-height: 40px; padding: 4px 14px; border: var(--bw) solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: calc(1rem * var(--head-scale)) var(--head); cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
/* In a right-to-left language, any line still in English keeps its own direction */
main[dir="rtl"] :is(h1, h2, h3, p, label, button, a, summary, li, b, span, small) { unicode-bidi: plaintext; }

/* ── Layouts: how the opening is set, and how the sections below it sit ── */
/* Editorial: names set large and left, with a short rule before the eyebrow */
.inv[data-hero="left"] .opening { align-items: flex-start; text-align: left; padding-left: 28px; padding-right: 28px; }
.inv[data-hero="left"] .opening .names { font-size: calc(min(3.6em, 17vw) * var(--names-scale)); }
.inv[data-hero="left"] .opening .squiggle { margin-left: 0; }
.inv[data-hero="left"] .opening .eyebrow { letter-spacing: .14em; text-transform: uppercase; font-size: calc(.85em * var(--head-scale)); }
.inv[data-hero="left"] .opening .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 10px .3em 0; vertical-align: middle; background: var(--accent); }
/* Poster: the names fill the screen, one per line, the ampersand between */
.inv[data-hero="poster"] .opening .names { font-size: calc(min(4.8em, 23vw) * var(--names-scale)); line-height: .92; }
.inv[data-hero="poster"] .opening .names .amp { display: block; font-size: .55em; line-height: 1.2; }
.inv[data-hero="poster"] .opening .eyebrow { letter-spacing: .2em; text-transform: uppercase; font-size: calc(.8em * var(--head-scale)); }
/* Framed: a double rule around the opening, with small diamonds at the corners */
.inv[data-hero="frame"] .opening { margin: 18px 16px 8px; border: var(--bw) solid var(--ink); outline: 1px solid var(--accent); outline-offset: -9px; border-radius: 4px; }
.inv[data-hero="frame"] .opening::before, .inv[data-hero="frame"] .opening::after { content: ""; position: absolute; width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); }
.inv[data-hero="frame"] .opening::before { top: -6px; left: calc(50% - 5px); }
.inv[data-hero="frame"] .opening::after { bottom: -6px; left: calc(50% - 5px); }
/* Arch: the opening sits under a tall arch */
.inv[data-hero="arch"] .opening { margin: 18px 22px 8px; padding-top: 64px; border: var(--bw) solid var(--ink); border-bottom: 0; border-radius: 50% 50% 0 0 / 180px 180px 0 0; }
/* Date first: the eyebrow (usually the date) leads, large, in the accent colour */
.inv[data-hero="date"] .opening .eyebrow { order: -1; font-size: calc(2em * var(--head-scale)); color: var(--accent); letter-spacing: .06em; }
.inv[data-hero="date"] .opening .names { font-size: calc(min(2.6em, 13vw) * var(--names-scale)); }
.inv[data-hero="date"] .opening .squiggle { order: -1; }

/* Sections. The opening and the couple's drawing keep their own setting. */
/* Cards go round blocks that don't already have their own outline */
.inv[data-sections="cards"] > :is(.b-text, .b-story, .b-details, .b-countdown, .b-timeline, .b-places, .b-registry, .b-travel, .b-todo, .b-ask, .b-album) {
  margin: 12px 16px; padding: 22px 20px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.inv[data-sections="cards"] > .b-heading { padding-bottom: 0; }
.inv[data-sections="lined"] > .blk:not(.opening):not(.b-couple):not(.b-hero) { text-align: left; margin: 0 24px; padding-left: 0; padding-right: 0; }
.inv[data-sections="lined"] > .blk:not(.opening):not(.b-couple):not(.b-hero) .prose { margin-left: 0; max-width: none; }
.inv[data-sections="lined"] > .b-heading:not(:first-child) { border-top: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); margin-top: 18px; }
.inv[data-sections="alternate"] > .blk:not(.opening):not(.b-couple):not(.b-hero):nth-child(odd) { text-align: left; }
.inv[data-sections="alternate"] > .blk:not(.opening):not(.b-couple):not(.b-hero):nth-child(even) { text-align: right; }
.inv[data-sections="alternate"] > .blk:nth-child(odd) .prose { margin-left: 0; }
.inv[data-sections="alternate"] > .blk:nth-child(even) .prose { margin-right: 0; }
.inv[data-sections="numbered"] { counter-reset: sec; }
.inv[data-sections="numbered"] > .b-heading h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 8px; font: 600 13px/1 var(--body); letter-spacing: .3em; color: var(--accent); }
.inv[data-sections="numbered"] > .b-heading h2::after { content: ""; display: block; width: 36px; height: 2px; margin: 12px auto 0; background: var(--accent); }

/* A guest's table, under their greeting (when the couple shares the seating chart) */
.welcome .your-table { display: block; margin-top: 6px; font-size: .95em; }
.welcome .your-table b { font: inherit; font-weight: 700; color: var(--ink); }

/* The Bismillah at the top: Arabic script, centred, in the reader's best Arabic typeface */
.b-verse { padding-top: 28px; padding-bottom: 0; }
.verse { margin: 0; text-align: center; font: 400 calc(1.9em * var(--k, 1))/1.6 "Amiri", "Geeza Pro", "Noto Naskh Arabic", "Traditional Arabic", "Arabic Typesetting", "Times New Roman", serif; color: var(--ink); letter-spacing: 0; word-spacing: .08em; }

/* Meal choices: a button per dish, each with a little drawing that draws itself, steams and pops when picked */
.dish-q .q-label { font: inherit; color: var(--muted); }
.dishes { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.dish span { flex-direction: column; gap: 4px; min-height: 84px; padding: 10px 8px; text-align: center; line-height: 1.15; }
.dish b { font-weight: inherit; }
.dish-art { width: 34px; height: 34px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.dish-art .food { stroke-dasharray: 1; stroke-dashoffset: 0; }
.dish-art .steam { opacity: 0; }
.dish.picked:not(.was) .dish-art { animation: dish-pop .7s cubic-bezier(.34, 1.56, .64, 1); }
.dish.picked:not(.was) .dish-art .food { animation: dish-draw .7s ease-out; }
.dish.picked .dish-art .steam { animation: dish-steam 1.8s ease-out .3s infinite; }
@keyframes dish-pop { 0% { transform: scale(.6) rotate(-12deg); } 60% { transform: scale(1.2) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes dish-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dish-steam { 0% { opacity: 0; transform: translateY(3px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-4px); } }

/* The thank-you: its letters rise into place one by one, then the ayah appears word by word */
.thanks-big .ltr { display: inline-block; white-space: pre; }
.thanks.fresh { animation: card-in .5s ease-out both; }
.thanks.fresh .thanks-big .ltr { animation: ltr-in .55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.35s + var(--i) * .045s); }
.ayah { margin: 6px 0 2px; display: grid; gap: 6px; }
.ayah-ar { margin: 0; font: 400 1.7em/1.9 "Amiri", "Geeza Pro", "Noto Naskh Arabic", "Traditional Arabic", serif; color: var(--ink); }
.ayah-ar .wd { display: inline-block; }
.ayah figcaption { display: grid; gap: 2px; color: var(--muted); font-size: .92em; }
.ayah figcaption small { font-size: .85em; letter-spacing: .04em; }
.thanks.fresh .ayah-ar .wd { animation: wd-in .7s ease-out both; animation-delay: calc(.6s + var(--n) * .045s + var(--w) * .22s); }
.thanks.fresh .ayah figcaption { animation: wd-in .8s ease-out both; animation-delay: calc(1.4s + var(--n) * .045s + 1.6s); }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ltr-in { from { opacity: 0; transform: translateY(.5em) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes wd-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .thanks.fresh, .thanks.fresh .thanks-big .ltr, .thanks.fresh .ayah-ar .wd, .thanks.fresh .ayah figcaption, .dish-art, .dish-art .food, .dish-art .steam { animation: none !important; }
}