/* Built by _build/page_history.py from fig_essay_p1/p2/p3. Do not edit by hand. */


.lt-fig { margin: 2.6em 0; }
/* The mechanic label used --ox-deep, which is the DRENCH colour and is fixed at
   #4A1710 in both themes by design. On the light sheet that reads as a deep
   oxblood; on the dark surface it was 1.16:1, so the line naming what each of
   the fifteen figures does was invisible in dark mode on every one of them.
   --ox is theme-aware and is what .fig-no beside it already uses. */
.lt-mech { display: flex; align-items: center; gap: 8px; padding: 12px 20px 0;
  font-family: var(--code); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--ox); }
.lt-mech svg { flex: 0 0 auto; }
.lt-stage { padding: 6px 0 0; }
.lt-stage svg { width: 100%; height: auto; display: block; }
.lt-hint { flex: 1 1 100%; font-size: 12.5px; line-height: 1.45; color: var(--meta);
  margin: 2px 0 0; font-family: var(--text); }
.lt-ctl { display: flex; gap: 12px; align-items: center; padding: 10px 20px 4px; flex-wrap: wrap; }
.lt-range { flex: 1 1 220px; accent-color: var(--ox); height: 28px; min-width: 140px; }
.lt-fig .fig-bar { row-gap: 6px; }
.lt-centrepiece { margin-top: clamp(26px, 3.4vw, 42px); }
.lt-centrepiece .lt-fig { margin: 0; }
.lt-photo figcaption a { color: inherit; text-decoration: underline; }
sup.lt-ref { font-size: 11px; line-height: 0; }
sup.lt-ref a { color: var(--ox); font-family: var(--code); font-weight: 700;
  text-decoration: none; padding: 0 1px; }
sup.lt-ref a:hover, sup.lt-ref a:focus-visible { color: var(--ink); text-decoration: underline; }
.lt-refs { list-style: none; padding: 0; margin: 0; }
.lt-refs li { position: relative; padding: 7px 0 7px 34px; border-top: 1px solid var(--hair);
  font-size: 14px; line-height: 1.5; color: var(--body); }
.lt-refno { position: absolute; left: 0; top: 8px; font-family: var(--code);
  font-size: 10.5px; font-weight: 700; color: var(--ox); }
.lt-refs li:target { background: var(--sunk, #EAE6E3); }
.lt-refs a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair); }
.lt-refs a:hover { text-decoration-color: var(--ox); }
/* Vishwanath's format for the apparatus: the citation reads as prose and the
   clickable part is one bracketed word at the end of it, so the list keeps its
   typography and still gets you to the source. Only entries whose URL was
   fetched and confirmed carry one, so a missing chip means no stable page was
   found rather than that nobody looked. */
a.lt-reflink { font-family: var(--code); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--ox); text-decoration: none;
  white-space: nowrap; padding: 2px 0 2px 2px; }
a.lt-reflink:hover, a.lt-reflink:focus-visible { color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--ox); }
.lt-shelf .source-list a { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--hair); }
.lt-shelf .source-list a:hover { text-decoration-color: var(--ox); }
/* THE LEAD RECOMMENDATION: oxblood, bold, and the recommendation itself is the
   link. display:inline is the whole fix here. site.css sets
   `.source-list a { display: block }`, which is right for the book titles,
   where the whole row is one link, and wrong inside this label, where the
   anchor is half a line of running text. Left as a block it dropped onto its
   own line under the date and read as a separate, unattached link. */
.lt-shelf .pub.rec { color: var(--ox); font-weight: 700; letter-spacing: 0.07em; }
.lt-shelf .pub.rec a { display: inline; color: var(--ox); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--ox);
  text-underline-offset: 2px; transform: none; white-space: nowrap; }
.lt-shelf .pub.rec a:hover, .lt-shelf .pub.rec a:focus-visible {
  color: var(--ink); text-decoration-color: var(--ink); transform: none; }
.lt-pre-icn { align-self: center; line-height: 0; }
.lt-era-icn svg { display: block; }
.lt-coda-kick { display: block; font-family: var(--code); font-size: 11px; font-weight: 700;
  letter-spacing: 0.11em; color: var(--ox); margin-bottom: 4px; }
