/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --ivory:      #F8F4EE;
  --cream:      #EDE7DC;
  --parchment:  #E4DDD0;
  --champagne:  #C9B89A;
  --gold:       #A8905E;
  --gold-light: #D4C4A8;
  --sage:       #8A9E7E;
  --olive:      #6B7A5A;
  --taupe:      #8C7B70;
  --espresso:   #3D2B1F;
  --text:       #4A3728;
  --text-light: #7A6A5E;

  --ff-serif:   'Cormorant Garamond', Georgia, serif;
  --ff-script:  'Great Vibes', cursive;
  --ff-sans:    'Jost', system-ui, sans-serif;

  --ease-silk:  cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  --section-pad: clamp(72px, 12vw, 120px);
  --container:   min(100%, 520px);
  --torn-edge:   url("../img/torn-paper-edge.png");
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ivory);
  color: var(--text);
  font-family: var(--ff-sans);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════
   CANVAS PARTICLES
═══════════════════════════════════════════ */
#particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.container {
  width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.section {
  position: relative;
  z-index: 1;
  padding: var(--section-pad) 0;
}

.section--tinted {
  background: var(--cream);
  overflow: visible;
}

/* ── Torn paper shared base ──────────────────── */
.section--tinted::before,
.section--tinted::after,
.section--location::before,
.section--location::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 54px;
  z-index: 5;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* DRESSCODE top torn edge */
#dresscode::before {
  top: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDU0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCwwIEwwLDM4IEwxMywzNyBMMTQsNyBMMjAsOSBMNDUsMzcgTDY2LDM1IEw3MSw0MiBMMTAwLDIxIEwxMjksNDEgTDEzNSw3IEwxMzYsNDUgTDE0NSw0MSBMMTM1LDcgTDE1OCwxNiBMMTczLDQgTDE4MiwyNiBMMTk0LDMyIEwyMjcsMTcgTDI0NCw0IEwzMDksMTQgTDMxNSwzOSBMMzMwLDUgTDM0MSw0NCBMMzcxLDEyIEwzNzIsMTAgTDM5Myw2IEwzOTYsNDYgTDM5OSw0MiBMNDI3LDE2IEw0MzQsNSBMNDM1LDMxIEw0NDAsNDEgTDQ0NCw0IEw0NTUsMzAgTDQ3MCw0MCBMNDkwLDIyIEw1MjMsMjcgTDUzNywzOCBMNTQ4LDEyIEw1NjksMTQgTDU5MSwzMSBMNjI0LDI2IEw2MzgsMjUgTDY2OCwxNiBMNjczLDQ0IEw2NzQsMTQgTDcwOCwzMiBMNzA5LDQyIEw3MzUsMTkgTDczNyw0IEw3NDMsMTEgTDc1MSw0IEw3NjAsOCBMNzc3LDcgTDgwOSwxNyBMODI4LDE4IEw4MjksMjEgTDg1NywzMSBMODY1LDMyIEw4NjcsMzIgTDg4MSwxOCBMODg1LDMxIEw4OTcsMjYgTDkwNiw3IEw5MTIsMjYgTDk1MSwxNiBMOTU3LDMyIEw5NTgsMzQgTDk2NywxMiBMOTc0LDIxIEw5OTUsMjIgTDEwMjEsMTUgTDEwMzIsNCBMMTA0Niw0IEwxMDg3LDQ2IEwxMDk1LDM1IEwxMDk2LDIxIEwxMTAxLDMxIEwxMTA1LDEzIEwxMTU2LDMzIEwxMTY2LDQ0IEwxMTc5LDM2IEwxMTkxLDIyIEwxMjMzLDQ2IEwxMjQwLDQzIEwxMjUwLDQgTDEyODAsMjAgTDEzMDYsMjIgTDEzMzYsMTQgTDEzMzcsMjkgTDEzNTksOCBMMTM2MiwzNSBMMTM3MCw0MCBMMTM4NSw0IEwxMzkzLDMzIEwxNDAwLDEzIEwxNDAzLDMwIEwxNDE2LDMyIEwxNDE5LDQ1IEwxNDM4LDM3IEwxNDQwLDE2IEwxNDQwLDAgWiIgZmlsbD0iI0Y4RjRFRSIvPjwvc3ZnPg==");
}

