@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');


:root {

  --ink: #30252d;

  --muted: #796d76;

  --rose: #b8797c;

  --rose-dark: #8f595f;

  --pink: #f2d9d8;

  --pink-light: #f9eeee;

  --cream: #fffaf5;

  --paper: #fffdf9;

  --lavender: #e5dfea;

  --sage: #dbe2d4;

  --gold: #c49b67;

  --line: rgba(48, 37, 45, .13);

  --shadow:
    0 25px 70px rgba(65, 45, 55, .12);

  --radius: 24px;

}


* {
  box-sizing: border-box;

  margin: 0;

  padding: 0;
}


html {
  scroll-behavior: smooth;
}


body {

  font-family: "DM Sans", sans-serif;

  background: var(--cream);

  color: var(--ink);

  line-height: 1.7;

  overflow-x: hidden;

}


a {
  color: inherit;

  text-decoration: none;
}


button {
  font-family: inherit;
}


.container {

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

  margin: auto;

}


h1,
h2,
h3 {

  font-family:
    "Playfair Display",
    serif;

  font-weight: 500;

  line-height: 1.08;

}


h1 {

  font-size:
    clamp(
      4rem,
      8vw,
      7.5rem
    );

  letter-spacing: -.06em;

}


h2 {

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

  letter-spacing: -.05em;

}


h1 em,
h2 em {

  font-style: italic;

  color: var(--rose-dark);

}


p {

  color: var(--muted);

}


.small-label {

  font-size: .68rem;

  font-weight: 600;

  letter-spacing: .2em;

  text-transform: uppercase;

  color: var(--rose-dark);

  margin-bottom: 18px;

}


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


.site-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 100;

  padding: 20px 0;

  transition: .3s;

}


.site-header.scrolled {

  background:
    rgba(255, 250, 245, .93);

  backdrop-filter:
    blur(15px);

  box-shadow:
    0 5px 30px
    rgba(50, 35, 40, .07);

}


.navbar {

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

  margin: auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

}


.logo {

  font-family:
    "Playfair Display",
    serif;

  font-size: 1.5rem;

  font-style: italic;

}


.logo span {

  color: var(--rose-dark);

}


.nav-links {

  display: flex;

  align-items: center;

  gap: 28px;

  font-size: .8rem;

  font-weight: 600;

}


.nav-links a {

  transition: .2s;

}


.nav-links a:hover {

  color: var(--rose-dark);

}


.nav-nizzy {

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

  border-radius: 999px;

  padding:
    9px 16px;

}


.menu-toggle {

  display: none;

  background: none;

  border: 0;

  cursor: pointer;

  width: 42px;

  height: 42px;

}


.menu-toggle span {

  display: block;

  width: 21px;

  height: 2px;

  background: var(--ink);

  margin: 5px auto;

}


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


.hero {

  min-height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 20% 20%,
      rgba(230, 192, 198, .38),
      transparent 27%
    ),

    radial-gradient(
      circle at 80% 70%,
      rgba(218, 210, 226, .42),
      transparent 30%
    ),

    var(--cream);

}


.hero-content {

  max-width: 900px;

  padding:
    130px 0 100px;

  position: relative;

  z-index: 2;

}


.hero-text {

  max-width: 540px;

  margin:
    28px auto 32px;

  font-size: 1rem;

}


.hero-button {

  display: inline-flex;

  align-items: center;

  gap: 14px;

  padding:
    14px 24px;

  border-radius: 999px;

  background: var(--ink);

  color: #fff;

  font-size: .8rem;

  font-weight: 600;

  transition: .25s;

}


.hero-button span {

  font-size: 1rem;

}


.hero-button:hover {

  transform:
    translateY(-4px);

  background:
    var(--rose-dark);

}


.hero-bottom {

  position: absolute;

  left: 24px;

  right: 24px;

  bottom: 25px;

  display: flex;

  justify-content: space-between;

  font-size: .65rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: #9a8b92;

}


