/* The original artwork is locked in assets/invitation.*.
   Change the surrounding experience here; do not filter, crop, or recolor it. */
:root {
  color-scheme: dark;
  --background: #2a0c0a;
  --background-deep: #190807;
  --surface: #39130f;
  --ivory: #f5e5cb;
  --muted: #d6c1a4;
  --gold: #d9b273;
  --gold-bright: #efce94;
  --line: rgb(217 178 115 / 31%);
  --serif: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --entrance-duration: 1000ms;
  --reveal-duration: 850ms;
  --scroll-shift: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; scrollbar-gutter: stable; }
body { margin: 0; min-width: 280px; background: var(--background); color: var(--ivory); font-family: var(--serif); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.viewer-open { overflow: hidden; }
img { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: rgb(217 178 115 / 18%); touch-action: manipulation; }
a { color: inherit; text-underline-offset: 5px; }
button { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
button:disabled { cursor: default; opacity: .35; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 5px; }
::selection { background: #c99e5d; color: #2a0c0a; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-small { width: 14px; height: 14px; }
.skip-link { position: absolute; z-index: 50; top: 8px; left: 12px; padding: 10px 18px; background: var(--ivory); color: var(--background); transform: translateY(-180%); font-family: var(--sans); }
.skip-link:focus { transform: translateY(0); }

/* The atmosphere is a separate layer, always behind the locked invitation. */
.atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; min-height: 100%; }
body { position: relative; isolation: isolate; }
.ambient-light { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 8%, rgb(155 66 25 / 26%), transparent 47%), radial-gradient(ellipse at 0% 57%, rgb(100 32 22 / 27%), transparent 43%), radial-gradient(ellipse at 100% 77%, rgb(103 44 22 / 20%), transparent 43%); }
.background-pattern { position: absolute; inset: 0; background: url("assets/pattern.svg") repeat; background-size: 66px 66px; opacity: .035; }
.background-grain { position: absolute; inset: 0; background: url("assets/grain.svg") repeat; opacity: .11; }
.filigree { position: absolute; top: 70px; width: clamp(180px, 23vw, 380px); opacity: .48; }
.filigree-left { left: 0; transform: translateY(var(--scroll-shift)); }
.filigree-right { right: 0; transform: scaleX(-1) translateY(var(--scroll-shift)); }
.edge-thread { position: absolute; top: 102px; bottom: 0; width: 5px; border-inline: 1px solid rgb(217 178 115 / 14%); }
.edge-thread-left { left: 25px; }
.edge-thread-right { right: 25px; }
.site-header, main, .site-footer { position: relative; z-index: 1; }

.site-header { width: min(100% - 80px, 1000px); min-height: 96px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgb(217 178 115 / 15%); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--gold); text-decoration: none; min-height: 44px; }
.wordmark span { font-family: var(--sans); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .23em; }
.navigation-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--muted); text-decoration: none; font-family: var(--sans); font-size: 12px; transition: color 220ms, gap 300ms var(--ease); }
.navigation-link .icon { width: 14px; height: 14px; }

/* The intrinsic 1024 × 1536 dimensions reserve space before the image loads. */
.invitation-section { width: min(100% - 104px, 800px); margin: 44px auto 0; scroll-margin-top: 24px; }
.invitation-shell { position: relative; padding: 13px; border: 1px solid rgb(217 178 115 / 55%); background: linear-gradient(130deg, #61351d, #321510 38%, #52271b 75%, #794d26); box-shadow: 0 35px 85px rgb(0 0 0 / 35%), 0 8px 20px rgb(0 0 0 / 22%), 0 0 0 5px rgb(217 178 115 / 3%); }
.invitation-shell::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgb(217 178 115 / 26%); pointer-events: none; }
.frame-corner { position: absolute; z-index: 2; width: 25px; height: 25px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); pointer-events: none; }
.frame-corner-tl { top: -4px; left: -4px; }
.frame-corner-tr { top: -4px; right: -4px; transform: rotate(90deg); }
.frame-corner-bl { bottom: -4px; left: -4px; transform: rotate(-90deg); }
.frame-corner-br { bottom: -4px; right: -4px; transform: rotate(180deg); }
.invitation-figure { margin: 0; }
.invitation-artwork, .viewer-artwork { position: relative; }
.invitation-art { display: block; cursor: zoom-in; }
.invitation-art picture { display: block; }
.invitation-art img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; }
/* Coordinates come directly from the PDF's /Link rectangles; nothing is painted
   over the artwork. Minimum touch height extends the transparent hit area. */
