:root {
  --ivory: #FBF9F3;
  --paper: #FFFDF8;
  --soft: #DCE7D6;
  --sage: #A9BFA3;
  --forest: #2F4A3A;
  --ink: #2B3A31;
  --gold: #B9975B;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --shadow: 0 18px 40px -18px rgba(47, 74, 58, .4)
}

* {
  box-sizing: border-box;
  margin: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--ink);
  overflow-x: hidden;
  background: radial-gradient(circle at 20% 0, #fff, var(--ivory) 45%, #EEF3E9)
}

body.locked {
  overflow: hidden
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px
}

h2.script,
.names,
h1 i {
  font-family: var(--script);
  font-weight: 400
}

h2.script {
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  color: var(--forest);
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.2
}

section {
  padding: 5rem 1.5rem;
  max-width: 1000px;
  margin: auto;
  position: relative
}

.sprig {
  width: 140px;
  height: 46px;
  color: var(--sage);
  display: block;
  margin: 0 auto
}

.btn {
  font: inherit;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .95rem;
  padding: .9rem 2.2rem;
  min-height: 48px;
  color: var(--forest);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 99px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .4s, color .4s, box-shadow .4s
}

.btn:hover {
  background: var(--forest);
  color: var(--ivory);
  box-shadow: 0 0 24px rgba(185, 151, 91, .5)
}

.btn:disabled {
  opacity: .6;
  cursor: wait
}

/* particles: petals + fireflies */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 50
}

.particles span {
  position: absolute;
  top: -5%;
  border-radius: 50%;
  background: radial-gradient(#fff, rgba(185, 151, 91, .5));
  animation: fall linear infinite;
  opacity: 0
}

.particles .petal {
  border-radius: 70% 0 70% 0;
  background: linear-gradient(135deg, #fff, #DCE7D6);
  box-shadow: 0 0 6px #fff
}

.particles .fly {
  top: auto;
  animation: fly ease-in-out infinite;
  box-shadow: 0 0 12px 4px rgba(255, 220, 130, .7);
  background: #fff6cf
}

@keyframes fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
    opacity: 0
  }

  10% {
    opacity: .9
  }

  90% {
    opacity: .7
  }

  100% {
    transform: translate3d(var(--dx), 108vh, 0) rotate(360deg);
    opacity: 0
  }
}

@keyframes fly {

  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0
  }

  25% {
    opacity: .9
  }

  50% {
    transform: translate(var(--dx), -60px);
    opacity: .2
  }

  75% {
    opacity: 1
  }
}

/* ===== DOOR INTRO ===== */
.intro {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background: radial-gradient(circle at 50% 60%, #fff, var(--soft) 70%, #C9DAC1);
  transition: opacity 1.6s ease, visibility 0s 1.7s
}

.intro-hint {
  font-style: italic;
  font-size: 1.5rem;
  color: var(--forest);
  animation: glow 3s ease-in-out infinite
}

@keyframes glow {
  50% {
    text-shadow: 0 0 18px rgba(185, 151, 91, .7)
  }
}

.door-wrap {
  position: relative;
  width: min(74vw, 330px);
  height: min(56vh, 480px);
  perspective: 1100px;
  transition: transform 2.4s cubic-bezier(.6, 0, .3, 1)
}

.ivy {
  position: absolute;
  top: -26px;
  left: -12%;
  right: -12%;
  z-index: 5;
  pointer-events: none
}

.ivy .sprig {
  width: 100%;
  height: auto
}

.door {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #f3ede0;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  box-shadow: 0 0 0 10px #E9E1CE, 0 0 0 12px var(--gold), var(--shadow)
}

.door>* {
  position: absolute;
  display: block
}

.beyond {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--forest);
  background: radial-gradient(circle at 50% 55%, #fffbe8, #DCE9D2 60%, #9FBE98)
}

.beyond em {
  font-family: var(--script);
  font-size: clamp(2rem, 9vw, 2.8rem);
  font-style: normal;
  position: relative;
  line-height: 1.2
}

.beyond small {
  font-style: italic;
  letter-spacing: .05em;
  position: relative
}

.sun {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(#fff7d6, transparent 65%);
  animation: glow 4s infinite
}

.panel {
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, #3d5e4a, #2F4A3A);
  z-index: 2;
  transition: transform 2s cubic-bezier(.5, 0, .2, 1);
  box-shadow: inset 0 0 0 3px rgba(185, 151, 91, .5)
}

.panel.left {
  left: 0;
  transform-origin: left center;
  border-radius: 999px 0 0 0
}

.panel.right {
  right: 0;
  transform-origin: right center;
  border-radius: 0 999px 0 0
}

.inset {
  inset: 14% 12% 8%;
  border: 1px solid rgba(185, 151, 91, .6);
  border-radius: 60px 60px 4px 4px;
  position: absolute;
  background: linear-gradient(rgba(255, 255, 255, .06), transparent)
}

.knob {
  top: 56%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6e3b0, var(--gold));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4)
}

