/* Loader — a curtain over the page while fonts arrive. On 100 it drops. */
.loader {
  position: fixed; inset: 0;
  z-index: 50;
  background: var(--bg);
  transition: transform 1s var(--ease-inout);
}
.loader.done { transform: translateY(100%); }

/* The K. Glyphs are drawn in a 100-unit box with air around the letter,
   so the box is larger than the letter reads. Flipbook: js/loader.js. */
.loader-mark {
  position: absolute; left: 50%; top: 50%;
  width: clamp(88px, 15vh, 140px); height: clamp(88px, 15vh, 140px);
  transform: translate(-50%, -50%);
  color: var(--ink);
  overflow: visible;
}
.loader-count {
  position: absolute; left: 50%; bottom: 14.7%;
  transform: translateX(-50%);
  font-size: 15px; line-height: 1.6;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

/* position:fixed is the one scroll lock every browser respects. */
body.loading { position: fixed; inset: 0 0 auto 0; width: 100%; overflow: hidden; touch-action: none; }

.page {
  position: relative;
  min-height: 100vh;
  overflow: clip;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.7s ease 0.15s, transform 0.7s var(--ease-out) 0.15s;
}
body.revealed .page { opacity: 1; transform: translateY(0); }
/* A transformed ancestor would trap the floating nav — drop it once settled. */
body.settled .page { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .loader.done { transform: none; opacity: 0; transition: opacity 0.3s ease; }
}