.floating-star {

  position: absolute;

  color: var(--rose);

  opacity: .5;

}


.star-one {

  top: 24%;

  left: 15%;

  font-size: 1.5rem;

}


.star-two {

  top: 36%;

  right: 16%;

  font-size: 1rem;

}


.star-three {

  bottom: 23%;

  left: 28%;

  font-size: .8rem;

}


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


.section {

  padding:
    120px 0;

}


.intro {

  background:
    var(--paper);

}


.intro-grid {

  display: grid;

  grid-template-columns:
    .5fr 1.5fr;

  gap: 80px;

  align-items: center;

}


.intro-symbol {

  width: 230px;

  height: 230px;

  border-radius: 50%;

  background:
    var(--pink-light);

  display: grid;

  place-items: center;

  margin: auto;

}


.intro-symbol span {

  width: 115px;

  height: 115px;

  border:
    1px solid
    rgba(184, 121, 124, .4);

  border-radius: 50%;

  display: grid;

  place-items: center;

  color: var(--rose-dark);

  font-size: 2rem;

}


.intro-content {

  max-width: 680px;

}


.intro-content p:not(.small-label) {

  margin-top: 22px;

  max-width: 600px;

}


/* =========================
   STORY
========================= */


.story {

  background:
    var(--pink-light);

}


.section-heading {

  max-width: 700px;

  margin-bottom: 70px;

}


.section-heading.centered {

  text-align: center;

  margin-left: auto;

  margin-right: auto;

}


.section-heading > p:last-child {

  margin-top: 15px;

}


.timeline {

  max-width: 950px;

  margin: auto;

}


.timeline-item {

  position: relative;

  display: grid;

  grid-template-columns:
    70px 1fr;

  gap: 30px;

  margin-bottom: 70px;

}


.timeline-number {

  width: 55px;

  height: 55px;

  border-radius: 50%;

  background: var(--paper);

  display: grid;

  place-items: center;

  font-family:
    "Playfair Display",
    serif;

  color: var(--rose-dark);

  position: relative;

  z-index: 2;

  box-shadow:
    0 5px 20px
    rgba(70, 45, 50, .08);

}


.timeline-line {

  position: absolute;

  left: 27px;

  top: 55px;

  bottom: -70px;

  width: 1px;

  background:
    rgba(143, 89, 95, .2);

}


.timeline-item:last-child
.timeline-line {

  display: none;

}


.timeline-card {

  background:
    var(--paper);

  border-radius:
    var(--radius);

  overflow: hidden;

  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  min-height: 290px;

  box-shadow:
    0 15px 50px
    rgba(70, 45, 50, .07);

}


.timeline-item.reverse
.timeline-card {

  grid-template-columns:
    1.1fr .9fr;

}


.timeline-item.reverse
.memory-visual {

  order: 2;

}


.memory-visual {

  min-height: 290px;

  position: relative;

  display: flex;

  align-items: flex-end;

  padding: 25px;

  overflow: hidden;

}


.memory-visual > span {

  position: relative;

  z-index: 4;

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

  font-size: .65rem;

  letter-spacing: .14em;

  text-transform: uppercase;

}


.visual-one {

  background:
    linear-gradient(
      145deg,
      #c48682,
      #e3b5ac
    );

}


.visual-two {

  background:
    linear-gradient(
      145deg,
      #8e899f,
      #c6bfd3
    );

}


.visual-three {

  background:
    linear-gradient(
      145deg,
      #3f3c55,
      #77728d
    );

}


.visual-four {

  background:
    linear-gradient(
      145deg,
      #9a6b75,
      #d9a7a9
    );

}


.sun {

  position: absolute;

  width: 130px;

  height: 130px;

  border-radius: 50%;

  background:
    rgba(255, 229, 182, .72);

  right: 45px;

  top: 45px;

  box-shadow:
    0 0 80px
    rgba(255, 229, 182, .5);

}


