@font-face { font-family:"Cormorant Garamond"; src:url("fonts/CormorantGaramond-Latin.woff2") format("woff2"); font-style:normal; font-weight:300 700; font-display:block; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/CormorantGaramond-Italic-Latin.woff2") format("woff2"); font-style:italic; font-weight:300 700; font-display:block; }
@font-face { font-family:"Manrope"; src:url("fonts/Manrope-Latin.woff2") format("woff2"); font-style:normal; font-weight:200 800; font-display:block; }

:root { --espresso:#150b07; --brown:#2c170f; --paper:#eee5d7; --cream:#f5eee4; --champagne:#c5a06b; --ink:#2a1811; --display-font:"Cormorant Garamond",Georgia,serif; --sans-font:"Manrope",Arial,sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--espresso); color:var(--cream); font-family:var(--display-font); }
button,a { font:inherit; }
img { display:block; max-width:100%; }
.site-shell { min-height:100dvh; overflow:hidden; background:var(--espresso); }
.section-kicker { display:block; color:var(--champagne); font-family:var(--sans-font); font-size:.6rem; font-weight:500; letter-spacing:.24em; line-height:1.5; text-transform:uppercase; }

.opening-screen { position:fixed; z-index:100; inset:0; min-height:100dvh; overflow:hidden; display:grid; place-items:center; padding:clamp(2rem,5vw,5rem); color:#f0e3cf; text-align:center; touch-action:pan-y; background:radial-gradient(circle at 76% 24%,rgba(106,52,32,.46),transparent 28rem),radial-gradient(circle at 24% 78%,rgba(71,34,23,.55),transparent 28rem),linear-gradient(145deg,#0c0604,#24110b 52%,#120806); box-shadow:0 1rem 4rem rgba(0,0,0,.5); }
.opening-screen::before { content:""; position:absolute; inset:clamp(.7rem,2vw,1.5rem); border:1px solid rgba(211,174,122,.2); pointer-events:none; }
.opening-screen::after { content:""; position:absolute; left:12%; right:12%; top:50%; height:1px; background:linear-gradient(90deg,transparent,rgba(201,160,105,.26),transparent); }
.cover-copy { position:relative; z-index:1; width:min(86vw,62rem); text-align:center; animation:coverReveal .9s cubic-bezier(.22,1,.36,1) both; }
.cover-copy h1 { margin:0; display:flex; flex-direction:column; align-items:center; font-size:clamp(5rem,10vw,9.5rem); font-weight:400; line-height:.62; letter-spacing:-.045em; }
.cover-copy h1 b { font-weight:400; }
.cover-copy h1 i { margin:.22em 0 .18em; color:#c29b63; font-size:.42em; font-weight:400; line-height:.65; }
.open-button { position:absolute; z-index:2; left:50%; bottom:clamp(3rem,8vh,5rem); border:0; border-bottom:1px solid rgba(203,164,108,.42); color:#d8bb92; background:transparent; padding:.65rem .15rem; display:inline-flex; align-items:center; gap:.8rem; cursor:pointer; font-family:var(--sans-font); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; transform:translateX(-50%); transition:color .25s ease,border-color .25s ease,opacity .25s ease; }
.open-button:hover { color:#f0dbc0; border-color:#d8bb92; }
.open-button:disabled { cursor:default; }
.cover-hint { position:absolute; bottom:clamp(1.25rem,3vh,2rem); margin:0; color:#6f5a4a; font-family:var(--sans-font); font-size:.43rem; letter-spacing:.15em; text-transform:uppercase; }
.opening-screen.is-opening { animation:coverSlideAway 1s cubic-bezier(.76,0,.24,1) forwards; }
.opening-screen.is-opening .cover-copy { transform:translateY(-3vh); opacity:.65; transition:transform .75s ease,opacity .55s ease; }
.opening-screen.is-opening .open-button,.opening-screen.is-opening .cover-hint { opacity:0; }

.landing-page { position:relative; background:var(--espresso); }
.floating-music { position:fixed; z-index:30; right:1rem; bottom:1rem; width:3.25rem; height:3.25rem; border:1px solid rgba(229,199,153,.38); border-radius:50%; background:rgba(33,16,10,.84); color:#efdcc0; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(13px); box-shadow:0 .6rem 1.8rem rgba(0,0,0,.38); }
.floating-music span { line-height:1; }
.floating-music small { margin-top:.12rem; font-family:var(--sans-font); font-size:.37rem; letter-spacing:.12em; }
.floating-music.is-playing span { animation:pulse 1.7s ease-in-out infinite; }

.hero-section { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 78% 48%,#321b12,transparent 30rem),#130a07; }
.hero-image { position:absolute; top:0; right:max(2vw,1rem); bottom:0; width:min(54vw,55rem); height:100%; object-fit:contain; object-position:right center; z-index:-2; }
.hero-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(12,6,4,.9) 0%,rgba(12,6,4,.65) 35%,rgba(12,6,4,.08) 69%),linear-gradient(0deg,rgba(12,6,4,.62),transparent 45%); }
.hero-copy { position:absolute; left:clamp(2rem,6vw,6.5rem); bottom:clamp(4rem,9vh,6.5rem); width:min(42vw,36rem); }
.hero-copy .section-kicker { margin-bottom:1.15rem; }
.hero-copy h1 { margin:0 0 1.8rem; font-size:clamp(4.2rem,7.2vw,7.6rem); font-weight:400; line-height:.78; letter-spacing:-.045em; }
.hero-copy h1 em { color:var(--champagne); font-size:.66em; font-weight:400; letter-spacing:.02em; }
.hero-copy p { margin:0 0 2.2rem; padding-top:1.1rem; border-top:1px solid rgba(202,165,111,.28); color:#d4c2ac; font-family:var(--sans-font); font-size:.64rem; letter-spacing:.15em; line-height:1.85; text-transform:uppercase; }
.text-link { color:#f1e5d3; font-family:var(--sans-font); font-size:.59rem; letter-spacing:.16em; padding-bottom:.4rem; border-bottom:1px solid rgba(210,175,123,.6); text-decoration:none; text-transform:uppercase; }
.hero-edition { position:absolute; top:2rem; right:2rem; color:rgba(244,233,216,.72); font-family:var(--sans-font); font-size:.49rem; letter-spacing:.2em; line-height:1.7; text-align:right; text-transform:uppercase; }

.gallery-intro h2 { margin:1rem 0 1.5rem; font-size:clamp(3.3rem,6vw,6.7rem); font-weight:400; line-height:.88; letter-spacing:-.04em; }
.gallery-intro h2 em { color:#8c6248; font-weight:400; }
figure figcaption { margin-top:.8rem; color:#8b6d5c; font-family:var(--sans-font); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; }

.couple-section { min-height:100vh; padding:clamp(5rem,8vw,8rem); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(3rem,8vw,8rem); align-items:center; background:var(--paper); color:var(--ink); }
.couple-visuals { position:relative; }
.couple-photo-primary { width:min(100%,36rem); margin:0; overflow:hidden; }
.couple-photo-primary img { width:100%; aspect-ratio:2/3; object-fit:cover; }
.couple-details { align-self:center; max-width:38rem; }
.couple-details h2 { margin:.85rem 0 1rem; font-size:clamp(3.3rem,5.5vw,6rem); font-weight:400; line-height:.84; letter-spacing:-.04em; }
.couple-details h2 em { color:#8c6248; font-weight:400; }
.couple-intro { max-width:29rem; margin-bottom:0; }
.couple-details h3 { margin:.7rem 0 .8rem; font-size:clamp(2.8rem,5vw,5.8rem); font-weight:400; line-height:.9; letter-spacing:-.04em; }
.couple-details p { color:#735747; font-family:var(--sans-font); font-size:.72rem; line-height:1.9; }
.fine-rule { width:100%; height:1px; margin:3rem 0; background:rgba(73,43,28,.24); }

.event-section { display:grid; grid-template-columns:.78fr 1.22fr; background:#1c0e09; }
.event-photo { position:sticky; top:0; height:100vh; overflow:hidden; }
.event-photo img { width:100%; height:100%; object-fit:cover; object-position:center; }
.event-content { padding:clamp(5rem,9vw,9rem) clamp(1.5rem,7vw,7rem); }
.event-heading { margin-bottom:2.8rem; }
.event-heading-top,.venue-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.event-heading-top>span:last-child,.venue-meta>span:last-child { color:#806b5a; font-family:var(--sans-font); font-size:.48rem; letter-spacing:.18em; text-transform:uppercase; }
.event-heading h2 { margin:1.3rem 0 0; font-size:clamp(3.5rem,7vw,7rem); font-weight:400; line-height:.82; letter-spacing:-.05em; }
.event-heading .single-line-date { font-size:clamp(2.2rem,3.55vw,4.2rem); line-height:1; white-space:nowrap; font-style:normal; }
.event-countdown { margin-bottom:2.8rem; border-color:rgba(214,178,126,.25); }
.event-countdown .countdown-item { color:#f1e3d1; border-color:rgba(214,178,126,.2); }
.event-countdown .countdown-item strong { font-size:clamp(1.7rem,3vw,3.2rem); }
.event-countdown .countdown-item span { color:#90745b; }
.event-times { border-top:1px solid rgba(214,178,126,.25); }
.event-times article { display:grid; grid-template-columns:2rem 1fr auto; align-items:center; gap:1rem; padding:1.7rem 0; border-bottom:1px solid rgba(214,178,126,.25); }
.event-times article>span { color:#8f6f53; font-family:var(--sans-font); font-size:.5rem; }
.event-times p { margin:0; color:#bd9f7b; font-family:var(--sans-font); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; }
.event-times h3 { margin:0; font-size:clamp(1.15rem,2vw,1.7rem); font-weight:400; }
.venue-card { margin-top:3.8rem; padding:1.35rem 0 0; border-top:1px solid rgba(214,178,126,.25); }
.venue-body { margin-top:2rem; display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem; }
.venue-card h3 { margin:0 0 1rem; font-size:clamp(2rem,3.25vw,3.7rem); font-weight:400; line-height:.96; }
.venue-card p { margin:0; color:#9d856e; font-family:var(--sans-font); font-size:.7rem; line-height:1.7; }
.map-button { display:inline-flex; gap:.6rem; padding:.55rem 0; border:0; border-bottom:1px solid rgba(214,178,126,.45); color:#ead8c0; font-family:var(--sans-font); font-size:.52rem; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; transition:.2s ease; white-space:nowrap; }
.map-button:hover { background:#5b3020; }

.countdown { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(55,30,18,.3); border-bottom:1px solid rgba(55,30,18,.3); }
.countdown-item { padding:1.6rem .5rem; text-align:center; border-left:1px solid rgba(55,30,18,.25); }
.countdown-item:first-child { border-left:0; }
.countdown-item strong { display:block; font-size:clamp(2rem,4vw,4rem); font-weight:400; }
.countdown-item span { font-family:var(--sans-font); font-size:.47rem; letter-spacing:.17em; text-transform:uppercase; }

.response-section { padding:clamp(5rem,8vw,8rem) clamp(1.5rem,8vw,8rem); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(4rem,9vw,9rem); background:#e8ddcd; color:var(--ink); }
.rsvp-panel,.gift-panel { padding-top:1.3rem; border-top:1px solid rgba(68,39,24,.3); background:transparent; }
.gift-panel { color:var(--ink); }
.rsvp-panel h2,.gift-panel h2 { margin:1.25rem 0 1rem; font-size:clamp(2.8rem,4.4vw,5rem); font-weight:400; line-height:.88; letter-spacing:-.04em; }
.rsvp-panel>p,.gift-panel>p { max-width:31rem; color:#755b4d; font-family:var(--sans-font); font-size:.71rem; line-height:1.85; }
.rsvp-form { margin-top:2.5rem; display:grid; gap:1.25rem; }
.rsvp-form label { display:grid; gap:.5rem; }
.rsvp-form label>span { color:#765b4b; font-family:var(--sans-font); font-size:.51rem; letter-spacing:.15em; text-transform:uppercase; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-row.is-solo { grid-template-columns:1fr; }
.rsvp-form input,.rsvp-form select,.rsvp-form textarea { width:100%; border:0; border-bottom:1px solid rgba(64,36,22,.3); border-radius:0; outline:0; background:transparent; color:var(--ink); padding:.75rem 0; font-family:var(--sans-font); font-size:.78rem; resize:vertical; }
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus { border-color:#9b704d; }
.rsvp-form button { justify-self:start; margin-top:.4rem; padding:.65rem 0; border:0; border-bottom:1px solid #7d5940; background:transparent; color:#563724; cursor:pointer; font-family:var(--sans-font); font-size:.53rem; letter-spacing:.13em; text-transform:uppercase; }
.rsvp-actions { margin-top:.4rem; display:flex; flex-wrap:wrap; gap:1.2rem 2rem; }
.rsvp-actions button { margin-top:0; }
.bank-list { margin-top:3rem; display:grid; gap:1rem; }
.bank-list article { padding:1.15rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(73,43,28,.2); }
.bank-list article:last-child { border-bottom:1px solid rgba(73,43,28,.2); }
.bank-list article>div { display:grid; gap:.28rem; }
.bank-list small { color:#9a7255; font-family:var(--sans-font); font-size:.5rem; letter-spacing:.2em; }
.bank-list strong { font-size:1.25rem; font-weight:400; }
.bank-list span { color:#795c4b; font-family:var(--sans-font); font-size:.72rem; letter-spacing:.12em; }
.bank-list button { border:0; border-bottom:1px solid rgba(91,55,35,.35); background:transparent; color:#6c4934; padding:.45rem 0; cursor:pointer; font-family:var(--sans-font); font-size:.46rem; letter-spacing:.12em; text-transform:uppercase; }

.gallery-section { padding:clamp(5rem,8vw,8rem); display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,7vw,7rem); align-items:start; background:#f2eadf; color:var(--ink); }
.gallery-intro { padding-top:1rem; }
.gallery-intro h2 { font-size:clamp(3rem,5vw,5.5rem); }
.story-timeline { border-top:1px solid rgba(67,39,25,.25); }
.story-timeline article { display:grid; grid-template-columns:5rem 1fr; gap:1.5rem; padding:1.5rem 0; border-bottom:1px solid rgba(67,39,25,.25); }
.story-timeline time { color:#9a7053; font-family:var(--sans-font); font-size:.56rem; letter-spacing:.15em; }
.story-timeline h3 { margin:0 0 .45rem; font-size:1.6rem; font-weight:400; }
.story-timeline p { margin:0; color:#755c4e; font-family:var(--sans-font); font-size:.7rem; line-height:1.75; }
.story-photos { grid-column:1/-1; margin-top:1rem; display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,4vw,4rem); align-items:start; }
.gallery-a,.gallery-b { margin:0; }
.gallery-b { margin-top:4rem; }
.gallery-a img,.gallery-b img { width:100%; aspect-ratio:2/3; object-fit:cover; }

.closing-section { position:relative; min-height:88svh; isolation:isolate; display:grid; place-items:center; text-align:center; overflow:hidden; }
.closing-section>img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; }
.closing-section::after { content:""; position:absolute; inset:0; z-index:-1; background:rgba(12,6,4,.68); }
.closing-copy { width:min(90%,50rem); }
.closing-copy h2 { margin:1rem 0 1.3rem; font-size:clamp(3rem,7vw,7.8rem); font-weight:400; line-height:.86; letter-spacing:-.045em; }
.closing-copy>p { max-width:35rem; margin:0 auto; color:#c8b49d; font-family:var(--sans-font); font-size:.76rem; line-height:1.9; }
.closing-signature { margin-top:3rem; color:#ecd9bd; font-size:clamp(2rem,4vw,4rem); }
.closing-signature i { color:var(--champagne); font-weight:400; }
.site-footer { padding:1.6rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; background:#0d0604; }
.footer-logo { width:2.6rem; height:auto; opacity:.72; }
.site-footer p,.site-footer a { margin:0; color:#705b4d; font-family:var(--sans-font); font-size:.45rem; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }
.footer-credits { display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; text-align:right; }
.site-footer .maker-credit { text-transform:none; letter-spacing:.07em; }
.maker-credit em { color:#a98c6d; font-family:var(--display-font); font-size:.82rem; font-weight:400; }

[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .85s ease,transform .85s cubic-bezier(.22,1,.36,1); }
[data-reveal].is-visible { opacity:1; transform:none; }
.open-button:focus-visible,.floating-music:focus-visible,.map-button:focus-visible,.text-link:focus-visible { outline:2px solid #ead0a9; outline-offset:4px; }
@keyframes pulse { 50% { transform:scale(1.15); text-shadow:0 0 1rem rgba(228,190,137,.6); } }
@keyframes coverReveal { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes coverSlideAway { from { transform:translateY(0); } to { transform:translateY(-101%); } }

@media (max-width:1100px) and (min-width:901px) {
  .event-content { padding:6rem 3rem; }
  .couple-section { padding:6rem 3rem; gap:3.5rem; }
  .response-section { padding:6rem 3rem; gap:4rem; }
  .gallery-section { padding:7rem 3rem; gap:3.5rem; }
}

@media (max-width:900px) {
  .hero-shade { background:linear-gradient(0deg,rgba(12,6,4,.92) 0%,rgba(12,6,4,.28) 65%,rgba(12,6,4,.1)); }
  .hero-image { inset:0; width:100%; height:100%; object-fit:cover; object-position:58% center; }
  .hero-copy { left:1.4rem; bottom:4rem; width:min(84vw,34rem); }
  .hero-copy h1 { font-size:clamp(4rem,16vw,6.8rem); }
  .hero-edition { top:1.5rem; right:1.4rem; }
  .couple-section { grid-template-columns:1fr; }
  .couple-visuals { width:min(90vw,38rem); margin:0 auto; }
  .couple-details { width:min(90vw,38rem); margin:0 auto; }
  .event-section { grid-template-columns:1fr; }
  .event-photo { position:relative; height:78svh; }
  .event-content { padding:5rem 1.4rem; }
  .response-section { grid-template-columns:1fr; padding:5rem 1.4rem; gap:5rem; }
  .gallery-section { grid-template-columns:1fr; padding:5rem 1.4rem 8rem; }
  .gallery-intro { padding:0; }
}
@media (max-width:560px) {
  .opening-screen { padding:4rem .8rem 2rem; }
  .opening-screen::before { inset:.55rem; }
  .cover-copy { width:78vw; }
  .cover-copy h1 { align-items:center; font-size:clamp(4.8rem,23vw,7rem); line-height:.66; }
  .cover-copy h1 i { margin:.22em 0 .18em; font-size:.48em; }
  .open-button { bottom:4rem; width:max-content; }
  .cover-hint { bottom:1.5rem; }
  .hero-image { object-position:58% center; }
  .hero-copy h1 { font-size:clamp(3.8rem,18vw,5.2rem); }
  .hero-copy p { font-size:.58rem; }
  .gallery-intro h2 { font-size:3.25rem; }
  .couple-section { padding:5rem 1.4rem; gap:4rem; }
  .couple-visuals { width:100%; }
  .couple-details { width:100%; }
  .couple-details h2 { font-size:3.55rem; }
  .event-photo { height:65svh; }
  .event-heading h2 { font-size:3.8rem; }
  .event-heading .single-line-date { font-size:clamp(1.55rem,6.4vw,2.8rem); }
  .event-times article { grid-template-columns:1.5rem 1fr; }
  .event-times h3 { grid-column:2; }
  .venue-body { grid-template-columns:1fr; align-items:start; }
  .map-button { justify-self:start; }
  .countdown { gap:0; }
  .countdown-item { padding:1.2rem .1rem; }
  .countdown-item strong { font-size:1.7rem; }
  .countdown-item span { font-size:.39rem; }
  .gallery-section { gap:.8rem; }
  .form-row { grid-template-columns:1fr; }
  .rsvp-actions { align-items:flex-start; flex-direction:column; gap:.8rem; }
  .story-timeline article { grid-template-columns:3.6rem 1fr; gap:.8rem; }
  .story-photos { gap:.8rem; }
  .gallery-b { margin-top:2.5rem; }
  .site-footer { flex-direction:column; align-items:center; text-align:center; }
  .footer-credits { align-items:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }
