@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Libre+Baskerville:ital@0;1&display=swap');


/* =========================================================
   GLOBAL
   ========================================================= */

:root {
  --bg: #0d0a11;
  --plum: #1f1824;
  --gold: #c7b37a;
  --cream: #eee6d5;
  --muted: #bdb2bd;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: 'Libre Baskerville', serif;
  line-height: 1.7;
}

.shell {
  width: min(1160px, calc(100% - 36px));
  margin: auto;
}


/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */

header {
  position: fixed;
  z-index: 9;
  width: 100%;
  background: #0d0a11e8;
  border-bottom: 1px solid #c7b37a33;
}

nav {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav a {
  color: var(--cream);
  text-decoration: none;
  margin-left: 22px;
  font-size: .75rem;
}

.brand {
  font-family: Cinzel;
  margin: 0;
  letter-spacing: .13em !important;
}


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

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, #6f4a8e35, transparent 27%),
    linear-gradient(#19121d, #0d0a11);
}

.hero .shell {
  padding-top: 65px;
}

.eyebrow {
  font-family: Cinzel;
  letter-spacing: .23em;
  color: var(--gold);
  font-size: .65rem;
}

.eclipse {
  width: 76px;
  height: 76px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  margin: 30px auto;
  display: grid;
  place-items: center;
  color: var(--gold);
  box-shadow: 0 0 40px #c7b37a22;
}

.hero h1,
h2,
h3 {
  font-family: Cinzel;
  font-weight: 500;
}

.hero h1 {
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1.02;
  letter-spacing: .08em;
  margin: .15em 0;
}

.tag {
  color: var(--gold);
  font-family: Cinzel;
  letter-spacing: .32em;
}

.intro {
  max-width: 700px;
  margin: 25px auto;
  color: #d2c7d1;
}

.hero small {
  display: block;
  margin-top: 55px;
  color: #665d69;
  letter-spacing: .14em;
}


/* =========================================================
   BUTTONS & LINKS
   ========================================================= */

.btn {
  display: inline-block;
  background: var(--gold);
  color: #151018;
  text-decoration: none;
  padding: 12px 18px;
  margin: 12px 5px;
  font-family: Cinzel;
  font-size: .68rem;
  letter-spacing: .12em;
  border: 1px solid var(--gold);
}

.outline {
  background: transparent;
  color: var(--cream);
}

.button {
  display: inline-block;
  padding: 12px 18px;
  font-family: Cinzel, Georgia, serif;
  font-size: .68rem;
  letter-spacing: .12em;
  text-decoration: none;
  border: 1px solid var(--gold);
}

.button.primary {
  background: var(--gold);
  color: #151018;
}

.textlink {
  color: var(--gold);
  font-family: Cinzel, serif;
  font-size: .67rem;
  letter-spacing: .12em;
  text-decoration: none;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section {
  padding: 105px 0;
}

.section h2,
.quote h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  margin: .1em 0;
}

.lead {
  color: var(--muted);
  max-width: 760px;
}


/* =========================================================
   BOOKS
   ========================================================= */

.books {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 42px;
}

.books img {
  width: 100%;
  box-shadow: 0 15px 35px #0008;
  border: 1px solid #c7b37a33;
}

.books b {
  display: block;
  color: var(--gold);
  font-family: Cinzel;
  font-size: .65rem;
  letter-spacing: .12em;
  margin-top: 15px;
}

.books h3 {
  font-size: .95rem;
  line-height: 1.3;
}

.books i {
  font-size: .7rem;
  color: var(--gold);
}

.coverlink {
  display: block;
}

.coverlink img {
  transition: transform .2s ease, box-shadow .2s ease;
}

.coverlink:hover img {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px #000a;
}


/* =========================================================
   PREQUEL
   ========================================================= */

.prequel {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 55px;
  max-width: 650px;
}

.prequel img {
  width: 100%;
}


/* =========================================================
   FIVE ORDERS
   ========================================================= */

.orders-wrap {
  background: #130e16;
  border-block: 1px solid #c7b37a20;
}

.orders {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 40px;
}

.orders > div {
  min-height: 280px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: Cinzel;
  letter-spacing: .1em;
  border: 1px solid #ffffff22;
}

.orders span {
  font-family: 'Libre Baskerville', serif;
  font-size: .68rem;
  letter-spacing: 0;
  margin-top: 6px;
}

.order-symbol {
  display: block;
  width: 140px;
  height: 140px;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 24px;
  border-radius: 6px;
}

.ember {
  background: #B83A3A33;
}

.veil {
  background: #6F4A8E44;
}

.verdant {
  background: #4F7A4E44;
}

.astral {
  background: #C69A3B33;
}

.iron {
  background: #4D6F8A44;
}


/* =========================================================
   CROWN ARCHIVE
   ========================================================= */

.redacted {
  text-align: center;
  color: #655c67;
  font: .7rem monospace;
  letter-spacing: .13em;
  text-decoration: line-through;
  margin-top: 40px;
}

.archive-trigger {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
}

.archive-glitch {
  display: none;
  margin: 18px auto 0;
  max-width: 540px;
  padding: 18px;
  border: 1px solid rgba(184, 58, 58, .45);
  font-family: monospace;
  text-align: center;
  background: rgba(184, 58, 58, .06);
  letter-spacing: .12em;
}

.archive-glitch.show {
  display: grid;
  gap: 5px;
  animation: glitch .22s 2;
}

.archive-glitch b {
  color: #B83A3A;
}

.archive-glitch small {
  color: #706770;
}

@keyframes glitch {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(3px);
  }

  50% {
    transform: translateX(-4px);
  }

  100% {
    transform: translateX(0);
  }
}


