/* ===========================================================================
   River: every piece of work in the Library, year by year (1989-2026).
   Markup is generated by build_river.py; this file styles it.
   Designed for the charcoal chapter (dark). Layer fills are fixed tones of the
   site's two materials, brass and steel, alternating so neighbours stay distinct;
   violet marks Flight 811, the point the river starts from.
   Two drawings: --wide (desktop, years left to right) and --tall (phones, years
   running down). Only one is displayed at a time.
   Motion: one-shot, keyed off .is-in on each SVG (it carries .reveal). The default,
   and the reduced-motion state, is the finished drawing.
   =========================================================================== */
.illus--river {
  --il-river-gap: var(--bg);          /* spacer between layers; set to #000 inside #credits */
  --il-river-dur: 2.2s;               /* river flow, cursor and year counter share this */
  --il-river-delay: .15s;
  margin: clamp(3rem, 8vw, 6rem) auto 0;
  max-width: 1200px;
  text-align: left;
  color: var(--fg);
}
/* #credits paints its own #000 over the charcoal --bg, so the layer spacers follow it
   there without the integrator having to remember a style attribute. */
#credits .illus--river { --il-river-gap: #000; }

/* ---- Header: kicker + year counter ---------------------------------------- */
.il-river-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.4rem; }
.il-river-kicker { margin: 0; max-width: 30rem; font-size: var(--step-0); line-height: 1.5; color: var(--muted); }
.il-river-count { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--fg); }
.il-river-yr { --il-river-yr: 2026; }
.il-river-yr::after { counter-reset: il-river-yr var(--il-river-yr); content: counter(il-river-yr); }

/* ---- SVG shell -------------------------------------------------------------- */
.il-river-svg { display: block; width: 100%; height: auto; overflow: visible; }
.il-river-svg--tall { display: none; }

/* River layers: fills checked with the dataviz palette validator against #000
   (adjacent pairs: CVD dE >= 14.4, normal-vision dE >= 15.4, all >= 3:1).
   Companies is copper so it never reads as Writing's pale brass. */
