/* ======================================================
   THE WEIGHT OF THE PULPIT
   MASTER LANDING STYLESHEET

   Pages:
   index.html
   author.html
   copyright.html
   terms.html
   privacy.html
====================================================== */


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

}


button {

  font: inherit;

}


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

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

}


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

  transition:
    color 0.25s ease;

}


.site-navigation a:hover {

  color:
    var(--navy);

}


.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:
    44px;

  height:
    44px;

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

}


/* ======================================================
   SHARED SECTIONS
====================================================== */

.section-eyebrow {

  margin:
    0 0 16px;

  color:
    var(--gold);

  font-size:
    0.78rem;

  font-weight:
    700;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

}


.section-divider {

  width:
    70px;

  height:
    2px;

  margin:
    30px auto;

  background:
    var(--gold);

}


.content-container {

  width:
    min(1100px, 92%);

  margin:
    0 auto;

}


/* ======================================================
   BOOK BANNER
====================================================== */

.book-banner {

  width:
    100%;

  background:
    var(--navy-deep);

}


.book-banner img {

  width:
    100%;

  height:
    auto;

  max-height:
    720px;

  object-fit:
    contain;

  margin:
    0 auto;

}


/* ======================================================
   BOOK OVERVIEW
====================================================== */

.book-overview {

  padding:
    100px 20px;

  text-align:
    center;

  background:
    var(--paper);

}


.book-overview .content-container {

  width:
    min(850px, 100%);

}


.book-overview h1 {

  margin:
    0;

  color:
    var(--navy);

  font-family:
    "Cinzel", serif;

  font-size:
    clamp(2rem, 5vw, 3.8rem);

  font-weight:
    600;

  line-height:
    1.25;

}


.book-overview-content {

  color:
    var(--slate);

  font-family:
    "Cormorant Garamond", serif;

  font-size:
    1.35rem;

  line-height:
    1.8;

  text-align:
    left;

}


.book-overview-content p {

  margin:
    0 0 30px;

}


.book-overview-content p:first-child {

  color:
    var(--navy);

  font-size:
    1.65rem;

  font-weight:
    600;

}


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

.featured-question {

  margin:
    55px 0;

  padding:
    40px;

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

  font-style:
    italic;

  line-height:
    1.4;

}


/* ======================================================
   BOOK ACTIONS
====================================================== */

.book-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    16px;

  margin-top:
    50px;

}


/* ======================================================
   BUTTONS
====================================================== */

.primary-button,

.secondary-button,

.outline-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    190px;

  padding:
    15px 26px;

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

  font-size:
    0.82rem;

  font-weight:
    700;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

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

}


.primary-button {

  background:
    var(--navy);

  color:
    var(--white);

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

}


.primary-button:hover {

  background:
    var(--gold);

  border-color:
    var(--gold);

  transform:
    translateY(-3px);

}


.secondary-button,

.outline-button {

  background:
    transparent;

  color:
    var(--navy);

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

}


.secondary-button:hover,

.outline-button:hover {

  background:
    var(--navy);

  color:
    var(--white);

  transform:
    translateY(-3px);

}


/* ======================================================
   STORY THEMES
====================================================== */

.story-themes {

  padding:
    100px 20px;

  background:
    var(--cream);

  text-align:
    center;

}


.story-themes h2 {

  margin:
    0;

  color:
    var(--navy);

  font-family:
    "Cinzel", serif;

  font-size:
    clamp(2rem, 5vw, 3.5rem);

  font-weight:
    600;

  line-height:
    1.3;

}


.themes-grid {

  display:
    grid;

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

  gap:
    24px;

  margin-top:
    55px;

}


.theme-card {

  padding:
    35px 28px;

  background:
    var(--white);

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

  box-shadow:
    var(--shadow);

  text-align:
    left;

}


.theme-card h3 {

  margin:
    0 0 15px;

  color:
    var(--navy);

  font-family:
    "Cinzel", serif;

  font-size:
    1.15rem;

  font-weight:
    600;

}


.theme-card p {

  margin:
    0;

  color:
    var(--warm-gray);

  font-family:
    "Cormorant Garamond", serif;

  font-size:
    1.2rem;

  line-height:
    1.7;

}


/* ======================================================
   CONTINUE STORY
====================================================== */

.continue-story {

  padding:
    100px 20px;

  background:
    var(--paper);

  text-align:
    center;

}


.preview-container {

  width:
    min(750px, 100%);

  margin:
    0 auto;

}


.continue-story h2 {

  margin:
    0;

  color:
    var(--navy);

  font-family:
    "Cinzel", serif;

  font-size:
    clamp(2rem, 5vw, 3.5rem);

  font-weight:
    600;

  line-height:
    1.3;

}


