/* =============================================================================
   22-variation.css — layout variation + figure placement
   Loaded AFTER 02-layout.css / 07-tiles.css, so it may override their
   left-anchoring. Adds no colours and no type scale; geometry only.

   Why this file exists
   --------------------
   02-layout.css caps every paragraph at --measure and leaves it flush left.
   Correct for one section, monotonous for a hundred: every section becomes a
   left-hugging column with whitespace parked on the right. This file supplies
   the alignment and figure patterns that break that rhythm.

   THE RULE: no two consecutive sections in a chapter may use the same
   alignment modifier, and no chapter may use one figure pattern twice in a row.
   ============================================================================= */

/* ---------- 1. Section alignment -------------------------------------------
   Applied to .sect. Moves the measure-capped text column within the shell.
   Default (no modifier) = flush left, as before. Tiles, mosaics, ledgers and
   figures are unaffected — they were never measure-capped. */

/* RETIRED — the alternating alignment is off, in every chapter.

   It solved a real problem: a hundred left-hugging sections in a row read as
   one monotonous column, and sliding the measure around the shell broke that
   up. 27-type.css now solves the same problem better, with a fixed left spine
   — the numeral, its stub and the standfirst rule in the same place every
   time, the numeral alternating solid and hollow down the page. A rhythm you
   feel scrolling rather than one that moves the text out from under you.

   The two cannot both run. With alignment on, a section's heading stayed on
   the spine while its own paragraphs slid to the right margin, and the section
   read as two pieces that had come apart. Chapter 6 piloted the spine with
   these rules locally switched off; that pilot is now the whole reader.

   The .sect--mid / .sect--end classes are still in the chapter markup. They
   are inert, and left in place deliberately: restoring the old rhythm is
   uncommenting this block, not re-authoring six chapters. .sect--wide below is
   untouched and still live — it caps nothing and is a different device. */

/*
.sect--mid > p, .sect--mid > li, .sect--mid > blockquote,
.sect--mid > .brief, .sect--mid > .takeaway, .sect--mid > .note,
.sect--mid > ul, .sect--mid > ol, .sect--mid > .shead{
  margin-inline:auto}

.sect--end > p, .sect--end > li, .sect--end > blockquote,
.sect--end > .brief, .sect--end > .takeaway, .sect--end > .note,
.sect--end > ul, .sect--end > ol, .sect--end > .shead{
  margin-inline-start:auto; margin-inline-end:0}

.sect--mid > .shead, .sect--end > .shead{max-width:var(--measure)}
*/

/* A section may also drop the cap entirely and run full shell width, for
   sections built from tiles or a table.

   .note, .takeaway and .brief keep their cap deliberately. They are single
   sentences carrying a caveat or a conclusion; run to 1560px they stop reading
   as an aside and start reading as body copy, and a one-line 200-character
   measure is unreadable anyway. Without this exclusion `sect--wide` is unusable
   on any section that carries a caveat — which is most of them. */
.sect--wide > p:not(.note):not(.takeaway):not(.brief),
.sect--wide > li,
.sect--wide > ul, .sect--wide > ol{max-width:none}

/* ---------- 2. .band — full-bleed figure ------------------------------------
   Breaks both gutters and sits edge to edge in the shell. The heaviest
   punctuation available; at most twice per chapter. */

.band{margin:1.8rem 0;margin-inline:calc(var(--gut) * -1);max-width:none;min-width:0}
.band > img, .band > svg{display:block;width:100%;height:auto}
.band > figcaption, .band > .figc{
  padding:.55rem var(--gut) 0;text-align:center;max-width:none}

/* Tinted variant — sets the figure on the sunk paper so a pale diagram still
   reads as a deliberate object rather than a gap in the page. */
.band--wash{background:var(--wash);padding:1.6rem var(--gut) 1.1rem;
  border-block:1px solid var(--rule)}
.band--wash > figcaption, .band--wash > .figc{padding-inline:0}

/* ---------- 3. .figrow — two to four figures across -------------------------
   For a set of diagrams that are peers. Equal columns, shared baseline. */