/* DRESSCODE bottom torn edge */
#dresscode::after {
  bottom: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDU0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCw1NCBMMCwyNyBMMjQsMzEgTDMxLDIyIEw3NCwyMSBMNzYsNDEgTDgwLDkgTDk0LDM0IEwxMTYsMjEgTDExOCwzNSBMMTY2LDcgTDIwNSwyNCBMMjE2LDEwIEwyMjgsMzggTDI1NiwzMCBMMjYyLDQxIEwyNjMsMzggTDI2NCw0MCBMMzI0LDUgTDM0NiwxOSBMMzYzLDE4IEwzOTMsMjUgTDM5NCwzMiBMMzk5LDUgTDQwMiwyMCBMNDA2LDQ1IEw0MTMsNDMgTDQxNCwxMyBMNDM3LDIxIEw0NTIsMTIgTDQ4NywzMSBMNDkzLDQwIEw0OTcsNDUgTDUxMCw0NCBMNTE2LDkgTDUyMSwxMSBMNTM0LDIyIEw1NTUsMzcgTDU5MCw1IEw1OTksMTEgTDYxMiw0IEw2MjAsNDUgTDYzMiw0IEw2NTQsMTUgTDY2NSwzMCBMNjY4LDQ2IEw2NzAsMjggTDY4OSwzMCBMNzA3LDQyIEw3MDksMTkgTDcxNSw0MCBMNzE2LDQ0IEw3MTksMTUgTDczMywxMiBMNzc5LDYgTDc4NywyNiBMNzkwLDM0IEw3OTksMjcgTDgwMiwyNCBMODE2LDI2IEw4MjQsNyBMODM5LDM4IEw4NzIsMTIgTDg3Nyw0MyBMODkzLDMxIEw5MDcsMjYgTDkxNiw3IEw5MjUsMjkgTDk0Myw0NSBMOTUzLDE0IEw5NjEsMTEgTDk2NiwyOSBMOTc2LDI5IEwxMDA5LDggTDEwMTMsNDUgTDEwMjMsMzUgTDEwMzMsMTAgTDEwNjgsMjMgTDEwNzAsMTcgTDEwNzIsMTIgTDEwODEsMjkgTDExMzksMTEgTDExNjgsNSBMMTE3NCwxOCBMMTIwMywxMyBMMTIxOCw0MiBMMTI1MiwzOCBMMTI1NiwxNSBMMTI4NCw4IEwxMjkwLDQzIEwxMzE3LDQgTDEzMjEsNCBMMTMzMiwxNyBMMTMzNCw0MSBMMTM0MCwxNiBMMTM0Niw3IEwxMzY0LDQzIEwxMzg2LDM0IEwxMzg4LDM5IEwxNDEyLDQgTDE0NDAsNCBMMTQ0MCw1NCBaIiBmaWxsPSIjRjhGNEVFIi8+PC9zdmc+");
}

/* LOCATION top torn edge */
.section--location::before {
  top: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDU0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCwwIEwwLDMyIEw1LDkgTDksMTggTDQ0LDI0IEw1NiwyNCBMNTcsMjcgTDY1LDMxIEw2Niw0IEw3OSwyMyBMMTMwLDggTDE0OCwyNSBMMTQ5LDMyIEwxODEsMjQgTDE4OSw0MSBMMTkyLDQgTDIxOSw0MiBMMjIxLDIyIEwyNDksNCBMMjUyLDM3IEwyNjIsNDEgTDI3NywyMSBMMjgzLDEwIEwyODgsNDIgTDMwNSwzNSBMMzIyLDQyIEwzMjMsMjYgTDM0MCw0MSBMMzQ2LDI2IEwzNTcsNSBMMzc1LDMyIEwzOTMsOCBMMzk2LDM3IEw0MDAsMzggTDQyNiwzOSBMNDQxLDMwIEw0NzAsMzEgTDQ4NCw0MSBMNDkyLDQxIEw1MTAsMTIgTDUxMSwxNyBMNTE1LDM3IEw1MTYsMTMgTDUxOSwyOCBMNTI2LDM4IEw1MzAsMTEgTDU1NCw0NiBMNTU4LDE0IEw1NjQsOCBMNTc0LDMyIEw1OTQsMTMgTDYwMiwyNSBMNjYxLDM4IEw2NjQsOCBMNjkyLDMxIEw3MjIsMzYgTDc2OSwzOSBMODAyLDMxIEw4MTYsMjggTDg0MCwyMCBMODQ2LDM3IEw4ODMsMTAgTDk2OSw0MCBMOTkzLDE1IEwxMDEwLDkgTDEwMTEsMTMgTDEwMzIsMjUgTDEwNTMsMTkgTDEwNTgsNyBMMTA3MywzMSBMMTA3NywyMyBMMTA4MywzMSBMMTA5NywyNCBMMTExNCwxOCBMMTEzNCw5IEwxMTYwLDQ2IEwxMTYxLDM5IEwxMTc5LDE3IEwxMTk0LDEwIEwxMjA3LDI3IEwxMjE3LDIwIEwxMjcxLDQgTDEyNzUsNDYgTDEyNzcsMjMgTDEyODIsMzcgTDEyOTEsMzMgTDEyOTcsMzYgTDEzMTAsMzQgTDEzMTQsMTEgTDEzMTksMzYgTDEzMzcsNSBMMTMzOCwxNSBMMTM2MiwxNSBMMTM4MywxOSBMMTQwMCwzNiBMMTQwNSwyMiBMMTQxNiw0MSBMMTQyNCw0MiBMMTQzOCwzMSBMMTQzOSwzMiBMMTQ0MCwzNyBMMTQ0MCwwIFoiIGZpbGw9IiNGOEY0RUUiLz48L3N2Zz4=");
}

