:root {
  --espresso: #130907;
  --cocoa: #2c130d;
  --chocolate: #5a2f21;

  --bronze: #b97954;
  --bronze-light: #d7a381;

  --ivory: #f1e7d8;
  --cream: #fff9f0;

  --ink: #1d100c;

  --line:
    rgba(215, 163, 129, 0.24);

  --shadow:
    0 30px 90px rgba(0, 0, 0, 0.38);

  --serif:
    "Cormorant Garamond",
    Georgia,
    serif;

  --sans:
    "Manrope",
    Arial,
    sans-serif;

  --ease-luxury:
    cubic-bezier(0.22, 1, 0.36, 1);
}


/* ====================================================== */
/* RESET */
/* ====================================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;

  background:
    var(--espresso);
}


body {
  margin: 0;

  min-width: 320px;

  color:
    var(--ivory);

  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(185, 121, 84, 0.1),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      #170b08 0%,
      var(--espresso) 100%
    );

  font-family:
    var(--sans);

  font-weight:
    300;

  line-height:
    1.6;

  overflow-x:
    hidden;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


body.is-locked {
  height:
    100svh;

  overflow:
    hidden;
}


button,
input,
textarea,
select {
  font:
    inherit;
}


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


a {
  color:
    inherit;
}


img,
video {
  display:
    block;

  max-width:
    100%;
}


::selection {
  color:
    var(--espresso);

  background:
    var(--bronze-light);
}


/* ====================================================== */
/* NOISE */
/* ====================================================== */

.page-noise {
  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  pointer-events:
    none;

  opacity:
    0.045;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");

  mix-blend-mode:
    soft-light;
}


/* ====================================================== */
/* GENERAL */
/* ====================================================== */

.eyebrow {
  margin:
    0 0 1rem;

  color:
    var(--bronze-light);

  font-size:
    0.72rem;

  font-weight:
    500;

  letter-spacing:
    0.28em;

  text-transform:
    uppercase;
}


.display-title {
  margin:
    0;

  max-width:
    12ch;

  font-family:
    var(--serif);

  font-size:
    clamp(
      3.1rem,
      7vw,
      7rem
    );

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.04em;
}


.lead-copy {
  margin:
    2rem 0 0;

  max-width:
    41rem;

  color:
    rgba(241, 231, 216, 0.76);

  font-size:
    clamp(
      1rem,
      1.7vw,
      1.2rem
    );

  line-height:
    1.85;
}


.lead-copy--compact {
  max-width:
    34rem;
}


.section {
  position:
    relative;

  padding:
    clamp(
      6rem,
      12vw,
      11rem
    )
    0;

  overflow:
    clip;
}


.section__shell {
  width:
    min(
      1180px,
      calc(100% - 2.4rem)
    );

  margin:
    0 auto;
}


.section-heading {
  margin-bottom:
    clamp(
      3rem,
      6vw,
      5.5rem
    );
}


.section-number {
  color:
    rgba(241, 231, 216, 0.18);

  font-family:
    var(--serif);

  font-size:
    clamp(
      5rem,
      12vw,
      10rem
    );

  line-height:
    0.7;
}


/* ====================================================== */
/* REVEAL */
/* ====================================================== */

.js .reveal {
  opacity:
    0;

  transform:
    translateY(32px);

  transition:
    opacity
      1s
      var(--ease-luxury),
    transform
      1s
      var(--ease-luxury);
}


.js .reveal.is-visible {
  opacity:
    1;

  transform:
    translateY(0);
}


/* ====================================================== */
/* BUTTON */
/* ====================================================== */

.luxury-button {
  position:
    relative;

  min-height:
    3.4rem;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    1.8rem;

  padding:
    0.9rem
    1.1rem
    0.9rem
    1.4rem;

  color:
    var(--cream);

  background:
    rgba(255, 255, 255, 0.03);

  border:
    1px solid
    rgba(215, 163, 129, 0.42);

  border-radius:
    999px;

  cursor:
    pointer;

  font-size:
    0.78rem;

  font-weight:
    500;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;

  transition:
    transform
      0.35s
      var(--ease-luxury),
    border-color
      0.35s
      ease,
    background
      0.35s
      ease,
    color
      0.35s
      ease;
}


.luxury-button:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(215, 163, 129, 0.8);

  background:
    rgba(185, 121, 84, 0.1);
}


.luxury-button__arrow {
  width:
    2rem;

  height:
    2rem;

  display:
    grid;

  place-items:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  color:
    var(--espresso);

  background:
    var(--bronze-light);

  transition:
    transform
      0.35s
      var(--ease-luxury);
}


.luxury-button:hover
.luxury-button__arrow {
  transform:
    rotate(45deg);
}


.luxury-button:disabled {
  opacity:
    0.55;

  cursor:
    wait;

  transform:
    none;
}


.luxury-button:focus-visible,
.text-link:focus-visible,
.scroll-cue:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:
    2px solid
    var(--bronze-light);

  outline-offset:
    4px;
}


/* ====================================================== */
/* COVER */
/* ====================================================== */

.cover {
  position:
    fixed;

  inset:
    0;

  z-index:
    5000;

  width:
    100%;

  height:
    100svh;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #120705;

  transition:
    opacity
      0.7s
      ease,
    visibility
      0.7s
      ease;
}