.figrow{display:grid;gap:var(--gap-y) var(--gap);margin:0 0 1.6rem;max-width:none;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.figrow--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.figrow > figure{margin:0;min-width:0}
.figrow img, .figrow svg{display:block;width:100%;height:auto}
.figrow .figc, .figrow figcaption{max-width:none;margin-top:.4rem}

/* ---------- 4. .inset — a figure beside running prose -----------------------
   Unlike .duo this does NOT create a grid: the prose wraps around the figure,
   so a short paragraph does not leave a tall empty column. Floats collapse to
   full width below the breakpoint. */

.inset{margin:0 0 1.2rem;max-width:min(100%,26rem)}
.inset img, .inset svg{display:block;width:100%;height:auto}
.inset .figc, .inset figcaption{max-width:none}

@media (min-width:1100px){
  .inset--right{float:right;margin:.2rem 0 1.1rem var(--gap);shape-margin:1rem}
  .inset--left {float:left; margin:.2rem var(--gap) 1.1rem 0}
  /* A float must not escape its section. */
  .sect::after{content:"";display:block;clear:both}
}

/* ---------- 5. .stack — centred figure over centred caption -----------------
   The quiet pattern. Narrower than the shell, centred, generous above and
   below. Use when a diagram IS the argument and should be looked at. */

.stack{margin:1.7rem auto;max-width:min(100%,44rem);text-align:center}
.stack img, .stack svg{display:block;width:100%;height:auto;margin-inline:auto}
.stack .figc, .stack figcaption{max-width:52ch;margin:.55rem auto 0;text-align:center}

/* ---------- 6. .split3 — prose | figure | prose -----------------------------
   Figure in the optical centre with text either side. Only for a figure that
   genuinely mediates between two ideas; it reads as a hinge. */

.split3{display:grid;gap:var(--gap-y) var(--gap);margin:0 0 1.6rem;max-width:none;
  align-items:center;grid-template-columns:1fr}
@media (min-width:1200px){
  .split3{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr)}
}
.split3 > *{min-width:0}
.split3 p{max-width:none;font-size:.95rem;line-height:1.62}
.split3 figure{margin:0}
.split3 img, .split3 svg{display:block;width:100%;height:auto}

/* ---------- 7. .offset — figure breaks out one side only --------------------
   Asymmetric on purpose: the figure escapes the gutter it is nearest and stays
   put on the other. Gives a page edge some tension without a full bleed. */

.offset{margin:0 0 1.6rem;max-width:none;min-width:0}
@media (min-width:1200px){
  .offset--right{margin-inline-end:calc(var(--gut) * -1);padding-left:8%}
  .offset--left {margin-inline-start:calc(var(--gut) * -1);padding-right:8%}
}
.offset img, .offset svg{display:block;width:100%;height:auto}
.offset .figc, .offset figcaption{max-width:60ch}

/* ---------- 8. Figure chrome ------------------------------------------------
   Applies to any authored diagram regardless of pattern. Keeps a pale SVG from
   dissolving into the paper. */

.dgm{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:1rem;box-sizing:border-box}
.band--wash .dgm{background:var(--card)}

/* Prefers-reduced-motion users still get every diagram; nothing here animates.
   Diagrams that DO animate must gate themselves — see 23-intro.js for the
   pattern this project uses. */

/* ---------- 9. Try-it link --------------------------------------------------
   The one place a chapter sends you off the page. It is deliberately not a
   .note: a note is an aside you can skip, this is an invitation to leave and
   come back, so it gets a target-sized plate and says where it goes. */

.tryit{display:flex;align-items:center;gap:.7rem;max-width:var(--measure);
  margin:1.1rem 0 1.3rem;padding:.6rem .8rem;text-decoration:none;color:var(--ink);
  background:var(--ink);border-radius:var(--r);border:1px solid var(--ink)}
.tryit:hover{background:#2A2620;border-color:#2A2620}
/* --acc is tuned for ink on paper and falls to about 3.5:1 on this plate, so
   the dark-ground pieces take the lighter gold the intro sequence uses. */
.tryit .ic{width:19px;height:19px;flex:none;color:#D2AE55}
.tryit b{display:block;font-family:var(--sans);font-size:.83rem;font-weight:600;color:var(--paper)}
.tryit span{font-family:var(--sans);font-size:.76rem;line-height:1.45;color:#CFC7B6;max-width:none}
.tryit code{background:rgba(255,255,255,.09);color:#E4D6B0}
.tryit s{text-decoration:none;margin-left:auto;font-family:var(--sans);font-size:.72rem;
  color:#D2AE55;white-space:nowrap}
@media (max-width:640px){
  .tryit{flex-wrap:wrap}
  .tryit s{margin-left:0;flex-basis:100%}
}

/* ---------- 10. Print / narrow fallbacks ----------------------------------- */
@media (max-width:1099px){
  .inset{float:none;margin-inline:0;max-width:100%}
  .offset--right,.offset--left{margin-inline:0;padding-inline:0}
  .sect--mid > *, .sect--end > *{margin-inline:0}
}