/* /writing/ — the reference library.
   ---------------------------------------------------------------------------
   Deliberately thin. The articles reuse the site's existing typography
   (rc-article from resources.css carries the long-form heading scale), so this
   file holds only what /resources/ never needed: the diagram figures and the
   index list. If a rule here starts duplicating resources.css, it belongs
   there instead. */

/* ---- Diagram figures ------------------------------------------------------
   Every diagram is inline SVG in the locked style: monochrome line work on the
   card ground, one accent, mono labels, a caption underneath. The frame owns
   horizontal overflow so a diagram can keep a minimum legible width on a phone
   and scroll inside itself rather than breaking the page. */
.wfig { margin: 34px 0; }
.wfig-frame {
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--card);
  padding: clamp(14px, 3vw, 26px);
  overflow-x: auto;
}
.wfig-frame svg { display: block; width: 100%; height: auto; }
.wfig figcaption {
  margin-top: 10px;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--muted);
}

/* ---- The index list -------------------------------------------------------
   Same shape as the reading path on /resources/, widened to carry a one-line
   summary. A numbered list rather than a card grid: seven reference pieces
   read as a shelf, not a feed. */
.wi-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.wi-list a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
/* Joined to the spark-glow family (2026-08-25 rollout), on the house timing
   tokens: this row ran its own .15s ease, the one timing on the site the
   budget did not own. */
.wi-list a:hover { border-color: var(--spark); transform: translateX(2px); box-shadow: 0 0 0 1px var(--spark), 0 0 14px color-mix(in srgb, var(--spark) 30%, transparent); }
.wi-list a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wi-n {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--spark);
  padding-top: 3px;
}
.wi-t { display: block; min-width: 0; }
.wi-t b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.3;
  /* Owned, not inherited (2026-08-26 hover audit): the row anchor inherits
     its colour from the section, so on the band-dark article closers the
     title was Paper on the white card, invisible at rest, and the summary
     line below it was carrying the whole row. The card fill is var(--card)
     on every ground this list renders on, so the title is ink on its own
     authority and no anchor-colour rule can repaint it. */
  color: var(--ink);
}
.wi-t span {
  display: block;
  margin-top: 6px;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--muted);
}
.wi-t i {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
  margin-top: 8px;
}

/* ---- The reading column (2026-08-25, DJ's margin fix) ---------------------
   The article ran down the left rail of a 1280px wrap with a measure-capped
   paragraph, which read as a page with its right half missing. The column
   itself now carries the measure and sits centered, so the whitespace is
   symmetric and deliberate. Diagrams fill the same column. */
.art-col { max-width: 760px; margin-inline: auto; }
.art-col .rc-article p { max-width: none; }
.art-col .note { max-width: none; }

/* The article hero centers with it: same dark ground, editorial axis. */
.phero--art .phero-in { text-align: center; }
.phero--art h1 { margin-inline: auto; max-width: 20ch; }
.phero--art .lede { margin-inline: auto; max-width: 62ch; }
.art-byline { font-size: 12px; color: var(--beacon); margin-top: 14px; }

/* ---- THE BOOKSHELF (2026-08-25, DJ's call) --------------------------------
   The index is a shelf and each reference piece is a spine. The six palette
   values do shelf duty (the owner's role-bound expansion): ink, spark, steel
   carry Paper type, Landfall and Meridian carry ink per their ratios, and
   the paper spine takes a hairline so it never floats. Heights vary the way
   a real shelf does. Books lift on hover; the star at the foot ignites. */
.shelf {
  display: flex; align-items: flex-end; gap: 12px;
  /* safe centring (2026-08-27): a centred flex row that overflows spills
     equally off BOTH edges, and you can only ever scroll toward the right
     one, so the first spine was unreachable between about 721px and 936px.
     `safe` falls back to flex-start the moment content stops fitting. */
  justify-content: flex-start;
  justify-content: safe center;
  margin-top: 34px; padding: 24px 18px 0;
  border-bottom: 10px solid var(--ink);
  overflow-x: auto;
}
.book {
  position: relative; flex: 0 0 auto; width: 96px;
  border-radius: 6px 6px 0 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 10px 12px;
  text-decoration: none;
  box-shadow: inset -8px 0 14px color-mix(in srgb, var(--ink) 22%, transparent);
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.book::before, .book::after {
  content: ''; position: absolute; left: 9px; right: 9px; height: 1px;
  background: currentColor; opacity: .3;
}
.book::before { top: 36px; }
.book::after { bottom: 44px; }
.book:hover {
  transform: translateY(-10px);
  box-shadow: inset -8px 0 14px color-mix(in srgb, var(--ink) 22%, transparent),
              0 14px 26px color-mix(in srgb, var(--ink) 30%, transparent);
}
/* Was `2px solid var(--spark)`, which measured 2.64:1 against the light
    spines and quietly overrode the site's own :focus-visible. A focus
    indicator is a non-text UI component and owes 3:1. --primary is the
    site ring and clears it on every spine in the set (2026-08-27). */
.book:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.book-n { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.book-t {
  flex: 1; display: flex; align-items: center;
  writing-mode: vertical-rl;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  line-height: 1.25; letter-spacing: .01em;
  margin: 12px 0 10px; max-height: 100%;
}
.book-b { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.book-b svg { display: block; transition: transform var(--t-hover) var(--ease); }
.book:hover .book-b svg { transform: rotate(45deg); }
.book-b i { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; }
/* the six spines */
.book-c0 { background: var(--ink); color: var(--paper); }
.book-c1 { background: var(--spark-surface); color: var(--paper); }
.book-c2 { background: var(--chrome); color: var(--paper); }
/* Hover re-declares the authored colour (2026-08-26): the global
   `a:hover { color: var(--ink) }` in site.css outranks a plain class, so
   the three Paper-type spines were going midnight on hover. On the
   midnight spine that meant ink on ink, fully invisible; on spark and
   steel it was merely wrong quietly. The three ink-type spines need
   nothing: the global rule paints them the colour they already are. */
.book-c0:hover, .book-c1:hover, .book-c2:hover { color: var(--paper); }
.book-c3 { background: var(--signal); color: var(--ink); }
.book-c4 { background: var(--beacon); color: var(--ink); }
.book-c5 { background: var(--paper); color: var(--ink); border: 1px solid var(--hairline); border-bottom: 0; }
/* the four heights */
.book-h0 { height: 372px; }
.book-h1 { height: 336px; }
.book-h2 { height: 356px; }
.book-h3 { height: 344px; }
.shelf-cap { margin-top: 14px; font-size: 11px; letter-spacing: .08em; color: var(--faint); max-width: none; }
@media (max-width: 720px) {
  .shelf { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .book, .book-b svg { transition: none; }
  .book:hover { transform: none; }
}