.cover.is-opened {
  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;
}


/* ====================================================== */
/* CURTAINS */
/* ====================================================== */

.cover__curtains {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  overflow:
    hidden;

  pointer-events:
    none;
}


.curtain {
  position:
    absolute;

  top:
    0;

  bottom:
    0;

  width:
    50.15%;

  overflow:
    hidden;

  background:
    var(--cocoa);

  transform:
    translate3d(
      0,
      0,
      0
    );

  will-change:
    transform;

  backface-visibility:
    hidden;

  transition:
    transform
      1.9s
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      );
}


.curtain--left {
  left:
    0;
}


.curtain--right {
  right:
    0;
}


/* ====================================================== */
/* CURTAIN VIDEO */
/* ====================================================== */

.curtain__video {
  position:
    absolute;

  top:
    0;

  width:
    200%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  pointer-events:
    none;

  user-select:
    none;

  transform:
    translateZ(0)
    scale(1.035);

  backface-visibility:
    hidden;

  filter:
    brightness(0.76)
    contrast(1.06)
    saturate(0.94);
}


.curtain__video--left {
  left:
    0;
}


.curtain__video--right {
  right:
    0;
}


/* ====================================================== */
/* CURTAIN LIGHT / DEPTH */
/* ====================================================== */

.curtain__depth {
  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  pointer-events:
    none;
}


.curtain--left
.curtain__depth {
  background:
    linear-gradient(
      90deg,
      rgba(5, 2, 1, 0.4)
        0%,
      rgba(5, 2, 1, 0.06)
        40%,
      rgba(0, 0, 0, 0.17)
        82%,
      rgba(0, 0, 0, 0.5)
        100%
    );
}


.curtain--right
.curtain__depth {
  background:
    linear-gradient(
      270deg,
      rgba(5, 2, 1, 0.4)
        0%,
      rgba(5, 2, 1, 0.06)
        40%,
      rgba(0, 0, 0, 0.17)
        82%,
      rgba(0, 0, 0, 0.5)
        100%
    );
}


.curtain__folds {
  position:
    absolute;

  inset:
    0;

  z-index:
    3;

  opacity:
    0.16;

  mix-blend-mode:
    soft-light;

  pointer-events:
    none;

  background:
    repeating-linear-gradient(
      93deg,
      rgba(255, 255, 255, 0.08)
        0%,
      transparent
        5%,
      rgba(0, 0, 0, 0.2)
        10%,
      transparent
        17%,
      rgba(255, 255, 255, 0.05)
        24%
    );

  background-size:
    190% 100%;

  animation:
    curtainFoldMovement
    12s
    ease-in-out
    infinite alternate;
}


.curtain__edge {
  position:
    absolute;

  z-index:
    4;

  top:
    0;

  bottom:
    0;

  width:
    clamp(
      24px,
      4vw,
      70px
    );

  pointer-events:
    none;
}


.curtain--left
.curtain__edge {
  right:
    0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0, 0, 0, 0.58)
    );
}


.curtain--right
.curtain__edge {
  left:
    0;

  background:
    linear-gradient(
      270deg,
      transparent,
      rgba(0, 0, 0, 0.58)
    );
}


/* ====================================================== */
/* CENTER SEAM */
/* ====================================================== */

.curtain-seam {
  position:
    absolute;

  z-index:
    7;

  top:
    0;

  bottom:
    0;

  left:
    50%;

  width:
    1px;

  transform:
    translateX(-50%);

  pointer-events:
    none;

  transition:
    opacity
      0.45s
      ease;
}


.curtain-seam__line {
  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      transparent
        0%,
      rgba(224, 176, 143, 0.3)
        14%,
      rgba(237, 192, 159, 0.8)
        50%,
      rgba(224, 176, 143, 0.3)
        86%,
      transparent
        100%
    );

  box-shadow:
    0 0 14px
    rgba(219, 153, 111, 0.18);
}


.curtain-seam__glow {
  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    50%;

  width:
    8rem;

  opacity:
    0;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(234, 176, 136, 0.16),
      transparent
    );

  filter:
    blur(16px);

  transition:
    opacity
      0.7s
      ease;
}


/* ====================================================== */
/* COVER FRAME */
/* ====================================================== */

.cover__frame {
  position:
    absolute;

  z-index:
    9;

  inset:
    max(
      0.8rem,
      env(safe-area-inset-top)
    )
    0.8rem
    max(
      0.8rem,
      env(safe-area-inset-bottom)
    );

  border:
    1px solid
    rgba(227, 183, 151, 0.2);

  pointer-events:
    none;

  transition:
    opacity
      0.65s
      ease;
}


.cover__frame::before,
.cover__frame::after {
  content:
    "";

  position:
    absolute;

  top:
    1rem;

  width:
    4rem;

  height:
    1px;

  background:
    var(--bronze-light);

  opacity:
    0.5;
}


.cover__frame::before {
  left:
    1rem;
}


.cover__frame::after {
  right:
    1rem;
}


/* ====================================================== */
/* COVER CONTENT */
/* ====================================================== */

