/* ═══════════════════════════════════════════════════════════════════
   GUARDIANS · THE GRAND GRIMOIRE (grimoire.css)
   The spell book as a book, spread across the page. Erez's plates sit
   under a parchment veil so their gold-and-violet frames ghost through
   real ink. portal.css is LAW; toolbar dress comes from compendium.css.
   ═══════════════════════════════════════════════════════════════════ */

html:not(.grimoire-on) .gp-scriptorium,
html:not(.grimoire-on) #gp-book { display: none; }
html.grimoire-on #gp-fallback { display: none; }

/* Title zone: the closed book beside its name */
.gp-titlezone {
  display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap; max-width: 1100px; margin: 0 auto 22px; text-align: left;
}
.gp-titlezone img {
  width: clamp(140px, 18vw, 220px); height: auto;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgba(183, 154, 224, 0.12));
}
.gp-titlezone h2 {
  font-family: var(--f-arc); font-weight: 400; margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: 0.06em; color: #f0eaf8;
  text-shadow: 0 0 34px rgba(183, 154, 224, 0.35);
}
.gp-titlezone .gp-sub {
  margin: 6px 0 0; font-family: var(--f-arc); font-style: italic;
  color: #ab9fc4; font-size: 1.02rem;
}

/* Scriptorium bar */
.gp-scriptorium { max-width: 1100px; margin: 0 auto 8px; }
.gp-scriptorium .toolbar { margin-bottom: 8px; }
.gp-meta { display: flex; align-items: center; gap: 14px; }
.gp-meta #count { flex: 1 1 auto; margin: 0; }
.gp-scriptorium .export-options { flex: 0 0 auto; justify-content: flex-end; }
.gp-scriptorium .export-options button { padding: 9px 16px; font-size: 0.7rem; }
#gp-status { max-width: 1100px; margin: 0 auto 10px; }
#gp-status:empty { display: none; }

/* ── The book, spread on the page ── */
#gp-book {
  position: relative; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: clamp(560px, 76vh, 860px);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75), 0 0 60px rgba(183, 154, 224, 0.1);
}
#gp-book::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 64px;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(42, 30, 16, 0.32) 45%, rgba(20, 14, 8, 0.48) 50%, rgba(42, 30, 16, 0.32) 55%, transparent);
}
.gp-page { overflow-y: auto; padding: clamp(22px, 3.4vw, 46px); color: var(--ink); }
.gp-page.gp-index {
  background:
    linear-gradient(rgba(233, 221, 194, 0.8), rgba(233, 221, 194, 0.8)),
    url("../images/grimoire/page-index.webp") center / cover;
}
.gp-page.gp-entrypage {
  background:
    linear-gradient(rgba(236, 226, 200, 0.82), rgba(236, 226, 200, 0.82)),
    url("../images/grimoire/page-entry.webp") center / cover;
  position: relative;
}

