/* The filing. Part Five: the desk as stratigraphy, the official version and its gaps, the true
   version in warm ink, two identical scrolls handed across a desk, what the Court replaces,
   and the final threshold. Register "filing": the Court's white and gold. */

.js-only { display: none; }
.js .js-only { display: revert; }

.filing-head .lede { max-width: 36rem; }

/* ------------------------------------------------------------------ stratigraphy
   Chapter 39. The layers settle by scroll over the painting of the desk itself, seen from
   above (filing-evidence). Each layer the painting shows carries a sample cut from it and lights
   its evidence on the desk as it settles. The four dishes of ink on the painted desk, and the
   key beside it, say what each ink was for; Wei's marks in that ink are drawn over the desk. */
.strata-scene { position: relative; }
.js .strata-scene { height: 280vh; }
.strata-sticky { position: relative; padding: 3rem 0; }
.js .strata-sticky { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--masthead-h) + .8rem) 0 1.2rem; }
.strata-grid {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); grid-template-areas: "copy desk" "inks desk";
  column-gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center;
}
.strata-copy { grid-area: copy; align-self: end; }
.strata-inks { grid-area: inks; align-self: start; }
.desk-cut { grid-area: desk; }
@media (max-width: 860px) {
  .strata-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "desk" "inks"; row-gap: 1.3rem; }
  .js .strata-scene { height: auto; }
  .js .strata-sticky { position: relative; min-height: 0; display: block; padding: 2rem 0 1rem; }
}
.strata-copy .section-title { margin: .8rem 0 1rem; max-width: 14ch; }
.strata-note { color: var(--fg-2); max-width: 28rem; margin-bottom: 0; }

