/* ==========================================================================
   NEGUSTOLONOW — site/css/next-door.css — next-door.html only
   Loaded after negusto.css. Page classes are prefixed .nd- (plus .witness and
   .plate-pending). Shared classes are never restyled globally: overrides are
   scoped under body[data-page="next-door"]. Tokens only; no new colour values.

   TYPE RULE (stated in full in css/house.css). Display scale carries a name or a
   number out of the world. Here that is: the name of the place across the road,
   the title of a room, and the chalk on the loom shed door, which was written
   large by somebody standing in the lane. The desire in this room is carried by
   cloth, heat, hands, posture and attention, so it is set at reading size and
   given room to be read, not blown up.

   THE COLOURS. The light that comes off a back and a shoulder is one primitive
   now, negusto.css §15, and every page that shows it shows the same one. The
   rooms here are hosts (.room--colours gives the lampblack tone, the accent and
   the stacking context); this file says only where the light is and how much of
   it there is, through --colours-mask and --colours-opacity. The gradients, the
   filters and the three keyframes that stood in this file have gone to §15.
   ========================================================================== */

body[data-page="next-door"] main > .room { padding-block: clamp(4rem, 7vw, 6.5rem); }
body[data-page="next-door"] main > .room--tight { padding-block: var(--s-7); }
body[data-page="next-door"] main > .room--flush-bottom { padding-bottom: 0; }
body[data-page="next-door"] .room__head { margin-bottom: var(--s-6); }
@media (max-width: 40rem) {
  body[data-page="next-door"] .room__head { grid-template-columns: minmax(0, 1fr); }
  body[data-page="next-door"] .room__head .huge { overflow-wrap: break-word; }
}

/* THE WAY BACK. Every room carries its kilometre in the number line of its head,
   and one line at its foot naming the plate or the record it leans on. Same
   component as the map's; the map styles its own copy. */
body[data-page="next-door"] .room__no a { color: inherit; text-decoration: none; border-bottom: var(--rule-hair) solid var(--hair); }
body[data-page="next-door"] .room__no a:hover, body[data-page="next-door"] .room__no a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }
body[data-page="next-door"] .km__cite { padding-top: var(--s-3); margin-top: var(--s-6); border-top: var(--rule-hair) solid var(--hair); font-family: var(--f-mono); font-size: 0.76rem; line-height: 1.6; color: var(--ink-faint); }
body[data-page="next-door"] .km__cite a { font-size: inherit; color: inherit; }
body[data-page="next-door"] .nd-seam .km__cite { max-width: 44rem; margin-top: 0; }

/* HEAD ---------------------------------------------------------------------- */
.nd-open__code { text-transform: uppercase; }
.nd-open__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(3.4rem, 15vw, 13rem); line-height: 0.8; letter-spacing: -0.02em; margin: var(--s-5) 0 0 -0.025em; }
body[data-page="next-door"] .nd-open .surface__line { margin-top: var(--s-6); }
/* The gate is the knock. A line of signage stood here telling the reader what
   sort of room this was; the world has had a working gate since before anyone
   could read, and everybody on the wall knows the difference between one knock
   and two by the age of four. The door says the two knocks and nothing else. */
.nd-open__knock { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); color: var(--ink-faint); }
.nd-open__knock .lamp { --lamp: 1.1rem; flex: none; }
.nd-open__fold { max-width: 44rem; }
/* A long account is the point of the room it is in, so it opens with one click
   and then has nothing after it. */
.nd-scene__fold { max-width: 40rem; margin-top: var(--s-7); }
.nd-scene__fold .fold__body { padding-block: var(--s-6) 0; }

/* WITNESSES: four people, and they cannot all be right ----------------------- */
.nd-witness__lede { max-width: 40rem; }
.nd-witness__grid { margin-top: var(--s-7); row-gap: var(--s-7); }
.witness { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); }
.witness p { font-size: 1.05rem; line-height: 1.55; }
.witness footer { font-family: var(--f-mono); font-size: 0.76rem; line-height: 1.6; color: var(--ink-faint); }
/* the one that is a form, not a person */
.witness--typed { padding: var(--s-4); border-top: 0; background: var(--buff); align-self: center; }
.witness--typed p { font-family: var(--f-mono); font-size: 0.95rem; }

