/* ==========================================================================
   NEGUSTOLONOW — site/css/world.css — archive.html only
   Loaded after negusto.css. Page classes are prefixed .index-. Shared classes are
   never restyled globally: overrides are scoped under body[data-page="index"].
   Tokens only; no new colour values. No motion is added by this file.

   Contents: 0 gate, the rooms row · 1 premise · 2 Ossel, strip, slip, margin terms ·
   3 calendar · 4 holdings (gaps, inspection and its lede, objects, the state line) ·
   5 the misfiled jacket · 6 room 07 · 7 notices · 8 dress, the wedge ·
   10 classes, persons · 11 the exits
   ========================================================================== */

/* inline accession references inside running text keep the text's size */
.index-ref { font-size: 0.86em; }
.caption .index-ref, .index-inspect .index-ref { font-size: inherit; }

/* rooms on this page sit a little closer together than the shared default */
body[data-page="index"] { --index-pad: clamp(4.5rem, 8vw, 7rem); }
body[data-page="index"] main > .room { padding-block: var(--index-pad); }
body[data-page="index"] main > .room--tight { padding-block: var(--s-7); }
body[data-page="index"] main > .room--flush-top { padding-top: 0; }
body[data-page="index"] main > .room--flush-bottom { padding-bottom: 0; }
body[data-page="index"] .room__head { margin-bottom: var(--s-6); }

/* 0. THE GATE --------------------------------------------------------------- */
.index-gate { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: var(--s-7); min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
body[data-page="index"] main > .index-gate { padding-top: var(--s-5); }
.index-gate__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-3) var(--s-6); }
.index-gate__code { text-transform: uppercase; }
.index-gate__mid { display: grid; align-content: center; gap: var(--s-6); }
.index-gate__line { max-width: 24rem; }
.index-gate__expected { display: flex; align-items: center; gap: var(--s-3); }
.index-gate__expected .lamp { --lamp: 1.1rem; flex: none; }
/* whatever the lamp says, it says it in a typed hand, lower case */
body[data-page="index"] .index-gate__micro, body[data-page="index"] .index-gate__micro > * { padding-block: 0; max-width: 22rem; font-family: var(--f-mono); font-weight: 400; font-size: var(--t-small); letter-spacing: 0; line-height: 1.5; text-transform: none; color: var(--ink-soft); }
/* The country itself, folded. It used to stand open at the door, a hundred and
   fifty words before anything had been seen. It is the same two paragraphs. */
.index-gate__fold { max-width: 44rem; margin-top: 0; }
.index-gate__hero { max-width: 40rem; display: grid; gap: 0.8em; padding-block: var(--s-4) var(--s-5); }
.index-gate__hero p { font-size: 1.02rem; }
/* The way in is the shared door (negusto.css §13b): one ruled line of type that
   leaves. It was the site's one filled button, and it was the only control on
   the page set larger than the words it stood under. */
.index-gate__enter { margin: 0; }
body[data-page="index"] .index-gate__enter a:hover, body[data-page="index"] .index-gate__enter a:focus-visible { color: var(--accent); }

/* The rooms, along the foot of the first screen: the archive's own numbers and
   what is in each room. It wraps; it never scrolls, and it never says how many. */
.index-gate__rooms { padding-top: var(--s-4); padding-bottom: var(--s-5); border-top: var(--rule-hair) solid var(--hair); }
body[data-page="index"] .index-gate__rooms { margin-top: 0; }
@media (max-width: 47.99rem) { .index-gate__rooms { padding-bottom: var(--s-4); } }
/* TYPE RULE (stated in full in css/house.css). Display scale carries a name or a
   number out of the world, never a slogan. The house name used to sit here at 34rem
   and said nothing; the title of the world took its place, at a third of the size,
   and is still the largest thing on the page. */
.index-gate__name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(3.2rem, 11vw, 11rem); line-height: 0.84; letter-spacing: -0.015em; margin-left: -0.02em; text-wrap: balance; }
@media (min-width: 48rem) {
  .index-gate__mid > * { margin-left: 38%; }
}

