/* ======================================================
   THE WEIGHT OF THE PULPIT
   CHAPTER ONE STYLES
   ====================================================== */


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

:root {

  --navy: #15212b;

  --navy-deep: #0d161d;

  --slate: #2d3c46;

  --gold: #b99a63;

  --gold-light: #d6bc87;

  --cream: #f5f1e8;

  --paper: #fbfaf6;

  --warm-gray: #6f6a62;

  --border: #ddd6c8;

  --white: #ffffff;

  --shadow: 0 18px 45px rgba(0, 0, 0, 0.10);

}


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

* {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  margin: 0;

  background: var(--paper);

  color: var(--navy);

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

  line-height: 1.7;

}


a {

  color: inherit;

  text-decoration: none;

}


img {

  display: block;

  max-width: 100%;

}


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

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: rgba(251, 250, 246, 0.96);

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

  backdrop-filter: blur(12px);

}


.nav-container {

  width: min(1200px, 92%);

  min-height: 86px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}


/* ======================================================
   BRAND
====================================================== */

.site-brand {

  display: flex;

  flex-direction: column;

  gap: 3px;

}


.brand-main {

  color: var(--navy);

  font-family: "Cinzel", serif;

  font-size: 1.05rem;

  font-weight: 700;

  letter-spacing: 0.08em;

}


.brand-subtitle {

  color: var(--gold);

  font-family: "Cormorant Garamond", serif;

  font-size: 1rem;

  font-style: italic;

}


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

.site-navigation {

  display: flex;

  align-items: center;

  gap: 26px;

}


.site-navigation a {

  position: relative;

  color: var(--slate);

  font-size: 0.86rem;

  font-weight: 600;

  letter-spacing: 0.04em;

}


.site-navigation a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -8px;

  width: 0;

  height: 2px;

  background: var(--gold);

  transition: width 0.25s ease;

}


.site-navigation a:hover::after,

.site-navigation a[aria-current="page"]::after {

  width: 100%;

}


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

.menu-toggle {

  display: none;

  width: 42px;

  height: 42px;

  padding: 8px;

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

  background: transparent;

  cursor: pointer;

}


.menu-toggle span {

  display: block;

  width: 100%;

  height: 2px;

  margin: 5px 0;

  background: var(--navy);

  transition:

    transform 0.25s ease,

    opacity 0.25s ease;

}


.menu-toggle.active span:nth-child(1) {

  transform:

    translateY(7px)

    rotate(45deg);

}


.menu-toggle.active span:nth-child(2) {

  opacity: 0;

}


.menu-toggle.active span:nth-child(3) {

  transform:

    translateY(-7px)

    rotate(-45deg);

}


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

.chapter-hero {

  padding: 105px 20px 95px;

  text-align: center;

  background:

    linear-gradient(
      135deg,
      var(--navy-deep),
      var(--navy)
    );

  color: var(--white);

}


.chapter-hero-content {

  width: min(850px, 100%);

  margin: 0 auto;

}


.chapter-label {

  margin: 0 0 18px;

  color: var(--gold-light);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}


.chapter-hero h1 {

  margin: 0;

  font-family: "Cinzel", serif;

  font-size:

    clamp(
      2.3rem,
      6vw,
      4.8rem
    );

  font-weight: 600;

  line-height: 1.15;

  letter-spacing: 0.03em;

}


.hero-divider {

  width: 70px;

  height: 2px;

  margin: 30px auto;

  background: var(--gold);

}


.hero-description {

  width: min(660px, 100%);

  margin: 0 auto;

  color:

    rgba(
      255,
      255,
      255,
      0.82
    );

  font-family:

    "Cormorant Garamond",
    serif;

  font-size: 1.35rem;

  font-style: italic;

}


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

.chapter-section {

  padding:

    95px
    20px
    110px;

}


.chapter-content {

  width:

    min(
      820px,
      100%
    );

  margin: 0 auto;

  font-family:

    "Cormorant Garamond",
    serif;

  font-size: 1.38rem;

  line-height: 1.8;

}


.chapter-content p {

  margin:

    0
    0
    30px;

}


.chapter-content p:first-child {

  color: var(--navy);

  font-size: 1.8rem;

  font-weight: 600;

}


/* ======================================================
   EMPHASIS
====================================================== */

.emphasis-line {

  margin:

    45px
    0
    45px !important;

  color: var(--navy);

  font-size: 1.65rem;

  font-weight: 600;

  text-align: center;

}


.reflection-line {

  margin:

    45px
    0
    45px !important;

  padding:

    28px
    30px;

  border-left:

    3px solid
    var(--gold);

  background:

    var(--cream);

  color: var(--navy);

  font-size: 1.55rem;

  font-style: italic;

}


/* ======================================================
   FEATURED QUESTION
====================================================== */

