/* =========================================================
   BENEATH EVERYTHING
   EPILOGUE STYLESHEET

   Epilogue
   What Remained

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


/* =========================================================
   EPILOGUE HERO
========================================================= */

.epilogue-hero {
  position: relative;

  padding:
    135px 24px 115px;

  overflow: hidden;

  text-align: center;

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

  color:
    var(--white);
}


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

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(200, 164, 93, 0.18),
      transparent 50%
    );
}


.epilogue-hero-content {
  position: relative;

  z-index: 1;

  width:
    min(950px, 100%);

  margin: 0 auto;
}


.epilogue-label {
  margin:
    0 0 22px;

  color:
    var(--gold-light);

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}


.epilogue-hero h1 {
  margin: 0;

  color:
    var(--white);

  font-family:
    "Cinzel",
    serif;

  font-size:
    clamp(3rem, 8vw, 6rem);

  font-weight: 500;

  line-height: 1.1;
}


.epilogue-divider {
  width: 80px;

  height: 1px;

  margin:
    35px auto;

  background:
    var(--gold);
}


.epilogue-introduction {
  margin: 0;

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

  font-family:
    "Cormorant Garamond",
    serif;

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

  font-style: italic;

  line-height: 1.5;
}


/* =========================================================
   EPILOGUE CONTENT
========================================================= */

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


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


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


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

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


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

.reflection,
.closing-reflection {
  margin:
    65px 0;

  padding:
    45px 30px;

  text-align: center;

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

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


.reflection p,
.closing-reflection p {
  margin: 0;

  color:
    var(--navy);

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

  font-style: italic;

  font-weight: 500;

  line-height: 1.4;
}


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

.epilogue-content blockquote {
  margin:
    70px 0;

  padding:
    45px 35px;

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

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

  color:
    var(--navy);

  text-align: center;

  font-size:
    clamp(2rem, 4vw, 3.1rem);

  font-style: italic;

  line-height: 1.35;
}


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


/* =========================================================
   SECTION DIVIDER
========================================================= */

.section-divider {
  margin:
    70px auto;
}


/* =========================================================
   FINAL PARAGRAPH
========================================================= */

.final-paragraph {
  margin-top:
    60px !important;

  color:
    var(--navy);

  text-align: center;

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

  font-style: italic;

  font-weight: 600;

  line-height: 1.4;
}


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

.epilogue-navigation {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  margin-top: 110px;

  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;

  transition:
    color 0.25s ease;
}


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


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


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


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


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


  .epilogue-content blockquote {
    margin:
      50px 0;

    padding:
      35px 20px;
  }


  .epilogue-navigation {
    flex-direction: column;

    gap: 30px;
  }


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

    margin-left: 0;

    text-align: left;
  }

}