/* ==========================================================================
   HEXCORE — THE LEDGER · /work/
   The book of commissions, open on the lectern, filling the window. The 3D
   pages are dark leather; these are the words gilded onto them (matrix3d per
   frame from js/ledger/main.js). Each page is its own container, so the type
   and rhythm scale with the page at any window size — the layout is identical
   whether the page projects at 400px or 900px. Colours from editions.css.
   ========================================================================== */

html, body { height: 100%; }
body.ledger-body { margin: 0; background: var(--ink); color: var(--parchment); overflow: hidden; font-family: var(--font-body); }
.ledger { position: fixed; inset: 0; }
.ledger__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ledger__pages { position: absolute; inset: 0; pointer-events: none; }
.ledger__pages.is-grabbing { cursor: grabbing; }
.ledger__title { display: none; }                  /* the topbar names the page; the book fills the rest */

/* ---------- a page ---------- */
.spread { display: contents; }
.page {
  position: absolute; left: 0; top: 0;
  width: var(--page-w, 480px); height: var(--page-h, 560px);
  transform-origin: 0 0; pointer-events: auto; cursor: grab;
  --u: var(--page-w);                              /* every size below is a fraction of the page itself */
  box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: calc(var(--page-h) * 0.09) calc(var(--page-w) * 0.13) calc(var(--page-h) * 0.06) calc(var(--page-w) * 0.09);                   /* the inner edge clears the spine */
  color: var(--parchment); opacity: 0; visibility: hidden;
  --teal: #2fe6d6;
  --label: #a99b86;                                /* warm grey, not brass: the binding carries the gold */
  --rule: rgba(226, 230, 238, 0.16);
}
.page--right { padding: calc(var(--page-h) * 0.09) calc(var(--page-w) * 0.09) calc(var(--page-h) * 0.07) calc(var(--page-w) * 0.13); }
.page--right > .page__kicker { padding-right: calc(var(--page-w) * 0.14); }
.page--right > .page__links { margin-top: 0; border-top: 1px solid var(--rule); }
.page.is-printed { opacity: 1; visibility: visible; }
.page::before {                                    /* the gutter falls into shadow, the fore-edge catches the light */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to left, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.32) 4%, rgba(0, 0, 0, 0.08) 11%, transparent 26%),
    linear-gradient(to right, rgba(233, 236, 242, 0.045) 0%, transparent 18%);
}
.page--right::before {
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.32) 4%, rgba(0, 0, 0, 0.08) 11%, transparent 26%),
    linear-gradient(to left, rgba(233, 236, 242, 0.045) 0%, transparent 18%);
}
.page > * { position: relative; }
.page.is-turning { opacity: 0; }
.page a, .page button { pointer-events: auto; cursor: pointer; }
.page > * { flex: 0 0 auto; }

