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

}


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

}


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

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

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

  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;

}


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

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

}


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

.contents-hero {

  padding: 100px 20px 90px;

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

  text-align: center;

  color: var(--white);

}


.contents-hero-content {

  width: min(760px, 100%);

  margin: 0 auto;

}


.hero-eyebrow,

.section-eyebrow {

  margin: 0 0 18px;

  color: var(--gold-light);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}


.contents-hero h1 {

  margin: 0;

  font-family: "Cinzel", serif;

  font-size: clamp(2.6rem, 6vw, 4.5rem);

  font-weight: 600;

  letter-spacing: 0.04em;

}


.hero-divider,

.section-divider {

  width: 70px;

  height: 2px;

  margin: 30px auto;

  background: var(--gold);

}


.contents-hero p:last-child {

  max-width: 650px;

  margin: 0 auto;

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

  font-family: "Cormorant Garamond", serif;

  font-size: 1.35rem;

  font-style: italic;

}


/* ======================================================
   CONTENTS SECTION
====================================================== */

.contents-section {

  padding: 95px 20px 110px;

}


.contents-container {

  width: min(900px, 100%);

  margin: 0 auto;

}


/* ======================================================
   CONTENT GROUP
====================================================== */

.contents-group {

  margin-bottom: 65px;

}


.final-group {

  margin-bottom: 0;

}


.contents-label {

  margin: 0 0 15px;

  color: var(--gold);

  font-size: 0.76rem;

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

}


/* ======================================================
   CONTENT ITEM
====================================================== */

.contents-item {

  display: grid;

  grid-template-columns: 155px 1fr auto;

  align-items: center;

  gap: 25px;

  padding: 28px 25px;

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

  transition:
    background 0.25s ease,
    transform 0.25s ease;

}


.contents-item:last-child {

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

}


.contents-item:hover {

  background: var(--cream);

  transform: translateX(6px);

}


.contents-number {

  color: var(--gold);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


.contents-title {

  color: var(--navy);

  font-family: "Cormorant Garamond", serif;

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

  font-weight: 600;

}


.contents-arrow {

  color: var(--gold);

  font-size: 1.5rem;

  transition: transform 0.25s ease;

}


.contents-item:hover .contents-arrow {

  transform: translateX(6px);

}


/* ======================================================
   INTRODUCTION / EPILOGUE
====================================================== */

.introduction-item,

.epilogue-item {

  background: var(--cream);

}


.introduction-item:hover,

.epilogue-item:hover {

  background: #eee8dc;

}


/* ======================================================
   CONTINUE SECTION
====================================================== */

.continue-section {

  padding: 90px 20px;

  background: var(--cream);

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

  text-align: center;

}


.continue-content {

  width: min(700px, 100%);

  margin: 0 auto;

}


.continue-content h2 {

  margin: 0;

  color: var(--navy);

  font-family: "Cinzel", serif;

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

  font-weight: 600;

  line-height: 1.3;

}


.continue-content p {

  max-width: 620px;

  margin: 25px auto 35px;

  color: var(--warm-gray);

}


/* ======================================================
   BUTTON
====================================================== */

.primary-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 200px;

  padding: 15px 25px;

  background: var(--navy);

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

  color: var(--white);

  font-size: 0.84rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;

}


.primary-button:hover {

  background: var(--gold);

  border-color: var(--gold);

  transform: translateY(-3px);

}


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

  transition: color 0.2s ease;

}


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

  }


  .contents-hero {

    padding: 80px 20px 70px;

  }


  .contents-section {

    padding: 70px 20px 80px;

  }


  .contents-item {

    grid-template-columns: 1fr auto;

    gap: 10px;

    padding: 25px 15px;

  }


  .contents-number {

    grid-column: 1 / 2;

  }


  .contents-title {

    grid-column: 1 / 2;

  }


  .contents-arrow {

    grid-column: 2;

    grid-row: 1 / 3;

  }


  .continue-section {

    padding: 70px 20px;

  }

}


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


  .brand-main {

    font-size: 0.85rem;

  }


  .brand-subtitle {

    font-size: 0.9rem;

  }


  .contents-hero h1 {

    font-size: 2.5rem;

  }


  .contents-title {

    font-size: 1.55rem;

  }


  .footer-links,

  .footer-legal {

    gap: 14px;

  }

}