:root {
  --bg: #f4f0e8;
  --paper: #fbf9f4;
  --ink: #1d1d1b;
  --muted: #77736c;
  --gold: #b49762;
  --line: rgba(29, 29, 27, 0.15);
  --dark: #1c1d1b;

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

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

  --shell:
    min(
      1160px,
      calc(100% - 64px)
    );
}


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

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  overflow-x: hidden;

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

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

  -webkit-font-smoothing: antialiased;
}


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


img {
  display: block;
  width: 100%;
}


a {
  color: inherit;
}


h1,
h2,
h3,
p,
figure,
blockquote {
  margin-top: 0;
}


h2 {
  margin-bottom: 24px;

  font-family: var(--serif);

  font-size:
    clamp(
      2.6rem,
      5vw,
      4.8rem
    );

  font-weight: 400;

  line-height: 0.98;

  letter-spacing:
    -0.035em;
}


.shell {
  width: var(--shell);
  margin-inline: auto;
}


.section {
  padding: 96px 0;
}


.eyebrow {
  margin-bottom: 18px;

  color: var(--gold);

  font-size: 0.72rem;
  font-weight: 600;

  line-height: 1.3;

  letter-spacing: 0.19em;

  text-transform: uppercase;
}


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

.reveal {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 0.9s ease,
    transform 0.9s
      cubic-bezier(
        .2,
        .7,
        .2,
        1
      );
}


.reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


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

.hero {
  position: relative;

  min-height: 760px;

  height:
    min(
      92vh,
      980px
    );

  overflow: hidden;

  background: #262724;

  color: #fff;
}


.hero__image,
.finale__image {
  position: absolute;

  inset: 0;

  height: 100%;

  object-fit: cover;
}


.hero__image {
  object-position:
    center 42%;

  animation:
    heroScale
    9s
    cubic-bezier(
      .2,
      .65,
      .2,
      1
    )
    both;
}


@keyframes heroScale {

  from {
    transform: scale(1.06);
  }

  to {
    transform: scale(1);
  }

}


.hero__veil {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(12, 13, 12, .45) 0%,
      rgba(12, 13, 12, .08) 35%,
      rgba(12, 13, 12, .5) 100%
    ),
    linear-gradient(
      90deg,
      rgba(12, 13, 12, .28),
      transparent 55%
    );
}


.hero__topline {
  position: absolute;

  z-index: 2;

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

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  padding:
    30px 42px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      .28
    );

  font-size: .66rem;
  font-weight: 500;

  letter-spacing: .2em;

  text-transform: uppercase;
}


.hero__content {
  position: absolute;

  z-index: 2;

  top: 50%;
  left: 50%;

  width:
    min(
      980px,
      calc(100% - 48px)
    );

  text-align: center;

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


.hero__content.is-visible {
  transform:
    translate(
      -50%,
      -50%
    );
}


.hero__eyebrow {
  margin-bottom: 22px;

  font-size: .68rem;
  font-weight: 500;

  letter-spacing: .19em;

  text-transform: uppercase;
}


.hero__title {
  display: flex;

  align-items: center;

  justify-content: center;

  gap:
    clamp(
      12px,
      2vw,
      28px
    );

  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      4.5rem,
      10.5vw,
      9.4rem
    );

  font-weight: 400;

  line-height: .74;

  letter-spacing:
    -0.055em;

  text-shadow:
    0 2px 28px
    rgba(
      0,
      0,
      0,
      .18
    );
}


.hero__title i,
.finale__names i {
  color: #d8bf90;

  font-family: var(--serif);

  font-weight: 400;
}


.hero__date {
  margin-top: 38px;

  font-family: var(--serif);

  font-size:
    clamp(
      1.25rem,
      2vw,
      1.65rem
    );

  letter-spacing: .17em;
}


.hero__scroll {
  position: absolute;

  z-index: 2;

  right: 42px;
  bottom: 30px;

  display: flex;

  align-items: center;

  gap: 14px;

  color:
    rgba(
      255,
      255,
      255,
      .8
    );

  font-size: .62rem;

  letter-spacing: .2em;

  text-decoration: none;

  text-transform: uppercase;
}