.continue-story p:last-of-type {

  margin:
    0 auto 35px;

  color:
    var(--warm-gray);

  font-family:
    "Cormorant Garamond", serif;

  font-size:
    1.35rem;

  line-height:
    1.75;

}


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

.author-hero {

  padding:
    110px 20px 100px;

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

  color:
    var(--white);

  text-align:
    center;

}


.author-hero-content {

  width:
    min(850px, 100%);

  margin:
    0 auto;

}


.author-hero .section-eyebrow {

  color:
    var(--gold-light);

}


.author-hero h1 {

  margin:
    0;

  color:
    var(--white);

  font-family:
    "Cinzel", serif;

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

  font-weight:
    600;

  line-height:
    1.15;

}


.author-hero-description {

  width:
    min(680px, 100%);

  margin:
    0 auto;

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

  font-family:
    "Cormorant Garamond", serif;

  font-size:
    1.45rem;

  font-style:
    italic;

}


/* ======================================================
   AUTHOR PAGE
====================================================== */

.author-page {

  padding:
    100px 20px 0;

  background:
    var(--paper);

}


.author-container {

  width:
    min(850px, 100%);

  margin:
    0 auto;

}


.author-content {

  color:
    var(--slate);

  font-family:
    "Cormorant Garamond", serif;

  font-size:
    1.4rem;

  line-height:
    1.85;

}


.author-content p {

  margin:
    0 0 32px;

}


.author-opening {

  color:
    var(--navy);

  font-size:
    1.7rem;

  font-weight:
    600;

}


/* ======================================================
   AUTHOR QUOTE
====================================================== */

.author-quote {

  margin:
    65px 0;

  padding:
    45px 50px;

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

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

  text-align:
    center;

}


.author-quote p {

  margin:
    0;

  color:
    var(--navy);

  font-family:
    "Cormorant Garamond", serif;

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

  font-style:
    italic;

  line-height:
    1.4;

}


/* ======================================================
   FEATURED BOOK
====================================================== */

.author-book-section {

  margin-top:
    95px;

  padding:
    80px 20px;

  background:
    var(--cream);

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

}


.author-book-grid {

  width:
    min(950px, 100%);

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    minmax(220px, 300px)
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    75px;

}


.author-book-cover {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.author-book-cover img {

  width:
    100%;

  max-width:
    290px;

  border:
    1px solid rgba(185, 154, 99, 0.45);

  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.24);

}


.author-book-details {

  text-align:
    left;

}


.author-book-details h2 {

  margin:
    0;

  color:
    var(--navy);

  font-family:
    "Cinzel", serif;

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

  font-weight:
    600;

  line-height:
    1.3;

}


.author-book-details .section-divider {

  margin:
    28px 0;

}


.author-book-details p:last-of-type {

  margin:
    0 0 35px;

  color:
    var(--warm-gray);

  font-family:
    "Cormorant Garamond", serif;

  font-size:
    1.35rem;

}


/* ======================================================
   LEGAL PAGE HERO
====================================================== */

.legal-hero {

  padding:
    105px 20px 95px;

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

  color:
    var(--white);

  text-align:
    center;

}


.legal-hero-content {

  width:
    min(820px, 100%);

  margin:
    0 auto;

}


.legal-hero .section-eyebrow {

  color:
    var(--gold-light);

}


.legal-hero h1 {

  margin:
    0;

  color:
    var(--white);

  font-family:
    "Cinzel", serif;

  font-size:
    clamp(2.4rem, 6vw, 4.8rem);

  font-weight:
    600;

  line-height:
    1.2;

}


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

}


/* ======================================================
   LEGAL PAGE
====================================================== */

.legal-page {

  padding:
    95px 20px 110px;

  background:
    var(--paper);

}


.legal-container {

  width:
    min(850px, 100%);

  margin:
    0 auto;

}


.legal-content {

  color:
    var(--slate);

  font-family:
    "Cormorant Garamond", serif;

  font-size:
    1.3rem;

  line-height:
    1.8;

}


.legal-content > p {

  margin:
    0 0 30px;

}


.legal-opening {

  color:
    var(--navy);

  font-size:
    1.6rem;

  font-weight:
    600;

}


.legal-content h2 {

  margin:
    65px 0 22px;

  color:
    var(--navy);

  font-family:
    "Cinzel", serif;

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

  font-weight:
    600;

}


.legal-content h2:first-child {

  margin-top:
    0;

}


.legal-content h3 {

  margin:
    42px 0 16px;

  color:
    var(--navy);

  font-family:
    "Cinzel", serif;

  font-size:
    1.2rem;

}


.legal-content ul {

  margin:
    0 0 30px;

  padding-left:
    28px;

}


