/* B version. Page-local extension. Article typography and illustration remain the source. */
body.pencil-on .pencil-trace{stroke-dasharray:1;stroke-dashoffset:var(--pencil-offset,0);fill-opacity:var(--pencil-fill-opacity,1)}
body.pencil-on [data-pencil-fill="true"]{stroke:var(--pencil-fill);stroke-width:1.1}
.pencil-loading .opening-world svg{opacity:0}
.pencil-tool{pointer-events:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.continuity-corner,.static-continuity{display:none}
@media print{.continuity-layer{display:none}body.pencil-on .pencil-trace{stroke-dasharray:none;stroke-dashoffset:0;fill-opacity:1}.pencil-loading .opening-world svg{opacity:1}}

/* Review controls, only present with ?inspect=1. */
.variant-label{opacity:1;font-size:11px;display:flex;gap:14px}
.pencil-replay,.pencil-toggle{font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid currentColor;padding:3px 0;cursor:pointer}
.pencil-replay:disabled{opacity:.35;cursor:default}

/* Chapter one's editorial opening transitions into material, then product. */
[data-world="interest"] [data-part="inspiration"]{opacity:var(--inspiration-opacity,1)}
[data-world="interest"] [data-part="chair"]{opacity:var(--chapter-product-reveal,0)!important}

/* The route and its marks in the house palette: ink on light, gesso on the dark chapter. */
.journey-line{stroke:var(--ink);stroke-width:1.5;opacity:.7}
.continuity-inverse .journey-line{stroke:var(--gesso);opacity:.82}
.journey-icon{stroke:var(--ink);stroke-width:1.5;fill:none}
.journey-annotation{stroke-width:1.8}
.continuity-inverse .journey-icon{stroke:var(--gesso)}

/* Connectors and the nib must remain above the sticky illustration surface. */
.continuity-layer{z-index:5}

/* Performance: the obstacle window, mask cache and stage culling in pencil-b.js bound the per-frame cost.
   content-visibility was tried and removed: it produced stale paint after long anchor jumps in headless Chrome. */

/* Rhythm: no gap between regions larger than a viewport. Desktop and tablet only; phones keep the base sizes. */
@media(min-width:701px){
.opening{min-height:0;padding:44px 5.5vw 64px}
.opening-world .world{max-width:640px}
.opening-copy{margin-top:24px}
.opening-pull{margin-top:64px}
@media(min-width:1001px){
  /* The opening copy and the pull line share one row under the hero. */
  .opening-copy{grid-column:1;grid-row:2;margin-top:8px}
  .opening-pull{grid-column:2;grid-row:2;align-self:start;margin-top:16px;font-size:clamp(30px,3vw,46px)}
}
.chapter h2{font-size:clamp(48px,5.4vw,80px)}
.chapter-map{margin:0 5.5vw 40px}
.chapter-map>.meta{margin:20px 0 22px}
.chapter-map>a{padding:16px 30px 16px 0}
.chapter,.chapter-03{padding-top:56px}
.chapter-heading{margin-bottom:44px}
.reading-beat{padding-bottom:44px;min-height:0}
.reading-beat:nth-child(3){padding-top:0;padding-bottom:56px}
.question{padding:36px 0 44px;margin-top:20px}
.question p{font-size:clamp(30px,3vw,44px)}
.essay{margin-bottom:36px;font-size:20px;line-height:1.55}
.flowing>p{margin-bottom:24px}
.chapter-01 .chapter-prose{font-size:20px}
.essay>p:has(>strong){font-size:32px}
.system-essay>p:has(>strong){margin:44px 0 36px auto}
.system-essay .seven-parts{margin:44px 0}
.system-essay .seven-parts li{padding:20px 0 24px 38px;font-size:19px}
.system-essay .seven-parts strong{font-size:28px}
.system-essay .seven-parts li:before{top:26px}
.closing{padding:56px 5.5vw 48px}
.closing-content{font-size:19px}
.closing-content h2{margin:44px 0 28px}
.keep{margin-top:40px}

.scene-beat{font-size:20px;line-height:1.55}
.scene-beat>p{margin-bottom:28px}
.scene-beat>p:last-child{margin-bottom:0}
.flowing.scene-beat .chapter-sub{font-size:28px;margin-bottom:34px}
}
@media(min-width:1001px){.essay>p:has(>strong){margin:40px -90px}.essay .evidence{margin:44px -90px}}
/* Chapter one keeps its sticky world beside all five beats; its size is bounded by viewport height.
   Sticky scene openers: the exhibition holds at about 64vw while the first reading beat scrolls past, then releases. */
@media(min-width:1001px){
  .graphic-story,.chapter-03 .graphic-story{height:auto;min-height:0;margin:-12px -5.5vw 64px -5.5vw;display:grid;grid-template-columns:minmax(0,64fr) minmax(0,36fr);column-gap:2.5vw;align-items:start}
  .graphic-story>.exhibition{position:sticky;top:max(24px,calc(50vh - 26vw));margin:0}
  .graphic-story>.exhibition svg{height:auto;max-height:calc(100vh - 150px)}
  .graphic-story>.exhibition figcaption{padding:0 2vw 0 5.5vw}
  .graphic-story>.scene-beat{padding:28vh 5.5vw 16vh 0;max-width:none}
}
@media(max-width:1000px){
  .graphic-story,.chapter-03 .graphic-story{height:auto;min-height:0;margin:0 0 48px}
  .graphic-story>.exhibition{position:static}
  .graphic-story>.exhibition svg{height:auto;max-height:70vh}
  .graphic-story>.scene-beat{max-width:650px;margin:40px auto 0}
}

/* The Motion control keeps one visible label; pressed means reduced. The text node read.js writes is hidden visually, the accessible name is set once by script. */
.motion-toggle{font-size:0!important;color:transparent;line-height:0}
.motion-toggle::after{content:'Reduce motion';font-size:11px;line-height:1.6;color:var(--ink);letter-spacing:.025em}
.motion-toggle[aria-pressed="true"]{background:var(--ink)}
.motion-toggle[aria-pressed="true"]::after{color:var(--gesso)}
@media(max-width:700px){.motion-toggle::after{font-size:9px}}

/* New authored exhibitions: the same ink line, one red accent. */
.exhibition[data-art] svg{overflow:visible}

/* Ending: the logo test drawing, then the request as a real button. */
.closing-note .world{max-width:440px}
.closing-content>.closing-cta{background:var(--red);color:var(--gesso);border:0;border-radius:2px;min-height:56px;padding:0 26px;gap:28px;align-items:center;justify-content:space-between}
.closing-content>.closing-cta:hover{background:var(--ink)}
.closing-content>.closing-cta:focus-visible{outline-color:var(--ink)}
.closing-content>.closing-alt{margin:40px 0 0 28px;gap:20px;font-size:15px}
/* The parked pencil and the route's end need clear air beneath the chapter 3 and 4 drawings. */
.chapter-03 .graphic-story>.exhibition figcaption,.chapter-04 .graphic-story>.exhibition figcaption{padding-top:36px}

/* Mobile: no route, no rail, nothing floating over prose. The sketch sits above the headline. */
@media(max-width:700px){
  .journey-line,.journey-icon{display:none}
  .opening{display:flex;flex-direction:column;padding-top:12px}
  .opening-world{order:-1;margin:0 0 6px;align-self:flex-end}
  .opening-world .world{max-width:none;margin:0}
  .opening-world .world svg{height:46vw;width:auto;margin-left:auto}
  .opening-world figcaption{display:none}
  .opening-type{order:0}
  .chapter-01 .art-track{position:static;box-shadow:none;height:auto;padding:0}
  .chapter-01 .art-track .world{max-width:none}
  .chapter-01 .art-track svg{max-height:280px!important;height:auto!important;width:100%}
  .chapter{padding-top:52px}
  .chapter-heading{margin-bottom:30px}
  .closing-content>.closing-cta{width:100%}
  .closing-content>.closing-alt{margin:22px 0 0;display:inline-flex}
}

/* TL;DR panel. Ink ground, gesso type, the house red for the one action. */
.opening-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;margin-top:36px}
.opening-actions .text-link{margin:0!important}
.tldr-open{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;padding:0 22px;background:var(--red);color:var(--gesso);border:0;border-radius:2px;font:inherit;font-size:16px;cursor:pointer;transition:background .25s cubic-bezier(.16,1,.3,1),transform .15s}
.tldr-open:hover{background:var(--ink)}.tldr-open:active{transform:scale(.98)}.tldr-open:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
html.tldr-lock,html.tldr-lock body{overflow:hidden}
dialog.tldr{width:min(920px,calc(100% - 32px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;border-radius:2px;background:var(--ink);color:var(--gesso);overflow:auto;overscroll-behavior:contain}
dialog.tldr::backdrop{background:rgba(26,24,21,.72)}
.tldr-inner{padding:clamp(24px,4.5vw,56px)}
.tldr-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:clamp(22px,3vw,36px)}
.tldr-eyebrow{margin:0;font-family:MontrealMono,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C8C2B5}
.tldr-close{background:none;border:1px solid rgba(237,235,229,.4);color:var(--gesso);font:inherit;font-family:MontrealMono,monospace;font-size:12px;padding:9px 14px;cursor:pointer}
.tldr-close:hover{background:var(--gesso);color:var(--ink)}
dialog.tldr :focus-visible{outline:2px solid var(--gesso);outline-offset:4px}
dialog.tldr h2{margin:0;font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.045em;font-weight:500;max-width:15ch}
.tldr-lede{margin:22px 0 0;font-size:clamp(18px,1.7vw,22px);line-height:1.4;max-width:46ch;color:#D2CEC4}
.tldr-list{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;display:grid;gap:0}
.tldr-list>li{display:grid;gap:10px;padding:24px 0;border-top:1px solid rgba(237,235,229,.2)}
.tldr-chapter{display:flex;gap:18px;align-items:baseline;text-decoration:none;color:var(--gesso)}
.tldr-n{font-family:MontrealMono,monospace;font-size:12px;color:#E5584E}
.tldr-t{font-size:clamp(22px,2.4vw,30px);line-height:1.12;letter-spacing:-.03em}
.tldr-chapter:hover .tldr-t{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px}
.tldr-point{margin:0 0 0 38px;font-size:clamp(16px,1.35vw,18px);line-height:1.5;color:#D2CEC4;max-width:62ch}
.tldr-ask{margin:2px 0 0 38px;font-size:15px;line-height:1.45;color:var(--gesso);max-width:62ch}
.tldr-ask span{display:block;font-family:MontrealMono,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#BBB5A8;margin-bottom:4px}
.tldr-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;padding-top:28px;border-top:1px solid rgba(237,235,229,.2)}
.tldr-go{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:56px;padding:0 26px;background:var(--red);color:var(--gesso);text-decoration:none;border-radius:2px;font-size:17px}
.tldr-go:hover{background:var(--gesso);color:var(--ink)}
.tldr-alt{color:#D2CEC4;font-size:15px;max-width:34ch;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(237,235,229,.4)}
@media(min-width:900px){.tldr-list{grid-template-columns:1fr 1fr;column-gap:48px}.tldr-list>li:nth-child(2){border-top:1px solid rgba(237,235,229,.2)}}
@media(max-width:700px){.opening-actions{flex-direction:column;align-items:stretch;gap:18px}.tldr-open{width:100%}.opening-actions .text-link{align-self:flex-start}.tldr-point,.tldr-ask{margin-left:0}.tldr-go{width:100%}dialog.tldr{max-height:calc(100dvh - 24px);width:calc(100% - 20px)}}
@media(prefers-reduced-motion:no-preference){dialog.tldr[open]{animation:tldr-in .28s cubic-bezier(.16,1,.3,1)}@keyframes tldr-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}
@media print{dialog.tldr,.tldr-open{display:none}}

/* TL;DR v2: the gems, not the chapter openers. */
.tldr-pull{margin:clamp(26px,3.4vw,40px) 0 0;font-size:clamp(24px,2.8vw,36px);line-height:1.14;letter-spacing:-.035em;max-width:24ch;color:var(--gesso);border-left:2px solid var(--red);padding-left:22px}
.tldr-gems{display:grid;gap:0;margin-top:clamp(26px,3.4vw,40px)}
.tldr-gem{display:grid;gap:12px;padding:24px 0;border-top:1px solid rgba(237,235,229,.2);align-content:start}
.tldr-src,.tldr-block a{font-family:MontrealMono,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#E5584E;text-decoration:none}
.tldr-src:hover,.tldr-block a:hover{text-decoration:underline;text-underline-offset:4px}
.tldr-big{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.025em;max-width:34ch}
.tldr-stat{margin:6px 0 0;font-size:15px;line-height:1.45;color:#D2CEC4;max-width:58ch}
.tldr-stat strong{font-family:Founders,sans-serif;font-size:34px;line-height:.9;color:#E5584E;margin-right:8px;font-weight:400}
.tldr-caveat{margin:0;font-size:13px;line-height:1.5;color:#A9A396;max-width:58ch}
.tldr-block{padding:24px 0;border-top:1px solid rgba(237,235,229,.2)}
.tldr-label{margin:0 0 14px;font-family:MontrealMono,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#BBB5A8}
.tldr-parts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tldr-parts li{border:1px solid rgba(237,235,229,.35);border-radius:999px;padding:7px 14px;font-size:15px;line-height:1.2}
.tldr-qs{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:tq}
.tldr-qs li{counter-increment:tq;display:grid;grid-template-columns:32px 1fr;gap:6px}
.tldr-qs li::before{content:counter(tq,decimal-leading-zero);font-family:MontrealMono,monospace;font-size:12px;color:#E5584E;padding-top:3px}
.tldr-qs a{font-family:inherit;font-size:16px;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--gesso);text-decoration:none}
.tldr-qs a:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.tldr-foot{margin-top:8px}
@media(min-width:900px){.tldr-gems{grid-template-columns:1fr 1fr;column-gap:48px}.tldr-gem:nth-child(2){grid-row:span 2}.tldr-gem:nth-child(3){grid-column:1}}
@media(max-width:700px){.tldr-pull{padding-left:16px;font-size:24px}.tldr-qs li{grid-template-columns:28px 1fr}}

/* Widescreen: the guide holds a comfortable centred maximum width. Wider viewports grow the side gutters, not the page; the prose column and mobile sizes are unchanged. Below 1618px the gutter resolves to the authored 5.5vw. */
:root{--page-gutter:max(5.5vw,calc((100% - 1440px)/2))}
@media(min-width:701px){
.site-header{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.opening{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.chapter-map{margin-left:var(--page-gutter);margin-right:var(--page-gutter)}
.chapter{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.closing{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.sources{margin-left:var(--page-gutter);margin-right:var(--page-gutter)}
footer{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
}
@media print{.site-header,.opening,.chapter,.closing,.chapter-map,.sources,footer{padding-left:20px;padding-right:20px;margin-left:20px;margin-right:20px}}