.hero__scroll-line {
  width: 56px;
  height: 1px;

  background:
    rgba(
      255,
      255,
      255,
      .55
    );

  transform-origin: left;

  transition:
    transform .3s ease;
}


.hero__scroll:hover
.hero__scroll-line {
  transform: scaleX(.7);
}


/* ============================================================
   INVITATION
============================================================ */

.invitation {
  background: var(--paper);
}


.invitation__grid {
  display: grid;

  grid-template-columns:
    100px
    minmax(0, 690px)
    1fr;

  gap: 48px;

  align-items: center;
}


.section-mark {
  align-self: start;

  padding-top: 4px;

  color: var(--muted);

  font-family: var(--serif);

  font-size: 1rem;
}


.invitation__copy h2 {
  max-width: 680px;
}


.invitation__copy >
p:not(.eyebrow):not(.signature) {
  max-width: 590px;

  margin-bottom: 30px;

  color: #53514d;

  font-size: 1rem;

  line-height: 1.8;
}


.signature {
  margin: 0;

  font-family: var(--serif);

  font-size: 1.55rem;

  font-style: italic;
}


.invitation__monogram {
  display: grid;

  width: 150px;
  height: 150px;

  place-items: center;

  justify-self: end;

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

  border-radius: 50%;

  color: var(--gold);

  font-family: var(--serif);

  font-size: 1.4rem;

  letter-spacing: .13em;
}


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

.details {
  background: var(--bg);
}


.details__head {
  display: flex;

  align-items: flex-end;

  justify-content:
    space-between;

  gap: 32px;

  margin-bottom: 44px;
}


.details__head h2 {
  max-width: 580px;

  margin: 0;

  text-align: right;
}


.details__head .eyebrow {
  margin-bottom: 8px;
}


.details__cards {
  display: grid;

  grid-template-columns:
    1fr 1fr;

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


.detail-card {
  position: relative;

  min-height: 285px;

  padding: 42px;

  background: var(--paper);
}


.detail-card +
.detail-card {
  border-left:
    1px solid
    var(--line);
}


.detail-card--dark {
  background: var(--dark);

  color: #f8f5ee;
}


.detail-card__number {
  position: absolute;

  top: 30px;
  right: 32px;

  color: var(--gold);

  font-family: var(--serif);

  font-size: 1rem;
}


.detail-card__label {
  margin-bottom: 44px;

  color: var(--gold);

  font-size: .68rem;
  font-weight: 600;

  letter-spacing: .18em;

  text-transform: uppercase;
}


.detail-card h3 {
  margin-bottom: 10px;

  font-family: var(--serif);

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

  font-weight: 400;

  line-height: 1;
}


.detail-card p:last-of-type {
  margin-bottom: 0;

  color: var(--muted);

  font-size: .9rem;
}


.detail-card--dark
p:last-of-type {
  color:
    rgba(
      255,
      255,
      255,
      .6
    );
}


.text-link {
  display: inline-block;

  margin-top: 24px;

  padding-bottom: 4px;

  border-bottom:
    1px solid currentColor;

  font-size: .72rem;

  letter-spacing: .1em;

  text-decoration: none;

  text-transform: uppercase;

  transition:
    opacity .2s ease;
}


.text-link:hover {
  opacity: .58;
}


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

.gallery {
  background: var(--paper);
}


.gallery__intro {
  display: grid;

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

  gap: 48px;

  align-items: end;

  margin-bottom: 44px;
}


.gallery__intro
.eyebrow {
  align-self: start;

  padding-top: 8px;
}


.gallery__intro h2,
.gallery__intro p {
  margin-bottom: 0;
}


.gallery__intro >
p:last-child {
  max-width: 320px;

  color: var(--muted);

  font-size: .9rem;
}


.gallery__grid {
  display: grid;

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

  gap: 12px;

  height:
    min(
      62vw,
      650px
    );
}


.gallery__item {
  height: 78%;

  margin: 0;

  align-self: end;

  overflow: hidden;

  background: #ded9d0;
}


.gallery__item--large {
  height: 100%;

  align-self: start;
}


.gallery__item img {
  height: 100%;

  object-fit: cover;

  transition:
    transform
    .8s
    cubic-bezier(
      .2,
      .6,
      .2,
      1
    );
}


.gallery__item:first-child img {
  object-position:
    center 30%;
}


.gallery__item:hover img {
  transform:
    scale(1.025);
}


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

.dress {
  background: #ded7ca;
}


.dress__grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 70px;

  align-items: end;
}


