/* Bench Story components (W01 prototype). Loaded after styles.css and v2.css; uses the site tokens
   (--bg-*, --text-*, --accent*, --font-*, --nav-h, --p7-*) and adds the editorial palette with meaning
   (Bench Editorial Design System V01 §1.1): terracotta = wall B, teal = wall A / interpretation, gold = the junction
   and the question. Colour never carries meaning alone: every coloured element also has a letter or a word.
   Default = the complete static article. Motion is layered on only under html.bs-js:not(.bs-static). */

:root {
  --bs-navy: #0b1018;
  --bs-panel: #141e2a;
  --bs-ivory: #f5f1ec;
  --bs-paper: #fbf9f5;
  --bs-card: #ebe6dd;
  --bs-ink: #1b2029;
  --bs-ink-muted: #555d69;
  --bs-gold: #cfa870;
  --bs-gold-ink: #7a5e33;
  --bs-teal: #2fa79a;
  --bs-teal-ink: #1d6b62;
  --bs-teal-lt: #5cc3b6;     /* teal as text on the dark page (>= 4.5:1 on #0c1118) */
  --bs-terra: #c46a4c;
  --bs-terra-lt: #df8f72;    /* terracotta as text on the dark page (>= 4.5:1) */
  --bs-measure: var(--p7-measure, 68ch);
  --bs-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- page frame ---------- */
.bs-article { position: relative; }
.bs-article p, .bs-article li { line-height: 1.68; }
.bs-wrap { max-width: var(--content-w, 1240px); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.bs-read { max-width: var(--bs-measure); }
.bs-read > * + * { margin-top: 1.1rem; }
.bs-lead { font-family: var(--font-serif); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.55; color: var(--text-pri); }
.bs-muted { color: var(--text-sec); }
.bs-small { font-size: .92rem; color: var(--text-sec); }
.bs-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Reading progress (decorative; the contents list carries location for assistive tech). */
.bs-progress { position: fixed; left: 0; right: 0; top: var(--nav-h); height: 3px; z-index: 40; pointer-events: none; }
.bs-progress span { display: block; height: 100%; background: var(--bs-gold); transform-origin: 0 50%; transform: scaleX(0); }
html:not(.bs-js) .bs-progress { display: none; }

/* ---------- masthead additions ---------- */
/* Masthead motif: B units | junction ring | A insulation + stud, aligned on one base line. Decorative only. */
.bs-mast-art { display: flex; align-items: flex-end; justify-content: flex-end; gap: clamp(.75rem, 2vw, 1.75rem); margin-top: var(--p7-s6, 2rem); height: clamp(120px, 12vw, 190px); }
.bs-mast-art img { display: block; height: 100%; width: auto; }
.bs-mast-art .m-brick { height: 92%; }
.bs-mast-art .m-ring { height: 62%; width: auto; align-self: center; }
.bs-mast-art .m-ins { height: 86%; }
.bs-mast-art .m-stud { height: 100%; margin-left: -1.2rem; }
.bs-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.bs-tags li { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .35rem .7rem;
  border: 1px solid var(--accent-line); color: var(--text-pri); border-radius: 2px; }
.bs-tags li.is-status { border-color: rgba(207,168,112,.6); color: var(--bs-gold); }

/* ---------- contents bar ---------- */
.bs-tocbar { border-bottom: var(--p7-rule, 1px solid #253547); background: var(--bg-raised); }
.bs-tocbar .bs-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: start; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.bs-toc h2 { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bs-gold); margin: 0 0 .75rem; }
.bs-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .35rem 1.5rem; counter-reset: ch; }
.bs-toc li { counter-increment: ch; }
.bs-toc a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .4rem; padding: .35rem 0; color: var(--text-pri); text-decoration: none; border-bottom: 1px solid transparent; }
.bs-toc a::before { content: counter(ch); font-family: var(--font-serif); color: var(--bs-gold); }
.bs-toc a:hover, .bs-toc a:focus-visible { border-bottom-color: var(--accent-line); }
.bs-toc a[aria-current] { color: var(--bs-gold); }
.bs-motion { font: 500 .85rem var(--font-sans); color: var(--text-pri); background: transparent; border: 1px solid var(--bdr-light); border-radius: 3px;
  padding: .55rem .85rem; cursor: pointer; white-space: nowrap; }
.bs-motion:hover, .bs-motion:focus-visible { border-color: var(--bs-gold); }
.bs-motion .bs-motion-state { color: var(--bs-gold); font-weight: 600; }

/* ---------- before you start: reading conventions + evidence language ---------- */
.bs-howto { padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0; border-top: 1px solid var(--bdr); }
.bs-howto h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0 0 1.5rem; color: var(--text-pri); }
.bs-howto-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.bs-howto-grid > div > * + * { margin-top: 1rem; }
.bs-cats { list-style: none; margin: .75rem 0 0; padding: 0; }
.bs-cats li { padding: .65rem 0; border-top: 1px solid var(--bdr-light); font-size: .97rem; color: var(--text-sec); }
.bs-cats li b { color: var(--text-pri); font-weight: 600; }
@media (max-width: 860px) { .bs-howto-grid { grid-template-columns: 1fr; } }

