:root {
  --deep: #063b5a;
  --ocean: #1778a7;
  --sky: #8fcde8;
  --ice: #eaf7fc;
  --pearl: #f8fbfc;
  --ink: #082c40;

  --white: #ffffff;

  --line: rgba(8, 44, 64, 0.14);

  --shadow:
    0 28px 80px rgba(2, 35, 54, 0.16);

  --radius: 30px;

  --shell:
    min(1180px, calc(100vw - 40px));

  --header-h: 78px;

  --ease-out:
    cubic-bezier(.2, .72, .2, 1);

  --font-serif:
    "Cormorant Garamond",
    "Baskerville",
    "Times New Roman",
    serif;

  --font-sans:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


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

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: var(--pearl);
  color: var(--ink);

  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;

  overflow-x: hidden;
}


body.invitation-locked {
  overflow: hidden;
}


.no-js body.invitation-locked {
  overflow: auto;
}


button,
input,
textarea {
  font: inherit;
}


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


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


img,
video {
  display: block;
  max-width: 100%;
}


::selection {
  background: var(--ocean);
  color: #fff;
}


/* =========================================
   МЕЛКАЯ ТЕКСТУРА
========================================= */

.ambient-noise {
  position: fixed;
  inset: 0;

  z-index: 9000;

  opacity: 0.035;
  pointer-events: none;

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


/* =========================================
   ОБЛОЖКА
========================================= */

.cover {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: grid;
  place-items: center;

  min-height: 100svh;

  overflow: hidden;

  background: var(--deep);

  perspective: 1500px;

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


.no-js .cover {
  display: none;
}


.cover__video,
.hero__video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  /*
    Видео вертикальное.
    На широких экранах смещаем кадр вниз,
    чтобы яхта чаще оставалась в кадре.
  */
  object-position: center 66%;
}


.cover__video {
  transform: scale(1.025);

  filter:
    saturate(0.98)
    contrast(1.03);
}


.cover__veil {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(1, 24, 38, 0.12),
      rgba(1, 31, 48, 0.22) 52%,
      rgba(0, 19, 30, 0.48)
    ),
    radial-gradient(
      circle at 50% 28%,
      rgba(255,255,255,0.08),
      transparent 45%
    );
}


.cover__sparkles {
  position: absolute;
  inset: 0;

  opacity: 0.45;

  background:
    radial-gradient(
      circle at 14% 22%,
      rgba(255,255,255,0.95) 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 79% 31%,
      rgba(255,255,255,0.8) 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 68% 76%,
      rgba(255,255,255,0.65) 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 27% 67%,
      rgba(255,255,255,0.7) 0 1px,
      transparent 2px
    );

  background-size:
    260px 260px,
    330px 330px,
    390px 390px,
    470px 470px;

  animation:
    sparkleDrift 9s linear infinite;
}


/* =========================================
   КНИГА / ПРИГЛАШЕНИЕ
========================================= */

.folio-scene {
  position: relative;

  z-index: 3;

  width: min(82vw, 450px);

  aspect-ratio: 0.78;

  perspective: 1500px;

  filter:
    drop-shadow(
      0 38px 70px
      rgba(1, 25, 38, 0.34)
    );
}


.folio {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;
}


/* внутренняя карточка */

.folio__inside {
  position: absolute;

  inset: 1.5%;

  z-index: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 12px;

  padding: 28px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,0.82);

  border-radius: 28px;

  color: var(--deep);

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(143,205,232,0.34),
      transparent 38%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(232,247,252,0.95)
    );

  box-shadow:
    inset 0 0 0 8px
    rgba(255,255,255,0.5);

  transform:
    translateZ(-12px)
    scale(0.985);

  transition:
    transform 1.2s var(--ease-out),
    box-shadow 1.2s var(--ease-out);
}


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

  position: absolute;

  width: 180px;
  height: 180px;

  border:
    1px solid rgba(23,120,167,0.18);

  border-radius: 50%;
}


.folio__inside::before {
  left: -100px;
  top: -85px;
}


.folio__inside::after {
  right: -100px;
  bottom: -85px;
}


.folio__inside-kicker {
  font-size: 10px;

  letter-spacing: 0.38em;

  text-transform: uppercase;

  opacity: 0.64;
}


