/* ======================================================
   THE WEIGHT OF THE PULPIT
   CHAPTER FOUR 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;

}


/* ======================================================
   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 {

  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);

}


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

.chapter-hero {

  padding: 105px 20px 95px;

  background:

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

  color: var(--white);

  text-align: center;

}


.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(680px, 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 {

  font-size: 1.8rem;

  font-weight: 600;

}


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

.emphasis-line {

  color: var(--navy);

  font-size: 1.65rem;

  font-weight: 600;

}


.reflection-line {

  margin: 45px 0 !important;

  color: var(--navy);

  font-size: 1.7rem;

  font-style: italic;

  font-weight: 600;

  text-align: center;

}


.closing-line {

  margin-bottom: 8px !important;

  color: var(--warm-gray);

  font-size: 1.5rem;

  font-style: italic;

  text-align: center;

}


/* ======================================================
   FEATURED REFLECTION
====================================================== */

.featured-reflection {

  margin: 60px 0;

  padding: 40px 45px;

  border-top: 2px solid var(--gold);

  border-bottom: 2px solid var(--gold);

  text-align: center;

}


.featured-reflection p {

  margin: 0;

  color: var(--navy);

  font-family: "Cormorant Garamond", serif;

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

  font-style: italic;

  line-height: 1.4;

}


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

.chapter-navigation {

  display: grid;

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

  gap: 25px;

  margin-top: 80px;

  padding-top: 45px;

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

}


.navigation-link {

  display: flex;

  flex-direction: column;

  gap: 5px;

  padding: 24px;

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

  background: var(--cream);

  transition:

    transform 0.25s ease,

    border-color 0.25s ease,

    background 0.25s ease;

}


.navigation-link:hover {

  transform: translateY(-4px);

  border-color: var(--gold);

  background: var(--white);

}


.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.1em;

  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;

  }


  .featured-reflection {

    margin: 45px 0;

    padding: 32px 20px;

  }


  .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.45rem;

  }


  .featured-reflection p {

    font-size: 1.55rem;

  }


  .footer-links,

  .footer-legal {

    gap: 14px;

  }

}