:root{--ink:#17323b;--deep:#0d3140;--sea:#6eaebe;--sage:#7d9380;--sand:#efe8dc;--paper:#fbfaf7;--muted:#697377;--line:rgba(23,50,59,.16);--white:#fff;--serif:"Cormorant Garamond",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--cn:"Noto Serif SC",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(1180px,calc(100% - 48px));margin:auto}.narrow{width:min(760px,calc(100% - 48px))}.section{padding:120px 0}.site-header{height:76px;position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 38px;color:var(--white);mix-blend-mode:difference}.brand{font-family:var(--serif);font-size:31px;letter-spacing:.02em;white-space:nowrap}.brand span{font-style:italic}.desktop-nav{display:flex;align-items:center;gap:28px;font-size:12px;text-transform:uppercase;letter-spacing:.14em}.desktop-nav a{opacity:.9}.nav-cta{border:1px solid currentColor;padding:10px 15px;border-radius:999px}.menu-toggle{display:none;background:none;border:0;color:#fff;padding:10px}.mobile-menu{display:none}.hero{position:relative;height:100svh;min-height:720px;color:#fff;display:grid;place-items:center;overflow:hidden}.hero-media{position:absolute;inset:0;overflow:hidden;background:#dbe3e7;transform:scale(1.0);animation:heroZoom 11s ease-out forwards}.hero-media::before{content:"";position:absolute;inset:-24px;background:url("images/24.jpg") center/cover no-repeat;filter:blur(18px) brightness(.72);transform:scale(1.06)}.hero-media img{position:relative;width:100%;height:100%;object-fit:contain;object-position:center;box-shadow:0 0 48px rgba(0,0,0,.12)}.hero-scrim,.rsvp-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,22,29,.14),rgba(4,22,29,.55) 78%,rgba(4,22,29,.72))}.hero-content{position:relative;text-align:center;padding-top:70px}.eyebrow,.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase}.kicker{color:var(--sage);font-weight:700}.hero .eyebrow{opacity:.95}.hero h1{font-family:var(--serif);font-size:clamp(76px,13vw,178px);line-height:.78;font-weight:500;margin:24px 0 28px;letter-spacing:-.04em}.hero h1 em{font-weight:400}.hero-date{font-size:18px;letter-spacing:.16em;text-transform:uppercase;margin:0}.hero-place{margin:7px 0 0;font-size:13px;letter-spacing:.19em;text-transform:uppercase;opacity:.9}.hero-actions{display:flex;justify-content:center;gap:28px;align-items:center;margin-top:40px}.button{display:inline-flex;gap:22px;align-items:center;justify-content:center;border-radius:999px;padding:15px 23px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;transition:.3s ease;border:1px solid transparent}.button span{font-size:16px;line-height:0}.button-light{background:#fff;color:var(--deep)}.button-light:hover{transform:translateY(-2px);padding-inline:28px}.button-dark{background:var(--deep);color:#fff}.button-outline{border-color:rgba(255,255,255,.42);color:#fff}.button-outline:hover{background:#fff;color:var(--deep);border-color:#fff}.text-link{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.text-link.light{color:#fff}.text-link span{margin-left:5px}.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-size:10px;letter-spacing:.18em;text-transform:uppercase;writing-mode:vertical-rl;opacity:.82}.welcome{text-align:center}.welcome h2,.section-head h2,.day h2,.dress h2,.location h2,.rsvp h2{font-family:var(--serif);font-size:clamp(58px,7vw,96px);line-height:.88;font-weight:500;letter-spacing:-.04em;margin:18px 0 32px}.welcome h2 i,.section-head h2 i,.day h2 i,.dress h2 i,.location h2 i,.rsvp h2 i{font-style:italic}.bilingual-copy{font-family:var(--cn);font-size:17px;line-height:1.95}.bilingual-copy .en,.en{font-family:var(--sans);font-size:15px;line-height:1.7;color:var(--muted)}.welcome-note{font-family:var(--serif);font-size:27px;line-height:1.3;margin:28px auto 0;max-width:620px}.rule{height:1px;background:var(--line);width:72px;margin:36px auto 0}.photo-break{height:74svh;min-height:560px;position:relative;overflow:hidden}.photo-break img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}.photo-break:hover img{transform:scale(1.03)}.photo-caption{position:absolute;inset:auto 36px 34px;display:flex;justify-content:space-between;color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.24)}.story{background:var(--sand)}.section-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:80px}.section-head h2{margin-bottom:0}.section-intro{width:320px;color:var(--muted);margin:0 0 10px}.timeline{position:relative}.timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(23,50,59,.15)}.timeline-item{display:grid;grid-template-columns:130px minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;position:relative;padding:58px 0}.timeline-item.reverse{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 130px}.timeline-item.reverse .timeline-meta{grid-column:3;grid-row:1}.timeline-item.reverse .timeline-photo{grid-column:2;grid-row:1}.timeline-item.reverse .timeline-copy{grid-column:1;grid-row:1;text-align:right}.timeline-meta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);align-self:start;padding-top:12px}.timeline-meta span{display:block}.timeline-meta b{font-weight:700;color:var(--ink)}.timeline-photo{height:440px;overflow:hidden;background:#ddd}.timeline-photo img{transition:transform .9s ease}.timeline-item:hover .timeline-photo img{transform:scale(1.035)}.timeline-copy h3{font-family:var(--serif);font-size:46px;line-height:.95;margin:0 0 18px;font-weight:500}.timeline-copy p{margin:0;font-family:var(--cn);font-size:17px;line-height:1.9}.timeline-copy .en{font-family:var(--sans);font-size:14px;line-height:1.7;margin-top:8px}.gallery-strip{overflow:hidden;background:var(--deep);padding:26px 0}.gallery-track{display:flex;gap:16px;width:max-content;animation:marquee 52s linear infinite}.gallery-strip figure{margin:0;width:220px;height:280px;flex:0 0 auto;overflow:hidden}.gallery-strip figure:nth-child(2n){height:220px;margin-top:30px}.gallery-strip img{filter:saturate(.92);transition:transform .7s}.gallery-strip figure:hover img{transform:scale(1.05)}.dark{background:var(--deep);color:#fff}.dark .kicker{color:#b7cfbe}.split{display:grid;grid-template-columns:.78fr 1.22fr;gap:100px}.day-copy h2{margin-top:20px}.day-copy>p{max-width:380px}.day-copy .muted{color:rgba(255,255,255,.62);line-height:1.75}.schedule{border-top:1px solid rgba(255,255,255,.22)}.schedule-line{display:grid;grid-template-columns:92px 1fr;gap:25px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.16)}.schedule-line time{font-family:var(--serif);font-size:36px}.schedule-line h3{margin:0 0 5px;font-family:var(--serif);font-size:30px;font-weight:500}.schedule-line p{margin:0;color:rgba(255,255,255,.66);font-size:13px;line-height:1.65}.dress{background:#edf1ec}.dress-layout{display:grid;grid-template-columns:1fr 1fr;gap:82px;align-items:center}.dress-photo{height:710px;overflow:hidden}.dress-copy h2{margin-bottom:25px}.lead{font-weight:700;font-size:15px;letter-spacing:.11em;text-transform:uppercase}.dress-copy>p{max-width:520px}.palette{display:flex;gap:10px;margin:34px 0 24px}.swatch{width:38px;height:38px;border-radius:50%;border:4px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(23,50,59,.12)}.swatch-blue{background:#b4d0dc}.swatch-sage{background:#9aaa91}.swatch-grey{background:#b6b6b2}.swatch-sand{background:#dfd3c1}.note{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:6px;max-width:520px;font-size:13px}.note span{display:block}.note span{color:var(--muted)}.soft{background:#f3f0ea}.faq-heading{margin:70px 0 24px}.faq-heading h3{font-family:var(--serif);font-size:42px;font-weight:500;margin:10px 0 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.info-card{background:#fff;padding:28px 24px 30px;min-height:330px;position:relative;border:1px solid rgba(23,50,59,.08);transition:.35s}.info-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px rgba(28,52,60,.08)}.card-no{font-size:10px;letter-spacing:.16em;color:var(--sage)}.info-card h3{font-family:var(--serif);font-size:36px;line-height:.95;font-weight:500;margin:40px 0 18px}.info-card h3 .cn-title{display:block;margin-top:12px}.info-card p{font-family:var(--cn);font-size:14px;line-height:1.85}.info-card .en{margin-top:8px;font-family:var(--sans);font-size:13px}.location{background:var(--paper)}.location-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:center}.location-photo{height:650px}.address{font-size:14px;line-height:1.7;letter-spacing:.02em}.on-light{justify-content:flex-start}.rsvp{position:relative;min-height:90svh;display:grid;align-items:center;color:#fff;overflow:hidden;padding:140px 0}.rsvp-bg{position:absolute;inset:0}.rsvp-bg img{object-position:center 25%}.rsvp-content{position:relative;text-align:center}.rsvp h2{font-size:clamp(74px,10vw,130px);margin-bottom:28px}.large{padding:17px 28px;font-size:13px}.rsvp-note{max-width:440px;margin:22px auto 0;color:rgba(255,255,255,.7);font-size:12px}.light-text{color:#d0e5d8}.footer{background:#091f28;color:#fff;padding:34px 0}.footer-inner{display:flex;justify-content:space-between;align-items:end}.footer .brand{font-size:28px}.footer p{font-size:11px;letter-spacing:.13em;text-transform:uppercase;opacity:.55;margin:7px 0 0}.back-top{font-size:11px;text-transform:uppercase;letter-spacing:.14em}.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}.reveal.is-visible{opacity:1;transform:none}@keyframes heroZoom{from{transform:scale(1.03)}to{transform:scale(1.00)}}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){.container,.narrow{width:min(100% - 34px,720px)}.site-header{height:66px;padding:0 18px;mix-blend-mode:normal;color:#fff}.brand{font-size:26px}.desktop-nav{display:none}.menu-toggle{display:grid;gap:5px;place-items:end}.menu-toggle span{display:block;width:24px;height:1px;background:#fff}.mobile-menu{position:fixed;z-index:25;inset:0;background:var(--deep);color:#fff;padding:95px 28px 30px;display:grid;align-content:start;gap:18px;transform:translateY(-110%);transition:transform .45s ease}.mobile-menu.open{transform:none}.mobile-menu a{font-family:var(--serif);font-size:42px;line-height:.95}.mobile-menu small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9db6bd;margin-top:7px}.hero{min-height:680px}.hero-content{padding-top:30px}.hero h1{font-size:27vw}.hero-date{font-size:14px}.hero-place{font-size:10px}.hero-actions{margin-top:28px}.scroll-cue{display:none}.section{padding:84px 0}.welcome h2,.section-head h2,.day h2,.dress h2,.location h2{font-size:66px}.photo-break{height:62svh;min-height:480px}.photo-caption{inset: auto 18px 18px;gap:16px;font-size:9px}.section-head{display:block;margin-bottom:52px}.section-intro{width:auto;margin-top:18px}.timeline:before{display:none}.timeline-item,.timeline-item.reverse{display:block;padding:28px 0 50px}.timeline-item.reverse .timeline-copy,.timeline-item.reverse .timeline-photo,.timeline-item.reverse .timeline-meta{grid-column:auto;grid-row:auto;text-align:left}.timeline-meta{display:flex;gap:10px;padding:0 0 12px}.timeline-meta span{display:inline}.timeline-meta b{display:inline}.timeline-photo{height:68vw;max-height:430px}.timeline-copy h3{font-size:42px;margin-top:20px}.gallery-track{animation-duration:42s}.gallery-strip figure{width:180px;height:240px}.gallery-strip figure:nth-child(2n){height:190px}.split,.dress-layout,.location-grid{grid-template-columns:1fr;gap:50px}.split{gap:60px}.day-copy .button{margin-top:14px}.dress-photo,.location-photo{height:120vw;max-height:650px}.cards{grid-template-columns:1fr 1fr}.info-card{min-height:270px}.rsvp{min-height:72svh;padding:100px 0}.footer-inner{align-items:center}.footer .brand{font-size:24px}}
@media(max-width:560px){.hero h1{font-size:25vw}.hero{min-height:620px}.welcome h2,.section-head h2,.day h2,.dress h2,.location h2{font-size:56px}.welcome-note{font-size:23px}.bilingual-copy{font-size:15px}.bilingual-copy .en,.en{font-size:13px}.section-head h2 br{display:none}.timeline-copy h3{font-size:38px}.schedule-line{grid-template-columns:64px 1fr;gap:10px}.schedule-line time{font-size:30px}.schedule-line h3{font-size:26px}.cards{grid-template-columns:1fr}.info-card{min-height:auto}.faq-heading{margin-top:52px}.faq-heading h3{font-size:36px}.dress-photo,.location-photo{height:115vw}.rsvp h2{font-size:72px}.rsvp-note{font-size:11px}.footer-inner{display:block}.back-top{display:inline-block;margin-top:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-media,.gallery-track{animation:none}.reveal{transition:none}.photo-break img,.timeline-photo img,.gallery-strip img{transition:none}}

/* Finger-draggable rolling gallery */
.gallery-strip{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.gallery-strip.is-dragging{cursor:grabbing}
.gallery-track{animation:none!important;transform:translate3d(0,0,0);will-change:transform}
.gallery-strip img{-webkit-user-drag:none;user-select:none}

/* QC: give the two-line Good to Know heading enough breathing room. */
.soft .section-head h2 { line-height: 1.05; }
.soft .section-head h2 i { display: inline-block; }
@media (max-width: 900px) {
  .soft .section-head h2 { line-height: 1.08; }
}

.gallery-strip::after{content:"Swipe to explore · 左右滑动浏览";display:block;text-align:center;color:rgba(255,255,255,.5);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:14px}
@media(min-width:901px){.gallery-strip::after{content:"Drag or hover to explore · 拖动浏览"}}

/* Registry portrait crop: keep Erge and Long centered in the frame. */
.registry-photo img{object-position:36% center;}
@media(max-width:900px){.registry-photo img{object-position:35% center;}}

/* Hero portrait framing: keep the couple centered and lift their faces clear of the title. */
.hero-media img{
  object-position:center center;
  transform:scale(1.08);
  transform-origin:center bottom;
}
@media(max-width:900px){
  .hero-media img{
    object-position:center center;
    transform:scale(1.055);
    transform-origin:center bottom;
  }
}

/* Mobile hero framing: enlarge from the bottom so faces sit above the title area. */
@media(max-width:900px){
  .hero-media img{
    object-position:center center;
    transform:scale(1.12);
    transform-origin:center bottom;
  }
}
@media(max-width:560px){
  .hero-media img{
    transform:scale(1.15);
    transform-origin:center bottom;
  }
}

/* Short/smaller desktop monitors: lift the couple above the fixed hero title without changing typography. */
@media (min-width:901px) and (max-height:900px){
  .hero-media img{
    object-position:center center;
    transform:scale(1.16);
    transform-origin:center bottom;
  }
}
@media (min-width:901px) and (max-height:760px){
  .hero-media img{
    transform:scale(1.22);
    transform-origin:center bottom;
  }
}

/* Mobile hero: enlarge from the bottom so faces remain clear without creating a gap below the image. */
@media (max-width:900px){
  .hero-media img{
    transform:scale(1.12);
    transform-origin:center bottom;
  }
}
@media (max-width:560px){
  .hero-media img{
    transform:scale(1.15);
    transform-origin:center bottom;
  }
}

/* Location portrait: preserve the full people in photo 22 instead of cropping them. */
.location-grid > .location-photo:not(.registry-photo){background:#ece8e1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.location-grid > .location-photo:not(.registry-photo) img{object-fit:contain;object-position:center center}


/* Context copy and image framing fixes */
.timeline-photo.official-photo img{object-position:center top;}
.rsvp{background:var(--deep);}
.rsvp-bg,.rsvp-bg img{width:100%;height:100%;}
.rsvp-bg{bottom:0;}

/* Mobile hero: fill the full hero frame so no empty/grey band appears below the portrait. */
@media (max-width:900px){
  .hero-media::before{display:none;}
  .hero-media img{
    object-fit:cover;
    object-position:center 72%;
    transform:scale(1.08);
    transform-origin:center bottom;
  }
}
@media (max-width:560px){
  .hero-media img{
    object-position:center 76%;
    transform:scale(1.10);
    transform-origin:center bottom;
  }
}

/* v18 mobile hero crop: matches the user-approved red-frame composition. */
.hero-media picture{position:relative;display:block;width:100%;height:100%}
@media (max-width:900px){
  .hero-media picture,.hero-media picture img{width:100%;height:100%}
  .hero-media picture img{
    object-fit:cover;
    object-position:center center;
    transform:none;
  }
}

/* v20: keep the v18 mobile hero crop and move the eyebrow to the top on mobile. */
.hero-top-eyebrow{display:none;}
@media (max-width:900px){
  .hero .hero-content > .eyebrow{display:none;}
  .hero-top-eyebrow{
    display:block;
    position:absolute;
    z-index:3;
    top:82px;
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 40px);
    margin:0;
    text-align:center;
    color:#fff;
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    opacity:.95;
  }
}
@media (max-width:560px){
  .hero-top-eyebrow{top:76px;font-size:10px;}
}

/* v21: make the scenic photo-break a cinematic, narrower horizontal strip. */
.photo-break{
  height:32vw;
  min-height:300px;
  max-height:430px;
}
.photo-break img{
  object-fit:cover;
  object-position:center center;
}
@media (max-width:900px){
  .photo-break{
    height:38vw;
    min-height:230px;
    max-height:340px;
  }
}
@media (max-width:560px){
  .photo-break{
    height:54vw;
    min-height:210px;
    max-height:300px;
  }
}

/* v22: laptop-only photo-break framing — reveal more neck/shoulders without changing strip height. */
@media (min-width:901px) and (max-width:1600px){
  .photo-break-1 img{
    object-position:center 72%;
  }
}

/* v24: stable photo-break framing across desktop monitor sizes.
   Keep the narrow cinematic strip, but bias the crop downward so the couple, who sit low in the source photo, remain fully visible
   even when the strip becomes shorter on large displays. */
@media (min-width:901px){
  .photo-break-1 img{
    object-position:center 80%;
    transform:none;
    transform-origin:center center;
  }
}