.folio__inside-names {
  font-family: var(--font-serif);

  font-size:
    clamp(39px, 9vw, 58px);

  font-weight: 500;

  line-height: 0.98;
}


.folio__inside-date {
  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  opacity: 0.72;
}


/* =========================================
   СТВОРКИ
========================================= */

.folio__door {
  position: absolute;

  top: 0;
  bottom: 0;

  z-index: 2;

  width: 50.25%;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,0.75);

  background:
    linear-gradient(
      165deg,
      rgba(255,255,255,0.99),
      rgba(220,239,248,0.96) 52%,
      rgba(255,255,255,0.98)
    );

  backface-visibility: hidden;

  transform-style: preserve-3d;

  transition:
    transform 1.2s
      cubic-bezier(.18,.72,.16,1),
    filter 0.9s ease;

  will-change: transform;
}


.folio__door::before {
  content: "";

  position: absolute;

  inset: 16px;

  border:
    1px solid rgba(6,59,90,0.11);

  pointer-events: none;
}


.folio__door--left {
  left: 0;

  border-radius:
    30px 1px 1px 30px;

  transform-origin:
    left center;
}


.folio__door--right {
  right: 0;

  border-radius:
    1px 30px 30px 1px;

  transform-origin:
    right center;
}


.folio__shine {
  position: absolute;

  inset: -20%;

  background:
    linear-gradient(
      105deg,
      transparent 30%,
      rgba(255,255,255,0.75) 47%,
      transparent 64%
    );

  transform:
    translateX(-70%)
    rotate(4deg);

  animation:
    coverShine 4.8s
    ease-in-out infinite;
}


.folio__door--right .folio__shine {
  animation-delay: 0.3s;
}


/* =========================================
   КНОПКА ОТКРЫТИЯ
========================================= */

.cover-open {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 5;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 12px;

  min-width:
    min(80%, 320px);

  padding:
    10px 14px 10px 10px;

  border:
    1px solid rgba(6,59,90,0.12);

  border-radius: 999px;

  color: var(--deep);

  cursor: pointer;

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

  box-shadow:
    0 18px 48px
    rgba(4,49,72,0.2);

  transform:
    translate(-50%, -50%);

  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s ease,
    opacity 0.3s ease;
}


.cover-open:hover {
  transform:
    translate(-50%, -50%)
    scale(1.025);

  box-shadow:
    0 24px 65px
    rgba(4,49,72,0.28);
}


.cover-open:focus-visible {
  outline:
    3px solid rgba(255,255,255,0.8);

  outline-offset: 5px;
}


.cover-open__seal {
  display: grid;

  place-items: center;

  width: 46px;

  aspect-ratio: 1;

  border-radius: 50%;

  color: white;

  font-family:
    var(--font-serif);

  font-size: 18px;

  letter-spacing: 0.04em;

  background:
    linear-gradient(
      145deg,
      var(--ocean),
      var(--deep)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,0.25);
}


.cover-open__text {
  font-size: 12px;
  font-weight: 650;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.cover-open__arrow {
  font-size: 20px;

  transition:
    transform 0.3s ease;
}


.cover-open:hover
.cover-open__arrow {
  transform:
    translateX(3px);
}


.cover__hint {
  position: absolute;

  z-index: 4;

  bottom:
    max(
      24px,
      env(safe-area-inset-bottom)
    );

  margin: 0;

  color:
    rgba(255,255,255,0.78);

  font-size: 10px;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}


/* =========================================
   СОСТОЯНИЕ ОТКРЫТИЯ
========================================= */

.cover.is-opening
.folio__door--left {
  transform:
    rotateY(-112deg);

  filter:
    brightness(1.04);
}


.cover.is-opening
.folio__door--right {
  transform:
    rotateY(112deg);

  filter:
    brightness(1.04);
}


.cover.is-opening
.folio__inside {
  transform:
    translateZ(26px)
    scale(1.025);

  box-shadow:
    0 35px 90px
    rgba(1,36,55,0.22),

    inset 0 0 0 8px
    rgba(255,255,255,0.5);
}


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

  pointer-events: none;

  transform:
    translate(-50%, -50%)
    scale(0.82);
}


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

  transition:
    opacity 0.25s ease;
}


.cover.is-leaving {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}


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

