/* =========================================================
   BENEATH EVERYTHING
   CHAPTER ONE STYLESHEET

   Chapter One
   Everything Joseph Carried

   Author: Bradley Hobbs
   Version: 1.0
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

  --ivory: #f7f0e6;

  --paper: #fffdf8;

  --gold: #c8a45d;

  --gold-light: #d8bc7d;

  --navy: #101b2b;

  --navy-dark: #08111d;

  --charcoal: #222222;

  --muted: #6f6a63;

  --white: #ffffff;

  --border:
    rgba(16, 27, 43, 0.12);

  --reading-width: 760px;

}


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

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background:
    var(--ivory);

  color:
    var(--charcoal);

  font-family:
    "Inter",
    sans-serif;

  line-height: 1.8;
}


a {
  color: inherit;

  text-decoration: none;
}


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

.site-header {
  position: sticky;

  top: 0;

  z-index: 1000;

  background:
    rgba(247, 240, 230, 0.96);

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

  backdrop-filter:
    blur(12px);
}


.nav-container {
  width:
    min(
      1120px,
      calc(100% - 48px)
    );

  min-height: 82px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}


.site-brand {
  display: flex;

  flex-direction: column;

  gap: 2px;
}


.brand-main {
  color:
    var(--navy);

  font-family:
    "Cinzel",
    serif;

  font-size:
    1rem;

  font-weight: 600;

  letter-spacing:
    0.12em;
}


.brand-subtitle {
  color:
    var(--muted);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    0.95rem;

  font-style: italic;
}


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

.site-navigation {
  display: flex;

  align-items: center;

  gap: 28px;
}


.site-navigation a {
  color:
    var(--navy);

  font-size:
    0.78rem;

  font-weight: 600;

  letter-spacing:
    0.08em;

  text-transform: uppercase;

  transition:
    color 0.25s ease;
}


.site-navigation a:hover,
.site-navigation a[aria-current="page"] {
  color:
    var(--gold);
}


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

.menu-toggle {
  display: none;

  border: 0;

  background:
    transparent;

  cursor: pointer;
}


.menu-toggle span {
  display: block;

  width: 25px;

  height: 2px;

  margin: 5px;

  background:
    var(--navy);
}


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

.chapter-hero {
  position: relative;

  padding:
    130px 24px 110px;

  overflow: hidden;

  text-align: center;

  background:
    linear-gradient(
      135deg,
      var(--navy-dark),
      var(--navy)
    );

  color:
    var(--white);
}


.chapter-hero::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(200, 164, 93, 0.16),
      transparent 48%
    );
}


.chapter-hero-content {
  position: relative;

  z-index: 1;

  width:
    min(
      900px,
      100%
    );

  margin: 0 auto;
}


.chapter-number {
  margin:
    0 0 22px;

  color:
    var(--gold-light);

  font-size:
    0.8rem;

  font-weight: 700;

  letter-spacing:
    0.2em;

  text-transform: uppercase;
}


.chapter-hero h1 {
  margin: 0;

  color:
    var(--white);

  font-family:
    "Cinzel",
    serif;

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

  font-weight: 500;

  line-height: 1.12;
}


.chapter-divider {
  width: 80px;

  height: 1px;

  margin:
    35px auto;

  background:
    var(--gold);
}


.chapter-introduction {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.78);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      1.5rem,
      3vw,
      2.2rem
    );

  font-style: italic;

  line-height: 1.5;
}


/* =========================================================
   CHAPTER CONTENT
========================================================= */

.chapter-section {
  padding:
    100px 24px 120px;
}


.chapter-content {
  width:
    min(
      var(--reading-width),
      100%
    );

  margin: 0 auto;

  color:
    rgba(34, 34, 34, 0.9);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      1.3rem,
      2vw,
      1.55rem
    );

  line-height: 1.95;
}


.chapter-content p {
  margin:
    0 0 1.9rem;
}


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

