:root {
  --wine:#691e2d;
  --paper:#f7f3ea;
  --ink:#362d2a;
  --muted:#83756d;
  --line:#d8cdbd;
  --serif:"Songti SC","Noto Serif CJK SC","SimSun",serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:74px
}

body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased
}

body:has(dialog[open]) {
  overflow:hidden
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:2px solid #af7955;
  outline-offset:6px
}

button {
  border:0;
  background:none
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400
}

img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

::selection {
  background:#e1c2c6
}

figure {
  min-width:0
}

.skip {
  position:fixed;
  left:16px;
  top:-70px;
  padding:12px;
  background:var(--paper);
  z-index:200
}

.skip:focus {
  top:10px
}

.topbar {
  height:78px;
  margin:0 5.3%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.monogram {
  font:28px Georgia,serif;
  letter-spacing:-2px;
  color:var(--wine)
}

.monogram span {
  font-style:italic;
  font-size:19px;
  padding:0 4px
}

.top-date {
  font-size:10px;
  letter-spacing:3px;
  color:var(--muted)
}

.top-invite {
  font-size:12px;
  letter-spacing:2px
}

.top-invite span {
  margin-left:18px
}

.hero {
  max-width:1440px;
  margin:auto;
  padding:62px 8% 64px;
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:6%;
  align-items:center;
  min-height:min(790px,calc(100svh - 78px))
}

.eyebrow {
  font:10px/1.8 Arial,sans-serif;
  letter-spacing:2.8px;
  display:block
}

.hero-copy>.eyebrow {
  color:var(--wine)
}

.little-rule {
  width:34px;
  height:1px;
  background:var(--wine);
  margin:22px 0 26px
}

h1 {
  font-size:clamp(48px,5.6vw,80px);
  line-height:1.35;
  letter-spacing:5px;
  color:var(--wine)
}

.italic {
  font-style:italic
}

.hero-en {
  font:italic 21px Georgia,serif;
  color:#917a68;
  margin-top:16px
}

.couple {
  font-family:var(--serif);
  font-size:25px;
  letter-spacing:4px;
  margin:32px 0 16px
}

.couple span {
  font:italic 23px Georgia,serif;
  color:#a78769;
  padding:0 8px
}

.intro {
  font-size:12px;
  line-height:2.2;
  letter-spacing:2px;
  color:var(--muted)
}

.primary {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:16px 23px;
  background:var(--wine);
  color:#fff8e9;
  font-size:12px;
  letter-spacing:1.5px;
  min-height:48px;
  transition:background .2s,transform .2s
}

.primary:hover {
  background:#85374a;
  transform:translateY(-2px)
}

.hero .primary {
  margin-top:26px
}

.hero-bottom {
  display:flex;
  flex-direction:column;
  gap:9px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.2px;
  margin-top:35px
}

.hero-visual {
  position:relative;
  padding:0 26px 23px 0
}

.hero-arch {
  aspect-ratio: .75;
  max-height:640px;
  overflow:hidden;
  border-radius:48% 48% 2px 2px;
  outline:1px solid #c4b39a;
  outline-offset:10px
}

.hero-arch img {
  object-position:center 47%;
  animation:breathe 18s ease-in-out infinite alternate
}

.vertical-note {
  position:absolute;
  right:-8px;
  top:80px;
  writing-mode:vertical-rl;
  font:12px var(--serif);
  letter-spacing:5px;
  color:#968371
}

.date-seal {
  position:absolute;
  right:-8px;
  bottom:18px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--wine);
  color:#f9ead2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  outline:1px solid #b39769;
  outline-offset:-7px;
  transform:rotate(9deg)
}

.date-seal small {
  font:8px Arial;
  letter-spacing:2px
}

.date-seal strong {
  font:44px Georgia;
  line-height:1.1
}

.photo-note {
  display:block;
  font:8px Arial;
  letter-spacing:2.1px;
  margin-top:22px;
  text-align:center;
  color:#8d7e6d
}