.il-river-k { stroke: var(--il-river-gap); stroke-width: 1.5; stroke-linejoin: round; paint-order: stroke; }
.il-river-k--rec   { fill: #a8916a; }
.il-river-k--press { fill: #c3cad6; }
.il-river-k--book  { fill: #6f5d40; }
.il-river-k--wr    { fill: #e6d6b4; }
.il-river-k--talk  { fill: #6b7891; }
.il-river-k--co    { fill: #c99a86; }
.il-river-k--f811  { fill: var(--accent); filter: drop-shadow(0 0 5px rgba(182,156,240,.45)); }
.il-river-sheen { pointer-events: none; }
.il-river-trickle { fill: none; stroke: var(--hair); stroke-width: 1.5; }
.il-river-in { font-family: var(--sans); font-size: 18px; font-weight: 600; pointer-events: none; }
.il-river-in--dark { fill: #1a1714; }
.il-river-in--light { fill: #f2efe9; }

/* Axis */
.il-river-axis, .il-river-tick { fill: none; stroke: var(--hair); stroke-width: 1.5; }
.il-river-yrlabel { font-family: var(--sans); font-size: 16px; font-weight: 500; fill: var(--muted); font-variant-numeric: tabular-nums; }

/* Flight 811 marker */
.il-river-mark { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .85; }
.il-river-dot { fill: var(--accent); stroke: var(--il-river-gap); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(182,156,240,.55)); }

/* Labels (same voice as .lf-label / .lf-small in story.css) */
.il-river-label { font-family: var(--sans); font-size: 18px; font-weight: 600; fill: var(--fg); }
.il-river-label--accent { fill: var(--accent); }
.il-river-label--book { fill: #c8b89a; }
.il-river-small { font-family: var(--sans); font-size: 16px; fill: var(--muted); }
.il-river-small--book { fill: #c8b89a; font-weight: 600; }
.il-river-leader { fill: none; stroke: #c8b89a; stroke-width: 1.5; opacity: .7; }

/* Shelf + spines */
.il-river-shelfboard { fill: #2a2c31; stroke: rgba(255,255,255,.1); }
.il-river-shelf { fill: none; stroke: #2a2c31; stroke-width: 4; stroke-linecap: round; }
.il-river-spine { fill: url(#il-river-w-brass); stroke: rgba(0,0,0,.35); stroke-width: 1; }
.il-river-svg--tall .il-river-spine { fill: url(#il-river-t-brass); }
.il-river-spine--fw, .il-river-svg--tall .il-river-spine--fw { fill: #23252a; stroke: #c8b89a; stroke-width: 1.5; }

/* Company bands */
.il-river-band rect { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.il-river-band--founded rect { fill: url(#il-river-w-brass); }
.il-river-svg--tall .il-river-band--founded rect { fill: url(#il-river-t-brass); }
.il-river-band--now rect { fill: url(#il-river-w-now); }
.il-river-svg--tall .il-river-band--now rect { fill: url(#il-river-t-now); }
.il-river-band--led rect { fill: url(#il-river-w-steel); stroke: rgba(255,255,255,.22); }
.il-river-svg--tall .il-river-band--led rect { fill: url(#il-river-t-steel); }
.il-river-bandtext { font-family: var(--sans); font-size: 16px; font-weight: 600; fill: #1a1714; }
.il-river-band--led .il-river-bandtext { fill: #f2efe9; }
.il-river-bandtext--out, .il-river-band--led .il-river-bandtext--out { fill: var(--fg); }

/* Cursor: only exists in motion */
.il-river-cursor { fill: none; stroke: var(--fg); stroke-width: 1.5; opacity: 0; pointer-events: none; }

/* Hover columns (desktop): a quiet highlight and a native tooltip per year */
.il-river-hits rect { fill: #fff; fill-opacity: 0; transition: fill-opacity 160ms ease; }
.il-river-hits rect:hover { fill-opacity: .05; }

/* ---- Key + table ------------------------------------------------------------ */
.il-river-key { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem 1.6rem; font-size: .95rem; color: var(--fg); }
.il-river-key li { display: inline-flex; align-items: center; gap: .55rem; }
.il-river-key span { color: var(--muted); font-variant-numeric: tabular-nums; }
.il-river-key--marks { margin-top: .8rem; color: var(--muted); font-size: .9rem; }
.il-river-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: none; }
.il-river-sw--rec { background: #a8916a; }
.il-river-sw--press { background: #c3cad6; }
.il-river-sw--book { background: #6f5d40; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.il-river-sw--wr { background: #e6d6b4; }
.il-river-sw--talk { background: #6b7891; }
.il-river-sw--co { background: #c99a86; }
.il-river-sw--f811 { background: var(--accent); }
.il-river-sw--founded { width: 26px; height: 12px; border-radius: 6px; background: linear-gradient(135deg, #e6d6b4, #9c8a68); }
.il-river-sw--led { width: 26px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #4a505c, #2c3038); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.il-river-sw--bk { width: 7px; height: 18px; border-radius: 2px; background: linear-gradient(135deg, #e6d6b4, #9c8a68); }
.il-river-sw--fw { width: 7px; height: 14px; border-radius: 2px; background: #23252a; box-shadow: inset 0 0 0 1.5px #c8b89a; }

.il-river-data { margin-top: 1.4rem; }
.il-river-data summary { cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--fg); width: max-content; max-width: 100%; }
.il-river-scroll { overflow-x: auto; margin-top: 1rem; }
.il-river-data table { border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; min-width: 100%; }
.il-river-data th, .il-river-data td { padding: .35rem .6rem; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap; }
.il-river-data thead th { color: var(--muted); font-weight: 600; vertical-align: bottom; white-space: normal; min-width: 4.5em; }
.il-river-data th[scope="row"] { text-align: left; font-weight: 600; }
.il-river-data .il-river-total th, .il-river-data .il-river-total td { font-weight: 700; border-bottom: 0; }

.illus--river figcaption { margin-top: 1.2rem; max-width: 46rem; font-size: .92rem; line-height: 1.6; letter-spacing: 0; color: var(--muted); }
.illus--river figcaption code { font-size: .85em; }

/* ---- Phones and small tablets: the tall drawing ----------------------------- */
@media (max-width: 959.98px) {
  .il-river-svg--wide { display: none; }
  .il-river-svg--tall { display: block; max-width: 30rem; margin-inline: auto; }
  .il-river-head { align-items: flex-start; flex-direction: column; gap: .6rem; }
  .il-river-svg--tall .il-river-label { font-size: 15px; }
  .il-river-svg--tall .il-river-small { font-size: 15px; }
  .il-river-svg--tall .il-river-yrlabel { font-size: 14.5px; }
  .il-river-svg--tall .il-river-in { font-size: 16px; }
}

/* ---- Motion: once, when each drawing scrolls into view ---------------------- */
@property --il-river-yr { syntax: '<integer>'; inherits: true; initial-value: 2026; }
@media (prefers-reduced-motion: no-preference) {
  /* the drawing itself is already faded in by .reveal--fade; hold the parts back */
  .js .il-river-svg .il-river-flow { transition: clip-path var(--il-river-dur) linear var(--il-river-delay); }
  .js .il-river-svg--wide .il-river-flow { clip-path: inset(0 100% 0 0); }
  .js .il-river-svg--tall .il-river-flow { clip-path: inset(0 0 100% 0); }
  .js .il-river-svg.is-in .il-river-flow { clip-path: inset(0 0 0 0); }

  .js .il-river-svg .il-river-band rect { transform-box: fill-box; transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 520ms var(--ease-out) var(--d, 0s); }
  .js .il-river-svg--tall .il-river-band rect { transform: scaleY(0); transform-origin: 50% 0; }
  .js .il-river-svg.is-in .il-river-band rect { transform: none; }
  .js .il-river-svg .il-river-bandtext, .js .il-river-svg .il-river-tag { opacity: 0;
    transition: opacity 420ms ease calc(var(--d, 0s) + .25s); }
  .js .il-river-svg.is-in .il-river-bandtext, .js .il-river-svg.is-in .il-river-tag { opacity: 1; }

  .js .il-river-svg .il-river-spine { opacity: 0; transform: translateY(-14px);
    transition: opacity 300ms ease var(--d, 0s), transform 520ms cubic-bezier(.34, 1.4, .64, 1) var(--d, 0s); }
  .js .il-river-svg--tall .il-river-spine { transform: translateX(10px); }
  .js .il-river-svg.is-in .il-river-spine { opacity: 1; transform: none; }

  .js .il-river-svg .il-river-mark { stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 700ms var(--ease-out) 0s; }
  .js .il-river-svg.is-in .il-river-mark { stroke-dashoffset: 0; }

  /* the cursor runs for the same 2.2s as the clip (88% of 2.5s), then fades over the last .3s */
  .js .il-river-svg.is-in .il-river-cursor { animation: il-river-cursor-w calc(var(--il-river-dur) + .3s) linear var(--il-river-delay) both; }
  .js .il-river-svg--tall.is-in .il-river-cursor { animation-name: il-river-cursor-t; }

  /* Year counter: follows whichever drawing is showing (progressive: needs :has and @property) */
  .js .illus--river:has(.il-river-svg) .il-river-yr { --il-river-yr: 1989; }
  .js .illus--river:has(.il-river-svg.is-in) .il-river-yr { --il-river-yr: 2026;
    transition: --il-river-yr var(--il-river-dur) linear var(--il-river-delay); }
}
@keyframes il-river-cursor-w {
  0% { opacity: .55; transform: translateX(0); }
  88% { opacity: .55; transform: translateX(1080px); }
  100% { opacity: 0; transform: translateX(1080px); }
}
@keyframes il-river-cursor-t {
  0% { opacity: .55; transform: translateY(0); }
  88% { opacity: .55; transform: translateY(629px); }
  100% { opacity: 0; transform: translateY(629px); }
}