/* The testimony: Part Two. Ledger register - paper, ink, and the red of discrepancy.
   Signature: the split record, seven instruments around one event. */

.js-only-flex { display: none; }
.js .js-only-flex { display: flex; }
.js .js-later { display: none; }
.js .js-later.is-shown { display: block; animation: t-rise .9s var(--ease-ink) both; }
@keyframes t-rise { from { opacity: 0; transform: translateY(12px); } }

.t-head .lede { max-width: 40rem; }

/* ------------------------------------------------------------------ the split record */
.t-split { padding-top: clamp(2rem, 6vh, 4rem); }
.t-split-head { max-width: 44rem; margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.t-split-head .section-title { margin: .7rem 0 1rem; }

.t-apparatus { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (max-width: 1000px) { .t-apparatus { grid-template-columns: 1fr; } }

.t-ring { position: relative; width: min(100%, 640px); aspect-ratio: 1; margin: 0 auto; }
.t-lens { position: absolute; inset: 15%; width: 70%; height: 70%; border-radius: 50%; }
.t-rim {
  position: absolute; inset: calc(15% - 10px); border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(26,24,16,.35);
  background: repeating-conic-gradient(from 0deg, rgba(26,24,16,.45) 0 .35deg, transparent .35deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 8px), #000 calc(50% - 1px), transparent 50%);
          mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 8px), #000 calc(50% - 1px), transparent 50%);
}
.t-ring::after {   /* the instrument's line of sight, pointing from the rim to the chosen witness */
  content: ""; position: absolute; left: 50%; top: 50%; width: 36%; height: 1px; transform-origin: 0 0;
  background: linear-gradient(90deg, transparent 0 52%, var(--red-4) 52% 100%);
  transform: rotate(var(--sight, -90deg)); transition: transform .9s var(--ease-seal); pointer-events: none;
}
.t-tabs { position: absolute; inset: 0; }
.t-tabs [role="tab"] {
  --a: calc(-90deg + var(--i) * 51.4286deg);
  position: absolute; left: calc(50% + 44% * cos(var(--a))); top: calc(50% + 44% * sin(var(--a)));
  transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: .1rem; min-width: 7.5rem; min-height: 2.9rem; padding: .35rem .6rem;
  border: 1px solid transparent; border-radius: 2px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  cursor: pointer; text-align: center; transition: border-color .3s, background-color .3s, color .3s;
}
.t-tabs [role="tab"]:hover { border-color: var(--rule); }
.t-tab-name { font-size: 1.02rem; line-height: 1.1; }
.t-tab-pos { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.t-tabs [role="tab"][aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--cloud); }
.t-tabs [role="tab"][aria-selected="true"] .t-tab-pos { color: #cbc4b2; }
.t-tabs [role="tab"].is-consulted .t-tab-name::after { content: ""; display: inline-block; width: .32rem; height: .32rem; margin-left: .35rem; vertical-align: .2em; border-radius: 50%; background: var(--red-4); }
@media (min-width: 701px) {
  /* Round the lens a name needs no box (a box would cut into the rim): a halo of the page's
     colour keeps it legible over the ticks. */
  .t-tabs [role="tab"]:not([aria-selected="true"]) { background: none; text-shadow: 0 0 .25em var(--bg), 0 0 .25em var(--bg), 0 0 .6em var(--bg); }
}
@media (max-width: 700px) {
  .t-ring { aspect-ratio: auto; display: grid; gap: 1rem; }
  .t-lens { position: relative; inset: auto; width: min(100%, 22rem); height: auto; aspect-ratio: 1; margin: 0 auto; }
  .t-rim, .t-ring::after { display: none; }
  .t-tabs { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; order: -1; }
  .t-tabs [role="tab"] { position: static; transform: none; min-width: 0; border-color: var(--rule); }
}

/* Without JavaScript no witness can be chosen: the readings follow one another, and the lens, the
   counter (which only counts choices) and the desk's buttons (the desk needs JavaScript) are left out. */
html:not(.js) .t-ring, html:not(.js) .t-counter, html:not(.js) .t-gather { display: none; }
html:not(.js) .t-apparatus { grid-template-columns: minmax(0, 44rem); }
html:not(.js) .t-tally { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .t-star-quote { justify-self: start; }

.t-panels { position: relative; min-width: 0; }
.js .t-panels { display: grid; }
.js .t-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-ink), transform .6s var(--ease-ink), visibility 0s .6s; }
.js .t-panel.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity .6s var(--ease-ink) .1s, transform .6s var(--ease-ink) .1s; }
.no-js .t-panel + .t-panel { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.t-panel:focus-visible { outline-offset: 8px; }
.t-panel-name { font-family: var(--f-display); font-weight: 600; font-size: var(--step-3); line-height: 1; margin: .5rem 0 .8rem; }
.t-reading { color: var(--fg-2); max-width: 32rem; }
.t-reading strong { font-weight: 500; color: var(--red-4); }
.t-panel .slip { margin: 1rem 0; background: rgba(255,255,255,.42); }
.t-boxes { list-style: none; margin: 1rem 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; font-size: var(--step-1); font-style: italic; }
.t-boxes li { padding: .2rem .1rem; }
.t-aside { color: var(--fg-2); font-size: 1rem; max-width: 32rem; }
.t-aside .wei-mark { font-style: italic; color: var(--fg); }
.t-horses { font-size: var(--step-2); font-weight: 350; line-height: 1.15; margin: -.2rem 0 1rem; font-variation-settings: "opsz" 60; }
.t-panel-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin: 0 1rem .2rem 0; font-size: .98rem; }
.t-gather { margin-top: .4rem; padding-left: .7rem; border-color: rgba(26,24,16,.25); font-size: .95rem; }
.t-gather::before { content: "+"; font-family: var(--f-mono); margin-right: .15rem; color: var(--red-4); }
.t-gather[aria-pressed="true"] { background: none; color: var(--red-4); border-color: transparent; }
.t-gather[aria-pressed="true"]::before { content: "\2713"; margin-right: .2rem; }