/* 1. THE PREMISE ------------------------------------------------------------ */
.index-premise__title { margin-left: -0.03em; max-width: 9.5em; }
.index-premise__body .lede { max-width: none; }
.index-premise__assembly { padding-top: var(--s-3); border-top: var(--rule-hair) solid var(--line); }
@media (min-width: 48rem) { .index-premise__assembly { margin-top: var(--s-6); } }

/* 2. OSSEL: FOUR SHORT BLOCKS, THE STRIP, THE PAPERS ------------------------------ */
.index-world__block { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); }
.index-world__block .prose { max-width: var(--measure); }
.index-strip { margin-top: var(--s-7); }
.index-strip .strip { background: var(--board); }
.index-world__papers { margin-top: var(--s-7); }
.index-slip { padding-block: var(--s-4); }

/* a few terms, pencilled beside the papers */
.index-gloss dl { display: grid; gap: var(--s-3); }
.index-gloss dt { font-family: var(--f-display); font-style: normal; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; line-height: 1.1; text-transform: uppercase; color: var(--ink-soft); }
.index-gloss dd { margin-top: 0.15rem; }
@media (max-width: 47.99rem) { .index-gloss { max-width: 26rem; padding-left: var(--s-4); border-left: var(--rule-hair) solid var(--hair); transform: none; } }

.index-strip__out { padding-top: var(--s-2); font-family: var(--f-mono); font-size: 0.8rem; }

/* 2b. NEXT DOOR ---------------------------------------------------------------- */
.index-next__lede { max-width: 44rem; }
.index-next__grid { margin-top: var(--s-7); }
.index-next__block { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); }
.index-next__h { color: var(--ink-soft); }
.index-next__plates { margin-top: var(--s-8); align-items: end; }
.index-next__aside { display: grid; gap: var(--s-4); align-content: end; }
.index-next__out { font-family: var(--f-mono); font-size: 0.8rem; }
.index-next__blank { margin-top: var(--s-8); max-width: 42rem; display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: var(--rule-heavy) solid var(--line); }

/* A plate that has not been made yet. The mount is real and measured; the sheet is not
   in it. Same component as the one in css/next-door.css; keep the two in step. */
.plate-pending__frame { position: relative; aspect-ratio: var(--plate-ratio, 4 / 5); background: var(--board); border: var(--rule-hair) solid var(--hair); }
.plate-pending__frame::before { content: ""; position: absolute; inset: 7%; border: var(--rule-hair) dashed var(--ink-faint); }
.plate-pending__mark { position: absolute; left: 7%; bottom: 7%; transform: translateY(1.6em); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-faint); }
.plate-pending .caption__text { color: var(--ink-soft); }

/* 8b. IN THEIR OWN HANDS: six sources, each set as the kind of paper it is ------- */
.index-voices__lede { max-width: 40rem; margin-bottom: var(--s-7); }
.source { max-width: 46rem; margin-bottom: var(--s-8); }
.source:last-child { margin-bottom: 0; }
.source__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.source__h { font-family: var(--f-display); font-weight: 800; font-size: var(--t-title); text-transform: uppercase; line-height: 1; }
.source__cite { max-width: 34rem; font-size: var(--t-small); font-style: italic; color: var(--ink-soft); line-height: 1.5; }
.source__body { display: grid; gap: var(--s-3); }

/* the docket: typed, narrow, ruled top and bottom, and the last word alone */
.source--docket .source__body { padding: var(--s-5); background: var(--salt); border-top: var(--rule-heavy) solid var(--ink); border-bottom: var(--rule) solid var(--ink); max-width: 30rem; font-family: var(--f-mono); font-size: 0.82rem; line-height: 1.6; gap: 0.35rem; }
.source--docket .source__line:last-child { padding-top: var(--s-4); letter-spacing: 0.3em; }

/* the transcript: a hanging indent, so the speakers line up down the left */
.source--transcript .source__line { padding-left: 5.5rem; text-indent: -5.5rem; font-size: 0.95rem; line-height: 1.55; }
.source--transcript .source__line b { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; color: var(--ink-soft); }
@media (max-width: 40rem) { .source--transcript .source__line { padding-left: 0; text-indent: 0; } .source--transcript .source__line b { display: block; } }