.cloud {

  position: absolute;

  height: 25px;

  width: 90px;

  border-radius: 50px;

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

}


.cloud:before {

  content: "";

  position: absolute;

  width: 40px;

  height: 40px;

  border-radius: 50%;

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

  left: 18px;

  bottom: 5px;

}


.cloud-one {

  top: 70px;

  left: 35px;

}


.cloud-two {

  top: 130px;

  right: 30px;

  transform: scale(.7);

}


.moon {

  position: absolute;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  background:
    #f1dfc3;

  right: 50px;

  top: 45px;

  box-shadow:
    0 0 50px
    rgba(241, 223, 195, .3);

}


.tiny-star {

  position: absolute;

  color: #fff1d6;

}


.ts-one {

  right: 180px;

  top: 70px;

}


.ts-two {

  right: 100px;

  top: 180px;

}


.heart-shape {

  position: absolute;

  font-size: 9rem;

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

  right: 45px;

  top: 25px;

}


.timeline-content {

  padding: 45px;

  display: flex;

  justify-content: center;

  flex-direction: column;

}


.date {

  font-size: .65rem;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--rose-dark);

  margin-bottom: 13px;

}


.timeline-content h3 {

  font-size: 2rem;

}


.timeline-content p:last-child {

  margin-top: 14px;

  max-width: 400px;

}


/* =========================
   MEMORY WALL
========================= */


.memories {

  background: var(--cream);

}


.memory-grid {

  display: grid;

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

  grid-auto-rows: 190px;

  gap: 14px;

}


.memory-tile {

  position: relative;

  overflow: hidden;

  border-radius:
    var(--radius);

  padding: 25px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  transition: .3s;

}


.memory-tile:hover {

  transform:
    translateY(-5px);

  box-shadow:
    var(--shadow);

}


.tile-large {

  grid-column:
    span 2;

  grid-row:
    span 2;

  background:
    linear-gradient(
      145deg,
      #d49a96,
      #b8737a
    );

  color: #fff;

}


.tile-wide {

  grid-column:
    span 2;

  background:
    linear-gradient(
      145deg,
      #b8a9c7,
      #8f829f
    );

  color: #fff;

}


.tile-small:nth-child(2) {

  background:
    var(--sage);

}


.tile-small:nth-child(3) {

  background:
    #f0dfca;

}


.tile-small:nth-child(5) {

  background:
    #ded5e6;

}


.tile-small:nth-child(6) {

  background:
    #ecd3d3;

}


.tile-icon {

  font-size: 2.5rem;

  margin-bottom: auto;

}


.memory-tile p {

  color: inherit;

  font-family:
    "Playfair Display",
    serif;

  font-size: 1.25rem;

}


.memory-tile small {

  font-size: .6rem;

  letter-spacing: .15em;

  margin-top: 5px;

  opacity: .7;

}


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


.quote-section {

  padding:
    150px 0;

  background:
    var(--ink);

  color: #fff;

  text-align: center;

}


.quote-content {

  max-width: 800px;

}


.quote-mark {

  display: block;

  font:
    5rem "Playfair Display";

  color: #d7a3a4;

  height: 50px;

}


blockquote {

  font:
    italic 500
    clamp(2.1rem, 5vw, 4rem)
    "Playfair Display";

  line-height: 1.15;

}


.quote-line {

  display: block;

  width: 50px;

  height: 1px;

  background: #d7a3a4;

  margin:
    28px auto 12px;

}


.quote-content p {

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

  font-size: .75rem;

}


/* =========================
   LETTER
========================= */


.letter {

  background:
    var(--pink-light);

  text-align: center;

}


.letter-intro {

  max-width: 650px;

  margin: auto;

}


.letter-intro > p:last-child {

  margin-top: 15px;

}


.letter-wrapper {

  margin:
    60px auto 0;

  display: flex;

  flex-direction: column;

  align-items: center;

}