.chapter-intro {
  text-align:center;
  border-top:1px solid var(--line);
  padding:84px 24px 48px
}

.chapter-intro .eyebrow {
  color:#9c806b
}

.chapter-intro h2 {
  font-size:30px;
  letter-spacing:3px;
  margin:23px 0
}

.chapter-intro p {
  color:var(--muted);
  font-size:12px;
  line-height:2.2;
  letter-spacing:1px
}

.chapters {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:25px;
  margin-top:42px
}

.chapters a {
  font-size:11px;
  color:var(--wine);
  border-bottom:1px solid #d6b7b2;
  padding-bottom:7px
}

.scene {
  padding:100px max(8%,calc((100vw - 1180px)/2));
  overflow:hidden
}

.section-heading .eyebrow {
  color:#967a64
}

.section-heading h2 {
  font-size:clamp(31px,3.4vw,48px);
  line-height:1.5;
  letter-spacing:3px;
  margin:20px 0
}

.section-heading p {
  font-size:12px;
  line-height:2.2;
  letter-spacing:1.3px;
  color:var(--muted)
}

.photo {
  display:block;
  width:100%;
  height:100%;
  padding:0;
  overflow:hidden;
  position:relative;
  cursor:zoom-in
}

.photo img {
  transition:transform 1.1s ease
}

.photo:hover img {
  transform:scale(1.035)
}

.photo:after {
  content:'↗';
  position:absolute;
  right:11px;
  bottom:11px;
  background:#f8f2e7dc;
  border-radius:50%;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:var(--wine);
  font-size:14px;
  opacity:0;
  transition:opacity .3s
}

.photo:hover:after,.photo:focus-visible:after {
  opacity:1
}

.editorial {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7%;
  align-items:start;
  margin:44px 0 0 9%
}

.white-main>.photo {
  aspect-ratio:2/3
}

.white-main figcaption,.white-side figcaption {
  font:13px/1.8 var(--serif);
  letter-spacing:1px;
  margin:17px 0 34px;
  color:#6b5a50
}

.white-side {
  padding-top:50px
}

.white-side>figure>.photo {
  aspect-ratio:3/2
}

.white-side>.white-detail {
  width:65%;
  position:relative;
  margin-left:25%
}

.white-detail>.photo {
  aspect-ratio:2/3!important
}

.handwriting {
  font:italic 35px Georgia,serif;
  position:absolute;
  left:-68%;
  bottom:14%;
  color:#b79b86;
  transform:rotate(-9deg);
  white-space:nowrap
}

.palace-scene {
  background:#eae4d8
}

.palace-scene>.section-heading {
  text-align:center
}

.palace-grid {
  display:grid;
  grid-template-columns:1fr 1fr .95fr;
  gap:28px;
  align-items:center;
  margin-top:48px
}

.window>.photo {
  aspect-ratio:2/3;
  border-radius:48% 48% 0 0
}

.window.second {
  margin-top:75px
}

.window figcaption {
  text-align:center;
  font:13px var(--serif);
  letter-spacing:6px;
  margin-top:22px
}

.palace-close .photo {
  aspect-ratio:3/2
}

.palace-close p {
  font:18px/2 var(--serif);
  letter-spacing:2px;
  margin-top:28px;
  text-align:center
}

.gold-scene {
  background:#29211d;
  color:#f2dfbe;
  display:grid;
  grid-template-columns:.85fr 1fr;
  gap:12%;
  align-items:center
}

.gold-copy h2 {
  font-size:clamp(34px,3.8vw,53px);
  line-height:1.55;
  letter-spacing:3px;
  margin:27px 0
}

.gold-copy p {
  font-size:12px;
  line-height:2.4;
  letter-spacing:2px;
  color:#c6b394
}

.gold-copy .eyebrow {
  color:#bea479
}

.gold-frame {
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  outline:1px solid #796448;
  outline-offset:10px
}

.gold-slide {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.7s ease;
  pointer-events:none
}

.gold-slide.active {
  opacity:1;
  pointer-events:auto;
  z-index:1
}

