/* ============================================================
   exhibit.css — shared chrome for the exhibition rooms.
   One full-viewport stage, a slim masthead, mono captions.
   Tokens come from paper.css.
   ============================================================ */

html, body { height: 100%; }
body.exhibit {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh; /* iOS toolbars breathe; the stage must not jump */
  overflow: hidden;
}

/* ---------- slim masthead ---------- */
.ex-mast {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
  padding: 0.6rem clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  z-index: 10;
  flex-wrap: wrap;
}
.ex-mast a, .ex-mast button {
  font-family: var(--grot);
  font-size: 0.7rem;
  font-weight: 540;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.ex-mast a:hover, .ex-mast button:hover { color: var(--red); }
.ex-home { color: var(--ink) !important; font-weight: 600; }
.ex-here { color: var(--red) !important; }
.ex-mast .spacer { flex: 1; }

/* ---------- the stage ---------- */
.stage-wrap { position: relative; flex: 1; min-height: 0; }
.stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none; /* fingers rotate the planet / inspect the field, not the page */
}

/* captions & readouts float on the stage */
.stage-caption {
  position: absolute;
  left: clamp(16px, 3vw, 32px);
  bottom: 1rem;
  max-width: 44ch;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-2);
  pointer-events: none;
}
.stage-caption .red { color: var(--red); }
.stage-readout {
  position: absolute;
  right: clamp(16px, 3vw, 32px);
  bottom: 1rem;
  text-align: right;
  font-family: var(--mono);
  font-size: clamp(0.9rem, 2vw, 1.4rem);
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  pointer-events: none;
}
.stage-readout .sub { display: block; font-size: 0.7rem; color: var(--ink-2); margin-top: 0.3rem; }

.stage-hint {
  position: absolute;
  left: 50%;
  top: 0.9rem;
  transform: translateX(-50%);
  font-family: var(--grot);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  pointer-events: none;
}

/* ---------- atlas: the places index ---------- */
.places {
  position: absolute;
  right: clamp(16px, 3vw, 32px);
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 60%;
  overflow-y: auto;
  scrollbar-width: none;
}
.places::-webkit-scrollbar { display: none; }
.places .pl-group { margin-top: 0.7rem; font-family: var(--grot); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.place {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-align: right;
  color: var(--ink-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.12rem 0;
}
.place:hover { color: var(--ink); }
.place.is-active { color: var(--red); }

/* ---------- specimen (scrolling page, not canvas) ---------- */
body.exhibit.scrolling { overflow: auto; }
body.exhibit.scrolling .stage-wrap { position: static; flex: none; }

.spec-hero {
  padding: clamp(2rem, 8vh, 6rem) clamp(16px, 4vw, 48px) 1rem;
  text-align: center;
}
.spec-word {
  font-family: var(--serif);
  /* fits any word to the viewport: --chars is set by specimen.js on every render;
     on wide screens the 16vw / 15rem caps win, so desktop is unchanged */
  font-size: min(15rem, 16vw, calc(92vw / (var(--chars, 10) * 0.58)));
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.spec-word span { transition: none; }
.spec-word .surprise { border-bottom: 3px solid var(--red); }
.spec-sub { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-2); margin-top: 1.2rem; }
.spec-sub .red { color: var(--red); }

.spec-controls {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.2rem;
  flex-wrap: wrap;
}
.spec-input {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 0.2em 0.3em;
  text-align: center;
  caret-color: var(--red);
  min-width: 12em;
}
.spec-input:focus { outline: none; border-color: var(--red); }
.spec-input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.waterfall {
  padding: clamp(2rem, 6vh, 4rem) clamp(16px, 4vw, 48px);
  border-top: 1px solid var(--rule);
  max-width: 1400px;
  margin: 0 auto;
}
.waterfall .label-caps { margin-bottom: 1.2rem; }
.wf-row {
  font-family: var(--serif);
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.wf-row .mono-tag { font-family: var(--mono); font-size: 0.65rem; color: var(--red); margin-right: 1em; vertical-align: middle; }

.density {
  padding: 0 clamp(16px, 4vw, 48px) clamp(2rem, 6vh, 4rem);
  max-width: 1400px;
  margin: 0 auto;
}
.density .label-caps { margin-bottom: 1rem; }
.density-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em 1.2em;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.5vw, 2.6rem);
}
.density-strip span { display: inline-block; }
.density-strip .mono-tag { font-family: var(--mono); font-size: 0.6rem; color: var(--ink-2); display: block; text-align: center; margin-top: 0.2rem; }

.ex-foot {
  padding: 1rem clamp(16px, 4vw, 48px) 1.4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-2);
  text-align: center;
}
.ex-foot a { color: var(--red); }

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media print {
  .ex-mast, .stage-hint, .spec-controls { display: none !important; }
}
@media (max-width: 700px) {
  /* the places index becomes a thumb strip of chips along the bottom */
  .places {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: none;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.4rem clamp(16px, 4vw, 32px) 0.9rem;
    background: linear-gradient(to bottom, transparent, var(--paper) 40%);
    -webkit-overflow-scrolling: touch;
  }
  .places .pl-group { display: none; }
  .place {
    flex: 0 0 auto;
    border: 1px solid var(--rule);
    padding: 0.35rem 0.7rem;
    background: var(--paper);
  }
  .place.is-active { border-color: var(--red); }
  .stage-caption { bottom: 4.6rem; max-width: 60vw; font-size: 0.68rem; }
  .stage-readout { bottom: 4.6rem; font-size: 0.85rem; }
  .stage-readout .sub { display: none; }
}