/* The text and typographic hierarchy stay unchanged in all three studies. */
body.motion-arrive p{transition:opacity 620ms ease,transform 760ms cubic-bezier(.2,.65,.25,1)}
body.motion-arrive p.awaiting{opacity:0;transform:translateY(26px)}
body.motion-arrive p.arrived{opacity:1;transform:translateY(0)}
.word{display:inline-block;overflow:clip;vertical-align:bottom}
.word-ink{display:inline-block}
body.motion-lines .word-ink{transform:translateY(calc((1 - var(--reveal,1))*105%));opacity:var(--reveal,1);will-change:transform}
body.motion-handover{transition:none}
body.motion-handover>header,body.motion-handover main>section{position:sticky;top:var(--pin-top,0px);background:var(--section-paper);color:var(--section-ink);max-width:none;min-height:100svh;margin:0}
body.motion-handover>header{z-index:0}
body.motion-handover main{padding:0}
body.motion-handover main>section{padding:12vh clamp(24px,6vw,90px) 22vh}
body.motion-handover .prose{max-width:39ch;margin:0 auto}
body.motion-handover .audio{position:relative;background:var(--paper);max-width:none;padding:8vh clamp(24px,6vw,90px);z-index:11}
@media(max-width:600px){body.motion-handover main>section{padding:12vh 24px 18vh}}
@media(prefers-reduced-motion:reduce){body.motion-arrive p{opacity:1!important;transform:none!important;transition:none!important}body.motion-lines .word-ink{opacity:1!important;transform:none!important}body.motion-handover>header,body.motion-handover main>section{position:relative;top:auto}}
@media print{body{background:white!important;color:black!important}body.motion-arrive p,body.motion-lines .word-ink{opacity:1!important;transform:none!important}body.motion-handover>header,body.motion-handover main>section{position:relative;top:auto;background:white;color:black}header,section{min-height:0!important;padding:20px!important}}
/* Quieter choreography: colour and text no longer move independently together. */
body.motion-sequenced{transition:background-color 240ms ease,color 240ms ease}
body.motion-sequenced>header,body.motion-edged>header,body.motion-border>header{background:var(--section-paper);color:var(--section-ink)}
body.motion-sequenced p,body.motion-border p{transition:opacity 220ms ease;transform:none}
body.motion-sequenced p.awaiting,body.motion-border p.awaiting{opacity:0;transform:none}
body.motion-sequenced p.arrived,body.motion-border p.arrived{opacity:1;transform:none}
body.motion-sequenced p.skip-entrance,body.motion-border p.skip-entrance{transition:none}
body.motion-edged{transition:none}
body.motion-edged main{padding:0}
body.motion-edged main>section{position:relative;background:var(--section-paper);color:var(--section-ink);max-width:none;margin:0;padding:12vh clamp(24px,6vw,90px) 25vh}
body.motion-edged .prose{max-width:39ch;margin:auto}
body.motion-edged .audio{max-width:none;padding:8vh clamp(24px,6vw,90px);background:var(--paper);color:var(--ink)}
body.motion-border{background:#f4f0e8;color:#193e9a;transition:none}
body.motion-border main{padding-top:0}
body.motion-border main>section{border-inline-start:14px solid var(--section-paper);max-width:calc(39ch + 62px);padding-inline-start:48px}
body.motion-border .audio{max-width:39ch}
@media(max-width:600px){body.motion-edged main>section{padding:12vh 24px 18vh}body.motion-border main>section{border-inline-start-width:9px;padding-inline-start:20px}}
@media(prefers-reduced-motion:reduce){body.motion-sequenced,body.motion-sequenced p,body.motion-border p{transition:none!important}body.motion-sequenced p,body.motion-border p{opacity:1!important}}
@media print{body.motion-edged main>section{background:white;color:black}body.motion-sequenced p,body.motion-border p{opacity:1!important}}
/* Selected direction: the hero ends once, and the reading surface stays put. */
body.motion-steady{background:var(--reading-paper);color:var(--reading-ink);transition:none}
body.motion-steady>header{background:#2867b2;color:#fff}
body.motion-steady main>section{background:transparent;color:inherit;border:0}
body.motion-steady p{transition:opacity 220ms ease;transform:none}
body.motion-steady p.awaiting{opacity:0}
body.motion-steady p.arrived{opacity:1}
body.motion-steady p.skip-entrance{transition:none}
@media(prefers-reduced-motion:reduce){body.motion-steady p{opacity:1!important;transition:none!important}}
@media print{body.motion-steady p{opacity:1!important}}

body.motion-steady main strong,body.motion-steady main a{color:var(--reading-emphasis)}

/* Follow system appearance by default. Explicit themes are temporary preview overrides. */
:root{color-scheme:light dark;--reading-paper:#f7f5ef;--reading-ink:#403e35;--reading-emphasis:#17160f}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--reading-paper:#12110e;--reading-ink:#cbc6b8;--reading-emphasis:#ece8dd}}
:root[data-theme="dark"]{color-scheme:dark;--reading-paper:#12110e;--reading-ink:#cbc6b8;--reading-emphasis:#ece8dd}
:root[data-theme="light"]{color-scheme:light}
@media print{:root{color-scheme:light;--reading-paper:#fff!important;--reading-ink:#403e35!important;--reading-emphasis:#17160f!important}}
/* Each list remains a continuous paragraph; only its inline items fade independently. */
p.sequence>.sequence-item,p.sequence>.sequence-lead{display:inline;margin:0;padding:0}
body.motion-steady p.sequence{opacity:1;transform:none;transition:none}
body.motion-steady .sequence-item,body.motion-steady .sequence-lead{transition:opacity 320ms ease}
body.motion-steady .sequence-item.awaiting,body.motion-steady .sequence-lead.awaiting{opacity:0}
body.motion-steady .sequence-item.arrived,body.motion-steady .sequence-lead.arrived{opacity:1}
body.motion-steady .sequence-item.skip-entrance,body.motion-steady .sequence-lead.skip-entrance{transition:none}
@media(prefers-reduced-motion:reduce){body.motion-steady .sequence-item,body.motion-steady .sequence-lead{opacity:1!important;transition:none!important}}
@media print{.sequence-item,.sequence-lead{opacity:1!important;transform:none!important}}
/* Review override, equivalent to reduced motion without changing the visitor's device. */
:root[data-motion="reduce"] body.motion-steady p,:root[data-motion="reduce"] body.motion-steady .sequence-item,:root[data-motion="reduce"] body.motion-steady .sequence-lead{opacity:1!important;transition:none!important;transform:none!important}