@font-face { font-family: "El Messiri"; src: url("../fonts/el-messiri.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Moontime"; src: url("../fonts/moontime.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/libre-baskerville.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Souvenir"; src: url("../fonts/souvenir.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("../fonts/noto-serif.woff2") format("woff2"); font-display: swap; }

:root {
  --color-primary: #171817;
  --color-primary-contrast: #fdfdfc;
  --color-background: #fdfdfc;
  --color-surface: #f5f4f1;
  --color-text: #1a1a18;
  --color-muted: #6f706c;
  --color-border: #b8b8b2;
  --color-sage: #353f34;
  --color-earth: #725b44;
  --font-display: "El Messiri", Georgia, serif;
  --font-script: "Moontime", "Brush Script MT", cursive;
  --font-serif: "Libre Baskerville", Georgia, serif;
  --font-body: "DM Sans", Arial, sans-serif;
  --page-width: 516px;
  --header-height: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-height) + 12px); }
body { margin: 0; min-width: 0; overflow-x: hidden; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: 14px; line-height: 1.7; }
body.overlay-open { overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border-radius: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-earth); outline-offset: 4px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 8px 12px; background: var(--color-primary); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; top: 0; left: 0; z-index: 100; display: flex; width: 100%; height: var(--header-height); align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid transparent; color: var(--color-text); transition: background-color .35s, border-color .35s; }
.site-header.scrolled, .site-header.menu-open { border-color: rgba(23,24,23,.15); background: rgba(253,253,252,.94); backdrop-filter: blur(8px); }
.nav-mark { position: relative; z-index: 2; text-decoration: none; font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.desktop-nav { display: none; }
.menu-toggle { position: relative; z-index: 2; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { position: absolute; left: 9px; width: 24px; height: 1px; background: currentColor; transition: transform .3s, top .3s; }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 25px; }
.menu-open .menu-toggle span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .menu-toggle span:last-child { top: 21px; transform: rotate(-45deg); }
.mobile-nav { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 19px; background: var(--color-background); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s, visibility .3s, transform .3s; }
.menu-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a, .mobile-nav button { padding: 4px; border: 0; background: transparent; font-family: var(--font-serif); font-size: 17px; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; cursor: pointer; }

.hero { position: relative; width: min(100%, var(--page-width)); height: max(700px, 100svh); max-height: 900px; margin: 0 auto; overflow: hidden; background: #d7d7d5; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: 50% center; filter: grayscale(1) contrast(1.07); }
.hero-wash { position: absolute; inset: 0; background: rgba(255,255,255,.28); }
.hero-frame { position: absolute; inset: 15% 9% 7%; border-left: 1px solid rgba(23,24,23,.72); border-bottom: 1px solid rgba(23,24,23,.72); }
.hero-frame::before { content: ""; position: absolute; top: 0; left: 0; width: 36%; border-top: 1px solid rgba(23,24,23,.72); }
.hero-frame::after { content: ""; position: absolute; right: 0; bottom: 0; height: 21%; border-right: 1px solid rgba(23,24,23,.72); }
.hero-names { position: absolute; top: 17%; left: -1px; display: grid; width: min(80vw, 330px); margin: 0; padding: 12px 0 14px 8%; background: rgba(253,253,252,.73); font-family: var(--font-display); font-size: clamp(37px, 12vw, 64px); font-weight: 400; line-height: .9; letter-spacing: .045em; text-transform: uppercase; }
.hero-names i { margin: -2px 0 -4px 30%; font-family: var(--font-script); font-size: .8em; font-weight: 400; line-height: .65; }
.hero-date { position: absolute; right: 58px; bottom: -17px; margin: 0; padding-left: 18px; background: rgba(253,253,252,.78); font-family: var(--font-script); font-size: 35px; line-height: 1; white-space: nowrap; }
.scroll-cue { position: absolute; right: 12px; bottom: 20px; width: 25px; height: 44px; }
.scroll-cue span { position: absolute; top: 4px; left: 12px; width: 1px; height: 28px; background: var(--color-primary); animation: scrollCue 2s infinite; }
@keyframes scrollCue { 0%,100% { transform: scaleY(.35); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

.section { position: relative; padding: 92px 24px; overflow: hidden; }
.narrow, .text-column { width: min(100%, 380px); margin-inline: auto; text-align: center; }
.text-column { width: min(100%, 335px); }
.script-title { margin: 0 0 28px; font-family: var(--font-script); font-size: clamp(47px, 14vw, 70px); font-weight: 400; line-height: .85; }
.eyebrow { margin: 0 0 24px; font-family: var(--font-serif); font-size: 12px; letter-spacing: .14em; line-height: 1.55; text-transform: uppercase; }
.text-button, .dark-button, .light-button, .submit-button, .location-link, .disabled-link { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 12px 25px; border: 1px solid var(--color-primary); background: transparent; color: var(--color-text); font-family: var(--font-serif); font-size: 10px; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background-color .25s, color .25s; }
.text-button:hover, .location-link:hover { background: var(--color-primary); color: var(--color-primary-contrast); }
.disabled-link { border-color: var(--color-border); color: var(--color-muted); cursor: not-allowed; }

.countdown-section { padding-top: 86px; padding-bottom: 104px; }
.countdown { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: 7px; }
.countdown > div { position: relative; text-align: center; }
.countdown > div:not(:last-child)::after { content: ":"; position: absolute; top: 1px; right: -6px; font-family: var(--font-display); font-size: 26px; }
.countdown strong { display: block; font-family: var(--font-display); font-size: clamp(32px, 10vw, 47px); font-weight: 400; line-height: 1.15; font-variant-numeric: tabular-nums; }
.countdown span { display: block; margin-top: 5px; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.countdown-today { margin: 5px 0 0; font-family: var(--font-serif); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }

.invitation-intro { padding-top: 54px; padding-inline: 0; }
.invitation-intro > .text-column { margin-bottom: 104px; padding-inline: 12px; }
.venues { width: min(100%, var(--page-width)); margin: auto; }
.venue { position: relative; min-height: 326px; margin-bottom: 54px; padding: 52px 30px 36px; background: var(--color-surface); }
.venue::before { content: attr(data-word); position: absolute; top: 50%; color: rgba(23,24,23,.075); font-family: "Souvenir", serif; font-size: 65px; letter-spacing: .06em; line-height: 1; text-transform: uppercase; transform: translateY(-50%) rotate(-90deg); }
.venue:nth-child(odd)::before { left: -122px; }
.venue:nth-child(even)::before { right: -130px; }
.venue-image { position: absolute; top: -38px; width: 42%; height: 255px; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.venue:nth-child(odd) .venue-image { left: 32px; }
.venue:nth-child(even) .venue-image { right: 32px; }
.venue-content { position: relative; z-index: 1; width: 53%; margin-left: auto; text-align: center; }
.venue:nth-child(even) .venue-content { margin-right: auto; margin-left: 0; }
.venue-title { margin: 0 0 18px; font-family: var(--font-script); font-size: 48px; font-weight: 400; line-height: .8; }
.venue-time { margin: 0 0 8px; font-family: var(--font-display); font-size: 25px; }
.venue-place { margin: 0 0 5px; font-family: var(--font-serif); font-size: 12px; line-height: 1.4; }
.venue-address { min-height: 35px; margin: 0 0 17px; color: var(--color-muted); font-size: 10px; line-height: 1.5; }
.location-link, .disabled-link { width: 100%; padding-inline: 8px; font-size: 8px; }
.calendar-wrap { position: relative; width: fit-content; max-width: 100%; margin: 38px auto 0; text-align: center; }
.calendar-wrap > button { max-width: 100%; white-space: normal; }
.calendar-menu { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 4; width: 190px; padding: 7px 15px; border: 1px solid var(--color-border); background: var(--color-background); transform: translateX(-50%); }
.calendar-menu a, .calendar-menu button { display: block; width: 100%; padding: 10px 0; border: 0; background: transparent; font-family: var(--font-serif); font-size: 9px; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; cursor: pointer; }

.itinerary-section { padding-top: 128px; padding-bottom: 130px; }
.vertical-word { position: absolute; z-index: 0; color: rgba(23,24,23,.055); font-family: "Souvenir", serif; font-size: clamp(70px, 26vw, 135px); letter-spacing: .04em; line-height: 1; text-transform: uppercase; white-space: nowrap; transform: rotate(-90deg); pointer-events: none; }
.itinerary-section > .vertical-word { top: 43%; right: -232px; }
.itinerary-section > .script-title { position: relative; z-index: 1; margin-bottom: 78px; text-align: center; }
.timeline { position: relative; width: min(100%, 400px); margin: 0 auto; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 1px; background: var(--color-earth); }
.timeline-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 145px; }
.timeline-item::before { content: ""; position: absolute; top: 10px; left: calc(50% - 4px); width: 9px; height: 9px; border: 1px solid var(--color-earth); background: var(--color-background); transform: rotate(45deg); }
.timeline-content { width: 82%; }
.timeline-item:nth-child(odd) .timeline-content { grid-column: 1; text-align: right; }
.timeline-item:nth-child(even) .timeline-content { grid-column: 2; justify-self: end; text-align: left; }
.timeline-title { margin: 0; color: var(--color-sage); font-family: "Noto Serif", serif; font-size: 21px; font-weight: 600; }
.timeline-time { margin: 5px 0 0; color: var(--color-earth); font-family: "Souvenir", serif; font-size: 15px; letter-spacing: .08em; }
.timeline-index { display: block; margin-bottom: 10px; color: var(--color-border); font-family: var(--font-script); font-size: 34px; line-height: 1; }

.dark { background: var(--color-primary); color: var(--color-primary-contrast); }
.dark .vertical-word { color: rgba(255,255,255,.055); }
.story-section { padding-top: 138px; padding-bottom: 130px; }
.story-section > .vertical-word { top: 24%; left: -298px; }
.story-heading { position: relative; width: min(100%, 390px); margin: 0 auto 46px; }
.story-heading span { display: block; margin-left: 14%; font-family: var(--font-script); font-size: 61px; line-height: .65; }
.story-heading h2 { margin: 0 0 0 32%; font-family: var(--font-display); font-size: 48px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
.story-copy { position: relative; width: min(100%, 345px); margin: 0 auto 80px; color: #d8d8d5; text-align: center; }
.story-copy p { margin: 0 0 18px; }
.story-photos { position: relative; width: min(100%, 460px); margin: auto; }
.story-photo { margin: 0 0 72px; padding: 8px; border: 1px solid rgba(255,255,255,.5); }
.story-photo:nth-child(even) { width: 84%; margin-left: auto; }
.story-photo img { width: 100%; height: clamp(230px, 70vw, 310px); object-fit: cover; filter: grayscale(1) contrast(1.08); }

.dress-gift-section { min-height: 890px; display: flex; flex-direction: column; justify-content: space-around; padding-top: 122px; padding-bottom: 122px; }
.section-watermark { position: absolute; inset: 0; width: min(100%, 588px); height: 100%; margin: auto; object-fit: cover; opacity: .08; filter: grayscale(1); }
.dress-block, .gift-block { position: relative; width: min(100%, 370px); margin-inline: auto; text-align: center; }
.dress-block { padding-bottom: 82px; border-bottom: 1px solid var(--color-border); }
.dress-block h2, .gift-block h2 { margin: 0 0 25px; font-family: var(--font-script); font-size: 58px; font-weight: 400; line-height: .85; }
.dress-value { margin: 0; font-family: var(--font-serif); font-size: 18px; letter-spacing: .14em; text-transform: uppercase; }
.gift-text { margin: 0 auto 24px; }
.iban { margin: 0 0 18px; font-family: var(--font-serif); font-size: 13px; letter-spacing: .06em; overflow-wrap: anywhere; }

.rsvp-section { padding-top: 128px; padding-bottom: 128px; }
.rsvp-section > .vertical-word { top: 48%; right: -210px; }
.rsvp-section .text-column { position: relative; }
.light-button { margin-top: 18px; border-color: var(--color-primary-contrast); color: var(--color-primary-contrast); }
.light-button:hover { background: var(--color-primary-contrast); color: var(--color-primary); }

.album-section { padding: 120px 0 0; }
.album-heading { padding-inline: 24px; text-align: center; }
.gallery { display: grid; width: min(100%, 720px); margin: 65px auto 0; grid-template-columns: 1fr 1fr; }
.gallery-button { position: relative; min-height: 250px; padding: 0; overflow: hidden; border: 0; background: #ddd; cursor: zoom-in; }
.gallery-button:nth-child(3n) { grid-column: 1 / -1; min-height: 300px; }
.gallery-button img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: transform .7s ease, filter .5s; }
.gallery-button:hover img { transform: scale(1.025); filter: grayscale(.75) contrast(1.04); }
.sharing-section { padding-top: 120px; padding-bottom: 120px; }
.sharing-section .light-button, .sharing-section .disabled-link { margin-top: 18px; border-color: var(--color-primary-contrast); color: var(--color-primary-contrast); }
.footer { padding-top: 100px; padding-bottom: 0; text-align: center; }
.footer-names { margin: 0 0 18px; font-family: var(--font-display); font-size: 26px; letter-spacing: .08em; text-transform: uppercase; }
.footer .script-title { margin-bottom: 54px; }
.footer img { width: min(100%, 420px); height: 210px; margin: auto; object-fit: cover; object-position: center 45%; filter: grayscale(1); }

.music-button { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 90; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: var(--color-primary); color: var(--color-primary-contrast); font-family: Arial, sans-serif; font-size: 13px; cursor: pointer; }
.music-button[aria-pressed="true"] span { letter-spacing: -2px; }

.lightbox, .modal { position: fixed; inset: 0; z-index: 300; background: rgba(5,5,5,.96); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.lightbox.open, .modal.open { opacity: 1; visibility: visible; }
.lightbox { display: grid; grid-template-columns: 45px 1fr 45px; align-items: center; padding: 70px 8px 30px; color: white; }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { max-width: 100%; max-height: 76vh; margin: auto; object-fit: contain; }
.lightbox figcaption { margin-top: 13px; font-size: 10px; letter-spacing: .08em; }
.overlay-close, .modal-close { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 20px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: white; font-family: Arial, sans-serif; font-size: 34px; font-weight: 200; cursor: pointer; }
.lightbox-arrow { width: 44px; height: 50px; padding: 0; border: 0; background: transparent; color: white; font-size: 25px; cursor: pointer; }

.modal { overflow-y: auto; background: rgba(14,14,13,.82); }
.modal-panel { position: relative; width: min(100%, 660px); min-height: 100%; margin: auto; padding: 70px 24px 60px; background: var(--color-background); }
.modal-close { color: var(--color-text); }
.modal-intro { width: min(100%, 450px); margin: 0 auto 55px; text-align: center; }
.modal-intro .script-title { font-size: 53px; }
#rsvpForm { width: min(100%, 470px); margin: auto; }
.field { display: block; margin: 0 0 31px; font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.field input, .field textarea, .field select { display: block; width: 100%; margin-top: 8px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; font-size: 14px; font-weight: 400; letter-spacing: 0; outline: 0; text-transform: none; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-primary); }
.field.invalid input, .field.invalid textarea, .choice-field.invalid { border-color: #8b2929; }
.error { display: block; min-height: 14px; margin-top: 4px; color: #8b2929; font-size: 9px; letter-spacing: .03em; text-transform: none; }
.choice-field { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 33px; padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--color-border); }
.choice-field legend { width: 100%; margin: 0 0 10px; font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.choice-field label, .check-grid label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.choice-field input, .check-grid input { width: 14px; height: 14px; accent-color: var(--color-primary); }
.conditional.revealed { animation: revealFields .32s ease both; }
@keyframes revealFields { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.child-group { margin-bottom: 28px; padding: 20px 16px 2px; border: 1px solid var(--color-border); }
.child-group h3 { margin: 0 0 18px; font-family: var(--font-serif); font-size: 13px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.child-row { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
#transportOptions { display: grid; width: 100%; gap: 10px; }
.form-status { min-height: 24px; color: #8b2929; font-size: 11px; text-align: center; }
.submit-button { width: 100%; margin-top: 8px; background: var(--color-primary); color: var(--color-primary-contrast); }
.form-success { padding: 60px 0 100px; text-align: center; }
.form-success h3 { margin: 0 0 18px; font-family: var(--font-serif); font-size: 24px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(25px); transition: opacity .85s ease, transform .85s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.story-photo.reveal, .gallery-button.reveal { transform: translateY(22px) scale(.985); }
.story-photo.reveal.is-visible, .gallery-button.reveal.is-visible { transform: none; }

@media (min-width: 600px) {
  body { font-size: 15px; }
  .section { padding-inline: 42px; }
  .venue { padding-inline: 48px; }
  .venue-image { width: 40%; }
  .gallery { gap: 4px; padding: 0 4px 4px; }
  .modal-panel { min-height: auto; margin-block: 30px; padding-inline: 60px; }
  .hero-date { right: 0; }
}

@media (min-width: 900px) {
  :root { --header-height: 64px; }
  .site-header { left: 50%; width: min(100% - 48px, 1180px); padding: 0 22px; transform: translateX(-50%); }
  .nav-mark, .menu-toggle, .mobile-nav { display: none; }
  .desktop-nav { display: flex; width: 100%; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 44px); }
  .desktop-nav a, .desktop-nav button { padding: 8px 0; border: 0; background: transparent; font-size: 9px; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
  .desktop-nav a::after, .desktop-nav button::after { content: ""; display: block; width: 0; margin-top: 3px; border-bottom: 1px solid currentColor; transition: width .25s; }
  .desktop-nav a:hover::after, .desktop-nav button:hover::after { width: 100%; }
  .hero { height: 804px; }
  .section { padding-top: 118px; padding-bottom: 118px; }
  .venues { width: var(--page-width); }
  .story-photos { width: 459px; }
  .gallery { grid-template-columns: repeat(12, 1fr); width: min(100%, 980px); gap: 8px; }
  .gallery-button { grid-column: span 5; min-height: 460px; }
  .gallery-button:nth-child(2) { grid-column: 7 / span 6; margin-top: 130px; }
  .gallery-button:nth-child(3) { grid-column: 2 / span 8; min-height: 520px; }
  .gallery-button:nth-child(4) { grid-column: 1 / span 6; min-height: 420px; }
  .gallery-button:nth-child(5) { grid-column: 8 / span 5; min-height: 460px; margin-top: 100px; }
  .footer img { height: 260px; }
}

@media (max-width: 340px) {
  .section { padding-inline: 18px; }
  .hero-names { font-size: 36px; }
  .venue { padding-inline: 20px; }
  .venue-image { left: 20px !important; width: 39%; }
  .venue:nth-child(even) .venue-image { right: 20px !important; left: auto !important; }
  .venue-title { font-size: 42px; }
  .countdown { gap: 4px; }
  .countdown > div:not(:last-child)::after { right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}