/* ==========================================================================
   NEGUSTOLONOW — site/css/house.css — index.html only (the house's front door)

   Deliberately neutral. The house is a method, not a look: each world brings
   its own design system, so this page borrows from neither. A world's colours
   appear only on its own screen, on hover or focus, as a glimpse through a door.

   THE DOOR IS A GALLERY. It was a wall of text and it is now seven screens of
   image and space. Visible copy on the whole page, labels and footer included,
   is about a hundred and seventy words; before the first plate there are
   thirteen. The archive's own law against <img> is the archive's, not the
   house's: the house keeps photographs of what it has actually made, and a
   mount whose photograph has not been made stands hidden until its file lands,
   so that no screen carries an empty board.

   THE FOLD. The name and the exploded renders sit in <details> styled to match
   .fold in css/negusto.css, so that opening a thing feels the same in every
   room of the site. This file cannot load negusto.css (the front door is not
   part of Archive 001), so the rules are restated here and nowhere else.

   THE CARD, THE POCKET, THE COLOURS. Under amendment A1 the door carries
   js/picks.js and js/pocket.js and nothing else, so a thing on the Counter can
   be picked up here as it can anywhere else on the site. The card and pocket
   rules of negusto.css §13c and the colours primitive of §15 are copied at the
   foot of this file, scoped to body#top and mapped onto this file's own tokens.
   They are a copy, not a second design: when §13c changes, this changes.

   ---------------------------------------------------------------------------
   THE TYPE RULE (adopted across the whole site; repeated at the head of
   world.css, objects.css, map.css and next-door.css, and beside the scale
   tokens in negusto.css)

   Display scale is for a NAME or a NUMBER that exists inside the world: the
   title of a world, a person, a kilometre, a year, an accession number, a
   class, or a line of type that a real poster in Ossel actually carried.

   Display scale is never for a slogan, a claim about the house, or an
   abstract noun. Set at 12rem, "contradiction" is a poster for nothing.
   Test: read the line at body size. If it survives, it can be large. If it
   only works large, it was decoration, and it goes at body size or goes.
   ---------------------------------------------------------------------------
   ========================================================================== */

:root {
  /* The paper is the salt of the worlds' own system, so that stepping through a
     door and coming back is one site and not two. */
  --paper: #E9E5DA;
  --ink: #1B1B1A;
  --soft: #6d6a64;
  --line: #11111022;
  --hair: #1111103d;
  --iodine: #9A4B1C;
  --board: #C9C3B4;
  --display: "Sofia Sans Extra Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: "Spectral", Georgia, "Times New Roman", serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --pad: clamp(20px, 4.5vw, 72px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

  /* The roles the copied blocks read (§13c the card and the pocket, §15 the
     colours). Every one of them is this file's own token under the name the
     copy uses, so the copy can be pasted and read beside its original. */
  --ink-soft: var(--soft);
  --ink-faint: var(--soft);
  --accent: var(--iodine);
  --lampblack: var(--ink);
  --f-display: var(--display);
  --f-mono: var(--mono);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-micro: 0.72rem;
  --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --rule-hair: 1px;
  --rule: 2px;

  /* The four inks §15 mixes its light out of. They are the Interior Colour
     Ordinance's own registered values, restated because this page cannot load
     the file that holds them; no value here is new to the house. */
  --iodine-deep: #7E3C14;
  --buff: #D5C29A;
  --tissue: #DDD3BD;
  --mimeo: #6A6080;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 18px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p, figure, blockquote, figcaption { margin: 0; padding: 0; }
img { display: block; width: 100%; height: auto; background: var(--board); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--mono); font-size: 12px; z-index: 10; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------------------------------------------------------------- screens */
/* A screen is full-bleed and mostly empty. The world screens carry a hairline
   at the top; the rest are separated by space alone. */
.screen { padding-block: clamp(3.5rem, 9vh, 7rem); padding-inline: var(--pad); transition: background-color 0.35s var(--ease), color 0.35s var(--ease); }
.world { border-top: 1px solid var(--line); }
/* screen I: the mark, one sentence, and the house's own plate. Nothing is held
   back for a photograph that does not exist, so the page opens on a picture. */
.screen--house { border-top: 0; padding-top: clamp(24px, 5vh, 56px); padding-bottom: clamp(2.5rem, 7vh, 5.5rem); }
/* a mount whose file has not landed is not a board: it is not there. */
[hidden] { display: none !important; }

/* the masthead. The house name is a name, so it may be large — but it is a
   signature here, not a banner: the world names below it are the loud ones. */
.door-head { margin-bottom: clamp(26px, 5vh, 56px); }
.house-mark { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 4vw, 2.75rem); line-height: 0.9; letter-spacing: 0.01em; }
.house-kind { margin-top: clamp(10px, 1.4vw, 16px); max-width: 30em; color: var(--soft); font-size: clamp(0.95rem, 1.2vw, 1.1rem); }

