/* Reader-driven diagrams: one full-bleed opening, then contained white figures. */
#etr-story{--scene-serif:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Georgia,serif;--scene-sans:-apple-system,BlinkMacSystemFont,ui-sans-serif,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;--scene-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--scene-accent:#c74332;--scene-pin:72px;--scene-travel:440svh;--scene-height:max(640px,calc(100svh - var(--scene-pin)));--editorial-gutter:clamp(20px,calc(11.71875vw - 70px),80px);--editorial-width:1180px;--motion-ease-out:cubic-bezier(0.23,1,0.32,1);--motion-feedback:160ms}
#etr-story .scene-scroll{--scene-height:max(640px,calc(100svh - var(--scene-pin)));position:relative;padding:0!important;margin:0 auto;background:#fff!important;color:#182126;font-family:var(--scene-sans);max-width:var(--editorial-width);width:calc(100% - var(--editorial-gutter)*2);scroll-margin-top:var(--scene-pin);overflow:visible!important}
#etr-story .scene-scroll[data-scroll-ready="true"]{height:calc(var(--scene-height) + var(--scene-travel))}
#etr-story .scene-stage{position:relative;box-sizing:border-box;height:var(--scene-height);min-height:640px;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto minmax(200px,1fr) auto auto;column-gap:36px;row-gap:20px;padding:26px 0 24px;overflow:hidden;background:#fff;color:#182126;isolation:isolate;border-top:0}
#etr-story [data-scroll-ready="true"]>.scene-stage{position:sticky;top:var(--scene-pin)}
#etr-story .scene-heading{position:relative;inset:auto;grid-column:1/-1;grid-row:1;z-index:3;display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:end;width:auto;max-width:none;pointer-events:none;text-align:left}
#etr-story .scene-heading :is(h1,h2),#etr-story :is(#etr-manufacturing,#etr-laminate) .scene-heading h2{font:500 clamp(32px,3.6vw,52px)/1.04 var(--scene-serif);letter-spacing:-.015em;color:#182126;max-width:none;margin:0;text-wrap:balance}
#etr-story .scene-heading p{font:400 clamp(15px,1.25vw,18px)/1.5 var(--scene-sans);color:#566169;max-width:43ch;margin:0 0 3px}
#etr-story .scene-art{position:relative;inset:auto;grid-column:1/-1;grid-row:2;min-width:0;min-height:200px;width:100%;height:100%;z-index:0}
#etr-story .scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
#etr-story .scene-canvas[data-dragging="true"]{cursor:grabbing}
#etr-story .scene-flat{position:absolute;inset:0;opacity:1;pointer-events:none}
#etr-story [data-scene-renderer="webgl"] .scene-flat{visibility:hidden}
#etr-story .scene-flat :is(.mechanism-mount,.em-mechanism,.em-graphic,.mf-stage,.el-stage){position:relative;min-height:0!important;width:100%!important;max-width:none!important;height:100%!important;aspect-ratio:auto;margin:0!important;padding:0!important;background:transparent!important}
#etr-story .scene-flat .em-svg{width:100%;height:100%;display:block;margin:0}
#etr-story .scene-flat :is(.em-callout,.em-key,.em-caption,.pa-overlay,.pa-key,.mf-stage-label,.mf-stage-note,.el-fibers,.el-camera){display:none!important}
#etr-story .scene-flat :is(canvas,.mf-poster){position:absolute;inset:0;width:100%;height:100%}
#etr-story .scene-legacy[hidden]{display:none!important}
#etr-story .scene-leaders{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;overflow:visible}
#etr-story .scene-leaders path{fill:none;stroke:#7c898f;stroke-width:1;opacity:0;stroke-dasharray:none;stroke-dashoffset:0;transition:opacity var(--motion-feedback) var(--motion-ease-out)}
#etr-story .scene-leaders>g>circle{fill:var(--scene-accent);stroke:#fff;stroke-width:3;opacity:0;transition:opacity var(--motion-feedback) var(--motion-ease-out)}
#etr-story .scene-leaders [data-on="true"] :is(path,circle){opacity:1}
#etr-story .scene-anchor-number{display:none}
#etr-story .scene-labels{list-style:none;margin:0;padding:14px 0 0;border-top:0;position:relative;inset:auto;grid-column:1/-1;grid-row:3;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;pointer-events:none;counter-reset:labels}
#etr-story [data-label-count="4"] .scene-labels{grid-template-columns:repeat(4,minmax(0,1fr))}
#etr-story .scene-labels li,#etr-story [data-label-count="4"] .scene-labels li{position:relative;inset:auto;width:auto;text-align:left;opacity:1;display:flex;gap:10px;align-items:start;line-height:1.45}
#etr-story [data-scroll-ready="true"] .scene-labels li{opacity:0;transform:none;transition:opacity var(--motion-feedback) var(--motion-ease-out)}
#etr-story [data-scroll-ready="true"] .scene-labels li[data-on="true"]{opacity:1}
#etr-story .scene-labels strong{font-size:14px;line-height:1.3;font-weight:600;display:block;color:#182126}
#etr-story .scene-labels li div>span{display:block;font-size:13px;line-height:1.45;color:#566169;margin-top:4px}
#etr-story .scene-badge{display:flex;flex:none;width:22px;height:22px;align-items:center;justify-content:center;border:1px solid #c9d0d4;border-radius:50%;background:#fff;color:var(--scene-accent);font:600 12px var(--scene-mono)}
#etr-story .scene-caption{position:relative;inset:auto;grid-column:1;grid-row:4;align-self:center;z-index:3;max-width:65ch;font-size:12px;line-height:1.5;color:#566169;margin:0}
#etr-story .scene-caption a{color:#182126;text-underline-offset:3px}
#etr-story .scene-scrubber{position:relative;inset:auto;grid-column:2;grid-row:4;align-self:center;width:100%;z-index:4;display:none;grid-template-columns:auto minmax(70px,1fr) auto;gap:0 12px;align-items:center}
#etr-story [data-scroll-ready="true"] .scene-scrubber{display:grid}
#etr-story .scene-scrubber label{font-size:12px;white-space:nowrap;color:#566169}
#etr-story .scene-scrubber input{width:100%;min-width:0;height:44px;accent-color:var(--scene-accent);margin:0;cursor:ew-resize}
#etr-story .scene-view,#etr-story #etr-manufacturing .scene-view{grid-column:3;background:none;border:0;color:#566169;font:400 12px var(--scene-sans);min-height:44px;text-align:right;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
#etr-story .scene-view:hover{color:#182126}
#etr-story .scene-photo{position:absolute;inset:0;z-index:1;pointer-events:none}
#etr-story .scene-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
#etr-story .scene-photo-shade{position:absolute;inset:0;background:linear-gradient(110deg,#0009,transparent 66%),linear-gradient(180deg,#0003,transparent 50%,#0007)}
#etr-story .scene-photo-credit{position:absolute;right:6%;bottom:34px;z-index:4;margin:0;color:#fff;font-size:12px;line-height:1.5}
#etr-story .scene-photo-credit a{color:inherit;text-underline-offset:3px}
#etr-story .scene-hint{position:absolute;z-index:3;bottom:36px;left:6%;font-size:13px;color:#fff;margin:0}
#etr-story .scene-hint span{margin-left:12px}
#etr-story #story-opening{--scene-pin:0px;width:100%;max-width:none;margin:0}
#etr-story #story-opening .scene-stage{grid-template-rows:112px minmax(220px,1fr) auto auto;border:0;padding:84px max(80px,calc((100vw - 1180px)/2)) 28px}
#etr-story #story-opening .scene-heading{grid-template-columns:1fr 1fr;align-self:center;align-items:center}
#etr-story #story-opening .scene-heading h1{font-size:clamp(38px,4.2vw,60px)}
#etr-story #story-opening .scene-heading h1 br{display:none}
/* A decorative photo title crossfades independently; the reading grid never moves. */
#etr-story .scene-photo-intro{display:none}
#etr-story #story-opening[data-scroll-ready="true"] .scene-heading{opacity:var(--scene-heading-opacity,0)}
#etr-story #story-opening[data-scroll-ready="true"] .scene-photo-intro{display:block;position:absolute;z-index:3;top:clamp(110px,14svh,150px);left:6%;width:45%;max-width:600px;pointer-events:none;color:#fff;opacity:var(--scene-photo-title-opacity,1)}
#etr-story #story-opening .scene-photo-title{font:500 clamp(64px,8.6vw,124px)/.97 var(--scene-serif);letter-spacing:-.02em;color:inherit;margin:0 0 24px;text-wrap:balance}
#etr-story #story-opening .scene-photo-intro>p:not(.scene-photo-title){font:400 clamp(15px,1.25vw,18px)/1.5 var(--scene-sans);color:inherit;max-width:35ch;margin:0}
#etr-story #story-opening[data-photo-ink="dark"] .scene-photo-intro{color:#182126}
/* Contrast follows the photographic crossfade independently of the layout reveal. */
#etr-story #story-opening[data-photo-ink="dark"] :is(.scene-photo-credit,.scene-hint){color:#182126}
#etr-story [data-scroll-scene="system"]:not([data-scroll-ready="true"]) .scene-photo{display:none}
#etr-story [data-scroll-scene="made"] .scene-stage{grid-template-rows:auto 58px minmax(200px,1fr) auto auto}
#etr-story [data-scroll-scene="made"] .scene-art{grid-row:3}
#etr-story [data-scroll-scene="made"] .scene-labels{grid-row:4}
#etr-story [data-scroll-scene="made"] :is(.scene-caption,.scene-scrubber){grid-row:5}
#etr-story .scene-route{position:relative;inset:auto;grid-column:1;grid-row:2;z-index:4;align-self:start;justify-self:start;display:flex;border:1px solid #c9d0d4;border-radius:0;overflow:hidden}
#etr-story .scene-route button,#etr-story #etr-manufacturing .scene-route button{background:#fff;color:#566169;border:0;font:500 12px var(--scene-sans);padding:8px 14px;min-height:44px;cursor:pointer}
#etr-story .scene-route button+button{border-left:1px solid #c9d0d4}
#etr-story .scene-route button[aria-pressed="true"],#etr-story #etr-manufacturing .scene-route button[aria-pressed="true"]{background:#182126;color:#fff}
#etr-story .scene-steps{position:relative;inset:auto;grid-column:2;grid-row:2;z-index:3;width:auto;pointer-events:none}
#etr-story .scene-steps ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:0;border:0;gap:12px}
#etr-story .scene-steps li{font-size:12px;color:#566169;opacity:.7}
#etr-story .scene-steps li[data-active="true"]{opacity:1;color:#c74332}
#etr-story .scene-steps p{font-size:12px;line-height:1.45;margin:6px 0 0;max-width:46ch;color:#566169;min-height:0}
#etr-story .scene-fallback-note{position:relative;inset:auto;grid-column:1/-1;grid-row:2;align-self:end;justify-self:start;margin:0;z-index:3;font-size:12px;line-height:1.5;color:#566169;max-width:50%;background:#fff;padding:4px 0}
#etr-story [data-scroll-scene="made"] .scene-fallback-note{grid-row:3}
#etr-story [data-scene-renderer="diagram"] .scene-leaders{display:none}
#etr-story [data-scene-renderer="diagram"] .scene-labels li{opacity:1;transform:none}
#etr-story .scene-scroll :focus-visible{outline:3px solid #c74332;outline-offset:4px}
#etr-story .scene-scroll ::selection{background:#f3c5bd;color:#182126}
#etr-story .scene-scroll[data-scene-static="true"]{height:auto}
#etr-story [data-scene-static="true"]>.scene-stage{position:relative;top:0}
#etr-story[data-motion-paused="true"] .scene-leaders path,#etr-story[data-motion-paused="true"] .scene-labels li,#etr-story[data-motion-paused="true"] :is(.scene-leaders circle,.scene-anchor-number),#etr-story [data-scene-input="manual"] :is(.scene-labels li,.scene-leaders path,.scene-leaders circle,.scene-anchor-number){transition:none}
#etr-story .scene-scrubber[data-photo="true"]{opacity:0;pointer-events:none}
#etr-story .scene-scrubber[data-photo="true"]:focus-within{opacity:1;pointer-events:auto;background:#fff;padding:4px 10px}
#etr-story .scene-stage:has(.scene-scrubber:focus-within) .scene-photo-credit{bottom:112px}
#etr-story .scene-scroll:not([data-scroll-ready="true"]) :is(.scene-route,.scene-photo-credit,.scene-hint){display:none}
#etr-story .scene-static-plate{width:100%;height:100%;display:block}
#etr-story [data-scroll-ready="true"] .scene-static-plate{display:none}
#etr-story #etr-manufacturing :is(.scene-canvas,.scene-flat canvas){position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto}
#etr-story [data-photo-revealed="false"] :is(.scene-labels,.scene-anchor-number){visibility:hidden}
#etr-story .scene-scroll:not([data-scene-renderer="webgl"]) .scene-canvas{visibility:hidden;pointer-events:none}
#etr-story .scene-scroll:not([data-scene-renderer="webgl"]) .scene-leaders{display:none}
@media(max-width:899px){
 #etr-story{--scene-pin:56px;--scene-height:max(780px,calc(100svh - var(--scene-pin)))}
 #etr-story .scene-scroll{--scene-height:max(780px,calc(100svh - var(--scene-pin)));margin-block:0}
 #etr-story .scene-stage{min-height:780px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(190px,1fr) auto auto auto;gap:12px;padding:20px 0 16px}
 #etr-story .scene-heading{display:block;grid-column:1;max-width:none;width:auto}
 #etr-story .scene-heading :is(h1,h2),#etr-story :is(#etr-manufacturing,#etr-laminate) .scene-heading h2{font-size:clamp(30px,5vw,42px);line-height:1.06;margin:0 0 12px}
 #etr-story .scene-heading p{font-size:15px;line-height:1.4;max-width:54ch;margin:0}
 #etr-story .scene-art{min-height:190px}
 #etr-story .scene-labels{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:12px}
 #etr-story .scene-labels li,#etr-story [data-label-count="4"] .scene-labels li{display:block}
 #etr-story .scene-badge{width:20px;height:20px;margin-bottom:6px}
 #etr-story .scene-labels strong{font-size:13px;line-height:1.3}
 #etr-story .scene-labels li div>span{font-size:13px;line-height:1.4;margin-top:4px}
 #etr-story .scene-caption{grid-column:1;grid-row:5;max-width:none;font-size:12px;line-height:1.45;align-self:start}
 #etr-story .scene-scrubber{grid-column:1;grid-row:4;width:100%;gap:10px;align-self:start}
 #etr-story .scene-view,#etr-story :is(#etr-manufacturing,#etr-laminate) .scene-view{font:400 12px var(--scene-sans);color:#566169;min-height:44px}
 #etr-story :is(#etr-manufacturing,#etr-laminate) .scene-scrubber input{height:44px;accent-color:var(--scene-accent)}
 /* Labels stack under the art here, so leaders would cross their text: number the anchors instead (as mechanisms-v2 does). */
 #etr-story .scene-leaders>g>:is(path,circle){display:none}
 #etr-story .scene-anchor-number{display:inline;opacity:0;transition:opacity var(--motion-feedback) var(--motion-ease-out)}
 #etr-story .scene-leaders [data-on="true"] .scene-anchor-number{opacity:1}
 #etr-story .scene-anchor-number circle{fill:#fff;stroke:#c9d0d4;stroke-width:1}
 #etr-story .scene-anchor-number text{fill:var(--scene-accent);text-anchor:middle;font:600 12px var(--scene-mono)}
 #etr-story #story-opening{margin-bottom:0}
 #etr-story #story-opening .scene-stage{grid-template-rows:110px minmax(190px,1fr) auto auto auto;padding:76px 20px 16px}
 #etr-story #story-opening .scene-heading{display:block;align-self:start}
 #etr-story #story-opening .scene-heading h1{font-size:clamp(30px,6vw,44px);margin-bottom:10px}
 #etr-story #story-opening .scene-heading p{font-size:14px}
 #etr-story #story-opening[data-scroll-ready="true"] .scene-photo-intro{left:20px;right:20px;top:110px;width:auto;max-width:460px}
 #etr-story #story-opening .scene-photo-title{font-size:clamp(60px,12vw,96px);margin-bottom:20px}
 #etr-story #story-opening .scene-photo-intro>p:not(.scene-photo-title){font-size:16px}
 #etr-story #story-opening [data-label-count="4"] .scene-labels{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
 #etr-story #story-opening .scene-labels li{display:flex;gap:8px}
 #etr-story #story-opening .scene-badge{margin-bottom:0}
 #etr-story [data-scroll-scene="made"] .scene-stage{grid-template-rows:auto 44px minmax(170px,1fr) auto auto auto}
 #etr-story [data-scroll-scene="made"] .scene-art{min-height:170px}
 #etr-story [data-scroll-scene="made"] .scene-labels{grid-row:4}
 #etr-story [data-scroll-scene="made"] .scene-scrubber{grid-row:5}
 #etr-story [data-scroll-scene="made"] .scene-caption{grid-row:6}
 #etr-story .scene-route{grid-column:1;grid-row:2;margin:0}
 #etr-story .scene-steps{display:none}
 #etr-story .scene-photo-credit{right:20px;left:20px;bottom:78px;font-size:12px}
 #etr-story .scene-hint{left:20px;bottom:36px}
 #etr-story .scene-fallback-note{display:none}
}
/* Static gate: the first two clauses mirror scroll-stages.js verbatim; reduced-motion phones keep this flow layout. */
@media(max-width:899px) and (max-height:519px), (min-width:900px) and (max-height:711px),(max-width:899px) and (max-height:835px) and (prefers-reduced-motion:reduce){
 #etr-story .scene-scroll[data-scroll-ready="true"]{height:auto}
 #etr-story [data-scroll-ready="true"]>.scene-stage{position:relative;top:0;height:auto;min-height:0}
 #etr-story .scene-stage,#etr-story #story-opening .scene-stage{height:auto;min-height:0;grid-template-rows:auto minmax(320px,52vw) auto auto auto}
 #etr-story .scene-art{min-height:320px}
 #etr-story #story-opening .scene-stage{padding-top:84px}
 #etr-story [data-scroll-scene="made"] .scene-stage{grid-template-rows:auto auto minmax(320px,52vw) auto auto auto}
}
@media(prefers-reduced-motion:reduce){
 #etr-story .scene-scroll[data-scroll-ready="true"]{height:auto}
 #etr-story [data-scroll-ready="true"]>.scene-stage{position:relative;top:0;height:auto;min-height:0}
 #etr-story .scene-stage,#etr-story #story-opening .scene-stage{grid-template-rows:auto minmax(320px,45vw) auto auto auto}
 #etr-story [data-scroll-scene="made"] .scene-stage{grid-template-rows:auto auto minmax(320px,45vw) auto auto auto}
 #etr-story .scene-art{min-height:320px}
 #etr-story .scene-leaders path,#etr-story .scene-labels li,#etr-story .scene-leaders circle,#etr-story .scene-anchor-number{transition:none!important}
}