/* THE SHOWING, THE STEP, THE NOTE -------------------------------------------- */
.nd-how__grid { row-gap: var(--s-7); }
.nd-how__block { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); }
.nd-how__block .prose { max-width: var(--measure); }
.nd-how__block--wide { border-top-width: var(--rule-heavy); }
.nd-how__block--wide .prose { max-width: 44rem; }

/* DENA PELL GOES IN: one long account, given the width of a page ------------- */
.nd-scene__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.nd-scene__label { text-transform: uppercase; color: var(--ink-faint); }
.nd-scene__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 8vw, 6rem); line-height: 0.86; letter-spacing: -0.015em; }
.nd-scene__source { max-width: 36rem; font-size: var(--t-small); font-style: italic; line-height: 1.6; color: var(--ink-soft); }
.nd-scene__body { max-width: 34rem; display: grid; gap: 1.1em; }
.nd-scene__body p { font-size: 1.08rem; line-height: 1.68; }
/* the first line pulled up to the size of speech */
.nd-scene__body p:first-child { font-size: 1.24rem; line-height: 1.5; }
.nd-scene__plate { margin-top: var(--s-8); max-width: 42rem; }

/* FAMILIARS ------------------------------------------------------------------ */
.nd-fam__intro { row-gap: var(--s-6); }
.nd-fam__aside { padding-top: var(--s-4); border-top: var(--rule-hair) solid var(--hair); font-size: var(--t-small); }
.nd-fam__aside p { line-height: 1.65; }
.nd-fam__plates { margin-top: var(--s-8); row-gap: var(--s-8); }

/* A plate that has not been made yet. The mount is real and measured; the sheet
   is not in it. When the file lands, js/art.js prints it into the frame through
   the scanner bed and takes the pending marks off. Same component as the one in
   css/world.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); }

/* DESIRE, AND THE COLUMN ------------------------------------------------------ */
/* TYPE RULE: this sentence was the room's heading at display scale, which made a
   claim into a poster. It is a plain statement and it sits at reading size. */
.nd-desire__lede { max-width: 34rem; margin-bottom: var(--s-6); }
.nd-desire__aside { padding-top: var(--s-4); border-top: var(--rule-hair) solid var(--hair); font-size: var(--t-small); }
.nd-desire__aside p { line-height: 1.65; }
.nd-desire__shut { margin-top: var(--s-8); }
.nd-desire__shut .prose { max-width: 40rem; padding-top: var(--s-4); border-top: var(--rule-heavy) solid var(--line); }

/* ONE SENTENCE, ON ITS OWN ------------------------------------------------------
   It is in the letter above and it is the thing the letter is about. It gets the
   room, the source line, and nothing after it. */
.nd-found__fig { max-width: 30rem; padding-left: var(--s-5); border-left: var(--rule) solid var(--ink); }
.nd-found__fig blockquote p { font-size: clamp(1.35rem, 3.2vw, 2.15rem); font-weight: 300; line-height: 1.22; text-wrap: balance; }
.nd-found__fig figcaption { margin-top: 0.8em; font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-faint); }
.nd-found__fig figcaption a { color: inherit; }

/* TERMS, BOTH WAYS -------------------------------------------------------------- */
.nd-terms__grid { row-gap: var(--s-7); }
.nd-terms__block { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); }
.nd-terms__block .prose { max-width: var(--measure); }
.nd-terms__block--wide { border-top-width: var(--rule-heavy); }
.nd-terms__block--wide .prose { max-width: 44rem; }

/* CHALK ON A DOOR -------------------------------------------------------------- */
.nd-wall { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-4); }
.nd-wall__text { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 5vw, 3rem); line-height: 0.96; text-transform: uppercase; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.nd-wall__src { font-family: var(--f-mono); font-size: 0.74rem; line-height: 1.6; color: var(--ink-faint); }

