/* r5 encounter: Study B (Lamp and Margin) as the spine, entered through the original art's lit window. */
/* the spread is authored in its own page units (1880 × 860) and mapped onto the paper by a projective transform */
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55));z-index:1}
[data-appearance="light"] .vignette{background:radial-gradient(120% 90% at 50% 45%,transparent 60%,rgba(60,44,20,.14))}
.spread{position:fixed;left:0;top:0;width:1880px;height:860px;transform-origin:0 0;z-index:5;mix-blend-mode:multiply;color:#1f1a13;pointer-events:none;will-change:transform}
.spread>*,.spread .slip{pointer-events:auto}
.spread .overline{color:#2c5e4b;font-size:24px;margin:0 0 18px}
.spread .q{font:400 64px/1.06 var(--serif);color:#1f1a13;letter-spacing:-.012em}
.title-page{position:absolute;left:1000px;top:210px;width:470px;transition:opacity .6s var(--ease)}
.spread .promise{font:400 22px/1.55 var(--sans);color:#3a3228;max-width:none;margin:0}
.spread .honesty{font-size:16px;color:#5b5145;border-left-color:#9a5a3e;max-width:none;margin-top:22px;padding-left:14px}
.intro.away,.title-page.away{opacity:0;pointer-events:none}
.runhead{position:absolute;top:44px;margin:0;font:italic 400 17px var(--serif);color:#6a5e4c;transition:opacity .6s var(--ease)}
.runhead.verso{left:400px}.runhead.recto{left:1000px;width:480px;text-align:right}
.runhead.off{opacity:0}
.slip{position:absolute;left:0;top:0;transform-origin:50% 50%;padding:22px 26px 20px;font:400 29px/1.42 var(--serif);color:#1f1a13;transition:opacity .45s var(--ease)}
.slip.page{padding:0}
.slip cite{display:block;margin-top:12px;font:400 15px/1.35 var(--sans);font-style:normal;color:#6a5e4c}
.slip cite b{font-weight:600;color:#3a3228}
.slip mark{background:linear-gradient(transparent 60%,rgba(214,150,110,.42) 60%)}
.slip.small{font-size:24px;padding:18px 20px 16px}
.slip.small cite{font-size:14px}
.slip.off{opacity:0;pointer-events:none}
.slip.against mark{background:linear-gradient(transparent 60%,rgba(170,110,90,.3) 60%)}
.slip.dim{opacity:.74}
.threads{position:absolute;left:0;top:0;width:1880px;height:860px;overflow:visible;pointer-events:none}
.threads path{fill:none;stroke-linecap:round;stroke-width:2.6}
.threads .t-ink{stroke:#2c6a54}
.threads .t-copper{stroke:#a4502f}
.threads .knot{stroke:none}
.note{position:absolute;left:1582px;top:44px;width:270px;margin:0;font:italic 400 30px/1.25 var(--serif);color:#2c5e4b;clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.45,.05,.3,1)}
.note small{display:block;margin-top:10px;font:400 14px var(--sans);font-style:normal;color:#6a5e4c}
.note.on{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.note{transition:none}}
body.choosing .caption{bottom:auto;top:5.6rem}

/* phones: the spread is the picture; the words are set in a sheet below it */
body.portrait .spread{pointer-events:none}
body.portrait .spread>*{pointer-events:none}
.sheet{position:fixed;left:.75rem;right:.75rem;bottom:calc(clamp(.8rem,3vh,1.6rem) + 6.6rem);z-index:30;max-height:34vh;overflow:auto;display:flex;flex-direction:column;gap:.5rem}
.sheet .passage{position:relative;transform:none;width:auto;padding:.7rem .9rem .65rem 2.2rem;border-radius:10px;background:var(--card);border:1px solid var(--rule);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.98rem}
.sheet .passage::before{content:attr(data-n);position:absolute;left:.85rem;top:.72rem;font:600 .78rem var(--sans);color:var(--accent)}
.sheet .passage.against{border-color:var(--copper)}
body.portrait .caption{bottom:auto;top:calc(35vh);font-size:1rem;text-shadow:0 0 14px var(--bg),0 0 5px var(--bg)}
body.portrait .caption small{display:none}
body.portrait.choosing .caption{top:5.4rem}
.gutter{position:absolute;left:880px;top:0;width:120px;height:860px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(120,98,70,.10) 30%,rgba(70,52,34,.38) 49%,rgba(40,30,20,.5) 50%,rgba(70,52,34,.34) 51%,rgba(120,98,70,.09) 70%,rgba(255,255,255,0) 100%);pointer-events:none}
.crease{position:absolute;top:0;width:34px;height:860px;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.crease.l{left:323px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(90,70,48,.16) 48%,rgba(255,255,255,.0) 52%,rgba(90,70,48,.06) 60%,rgba(255,255,255,0))}
.crease.r{left:1523px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(90,70,48,.06) 40%,rgba(90,70,48,.16) 50%,rgba(255,255,255,0))}
.crease.on{opacity:1}
body.choosing .caption{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:.5rem .9rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}


/* ================= r5 proposal: the page scrolls; the encounter is its first screen ================= */
html,body{height:auto;overflow-x:hidden;overflow-y:visible}
body{background:var(--bg)}
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;overflow:clip;isolation:auto;--controls-b:clamp(.8rem,3vh,1.6rem)}
.hero canvas.scene{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.hero.inside canvas.scene{opacity:1}
.hero .vignette{position:absolute}
.hero .topbar{position:absolute}
.hero .steps,.hero .caption,.hero .fallback{position:absolute}
.hero .sheet{position:absolute}
.hero .spread{position:absolute;opacity:0;transition:opacity .8s var(--ease) .35s}
.hero.inside .spread{opacity:1}

/* the opening: the original art, unaltered; the way in is through its lit window */
.nightplate{position:absolute;inset:0;margin:0;z-index:2;overflow:hidden;transition:opacity 1s var(--ease) .5s}
.nightplate img{width:100%;height:100%;object-fit:cover;object-position:78% 72%;display:block;transform-origin:50% 50%;transition:transform 1.9s cubic-bezier(.6,0,.25,1)}
.nightplate::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 70%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%)}
.hero.inside .nightplate{opacity:0;pointer-events:none}
.hero .intro{position:absolute;z-index:20;left:clamp(1rem,5vw,4.5rem);top:clamp(6rem,15vh,9rem);max-width:min(38rem,calc(100% - 2rem));transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hero .intro .q{color:#f3ecdf;font-size:clamp(2.4rem,5vw,4.6rem)}
.hero .intro .promise{color:#d6cfc1}
.hero .intro .honesty{color:#aab0a9}
.hero .intro .overline{color:#9fd3b9}
.hero .intro.away{opacity:0;transform:translateY(-14px);pointer-events:none}
.art-note{position:absolute;right:1rem;bottom:.6rem;z-index:21;margin:0;font:400 .68rem var(--sans);color:#b8b3a8;transition:opacity .5s}
.hero.inside .art-note{opacity:0}
.read-on{position:absolute;left:clamp(1rem,5vw,4.5rem);bottom:clamp(1rem,3.4vh,1.8rem);z-index:41;font:400 .82rem var(--sans);color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.hero:not(.inside) .read-on{color:#c9c3b6}
.read-on:hover{color:var(--ink)}
.hero:not(.inside) .btn{background:#f0d9a8;color:#1a140a}

/* Light: the night art is a lit window set into the page (as r4), not a full-bleed night */
[data-appearance="light"] .nightplate{inset:auto;right:clamp(1rem,5vw,4.5rem);top:50%;transform:translateY(-46%);width:min(38vw,560px);aspect-ratio:4/5;border-radius:6px;box-shadow:0 1px 2px rgba(58,40,22,.2),0 40px 80px -40px rgba(20,24,30,.55)}
[data-appearance="light"] .nightplate::after{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,0) 60%,rgba(0,0,0,.25))}
[data-appearance="light"] .nightplate img{object-position:84% 70%}
[data-appearance="light"] .hero .intro .q{color:var(--ink)}
[data-appearance="light"] .hero .intro .promise{color:var(--ink-2)}
[data-appearance="light"] .hero .intro .honesty{color:var(--muted)}
[data-appearance="light"] .hero .intro .overline{color:var(--accent)}
[data-appearance="light"] .hero .intro{max-width:min(34rem,46vw)}
[data-appearance="light"] .art-note{color:var(--muted)}
[data-appearance="light"] .hero:not(.inside) .read-on{color:var(--muted)}
[data-appearance="light"] .hero:not(.inside) .btn{background:var(--btn);color:var(--btn-ink)}

/* where a reading goes */
.shelf{max-width:1240px;margin:0 auto;padding:clamp(5rem,10vw,8rem) clamp(1rem,6vw,5.5rem) 3rem}
.shelf-head{max-width:46rem;margin-bottom:2.4rem}
.shelf-head h2{font:400 clamp(1.9rem,3.4vw,2.8rem)/1.1 var(--serif);margin:0}
.shelf-head .lede{color:var(--ink-2);margin-top:1rem}
.shelf-strip{grid-template-columns:repeat(18,minmax(0,1fr))}
.volume{min-width:0;position:relative;transition:transform .9s cubic-bezier(.2,.9,.25,1),opacity .6s var(--ease)}
.volume .v-inner{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:2/3;padding:8% 9%;border-radius:1px 3px 3px 1px;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,0) 14%),#244f41;color:#eaf4ee;box-shadow:0 6px 10px -6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.volume .v-tag{font:600 clamp(.42rem,.6vw,.6rem)/1.1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#a9dcc4}
.volume .v-line{font:italic 400 clamp(.55rem,.85vw,.82rem)/1.15 var(--serif)}
.volume .v-date{font:400 clamp(.4rem,.55vw,.55rem)/1.2 var(--sans);color:#b9d6c8}
.volume.empty .v-inner{background:none;border:1px dashed var(--rule-2);color:var(--muted);box-shadow:none;justify-content:center;text-align:center}
.volume.arriving{transform:translateY(-60px) rotate(-4deg);opacity:0}
.volume:not(.empty):not(.arriving){transform:translateY(-9px)}
.linklike{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.hero .steps{z-index:42}

@media (max-width:720px){
  .hero .intro{top:6.3rem}
  .hero .intro .q{font-size:1.9rem}
  .nightplate img{object-position:84% 70%}
  .nightplate::after{background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.55) 45%,rgba(0,0,0,.1) 75%)}
  [data-appearance="light"] .nightplate{left:1rem;right:1rem;top:auto;bottom:6.2rem;transform:none;width:auto;aspect-ratio:auto;height:28vh}
  [data-appearance="light"] .hero .intro{max-width:none}
  .read-on{left:50%;transform:translateX(-50%);bottom:.5rem;white-space:nowrap}
  .hero{--controls-b:2.2rem}
  .art-note{bottom:auto;top:3.4rem;display:none}
  .shelf-strip{grid-template-columns:repeat(7,minmax(0,1fr))}
  .volume .v-tag,.volume .v-date{display:none}
}
/* r4's movement selectors (.reading grid, .readings rule) are not used by r5; neutralise them inside the encounter */
.hero .reading{display:block;grid-template-columns:none;gap:0}
.hero .readings{border:0;max-width:none;display:flex}
.hero .readings[hidden]{display:none}
[data-appearance="light"] .hero.inside .nightplate{transition:opacity .5s var(--ease)}
/* first-screen direct path for readers who don't want the demonstration */
.hero .intro .direct{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1.1rem 0 0;font:600 .86rem var(--sans)}
.hero .intro .direct a{color:#e9e1d2;text-decoration:none;border-bottom:1px solid rgba(233,225,210,.35);padding-bottom:1px}
[data-appearance="light"] .hero .intro .direct a{color:var(--ink);border-bottom-color:var(--rule-2)}
.hero .intro .direct a:hover{border-bottom-color:currentColor}
/* the longer reading, carried from r4 */
.longer{border-top:1px solid var(--rule)}
.longer-head{max-width:1240px;margin:0 auto;padding:clamp(5rem,10vw,8rem) clamp(1rem,6vw,5.5rem) 0}.longer-head>*{max-width:46rem}
.longer-head h2{font:400 clamp(1.9rem,3.4vw,2.8rem)/1.1 var(--serif);margin:0}
.longer-head .lede{color:var(--ink-2);margin-top:1rem}
.noscript-reading{max-width:40rem;margin:0 auto;padding:4rem 1.2rem;font:400 1.1rem/1.55 var(--serif)}
.noscript-reading blockquote{margin:1.2rem 0}.noscript-reading cite{display:block;font:400 .8rem var(--sans);font-style:normal;color:var(--muted)}
/* shared study chips (.reading) must not restyle r4's reading layout in the longer reading */
.movement .reading{max-width:none;background:none;border:0;border-radius:0;padding:0;cursor:auto;text-align:inherit;font:inherit;color:inherit;backdrop-filter:none;-webkit-backdrop-filter:none}
/* the method and the next book travel with the kept reading (carried from r4's keep card) */
.shelf .carry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2.5rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule)}
.shelf .kc-next{display:grid;grid-template-columns:88px minmax(0,1fr);gap:1.2rem;align-items:start}
.shelf .kc-next img{width:88px;height:auto;border-radius:2px;box-shadow:var(--shadow-obj)}
.shelf .method-name{font:400 1.6rem/1.2 var(--serif);margin:.2rem 0 .5rem}
@media (max-width:720px){.shelf .carry{grid-template-columns:1fr}}
/* Quiet: the same six movements on a flat printed page; no art, no scene, no motion (independent of Light/Dark) */
html.quiet .hero canvas.scene,html.quiet .nightplate,html.quiet .hero .vignette,html.quiet .art-note{display:none!important}
html.quiet .hero .spread{mix-blend-mode:normal;background:#f4eee2;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.12);transition:none}
[data-appearance="dark"].quiet .hero .spread{background:#e9e2d3}
html.quiet .hero .gutter{background:linear-gradient(90deg,transparent 45%,rgba(60,45,30,.18) 50%,transparent 55%)}
html.quiet .hero .crease{display:none}
html.quiet .hero .note{clip-path:none!important;transition:none}
html.quiet .hero .intro .q{color:var(--ink)}html.quiet .hero .intro .promise{color:var(--ink-2)}html.quiet .hero .intro .honesty{color:var(--muted)}html.quiet .hero .intro .overline{color:var(--accent)}
html.quiet .hero .intro .direct a{color:var(--ink);border-bottom-color:var(--rule-2)}
html.quiet .hero:not(.inside) .btn{background:var(--btn);color:var(--btn-ink)}
html.quiet .hero:not(.inside) .read-on{color:var(--muted)}
html.quiet *{transition:none!important;animation:none!important}
.chip[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.sheet .passage.kept{border-color:var(--accent)}
@media (max-width:440px){.hero .topbar{gap:.35rem;padding:.35rem .7rem}.hero .topbar .chip{font-size:.72rem;padding:.42rem .55rem}.hero .brand{font-size:.92rem}.hero .brand img{width:20px;height:20px}}

/* agency repair (2026-09-24): declining every authored reading is a first-class choice */
.hero .reading.decline{border-style:dashed}
.hero .own-field{display:flex;flex-direction:column;gap:.3rem;flex-basis:100%;max-width:34rem;margin:0 auto;font:600 .8rem var(--sans);color:var(--ink)}
.hero .own-field[hidden]{display:none}
.hero .own-field textarea{font:400 1.05rem/1.4 var(--serif);color:var(--ink);background:var(--card);border:1px solid var(--rule-2);border-radius:10px;padding:.6rem .8rem;resize:vertical;min-height:3.2rem}
.hero .own-field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hero .own-field small{font:400 .72rem var(--sans);color:var(--muted)}
html.quiet .hero .own-field textarea{transition:none}

/* ================= r6 production additions (2026-09-25) ================= */
/* reader's own contribution: warm gold, distinct from connection green and complication copper; always also named in words */
[data-appearance="dark"]{--reader:#e8b862;--reader-ink:#241a06}
[data-appearance="light"]{--reader:#7a5410;--reader-ink:#fbf4e3}
.hero .topbar,.topbar{top:0}
@media (max-width:720px){.topbar{top:0}.hero .intro{top:4.6rem}}
.skip{position:absolute;left:.75rem;top:-3rem;z-index:100;padding:.55rem .8rem;border-radius:8px;background:var(--btn);color:var(--btn-ink);font:600 .85rem var(--sans);text-decoration:none}
.skip:focus{top:.75rem}
.note{color:#6b4a0c}
.note small{color:#5d5245}
.slip .role,.sheet .role{display:block;margin:0 0 6px;font:600 14px/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#2a2219}
.sheet .role{font-size:.72rem;color:var(--ink-2);margin-bottom:.25rem}
.slip .incontext,.sheet .incontext,.passage .incontext,.textview .incontext{color:inherit;text-decoration:underline;text-underline-offset:2px}
.slip cite a{pointer-events:auto}
.slip[data-role="complicates"] mark{background:linear-gradient(transparent 60%,rgba(170,110,90,.3) 60%)}
.slip[data-role="compares"]{outline:1px dotted rgba(60,50,40,.35);outline-offset:4px}
.sheet .passage.related{border-color:var(--copper)}
.sheet .passage.kept{border-color:var(--reader);background:color-mix(in srgb,var(--reader) 12%,var(--card))}
.sheet .passage.kept i{color:var(--ink)}
.hero .reading.decline[data-id="own"][aria-pressed="true"]{border-color:var(--reader);box-shadow:inset 0 0 0 1px var(--reader)}
.hero .own-field textarea{border-color:var(--reader)}
.volume:not(.empty) .v-inner{background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,0) 14%),#6b4a12;color:#fbf2df}
.volume:not(.empty) .v-tag,.volume:not(.empty) .v-date{color:#f3d9a4}
.planned-status{margin-top:1rem;padding:.7rem .9rem;border-left:2px solid var(--copper);color:var(--ink-2);font-size:.92rem}
.purposes{list-style:none;padding:0;margin:2rem 0 2.6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1.4rem 2rem}
.purposes li{border-top:1px solid var(--rule-2);padding-top:.9rem;color:var(--ink-2)}
.purposes b{display:block;font:400 1.25rem/1.2 var(--serif);color:var(--ink);margin-bottom:.35rem}
.passages blockquote footer,.kc-next blockquote footer{font:400 .78rem var(--sans);color:var(--muted);margin-top:.4rem}
.passages blockquote footer a,.kc-next footer a{color:inherit}
/* phones: at the choice, the picture recedes and the evidence stays readable beside the options */
@media (max-width:720px){
  body.portrait[data-step="4"] .hero canvas.scene,body.portrait[data-step="4"] .hero .spread{visibility:hidden}
  body.portrait[data-step="4"] .hero .caption{top:3.9rem;bottom:auto}
  body.portrait[data-step="4"] .hero .sheet{top:8.6rem;bottom:auto;max-height:26vh}
  body.portrait[data-step="4"] .hero .steps{top:calc(8.6rem + 26vh + .8rem);bottom:.8rem;max-height:none;overflow:auto;align-content:flex-start;left:0;right:0;transform:none;margin:0 auto;padding:0 .75rem .5rem}
}
@media (max-width:720px){body.portrait[data-step="4"] .hero .read-on{display:none}}

/* dimmed passages remain readable (measured ≥4.5:1) */
.slip.dim{opacity:.88}

/* r6 final (2026-09-25): the cue never overlaps the controls, the evidence sheet or the page, at any width or height.
   encounter.js measures the controls (--controls-h) and, on phones, the evidence sheet (--sheet-h); the cue is placed
   from those measurements instead of a fixed offset. In Quiet the flat page is fitted above the cue; in the 3D view
   the book is framed above it. */
/* one controls-bottom value (--controls-b, set on .hero; 2.2rem on phones) is shared by the controls, the sheet and the cue */
.hero .steps{bottom:var(--controls-b)}
.hero .caption{bottom:calc(var(--controls-b) + var(--controls-h,3rem) + .7rem)}
.hero .caption:empty{display:none}
/* the cue sits on the card ground at every width (the moving scene behind it cannot guarantee contrast); first failure:
   desktop Light cue measured 4.45 (WebKit) / 4.70 (Chromium) with no ground, checks/contrast-cue-run2-before-cue-card.json */
.hero .caption:not(:empty){background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:.45rem .9rem;text-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.choosing .hero .caption{bottom:auto;top:5.6rem}
@media (max-width:720px){
  body.portrait .hero .sheet{bottom:calc(var(--controls-b) + var(--controls-h,3rem) + .6rem);max-height:30vh}
  body.portrait .hero .caption{top:auto;bottom:calc(var(--controls-b) + var(--controls-h,3rem) + var(--sheet-h,0px) + 1.2rem);background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:.4rem .8rem;text-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  body.portrait[data-step="4"] .hero .caption{top:3.9rem;bottom:auto}
  body.portrait[data-step="4"] .hero .sheet{top:8.6rem;bottom:auto;max-height:26vh}
}
/* desktop choice (r6 final): shrinking the book to fit between the cue and the choices cannot keep its passages legible,
   and the choices covered The Prophet and its source at 1024x768. So, as on phones, the decorative page steps aside:
   the same evidence sheet (every passage, role and "Read in context" link) sits in a left column, every choice, the
   own-words field and the actions in a right column, both below the cue (--col-top is measured from its actual bottom).
   Each column scrolls within the stage when it must. The same in normal and Quiet; the scene returns on leaving step 4. */
body:not(.portrait)[data-step="4"] .hero canvas.scene,body:not(.portrait)[data-step="4"] .hero .spread{visibility:hidden}
body:not(.portrait)[data-step="4"] .hero .read-on{display:none}
body:not(.portrait)[data-step="4"] .hero .sheet{top:var(--col-top,12rem);bottom:var(--controls-b);left:max(1rem,calc(50% - 37rem));right:calc(50% + .75rem);max-height:none;overflow:auto;overscroll-behavior:contain;padding:.2rem .3rem .3rem}
body:not(.portrait)[data-step="4"] .hero .sheet .passage{font-size:1.05rem;flex-shrink:0}
body:not(.portrait)[data-step="4"] .hero .sheet cite{font-size:.86rem}
body:not(.portrait)[data-step="4"] .hero .sheet .role{font-size:.78rem}
body:not(.portrait)[data-step="4"] .hero .steps{top:var(--col-top,12rem);bottom:var(--controls-b);left:calc(50% + .75rem);right:max(1rem,calc(50% - 37rem));transform:none;max-width:none;max-height:none;overflow:auto;overscroll-behavior:contain;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;padding:.2rem .3rem .5rem}
body:not(.portrait)[data-step="4"] .hero .steps>*{flex-shrink:0}
body:not(.portrait)[data-step="4"] .hero #backBtn,body:not(.portrait)[data-step="4"] .hero #nextBtn{align-self:flex-start}
body:not(.portrait)[data-step="4"] .hero .readings{justify-content:flex-start}
body:not(.portrait)[data-step="4"] .hero .reading{max-width:none;flex:1 1 13rem}
body:not(.portrait)[data-step="4"] .hero .own-field{flex:0 0 auto;max-width:none;margin:0;padding:.3rem 0 0} /* its row flex-basis:100% would read as full column height; continuation.css:257 .own-field padding (for the lower section) does not belong here */

/* r6.5 large text (html.lt-large, set by encounter.js when the text size is at least 112.5% of the default). A fixed-height
   stage cannot hold enlarged words over the scene (in r6.4, 28 of 32 kept cases failed at 200%), so the page flows: the
   scene keeps its own region at the top (--scene-h) under the wrapping top bar; the opening text, the cue, the passages
   (with the kept reading), the controls and the read-on link follow below it in reading order; buttons wrap as full rows
   instead of tall pills. Normal text is unaffected. */
.rem-probe{position:absolute;top:0;left:0;width:1rem;height:1px;visibility:hidden;pointer-events:none}
html.lt-large .hero{height:auto!important;min-height:0!important;display:flex;flex-direction:column;padding:var(--scene-h,60vh) 0 1.5rem}
html.lt-large body[data-step="4"] .hero{padding-top:calc(var(--topbar-h,4rem) + .6rem)}
html.lt-large .hero canvas.scene,html.lt-large .hero .vignette,html.lt-large .nightplate{top:0!important;bottom:auto!important;height:var(--scene-h,60vh)!important}
html.lt-large[data-appearance="light"] .nightplate{top:calc(var(--topbar-h,4rem) + .5rem)!important;height:calc(var(--scene-h,60vh) - var(--topbar-h,4rem) - 1rem)!important;width:auto!important;transform:none!important;left:auto!important;right:clamp(1rem,5vw,4.5rem)!important;aspect-ratio:4/5!important}
html.lt-large .hero .topbar{flex-wrap:wrap;row-gap:.35rem}
html.lt-large .hero .intro,html.lt-large .hero .caption,html.lt-large .hero .fallback,html.lt-large .hero .sheet,html.lt-large .hero .steps,html.lt-large .hero .read-on{position:relative!important;inset:auto!important;transform:none!important;max-height:none!important;overflow:visible!important;margin:.9rem auto 0!important;width:auto!important;max-width:min(46rem,calc(100% - 2rem))!important;z-index:5}
html.lt-large .hero .intro{order:1;align-self:stretch}
html.lt-large .hero .intro.away{position:absolute!important;top:0!important;left:0!important;margin:0!important} /* out of the flow and transparent (opacity 0, as at normal size); display:none would remove the page's h1 from the accessibility tree (axe: page-has-heading-one, in r6.5) */
html.lt-large .hero .caption{order:2;align-self:center}
html.lt-large .hero .fallback{order:3}
html.lt-large .hero .sheet{order:4;align-self:stretch}
html.lt-large .hero .steps{order:5;align-self:stretch;flex-direction:row!important;flex-wrap:wrap!important;justify-content:center!important;align-items:stretch!important;gap:.5rem!important;padding:0!important}
html.lt-large body[data-step="4"] .hero .steps{flex-direction:column!important}
html.lt-large .hero .steps .btn,html.lt-large .hero .steps>.chip{flex:1 1 auto;max-width:100%;white-space:normal;line-height:1.25;border-radius:.9em;text-align:center}
html.lt-large .hero .reading{max-width:none!important;flex:1 1 100%!important}
html.lt-large .hero .own-field{max-width:none!important;margin:0!important;padding:.3rem 0 0!important}
html.lt-large .hero .read-on{order:6;align-self:center;white-space:normal}

/* x3: wrap, do not clip */
@media (max-width:560px){.shelf-row{flex-wrap:wrap;row-gap:1.3rem}}
.planned{white-space:normal;display:inline-block;max-width:100%}
footer,footer p,footer a,.foot-links a{overflow-wrap:anywhere}

/* x5 (real text zoom 2.0 at 320 px): the "Try it next" passage moves below its cover when its column would be narrower than 9em */
.shelf .kc-next{display:flex;flex-wrap:wrap}.shelf .kc-next>img{flex:0 0 88px}.shelf .kc-next>div{flex:1 1 9em;min-width:0}.kc-next blockquote p{overflow-wrap:break-word}