/* Scroll trial: the rendered film on the left, copy on the right, both driven by one scroll timeline. Colours and type follow scene.css. */
@font-face{font-family:'Airborne';src:url('/_astro/inter-latin-wght-normal.Dx4kXJAl.woff2');font-style:normal;font-weight:100 900;font-display:swap}
.film-journey{position:relative;background:#08090b;color:#e4e7eb;font-family:Airborne,Arial,sans-serif}
.film-journey.is-ready{height:calc(100svh*var(--film-screens,13))}
/* --film-side (0→1, set by film-trial.js) swaps the layout for the graph: the film slides from the left edge to the right edge and the copy takes the
   left. It follows film time, so scrolling back swaps it back. Phones keep the stacked layout. */
/* --film-open (0→1, set by film-trial.js) removes the right-hand dissolve once the film's own background has become the page colour (the dark graph
   sections), so labels near the film's right edge are not dimmed for nothing. */
/* The film sits flush with the left edge at 85% of the viewport height, centred vertically on the screen, as is the copy beside it. Only its right edge dissolves into the
   page; top and bottom stay as clean edges (user, 2026-09-21). The copy starts just inside that dissolve. */
.film-stage{position:relative;min-height:100svh;box-sizing:border-box;--film-height:85svh;--film-width:calc(var(--film-height)*1.0524)}
.is-ready>.film-stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden}
.film-frame{position:absolute;left:calc(var(--film-side,0)*(100vw - var(--film-width)));top:50%;transform:translateY(-50%);height:calc(var(--film-width)/1.0524);width:var(--film-width);background:#08090b;-webkit-mask-image:linear-gradient(to right,#000 0,#000 54%,rgba(0,0,0,calc(0.97 + 0.03*var(--film-open,0))) 60%,rgba(0,0,0,calc(0.87 + 0.13*var(--film-open,0))) 67%,rgba(0,0,0,calc(0.68 + 0.32*var(--film-open,0))) 75%,rgba(0,0,0,calc(0.42 + 0.58*var(--film-open,0))) 84%,rgba(0,0,0,calc(0.17 + 0.83*var(--film-open,0))) 93%,rgba(0,0,0,calc(0 + 1*var(--film-open,0))) 100%);mask-image:linear-gradient(to right,#000 0,#000 54%,rgba(0,0,0,calc(0.97 + 0.03*var(--film-open,0))) 60%,rgba(0,0,0,calc(0.87 + 0.13*var(--film-open,0))) 67%,rgba(0,0,0,calc(0.68 + 0.32*var(--film-open,0))) 75%,rgba(0,0,0,calc(0.42 + 0.58*var(--film-open,0))) 84%,rgba(0,0,0,calc(0.17 + 0.83*var(--film-open,0))) 93%,rgba(0,0,0,calc(0 + 1*var(--film-open,0))) 100%)}
.film-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:left center}
.film-frame .film-loading{position:absolute;left:5.4vw;top:12px;padding:8px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c3ced7;background:#08090acc;transition:opacity .4s;z-index:2}
.film-frame.is-loaded .film-loading{opacity:0}
/* the copy is centred in the space between the film's right edge and the right edge of the window */
.film-copy{--copy-width:min(36vw,600px);position:absolute;z-index:2;left:min(calc((100vw - var(--film-width) - var(--copy-width))/2 + (1 - var(--film-side,0))*var(--film-width)),calc(100vw - var(--copy-width) - 5.4vw));top:50%;transform:translateY(-50%);width:var(--copy-width);height:420px}
.film-chapter{position:absolute;left:0;right:0;top:50%;opacity:0;transform:translateY(-50%);transition:opacity .45s ease;pointer-events:none}
.film-chapter.is-active{opacity:1;transform:translateY(-50%);pointer-events:auto}
.film-chapter.is-past{transform:translateY(-50%)}
.film-chapter .eyebrow{font-size:clamp(12px,.95vw,15px);letter-spacing:.17em;text-transform:uppercase;color:#aab8c3;margin:0 0 26px}
.film-chapter h2{font-size:clamp(30px,3.5vw,54px);font-weight:500;letter-spacing:-.035em;line-height:1.16;margin:0;color:#e4e7eb;white-space:pre-line}
.film-chapter p.body{margin:26px 0 0;font-size:clamp(16px,1.4vw,21px);line-height:1.55;color:#9aa8b3;max-width:500px}
.film-chapter p.body sup{font-size:.58em;line-height:0;vertical-align:super}
.film-chapter .film-footnote-ref{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding:0 1px}
.film-chapter .film-footnote-ref:hover{color:var(--film-ink,#e4e7eb)}
.film-chapter .film-footnote-ref:focus-visible,.film-sources a:focus-visible{outline:2px solid var(--film-accent,#9fcee5);outline-offset:3px}
.film-sources{position:absolute;left:0;right:0;top:100%;max-width:500px;color:var(--film-muted,#9aa8b3)}
.film-sources hr{border:0;border-top:1px solid var(--film-line,#465059);margin:22px 0 12px}
.film-sources__heading{margin:0 0 7px;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.film-sources ol{margin:0;padding-left:19px;font-size:11px;line-height:1.45}
.film-sources li{padding-left:3px;transition:color .25s ease}
.film-sources li.is-cited{color:var(--film-ink,#e4e7eb)}
.film-sources a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.film-chapter[data-tone=hostile] .eyebrow{color:#d4141c}
.film-controls{position:absolute;z-index:3;left:5.4%;right:5.4%;bottom:clamp(14px,2.4vh,26px);display:flex;align-items:center;gap:16px;font-size:12px;color:#8b9aa6}
.film-controls button{font:inherit;color:#c3ced7;background:transparent;border:1px solid #ffffff30;padding:8px 14px;cursor:pointer;min-width:74px}
.film-controls button:hover{border-color:#9fcee5;color:#e4e7eb}
.film-rail{position:relative;flex:1;height:22px;cursor:pointer;touch-action:none}
.film-rail:before{content:'';position:absolute;left:0;right:0;top:10px;height:2px;background:#ffffff1f}
.film-rail .fill{position:absolute;left:0;top:10px;height:2px;background:#9fcee5;width:0}
.film-rail .tick{position:absolute;top:6px;width:1px;height:10px;background:#ffffff55}
.film-rail .tick[data-tone=hostile]{background:#d4141c}
.film-rail .knob{position:absolute;top:5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#e4e7eb}
.film-controls output{font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
.film-stretch{display:flex;align-items:center;gap:4px}.film-stretch span{margin-right:6px}.film-controls .film-stretch button{min-width:0;padding:8px 10px}.film-controls button[aria-pressed=true]{border-color:#9fcee5;color:#e4e7eb;background:#9fcee51a}
.trial-note{position:absolute;top:clamp(74px,9vh,96px);right:5.4%;z-index:3;font-size:11px;letter-spacing:.08em;color:#6f7d88;text-transform:uppercase}
@media(max-width:820px){
 .film-stage{--film-width:100vw;--film-height:calc(100vw/1.0524)}
 .film-stage{--film-side:0!important}
 .film-frame{left:0;top:64px;transform:none;-webkit-mask-image:none;mask-image:none}
 .film-copy{left:24px;right:24px;width:auto;top:calc(64px + 100vw/1.0524 + 26px);transform:none;height:230px}.film-chapter .eyebrow{margin-bottom:14px}.film-chapter p.body{margin-top:14px}
 .film-chapter,.film-chapter.is-active,.film-chapter.is-past{top:0;transform:none}
 .film-controls{left:24px;right:24px;flex-wrap:wrap}.film-rail{order:3;flex-basis:100%}.film-controls output{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.film-chapter{transition:none}}


.film-debug{position:fixed;z-index:50;left:8px;top:72px;margin:0;padding:8px 10px;font:11px/1.5 ui-monospace,Menlo,monospace;color:#e4e7eb;background:#000c;border:1px solid #ffffff30;white-space:pre;pointer-events:none}

/* Pacing studio stays below the picture; the timeline and curve share one horizontal scale. */
.film-stage.is-editing{--pace-height:368px;--film-height:clamp(190px,calc(100svh - 510px),420px);--film-width:min(calc(var(--film-height)*1.0524),45vw)}
.film-stage.is-editing .film-frame,.film-stage.is-editing .film-copy{top:calc(80px + (100% - var(--pace-height) - 130px)/2)}
.film-stage.is-editing .film-copy{height:240px}.film-stage.is-editing .film-chapter h2{font-size:clamp(24px,3vw,44px)}.film-stage.is-editing .film-chapter .eyebrow{margin-bottom:16px}.film-stage.is-editing .film-chapter p.body{font-size:16px;margin-top:16px}
.film-stage.is-editing .trial-note{display:none}.film-stage.is-editing .film-controls{bottom:calc(var(--pace-height) + 12px)}
.pace-editor{position:absolute;z-index:4;inset:auto 0 0;height:var(--pace-height,368px);padding:12px 3vw 10px;background:#0d1115;border-top:1px solid #ffffff24;font:12px Airborne,Arial,sans-serif;color:#9caebc;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.pace-editor[hidden],.pace-editor [hidden]{display:none!important}.pace-editor *{box-sizing:border-box}
.pace-editor button,.pace-editor select,.pace-editor input[type=number]{font:inherit;border:1px solid #ffffff28;background:#11181e;color:#dce6ed;border-radius:3px;padding:6px 9px;min-height:29px}
.pace-editor button{cursor:pointer}.pace-editor button:hover{border-color:#94c9dd}.pace-editor button:disabled{opacity:.35;cursor:default}.pace-editor button:focus-visible,.pace-editor select:focus-visible,.pace-editor input:focus-visible,.pace-block:focus-visible{outline:2px solid #94c9dd;outline-offset:2px}
.pace-editor input[type=range]{accent-color:#94c9dd;width:90px}.pace-editor input[type=number]{width:72px;font-variant-numeric:tabular-nums}
.pace-toolbar,.pace-selection{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pace-toolbar>b{font-size:15px;font-weight:500;color:#edf3f7;margin-right:8px}.pace-toolbar>[data-total]{color:#94c9dd;font-variant-numeric:tabular-nums;white-space:nowrap}.pace-zoom{margin-left:auto;display:flex;align-items:center;gap:7px}
.pace-modes{display:flex;gap:3px}.pace-modes button[aria-pressed=true]{background:#233944;border-color:#78a5bb;color:#eaf6fc}
.pace-selection{border-top:1px solid #ffffff12;padding-top:9px}.pace-selection label{display:flex;align-items:center;gap:6px}.pace-section-choice{min-width:200px;flex:1;max-width:440px}.pace-section-choice select{min-width:0;width:100%;text-overflow:ellipsis}.pace-selection [data-range]{font-size:11px;color:#738594;white-space:nowrap}.pace-selection [data-ease-value]{min-width:31px;font-variant-numeric:tabular-nums}
.pace-scroll{overflow:auto hidden;flex:1;min-height:217px;overscroll-behavior:contain;scrollbar-color:#415561 #0d1115;scrollbar-width:thin;touch-action:pan-x}.pace-content{position:relative;min-height:215px}.pace-ruler{position:relative;height:23px;border-bottom:1px solid #ffffff20;cursor:crosshair;touch-action:none}.pace-ruler>span{position:absolute;top:0;font-size:10px;font-variant-numeric:tabular-nums;color:#8495a2;padding-left:4px;border-left:1px solid #ffffff25;line-height:21px}
.pace-strip{position:relative;display:flex;height:61px}.pace-block{position:relative;flex-shrink:0;min-width:0;height:100%;padding:7px 13px 6px 7px;overflow:hidden;white-space:nowrap;background:color-mix(in srgb,var(--section-color) 14%,#10161b);border:1px solid #0d1115;border-top:3px solid color-mix(in srgb,var(--section-color) 60%,#10161b);cursor:pointer;user-select:none}
.pace-block.is-selected{background:color-mix(in srgb,var(--section-color) 26%,#10161b);border-top-color:var(--section-color)}.pace-block.is-current{box-shadow:inset 0 -2px var(--section-color)}
.pace-number{font-size:9px;color:var(--section-color);float:left;margin-right:5px;line-height:14px}.pace-block>b{display:block;font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;color:#e0e9ef}.pace-block>small{display:block;margin-top:7px;color:#a3b5c2;font-size:10px;font-variant-numeric:tabular-nums}
.pace-editor .pace-grip{position:absolute;top:0;bottom:0;right:0;width:9px;min-height:0;padding:0;border:0;border-radius:0;background:#ffffff12;cursor:ew-resize;touch-action:none}.pace-editor .pace-grip:after{content:'';position:absolute;left:3px;top:18px;height:20px;width:2px;background:#ffffff60}.pace-editor .pace-grip:hover{background:#94c9dd66}
.pace-chart{position:relative;height:132px;background:#090d10;cursor:crosshair;touch-action:none}.pace-chart canvas{display:block}.pace-playhead{position:absolute;top:0;bottom:0;width:1px;background:#f5f7f9;pointer-events:none;z-index:2}.pace-playhead:before{content:'';position:absolute;top:17px;left:-4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #f5f7f9}.pace-playhead>span{position:absolute;top:1px;left:4px;white-space:nowrap;font-size:10px;color:#fff;background:#090d10c9;padding:1px 3px}
.pace-footer{display:flex;gap:12px;justify-content:space-between;align-items:center;font-size:11px;line-height:1.4}.pace-footer [data-note]{color:#94c9dd;text-align:right;white-space:nowrap}
@media(max-width:1100px){.film-stage.is-editing{--pace-height:406px}.pace-toolbar>b{display:none}.pace-zoom{margin-left:0}.pace-selection [data-range]{display:none}.pace-section-choice{max-width:330px}}
@media(max-width:820px){.film-stage.is-editing{--pace-height:500px;--film-width:min(42vw,calc((100svh - 550px)*1.0524))}.film-stage.is-editing .film-frame{left:3vw;top:80px;transform:none;min-width:150px;min-height:142px}.film-stage.is-editing .film-copy{display:none}.film-stage.is-editing .film-controls{left:3vw;right:3vw;gap:8px}.film-stage.is-editing .film-controls button{min-width:0;padding:6px 8px}.pace-editor{padding:10px 3vw;gap:8px}.pace-toolbar,.pace-selection{gap:6px}.pace-zoom input{width:58px!important}.pace-toolbar>button{padding:5px 7px}.pace-toolbar [data-total]{margin-left:auto}.pace-section-choice{max-width:none;flex-basis:100%}.pace-selection input[type=range]{width:60px}.pace-selection input[type=number]{width:60px}.pace-footer{font-size:10px;align-items:start;flex-direction:column;gap:3px}.pace-editor button,.pace-editor select,.pace-editor input[type=number]{font-size:11px}.pace-toolbar>b{display:none}}
@media(max-height:740px) and (min-width:821px){.film-stage.is-editing .film-copy{height:150px}.film-stage.is-editing .film-chapter h2{font-size:26px}.film-stage.is-editing .film-chapter p.body{display:none}}

.pace-link{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px}.pace-link input{accent-color:#94c9dd}.pace-toolbar{gap:8px}.pace-zoom input{width:70px!important}
@media(max-width:1100px){.pace-link{order:2}.pace-toolbar .pace-zoom{margin-left:auto}}
/* Labels must not impose a minimum block width: width is the exact scroll allocation. */
.pace-block{padding:0;border-left:0;border-right:0}
.pace-block .pace-number{position:absolute;left:7px;top:7px;float:none;margin:0}
.pace-block>b{position:absolute;left:26px;right:11px;top:7px}
.pace-block>small{position:absolute;left:7px;right:10px;bottom:7px;margin:0;overflow:hidden;text-overflow:ellipsis}

.pace-chart-readout{position:sticky;left:0;width:64px;height:132px;margin-top:-132px;background:linear-gradient(to right,#090d10f2,#090d10bb 80%,transparent);pointer-events:none}.pace-chart-readout span{position:absolute;left:5px;color:#81939f;font:10px Arial;white-space:nowrap}

.pace-smooth{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px}.pace-smooth input{accent-color:#94c9dd}

.pace-pan{display:flex;align-items:center;gap:8px;min-height:25px;font-size:11px;color:#92a5b4}.pace-editor .pace-pan input{flex:1;width:auto;min-width:40px;accent-color:#94c9dd}.pace-editor .pace-pan button{min-height:23px;min-width:27px;padding:0 6px;font-size:18px;line-height:20px}.pace-pan [data-pan-hint]{font-size:10px;min-width:105px;text-align:right}.pace-scroll{scrollbar-width:auto}.pace-scroll::-webkit-scrollbar{height:9px}.pace-scroll::-webkit-scrollbar-thumb{background:#547383;border-radius:5px}.pace-scroll::-webkit-scrollbar-track{background:#131c23}
.film-stage.is-editing{--pace-height:400px}
@media(max-width:1100px){.film-stage.is-editing{--pace-height:440px}}
@media(max-width:820px){.film-stage.is-editing{--pace-height:540px;--film-width:min(42vw,max(128px,calc((100svh - var(--pace-height) - 200px)*1.0524)))}.film-stage.is-editing .film-frame{min-width:128px;min-height:122px}.pace-pan [data-pan-hint]{display:none}}