/* LETTERS AND THE NOTEBOOK ------------------------------------------------------ */
.nd-letter { margin-top: var(--s-8); max-width: 34rem; }
.nd-letter__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.nd-letter__h { font-family: var(--f-display); font-weight: 800; font-size: var(--t-title); text-transform: uppercase; line-height: 1; }
.nd-letter__src { max-width: 32rem; font-size: var(--t-small); font-style: italic; line-height: 1.6; color: var(--ink-soft); }
.nd-letter__body { display: grid; gap: 1em; font-size: 1.04rem; line-height: 1.65; }
.nd-letter__body p:last-child { font-style: italic; }
.nd-notebook__body { display: grid; gap: 1.1em; max-width: 33rem; font-family: var(--f-serif); font-style: italic; font-size: 1.06rem; line-height: 1.7; }

/* LEFT, AND PRETENDING ----------------------------------------------------------- */
.nd-left__grid { row-gap: var(--s-7); }
.nd-left__block { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); }
.nd-left__block .prose { max-width: var(--measure); }

/* ===========================================================================
   THE COLOURS — three rooms on this page, and the four folds where somebody
   stood in. The light itself is negusto.css §15 and is not repeated here. The
   host is .room--colours (lampblack, the accent iodine lit, isolated); an
   opening fold's summary is a host of its own, §13b. What is set below is where
   the light is and how much of it there is, and nothing else. The copy never
   names a colour, and no room says what the light is for.

   Three appearances, descending in scale, and nowhere else:
     .nd-colours             one opening, at a person's height, enclosing.
     .nd-colours--horizon    the top mark: colour on the underside of cloud,
                             900 km off, seen from the wrong side of the road.
     .nd-colours--close      twelve minutes, indoors, with the door shut.
   =========================================================================== */

body[data-page="next-door"] main > .nd-colours { padding-block: clamp(5rem, 11vw, 11rem); }
/* everything written stands in front of it */
.nd-colours > .wrap { position: relative; z-index: 1; }

/* the light arrives and it goes: the mask is why you scroll into it rather than
   find it already on, and why it is gone by the foot of the room. */
.nd-colours > .colours {
  --colours-opacity: 0.94;
  --colours-mask: linear-gradient(to bottom, transparent 0%, var(--lampblack) 13%, var(--lampblack) 62%, transparent 96%);
}

/* the room's own furniture, on the dark */
.nd-colours .room__head { margin-bottom: var(--s-6); }
.nd-colours__lede { max-width: 38rem; }
.nd-colours__say { max-width: 34rem; margin-top: var(--s-5); font-size: 1.08rem; line-height: 1.6; }
.nd-colours__grid { margin-top: var(--s-7); row-gap: var(--s-7); }
.nd-colours__block { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); }
.nd-colours__block .prose { max-width: var(--measure); }
.nd-colours .prose a, .nd-colours .nd-scene__source a { color: inherit; }

/* CLOSING: Venn's account. The light is full behind the approach and the opening
   and is gone by the paragraph where it shuts, so the reader comes out of it on
   the same line she does, and the last third is read on plain lampblack. ----- */
.nd-colours--closing > .colours {
  --colours-mask: linear-gradient(to bottom, var(--lampblack) 0%, var(--lampblack) 38%, color-mix(in srgb, var(--lampblack) 55%, transparent) 54%, transparent 68%);
}
body[data-page="next-door"] main > .nd-colours--closing { padding-top: var(--s-8); }

/* VENN: set to be read ------------------------------------------------------- */
.nd-venn { max-width: 40rem; }
.nd-venn__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.nd-venn__body { max-width: 33rem; display: grid; gap: 1.15em; }
.nd-venn__body p { font-size: 1.1rem; line-height: 1.72; }
.nd-venn__body p:first-child { font-size: 1.26rem; line-height: 1.52; }
/* the coat, after. A Keeper's note, flat, and the room is grey again by then. */
.nd-venn__after { max-width: 33rem; margin-top: var(--s-8); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); font-size: var(--t-small); line-height: 1.7; color: var(--ink-soft); display: grid; gap: 1em; }

/* A PLATE INSIDE THE LIGHT ---------------------------------------------------- */
.nd-colours .plate-pending__frame { background: color-mix(in srgb, var(--lampblack) 72%, var(--board)); border-color: var(--hair); }
.nd-colours .plate-pending__frame::before { border-color: color-mix(in srgb, var(--salt) 34%, transparent); }
.nd-colours .plate-pending__mark, .nd-colours .plate-pending .caption__text { color: var(--ink-faint); }
.nd-colours__plate { margin-top: var(--s-8); max-width: 34rem; }

