/* ============================================================
   cover.css — the boards and the endpapers

   Four faces are not paper: the front board, the endpaper behind
   it, the colophon pasted inside the back board, and the back
   board itself. They are all .board, and they all fill their leaf.

   Same rule as pages.css: the board is always 100cqi by 138.889cqi,
   so everything here is in cqi and nothing scrolls.
   ============================================================ */

/* The board itself is only the stock: cloth, rule and corners are
   pinned to it and must not move. */
.board {
  background: var(--navy);
  isolation: isolate;
}

/* The type sits in a well that fills the board. Its padding is a
   percentage rather than cqi because a container cannot be asked its
   own width, and the board is the container — but percentage padding
   resolves against the inline size either way, so it comes to the
   same thing. */
.board__well {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: safe center;
  justify-items: center;
  padding: 7% 6%;
  overflow: hidden;
  /* so that anything inheriting an em on a board scales with it too */
  font-size: 3.4cqi;
}

/* bookcloth: a woven base, a vignette, and a little grime */
.board__cloth {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
    radial-gradient(130% 95% at 50% 18%, var(--navy-lift), var(--navy) 58%, #0b121c 100%);
}

.board__cloth::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cloth);
  background-size: 180px 180px;
  opacity: 0.11;
  mix-blend-mode: overlay;
}

/* embossed gold double-rule */
.board__rule {
  position: absolute;
  inset: 4cqi;
  z-index: -1;
  border: 1px solid rgba(198, 162, 74, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    inset 0 0 0 7px rgba(0,0,0,0),
    inset 0 0 0 8px rgba(198, 162, 74, 0.26),
    inset 0 0 0 9px rgba(0,0,0,0.3),
    0 0 40px rgba(0,0,0,0.5);
}

.cover__inner {
  position: relative;
  text-align: center;
  color: var(--gold-bright);
}

.cover__kicker {
  margin: 0 0 4.5cqi;
  font-family: var(--label);
  font-weight: 200;
  font-size: 1.9cqi;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(198, 162, 74, 0.78);
}

/* ---------- engraved seal ---------- */

.seal {
  position: relative;
  width: 21cqi;
  aspect-ratio: 1;
  margin: 0 auto 4cqi;
  display: grid;
  place-items: center;
}

.seal--sm { width: 15cqi; }

.seal__rays {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg,
    var(--gold) 0deg 0.7deg,
    transparent 0.7deg 5deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 61% 74%, transparent 75%);
          mask: radial-gradient(circle, transparent 0 60%, #000 61% 74%, transparent 75%);
  opacity: 0.85;
  animation: seal-turn 140s linear infinite;
}

@keyframes seal-turn { to { transform: rotate(360deg); } }

.seal__ring {
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(198, 162, 74, 0.75);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,0.25),
    inset 0 0 0 5px rgba(198, 162, 74, 0.35);
}

.seal__glyph {
  position: relative;
  font-family: var(--mono);
  font-size: 4cqi;
  letter-spacing: -0.04em;
  color: var(--gold-bright);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}

/* ---------- title ---------- */

.cover__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