/* LOCATION bottom torn edge */
.section--location::after {
  bottom: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDU0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCw1NCBMMCwyNiBMNyw0NiBMMTYsMjEgTDIzLDEzIEwzNiwyMCBMNDQsNDYgTDYxLDExIEw4NywyMCBMODgsMzMgTDk0LDEzIEwxMDgsMjIgTDE1MiwxMSBMMTUzLDM4IEwxNzYsNSBMMTgwLDcgTDE4NiwyMCBMMTkyLDM2IEwxOTMsMzcgTDE5Niw0MyBMMjA1LDIxIEwyMTIsNiBMMjI2LDI0IEwyMzMsMzUgTDI3MiwyMiBMMjc1LDMyIEwyOTAsMjIgTDI5MywyNSBMMzMzLDQzIEwzNjcsMTkgTDM3NywyNSBMMzgzLDIzIEwzOTEsNDUgTDQwNCw0MyBMNDExLDE4IEw0MjcsMjEgTDQzNCwxOCBMNDQwLDYgTDQ5MSwyMCBMNTE2LDI4IEw1MjAsMTggTDUzMCwyNCBMNTQ3LDggTDU1Nyw0MiBMNTU4LDMzIEw1NjgsNCBMNTc5LDE1IEw2MDcsMzMgTDYxOSw0MSBMNjMwLDI4IEw2NTcsNSBMNjgyLDI1IEw2OTYsNCBMNzE0LDggTDcxOSwxMiBMNzI2LDMwIEw3OTMsMTYgTDgxMiw3IEw4MzIsMjMgTDgzNywzNCBMODU4LDEyIEw4NzEsMzcgTDg4MCw0IEw4OTIsMjQgTDg5NSw0IEw4OTYsMzMgTDkwMywxMSBMOTM3LDQyIEw5NTIsMzggTDk1OSwxOSBMOTg0LDQgTDk4OSw4IEwxMDM3LDQ1IEwxMDM5LDIzIEwxMDUzLDQwIEwxMDYxLDQyIEwxMDcxLDEzIEwxMDkwLDMyIEwxMTE5LDI1IEwxMTIxLDI3IEwxMTMwLDE3IEwxMTQwLDIwIEwxMTY1LDQ2IEwxMTY5LDM0IEwxMjAwLDI0IEwxMjAxLDIwIEwxMjExLDIwIEwxMjIzLDIxIEwxMjM0LDMyIEwxMjcxLDI5IEwxMzM1LDM1IEwxMzQ0LDM4IEwxMzUxLDggTDEzNTcsMzUgTDEzNTgsMjggTDEzNjgsMjIgTDEzODQsMzcgTDEzOTcsNDYgTDE0MDUsMjggTDE0MzksMTQgTDE0NDAsNSBMMTQ0MCw1NCBaIiBmaWxsPSIjRjhGNEVFIi8+PC9zdmc+");
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
.section-title {
  font-family: var(--ff-script);
  font-weight: 400;
  font-size: clamp(42px, 11vw, 62px);
  color: var(--espresso);
  line-height: 1.05;
  margin-bottom: 20px;
  letter-spacing: 0;
}

.section-note {
  font-size: 14px;
  font-weight: 200;
  color: var(--text-light);
  line-height: 1.8;
  max-width: 360px;
  margin: 0 auto 36px;
}

.text-block {
  max-width: 380px;
  margin: 0 auto;
}

.text-block p {
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 200;
  color: var(--text-light);
  margin-bottom: 16px;
  line-height: 1.85;
}

.text-block p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════
   ORNAMENT
═══════════════════════════════════════════ */
.ornament {
  display: block;
  font-size: 18px;
  color: var(--champagne);
  letter-spacing: 0.3em;
  margin-bottom: 24px;
  animation: ornament-pulse 4s ease-in-out infinite;
}

.ornament--light { color: rgba(201, 184, 154, 0.5); }

@keyframes ornament-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.15); }
}