/* ----------------------------------------------------------------- plates */
.plate { position: relative; }
.plate img, .plate__mount { aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; }
.plate__label { display: block; margin-top: 0.85em; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.plate__label i { font-style: normal; color: #8d887e; }
.plate__label a { border-bottom: 1px solid var(--line); padding-bottom: 2px; white-space: nowrap; }   /* the arrow never wraps off its words at 360 */
.plate__label a:hover, .plate__label a:focus-visible { border-bottom-color: currentColor; }
.plate__label span { display: inline-block; transition: transform 0.35s var(--ease); }
.plate__label a:hover span, .plate__label a:focus-visible span { transform: translateX(6px); }
.plate-link { display: block; }
.plate-link:hover .plate__label, .plate-link:focus-visible .plate__label { color: var(--ink); }

/* the house's own plate: the pair. Wide, the long composite; on a phone the
   same two drawings stacked at the same overlap. The <picture> switches at the
   same 48rem the layout does, so the ratio and the file never disagree. */
.plate--pair picture { display: block; }
.plate--pair img { --ratio: 768 / 1100; }
@media (min-width: 48rem) { .plate--pair img { --ratio: 2080 / 768; } }

/* a photograph that has not been made: the mount stands, with its label, the
   way the archive stands A001-PH-112. */
.plate--pending .plate__mount { position: relative; background: var(--board); border: 1px solid var(--hair); }
.plate--pending .plate__mount::before { content: ""; position: absolute; inset: 7%; border: 1px dashed #1111104d; }
.plate__mark { position: absolute; left: 7%; bottom: 7%; transform: translateY(1.8em); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: #8d887e; }

/* the familiar, the height of the screen. It is a photograph now, not a mount,
   so the figure itself is the host the colours primitive needs: relative,
   isolated, clipped, with the band turning over the shoulders on multiply. */
.plate--figure { position: relative; isolation: isolate; overflow: hidden; max-height: 76svh; }
.plate--figure img { --ratio: 1265 / 1600; max-height: 76svh; }
body#top .plate--figure .colours {
  z-index: auto;                                    /* over the plate: there is a picture under it now */
  --colours-blend: multiply;                        /* on paper, not on lampblack */
  --colours-edge: var(--paper);
  /* the band sits across the shoulders, and the mask holds it to about half
     strength: the light is on the wall behind, not over the drawing. */
  --colours-mask: radial-gradient(ellipse 74% 26% at 50% 36%,
    color-mix(in srgb, var(--ink) 58%, transparent) 0,
    color-mix(in srgb, var(--ink) 44%, transparent) 42%,
    transparent 82%); }

/* ----------------------------------------------------------------- worlds */
.world__no { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.world__name { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.6rem, 10.5vw, 9rem); line-height: 0.88; letter-spacing: -0.008em; text-wrap: balance; }
.world__name a { display: inline-block; }
.world__name a:hover, .world__name a:focus-visible { text-decoration: underline; text-decoration-thickness: 0.035em; text-underline-offset: 0.08em; }
.world__line { max-width: 34em; color: var(--soft); font-size: clamp(1rem, 1.2vw, 1.12rem); }
.world__said { max-width: 34em; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: 0.04em; color: var(--soft); }
.world__said a { border-bottom: 1px solid var(--line); }
.world__enter { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
/* the way into World 001 is a sentence, not a button. It is allowed to be the
   size of a spoken line, because somebody in the world is knocking. */
.world__enter em { font-family: var(--text); font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 300; letter-spacing: 0; text-transform: none; }
.world__enter span { display: inline-block; transition: transform 0.35s var(--ease); }
.world__enter a:hover span, .world__enter a:focus-visible span { transform: translateX(6px); }
/* the way to the step: always there, the same whether anything has been picked
   up or not. A ruled line, no mark, no state. */
.door { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.door a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.door a:hover, .door a:focus-visible { border-bottom-color: currentColor; }
.door span { display: inline-block; transition: transform 0.35s var(--ease); }
.door a:hover span, .door a:focus-visible span { transform: translateX(6px); }

/* The stops inside a world, in the order they are walked. Same row of numbered
   words the world's own header carries, so the two sides of the door match.
   On a phone it is a strip that scrolls inside itself. */
.world__stops { display: flex; gap: 0.35em 1.2em; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.0625rem; overflow-x: auto; scrollbar-width: none; }
.world__stops::-webkit-scrollbar { display: none; }
.world__stops a { display: inline-flex; align-items: baseline; gap: 0.4em; white-space: nowrap; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.world__stops a:last-child { padding-right: var(--pad); }
.world__stops a:hover, .world__stops a:focus-visible { border-bottom-color: var(--ink); }
.world__stops i { font-family: var(--mono); font-style: normal; font-weight: 400; font-size: 0.68rem; letter-spacing: 0; color: var(--soft); }

/* A sentence found inside Ossel. Mid-size, set as a quotation, with its source
   under it. It is not a headline and is never set at display scale. */
.found { max-width: 26em; padding-left: clamp(14px, 2vw, 26px); border-left: 2px solid var(--ink); }
.found blockquote p { font-size: clamp(1.15rem, 2.1vw, 1.7rem); line-height: 1.22; font-weight: 300; text-wrap: balance; }
.found figcaption { margin-top: 0.7em; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--soft); }

/* A glimpse of each world's own colours, only on its own screen. */
.world--001:hover, .world--001:focus-within { background: #d9d4c7; }
.world--002:hover, .world--002:focus-within { background: #392a36; color: #f2ede6; }
.world--002:hover .world__line, .world--002:focus-within .world__line,
.world--002:hover .world__no, .world--002:focus-within .world__no,
.world--002:hover .world__said, .world--002:focus-within .world__said,
.world--002:hover .plate__label, .world--002:focus-within .plate__label { color: #d8b9c6; }
.world--003 { color: #a8a49c; }
.world--003 .world__line, .world--003 .world__no { color: #b9b5ad; }
.world--003 { min-height: 70svh; display: grid; align-content: center; justify-items: start; gap: 0.9em; }
.lamp-unlit { display: block; width: 2.2rem; height: 2.2rem; border: 1.5px solid var(--soft); border-radius: 50%; margin-top: 1.4em; }

/* --------------------------------------------------------- next door plate */
.screen--familiar { display: grid; gap: 0; }
.plate__label--wide { max-width: 44em; }
/* one line of definition, in the door's voice, out of next door's own
   vocabulary. Body size: it is a sentence, not a name. */
.familiar__def { max-width: 34em; font-size: clamp(1rem, 1.2vw, 1.12rem); }

/* -------------------------------------------------------------- the counter */
.world__name--counter { margin-bottom: clamp(24px, 4vh, 48px); }
.vitrine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
/* a card on the Counter: the thing, its label, and one line of state. No price
   anywhere, on the house or on any surface. */
.vitrine__card > * + * { margin-top: 0.7em; }
.vitrine__card .plate__label { margin-top: 0.85em; }
.counter__state { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.counter__link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.counter__link a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.counter__link a:hover, .counter__link a:focus-visible { border-bottom-color: var(--ink); }
.counter__link span { display: inline-block; transition: transform 0.35s var(--ease); }
.counter__link a:hover span, .counter__link a:focus-visible span { transform: translateX(6px); }
/* the slip has no photograph yet, so its card is words, ruled off at the top
   where the plate's edge would be. No dashed board, no broken picture. On a
   phone it runs the width of the case and the three plates sit under it. */
.vitrine__card--slip { grid-column: 1 / -1; }
.vitrine__card--slip .plate__label { margin-top: 0; padding-top: 0.9em; border-top: 1px solid var(--hair); }
.counter__links { margin-top: clamp(26px, 4vh, 48px); display: flex; flex-wrap: wrap; gap: 0.6em 2em; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.counter__links a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.counter__links a:hover, .counter__links a:focus-visible { border-bottom-color: var(--ink); }
.counter__links span { display: inline-block; transition: transform 0.35s var(--ease); }
.counter__links a:hover span, .counter__links a:focus-visible span { transform: translateX(6px); }

/* ------------------------------------------------------------------- folds */
/* Restated from .fold in css/negusto.css. Same object, same manners. */
.fold { margin-top: clamp(28px, 4vh, 52px); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.fold__summary { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; align-items: baseline; gap: 0.6em 1.2em; padding-block: 1rem; cursor: pointer; list-style: none; }
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary::marker { content: ""; }
.fold__no { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.fold__label { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.05; letter-spacing: 0.06em; text-transform: uppercase; }
.fold__summary:hover .fold__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.fold__summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.fold__act { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--iodine); white-space: nowrap; }
.fold__act::after { content: "Open"; }
.fold[open] > .fold__summary .fold__act::after { content: "Close"; }
.fold[open] > .fold__summary { border-bottom: 1px solid var(--hair); }
.fold__body { padding-block: 1.6rem 2.4rem; }

/* THE NAME. A colophon, not a manifesto: small type at the foot, folded, where
   it is found rather than served. Nothing here is larger than the body. */
/* One open paragraph at body size, with the door to the page that keeps the
   research. The house explains its name once, in a room of its own. */
.house-name { max-width: 38em; font-size: clamp(1rem, 1.2vw, 1.12rem); }
.house-name a { display: block; width: fit-content; margin-top: 1em; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.house-name a:hover, .house-name a:focus-visible { border-bottom-color: var(--ink); }
.house-name span { display: inline-block; transition: transform 0.35s var(--ease); }
.house-name a:hover span, .house-name a:focus-visible span { transform: translateX(6px); }

.colophon { padding: clamp(28px, 5vh, 60px) var(--pad) clamp(36px, 7vh, 80px); max-width: 60em; }
.colophon__body { max-width: 42em; display: grid; gap: 0.85em; font-size: 0.85rem; line-height: 1.62; color: var(--soft); }
.colophon__body b { font-weight: 400; color: var(--ink); }
.colophon__say { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }

.house-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 28px; flex-wrap: wrap; padding: 22px var(--pad); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.house-foot a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.house-foot a:hover, .house-foot a:focus-visible { color: var(--ink); border-bottom-color: currentColor; }

/* ------------------------------------------------------------------ narrow */
.screen > * + * { margin-top: clamp(18px, 2.6vh, 30px); }
.screen--house .plate--pair { margin-top: clamp(26px, 4vh, 48px); }
.screen--door .found { margin-top: clamp(26px, 4vh, 46px); }
.world__stops { margin-top: clamp(38px, 6vh, 74px); margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }

/* ------------------------------------------------------------------- wide */
@media (min-width: 48rem) {
  .screen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 1.8vw, 22px); align-content: start; }
  .screen > * { grid-column: 1 / -1; margin-top: 0; }
  .screen > * + * { margin-top: 0; }

  /* screen I: the mark across the top, the pair the full width under it. */
  .door-head { grid-column: 1 / -1; }
  .plate--pair { grid-column: 1 / -1; margin-top: clamp(30px, 5vh, 58px); }

  /* screen II: the world's name, then the stone on the left and the coat's slot
     on the right, then the notebook and the knock under the stone. */
  .screen--door .world__no { grid-column: 2 / -1; grid-row: 1; }
  .screen--door .world__name { grid-column: 2 / -1; grid-row: 2; }
  .plate--door { grid-column: 2 / 7; grid-row: 3; margin-top: clamp(26px, 4vh, 52px); }
  .plate--coat { grid-column: 8 / 13; grid-row: 3; align-self: end; margin-top: clamp(26px, 4vh, 52px); padding-bottom: clamp(30px, 6vh, 80px); }
  .screen--door .found { grid-column: 2 / 7; grid-row: 4; margin-top: clamp(30px, 4vh, 52px); }
  .screen--door .world__enter { grid-column: 2 / 7; grid-row: 5; margin-top: clamp(26px, 3.6vh, 46px); }
  .screen--door .world__stops { grid-column: 1 / -1; grid-row: 6; }
  .world__stops { grid-column: 1 / -1; }

  .screen--familiar .plate--figure { grid-column: 3 / 9; }
  .screen--familiar .familiar__def { grid-column: 3 / 9; margin-top: 1.1em; }
  .screen--familiar .plate__label--wide { grid-column: 3 / 9; margin-top: 0.85em; }

  .world--002 .world__no, .world--002 .world__name { grid-column: 1 / 7; }
  .world--002 .plate-link--garment { grid-column: 7 / 12; grid-row: 1 / span 5; align-self: center; }
  .world--002 .world__line { grid-column: 1 / 7; margin-top: clamp(20px, 3vh, 34px); }
  .world--002 .world__said { grid-column: 1 / 7; margin-top: 0.7em; }
  .world--002 .world__enter { grid-column: 1 / 7; margin-top: clamp(22px, 3.2vh, 38px); }

  .world--003 > * { grid-column: 2 / 9; }

  .screen--counter .world__name--counter { grid-column: 1 / -1; }
  .vitrine { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  /* the slip's card is words, so it stands on the same line as the labels
     beside it rather than hanging from the top of an empty column. */
  .vitrine__card--slip { grid-column: auto; align-self: end; }
  .vitrine > li:nth-child(2) { margin-top: clamp(30px, 5vh, 70px); }
  .vitrine > li:nth-child(4) { margin-top: clamp(30px, 5vh, 70px); }
  .vitrine--parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vitrine--parts > li:nth-child(2) { margin-top: 0; }
  .fold--parts { grid-column: 1 / -1; }
  .counter__links { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .screen, .world__enter span, .plate__label span, .counter__links span, .counter__link span, .door span, .house-name span { transition: none; }
}

/* ==========================================================================
   COPIED, SCOPED: css/negusto.css §13c — the word, the card, the pocket
   ==========================================================================
   Under amendment A1 the door carries js/picks.js and js/pocket.js, so the
   notebook line and the four things on the Counter can be picked up here the
   way anything is picked up anywhere else. The script injects dialog.card#card
   and dialog#pocket; these are the rules they land in. Everything is scoped to
   body#top so the block can only ever act on this page, and every colour, face
   and measure is this file's own token under the name §13c uses.

   The card reads the same on the door as it does over a lampblack beat in
   Ossel: nothing rounded, nothing floating, no filled button anywhere. The
   three answers are ruled mono words: Keep it · Not yet (Not tonight for an
   opening) · Leave it. ------------------------------------------------------ */

/* the word, marked like a seam. The rule under it is this page's accent. */
/* letter-spacing and text-transform are named because a form control does not
   inherit them: without this the pickable word in a mono label sets in another
   case from the words beside it. */
body#top .obj { display: inline; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0 0.08em; margin: 0; cursor: pointer; border-bottom: 1.5px solid var(--accent); text-decoration: none; }
body#top .obj:hover, body#top .obj:focus-visible { background: var(--accent); color: var(--paper); outline: none; }
body#top .obj.is-kept::after { content: " ·"; color: var(--accent); }
/* a form control is an atomic inline, so a line can break between the word and
   the stop that follows it. The two are held together. */
body#top .obj-run { white-space: nowrap; }
/* not yet: a private mark in this browser. The rule goes dotted; the docket gets nothing. */
body#top .obj.is-notyet { border-bottom-style: dotted; }
body#top .obj.is-notyet::after { content: none; }

body#top .card, body#top dialog#pocket { width: min(92vw, 40rem); max-height: 88vh; overflow: auto; padding: clamp(1.4rem, 3vw, 2.5rem); border: var(--rule-hair) solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: var(--t-body); line-height: 1.5; }
body#top .card::backdrop, body#top dialog#pocket::backdrop { background: rgba(27, 27, 26, 0.55); }
body#top .card__close { position: sticky; top: 0; float: right; margin: -0.4rem -0.4rem 0 0; width: 2rem; height: 2rem; border: 0; background: var(--paper); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
body#top .card__kicker { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
body#top .card h2, body#top dialog#pocket h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 4.4vw, 2.7rem); line-height: 0.94; letter-spacing: -0.005em; margin: 0.3em 0 0.8em; }
body#top .card__body > p + p { margin-top: 0.8em; }
body#top .card__shop { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; }
body#top .card__shop a { border-bottom: var(--rule-hair) solid var(--hair); padding-bottom: 0.15em; }
body#top .card__shop a:hover, body#top .card__shop a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }
/* where it came from: the page and the fold, as a ruled mono line that lands open */
body#top .card__where { margin-top: var(--s-4); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
body#top .card__where a { color: inherit; text-decoration: none; border-bottom: var(--rule-hair) solid var(--hair); padding-bottom: 0.15em; }
body#top .card__where a:hover, body#top .card__where a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }
/* the foot: three answers as ruled mono words. There is no filled button anywhere. */
body#top .card__foot { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem 1.4rem; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; }
body#top .card__keep, body#top .card__notyet, body#top .card__leave, body#top .card__put, body#top .pocket__put {
  display: inline-block; font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: 1.2; margin: 0; padding: 0.3em 0 0.22em;
  border: 0; border-bottom: var(--rule) solid var(--ink); border-radius: 0; background: none; color: var(--ink); text-decoration: none; cursor: pointer; }
body#top .card__keep:hover, body#top .card__keep:focus-visible, body#top .card__notyet:hover, body#top .card__notyet:focus-visible,
body#top .card__leave:hover, body#top .card__leave:focus-visible, body#top .card__put:hover, body#top .card__put:focus-visible,
body#top .pocket__put:hover, body#top .pocket__put:focus-visible { background: none; color: var(--accent); border-bottom-color: var(--accent); }
body#top .card__leave, body#top .card__put, body#top .pocket__put { border-bottom-width: var(--rule-hair); color: var(--ink-soft); }
/* the answer already given, when the card is opened again */
body#top .card__notyet[aria-pressed="true"], body#top .card__notyet.is-chosen { border-bottom-style: dotted; color: var(--ink-soft); }
body#top .card__state { color: var(--ink-soft); }
body#top .card__kept { color: var(--accent); text-decoration: none; border-bottom: var(--rule-hair) solid currentColor; padding-bottom: 0.22em; }
body#top .card__kept:hover, body#top .card__kept:focus-visible { color: var(--ink); }

/* the pocket: what was picked up, in this browser and nowhere else. The door
   has no header, so it is reached from the card's foot and from the step. */
body#top .pocket__list { display: grid; gap: 0; border-top: var(--rule-hair) solid var(--hair); }
body#top .pocket__list:empty { border-top: 0; }
body#top .pocket__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; width: 100%; text-align: left; align-items: baseline; padding: 0.85rem 0; border: 0; border-bottom: var(--rule-hair) solid var(--hair); background: none; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
body#top .pocket__item:hover, body#top .pocket__item:focus-visible { color: var(--accent); }
body#top .pocket__kicker { grid-column: 1; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
body#top .pocket__title { grid-column: 1; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; }
body#top .pocket__where { grid-column: 2; grid-row: 1 / span 2; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
body#top .pocket__item.is-kept::after { content: none; }
/* the docket line the thing carries, under its title */
body#top .pocket__line { grid-column: 1; margin-top: 0.15rem; font-family: var(--f-mono); font-size: var(--t-micro); line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
body#top .pocket__empty { font-size: var(--t-small); color: var(--ink-soft); }
/* the rows grouped by world: Ossel / Mercy Room / The house, each with Put it down */
body#top .pocket__group { display: block; padding: var(--s-5) 0 var(--s-2); }
body#top .pocket__group:first-child { padding-top: var(--s-3); }
body#top .pocket__group-h { margin: 0; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
body#top .pocket__row { display: flex; align-items: baseline; gap: var(--s-4); border-bottom: var(--rule-hair) solid var(--hair); }
body#top .pocket__row > .pocket__item { flex: 1 1 auto; min-width: 0; width: auto; border-bottom: 0; }
body#top .pocket__put { flex: 0 0 auto; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
body#top .pocket__row.is-taken .pocket__title { color: var(--ink-soft); }
/* one mono line, and the door */
body#top .pocket__state { margin-top: var(--s-5); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
body#top .pocket__door { margin-top: var(--s-5); }
body#top dialog#pocket .card__close { margin-bottom: 0; }

/* ==========================================================================
   COPIED, SCOPED: css/negusto.css §15 — the colours
   ==========================================================================
   The one place on this page where the grey breaks, and the only animated
   gradient the house permits (CONTRACT A5). In Ossel an elver opens and
   patterned light comes off its back and shoulders and unfolds round a person
   until they are standing inside it. The door does it once, behind the
   familiar's shoulders, and never says so.

     <div class="colours" aria-hidden="true"><i></i><i></i><i></i></div>

   inside a host that is position: relative and isolation: isolate. No new
   colour value: every layer is the house's own inks put through saturate() and
   a slow full turn of hue-rotate(), so nothing on screen is a colour the
   palette can name. The page sets --colours-blend, --colours-mask and
   --colours-opacity and nothing else. Motion stops under prefers-reduced-
   motion; the pattern stays, because the pattern is not the motion. ---------- */
body#top .colours { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: var(--colours-opacity, 1);
  -webkit-mask-image: var(--colours-mask, linear-gradient(to bottom, transparent 0%, var(--lampblack) 16%, var(--lampblack) 82%, transparent 100%));
  mask-image: var(--colours-mask, linear-gradient(to bottom, transparent 0%, var(--lampblack) 16%, var(--lampblack) 82%, transparent 100%)); }
/* the edges settle, so the band has a middle and the corners keep the paper */
body#top .colours::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 78% at 58% 40%, transparent 0 30%, color-mix(in srgb, var(--colours-edge, var(--paper)) 82%, transparent) 100%); }
body#top .colours > i { position: absolute; inset: -35%; display: block; mix-blend-mode: var(--colours-blend, screen); }
/* 1. the weave: a shed's worth of cloth across the width of a road, the two runs out of square as a hand loom is */
body#top .colours > i:nth-child(1) {
  background-image:
    repeating-linear-gradient(84deg, transparent 0 16px, color-mix(in srgb, var(--iodine) 88%, transparent) 34px 52px, transparent 70px 88px),
    repeating-linear-gradient(19deg, transparent 0 40px, color-mix(in srgb, var(--mimeo) 92%, transparent) 96px 150px, transparent 206px 262px),
    repeating-linear-gradient(11deg, transparent 0 6px, color-mix(in srgb, var(--buff) 40%, transparent) 11px 15px, transparent 20px 27px);
  opacity: 0.5; filter: saturate(2.6) hue-rotate(0deg) blur(3px); animation: colours-weave 112s linear infinite; }
/* 2. the long smoke-streaks and the rings of a horn plate held up to a lamp */
body#top .colours > i:nth-child(2) {
  background-image:
    repeating-linear-gradient(7deg, transparent 0 90px, color-mix(in srgb, var(--buff) 80%, transparent) 150px 250px, transparent 320px 430px),
    repeating-radial-gradient(150% 110% at 56% 44%, color-mix(in srgb, var(--iodine) 90%, transparent) 0 130px, transparent 210px 430px);
  opacity: 0.55; filter: saturate(2.2) hue-rotate(40deg) blur(34px); animation: colours-horn 137s ease-in-out infinite alternate; }
/* 3. the distance in it: the layer that is not a surface */
body#top .colours > i:nth-child(3) {
  background-image: radial-gradient(78% 60% at 60% 40%,
    color-mix(in srgb, var(--tissue) 96%, transparent) 0%,
    color-mix(in srgb, var(--iodine) 78%, transparent) 30%,
    color-mix(in srgb, var(--iodine-deep) 42%, transparent) 52%,
    transparent 76%);
  opacity: 0.62; filter: saturate(2.8) hue-rotate(205deg) blur(26px); animation: colours-deep 119s ease-in-out infinite alternate; }
@keyframes colours-weave {
  0%   { filter: saturate(2.6) hue-rotate(0deg) blur(3px);   background-position: 0 0, 0 0, 0 0; }
  50%  { filter: saturate(3) hue-rotate(180deg) blur(5px);   background-position: 210px -150px, -180px 210px, 90px 60px; }
  100% { filter: saturate(2.6) hue-rotate(360deg) blur(3px); background-position: 420px -300px, -360px 420px, 180px 120px; }
}
@keyframes colours-horn {
  from { filter: saturate(2.2) hue-rotate(40deg) blur(34px);  transform: translate3d(0, 0, 0) scale(1); }
  to   { filter: saturate(2.6) hue-rotate(260deg) blur(48px); transform: translate3d(4%, -3%, 0) scale(1.16); }
}
@keyframes colours-deep {
  from { filter: saturate(2.8) hue-rotate(205deg) blur(26px); transform: scale(1); opacity: 0.52; }
  to   { filter: saturate(2.3) hue-rotate(475deg) blur(38px); transform: scale(1.3); opacity: 0.7; }
}
/* a narrow screen holds less of it, so it is turned up a little */
@media (max-width: 48rem) { body#top .colours > i:nth-child(1) { opacity: 0.58; } }
@media (prefers-reduced-motion: reduce) { body#top .colours > i { animation: none; } }
@media print { body#top .colours { display: none !important; } }

/* ==========================================================================
   DOOR 4 — outside the worlds. The only screen on the door that is not paper:
   a night held in emerald, the eight-fold star laid as two squares, and the
   same star in the field behind at a whisper. It is not a world's colour
   glimpsed on hover; it is the door itself, so it is lit all the time.
   ========================================================================== */
.door4 {
  --emerald: #0f7a55; --emerald-hi: #1fae7c; --night: #06201a; --gold: #c9a85a; --pale: #eae4d3;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 92svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; text-align: center; gap: 0.9em;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #0d3a2e 0%, var(--night) 70%); color: var(--pale);
}
.door4__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--gold); opacity: 0.09; }
.door4 .world__no, .door4 .door4__line { color: #b9c9bd; }
.door4__star { display: block; width: min(64vw, 440px); aspect-ratio: 1; margin-block: clamp(10px, 3vh, 34px); border: 0; }
.door4__star svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 28px #1fae7c40); transition: filter 0.6s var(--ease); }
.door4__body rect { fill: var(--emerald); }
.door4__ring { stroke: var(--gold); opacity: 0.8; }
.door4__inlay { stroke: var(--gold); opacity: 0.85; }
.door4__turn { transform-origin: 0 0; animation: door4-turn 240s linear infinite; }
.door4__star:hover svg, .door4__star:focus-visible svg { filter: drop-shadow(0 0 46px #1fae7c80); }
.door4__star:hover .door4__body rect, .door4__star:focus-visible .door4__body rect { fill: var(--emerald-hi); transition: fill 0.6s var(--ease); }
.door4__star:focus-visible { outline: 1px solid var(--gold); outline-offset: 12px; }
.door4__name { color: var(--pale); }
.door4__line { max-width: min(28em, 100%); }
.door4__name { max-width: 100%; }
.door4__enter a { color: var(--gold); }
@keyframes door4-turn { to { transform: rotate(360deg); } }

/* ==========================================================================
   DOOR 6 — outside the worlds. Psychedelic Music Therapy: a night in violet, and one mark,
   a triangle standing on its point inside a square. The square is drawn and
   holds still; the triangle is lit and its colour never settles, which is all
   the door says about what is behind it.
   ========================================================================== */
.door6 {
  --haunt-night: #07040f; --haunt-pale: #f1e9ff; --haunt-dim: #a99cc6;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 92svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; text-align: center; gap: 0.9em;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #1b0f33 0%, var(--haunt-night) 70%); color: var(--haunt-pale);
}
.door6 .world__no, .door6 .door6__line { color: var(--haunt-dim); }
.door6__mark { display: block; width: min(56vw, 360px); aspect-ratio: 1; margin-block: clamp(10px, 3vh, 34px); border: 0; }
.door6__mark svg { width: 100%; height: 100%; overflow: visible; }
.door6__square { fill: none; stroke: var(--haunt-pale); stroke-width: 1.6; transition: stroke-width 0.4s var(--ease); }
.door6__triangle { animation: door6-colour 14s linear infinite; transform-origin: 0 0; transition: transform 0.5s var(--ease); }
.door6__mark:hover .door6__triangle, .door6__mark:focus-visible .door6__triangle { transform: scale(1.06); }
.door6__mark:hover .door6__square, .door6__mark:focus-visible .door6__square { stroke-width: 2.6; }
.door6__mark:focus-visible { outline: 1px solid var(--haunt-pale); outline-offset: 12px; }
.door6__name, .door6__name a { color: var(--haunt-pale); }
.door6__name { max-width: 100%; }
.door6__line { max-width: min(28em, 100%); }
.door6__enter a { color: var(--haunt-pale); }
@keyframes door6-colour { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .door6__triangle { animation: none; } }
@media (min-width: 48rem) {
  .door6 > * { grid-column: 1 / -1; justify-self: center; }
  .door6 > * + * { margin-top: 0.4em; }
}
@media (prefers-reduced-motion: reduce) { .door4__turn { animation: none; } }
@media (min-width: 48rem) {
  .door4 > * { grid-column: 1 / -1; justify-self: center; }
  .door4 > * + * { margin-top: 0.4em; }
}