/* reading-layout.css — one text measure and one plate width for every chapter.

   The chapters were built at different times and each carries its own inline
   <style>. Their --measure had drifted between 38rem and 44rem, and their
   full-width plates between "no wider than the text" and 52rem, so a reader
   moving from chapter to chapter saw the column and the maps jump about. Worse,
   a chapter could hold both a static plate (flush left, 52rem) and a
   scrollytelling map (centred on the column, 60rem) and they did not line up.

   Everything wide is squared up here to the scrollytelling width — 60rem,
   centred on the column, using margins rather than a transform so nothing
   creates a containing block for the sticky scrolly stage.

   Linked *after* each chapter's own <style>, so these values win. Two page
   shapes are served: rail chapters (fixed left timeline, content in .wrap) and
   plain chapters (no rail, .col simply centred). Change --measure / --plate
   here and the whole site moves together. */

:root{
  --measure:44rem;                      /* prose column: ~72 characters */
  --plate:60rem;                        /* maps, artifact plates, scrolly maps */
  --rail:clamp(120px,13vw,170px);       /* matches .rail / .wrap on rail pages */
  --plate-gutter:56px;
}

/* ---------- wide plates ----------
   --fig-w is the resolved width; the margin re-centres it on the column.
   Plain chapters get the full viewport minus a gutter; rail chapters have to
   leave the rail its strip, which is the same sum css/mapscrolly.css uses. */

figure.map.wide,
figure.artifact.wide,
figure.tree.wide,
.pair{
  --fig-w:min(var(--plate),calc(100vw - 48px));
  width:var(--fig-w);
  max-width:none;
  margin-left:calc(50% - var(--fig-w) / 2);
  margin-right:0;
  transform:none;
}

.wrap figure.map.wide,
.wrap figure.artifact.wide,
.wrap figure.tree.wide,
.wrap .pair{
  --fig-w:min(var(--plate),calc(100vw - var(--rail) - var(--plate-gutter)));
}

figure.map,
figure.artifact{clear:both}

/* ---------- narrow screens: plates simply fill the column ---------- */

@media (max-width:860px){
  figure.map.wide,
  figure.artifact.wide,
  figure.tree.wide,
  .pair,
  .wrap figure.map.wide,
  .wrap figure.artifact.wide,
  .wrap figure.tree.wide,
  .wrap .pair{
    --fig-w:100%;
    width:100%;
    max-width:100%;
    margin-left:0;
  }
}