/* ═══════════════════════════════════════════
   BUTTON
═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  padding: 13px 36px;
  border: 1px solid var(--champagne);
  border-radius: 2px;
  background: transparent;
  color: var(--espresso);
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.35s var(--ease-silk), color 0.35s var(--ease-silk), transform 0.2s var(--ease-silk);
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-silk);
  z-index: -1;
}

.btn:hover::after { transform: scaleX(1); transform-origin: left; }
.btn:hover { color: var(--ivory); }
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--ivory);
  padding: 16px 48px;
  width: 100%;
  margin-top: 36px;
  font-size: 11px;
  letter-spacing: 0.25em;
}

.btn--primary::after { background: var(--gold); }
.btn--primary:hover { color: var(--ivory); }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

/* Ambient blobs background */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.hero-bg__blob--1 {
  width: 70%; height: 60%;
  top: -15%; left: -20%;
  background: radial-gradient(circle, rgba(201,184,154,0.25) 0%, transparent 70%);
  animation: blob-drift 18s ease-in-out infinite alternate;
}

.hero-bg__blob--2 {
  width: 60%; height: 55%;
  bottom: -20%; right: -15%;
  background: radial-gradient(circle, rgba(138,158,126,0.18) 0%, transparent 70%);
  animation: blob-drift 22s ease-in-out infinite alternate-reverse;
}

.hero-bg__blob--3 {
  width: 45%; height: 45%;
  top: 30%; left: 30%;
  background: radial-gradient(circle, rgba(248,244,238,0.6) 0%, transparent 70%);
  animation: blob-drift 15s ease-in-out infinite alternate;
  animation-delay: -8s;
}

@keyframes blob-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(4%, -5%) scale(1.05); }
  66%  { transform: translate(-3%, 4%) scale(0.97); }
  100% { transform: translate(5%, 3%) scale(1.08); }
}

/* Hero content */
.hero__inner {
  position: relative;
  z-index: 2;
  padding: 0 28px;
}

.hero__label {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 200;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 40px;
}

.hero__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero__name {
  font-family: var(--ff-script);
  font-weight: 400;
  font-size: clamp(60px, 18vw, 100px);
  color: var(--espresso);
  line-height: 1;
  letter-spacing: 0.01em;
  will-change: transform;
}

.hero__amp-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(40px, 10vw, 60px);
}

.hero__amp {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 10vw, 56px);
  color: var(--champagne);
  line-height: 1;
  display: block;
}

/* Scroll cue */
.hero__scroll-cue {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.hero__scroll-text {
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: 200;
  letter-spacing: 0.35em;
  color: var(--taupe);
  text-transform: uppercase;
}

.hero__scroll-bar {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--champagne), transparent);
  animation: scroll-bar 2s ease-in-out infinite;
}

@keyframes scroll-bar {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ═══════════════════════════════════════════
   LOCATION — dark full-bleed block
═══════════════════════════════════════════ */
.section--location {
  position: relative;
  z-index: 1;
  padding: var(--section-pad) 0;
  overflow: visible;
  background: var(--espresso);
}

.location-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.location-bg__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.82) contrast(1.08);
}

.location-bg__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30,18,10,0.64) 0%,
    rgba(30,18,10,0.8) 100%
  );
}

.location-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 28px;
}

.location__title {
  font-family: var(--ff-script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(52px, 14vw, 80px);
  color: var(--ivory);
  line-height: 1;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
  text-shadow: 0 3px 18px rgba(0,0,0,0.55);
}

.location__label {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 200;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 10px;
  opacity: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
}

.location__venue {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(22px, 6vw, 32px);
  color: var(--ivory);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-shadow: 0 3px 14px rgba(0,0,0,0.65);
}

.location__hall {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 4vw, 20px);
  color: rgba(248,244,238,0.9);
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.location__address {
  font-size: 13px;
  font-weight: 300;
  color: rgba(248,244,238,0.88);
  letter-spacing: 0.08em;
  margin-bottom: 32px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75);
}

.btn--location {
  border-color: rgba(226,211,185,0.88);
  background: rgba(30,18,10,0.22);
  color: var(--ivory);
  padding: 13px 36px;
  font-size: 11px;
  letter-spacing: 0.25em;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

.btn--location::after { background: rgba(201,184,154,0.2); }
.btn--location:hover { color: var(--ivory); }

/* ═══════════════════════════════════════════
   TIMELINE
═══════════════════════════════════════════ */
.timeline {
  display: flex;
  gap: 0 24px;
  margin-top: 16px;
  position: relative;
  justify-content: center;
}

.timeline__track {
  position: relative;
  width: 1px;
  align-self: stretch;
}

.timeline__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 0%;
  background: linear-gradient(to bottom, var(--champagne), var(--sage));
  transition: height 0.8s var(--ease-out);
}