.dress h2 {
  max-width: 520px;

  margin-bottom: 0;
}


.dress__copy > p {
  max-width: 500px;

  margin-bottom: 30px;

  color: #56524a;
}


.palette {
  display: flex;

  gap: 12px;
}


.palette__swatch {
  width: 48px;
  height: 48px;

  border:
    1px solid
    rgba(
      29,
      29,
      27,
      .12
    );

  border-radius: 50%;

  box-shadow:
    inset
    0 0 0 2px
    rgba(
      255,
      255,
      255,
      .15
    );
}


/* ============================================================
   NOTE
============================================================ */

.note {
  background: var(--paper);

  text-align: center;
}


.note__inner {
  max-width: 850px;
}


.note__line {
  display: block;

  width: 1px;
  height: 42px;

  margin:
    0 auto 34px;

  background: var(--gold);
}


.note__line:last-child {
  margin:
    36px auto 0;
}


.note blockquote {
  margin: 0 auto;

  font-family: var(--serif);

  font-size:
    clamp(
      1.9rem,
      3.5vw,
      3rem
    );

  font-weight: 400;

  line-height: 1.15;
}


/* ============================================================
   FINALE
============================================================ */

.finale {
  position: relative;

  display: grid;

  min-height: 620px;

  height: 72vh;

  place-items: center;

  overflow: hidden;

  color: #fff;
}


.finale__image {
  object-position:
    center 46%;
}


.finale__veil {
  position: absolute;

  inset: 0;

  background:
    rgba(
      18,
      19,
      17,
      .52
    );
}


.finale__content {
  position: relative;

  z-index: 1;

  width:
    min(
      900px,
      calc(100% - 48px)
    );

  text-align: center;
}


.finale .eyebrow {
  color: #dec79b;
}


.finale h2 {
  margin-inline: auto;

  color: #fff;

  font-size:
    clamp(
      2.8rem,
      6vw,
      5.6rem
    );
}


.finale__names {
  margin-bottom: 0;

  font-family: var(--serif);

  font-size: 1.5rem;

  font-style: italic;
}


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

.footer {
  padding: 32px 0;

  background: #151614;

  color:
    rgba(
      255,
      255,
      255,
      .72
    );
}


.footer__inner {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 32px;
}