/* ---------- chapters ---------- */
.bs-chapter { padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0; border-top: 1px solid var(--bdr); position: relative; overflow: clip; }
.bs-chapter--alt { background: var(--bg-raised); }
.bs-chead { display: grid; grid-template-columns: minmax(3.2rem, auto) minmax(0, 1fr); gap: 0 1.25rem; align-items: start; margin-bottom: 2.25rem; max-width: 60rem; position: relative; z-index: 1; }
.bs-chead .bs-num { font-family: var(--font-serif); font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--bs-gold); }
.bs-kicker { display: block; font-family: var(--font-sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-lt); margin-bottom: .6rem; }
.bs-chead h2 { font-family: var(--font-serif); font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); line-height: 1.12; margin: 0; color: var(--text-pri); }
/* W02.1 chapter heading unit (one rule set for all seven chapters). From 701 px the number sits on the title's first
   baseline, 1rem to its left (16 px; 20-24 px visible ink to ink once the side bearings of the numeral and the first
   letter are included); the kicker stays above the title and the formal line below it. The text block's wrapper is unboxed (display: contents; it is a plain div
   with no role) so kicker, title and formal line share the number's grid. Multi-line titles keep the number on the
   first line. At 700 px and below the W01 stacked heading (number above the kicker) is unchanged. */
@media (min-width: 701px) {
  .bs-chead { grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: baseline; }
  .bs-chead > div { display: contents; }
  .bs-chead .bs-kicker { grid-column: 2; grid-row: 1; }
  .bs-chead h2 { grid-column: 2; grid-row: 2; }
  .bs-chead .bs-formal { grid-column: 2; grid-row: 3; }
  .bs-chead .bs-num { grid-column: 1; grid-row: 2; align-self: baseline; line-height: .8; }   /* the larger numeral overhangs its line box, so the title row (and the kicker spacing) stays as in W02 */
}
.bs-formal { font-family: var(--font-serif); font-style: italic; color: var(--text-sec); margin-top: .55rem; font-size: 1.02rem; }
.bs-motif { position: absolute; z-index: 0; pointer-events: none; opacity: .9; }
.bs-chapter h3 { font-family: var(--font-serif); font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); margin: 3rem 0 1rem; color: var(--text-pri); }
.bs-chapter h3:first-child { margin-top: 0; }

/* ---------- interpretation, quotation and learning moments ---------- */
.bs-reading { border-left: 3px solid var(--bs-teal); background: rgba(47,167,154,.08); padding: 1.1rem 1.35rem; max-width: var(--bs-measure); }
.bs-reading .bs-lab, .bs-lm .bs-lab { display: block; font: 600 .74rem var(--font-sans); letter-spacing: .18em; text-transform: uppercase; margin-bottom: .45rem; }
.bs-reading .bs-lab { color: var(--bs-teal-lt); }
.bs-reading p { margin: 0; }
.bs-reading ol { margin: .4rem 0 0; padding-left: 1.4rem; }
.bs-reading ol li + li { margin-top: .7rem; }
.bs-quote { margin: 1.5rem 0; max-width: var(--bs-measure); border-left: 2px solid var(--accent); padding: .2rem 0 .2rem 1.35rem; }
.bs-quote p { font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.6; color: var(--text-pri); margin: 0; }
.bs-quote cite { display: block; margin-top: .6rem; font: normal .85rem var(--font-sans); color: var(--text-sec); }
.bs-lm { max-width: var(--bs-measure); margin: 2rem 0; }
.bs-lm p { margin: 0; }
.bs-lm--key { background: var(--bg-card); border-top: 2px solid var(--accent); padding: 1.35rem 1.5rem; }
.bs-lm--key .bs-lab { color: var(--bs-gold); }
.bs-lm--key p { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.5; color: var(--text-pri); }
.bs-lm--look { border: 1px solid var(--bdr-light); padding: 1.1rem 1.35rem; }
.bs-lm--look .bs-lab { color: var(--text-pri); }
.bs-lm--look .bs-lab::before { content: ""; display: inline-block; width: 1.2rem; height: 1px; background: currentColor; vertical-align: .3em; margin-right: .5rem; }
.bs-lm--mean { border: 1px solid rgba(92,195,182,.45); border-radius: 6px; padding: 1.1rem 1.35rem; }
.bs-lm--mean .bs-lab { color: var(--bs-teal-lt); }
.bs-lm--check { border-left: 6px solid var(--bs-gold); background: var(--bg-card); padding: 1.1rem 1.35rem; }
.bs-lm--check .bs-lab { color: var(--text-pri); }
.bs-aside { max-width: var(--bs-measure); border-left: 1px solid var(--bdr-light); padding-left: 1.2rem; color: var(--text-sec); font-size: .97rem; }
.bs-aside strong { color: var(--text-pri); }