.cover__content {
  position:
    relative;

  z-index:
    20;

  width:
    min(
      680px,
      calc(100% - 2rem)
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  padding:
    2rem 1rem;

  text-align:
    center;

  transition:
    opacity
      0.5s
      ease,
    transform
      0.8s
      var(--ease-luxury),
    filter
      0.7s
      ease;
}


.cover__eyebrow {
  margin:
    0 0
    clamp(
      1.5rem,
      4vh,
      2.8rem
    );

  color:
    rgba(241, 231, 216, 0.68);

  font-size:
    clamp(
      0.56rem,
      1vw,
      0.7rem
    );

  font-weight:
    500;

  letter-spacing:
    0.34em;

  text-transform:
    uppercase;
}


/* ====================================================== */
/* MONOGRAM */
/* ====================================================== */

.cover__monogram {
  position:
    relative;

  width:
    clamp(
      7rem,
      16vw,
      10.5rem
    );

  aspect-ratio:
    1;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    clamp(
      1.6rem,
      3vh,
      2.6rem
    );

  color:
    var(--cream);

  background:
    rgba(17, 7, 5, 0.1);

  border:
    1px solid
    rgba(226, 177, 143, 0.45);

  border-radius:
    50%;

  box-shadow:
    inset
      0 0 40px
      rgba(215, 163, 129, 0.03),
    0 12px 45px
      rgba(0, 0, 0, 0.16);

  backdrop-filter:
    blur(2px);

  font-family:
    var(--serif);

  font-size:
    clamp(
      2.2rem,
      6vw,
      4rem
    );

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    0.03em;
}


.cover__monogram::before {
  content:
    "";

  position:
    absolute;

  inset:
    0.45rem;

  border:
    1px solid
    rgba(215, 163, 129, 0.2);

  border-radius:
    50%;
}


.cover__monogram::after {
  content:
    "";

  position:
    absolute;

  inset:
    -0.55rem;

  border:
    1px solid
    rgba(215, 163, 129, 0.08);

  border-radius:
    50%;
}


/* ====================================================== */
/* ORNAMENT */
/* ====================================================== */

.cover__ornament {
  width:
    min(
      260px,
      55vw
    );

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  gap:
    0.7rem;

  margin-bottom:
    1.4rem;
}


.cover__ornament span {
  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(215, 163, 129, 0.55)
    );
}


.cover__ornament span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(215, 163, 129, 0.55),
      transparent
    );
}


.cover__ornament i {
  width:
    4px;

  height:
    4px;

  border:
    1px solid
    var(--bronze-light);

  transform:
    rotate(45deg);
}


/* ====================================================== */
/* COVER TITLE */
/* ====================================================== */

.cover__title {
  max-width:
    12ch;

  margin:
    0;

  color:
    var(--cream);

  font-family:
    var(--serif);

  font-size:
    clamp(
      2.35rem,
      6vw,
      5rem
    );

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.035em;

  text-shadow:
    0 8px 34px
    rgba(0, 0, 0, 0.28);
}


.cover__date {
  display:
    block;

  margin-top:
    1.25rem;

  color:
    rgba(241, 231, 216, 0.66);

  font-size:
    clamp(
      0.68rem,
      1.4vw,
      0.85rem
    );

  font-weight:
    500;

  letter-spacing:
    0.2em;

  text-transform:
    uppercase;
}


.cover__button {
  min-width:
    min(
      280px,
      82vw
    );

  margin-top:
    clamp(
      2rem,
      4vh,
      3.1rem
    );

  background:
    rgba(24, 10, 7, 0.24);

  backdrop-filter:
    blur(7px);
}


/* ====================================================== */
/* COVER BOTTOM */
/* ====================================================== */

.cover__bottom {
  position:
    absolute;

  z-index:
    20;

  left:
    50%;

  bottom:
    max(
      1.5rem,
      calc(
        env(safe-area-inset-bottom)
        +
        0.7rem
      )
    );

  display:
    flex;

  align-items:
    center;

  gap:
    0.7rem;

  color:
    rgba(241, 231, 216, 0.34);

  font-size:
    0.52rem;

  font-weight:
    500;

  letter-spacing:
    0.22em;

  text-transform:
    uppercase;

  transform:
    translateX(-50%);

  transition:
    opacity
      0.4s
      ease;
}


.cover__bottom i {
  width:
    1.8rem;

  height:
    1px;

  background:
    rgba(215, 163, 129, 0.35);
}


/* ====================================================== */
/* COVER OPENING */
/* ====================================================== */

.cover.is-opening
.curtain--left {
  transform:
    translate3d(
      -104%,
      0,
      0
    );
}


.cover.is-opening
.curtain--right {
  transform:
    translate3d(
      104%,
      0,
      0
    );
}


.cover.is-opening
.curtain-seam__glow {
  opacity:
    1;
}


.cover.is-opening
.curtain-seam {
  opacity:
    0;

  transition-delay:
    0.55s;
}


.cover.is-opening
.cover__content {
  opacity:
    0;

  filter:
    blur(3px);

  transform:
    scale(0.975);

  pointer-events:
    none;
}


.cover.is-opening
.cover__frame,
.cover.is-opening
.cover__bottom {
  opacity:
    0;
}


/* ====================================================== */
/* HERO */
/* ====================================================== */

