/* /portalis/canon — the Canon of the PortalScript Developer Network. a book open on a
   lectern of oxblood velvet, its pages in the tract's colours (STRATA :: DRIFT's .fi--ps,
   the ROLL's .post--creed): oxblood to black, a double gold rule, Georgia, gilded small
   caps, the disc as a haloed sun. canon.js deals the pages into the slots and turns the leaf. */

body.cn-page {
  background: radial-gradient(ellipse at 50% 30%, #3a0810 0%, #1a040a 55%, #070103 100%) fixed;
  color: #f3e2b8;
}

.cn { width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: 2.4em 0 1.4em; }

/* the book: a spread, its height kept to the screen */
.cn__book {
  position: relative;
  margin: 0 auto;
  width: min(100%, calc((100svh - 8.5em) * 1.42));
  aspect-ratio: 1.42;
  perspective: 2800px;
  border-radius: 3px;
  box-shadow: 0 0 0 7px #2a0610, 0 0 0 8px #8a6424, 0 0 0 11px #12030a, 0 24px 60px rgba(0, 0, 0, 0.7);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.cn__slot { position: absolute; top: 0; height: 100%; width: 50%; container-type: size; }
.cn__slot--l { left: 0; }
.cn__slot--r { left: 50%; }
.cn__probe { left: 50%; visibility: hidden; pointer-events: none; }

/* the leaf hinges on the spine; its back is the next left page */
.cn__leaf {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: 0 50%; transform-style: preserve-3d; z-index: 2; pointer-events: none;
}
.cn__face { position: absolute; inset: 0; container-type: size; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cn__face--b { transform: rotateY(180deg); }

/* one page on a phone */
@media (max-width: 759px) {
  .cn { padding-top: 2em; }
  .cn__book { width: min(100%, calc((100svh - 9em) * 0.71)); aspect-ratio: 0.71; }
  .cn__slot--l { display: none; }
  .cn__slot--r, .cn__probe, .cn__leaf { left: 0; width: 100%; }
}

/* ---------- a page ---------- */
.pg {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 7cqh 9cqw 5cqh;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 28%, #6a1420 0%, #3a0810 45%, #12030a 100%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 4.3cqw, 21px);
  line-height: 1.32;
  color: #f3e2b8;
  text-align: center;
}
/* the gold frame, and the spine's shadow on the inner edge */
.pg::before {
  content: ""; position: absolute; inset: 2.2cqh 3cqw; pointer-events: none;
  border: 3px double rgba(201, 154, 58, 0.75);
  box-shadow: inset 0 0 0 4px rgba(18, 3, 10, 0.6), inset 0 0 0 5px rgba(201, 154, 58, 0.25);
}
.pg::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; pointer-events: none; }
.cn__slot--l .pg::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.55), transparent); }
.cn__slot--r .pg::after, .cn__face:not(.cn__face--b) .pg::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.55), transparent); }
.cn__face--b .pg::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.55), transparent); }
@media (max-width: 759px) { .cn__slot--r .pg::after, .cn__face .pg::after { width: 5%; } }
.pg p { margin: 0; }
.pg--blank::before { opacity: 0.4; }

