:root {
  --paper: #f8f7f3;
  --ink: #282723;
  --muted: #77746e;
  --wine: #874c49;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 18px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.scroll-track { position: fixed; inset: 0 0 auto; z-index: 10; height: 3px; background: #fff9; }
.scroll-fill { display: block; width: 0; height: 100%; background: #a96862; transition: width .08s linear; }
.hero { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; color: var(--ink); isolation: isolate; background: #e9e3d9; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { z-index: -2; object-fit: cover; object-position: center 44%; opacity: 1; }
.hero-shade { z-index: -1; background: linear-gradient(180deg, #fbfaf40a 0%, #fbfaf400 42%, #fbfaf40a 100%); }
.brand { position: absolute; top: 34px; left: clamp(24px, 6vw, 86px); font: 500 19px var(--serif); letter-spacing: -.04em; }
.brand span { padding-left: 3px; color: var(--wine); }
.hero-title { width: min(900px, 90vw); margin-top: 28px; text-align: center; }
.heart-mark { display: block; color: var(--wine); font: 54px/1 var(--serif); margin-bottom: 16px; }
.hero-kicker { color: #615a53; text-transform: uppercase; letter-spacing: .24em; font-size: 10px; margin: 0 0 12px; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; }
h1 { font-size: clamp(53px, 9vw, 112px); line-height: 1.02; margin: 0; text-shadow: 0 1px 20px #fbfaf4e6; }
.scroll-cue { display: inline-flex; align-items: center; flex-direction: column; gap: 14px; margin-top: clamp(55px, 12vh, 105px); color: #615a53; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 8px #fbfaf4e6; }
.scroll-cue b { color: var(--wine); font: 20px var(--sans); animation: nudge 1.8s ease-in-out infinite; }
.hero-caption { position: absolute; right: clamp(23px, 6vw, 80px); bottom: 29px; font: italic 11px var(--serif); color: #49453e; }
.memories-section { position: relative; isolation: isolate; background-image: linear-gradient(#f8f7f3d9, #f8f7f3d9), url("images/puy-du-fou-baiser.png"); background-attachment: fixed; background-position: center; background-size: cover; }
.gallery-intro { max-width: 900px; padding: 126px 32px 102px; margin: auto; text-align: center; }
.eyebrow { margin: 0 0 18px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .18em; }
.gallery-intro h2 { margin: 0; font-size: clamp(37px, 5vw, 58px); line-height: 1.16; }
.gallery-intro h2 em { color: var(--wine); font-weight: 400; }
.intro-note { max-width: 420px; margin: 22px auto 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.gallery { max-width: 1280px; margin: auto; padding: 0 8% 155px; }
.memory { width: 100%; display: grid; grid-template-columns: minmax(260px, .95fr) minmax(220px, .8fr); column-gap: clamp(70px, 13vw, 175px); align-items: center; }
.memory + .memory { margin-top: clamp(150px, 17vw, 220px); }
.memory-left { padding-right: 4%; }
.memory-right { grid-template-columns: minmax(220px, .8fr) minmax(260px, .95fr); padding-left: 4%; }
.photo-frame { position: relative; width: min(100%, 390px); aspect-ratio: 4 / 4.7; display: grid; place-items: center; background: #eeece6; border: 10px solid #fffefa; box-shadow: 0 18px 40px #29251b17; overflow: hidden; }
.memory-left .photo-frame { grid-column: 1; justify-self: start; }
.memory-right .photo-frame { grid-column: 2; justify-self: end; }
.memory-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.frame-placeholder { display: flex; flex-direction: column; gap: 11px; align-items: center; color: #79756d; font: 14px var(--serif); }
.frame-placeholder b { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #beb9ad; border-radius: 50%; color: var(--wine); font: 19px var(--sans); }
.frame-number { position: absolute; top: 13px; right: 13px; color: #89847b; font-size: 9px; letter-spacing: .1em; }
.caption { width: min(100%, 330px); min-height: 84px; align-self: center; margin: 86px 0 0; padding: 8px; color: #57534c; font: italic 17px/1.8 var(--serif); text-align: left; outline-color: #bd8f84; }
.memory-left .caption { grid-column: 2; justify-self: end; }
.memory-right .caption { grid-column: 1; grid-row: 1; justify-self: start; margin-top: 94px; text-align: right; }
.tilt-left .photo-frame { transform: rotate(-2.4deg); }
.tilt-right .photo-frame { transform: rotate(2.3deg); }
.caption:focus { background: #fffefa; }
.closing { min-height: 280px; background: #efede7; padding: 65px 24px; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; }
.closing > span { color: var(--wine); font: 34px var(--serif); }
.closing p { margin: 14px 0 22px; font: clamp(20px, 3vw, 27px) var(--serif); }
.closing a { color: var(--muted); border-bottom: 1px solid #bdb9b1; padding-bottom: 5px; font-size: 10px; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-width: 720px) {
  .brand { top: 25px; font-size: 17px; }
  .hero-image { object-position: 53% center; }
  .hero-shade { background: linear-gradient(180deg, #fbfaf408 0%, #fbfaf400 45%, #fbfaf40a 100%); }
  .hero-title { margin-top: -5px; }
  .heart-mark { font-size: 47px; margin-bottom: 12px; }
  .hero-kicker { font-size: 8px; }
  h1 { font-size: clamp(50px, 13vw, 76px); }
  .scroll-cue { margin-top: 13vh; font-size: 8px; }
  .hero-caption { bottom: 20px; left: 18px; right: auto; font-size: 10px; }
  .gallery-intro { padding: 88px 9% 65px; }
  .gallery { padding: 0 10% 95px; }
  .memory, .memory-right { width: min(100%, 430px); margin: 0 auto; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .memory + .memory { margin-top: 70px; }
  .memory-left .photo-frame, .memory-right .photo-frame { width: 100%; align-self: flex-start; }
  .memory-right .caption, .memory-left .caption { width: 100%; min-height: 48px; margin: 0; padding: 0 7px; text-align: center; font-size: 15px; }
  .photo-frame { border-width: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}