/* ============================================================
   base.css — reset, body, overlays, shared type, reveal system
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }   /* the good one */

html { height: 100%; }

/* The window is a desk with a book on it. Nothing scrolls anywhere —
   not the window, not a page. You turn pages instead. */
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--book);
  font-size: clamp(1.02rem, 0.55vw + 0.9rem, 1.2rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: #090d13;
  background-image:
    radial-gradient(120% 90% at 50% 0%, #1a2433 0%, #0e1520 45%, #070a0f 100%);
}

::selection { background: var(--highlighter); color: var(--ink); }

img, svg { max-width: 100%; }

code, pre { font-family: var(--mono); }

/* ---------- full-screen overlays ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: var(--noise);
  background-size: 260px 260px;
  opacity: 0.055;
  mix-blend-mode: multiply;
}

#dust {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ---------- shared headings ---------- */

/* All in cqi, like everything else printed on a page — see the note at
   the top of pages.css. A page head costs about 26.6cqi of the 126.4cqi
   a page has to give. */

.page__head {
  margin: 0 auto 4.5cqi;
  text-align: center;
}

.page__eyebrow {
  margin: 0 0 2.2cqi;
  font-family: var(--label);
  font-weight: 300;
  font-size: 2cqi;
  line-height: 1.4;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.page__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 7cqi;
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.page__title::after {
  content: "";
  display: block;
  width: 13cqi;
  height: 1px;
  margin: 3cqi auto 0;
  background: linear-gradient(90deg, transparent, var(--ink-faint) 20%, var(--ink-faint) 80%, transparent);
}

.page__dek {
  margin: 2.4cqi 0 0;
  font-style: italic;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* the page number, printed on the page, not on the text */
.folio {
  position: absolute;
  z-index: 2;
  bottom: 2.6cqi;
  right: 4.5cqi;
  font-family: var(--serif);
  font-size: 2.4cqi;
  font-style: italic;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* versos number from the outer corner too, which is the left one */
.leaf__face--back > .folio {
  right: auto;
  left: 4.5cqi;
}

/* ---------- reveal on turning to the page ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition:
    opacity 0.9s var(--ease-out),
    transform 1.1s var(--ease-out);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Elements carrying data-tilt keep their rotation once revealed; the
   inline --tilt custom property is set by reveal.js. */
[data-tilt] {
  --tilt: 0deg;
  transform: translateY(26px) rotate(0deg);
}
[data-tilt].is-in {
  transform: translateY(0) rotate(var(--tilt));
}

@media (prefers-reduced-motion: reduce) {
  .reveal, [data-tilt] { opacity: 1; transform: none; transition: none; }
  [data-tilt].is-in { transform: rotate(var(--tilt)); }
}