/* the complaint form: ruled boxes, the printed question above the written answer */
.source__form { display: grid; gap: 0; border-top: var(--rule) solid var(--ink); }
.source__field { display: grid; gap: 0.4rem; padding: var(--s-4) 0 var(--s-5); border-bottom: var(--rule-hair) solid var(--hair); }
.source__field dt { font-family: var(--f-display); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.source__field dd { font-family: var(--f-serif); font-size: 1.02rem; line-height: 1.5; }
.source__field--desk dd { font-family: var(--f-mono); font-size: 0.82rem; line-height: 1.6; color: var(--mimeo); }

/* the walls: the kilometre in numerals, the words in capitals, the second hand answering */
.source__walls { display: grid; gap: var(--s-5); }
.source__wall { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--s-4); row-gap: 0.25rem; align-items: baseline; }
.source__wall-km { grid-row: 1 / span 2; font-family: var(--f-display); font-weight: 800; font-size: var(--t-title); line-height: 1; }
.source__wall-where { font-size: var(--t-small); color: var(--ink-faint); }
.source__wall-text { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 4vw, 2.4rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.source__wall-text--second { grid-column: 2; padding-left: 2.5em; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 34rem) { .source__wall { grid-template-columns: minmax(0, 1fr); } .source__wall-km { grid-row: auto; } }

/* the acquisition card: buff, typed, damage first */
.source--card .source__body { padding: var(--s-5); background: var(--buff); max-width: 34rem; font-size: 0.95rem; line-height: 1.55; }
.source--card .source__line:first-child { padding-bottom: var(--s-3); border-bottom: var(--rule-hair) solid var(--hair); }

/* the letter: a hand, ranged short, the signature turned out */
.source--letter .source__body { max-width: 30rem; font-style: italic; font-size: 1.02rem; line-height: 1.6; gap: var(--s-4); }
.source--letter .source__line:last-child { font-style: normal; font-family: var(--f-display); font-weight: 700; font-size: var(--t-title); text-transform: uppercase; }

@media (min-width: 62rem) {
  /* the six sit in two ragged columns, the way they sit in the drawer */
  .index-voices .source:nth-child(even) { margin-left: auto; margin-right: 0; }
  .index-voices .source--walls, .index-voices .source--transcript { margin-left: 8%; }
}

/* 3. THE CALENDAR ------------------------------------------------------------- */
.index-cites { display: inline-block; margin-left: 0.4em; }
.index-closed { margin-top: var(--s-8); }
.index-closed__text { padding-left: var(--gutter); margin-bottom: -0.12em; }

/* 4. HOLDINGS ----------------------------------------------------------------- */
/* a gap in the numbering: left visible */
.index-gap { display: grid; gap: 0.35rem; align-self: center; padding-top: var(--s-3); border-top: 1px dotted var(--ink-faint); font-family: var(--f-mono); font-size: 0.78rem; line-height: 1.4; color: var(--ink-faint); }
.index-gap .accession { white-space: normal; }
/* wide screens: world.js hands each piece its starting column */
@media (min-width: 68rem) {
  body[data-page="index"] .index-pack > * { grid-column-start: var(--start, auto); }
  body[data-page="index"] .index-pack > .drop-1 { margin-top: var(--s-7); }
}
body[data-page="index"] .index-pack { row-gap: var(--s-7); }
/* between the phone and the desk, three-column plates are too small: everything sits two to a row */
@media (min-width: 48rem) and (max-width: 67.99rem) {
  body[data-page="index"] .index-pack > * { grid-column: auto / span 6; margin-top: 0; }
  body[data-page="index"] .index-pack > .index-gap { grid-column: auto / span 3; }
}

/* the phone: upright plates and drawings sit two to a row; wide plates keep the full width */
@media (max-width: 47.99rem) {
  body[data-page="index"] .index-pack { row-gap: var(--s-6); }
  body[data-page="index"] .index-pack > .plate.span-3, body[data-page="index"] .index-pack > .plate.span-2 { grid-column: span 6; }
  body[data-page="index"] .index-pack > .plate.span-3 .caption__title, body[data-page="index"] .index-pack > .plate.span-2 .caption__title { font-size: 1.1rem; }
}

/* the inspection. Native details: opens by keyboard, reads without script styling.
   The lede is the note's own first sentence, beside the verb, so a shut plate
   still says what its label says. The dotted rule is on the verb alone; the
   sentence is read, not pressed. */
.index-inspect { margin-top: var(--s-2); }
.index-inspect__summary { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; column-gap: var(--s-4); row-gap: 0.2rem; padding-block: 0.4rem 0.3rem; cursor: pointer; list-style: none; font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-soft); }
.index-inspect__summary::-webkit-details-marker { display: none; }
.index-inspect__summary::marker { content: ""; }
.index-inspect__verb { justify-self: start; border-bottom: 1px dotted var(--ink-faint); padding-bottom: 0.12em; white-space: nowrap; }
.index-inspect__verb::before { content: "+"; display: inline-block; width: 0.7em; }
.index-inspect[open] > .index-inspect__summary .index-inspect__verb::before { content: "\2212"; }
.index-inspect__summary:hover .index-inspect__verb, .index-inspect__summary:focus-visible .index-inspect__verb { color: var(--accent); border-bottom-color: var(--accent); }
.index-inspect__summary .fold__lede { grid-column: 2; grid-row: 1; margin-top: 0; max-width: 34rem; font-size: 0.95rem; }
@media (max-width: 47.99rem) {
  .index-inspect__summary { grid-template-columns: minmax(0, 1fr); }
  .index-inspect__summary .fold__lede { grid-column: 1; grid-row: 2; }
}
.index-inspect__body { display: grid; gap: var(--s-3); padding-top: var(--s-3); }
.index-inspect__note { color: var(--ink-soft); }
.index-inspect__spec > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; padding-block: 0.5rem 0.55rem; }
.index-inspect__spec dd { font-size: 0.8125rem; line-height: 1.5; }