/* Claim markers: hidden on the public page, shown with ?review=1 for traceability checks. */
.bs-clm { display: none; }
.bs-review .bs-clm { display: inline-block; font: 500 .7rem var(--font-mono, monospace); color: var(--bs-gold); border: 1px solid rgba(207,168,112,.5);
  border-radius: 2px; padding: 0 .3rem; margin-left: .3rem; vertical-align: .15em; white-space: nowrap; }

/* ---------- comparison panels (identical weighting) ---------- */
.bs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 2rem 0; max-width: 62rem; }
.bs-compare > div { padding: 1.3rem 1.5rem; background: var(--bg-card); }
.bs-compare > div + div { background: var(--bg-card-alt); }
.bs-compare .bs-lab { display: block; font: 600 .74rem var(--font-sans); letter-spacing: .18em; text-transform: uppercase; margin-bottom: .5rem; color: var(--text-pri); }
.bs-compare > div:first-child { border-top: 2px solid var(--text-pri); }
.bs-compare > div + div { border-top: 2px solid var(--bs-terra); }
.bs-compare h4 { font-family: var(--font-serif); font-size: 1.2rem; margin: 0 0 .6rem; color: var(--text-pri); }
.bs-compare p { margin: 0; }
.bs-compare p + p { margin-top: .8rem; }