/* Once a phone uses normal flow, explanations can read as a spacious sequence. */
@media(max-width:599px) and (max-height:519px),(max-width:599px) and (prefers-reduced-motion:reduce){
 #etr-story .scene-stage{row-gap:24px}
 #etr-story .scene-labels,#etr-story [data-label-count="4"] .scene-labels,#etr-story #story-opening [data-label-count="4"] .scene-labels{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:24px}
 #etr-story .scene-labels li,#etr-story [data-label-count="4"] .scene-labels li,#etr-story #story-opening .scene-labels li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px}
 #etr-story .scene-badge{margin:0}
 #etr-story .scene-labels strong{font-size:14px;line-height:1.4}
 #etr-story .scene-labels li div>span{font-size:14px;line-height:1.5}
}

/* Pinned phones: the stage is exactly 100svh under the reading bar, so Safari's collapsing
   toolbar never resizes it mid-scroll. Heading, art, the one explanation reached, scrubber. */
@media(max-width:899px){
 #etr-story .scene-scroll[data-scene-static="false"]{--scene-height:calc(100svh - var(--scene-pin));--scene-travel:160svh}
 #etr-story [data-scene-static="false"] .scene-stage{min-height:0;grid-template-rows:auto minmax(0,1fr) auto auto auto;row-gap:8px;padding:12px 0 10px}
 #etr-story [data-scene-static="false"][data-scroll-scene="made"] .scene-stage{grid-template-rows:auto 44px minmax(0,1fr) auto auto auto}
 #etr-story #story-opening[data-scene-static="false"] .scene-stage{grid-template-rows:auto minmax(0,1fr) auto auto auto;padding:76px 20px 10px}
 #etr-story [data-scene-static="false"] .scene-heading :is(h1,h2),#etr-story :is(#etr-manufacturing,#etr-laminate)[data-scene-static="false"] .scene-heading h2{font-size:clamp(26px,7.2vw,30px);line-height:1.08;margin:0 0 6px}
 #etr-story [data-scene-static="false"] .scene-heading p{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
 #etr-story [data-scene-static="false"] .scene-art{min-height:0}
 #etr-story #story-opening[data-scene-static="false"] .scene-photo-title{font-size:min(clamp(60px,12vw,96px),15vw)}
 /* The credit fades with the first half of the photo's fade, so it is gone before the scrubber takes its row. */
 #etr-story #story-opening[data-scene-static="false"] .scene-photo-credit{opacity:calc(var(--scene-photo-opacity,1)*2 - 1)!important}
 #etr-story #story-opening[data-scene-static="false"][data-photo-ink="dark"] .scene-photo-credit{visibility:hidden!important}
 /* Every label stays in one cell for screen readers; the row is as tall as the longest, so nothing jumps.
    They swap without a crossfade, which would draw two explanations over each other. */
 #etr-story [data-scene-static="false"] .scene-labels,#etr-story #story-opening[data-scene-static="false"] .scene-labels{grid-template-columns:minmax(0,1fr);gap:0;padding-top:2px}
 #etr-story [data-scene-static="false"] .scene-labels li{grid-area:1/1;display:flex;gap:10px;transition:none}
 #etr-story [data-scene-static="false"] .scene-labels li:not([data-active="true"]){opacity:0}
 #etr-story [data-scene-static="false"] .scene-labels li[data-active="true"]{opacity:1}
 #etr-story [data-scene-static="false"] .scene-badge{margin:0}
 #etr-story [data-scene-static="false"] :is(.scene-labels .scene-badge,.scene-leaders [data-active="true"] .scene-anchor-number circle){background:var(--scene-accent);fill:var(--scene-accent);border-color:var(--scene-accent);stroke:var(--scene-accent);color:#fff}
 #etr-story [data-scene-static="false"] .scene-leaders [data-active="true"] .scene-anchor-number text{fill:#fff}
 #etr-story [data-scene-static="false"] .scene-caption{line-height:1.4}
}