:root { --ink:#171715; --paper:#fcfcfa; --accent:#c00000; --background:#fcfcfa; --foreground:#171715; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper) url('photos/paper.webp') center/1500px auto repeat; font-family:Arial,Arimo,Helvetica,sans-serif; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
.hero { position:relative; display:grid; grid-template-columns:.8fr 1.2fr; gap:6%; max-width:1200px; margin:auto; padding:65px 6vw 70px; min-height:760px; align-items:center; }
.hero-film { width:clamp(200px,22vw,260px); height:auto; justify-self:center; transform:rotate(-3deg); }
.hero-film img { width:100%; height:auto; display:block; }
.hero-copy { padding:0 0 20px; }
.handwritten { position:relative; width:100%; max-width:470px; aspect-ratio:864 / 650; overflow:hidden; margin:0 0 28px; transform:rotate(-4deg); }
.handwritten img { position:absolute; width:277.778%; max-width:none; height:auto; left:-20.139%; top:-16.923%; }
.hero-names { font:400 clamp(36px,4.4vw,60px)/1.2 Georgia,Gelasio,serif; letter-spacing:-.03em; margin:0 0 23px; }
.hero-names i { font-size:.6em; padding:0 .18em; }
.hero-date { font:400 clamp(25px,2.6vw,36px)/1.3 Georgia,Gelasio,serif; margin:0 0 10px; }
.hero-place { font-size:17px; margin:0; }
.hero-note { font:italic 17px/1.5 Georgia,Gelasio,serif; margin:38px 0 0; color:#555; }
.details { max-width:1250px; margin:auto; padding:85px 6vw 100px; border-top:1px solid #17171530; display:grid; grid-template-columns:1.3fr .8fr; gap:10%; align-items:center; }
.label { font-size:14px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin:0 0 28px; color:var(--accent); }
h2 { font:400 clamp(38px,4.6vw,66px)/1.08 Georgia,Gelasio,serif; letter-spacing:-.035em; margin:0; }
h2 em { color:var(--accent); font-weight:400; }
.intro>p:last-child,.note-copy>p:last-child { font-size:18px; line-height:1.8; max-width:470px; margin:30px 0 0; }
.calendar { transform:rotate(2deg); border:1px solid var(--ink); padding:26px 30px 30px; background:var(--paper) url('photos/paper.webp') center/1000px; box-shadow:9px 9px 0 var(--ink); }
.calendar-top { display:flex; justify-content:space-between; font-size:14px; letter-spacing:.14em; margin:0; border-bottom:1px solid var(--ink); padding-bottom:17px; }
.calendar-day { color:var(--accent); font:400 clamp(110px,13vw,170px)/1 Georgia,Gelasio,serif; letter-spacing:-.075em; margin:20px 0 24px; }
.calendar-day span { display:inline-block; margin-left:18px; font:italic 38px/1 Georgia,Gelasio,serif; letter-spacing:-.03em; }
.venue { border-top:1px solid var(--ink); padding-top:20px; }
.venue h3 { font:400 28px/1.3 Georgia,Gelasio,serif; margin:0; }
.venue p { font-size:16px; margin:8px 0 22px; }
.map-link { display:inline-block; font-size:16px; text-decoration-thickness:1px; text-underline-offset:6px; }
.map-link:hover { color:var(--accent); }
.note-section { padding:110px 6vw; max-width:1250px; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:9%; align-items:center; }
.note-copy h2 { font-size:clamp(34px,4vw,54px); }
.map-wrap { height:340px; border:1px solid var(--ink); transform:rotate(-2deg); background:#ecece9; box-shadow:8px 8px 0 var(--accent); }
.map-wrap iframe { display:block; width:100%; height:100%; border:0; }
footer { padding:64px 20px 72px; border-top:1px solid var(--ink); text-align:center; }
.footer-date { font-size:14px; letter-spacing:.2em; margin:0 0 28px; }
.footer-names { font:italic 400 clamp(45px,7vw,86px)/1.2 Georgia,Gelasio,serif; color:var(--accent); letter-spacing:-.045em; margin:0; }
footer>p:last-child { font-size:18px; margin:20px 0 0; }
@media(max-width:700px) {
  .hero { min-height:0; grid-template-columns:.48fr 1fr; gap:5%; padding:38px 5vw 48px; overflow:hidden; }
  .hero-film { width:clamp(105px,29vw,180px); height:auto; transform:rotate(-3deg); margin-left:0; }
  .hero-copy { position:relative; padding:0; }
  .handwritten { margin:0 0 28px; width:100%; max-width:none; }
  .hero-names { font-size:32px; margin-bottom:23px; }
  .hero-date { font-size:24px; }
  .hero-place { font-size:14px; line-height:1.5; }
  .hero-note { font-size:14px; margin-top:28px; }
  .details { grid-template-columns:1fr; gap:50px; padding:65px 7vw 80px; }
  .intro>p:last-child,.note-copy>p:last-child { font-size:16px; line-height:1.75; margin-top:24px; }
  .calendar { width:100%; max-width:360px; margin:auto; }
  .calendar-day { font-size:140px; }
  .note-section { grid-template-columns:1fr; gap:40px; padding:65px 7vw 75px; }
  .map-wrap { height:260px; }
  footer { padding:45px 20px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

@media(max-width:380px) { .hero { grid-template-columns:.36fr 1fr; gap:4%; } .hero-film { width:105px; margin-left:0; } .hero-names { font-size:28px; } }

.photo-scraps { max-width:1100px; margin:0 auto; padding:25px 6vw 65px; display:flex; justify-content:center; align-items:center; gap:6%; }
.scrap { flex:1; max-width:245px; margin:0; padding:10px 10px 34px; background:#fff; box-shadow:0 7px 20px #17171520; }
.scrap-window { position:relative; overflow:hidden; background:#222; }
.scrap-window img { position:absolute; height:auto; max-width:none; }
.scrap-one { transform:rotate(-7deg); }
.scrap-two { transform:rotate(4deg); margin-top:55px; }
.scrap-three { transform:rotate(-4deg); margin-top:-20px; }
.scrap-one .scrap-window { aspect-ratio:235 / 325; }
.scrap-one img { width:216.596%; left:-38.298%; top:-20%; }
.scrap-two .scrap-window { aspect-ratio:235 / 310; }
.scrap-two img { width:216.596%; left:-55.319%; top:-158.065%; }
.scrap-three .scrap-window { aspect-ratio:235 / 305; }
.scrap-three img { width:216.596%; left:-78.723%; top:-422.951%; }
@media(max-width:700px) {
  .photo-scraps { flex-wrap:wrap; gap:22px; padding:15px 7vw 40px; }
  .scrap { flex:0 0 43%; padding:7px 7px 24px; }
  .scrap-two { margin-top:35px; }
  .scrap-three { margin-top:0; }
}

/* One-screen invitation with the full film kept inside the viewport. */
.hero { height:100svh; min-height:0; max-width:1400px; padding:35px 6vw; grid-template-columns:.72fr 1.28fr; }
.hero-film { height:calc(100svh - 70px); width:auto; aspect-ratio:509 / 2048; transform:rotate(-3deg); }
.hero-film img { width:100%; height:100%; object-fit:contain; }
.hero-copy { padding:0; }
.handwritten { width:min(100%,calc(38svh * 1.329)); margin-bottom:20px; }
.hero-meta { padding-left:clamp(25px,4vw,65px); }
.hero-names { font-size:clamp(34px,4.3vw,60px); margin-bottom:18px; }
.hero-note { margin-top:26px; }
/* The original film, including its perforated edges, forms each fragment. */
.scrap { padding:0; background:transparent; box-shadow:none; max-width:280px; }
.scrap-window { background:transparent; clip-path:polygon(0 1%,10% 0,22% 1%,35% 0,48% 1%,61% 0,76% 1%,90% 0,100% 1%,100% 99%,88% 100%,75% 99%,63% 100%,50% 99%,37% 100%,23% 99%,10% 100%,0 99%); }
.scrap-window img { width:100%; left:0; }
.scrap-one .scrap-window { aspect-ratio:509 / 435; }
.scrap-one img { top:0; }
.scrap-two .scrap-window { aspect-ratio:509 / 420; }
.scrap-two img { top:-100%; }
.scrap-three .scrap-window { aspect-ratio:509 / 440; }
.scrap-three img { top:-277.273%; }
@media(max-width:700px) {
  .hero { height:100svh; padding:30px 5vw; grid-template-columns:.48fr 1fr; gap:5%; overflow:hidden; }
  .hero-film { height:min(calc(100svh - 80px),calc(28vw * 4.024)); width:auto; margin-left:0; }
  .handwritten { width:100%; margin-bottom:26px; }
  .hero-meta { padding-left:14px; }
  .hero-names { font-size:clamp(26px,7vw,42px); }
  .hero-date { font-size:clamp(20px,5.5vw,28px); }
  .hero-note { margin-top:22px; }
  .scrap { padding:0; flex-basis:44%; }
}
@media(max-height:600px) and (min-width:701px) {
  .handwritten { width:calc(32svh * 1.329); margin-bottom:12px; }
  .hero-names { font-size:36px; margin-bottom:10px; }
  .hero-date { font-size:24px; }
  .hero-note { margin-top:15px; }
}

/* One common center line for the announcement and invitation details. */
.hero-copy { display:flex; flex-direction:column; align-items:center; }
.handwritten { transform:none; margin:0 auto 34px; }
.hero-meta { width:100%; padding-left:0; text-align:center; }
.hero-names { margin-bottom:24px; }
.hero-date { margin-bottom:12px; }
footer .invitation-note { max-width:460px; margin:32px auto 0; font:italic 16px/1.65 Georgia,Gelasio,serif; color:#555; }
@media(max-width:700px) {
  .handwritten { margin-bottom:28px; }
  .hero-meta { padding-left:0; }
  .hero-names { margin-bottom:20px; }
  .hero-place { font-size:14px; }
}

/* Date, venue, and directions together in one longer card. */
.details { align-items:center; }
.details-intro h2,.intro h2 { font-size:clamp(36px,4.4vw,60px); }
.calendar .map-wrap { height:205px; margin:24px 0 22px; transform:none; box-shadow:none; border:1px solid #17171540; }
.calendar .venue p { margin-bottom:0; }
.note-section { grid-template-columns:1fr; max-width:800px; padding-top:70px; }
@media(max-width:700px) { .calendar .map-wrap { height:190px; } .note-section { padding-top:50px; } }

/* The orchard portrait balances the date card; blossoms accompany the note. */
.details { grid-template-columns:1fr .95fr; gap:9%; max-width:1180px; }
.orchard-portrait { width:100%; margin:0; transform:rotate(-2deg); }
.orchard-portrait img { width:100%; height:auto; display:block; }
.note-section { max-width:1120px; grid-template-columns:.7fr 1fr; gap:10%; align-items:center; padding-top:85px; padding-bottom:95px; }
.orchard-flowers { margin:0; }
.orchard-flowers img { display:block; width:100%; height:auto; }
@media(max-width:700px) {
  .details { grid-template-columns:1fr; gap:42px; }
  .orchard-portrait { max-width:360px; margin:0 auto; }
  .note-section { grid-template-columns:1fr; gap:36px; padding-top:50px; padding-bottom:65px; }
  .orchard-flowers { max-width:280px; width:75%; margin:0 auto; }
}

.save-date-note { max-width:980px; margin:0 auto; padding:35px 7vw 50px; text-align:center; }
.save-date-note p { margin:0; font:400 clamp(21px,2.4vw,30px)/1.65 Georgia,Gelasio,serif; letter-spacing:-.015em; }
@media(max-width:700px) { .save-date-note { padding:5px 7vw 30px; } .desktop-break { display:none; } }

footer .invitation-note { display:block; width:100%; max-width:none; margin:32px auto 0; text-align:center; text-wrap:balance; }

.note-section { grid-template-columns:1fr .7fr; padding-top:65px; padding-bottom:75px; }
.orchard-flowers { width:100%; aspect-ratio:4 / 3; overflow:hidden; }
.orchard-flowers img { width:100%; height:100%; object-fit:cover; object-position:center 52%; }
@media(max-width:700px) {
  .note-section { grid-template-columns:1fr; padding-top:45px; padding-bottom:55px; }
  .orchard-flowers { width:100%; max-width:380px; margin:0 auto; }
}

/* Light orchard green fills the card; keep the original red date. */
.calendar { background:#dce6d4; }

.venue-map { width:100%; height:100%; background:#e4e4e4; isolation:isolate; }
.venue-map .leaflet-tile-pane { filter:grayscale(1); }
.venue-map .leaflet-control-attribution a { color:#333; }
.venue-pin { display:block; position:absolute; width:28px; height:28px; top:0; left:0; background:var(--accent); border:2px solid white; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:-1px 2px 4px #0005; }
.venue-pin::after { content:''; position:absolute; width:8px; height:8px; top:8px; left:8px; background:white; border-radius:50%; }
.venue-map-label { font:600 13px/1.4 Arial,Arimo,sans-serif; color:#292929; border:0; box-shadow:0 1px 5px #0002; }

/* Give the opening film photo more room on phones while keeping the text clear. */
@media(max-width:700px) {
  .hero { grid-template-columns:.7fr 1fr; }
  .hero-film { height:min(calc(100svh - 50px),calc(35vw * 4.024)); }
}
@media(max-width:380px) {
  .hero { grid-template-columns:.6fr 1fr; }
  .hero-film { height:min(calc(100svh - 50px),calc(36vw * 4.024)); }
}
@media(min-width:701px) {
  .hero-film { justify-self:end; margin-right:clamp(0px,1.5vw,20px); }
}

/* Was Tailwind's; the headings are for screen readers only. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }