:root{
  --paper:#f6f5f2;
  --ink:#232427;
  --soft:#767a80;
  --platinum:#aeb3ba;
  --line:rgba(121,126,134,.22);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--paper);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  color:var(--ink);
  background:
    linear-gradient(180deg,rgba(255,255,255,.78),transparent 34%),
    var(--paper);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

main{width:100%}

.hero,
.video-section,
.story-section,
.episode-section,
.finale{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}

/* HERO */

.hero{
  min-height:94svh;
  padding:calc(28px + env(safe-area-inset-top)) 0 64px;
  display:flex;
  flex-direction:column;
}

.brand{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  font-family:var(--serif) !important;
  font-size:clamp(2.2rem,6vw,4.9rem);
  line-height:1;
  letter-spacing:-.05em;
}

.brand span,
.brand em{
  white-space:nowrap;
  font-family:var(--serif) !important;
}

.brand em{
  color:var(--platinum);
  font-style:italic;
  font-weight:500;
}

.hero-center{
  margin:auto 0;
  display:grid;
  justify-items:center;
  gap:26px;
}

.since{
  color:var(--soft);
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.24em;
  font-weight:500;
}

.counter{
  display:grid;
  justify-items:center;
}

.counter strong{
  font-family:var(--serif) !important;
  font-size:clamp(5.6rem,17vw,10rem);
  line-height:.84;
  letter-spacing:-.075em;
  font-weight:500;
}

.days-label{
  margin-top:10px;
  color:var(--soft);
  font-family:var(--sans);
  font-size:.9rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.time-row{
  margin-top:16px;
  color:var(--soft);
  font-family:var(--sans);
  font-size:clamp(.92rem,2.3vw,1.15rem);
  font-variant-numeric:tabular-nums;
  letter-spacing:.14em;
}

.time-row i{
  color:var(--platinum);
  font-style:normal;
  padding-inline:.3em;
}

blockquote{
  width:min(720px,100%);
  margin:20px 0 0;
  font-family:var(--serif) !important;
  font-style:italic;
  font-size:clamp(1.8rem,4.8vw,3.5rem);
  line-height:1.14;
  letter-spacing:-.03em;
  text-align:center;
  text-wrap:balance;
}

/* SECTIONS */

.video-section,
.story-section,
.episode-section{
  padding:86px 0;
  border-top:1px solid var(--line);
}

.video-section{
  display:grid;
  gap:30px;
}

.section-title h2{
  margin:0;
  font-family:var(--serif) !important;
  font-size:clamp(2.6rem,5.5vw,4.8rem);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:500;
}

.video-frame{
  aspect-ratio:16/9;
  background:#111;
  overflow:hidden;
}

.video-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* STORY */

.story-section{
  min-height:64svh;
  display:grid;
  place-items:center;
  text-align:center;
}

.story-copy{
  max-width:860px;
}

.story-main,
.story-sub{
  margin:0;
  font-family:var(--serif) !important;
  letter-spacing:-.03em;
}

.story-main{
  font-size:clamp(2.3rem,5.7vw,4.7rem);
  line-height:1.05;
}

.story-sub{
  margin-top:18px;
  color:var(--platinum);
  font-size:clamp(1.8rem,4.4vw,3.6rem);
  line-height:1.1;
  font-style:italic;
}

.coordinates{
  margin:36px 0 0;
  color:var(--soft);
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.17em;
}

/* EPISODES */

.episode-section{
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(360px,1.5fr);
  align-items:center;
  gap:64px;
}

.kicker{
  color:var(--soft);
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
}

.episode-copy h2{
  margin:14px 0 12px;
  font-family:var(--serif) !important;
  font-size:clamp(4.5rem,9vw,7.4rem);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:500;
}

.episode-title{
  margin:0;
  font-family:var(--serif) !important;
  font-size:clamp(1.35rem,2.4vw,2rem);
  line-height:1.25;
}

.episode-note{
  margin:12px 0 0;
  color:var(--soft);
  font-family:var(--sans);
  line-height:1.65;
}

.spotify-frame iframe{
  width:100%;
  height:232px;
  border:0;
  display:block;
}

/* FINAL */

.finale{
  min-height:48svh;
  padding:88px 0 calc(58px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  display:grid;
  place-items:center;
}

.finale-inner{
  display:grid;
  justify-items:center;
  gap:8px;
  color:var(--soft);
  font-family:var(--serif) !important;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:1;
}

.finale-inner span,
.finale-inner i{
  font-family:var(--serif) !important;
}

.finale-inner i{
  color:var(--platinum);
  font-style:italic;
  font-size:.55em;
}

/* ANIMATION */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s ease,transform .65s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* MOBILE */

@media(max-width:720px){

  .hero,
  .story-section,
  .episode-section,
  .finale{
    width:calc(100% - 28px);
  }

  .hero{
    min-height:auto;
    padding:calc(20px + env(safe-area-inset-top)) 0 48px;
  }

  .brand{
    font-size:clamp(1.95rem,9.4vw,2.75rem);
    gap:10px;
  }

  .hero-center{
    margin:72px 0 0;
    gap:22px;
  }

  .counter strong{
    font-size:clamp(5.2rem,24vw,6.8rem);
  }

  .days-label{
    margin-top:7px;
    font-size:.75rem;
  }

  .time-row{
    margin-top:12px;
    font-size:.9rem;
  }

  blockquote{
    margin-top:20px;
    padding-inline:10px;
    font-size:clamp(1.85rem,8.6vw,2.45rem);
  }

  .video-section{
    width:100%;
    padding:58px 0;
  }

  .section-title{
    width:calc(100% - 28px);
    margin-inline:auto;
  }

  .section-title h2{
    font-family:var(--serif) !important;
    font-size:clamp(2.55rem,11vw,3.25rem);
    line-height:1;
  }

  .story-section,
  .episode-section{
    padding:64px 0;
  }

  .story-section{
    min-height:54svh;
  }

  .story-main{
    font-family:var(--serif) !important;
    font-size:clamp(2.2rem,9.5vw,2.9rem);
  }

  .story-sub{
    font-family:var(--serif) !important;
    font-size:clamp(1.75rem,7.8vw,2.35rem);
  }

  .coordinates{
    margin-top:30px;
    font-size:.62rem;
    letter-spacing:.1em;
  }

  .episode-section{
    grid-template-columns:1fr;
    gap:28px;
  }

  .episode-copy h2{
    font-family:var(--serif) !important;
    font-size:clamp(4.4rem,20vw,5.8rem);
  }

  .episode-title{
    font-family:var(--serif) !important;
    font-size:1.55rem;
  }

  .finale{
    min-height:38svh;
    padding-top:68px;
  }

  .finale-inner{
    font-family:var(--serif) !important;
    font-size:clamp(2.15rem,10vw,2.85rem);
  }
}

@media(max-width:390px){
  .brand{font-size:1.9rem}
  .hero-center{margin-top:64px}
  .counter strong{font-size:5.2rem}
  blockquote{font-size:1.85rem}
  .section-title h2{font-size:2.45rem}
  .story-main{font-size:2.15rem}
  .story-sub{font-size:1.8rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}