:root {
  --black: #100c09;
  --dark-brown: #1b120c;
  --cream: #f5e7c7;
  --gold: #d8a128;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
}


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

.hero {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  background-image: url("images/hero-background.jpg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}


/* ==================================================
   NAVIGATION
   ================================================== */

.navigation {
  position: absolute;

  top: 2.2%;
  right: 2.4%;

  z-index: 50;

  display: flex;
  gap: 24px;
}

.navigation a {
  position: relative;

  color: var(--cream);
  text-decoration: none;

  font-size: clamp(0.7rem, 0.95vw, 1.05rem);
  letter-spacing: 0.03em;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.navigation a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -5px;

  width: 0;
  height: 2px;

  background: var(--gold);

  transition: width 180ms ease;
}

.navigation a:hover::after,
.navigation a:focus-visible::after {
  width: 100%;
}


/* ==================================================
   FRANK
   ================================================== */

.frank-character {
  position: absolute;

  left: 17.2%;
  bottom: 0;

  z-index: 5;

  width: 23%;
  height: auto;
}


/* ==================================================
   HERO CONTENT CONTAINER
   ================================================== */

.hero-content {
  position: absolute;

  inset: 0;

  z-index: 10;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


/* ==================================================
   LOGO + TAGLINE
   ================================================== */

.logo-tagline {
  position: absolute;

  top: 4.8%;
  left: 40.5%;

  width: 47.5%;
  height: auto;

  transform: translateY(20px);

  pointer-events: none;
}


/* ==================================================
   GENERAL IMAGE BUTTON BEHAVIOR
   ================================================== */

.image-button {
  display: block;

  line-height: 0;
  text-decoration: none;

  pointer-events: auto;

  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.image-button img {
  display: block;

  width: 100%;
  height: auto;
}

.image-button:hover,
.image-button:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

.image-button:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 4px;
}


/* ==================================================
   WATCH THE OFFICIAL TRAILER BUTTON
   ================================================== */

.trailer-button {
  position: absolute;

  top: 58.5%;
  left: 67.5%;

  width: 27%;
}


/* ==================================================
   FOLLOW + SOCIAL GROUP
   ================================================== */

.follow-group {
  position: absolute;

  top: 68.5%;
  left: 81%;

  transform: translateX(-50%);

  width: 10.5%;

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

  gap: 5px;

  pointer-events: auto;
}


/* FOLLOW LABEL */

.follow-label {
  display: block;

  width: 100%;
  height: auto;

  margin-bottom: 4px;
}


/* SOCIAL BUTTONS */

.social-button {
  width: 68%;
}


/* ==================================================
   ABOUT / CONTENT SECTIONS
   ================================================== */

.content-section {
  position: relative;

  padding: 6rem 1.5rem;

  background: var(--dark-brown);
}

.episodes-section {
  background: #120d09;
}

.content-inner {
  width: min(1200px, 94%);

  margin: 0 auto;

  text-align: center;
}


/* ==================================================
   SECTION LOGO
   ================================================== */

.section-logo {
  display: block;

  width: min(280px, 65vw);
  height: auto;

  margin: 0 auto 2rem;
}


/* ==================================================
   SECTION HEADINGS
   ================================================== */

.content-section h1,
.content-section h2 {
  margin: 0 0 2.2rem;

  color: var(--gold);

  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.1;
}


/* ==================================================
   ABOUT COPY
   ================================================== */

.about-copy {
  max-width: none;

  margin: 0 auto 2.5rem;

  color: var(--cream);

  font-size: clamp(1.15rem, 1.75vw, 1.65rem);
  line-height: 1.65;

  text-align: center;
}

.frank-name {
  white-space: nowrap;
}


/* ==================================================
   GENERAL CONTENT PARAGRAPHS
   ================================================== */

.content-section p:not(.about-copy) {
  max-width: 850px;

  margin: 0 auto 1.5rem;

  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.7;
}

.content-section a {
  color: var(--gold);
}


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

.site-footer {
  padding: 3rem 1.5rem;

  background: #090706;

  text-align: center;
}

.footer-logo {
  display: block;

  width: min(180px, 45vw);
  height: auto;

  margin: 0 auto 1rem;
}

.site-footer p {
  margin: 0.45rem 0;

  color: rgba(245, 231, 199, 0.78);

  font-size: 0.95rem;
}


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

@media (max-width: 1000px) {

  .navigation {
    gap: 16px;
  }

  .navigation a {
    font-size: 0.8rem;
  }

  .frank-character {
    left: 12%;
    width: 28%;
  }

  .logo-tagline {
    left: 39%;
    width: 51%;
  }

  .trailer-button {
    top: 59%;
    left: 64%;
    width: 32%;
  }

  .follow-group {
    top: 69%;
    left: 80%;
    width: 13%;
  }

  .social-button {
    width: 70%;
  }

  .about-copy {
    font-size: 1.2rem;
  }
}


/* ==================================================
   PHONE

   Artwork remains at the top.
   Frank remains completely unobstructed.
   ALL buttons move into the brown area below Frank.
   ================================================== */

@media (max-width: 700px) {

  .hero {
    aspect-ratio: auto;

    width: 100%;
    height: 1320px;
    min-height: 1320px;

    background-color: var(--dark-brown);

    /*
      Only the upper 900px contains the city artwork.
      Everything below becomes the brown button area.
    */

    background-size: auto 900px;
    background-position: 40% top;
    background-repeat: no-repeat;

    overflow: hidden;
  }


  /* ------------------------------
     NAVIGATION
     ------------------------------ */

  .navigation {
    top: 14px;

    left: 50%;
    right: auto;

    transform: translateX(-50%);

    width: 94%;

    justify-content: center;
    gap: 18px;
  }

  .navigation a {
    font-size: 0.9rem;
  }


  /* ------------------------------
     LOGO + TAGLINE
     ------------------------------ */

  .logo-tagline {
    top: 70px;
    left: 5%;

    width: 90%;

    transform: none;
  }


  /* ------------------------------
     FRANK

     Frank ends exactly where the
     brown button area begins.
     ------------------------------ */

  .frank-character {
    left: 50%;
    bottom: 420px;

    transform: translateX(-50%);

    width: min(64vw, 300px);
    height: auto;
  }


  /* ------------------------------
     TRAILER BUTTON

     Now completely inside the
     brown section.
     ------------------------------ */

  .trailer-button {
    top: 925px;
    left: 9%;

    width: 82%;
  }


  /* ------------------------------
     FOLLOW + SOCIAL BUTTONS

     Entire group is below trailer.
     ------------------------------ */

  .follow-group {
    top: 1015px;
    bottom: auto;

    left: 50%;

    transform: translateX(-50%);

    width: min(44%, 190px);

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

    gap: 5px;
  }

  .follow-label {
    width: 100%;

    margin-bottom: 6px;
  }

  .social-button {
    width: 70%;
  }


  /* ------------------------------
     ABOUT
     ------------------------------ */

  .content-section {
    padding: 3.75rem 1.25rem;
  }

  .section-logo {
    width: min(260px, 64vw);

    margin-bottom: 2rem;
  }

  .content-section h1,
  .content-section h2 {
    font-size: clamp(2.4rem, 10vw, 3.2rem);

    margin-bottom: 2rem;
  }

  .about-copy br {
    display: none;
  }

  .about-copy {
    max-width: 600px;

    font-size: 1.05rem;
    line-height: 1.65;

    margin-bottom: 2.25rem;
  }


  /* KEEP FRANK'S NAME TOGETHER */

  .frank-name {
    white-space: nowrap;
    font-size: 0.96em;
  }


  /* ------------------------------
     EPISODES
     ------------------------------ */

  .content-section p:not(.about-copy) {
    font-size: 1.05rem;
    line-height: 1.6;
  }


  /* ------------------------------
     FOOTER
     ------------------------------ */

  .site-footer {
    padding: 3rem 1.25rem 4rem;
  }

  .footer-logo {
    width: min(230px, 58vw);
  }

  .site-footer p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}


/* ==================================================
   SMALL PHONES
   ================================================== */

@media (max-width: 430px) {

  .hero {
    height: 1280px;
    min-height: 1280px;

    background-size: auto 880px;
  }

  .navigation {
    gap: 14px;
  }

  .navigation a {
    font-size: 0.78rem;
  }

  .logo-tagline {
    top: 68px;
    left: 4%;

    width: 92%;
  }


  /* FRANK STOPS ABOVE THE BROWN AREA */

  .frank-character {
    bottom: 400px;

    width: min(66vw, 285px);
  }


  /* TRAILER IN BROWN */

  .trailer-button {
    top: 900px;
    left: 8%;

    width: 84%;
  }


  /* SOCIAL GROUP BELOW TRAILER */

  .follow-group {
    top: 985px;

    width: min(46%, 180px);
  }

  .social-button {
    width: 72%;
  }

  .content-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .about-copy {
    font-size: 1rem;
  }

  .frank-name {
    font-size: 0.92em;
  }
}


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

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

  html {
    scroll-behavior: auto;
  }

  .image-button,
  .navigation a::after {
    transition: none;
  }
}