/* Left page: chapters / list */
.gp-head { font-family: var(--f-arc); font-size: 1.4rem; text-align: center; margin: 0 0 14px; color: var(--ink); }
.gp-head-list { flex: 1 1 auto; text-align: left; margin: 0; font-size: 1.15rem; }
.gp-toc { display: grid; gap: 2px; }
.gp-chapter, .gp-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  text-align: left; cursor: pointer; background: none; border: none;
  font-family: var(--f-arc); font-size: 1rem; color: var(--ink);
  padding: 8px 4px; border-bottom: 1px dotted rgba(74, 61, 44, 0.3);
}
.gp-chapter:hover, .gp-row:hover { background: rgba(138, 109, 59, 0.1); }
.gp-row.open { background: rgba(138, 109, 59, 0.16); font-weight: 700; }
.gp-chapter .sg, .gp-row .sg { flex: 0 0 26px; text-align: center; }
.gp-chapter .nm, .gp-row .nm {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-chapter .ct {
  flex: 0 0 auto; font-size: 0.75rem; color: var(--ink-soft);
  border: 1px solid rgba(74, 61, 44, 0.4); border-radius: 999px; padding: 1px 9px;
}
.gp-row .tr { flex: 0 0 auto; font-size: 0.75rem; color: #6d4a1f; font-style: italic; }
.gp-listtop { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gp-ribbon {
  flex: 0 0 auto; cursor: pointer; font-family: var(--f-ui); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--parch); background: #4a3d2c; border: none; border-radius: 6px;
  padding: 9px 14px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.gp-ribbon:hover { background: #5d4d38; }
.gp-none { font-family: var(--f-arc); font-style: italic; color: var(--ink-soft); padding: 12px 4px; }

/* Right page: the frontispiece and the spell sheet */
.gp-front { text-align: center; padding-top: clamp(20px, 5vh, 60px); }
.gp-front-k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #8a6d3b; }
.gp-front h3 { font-family: var(--f-arc); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 8px 0; color: var(--ink); }
.gp-front-n { font-family: var(--f-arc); font-style: italic; color: var(--ink-soft); }
.gp-front-t { font-family: var(--f-arc); font-style: italic; color: var(--ink-soft); margin-top: 26px; line-height: 1.7; }

.gp-stamp {
  float: right; margin: 4px 0 12px 16px; padding: 12px 16px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--parch); background: radial-gradient(circle at 35% 30%, #7a5aa0, #46325d 80%);
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 54%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 0 10px rgba(0, 0, 0, 0.3);
  max-width: 38%; text-align: center;
}
.gp-name { font-family: var(--f-arc); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin: 0 0 2px; color: var(--ink); }
.gp-name .cap { float: left; font-size: 2.35em; line-height: 0.82; padding: 4px 10px 0 0; color: #5d3f14; }
.gp-school { clear: none; font-family: var(--f-arc); font-style: italic; font-size: 0.98rem; color: var(--ink-soft); margin: 0 0 14px; }
.gp-mech { clear: left; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.gp-mech span {
  font-size: 0.8rem; color: var(--ink);
  border: 1px solid rgba(74, 61, 44, 0.45); border-radius: 999px; padding: 3px 12px;
  background: rgba(255, 255, 255, 0.28);
}
.gp-mech b { color: #5d3f14; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.66rem; margin-right: 4px; }
.gp-effect { font-family: var(--f-arc); font-size: 1.06rem; line-height: 1.75; color: var(--ink); margin: 0 0 12px; }
.gp-blurb { font-family: var(--f-arc); font-style: italic; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; }
.gp-margin { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); border-left: 3px solid rgba(138, 109, 59, 0.5); padding-left: 12px; margin: 0 0 10px; }
.gp-margin b { color: #5d3f14; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; }
.gp-tags span {
  display: inline-block; margin: 0 6px 6px 0; padding: 2px 12px;
  font-size: 0.74rem; color: #5d3f14; border: 1px solid rgba(93, 63, 20, 0.5);
  border-radius: 999px; background: rgba(255, 255, 255, 0.25);
}
.gp-prov { font-family: var(--f-arc); font-style: italic; font-size: 0.8rem; color: var(--ink-soft); border-top: 1px solid rgba(74, 61, 44, 0.3); padding-top: 8px; margin-top: 16px; }

/* The page turn */
@keyframes gp-turn {
  0%   { opacity: 0.25; transform: perspective(1200px) rotateY(-14deg); }
  100% { opacity: 1;    transform: perspective(1200px) rotateY(0deg); }
}
.gp-page.turning #gp-entry-host, .gp-page.turning .gp-front { animation: gp-turn 0.45s ease-out; transform-origin: left center; }
#gp-back { display: none; }

/* One page at a time on small screens */
@media (max-width: 760px) {
  #gp-book { grid-template-columns: 1fr; min-height: min(820px, 92vh); }
  .gp-page.gp-entrypage { display: none; }
  #gp-book.entry-open .gp-index { display: none; }
  #gp-book.entry-open .gp-entrypage { display: block; }
  #gp-back {
    display: inline-block; position: sticky; bottom: 0; margin-top: 18px; cursor: pointer;
    font-family: var(--f-ui); font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--parch); background: #4a3d2c; border: none; border-radius: 6px;
    padding: 12px 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

/* No-JS chain (also the print truth) */
#gp-fallback { max-width: 940px; margin: 0 auto; }
.fb-chapter {
  border: 1px solid rgba(183, 154, 224, 0.22); border-radius: 10px;
  background: rgba(16, 13, 30, 0.72); margin: 0 0 12px; padding: 0 18px;
}
.fb-chapter summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: #f0eaf8; }
.fb-chapter summary .count { font-size: 0.75rem; color: var(--arc-hi); border: 1px solid var(--arc-line); border-radius: 999px; padding: 1px 9px; margin-left: 8px; }
.fb-spell { border-top: 1px solid rgba(183, 154, 224, 0.12); padding: 12px 0; }
.fb-spell h4 { margin: 0 0 4px; color: #ffe3ae; }
.fb-spell h4 em { font-weight: 400; font-size: 0.8rem; color: #9d92b8; margin-left: 8px; }
.fb-spell p { margin: 0 0 6px; font-family: var(--f-arc); line-height: 1.55; color: #c9bfdd; }
.fb-mech { font-size: 0.82rem; color: #ab9fc4 !important; }
.fb-blurb { font-style: italic; color: #9d92b8 !important; }

@media (prefers-reduced-motion: reduce) {
  .gp-page.turning #gp-entry-host, .gp-page.turning .gp-front { animation: none; }
}
@media print {
  .gp-scriptorium, #gp-book, .gp-titlezone img { display: none !important; }
  #gp-fallback { display: block !important; }
}

/* The signature: the logo itself, floating on the parchment */
.gp-front-logo { display: block; margin: 30px auto 0; width: clamp(240px, 24vw, 330px); height: auto; }