.timeline__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 0 0 48px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__item.visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--champagne);
  background: var(--ivory);
  flex-shrink: 0;
  position: relative;
  left: -4.5px;
  top: 4px;
  transition: background 0.3s, transform 0.3s;
}

.timeline__item.visible .timeline__dot {
  background: var(--champagne);
  transform: scale(1.2);
}

.timeline__body {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.timeline__time {
  font-family: var(--ff-serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--espresso);
  line-height: 1;
}

.timeline__event {
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 0.2em;
  color: var(--taupe);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════
   DRESS CODE PALETTE
═══════════════════════════════════════════ */
.container--dresscode {
  width: min(100%, 1200px);
}

.dresscode-groups {
  display: grid;
  gap: 56px;
  margin-top: 48px;
}

.dresscode-group {
  min-width: 0;
}

.dresscode-group__label {
  font-family: var(--ff-script);
  font-size: 34px;
  font-style: normal;
  color: var(--espresso);
  margin-bottom: 18px;
}

.dresscode-group__looks {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(61,43,31,0.09));
}

.palette {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px 12px;
  flex-wrap: wrap;
  margin: 24px auto 0;
}

.palette__item {
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.palette__item span {
  font-size: 10px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-light);
}

.palette__swatch {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--swatch-color);
  border: 2px solid rgba(248,244,238,0.85);
  box-shadow:
    0 0 0 1px rgba(61,43,31,0.12),
    0 8px 18px rgba(61,43,31,0.08);
  cursor: default;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.palette__swatch:hover {
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 8px 24px rgba(61,43,31,0.15);
}

.palette__swatch--light {
  box-shadow:
    0 0 0 1px rgba(61,43,31,0.18),
    0 8px 18px rgba(61,43,31,0.08);
}

/* ═══════════════════════════════════════════
   RSVP FORM
═══════════════════════════════════════════ */
.rsvp-form {
  margin-top: 36px;
  text-align: left;
}

.form-group {
  margin-bottom: 28px;
  position: relative;
}

.form-fieldset {
  border: 0;
  min-width: 0;
}

.form-label {
  display: block;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 10px;
}

.form-hint {
  margin: -4px 0 14px;
  font-size: 12px;
  font-weight: 200;
  color: var(--text-light);
}

.form-input {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--parchment);
  background: transparent;
  color: var(--text);
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 200;
  outline: none;
  transition: border-color 0.3s;
  border-radius: 0;
  -webkit-appearance: none;
}

.form-input::placeholder { color: var(--text-light); opacity: 0.5; }
.form-input:focus { border-bottom-color: var(--champagne); }
.form-input.error { border-bottom-color: #C4877A; }

.form-error {
  display: none;
  font-size: 11px;
  font-weight: 200;
  color: #C4877A;
  letter-spacing: 0.05em;
  margin-top: 6px;
}

.form-error.visible { display: block; }

/* Toggle attendance */
.toggle-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toggle-option { cursor: pointer; }

.toggle-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-btn {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border: 1px solid var(--parchment);
  border-radius: 2px;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 200;
  color: var(--text-light);
  transition: all 0.25s var(--ease-silk);
  position: relative;
}

.toggle-btn::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--parchment);
  margin-right: 14px;
  flex-shrink: 0;
  transition: all 0.25s;
}

.toggle-option input:checked + .toggle-btn {
  border-color: var(--champagne);
  color: var(--espresso);
  background: rgba(201,184,154,0.08);
}

.toggle-option input:checked + .toggle-btn::before {
  background: var(--champagne);
  border-color: var(--champagne);
}

.toggle-option input:focus-visible + .toggle-btn,
.pill input:focus-visible + span,
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Pills for drinks */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill { cursor: pointer; }

.pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pill span {
  display: block;
  padding: 9px 18px;
  border: 1px solid var(--parchment);
  border-radius: 40px;
  font-size: 13px;
  font-weight: 200;
  color: var(--text-light);
  transition: all 0.25s var(--ease-silk);
}

.pill input:checked + span {
  border-color: var(--sage);
  color: var(--olive);
  background: rgba(138,158,126,0.1);
}