.hero {
  position:
    relative;

  min-height:
    100svh;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  background:
    var(--cocoa);
}


.hero__video {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  transform:
    scale(1.02)
    translateZ(0);

  backface-visibility:
    hidden;
}


.hero__shade {
  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      rgba(14, 6, 4, 0.4)
        0%,
      rgba(14, 6, 4, 0.12)
        38%,
      rgba(14, 6, 4, 0.55)
        100%
    ),
    radial-gradient(
      circle at 50% 42%,
      transparent
        0 18%,
      rgba(12, 5, 4, 0.28)
        72%
    );
}


.hero__glow {
  position:
    absolute;

  inset:
    -30%;

  opacity:
    0.36;

  background:
    conic-gradient(
      from 90deg,
      transparent,
      rgba(255, 226, 205, 0.09),
      transparent 38%
    );

  animation:
    slowRotate
    24s
    linear
    infinite;
}


.hero__frame {
  position:
    absolute;

  inset:
    max(
      0.75rem,
      env(safe-area-inset-top)
    )
    0.75rem
    max(
      0.75rem,
      env(safe-area-inset-bottom)
    );

  border:
    1px solid
    rgba(242, 222, 204, 0.23);

  pointer-events:
    none;
}


.hero__frame::before,
.hero__frame::after {
  content:
    "";

  position:
    absolute;

  top:
    1rem;

  width:
    6rem;

  height:
    1px;

  background:
    var(--bronze-light);

  opacity:
    0.6;
}


.hero__frame::before {
  left:
    1rem;
}


.hero__frame::after {
  right:
    1rem;
}


.hero__content {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      1000px,
      calc(100% - 2rem)
    );

  padding:
    7rem 1rem;

  text-align:
    center;
}


.hero__names {
  margin:
    0;

  color:
    var(--cream);

  font-family:
    var(--serif);

  font-size:
    clamp(
      4.5rem,
      13vw,
      10rem
    );

  font-weight:
    400;

  line-height:
    0.72;

  letter-spacing:
    -0.065em;

  text-shadow:
    0 14px 45px
    rgba(0, 0, 0, 0.22);
}


.hero__names span {
  display:
    block;

  margin:
    0.18em
    0
    0.12em;

  color:
    var(--bronze-light);

  font-size:
    0.44em;

  font-style:
    italic;

  letter-spacing:
    0;
}


.hero__rule {
  width:
    min(
      240px,
      44vw
    );

  height:
    1px;

  margin:
    2.4rem
    auto
    1.4rem;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--bronze-light),
      transparent
    );
}


.hero__date {
  display:
    block;

  font-size:
    clamp(
      0.8rem,
      1.5vw,
      1rem
    );

  font-weight:
    500;

  letter-spacing:
    0.24em;

  text-transform:
    uppercase;
}


.hero__subtitle {
  max-width:
    36rem;

  margin:
    1.3rem
    auto
    0;

  color:
    rgba(255, 249, 240, 0.75);

  font-size:
    clamp(
      0.9rem,
      1.4vw,
      1rem
    );
}


/* ====================================================== */
/* SCROLL */
/* ====================================================== */

.scroll-cue {
  position:
    absolute;

  z-index:
    2;

  left:
    50%;

  bottom:
    max(
      1.5rem,
      env(safe-area-inset-bottom)
    );

  display:
    grid;

  justify-items:
    center;

  gap:
    0.55rem;

  color:
    rgba(255, 249, 240, 0.56);

  text-decoration:
    none;

  transform:
    translateX(-50%);
}


.scroll-cue span {
  font-size:
    0.58rem;

  font-weight:
    500;

  letter-spacing:
    0.24em;

  text-transform:
    uppercase;
}


.scroll-cue i {
  width:
    1px;

  height:
    2.3rem;

  overflow:
    hidden;

  background:
    rgba(255, 255, 255, 0.18);
}


.scroll-cue i::after {
  content:
    "";

  display:
    block;

  width:
    100%;

  height:
    50%;

  background:
    var(--bronze-light);

  animation:
    scrollLine
    1.9s
    ease-in-out
    infinite;
}


/* ====================================================== */
/* INTRO */
/* ====================================================== */

.intro {
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(185, 121, 84, 0.09),
      transparent 26rem
    ),
    var(--espresso);
}


.intro__grid {
  display:
    grid;

  grid-template-columns:
    0.35fr
    1fr
    0.95fr;

  gap:
    clamp(
      2rem,
      5vw,
      5rem
    );

  align-items:
    start;
}


/* ====================================================== */
/* COUNTDOWN */
/* ====================================================== */

.countdown-card {
  position:
    relative;

  padding:
    clamp(
      1.6rem,
      4vw,
      2.6rem
    );

  border:
    1px solid
    var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    var(--shadow);

  backdrop-filter:
    blur(14px);
}


.countdown-card::before {
  content:
    "";

  position:
    absolute;

  inset:
    0.6rem;

  border:
    1px solid
    rgba(215, 163, 129, 0.1);

  pointer-events:
    none;
}


