/* The archive: Part One. The Court's white, its gold, its gapless grid; a lacquered
   taxonomy cabinet; a granite stone; the Registry of Life and Death; title and rank. */

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

.arc-head .room-title { max-width: 12ch; }
.arc-epigraph { margin-top: 2.2rem; background: rgba(255, 255, 255, .55); border-left-color: var(--gold); }
.arc-cabinet-lede { margin-top: 1.2rem; }

/* ------------------------------------------------------------------ the cabinet */
.cabinet {
  display: grid; grid-template-columns: minmax(15rem, 26.5rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: start; margin-top: 2.8rem;
}
@media (max-width: 860px) { .cabinet { grid-template-columns: 1fr; } .cabinet-frame { max-width: 26.5rem; } }

.cabinet-frame {
  position: relative; padding: 14px 14px 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 8%, rgba(0,0,0,0) 92%, rgba(0,0,0,.35)),
    linear-gradient(180deg, #4a1408, #2e0a04);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(176,128,16,.55), 0 0 0 5px #2a0904, 0 0 0 6px rgba(176,128,16,.35),
              0 40px 70px -20px rgba(40,10,0,.55), 0 12px 24px rgba(0,0,0,.18);
}
.cabinet-crest { display: flex; justify-content: center; margin: 0 0 12px; padding: 6px 0 8px; border-bottom: 1px solid rgba(232,184,56,.28); }
.cabinet-crest .label { color: #d9b460; font-size: .66rem; letter-spacing: .22em; }
/* Its own layer above the plinth: a pulled drawer comes forward over the base, never under it. */
.cabinet-body { position: relative; z-index: 1; display: grid; gap: 9px; perspective: 900px; perspective-origin: 50% -40%; }
.cabinet-plinth { height: 22px; margin: 14px -14px 0; background: linear-gradient(#240803, #120301); border-top: 1px solid rgba(232,184,56,.3); position: relative; }
.cabinet-plinth::before, .cabinet-plinth::after { content: ""; position: absolute; bottom: -10px; width: 26px; height: 10px; background: #120301; }
.cabinet-plinth::before { left: 12px; } .cabinet-plinth::after { right: 12px; }

.drawer {
  position: relative; display: block; width: 100%; height: 62px; padding: 0; margin: 0; border: 0; background: none;
  color: inherit; text-align: left; cursor: pointer; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent;
}
.drawer:focus-visible { outline: none; }
.drawer:focus-visible .drawer-front { outline: 2px solid var(--gold-1); outline-offset: 3px; }
.drawer-front {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0 14px;
  background: linear-gradient(180deg, #641e0c, #43120a 55%, #3a0f07);
  border: 1px solid rgba(232,184,56,.22); border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,210,150,.14), inset 0 -3px 8px rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.4);
  transform: translateZ(0); transition: transform .75s var(--ease-seal), box-shadow .75s var(--ease-seal), filter .4s;
}
.drawer:hover .drawer-front { filter: brightness(1.12); }
.drawer-plate {
  display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .28rem .7rem .28rem .45rem;
  background: linear-gradient(180deg, #f1d68a, #c89a2e 60%, #a67a14); color: #2a1706;
  border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.55);
}
.drawer-num { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; line-height: 1; min-width: 1.1rem; text-align: center; }
/* Every name is read whole: a long one takes a second line on its plate rather than an ellipsis. */
.drawer-name { font-size: .84rem; line-height: 1.15; text-wrap: balance; }
.drawer-pull {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid #c89a2e; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 3px rgba(0,0,0,.6);
  background: radial-gradient(circle at 50% 35%, rgba(255,230,160,.35), transparent 60%);
}
.drawer-inside {
  position: absolute; left: 3%; right: 3%; bottom: 100%; height: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #120403, #2b0a05); clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  transform: translateZ(0); transition: height .75s var(--ease-seal), transform .75s var(--ease-seal);
}
.drawer-peek {
  position: absolute; left: 16%; right: 16%; bottom: 0; height: 30px; background: #fbfaf6;
  background-image: repeating-linear-gradient(180deg, transparent 0 6px, rgba(160,24,0,.28) 6px 7px);
  box-shadow: 0 -2px 6px rgba(0,0,0,.4);
  transform: translateY(12px); transition: transform .9s .15s var(--ease-ink);
}
.drawer[aria-expanded="true"] { z-index: 3; }
.drawer[aria-expanded="true"] .drawer-front {
  transform: translateZ(58px) translateY(6px);
  box-shadow: inset 0 1px 0 rgba(255,210,150,.2), inset 0 -3px 8px rgba(0,0,0,.45), 0 22px 30px -6px rgba(20,4,0,.65);
}
.drawer[aria-expanded="true"] .drawer-inside { height: 34px; transform: translateZ(58px) translateY(6px); }
.drawer.is-locked[aria-expanded="true"] .drawer-front { transform: none; box-shadow: inset 0 1px 0 rgba(255,210,150,.14), inset 0 -3px 8px rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.4); }
.drawer.is-locked[aria-expanded="true"] .drawer-inside { height: 0; transform: none; }
.drawer[aria-expanded="true"] .drawer-peek { transform: translateY(-4px); }
.drawer.is-jolt .drawer-front { animation: jolt .5s var(--ease-ink); }
@keyframes jolt { 20% { transform: translateZ(10px) translateX(-3px); } 45% { transform: translateZ(4px) translateX(3px); } 70% { transform: translateX(-1px); } }

/* The seventh: sealed with the character for sealed, until the filing. */
.drawer--seventh .drawer-front { background: linear-gradient(180deg, #2e0c06, #1e0703); }
.drawer--seventh .drawer-plate { background: linear-gradient(180deg, #d9d2c0, #a8a090); color: #3a3428; }
.drawer-seal { position: absolute; left: 58%; top: -5px; bottom: -5px; width: 30px; }
.drawer-seal-half {
  position: absolute; inset: 0; display: grid; place-items: center; background: #b81c02;
  background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 50%);
  box-shadow: 0 1px 4px rgba(0,0,0,.5); transition: transform .9s var(--ease-seal), opacity .9s;
}
.drawer-seal-half .brush { color: #f8e8d0; font-size: 1.15rem; }
.drawer-seal-half--l { clip-path: polygon(0 0, 56% 0, 44% 28%, 60% 52%, 42% 76%, 52% 100%, 0 100%); }
.drawer-seal-half--r { clip-path: polygon(56% 0, 100% 0, 100% 100%, 52% 100%, 42% 76%, 60% 52%, 44% 28%); }
.drawer--seventh.is-unsealed .drawer-seal-half--l { transform: translate(-9px, 4px) rotate(-9deg); opacity: .85; }
.drawer--seventh.is-unsealed .drawer-seal-half--r { transform: translate(9px, -3px) rotate(7deg); opacity: .85; }
.drawer--seventh.is-unsealed .drawer-plate { background: linear-gradient(180deg, #f1d68a, #c89a2e 60%, #a67a14); color: #2a1706; }
/* Its name, once given, takes two short lines, so the torn seal beside it never covers a word. */
.drawer--seventh .drawer-name { max-width: 8rem; }

/* The index cards. */
.kind-desk { position: relative; }
.kind-hint { margin: 0 0 1rem; }
.kind-card {
  position: relative; margin: 0 0 1rem; padding: 1.5rem 1.6rem 1.5rem 1.7rem; background: #fbfaf6;
  background-image: repeating-linear-gradient(180deg, transparent 0 1.95rem, rgba(43,74,122,.16) 1.95rem calc(1.95rem + 1px));
  background-position: 0 2.6rem; border-left: 3px solid var(--red-4);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 14px 30px -12px rgba(26,24,16,.35);
}
.kind-card .said-line { margin: .7rem 0 0; max-width: 22ch; color: var(--ink); text-wrap: balance; }
.kind-card-meta { margin: 0; }
.kind-stamp {
  position: absolute; right: 1.2rem; bottom: 1rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
  border: 2px solid var(--red-4); color: var(--red-4); font-family: var(--f-display); font-weight: 700; font-size: 1.6rem;
  transform: rotate(-8deg); opacity: .8; mix-blend-mode: multiply;
}
.kind-lock-note { margin: 1rem 0 0; color: var(--ink-4); font-size: .98rem; max-width: 30rem; }
.kind-card--seventh { border-left-color: var(--ink-4); }
.kind-card--seventh .kind-open { display: none; }
.kind-card--seventh.is-unlocked .kind-open { display: block; }
.kind-card--seventh.is-unlocked .kind-locked { display: none; }
.kind-card--seventh.is-unlocked { border-left-color: var(--ink-amber); }

/* The cards share one grid cell, so the desk is always as tall as its tallest card
   (a longer definition can never spill onto the sorter) and nothing shifts between drawers. */
.js .kind-desk.is-live { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 19rem; }
/* The hint changes with each drawer; two lines are kept for it (three on phones), set at their
   foot, so the card under it never moves when it grows or shrinks. */
.js .kind-desk.is-live > .kind-hint { grid-area: 1 / 1; min-height: 2.7em; display: flex; align-items: flex-end; }
@media (max-width: 560px) { .js .kind-desk.is-live > .kind-hint { min-height: 4.05em; } }
.js .kind-desk.is-live .kind-card {
  grid-area: 2 / 1; align-self: start; position: relative; margin: 0; visibility: hidden; opacity: 0;
  transform: translate(-70px, 26px) rotate(-5deg) scale(.95); transform-origin: 0 100%;
  transition: opacity .55s var(--ease-ink), transform .9s var(--ease-ink), visibility 0s .9s;
}
.js .kind-desk.is-live .kind-card.is-active { visibility: visible; opacity: 1; transform: rotate(-.7deg); transition: opacity .55s var(--ease-ink), transform .9s var(--ease-ink); }
.js .kind-desk.is-live .kind-card.is-active .kind-stamp { animation: stamp-in .5s .45s var(--ease-ink) both; }
@keyframes stamp-in { from { transform: rotate(-8deg) scale(1.9); opacity: 0; } 70% { opacity: .95; } }
@media (max-width: 860px) { .js .kind-desk.is-live { min-height: 17rem; } }

/* ------------------------------------------------------------------ the sorter */
.sorter { margin-top: clamp(4rem, 9vw, 6.5rem); padding-top: 2.4rem; border-top: 1px solid var(--rule); }
.sorter-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .3rem 1rem; margin-bottom: 1.4rem; }
.sorter-head .label:first-child { grid-column: 1 / -1; }
.sorter-title { font-size: var(--step-2); font-weight: 350; letter-spacing: -.01em; }
.sorter-progress { margin: 0; }
.sort-items { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 1rem; }
.sort-item {
  position: relative; padding: 1.3rem 1.4rem; background: rgba(255,255,255,.6); border: 1px solid var(--rule);
  box-shadow: 0 10px 24px -16px rgba(26,24,16,.4); max-width: 46rem;
}
.sort-doc { font-size: var(--step-1); line-height: 1.4; margin: 0; }
.sort-doc, .sort-answer { text-wrap: pretty; }
.sort-answer { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px dashed var(--rule); color: var(--ink-3); }
.sort-answer .label { display: inline-block; margin-left: .4rem; }
.sort-kind {
  display: inline-grid; place-items: center; padding: .1rem .5rem; margin-right: .4rem; border: 2px solid var(--red-4); color: var(--red-4);
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-3deg);
}
.js .sorter.is-live .sort-item { display: none; }
.js .sorter.is-live .sort-item.is-current { display: block; animation: slide-doc .7s var(--ease-ink); }
.js .sorter.is-live .sort-answer { display: none; }
.js .sorter.is-live .sort-item.is-answered .sort-answer { display: block; animation: fade .6s ease; }
.js .sorter.is-live .sort-item.is-answered .sort-kind { animation: stamp-in .45s var(--ease-ink) both; }
@keyframes slide-doc { from { transform: translateX(40px) rotate(1.5deg); opacity: 0; } }
.sort-choices { flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
/* After the tally there is nothing left to file: the verdict and "Sort them again" stand alone. */
.js .sorter.is-done .sort-choices { display: none; }
.sort-choice {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .35rem .8rem .35rem .4rem; cursor: pointer;
  border: 1px solid rgba(26,24,16,.22); border-radius: 2px; background: #fbfaf6; font-size: .92rem;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease-ink);
}
.sort-choice .drawer-num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; background: linear-gradient(180deg, #f1d68a, #b08010); color: #2a1706; border-radius: 2px; font-size: 1rem; }
.sort-choice:hover { border-color: var(--ink); transform: translateY(-1px); }
.sort-choice[disabled] { cursor: default; opacity: .55; transform: none; }
.sort-choice.is-chosen { opacity: 1; border-color: var(--red-4); background: #fff; }
.sort-choice.is-right { opacity: 1; border-color: var(--gold-5); box-shadow: 0 0 0 2px rgba(176,128,16,.35); background: #fff; }
.sort-foot { align-items: center; gap: 1rem; flex-wrap: wrap; }
.sort-verdict { margin: 0; min-height: 1.5em; font-style: italic; color: var(--ink-3); }

/* ------------------------------------------------------------------ the stone */
.arc-stone { position: relative; height: 260vh; background: linear-gradient(180deg, var(--cloud) 0%, #e3e1da 100%); }
.arc-stone-sticky { position: sticky; top: 0; height: 100vh; min-height: 36rem; overflow: hidden; isolation: isolate; }
.arc-stone-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* The two columns of text keep clear of the stone between them: archive.js stands it a fifth of
   the stage wide (or more, on short screens), so neither column takes more than about a third. */
.arc-stone-copy {
  position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, min(24rem, 34vw)) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr; gap: 0 3rem; padding-top: calc(var(--masthead-h) + 1.6rem); padding-bottom: 2rem;
}
.arc-stone-copy > .label, .arc-stone-copy > .section-title { grid-column: 1; }
.arc-stone-copy .section-title { margin: .6rem 0 1.4rem; }
.reg-card {
  grid-column: 1; align-self: start; position: relative; padding: 1rem 1.1rem 1.1rem; background: rgba(251,250,246,.92);
  border: 1px solid rgba(26,24,16,.2); box-shadow: 0 16px 30px -18px rgba(26,24,16,.5);
  background-image: linear-gradient(to right, rgba(26,24,16,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(26,24,16,.05) 1px, transparent 1px);
  background-size: 14px 14px;
}
.reg-card-head { margin: 0 0 .7rem; color: var(--gold-5); }
.reg-fields { margin: 0; display: grid; gap: .45rem; }
.reg-fields div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .6rem; align-items: baseline; border-bottom: 1px solid rgba(26,24,16,.08); padding-bottom: .35rem; }
.reg-fields dt { font-size: .66rem; }
.reg-fields dd { margin: 0; font-size: .98rem; line-height: 1.3; }
.reg-stamp {
  position: absolute; right: .8rem; bottom: -1.1rem; padding: .3rem .6rem; border: 2px solid var(--red-4); color: var(--red-4);
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; background: rgba(251,250,246,.9);
  transform: rotate(-7deg) scale(1.8); opacity: 0; transition: transform .45s var(--ease-ink), opacity .3s;
}
.reg-stamp.is-stamped { transform: rotate(-7deg) scale(1); opacity: .92; }
.stone-lines { grid-column: 2; grid-row: 1 / span 3; align-self: start; justify-self: end; max-width: min(25rem, 34vw); display: grid; gap: 1rem; padding: 1rem 1.2rem 1.1rem;
  background: rgba(240,238,232,.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 14px 34px -22px rgba(26,24,16,.45); }
.stone-line { margin: 0; font-size: 1.12rem; line-height: 1.45; color: var(--ink-2); opacity: .08; transform: translateY(10px); transition: opacity .8s var(--ease-ink), transform .8s var(--ease-ink); text-shadow: 0 0 18px rgba(240,238,232,.9); }
.stone-line.is-on { opacity: 1; transform: none; }
.stone-line--gold.is-on { color: var(--gold-6); }
.no-js .stone-line { opacity: 1; transform: none; }
/* Without JavaScript: the stone as the clip leaves it, opened (a <noscript> still), where the
   script would paint the summit: bottom-aligned, 78% of the stage high (low and wide on narrow
   screens), its top and sides fading into its own sky. */
.no-js .arc-stone-sticky { background: #ecd7bd; }
.arc-stone-still { position: absolute; z-index: 0; left: 50%; bottom: 0; height: 78%; aspect-ratio: 16 / 9; transform: translateX(-50%); }
.arc-stone-still img { display: block; width: 100%; height: 100%; }
.arc-stone-still::before, .arc-stone-still::after { content: ""; position: absolute; inset: 0; }
.arc-stone-still::before { background: linear-gradient(180deg, #ecd7bd, rgba(236, 215, 189, 0) 30%); }
.arc-stone-still::after { background: linear-gradient(90deg, #ecd7bd, rgba(236, 215, 189, 0) 12%, rgba(236, 215, 189, 0) 88%, #ecd7bd); }
@media (max-width: 860px) {
  .arc-stone-still { height: auto; width: 230%; bottom: -12.9vw; }
  .arc-stone-still::after { display: none; }
}
@media (min-width: 861px) and (max-width: 1180px) { .reg-fields div { grid-template-columns: 7.2rem 1fr; } .stone-line { font-size: 1.04rem; } }
@media (max-width: 860px) {
  .arc-stone { height: 240vh; }
  .arc-stone-copy { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; }
  .stone-lines { grid-column: 1; grid-row: auto; justify-self: start; max-width: 25rem; padding-top: 1.8rem; gap: .6rem; }
  .stone-line { font-size: 1rem; }
  .reg-fields div { grid-template-columns: 7rem 1fr; }
}
@media (max-height: 700px) and (max-width: 860px) { .reg-card { display: none; } }

/* ------------------------------------------------------------------ the name */
.arc-name-grid { align-items: center; }
/* The three characters are one picture; the text alternative is a visually hidden span. They
   are sized to their own column (a third of it each, at most), so they never run off the page. */
.name-glyphs { margin: 0; display: flex; justify-content: center; gap: .02em; font-size: clamp(5.5rem, 3rem + 13vw, 13rem); color: var(--ink); text-shadow: 0 0 1px rgba(26,24,16,.5); container-type: inline-size; }
.name-glyph { display: inline-block; font-size: min(clamp(5.5rem, 3rem + 13vw, 13rem), 33cqi); }
.js .name-glyph { clip-path: inset(0 0 100% 0); filter: blur(10px); opacity: .15; transform: translateY(-4px); transition: clip-path 1.5s var(--ease-ink), filter 1.8s var(--ease-ink), opacity 1.2s, transform 1.5s var(--ease-ink); }
.js .name-glyph:nth-child(2) { transition-delay: .45s; }
.js .name-glyph:nth-child(3) { transition-delay: .9s; }
.js .name-glyphs.is-in .name-glyph { clip-path: inset(0); filter: none; opacity: 1; transform: none; }
@media print { .js .name-glyph { clip-path: none; filter: none; opacity: 1; transform: none; } }
.arc-name .section-title { margin: .8rem 0 1.2rem; max-width: 14ch; }
.arc-name .slip { margin-top: 1.6rem; background: rgba(255,255,255,.55); }

/* ------------------------------------------------------------------ the registry */
.arc-registry { background: #e6e2d6; }
.arc-registry .split { align-items: center; }
.registry-copy .section-title { margin: .8rem 0 1.2rem; max-width: 12ch; }
.registry-copy .btn-row { margin: 1.6rem 0 0; }
.registry-hint { color: var(--ink-5); transition: opacity .6s; }
.arc-registry.is-struck .registry-hint { opacity: 0; }   /* nothing left to drag across */
.registry-after { margin-top: 1.8rem; }
.registry-after .said-line { margin-bottom: .6rem; }
.js .registry-after { opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease-ink), transform .9s var(--ease-ink); }
.js .arc-registry.is-struck .registry-after { opacity: 1; transform: none; }
/* Each entry is ruled under its own line, so an entry that wraps (narrower screens) keeps its
   ruling, and the strike through it can follow each of its lines. */
.ledger {
  position: relative; padding: 1.2rem 1.4rem 1.4rem; background: #efe6cf; color: #2a2014;
  background-image: linear-gradient(90deg, transparent 2.2rem, rgba(160,24,0,.35) 2.2rem, rgba(160,24,0,.35) calc(2.2rem + 1px), transparent calc(2.2rem + 1px));
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 30px 50px -24px rgba(40,24,6,.55); transform: rotate(.6deg);
}
.ledger-head { display: flex; justify-content: space-between; gap: .3rem 1rem; margin: 0 0 .6rem; }
.ledger-head .label { color: #7a5a2a; font-size: .68rem; }
.ledger-head .label:last-child { flex: none; white-space: nowrap; }
.ledger-row { position: relative; display: block; margin: 0; padding: .62rem 0 .62rem 2.8rem; font-size: 1.05rem; line-height: 1.3; border-bottom: 1px solid rgba(90,60,20,.18); }
.ledger-row--key { font-weight: 560; font-size: 1.12rem; border-top: 1px solid rgba(90,60,20,.18); cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.ledger-row--key::before { content: "\2192"; position: absolute; left: .8rem; color: var(--red-4); opacity: .8; }
.ledger-row--monkey { color: #5a4a30; font-style: italic; }
.ledger-ink { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ledger-ink path { fill: #15110a; }
.ledger-foot { margin: .8rem 0 0; color: #6f5226; }
.ledger-row--key.is-hinting { animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 50% { background: rgba(160,24,0,.07); } }

.complaints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); margin-top: clamp(3rem, 7vw, 5rem); }
@media (max-width: 760px) { .complaints { grid-template-columns: 1fr; } }
.complaint {
  position: relative; padding: 1.4rem 1.5rem 1.6rem; background: #fbfaf6; border-top: 3px solid var(--gold);
  box-shadow: 0 20px 40px -24px rgba(26,24,16,.55);
}
.complaint--second { border-top-color: var(--ink); }
.complaint-meta { margin: 0 0 .5rem; padding-right: 5.2rem; }   /* clear of the Received stamp */
.complaint-from { font-size: var(--step-1); margin: 0 0 1rem; font-weight: 450; }
.complaint-registry { font-size: .98rem; color: var(--ink-3); }
.complaint-registry .label { display: block; margin-bottom: .2rem; }
.complaint-body { font-size: 1.05rem; }
.complaint-note { margin: 0; color: var(--ink-3); font-style: italic; }
.complaint-seal {
  position: absolute; top: 1rem; right: 1rem; padding: .25rem .5rem; border: 2px solid var(--red-4); color: var(--red-4);
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; transform: rotate(8deg); opacity: .85;
}
.js .complaints:not(.is-open) { display: none; }
.js .complaint { opacity: 0; transform: translateY(-40px) rotate(4deg) scale(1.06); }
.js .complaint.is-filed { animation: file-in .7s var(--ease-seal) both; }
.js .complaint.is-filed .complaint-seal { animation: seal-in .45s .55s var(--ease-ink) both; }
@keyframes file-in { from { opacity: 0; transform: translateY(-40px) rotate(4deg) scale(1.06); } 70% { opacity: 1; transform: translateY(3px) rotate(-.4deg) scale(.995); } to { opacity: 1; transform: rotate(-.4deg); } }
@keyframes seal-in { from { transform: rotate(8deg) scale(2); opacity: 0; } to { transform: rotate(8deg) scale(1); opacity: .85; } }

/* ------------------------------------------------------------------ title and rank */
.arc-title .section-title { margin: .8rem 0 1.2rem; max-width: 16ch; }
.rank-ledger {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, 12rem) minmax(0, 1fr); align-items: stretch;
  margin: 2.6rem 0 2rem; border: 1px solid rgba(26,24,16,.2); background: rgba(251,250,246,.8);
}
/* Both values sit on the columns' common foot, so "Great Sage Equal to Heaven" and the rank read
   across as the two entries on one line, at every width. */
.rank-col { display: flex; flex-direction: column; padding: 1.3rem 1.4rem 1.5rem; }
.rank-col .label { margin: 0 0 .8rem; }
.rank-brush { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); color: var(--gold-5); margin: 0 0 .4rem; letter-spacing: .04em; }
.rank-val { margin: auto 0 0; font-size: var(--step-1); line-height: 1.3; }
.rank-val--rank { font-family: var(--f-mono); font-size: 1rem; letter-spacing: .02em; color: var(--ink-3); padding-bottom: .2rem; }
.rank-gap { position: relative; display: grid; place-items: center; border-left: 1px dashed rgba(26,24,16,.25); border-right: 1px dashed rgba(26,24,16,.25); }
.rank-thread { width: 100%; height: 40px; overflow: visible; }
.rank-thread path { fill: none; stroke: var(--ink-crossref); stroke-width: 2; stroke-linecap: round; opacity: 0; stroke-dasharray: 220; stroke-dashoffset: 220; vector-effect: non-scaling-stroke; }
.rank-gap-label { position: absolute; bottom: .7rem; left: 0; right: 0; text-align: center; font-size: .6rem; color: var(--ink-crossref); }
@media (max-width: 700px) {
  .rank-ledger { grid-template-columns: 1fr; }
  .rank-gap { min-height: 4rem; border: 0; border-top: 1px dashed rgba(26,24,16,.25); border-bottom: 1px dashed rgba(26,24,16,.25); }
}
.rank-slip { background: rgba(255,255,255,.55); }

.gate { margin-top: clamp(3rem, 7vw, 4.5rem); }
.gate-rule { max-width: 34rem; font-size: var(--step-1); line-height: 1.4; }
.gate-track { position: relative; height: 10rem; margin: 1.8rem 0 1.4rem; }
.gate-rail { position: absolute; left: 0; right: 0; top: 62%; height: 2px; background: linear-gradient(90deg, rgba(26,24,16,.12), rgba(176,128,16,.6)); }
.gate-station { position: absolute; top: 18%; bottom: 20%; width: 2px; background: linear-gradient(var(--gold), var(--gold-6)); }
.gate-station .label { position: absolute; bottom: calc(100% + .4rem); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .62rem; }
.gate-station[data-station="0"] { left: 16%; } .gate-station[data-station="1"] { left: 34%; }
.gate-station[data-station="2"] { left: 52%; } .gate-station[data-station="3"] { left: 70%; }
.gate-station.is-refusing { background: var(--red-2); box-shadow: 0 0 14px rgba(224,48,16,.7); }
.gate-station.is-refusing .label { color: var(--red-4); }
.gate-hall { position: absolute; right: 0; top: 10%; bottom: 20%; width: 15%; min-width: 4.4rem; border: 1px solid rgba(176,128,16,.55); border-top: 0; background: rgba(212,160,32,.08); }
.gate-hall::before { content: ""; position: absolute; left: -12%; right: -12%; top: -14px; height: 16px; background: var(--gold-5); clip-path: polygon(8% 100%, 0 30%, 50% 0, 100% 30%, 92% 100%); }
.gate-hall .label { position: absolute; left: 0; right: 0; bottom: .5rem; text-align: center; font-size: .56rem; padding: 0 .2rem; color: var(--gold-6); }
.gate-card {
  position: absolute; left: 0; top: calc(62% - 2.4rem); width: 4.8rem; padding: .35rem .4rem; background: #fbfaf6; border: 1px solid rgba(26,24,16,.25);
  box-shadow: 0 6px 12px -6px rgba(0,0,0,.35); font-family: var(--f-mono); font-size: .54rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35;
  color: var(--ink-4); will-change: transform;
}
.gate-card--his { width: 6.6rem; border-color: var(--red-4); color: var(--ink); background: #fff; top: calc(62% - 3rem); }
.gate-card--his b { display: block; color: var(--gold-5); font-weight: 500; }
/* Phones: the four stations move right, so his card has room to stop short of Rank on screen
   (archive.js reads where Rank stands), and the hall's name goes under the hall, clear of the rail. */
@media (max-width: 560px) {
  .gate-station .label { font-size: .5rem; letter-spacing: .03em; }
  .gate-station[data-station="0"] { left: 29%; } .gate-station[data-station="1"] { left: 44%; }
  .gate-station[data-station="2"] { left: 59%; } .gate-station[data-station="3"] { left: 74%; }
  .gate-hall .label { bottom: auto; top: calc(100% + .4rem); left: auto; right: 0; padding: 0; white-space: nowrap; text-align: right; }
  .gate-card { width: 3.8rem; font-size: .48rem; } .gate-card--his { width: 5.2rem; }
}
.js .gate-result:not(.is-shown) { display: none; }
.js .gate-result.is-shown { animation: slide-doc .9s var(--ease-ink); }
.gate-result { margin-top: 1.4rem; background: rgba(255,255,255,.55); border-left-color: var(--red-4); }

.arc-title + .wrap .next-room { margin-top: 2rem; }

/* Local workaround: base .room-head padding overrides .wrap's side gutter. */
.arc-head { padding-left: var(--gutter); padding-right: var(--gutter); }

.arc-registry .btn-seal[disabled], .gate .btn-seal[disabled] { opacity: 1; background: transparent; color: var(--ink-4); border-color: rgba(26,24,16,.25); }

@media (max-width: 860px) {
  .js .stone-line { display: none; }
  .js .stone-line.is-latest { display: block; }
  .stone-lines { background: rgba(240,238,232,.9); padding: .8rem 1rem; margin-top: 1.4rem; box-shadow: 0 10px 30px -18px rgba(26,24,16,.5); }
  .js .stone-lines:not(.has-line) { visibility: hidden; }
  .reg-card { padding: .7rem .8rem; }
  .reg-fields { gap: .2rem; }
  .reg-fields dd { font-size: .9rem; }
  .arc-stone-copy .section-title { margin-bottom: .9rem; }
}