.legal-content li {

  margin-bottom:
    12px;

}


.legal-content strong {

  color:
    var(--navy);

}


/* ======================================================
   LEGAL NOTICE
====================================================== */

.legal-notice {

  margin:
    45px 0;

  padding:
    30px 35px;

  background:
    var(--cream);

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

}


.legal-notice p {

  margin:
    0;

}


.legal-notice p + p {

  margin-top:
    15px;

}


/* ======================================================
   LEGAL INFORMATION
====================================================== */

.legal-information {

  margin:
    40px 0;

  padding:
    35px;

  background:
    var(--white);

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

  box-shadow:
    var(--shadow);

}


.legal-information h2,

.legal-information h3 {

  margin-top:
    0;

}


.legal-information p:last-child {

  margin-bottom:
    0;

}


/* ======================================================
   LEGAL META
====================================================== */

.legal-meta {

  margin:
    0 0 50px;

  padding-bottom:
    25px;

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

  color:
    var(--warm-gray);

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

  font-size:
    0.82rem;

}


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

.legal-navigation {

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    80px;

  padding-top:
    35px;

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

}


.legal-navigation a {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    48px;

  padding:
    12px 20px;

  color:
    var(--navy);

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

  font-size:
    0.8rem;

  font-weight:
    700;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;

}


.legal-navigation a:hover {

  background:
    var(--navy);

  color:
    var(--white);

  border-color:
    var(--navy);

}


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

.site-footer {

  padding:
    70px 20px 38px;

  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:
    32px;

}


.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:
    22px;

  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:
    32px 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;

}


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

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


  .themes-grid {

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

  }

}


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

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

    box-shadow:
      0 15px 30px rgba(0, 0, 0, 0.08);

  }


  .site-navigation.active {

    display:
      flex;

  }


  .site-navigation a {

    padding:
      14px 0;

  }


  .site-navigation a::after {

    display:
      none;

  }


  .book-overview,

  .story-themes,

  .continue-story {

    padding:
      75px 20px;

  }


  .author-hero,

  .legal-hero {

    padding:
      80px 20px 75px;

  }


  .author-page {

    padding-top:
      75px;

  }


  .legal-page {

    padding:
      70px 20px 85px;

  }


  .author-content {

    font-size:
      1.25rem;

  }


  .legal-content {

    font-size:
      1.2rem;

  }


  .author-opening {

    font-size:
      1.48rem;

  }


  .legal-opening {

    font-size:
      1.4rem;

  }


  .author-quote,

  .featured-question {

    margin:
      45px 0;

    padding:
      32px 25px;

  }


  .author-book-section {

    margin-top:
      75px;

    padding:
      70px 20px;

  }


  .author-book-grid {

    grid-template-columns:
      1fr;

    gap:
      50px;

  }


  .author-book-details {

    text-align:
      center;

  }


  .author-book-details .section-divider {

    margin:
      28px auto;

  }


  .legal-notice,

  .legal-information {

    padding:
      28px 25px;

  }


  .legal-navigation {

    margin-top:
      60px;

  }

}


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

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


  .brand-main {

    font-size:
      0.82rem;

    letter-spacing:
      0.05em;

  }


  .brand-subtitle {

    font-size:
      0.9rem;

  }


  .book-overview-content {

    font-size:
      1.15rem;

  }


  .book-overview-content p:first-child {

    font-size:
      1.4rem;

  }


  .themes-grid {

    grid-template-columns:
      1fr;

  }


  .author-hero,

  .legal-hero {

    padding:
      70px 20px;

  }


  .author-hero h1,

  .legal-hero h1 {

    font-size:
      2.3rem;

  }


  .author-hero-description,

  .legal-hero-description {

    font-size:
      1.18rem;

  }


  .author-page {

    padding-top:
      60px;

  }


  .legal-page {

    padding:
      60px 20px 75px;

  }


  .author-content,

  .legal-content {

    font-size:
      1.12rem;

    line-height:
      1.75;

  }


  .author-opening,

  .legal-opening {

    font-size:
      1.3rem;

  }


  .author-quote,

  .featured-question {

    padding:
      28px 20px;

  }


  .author-quote p,

  .featured-question p {

    font-size:
      1.55rem;

  }


  .author-book-section {

    padding:
      55px 20px;

  }


  .author-book-cover img {

    max-width:
      220px;

  }


  .author-book-details p:last-of-type {

    font-size:
      1.18rem;

  }


  .legal-notice,

  .legal-information {

    padding:
      25px 20px;

  }


  .legal-navigation {

    flex-direction:
      column;

  }


  .legal-navigation a {

    width:
      100%;

  }


  .footer-links,

  .footer-legal {

    gap:
      14px;

  }

}