.pill input:disabled + span {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Drinks group hidden when attendance=no */
.drinks-group {
  transition: opacity 0.4s, max-height 0.5s var(--ease-out);
  overflow: hidden;
  max-height: 320px;
}

.drinks-group.hidden {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  pointer-events: none;
}

/* RSVP success */
.rsvp-success {
  text-align: center;
  padding: 48px 24px;
}

.rsvp-success__icon {
  font-size: 28px;
  color: var(--champagne);
  margin-bottom: 20px;
  animation: ornament-pulse 3s ease-in-out infinite;
}

.rsvp-success__text {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 300;
  color: var(--espresso);
  line-height: 1.5;
}

.form-submit-error {
  margin: 14px 0 0;
  color: #A86057;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}

/* ═══════════════════════════════════════════
   COUPLE PHOTOS — keepsake prints
═══════════════════════════════════════════ */
.couple-photo {
  position: relative;
  z-index: 1;
  background: var(--ivory);
  overflow: hidden;
}

.couple-photo--opening {
  padding: 72px 24px 38px;
}

.couple-photo__portrait {
  width: min(100%, 420px);
  margin: 0 auto;
  text-align: center;
}

.couple-photo__frame {
  position: relative;
  padding: 10px;
  background: #FFFDF9;
  box-shadow:
    0 24px 60px rgba(74, 55, 40, 0.16),
    0 3px 12px rgba(74, 55, 40, 0.1);
  transform: rotate(-1.2deg);
}

.couple-photo__frame::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 50%;
  width: 92px;
  height: 30px;
  background: rgba(218, 204, 181, 0.78);
  box-shadow: 0 2px 4px rgba(74, 55, 40, 0.08);
  transform: translateX(-50%) rotate(1.8deg);
}

.couple-photo__frame img,
.couple-photo__card img {
  display: block;
  width: 100%;
  height: auto;
}

.couple-photo__portrait figcaption {
  margin-top: 30px;
  font-family: var(--ff-script);
  font-size: clamp(36px, 10vw, 50px);
  line-height: 1;
  color: var(--espresso);
  transform: rotate(-2deg);
}

.couple-photo__portrait figcaption span {
  color: var(--champagne);
  margin: 0 0.08em;
}

.couple-photo--closing {
  padding: 76px 18px 104px;
  background:
    radial-gradient(circle at 50% 45%, rgba(201, 184, 154, 0.2), transparent 46%),
    var(--ivory);
}

.couple-photo__gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 4vw, 32px);
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 16px 4px 34px;
}

.couple-photo__card {
  position: relative;
  margin: 0;
  padding: clamp(6px, 1.5vw, 11px);
  padding-bottom: clamp(18px, 4vw, 34px);
  background: #FFFDF9;
  box-shadow: 0 20px 48px rgba(74, 55, 40, 0.16);
}

.couple-photo__card--left {
  margin-top: clamp(42px, 8vw, 76px);
  transform: rotate(-3deg);
}

.couple-photo__card--right {
  transform: rotate(2.4deg);
}

.couple-photo__gallery-mark {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  width: clamp(62px, 17vw, 86px);
  aspect-ratio: 1;
  border: 1px solid rgba(168, 144, 94, 0.45);
  border-radius: 50%;
  background: var(--espresso);
  box-shadow: 0 12px 28px rgba(74, 55, 40, 0.22);
  font-family: var(--ff-serif);
  font-size: clamp(18px, 5vw, 25px);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--ivory);
  transform: translateX(-50%) rotate(-5deg);
}

.couple-photo__gallery-mark span {
  margin: 0 0.08em;
  color: var(--champagne);
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer {
  position: relative;
  z-index: 1;
  background: var(--espresso);
  padding: var(--section-pad) 0;
  text-align: center;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 54px;
  z-index: 2;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDU0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCwwIEwwLDIyIEwxMSwxMSBMMTcsNDUgTDIyLDE5IEw0MSwzMyBMNDQsNCBMMTA5LDQxIEwxMjQsMzIgTDE0MSwxMyBMMTQ3LDM2IEwxNDgsMTYgTDE2OSw0MyBMMTkzLDM2IEwyMDQsMjYgTDIzMSw1IEwyNDQsNDEgTDI0OSw0IEwyNTAsMjMgTDI4OCwxMCBMMjk1LDI2IEwzMDcsNCBMMzIyLDI2IEwzNTAsMTAgTDM3MSw2IEwzODAsMTAgTDQzNywzMiBMNDY4LDI2IEw1MDYsMTYgTDUxMSwyOSBMNTEzLDEyIEw1MjcsNCBMNTM2LDI2IEw1NTUsMjIgTDU2Nyw0IEw1NzIsMzkgTDU3NSwzNyBMNTgwLDQ0IEw1OTcsMzcgTDYwMiw0NCBMNjA3LDE5IEw2MTQsNDEgTDYzOSwxNyBMNjQ3LDI1IEw2NzUsNCBMNjgzLDM0IEw2ODcsOSBMNjkyLDE3IEw2OTMsNDAgTDY5NSwxMiBMNzE4LDI0IEw3NTAsNDUgTDc2NCw4IEw3NzIsMjAgTDc4MywxNSBMNzg0LDQgTDgwMCwzMiBMODA1LDcgTDgyNSwzMiBMODI5LDM5IEw4MzQsMzYgTDg1OCw0MyBMODc3LDMxIEw4ODQsMjIgTDkxNywxMSBMOTM2LDEyIEw5NjQsMjUgTDk5Miw0NSBMMTAxOSwxNCBMMTAyMiw0MiBMMTAzNiw2IEwxMDQyLDE1IEwxMDU5LDEzIEwxMDcwLDI4IEwxMDc3LDQgTDEwOTIsNDYgTDEwOTMsNDAgTDEwOTQsOSBMMTA5NywxOSBMMTEyNSwyMSBMMTEzMCw0NSBMMTEzNCwyNiBMMTEzNyw0NSBMMTE2OCwyNSBMMTE5MCwyOSBMMTIxNiwzMCBMMTI0OSwxNyBMMTI1Miw2IEwxMjcwLDQ1IEwxMjc5LDIyIEwxMzA4LDEyIEwxMzEwLDE0IEwxMzIxLDUgTDEzMjIsMTIgTDEzMjksMjIgTDEzMzAsMzUgTDEzODUsMTEgTDEzODgsMzkgTDE0MzUsMTcgTDE0MzcsNDQgTDE0NDAsMTMgTDE0NDAsMCBaIiBmaWxsPSIjRjhGNEVFIi8+PC9zdmc+");
}

.footer__inner {
  position: relative;
  z-index: 1;
  padding: 0 24px;
}

.footer__tagline {
  font-size: 10px;
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201,184,154,0.5);
  margin-bottom: 20px;
}