/* where a holding is also an object */
.index-acq { display: grid; gap: var(--s-3); justify-items: start; padding-top: var(--s-3); }
.index-acq__stamp { padding-left: 0.2rem; }

/* what the house has done to it, and the way to its record. One typed line on the
   plate: past tense, no price, and never a word about buying. */
.index-state { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.02em; line-height: 1.5; color: var(--ink-soft); }
.index-state a { color: inherit; text-decoration: none; border-bottom: var(--rule-hair) solid var(--hair); white-space: nowrap; }
.index-state a:hover, .index-state a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }

/* the returns ledger: the written leaves, then the empty ones beside them */
.index-ledger { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); }
.index-ledger > .plate__frame { grid-column: 1; grid-row: 1; }
.index-ledger > .index-leaves { grid-column: 2; grid-row: 1; min-height: 0; }
.index-ledger > .caption { grid-column: 1; }

/* 5. THE MISFILED JACKET ------------------------------------------------------- */
/* Class GA, found in a drawer of class DO. The plate hangs a little way out of the room. */
.index-misfiled__note { transform: rotate(-1.4deg); transform-origin: left top; font-size: 1rem; }
@media (min-width: 68rem) {
  body[data-page="index"] .index-misfiled { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--gutter); align-items: start; align-self: end; position: relative; z-index: 2; top: calc(var(--index-pad) + var(--s-7)); margin-top: 0; }
  .index-misfiled > .plate__frame { grid-column: 2; grid-row: 1; }
  .index-misfiled > .caption { grid-column: 1; grid-row: 1; margin-top: 0; }
  /* when the label is opened the plate is put back in its drawer, so nothing in the next room is covered */
  body[data-page="index"] .index-misfiled.is-open { top: 0; }
}

/* 6. ROOM 07 ------------------------------------------------------------------- */
.index-withdrawn__label { display: grid; justify-items: end; padding-block: 22vh var(--s-5); }