.gold-slide img {
  animation:breathe 15s ease-in-out infinite alternate
}

.gold-caption {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:48px 14px 22px;
  text-align:center;
  font:9px Arial;
  letter-spacing:2px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(transparent,#211910a6)
}

.slide-controls {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:48px;
  font:10px Arial;
  letter-spacing:2px
}

.slide-controls button {
  width:44px;
  height:44px;
  border:1px solid #927c58;
  border-radius:50%;
  font-size:18px
}

.slide-controls button:last-child {
  font-size:12px
}

.green-scene {
  background:#edf0e7;
  padding-right:0
}

.green-scene .section-heading {
  padding-right:8%
}

.green-scene h2 {
  color:#3d513e
}

.film {
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding:35px 8% 20px 0;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:#9aaa8c transparent
}

.film figure {
  flex:0 0 30%;
  min-width:230px;
  scroll-snap-align:start
}

.film .photo {
  aspect-ratio:2/3
}

.film figcaption {
  padding:17px 0 2px;
  border-bottom:1px solid #b9c2b0;
  font:13px var(--serif);
  letter-spacing:2px
}

.film figcaption span {
  font:9px Arial;
  margin-right:20px
}

.pink-scene {
  background:#f4eae6;
  text-align:center;
  position:relative
}

.pink-scene:before {
  content:'❋';
  position:absolute;
  font-size:340px;
  color:#e8d5cf;
  top:-100px;
  right:-90px;
  pointer-events:none
}

.pink-scene .section-heading {
  position:relative
}

.pink-scene h2 {
  color:#885c62
}

.polaroids {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  align-items:center;
  margin:65px -2% 20px
}

.polaroid {
  background:#fffdf8;
  padding:11px 11px 0;
  box-shadow:0 6px 18px #765b4615;
  transform:rotate(var(--tilt));
  --tilt:-6deg;
  transition:box-shadow .4s ease
}

.polaroid:nth-child(2) {
  --tilt:5deg;
  transform:rotate(5deg);
  margin-top:55px
}

.polaroid:nth-child(3) {
  --tilt:-3deg;
  transform:rotate(-3deg)
}

.polaroid:nth-child(4) {
  --tilt:7deg;
  transform:rotate(7deg);
  margin-top:50px
}

.polaroid:hover {
  animation-play-state:paused;
  z-index:1
}

.polaroid .photo {
  aspect-ratio:3/4
}

.polaroid:nth-child(2) .photo,.polaroid:nth-child(4) .photo {
  aspect-ratio:1
}

.polaroid figcaption {
  font:12px/1.6 var(--serif);
  letter-spacing:1px;
  text-align:center;
  padding:23px 1px
}

.red-scene {
  color:#ebd8b3;
  background:#741e29;
  position:relative
}

.red-scene:before,.red-scene:after {
  content:'';
  position:absolute;
  inset:24px;
  border:1px solid #bc94624f;
  pointer-events:none
}

.red-scene:after {
  inset:31px;
  border-color:#bc94622b
}

.red-title {
  text-align:center
}

.red-title .eyebrow {
  color:#d2ac83
}

.double-happiness {
  font:108px/1.6 var(--serif)
}

.red-title h2 {
  font-size:32px;
  letter-spacing:5px
}

.red-title p {
  font:13px var(--serif);
  letter-spacing:5px;
  margin-top:22px
}

.red-gallery {
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:35px;
  margin:50px 6% 0
}

.red-portrait>.photo {
  aspect-ratio:2/3
}

.red-pair {
  display:grid;
  gap:25px;
  align-content:center
}

.red-pair .photo {
  aspect-ratio:3/2
}

.red-gallery figure {
  outline:1px solid #c0946270;
  outline-offset:7px
}

.red-footer {
  text-align:center;
  font:13px var(--serif);
  letter-spacing:6px;
  margin-top:50px
}

.invitation {
  text-align:center;
  padding-top:110px
}

.invitation>.eyebrow {
  color:#937353
}

.invitation h2 {
  font-size:clamp(35px,4.5vw,60px);
  line-height:1.5;
  letter-spacing:5px;
  margin-top:28px
}

.invitation h2 span {
  color:var(--wine)
}

.invite-message {
  font:14px/2.3 var(--serif);
  letter-spacing:2px;
  margin:26px 0 46px;
  color:#867367
}

.event-card {
  display:grid;
  grid-template-columns:.8fr 1.3fr;
  text-align:left;
  border-top:1px solid #ba9d7d;
  border-bottom:1px solid #ba9d7d;
  padding:42px 0;
  gap:45px
}

.event-date {
  text-align:center;
  border-right:1px solid var(--line);
  padding:15px 35px 15px 0;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.event-date small {
  font:10px Arial;
  letter-spacing:3px;
  color:#927a65
}

.event-date strong {
  font:75px Georgia,serif;
  color:var(--wine);
  margin:13px 0
}

.event-date strong span {
  font-size:39px;
  vertical-align:10px;
  color:#b49375;
  margin:0 9px
}

.event-date p {
  font:17px var(--serif);
  letter-spacing:2px
}

.calendar-label {
  font-size:10px;
  margin-top:12px;
  color:var(--muted)
}

.event-place>.eyebrow {
  font-size:9px;
  color:#927a65
}

.event-place h3 {
  font-size:37px;
  margin:12px 0 15px;
  letter-spacing:7px
}

.event-place p {
  font-size:12px;
  line-height:2.1;
  color:var(--muted)
}

.venue-route {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  font-size:10px;
  color:#846c55
}

.venue-route i {
  width:22px;
  height:1px;
  background:#c9b392
}

.venue-route strong {
  border:1px solid #c5a682;
  padding:5px;
  font-weight:400
}

.event-actions {
  display:flex;
  align-items:center;
  gap:23px;
  margin-top:23px
}

.event-actions .primary {
  padding:14px 18px;
  letter-spacing:.5px
}

.text-button {
  border-bottom:1px solid #ad8e7c;
  padding:7px 0;
  font-size:11px
}

.closing-actions {
  display:flex;
  gap:32px;
  justify-content:center;
  margin-top:27px
}

.closing-actions button {
  font-size:11px;
  padding:10px 0;
  color:#7d5d51;
  letter-spacing:1px
}

.closing {
  font:17px/2.2 var(--serif);
  letter-spacing:3px;
  margin-top:68px
}

.signature {
  font:26px var(--serif);
  letter-spacing:4px;
  margin-top:33px;
  color:var(--wine)
}

.signature em {
  font:italic 29px Georgia;
  color:#a89070;
  padding:0 12px
}

.final-date {
  font:9px Arial;
  letter-spacing:3px;
  color:#937b66;
  margin-top:20px
}

footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 5%;
  padding:24px 0;
  border-top:1px solid var(--line);
  color:#947c69;
  font-size:10px
}

footer>a {
  font:italic 20px Georgia;
  color:var(--wine)
}

.mobile-dock {
  display:none
}

.toast {
  position:fixed;
  z-index:300;
  left:50%;
  bottom:100px;
  transform:translate(-50%,20px);
  max-width:calc(100% - 36px);
  width:max-content;
  background:#362b28f0;
  padding:14px 22px;
  color:white;
  font-size:12px;
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:.3s;
  line-height:1.8
}

.toast.show {
  transform:translate(-50%,0);
  opacity:1
}

dialog {
  background:#181614f5;
  border:0;
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  color:white;
  margin:0;
  padding:60px 65px 65px;
  overflow:hidden
}

dialog::backdrop {
  background:#161412e8
}

dialog[open] {
  display:flex;
  align-items:center;
  justify-content:center
}

#lightbox-image {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain
}