@keyframes sparkleDrift {
  to {
    transform:
      translate3d(
        14px,
        -10px,
        0
      );
  }
}


@keyframes coverShine {

  0%,
  35% {
    transform:
      translateX(-75%)
      rotate(4deg);

    opacity: 0;
  }

  52% {
    opacity: 0.7;
  }

  68%,
  100% {
    transform:
      translateX(75%)
      rotate(4deg);

    opacity: 0;
  }
}


/* =========================================
   HEADER
========================================= */

.site-header {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 100;

  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;

  min-height:
    var(--header-h);

  padding:
    0
    max(
      24px,
      calc((100vw - 1180px) / 2)
    );

  color: white;

  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease,
    min-height 0.35s ease;
}


.site-header.is-scrolled {
  min-height: 66px;

  color: var(--ink);

  background:
    rgba(248,251,252,0.9);

  box-shadow:
    0 1px 0
    rgba(8,44,64,0.08);

  backdrop-filter:
    blur(18px);
}


.brand {
  position: relative;

  z-index: 102;

  display: inline-flex;

  align-items: center;

  gap: 12px;
}


.brand__mark {
  display: grid;

  place-items: center;

  width: 38px;

  aspect-ratio: 1;

  border:
    1px solid currentColor;

  border-radius: 50%;

  font-family:
    var(--font-serif);

  font-size: 15px;
}


.brand__names {
  font-family:
    var(--font-serif);

  font-size: 21px;
}


.site-nav {
  display: flex;

  align-items: center;

  gap: 26px;
}


.site-nav a {
  position: relative;

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.site-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;
  bottom: -5px;

  height: 1px;

  background:
    currentColor;

  transition:
    right 0.3s ease;
}


.site-nav a:hover::after {
  right: 0;
}


.menu-toggle {
  display: none;
}


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

.hero {
  position: relative;

  display: grid;

  place-items: center;

  min-height: 100svh;

  overflow: hidden;

  color: white;

  background:
    var(--deep);
}


.hero__video {
  filter:
    saturate(0.98)
    contrast(1.03);

  transform:
    scale(1.015);
}


.hero__veil {
  position: absolute;
  inset: 0;

  background:

    linear-gradient(
      180deg,
      rgba(0,25,40,0.22),
      rgba(0,35,54,0.04) 34%,
      rgba(0,34,53,0.18) 67%,
      rgba(0,22,35,0.58)
    ),

    radial-gradient(
      circle at 50% 22%,
      rgba(255,255,255,0.04),
      transparent 44%
    );
}


.hero__sun {
  position: absolute;

  top: 15%;
  left: 13%;

  width: 180px;
  height: 180px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.25),
      rgba(255,255,255,0.05) 32%,
      transparent 68%
    );

  filter:
    blur(5px);

  animation:
    sunPulse 5s
    ease-in-out infinite;
}


.hero__content {
  position: relative;

  z-index: 2;

  width:
    min(
      900px,
      calc(100vw - 40px)
    );

  padding:
    120px 0 110px;

  text-align: center;
}


.eyebrow {
  margin:
    0 0 16px;

  font-size: 11px;

  font-weight: 650;

  letter-spacing: 0.34em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.82);
}


.eyebrow--dark {
  color:
    var(--ocean);
}


.hero__title {
  display: flex;

  align-items: center;
  justify-content: center;

  gap:
    clamp(
      18px,
      4vw,
      44px
    );

  margin: 0;

  font-family:
    var(--font-serif);

  font-size:
    clamp(
      72px,
      12vw,
      154px
    );

  font-weight: 400;

  line-height: 0.82;

  letter-spacing: -0.04em;

  text-shadow:
    0 10px 40px
    rgba(0,26,42,0.16);
}


.hero__ampersand {
  font-size: 0.46em;

  font-style: italic;

  opacity: 0.8;

  transform:
    translateY(7px);
}


.hero__date {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 14px;

  margin:
    30px 0 0;

  font-size: 12px;

  font-weight: 650;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


.hero__dot {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    currentColor;

  opacity: 0.7;
}


.hero__lead {
  max-width: 560px;

  margin:
    28px auto 30px;

  color:
    rgba(255,255,255,0.9);

  font-size:
    clamp(
      15px,
      2vw,
      18px
    );
}


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

.button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 14px;

  min-height: 54px;

  padding:
    0 28px;

  border: 0;

  border-radius: 999px;

  cursor: pointer;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s ease,
    background 0.3s ease;
}


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