.t-tally { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center; margin-top: clamp(2rem, 5vh, 3.5rem); padding-top: 1.6rem; border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .t-tally { grid-template-columns: 1fr; } }
.t-counter, .t-bench-count { display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; margin: 0; }
/* Each figure under its label, all on one line across the row ("1 of 7" reads as one). */
.t-counter > span, .t-bench-count > span { display: grid; grid-template-columns: auto 1fr; align-items: baseline; align-content: start; gap: .1rem .35rem; }
.t-counter > span > .label, .t-bench-count > span > .label { grid-column: 1 / -1; }
.t-counter b, .t-bench-count b { font-family: var(--f-display); font-weight: 600; font-size: var(--step-3); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.t-counter .t-of, .t-bench-count .t-of { font-size: 1rem; color: var(--muted); }
.t-counter .t-zero, .t-bench-count .t-zero { color: var(--red-4); }
.t-star-quote { margin: 0; justify-self: end; }
.t-star-quote blockquote { font-size: var(--step-2); }

/* ------------------------------------------------------------------ the Court's method */
.t-method { background: color-mix(in srgb, var(--bg) 88%, #fff); }
.t-method-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .t-method-grid { grid-template-columns: 1fr; } }
.t-method .section-title { margin: .7rem 0 1.2rem; max-width: 14ch; }
.t-method-copy > p { max-width: 34rem; }
.t-descriptors { margin-top: 1.4rem; }
.t-descriptors ul { list-style: none; margin: .5rem 0 .6rem; padding: 0; display: grid; gap: .3rem; font-size: var(--step-1); line-height: 1.3; }
.t-method-hint { color: var(--fg-2); margin: 1rem 0; min-height: 1.6em; }
.t-cards { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; }
.t-card {
  position: relative; width: 100%; min-height: 6.2rem; display: grid; align-content: space-between; gap: .4rem; padding: .8rem .9rem;
  text-align: left; background: #f6f4ee; border: 1px solid rgba(26,24,16,.2); box-shadow: 0 1px 0 rgba(26,24,16,.08);
  transition: transform .35s var(--ease-ink), opacity .6s, filter .6s, box-shadow .3s; overflow: hidden;
}
.t-card:disabled { cursor: default; color: inherit; opacity: 1; }
.t-card:not(:disabled) { cursor: pointer; }
.t-card:not(:disabled):hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 8px 18px rgba(26,24,16,.12); }
.t-card-name { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.t-card-reading { font-size: 1.12rem; line-height: 1.2; }
.t-method.is-choosing .t-card { border-style: dashed; }
.t-card.is-chosen { border: 1px solid var(--gold-5); box-shadow: 0 0 0 3px rgba(212,160,32,.25); }
.t-card.is-chosen { background: #fbf7ea; }
.t-card.is-chosen::after { content: "Filed as the account"; position: absolute; left: 0; right: 0; bottom: 0; padding: .25rem .9rem; background: var(--gold-5); color: #fbf7ea; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.t-card.is-chosen .t-card-reading { margin-bottom: 1.3rem; }
.t-card.is-filed { background: #ecebe6; }
.t-card.is-filed > :not(.t-stamp) { opacity: .38; filter: grayscale(1); }
.t-stamp {
  position: absolute; left: 50%; top: 58%; width: max-content; max-width: 86%; padding: .2rem .45rem;
  border: 2px solid var(--red); color: var(--red); font-family: var(--f-mono); font-size: .6rem; font-weight: 500; letter-spacing: .05em; line-height: 1.3;
  text-transform: uppercase; text-align: center; mix-blend-mode: multiply; background: rgba(255,255,255,.2);
  transform: translate(-50%, -50%) rotate(var(--rot, -8deg)); animation: t-stamp .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes t-stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, -8deg)) scale(1.8); } }
.t-verdict { margin-top: .5rem; }
.t-verdict-line { max-width: 34rem; margin: 0 0 .5rem; padding: 1rem 1.2rem; font-size: var(--step-1); line-height: 1.4; background: rgba(255,255,255,.42); border-left: 2px solid var(--red-4); }
.t-verdict .label { margin: 0; }

/* ------------------------------------------------------------------ Qian Yuwei's shelves */
.t-shelves .section-title { margin: .7rem 0 1.6rem; }
.t-shelves-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .t-shelves-grid { grid-template-columns: 1fr; } }
.t-shelf-copy > p:not(.lede) { color: var(--fg-2); max-width: var(--measure); }
.t-shelf-copy .slip { margin-top: 1.2rem; }
.t-chamber { padding: clamp(1rem, 3vw, 1.8rem); background: #efece4; border: 1px solid rgba(26,24,16,.16); box-shadow: inset 0 0 0 6px rgba(255,255,255,.35); }
.t-clock { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(26,24,16,.16); }
.t-clock-time { font-family: var(--f-mono); font-size: var(--step-2); font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.t-shelf { margin-bottom: 1.1rem; }
.t-shelf .label { margin-bottom: .45rem; font-size: .68rem; }
.t-pills { display: flex; flex-wrap: wrap; gap: 3px; padding: .5rem; background: rgba(26,24,16,.05); border-bottom: 3px solid rgba(26,24,16,.35); }
.t-pill { width: 8px; height: 8px; border-radius: 2px; transition: transform .35s var(--ease-ink), opacity .35s; }
.t-shelf[data-kind="jade"] .t-pill { background: #4f8f76; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.t-shelf[data-kind="crystal"] .t-pill { width: 9px; height: 12px; border-radius: 4px; background: #a9c7d2; box-shadow: inset 0 0 0 1px rgba(40,80,100,.35); }
.t-shelf[data-kind="bronze"] .t-pill { width: 12px; height: 12px; border-radius: 1px; background: #8f6232; box-shadow: inset 0 0 0 1px rgba(60,30,0,.4); }
.t-pill.is-eaten { opacity: .09; transform: scale(.45); }
.t-pill.is-next { outline: 2px solid var(--red-4); outline-offset: 1px; }
.t-controls { flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.2rem; }
.t-speed { display: inline-flex; border: 1px solid rgba(26,24,16,.35); border-radius: 2px; overflow: hidden; }
.t-speed [role="radio"] { min-height: 2.75rem; padding: .4rem .75rem; border: 0; background: transparent; cursor: pointer; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.t-speed [role="radio"] + [role="radio"] { border-left: 1px solid rgba(26,24,16,.2); }
.t-speed [role="radio"][aria-checked="true"] { background: var(--ink); color: var(--cloud); }
.t-shelf-status { min-height: 1.4em; margin: .9rem 0 0; }
.t-shelf-end { margin-top: 1.4rem; }
.t-end-lead { color: var(--fg-2); font-size: 1rem; margin: 0 0 .6rem; max-width: 34rem; }
.t-organized { margin: .2rem 0 1.4rem; color: var(--ink); }

/* ------------------------------------------------------------------ the timeline anomaly */
/* Wei's map, in red chalk on long paper. Only what the novel attests is drawn: two dated
   sightings on the grid, and three undated conflicts bracketed in the margin. */
.t-timeline .section-title { margin: .7rem 0 1.2rem; max-width: 17ch; }
.t-tl-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 4rem); align-items: start; margin-bottom: clamp(1.8rem, 4vh, 2.6rem); }
.t-tl-intro p { margin: 0; }
.t-tl-intro p:not(.lede) { color: var(--fg-2); max-width: 34rem; }
@media (max-width: 860px) { .t-tl-intro { grid-template-columns: 1fr; } }

.t-paper {
  --chalk: #b3391a; --chalk-2: #8a230d; --chalk-hi: #dd5a30; --sheet: #f3eee2;
  position: relative; margin: 0; isolation: isolate;
  background:
    radial-gradient(120% 70% at 22% 0%, rgba(255,255,255,.6), transparent 62%),
    radial-gradient(70% 70% at 100% 100%, rgba(120,70,30,.07), transparent 70%),
    repeating-linear-gradient(0deg, rgba(160,24,0,.03) 0 1px, transparent 1px 9px),
    var(--sheet);
  border: 1px solid rgba(26,24,16,.16);
  box-shadow: 0 24px 50px -18px rgba(26,24,16,.28), 0 2px 0 rgba(26,24,16,.05), inset 0 0 0 1px rgba(255,255,255,.45);
}
.t-paper::before {   /* the long sheet's far end, curling away */
  content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 34px; pointer-events: none;
  background: linear-gradient(90deg, rgba(243,238,226,0), rgba(26,24,16,.06) 70%, rgba(26,24,16,.1));
}
.t-paper-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding: 1.1rem clamp(1rem, 3vw, 2rem) .1rem; }
.t-paper-head .label { margin: 0; }
.t-rule { margin: 0; font-size: var(--step-1); font-style: italic; line-height: 1.3; color: var(--chalk-2); }
.t-rule-label { display: inline-block; margin-right: .7rem; font-family: var(--f-mono); font-style: normal; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); vertical-align: .18em; }
.t-rule-in { font-weight: 600; padding: 0 .08em; }
.t-sheet { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(160,40,16,.35) transparent; }
.t-sheet:focus-visible { outline-offset: -3px; }
.t-chart { display: block; width: 100%; min-width: 900px; height: auto; overflow: visible; }
.t-paper-foot { padding: .2rem clamp(1rem, 3vw, 2rem) 1.1rem; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; line-height: 1.6; text-transform: uppercase; color: var(--muted); }
.t-swipe { display: none; margin: .7rem 0 0; }
@media (max-width: 980px) { .t-swipe { display: block; } }

.t-chart text { font-family: var(--f-body); fill: var(--ink-2); }
.t-chart .t-grid line { stroke-linecap: round; }
.t-chart .t-grid .axis { stroke: rgba(26,24,16,.3); stroke-width: 1.2; }
.t-chart .t-grid .col { stroke: rgba(160,40,16,.18); stroke-width: 1; stroke-dasharray: 1 7; }
.t-chart .t-grid .row { stroke: rgba(160,40,16,.28); stroke-width: 1.3; stroke-dasharray: 6 7; }
.t-chart .t-days text { font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-5); text-anchor: middle; }
.t-chart .t-places text { font-size: 19px; text-anchor: end; fill: var(--ink); }
.t-chart .ring { fill: none; stroke: var(--chalk); stroke-width: 2.6; filter: url(#t-chalk); }
.t-chart .dot { fill: var(--chalk); }
.t-chart .note { font-style: italic; font-size: 18px; fill: var(--chalk-2); }
.t-chart .fine { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .05em; fill: var(--ink-5); }
.t-chart .t-bracket { transition: opacity .6s var(--ease-ink); }
.t-chart .t-bracket .br { fill: none; stroke: var(--chalk); stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; filter: url(#t-chalk); transition: stroke .4s, stroke-width .4s; }
.t-chart .t-bracket .x { fill: none; stroke: var(--chalk); stroke-width: 2.6; stroke-linecap: round; filter: url(#t-chalk); }
.t-chart .t-bracket .num { font-style: italic; font-size: 19px; fill: var(--chalk-2); text-anchor: middle; }
.t-chart .t-bracket .num-ring { fill: none; stroke: var(--ink-discrepancy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.t-chart .t-bracket .lab { font-style: italic; font-size: 22px; fill: var(--chalk-2); transition: opacity .5s; }
.t-chart .t-bracket[data-bracket="forty"] .lab, .t-chart .t-bracket[data-bracket="forty"] .fine { text-anchor: middle; }
.t-chart .t-bracket .fine { transition: opacity .5s; }
.t-chart .t-bracket .strike { fill: none; stroke: var(--chalk-hi); stroke-width: 3.4; stroke-linecap: round; filter: url(#t-chalk); }
.t-chart .being { fill: var(--red); stroke: var(--red); stroke-width: 1.8; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .4s; }
/* Without JavaScript: the sheet as drawn, no transient marks. */
.t-chart .strike, .t-chart .num-ring { opacity: 0; }
.js .t-chart .num-ring, .js .t-chart .strike { opacity: 1; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }

/* The chalk goes on as the sheet comes into view. */
.js .t-paper.is-ready .t-chart .br, .js .t-paper.is-ready .t-chart .x, .js .t-paper.is-ready .t-chart .ring { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.js .t-paper.is-ready .t-chart .dot, .js .t-paper.is-ready .t-chart .t-sighting text,
.js .t-paper.is-ready .t-chart .t-bracket text { opacity: 0; transition: opacity .9s var(--ease-ink) var(--d, 0s); }
.js .t-paper.is-drawn .t-chart .br, .js .t-paper.is-drawn .t-chart .x, .js .t-paper.is-drawn .t-chart .ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease-ink) var(--d, 0s), stroke .4s, stroke-width .4s; }
.js .t-paper.is-drawn .t-chart .dot, .js .t-paper.is-drawn .t-chart .t-sighting text,
.js .t-paper.is-drawn .t-chart .t-bracket text { opacity: 1; }

/* The bench chooses one bracket at a time. */
.t-paper.is-picking .t-bracket:not(.is-current) { opacity: .42; }
.t-paper .t-bracket.is-current .br { stroke: var(--chalk-2); stroke-width: 4.6; }
.js .t-paper .t-bracket.is-answered .num-ring { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-ink) .2s; }
/* The time stamps are wrong: the label is struck, then stands. */
.js .t-paper .t-bracket.is-struck .strike { stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease-ink); }
.js .t-paper .t-bracket.is-struck.is-unstrike .strike { opacity: 0; transition: opacity .9s ease; }
/* Leave it out: the bracket is wiped from the sheet, and comes back. */
.js .t-paper.is-drawn .t-bracket.is-erased .br, .js .t-paper.is-drawn .t-bracket.is-erased .x { stroke-dashoffset: var(--len); transition: stroke-dashoffset .6s cubic-bezier(.5, 0, .8, .4); }
.js .t-paper.is-drawn .t-bracket.is-erased text { opacity: .08; transition: opacity .5s; }
/* He was in both places: one being at each end of the bracket, at once. */
.t-chart .being.is-on { opacity: 1; animation: t-both 1.9s ease-in-out infinite; }
@keyframes t-both { 50% { transform: scale(1.4); } }
/* The third possibility: in both places, or in neither. */
.t-paper.is-third .t-chart .being { opacity: 1; animation: t-neither 3.4s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes t-neither { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: 0; } }
.t-paper.is-third .t-bracket, .t-paper.is-third.is-picking .t-bracket:not(.is-current) { opacity: 1; }

/* The bench under the sheet. */
.t-bench { margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.t-bench-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; border-bottom: 1px solid var(--rule); }
.t-anoms { flex-wrap: wrap; gap: .25rem; }
.t-anoms [role="radio"] {
  display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: baseline; min-height: 3.1rem; margin-bottom: -1px;
  padding: .55rem 1rem .55rem .85rem; text-align: left; cursor: pointer; background: transparent;
  border: 1px solid transparent; border-bottom-color: var(--rule); border-radius: 3px 3px 0 0; transition: background-color .3s, border-color .3s;
}
.t-anoms [role="radio"]:hover { border-color: var(--rule); border-bottom-color: transparent; }
.t-anoms [role="radio"][aria-checked="true"] { background: rgba(255,255,255,.5); border-color: var(--rule); border-bottom-color: #ebe8e0; }
.t-anom-num { font-style: italic; font-size: 1.05rem; color: var(--red-4); min-width: 1.1rem; }
@media (max-width: 600px) {
  .t-bench-top { border-bottom: 0; }
  .t-anoms { flex-direction: column; width: 100%; gap: 0; border-top: 1px solid var(--rule); }
  .t-anoms [role="radio"] { width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--rule); border-left: 3px solid transparent; border-radius: 0; }
  .t-anoms [role="radio"]:hover { border-color: transparent; border-bottom-color: var(--rule); }
  .t-anoms [role="radio"][aria-checked="true"] { border-color: transparent; border-bottom-color: var(--rule); border-left-color: var(--red-4); }
  .t-bench-count { padding-top: .4rem; border-bottom: 1px solid var(--rule); width: 100%; }
}
.t-anom-name { font-size: 1.08rem; font-style: italic; line-height: 1.2; }
.t-anom-state { grid-column: 2; min-height: 1.1em; font-family: var(--f-mono); font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--red-4); }
.t-bench-count { padding-bottom: .7rem; }
.t-bench-count b { font-size: var(--step-2); }
.t-bench-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.4rem clamp(2rem, 5vw, 4rem); padding-top: 1.5rem; }
@media (max-width: 860px) { .t-bench-body { grid-template-columns: 1fr; } }
.t-anom-text .label { margin: 0 0 .5rem; }
.t-anom-text p:last-child { margin: 0; font-size: 1.12rem; line-height: 1.5; }
.t-anom-text strong { font-weight: 500; font-style: italic; color: var(--red-4); }
.js .t-anom-text:not(.is-current) { display: none; }
.js .t-anom-text.is-current { animation: t-rise .6s var(--ease-ink) both; }
.no-js .t-anom-text + .t-anom-text { margin-top: 1.3rem; }
.t-ask { margin: 0 0 .7rem; font-size: 1.08rem; color: var(--fg); }
.no-js .t-ask { display: none; }
.t-recon { flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.t-recon .btn { background: rgba(255,255,255,.35); }
.t-recon .btn.is-tried::after { content: ""; width: .38rem; height: .38rem; border-radius: 50%; background: var(--red-4); }
.t-recon .btn.is-last { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.t-vcard { position: relative; padding: 1.05rem 1.25rem 1rem; background: rgba(255,255,255,.42); border-left: 2px solid var(--red-4); }
.t-vcard .label { margin: 0; }
.js .t-vcard { display: none; }
.js .t-vcard.is-current { display: block; animation: t-rise .6s var(--ease-ink) both; }
.no-js .t-vcard + .t-vcard { margin-top: .9rem; }
.t-v-word { margin: .25rem 0 .45rem; font-size: var(--step-2); font-style: italic; font-weight: 350; line-height: 1.12; color: var(--red-4); font-variation-settings: "opsz" 60; }
.t-v-draft { margin: .35rem 0 .2rem; font-size: 1.12rem; line-height: 1.4; color: var(--fg-2); }
.t-v-why { margin: 0 0 .5rem; color: var(--fg-2); font-size: 1rem; max-width: 34rem; }
.t-v-cite { margin: .3rem 0 0 !important; font-size: .66rem; }
.t-work-foot { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-top: .8rem; min-height: 2.75rem; }
.t-bench-status { margin: 0; color: var(--fg-2); font-size: .98rem; }
.t-next { border-color: var(--rule); }
.t-next::after { content: "\2192"; font-family: var(--f-mono); }

.t-third { max-width: 48rem; margin-top: clamp(2.5rem, 7vh, 4.5rem); outline: none; }
.t-third .label { margin: 0 0 .8rem; }
.t-third-lead { font-size: var(--step-1); line-height: 1.45; color: var(--fg-2); }
.t-third-quote { margin: 1.4rem 0 1.1rem; padding: 1.1rem 1.3rem; font-size: var(--step-2); font-weight: 350; line-height: 1.28; font-variation-settings: "opsz" 60; }
.t-third-note { color: var(--muted); font-size: .98rem; }

/* ------------------------------------------------------------------ the dispatches */
.t-d-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) {
  /* One column: the stack sits between the introduction and the readings, so each reading's effect is in view. */
  .t-d-grid { grid-template-columns: 1fr; row-gap: 0; }
  .t-d-copy { display: contents; }
  .t-stack-wrap { order: 1; margin: .6rem 0 1.6rem; }
  .t-readings { order: 2; margin-top: 0; }
  .t-d-status { order: 3; }
}
@media (min-width: 901px) { .js .t-stack-wrap { position: sticky; top: calc(var(--masthead-h) + 1.5rem); } }
.t-dispatches .section-title { margin: .7rem 0 1.2rem; max-width: 14ch; }
.t-d-copy > p:not(.label) { max-width: 34rem; }
.t-readings { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .55rem; max-width: 34rem; }
.t-rd-btn {
  display: grid; grid-template-columns: 2.6rem 1fr; grid-template-rows: auto auto; column-gap: .85rem; align-items: center;
  width: 100%; min-height: 3.6rem; padding: .55rem 1rem .6rem .7rem; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.3); border: 1px solid rgba(26,24,16,.22); border-radius: 2px;
  transition: background-color .35s, color .35s, border-color .35s, opacity .35s;
}
.t-rd-btn:hover:not(:disabled) { border-color: var(--fg); }
.t-rd-num { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding-bottom: .1rem; border: 1px solid currentColor; border-radius: 50%; font-style: italic; font-size: 1.12rem; letter-spacing: .04em; }
.t-rd-ord { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.t-rd-name { font-size: 1.22rem; font-style: italic; line-height: 1.2; }
.t-rd-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cloud); }
.t-rd-btn[aria-pressed="true"] .t-rd-ord { color: #cbc4b2; }
.t-rd-btn:disabled { opacity: .42; cursor: not-allowed; }
html:not(.js) .t-rd-btn { pointer-events: none; cursor: default; background: none; border-color: transparent; padding-left: 0; }
.t-rd.is-read .t-rd-num { border-color: var(--red-4); color: var(--red-4); }
.t-rd-btn[aria-pressed="true"] .t-rd-num { color: var(--cloud); border-color: var(--cloud); }
.t-rd-note { margin: .5rem 0 .35rem 3.5rem; font-size: .98rem; line-height: 1.5; color: var(--fg-2); }
.js .t-rd-note { display: none; }
.js .t-rd.is-read .t-rd-note { display: block; animation: t-rise .7s var(--ease-ink) both; }
.t-three { display: inline-flex; gap: 4px; margin-left: .5rem; vertical-align: -.05em; }
.t-three i { display: block; width: 2px; height: .95em; border-radius: 1px; background: var(--ink-discrepancy); transform: rotate(14deg); }
.t-d-status { margin: 1.1rem 0 0; min-height: 1.4em; }

.t-stack-wrap { position: relative; min-width: 0; }
.t-stack { position: relative; --step: 1.6rem; }
.t-slip {
  position: relative; padding: .38rem 1.25rem 1rem; background-color: #f7f3e8; border: 1px solid rgba(26,24,16,.2);
  box-shadow: 0 1px 0 rgba(26,24,16,.07), 0 8px 18px -6px rgba(26,24,16,.12);
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(1.45rem - 1px), rgba(43,74,122,.14) calc(1.45rem - 1px) 1.45rem);
  background-position: 0 .38rem;
}
.t-slip-body { position: relative; margin: 0; min-height: 7.25rem; font-family: var(--f-mono); font-size: .88rem; line-height: 1.45rem; color: var(--ink-3); transition: opacity .8s var(--ease-ink), color .8s; }
.t-filed {
  position: absolute; right: .9rem; bottom: .55rem; margin: 0; padding: .12rem .45rem; border: 1.5px solid var(--ink-crossref); border-radius: 2px;
  font-family: var(--f-mono); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-crossref);
  transform: rotate(-3deg); opacity: 0; transition: opacity .5s, transform .5s cubic-bezier(.3, 1.6, .5, 1); mix-blend-mode: multiply;
}
.no-js .t-slip:not(:last-child) { display: none; }
.no-js .t-slip:last-child { box-shadow: 3px 3px 0 -1px #efeadd, 3px 3px 0 0 rgba(26,24,16,.2), 6px 6px 0 -1px #ece7da, 6px 6px 0 0 rgba(26,24,16,.18), 0 12px 24px -8px rgba(26,24,16,.2); }
.js .t-stack { height: 12rem; transition: height .9s var(--ease-ink); }
.js .t-slip { position: absolute; left: 0; right: 14px; top: 0; transform: var(--tf, none); transition: transform .9s var(--ease-ink) var(--td, 0s), box-shadow .6s; will-change: transform; }
.js .t-stack:not(.is-cascade) .t-slip:not(:last-child) .t-slip-body { opacity: 0; }
.js .t-stack.is-filed .t-filed { opacity: 1; transform: rotate(-5deg); }
.js .t-stack.is-filed .t-slip:not(:last-child) { box-shadow: none; border-color: rgba(26,24,16,.1); background-image: none; background-color: #efe9db; }
.js .t-stack.is-cascade .t-slip { box-shadow: 0 -1px 0 rgba(26,24,16,.05), 0 6px 14px -8px rgba(26,24,16,.18); }
.js .t-stack.is-gaps .t-slip-body { color: rgba(58,56,48,.3); }
.t-gap { display: inline-block; position: relative; width: 0; height: 1em; vertical-align: -.15em; }
.t-gap::after {
  content: ""; position: absolute; left: -.36rem; bottom: -.42rem; width: .72rem; height: .6rem; opacity: 0; transform: translateY(-4px); transition: opacity .5s, transform .5s var(--ease-ink);
  background: linear-gradient(to top right, transparent calc(50% - 1.1px), var(--ink-discrepancy) calc(50% - 1.1px) calc(50% + .9px), transparent calc(50% + .9px)) left / 50% 100% no-repeat,
              linear-gradient(to top left, transparent calc(50% - 1.1px), var(--ink-discrepancy) calc(50% - 1.1px) calc(50% + .9px), transparent calc(50% + .9px)) right / 50% 100% no-repeat;
}
.js .t-stack.is-gaps .t-gap::after { opacity: 1; transform: none; transition-delay: var(--gd, 0s); }

.t-breaks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .9rem; }
.t-break { padding: 1rem 1.25rem .9rem; background: #fbf6ea; border: 1px solid rgba(90,14,2,.2); box-shadow: 0 16px 34px -14px rgba(60,20,10,.35); }
.t-break-text { margin: 0 0 .45rem; font-style: italic; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); line-height: 1.22; color: #5a0e02; font-variation-settings: "opsz" 48; }
.t-break-why { margin: 0; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; line-height: 1.5; text-transform: uppercase; color: var(--muted); }
.js .t-breaks { position: absolute; z-index: 30; left: 41%; right: -.6rem; top: 50%; margin: 0; gap: .8rem; visibility: hidden; opacity: 0; pointer-events: none; transform: translate(-18%, -42%) scale(.9); transition: opacity .7s var(--ease-ink), transform 1.1s var(--ease-ink), visibility 0s 1.1s; }
.js .t-breaks .t-break { transform: rotate(var(--br, 0deg)); padding: .85rem 1.05rem .8rem; }
.js .t-breaks .t-break-text { font-size: clamp(1.18rem, .95rem + .8vw, 1.5rem); }
.js .t-dispatches.is-gaps .t-breaks { visibility: visible; opacity: 1; pointer-events: auto; transform: translate(0, -50%); transition: opacity .8s var(--ease-ink) .35s, transform 1.2s var(--ease-ink) .35s, visibility 0s; }
@media (max-width: 700px) {
  /* On a phone the three come out below the stack, so the gaps stay in view above them. */
  .js .t-breaks { position: relative; left: auto; right: auto; top: auto; margin-top: 1rem; }
  .js .t-dispatches:not(.is-gaps) .t-breaks { display: none; }
  .js .t-dispatches.is-gaps .t-breaks { transform: none; animation: t-lift 1s var(--ease-ink) .25s both; }
}
@keyframes t-lift { from { opacity: 0; transform: translateY(-2.5rem) scale(.96); } }
.t-shaky .ch { display: inline-block; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--dr, 0deg)); }
.js .t-dispatches.is-gaps .t-shaky .ch { animation: t-tremble 3.2s ease-in-out infinite; animation-delay: var(--dd, 0s); }
@keyframes t-tremble { 50% { transform: translate(calc(var(--dx, 0px) * -1), var(--dy, 0)) rotate(calc(var(--dr, 0deg) * -1)); } }

.t-limit { margin-top: clamp(2.5rem, 6vh, 4rem); }
.t-limit-lead { color: var(--fg-2); margin: 0 0 .5rem; }
.t-limit .said-line { margin-bottom: .6rem; }
.t-limit-note { color: var(--fg-2); }

.t-coda-lead { max-width: 30rem; color: var(--fg-2); margin: 0 0 .8rem; }
.t-coda .said-line { max-width: 22ch; margin-bottom: .6rem; }
.t-coda .next-room { margin-top: 3rem; }

@media (prefers-reduced-motion: reduce) {
  .t-shaky .ch, .t-chart .being { animation: none !important; }
  .t-paper.is-third .t-chart .being { fill-opacity: .45; }
}
html.reduce-motion .t-shaky .ch, html.reduce-motion .t-chart .being { animation: none !important; }
html.reduce-motion .t-paper.is-third .t-chart .being { fill-opacity: .45; }