.lt-interlude strong { color: #fff; }
.lt-interlude blockquote { border-color: rgba(255,255,255,0.55); }
.lt-interlude blockquote p, .lt-interlude blockquote em,
.lt-interlude blockquote strong { color: #fff; }
/* site.css sets `.prose blockquote strong em` to oxblood, which is right on the
   paper ground and unreadable on the interlude's oxblood block: the pull-quote
   was oxblood text on an oxblood field. That rule scores (0,1,3), so it needs a
   (0,2,3) answer rather than a repeat of the line above, which only tied it. */
.prose .lt-interlude blockquote strong em,
.prose .lt-interlude blockquote em strong,
.prose .lt-interlude blockquote strong,
.prose .lt-interlude blockquote em,
.prose .lt-interlude blockquote p { color: #fff; }
.prose .lt-interlude blockquote a { color: #fff; text-decoration-color: rgba(255,255,255,0.62); }
/* Links in the interlude's own paragraphs, not just its pull-quote. site.css
   colours every prose link oxblood, which on the oxblood drench measured 1.75:1
   and was caught by qa.py the moment the essay gained its first cross-link
   inside this section. Scoped to direct-child paragraphs so the figure sitting
   in here, which has its own light card, keeps its normal link colour. */
.prose .lt-interlude > p a { color: #fff; text-decoration-color: rgba(255,255,255,0.62); }
.prose .lt-interlude > p a:hover, .prose .lt-interlude > p a:focus-visible {
  color: #fff; text-decoration-color: #fff; }
@media print { .prose .lt-interlude > p a { color: var(--ink); } }
@media print {
  .prose .lt-interlude blockquote strong em,
  .prose .lt-interlude blockquote em strong,
  .prose .lt-interlude blockquote strong,
  .prose .lt-interlude blockquote em,
  .prose .lt-interlude blockquote p { color: var(--ink); }
}
/* The sources note reflows to the full band, like the standfirst at the head.
   site.css caps every .rule-head .lede at 52ch, which is right for a section
   intro sitting inside a column and wrong here, where the rule above it runs
   the whole width of the page. */
.lt-sources .rule-head .lede { max-width: none;
  font-size: clamp(16.5px, 0.42vw + 13px, 20px); line-height: 1.55; }
.lt-interlude .lt-fig { background: var(--surface); }
.lt-interlude .lt-fig .fig-no, .lt-interlude .lt-fig .lt-mech { color: var(--ox); }
.lt-interlude .lt-fig .fig-head { border-bottom-color: var(--hair); }
.lt-interlude .lt-fig .fig-foot { color: var(--meta); border-top-color: var(--hair); }
.lt-interlude .lt-fig .fig-title { color: var(--ink); }
.lt-interlude .lt-fig p { color: var(--body); }
.lt-ledger-lbl svg { vertical-align: -2px; margin-right: 5px; }
@media (max-width: 620px) {
  .lt-mech { padding: 10px 14px 0; letter-spacing: 0.1em; }
  .lt-ctl { padding: 8px 14px 4px; }
}


/* ring */

#fx-ring .lt-stage svg{width:100%;height:auto;display:block}
#fx-ring .rseg{cursor:pointer;outline:none}
#fx-ring .rseg .arc{transition:stroke .15s ease,stroke-width .15s ease}
#fx-ring .rseg:hover .arc{stroke:#1A1512;stroke-width:2.5}
#fx-ring .rseg.on .arc{stroke:#1A1512;stroke-width:2.5}
#fx-ring .rseg:focus-visible .arc{stroke:#1A1512;stroke-width:3.5}
@media (prefers-reduced-motion: reduce){#fx-ring .rseg .arc{transition:none}}


/* riverbank */

#fx-riverbank .lt-stage svg{width:100%;height:auto;display:block}
#fx-riverbank [id^="rb-b"]{outline:none}
#fx-riverbank [id^="rb-b"]:focus-visible circle{stroke:#1A1512;stroke-width:3}
#fx-riverbank circle,#fx-riverbank text{transition:none}


/* era1 */

#fx-era1 .lt-stage svg{width:100%;height:auto;display:block}
#fx-era1 .shellL,#fx-era1 .shellR{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#fx-era1 .tokens{opacity:0;transition:opacity .5s ease .3s}
#fx-era1.is-open .shellL{transform:translateX(-96px)}
#fx-era1.is-open .shellR{transform:translateX(96px)}
#fx-era1.is-open .tokens{opacity:1}
#fx-era1 .bulla-hit{cursor:pointer;outline:none}
#fx-era1 .bulla-hit:focus-visible .hitring{stroke:#1A1512}
@media (prefers-reduced-motion: reduce){
  #fx-era1 .shellL,#fx-era1 .shellR,#fx-era1 .tokens{transition:none}
}


/* era2 */

#fx-era2 .lt-stage svg{width:100%;height:auto;display:block}
#fx-era2 .lt-ctl{display:flex;align-items:center;gap:14px;padding:10px 20px 14px}
#fx-era2 .lt-ctl-lbl{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:700;
  letter-spacing:0.1em;color:#6B635C;white-space:nowrap}
#fx-era2 .lt-ctl input[type=range]{flex:1;width:100%;accent-color:#8A2E1D}


/* era3 */

#fx-era3 .lt-stage svg{width:100%;height:auto;display:block}
#fx-era3 .lt-modes{display:flex;gap:9px;flex-wrap:wrap;padding:10px 20px 14px}
#fx-era3 .lt-mode[aria-pressed="true"]{background:#1A1512;color:#F4F2F1;border-color:#1A1512}
#fx-era3 .g-claim,#fx-era3 .g-metal{transition:opacity .3s ease}
#fx-era3.mode-claim .g-metal{opacity:.45}
#fx-era3.mode-metal .g-claim{opacity:.45}
@media (prefers-reduced-motion: reduce){#fx-era3 .g-claim,#fx-era3 .g-metal{transition:none}}


/* treadmill */

#fx-treadmill .lt-stage svg{width:100%;height:auto;display:block}


/* era4a */
#fx-era4a .lt-stage svg{width:100%;height:auto;display:block}

/* era4b */
#fx-era4b .lt-stage svg{width:100%;height:auto;display:block}#fx-era4b .lt-ctl{padding:12px 20px 16px;background:#FFFFFF;border-top:1px solid #E0DAD5}#fx-era4b .lt-ctl label{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;letter-spacing:0.09em;color:#6B635C;margin-bottom:8px}#fx-era4b .lt-ctl input[type="range"]{width:100%;accent-color:#8A2E1D;cursor:pointer}

/* era5 */
#fx-era5 .lt-stage svg{width:100%;height:auto;display:block}#fx-era5 .lt-ctl{padding:12px 20px 16px;background:#FFFFFF;border-top:1px solid #E0DAD5}#fx-era5 .lt-ctl label{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;letter-spacing:0.09em;color:#6B635C;margin-bottom:8px}#fx-era5 .lt-ctl input[type="range"]{width:100%;accent-color:#8A2E1D;cursor:pointer}

/* era6a */
#fx-era6a .lt-stage svg{width:100%;height:auto;display:block}

/* era6b */
#fx-era6b .lt-stage svg{width:100%;height:auto;display:block}#fx-era6b .lt-ctl{padding:12px 20px 16px;background:#FFFFFF;border-top:1px solid #E0DAD5}#fx-era6b .lt-ctl label{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;letter-spacing:0.09em;color:#6B635C;margin-bottom:8px}#fx-era6b .lt-ctl input[type="range"]{width:100%;accent-color:#8A2E1D;cursor:pointer}

/* era7a */
#fx-era7a .lt-stage svg{width:100%;height:auto;display:block}
#fx-era7a .lt-ctl{display:flex;flex-wrap:wrap;gap:9px;padding:11px 20px 14px}
#fx-era7a .lt-ctl .fig-btn[aria-pressed="true"]{background:#1A1512;border-color:#1A1512;color:#F4F2F1}
@media (prefers-reduced-motion: reduce){#fx-era7a svg *{transition:none !important}}

/* era7b */
#fx-era7b .lt-stage svg{width:100%;height:auto;display:block}
@media (prefers-reduced-motion: reduce){#fx-era7b svg *{transition:none !important}}

/* era8 */
#fx-era8 .lt-stage svg{width:100%;height:auto;display:block}
@media (prefers-reduced-motion: reduce){#fx-era8 svg *{transition:none !important}}

/* interlude */
#fx-interlude .lt-stage svg{width:100%;height:auto;display:block}
#fx-interlude .lt-ctl{display:flex;flex-wrap:wrap;gap:9px;padding:11px 20px 14px}
#fx-interlude .lt-ctl .fig-btn[aria-pressed="true"]{background:#1A1512;border-color:#1A1512;color:#F4F2F1}
@media (prefers-reduced-motion: reduce){#fx-interlude svg *{transition:none !important}}

/* latency */
#fx-latency .lt-stage svg{width:100%;height:auto;display:block}
#fx-latency .lt-ctl{display:flex;flex-wrap:wrap;gap:9px;padding:11px 20px 14px}
#fx-latency .lt-ctl .fig-btn[aria-pressed="true"]{background:#1A1512;border-color:#1A1512;color:#F4F2F1}
@media (prefers-reduced-motion: reduce){#fx-latency svg *{transition:none !important}}