.countdown-card__label {
  position:
    relative;

  z-index:
    1;

  margin:
    0;

  color:
    var(--bronze-light);

  font-size:
    0.7rem;

  font-weight:
    500;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.countdown {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    0.8rem;

  margin-top:
    1.6rem;
}


.countdown__item {
  display:
    grid;

  gap:
    0.35rem;
}


.countdown__item strong {
  font-family:
    var(--serif);

  font-size:
    clamp(
      2rem,
      4vw,
      3.35rem
    );

  font-weight:
    400;

  line-height:
    1;
}


.countdown__item span {
  color:
    rgba(241, 231, 216, 0.48);

  font-size:
    0.58rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.countdown-card__caption {
  position:
    relative;

  z-index:
    1;

  margin:
    1.5rem 0 0;

  color:
    rgba(241, 231, 216, 0.5);

  font-size:
    0.8rem;
}


/* ====================================================== */
/* DETAILS */
/* ====================================================== */

.details {
  background:
    #180b08;
}


.details-grid {
  display:
    grid;

  grid-template-columns:
    0.85fr
    0.85fr
    1.3fr;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.detail-card {
  min-height:
    25rem;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    clamp(
      1.4rem,
      3vw,
      2.2rem
    );

  border-right:
    1px solid
    var(--line);

  transition:
    background
      0.5s
      ease;
}


.detail-card:last-child {
  border-right:
    0;
}


.detail-card:hover {
  background:
    rgba(255, 255, 255, 0.025);
}


.detail-card__index,
.detail-card__label {
  color:
    rgba(241, 231, 216, 0.44);

  font-size:
    0.66rem;

  font-weight:
    500;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.detail-card__date {
  display:
    flex;

  align-items:
    end;

  gap:
    1.2rem;
}


.detail-card__date > strong,
.detail-card__big {
  color:
    var(--cream);

  font-family:
    var(--serif);

  font-size:
    clamp(
      4.2rem,
      8vw,
      7rem
    );

  font-weight:
    400;

  line-height:
    0.75;
}


.detail-card__date span {
  display:
    grid;

  gap:
    0.12rem;

  padding-bottom:
    0.3rem;
}


.detail-card__date b {
  font-family:
    var(--serif);

  font-size:
    clamp(
      1.3rem,
      2.2vw,
      1.8rem
    );

  font-weight:
    500;
}


.detail-card__date small {
  color:
    rgba(241, 231, 216, 0.55);
}


.detail-card__venue {
  display:
    block;

  max-width:
    10ch;

  font-family:
    var(--serif);

  font-size:
    clamp(
      2.4rem,
      5vw,
      4.3rem
    );

  font-weight:
    400;

  line-height:
    0.95;
}


.detail-card__note {
  max-width:
    26rem;

  margin:
    1rem 0 0;

  color:
    rgba(241, 231, 216, 0.55);

  font-size:
    0.84rem;
}


.text-link {
  width:
    fit-content;

  margin-top:
    1.6rem;

  color:
    var(--bronze-light);

  text-decoration:
    none;

  font-size:
    0.74rem;

  font-weight:
    500;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.text-link span {
  display:
    inline-block;

  margin-left:
    0.35rem;

  transition:
    transform
      0.3s
      ease;
}


.text-link:hover span {
  transform:
    translate(
      3px,
      -3px
    );
}


/* ====================================================== */
/* TIMELINE */
/* ====================================================== */

.timeline-section {
  background:
    radial-gradient(
      circle at 15% 85%,
      rgba(185, 121, 84, 0.1),
      transparent 28rem
    ),
    var(--espresso);
}


.timeline-layout {
  display:
    grid;

  grid-template-columns:
    0.8fr
    1.4fr;

  gap:
    clamp(
      3rem,
      8vw,
      8rem
    );
}


.timeline-heading {
  position:
    sticky;

  top:
    4rem;

  align-self:
    start;
}


.timeline {
  position:
    relative;
}


.timeline::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    6.1rem;

  width:
    1px;

  background:
    linear-gradient(
      var(--bronze-light),
      rgba(215, 163, 129, 0.05)
    );

  opacity:
    0.45;
}


.timeline-item {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    5rem
    1fr;

  gap:
    2.2rem;

  padding:
    0 0 3.6rem;
}


.timeline-item:last-child {
  padding-bottom:
    0;
}


.timeline-item__time {
  color:
    var(--bronze-light);

  font-family:
    var(--serif);

  font-size:
    1.5rem;
}


.timeline-item__content {
  position:
    relative;

  padding-left:
    2.2rem;
}


.timeline-item__content::before {
  content:
    "";

  position:
    absolute;

  left:
    -0.23rem;

  top:
    0.58rem;

  width:
    0.48rem;

  height:
    0.48rem;

  border:
    1px solid
    var(--bronze-light);

  border-radius:
    50%;

  background:
    var(--espresso);

  box-shadow:
    0 0 0
    0.4rem
    rgba(185, 121, 84, 0.06);
}


.timeline-item__content h3 {
  margin:
    0;

  font-family:
    var(--serif);

  font-size:
    clamp(
      2rem,
      3.8vw,
      3.15rem
    );

  font-weight:
    400;

  line-height:
    1;
}


.timeline-item__content p {
  max-width:
    30rem;

  margin:
    0.85rem 0 0;

  color:
    rgba(241, 231, 216, 0.54);

  font-size:
    0.9rem;
}


/* ====================================================== */
/* DRESS CODE */
/* ====================================================== */

.dress-code {
  min-height:
    70svh;

  display:
    grid;

  align-items:
    center;

  background:
    #efe3d5;

  color:
    var(--ink);
}


.dress-code__wash {
  position:
    absolute;

  inset:
    0;

  opacity:
    0.85;

  background:
    radial-gradient(
      circle at 80% 22%,
      rgba(91, 47, 33, 0.14),
      transparent 25rem
    ),
    linear-gradient(
      135deg,
      transparent
        0 58%,
      rgba(91, 47, 33, 0.05)
        58% 100%
    );
}


.dress-code .eyebrow {
  color:
    #8e4d30;
}


.dress-code .lead-copy {
  color:
    rgba(35, 18, 12, 0.66);
}


.dress-code__layout {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  grid-template-columns:
    1fr
    1.1fr;

  gap:
    clamp(
      3rem,
      8vw,
      7rem
    );

  align-items:
    center;
}


.palette {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  min-height:
    21rem;

  border:
    1px solid
    rgba(49, 26, 17, 0.14);
}


.palette-swatch {
  position:
    relative;

  min-width:
    0;

  overflow:
    hidden;

  transition:
    transform
      0.5s
      var(--ease-luxury);
}


.palette-swatch::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(0, 0, 0, 0.34)
    );
}


.palette-swatch span {
  position:
    absolute;

  z-index:
    1;

  left:
    50%;

  bottom:
    1.1rem;

  color:
    white;

  font-size:
    0.55rem;

  font-weight:
    500;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;

  writing-mode:
    vertical-rl;

  transform:
    translateX(-50%)
    rotate(180deg);
}


.palette-swatch:hover {
  transform:
    translateY(-0.45rem);
}


/* ====================================================== */
/* GALLERY */
/* ====================================================== */

.gallery-section {
  background:
    #170a07;
}


.gallery-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      12,
      1fr
    );

  gap:
    1rem;
}