/* ---------- scrolly stage ---------- */
.bs-scrolly { position: relative; margin: 1rem 0 0; }
.bs-stage-wrap { position: relative; }
.bs-stage { position: relative; aspect-ratio: 16 / 10; width: 100%; background: radial-gradient(120% 90% at 50% 40%, #13202d 0%, var(--bs-navy) 70%);
  border: 1px solid var(--bdr); overflow: hidden; }
.bs-stage img.bs-poster, .bs-stage canvas, .bs-stage svg.bs-ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.bs-stage canvas { display: none; }
.bs-stage svg.bs-ov { overflow: visible; }
.bs-stage figcaption, .bs-stage-cap { font-size: .86rem; color: var(--text-sec); margin-top: .75rem; max-width: var(--bs-measure); }
.bs-stage-cap b { color: var(--text-pri); font-weight: 600; }
.bs-stage-cap .bs-lim { font-style: italic; }
.bs-ov text { font-family: var(--font-sans); }
/* Stage text is set in the 1600-unit viewBox; at a ~690 px desktop stage, 36 units = about 15.5 px. */
.bs-ov .t-lab { font-size: 36px; font-weight: 600; letter-spacing: .02em; }
.bs-ov .t-sub { font-size: 32px; }
.bs-ov .t-q { font-family: var(--font-serif); font-size: 42px; }
.bs-ov .t-note { font-size: 28px; fill: #a7b0bd; }
.bs-steps { position: relative; }
.bs-step .bs-card { background: var(--bg-card); border: 1px solid var(--bdr-light); padding: 1.35rem 1.5rem; max-width: 34rem; }
.bs-step .bs-card .bs-kicker { margin-bottom: .35rem; }
.bs-step .bs-card h3 { margin: 0 0 .6rem; font-size: 1.35rem; }
.bs-step .bs-card p { margin: 0; }
.bs-step .bs-card p + p { margin-top: .7rem; }
.bs-step .bs-card .bs-q { font-family: var(--font-serif); font-size: 1.12rem; color: var(--bs-gold); }
.bs-steps .bs-step + .bs-step { margin-top: 1.25rem; }
/* Static (default, no-JS, reduced motion): all layers shown; the steps follow the figure as plain text. */
.bs-stage [data-layer] { opacity: 1; }

/* Motion mode only */
html.bs-js:not(.bs-static) .bs-stage canvas { display: block; }
html.bs-js:not(.bs-static) .bs-stage.is-drawn img.bs-poster { visibility: hidden; }
html.bs-js:not(.bs-static) .bs-stage [data-layer] { opacity: 0; transition: opacity .55s var(--bs-ease), transform .55s var(--bs-ease); }
html.bs-js:not(.bs-static) .bs-stage [data-layer].is-ring { transform-box: fill-box; transform-origin: center; transform: scale(.82); }
html.bs-js:not(.bs-static) .bs-stage [data-layer].is-rise { transform: translateY(14px); }
html.bs-js:not(.bs-static) .bs-stage[data-layers~="labels"] [data-layer="labels"],
html.bs-js:not(.bs-static) .bs-stage[data-layers~="cards"] [data-layer="cards"],
html.bs-js:not(.bs-static) .bs-stage[data-layers~="hulls"] [data-layer="hulls"],
html.bs-js:not(.bs-static) .bs-stage[data-layers~="ring"] [data-layer="ring"],
html.bs-js:not(.bs-static) .bs-stage[data-layers~="question"] [data-layer="question"],
html.bs-js:not(.bs-static) .bs-stage[data-layers~="extB"] [data-layer="extB"],
html.bs-js:not(.bs-static) .bs-stage[data-layers~="extA"] [data-layer="extA"],
html.bs-js:not(.bs-static) .bs-stage[data-layers~="planlabels"] [data-layer="planlabels"] { opacity: 1; transform: none; }

/* W02 pacing. The step that scrubs the frame sequence (data-frames="from-to") keeps a long run so the assembly and
   the turn to plan stay smooth; the steps that only add an overlay layer are shorter, and the lead-in and run-out
   padding is trimmed. W01: 18vh + 4 x 78vh + 32vh = 362vh per story on desktop; W02: 10vh + 84vh + 3 x 52vh + 14vh
   = 264vh. Nothing is pinned outside its own section and scrolling stays native. */
@media (min-width: 960px) {
  html.bs-js:not(.bs-static) .bs-scrolly { --bs-colgap: clamp(2rem, 4vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--bs-colgap); }
  html.bs-js:not(.bs-static) .bs-stage-wrap { position: sticky; top: calc(var(--nav-h) + 4vh); align-self: start; }
  html.bs-js:not(.bs-static) .bs-steps { padding: 10vh 0 14vh; }
  html.bs-js:not(.bs-static) .bs-step { min-height: 52vh; display: flex; align-items: center; }
  html.bs-js:not(.bs-static) .bs-step[data-frames*="-"] { min-height: 84vh; }
  html.bs-js:not(.bs-static) .bs-steps .bs-step + .bs-step { margin-top: 0; }
  html.bs-js:not(.bs-static) .bs-step .bs-card { position: relative; opacity: .45; transition: opacity .4s var(--bs-ease), border-color .4s var(--bs-ease); }
  html.bs-js:not(.bs-static) .bs-step.is-active .bs-card { opacity: 1; border-color: rgba(207,168,112,.55); }
  /* the active card is tied to the stage by a gold rule across the column gap */
  html.bs-js:not(.bs-static) .bs-step .bs-card::before { content: ""; position: absolute; top: 2.1rem; left: calc(-1 * var(--bs-colgap)); width: var(--bs-colgap); height: 1px;
    background: linear-gradient(90deg, transparent, var(--bs-gold)); opacity: 0; transition: opacity .4s var(--bs-ease); }
  html.bs-js:not(.bs-static) .bs-step.is-active .bs-card::before { opacity: .8; }
  html.bs-js:not(.bs-static) .bs-step.is-active .bs-card { box-shadow: inset 3px 0 0 var(--bs-gold); }
}
@media (max-width: 959.98px) {
  html.bs-js:not(.bs-static) .bs-stage-wrap { position: sticky; top: var(--nav-h); z-index: 3; background: var(--bg-base); padding: .5rem 0 .6rem;
    margin: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem)); padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); }
  html.bs-js:not(.bs-static) .bs-stage-cap { display: none; }
  html.bs-js:not(.bs-static) .bs-steps { padding: 2vh 0 18vh; }
  html.bs-js:not(.bs-static) .bs-step { min-height: 42vh; }
  html.bs-js:not(.bs-static) .bs-step[data-frames*="-"] { min-height: 62vh; }
  html.bs-js:not(.bs-static) .bs-step .bs-card { opacity: .55; transition: opacity .35s var(--bs-ease); }
  html.bs-js:not(.bs-static) .bs-step.is-active .bs-card { opacity: 1; box-shadow: inset 3px 0 0 var(--bs-gold); }
}
/* Step position under the stage (motion mode only; decorative, the steps themselves are an ordered list). */
.bs-dots { display: none; }
html.bs-js:not(.bs-static) .bs-dots { display: flex; gap: .4rem; margin-top: .6rem; }
.bs-dots span { width: 1.6rem; height: 3px; background: rgba(237,232,222,.22); transition: background .3s var(--bs-ease); }
.bs-dots span.is-on { background: var(--bs-gold); }
.bs-dots span.is-done { background: rgba(207,168,112,.45); }
.bs-chapter--alt .bs-stage-wrap { background: transparent; }
@media (max-width: 959.98px) { html.bs-js:not(.bs-static) .bs-chapter--alt .bs-stage-wrap { background: var(--bg-raised); } }
/* Short landscape screens: never pin. */
@media (max-height: 560px) {
  html.bs-js:not(.bs-static) .bs-stage-wrap { position: relative !important; top: auto; }
  html.bs-js:not(.bs-static) .bs-step { min-height: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.bs-js:not(.bs-static) .bs-stage [data-layer], .bs-step .bs-card, .bs-step .bs-card::before, .bs-dots span { transition: none !important; }
}

/* ---------- document cards (six kinds) ---------- */
.bs-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; margin: 2rem 0 0; }
.bs-doc { background: var(--bs-paper); color: var(--bs-ink); padding: 1.3rem 1.4rem 1.4rem; border-top: 3px solid var(--bs-ink); position: relative; }
.bs-doc::after { content: ""; position: absolute; top: -3px; right: 0; width: 1.4rem; height: 1.4rem; background: linear-gradient(225deg, var(--bg-base) 50%, #d8d1c4 50%); }
.bs-chapter--alt .bs-doc::after { background: linear-gradient(225deg, var(--bg-raised) 50%, #d8d1c4 50%); }
.bs-doc h4 { font-family: var(--font-serif); font-size: 1.22rem; margin: 0 0 .8rem; color: var(--bs-ink); padding-right: 1.5rem; }
.bs-doc .bs-row + .bs-row { margin-top: .9rem; }
.bs-doc .bs-row > b { display: block; font: 600 .7rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-ink-muted); margin-bottom: .25rem; }
.bs-doc .bs-row.is-stop > b { color: var(--bs-gold-ink); }
.bs-doc .bs-src { display: block; font-size: .8rem; color: var(--bs-ink-muted); margin-top: .3rem; }
.bs-doc p { margin: 0; line-height: 1.55; font-size: .97rem; }
.bs-review .bs-doc .bs-clm { color: var(--bs-gold-ink); border-color: rgba(122,94,51,.5); }

/* ---------- figures ---------- */
.bs-fig { margin: 2.25rem 0; }
.bs-fig img { width: 100%; height: auto; display: block; }
.bs-fig figcaption { font-size: .9rem; color: var(--text-sec); margin-top: .8rem; max-width: var(--bs-measure); line-height: 1.6; }
.bs-fig figcaption .bs-fid { font: 600 .74rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-gold); margin-right: .5rem; }
.bs-fig figcaption b { color: var(--text-pri); font-weight: 600; }
.bs-fig figcaption .bs-lim { display: block; font-style: italic; margin-top: .3rem; }
.bs-fig--wide { max-width: 64rem; }
.bs-fig a.v2-figure-zoom { display: block; cursor: zoom-in; }
.bs-figtwo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin: 1.5rem 0 0; }
.bs-figtwo .bs-fig { margin: 0; }

/* Detail rows under an explainer */
.bs-detail { max-width: 62rem; margin: 1.5rem 0 0; }
.bs-detail-head { font: 600 .74rem var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bs-gold); padding-bottom: .6rem; border-bottom: 1px solid var(--accent); }
.bs-detail-row { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--bdr-light); }
.bs-detail-row h4 { font-family: var(--font-serif); font-size: 1.12rem; margin: 0; color: var(--text-pri); }
.bs-detail-row p { margin: 0; }
.bs-detail-row .bs-src { display: block; font-size: .82rem; color: var(--text-sec); margin-top: .35rem; }
.bs-detail-row .bs-lim-line { margin-top: .7rem; }
.bs-detail-row .bs-lim-line b { font: 600 .7rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-gold); margin-right: .5rem; }