.page__kicker { font-family: var(--font-dial); font-size: calc(var(--page-w) * 0.024); letter-spacing: 0.28em; text-transform: uppercase; color: var(--label); margin: 0 0 calc(var(--page-h) * 0.04); }
.page__numeral { position: absolute; right: calc(var(--page-w) * 0.09); top: calc(var(--page-h) * 0.07); font-family: var(--font-giant); font-weight: 800; font-size: calc(var(--page-w) * 0.11); letter-spacing: -0.05em; color: rgba(226, 230, 238, 0.13); line-height: 1; }
.page__title { font-family: var(--font-giant); font-weight: 800; font-size: calc(var(--page-w) * 0.078); letter-spacing: -0.045em; line-height: 0.98; color: var(--parchment); margin: 0 0 calc(var(--page-h) * 0.022); text-wrap: balance; }
.page__lede { font-size: calc(var(--page-w) * 0.034); line-height: 1.45; color: rgba(242, 232, 216, 0.82); margin: 0 0 calc(var(--page-h) * 0.018); }
.page p:not([class]) { font-size: calc(var(--page-w) * 0.032); line-height: 1.6; color: rgba(242, 232, 216, 0.74); margin: 0 0 calc(var(--page-h) * 0.025); }
.page__tags { display: flex; flex-wrap: wrap; gap: calc(var(--page-w) * 0.016); margin: 0 0 calc(var(--page-h) * 0.04); padding: 0; list-style: none; }
.page__tags li { font-family: var(--font-dial); font-size: calc(var(--page-w) * 0.022); letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); border: 1px solid var(--rule); padding: calc(var(--page-h) * 0.014) calc(var(--page-w) * 0.024); border-radius: 999px; }
.page__rule { border: 0; border-top: 1px solid var(--rule); margin: calc(var(--page-h) * 0.04) 0; width: 100%; }
.page__links { display: flex; flex-wrap: wrap; gap: calc(var(--page-h) * 0.018) calc(var(--page-w) * 0.05); margin-top: auto; padding-top: calc(var(--page-h) * 0.025); }
.page__link {
  font-family: var(--font-dial); font-size: calc(var(--page-w) * 0.025); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal); text-decoration: none; background: none; border: 0; padding: 0;
  transition: color 0.3s ease;
}
.page__link:hover { color: var(--parchment); }
.page__caption { font-size: calc(var(--page-w) * 0.028); line-height: 1.5; color: rgba(226, 230, 238, 0.6); margin: 0; max-width: 34ch; }
/* the piece's name, set large at the foot of its page */
.page__mark { margin: auto 0 0; font-family: var(--font-giant); font-weight: 800; font-size: calc(var(--page-w) * 0.075); letter-spacing: -0.04em; line-height: 1; color: rgba(226, 230, 238, 0.34); }
/* the credits: what we did, in a plate-and-rule table */
.page__credits { margin: calc(var(--page-h) * 0.018) 0 0; display: grid; gap: calc(var(--page-h) * 0.012); }
.page__credits > div { display: grid; grid-template-columns: 30% 1fr; gap: calc(var(--page-w) * 0.03); align-items: baseline; padding-top: calc(var(--page-h) * 0.015); border-top: 1px solid var(--rule); }
.page__credits dt { font-family: var(--font-dial); font-size: calc(var(--page-w) * 0.021); letter-spacing: 0.2em; text-transform: uppercase; color: var(--label); }
.page__credits dd { margin: 0; font-size: calc(var(--page-w) * 0.027); line-height: 1.45; color: rgba(242, 232, 216, 0.82); }
.page__credits + .page__kicker { margin-top: calc(var(--page-h) * 0.035); }
.page__contents { list-style: none; margin: calc(var(--page-h) * 0.026) 0 0; padding: 0; display: grid; gap: calc(var(--page-h) * 0.016); }
.page__contents .page__link { font-size: calc(var(--page-w) * 0.027); letter-spacing: 0.16em; }

/* the piece: a plate tipped into the page, filling whatever room is left */
.page__plate {
  position: relative; margin: 0 0 calc(var(--page-h) * 0.03); flex: 0 1 auto; aspect-ratio: 16 / 9; max-height: 42%; width: 100%;
  border: 1px solid rgba(226, 230, 238, 0.22); background: #0b0c0e;
  box-shadow: 0 calc(var(--page-h) * 0.02) calc(var(--page-h) * 0.05) rgba(0, 0, 0, 0.55);
}
.page__plate video, .page__plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page__plate::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(0, 0, 0, 0.5); pointer-events: none; }
.page__robot {
  position: relative; flex: 0 1 auto; aspect-ratio: 4 / 5; height: 56%; width: auto; margin: 0 0 calc(var(--page-h) * 0.03);
  border: 1px solid rgba(226, 230, 238, 0.22); background: radial-gradient(ellipse at 50% 62%, #14183a 0%, #0b0c18 72%);
  overflow: hidden; touch-action: none; cursor: default;
}
.page__robot canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.page__robot-note { position: absolute; left: 0; right: 0; bottom: calc(var(--page-h) * 0.02); text-align: center; font-family: var(--font-dial); font-size: calc(var(--page-w) * 0.02); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(226, 230, 238, 0.55); pointer-events: none; }

/* the cover and colophon: a title page, centred on its own */
.page--cover { justify-content: center; }
.page--cover.page--right { justify-content: space-between; }
.page--cover .page__title { font-size: calc(var(--page-w) * 0.12); }
.page__emblem { width: calc(var(--page-w) * 0.16); height: calc(var(--page-w) * 0.16); margin: 0 0 calc(var(--page-h) * 0.05); }

/* ---------- chrome ---------- */
.ledger__nav { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ledger__nav > * { pointer-events: auto; }
.ledger__btn { position: absolute; top: 50%; transform: translateY(-50%); }
.ledger__btn[data-step="-1"] { left: max(1rem, 2vw); }
.ledger__btn[data-step="1"] { right: max(1rem, 2vw); }
.ledger__index { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); }
.ledger__btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(185, 138, 60, 0.55); background: rgba(13, 11, 8, 0.72); color: var(--parchment); font-size: 1.05rem; cursor: pointer; transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease; }
.ledger__btn:hover { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 22px var(--teal-glow); }
.ledger__btn:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.ledger__index { display: flex; gap: 0.25rem; margin: 0; padding: 0.3rem 0.6rem; list-style: none; background: rgba(13, 11, 8, 0.55); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ledger__index button { font-family: var(--font-dial); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--sepia); background: none; border: 1px solid transparent; border-radius: 999px; padding: 0.4rem 0.55rem; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease; }
.ledger__index button:hover { color: var(--parchment); }
.ledger__index button[aria-current="true"] { color: var(--teal); border-color: rgba(47, 230, 214, 0.45); }
.ledger__hint { position: absolute; left: 50%; bottom: 0.25rem; transform: translateX(-50%); font-family: var(--font-dial); font-size: 0.5rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sepia); white-space: nowrap; z-index: 5; opacity: 0.75; }
.ledger__curtain { position: fixed; inset: 0; z-index: 80; background: var(--ink); display: grid; place-items: center; transition: opacity 0.9s ease 0.2s; }
.ledger.is-ready .ledger__curtain { opacity: 0; pointer-events: none; }
.ledger__loading { font-family: var(--font-dial); font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--brass-hi); }