/* The key to the four inks (the same four dishes lie on the painted desk). */
.inks-head { margin: 1.4rem 0 .45rem; }
.inks { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; max-width: 28rem; container-type: inline-size; }
.js .inks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .45rem; }
.ink {
  --k: var(--ink-fact); display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 2.6rem; padding: .3rem .6rem;
  border: 1px solid transparent; border-radius: 2px; background: none; text-align: left; font-size: 1rem; line-height: 1.2; cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
/* A narrower key sets each ink's use under its name, so "cross-reference" and "registration"
   stay whole and inside their buttons. */
@container (max-width: 25.5rem) {
  .ink { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; row-gap: .05rem; align-content: center; }
  .ink .ink-swatch { grid-row: span 2; }
  .ink .label { grid-column: 2; }
}
@media (pointer: coarse), (max-width: 860px) { .ink { min-height: 2.75rem; } }
.ink[data-ink="discrepancy"], .dish[data-dish="discrepancy"], .ink-now[data-k="discrepancy"] { --k: var(--ink-discrepancy); }
.ink[data-ink="crossref"], .dish[data-dish="crossref"], .ink-now[data-k="crossref"] { --k: var(--ink-crossref); }
.ink[data-ink="amber"], .dish[data-dish="amber"], .ink-now[data-k="amber"] { --k: var(--ink-amber); }
html:not(.js) .ink { cursor: default; padding-inline: 0; }
.ink .label { font-size: .62rem; }
.ink:hover, .ink.is-active { border-color: color-mix(in srgb, var(--k) 38%, transparent); background: color-mix(in srgb, var(--k) 6%, transparent); }
.ink[aria-pressed="true"] { border-color: var(--k); background: color-mix(in srgb, var(--k) 12%, transparent); }
.ink-swatch { flex: none; width: 1.6rem; height: .55rem; border-radius: 1rem 0 1rem 0; background: var(--k); }
/* Without JavaScript each ink's use is listed under it; with it, one line under the painting. */
.ink-use { margin: 0 0 .6rem 2.15rem; font-size: .92rem; line-height: 1.45; color: var(--fg-2); max-width: 26rem; text-wrap: pretty; }
.js .ink-use { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.amber-note { font-size: var(--step-1); font-style: italic; margin: 1.1rem 0 .9rem; }
.pocket { display: flex; gap: .8rem; align-items: center; color: var(--fg-2); font-size: .98rem; max-width: 28rem; margin: 0; }
/* The jade fragment, cut from the painting of the case (the clip's first frame). */
.pocket-jade {
  flex: none; width: 2.1rem; aspect-ratio: 71 / 72; background: #1e6858 var(--jade, none) no-repeat 51.32% 58.92% / 1752.11% 972.22%;
  clip-path: polygon(26.5% 1.6%, 17.6% 6.1%, 4.3% 19.5%, 1.2% 28.3%, 13.9% 55%, 36% 64.8%, 65.6% 82.1%, 77.5% 86%, 89% 98.4%, 93.3% 98.3%, 98.2% 76.9%, 91.8% 50.6%, 78.6% 27.4%, 75.2% 18.5%, 72% 14%, 61.1% 9.5%);
  filter: drop-shadow(0 0 5px rgba(60, 176, 160, .65)) saturate(1.1);
}

/* The layers. */
.desk-cut { position: relative; display: flex; flex-direction: column; min-width: 0; }
.yours-label { margin: 0 0 .35rem; }
.strata { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 3px; }
.stratum {
  --sample: 7.6rem;
  position: relative; display: grid; align-content: center; gap: .05rem; min-height: 3rem; padding: .45rem calc(var(--sample) + .6rem) .45rem .9rem; overflow: hidden;
  background: #f7f3ea; border: 1px solid rgba(26,24,16,.12); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 6px rgba(26,24,16,.06);
  transform-origin: 50% 100%;
}
.stratum .label { font-size: .62rem; }
.stratum-name { font-size: 1rem; line-height: 1.25; }
.stratum--draft { min-height: 3.5rem; }
.stratum--dispatches { padding-right: .9rem; background: #efe6d2; border-left: 4px solid #906800; }
.stratum.is-lit { border-color: rgba(144, 104, 0, .6); box-shadow: 0 0 0 1px rgba(144, 104, 0, .35), 0 6px 16px rgba(26, 24, 16, .12); }
/* A core sample of the layer, cut from the painting of the desk below (filing.js sets the image). */
.stratum-sample {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--sample); background: rgba(26, 24, 16, .05) var(--desk-img, none) no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%);
}
html:not(.js) .stratum { --sample: 0rem; }
html:not(.js) .stratum-sample { display: none; }
/* The inks a layer is annotated in (the novel names the draft and the damage reports). */
.stratum-inks { position: absolute; top: .5rem; right: calc(var(--sample) + .2rem); display: flex; align-items: center; gap: 4px; }
.stratum-inks i { --k: var(--ink-fact); display: block; width: 1.05rem; height: 3px; border-radius: 2px; background: var(--k); transition: opacity .4s, transform .5s var(--ease-ink); }
.stratum-inks [data-k="discrepancy"] { --k: var(--ink-discrepancy); width: .6rem; height: .6rem; border-radius: 50%; background: none; border: 1.5px solid var(--k); }
.stratum-inks [data-k="crossref"] { --k: var(--ink-crossref); }
.stratum-inks [data-k="amber"] { --k: var(--ink-amber); height: .5rem; background: color-mix(in srgb, var(--k) 60%, transparent); }
.strata-scene[data-ink-on] .stratum-inks i { opacity: .14; }
.strata-scene[data-ink-on="fact"] .stratum-inks [data-k="fact"], .strata-scene[data-ink-on="discrepancy"] .stratum-inks [data-k="discrepancy"],
.strata-scene[data-ink-on="crossref"] .stratum-inks [data-k="crossref"], .strata-scene[data-ink-on="amber"] .stratum-inks [data-k="amber"] { opacity: 1; transform: scale(1.45); }
/* The reader's own evidence: one layer on top, made of slips. */
.strata--yours { flex-direction: row; flex-wrap: wrap-reverse; gap: 4px; margin-bottom: 3px; padding: .35rem; border: 1px dashed color-mix(in srgb, var(--ink-amber) 45%, transparent); background: color-mix(in srgb, var(--ink-amber) 5%, transparent); }
.strata--yours:empty { display: none; }
.js .strata--yours:not(.has-down) { border-color: transparent; background: none; }
.strata--yours { transition: border-color .6s, background-color .6s; }
.js .strata-scene .yours-label { opacity: 0; transition: opacity .6s var(--ease-ink); }
.js .strata-scene .yours-label.has-down { opacity: 1; }
.strata--yours .stratum { --sample: 0rem; display: block; min-height: 0; max-width: 100%; padding: .26rem .6rem; background: #f4ede0; border-left: 3px solid var(--ink-amber); transition: box-shadow .4s; }
.strata--yours .stratum-name { display: block; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strata--yours .stratum--more .stratum-name { font-style: italic; color: var(--fg-2); }
.strata-scene[data-ink-on="amber"] .strata--yours .stratum { box-shadow: 0 0 0 1px var(--ink-amber), 0 0 14px color-mix(in srgb, var(--ink-amber) 40%, transparent); }
.yours-empty { font-size: .95rem; color: var(--fg-2); border: 1px dashed rgba(26,24,16,.25); padding: .7rem .9rem; margin: 0 0 .6rem; }
/* Deposition: a layer arrives from above and settles. */
.js .strata-scene .stratum { opacity: 0; transform: translateY(-46px) rotate(-1.4deg) scaleY(1.06); transition: opacity .7s var(--ease-ink), transform .9s cubic-bezier(.3,1.35,.5,1), box-shadow .4s, border-color .4s; }
.js .strata-scene .stratum:nth-child(even) { transform: translateY(-46px) rotate(1.2deg) scaleY(1.06); }
.js .strata-scene .stratum.is-down { opacity: 1; transform: none; }

/* The painted desk, with the evidence marks drawn over it. */
.desk-painting { margin: .9rem 0 0; }
.desk-pz { position: relative; }
.desk-art {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; background: #e9e1cf;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 22px 46px rgba(26,24,16,.16), 0 3px 8px rgba(26,24,16,.1);
}
.desk-art picture, .desk-art img { display: block; width: 100%; height: 100%; }
.desk-art img { object-fit: cover; }
.desk-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Lighting one layer's evidence: the rest of the desk recedes into the silk's mist. */
.desk-ink .dim { fill: rgba(238, 231, 216, .66); opacity: 0; transition: opacity .7s var(--ease-ink); }
.desk-ink .dim.is-on { opacity: 1; }
.desk-ink .ink-g { opacity: 0; transition: opacity .45s var(--ease-ink); }
.desk-ink .ink-g.is-on { opacity: 1; }
.desk-ink .ink-g path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.desk-ink .ink-g.is-on path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, .9s) var(--ease-ink) var(--delay, 0s); }
html.reduce-motion .desk-ink .ink-g path, html.reduce-motion .desk-ink .ink-g { transition: none; }
@media (prefers-reduced-motion: reduce) { .desk-ink .ink-g path, .desk-ink .ink-g { transition: none; } }
.desk-ink .halo { stroke: rgba(252, 247, 236, .78); stroke-width: 11; }
.desk-ink .line { stroke-width: 4.6; }
.desk-ink .thin.halo { stroke-width: 8; } .desk-ink .thin.line { stroke-width: 3.2; }
.desk-ink .wash { stroke-opacity: .66; mix-blend-mode: multiply; }
.desk-ink [data-ink="fact"] { color: var(--ink-fact); }
.desk-ink [data-ink="discrepancy"] { color: var(--ink-discrepancy); }
.desk-ink [data-ink="crossref"] { color: var(--ink-crossref); }
.desk-ink [data-ink="amber"] { color: var(--ink-amber); }
.desk-ink .line, .desk-ink .wash { stroke: currentColor; }
.desk-hit { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); }
.dish { position: absolute; left: var(--x); top: var(--y); width: 6.6%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; }
.desk-caption { margin: .6rem 0 0; color: var(--accent); }
/* What the ink in use was for: written on the mist along the painting's lower edge (below the
   painting on narrow screens). */
