:root{
  --green:#10291f;
  --green2:#17382b;
  --cream:#f4efe2;
  --gold:#c9a86a;
  --gold2:#ead8ad;
  --ink:#18251f;
  --muted:#d7cdb7;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--green);
  color:var(--cream);
  font-family:"DM Sans",sans-serif;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.07;
  background-image:
    radial-gradient(circle at 20% 20%,#fff 0 1px,transparent 1px),
    radial-gradient(circle at 80% 70%,#fff 0 1px,transparent 1px);
  background-size:34px 34px;
  z-index:20;
}

main{
  overflow:hidden;
}

section{
  min-height:100svh;
  padding:72px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}

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

.hero{
  background:
    linear-gradient(
      rgba(8,25,18,.48),
      rgba(8,25,18,.78)
    ),
    url("images/couple.jpg");

  background-size:cover;
  background-position:center 42%;
  background-attachment:scroll;

  border-bottom:1px solid rgba(201,168,106,.25);
}

.eyebrow{
  font-size:10px;
  letter-spacing:3px;
  color:var(--gold2);
  margin:0 0 20px;
  font-weight:600;
}

h1,
h2,
h3{
  font-family:"Cormorant Garamond",serif;
  font-weight:500;
  margin:0;
}

h1{
  font-size:clamp(58px,15vw,110px);
  line-height:.82;
  letter-spacing:-2px;
}

h1 span,
h2 span{
  color:var(--gold);
  font-style:italic;
}

h2{
  font-size:clamp(44px,12vw,72px);
  line-height:.9;
}

h2 em{
  font-weight:400;
  color:var(--gold2);
}

.script{
  font-family:"Great Vibes",cursive;
  color:var(--gold);
  font-size:32px;
  margin:24px 0;
}

.mandala{
  font-size:42px;
  color:var(--gold);
  margin-bottom:20px;
}

.date-line{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:18px;
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
}

.date-line i{
  color:var(--gold);
}

.scroll{
  position:absolute;
  bottom:28px;
  font-size:9px;
  letter-spacing:2px;
  color:var(--muted);
}

.scroll b{
  display:block;
  color:var(--gold);
  font-size:18px;
  margin-top:8px;
}

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

.intro{
  background:
    linear-gradient(
      rgba(244,239,226,.90),
      rgba(244,239,226,.96)
    ),
    url("images/photo3.jpg");

  background-size:cover;
  background-position:center;

  color:var(--ink);
}

.intro .eyebrow,
.closing .eyebrow{
  color:#907346;
}

.intro p:not(.eyebrow){
  max-width:520px;
  line-height:1.8;
  color:#536057;
  margin-top:28px;
}

/* =====================================================
   COUPLE
   ===================================================== */

.couple{
  background:var(--green2);
}

.photo-frame{
  width:min(82vw,380px);
  height:min(108vw,500px);
  max-height:500px;

  border:1px solid rgba(201,168,106,.65);
  padding:9px;
  margin-bottom:35px;

  position:relative;
  background:#274636;
}

.photo-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.photo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(
    145deg,
    #345a47,
    #142d22
  );
}

.placeholder-copy{
  font-family:"Cormorant Garamond",serif;
  color:var(--gold2);
  font-size:28px;
  line-height:1.05;
  letter-spacing:3px;
}

.couple h2{
  font-size:58px;
}

/* =====================================================
   EVENTS
   ===================================================== */

.events{
  background:
    linear-gradient(
      rgba(244,239,226,.93),
      rgba(244,239,226,.96)
    ),
    url("images/photo2.jpg");

  background-size:cover;
  background-position:center;

  color:var(--ink);
  align-items:stretch;
  text-align:left;
}

.events>.eyebrow,
.events>h2{
  text-align:center;
  align-self:center;
}

.event-card{
  display:grid;
  grid-template-columns:55px 1fr;
  gap:16px;

  padding:28px 0;

  border-bottom:1px solid #d9d0bd;

  max-width:680px;
  width:100%;

  margin:auto;
}

.event-number{
  font-family:"Cormorant Garamond",serif;
  color:#a68a58;
  font-size:24px;
}

.event-type{
  font-size:9px;
  letter-spacing:2px;
  color:#a68a58;
  margin:0 0 5px;
}

.event-card h3{
  font-size:34px;
}

.event-date{
  font-size:11px;
  letter-spacing:1px;
  font-weight:600;
}

.event-card p:last-child{
  font-size:13px;
  line-height:1.7;
  color:#68736b;
  max-width:480px;
}

.featured{
  border-bottom:0;
}

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

.countdown{
  background:
    linear-gradient(
      rgba(16,41,31,.82),
      rgba(16,41,31,.94)
    ),
    url("images/photo4.jpg");

  background-size:cover;
  background-position:center;

  min-height:70svh;
}

.timer{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;

  width:min(520px,100%);
  margin-top:25px;
}

.timer div{
  border-top:1px solid rgba(201,168,106,.45);
  padding-top:14px;
}

.timer strong{
  display:block;
  font:500 52px/1 "Cormorant Garamond",serif;
  color:var(--gold2);
}

.timer span{
  font-size:8px;
  letter-spacing:2px;
  color:var(--muted);
}

/* =====================================================
   VENUE
   ===================================================== */

.venue{
  background:
    linear-gradient(
      rgba(244,239,226,.94),
      rgba(244,239,226,.97)
    ),
    url("images/photo1.jpg");

  background-size:cover;
  background-position:center;

  color:var(--ink);
}

.venue .city{
  color:#68736b;
  margin:8px 0 25px;
}

.map-card{
  width:min(100%,580px);
  height:220px;

  overflow:hidden;

  border:1px solid #d7cdb7;

  background:#dfe0d4;

  margin-bottom:22px;
}

.map-pattern{
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  color:#5e765e;

  background:
    linear-gradient(
      30deg,
      transparent 45%,
      rgba(70,100,70,.13) 46% 48%,
      transparent 49%
    ),
    linear-gradient(
      -25deg,
      transparent 55%,
      rgba(70,100,70,.12) 56% 58%,
      transparent 59%
    );

  background-size:90px 90px;
}

.map-pattern span{
  font-family:"Cormorant Garamond",serif;
  font-size:30px;
  color:#2d4b37;
}

.map-pattern small{
  letter-spacing:3px;
  margin-top:5px;
}

.button{
  display:inline-block;

  padding:15px 25px;

  border:1px solid #92794d;

  color:#6e5937;

  text-decoration:none;

  font-size:10px;
  letter-spacing:2px;
}

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

.gallery{
  background:var(--green);

  align-items:stretch;
  text-align:left;

  width:100%;
}

.gallery>.eyebrow,
.gallery>h2{
  text-align:center;
  align-self:center;
}

.gallery-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:10px;

  width:100%;

  max-width:650px;

  margin-top:35px;
}