.artwork-map-link { position: absolute; z-index: 3; top: 85.8723958333%; height: 2.4739583333%; min-height: 44px; min-width: 44px; transform: translateY(-50%); }
.artwork-map-wedding { left: 23.92578125%; width: 14.16015625%; }
.artwork-map-thalikettu { left: 62.5%; width: 14.6484375%; }
.artwork-map-link:focus-visible { outline-offset: 0; }
.invitation-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 23px; row-gap: 0; padding-top: 17px; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font-family: var(--sans); font-size: 12px; text-decoration: none; transition: color 200ms; }
.text-link .icon { color: var(--gold); width: 16px; height: 16px; }
.text-link .icon-small { width: 12px; height: 12px; }
.tool-divider { height: 13px; width: 1px; background: var(--line); }

.transcript { width: min(100%, 700px); margin: 4px auto 0; }
.transcript summary { display: flex; justify-content: center; align-items: center; gap: 10px; width: fit-content; max-width: 100%; min-height: 44px; margin-inline: auto; list-style: none; color: var(--muted); font-family: var(--sans); font-size: 11px; }
.transcript summary::-webkit-details-marker { display: none; }
.summary-sign { width: 10px; height: 10px; position: relative; }
.summary-sign::before, .summary-sign::after { content: ""; position: absolute; background: var(--gold); top: 5px; left: 0; height: 1px; width: 10px; }
.summary-sign::after { transform: rotate(90deg); transition: transform 250ms; }
.transcript[open] .summary-sign::after { transform: rotate(0); }
.transcript-content { padding: 26px 25px 18px; margin-top: 12px; text-align: center; font-size: 16px; line-height: 1.85; background: rgb(29 7 6 / 55%); border: 1px solid var(--line); }
.transcript-content p { margin: 0 0 22px; }
.transcript-title { color: var(--gold); letter-spacing: .15em; font-size: 13px; }
.transcript-content .transcript-names { font-size: clamp(23px, 4vw, 32px); line-height: 1.6; }
.transcript-families, .transcript-ceremonies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.transcript-ceremonies { margin-block: 26px; }
.transcript-ceremonies h2 { font-family: var(--sans); color: var(--gold); letter-spacing: .1em; font-size: 11px; font-weight: 500; }
.transcript-ceremonies a { display: inline-block; min-height: 44px; color: var(--gold-bright); }