.ink-now { margin: 0; font-size: .98rem; line-height: 1.42; font-style: italic; color: var(--fg-2); text-wrap: pretty; }
.ink-now b { font-style: normal; font-weight: 600; color: var(--k, var(--fg)); }
@media (min-width: 861px) {
  .ink-now { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.2rem .75rem; color: #3a3226; pointer-events: none;
    background: linear-gradient(180deg, rgba(240, 233, 219, 0), rgba(240, 233, 219, .8) 42%, rgba(240, 233, 219, .92)); }
}
/* Shorter screens: the layers pack closer and the painting narrows, so that the whole desk
   stays in view while it is pinned. */
@media (min-width: 861px) and (max-height: 900px) {
  .desk-cut { width: 100%; max-width: calc((100vh - 29rem) * 16 / 9); justify-self: center; }
  .stratum { min-height: 2.6rem; padding-block: .28rem; }
  .stratum--draft { min-height: 2.9rem; }
  .strata--yours .stratum { flex: 1 1 calc(50% - 4px); max-width: calc(50% - 2px); }
  .strata-copy .section-title { margin-bottom: .7rem; }
}
@media (max-width: 860px) {
  .desk-painting { display: flex; flex-direction: column; margin-inline: calc(-1 * var(--gutter)); }
  .desk-pz { display: contents; }
  .desk-caption { order: 1; } .ink-now { order: 2; }
  .desk-caption, .ink-now { padding-inline: var(--gutter); }
  .ink-now { min-height: 4.3em; padding-top: .35rem; }
  .stratum { --sample: 5.2rem; }
  .desk-ink .halo { stroke-width: 16; } .desk-ink .line { stroke-width: 7; }
  .desk-ink .thin.halo { stroke-width: 12; } .desk-ink .thin.line { stroke-width: 5; }
}