.gallery-photo{
  aspect-ratio:1/1.2;

  background:#274636;

  border:1px solid rgba(201,168,106,.35);

  display:flex;

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

  position:relative;

  overflow:hidden;
}

.gallery-photo.tall{
  aspect-ratio:1/1.5;
}

.gallery-photo img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;
}

.gallery-photo span{
  position:absolute;

  font-size:9px;
  letter-spacing:2px;

  color:var(--gold2);
}

/* =====================================================
   CLOSING
   ===================================================== */

.closing{
  background:
    linear-gradient(
      rgba(244,239,226,.78),
      rgba(244,239,226,.92)
    ),
    url("images/couple.jpg");

  background-size:cover;
  background-position:center 38%;

  color:var(--ink);

  min-height:85svh;
}

.closing h2{
  font-size:52px;
}

.closing p:not(.eyebrow):not(.final-date){
  color:#68736b;

  line-height:1.8;

  margin-top:28px;
}

.signature{
  font-family:"Great Vibes",cursive;

  color:#9b7b45;

  font-size:48px;

  margin-top:25px;
}

.final-date{
  font-size:10px;
  letter-spacing:4px;
  color:#7e6b4c;
}

/* =====================================================
   MUSIC HINT
   ===================================================== */

.music-hint{
  position:fixed;

  right:14px;
  top:14px;

  z-index:50;

  background:rgba(16,41,31,.8);

  border:1px solid rgba(201,168,106,.4);

  padding:8px 10px;

  font-size:8px;

  letter-spacing:1px;

  color:var(--gold2);

  border-radius:20px;

  opacity:.9;
}

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

.reveal{
  opacity:0;

  transform:translateY(25px);

  transition:
    opacity .9s ease,
    transform .9s ease;
}

.reveal.visible{
  opacity:1;
  transform:none;
}

/* =====================================================
   PERSONAL PHOTO BACKGROUNDS
   ===================================================== */

.hero{
  background-image:
    linear-gradient(
      rgba(8,25,18,.48),
      rgba(8,25,18,.78)
    ),
    url("images/couple.jpg");

  background-size:cover;
  background-position:center 42%;
  background-attachment:scroll;
}