.envelope {

  width: 360px;

  max-width: 90vw;

  height: 230px;

  background:
    #dfb5b4;

  border-radius:
    8px;

  position: relative;

  box-shadow:
    var(--shadow);

  overflow: hidden;

}


.envelope:before {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 0;

  border-left:
    180px solid transparent;

  border-right:
    180px solid transparent;

  border-bottom:
    130px solid #d09b9e;

}


.envelope-flap {

  position: absolute;

  left: 0;

  top: 0;

  width: 0;

  height: 0;

  border-left:
    180px solid transparent;

  border-right:
    180px solid transparent;

  border-top:
    120px solid #e8c3c0;

  z-index: 2;

}


.envelope-seal {

  position: absolute;

  width: 45px;

  height: 45px;

  border-radius: 50%;

  background:
    var(--rose-dark);

  color: #fff;

  display: grid;

  place-items: center;

  left: 50%;

  top: 53%;

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

  z-index: 4;

}


.open-letter {

  margin-top: 30px;

  border: 0;

  background:
    var(--ink);

  color: #fff;

  padding:
    14px 23px;

  border-radius:
    999px;

  cursor: pointer;

  font-size: .8rem;

  font-weight: 600;

  transition: .25s;

}


.open-letter:hover {

  transform:
    translateY(-3px);

  background:
    var(--rose-dark);

}


.open-letter span {

  margin-left: 8px;

}


.letter-content {

  max-width: 720px;

  margin:
    50px auto 0;

  display: none;

}


.letter-content.open {

  display: block;

  animation:
    letterOpen .7s ease;

}


@keyframes letterOpen {

  from {

    opacity: 0;

    transform:
      translateY(25px)
      rotate(1deg);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      rotate(0);

  }

}


.paper {

  background:
    var(--paper);

  text-align: left;

  padding:
    60px;

  border-radius:
    4px;

  box-shadow:
    var(--shadow);

  position: relative;

}


.paper:before {

  content: "";

  position: absolute;

  inset: 20px;

  border:
    1px solid
    rgba(184,121,124,.15);

  pointer-events: none;

}


.paper-small {

  font-size: .65rem;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--rose-dark);

}


.paper h3 {

  font-size: 2.2rem;

  margin:
    25px 0;

}


.paper p {

  margin-bottom: 18px;

}


.signature {

  margin-top: 35px;

  font-family:
    "Playfair Display",
    serif;

  font-style: italic;

  color: var(--ink);

}


.signature span {

  color: var(--rose-dark);

  font-size: 1.5rem;

}


/* =========================
   FINAL
========================= */


.final-section {

  min-height: 650px;

  background:
    linear-gradient(
      145deg,
      #30252d,
      #4a3541
    );

  color: #fff;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  overflow: hidden;

}


.final-content {

  position: relative;

  z-index: 2;

}


.final-content .small-label {

  color: #d7a3a4;

}


.final-content h2 {

  font-size:
    clamp(
      4rem,
      9vw,
      8rem
    );

  color: #fff;

}


.final-content > p:not(.small-label) {

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

  max-width: 430px;

  margin:
    18px auto 28px;

}


.final-stars span {

  position: absolute;

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

}


.final-stars span:nth-child(1) {

  left: 15%;

  top: 20%;

  font-size: 2rem;

}


.final-stars span:nth-child(2) {

  right: 20%;

  top: 28%;

  font-size: 1.2rem;

}


.final-stars span:nth-child(3) {

  left: 25%;

  bottom: 25%;

  font-size: 1rem;

}


.final-stars span:nth-child(4) {

  right: 15%;

  bottom: 25%;

  font-size: 3rem;

}


.final-stars span:nth-child(5) {

  left: 45%;

  top: 15%;

}


.memory-button {

  border:
    1px solid
    rgba(255,255,255,.35);

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

  color: #fff;

  padding:
    14px 24px;

  border-radius:
    999px;

  cursor: pointer;

  font-size: .8rem;

  transition: .25s;

}