.footer__waiting {
  font-family: var(--ff-script);
  font-size: clamp(38px, 10vw, 56px);
  color: var(--champagne);
  line-height: 1.1;
  margin-bottom: 16px;
  font-weight: 400;
}

.footer__names {
  font-family: var(--ff-script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(40px, 11vw, 62px);
  color: var(--ivory);
  line-height: 1.1;
  margin-bottom: 16px;
}

.footer__date {
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 0.3em;
  color: var(--champagne);
}

.footer__wishes {
  width: min(100%, 660px);
  margin: 48px auto 0;
  padding: 38px 0;
  border-top: 1px solid rgba(201, 184, 154, 0.28);
  border-bottom: 1px solid rgba(201, 184, 154, 0.28);
}

.footer__wishes p {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(248, 244, 238, 0.92);
}

.footer__wish-divider {
  margin: 28px 0;
  font-size: 13px;
  color: var(--champagne);
}

/* Footer contacts */
.footer__contacts {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.footer__contact {
  text-align: center;
}

.footer__contact-note {
  max-width: 360px;
  margin: 0 auto 10px;
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.1em;
  color: rgba(248, 244, 238, 0.88);
  font-style: italic;
}

.footer__contact-role {
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 8px;
}

.footer__contact-name {
  font-family: var(--ff-script);
  font-size: 28px;
  color: var(--ivory);
  line-height: 1.1;
  margin-bottom: 4px;
}

.footer__contact-phone {
  display: block;
  font-size: 13px;
  font-weight: 200;
  letter-spacing: 0.1em;
  color: var(--champagne);
  text-decoration: none;
  transition: opacity 0.2s;
}
.footer__contact-phone:hover { opacity: 0.7; }

.footer__contact-divider {
  font-size: 14px;
  color: rgba(201,184,154,0.3);
  letter-spacing: 0.3em;
}

/* ═══════════════════════════════════════════
   REVEAL ANIMATION (scroll)
═══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

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

/* ═══════════════════════════════════════════
   DIVIDER
═══════════════════════════════════════════ */
.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 40px auto;
  color: var(--champagne);
  max-width: 240px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--champagne));
}

.divider::after {
  background: linear-gradient(to left, transparent, var(--champagne));
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --container: min(100%, 560px);
  }

  .hero__label  { margin-bottom: 52px; }
  .toggle-group { flex-direction: row; }
  .toggle-btn   { flex: 1; }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-bg__blob,
  .hero__scroll-bar,
  .ornament {
    animation: none;
  }

  .reveal,
  .timeline__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════
   INTRO OVERLAY — раскрывающееся письмо
═══════════════════════════════════════════ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.intro__panel {
  position: absolute;
  left: 0;
  width: 100%;
  will-change: transform;
}

.intro__panel--top {
  top: 0;
  height: 58%;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,0.8), transparent 40%),
    linear-gradient(135deg, #f9f8f6 0%, #efefed 100%);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  filter: drop-shadow(0 6px 8px rgba(44,37,32,0.12));
}