.button--glass {
  border:
    1px solid rgba(255,255,255,0.48);

  color: white;

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

  backdrop-filter:
    blur(12px);
}


.button--glass:hover {
  background:
    rgba(255,255,255,0.18);
}


.button--primary {
  width: 100%;

  color: white;

  background:
    linear-gradient(
      135deg,
      var(--ocean),
      var(--deep)
    );

  box-shadow:
    0 15px 35px
    rgba(6,59,90,0.18);
}


.button--primary:disabled {
  cursor: wait;

  opacity: 0.65;

  transform: none;
}


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

.hero__scroll {
  position: absolute;

  z-index: 2;

  right:
    max(
      24px,
      calc((100vw - 1180px) / 2)
    );

  bottom: 32px;

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 9px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  opacity: 0.75;

  transform:
    rotate(90deg)
    translateX(38%);

  transform-origin:
    right bottom;
}


.hero__scroll i {
  display: block;

  width: 54px;
  height: 1px;

  overflow: hidden;

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


.hero__scroll i::after {
  content: "";

  display: block;

  width: 50%;
  height: 100%;

  background: white;

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


@keyframes scrollLine {

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

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

}


@keyframes sunPulse {

  50% {
    transform:
      scale(1.08);

    opacity: 0.72;
  }

}


/* =========================================
   COMMON SECTIONS
========================================= */

.section {
  position: relative;

  padding:
    clamp(
      86px,
      11vw,
      150px
    )
    0;
}


.shell {
  width:
    var(--shell);

  margin:
    0 auto;
}


.section-heading {
  max-width: 650px;

  margin-bottom: 56px;
}


.section-heading--center {
  margin:
    0 auto 56px;

  text-align: center;
}


.section-heading h2,
.location h2,
.dresscode h2,
.rsvp h2 {
  margin:
    0 0 20px;

  font-family:
    var(--font-serif);

  font-size:
    clamp(
      48px,
      7vw,
      86px
    );

  font-weight: 400;

  line-height: 0.98;

  letter-spacing: -0.025em;
}


.section-heading p:last-child,
.location__copy > p,
.dresscode__copy > p,
.rsvp__intro > p {
  color:
    rgba(8,44,64,0.68);
}


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

.intro {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      var(--pearl)
    );
}


.date-card {
  display: grid;

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

  align-items: center;

  gap: 26px;

  max-width: 760px;

  margin:
    0 auto;

  text-align: center;
}


.date-card__line {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(23,120,167,0.35)
    );
}


.date-card__line:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(23,120,167,0.35),
      transparent
    );
}


.date-card small {
  display: block;

  margin-bottom: 5px;

  color:
    var(--ocean);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}


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

  font-size: 24px;

  font-weight: 500;

  white-space: nowrap;
}


.date-card__compass {
  display: grid;

  place-items: center;

  width: 42px;

  aspect-ratio: 1;

  border:
    1px solid rgba(23,120,167,0.22);

  border-radius: 50%;

  color:
    var(--ocean);
}


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

