/* Layered scroll drawings (js/scrolly/ufh-section.js): the engine's plates with the build, the warmth and the family
   drawn live between them, set by the reader's scroll.

   At rest (no script, or reduced motion) the section is a figure: the finished still, then the steps as a short
   numbered list, as the frame scrolls are. Live, the section grows tall, the picture sticks under the nav, the
   camera moves through the drawing as the reader scrolls, and the captions take turns under it. The picture's size is
   set by the script, to the stage's shape (wide on screens from 900px, 11:10 below: the least that holds the whole family). */
.sl { margin: 0 0 64px; }
.sl-stage { max-width: var(--w, 1200px); margin: 0 auto; padding: 0 40px; }
.sl-frame { position: relative; }
.sl-still, .sl-still img { display: block; width: 100%; height: auto; }
.sl-layers { display: none; }
.sl-caps { margin: 22px 0 0; padding: 0 0 0 1.4em; display: grid; gap: 10px; max-width: 62ch; }
.sl-cap { font-family: var(--font-body, Inter, sans-serif); font-size: 1rem; line-height: 1.6; color: #404040; padding-left: 4px; }
.sl-cap::marker { font-family: var(--font-display, Sora, sans-serif); font-weight: 600; color: #556B2F; }

.sl-live { height: 700vh; }
.sl-live .sl-stage {
    position: sticky; top: var(--nav-height, 80px);
    height: calc(100vh - var(--nav-height, 80px));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.sl-live .sl-still { display: none; }
.sl-live .sl-frame { overflow: hidden; background: #FFFFFF; flex: none; }
.sl-live .sl-layers { display: block; position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.sl-live .sl-layers > svg { will-change: transform; }     /* each live layer repaints on its own */
.sl-layers > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.sl-live .sl-caps { position: relative; width: 100%; max-width: 62ch; min-height: 5em; margin: 0; padding: 0; list-style: none; display: block; }
.sl-live .sl-cap {
    position: absolute; top: 0; left: 0; right: 0; padding: 0 0 0 14px; border-left: 2px solid #D3E2B7;
    opacity: 0; transform: translateY(6px);
    transition: opacity .45s var(--ease-out-quart, ease), transform .45s var(--ease-out-quart, ease);
}
.sl-live .sl-cap.is-on { opacity: 1; transform: none; }

/* the loft's build has nine steps before the family comes up: ten screens of scroll; the extension's nine steps and
   its household: eleven */
.sl-loft.sl-live { height: 1000vh; }
.sl-ext.sl-live { height: 1100vh; }
@supports (height: 100svh) {
    .sl-live { height: 700svh; }
    .sl-loft.sl-live { height: 1000svh; }
    .sl-ext.sl-live { height: 1100svh; }
    .sl-live .sl-stage { height: calc(100svh - var(--nav-height, 80px)); }
}
@media (max-width: 768px) {
    .sl-stage { padding: 0 16px; }
    .sl-live .sl-stage { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .sl-live .sl-cap { transition: none; }
}

/* On a wide screen the live picture runs the whole width of the page, edge to edge, as if the reader were standing in
   the room; the captions keep a readable measure under it, lined up with the text above. */
@media (min-width: 900px) {
    .sl-live .sl-stage { max-width: none; padding: 0; }
    .sl-live .sl-caps { padding: 0 40px; box-sizing: content-box; max-width: min(62ch, calc(100% - 80px)); }
}

/* The solar scroll (js/scrolly/solar-section.js): a day, nine screens of scroll, and the switch between the two houses
   over the picture (a typical house, with a loft conversion). Without script the switch stays hidden: the still shows
   the typical house. */
.sl-switch { display: none; }
.sl-solar.sl-live { height: 900vh; }
@supports (height: 100svh) { .sl-solar.sl-live { height: 900svh; } }
.sl-live .sl-switch { display: inline-flex; flex: none; border: 1px solid #C9D6B4; border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.sl-live .sl-switch button { font: 500 .92rem var(--font-body, Inter, sans-serif); padding: 8px 16px; min-height: 40px; border: 0;
    background: #FFFFFF; color: #556B2F; cursor: pointer; }
.sl-live .sl-switch button + button { border-left: 1px solid #C9D6B4; }
/* the picture fills the screen under the nav: the switch in its own strip over it (on the picture it would cover the
   sun, the battery's lights or a head on a short screen) */
.sl-live .sl-switch { display: flex; width: max-content; margin: 8px auto; }
.sl-solar.sl-live .sl-stage { display: flow-root; }     /* (the switch's margin kept inside the stage) */
.sl-live .sl-switch button[aria-pressed=true] { background: #E3ECD6; }
.sl-live .sl-switch button:focus-visible { outline: 2px solid #556B2F; outline-offset: -2px; }
@media (max-width: 768px) { .sl-live .sl-switch button { padding: 8px 12px; font-size: .86rem; } }

/* 20 Oct 2026, Pavel: the desktop scroll "should take the whole screen while animating", and on a phone "I need to see
   it without turning it". One composition on every screen: the picture fills the stage under the nav and the captions
   sit over its foot. On a desktop the camera fills the screen around the story (cutting at most a fifth); on an upright
   phone it shows the whole drawing across the width (js/scrolly/player.js: fitFrame, fillView). */
.sl-live .sl-stage { max-width: none; padding: 0; display: block; }
.sl-live .sl-caps { position: absolute; left: 40px; bottom: 28px; width: min(62ch, calc(100% - 80px)); max-width: none;
                    min-height: 0; margin: 0; padding: 0; z-index: 2; }
.sl-live .sl-cap { top: auto; bottom: 0; padding: 12px 16px; background: rgba(255, 255, 255, .94);
                   border-left: 3px solid #556B2F; border-radius: 0 10px 10px 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
@media (max-width: 767px) {
    .sl-live .sl-caps { left: 16px; bottom: 20px; width: calc(100% - 32px); }
}

/* The MVHR scroll (js/scrolly/mvhr-section.js): the air through the house on a winter evening, nine screens of scroll
   (the camera at one distance room to room, the loft, the front bedroom, the bathroom, the kitchen, then out to the
   whole house) */
.sl-mvhr.sl-live { height: 900vh; }
@supports (height: 100svh) { .sl-mvhr.sl-live { height: 900svh; } }

/* The air conditioning scroll (js/scrolly/aircon-section.js): a heatwave evening, seven screens of scroll (close on the
   outdoor unit, then the bedroom and the sitting room at one distance, then out to the whole house) */
.sl-aircon.sl-live { height: 700vh; }
@supports (height: 100svh) { .sl-aircon.sl-live { height: 700svh; } }

/* The new build scroll (js/scrolly/nb/section.js): the gap at dusk, ten build steps in the day, the dusk again and the
   family's first evening, thirteen screens of scroll; its lights multiply over the drawing */
.sl-nb.sl-live { height: 1300vh; }
@supports (height: 100svh) { .sl-nb.sl-live { height: 1300svh; } }

/* The renovation scroll (js/scrolly/renovation/section.js): close on the tired front room, eight steps of the
   renovation, the evening coming and the couple's first evening, eleven screens of scroll; its light multiplies over
   the drawing */
.sl-reno.sl-live { height: 1100vh; }
@supports (height: 100svh) { .sl-reno.sl-live { height: 1100svh; } }

/* The basement scroll (js/scrolly/basement/section.js): close on the old cellar, thirteen steps of the conversion and
   the dig-out, the evening coming and the three friends' first evening, fifteen screens of scroll; its light
   multiplies over the drawing */
.sl-bsmt.sl-live { height: 1500vh; }
@supports (height: 100svh) { .sl-bsmt.sl-live { height: 1500svh; } }