/* ---------- three kinds of answer ---------- */
.bs-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 2rem 0 0; }
.bs-kind { background: var(--bs-panel); border: 1px solid var(--bdr-light); border-top: 3px solid var(--bs-gold); padding: 1.35rem 1.4rem; }
.bs-kind .bs-tag { display: block; font: 600 .76rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-gold); margin-bottom: .6rem; }
.bs-kind h4 { font-family: var(--font-serif); font-size: 1.18rem; margin: 0 0 .7rem; color: var(--text-pri); }
.bs-kind p { margin: 0; font-size: .97rem; }
.bs-kind p + p { margin-top: .75rem; }
.bs-kinds-note { margin-top: 1.25rem; color: var(--bs-gold); font-family: var(--font-serif); font-size: 1.1rem; max-width: var(--bs-measure); }

/* ---------- checklist ---------- */
.bs-checklist { list-style: none; padding: 0; margin: 2rem 0 0; max-width: 62rem; counter-reset: st; }
.bs-checklist > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 11rem; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--bdr-light); counter-increment: st; align-items: start; }
.bs-checklist > li:last-child { border-bottom: 1px solid var(--bdr-light); }
.bs-checklist .bs-n { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: var(--bs-ivory); color: var(--bs-navy); font-family: var(--font-serif); font-size: 1.15rem; }
.bs-checklist h4 { font-family: var(--font-serif); font-size: 1.18rem; margin: 0 0 .35rem; color: var(--text-pri); }
.bs-checklist p { margin: 0; }
.bs-checklist .bs-rec b { display: block; font: 600 .7rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-gold); }
.bs-checklist .bs-rec { font-size: .92rem; color: var(--text-sec); }
.bs-checklist label { display: inline-flex; gap: .5rem; align-items: center; margin-top: .6rem; font-size: .88rem; color: var(--text-sec); cursor: pointer; }
.bs-checklist input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--bs-gold); }
.bs-btnrow { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.bs-btn { font: 500 .92rem var(--font-sans); color: var(--text-pri); background: transparent; border: 1px solid var(--bs-gold); border-radius: 3px; padding: .65rem 1rem; cursor: pointer; text-decoration: none; }
.bs-btn:hover, .bs-btn:focus-visible { background: rgba(207,168,112,.12); }

/* ---------- worked example ---------- */
.bs-worked { width: 100%; max-width: 64rem; border-collapse: collapse; margin: 1.75rem 0 0; font-size: .97rem; }
.bs-worked th { text-align: left; font: 600 .72rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-sec); padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--accent); }
.bs-worked td { vertical-align: top; padding: 1rem .9rem 1rem 0; border-bottom: 1px solid var(--bdr-light); line-height: 1.55; }
.bs-worked td:first-child { font-weight: 600; color: var(--text-pri); width: 16%; }
.bs-worked td:nth-child(2) { width: 46%; color: var(--text-sec); }
.bs-worked strong { color: var(--text-pri); }