/* =========================================================
   VEYR
   ========================================================= */

.split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 65px;
  align-items: center;
}

.map {
  padding: 10px;
  border: 1px solid #c7b37a66;
  background: #171219;
}

.map img {
  width: 100%;
  display: block;
}


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

.quote {
  text-align: center;
  padding: 120px 20px;
  background: radial-gradient(circle, #6f4a8e22, transparent 60%);
}

.quote > p {
  font-size: 5rem;
  color: var(--gold);
  margin: 0;
  line-height: .5;
}

.quote small {
  color: var(--gold);
  letter-spacing: .2em;
}


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

.author {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 55px;
  align-items: center;
}

.monogram {
  width: 180px;
  height: 180px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  font: 2.4rem Cinzel;
}


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

footer {
  border-top: 1px solid #c7b37a33;
  padding: 35px 0;
  color: #827883;
  font-size: .7rem;
}

footer .shell {
  display: flex;
  justify-content: space-between;
}

footer b {
  color: var(--gold);
  font-family: Cinzel;
  letter-spacing: .12em;
}


/* =========================================================
   BOOK DETAIL PAGES
   ========================================================= */

.detail-page {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(111, 74, 142, .18),
      transparent 30%
    ),
    #0d0a11;
}

.back {
  font-family: Cinzel, serif;
  font-size: .7rem;
  letter-spacing: .12em;
}

.book-detail {
  min-height: calc(100vh - 110px);
  padding: 130px 0 70px;
  display: grid;
  grid-template-columns: minmax(240px, 390px) 1fr;
  gap: 80px;
  align-items: center;
}

.detail-cover img {
  width: 100%;
  display: block;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .6);
  border: 1px solid rgba(199, 179, 122, .25);
}

.detail-copy h1 {
  font-family: Cinzel, serif;
  font-size: clamp(2.7rem, 6vw, 5.8rem);
  line-height: 1.03;
  margin: .15em 0;
}

.detail-copy > p {
  max-width: 680px;
  color: #c9bec9;
}

.detail-tag {
  font-size: 1.15rem;
  color: var(--gold) !important;
  font-style: italic;
}

.record {
  margin: 35px 0;
  padding: 20px;
  border-left: 1px solid var(--gold);
  background: rgba(199, 179, 122, .04);
  max-width: 500px;
}

.record small {
  font-family: monospace;
  color: #766d77;
}

.record p {
  margin: .4em 0 0;
  font-family: Cinzel, serif;
  font-size: .75rem;
  letter-spacing: .12em;
}

.buy-note {
  font-size: .7rem !important;
  color: #706770 !important;
}

.detail-copy .button {
  margin-top: 8px;
}


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

@media (max-width: 850px) {

  nav div {
    display: none;
  }

  .books {
    grid-template-columns: repeat(2, 1fr);
  }

  .orders {
    grid-template-columns: repeat(2, 1fr);
  }

  .split {
    grid-template-columns: 1fr;
  }

  .author {
    grid-template-columns: 1fr;
  }

  .monogram {
    width: 130px;
    height: 130px;
  }
}


@media (max-width: 760px) {

  .book-detail {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .detail-cover {
    max-width: 330px;
    margin: auto;
  }

  .back {
    font-size: .58rem;
  }
}


@media (max-width: 500px) {

  .books,
  .orders {
    grid-template-columns: 1fr;
  }

  .prequel {
    grid-template-columns: 95px 1fr;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .section {
    padding: 75px 0;
  }

  footer .shell {
    flex-direction: column;
    gap: 8px;
  }
}