.chapter-content > p:first-child::first-letter {
  float: left;

  margin:
    10px 12px 0 0;

  color:
    var(--gold);

  font-family:
    "Cinzel",
    serif;

  font-size:
    4.8rem;

  font-weight: 600;

  line-height:
    0.8;
}


/* =========================================================
   QUOTES
========================================================= */

.chapter-content blockquote {
  margin:
    55px 0;

  padding:
    32px 35px;

  border-left:
    3px solid var(--gold);

  background:
    rgba(200, 164, 93, 0.07);

  color:
    var(--navy);

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.3rem
    );

  font-style: italic;

  line-height:
    1.45;
}


.chapter-content blockquote p {
  margin: 0;
}


/* =========================================================
   REFLECTION QUESTION
========================================================= */

.reflection-question {
  margin:
    65px 0;

  padding:
    45px 30px;

  text-align: center;

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

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


.reflection-question p {
  margin: 0;

  color:
    var(--navy);

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

  font-style: italic;

  line-height:
    1.35;
}


/* =========================================================
   SECTION DIVIDERS
========================================================= */

.section-divider {
  margin:
    70px auto;

  background:
    var(--gold);
}


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

.closing-question {
  margin:
    60px 0;

  padding:
    45px 30px;

  text-align: center;
}


.closing-question p {
  margin: 0;

  color:
    var(--navy);

  font-size:
    clamp(
      1.8rem,
      4vw,
      2.6rem
    );

  font-style: italic;

  font-weight: 600;

  line-height:
    1.4;
}


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

.chapter-navigation {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  margin-top:
    100px;

  padding-top:
    40px;

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


.navigation-link {
  max-width:
    45%;
}


.navigation-link.next {
  margin-left: auto;

  text-align: right;
}


.navigation-link span {
  display: block;

  margin-bottom: 8px;

  color:
    var(--gold);

  font-family:
    "Inter",
    sans-serif;

  font-size:
    0.72rem;

  font-weight: 700;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.navigation-link strong {
  color:
    var(--navy);

  font-size:
    1.45rem;

  font-weight: 600;
}


.navigation-link:hover strong {
  color:
    var(--gold);
}


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

.site-footer {
  padding:
    70px 24px;

  background:
    var(--navy-dark);

  color:
    rgba(255, 255, 255, 0.72);
}


.footer-content {
  width:
    min(
      1120px,
      100%
    );

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 25px;

  text-align: center;
}


.footer-brand {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.footer-brand strong {
  color:
    var(--white);

  font-family:
    "Cinzel",
    serif;

  letter-spacing:
    0.14em;
}


.footer-brand span {
  color:
    var(--gold-light);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    1.1rem;

  font-style:
    italic;
}


.footer-links {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap:
    12px 24px;
}


.footer-links a {
  font-size:
    0.76rem;

  font-weight: 600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.footer-links a:hover {
  color:
    var(--gold);
}


.footer-copyright {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.45);

  font-family:
    "Inter",
    sans-serif;

  font-size:
    0.8rem;
}


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

@media (max-width: 760px) {

  .nav-container {
    width:
      calc(100% - 32px);

    min-height:
      72px;
  }


  .menu-toggle {
    display: block;
  }


  .site-navigation {
    position: absolute;

    top: 72px;

    right: 0;

    left: 0;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding:
      15px 16px 25px;

    background:
      var(--ivory);

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


  .site-navigation.is-open {
    display: flex;
  }


  .site-navigation a {
    padding:
      15px 0;

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


  .chapter-hero {
    padding:
      100px 24px 85px;
  }


  .chapter-section {
    padding:
      70px 24px 90px;
  }


  .chapter-content {
    font-size:
      1.25rem;
  }


  .chapter-content blockquote {
    margin:
      45px 0;

    padding:
      25px;
  }


  .reflection-question,
  .closing-question {
    padding:
      35px 20px;
  }


  .chapter-navigation {
    flex-direction: column;

    gap: 30px;
  }


  .navigation-link,
  .navigation-link.next {
    max-width:
      100%;

    margin-left: 0;

    text-align: left;
  }

}