/* ------------------------------------------------------------------ the official version */
.official-band .section-title { margin: .8rem 0 1rem; }
.official-lede { margin-bottom: 2.4rem; }
.official { position: relative; }
.sheet {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 19rem); gap: 1.6rem clamp(2rem, 6vw, 6rem); align-items: start;
  padding: clamp(1.6rem, 4vw, 3.4rem); background: #fbfaf6; border: 1px solid rgba(144,104,0,.3); box-shadow: 0 30px 60px rgba(26,24,16,.08), inset 0 0 0 6px #fbfaf6, inset 0 0 0 7px rgba(144,104,0,.25);
}
.sheet-head { grid-column: 1 / -1; color: var(--gold-5); }
/* Ordinary wrapping: "pretty" wrapping would break between a gap and the comma after it. */
.off-line { grid-column: 1; margin: 0; font-size: var(--step-1); line-height: 1.7; color: #7a5a08; font-variation-settings: "opsz" 36; letter-spacing: .005em; text-wrap: wrap; }
/* Flush with the words around it: no padding, so a line that begins with a gap keeps its margin
   and the spaces either side of it stay ordinary spaces. */
.gap {
  display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: #5a4006; cursor: pointer; text-decoration: underline dotted rgba(160,24,0,.55); text-underline-offset: .22em;
  position: relative;
}
.gap:hover, .gap:focus-visible, .gap[aria-expanded="true"] { color: var(--ink); text-decoration-color: transparent; }
.note { grid-column: 2; align-self: center; color: var(--ink); transition: opacity .8s var(--ease-ink), filter .9s var(--ease-ink), transform .9s var(--ease-ink); }
.js .note { opacity: 0; filter: blur(5px); transform: translateX(-10px); }
.js .note.is-open { opacity: 1; filter: none; transform: none; }
.note-ink { margin: 0 0 .4rem; font-style: italic; font-size: 1.08rem; line-height: 1.4; font-variation-settings: "opsz" 18; }
.note-ink--small { font-size: .95rem; color: var(--ink-3); }
.note-gloss { margin: 0 0 .75rem; font-size: .95rem; line-height: 1.45; color: var(--ink-3); }
.note-gloss em { color: var(--ink); }
.note-src { display: block; font-size: .64rem; margin-bottom: .6rem; }
.note-ink .note-src { display: inline; margin-left: .3rem; }
.sheet-seal { position: absolute; right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2rem); width: 3.6rem; height: 3.6rem; opacity: .88; transform: rotate(-3deg); mix-blend-mode: multiply; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leaders path { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; opacity: .7; transition: stroke-dashoffset 1s var(--ease-ink); }
.official-foot { display: grid; gap: 1rem; margin-top: 2rem; max-width: 40rem; }
.official-foot .btn { justify-self: start; }
.door-lead { margin: 1.2rem 0 0; color: var(--fg-2); max-width: 34rem; }
.door-line { font-size: var(--step-2); line-height: 1.25; font-weight: 350; margin: 1rem 0 0; text-wrap: balance; }
.door-lead + .door-line { margin-top: -.3rem; }
.lie-line { color: var(--fg-2); }
.official-foot p, .strata-note, .true-note, .two-scrolls, .kept-line, .new-door figcaption, .rub figcaption { text-wrap: pretty; }
@media (max-width: 760px) {
  .sheet { grid-template-columns: 1fr; padding-bottom: 5.4rem; }
  .note { grid-column: 1; border-left: 2px solid var(--ink); padding-left: .9rem; }
  .js .note:not(.is-open) { display: none; }
  .leaders { display: none; }
}

/* ------------------------------------------------------------------ the true version */
.true-band { position: relative; padding: clamp(4rem, 12vh, 8rem) 0; background: #f2e6d6; color: var(--ink);
  background-image: radial-gradient(70% 60% at 85% 30%, rgba(200,64,26,.12), transparent 70%); }
/* The copy and its painting span both rows, so the closing line follows his four lines directly
   instead of waiting below the painting. */
.true-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; column-gap: clamp(2rem, 5vw, 5rem); row-gap: 0; align-items: start; }
.true-copy { grid-column: 1; grid-row: 1 / span 2; }
.wrote { grid-column: 2; grid-row: 1; }
@media (max-width: 860px) {
  .true-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 2rem; }
  .true-copy, .wrote { grid-column: 1; grid-row: auto; }
}
.true-copy .section-title { margin: .8rem 0 1rem; }
.true-note { color: var(--ink-4); max-width: 26rem; }
/* The inkstone on the warm stone (the mountain room's plate, framed close): the rock's warmth
   rises in it as the lines are written (filing.js sets --heat on the band). */