.memory-button:hover {

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

  transform:
    translateY(-3px);

}


.wish-message {

  margin-top: 25px;

  display: none;

  color: #e4b6b6;

  font:
    italic 1.2rem
    "Playfair Display";

}


.wish-message.show {

  display: block;

  animation:
    wishAppear .6s ease;

}


@keyframes wishAppear {

  from {

    opacity: 0;

    transform:
      translateY(10px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


.wish-message span {

  margin:
    0 10px;

}


.final-footer {

  position: absolute;

  left: 24px;

  right: 24px;

  bottom: 25px;

  display: flex;

  justify-content: space-between;

  font-size: .65rem;

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

}


.final-footer a {

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

}


.final-footer a:hover {

  color: #fff;

}


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


.reveal {

  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}


.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}


.delay-1 {

  transition-delay: .1s;

}


.delay-2 {

  transition-delay: .2s;

}


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


@media (max-width: 800px) {

  .menu-toggle {

    display: block;

  }


  .nav-links {

    position: absolute;

    top: 70px;

    left: 15px;

    right: 15px;

    background:
      rgba(255,250,245,.98);

    padding: 15px;

    border-radius: 18px;

    box-shadow:
      var(--shadow);

    flex-direction: column;

    align-items: stretch;

    gap: 3px;

    opacity: 0;

    visibility: hidden;

    transform:
      translateY(-8px);

    transition: .25s;

  }


  .nav-links.open {

    opacity: 1;

    visibility: visible;

    transform:
      translateY(0);

  }


  .nav-links a {

    padding:
      10px 12px;

  }


  .nav-nizzy {

    text-align: center;

  }


  .intro-grid {

    grid-template-columns: 1fr;

    gap: 50px;

  }


  .timeline-card,
  .timeline-item.reverse .timeline-card {

    grid-template-columns: 1fr;

  }


  .timeline-item.reverse
  .memory-visual {

    order: 0;

  }


  .memory-visual {

    min-height: 220px;

  }


  .timeline-content {

    padding: 35px;

  }


  .memory-grid {

    grid-template-columns:
      1fr 1fr;

    grid-auto-rows: 180px;

  }


  .tile-large,
  .tile-wide {

    grid-column:
      span 2;

  }

}


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


@media (max-width: 560px) {

  .container,
  .navbar {

    width:
      calc(100% - 30px);

  }


  .section {

    padding:
      85px 0;

  }


  h1 {

    font-size:
      clamp(
        3.2rem,
        15vw,
        5rem
      );

  }


  .hero-bottom {

    flex-direction: column;

    gap: 5px;

  }


  .timeline-item {

    grid-template-columns:
      45px 1fr;

    gap: 15px;

  }


  .timeline-number {

    width: 42px;

    height: 42px;

    font-size: .75rem;

  }


  .timeline-line {

    left: 20px;

    top: 42px;

  }


  .timeline-content {

    padding:
      28px 22px;

  }


  .timeline-content h3 {

    font-size:
      1.7rem;

  }


  .memory-grid {

    grid-template-columns:
      1fr;

    grid-auto-rows:
      180px;

  }


  .tile-large,
  .tile-wide {

    grid-column:
      span 1;

    grid-row:
      span 1;

  }


  .paper {

    padding:
      40px 25px;

  }


  .paper:before {

    inset: 12px;

  }


  .envelope {

    width: 300px;

  }


  .envelope-flap {

    border-left-width:
      150px;

    border-right-width:
      150px;

  }


  .envelope:before {

    border-left-width:
      150px;

    border-right-width:
      150px;

  }


  .final-section {

    min-height:
      600px;

  }


  .final-footer {

    flex-direction:
      column;

    gap: 5px;

  }

}


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


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

  * {

    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    transition-duration:
      .01ms !important;

  }

}