/* Fixed 16:9 stage, scaled to fit the physical panel. */

.frame {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--letterbox);
}

/* Anchored to the viewport centre explicitly. Grid centring would place an
   oversized stage inside its own track rather than the container, which
   pushes it off screen once the stage is wider than the viewport. */
#stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  background: var(--bg);
  overflow: hidden;
}

/* ---- Exhibit chrome ---- */

.khead {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: grid;
  grid-template-columns: var(--rail-w) 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  z-index: 40;
  background: var(--bg);
}

.khead__mark {
  padding-left: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}

.khead__center {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 40px;
  min-width: 0;
}

.khead__right {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.krail {
  position: absolute;
  top: var(--header-h);
  bottom: 0;
  left: 0;
  width: var(--rail-w);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  z-index: 30;
  background: var(--bg);
}

.kbody {
  position: absolute;
  top: var(--header-h);
  left: var(--rail-w);
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* ---- Chapter panels stack in the same box; one is active ---- */

.panel {
  position: absolute;
  inset: 0;
  display: none;
  padding: 52px var(--gutter) 44px 64px;
}
.panel.is-active { display: block; }

/* Two-column editorial split, asymmetric on purpose. */
.split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 56px;
  height: 100%;
}
.split--wide-left { grid-template-columns: 1.34fr 0.66fr; }
.split--wide-right { grid-template-columns: 0.72fr 1.28fr; }
.split--even { grid-template-columns: 1fr 1fr; }

.stack {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.stack--gap { gap: 30px; }
.stack--push { justify-content: space-between; }

.fill { height: 100%; }

.measure { max-width: 27em; }
.measure--tight { max-width: 21em; }

/* Registration marks - corner ticks, like a printed scientific plate. */
.regmark {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.regmark--tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.regmark--tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
.regmark--bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
.regmark--br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }

/* Hairline grid overlay - faint drafting-paper structure. */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 240px 240px;
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
}

.divider-wave { display: block; width: 100%; height: 42px; color: var(--rule); }