/* ---------- no WebGL, reduced motion, or a portrait window: the spreads as plain pages ---------- */
.ledger.is-fallback { position: static; }
.ledger.is-fallback .ledger__canvas, .ledger.is-fallback .ledger__nav, .ledger.is-fallback .ledger__hint,
.ledger.is-fallback .ledger__curtain { display: none; }   /* nothing to wait for: the pages are already here */
.ledger.is-fallback .ledger__title { display: block; position: static; padding: 7rem var(--pad-x) 0; font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; }
.ledger.is-fallback .ledger__title em { display: block; font-style: normal; font-family: var(--font-dial); font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brass-hi); margin-top: 0.5rem; }
.ledger.is-fallback .page__numeral { display: none; }
body.ledger-body:has(.ledger.is-fallback) { overflow: auto; }
.ledger.is-fallback .ledger__pages { position: static; padding: 2rem var(--pad-x) 5rem; pointer-events: auto; }
.ledger.is-fallback .spread {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem;
  max-width: 68rem; margin: 0 auto 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(185, 138, 60, 0.22);
}
.ledger.is-fallback .page {
  position: static; width: auto; height: auto;
  opacity: 1; visibility: visible; transform: none !important; cursor: auto; padding: 0;
}
.ledger.is-fallback .page__title { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.ledger.is-fallback .page__lede { font-size: 1rem; }
.ledger.is-fallback .page p { font-size: 0.92rem; }
.ledger.is-fallback .page__kicker { font-size: 0.62rem; margin-bottom: 0.8rem; }
.ledger.is-fallback .page__caption { font-size: 0.82rem; }
.ledger.is-fallback .page__tags { gap: 0.4rem; margin-bottom: 1.2rem; }
.ledger.is-fallback .page__tags li { font-size: 0.56rem; padding: 0.35rem 0.6rem; }
.ledger.is-fallback .page__link { font-size: 0.66rem; }
.ledger.is-fallback .page__links { gap: 0.6rem 1.4rem; padding-top: 1.2rem; }
.ledger.is-fallback .page__rule { margin: 1.2rem 0; }
.ledger.is-fallback .page__mark { font-size: 1.6rem; margin-top: 1rem; }
.ledger.is-fallback .page__credits { gap: 0.8rem; margin-top: 1.4rem; }
.ledger.is-fallback .page__credits > div { padding-top: 0.8rem; }
.ledger.is-fallback .page__credits dt { font-size: 0.58rem; }
.ledger.is-fallback .page__credits dd { font-size: 0.86rem; }
.ledger.is-fallback .page__contents { gap: 0.6rem; margin-top: 1.2rem; }
.ledger.is-fallback .page__credits + .page__kicker { margin-top: 1.6rem; }
.ledger.is-fallback .page__plate, .ledger.is-fallback .page__robot { aspect-ratio: 16 / 9; flex: none; }
.ledger.is-fallback .page__robot { aspect-ratio: 1 / 1; }
.ledger.is-fallback .page__emblem { width: 72px; height: 72px; margin-bottom: 1.4rem; }
.ledger.is-fallback .page__robot-note { font-size: 0.5rem; bottom: 0.6rem; }
@media (max-width: 720px) {
  .ledger.is-fallback .spread { grid-template-columns: 1fr; gap: 1.6rem; }
}