/* Printed-page primitives (docs/story.md, "Printed pages"): the running head and its numeral,
   the poster headline, the dagger mark, the pull quote, attribution, colophon and ruled evidence
   note, and the editorial grid of a printed page. Markup comes only from public/src/lib/print.js;
   never copy these rules into another sheet. Tokens only. A page links this sheet after its own
   chrome and before story-book.css, which sizes and orders the same classes for the book. */
.story-print__head { display: flex; align-items: baseline; gap: .8em; font: 600 .8rem/1.1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; }
.story-print__no { font: 400 1.5em/.8 var(--font-display); letter-spacing: .02em; color: var(--crimson); }
.story-print__headline { text-transform: none; text-wrap: balance; }
.story-print__mark { margin-left: .12em; font: 400 .55em/0 var(--font-serif); vertical-align: .9em; color: var(--crimson); }
.story-print__quote { font-style: italic; text-wrap: pretty; }
.story-print__attr, .story-print__colophon { font-family: var(--font-label); font-weight: 500; color: var(--ink-3); }
.story-print__note { color: var(--ink-2); border-top: 1px solid var(--stone-2); }
.story-print__note a { text-underline-offset: 3px; }
.story-print__note .story-print__mark { margin: 0 .3em 0 0; }

/* A printed page after the book (its section is padded by the page's chrome): a running head
   across the page, a poster headline on the left, the text in an offset column. */
.story__plain-inner { max-width: 1240px; margin: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px 32px; align-items: start; }
.story__plain-inner > * { grid-column: 6 / -1; max-width: 62ch; }
.story__plain-inner > .story-print__head { grid-column: 1 / -1; max-width: none; padding-bottom: 12px; border-bottom: 1px solid currentColor; }
.story__plain-inner > .story-print__headline { grid-column: 1 / 6; grid-row: span 3; max-width: none; font-size: clamp(2.3rem, 4.2vw, 4.4rem); line-height: 1; }
.story__plain h3 { margin-top: 12px; font-size: 1.15rem; letter-spacing: .02em; }
/* The ruled list (S1); a view's own list takes it through print.js ENTRIES and ENTRY. */
.story__plain ul, .story-print__entries { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.story__plain li, .story-print__entry { padding-top: 14px; border-top: 3px solid var(--crimson); font-size: .98rem; line-height: 1.45; }
.story__plain-inner > .story-print__note { grid-column: 6 / -1; padding: 2px 0 2px 16px; border-top: 0; font-size: .92rem; line-height: 1.5; }
.story__plain-inner > a { font: 600 1rem var(--font-label); letter-spacing: .04em; text-underline-offset: 5px; }
/* Who it's for: each role a short entry under a crimson rule, like the script's speaker lines. */
.story__plain-inner > .story__role-note { padding-left: 16px; border-left: 3px solid var(--crimson); }
@media (max-width: 899px) {
  .story__plain-inner > *, .story__plain-inner > .story-print__headline, .story__plain-inner > .story-print__note { grid-column: 1 / -1; grid-row: auto; }
  .story__plain ul, .story-print__entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .story__plain ul, .story-print__entries { grid-template-columns: 1fr; }
}

/* The author's ventures (copy-bank §18, print.js venturesIndex): a ruled index of works. A labelled
   head over a rule; each entry its numeral in the margin, its name a poster line underscored in
   crimson with its domain set like a colophon, and its plain line beneath. Ink or paper: every colour
   is the page's own (currentColor), except the crimson rule and numeral. */
.story-print__ventures { margin-top: 36px; display: grid; gap: 14px; }
.story-print__ventures p { margin: 0; }
.story-print__ventures-head { padding-bottom: 12px; border-bottom: 1px solid currentColor; font: 600 .8rem/1.1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; }
.story-print__ventures-intro { font-style: italic; text-wrap: pretty; }
.story-print__ventures-list { margin: 0; padding: 0; list-style: none; }
.story-print__ventures-list > li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 14px; padding: 16px 0 18px; border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.story-print__ventures-list .story-print__no { grid-row: span 2; padding-top: .3em; }
.story-print__ventures-list a { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 2px 14px; min-height: 44px; color: inherit; text-decoration: none; }
.story-print__ventures-name { font: 400 clamp(1.7rem, 3.2vw, 2.4rem)/1.05 var(--font-display); letter-spacing: .01em; text-transform: uppercase; text-decoration: underline 3px var(--crimson); text-underline-offset: 7px; }
.story-print__ventures-url { font: 600 .8rem/1.4 var(--font-label); letter-spacing: .14em; }
.story-print__ventures-arrow { font: 600 .9rem var(--font-label); color: var(--crimson); }
.story-print--dark .story-print__ventures-arrow { color: var(--crimson-3); }
.story-print__ventures .story-print__ventures-line { max-width: 56ch; margin-top: 8px; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.story-print__ventures-list a:hover .story-print__ventures-name, .story-print__ventures-list a:focus-visible .story-print__ventures-name { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .story-print__ventures-arrow { transition: transform .2s ease-out; }
  .story-print__ventures-list a:hover .story-print__ventures-arrow { transform: translate(3px, -3px); }
}
/* The /press bio line: inline names, each a target of at least 44px without moving the line. */
.story-print__ventures-prose a { padding-block: 14px; text-decoration-color: var(--crimson); text-underline-offset: 3px; }
/* A footer's labelled group (venturesLinks): the small-caps label, then each name at a 44px target in
   its own case (the footers' uppercase and tracking set AGENTICCODINGCERTS as one blob, 14-rev). */
.story-print__work a { display: inline-flex; align-items: center; min-height: 44px; letter-spacing: .02em; text-transform: none; }
.story-print__work > strong { margin-right: .7em; font-size: .82em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* The cover's staircase (print.js STAIR): nine steps, one per stage, climbing left to right to the
   top. The one stair motif and the site's one clip-path polygon (tests/hub-print.test.js); the placing
   element's own class gives it its box (the /stages hero, the book cover's backing), and a figure or
   stair stands on an ink floor rule. The steps are ink: printed crimson they were a solid red field
   (achilles-05, 14-rev), and red marks only the stake, so no sheet paints a stair crimson. */
.story-print__stair { display: block; background: var(--ink); clip-path: polygon(0 100%, 0 88.89%, 11.11% 88.89%, 11.11% 77.78%, 22.22% 77.78%, 22.22% 66.67%, 33.33% 66.67%, 33.33% 55.56%, 44.44% 55.56%, 44.44% 44.44%, 55.56% 44.44%, 55.56% 33.33%, 66.67% 33.33%, 66.67% 22.22%, 77.78% 22.22%, 77.78% 11.11%, 88.89% 11.11%, 88.89% 0, 100% 0, 100% 100%); }

/* A dark (ink) printed page: crimson numerals measured 2.4:1 there (axe, R19d), so the numeral takes
   the pale crimson (P3). /story's #inside is listed by id until its markup carries the class. */
.story-print--dark .story-print__no, #inside .story-print__no { color: var(--crimson-3); }