.left .knob {
  right: 10px
}

.right .knob {
  left: 10px
}

.plaque {
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--script);
  font-size: 1.5rem;
  color: #F7EBCB;
  padding: .1rem 1rem;
  border: 1px solid var(--gold);
  border-radius: 99px;
  background: rgba(47, 74, 58, .85);
  transition: opacity .6s
}

.door:hover .panel.left,
.door:focus-visible .panel.left {
  transform: rotateY(8deg)
}

.door:hover .panel.right,
.door:focus-visible .panel.right {
  transform: rotateY(-8deg)
}

.door.open .panel.left {
  transform: rotateY(104deg)
}

.door.open .panel.right {
  transform: rotateY(-104deg)
}

.door.open .plaque {
  opacity: 0
}

.intro.go .door-wrap {
  transform: scale(7) translateY(6%)
}

.intro.go .btn,
.intro.go .intro-hint {
  opacity: 0;
  transition: opacity .5s
}

.intro.reveal {
  opacity: 0;
  visibility: hidden
}

.music {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  padding: 5px;
  background: var(--forest);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 5px 20px rgba(47, 74, 58, .35);
  transition: transform .25s, box-shadow .25s
}

.music[hidden] {
  display: none
}

.music:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(47, 74, 58, .45)
}

.record {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #30312e 0 2px, #454641 3px 4px, #30312e 5px 6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2)
}

.record-label {
  position: absolute;
  display: block;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0 12%, #f1dfb1 14% 22%, #9b7542 24% 100%);
  border: 1px solid rgba(255, 255, 255, .5)
}

.record-label::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 3px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--forest)
}

.music[aria-pressed="true"] .record {
  animation: record-spin 2.4s linear infinite
}

@keyframes record-spin {
  to {
    transform: rotate(360deg)
  }
}

@media(prefers-reduced-motion: reduce) {
  .music[aria-pressed="true"] .record {
    animation-duration: 8s
  }
}

main {
  opacity: 0;
  transform: scale(.97);
  transition: opacity 1.8s ease, transform 1.8s ease
}

main.shown {
  opacity: 1;
  transform: none
}

.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: var(--d, 0s)
}

.rv.in {
  opacity: 1;
  transform: none
}

/* ===== Photo slots: graceful fallback when image is missing ===== */
img[data-src] {
  cursor: zoom-in
}

.ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, .7) 0 8%, transparent 9%),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, .45) 0 12%, transparent 13%),
    linear-gradient(145deg, var(--soft), var(--sage))
}

.ph::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 0 45% 0;
  text-align: center;
  font-family: var(--script);
  font-size: 1.6rem;
  color: var(--forest);
  opacity: .55
}

.ph.has-img::after {
  display: none
}

.ph img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.ph img:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px
}

.image-preview {
  position: fixed;
  width: min(92vw, 1100px);
  max-width: none;
  max-height: 92vh;
  padding: 3.5rem 1rem 1rem;
  border: 1px solid rgba(185, 151, 91, .65);
  border-radius: 12px;
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35)
}

