/* /atlas/ — five stages over one sticky canvas.
 *
 * Site tokens only. Nothing here defines a colour or a family; everything comes
 * from style.css, so the page follows all four themes without a second palette.
 *
 * The scroller is hidden until atlas.js says it is live, so a reader with
 * JavaScript off never sees five empty viewports above the words. */
.atlas-scroller { display: none; }
body.atlas-live .atlas-scroller { display: block; height: 500vh; }

/* The caption sits BESIDE the canvas, not over it. The first version floated it
   bottom-left, where it covered the shortest columns in stage 02 -- the quietest
   fortnight in the window was hidden behind the paragraph describing it. A
   caption that occludes data is worse than no caption. */
.atlas-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-bottom: var(--rule) solid var(--line);
}
#atlas-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--paper);
  grid-column: 2;
  grid-row: 1;
}

.atlas-cap {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: 1.2rem 1.3rem;
  border-right: var(--rule) solid var(--line);
}
.atlas-num {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--rust);
}
.atlas-cap h2 {
  margin: 0.15rem 0 0.5rem;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking);
  font-size: 1.9rem;
  line-height: 1.05;
}
.atlas-body {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--lede);
}
.atlas-real {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

.atlas-pips {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.atlas-pips li {
  width: 7px;
  height: 7px;
  border: var(--rule) solid var(--muted);
  border-radius: 50%;
}
.atlas-pips li.is-on { background: var(--rust); border-color: var(--rust); }

/* ---- the words. Always present, with or without JS. -------------------- */
.atlas-words { max-width: 46rem; margin: 2.4rem auto 0; }
.atlas-words > h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}
.atlas-list { list-style: none; margin: 1.6rem 0 0; padding: 0; counter-reset: none; }
.atlas-list > li {
  margin: 0 0 1.8rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}
.atlas-list h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking);
  font-size: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.atlas-list h3 .atlas-num { font-size: 0.66rem; }
.atlas-list p { margin: 0 0 0.45rem; font-size: 0.95rem; line-height: 1.6; }

.atlas-ranked {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  font-size: 0.88rem;
}
.atlas-ranked li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-bottom: var(--rule) solid var(--line);
}
.atlas-ranked li:last-child { border-bottom: 0; }
.atlas-ranked .atlas-tag { color: var(--rust); font-family: var(--mono); font-size: 0.72rem; }
.atlas-ranked time { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; }

@media (max-width: 760px) {
  /* Stacked, canvas on top: a 23rem caption column beside a 390px canvas leaves
     neither of them room. */
  .atlas-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 55vh 45vh; }
  #atlas-canvas { grid-column: 1; grid-row: 1; }
  .atlas-cap {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    border-right: 0;
    border-top: var(--rule) solid var(--line);
    overflow-y: auto;
  }
  .atlas-cap { padding: 0.8rem; }
  .atlas-cap h2 { font-size: 1.4rem; }
  .atlas-body { font-size: 0.85rem; }
  .atlas-real { font-size: 0.72rem; }
  .atlas-pips { display: none; }
}

/* Discrete stage snaps rather than scroll-driving: atlas.js stops interpolating
   and the caption box stops sliding with the reader. The stages still change,
   one at a time, which is the content. */
@media (prefers-reduced-motion: reduce) {
  .atlas-cap { background: var(--paper); }
}