/* 7. NOTICES --------------------------------------------------------------------- */
/* the headlines, set in type, hard against the top edge and cut by the right one */
.index-wall { padding: 0 0 var(--s-8) var(--gutter); }
.index-wall__list { display: grid; gap: 0.06em; }
.index-wall__line a { display: inline-block; text-decoration: none; color: var(--ink); }
.index-wall__line a:hover, .index-wall__line a:focus-visible { color: var(--accent); }
.index-wall__line:first-child a { margin-top: -0.04em; }
.index-wall__line--in { padding-left: 16vw; }
/* A001-PO-104, applied over A001-PO-102 by hand, at four degrees. */
.index-wall__line--over { margin-top: -0.8em; padding-left: 19vw; transform: rotate(4deg); transform-origin: left center; mix-blend-mode: multiply; pointer-events: none; }
.index-wall__line--over a { color: var(--mimeo); pointer-events: auto; opacity: 0.92; }
.index-wall__line--over a:hover, .index-wall__line--over a:focus-visible { color: var(--mimeo); text-decoration: underline; text-decoration-thickness: 0.05em; }
@media (max-width: 47.99rem) {
  .index-wall { padding-right: var(--gutter); }
  .index-wall__line a.bleed-right { white-space: normal; text-wrap: balance; }
  .index-wall__line--in { padding-left: 8vw; }
  .index-wall__line--over { margin-top: -0.74em; padding-left: 10vw; }
}

/* 8. DRESS, AND THE WEDGE -------------------------------------------------------- */
.index-law, .index-insignia { margin-top: var(--s-6); }
body[data-page="index"] .swatches { align-items: start; }
/* the one room with colour: a coat open by a few degrees. The slope is the top edge of the lining. */
.index-wedge { margin-top: var(--s-8); clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%); }
body[data-page="index"] main > .index-wedge { padding-top: calc(var(--s-7) + 5vw); }
.index-wedge .prose { align-self: end; }

/* 10. THE CLASSES --------------------------------------------------------------------- */
body[data-page="index"] .index-classes .index__row { grid-template-columns: 6.5rem minmax(0, 1fr) 2rem; }
@media (min-width: 56rem) { body[data-page="index"] .index-classes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); border-top: 0; } body[data-page="index"] .index-classes .index__row { border-top: var(--rule-hair) solid var(--hair); border-bottom: 0; } }
body[data-page="index"] .index-classes .index__meta { text-align: right; }

/* persons and bodies: seven entries, three to a row, so the names are set smaller than the shared default */
body[data-page="index"] .dossier__name { font-size: var(--t-title); line-height: 0.95; }

/* 11. THREE WORDS, THE EXITS ------------------------------------------------------------- */
/* The three house layers (ART / OBJECTS / NOW) were set here at display scale.
   They were three abstract nouns, which the type rule forbids, and js/world.js
   no longer builds them, so their rules have gone with them. */


@media print {
  .index-gate { min-height: 0; }
  .index-wedge { clip-path: none; }
  body[data-page="index"] .index-misfiled { top: 0; }
  .index-inspect__body { display: grid; }
}

/* narrow screens: the room number goes under the room's name, so the name is never broken mid-word */
@media (max-width: 40rem) {
  body[data-page="index"] .room__head { grid-template-columns: minmax(0, 1fr); }
  body[data-page="index"] .room__head .huge { overflow-wrap: break-word; }
  .index-ledger { grid-template-columns: minmax(0, 1fr); }
  .index-ledger > .index-leaves { grid-column: 1; grid-row: 2; min-height: 10rem; }
}

/* workaround, reported upstream: in negusto.css `.shell-footer p` (0,1,1) outranks `.shell-footer__name` (0,1,0),
   so the house name in the footer renders at --t-small. Restored here for this page only, to the shared values.
   TYPE RULE: at 30rem it was wallpaper, so it is set at the size of a colophon line.
   This note used to be closed twice; the second close left a line of prose in the
   stylesheet, which took the rule under it with it, so the name had gone back to
   the small size in every browser. */
body[data-page="index"] .shell-footer .shell-footer__name { font-size: clamp(2.6rem, 9vw, 7rem); line-height: 0.8; color: var(--salt); }