.image-preview::backdrop {
  background: rgba(20, 28, 23, .82);
  backdrop-filter: blur(4px)
}

.image-preview img {
  display: block;
  width: 100%;
  max-height: calc(92vh - 7rem);
  object-fit: contain
}

.image-preview p {
  padding-top: .5rem;
  text-align: center;
  font-size: 1rem
}

.image-preview-close {
  position: absolute;
  top: .5rem;
  right: .75rem;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--paper);
  color: var(--forest);
  font: inherit;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer
}

.polaroid {
  background-color: var(--paper);
  padding: 10px 10px 0;
  box-shadow: var(--shadow);
  border: 1px solid rgba(185, 151, 91, .3);
  transform: rotate(var(--r, -3deg));
  transition: transform .5s
}

.polaroid.rv.in {
  transform: rotate(var(--r, -3deg))
}

.polaroid:hover,
.polaroid.rv.in:hover {
  transform: rotate(0) scale(1.04);
  z-index: 3
}

.polaroid {
  background-image: none
}

.polaroid::after {
  inset: 10px 10px auto;
  height: calc(100% - 66px);
  padding-top: 35%
}

.polaroid img {
  aspect-ratio: 1;
  height: auto
}

.polaroid figcaption {
  text-align: center;
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--forest);
  padding: .5rem 0
}

.polaroid {
  --bg: 1
}

.polaroid::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 70px;
  height: 22px;
  margin-left: -35px;
  background: rgba(185, 151, 91, .35);
  transform: rotate(-3deg);
  z-index: 2
}

/* ===== Hero ===== */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem 6rem;
  gap: .8rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#fff 0, var(--soft) 100%)
}

.hills i {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  border-radius: 50% 50% 0 0;
  animation: drift 14s ease-in-out infinite alternate
}

.hills i:nth-child(1) {
  height: 34%;
  background: #C5D6BD;
  opacity: .7
}

.hills i:nth-child(2) {
  height: 24%;
  background: var(--sage);
  opacity: .7;
  animation-delay: -4s;
  left: -30%
}

.hills i:nth-child(3) {
  height: 14%;
  background: var(--forest);
  opacity: .85;
  animation-delay: -8s;
  right: -30%
}

@keyframes drift {
  to {
    transform: translateX(3%)
  }
}

.hero>*:not(.hills) {
  position: relative;
  z-index: 1
}

.hero p {
  font-style: italic;
  letter-spacing: .05em
}

.hero h1 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(2.4rem, 11vw, 5.6rem);
  color: var(--forest);
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 0 30px #fff
}

.hero h1 i {
  text-transform: none;
  color: var(--gold);
  font-size: .6em;
  letter-spacing: 0;
  animation: glow 4s infinite
}

.hero .date {
  font-style: normal;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  border-block: 1px solid var(--gold);
  padding: .4rem 1.2rem
}

.hero .btn {
  background: rgba(255, 253, 248, .8)
}

.scroll {
  position: absolute !important;
  bottom: 5rem;
  left: 50%;
  width: 24px;
  height: 40px;
  margin-left: -12px;
  border: 1px solid var(--paper);
  border-radius: 99px
}

.scroll span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  background: var(--paper);
  border-radius: 4px;
  animation: dot 2s infinite
}

@keyframes dot {
  to {
    transform: translateY(14px);
    opacity: 0
  }
}

/* ===== Couple ===== */
.photo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  max-width: 1100px
}

.frame {
  position: relative;
  width: min(70vw, 380px);
  flex: none;
  aspect-ratio: 4/5;
  border-radius: 50% 50% 12px 12px/32% 32% 12px 12px;
  background: linear-gradient(160deg, var(--soft), var(--sage));
  border: 6px solid var(--paper);
  box-shadow: var(--shadow), 0 0 0 1px var(--gold)
}