/* ---------- film and resources ---------- */
.bs-film { display: grid; grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-top: 1.5rem; }
.bs-film-frame { position: relative; aspect-ratio: 9 / 16; background: var(--bs-navy); border: 1px solid var(--bdr-light); overflow: hidden; }
.bs-film-frame img, .bs-film-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* W02 (keyboard QA): the local preview player had no visible focus ring; drawn inside the frame, which clips */
.bs-film-frame video:focus, .bs-film-frame video:focus-visible { outline: 3px solid var(--bs-gold); outline-offset: -3px; }
.bs-film-badge { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; background: rgba(11,16,24,.86); border: 1px solid var(--accent-line); padding: .6rem .75rem; font-size: .85rem; color: var(--text-pri); }
.bs-film-local { font-size: .85rem; color: var(--bs-gold); margin-top: .6rem; max-width: 20rem; }
.bs-status { display: inline-block; border: 1px dashed rgba(207,168,112,.6); color: var(--bs-gold); padding: .5rem .8rem; font-size: .9rem; margin-top: .75rem; }
.bs-cues { list-style: none; margin: 1.25rem 0 0; padding: 0; max-width: var(--bs-measure); }
.bs-cues li { padding: .35rem 0 .35rem 1rem; border-left: 1px solid var(--accent-line); color: var(--text-sec); font-size: .95rem; }
.bs-resources { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; margin-top: 2rem; }
.bs-res { background: var(--bg-card); border: 1px solid var(--bdr-light); border-top: 2px solid var(--accent); padding: 1.25rem 1.35rem; display: flex; flex-direction: column; }
.bs-res .bs-what { font: 600 .72rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-gold); }
.bs-res h4 { font-family: var(--font-serif); font-size: 1.18rem; margin: .4rem 0 .6rem; color: var(--text-pri); }
.bs-res p { margin: 0 0 1rem; color: var(--text-sec); font-size: .95rem; }
.bs-res a { margin-top: auto; color: var(--bs-gold); }
.bs-limits { list-style: none; padding: 0; margin: 1.5rem 0 0; max-width: var(--bs-measure); }
.bs-limits li { padding: .9rem 0; border-top: 1px solid var(--bdr-light); }
.bs-limits li strong { display: block; font: 600 .74rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-gold); margin-bottom: .2rem; }
.bs-statuspanel { border: 1px solid var(--bdr-light); background: var(--bg-card); padding: 1.4rem 1.5rem; max-width: var(--bs-measure); margin-top: 2rem; }
.bs-statuspanel .bs-lab { font: 600 .72rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-gold); }
.bs-statuspanel h4 { font-family: var(--font-serif); font-size: 1.15rem; margin: .5rem 0 .6rem; color: var(--text-pri); }
.bs-statuspanel p { margin: 0 0 .8rem; font-size: .95rem; }
.bs-sources { max-width: var(--bs-measure); padding-left: 1.4rem; font-size: .9rem; color: var(--text-sec); }
.bs-sources li + li { margin-top: .55rem; }
.bs-sources a { color: var(--accent-lt); word-break: break-word; }
.bs-principle { background: var(--bs-navy); border: 1px solid var(--accent-line); padding: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2.5rem; max-width: 62rem; }
.bs-principle .bs-lab { font: 600 .74rem var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bs-gold); }
.bs-principle p.bs-big { font-family: var(--font-serif); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin: .5rem 0 .5rem; color: var(--text-pri); }

