/* C05 six-story reading layer (The Container, Showing Up, The Constellation, Ideas Stopped Developing Cobwebs,
   Knowledge Was on Loan, We Weren't Talking About the Same Tree). Loaded after reading/shared/reading.css on those
   six pages only. The four C04 stories never load this file.
   Base: one centred 30em reading lane, fluid type from reading.css, art beside prose only at >=1000px (one text path).
   Each story has exactly ONE novel element (n-*), switched on by data; every n-* rule falls back to plain reading:
   motion (opacity/transform) only when html.n-armed (set by six-05.js at >=981px with motion allowed);
   pinning only at >=1000px with motion allowed; everything else static. No text is ever aria-hidden or duplicated. */
.qd-six{--measure:30em}
.six{max-width:calc(var(--measure) + var(--art-col) + var(--gap) + 2 * var(--gutter))}
.six > *{margin-inline:auto}
.six p,.six h1,.six figcaption{overflow-wrap:break-word}
.six h1{max-width:13ch}
.six .opening{max-width:var(--measure)}
.six .s-lede{color:var(--fg)}
.six .s-xl{font:500 clamp(1.5rem,1.1rem + 1.6vw,2.4rem)/1.12 var(--sans);letter-spacing:-.02em;color:var(--fg);margin:1em 0 .7em;max-width:16em;text-wrap:balance}
.six .s-big{font:400 clamp(1.25rem,1.05rem + .8vw,1.75rem)/1.32 var(--serif);color:var(--fg)}
.six .s-beat{margin-block:clamp(4rem,14vh,9rem)}
.six .s-beat .quiet{margin:0 0 .25em}
.six .s-beat .beat{margin-top:0}
.six .s-head{margin-bottom:1.3rem}
.six .s-steps p,.six .stack p{margin:0 0 .4em}
.six .stack{margin:1.1em 0}
.six .s-split .s-big:first-of-type{margin-top:1.4em}
.six .s-stair p{color:var(--fg)}
.six figure img{max-width:min(100%,var(--w))}
.six .art{margin-inline:auto}
.six .plate .art img{max-width:min(100%,44rem,var(--w));margin-inline:auto}
.six .art.portrait img{max-width:min(100%,30rem,var(--w))}
.six figure[data-plate] img[width="660"]{max-width:min(100%,440px)}
.six figcaption.label{margin-top:.9rem}
.six .plate:not(.n-return){width:fit-content;max-width:min(100%,var(--measure))}
.six .plate:not(.n-return) figure{width:fit-content;max-width:100%}
@media (min-width:1000px){
  .six .with-art{width:calc(var(--measure) + var(--art-col) + var(--gap));max-width:100%}
  .six .with-art > .s-head{grid-column:1 / -1}
  .six .with-art > .art{grid-row:2 / span 9}
  .six .with-art > .copy{grid-row:2}
  .six .with-art.art-first > .s-head{grid-column:1 / -1}
  .six .with-art.art-first{grid-template-columns:minmax(0,var(--art-col)) minmax(0,var(--measure))}
  .six .with-art.art-first > .copy{grid-column:2}
  .six .with-art.art-first > .art{grid-column:1}
}

/* ---- n-counterpoint (Tree): two voices, ONE lane. Voice 1 = prose; voice 2 follows after a hairline, indented,
   in the sans face at full ink. Never side by side. "Later": extra space before voice 2 and, when armed, a fade-in. */
.n-counterpoint .voice-2{position:relative;margin-top:2.4em;padding-top:1.7em;padding-left:clamp(1.25rem,7vw,4rem)}
.n-counterpoint .voice-2::before{content:"";position:absolute;top:0;left:clamp(1.25rem,7vw,4rem);width:min(6rem,40%);border-top:1px solid currentColor;opacity:.55}
.n-counterpoint .voice-2 p{font:400 clamp(1.125rem,.98rem + .7vw,1.6rem)/1.34 var(--sans);letter-spacing:-.01em;color:var(--fg)}
.n-counterpoint .voice-2 strong{font-weight:600}
@media (min-width:981px){.n-counterpoint .voice-2{margin-top:clamp(3rem,10vh,6rem)}}
.n-armed .n-counterpoint .voice-2{transition:opacity 1s ease,transform 1s ease}
.n-armed .n-counterpoint .voice-2:not(.n-in){opacity:0;transform:translateY(.75rem)}

/* ---- n-measure (Container): the list runs in a narrow vessel; its last line runs past the vessel edge. >=981px. */
@media (min-width:981px){
  .n-measure .n-vessel{width:min(15em,100%);border-inline:1px solid var(--rule);padding:1.6em 1.3em}
  .n-measure .n-vessel p{margin:0 0 .55em}
  .n-measure .n-over{width:min(calc(var(--measure) - 2.6em),calc(100vw - 2 * var(--gutter) - 2.6em));max-width:calc(50vw + 50% - 1rem);margin:1.1em 0 0;color:var(--fg)}
  /* C05 guard: the vessel is centred, so the over-run line starts at 50vw - 50%; this cap keeps it inside the page when text is enlarged. No effect at default text size. */
  .n-measure{margin-block:clamp(5rem,14vh,9rem)}
}

/* ---- n-hit (Showing Up): SUDDENLY. as a full-screen line at >=981px; lede-sized below. */
.n-hitblock .n-hit{font:500 clamp(1.75rem,1.2rem + 2vw,2.5rem)/1.05 var(--sans);letter-spacing:-.03em;color:var(--fg);margin-top:.6em}
@media (min-width:981px){
  .six .n-hitblock .n-hit{--hw:calc(100vw - 2 * var(--gutter) - 1rem);width:var(--hw);margin:0 0 0 calc((100% - var(--hw)) / 2);min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(3.5rem,10vw,10rem)}
}
.n-armed .n-hit strong{display:inline-block;transition:opacity .45s ease-out,transform .45s cubic-bezier(.2,.9,.25,1.1)}
.n-armed .n-hit:not(.n-in) strong{opacity:0;transform:scale(.86)}

/* ---- n-pin (Constellation): plate 2 holds still while its passage passes. >=1000px, motion allowed. */
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .n-pin{--pinh:min(var(--art-col),62svh)}
  .n-pin > .art{align-self:stretch!important;margin:0!important}
  .n-pin > .art img{position:sticky;top:calc((100svh - var(--pinh)) / 2);width:var(--pinh)!important;max-width:100%}
  .n-pin > .copy{min-height:calc(var(--pinh) + 22svh)}
}

/* ---- n-arrival (Ideas): the first plate is withheld until "It was something I could see", then arrives. */
.n-armed .n-arrival > .art{transition:opacity 1.4s ease}
.n-armed .n-arrival > .art:not(.n-in){opacity:0}

/* ---- n-return (Knowledge): the house drawing frames the piece, wide in and wide out (>=981px), never upscaled. */
@media (min-width:981px){
  .six .n-return{--rw:min(calc(100vw - 2 * var(--gutter) - 1rem),1448px);width:var(--rw);max-width:none;margin-left:calc((100% - var(--rw)) / 2);margin-right:0}
  .six .n-return .art img{max-width:100%;width:100%}
  .six .n-return figcaption{margin-inline:auto;max-width:var(--measure)}
}
@media print{.n-armed *{opacity:1!important;transform:none!important}}
.six .plate:not(.n-return) .art img{margin-inline:0}