.frame::before {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid var(--gold);
  border-radius: inherit;
  transform: rotate(-2deg);
  opacity: .6
}

.frame::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  box-shadow: 0 0 50px rgba(185, 151, 91, .35);
  pointer-events: none
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  will-change: transform
}

.leaf {
  position: absolute;
  width: 46px;
  height: 24px;
  background: var(--sage);
  border-radius: 0 100% 0 100%;
  animation: sway 6s ease-in-out infinite
}

.l1 {
  left: -22px;
  top: 20%
}

.l2 {
  right: -24px;
  top: 42%;
  animation-delay: -2s;
  background: var(--forest)
}

.l3 {
  left: -14px;
  bottom: 14%;
  animation-delay: -4s
}

@keyframes sway {
  50% {
    transform: rotate(18deg) translateY(-8px)
  }
}

.side {
  width: 200px;
  flex: none;
  --r: -6deg
}

.side.b {
  --r: 5deg
}

@media(max-width:820px) {
  .side {
    display: none
  }
}

/* ===== Story ===== */
.story {
  isolation: isolate
}

.story::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: rgba(255, 253, 248, .62);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(185, 151, 91, .08), transparent 32%),
    repeating-linear-gradient(45deg, rgba(47, 74, 58, .025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(185, 151, 91, .025) 0 1px, transparent 1px 5px)
}

.path {
  list-style: none;
  padding: 0;
  position: relative
}

.path::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(var(--gold), var(--sage))
}

.path li {
  position: relative;
  padding: 0 0 3rem 3rem
}

.path li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: .5rem;
  width: 15px;
  height: 15px;
  border-radius: 50% 0 50% 0;
  background: var(--sage);
  box-shadow: 0 0 0 4px var(--paper), 0 0 12px rgba(185, 151, 91, .6)
}

.thumb {
  width: min(100%, 260px);
  aspect-ratio: 3/2;
  border-radius: 80px 8px 80px 8px;
  border: 4px solid var(--paper);
  box-shadow: var(--shadow);
  margin-bottom: .8rem
}

.path h3,
.detail-grid h3 {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--forest)
}

.path li:nth-child(even) .thumb {
  border-radius: 8px 80px 8px 80px
}

/* ===== Ribbon ===== */
.ribbon {
  overflow: hidden;
  background: var(--forest);
  color: var(--ivory);
  padding: .7rem 0;
  white-space: nowrap;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .95rem;
  transform: rotate(-1.2deg);
  margin: 2rem -2%;
  border-block: 2px solid var(--gold)
}

.ribbon div {
  display: inline-block;
  animation: slide 30s linear infinite
}

@keyframes slide {
  to {
    transform: translateX(-50%)
  }
}

/* ===== Countdown ===== */
.clock {
  display: flex;
  justify-content: center;
  gap: clamp(.4rem, 2.5vw, 1.5rem);
  flex-wrap: wrap
}

.clock div {
  width: clamp(62px, 17vw, 120px);
  padding: 1rem .2rem;
  text-align: center;
  background: var(--paper);
  border: 1px solid rgba(185, 151, 91, .5);
  border-radius: 50px 50px 8px 8px;
  box-shadow: var(--shadow)
}

.clock b {
  display: block;
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 400;
  color: var(--forest);
  font-variant-numeric: tabular-nums
}

.clock b.tick {
  animation: tick .5s
}

@keyframes tick {
  from {
    transform: translateY(-8px);
    opacity: .2
  }
}

.clock span {
  font-size: clamp(.6rem, 2.4vw, .8rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold)
}

.today {
  font-family: var(--script);
  font-size: 3rem;
  color: var(--forest);
  text-align: center
}

/* ===== Details ===== */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem 1.5rem;
  text-align: center
}

.detail-grid svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: .4rem
}

.detail-grid article {
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--gold);
  background: linear-gradient(var(--paper), transparent)
}

/* ===== Moments ===== */
.scatter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1.5rem
}