.true-plate {
  position: relative; margin: 1.8rem 0 0; aspect-ratio: 5 / 4; max-width: 26rem; overflow: hidden; isolation: isolate; background: #d9ccb6;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 18px 40px rgba(60,30,10,.16), 0 3px 8px rgba(60,30,10,.1);
}
.true-plate picture, .true-plate img { display: block; width: 100%; height: 100%; }
.true-plate img { object-fit: cover; object-position: 49% 62%; transform: scale(1.3); transform-origin: 49% 62%; }
.true-heat { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: var(--heat, .5);
  background: radial-gradient(58% 46% at 50% 58%, rgba(255, 128, 64, .4), rgba(255, 96, 40, .1) 62%, rgba(255, 96, 40, 0) 82%); }
.wrote { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; }
.wrote-line { --k: 1; position: relative; font-size: var(--step-2); line-height: 1.22; font-weight: 380; font-variation-settings: "opsz" 60;
  color: color-mix(in srgb, #c8401a calc((1 - var(--k)) * 100%), #1a1810); filter: blur(calc((1 - var(--k)) * 7px)); opacity: calc(.1 + var(--k) * .9); }
.wrote-line::before { content: ""; position: absolute; z-index: -1; left: -1.2rem; top: 50%; width: calc(4rem + var(--k) * 70%); height: 3.6em; transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(200,64,26,calc((1 - var(--k)) * .22 + .04)), transparent); pointer-events: none; }
.wrote-lead { display: block; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(26,24,16,.72); margin-bottom: .2rem; }
.wrote-line--last { font-size: var(--step-3); }
.two-scrolls { grid-column: 2; grid-row: 2; margin-top: 2.4rem; color: var(--ink-3); max-width: 34rem; }
@media (max-width: 860px) { .two-scrolls { grid-column: 1; grid-row: auto; margin-top: 1rem; } }

/* ------------------------------------------------------------------ the filing
   Chapter 46. Hong's desk is the painting of the case (the room's plate, as the clip's first
   frame). The scrolls can be swapped: pieces cut from the same painting are lifted over an empty
   case composed from the clip's own frames. Hong's hand then takes one in the clip filing-take,
   the same clip whichever scroll lies where. filing.js places the pieces (painting pixels). */
.filing { padding-bottom: 2rem; }
.filing-intro .section-title { margin: .8rem 0 1rem; }
.filing-intro .lede { max-width: 38rem; }
.case-stage { position: relative; margin-top: 2.2rem; padding: 0 var(--gutter); }
.take { position: relative; width: 100%; max-width: min(71rem, calc((100vh - 12.5rem) * 16 / 9)); margin: 0 auto; }
.take-view {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; background: #1c140c;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 26px 60px rgba(26,24,16,.2), 0 3px 10px rgba(26,24,16,.12);
}
.take-pz { position: absolute; inset: 0; }
/* Phones: a square window on the painting, centred on the case. */
@media (max-width: 560px) {
  .case-stage { padding: 0; }
  .take-view { aspect-ratio: 1 / 1; }
  .take-pz { inset: 0 auto 0 50%; height: 100%; aspect-ratio: 16 / 9; transform: translateX(-53.5%); }
}
.take-still, .take-plate, .take-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.take-still, .take-video { object-fit: cover; }
.take-after { opacity: 0; transition: opacity 1.2s var(--ease-ink); }
.take.is-after .take-after { opacity: 1; }
.take-video { z-index: 2; opacity: 0; transition: opacity .2s; pointer-events: none; }
.take-video.is-playing { opacity: 1; }
/* The empty case and the pieces: shown only while a scroll is moving, or while the two lie
   swapped (they then match the painting exactly, so showing or hiding them is not seen). */
.take-plate { z-index: 3; opacity: 0; pointer-events: none; }
.take-sprite { position: absolute; z-index: 4; display: block; opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
.take-sprite--j { z-index: 5; }
.take-sprite.is-over { z-index: 6; }
.take.is-moving .take-plate, .take.is-moving .take-sprite, .take.is-flipped .take-plate, .take.is-flipped .take-sprite { opacity: 1; }
.take.is-unflipping .take-plate, .take.is-unflipping .take-sprite { transition: opacity .38s var(--ease-ink); }
/* Each scroll is a control over its painted place: the one on the left, the one on the right.
   The slots are measured on the painting (1244 x 700). */
.scroll {
  --slot: 0; position: absolute; z-index: 7; left: calc(39.23% + var(--slot) * 15.03%); top: calc(53% - var(--slot) * .71%);
  width: calc(11.9% + var(--slot) * 1.52%); height: 22.3%; padding: 0; border: 0; border-radius: 14% / 12%; background: none; cursor: grab; touch-action: pan-y;
  transition: left .7s var(--ease-seal), top .7s var(--ease-seal), width .7s var(--ease-seal), box-shadow .3s;
}
/* Pointed at, the painted scroll catches a little light. */
.scroll::after { content: ""; position: absolute; inset: -10%; border-radius: 45%; background: radial-gradient(closest-side, rgba(255, 238, 196, .34), rgba(255, 238, 196, 0)); mix-blend-mode: screen; opacity: 0; transition: opacity .35s var(--ease-ink); pointer-events: none; }
.scroll:hover::after, .scroll.is-dragging::after { opacity: 1; }
.scroll:focus-visible { outline: 2px solid #fff4d6; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(26, 14, 6, .45); }
.scroll.is-dragging { cursor: grabbing; transition: none; }
.scroll.is-taken, .case-stage.is-done .scroll { visibility: hidden; }
.case-stage.is-busy .scroll { pointer-events: none; }
/* The words, over the silk at the top of the painting, as the exchange happens. */
.take-say {
  position: absolute; z-index: 8; left: 3%; top: 5%; max-width: min(33rem, 58%); margin: 0; padding: .55rem .9rem .65rem;
  color: #1c140a; font-size: clamp(1rem, .8rem + .75vw, 1.45rem); line-height: 1.3; font-variation-settings: "opsz" 30; text-wrap: pretty;
  background: radial-gradient(closest-side, rgba(247, 240, 226, .9), rgba(247, 240, 226, .72) 70%, rgba(247, 240, 226, 0));
  opacity: 0; transform: translateY(6px); transition: opacity .8s var(--ease-ink), transform .8s var(--ease-ink); pointer-events: none;
}
.take-say.is-on { opacity: 1; transform: none; }
.take-say .t-who { display: block; margin-bottom: .2rem; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(28, 20, 10, .62); }
.take-say.f-narr { font-style: italic; }
@media (max-width: 560px) { .take-say { left: 3%; top: 3%; max-width: 80%; font-size: 1rem; } }
/* Hong's receipt log, laid on the desk for the stamp. */
.receipt {
  position: absolute; z-index: 8; left: 2.6%; bottom: 5%; width: clamp(5.2rem, 12%, 8.6rem); aspect-ratio: 4 / 5; padding: .5rem .55rem;
  background: #efe8da; color: var(--ink); box-shadow: 0 14px 26px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.6) inset;
  opacity: 0; transform: translateY(24%) rotate(-5deg); transition: opacity .5s var(--ease-ink), transform .7s var(--ease-seal); pointer-events: none;
}
.receipt.is-in { opacity: 1; transform: rotate(-5deg); }
.receipt-title { display: block; font-family: var(--f-mono); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; }
.receipt-lines { position: absolute; inset: 1.6rem .55rem 2.4rem; background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(26,24,16,.28) 7px 8px); }
.receipt-seal { position: absolute; right: .45rem; bottom: .45rem; width: 44%; height: auto; opacity: 0; mix-blend-mode: multiply; transform: rotate(-6deg) scale(1.35); transition: opacity .12s, transform .26s cubic-bezier(.3,1.6,.5,1); }
.receipt-seal.is-on { opacity: .92; transform: rotate(-6deg) scale(1); }
.take.is-jolt .take-view { animation: jolt .32s cubic-bezier(.3,1.6,.5,1); }
@keyframes jolt { 30% { transform: translateY(4px); } 60% { transform: translateY(-1px); } }
.case-controls { display: none; }
.js .case-controls { display: grid; justify-items: center; gap: .55rem; margin: 1.1rem auto 0; padding: 0 var(--gutter); text-align: center; }
.shuffle-count { margin: 0; }
.case-stage.is-busy .case-controls { opacity: .35; pointer-events: none; transition: opacity .4s; }
.case-stage.is-done .case-controls { display: none; }

.filing-record { padding-top: 2rem; }
.filing-log { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 1px solid var(--rule); max-width: 44rem; display: grid; gap: .9rem; }
.filing-log li { font-size: var(--step-1); line-height: 1.4; }
.filing-log .t-who { display: block; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.filing-log .f-narr { font-size: 1rem; font-style: italic; color: var(--fg-2); }
.filing-log .f-final { font-size: var(--step-2); }
.filing-log li.is-new { animation: arrive-f 1s var(--ease-ink); }
@keyframes arrive-f { from { opacity: 0; transform: translateY(8px); } }
.kept { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); max-width: 44rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.kept-line { flex-basis: 100%; font-size: 1.05rem; }

/* ------------------------------------------------------------------ what the Court replaces */
.replaces .section-title { margin: .8rem 0 2rem; }
.replaces-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) { .replaces-grid { grid-template-columns: 1fr; } }
.new-door, .rub { margin: 0; }
/* Both are shown like the room's painted plate: the painting, then a labelled caption. */
.nd-caption, .rub-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: .9rem; font-style: italic; color: var(--fg-2); font-size: .98rem; line-height: 1.45; }
.nd-caption .label, .rub-caption .label { font-style: normal; color: var(--accent); }
/* The new door: a painting on silk, flawless and fitted. As it comes into view the last line of
   light in the seam narrows to nothing (filing.js sets --gap from 1 to 0 by scroll). */
.nd-frame {
  --gap: 0; position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 4; background: #e3c48e;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 22px 46px rgba(26,24,16,.16), 0 3px 8px rgba(26,24,16,.1);
}
.nd-frame picture, .nd-frame img { display: block; width: 100%; height: 100%; }
.nd-frame img { object-fit: cover; }
.nd-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(90,40,10,.18), inset 0 0 50px rgba(90,60,20,.12); }
/* The seam runs at 49.9% of the painting, from 27.8% to 84.9% of its height; the brass ring
   covers 46.0% to 52.1%. The light is tapered like the old gap: wider at the top. */
