/* =======================================================
   THIỆP CƯỚI SÀI GÒN XƯA  •  MOBILE FIRST  •  390PX REFERENCE
   ======================================================= */
:root {
  --paper: #fff8e9;
  --paper-deep: #f8edd8;
  --ink: #55392a;
  --muted: #8e7058;
  --red: #9e282b;
  --red-deep: #811b21;
  --antique-gold: #a7814f;
  --line: #d7ba91;
  --olive: #78836c;
  --font-title: 'Cormorant Garamond', 'Noto Serif', Georgia, serif;
  --font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Be Vietnam Pro', Arial, sans-serif;
  --font-script: 'Dancing Script', cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; min-width: 320px; background: #e6d5be; color: var(--ink); font-family: var(--font-serif); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid #c4594a; outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 14px 18px; background: var(--red-deep); color: white; }
.skip-link:focus { top: 16px; }
.page-shell { position: relative; width: min(100%, 460px); margin: 0 auto; overflow: clip; background: var(--paper); box-shadow: 0 0 0 1px rgba(106,64,43,.16), 0 0 90px rgba(58,32,15,.30); isolation: isolate; }
.section-paper { position: relative; isolation: isolate; background-color: var(--paper); background-image: url('assets/paper-texture.svg'), radial-gradient(ellipse at 55% 20%, #fffbee 0%, #fff8e9 63%, #f8edd7 100%); background-blend-mode: multiply, normal; }
.section-paper::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 0 70%, rgba(166,115,60,.055), transparent 44%), radial-gradient(circle at 100% 0, rgba(170,122,56,.07), transparent 35%); }

/* Header scrolls in once the envelope has been opened */
.site-nav { position: fixed; z-index: 60; top: 0; left: 50%; width: min(100%, 460px); transform: translate(-50%, -110%); background: rgba(255,249,233,.96); box-shadow: 0 2px 9px rgba(100,63,40,.10); border-bottom: 1px solid rgba(177,128,73,.35); transition: transform .3s ease; backdrop-filter: blur(8px); }
.site-nav.visible { transform: translate(-50%, 0); }
.nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(5px, 1.7vw, 10px); padding: 0 10px; height: 55px; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { align-self: stretch; display: flex; align-items: center; position: relative; white-space: nowrap; text-decoration: none; font-family: var(--font-serif); font-size: clamp(9px, 2.58vw, 11px); color: #593522; letter-spacing: -.025em; }
.nav-links a::after { content:''; position:absolute; bottom: 0; left:20%; right:20%; height: 2px; background: transparent; }
.nav-links a.active { color: var(--red); font-weight: 700; }
.nav-links a.active::after { background: var(--red); }
.nav-links span { color: #c5ae8a; font-size: 11px; user-select: none; }
.music-toggle { position: fixed; z-index: 75; top: max(20px, env(safe-area-inset-top)); left: calc(50% + min(50vw, 230px) - 59px); width: 43px; height: 43px; display: grid; place-items: center; padding: 0; border: 1px solid #efd2aa; border-radius: 100%; color: #fff6e6; background: var(--red-deep); box-shadow: 0 4px 14px rgba(100,31,25,.22); cursor: pointer; transition: transform .25s, background .25s; }
.music-toggle:hover { transform: scale(1.06); }
.music-toggle.playing { background: #a63436; }
.music-toggle.playing .music-icon { animation: pulse-note 2s ease-in-out infinite; }
.music-tooltip { position: absolute; top: 48px; right: 0; width: max-content; padding: 5px 8px; border-radius: 3px; background: rgba(60,40,31,.83); color: white; font: 10px var(--font-body); opacity: 0; transition: opacity .2s; pointer-events: none; }
.music-toggle:focus-visible .music-tooltip, .music-toggle:hover .music-tooltip { opacity: 1; }
@keyframes pulse-note { 50% { transform: rotate(-12deg) scale(1.08); } }

/* Cover */
.cover { min-height: 820px; min-height: 100svh; padding: 32px 28px 34px; display: flex; flex-direction: column; text-align: center; }
.cover-border { position: absolute; inset: 22px 18px 20px; border: 1px solid rgba(168,54,51,.68); border-radius: 3px; pointer-events: none; }
.cover-border::after { content: ''; position:absolute; inset: 6px; border: 1px solid rgba(191,149,94,.38); pointer-events:none; }
.corner { position: absolute; width: 91px; height: 91px; opacity: .94; pointer-events: none; z-index: 2; }
.corner-tl { left: 17px; top: 21px; }
.corner-tr { right: 17px; top: 21px; transform: rotate(90deg); }
.corner-bl { left: 17px; bottom: 19px; transform: rotate(270deg); }
.corner-br { right: 17px; bottom: 19px; transform: rotate(180deg); }
.cover-inner { position: relative; z-index: 3; flex: 1; width: 100%; max-width: 410px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; min-height: 740px; min-height: calc(100svh - 67px); }
.overline { font: 500 12px/1.6 var(--font-serif); letter-spacing: .09em; }
.cover-overline { margin: 52px 0 5px; }
.tiny-line { width: min(68%,230px); display: flex; align-items: center; gap: 10px; font-size: 16px; color: #a32b30; }
.tiny-line::before, .tiny-line::after { content: ''; height: 1px; flex: 1; background: #ba8c61; }
.cover h1 { margin: 17px 0 0; color: var(--red-deep); font: 700 clamp(57px, 16vw, 81px)/.94 var(--font-title); letter-spacing: -.045em; white-space: nowrap; }
.cover-subtitle { margin: 14px 0 0; color: #946132; font: 600 clamp(14px, 4.4vw, 20px)/1.3 var(--font-serif); letter-spacing: .25em; }
.divider-image { width: 147px; height: 19px; margin: 13px auto; object-fit: contain; }
.cover-divider { width: 176px; margin: 17px auto 0; }
/* Two genuinely separate layers: plain photo below; oversized transparent flower PNG above.
   To fine-tune the branch later, only edit --flower-width / --flower-left / --flower-top. */
.cover-art {
  --flower-width: 100%;
  --flower-left: 2%;
  --flower-top: 0%;
  position: relative; isolation: isolate; align-self: stretch; flex: 1;
  width: calc(100% + 22px); min-height: 260px; max-height: 430px;
  margin: -4px -11px 0;
  overflow: visible; /* Branch MUST extend outside the picture, not be cropped. */
}
.cover-photo-layer { position: absolute; inset: 3% 3% 4% 4%; z-index: 1; overflow: hidden; }
.cover-couple {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; opacity: .98;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 87%, transparent 100%);
}
.cover-spray {
  display: block; position: absolute; z-index: 3;
  top: var(--flower-top); left: var(--flower-left); width: var(--flower-width); height: auto;
  max-width: none; object-fit: contain; pointer-events: none; user-select: none;
  filter: drop-shadow(0 3px 3px rgba(77, 42, 27, .10));
}
.cover-stamp { position: absolute; z-index: 2; width: 74px; right: 1px; bottom: 15px; opacity: .38; transform: rotate(-13deg); mix-blend-mode: multiply; }
.cover-message { position: relative; margin: 0 auto 13px; padding: 0 5px; color: #82512e; font: 500 12px/1.78 var(--font-serif); letter-spacing: .062em; }
.cover-message p { margin: 0; }
.main-button { display: flex; align-items: center; justify-content: center; gap: 18px; width: min(255px, 84%); min-height: 55px; margin: 0 auto 22px; padding: 10px 20px; border: 3px double #f0c58d; outline: 1px solid var(--red-deep); border-radius: 17px; background: var(--red-deep); color: #fff5e5; box-shadow: 0 5px 12px rgba(106,39,30,.22), inset 0 0 0 2px rgba(255,237,201,.11); font: 600 18px var(--font-title); letter-spacing: .07em; text-decoration: none; transition: transform .25s ease, background .25s ease; }
.main-button:hover { transform: translateY(-3px); background: #a52d30; }
.main-button span { font: 25px/1 Georgia, serif; }

/* Typography across sections */
h2, h3, p { overflow-wrap: break-word; }
h2 { margin: 0; text-align: center; color: var(--red-deep); font: 700 clamp(31px, 8vw, 42px)/1.1 var(--font-title); letter-spacing: -.027em; }
h3 { margin: 0; }
.section-kicker { margin: 0 0 12px; color: #996e40; font: 500 9px/1.6 var(--font-body); letter-spacing: .19em; text-align: center; }
.section-underheading { margin: -4px 0 0; color: #927454; font: 500 9px/1.5 var(--font-body); text-align: center; letter-spacing: .10em; }
.content-block { position: relative; z-index: 2; }
.appear { opacity: 0; transform: translateY(16px); transition: transform .75s ease, opacity .75s ease; }
.appear.is-visible { opacity: 1; transform: translateY(0); }

/* Greeting and printed postcard */
.intro-section { min-height: 562px; padding: 78px 32px 56px; overflow: hidden; }
.intro-section h2 { text-align: left; font-size: 47px; }
.intro-content { position: relative; z-index: 2; }
.intro-content .section-kicker { text-align: left; margin-bottom: 6px; }
.intro-content > .divider-image { margin: 10px 0 21px; width: 120px; }
.intro-copy { max-width: 100%; font-size: 14px; line-height: 2; font-style: italic; letter-spacing: -.025em; }
.intro-copy p { margin: 0 0 20px; }
.intro-copy p:first-child { max-width: 97%; }
.intro-copy p:nth-child(2) { max-width: 100%; }
.floral-wrapper { position: absolute; pointer-events: none; }
.floral-intro-top { width: 168px; height: 215px; right: -35px; top: -24px; transform: rotate(25deg); opacity: .83; }
.floral-intro-bottom { width: 130px; height: 190px; left: -61px; bottom: -31px; transform: rotate(-7deg); opacity: .85; }
.floral-wrapper img { width: 100%; height: 100%; object-fit: contain; }
.postcard-group {
  position: relative;
  width: 145px;
  height: auto;
  margin: 30px auto 8px;
  transform: rotate(7deg);
}
.postcard-photo { overflow: hidden; height: 197px; padding: 7px; border: 1px solid #cfb690; background: #f8e8d0; box-shadow: -8px 10px 16px rgba(72,48,26,.17); }
.postcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 64% center; filter: sepia(.27) contrast(.97); }
.postcard-label { position: absolute; bottom: -9px; left: -50px; z-index: 2; padding: 7px 10px; background: #f6e9d1; transform: rotate(-12deg); font: 600 19px/1.1 var(--font-script); color: #76563a; box-shadow: 1px 2px 4px #98734b3a; }
.postmark { position: absolute; top: -8px; left: -29px; width: 49px; height: 49px; border: 2px solid #987a52; border-radius: 50%; transform: rotate(-17deg); display: grid; place-items: center; opacity: .54; font: 8px var(--font-body); }
.postmark i { position: absolute; bottom: 5px; font-style: normal; }

/* Ceremony details */
.info-section { padding: 28px 26px 0; overflow: hidden; }
.info-section h2 { font-size: clamp(30px, 7.8vw, 39px); }
.info-section .divider-image { margin: 13px auto 6px; }
.info-lead { margin: 0 0 25px; color: #947250; font: 400 12px/1.8 var(--font-serif); font-style: italic; text-align: center; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.info-card { min-height: 190px; padding: 21px 9px 18px; border: 1px solid #c4a276; outline: 1px solid rgba(192,149,99,.35); outline-offset: -7px; border-radius: 4px 15px 4px 15px; text-align: center; background: rgba(255,247,226,.57); box-shadow: 0 2px 0 rgba(161,117,71,.07); }
.info-icon { width: 33px; height: 33px; margin: 0 auto 11px; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-card h3 { color: var(--red-deep); font: 600 17px/1.3 var(--font-title); letter-spacing: .025em; }
.info-card p { margin: 8px 0 0; color: #6b4836; font: 400 12px/1.9 var(--font-serif); }
.old-street-scene {
  height: 218px;
  margin: 16px -26px 0;
  background:
    linear-gradient(to bottom, var(--paper) 0%, rgba(255,248,233,0) 24%),
    url('assets/old-street-scene.png') center 55% / cover no-repeat;
  filter: sepia(.11) saturate(.85);
}

/* Timeline */
.timeline-section { min-height: 515px; padding: 62px 30px 45px; overflow: hidden; }
.timeline-section h2 { white-space: nowrap; font-size: clamp(22px, 6.7vw, 30px); }
.timeline-section .divider-image { margin-top: 13px; margin-bottom: 10px; }
.timeline { position: relative; z-index: 2; margin: 35px 0 5px 4px; padding-left: 0; }
.timeline::before { content: ''; position: absolute; left: 23px; top: 15px; bottom: 38px; width: 1.5px; background: #ad6e4b; }
.timeline-item { display: flex; gap: 22px; align-items: flex-start; min-height: 122px; position: relative; }
.timeline-item::before { content: ''; position: absolute; width: 7px; height: 7px; background: var(--red-deep); border: 2px solid #fae9d1; border-radius: 50%; left: 20px; top: 49px; z-index: 3; }
.timeline-marker { position: relative; z-index: 2; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid #d0ad7e; background: #f7ead3; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 2px 5px #a4753c18; }
.timeline-marker svg { width: 26px; height: 26px; stroke: #8b532f; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.timeline-item h3 { color: var(--red-deep); font: 700 15px/1.45 var(--font-title); letter-spacing: -.015em; }
.timeline-item p { margin: 2px 0 0; color: #70533d; font: italic 12px/1.7 var(--font-serif); max-width: 235px; }
.timeline-meta { display: inline-block; margin-top: 5px; color: #9a7655; font: 10px/1.5 var(--font-serif); }
.timeline-vespa { position: absolute; width: 144px; height: 212px; top: 155px; right: -34px; object-fit: cover; opacity: .19; filter: sepia(1); -webkit-mask-image: linear-gradient(to right, transparent 0, black 55%); mask-image: linear-gradient(to right, transparent 0, black 55%); }
.old-seal { position: absolute; bottom: 18px; right: 24px; width: 85px; height: 85px; opacity: .36; transform: rotate(-15deg); }
.old-seal img { width: 100%; height: 100%; }

/* The film-photo collage */
.album-section { padding: 53px 22px 45px; border-top: 1px solid rgba(172,125,77,.20); overflow: hidden; }
.album-section .divider-image { margin-top: 11px; margin-bottom: 10px; }
.photo-collage { position: relative; height: clamp(305px, 86vw, 383px); margin: 30px 0 0; }
.polaroid { position: absolute; z-index: 2; overflow: hidden; padding: 7px 7px 22px; border: 1px solid #dbccb3; background: #fff9e9; box-shadow: 0 8px 16px rgba(81,57,38,.21); cursor: zoom-in; transition: transform .27s ease, box-shadow .27s ease; }
.polaroid img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.15) saturate(.87); }
.polaroid:hover { z-index: 4; box-shadow: 0 15px 20px #4e392c44; }
.polaroid-main { left: 2%; top: 3%; width: 55%; height: 74%; transform: rotate(-7deg); }
.polaroid-main img { object-position: center 42%; }
.polaroid-main:hover { transform: rotate(-3deg) translateY(-5px); }
.polaroid-top { right: 2%; top: 1%; width: 44%; height: 47%; transform: rotate(5deg); }
.polaroid-top img { object-position: center 42%; }
.polaroid-top:hover { transform: rotate(1deg) translateY(-5px); }
.polaroid-bottom { right: 1%; bottom: 2%; width: 49%; height: 48%; transform: rotate(9deg); }
.polaroid-bottom img { object-position: center 68%; }
.polaroid-bottom:hover { transform: rotate(4deg) translateY(-5px); }
.tape { position: absolute; z-index: 5; width: 67px; height: 19px; background: rgba(183,133,91,.32); border-left: 1px dashed #fff3db8f; border-right: 1px dashed #fff3db8f; transform: rotate(-15deg); pointer-events:none; }
.tape-one { top: 0; left: 0; }
.tape-two { right: 0; top: 45%; transform: rotate(31deg); }
.album-note { position: relative; z-index: 2; margin: 3px 0 16px; text-align: center; color: #8a5a43; font: 600 20px/1.3 var(--font-script); transform: rotate(-3deg); }
.text-link { position: relative; z-index: 3; display: block; min-height: 42px; margin: 0 auto; padding: 5px 14px; border: 0; border-bottom: 1px solid #bc8b62; color: var(--red-deep); background: transparent; font: 600 11px/1 var(--font-body); letter-spacing: .10em; cursor: pointer; }
.text-link span { font-size: 18px; margin-left: 5px; }
.floral-album { width: 160px; height: 195px; left: -58px; bottom: 32px; opacity: .5; transform: rotate(18deg); }

/* The letter ends on paper, not on a solid red footer. */
.thanks-section { min-height: 330px; padding: 53px 32px 65px; text-align: center; overflow: hidden; border-top: 1px solid rgba(164,119,77,.18); }
.thanks-inner { position: relative; z-index: 2; }
.thanks-section h2 { margin: 7px 0 17px; color: var(--red); font: 600 65px/1 var(--font-script); letter-spacing: -.01em; }
.thanks-section p:not(.section-kicker) { color: #77503a; font: 500 11px/1.9 var(--font-serif); letter-spacing: .06em; }
.thanks-section .divider-image { margin: 19px auto 9px; }
.thanks-foot { color: #aa8660; font: italic 14px var(--font-serif); }
.thanks-flower { position: absolute; width: 175px; pointer-events: none; z-index: 1; opacity: .75; }
.thanks-flower-left { left: -81px; bottom: -57px; transform: rotate(-40deg); }
.thanks-flower-right { right: -86px; bottom: -35px; transform: rotate(145deg); }

.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.thanks-script { width: 226px; height: auto; margin: 10px auto 9px; }

/* Lightbox is a functional photo viewer. */
.lightbox { position: fixed; z-index: 200; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; }
.lightbox.open { display: flex; }
.lightbox-backdrop { position:absolute; inset:0; background: rgba(33,25,22,.93); backdrop-filter: blur(10px); }
.lightbox-dialog { position:relative; display:flex; align-items:center; justify-content:center; width: min(96vw,720px); max-height: 88vh; }
.lightbox-dialog figure { margin:0; max-height: 85vh; width:100%; text-align:center; }
.lightbox-dialog figure img { display: block; margin:0 auto; max-width:100%; max-height: 77vh; object-fit:contain; border:7px solid #fff8e9; box-shadow:0 18px 50px #0006; }
.lightbox-dialog figcaption { margin: 11px 0 0; color:#f6e8d2; font:italic 15px var(--font-serif); }
.lightbox-close,.lightbox-arrow { position:absolute; z-index:2; display:grid; place-items:center; border:1px solid #d7bc9b; border-radius:100%; background:#fff7e5; color:var(--red-deep); cursor:pointer; }
.lightbox-close { top:-44px; right:0; width:37px; height:37px; font:30px/1 Georgia,serif; }
.lightbox-arrow { top:45%; width:38px; height:45px; font:35px Georgia,serif; }
.lightbox-prev { left:-8px; }
.lightbox-next { right:-8px; }
.lightbox-count { position:absolute; bottom:-25px; font:11px var(--font-body); color:#e8d9c6; }

/* Narrow devices */
@media (max-width: 359px) {
  .cover { padding: 27px 23px 29px; }
  .cover-border { inset: 17px 12px; }
  .corner { width: 70px; height: 70px; }
  .corner-tl { left: 11px; top: 16px; } .corner-tr { right: 11px; top: 16px; }
  .corner-bl { left: 11px; bottom: 16px; } .corner-br { right: 11px; bottom: 16px; }
  .cover-overline { margin-top: 46px; }
  .cover h1 { font-size: 56px; }
  .cover-message { font-size: 11px; }
  .intro-section { padding-inline: 25px; }
  .intro-copy { font-size: 12px; }
  .postcard-group { width: 122px; }
  .postcard-photo { height: 176px; }
  .timeline-section { padding-inline: 22px; }
  .info-grid { gap: 8px; }
  .info-card { padding-inline: 5px; }
}
@media (max-width: 699px) {
  .intro-section {
    min-height: 0;
    padding-bottom: 64px;
  }
  .intro-content { min-height: 0; }
  .intro-copy,
  .intro-copy p,
  .intro-copy p:first-child,
  .intro-copy p:nth-child(2) { max-width: none; }
  .postcard-group {
    position: relative;
    inset: auto;
    width: clamp(122px, 37vw, 145px);
    height: auto;
    margin: 30px auto 8px;
    transform: rotate(7deg);
  }
}
@media (min-width: 700px) {
  body { background-image: radial-gradient(circle at 10% 15%,#cdb39b,transparent 28%),radial-gradient(circle at 95% 65%,#c69d87,transparent 35%),url('assets/paper-texture.svg'); }
  .page-shell { margin: 32px auto; }
  .music-toggle { top: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .appear { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Liên kết Google Maps: chỉ bổ sung chữ, không thay đổi hệ màu hoặc bố cục. */
.map-link { display: block; width: fit-content; margin-top: 7px; color: var(--red-deep); font: 600 10px/1.6 var(--font-body); letter-spacing: .055em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.map-link:hover { text-decoration-thickness: 2px; }
.map-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.map-link-card { margin: 10px auto 0; }