.scatter .polaroid {
  width: min(44%, 230px)
}

.scatter .polaroid:nth-child(2) {
  --r: 4deg;
  margin-top: 2rem
}

.scatter .polaroid:nth-child(3) {
  --r: -5deg
}

.scatter .polaroid:nth-child(4) {
  --r: 3deg;
  margin-top: 1.5rem
}

.scatter .polaroid:nth-child(5) {
  --r: -2deg
}

/* ===== Day timeline ===== */
.hours {
  list-style: none;
  padding: 0 0 0 1.8rem;
  border-left: 1px solid var(--gold);
  display: grid;
  gap: 1.4rem
}

.hours li {
  position: relative;
  display: flex;
  flex-direction: column
}

.hours li::before {
  content: "";
  position: absolute;
  left: calc(-1.8rem - 5px);
  top: .6rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold)
}

.hours time {
  color: var(--gold);
  letter-spacing: .14em
}

.hours span {
  font-size: 1.5rem;
  color: var(--forest)
}

@media(min-width:800px) {
  .hours {
    grid-template-columns: repeat(6, 1fr);
    border: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--gold);
    gap: .5rem;
    text-align: center
  }

  .hours li::before {
    left: 50%;
    top: -1.95rem;
    margin-left: -5px
  }

  .hours span {
    font-size: 1.2rem
  }

  .path::before {
    left: 50%
  }

  .path li {
    width: 50%;
    padding: 0 3rem 3rem 0;
    text-align: right
  }

  .path li .thumb {
    margin-left: auto
  }

  .path li:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 3rem 3rem;
    text-align: left
  }

  .path li:nth-child(even) .thumb {
    margin-left: 0
  }

  .path li::before {
    left: auto;
    right: -8px
  }

  .path li:nth-child(even)::before {
    left: -8px;
    right: auto
  }
}

/* ===== Banner ===== */
.banner {
  max-width: none;
  min-height: 60vh;
  padding: 0;
  display: grid;
  place-items: center;
  margin-block: 3rem
}

.banner img {
  position: absolute;
  inset: 0;
  filter: brightness(.7)
}

.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(rgba(47, 74, 58, .35), rgba(47, 74, 58, .55))
}

.banner blockquote {
  position: relative;
  z-index: 3;
  color: #fff;
  text-align: center;
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-style: italic;
  max-width: 760px;
  padding: 2rem 1.5rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .4)
}

.banner cite {
  display: block;
  font-size: 1.1rem;
  font-family: var(--script);
  margin-top: .6rem;
  color: #F7EBCB
}

/* ===== Attire ===== */
.attire {
  text-align: center
}

.code {
  font-size: 1.8rem;
  font-style: italic;
  color: var(--forest);
  margin-bottom: 1rem
}

.swatches {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem
}

.swatches li {
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem
}

.swatches i {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--c);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--gold), var(--shadow);
  transition: transform .4s
}

.swatches i:hover {
  transform: scale(1.12) rotate(8deg)
}

.sub {
  font-family: var(--script);
  font-weight: 400;
  font-size: 2rem;
  color: var(--gold);
  margin: 2.5rem 0 1rem
}

.outfits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem
}

@media(max-width:600px) {
  .outfits {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .outfits figure:nth-child(3) {
    grid-column: 1 / -1;
    width: min(100%, 260px);
    justify-self: center
  }
}

.outfits figure {
  padding: 1.2rem .8rem;
  background: var(--paper);
  border: 1px solid rgba(185, 151, 91, .4);
  border-radius: 90px 90px 10px 10px;
  box-shadow: var(--shadow);
  transition: transform .4s
}

.outfits figure:hover {
  transform: translateY(-6px)
}

.outfits svg {
  width: 70px;
  height: 140px;
  display: block;
  margin: 0 auto .6rem
}

.outfits figcaption {
  font-size: .95rem;
  line-height: 1.3
}

.outfits b {
  display: block;
  color: var(--forest);
  font-size: 1.15rem
}

.note {
  font-style: italic;
  margin-top: 2rem;
  color: var(--forest)
}

/* ===== Notes (accordion) ===== */
.notes>div {
  max-width: 640px;
  margin: auto
}

details {
  border-bottom: 1px solid rgba(185, 151, 91, .5);
  padding: .9rem 0
}

summary {
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--forest);
  list-style: none;
  display: flex;
  justify-content: space-between;
  min-height: 44px;
  align-items: center
}