.countdown {
  display: grid;

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

  gap: 1px;

  max-width: 770px;

  margin:
    58px auto 0;

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

  border-radius:
    var(--radius);

  overflow: hidden;

  background:
    var(--line);

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


.countdown > div {
  padding:
    26px 12px;

  text-align: center;

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


.countdown strong {
  display: block;

  font-family:
    var(--font-serif);

  font-size:
    clamp(
      38px,
      6vw,
      60px
    );

  font-weight: 400;

  line-height: 1;
}


.countdown span {
  display: block;

  margin-top: 7px;

  color:
    rgba(8,44,64,0.48);

  font-size: 9px;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


/* =========================================
   SEA QUOTE
========================================= */

.sea-quote {
  position: relative;

  display: grid;

  place-items: center;

  min-height:
    min(72vh, 720px);

  padding:
    80px 20px;

  overflow: hidden;

  color: white;

  background:

    radial-gradient(
      circle at 50% 15%,
      rgba(143,205,232,0.3),
      transparent 35%
    ),

    linear-gradient(
      165deg,
      #0f6f9c 0%,
      #07486d 43%,
      #032f4a 100%
    );
}


.sea-quote::before,
.sea-quote::after {
  content: "";

  position: absolute;

  left: -10%;

  width: 120%;
  height: 180px;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,0.12);

  transform:
    rotate(-4deg);
}


.sea-quote::before {
  top: 18%;
}


.sea-quote::after {
  bottom: 12%;

  transform:
    rotate(5deg);
}


.sea-quote__glow {
  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

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

  filter:
    blur(40px);
}


.sea-quote__content {
  position: relative;

  z-index: 2;

  max-width: 760px;

  text-align: center;
}


.sea-quote__content span {
  font-family:
    var(--font-serif);

  font-size: 68px;

  opacity: 0.48;
}


.sea-quote__content p {
  margin: 0;

  font-family:
    var(--font-serif);

  font-size:
    clamp(
      34px,
      5vw,
      64px
    );

  line-height: 1.08;
}


/* =========================================
   LOCATION
========================================= */

.location {
  background:
    var(--pearl);
}


.location__grid {
  display: grid;

  grid-template-columns:
    1.12fr 0.88fr;

  gap:
    clamp(
      40px,
      7vw,
      100px
    );

  align-items: center;
}


.location__visual {
  min-width: 0;
}


.location__image,
.location__art {
  position: relative;

  aspect-ratio: 0.88;

  overflow: hidden;

  border-radius:
    var(--radius);

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


.location__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.location__art {
  background:

    radial-gradient(
      circle at 25% 23%,
      rgba(255,255,255,0.95) 0 2%,
      rgba(255,255,255,0.25) 3%,
      transparent 12%
    ),

    linear-gradient(
      #77c2e3 0 46%,
      #e7f7fc 46% 47%,
      #0c6d98 47% 100%
    );
}


.location__art::after {
  content: "";

  position: absolute;

  left: -10%;
  right: -10%;
  bottom: 0;

  height: 47%;

  opacity: 0.65;

  background:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0 18px,
      rgba(255,255,255,0.22)
        19px 21px,
      transparent 22px 36px
    );

  transform:
    skewY(-4deg);
}


.location__horizon {
  position: absolute;

  left: 0;
  right: 0;
  top: 47%;

  height: 1px;

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


.location__boat {
  position: absolute;

  z-index: 2;

  left: 50%;
  top: 57%;

  color: white;

  font-size: 130px;

  font-family:
    var(--font-serif);

  transform:
    translate(-50%, -50%)
    rotate(-4deg);

  text-shadow:
    0 12px 20px
    rgba(0,31,49,0.16);
}


.location__copy {
  max-width: 520px;
}


.location__address {
  margin-top: -6px;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color:
    var(--ocean) !important;
}


.text-link {
  display: inline-flex;

  gap: 8px;

  margin-top: 12px;

  padding-bottom: 4px;

  border-bottom:
    1px solid rgba(8,44,64,0.35);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* =========================================
   PROGRAM
========================================= */

.program {
  overflow: hidden;

  background: white;
}


.program::before {
  content: "";

  position: absolute;

  top: -180px;
  right: -150px;

  width: 480px;
  height: 480px;

  border:
    1px solid rgba(23,120,167,0.09);

  border-radius: 50%;
}


.timeline {
  position: relative;

  max-width: 920px;

  margin-left: auto;
}


.timeline::before {
  content: "";

  position: absolute;

  left: 122px;

  top: 0;
  bottom: 0;

  width: 1px;

  background:
    linear-gradient(
      var(--ocean),
      rgba(23,120,167,0.08)
    );
}


.timeline__item {
  position: relative;

  display: grid;

  grid-template-columns:
    96px 1fr;

  gap: 54px;

  padding:
    0 0 48px;
}


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


.timeline__time {
  padding-top: 5px;

  color:
    var(--ocean);

  font-family:
    var(--font-serif);

  font-size: 28px;

  text-align: right;
}


.timeline__content {
  position: relative;

  padding:
    0 0 0 22px;
}


.timeline__content::before {
  content: "";

  position: absolute;

  left: -34px;
  top: 13px;

  width: 10px;
  height: 10px;

  border:
    3px solid white;

  border-radius: 50%;

  background:
    var(--ocean);

  box-shadow:
    0 0 0 1px
    var(--ocean);
}


.timeline__content h3 {
  margin:
    0 0 8px;

  font-family:
    var(--font-serif);

  font-size: 32px;

  font-weight: 500;
}


.timeline__content p {
  max-width: 590px;

  margin: 0;

  color:
    rgba(8,44,64,0.62);
}


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

.dresscode {
  color: white;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #0d6d98,
      #063d5d 55%,
      #042f49
    );
}


.dresscode::before {
  content: "";

  position: absolute;

  inset: -20%;

  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(255,255,255,0.14),
      transparent 30%
    );
}


.dresscode__grid {
  position: relative;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 70px;

  align-items: center;
}


.dresscode__copy {
  max-width: 620px;
}


.dresscode__copy > p {
  color:
    rgba(255,255,255,0.76);
}


.palette {
  display: flex;

  gap: 10px;

  margin-top: 34px;
}


.palette__color {
  width:
    clamp(
      48px,
      6vw,
      66px
    );

  aspect-ratio: 1;

  border:
    5px solid rgba(255,255,255,0.18);

  border-radius: 50%;

  box-shadow:
    0 8px 25px
    rgba(0,0,0,0.12);

  transition:
    transform 0.3s ease;
}


.palette__color:hover {
  transform:
    translateY(-5px);
}


.dresscode__rings {
  position: relative;

  min-height: 420px;
}


.dresscode__rings span {
  position: absolute;

  border:
    1px solid rgba(255,255,255,0.25);

  border-radius: 50%;
}


.dresscode__rings
span:first-child {
  width: 330px;
  height: 330px;

  right: 12%;
  top: 10%;

  animation:
    ringFloat
    7s
    ease-in-out
    infinite;
}


.dresscode__rings
span:nth-child(2) {
  width: 250px;
  height: 250px;

  right: 32%;
  top: 25%;

  animation:
    ringFloat
    7s
    ease-in-out
    infinite reverse;
}


.dresscode__rings i {
  position: absolute;

  right: 33%;
  top: 31%;

  font-family:
    var(--font-serif);

  font-size: 120px;

  font-style: normal;

  opacity: 0.72;
}


@keyframes ringFloat {

  50% {
    transform:
      translate3d(
        8px,
        -12px,
        0
      )
      rotate(5deg);
  }

}


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

.rsvp {
  background:
    linear-gradient(
      180deg,
      var(--pearl),
      #ffffff
    );
}


.rsvp__grid {
  display: grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap:
    clamp(
      50px,
      8vw,
      110px
    );

  align-items: start;
}


.rsvp__intro {
  position: sticky;

  top: 120px;
}


.rsvp__note {
  margin-top: 34px;

  padding-top: 24px;

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

  font-size: 13px;
}


.rsvp-form {
  display: grid;

  gap: 24px;

  padding:
    clamp(
      24px,
      5vw,
      48px
    );

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

  border-radius:
    var(--radius);

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

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


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

.field {
  display: grid;

  gap: 9px;

  margin: 0;
}


.field > span,
.fieldset legend {
  color:
    rgba(8,44,64,0.72);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.field input,
.field textarea {
  width: 100%;

  border: 0;

  border-bottom:
    1px solid rgba(8,44,64,0.18);

  border-radius: 0;

  outline: 0;

  padding:
    10px 0 12px;

  color:
    var(--ink);

  background:
    transparent;

  transition:
    border-color 0.25s ease;
}


.field input:focus,
.field textarea:focus {
  border-color:
    var(--ocean);
}


.field textarea {
  resize: vertical;

  min-height: 110px;
}


.fieldset {
  border: 0;

  padding: 0;
}


.fieldset legend {
  margin-bottom: 10px;
}


/* =========================================
   RADIO BUTTONS
========================================= */

.choice-grid {
  display: grid;

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

  gap: 8px;
}


.choice-grid label {
  position: relative;

  cursor: pointer;
}


.choice-grid input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.choice-grid span {
  display: grid;

  place-items: center;

  min-height: 68px;

  padding:
    10px 12px;

  border:
    1px solid rgba(8,44,64,0.14);

  border-radius: 16px;

  color:
    rgba(8,44,64,0.68);

  font-size: 12px;

  text-align: center;

  transition:
    all 0.25s ease;
}


.choice-grid
input:checked + span {
  border-color:
    var(--ocean);

  color:
    var(--deep);

  background:
    var(--ice);

  box-shadow:
    inset 0 0 0 1px
    var(--ocean);
}


.choice-grid
input:focus-visible + span {
  outline:
    3px solid rgba(23,120,167,0.2);

  outline-offset: 2px;
}


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

.honeypot {
  position:
    absolute !important;

  left:
    -10000px !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;
}


.form-status {
  min-height: 24px;

  margin:
    -8px 0 0;

  font-size: 13px;

  text-align: center;
}


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


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


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

.footer {
  position: relative;

  padding:
    120px 20px 42px;

  overflow: hidden;

  color: white;

  text-align: center;

  background:
    var(--deep);
}


.footer__wave {
  position: absolute;

  top: -78px;
  left: -5%;

  width: 110%;
  height: 150px;

  border-radius: 50%;

  background:
    var(--pearl);
}


.footer__monogram {
  display: grid;

  place-items: center;

  width: 68px;

  aspect-ratio: 1;

  margin:
    0 auto 22px;

  border:
    1px solid rgba(255,255,255,0.45);

  border-radius: 50%;

  font-family:
    var(--font-serif);

  font-size: 26px;
}


.footer__names {
  margin: 0;

  font-family:
    var(--font-serif);

  font-size:
    clamp(
      42px,
      7vw,
      70px
    );
}


.footer__date {
  margin:
    9px 0 35px;

  color:
    rgba(255,255,255,0.58);

  font-size: 11px;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}


.footer__top {
  font-size: 10px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  opacity: 0.7;
}


.noscript {
  position: fixed;

  z-index: 10000;

  left: 15px;
  right: 15px;
  bottom: 15px;

  padding: 12px;

  border-radius: 12px;

  background: #fff;

  color: #111;

  text-align: center;
}


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

.js .reveal {
  opacity: 0;

  transform:
    translateY(26px);

  transition:
    opacity 0.85s ease,
    transform 0.85s var(--ease-out);
}


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

  transform: none;
}


.timeline__item.reveal:nth-child(2) {
  transition-delay: 0.07s;
}


.timeline__item.reveal:nth-child(3) {
  transition-delay: 0.14s;
}


.timeline__item.reveal:nth-child(4) {
  transition-delay: 0.21s;
}


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

@media (max-width: 900px) {

  :root {
    --header-h: 68px;
  }


  .site-header {
    padding:
      0 20px;
  }


  .menu-toggle {
    position: relative;

    z-index: 102;

    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    border: 0;

    border-radius: 50%;

    color: currentColor;

    background:
      transparent;

    cursor: pointer;
  }


  .menu-toggle span {
    position: absolute;

    width: 22px;
    height: 1px;

    background:
      currentColor;

    transition:
      transform 0.3s ease,
      top 0.3s ease;
  }


  .menu-toggle
  span:first-child {
    top: 18px;
  }


  .menu-toggle
  span:last-child {
    top: 25px;
  }


  .menu-toggle.is-active
  span:first-child {
    top: 22px;

    transform:
      rotate(45deg);
  }


  .menu-toggle.is-active
  span:last-child {
    top: 22px;

    transform:
      rotate(-45deg);
  }


  .site-nav {
    position: fixed;

    inset: 0;

    z-index: 101;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 26px;

    color: white;

    background:
      rgba(4,47,73,0.97);

    opacity: 0;

    visibility: hidden;

    transform:
      scale(1.02);

    transition:
      opacity 0.3s ease,
      visibility 0.3s ease,
      transform 0.3s ease;
  }


  .site-nav.is-open {
    opacity: 1;

    visibility: visible;

    transform: none;
  }


  .site-nav a {
    font-family:
      var(--font-serif);

    font-size: 34px;

    letter-spacing: 0;

    text-transform: none;
  }


  .hero__title {
    flex-direction: column;

    gap: 5px;

    font-size:
      clamp(
        76px,
        18vw,
        120px
      );
  }


  .hero__ampersand {
    margin:
      -4px 0;
  }


  .hero__scroll {
    display: none;
  }


  .location__grid,
  .dresscode__grid,
  .rsvp__grid {
    grid-template-columns:
      1fr;
  }


  .location__copy {
    max-width: 650px;
  }


  .dresscode__rings {
    min-height: 320px;
  }


  .rsvp__intro {
    position: static;
  }

}


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

@media (max-width: 640px) {

  :root {
    --shell:
      min(
        calc(100% - 28px),
        1180px
      );

    --radius: 24px;
  }


  body {
    font-size: 15px;
  }


  .cover__video,
  .hero__video {
    object-position:
      center center;
  }


  .folio-scene {
    width:
      min(
        86vw,
        390px
      );
  }


  .folio__door--left {
    border-radius:
      24px 1px 1px 24px;
  }


  .folio__door--right {
    border-radius:
      1px 24px 24px 1px;
  }


  .cover-open {
    min-width: 82%;
  }


  .cover-open__text {
    font-size: 10px;

    letter-spacing: 0.06em;
  }


  .cover__hint {
    font-size: 9px;
  }


  .brand__names {
    display: none;
  }


  .hero__content {
    padding:
      105px 0 90px;
  }


  .hero__title {
    font-size:
      clamp(
        66px,
        21vw,
        104px
      );
  }


  .hero__date {
    gap: 9px;

    font-size: 10px;

    letter-spacing: 0.12em;
  }


  .hero__lead {
    max-width: 88%;

    margin-top: 22px;
  }


  .section {
    padding:
      82px 0;
  }


  .section-heading {
    margin-bottom: 38px;
  }


  .section-heading h2,
  .location h2,
  .dresscode h2,
  .rsvp h2 {
    font-size:
      clamp(
        46px,
        14vw,
        67px
      );
  }


  .date-card {
    grid-template-columns:
      1fr auto 1fr;

    gap: 14px;
  }


  .date-card__line {
    display: none;
  }


  .date-card strong {
    font-size: 19px;
  }


  .date-card__compass {
    width: 34px;
  }


  .countdown {
    grid-template-columns:
      repeat(2, 1fr);

    border-radius: 22px;
  }


  .countdown > div {
    padding:
      22px 8px;
  }


  .sea-quote {
    min-height: 68vh;
  }


  .sea-quote__content p {
    font-size:
      clamp(
        34px,
        10.5vw,
        48px
      );
  }


  .location__image,
  .location__art {
    aspect-ratio: 0.86;
  }


  .timeline {
    margin-left: 0;
  }


  .timeline::before {
    left: 80px;
  }


  .timeline__item {
    grid-template-columns:
      60px 1fr;

    gap: 38px;

    padding-bottom: 38px;
  }


  .timeline__time {
    font-size: 22px;
  }


  .timeline__content {
    padding-left: 0;
  }


  .timeline__content::before {
    left: -23px;
    top: 10px;

    width: 9px;
    height: 9px;
  }


  .timeline__content h3 {
    font-size: 28px;

    line-height: 1.05;
  }


  .dresscode__grid {
    gap: 24px;
  }


  .dresscode__rings {
    min-height: 260px;

    transform:
      scale(0.78);

    transform-origin:
      center top;

    margin-bottom: -55px;
  }


  .palette {
    flex-wrap: wrap;
  }


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


  .choice-grid span {
    min-height: 54px;
  }


  .rsvp-form {
    gap: 21px;
  }

}


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

@media (max-width: 380px) {

  .cover-open__seal {
    width: 40px;
  }


  .hero__title {
    font-size: 68px;
  }


  .hero__date {
    flex-wrap: wrap;
  }


  .date-card {
    gap: 9px;
  }


  .date-card strong {
    font-size: 17px;
  }


  .timeline::before {
    left: 68px;
  }


  .timeline__item {
    grid-template-columns:
      52px 1fr;

    gap: 32px;
  }


  .timeline__content::before {
    left: -20px;
  }

}


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

@media
(orientation: landscape)
and
(max-height: 620px) {

  .folio-scene {
    width:
      min(
        42vw,
        330px
      );
  }


  .cover__hint {
    display: none;
  }


  .hero__content {
    padding-top: 90px;
    padding-bottom: 50px;
  }


  .hero__title {
    flex-direction: row;

    font-size:
      clamp(
        58px,
        11vw,
        90px
      );

    gap: 24px;
  }


  .hero__lead {
    margin:
      16px auto 18px;
  }

}


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

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

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }


  .js .reveal {
    opacity: 1;

    transform: none;
  }

}