.intro{
  background-image:
    linear-gradient(
      rgba(244,239,226,.90),
      rgba(244,239,226,.96)
    ),
    url("images/photo3.jpg");

  background-size:cover;
  background-position:center;
}

.events{
  background-image:
    linear-gradient(
      rgba(244,239,226,.93),
      rgba(244,239,226,.96)
    ),
    url("images/photo2.jpg");

  background-size:cover;
  background-position:center;
}

.countdown{
  background-image:
    linear-gradient(
      rgba(16,41,31,.82),
      rgba(16,41,31,.94)
    ),
    url("images/photo4.jpg");

  background-size:cover;
  background-position:center;
}

.venue{
  background-image:
    linear-gradient(
      rgba(244,239,226,.94),
      rgba(244,239,226,.97)
    ),
    url("images/photo1.jpg");

  background-size:cover;
  background-position:center;
}

.closing{
  background-image:
    linear-gradient(
      rgba(244,239,226,.78),
      rgba(244,239,226,.92)
    ),
    url("images/couple.jpg");

  background-size:cover;
  background-position:center 38%;
}

/* =====================================================
   GALLERY PHOTO POSITIONING
   ===================================================== */

.gallery-grid .gallery-photo:nth-child(3){
  transform:translateY(12px);
}

.gallery-grid .gallery-photo:nth-child(6){
  transform:translateY(-8px);
}

.gallery-grid .gallery-photo:nth-child(8){
  transform:translateY(10px);
}

/* =====================================================
   DESKTOP
   ===================================================== */

@media(min-width:700px){

  .timer{
    grid-template-columns:repeat(4,1fr);
  }

  .gallery{
    min-height:90vh;

    padding-left:3vw;
    padding-right:3vw;
  }

  /*
     FULL WIDTH GALLERY
     The old max-width:650px is overridden here.
  */

  .gallery-grid{
    width:100%;
    max-width:none;

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

    gap:18px;

    margin-top:35px;
  }

  .gallery-photo,
  .gallery-photo.tall{
    width:100%;

    height:500px;

    aspect-ratio:auto;

    transform:none !important;
  }

  .gallery-photo img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
  }
}

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

@media(max-width:699px){

  /* -------------------------------
     HERO NAMES
     ------------------------------- */

  .hero h1{
    font-size:clamp(52px,14vw,68px);

    line-height:.9;

    letter-spacing:-1.5px;

    white-space:nowrap;
  }

  .hero h1 span{
    display:inline;

    margin:0 .08em;

    color:#d6ad62;

    font-style:italic;
  }

  .hero .eyebrow{
    color:#f4dca8;

    text-shadow:
      0 2px 10px rgba(0,0,0,.7);
  }

  .hero .script{
    color:#e4b96b;

    text-shadow:
      0 2px 12px rgba(0,0,0,.8);
  }

  .hero .date-line{
    color:#fff2cf;

    text-shadow:
      0 2px 9px rgba(0,0,0,.75);
  }

  /* -------------------------------
     COUPLE NAMES
     ------------------------------- */

  .couple h2{
    font-size:clamp(39px,10.8vw,54px);

    line-height:1;

    letter-spacing:-1px;

    white-space:nowrap;
  }

  .couple h2 span{
    color:#d6ad62;

    display:inline;

    margin:0 .06em;
  }

  /* -------------------------------
     CLOSING PAGE
     ------------------------------- */

  .closing{
    background-image:
      linear-gradient(
        rgba(244,239,226,.95),
        rgba(244,239,226,.98)
      ),
      url("images/couple.jpg");

    background-position:center 38%;
  }

  .closing h2{
    color:#10291f;

    text-shadow:
      0 1px 0 rgba(255,255,255,.45);
  }

  .closing h2 em{
    color:#7a5a2b !important;

    font-style:italic;

    font-weight:600;

    text-shadow:none;
  }

  .closing p:not(.eyebrow):not(.final-date){
    color:#263f35 !important;

    font-weight:600;

    text-shadow:none;
  }

  .closing .signature{
    color:#7a5a2b !important;

    font-weight:500;

    text-shadow:none;
  }

  .closing .final-date{
    color:#5d513d !important;
  }

  /* -------------------------------
     MOBILE GALLERY
     ------------------------------- */

  .gallery{
    width:100%;

    padding-left:16px;
    padding-right:16px;
  }

  .gallery-grid{
    width:100%;

    max-width:none;

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

    gap:10px;

    margin-top:35px;
  }

  .gallery-photo,
  .gallery-photo.tall{
    width:100%;

    height:auto;

    aspect-ratio:3 / 4;

    transform:none !important;
  }

  .gallery-photo img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
  }
}