/* four-chapters.css */
/*
 * Four chapters, four mediums (October 2026). The maquette chapters shared one model, one layout and one rhythm; each
 * chapter here owns its layout, its ground and its track length (docs/product/design/2026-10/FOUR-CHAPTERS-TREATMENT.md).
 * Every rule is scoped to `[data-chapter=…]`, which chapter-experience.js sets only when the new chapters are on, so
 * `?stages=maquette` shows the model room exactly as it was.
 */

/* The evidence stamp, set as the product's StampFrame sets it (src/components/StampFrame.module.css): mono capitals in
   a hairline box at the picture's bottom inline end, 12 px, and it never moves. The page prints it, so it is styled
   without a chapter: a reader without a script and the plate a failed module leaves see it on the still. On LM3's
   paper the archive silver is too faint to read, so the stamp takes the paper's own muted ink there. */
.stage-canvas>.stage-stamp{position:absolute;z-index:2;inset-block-end:8px;inset-inline-end:8px;padding:3px 6px;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:#b6b8ba;border:1px solid currentColor;white-space:nowrap;pointer-events:none;user-select:none}
#evidence .stage-canvas>.stage-stamp{color:#5f6871}
/* A stage that cannot draw shows its still: the words placed for its last frame stand down rather than float over a
   different picture, and a phone sees the whole still rather than a crop of its middle. */
.stage-canvas[data-stage-state=unavailable]>:is(.condense-labels,.flow-labels,.keep-labels,.horizon-labels){display:none}
@media(max-width:760px){[data-chapter] .stage-canvas[data-stage-state=unavailable] img{object-fit:contain;object-position:50% 50%}}

/* LM1 · Condense — "Check the evidence. Give the work an owner." Copy left, the case composed on the right. */
#capabilities[data-chapter=condense] .stage-track{height:240svh}
#capabilities[data-chapter=condense] .stage-sticky{background:#05090d}
#capabilities[data-chapter=condense] .stage-sticky::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#05090dcc 0,#05090d66 26%,#05090d00 44%)}
:root[dir=rtl] #capabilities[data-chapter=condense] .stage-sticky::after{background:linear-gradient(270deg,#05090dcc 0,#05090d66 26%,#05090d00 44%)}
#capabilities[data-chapter=condense] .stage-copy{z-index:3}

.condense-labels{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:var(--sans);color:#e9eef0;overflow:hidden}
.condense-label{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;will-change:transform,opacity}
.condense-label .is-data{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:max(12px,.86em);color:#aeb6bf;letter-spacing:.02em}
.condense-label .is-muted{color:#aeb6bf}
.condense-label.is-frame{display:flex;gap:10px;align-items:baseline;font-size:13px;letter-spacing:.01em;margin-top:-26px}
.condense-label.is-reading{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.2;margin:-9px 0 0 12px}
.condense-label.is-reading::before{content:"";width:7px;height:7px;border:1px solid currentColor;flex:none}
.condense-label.is-reading.is-open{color:#c4ccd0}
.condense-label.is-reading.is-open::before{border-style:dashed}
.condense-label.is-owner{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 18px;box-sizing:border-box;white-space:normal}
.condense-label.is-owner span{font-size:13px;line-height:1.3}
.condense-label.is-owner strong{font-size:clamp(18px,1.5vw,24px);font-weight:500;letter-spacing:-.01em;line-height:1.15}
.condense-label.is-held{display:flex;align-items:center;gap:8px;margin:-21px 0 0 12px;font-size:13px;letter-spacing:.04em;color:#b6babd}
.condense-label.is-held::before{content:"";width:9px;height:9px;border:1px solid currentColor;flex:none}
.condense-labels[data-dir=rtl] .condense-label.is-reading,.condense-labels[data-dir=rtl] .condense-label.is-held{flex-direction:row-reverse;transform-origin:right}
.condense-labels[data-dir=rtl] .condense-label.is-reading>span,.condense-labels[data-dir=rtl] .condense-label.is-held>span{direction:rtl}

@media(max-width:760px){
 #capabilities[data-chapter=condense] .stage-track{height:230svh}
 #capabilities[data-chapter=condense] .stage-canvas{height:56%}
 #capabilities[data-chapter=condense] .stage-copy{inset:56% 22px auto}
 #capabilities[data-chapter=condense] .stage-sticky::after{content:none}
 .condense-label.is-frame{font-size:12px;margin-top:-21px}
 .condense-label.is-reading{font-size:12px;gap:6px;margin:-8px 0 0 8px}
 .condense-label.is-reading::before{width:5px;height:5px}
 .condense-label.is-owner{padding:0 10px;gap:2px}
 .condense-label.is-owner span{font-size:12px}
 .condense-label.is-owner strong{font-size:17px}
 .condense-label.is-held{font-size:12px;margin:-9px 0 0 8px}
}

/* LM2 · Flow — "Your cameras. A connected way to work." The instrument runs across the top; the copy is a band below. */
#engineering[data-chapter=flow] .stage-track{height:260svh}
#engineering[data-chapter=flow] .stage-sticky{background:#0a0d10}
#engineering[data-chapter=flow] .stage-sticky::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#0a0d10f2 0,#0a0d10b8 24%,#0a0d1000 44%)}
#engineering[data-chapter=flow] .stage-copy{z-index:3;inset:auto var(--pad) clamp(22px,5svh,52px);width:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(32px,6vw,110px);align-items:end}
#engineering[data-chapter=flow] .stage-copy .motion-heading{grid-row:1/3}
#engineering[data-chapter=flow] .stage-copy .motion-heading h2{font-size:clamp(30px,2.9vw,48px)}
#engineering[data-chapter=flow] .stage-copy .chapter-steps,#engineering[data-chapter=flow] .stage-copy .stage-captions{grid-column:2}
#engineering[data-chapter=flow] .stage-copy .chapter-steps{margin-top:0}

.flow-labels{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:var(--sans);color:#e9eef0;overflow:hidden}
.flow-labels-label{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;will-change:transform,opacity}
.flow-labels .is-data{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:max(12px,.84em);letter-spacing:.03em;color:#9fb0bb}
.flow-labels .is-muted{color:#aeb6bf}
.flow-labels-label.is-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8592a0;transform-origin:left}
.flow-labels-label.is-port{display:flex;gap:8px;align-items:baseline;font-size:12px;margin-top:-8px}
.flow-labels-label.is-port.is-stacked{flex-direction:column;align-items:flex-start;gap:1px;margin-top:-15px}
.flow-labels-label.is-window{display:flex;gap:10px;align-items:baseline;font-size:13px}
.flow-labels-label.is-task>*{display:block;transform:translate(-50%,-50%);text-align:center}
.flow-labels-label.is-task{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.flow-labels-label.is-task strong{font-weight:500;font-size:14px}
.flow-labels-label.is-task span{font-size:12px}
.flow-labels-label.is-action{display:flex;gap:10px;align-items:baseline;font-size:13px;margin-top:-9px}
.flow-labels-label.is-action::after{content:"";width:12px;height:7px;border:solid #4fd6e8;border-width:0 0 2px 2px;transform:translate(2px,-3px) rotate(-45deg);opacity:0;transition:opacity .2s linear}
.flow-labels-label.is-action.is-done::after{opacity:1}
.flow-labels-label.is-key{display:grid;grid-template-columns:auto auto;column-gap:10px;row-gap:6px;align-items:baseline;font-size:13px;margin-top:-10px}
.flow-labels-label.is-key .is-held-word{grid-column:1;font-weight:500;color:#e8722a;letter-spacing:.04em;opacity:0;transition:opacity .2s linear}
.flow-labels-label.is-key .is-named{grid-column:2;color:#c9ced3;opacity:0;transition:opacity .2s linear}
.flow-labels-label.is-key.is-held .is-held-word,.flow-labels-label.is-key.is-held .is-named{opacity:1}
.flow-labels[data-layout=tall] .flow-labels-label.is-port{font-size:12px}
.flow-labels[data-layout=tall] .flow-labels-label.is-action,.flow-labels[data-layout=tall] .flow-labels-label.is-key{font-size:12px}
.flow-labels[data-layout=tall] .flow-labels-label.is-task strong,.flow-labels[data-layout=tall] .flow-labels-label.is-task span{font-size:12px}
@media(prefers-reduced-motion:reduce){.flow-labels-label.is-action::after,.flow-labels-label.is-key .is-held-word,.flow-labels-label.is-key .is-named{transition:none}}

@media(max-width:760px){
 #engineering[data-chapter=flow] .stage-track{height:250svh}
 #engineering[data-chapter=flow] .stage-canvas{height:56%}
 #engineering[data-chapter=flow] .stage-copy{display:block;inset:56% 22px auto;bottom:auto}
 #engineering[data-chapter=flow] .stage-sticky::after{content:none}
}
.flow-labels[data-layout=tall] .flow-labels-label.is-key{grid-template-columns:auto;row-gap:3px}
.flow-labels[data-layout=tall] .flow-labels-label.is-key .is-held-word,.flow-labels[data-layout=tall] .flow-labels-label.is-key .is-named{grid-column:1;white-space:normal;max-width:150px}

/* LM3 · Keep — "See what runs today. See what comes next." The one bright chapter: copy as a top band, ink on paper. */
#evidence[data-chapter=keep] .stage-track{height:225svh}
#evidence[data-chapter=keep] .stage-sticky{background:#eceae4}
/* The copy sits below the fixed header's height (header-navigation.js sets --site-nav-height): the header returns on
   any upward scroll, and at a top inset of 8svh it covered the headline (measured on screen, 8 October). */
#evidence[data-chapter=keep] .stage-copy{z-index:3;color:var(--ink);--ink:#15191d;--muted:#4f5862;--copper:#0f6f7d;--copper-light:#0b5a66;--rule:#15191d24;inset:calc(var(--site-nav-height,92px) + clamp(16px,3.5svh,36px)) var(--pad) auto;bottom:auto;width:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(32px,6vw,110px);align-items:start}
#evidence[data-chapter=keep] .stage-copy .motion-heading{grid-row:1/3}
#evidence[data-chapter=keep] .stage-copy .motion-heading h2{font-size:clamp(30px,2.9vw,48px)}
#evidence[data-chapter=keep] .stage-copy .chapter-steps,#evidence[data-chapter=keep] .stage-copy .stage-captions{grid-column:2}
#evidence[data-chapter=keep] .stage-copy .chapter-steps{margin-top:0}
#evidence[data-chapter=keep] .stage-copy .text-link{color:var(--ink)}
#evidence[data-chapter=keep] [data-public-provenance]{color:#4f5862}

.keep-labels{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:var(--sans);color:#15191d;overflow:hidden}
.keep-labels-label{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;will-change:transform,opacity,filter}
.keep-labels .is-data{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:max(12px,.86em);letter-spacing:.02em;color:#4f5862}
.keep-labels .is-muted{color:#4f5862}
.keep-labels-label.is-camera{font-size:12px;letter-spacing:.02em;margin-top:-20px}
/* The inputs' names stand above their tags; the unavailable camera's carries the hatch its glass tag does. */
.keep-labels-label.is-tag{display:flex;flex-direction:column;justify-content:flex-end;height:0;gap:1px;font-size:12px;line-height:1.25;white-space:normal;width:7.4em}
.keep-labels-label.is-tag.is-raised{margin-top:-3em}
.keep-labels-label.is-tag.is-terse>span:last-child{display:none}
.keep-labels[data-layout=tall] .keep-labels-label.is-tag{width:6.4em}
.keep-labels[data-layout=tall] .keep-labels-label.is-tag:not(.is-carried){display:none}
.keep-labels-label.is-camera{display:flex;gap:8px}
.keep-labels-label.is-card .is-data{overflow-wrap:anywhere}
.keep-labels-label.is-tag.is-unavailable>span:last-child::before,.keep-labels-label.is-column.is-linked>span::before{content:"";display:inline-block;width:9px;height:9px;margin-inline-end:5px;vertical-align:-1px;border:1px solid #4f5862;background:repeating-linear-gradient(135deg,#4f5862 0 1px,transparent 1px 4px)}
/* A record card's words stand on its face, from its top corner down, as wide as the face is drawn (keep-stage.js sets
   the width each frame). On a face too small for the detail and the code, the title stands alone. */
.keep-labels-label.is-card{display:flex;flex-direction:column;gap:3px;white-space:normal;font-size:13px;line-height:1.25}
.keep-labels-label.is-card strong{font-weight:500;font-size:14px;line-height:1.2}
.keep-labels-label.is-card .is-decision{color:#0f6f7d;font-weight:500}
.keep-labels-label.is-card .is-decision:empty{display:none}
.keep-labels-label.is-card.is-open strong::before{content:"";display:inline-block;width:9px;height:9px;border:1px solid currentColor;margin-inline-end:6px;vertical-align:-1px}
.keep-labels-label.is-card.is-tight>:not(strong):not(.is-decision):not(.is-named){display:none}
.keep-labels[data-layout=tall] .keep-labels-label.is-card,.keep-labels[data-layout=tall] .keep-labels-label.is-card strong{font-size:12px}
.keep-labels-label.is-cell>span{display:block;transform:translate(-50%,-50%);font-size:12px;line-height:1.2;color:#3d4650;text-align:center;white-space:normal;width:7.5em}
.keep-labels-label.is-column>span{display:block;transform:translate(-50%,-100%);font-size:12px;color:#15191d}
.keep-labels-label.is-line>span{display:block;transform:translate(-100%,-50%);font-size:12px;color:#15191d;padding-inline-end:6px}
.keep-labels-label.is-evaluation{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#4f5862}
/* A phone's cubes stand closer than one line of their words: headers and cells wrap to two short lines. */
.keep-labels[data-layout=tall] .keep-labels-label.is-column>span,.keep-labels[data-layout=tall] .keep-labels-label.is-line>span{white-space:normal;width:6.2em;text-align:center;line-height:1.2}
.keep-labels[data-layout=tall] .keep-labels-label.is-line>span{text-align:end}
.keep-labels[data-layout=tall] .keep-labels-label.is-cell>span{width:5.6em}

@media(max-width:760px){
 #evidence[data-chapter=keep] .stage-track{height:225svh}
 #evidence[data-chapter=keep] .stage-canvas{height:56%}
 #evidence[data-chapter=keep] .stage-copy{display:block;inset:56% 22px auto;bottom:auto}
}
/* The page sets every h2 and h3 light (main-identity.css); on paper they are ink. */
#evidence[data-chapter=keep] .stage-copy h2,#evidence[data-chapter=keep] .stage-copy h3{color:#15191d}
#evidence[data-chapter=keep] .stage-copy p{color:#4f5862}
#evidence[data-chapter=keep] .stage-copy .chapter-steps button{color:#4f5862}
#evidence[data-chapter=keep] .stage-copy .chapter-steps button[aria-pressed=true]{color:#15191d;border-color:#0f6f7d}


/* LM4 · Horizon — "Build the next stage with us." Full bleed; the headline over the sky; the paths follow the morning. */
#build[data-chapter=horizon] .stage-track{height:230svh}
#build[data-chapter=horizon] .stage-sticky{background:#02050d}
/* Below the fixed header's height, which returns on any upward scroll: at 12svh a 620 px window put the headline under it. */
#build[data-chapter=horizon] .stage-copy{z-index:3;inset:calc(var(--site-nav-height,92px) + clamp(12px,3svh,40px)) var(--pad) auto;bottom:auto;width:auto;text-align:center}
#build[data-chapter=horizon] .stage-copy .motion-heading h2{font-size:clamp(40px,5.2vw,88px);line-height:1.02;letter-spacing:-.04em;margin:0 auto;max-width:14ch;text-shadow:0 2px 30px #02050d66}
#build[data-chapter=horizon] .stage-sticky::after{content:"";position:absolute;inset:auto 0 0;height:22%;z-index:1;pointer-events:none;background:linear-gradient(0deg,#0b0f14 0,#0b0f1400 100%)}
#build[data-chapter=horizon] .build-tail{background:#0b0f14;padding-top:clamp(28px,5svh,56px)}
.horizon-labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
@media(max-width:760px){
 #build[data-chapter=horizon] .stage-track{height:220svh}
 #build[data-chapter=horizon] .stage-canvas{height:100%}
 #build[data-chapter=horizon] .stage-copy{inset:clamp(86px,13svh,120px) 22px auto}
 #build[data-chapter=horizon] .stage-copy .motion-heading h2{font-size:40px}
}
/* A soft top vignette, as a lens gives one, keeps the headline's contrast once the sky is a morning sky. */
#build[data-chapter=horizon] .stage-sticky::before{content:"";position:absolute;inset:0 0 auto;height:42%;z-index:1;pointer-events:none;background:linear-gradient(180deg,#02050d70 0,#02050d00 100%)}

/* Prepared work remains legible beside the small exhibits; the scene itself carries the motion. */
.keep-labels-label.is-work>span{font-size:13px;font-weight:500;color:#174d58;width:10em;line-height:1.3}
.keep-labels-label.is-column>span{white-space:normal;max-width:10em;text-align:center;line-height:1.3}
#evidence .evaluation-note{font-size:12px;color:#535e65;margin-top:8px}
.keep-labels[data-layout=tall] .keep-labels-label.is-work>span{font-size:12px;width:6.1em}