.gallery-card {
  position:
    relative;

  min-height:
    32rem;

  margin:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(--line);
}


.gallery-card:nth-child(odd) {
  grid-column:
    span 7;
}


.gallery-card:nth-child(even) {
  grid-column:
    span 5;
}


.gallery-card img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform
      1.1s
      var(--ease-luxury);
}


.gallery-card:hover img {
  transform:
    scale(1.035);
}


/* ====================================================== */
/* RSVP */
/* ====================================================== */

.rsvp {
  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(185, 121, 84, 0.12),
      transparent 28rem
    ),
    #100705;
}


.rsvp__layout {
  display:
    grid;

  grid-template-columns:
    0.78fr
    1.22fr;

  gap:
    clamp(
      3rem,
      7vw,
      7rem
    );

  align-items:
    start;
}


.rsvp__intro {
  position:
    sticky;

  top:
    4rem;
}


.rsvp-form {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    1.4rem;

  padding:
    clamp(
      1.4rem,
      4vw,
      3rem
    );

  border:
    1px solid
    var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    var(--shadow);
}


.form-field {
  min-width:
    0;

  transition:
    opacity
      0.25s
      ease;
}


.form-field--full {
  grid-column:
    1 / -1;
}


.form-field.is-disabled {
  opacity:
    0.4;

  pointer-events:
    none;
}


.form-field label,
.form-field legend {
  display:
    block;

  margin-bottom:
    0.6rem;

  color:
    rgba(241, 231, 216, 0.66);

  font-size:
    0.7rem;

  font-weight:
    500;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


fieldset.form-field {
  margin:
    0;

  padding:
    0;

  border:
    0;
}


input[type="text"],
textarea,
select {
  width:
    100%;

  min-height:
    3.3rem;

  padding:
    0.85rem
    0.95rem;

  color:
    var(--cream);

  background:
    rgba(255, 255, 255, 0.035);

  border:
    1px solid
    rgba(241, 231, 216, 0.14);

  border-radius:
    0;

  outline:
    none;

  transition:
    border-color
      0.3s
      ease,
    background
      0.3s
      ease;
}


textarea {
  min-height:
    8rem;

  resize:
    vertical;
}


input[type="text"]::placeholder,
textarea::placeholder {
  color:
    rgba(241, 231, 216, 0.3);
}


input[type="text"]:focus,
textarea:focus,
select:focus {
  border-color:
    rgba(215, 163, 129, 0.72);

  background:
    rgba(255, 255, 255, 0.055);
}


select {
  cursor:
    pointer;
}


select option {
  color:
    #1a0c08;

  background:
    var(--cream);
}


/* ====================================================== */
/* CHOICES */
/* ====================================================== */

.choice-row,
.checkbox-grid {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    0.7rem;
}


.choice-pill,
.checkbox-pill {
  position:
    relative;

  cursor:
    pointer;
}


.choice-pill input,
.checkbox-pill input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.choice-pill span,
.checkbox-pill span {
  min-height:
    2.85rem;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0.72rem
    1rem;

  color:
    rgba(241, 231, 216, 0.7);

  border:
    1px solid
    rgba(241, 231, 216, 0.14);

  background:
    rgba(255, 255, 255, 0.02);

  font-size:
    0.75rem;

  transition:
    color
      0.25s
      ease,
    border-color
      0.25s
      ease,
    background
      0.25s
      ease;
}


.choice-pill
input:checked
+ span,
.checkbox-pill
input:checked
+ span {
  color:
    var(--cream);

  border-color:
    rgba(215, 163, 129, 0.68);

  background:
    rgba(185, 121, 84, 0.14);
}


/* ====================================================== */
/* HONEYPOT */
/* ====================================================== */

.honeypot {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;

  clip:
    rect(
      0 0 0 0
    ) !important;

  white-space:
    nowrap !important;
}


/* ====================================================== */
/* FORM ACTIONS */
/* ====================================================== */

.form-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    1.2rem;

  flex-wrap:
    wrap;

  margin-top:
    0.5rem;
}


