/* Presenter reading 10 — the ink layer. Frames, motifs, instruments and the
   drifting seeds are drawn on #presenterInk; the DOM keeps the readable text.
   Every entrance delay is a CSS variable set by presenter.js from the scene
   timeline so words, values and drawn lines arrive in one choreography. */
body.presenter{background:#14242d;color:#fff9eb;overflow:hidden}
body.presenter>:not(#presenter):not(script){display:none!important}
#presenter{position:fixed;inset:0;isolation:isolate;overflow:hidden;font-family:Calibre,Arial,sans-serif;color:#fff9eb;--white:#fff9eb;--wind-entry:-24px;--seek:0ms;--exit-seek:0ms;--t-story:2000ms;--t-title:2150ms;--t-body:3400ms;--t-poem:5100ms;--t-source:5500ms}
#presenter *{box-sizing:border-box}
#presenter button,#presenter select,#presenter input,#presenter a{font:inherit;color:inherit}
#presenter button{cursor:pointer;border:0}
#presenter button:focus-visible,#presenter a:focus-visible,#presenter input:focus-visible,#presenter select:focus-visible{outline:2px solid #fff2c0;outline-offset:5px}
#presenter [hidden]{display:none!important}
#presenterSky,#presenterTrees,#presenterInk,#presenterObjects{position:absolute;inset:0;width:100%;height:100%;display:block}
#presenterTrees{z-index:1;pointer-events:none}
#presenterInk,#presenterObjects{z-index:2;pointer-events:none}
.p-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,#041a27aa,transparent 16%),linear-gradient(180deg,#07162360,transparent 44%,#07172035),linear-gradient(90deg,#0d263663,transparent 67%,#112b3740)}
.p-header,.p-edition,.p-vignette,.p-footer{position:absolute;z-index:3}
/* Reading 30: the clock and the temperature are a whisper in the corner (John, 22 September: 'de tar alldeles för mycket uppmärksamhet'). */
.p-header{top:3.2vh;right:4vw;display:flex;justify-content:flex-end;align-items:start;opacity:.55;transition:opacity .6s}
.p-header:hover{opacity:.9}
.p-brand{font-size:18px!important;text-decoration:none;letter-spacing:.035em}
.p-place{font-size:13px;letter-spacing:.055em;display:flex;align-items:center;gap:9px;margin-top:7px;opacity:.8}
.p-place i{height:2px;width:2px;border-radius:50%;background:currentColor}
.p-clock{background:none;padding:0;text-align:right}
.p-clock>span{display:block;font-size:13px;line-height:1;letter-spacing:.14em;font-variant-numeric:tabular-nums;font-weight:400}
.p-clock small{display:block;font-size:10px;letter-spacing:.1em;margin-top:6px;opacity:.75;text-transform:uppercase}
/* Reading 32: the place, quieter still, above the time */
.p-clock-place{display:block;font-style:normal;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-bottom:6px}
.p-edition{left:4vw;top:5vh;width:min(520px,44vw);transition:opacity 900ms}
.p-overline{text-transform:uppercase;font-size:10px!important;letter-spacing:.19em;line-height:1.5!important;margin:0 0 15px!important;opacity:.8}
.p-edition h1{font:clamp(20px,1.7vw,26px)/1.15 Kerub,Georgia,serif;letter-spacing:-.01em;margin:0;max-width:22em;text-wrap:balance;text-shadow:0 1px 14px #0b20284a;opacity:.92}
/* The name and its strapline condense once the reading has arrived. */
#presenter.is-named .p-edition h1{animation:p-text 1800ms ease backwards}
.p-strap{font-size:11px;letter-spacing:.04em;line-height:1.5;margin:6px 0 0;opacity:.6;max-width:44em;font-variant-numeric:tabular-nums}
#presenter.is-named .p-strap{animation:p-text 1600ms ease 700ms backwards}
.p-strap:empty{display:none}
.p-vignette{inset:0;pointer-events:none}
/* Reading 14: one complication in focus, the rest on a shelf below. */
.p-focus{position:absolute;left:0;right:0;top:15vh;height:52vh;pointer-events:none}
.p-focus-card{position:absolute;left:50%;top:0;width:min(760px,64vw);transform:translateX(-50%);text-align:center;opacity:0;transition:opacity 1600ms ease;pointer-events:none;color:var(--white);text-shadow:0 1px 12px #15313c70}
.p-focus-card[data-state="focus"]{opacity:1;pointer-events:auto;transition-delay:600ms}
.p-focus-card[data-state="leaving"]{opacity:0;transition:opacity 700ms ease}
.p-slot-focus{display:block;width:100%;height:36vh;margin:0 auto}
.p-focus-card .p-comp-label{justify-content:center;margin-top:14px;font-size:10.5px}
.p-focus-card strong{font:clamp(24px,2.4vw,34px)/1.15 Kerub,Georgia,serif;display:block;font-weight:400;margin-top:8px;text-wrap:balance}
/* Reading 18: the stanza replaces the shelf in stanza scenes. The lines print
   as their complications leave focus; the ink layer settles the drawing's
   particles into the glyphs and keeps a living veil over the words. */
/* The poem has its own surface (John, 20 September: 'vi måste skilja på dessa'): the left column; the drawing in focus sits to the right. */
/* Reading 40 (John, 24 Sep): the poem stands in the middle the whole time, a little above it (the trees hold the bottom); the complications come and go around it. */
.p-stanza{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:min(760px,46vw);text-align:center;pointer-events:none;color:var(--white);text-shadow:0 1px 12px #15313c70;display:none}
#presenter[data-stanza="1"] .p-focus-card{left:70%;width:min(680px,52vw)}
#presenter[data-stanza="1"] .p-stanza{display:block}
/* The poem scene: every stanza so far, centred, the perspectives as small labels. */
#presenter[data-poem="1"] .p-stanza{left:50%;top:8vh;width:min(900px,70vw);transform:translateX(-50%);max-height:78vh;overflow:hidden;text-align:left}
#presenter[data-scene="form"] .p-stanza{width:min(900px,58vw)}
#presenter[data-poem="1"] .p-line{margin-bottom:6px;font-size:clamp(17px,1.4vw,22px)}
.p-stanza-label{margin:0;height:22px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:0}
/* Narrow screens: the complications above, the poem below them in the middle (the trees hold the lower half). */
@media(max-width:900px){.p-stanza{left:4vw;right:4vw;width:auto;top:34vh;transform:none}#presenter[data-scene="form"] .p-stanza{width:auto}.p-proofs{left:4vw;right:4vw;top:3vh;bottom:auto;height:28vh}.p-proof{width:44vw}.p-proof-0{left:0;top:0}.p-proof-1{right:0;top:0}.p-proof-2{left:26%;top:44%}.p-slot-proof{height:13vh}}
#presenter[data-stanza="1"] .p-shelf{display:none}
#presenter[data-stanza="1"] .p-edition{opacity:0;pointer-events:none;transition:opacity 1200ms ease}
/* Reading 42 (John, 24 Sep: the name was large and fine in one scene, far too small in the next): the name stands large above every stanza, a step below the form scene's. */
.p-stanza-title{margin:0 auto .5em;max-width:16em;font:clamp(26px,2.5vw,42px)/1.1 Kerub,Georgia,serif;opacity:0;letter-spacing:-.008em;text-wrap:balance}
#presenter[data-poem="1"] .p-stanza-title{font-size:clamp(22px,1.9vw,32px)}
/* Reading 34: in the form scene the name is the work — the largest thing on the screen, set once. */
#presenter[data-scene="form"] .p-stanza-title{font-size:clamp(30px,3.3vw,56px);line-height:1.06;letter-spacing:-.012em;margin:0 auto .55em;max-width:14em;text-wrap:balance}
/* Reading 19: a poem, not a list — verse lines, no marks. */
/* Reading 23: the poem is particles only. The line element keeps the text for layout, measurement and screen readers, but never shows it; the ink layer writes the words. */
.p-line{display:block;margin:0 0 11px 0;font:italic clamp(20px,1.7vw,26px)/1.38 Kerub,Georgia,serif;opacity:0;text-wrap:pretty}
.p-line span{display:block}
.p-marks{display:none}
/* The proofs: up to three complications around the poem (left, right, above), in quick succession, then gone. Reading 40: six places, varied line by line (p-at-*). */
.p-proofs{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;display:none}
#presenter[data-stanza="1"] .p-proofs{display:block}
.p-proof{position:absolute;width:min(330px,21vw);text-align:center;color:var(--white);text-shadow:0 1px 12px #15313c70;opacity:0;transition:opacity 900ms ease}
@media(min-width:901px){.p-at-L1{left:3vw;top:9vh}.p-at-L2{left:5vw;top:40vh}.p-at-R1{right:3vw;top:7vh}.p-at-R2{right:5vw;top:38vh}.p-at-T1{left:27vw;top:1.5vh}.p-at-T2{right:27vw;top:1.5vh}.p-at-T1 .p-slot-proof,.p-at-T2 .p-slot-proof{height:13vh}}
.p-proof[data-state="enter"],.p-proof[data-state="hold"]{opacity:1}
.p-proof[data-state="leaving"]{opacity:0;transition:opacity 1600ms ease}
.p-slot-proof{display:block;width:100%;height:20vh}
.p-proof .p-comp-label{justify-content:center;margin-top:6px;font-size:9.5px}
.p-proof strong{display:block;font:clamp(16px,1.35vw,21px)/1.15 Kerub,Georgia,serif;font-weight:400;margin-top:4px;text-wrap:balance}
/* Reading 17: Julius's line under the value — the reading of the drawing. */
.p-voice{display:none}
.p-focus-card .p-voice{display:block;font:italic clamp(14px,1.1vw,16px)/1.35 Kerub,Georgia,serif;margin:6px auto 0;max-width:40em;opacity:.92;text-wrap:pretty}
/* The line needs room: a card that carries one lends 5vh of its slot to the words. */
.p-focus-card:has(.p-voice:not(:empty)) .p-slot-focus{height:31vh}
.p-focus-card .p-voice:empty{display:none}
.p-focus-card .p-voice::before{content:'❧ ';opacity:.55}
.p-focus-card .p-evidence-link{display:block;margin:12px auto 0;background:none;font-size:11px!important;opacity:.7;text-underline-offset:3px;padding:2px 0}
.p-shelf{position:absolute;left:4vw;right:4vw;top:69vh;height:15vh;display:flex;gap:12px;align-items:flex-start;pointer-events:auto}
.p-shelf-card{flex:1 1 0;min-width:0;max-width:220px;text-align:left;padding:8px 10px 8px 12px;color:var(--white);text-shadow:0 1px 10px #15313c70;opacity:0;transition:opacity 1200ms ease;background:none}
.p-shelf-card[data-state="arriving"],.p-shelf-card[data-state="shelf"]{opacity:1}
.p-slot-shelf{display:block;width:100%;height:62px;margin:0}
.p-shelf-card .p-comp-label{font-size:8.5px;margin-top:6px}
.p-shelf-card strong{font-size:12px;line-height:1.2;display:block;font-weight:400;margin-top:3px;text-wrap:balance}
.p-comp-weather .p-slot-shelf{float:none;width:100%;height:62px;margin:0}
.p-comp-label{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;gap:12px}
.p-comp-label>span{opacity:.6}
/* Slots are the ink layer's target boxes. The inline SVG is a fallback for
   a browser without a 2D canvas and stays complete in still/print modes. */
.p-slot{display:block;position:relative}
.p-slot i{animation:p-text 1300ms ease backwards;animation-delay:calc(var(--t-mod) + 700ms + var(--seek))}
.p-slot svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
#presenter.has-ink .p-slot svg{display:none}
/* Every slot is the same height; the ink layer fits each design box inside it with one uniform scale. */
.p-slot-cloud i{position:absolute;left:0;font-size:9px;font-style:normal;letter-spacing:.06em;text-transform:uppercase;opacity:.72;transform:translateY(-50%)}
.p-slot-cloud i:nth-child(1){top:16.7%}.p-slot-cloud i:nth-child(2){top:50%}.p-slot-cloud i:nth-child(3){top:83.3%}
.p-slot-table{display:flex}
.p-slot-table svg{width:33%;height:auto}
/* The vignette dissolves with the wind over the same 2.2 s as the ink scatters;
   an animation (not a transition) so still/held states can pause it. */
/* Reading 27: in a stanza or poem scene the exit belongs to the particles alone; the vignette (which holds the invisible text elements the ink measures) must not slide or blur, or the whole block moves before the particles loosen (John: 'ett fullt hack'). */
#presenter[data-phase=exit]:not([data-stanza="1"]) .p-vignette{animation:p-exit 2200ms ease forwards;animation-delay:var(--exit-seek)}
#presenter[data-phase=clear] .p-vignette{opacity:0}
#presenter[data-phase=enter] .p-vignette,#presenter[data-phase=hold] .p-vignette{opacity:1;transform:none;filter:none}
/* Reading 25: the bottom edge is one small mark until asked (John: 'döljas under en click to expand'); the menu holds the themes, the day controls and the language, two letters. */
.p-footer{bottom:3vh;left:4vw;right:4vw;display:flex;align-items:center;justify-content:flex-start;gap:20px;font-size:12px;text-shadow:0 2px 12px #071622}
.p-footer-inner{order:2;display:flex;align-items:center;justify-content:space-between;gap:20px;flex:1;animation:p-text 500ms ease}
.p-footer-inner[hidden]{display:none}
.p-menu{order:1;background:none;font-size:22px!important;line-height:1;letter-spacing:.08em;padding:6px 2px;opacity:.5;transition:opacity .4s}
.p-menu:hover,.p-footer.is-open .p-menu{opacity:.9}
.p-lang{background:none;font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;padding:8px 0;opacity:.6;transition:opacity .4s}
.p-lang:hover{opacity:1}
.p-footer>button,.p-footer-inner>button{padding:10px 0;background:none;border:0}
.p-footer>button>span,.p-footer-inner>button>span{margin-left:10px}
.p-footer nav{display:flex;gap:23px}
.p-footer nav button{display:flex;gap:7px;align-items:center;padding:8px 0;background:none;opacity:.83;transition:opacity .4s}
.p-footer nav button[aria-pressed=true]{opacity:1}
.p-footer nav button[aria-pressed=true]::before{content:'';width:4px;height:4px;background:currentColor;border-radius:50%}
.p-footer nav button>span:first-child{font-size:10px;opacity:.6}
.p-controls{position:absolute;z-index:6;bottom:9vh;left:4vw;right:4vw;max-width:850px;margin:auto;padding:20px 25px;background:#142a36ed;border:1px solid #ffffff40;backdrop-filter:blur(22px);box-shadow:0 12px 80px #001b3355;animation:p-text 400ms ease}
.p-control-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:.04em}
.p-control-heading button{background:none;font-size:24px!important;padding:0}
.p-timeline{display:flex;align-items:center;gap:16px;margin:14px 0 18px}
.p-timeline output{font:29px Kerub;min-width:78px}
.p-timeline>span{font-size:12px;opacity:.6}
.p-timeline input{flex:1;width:100%;accent-color:#eee7d1}
.p-actions{display:flex;gap:8px;flex-wrap:wrap}
.p-actions button{background:#ffffff0b;border:1px solid #ffffff40!important;padding:7px 12px;font-size:12px!important}
.p-actions button[aria-pressed=true]{background:#fff9eb;color:#253c49!important}
.p-tempo{display:flex;align-items:center;gap:8px;font-size:12px}
.p-tempo select{background:#18303e;border:1px solid #ffffff40;padding:6px;color-scheme:dark;font-size:12px}
.p-settings{display:flex;gap:20px;align-items:center;margin-top:20px;flex-wrap:wrap;font-size:12px}
.p-settings label{display:flex;gap:8px;align-items:center}
.p-settings select,.p-settings input[type=date]{background:#18303e;border:1px solid #ffffff40;padding:4px;max-width:132px;color-scheme:dark}
.p-colour{flex:1;min-width:260px}
.p-colour input{width:100px;accent-color:#dcc791;flex:1}
.p-colour output{min-width:72px;text-align:right;opacity:.75}
.p-caption{font-size:11px;line-height:1.4;opacity:.7;margin:14px 0 0}
.p-caption a{margin-left:10px;text-underline-offset:3px}
.p-status{position:absolute;bottom:8vh;left:4vw;z-index:5;font-size:12px;max-width:70vw;background:#163342bb;padding:5px 8px}
.p-status:empty{display:none}
#pEvidence{background:#e9eadb;color:#293838;padding:35px;border:0;max-width:660px;width:calc(100vw - 32px);max-height:85dvh;overflow:auto;font:18px/1.45 Calibre,Arial}
#pEvidence::backdrop{background:#091b2999;backdrop-filter:blur(8px)}
#pEvidenceClose{float:right;background:none;font-size:28px!important;padding:0}
#pEvidence h2{font:36px/1.1 Kerub,Georgia,serif;margin:20px 0}
#pEvidence p{line-height:1.4}
#pEvidence dl{font-size:16px}
#pEvidence dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-top:20px}
#pEvidence dd{margin:4px 0;overflow-wrap:anywhere}
.p-hash{font-size:11px;overflow-wrap:anywhere}
#presenter.p-only-sky .p-vignette,#presenter.p-only-sky .p-edition{opacity:0;pointer-events:none}
#presenter.p-only-sky .p-vignette button{visibility:hidden}
#presenter.is-still *,#presenter.is-hidden *,#presenter.is-held *{animation-play-state:paused!important}
#presenter.is-still .p-vignette{opacity:1;filter:none;transform:none}
#presenter.is-still #presenter.is-still.p-only-sky .p-vignette{opacity:0}
@keyframes p-text{from{opacity:0;transform:translateY(9px);filter:blur(2px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes p-exit{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translateX(calc(var(--wind-entry) * -1));filter:blur(3px)}}
@media(min-aspect-ratio:2/1){.p-edition{top:5vh;width:60vw}.p-edition h1{font-size:7vh}.p-strap{margin-top:8px;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}@media(max-width:850px){.p-edition{top:6vh;width:80vw}.p-edition h1{font-size:36px}.p-strap{font-size:11px;margin-top:8px}@media(max-width:600px) and (orientation:portrait){.p-focus{top:12vh;height:50vh}.p-focus-card{width:92vw}.p-slot-focus{height:32vh}.p-shelf{top:66vh;height:18vh;overflow-x:auto;scrollbar-width:none}.p-shelf-card{flex:0 0 120px}.p-edition{width:70vw}.p-header{top:22px;right:22px}.p-clock>span{font-size:12px}.p-edition{top:24px;left:22px;width:70vw}.p-edition h1{font-size:30px;max-width:10em}.p-edition .p-overline{margin-bottom:8px!important}.p-strap{display:none}@media(prefers-reduced-motion:reduce){#presenter *{animation:none!important;transition:none!important}}
@media print{#presenter{position:relative;width:100vw;height:100vh;print-color-adjust:exact}.p-footer,.p-controls{display:none!important}}

/* Reading 37: the day plays — only the sky and the clock; the clock a little brighter while the day runs. */
#presenter.is-prologue .p-header{opacity:.9;transition:opacity 1200ms}