/* ---------- W02 editorial grid and compositions ---------- */
/* Sections: a heading and its running text. One column below 1100 px; on wide screens the heading moves into a
   left rail and the text keeps a comfortable measure, so the page reads as a grid rather than a narrow column. */
.bs-sec { margin-top: 3rem; }
.bs-sec > h3 { margin: 0 0 1rem; }
.bs-sec-body > * + * { margin-top: 1.1rem; }
.bs-sec-body { max-width: var(--bs-measure); }
.bs-after { margin-top: 2rem; }
.bs-duo { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0; }
.bs-duo > .bs-lm, .bs-duo > .bs-aside, .bs-duo > .bs-read, .bs-duo > .bs-statuspanel { margin: 0; max-width: var(--bs-measure); }
.bs-duo--limits h3 { margin-top: 0; }
.bs-figside { display: grid; grid-template-columns: 1fr; gap: 0 2.5rem; align-items: center; margin: 2.25rem 0 0; }
.bs-figside .bs-fig { margin: 0 0 1.25rem; }
/* Chapter emblems: the component-library renders sit in the chapter header, on one base line with a gold rule.
   Decorative (aria-hidden, alt=""); shown only where there is room beside the title, never over text. */
.bs-chead-art { display: none; }
@media (min-width: 1100px) {
  .bs-article { --bs-rail: 13.5rem; --bs-gap: clamp(2.5rem, 3.5vw, 3.5rem); --bs-col: calc(var(--bs-rail) + var(--bs-gap)); }
  /* W02.1: the number moves from the rail's left edge to its right edge, next to the title; the title stays on the
     reading column (left edge at var(--bs-col)); the emblem keeps its own column on the right */
  .bs-chead { grid-template-columns: var(--bs-col) minmax(0, 46rem) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto; column-gap: 0; max-width: none; }
  .bs-chead .bs-num { justify-self: end; padding-right: 1rem; font-size: clamp(3.2rem, 2.4rem + 2vw, 4.4rem); line-height: .6; }
  /* a flexible first row takes the emblem's extra height, so the text block sits on the emblem's base line and the
     kicker-to-title spacing is the same with or without an emblem */
  .bs-chead .bs-kicker { grid-row: 2; }
  .bs-chead h2, .bs-chead .bs-num { grid-row: 3; }
  .bs-chead .bs-formal { grid-row: 4; }
  .bs-chead-art { grid-column: 3; grid-row: 1 / span 4; align-self: end; justify-self: end; margin-left: var(--bs-gap); }
  .bs-chead-art { display: flex; align-items: flex-end; justify-content: flex-end; height: 8.5rem; padding: 0 .25rem .55rem; border-bottom: 1px solid rgba(207,168,112,.45); }
  .bs-chead-art img { display: block; height: 100%; width: auto; opacity: .92; }
  .bs-chead-art .m-board { height: 96%; }
  .bs-chead-art .m-stud { height: 112%; margin-bottom: -.15rem; }
  .bs-chead-art .m-brick { height: 84%; }
  .bs-chead-art .m-ins { height: 82%; }
  /* running text keeps to the text column, aligned under the chapter title */
  .bs-wrap > .bs-read, .bs-wrap > .bs-lm, .bs-wrap > .bs-reading, .bs-wrap > .bs-aside, .bs-wrap > .bs-small { margin-left: var(--bs-col); }
  .bs-sec { display: grid; grid-template-columns: var(--bs-rail) minmax(0, var(--bs-measure)); column-gap: var(--bs-gap); align-items: start; margin-top: 3.5rem; }
  .bs-sec > h3 { margin: 0; padding-top: .8rem; border-top: 2px solid rgba(207,168,112,.6); font-size: 1.28rem; line-height: 1.3; }
  .bs-sec-body { padding-top: .8rem; border-top: 1px solid var(--bdr-light); }
  /* wide pieces use the full container, aligned to the same left edge as the chapter number */
  .bs-compare, .bs-checklist, .bs-worked, .bs-principle { max-width: none; }
  .bs-compare > div { padding: 1.5rem 1.75rem; }
  .bs-checklist > li { grid-template-columns: 3rem minmax(0, 44rem) minmax(10rem, 1fr); column-gap: 2rem; }
  .bs-detail { max-width: none; }
  .bs-detail-row { grid-template-columns: var(--bs-rail) minmax(0, var(--bs-measure)); column-gap: var(--bs-gap); }
  .bs-fig--wide { max-width: calc(var(--bs-col) + var(--bs-measure) + 6rem); }
  /* static story (no JS, reduced motion, motion switched off): the figure at the same width as the other wide
     figures, and its four steps as a 2 x 2 grid beneath it instead of a narrow column */
  html:not(.bs-js) .bs-stage-fig, html.bs-static .bs-stage-fig { max-width: calc(var(--bs-col) + var(--bs-measure) + 6rem); }
  html:not(.bs-js) .bs-steps, html.bs-static .bs-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem;
    max-width: calc(var(--bs-col) + var(--bs-measure) + 6rem); margin-top: 1.5rem; }
  html:not(.bs-js) .bs-steps .bs-step + .bs-step, html.bs-static .bs-steps .bs-step + .bs-step { margin-top: 0; }
  html:not(.bs-js) .bs-step .bs-card, html.bs-static .bs-step .bs-card { max-width: none; height: 100%; }
  .bs-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bs-gap); align-items: start; }
  .bs-duo--intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
  .bs-duo--limits { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .bs-duo--limits .bs-statuspanel { margin-top: 0; }
  .bs-figside { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .bs-figside .bs-fig { margin: 0; }
  .bs-figside > .bs-read { margin: 0; }
  .bs-film { grid-template-columns: 18rem minmax(0, var(--bs-measure)); column-gap: var(--bs-gap); }
  .bs-film-frame, .bs-film-local { max-width: 18rem; }
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .bs-article { --bs-rail: 11rem; }
}

/* ---------- responsive ---------- */
@media (max-width: 959.98px) {
  .bs-kinds { grid-template-columns: 1fr; }
  .bs-figtwo { grid-template-columns: 1fr; }
  .bs-film { grid-template-columns: 1fr; }
  .bs-film-frame { max-width: 20rem; }
  .bs-tocbar .bs-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .bs-compare { grid-template-columns: 1fr; }
  .bs-detail-row { grid-template-columns: 1fr; gap: .5rem; }
  .bs-checklist > li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .bs-checklist .bs-rec { grid-column: 2; }
  .bs-chead { grid-template-columns: 1fr; }
  .bs-chead .bs-num { margin-bottom: .5rem; }
  .bs-worked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bs-worked, .bs-worked tbody, .bs-worked tr, .bs-worked td { display: block; width: auto !important; }
  .bs-worked tr { border-top: 1px solid var(--accent); padding: .8rem 0; }
  .bs-worked td { border: 0; padding: .25rem 0; }
  .bs-worked td::before { content: attr(data-label); display: block; font: 600 .68rem var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-sec); margin-top: .4rem; }
  .bs-worked td:first-child::before { display: none; }
  .bs-motif { display: none; }
  /* Phone stage is ~360 px wide (scale ~0.22): small stage text would fall below a readable size, so only the
     question stays on the stage; the step cards and caption carry every label. */
  .bs-ov text:not(.t-q) { display: none; }
  .bs-ov [data-role="badge"] { display: none; }   /* W02: no orphan letter discs once their letters are hidden */
  .bs-ov .t-q { font-size: 58px; }
  .bs-mast-art { justify-content: flex-start; }
}