.footer__wedding,
.footer__creator {
  display: flex;

  align-items: center;

  gap: 22px;

  font-size: .62rem;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.footer__wedding
span + span::before {
  display: inline-block;

  width: 1px;
  height: 13px;

  margin-right: 22px;

  vertical-align: -2px;

  background:
    rgba(
      255,
      255,
      255,
      .25
    );

  content: "";
}


.footer__creator a {
  display: block;

  opacity: .9;

  transition:
    opacity .2s ease;
}


.footer__creator a:hover {
  opacity: .62;
}


.footer__creator img {
  width: auto;

  max-width: 112px;
  max-height: 30px;

  object-fit: contain;
}


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

@media (max-width: 900px) {

  :root {
    --shell:
      min(
        calc(100% - 40px),
        720px
      );
  }


  .section {
    padding: 76px 0;
  }


  .hero {
    min-height: 680px;

    height: 88svh;
  }


  .hero__topline {
    padding:
      24px 22px;
  }


  .hero__scroll {
    right: 22px;

    bottom: 22px;
  }


  .invitation__grid {
    grid-template-columns:
      54px 1fr;

    gap: 28px;
  }


  .invitation__monogram {
    display: none;
  }


  .gallery__intro {
    grid-template-columns:
      1fr 1.6fr;
  }


  .gallery__intro >
  p:last-child {
    grid-column: 2;
  }


  .gallery__grid {
    grid-template-columns:
      1.4fr 1fr;

    height: auto;
  }


  .gallery__item {
    height: 360px;
  }


  .gallery__item--large {
    grid-row:
      span 2;

    height: 100%;
  }


  .gallery__item:nth-child(2),
  .gallery__item:nth-child(3) {
    height: 280px;
  }


  .dress__grid {
    gap: 44px;
  }

}


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

@media (max-width: 640px) {

  :root {
    --shell:
      calc(100% - 32px);
  }


  body {
    font-size: 16px;
  }


  .section {
    padding: 62px 0;
  }


  h2 {
    font-size:
      clamp(
        2.7rem,
        13vw,
        4rem
      );
  }


  .hero {
    min-height: 640px;

    height: 88svh;
  }


  .hero__image {
    object-position:
      56% center;
  }


  .hero__topline {
    padding:
      20px 18px;
  }


  .hero__content {
    width:
      calc(100% - 28px);
  }


  .hero__eyebrow {
    max-width: 310px;

    margin:
      0 auto 18px;

    line-height: 1.55;
  }


  .hero__title {
    flex-direction: column;

    gap: 8px;

    font-size:
      clamp(
        4.1rem,
        22vw,
        6.8rem
      );

    line-height: .66;
  }


  .hero__title i {
    font-size: .5em;

    line-height: .65;
  }


  .hero__date {
    margin-top: 32px;

    font-size: 1.1rem;
  }


  .hero__scroll
  span:first-child {
    display: none;
  }


  .hero__scroll-line {
    width: 42px;
  }


  .invitation__grid {
    display: block;
  }


  .section-mark {
    margin-bottom: 28px;
  }


  .invitation__copy >
  p:not(.eyebrow):not(.signature) {
    font-size: .95rem;
  }


  .details__head {
    display: block;

    margin-bottom: 30px;
  }


  .details__head h2 {
    text-align: left;
  }


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


  .detail-card {
    min-height: 245px;

    padding:
      30px 26px;
  }


  .detail-card +
  .detail-card {
    border-top:
      1px solid
      var(--line);

    border-left: 0;
  }


  .detail-card__label {
    margin-bottom: 34px;
  }


  .detail-card h3 {
    font-size: 2.55rem;
  }


  .gallery__intro {
    display: block;

    margin-bottom: 30px;
  }


  .gallery__intro h2 {
    margin-bottom: 20px;
  }


  .gallery__grid {
    grid-template-columns:
      1.25fr .95fr;

    gap: 8px;
  }


  .gallery__item--large {
    grid-row:
      1 / span 2;

    min-height: 456px;
  }


  .gallery__item:nth-child(2),
  .gallery__item:nth-child(3) {
    height: 224px;
  }


  .dress__grid {
    grid-template-columns:
      1fr;

    gap: 34px;
  }


  .palette {
    gap: 9px;
  }


  .palette__swatch {
    width: 42px;
    height: 42px;
  }


  .note blockquote {
    font-size: 2rem;
  }


  .finale {
    min-height: 540px;

    height: 72svh;
  }


  .finale__image {
    object-position:
      56% center;
  }


  .footer {
    padding: 28px 0;
  }


  .footer__inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 24px;
  }

}


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

@media (max-width: 380px) {

  .gallery__grid {
    display: block;
  }


  .gallery__item,
  .gallery__item--large,
  .gallery__item:nth-child(2),
  .gallery__item:nth-child(3) {
    height: 320px;

    min-height: 0;

    margin-bottom: 8px;
  }


  .footer__wedding {
    gap: 12px;
  }


  .footer__wedding
  span + span::before {
    margin-right: 12px;
  }

}


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

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

  html {
    scroll-behavior: auto;
  }


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

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }


  .reveal {
    opacity: 1;

    transform: none;
  }


  .hero__content,
  .hero__content.is-visible {
    transform:
      translate(
        -50%,
        -50%
      );
  }

}