/* NEGUSTOLONOW — css/story.css — World 001, stop 00: story.html.

   The page is on the shared shell and the shared design system; everything that
   was a second copy of negusto.css (the reset, the header, the footer, the card,
   the pocket) has gone back to where one copy lives. What is left is what only
   this page does: a column of prose read like a novel, the said line, the docket
   set in the column, and the word in the text you can pick up (the underline
   itself is shared furniture, §13c).

   The colours beat is no longer this page's own gradient. The room tone is
   .room--colours and the light is the one shared primitive, negusto.css §15,
   called by <div class="colours"><i></i><i></i><i></i></div> inside the section.
   What is left here is what the dark beat does to the reading: the text shadow
   that keeps the column legible over the pattern, and the word's hover.

   Everything is scoped under the page so nothing here can reach another room. */

body[data-page="story"] {
  --measure: 34rem;
}

/* the measure: one column, centred, read at length. */
.story-beat .wrap > p { max-width: var(--measure); margin-inline: auto; font-size: clamp(1.1rem, 1.3vw, 1.3rem); line-height: 1.6; }
.story-beat .wrap > p + p { margin-top: 1.35em; }
.story-beat--door { padding-top: var(--s-8); }

/* the dockets stand in the same column as the prose. */
.story-beat .wrap > .doc { max-width: var(--measure); margin-inline: auto; margin-block: 2.2em; }

.story-beat .slug { font-family: var(--f-mono); font-size: var(--t-small) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2.5em; }
.story-beat .said { font-size: 1.35em !important; font-style: italic; font-weight: 300; margin-block: 1.6em; }
.story-beat .quiet { color: var(--ink-faint); }
.story-beat .then { margin-top: 3em; }
.story-beat .stop { margin-top: 4em; font-family: var(--f-mono); font-size: var(--t-small) !important; letter-spacing: 0.1em; text-transform: uppercase; }
.story-beat .stop a { text-decoration: none; border-bottom: var(--rule-hair) solid currentColor; padding-bottom: 0.1em; }
.story-beat .stop a + a { margin-left: 1.6rem; }

/* THE COLOURS. The room goes dark (.room--colours) and the pattern comes in
   behind the text from the shared primitive. The column has to stay readable
   over it, and the word under the pattern has to invert to be seen. */
.story-beat--colours .wrap { position: relative; }
.story-beat--colours .wrap > p { text-shadow: 0 0 18px rgba(27, 27, 26, 0.9), 0 0 2px rgba(27, 27, 26, 1); }
.story-beat--colours .obj:hover, .story-beat--colours .obj:focus-visible { color: var(--lampblack); }