.cover__title-line {
  display: block;
  font-size: 12cqi;
  background: linear-gradient(176deg, #f6e5ae 0%, var(--gold) 42%, var(--gold-deep) 70%, #e2c87f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(198,162,74,0.16));
}

.cover__title-line:first-child {
  font-size: 7.5cqi;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

.cover__dates {
  margin: 4cqi 0 0;
  font-family: var(--label);
  font-weight: 300;
  font-size: 2.5cqi;
  letter-spacing: 0.36em;
  color: rgba(198, 162, 74, 0.9);
}

.cover__dates i { font-style: normal; margin: 0 0.5em; opacity: 0.6; }

.cover__sub {
  margin: 1.4cqi 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.2cqi;
  color: rgba(232, 205, 132, 0.62);
  letter-spacing: 0.06em;
}

.cover__byline {
  max-width: 76cqi;
  margin: 4cqi auto 0;
  padding-top: 3.5cqi;
  border-top: 1px solid rgba(198, 162, 74, 0.2);
  font-family: var(--book);
  font-style: italic;
  font-size: 2.7cqi;
  line-height: 1.55;
  color: rgba(232, 205, 132, 0.46);
}

/* ---------- open button ---------- */

.openbtn {
  margin: 6cqi auto 0;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.8em 1.7em;
  background: transparent;
  border: 1px solid rgba(198, 162, 74, 0.55);
  color: var(--gold-bright);
  font-family: var(--label);
  font-weight: 300;
  font-size: 2.2cqi;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s var(--ease-soft), color 0.4s, border-color 0.4s, letter-spacing 0.5s var(--ease-soft);
}

.openbtn:hover,
.openbtn:focus-visible {
  background: rgba(198, 162, 74, 0.13);
  border-color: var(--gold-bright);
  letter-spacing: 0.36em;
  outline: none;
}

.openbtn__icon { font-size: 0.7em; transform: translateY(-1px); }

.openbtn.is-open .openbtn__icon { opacity: 0.4; }

.cover__hint {
  margin: 2.6cqi 0 0;
  font-family: var(--hand);
  font-size: 3.2cqi;
  color: rgba(232, 205, 132, 0.52);
  transform: rotate(-1.4deg);
}

/* ---------- corner flourishes ---------- */

.board__corner {
  position: absolute;
  width: 9cqi;
  aspect-ratio: 1;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;   /* they sit over the type; they are only drawing */
  background:
    radial-gradient(circle at 100% 100%, transparent 0 62%, rgba(198,162,74,0.55) 63% 64%, transparent 65%),
    radial-gradient(circle at 100% 100%, transparent 0 40%, rgba(198,162,74,0.38) 41% 42%, transparent 43%),
    linear-gradient(135deg, rgba(198,162,74,0.5) 0 1px, transparent 1px);
}

.board__corner--tl { top: 5.5cqi; left: 5.5cqi; }
.board__corner--tr { top: 5.5cqi; right: 5.5cqi; transform: scaleX(-1); }
.board__corner--bl { bottom: 5.5cqi; left: 5.5cqi; transform: scaleY(-1); }
.board__corner--br { bottom: 5.5cqi; right: 5.5cqi; transform: scale(-1); }

/* ─────────────────────────────  ENDPAPERS  ──────────────────────────── */

.endpaper {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: safe center;
  justify-items: center;
  overflow: hidden;
  padding: 8cqi;
  font-size: 3.4cqi;
  background-color: #6d4a3c;
  background-image:
    repeating-conic-gradient(from 12deg at 32% 28%,
      rgba(255, 236, 206, 0.07) 0deg 14deg, rgba(40, 20, 12, 0.08) 14deg 27deg),
    repeating-conic-gradient(from 48deg at 73% 76%,
      rgba(255, 236, 206, 0.06) 0deg 18deg, rgba(40, 20, 12, 0.07) 18deg 31deg),
    radial-gradient(120% 90% at 40% 30%, #8a6049, #5d3f32 60%, #3f2a22);
}

.bookplate {
  position: relative;
  max-width: 72cqi;
  padding: 6cqi;
  text-align: center;
  color: #40332a;
  background: linear-gradient(170deg, #f7efdd, #ebdfc5 70%, #ddcdac);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.3) inset,
    0 0 0 6px rgba(109, 74, 60, 0.35),
    0 26px 46px -24px rgba(0,0,0,0.85);
}

.bookplate::before {
  content: "";
  position: absolute;
  inset: 1.8cqi;
  border: 1px solid rgba(64, 51, 42, 0.35);
  pointer-events: none;
}

.bookplate__ex {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.6cqi;
  color: var(--oxblood);
}

.bookplate__of {
  margin: 2.6cqi 0 1.5cqi;
  font-family: var(--label);
  font-weight: 300;
  font-size: 1.9cqi;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.bookplate__name {
  margin: 0;
  font-family: var(--hand);
  font-size: 5cqi;
  line-height: 1.2;
  color: #2f4f7a;
}

.bookplate hr {
  width: 60%;
  margin: 3.6cqi auto;
  border: 0;
  border-top: 1px solid rgba(64, 51, 42, 0.3);
}

.bookplate__note {
  margin: 0;
  font-family: var(--book);
  font-style: italic;
  font-size: 2.9cqi;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* the dark one, pasted inside the back board */
.endpaper--dark {
  background-color: #121b27;
  background-image:
    repeating-conic-gradient(from 20deg at 30% 34%,
      rgba(198, 162, 74, 0.045) 0deg 16deg, rgba(0, 0, 0, 0.1) 16deg 30deg),
    radial-gradient(120% 90% at 50% 30%, #1d2a3c, #101925 65%, #0a1017);
}

/* ────────────────────────────  BACK BOARD  ──────────────────────────── */

.backboard {
  position: relative;
  text-align: center;
}

.backboard__mark {
  margin: 3cqi 0 0;
  font-family: var(--label);
  font-weight: 200;
  font-size: 1.9cqi;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(198, 162, 74, 0.5);
}

.backboard__hand {
  margin: 6cqi 0 0;
  font-family: var(--hand);
  font-size: 3.6cqi;
  color: rgba(232, 205, 132, 0.34);
  transform: rotate(-1.6deg);
}