.nd-light { position: absolute; left: 49.88%; top: 27.8%; height: 57.05%; width: 1.9%; transform: translateX(-50%); pointer-events: none;
  opacity: calc(var(--gap) * 1.4); mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 30.9%, transparent 32.1%, transparent 42%, #000 43.2%); mask-image: linear-gradient(180deg, #000 30.9%, transparent 32.1%, transparent 42%, #000 43.2%); }
.nd-light span { position: absolute; inset: 0; clip-path: polygon(calc(50% - 50% * var(--gap)) 0, calc(50% + 50% * var(--gap)) 0, calc(50% + 19% * var(--gap)) 100%, calc(50% - 19% * var(--gap)) 100%); background: linear-gradient(180deg, #fff1c8, #ffd27a 45%, #f3a64a); }
.nd-light span + span { inset: -3% -300%; clip-path: none; background: radial-gradient(40% 50% at 50% 45%, rgba(255,196,110,.5), transparent 70%); filter: blur(6px); opacity: calc(var(--gap) * .9); }
.rub-area { position: relative; aspect-ratio: 4 / 3; background: #f4f1ea; overflow: hidden; touch-action: none; cursor: crosshair;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 46px rgba(26,24,16,.14), 0 3px 8px rgba(26,24,16,.08); }
.rub-canvas, .rub-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.rub-still { object-fit: cover; mix-blend-mode: multiply; }
.rub-hint { position: absolute; left: 0; right: 0; bottom: 2.2%; margin: 0; padding: 0 .8rem; text-align: center; font-size: .9rem; color: rgba(26,24,16,.72); text-wrap: balance; pointer-events: none; transition: opacity .6s; }
.rub.is-rubbing .rub-hint { opacity: 0; }
.rub .btn { margin-top: .8rem; }
.rub-trace { margin-top: 1.2rem; font-size: var(--step-1); line-height: 1.35; }
.js .rub-trace { opacity: 0; transform: translateY(8px); transition: opacity 1s var(--ease-ink), transform 1s var(--ease-ink); }
.js .rub.is-revealed .rub-trace { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ the final threshold */
/* The painting of the Court's outer edge at the last light. The picture is the still painting
   (no JavaScript, reduced motion before the sequence, or no WebGL); filing.js draws the same
   painting live over it: the push toward the red at the horizon, mist over the sea of cloud,
   and the five palettes leaving one by one. The dusk layer keeps the words readable. */
.threshold { --warm: 0; --cloud: 1; --gold: 1; --jade: 0; --lamp: 1; position: relative; isolation: isolate; color: #f2ecdf; background: #0b0a07; }
/* The register's dark-red focus ring hardly shows on this black: here it is gold (12:1). */
.threshold { --focus: var(--gold-1); }
.th-scene { position: relative; isolation: isolate; overflow: hidden; min-height: 92vh; min-height: 92svh; display: flex; flex-direction: column; justify-content: space-between; }
.horizon { --th-fx: .5; position: absolute; inset: 0; z-index: -1; background: #0b0a07; }
.hz-still, .hz-still img, .hz-live, .hz-lamp, .hz-dusk { position: absolute; inset: 0; width: 100%; height: 100%; }
.hz-still img { object-fit: cover; object-position: calc(var(--th-fx) * 100%) 50%; }
.hz-live { opacity: 0; transition: opacity 1.6s var(--ease-ink); }
.horizon.is-live .hz-live { opacity: 1; }
/* Without the live painting, the lamp going out is a plain darkness over the still picture. */
.hz-lamp { background: #050403; opacity: calc((1 - var(--lamp)) * .88); }
.horizon.is-live .hz-lamp { opacity: 0; }
.hz-dusk { pointer-events: none;
  background:
    linear-gradient(0deg, #0b0a07 0%, rgba(11,10,7,.9) 7%, rgba(11,10,7,.35) 22%, transparent 38%),
    linear-gradient(90deg, rgba(5,12,10,.66) 0%, rgba(5,12,10,.5) 24%, rgba(5,12,10,.14) 48%, transparent 62%),
    linear-gradient(180deg, rgba(5,12,10,.5) 0%, rgba(5,12,10,.16) 30%, transparent 46%); }
.th-over { position: relative; padding-top: clamp(2.5rem, 8vh, 5rem); padding-bottom: 1.5rem; }
.th-dock { position: relative; padding-bottom: clamp(1.4rem, 4vh, 2.4rem); }
/* While the sequence runs, Skip stays in reach even when the scene is taller than the window. */
.th-scene { overflow: clip; }
.threshold.is-running .th-dock { position: sticky; bottom: 0; padding-top: 1.2rem; }
.threshold.is-running .th-dock::before { content: ""; position: absolute; z-index: -1; inset: -1.5rem 0 0; background: linear-gradient(0deg, rgba(11,10,7,.72), rgba(11,10,7,.4) 60%, transparent); pointer-events: none; }
.threshold.is-running .th-note { display: none; }
.threshold .label { color: rgba(242,236,223,.62); }
.threshold .section-title { margin: .8rem 0 1.4rem; text-shadow: 0 2px 26px rgba(0,0,0,.5); }
.th-lines { display: grid; gap: .75rem; max-width: 42rem; }
.th-line { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 2.05rem); line-height: 1.24; font-weight: 350; text-wrap: pretty; text-shadow: 0 1px 3px rgba(0,0,0,.35), 0 2px 22px rgba(0,0,0,.75); }
.th-line--notebook { font-style: italic; }
.th-line--last { font-size: clamp(1.7rem, 1.1rem + 2.3vw, 3.2rem); }
.js .threshold.is-armed .th-line { opacity: 0; transform: translateY(10px); transition: opacity 1.8s var(--ease-ink), transform 1.8s var(--ease-ink); }
.js .threshold.is-armed .th-line.is-on { opacity: 1; transform: none; }
.th-below { padding-top: 2.4rem; padding-bottom: clamp(3rem, 8vh, 5rem); }
.th-after { margin-top: 0; }
/* Narrower windows keep the red in frame (--th-fx is shared with filing.js). Portrait screens
   hang the painting below the title, which widens the view to take in the end of the terrace
   and the cliff, and lets the red sit below the words rather than under them. */
@media (max-aspect-ratio: 5/4) { .horizon { --th-fx: .72; } }
@media (max-aspect-ratio: 3/4) {
  .horizon { --th-fx: .78; top: 23%; }
  .hz-dusk { background:
    linear-gradient(0deg, #0b0a07 0%, rgba(11,10,7,.9) 12%, rgba(11,10,7,.62) 26%, rgba(11,10,7,.2) 38%, transparent 46%),
    linear-gradient(180deg, #0b0a07 0%, rgba(8,12,10,.62) 9%, rgba(5,12,10,.4) 28%, rgba(5,12,10,.1) 50%, transparent 58%); }
}
@media (max-width: 760px) {
  .th-note { font-size: .88rem; }
  .th-line { font-size: var(--step-1); }
  .th-line--last { font-size: var(--step-2); }
}
.th-controls { margin-top: 0; }
.th-note { color: rgba(242,236,223,.78); max-width: 32rem; font-size: .98rem; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 16px rgba(0,0,0,.6); }
.threshold .btn { color: #f2ecdf; border-color: rgba(242,236,223,.45); }
.threshold .btn-seal { border-color: var(--red); color: #fff; }
.threshold .btn[aria-pressed="true"] { background: #f2ecdf; color: #0b0a07; }
.threshold.is-running .th-controls .btn:not([data-th-skip]) { display: none; }
.th-after { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 3rem; background: rgba(242,236,223,.14); border: 1px solid rgba(242,236,223,.14); max-width: 60rem; }
@media (max-width: 760px) { .th-after { grid-template-columns: 1fr; } }
.th-link { display: grid; align-content: start; gap: .3rem; padding: 1.3rem 1.2rem; text-decoration: none; background: rgba(11,10,7,.82); }
.th-link-name { font-family: var(--f-display); font-weight: 600; font-size: var(--step-2); line-height: 1; }
.th-link:hover .th-link-name { color: var(--gold-2); }

@media (prefers-reduced-motion: reduce) {
  .wrote-line { filter: none; }
}