.intro__panel--bottom {
  top: 42%;
  bottom: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,0.55), transparent 35%),
    linear-gradient(to bottom, #e8e8e6, #f4f2ee);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.intro__title {
  position: absolute;
  top: clamp(150px, 24vh, 230px);
  left: 0; right: 0;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(30px, 7.5vw, 48px);
  color: #231f1c;
  text-align: center;
  letter-spacing: 0.025em;
  line-height: 1.32;
  text-transform: uppercase;
  pointer-events: none;
}

.intro__hint {
  position: absolute;
  bottom: clamp(36px, 7vh, 70px);
  left: 0; right: 0;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(13px, 3.5vw, 17px);
  color: rgba(65,58,53,0.48);
  text-align: center;
  letter-spacing: 0.06em;
  line-height: 1.6;
  pointer-events: none;
  animation: hint-blink 3s ease-in-out infinite;
}

@keyframes hint-blink {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

.env-seal {
  position: absolute;
  left: 50%;
  top: 51.5%;
  transform: translate(-50%, -50%);
  width: clamp(110px, 30vw, 148px);
  height: clamp(110px, 30vw, 148px);
  z-index: 4;
  border-radius: 50%;
  filter: drop-shadow(0 8px 12px rgba(35,31,28,0.18));
  overflow: hidden;
  will-change: transform;
}

.env-seal img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

@media (max-height: 620px) {
  .intro__title {
    top: 20vh;
    font-size: clamp(24px, 6vw, 38px);
  }

  .intro__hint {
    bottom: 20px;
  }
}

/* ═══════════════════════════════════════════
   TOAST — бокалы шампанского
═══════════════════════════════════════════ */
.toast {
  position: relative;
  z-index: 1;
  padding: 64px 0 48px;
  background: var(--ivory);
  overflow: visible;
}

.toast__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.toast__glasses {
  position: relative;
  width: 190px;
  height: 230px;
  margin: 0 auto;
  overflow: visible;
}

.toast__glass {
  position: absolute;
  bottom: 0;
  width: 78px;
}

.toast__glass svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(201,184,154,0.35));
  overflow: visible;
}

/* Left glass: tilts right (clockwise), base on left */
.toast__glass--l {
  left: 0;
  transform-origin: 50% 100%;
  transform: rotate(34deg);
}

/* Right glass: tilts left (counter-clockwise), base on right */
.toast__glass--r {
  right: 0;
  transform-origin: 50% 100%;
  transform: rotate(-34deg);
}

/* Sparks burst at clink point */
.toast__sparks {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  pointer-events: none;
}

.spark {
  position: absolute;
  border-radius: 50%;
  background: var(--champagne);
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.toast__label {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: var(--taupe);
  letter-spacing: 0.04em;
  opacity: 0;
}

/* ═══════════════════════════════════════════
   MINI CALENDAR
═══════════════════════════════════════════ */
.cal {
  opacity: 0;
  margin-top: 8px;
  text-align: center;
  position: relative;
}

.cal--hero {
  opacity: 1;
  margin-top: 34px;
  padding-top: 18px;
}

.cal__year {
  position: absolute;
  z-index: 0;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-serif);
  font-size: clamp(94px, 28vw, 132px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(74,55,40,0.14);
  pointer-events: none;
}

.cal__month {
  position: relative;
  z-index: 1;
  font-family: var(--ff-script);
  font-size: clamp(34px, 10vw, 46px);
  font-weight: 400;
  line-height: 1;
  color: var(--espresso);
  margin-bottom: 18px;
  transform: rotate(-2deg);
}

.cal__grid {
  border-collapse: collapse;
  margin: 0 auto;
}

.cal__grid th {
  font-family: var(--ff-script);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--taupe);
  padding: 0 8px 9px;
}

.cal__grid td {
  font-family: var(--ff-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  width: 34px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

.cal__day--marked {
  color: var(--ivory);
  font-weight: 600;
  position: relative;
}

.cal__day--marked span {
  position: relative;
  z-index: 2;
}

.cal__heart {
  position: absolute;
  width: 40px;
  height: 36px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: #E8BFC5;
  stroke: rgba(196,126,139,0.5);
  stroke-width: 0.7;
  filter: drop-shadow(0 3px 5px rgba(61,43,31,0.13));
  overflow: visible;
  pointer-events: none;
}

@media (min-width: 900px) {
  .dresscode-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px;
    align-items: start;
  }

  .dresscode-group--men {
    grid-column: 1;
  }

  .dresscode-group--women {
    grid-column: 2;
  }
}

/* Irregular torn-paper separators */
#dresscode::before,
.section--location::before,
.footer::before {
  height: 68px;
  background-image: var(--torn-edge);
}

#dresscode::after,
.section--location::after {
  height: 68px;
  background-image: var(--torn-edge);
  transform: rotate(180deg);
}