.luxury-button--light {
  color:
    var(--espresso);

  background:
    var(--ivory);

  border-color:
    var(--ivory);
}


.luxury-button--light:hover {
  color:
    var(--cream);

  background:
    transparent;

  border-color:
    var(--bronze-light);
}


.luxury-button--light
.luxury-button__arrow {
  color:
    var(--cream);

  background:
    var(--chocolate);
}


.form-status {
  min-height:
    1.5em;

  margin:
    0;

  color:
    rgba(241, 231, 216, 0.65);

  font-size:
    0.82rem;
}


.form-status.is-success {
  color:
    #d5c8a8;
}


.form-status.is-error {
  color:
    #f0a89c;
}


/* ====================================================== */
/* FOOTER */
/* ====================================================== */

.footer {
  min-height:
    50svh;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    5rem 1.2rem;

  text-align:
    center;

  color:
    var(--ink);

  background:
    var(--cream);
}


.footer__line {
  width:
    1px;

  height:
    4rem;

  margin-bottom:
    2rem;

  background:
    rgba(91, 47, 33, 0.35);
}


.footer p {
  margin:
    0;

  color:
    rgba(29, 16, 12, 0.54);

  font-size:
    0.72rem;

  font-weight:
    500;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.footer strong {
  margin-top:
    0.8rem;

  font-family:
    var(--serif);

  font-size:
    clamp(
      3.2rem,
      8vw,
      7rem
    );

  font-weight:
    400;

  line-height:
    0.9;
}


/* ====================================================== */
/* ANIMATIONS */
/* ====================================================== */

@keyframes curtainFoldMovement {

  from {
    background-position:
      0% 50%;
  }

  to {
    background-position:
      25% 50%;
  }

}


@keyframes slowRotate {

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes scrollLine {

  0% {
    transform:
      translateY(-110%);
  }

  55%,
  100% {
    transform:
      translateY(220%);
  }

}


/* ====================================================== */
/* TABLET */
/* ====================================================== */

@media (max-width: 980px) {

  .intro__grid,
  .timeline-layout,
  .dress-code__layout,
  .rsvp__layout {
    grid-template-columns:
      1fr;
  }


  .section-number {
    display:
      none;
  }


  .timeline-heading,
  .rsvp__intro {
    position:
      static;
  }


  .details-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .detail-card--venue {
    grid-column:
      1 / -1;

    min-height:
      20rem;

    border-top:
      1px solid
      var(--line);
  }


  .detail-card:nth-child(2) {
    border-right:
      0;
  }


  .palette {
    min-height:
      17rem;
  }

}


/* ====================================================== */
/* MOBILE */
/* ====================================================== */

@media (max-width: 680px) {

  .section {
    padding:
      5.4rem 0;
  }


  .section__shell {
    width:
      min(
        calc(100% - 1.5rem),
        1180px
      );
  }


  /* COVER */

  .cover__frame {
    inset:
      max(
        0.55rem,
        env(safe-area-inset-top)
      )
      0.55rem
      max(
        0.55rem,
        env(safe-area-inset-bottom)
      );
  }


  .cover__content {
    width:
      calc(
        100% -
        1.25rem
      );

    padding:
      2rem
      0.7rem;
  }


  .cover__monogram {
    width:
      clamp(
        6.5rem,
        32vw,
        8.5rem
      );
  }


  .cover__title {
    font-size:
      clamp(
        2.4rem,
        12vw,
        3.7rem
      );
  }


  .cover__button {
    min-width:
      min(
        270px,
        88vw
      );

    margin-top:
      2.2rem;
  }


  .cover__bottom {
    bottom:
      max(
        1.15rem,
        env(safe-area-inset-bottom)
      );
  }


  /* HERO */

  .hero__content {
    padding-inline:
      0.5rem;
  }


  .hero__names {
    font-size:
      clamp(
        4rem,
        22vw,
        6.6rem
      );
  }


  .hero__subtitle {
    max-width:
      28rem;
  }


  /* INTRO */

  .intro__grid {
    gap:
      3rem;
  }


  .countdown {
    gap:
      0.35rem;
  }


  .countdown__item strong {
    font-size:
      clamp(
        1.8rem,
        10vw,
        2.6rem
      );
  }


  /* DETAILS */

  .details-grid {
    grid-template-columns:
      1fr;
  }


  .detail-card,
  .detail-card--venue {
    min-height:
      20rem;

    border-right:
      0;

    border-top:
      1px solid
      var(--line);
  }


  .detail-card:first-child {
    border-top:
      0;
  }


  /* TIMELINE */

  .timeline::before {
    left:
      4.95rem;
  }


  .timeline-item {
    grid-template-columns:
      4rem
      1fr;

    gap:
      1.2rem;
  }


  .timeline-item__content {
    padding-left:
      1.4rem;
  }


  /* PALETTE */

  .palette {
    min-height:
      14rem;
  }


  .palette-swatch span {
    bottom:
      0.8rem;

    font-size:
      0.48rem;
  }


  /* GALLERY */

  .gallery-grid {
    grid-template-columns:
      1fr;
  }


  .gallery-card,
  .gallery-card:nth-child(odd),
  .gallery-card:nth-child(even) {
    grid-column:
      auto;

    min-height:
      24rem;
  }


  /* RSVP */

  .rsvp-form {
    grid-template-columns:
      1fr;
  }


  .form-field--full {
    grid-column:
      auto;
  }


  .choice-row,
  .checkbox-grid {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .choice-pill span,
  .checkbox-pill span {
    width:
      100%;
  }


  .form-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .form-actions
  .luxury-button {
    width:
      100%;
  }

}


/* ====================================================== */
/* SHORT MOBILE */
/* ====================================================== */

@media
(max-height: 700px)
and
(max-width: 680px) {

  .cover__content {
    transform:
      scale(0.88);
  }


  .cover.is-opening
  .cover__content {
    transform:
      scale(0.85);
  }


  .cover__eyebrow {
    margin-bottom:
      1.1rem;
  }


  .cover__monogram {
    width:
      6rem;

    margin-bottom:
      1rem;
  }


  .cover__ornament {
    margin-bottom:
      0.9rem;
  }


  .cover__button {
    margin-top:
      1.5rem;
  }


  .cover__bottom {
    display:
      none;
  }

}


/* ====================================================== */
/* REDUCED MOTION */
/* ====================================================== */

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

  html {
    scroll-behavior:
      auto;
  }


  .curtain,
  .cover__content,
  .cover__frame,
  .cover__bottom,
  .curtain-seam {
    transition-duration:
      0.01ms !important;
  }


  .curtain__folds,
  .hero__glow,
  .scroll-cue i::after {
    animation:
      none !important;
  }

}

/* ====================================================== */
/* FOOTER */
/* ====================================================== */

.footer {
  position: relative;

  min-height:
    58svh;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    clamp(
      5rem,
      10vw,
      8rem
    )
    1.2rem
    clamp(
      2.8rem,
      6vw,
      4.5rem
    );

  text-align:
    center;

  color:
    var(--ink);

  background:
    var(--cream);
}


.footer__line {
  width:
    1px;

  height:
    4rem;

  margin-bottom:
    2rem;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(91, 47, 33, 0.38)
    );
}


.footer p {
  margin:
    0;

  color:
    rgba(29, 16, 12, 0.54);

  font-size:
    0.72rem;

  font-weight:
    500;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.footer > strong {
  margin-top:
    0.8rem;

  font-family:
    var(--serif);

  font-size:
    clamp(
      3.2rem,
      8vw,
      7rem
    );

  font-weight:
    400;

  line-height:
    0.9;
}


/* ====================================================== */
/* AACREATE BRAND */
/* ====================================================== */

.footer__brand {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  margin-top:
    clamp(
      3.8rem,
      8vw,
      6rem
    );
}


.footer__brand-line {
  width:
    clamp(
      3rem,
      6vw,
      4.5rem
    );

  height:
    1px;

  margin-bottom:
    clamp(
      1.8rem,
      4vw,
      2.5rem
    );

  background:
    rgba(
      29,
      16,
      12,
      0.16
    );
}


.footer__brand-link {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0.5rem 0.75rem;

  border-radius:
    0.8rem;

  text-decoration:
    none;

  opacity:
    0.52;

  transition:
    opacity
      0.4s
      ease,
    transform
      0.5s
      var(--ease-luxury);
}


.footer__brand-link:hover {
  opacity:
    0.82;

  transform:
    translateY(-2px);
}


.footer__brand-link:active {
  transform:
    translateY(0)
    scale(0.98);
}


.footer__brand-link:focus-visible {
  outline:
    1px solid
    rgba(
      29,
      16,
      12,
      0.35
    );

  outline-offset:
    5px;
}


.footer__brand-logo {
  display:
    block;

  width:
    clamp(
      7.5rem,
      13vw,
      10.5rem
    );

  height:
    auto;

  max-width:
    100%;

  object-fit:
    contain;

  user-select:
    none;

  -webkit-user-drag:
    none;
}


/* ====================================================== */
/* FOOTER MOBILE */
/* ====================================================== */

@media (max-width: 680px) {

  .footer {
    min-height:
      auto;

    padding:
      5.5rem
      1.2rem
      calc(
        2.4rem +
        env(safe-area-inset-bottom)
      );
  }


  .footer__brand {
    margin-top:
      3.5rem;
  }


  .footer__brand-line {
    margin-bottom:
      1.7rem;
  }


  .footer__brand-link {
    opacity:
      0.58;
  }


  .footer__brand-logo {
    width:
      8.5rem;
  }

}