/* ---------- print (whole article, or the checklist alone) ---------- */
@media print {
  .site-header, .nav, header, footer, .bs-progress, .bs-tocbar, .bs-motion, .bs-btnrow, .p7-breadcrumb, #cookie-banner, .consent, .bs-motif, .bs-dots, .bs-chead-art { display: none !important; }
  body, .p7-page, .bs-chapter, .bs-chapter--alt { background: #fff !important; color: #000 !important; }
  .bs-article * { color: #000 !important; }
  .bs-stage-wrap { position: static !important; }
  .bs-step .bs-card { opacity: 1 !important; }
  html.bs-print-checklist .bs-article > *:not(#ch-6) { display: none !important; }
  html.bs-print-checklist #ch-6 > .bs-wrap > *:not(.bs-checklist-wrap) { display: none !important; }
  /* W02 (print QA): the site bar (.site-nav) and the decorative masthead art printed; the checklist sheet now keeps
     only the title block (title, subtitle, provenance) above the six steps, and no step splits across pages */
  .site-nav, .bs-mast-art { display: none !important; }
  .p7-mast, .p7-mast * { color: #000 !important; }
  html.bs-print-checklist .p7-mast-copy, html.bs-print-checklist .p7-mast-index, html.bs-print-checklist .p7-breadcrumb { display: none !important; }
  .bs-checklist > li, .bs-doc, .bs-kind, .bs-detail-row, .bs-worked tr { break-inside: avoid; }
  .bs-sec, .bs-duo, .bs-figside { display: block !important; }
}

/* W03 integration: a released film embed (iframe) fills the same 9:16 frame as the poster, with a visible focus ring. */
.bs-film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.bs-film-frame iframe:focus-visible, .bs-film-frame.is-focus { outline: 3px solid var(--bs-gold); outline-offset: 3px; }
/* W03: release placeholders ([...]) are visible in review builds; a release build must contain none (w03_package.py). */
.bs-ph { color: var(--bs-gold); font-style: italic; }
/* W03 (print QA): the site enquiry band added at integration printed as an extra page; it is not printed (this
   stylesheet loads on this page only). */
@media print { .p7-enquiry { display: none !important; } }