/* HORIZON: the top mark. Nothing encloses anybody. It is 900 km of it, and you
   are on the wrong side of the road looking at the underside of the cloud. ---- */
.nd-colours--horizon > .colours {
  --colours-opacity: 0.64;
  --colours-mask: linear-gradient(to top, transparent 0%, var(--lampblack) 12%, var(--lampblack) 34%, transparent 62%);
}
.nd-topmark { margin-top: var(--s-9); }
.nd-topmark__stud .title { margin-bottom: var(--s-3); }
.nd-topmark__stud p { max-width: var(--measure); }
.nd-topmark__grid { row-gap: var(--s-7); margin-top: var(--s-6); }
.nd-topmark__block { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); }
.nd-topmark__block .prose { max-width: var(--measure); }
.nd-topmark__bread { max-width: 36rem; margin-top: var(--s-8); padding-top: var(--s-4); border-top: var(--rule-heavy) solid var(--line); font-size: 1.06rem; line-height: 1.7; }

/* CLOSE: twelve minutes, indoors, door shut. Small, and warm, and nobody's
   business but hers. ---------------------------------------------------------- */
.nd-colours--close > .colours {
  --colours-opacity: 0.7;
  --colours-mask: radial-gradient(70% 58% at 34% 74%, var(--lampblack) 0%, var(--lampblack) 34%, transparent 100%);
}

/* SLACK WEEK, AND A LEAF OF DOCKETS ------------------------------------------- */
.nd-slack__lede { max-width: 36rem; }
.nd-slack__body { max-width: 34rem; margin-top: var(--s-5); display: grid; gap: 1em; font-size: 1.06rem; line-height: 1.68; }
.nd-docket { margin-top: var(--s-8); max-width: 38rem; }
.nd-docket__src { max-width: 32rem; margin-bottom: var(--s-5); font-size: var(--t-small); font-style: italic; line-height: 1.6; color: var(--ink-soft); }
/* a leaf of laid paper, an even hand, no corrections. Entries are ruled off from
   each other because that is how the leaf is ruled, and the last word stands
   alone at the foot with nothing after it. */
.nd-docket__leaf { background: var(--salt); color: var(--lampblack); padding: var(--s-5) var(--s-5) var(--s-6); border-top: var(--rule-heavy) solid var(--lampblack); }
.nd-docket__leaf p { font-family: var(--f-mono); font-size: 0.86rem; line-height: 1.6; padding-block: 0.62rem; border-bottom: var(--rule-hair) solid color-mix(in srgb, var(--lampblack) 22%, transparent); }
.nd-docket__leaf p:first-child { padding-top: 0; }
.nd-docket__leaf .nd-docket__said { font-size: 0.98rem; line-height: 1.55; }
.nd-docket__leaf .nd-docket__last { border-bottom: 0; padding-top: var(--s-5); letter-spacing: 0.34em; }
/* the leaf keeps its own paper, so a word with a rule under it is ruled in the
   leaf's ink and not the room's */
.nd-docket__leaf .obj { border-bottom-color: var(--lampblack); }
.nd-docket__leaf .obj:hover, .nd-docket__leaf .obj:focus-visible { background: var(--lampblack); color: var(--salt); }
@media (min-width: 52rem) { .nd-docket { margin-left: 8vw; } }

/* On a phone the reading column is the whole screen, so the same light sits
   under every line of it. The pattern is carried at the same pitch (it is a
   pattern, not a scale) and dimmed. */
@media (max-width: 48rem) {
  .nd-colours > .colours { --colours-opacity: 0.58; }
  .nd-colours--horizon > .colours { --colours-opacity: 0.5; }
  .nd-colours--close > .colours { --colours-opacity: 0.56; }
  .nd-docket__leaf p { font-size: 0.78rem; }
}

/* EXITS --------------------------------------------------------------------------- */
/* the seam out of this room: the other world that is open, and what it holds of
   this one. The walk itself is the shell's. */