.close-lightbox {
  position:absolute;
  right:20px;
  top:14px;
  font-size:36px;
  width:46px;
  height:46px
}

.lightbox-prev,.lightbox-next {
  position:absolute;
  top:48%;
  font-size:22px;
  width:44px;
  height:60px
}

.lightbox-prev {
  left:10px
}

.lightbox-next {
  right:10px
}

#lightbox-caption {
  position:absolute;
  bottom:22px;
  font-size:12px;
  text-align:center;
  padding:0 20px
}

.js .reveal {
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1s ease,transform 1s ease
}

.js .reveal.visible {
  opacity:1;
  transform:translateY(0)
}

.js .window.reveal {
  clip-path:inset(30% 0 0);
  transition:opacity 1.4s,transform 1.4s,clip-path 1.6s
}

.js .window.visible {
  clip-path:inset(0)
}

.js .red-portrait.reveal {
  transform:translateX(-45px);
  transition:transform 1.3s,opacity 1.3s
}

.js .red-pair .reveal {
  transform:translateX(45px);
  transition:transform 1.3s,opacity 1.3s
}

.js .red-gallery .visible {
  transform:translateX(0)
}

.js .polaroid.reveal {
  transform:translateY(18px) rotate(var(--tilt))
}

.js .polaroid.visible {
  transform:rotate(var(--tilt));
  animation:polaroid-sway 9.5s ease-in-out 1s infinite
}