.featured-question {

  margin:

    55px
    0;

  padding:

    38px
    42px;

  border-top:

    2px solid
    var(--gold);

  border-bottom:

    2px solid
    var(--gold);

  text-align: center;

}


.featured-question p {

  margin: 0;

  color: var(--navy);

  font-family:

    "Cormorant Garamond",
    serif;

  font-size:

    clamp(
      1.6rem,
      3vw,
      2.15rem
    );

  font-style: italic;

  line-height: 1.4;

}


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

.chapter-closing {

  margin-top:

    45px !important;

  color: var(--navy);

  font-size: 1.7rem;

  font-style: italic;

  font-weight: 600;

  text-align: center;

}


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

.chapter-navigation {

  display: grid;

  grid-template-columns:

    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 20px;

  margin-top: 80px;

  padding-top: 45px;

  border-top:

    1px solid
    var(--border);

}


.navigation-link {

  display: flex;

  flex-direction: column;

  gap: 6px;

  padding:

    25px
    28px;

  border:

    1px solid
    var(--border);

  background: var(--white);

  transition:

    transform 0.25s ease,

    border-color 0.25s ease,

    box-shadow 0.25s ease;

}


.navigation-link:hover {

  transform:

    translateY(-4px);

  border-color:

    var(--gold);

  box-shadow:

    var(--shadow);

}


.navigation-link.next {

  text-align: right;

}


.navigation-link span {

  color: var(--gold);

  font-family:

    "Inter",
    sans-serif;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}


.navigation-link strong {

  color: var(--navy);

  font-family:

    "Cinzel",
    serif;

  font-size: 1rem;

  font-weight: 600;

}


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

.site-footer {

  padding:

    65px
    20px
    35px;

  background:

    var(--navy-deep);

  color: var(--white);

}


.footer-content {

  width:

    min(
      1100px,
      100%
    );

  margin: 0 auto;

  text-align: center;

}


.footer-brand {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 30px;

}


.footer-brand strong {

  font-family:

    "Cinzel",
    serif;

  font-size: 1.05rem;

  letter-spacing: 0.08em;

}


.footer-brand span {

  color:

    var(--gold-light);

  font-family:

    "Cormorant Garamond",
    serif;

  font-size: 1.1rem;

  font-style: italic;

}


.footer-links,

.footer-legal {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 20px;

  margin:

    20px
    0;

}


.footer-links a,

.footer-legal a {

  color:

    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size: 0.82rem;

}


.footer-links a:hover,

.footer-legal a:hover {

  color:

    var(--gold-light);

}


.footer-author {

  margin:

    30px
    0
    8px;

  color:

    rgba(
      255,
      255,
      255,
      0.75
    );

  font-family:

    "Cormorant Garamond",
    serif;

  font-size: 1.1rem;

}


.footer-copyright {

  margin: 0;

  color:

    rgba(
      255,
      255,
      255,
      0.48
    );

  font-size: 0.75rem;

}


/* ======================================================
   RESPONSIVE
====================================================== */

@media screen and (max-width: 800px) {


  .nav-container {

    min-height: 76px;

  }


  .menu-toggle {

    display: block;

  }


  .site-navigation {

    position: absolute;

    top: 76px;

    left: 0;

    width: 100%;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding:

      15px
      5%
      25px;

    background:

      var(--paper);

    border-bottom:

      1px solid
      var(--border);

  }


  .site-navigation.active {

    display: flex;

  }


  .site-navigation a {

    padding:

      14px
      0;

  }


  .site-navigation a::after {

    display: none;

  }


  .chapter-hero {

    padding:

      80px
      20px
      75px;

  }


  .chapter-section {

    padding:

      70px
      20px
      80px;

  }


  .chapter-content {

    font-size: 1.22rem;

  }


  .reflection-line {

    padding:

      24px
      22px;

  }


  .featured-question {

    padding:

      30px
      20px;

    margin:

      40px
      0;

  }


  .chapter-navigation {

    margin-top: 60px;

  }

}


@media screen and (max-width: 600px) {


  .chapter-navigation {

    grid-template-columns:

      1fr;

  }


  .navigation-link.next {

    text-align: left;

  }

}


@media screen and (max-width: 500px) {


  .brand-main {

    font-size: 0.85rem;

  }


  .brand-subtitle {

    font-size: 0.9rem;

  }


  .chapter-hero h1 {

    font-size: 2.2rem;

  }


  .chapter-content {

    font-size: 1.15rem;

    line-height: 1.75;

  }


  .chapter-content p:first-child {

    font-size: 1.5rem;

  }


  .emphasis-line {

    font-size: 1.4rem;

  }


  .reflection-line {

    font-size: 1.35rem;

  }


  .featured-question p {

    font-size: 1.55rem;

  }


  .footer-links,

  .footer-legal {

    gap: 14px;

  }

}