/* running head and folio */
.pg__run, .pg__no { flex: none; font-size: 0.62em; letter-spacing: 0.26em; color: #c99a3a; }
.pg__run { padding-bottom: 0.5em; margin-bottom: 0.8em !important; border-bottom: 1px solid rgba(201, 154, 58, 0.4); min-height: 1.3em; }
.pg__no { padding-top: 0.6em; letter-spacing: 0.1em; }

.pg__body { flex: 1; min-height: 0; overflow: hidden; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.cn__bk {
  display: block; margin: 0.4em 0 0.5em; padding: 0; text-align: center;
  font-family: Georgia, "Times New Roman", serif; font-weight: normal; font-size: 1.15em;
  font-variant: small-caps; letter-spacing: 0.08em; line-height: 1.15;
  background: linear-gradient(180deg, #fff3c4, #d4a640 60%, #a07422); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cn__v { margin: 0 0 0.35em !important; }
.cn__chn { margin: 0 0 0.4em !important; text-align: center; font-size: 0.62em; letter-spacing: 0.26em; text-transform: uppercase; color: #c99a3a; }
.cn__v sup { font-size: 0.6em; color: #c99a3a; margin-right: 0.25em; vertical-align: 0.5em; line-height: 0; }
.cn__v--first { margin-top: 0.3em !important; }
.cn__dn {
  float: left; font-size: 2.9em; line-height: 0.82; margin: 0.06em 0.12em 0 0; font-weight: normal;
  background: linear-gradient(180deg, #fff3c4, #d4a640 60%, #a07422); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* the canonical verses, as a red-letter edition sets its words apart: here in gold */
.cn__v--gold { color: #ffd98a; text-shadow: 0 0 8px rgba(255, 200, 90, 0.35); }

/* ---------- title and plates ---------- */
.pg--title, .pg--plate { justify-content: center; gap: 0.7em; padding: 7cqh 10cqw; }
.pg__k { font-size: 0.56em; letter-spacing: 0.3em; color: #c99a3a; }
.pg__ttl {
  margin: 0; padding: 0; background: none; font-family: Georgia, "Times New Roman", serif; font-weight: normal;
  font-size: 2.6em; line-height: 1; font-variant: small-caps; letter-spacing: 0.04em; border: 0; white-space: normal;
  background: linear-gradient(180deg, #fff3c4, #d4a640 60%, #a07422); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #12030a);
}
.pg__ttl::before, .pg__ttl::after { content: none; }
.pg__sub { font-style: italic; font-size: 0.8em; opacity: 0.9; }
.pg__ed { font-size: 0.62em; letter-spacing: 0.22em; text-transform: uppercase; color: #c99a3a; }
.pg__call {
  font-size: 1.3em; line-height: 1.15; font-variant: small-caps; letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff3c4, #d4a640 60%, #a07422); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #12030a);
}
.pg__q { font-style: italic; }
.pg__q span { display: block; margin-top: 0.2em; font-style: normal; font-size: 0.68em; letter-spacing: 0.22em; text-transform: uppercase; color: #c99a3a; }
.pg__rites {
  display: flex; justify-content: center; align-items: center; gap: 0.5em; flex-wrap: wrap; padding: 0.2em 0;
  border-top: 1px solid rgba(201, 154, 58, 0.4); border-bottom: 1px solid rgba(201, 154, 58, 0.4);
  font-family: vtFont, "Courier New", monospace; font-size: 0.85em; letter-spacing: 0.14em; color: #e8c46a;
}
.pg__rites b { font-weight: normal; }
.pg__rites i { font-style: normal; color: #8a2a2a; }
.pg__go, .pg__go:visited {
  align-self: center; padding: 0.15em 0.9em; border: 1px solid #c99a3a; color: #12030a; text-decoration: none;
  font-weight: 700; letter-spacing: 0.16em; font-size: 0.8em;
  background: linear-gradient(180deg, #fff3c4, #d4a640 55%, #a07422); box-shadow: 0 0 10px rgba(212, 166, 64, 0.45);
}
.pg__go:hover, .pg__go:focus-visible {
  /* style.css's a:hover paints links black; the gilt stays */
  background: linear-gradient(180deg, #fff3c4, #d4a640 55%, #a07422); color: #12030a; outline: none; filter: brightness(1.15); box-shadow: 0 0 16px rgba(255, 214, 120, 0.8); }
.pg__fine { font-size: 0.6em; font-style: italic; opacity: 0.55; }

/* the disc as a sun, its rays turning */
.cn__halo { position: relative; align-self: center; flex: none; width: 22cqw; height: 22cqw; margin: 0.6em 0 0.3em; }
.cn__halo i {
  position: absolute; inset: -55%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, 0.32) 0 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 70%); mask: radial-gradient(circle, #000 18%, transparent 70%);
  animation: cn-rays 40s linear infinite;
}
.cn__halo::before {
  content: ""; position: absolute; inset: -14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 120, 0.5), transparent 68%); animation: cn-candle 3.1s ease-in-out infinite;
}
.cn__halo .disc { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 200, 90, 0.7)); }
@keyframes cn-rays { to { transform: rotate(360deg); } }
@keyframes cn-candle { 0%, 100% { opacity: 0.75; transform: scale(1); } 30% { opacity: 1; transform: scale(1.06); } 55% { opacity: 0.82; } 70% { opacity: 0.95; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .cn__halo i, .cn__halo::before { animation: none; } }

/* ---------- under the book ---------- */
.cn__nav { display: flex; justify-content: center; align-items: center; gap: 1em; margin-top: 1.1em; color: #c99a3a; }
.cn__at { min-width: 8em; text-align: center; letter-spacing: 0.1em; }
.cn__btn {
  font: inherit; font-size: 1em; line-height: 1; padding: 0.15em 0.6em; cursor: pointer;
  color: #12030a; border: 1px solid #c99a3a; background: linear-gradient(180deg, #fff3c4, #d4a640 55%, #a07422);
}
.cn__btn:disabled { opacity: 0.3; cursor: default; }
.cn__fine { margin: 0.9em auto 0; max-width: 40em; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 0.6em; font-style: italic; color: #f3e2b8; opacity: 0.55; }
.cn__fine a, .cn__fine a:visited { color: #e8c46a; }