.js .polaroid:nth-child(2).visible {
  animation-delay:1.55s
}

.js .polaroid:nth-child(3).visible {
  animation-delay:1.25s
}

.js .polaroid:nth-child(4).visible {
  animation-delay:1.8s
}

@keyframes breathe {
  from {
    transform:scale(1)
  }
  to {
    transform:scale(1.07)
  }
}

@keyframes polaroid-sway {
  0%,100% {
    transform:translateY(0) rotate(var(--tilt))
  }
  50% {
    transform:translateY(-7px) rotate(calc(var(--tilt) + .6deg))
  }
}

.motion-off * {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

.motion-off .reveal {
  opacity:1!important;
  transform:none!important;
  clip-path:none!important
}

.motion-off .polaroid.reveal,.motion-off .polaroid.visible {
  transform:rotate(var(--tilt))!important
}

@media(min-width:1600px) {
  .hero {
    padding-left:90px;
    padding-right:90px
  }
  .scene {
    padding-left:calc((100vw - 1180px)/2);
    padding-right:calc((100vw - 1180px)/2)
  }
  .green-scene {
    padding-right:0
  }
}

@media(max-width:900px) {
  .hero {
    padding:45px 7% 50px;
    gap:7%
  }
  .hero-en {
    font-size:18px
  }
  .couple {
    font-size:21px;
    letter-spacing:2px
  }
  .date-seal {
    height:90px;
    width:90px;
    right:-12px
  }
  .date-seal strong {
    font-size:35px
  }
  .scene {
    padding:80px 7%
  }
  .palace-grid {
    gap:20px;
    grid-template-columns:1fr 1fr
  }
  .palace-close {
    grid-column:1/-1;
    width:55%;
    margin:25px auto 0
  }
  .palace-close p {
    font-size:16px
  }
  .polaroids {
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    margin:50px 5% 20px
  }
  .polaroid:nth-child(4) {
    margin-top:20px
  }
  .gold-scene {
    gap:8%;
    grid-template-columns:.9fr 1fr
  }
  .gold-copy .eyebrow {
    font-size:8px
  }
  .event-card {
    gap:30px
  }
  .event-date {
    padding-right:25px
  }
  .event-date strong {
    font-size:62px
  }
  .event-actions {
    gap:16px
  }
  .green-scene {
    padding-right:0
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-top:20px
  }
  .topbar {
    height:60px;
    margin:0 6%
  }
  .monogram {
    font-size:24px
  }
  .top-date {
    font-size:8px;
    letter-spacing:1.3px
  }
  .top-invite {
    font-size:10px;
    letter-spacing:1px
  }
  .top-invite span {
    margin-left:2px
  }
  .hero {
    padding:38px 8% 38px;
    grid-template-columns:1fr;
    gap:38px;
    text-align:center;
    min-height:auto
  }
  .hero-copy .eyebrow {
    font-size:8px;
    letter-spacing:2px
  }
  .little-rule {
    margin:17px auto 16px;
    width:24px
  }
  h1 {
    font-size:47px;
    line-height:1.32;
    letter-spacing:6px
  }
  h1 br {
    display:none
  }
  .hero-en {
    font-size:17px;
    margin-top:14px
  }
  .couple {
    font-size:24px;
    letter-spacing:3px;
    margin:22px 0 0
  }
  .intro {
    display:none
  }
  .hero .primary {
    margin-top:23px;
    padding:13px 20px;
    min-height:44px;
    font-size:11px
  }
  .hero-bottom {
    margin-top:20px;
    gap:7px;
    font-size:9px;
    letter-spacing:1px
  }
  .hero-visual {
    padding:0 17px 20px;
    width:89%;
    margin:auto;
    grid-row:2
  }
  .hero-arch {
    outline-offset:7px;
    aspect-ratio: .77
  }
  .vertical-note {
    right:-13px;
    top:75px;
    font-size:10px;
    letter-spacing:3px
  }
  .date-seal {
    right:-15px;
    bottom:28px;
    width:85px;
    height:85px
  }
  .date-seal strong {
    font-size:34px
  }
  .date-seal small {
    font-size:7px
  }
  .photo-note {
    font-size:6px;
    letter-spacing:1.6px;
    margin-top:18px
  }
  .chapter-intro {
    padding:58px 7% 20px
  }
  .chapter-intro .eyebrow {
    font-size:8px;
    letter-spacing:1.8px
  }
  .chapter-intro h2 {
    font-size:24px;
    letter-spacing:2px;
    margin:22px 0 18px
  }
  .chapter-intro p {
    font-size:11px
  }
  .chapters {
    gap:18px 24px;
    margin-top:30px
  }
  .chapters a {
    font-size:10px
  }
  .scene {
    padding:64px 7%
  }
  .section-heading .eyebrow {
    font-size:8px;
    letter-spacing:1.8px
  }
  .section-heading h2 {
    font-size:30px;
    letter-spacing:2px;
    margin:16px 0
  }
  .section-heading p {
    font-size:11px;
    letter-spacing:.7px
  }
  .editorial {
    gap:15px;
    margin:30px 0 0
  }
  .white-main {
    width:108%
  }
  .white-side {
    padding:50px 0 0 7px
  }
  .white-side>.white-detail {
    width:80%;
    margin-left:20%
  }
  .handwriting {
    font-size:24px;
    left:-67%;
    bottom:8%
  }
  .palace-grid {
    gap:16px;
    margin-top:30px
  }
  .window.second {
    margin-top:50px
  }
  .window figcaption {
    font-size:11px;
    letter-spacing:4px;
    margin-top:18px
  }
  .palace-close {
    width:75%;
    margin-top:17px
  }
  .palace-close p {
    font-size:14px;
    line-height:1.9;
    margin-top:20px
  }
  .gold-scene {
    display:flex;
    flex-direction:column;
    gap:38px;
    align-items:stretch;
    padding:60px 10%
  }
  .gold-copy h2 {
    font-size:33px;
    margin:20px 0 16px
  }
  .gold-copy h2 br {
    display:none
  }
  .gold-copy p {
    font-size:11px
  }
  .gold-copy p br {
    display:none
  }
  .slide-controls {
    margin-top:22px;
    gap:16px
  }
  .slide-controls button {
    width:40px;
    height:40px
  }
  .gold-frame {
    margin:0 3px
  }
  .green-scene {
    padding-right:0
  }
  .film {
    gap:16px;
    padding-top:28px
  }
  .film figure {
    flex-basis:70%;
    min-width:0
  }
  .film figcaption {
    font-size:12px
  }
  .polaroids {
    gap:27px 15px;
    margin:42px 0 10px
  }
  .polaroid {
    padding:7px 7px 0
  }
  .polaroid figcaption {
    font-size:10px;
    letter-spacing:.3px;
    padding:17px 0
  }
  .polaroid:nth-child(2) {
    margin-top:45px
  }
  .polaroid:nth-child(4) {
    margin-top:25px
  }
  .pink-scene:before {
    font-size:220px;
    top:-75px;
    right:-60px
  }
  .red-scene {
    padding:60px 10%
  }
  .red-scene:before {
    inset:13px
  }
  .red-scene:after {
    inset:18px
  }
  .red-title .eyebrow {
    font-size:7px;
    letter-spacing:1.5px
  }
  .double-happiness {
    font-size:88px
  }
  .red-title h2 {
    font-size:23px;
    letter-spacing:2px
  }
  .red-title p {
    font-size:11px;
    letter-spacing:3px
  }
  .red-gallery {
    display:block;
    margin:36px 4% 0
  }
  .red-portrait {
    width:80%;
    margin:auto
  }
  .red-pair {
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:28px
  }
  .red-pair .photo {
    aspect-ratio:1;
    object-fit:cover
  }
  .red-gallery figure {
    outline-offset:4px
  }
  .red-footer {
    font-size:11px;
    letter-spacing:4px;
    margin-top:30px
  }
  .invitation {
    padding:70px 7% 65px
  }
  .invitation>.eyebrow {
    font-size:7px;
    letter-spacing:1.6px
  }
  .invitation h2 {
    font-size:34px;
    letter-spacing:3px;
    margin-top:23px
  }
  .invite-message {
    font-size:12px;
    letter-spacing:1px;
    margin:23px 0 32px
  }
  .event-card {
    display:block;
    padding:28px 0;
    text-align:center
  }
  .event-date {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:0 0 26px
  }
  .event-date strong {
    font-size:78px;
    margin:10px 0
  }
  .event-date p {
    font-size:16px
  }
  .event-place {
    padding-top:30px
  }
  .event-place h3 {
    font-size:34px;
    margin:13px 0
  }
  .event-place p {
    font-size:11px;
    line-height:2.2
  }
  .venue-route {
    justify-content:center
  }
  .event-actions {
    justify-content:center;
    gap:22px
  }
  .closing-actions {
    gap:26px;
    margin-top:18px
  }
  .closing-actions button {
    font-size:10px
  }
  .closing {
    margin-top:46px;
    font-size:15px;
    letter-spacing:2px
  }
  .signature {
    font-size:22px;
    letter-spacing:2px;
    margin-top:25px
  }
  .signature em {
    font-size:24px;
    padding:0 8px
  }
  .final-date {
    font-size:8px;
    margin-top:17px
  }
  footer {
    margin:0 7%;
    padding:18px 0 100px;
    font-size:9px
  }
  footer>a {
    font-size:18px
  }
  .mobile-dock {
    position:fixed;
    z-index:20;
    bottom:max(14px,env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    display:flex;
    width:min(320px,84%);
    border:1px solid #bfae9750;
    background:#faf5edee;
    backdrop-filter:blur(16px);
    box-shadow:0 5px 26px #33231a20;
    border-radius:3px;
    overflow:hidden
  }
  .mobile-dock a {
    flex:1;
    text-align:center;
    padding:15px 10px;
    font-size:11px;
    letter-spacing:1.5px
  }
  .mobile-dock a:last-child {
    background:var(--wine);
    color:#fff4df
  }
  .mobile-dock span {
    margin-left:12px
  }
  dialog {
    padding:68px 14px 90px
  }
  .lightbox-prev,.lightbox-next {
    top:auto;
    bottom:25px
  }
  .lightbox-prev {
    left:25px
  }
  .lightbox-next {
    right:25px
  }
  #lightbox-caption {
    bottom:42px;
    font-size:9px;
    max-width:65%;
    line-height:1.6
  }
}

@media(max-width:600px) {
  h1 br,.gold-copy h2 br {
    display:block
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .js .reveal {
    opacity:1;
    transform:none;
    clip-path:none
  }
  .js .polaroid.reveal,.js .polaroid.visible {
    transform:rotate(var(--tilt))
  }
}