.ornamental-divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 54px auto 45px; }
.ornamental-divider span { width: clamp(60px, 12vw, 150px); height: 1px; background: linear-gradient(90deg, transparent, rgb(217 178 115 / 65%)); }
.ornamental-divider span:last-child { transform: rotate(180deg); }
.ornamental-divider img { opacity: .85; }
.venues-section { width: min(100% - 104px, 1000px); margin: 0 auto 110px; scroll-margin-top: 45px; }
.section-heading { text-align: center; margin-bottom: 40px; }
.eyebrow { color: var(--gold); font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .23em; text-transform: uppercase; margin: 0 0 13px; }
.section-heading h2 { font-size: clamp(36px, 5vw, 48px); line-height: 1.18; font-weight: 400; margin: 0 0 18px; letter-spacing: -.025em; }
.section-date { color: var(--muted); font-size: 15px; margin: 0; }
.venue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.venue-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 31px 34px 24px; background: linear-gradient(140deg, rgb(95 42 28 / 42%), var(--surface)); border: 1px solid var(--line); box-shadow: 0 15px 32px rgb(0 0 0 / 9%); transition: border-color 300ms, box-shadow 300ms; }
.venue-card::before, .venue-card::after { content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none; }
.venue-card::before { top: 5px; left: 5px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.venue-card::after { bottom: 5px; right: 5px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.venue-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.venue-icon { width: 27px; height: 27px; color: var(--gold); stroke-width: 1; }
.venue-number { font-size: 15px; color: var(--gold); opacity: .76; font-style: italic; }
.venue-card h3 { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .17em; color: var(--gold); margin: 0 0 16px; }
.venue-name { margin: 0; font-size: clamp(27px, 3vw, 35px); line-height: 1.24; font-weight: 400; letter-spacing: -.025em; overflow-wrap: break-word; }
.venue-address { font-size: 17px; color: var(--muted); margin: 10px 0 0; }
.venue-details { color: var(--muted); font-size: 14px; margin: 27px 0 25px; padding-top: 22px; border-top: 1px solid rgb(217 178 115 / 20%); }
.venue-details p { margin: 0; }
.venue-details .venue-time { color: var(--ivory); margin-top: 7px; font-size: 19px; letter-spacing: .015em; }
.map-link { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 0; margin-top: auto; color: var(--gold-bright); text-decoration: none; border-top: 1px solid rgb(217 178 115 / 20%); font-family: var(--sans); font-size: 12px; transition: color 220ms; }
.map-link .icon { width: 18px; height: 18px; }
.map-link .map-arrow { margin-left: auto; width: 15px; height: 15px; transition: transform 300ms var(--ease); }

/* A separate woven-gold treatment gives the countdown a quiet finale. */
.countdown-section { position: relative; isolation: isolate; overflow: hidden; padding: 76px 24px 81px; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 55%, rgb(154 96 43 / 15%), transparent 70%), linear-gradient(180deg, #36140f, #24100c); }
.countdown-section::before { content: ""; position: absolute; inset: 7px 0; z-index: -1; border-block: 1px solid rgb(217 178 115 / 10%); background: url("assets/pattern.svg") center / 85px; opacity: .14; }
.countdown-watermark { position: absolute; z-index: -1; width: 440px; height: 440px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .04; }
.countdown-inner { position: relative; max-width: 760px; margin-inline: auto; }
.countdown-flower { display: block; margin: 0 auto 21px; }
.countdown-section .eyebrow { margin-bottom: 13px; }
.countdown-section h2 { font-size: clamp(27px, 4vw, 39px); line-height: 1.25; font-weight: 400; letter-spacing: -.025em; margin: 0; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 650px; margin: 39px auto 30px; }
.countdown-unit { position: relative; min-width: 0; padding: 5px 10px; }
.countdown-unit + .countdown-unit::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 16px; width: 1px; background: linear-gradient(transparent, rgb(217 178 115 / 40%), transparent); }
.countdown-number { display: block; min-height: 1.25em; font-family: var(--serif); font-size: clamp(39px, 6vw, 72px); line-height: 1.25; font-weight: 400; font-variant-numeric: tabular-nums lining-nums; color: var(--gold-bright); letter-spacing: -.035em; }
.countdown-label { display: block; margin-top: 9px; color: var(--muted); font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.countdown-date { color: var(--muted); margin: 0; font-size: 14px; }
.countdown-date span { margin-inline: 8px; color: var(--gold); }
.countdown-message { min-height: 100px; display: grid; place-items: center; font-style: italic; font-size: clamp(22px, 4vw, 30px); line-height: 1.5; margin: 34px 0 25px; }
.countdown-noscript { font-size: 14px; color: var(--muted); }
.site-footer { text-align: center; padding: 38px 24px 36px; }
.site-footer p { max-width: 600px; margin: 0 auto; color: var(--muted); font-size: 16px; font-style: italic; line-height: 1.8; }
.footer-ornament { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 20px; opacity: .65; }
.footer-ornament span { height: 1px; width: 45px; background: var(--line); }

/* Native dialog: keyboard focus stays inside, Escape closes, touch can pan. */
.invitation-viewer { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; padding: 0; margin: 0; border: 0; background: var(--background-deep); color: var(--ivory); }
.invitation-viewer[open] { display: flex; flex-direction: column; }
.invitation-viewer::backdrop { background: rgb(15 4 3 / 92%); }
.viewer-toolbar { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; padding: max(12px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 12px max(22px, env(safe-area-inset-left)); background: #2a100c; border-bottom: 1px solid var(--line); }
.viewer-title-group { margin-right: auto; }
.viewer-title-group h2 { font-size: 22px; font-weight: 400; margin: 0; }
.viewer-title-group p { color: var(--muted); font-family: var(--sans); font-size: 11px; margin: 2px 0 0; }
.viewer-controls { display: flex; align-items: center; gap: 6px; }
.viewer-controls button, .viewer-close { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: 2px; font-family: var(--sans); font-size: 12px; }
.viewer-controls output { display: inline-block; min-width: 48px; text-align: center; font-size: 11px; font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.viewer-close { margin-left: 8px; flex: 0 0 auto; }
.viewer-viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; scrollbar-color: #a57a42 #21100d; }
.viewer-canvas { display: grid; justify-items: center; align-content: start; min-height: 100%; min-width: 100%; padding: 16px; }
.viewer-canvas picture { display: block; }
.viewer-canvas img { display: block; width: var(--viewer-image-width, 1024px); max-width: none; height: auto; }

/* Enhancement only: without JavaScript, every section is visible. */
@media (prefers-reduced-motion: no-preference) {
  .entrance-header { animation: arrive var(--entrance-duration) var(--ease) both; }
  .entrance-invitation { animation: invitation-arrive var(--entrance-duration) var(--ease) 120ms both; }
  .entrance-tools { animation: arrive 800ms var(--ease) 500ms both; }
  .ambient-light { animation: ambient-breathe 18s ease-in-out infinite alternate; }
  .reveal-pending { opacity: 0; transform: translateY(22px); }
  [data-reveal] { transition: opacity var(--reveal-duration) var(--ease), transform var(--reveal-duration) var(--ease); }
  [data-reveal-delay="1"] { transition-delay: 110ms; }
  .countdown-number.number-changed { animation: number-settle 300ms var(--ease); }
}
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes invitation-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ambient-breathe { from { opacity: .65; } to { opacity: 1; } }
@keyframes number-settle { from { opacity: .65; } to { opacity: 1; } }

@media (hover: hover) {
  .text-link:hover, .navigation-link:hover { color: var(--gold-bright); }
  .navigation-link:hover { gap: 14px; }
  .venue-card:hover, .venue-card:focus-within { border-color: rgb(217 178 115 / 66%); box-shadow: 0 18px 38px rgb(0 0 0 / 16%); }
  .map-link:hover { color: #fff0cf; }
  .map-link:hover .map-arrow { transform: translate(2px, -2px); }
  .viewer-controls button:hover:enabled, .viewer-close:hover { background: rgb(217 178 115 / 12%); }
}
@media (min-width: 1200px) {
  .filigree { opacity: .6; }
}
@media (max-width: 760px) {
  .site-header { width: calc(100% - 48px); min-height: 78px; }
  .wordmark { gap: 9px; }
  .wordmark span { font-size: 9px; letter-spacing: .17em; }
  .wordmark img { width: 26px; height: 26px; }
  .navigation-link { font-size: 11px; gap: 7px; }
  .invitation-section { width: calc(100% - 48px); margin-top: 32px; }
  .invitation-shell { padding: 8px; }
  .invitation-shell::before { inset: 3px; }
  .frame-corner { width: 19px; height: 19px; }
  .edge-thread-left { left: 10px; }
  .edge-thread-right { right: 10px; }
  .filigree { top: 76px; opacity: .34; width: 185px; }
  .venues-section { width: calc(100% - 48px); margin-bottom: 72px; }
  .venue-grid { gap: 20px; }
  .venue-card { padding: 26px 24px 19px; }
  .venue-name { font-size: 29px; }
  .venue-card h3 { font-size: 9px; }
  .venue-details { font-size: 13px; }
  .venue-details .venue-time { font-size: 18px; }
  .map-link { font-size: 11px; gap: 8px; }
  .section-heading { margin-bottom: 31px; }
  .ornamental-divider { margin: 38px auto 31px; }
  .countdown-section { padding-block: 58px 60px; }
  .viewer-toolbar { flex-wrap: wrap; gap: 8px; padding-inline: max(16px, env(safe-area-inset-left)); }
  .viewer-title-group { order: 0; }
  .viewer-close { order: 1; }
  .viewer-controls { order: 2; flex-basis: 100%; justify-content: center; }
}
@media (max-width: 580px) {
  .venue-grid { grid-template-columns: minmax(0, 1fr); }
  .venue-card { padding: 25px 27px 19px; }
  .venue-card-top { margin-bottom: 19px; }
  .venue-name { font-size: 31px; }
  .venue-card h3 { font-size: 10px; }
  .desktop-break { display: none; }
  .venue-address { font-size: 16px; }
  .venue-details { margin-top: 23px; margin-bottom: 17px; font-size: 14px; }
  .map-link { font-size: 12px; }
  .countdown-grid { margin-block: 29px 25px; }
  .countdown-unit { padding-inline: 5px; }
  .countdown-label { font-size: 9px; letter-spacing: .1em; }
  .countdown-date { font-size: 13px; }
  .site-footer { padding-block: 30px; }
  .site-footer p { font-size: 15px; }
  .transcript-families, .transcript-ceremonies { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .transcript-content { padding: 25px 16px 15px; }
  .transcript-ceremonies > div { margin-bottom: 24px; }
  .transcript-ceremonies > div:last-child { margin-bottom: 0; }
}
@media (max-width: 360px) {
  .site-header { width: calc(100% - 32px); }
  .wordmark span { font-size: 8px; letter-spacing: .1em; }
  .wordmark img { width: 23px; height: 23px; }
  .navigation-link { font-size: 10px; gap: 4px; }
  .invitation-section, .venues-section { width: calc(100% - 32px); }
  .invitation-tools { column-gap: 13px; }
  .text-link { font-size: 11px; gap: 7px; }
  .venue-card { padding-inline: 22px; }
  .venue-name { font-size: 28px; }
  .countdown-section { padding-inline: 16px; }
  .countdown-number { font-size: 36px; }
  .countdown-date { font-size: 12px; }
  .footer-break { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending { opacity: 1; transform: none; }
  .filigree-left { transform: none; }
  .filigree-right { transform: scaleX(-1); }
}
@media print {
  body { background: white; }
  .atmosphere, .site-header, .invitation-tools, .transcript, .ornamental-divider, .venues-section, .countdown-section, .site-footer, .skip-link, .invitation-viewer { display: none !important; }
  .invitation-section { width: 100%; max-width: 180mm; margin: 0 auto; }
  .invitation-shell { padding: 0; border: 0; box-shadow: none; animation: none; }
  .frame-corner, .invitation-shell::before { display: none; }
  .invitation-art img { width: 100%; }
}