summary::after {
  content: "+";
  color: var(--gold);
  font-size: 1.6rem;
  transition: transform .3s
}

details[open] summary::after {
  transform: rotate(45deg)
}

summary::-webkit-details-marker {
  display: none
}

details p {
  padding: .3rem 0 .6rem
}

/* ===== RSVP ===== */
.paper {
  max-width: 560px;
  margin: auto;
  padding: 2rem 1.5rem;
  background: var(--paper);
  border: 1px solid rgba(185, 151, 91, .5);
  border-radius: 6px;
  box-shadow: var(--shadow), inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(185, 151, 91, .35);
  display: grid;
  gap: 1.1rem
}

.paper label,
.paper legend {
  display: grid;
  gap: .2rem;
  font-size: 1rem;
  color: var(--forest);
  letter-spacing: .06em
}

.paper input:not([type=radio]),
.paper select,
.paper textarea {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sage);
  padding: .5rem .2rem;
  min-height: 44px;
  border-radius: 0;
  width: 100%
}

.paper input:focus,
.paper select:focus,
.paper textarea:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 2px 0 var(--gold)
}

.paper fieldset {
  border: 0;
  padding: 0;
  display: grid;
  gap: .6rem
}

.choice {
  display: block !important
}

.choice input {
  position: absolute;
  opacity: 0
}

.choice span {
  display: block;
  text-align: center;
  padding: .7rem;
  border: 1px solid var(--sage);
  border-radius: 99px;
  cursor: pointer;
  transition: .3s
}

.choice input:checked+span {
  background: var(--forest);
  color: var(--ivory);
  border-color: var(--forest)
}

.choice input:focus-visible+span {
  outline: 2px solid var(--gold);
  outline-offset: 3px
}

.paper .invalid {
  border-color: #a24a4a !important
}

.status {
  min-height: 1.4em;
  text-align: center;
  font-size: 1rem;
  color: #a24a4a
}

.paper .btn {
  justify-self: center
}

.thanks {
  text-align: center;
  font-family: var(--script);
  font-size: 2.2rem;
  color: var(--forest);
  padding: 3rem 1rem
}

.thanks svg {
  width: 70px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw 1.2s .2s forwards
}

@keyframes draw {
  to {
    stroke-dashoffset: 0
  }
}

/* ===== Place / closing / footer ===== */
.place {
  text-align: center
}

.place p {
  margin-bottom: 1.5rem
}

.closing {
  text-align: center;
  padding-block: 6rem 7rem;
  max-width: none;
  background: linear-gradient(transparent, var(--soft) 80%)
}

.polaroid.round {
  width: min(70vw, 240px);
  margin: 0 auto 2.5rem
}

.polaroid.round img {
  border-radius: 50%
}

.big {
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-style: italic;
  color: var(--forest);
  margin-bottom: .5rem
}

.names {
  font-size: clamp(3rem, 13vw, 6rem);
  color: var(--forest);
  margin-top: 1.5rem;
  text-shadow: 0 0 30px rgba(185, 151, 91, .5)
}

footer {
  background: var(--forest);
  color: var(--ivory);
  text-align: center;
  padding: 2.5rem 1rem;
  display: grid;
  gap: .2rem;
  letter-spacing: .14em
}

footer strong {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.3rem
}

footer em {
  color: var(--gold)
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important
  }

  .particles {
    display: none
  }

  .rv {
    opacity: 1;
    transform: none
  }

  .ribbon div {
    display: block;
    overflow: hidden
  }
}