/* Layout only: no CSS animation and no smooth-scrolling. */
*{box-sizing:border-box}body{margin:0;background:#f5f1e8;color:#263c30;font:17px/1.65 Arial,sans-serif}header{padding:20px 5%;display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #ccc;font-size:12px}header label{cursor:pointer}input{accent-color:#31553c}.instructions{padding:22px 5%;font-size:13px;color:#5e645c}#story{display:grid;grid-template-columns:65% 35%;position:relative;margin:0 5%}.chapters{grid-column:1;grid-row:1;min-width:0}.visual{grid-column:2;grid-row:1;align-self:start;position:sticky;top:20vh;background:#d5dacd;padding:30px 15px;z-index:2;border:1px solid #aeb7a6}.visual-origin{height:220px;display:grid;place-items:center}.object{width:240px;height:200px;position:relative;pointer-events:none;will-change:transform}.state{position:absolute;inset:0;opacity:0;transform-origin:50% 60%}.state:first-child{opacity:1}.state svg{width:100%;height:100%;display:block}.readout{text-align:center}.readout>span{display:block;font-size:11px;letter-spacing:2px}.readout strong{font:28px Georgia,serif}.readout small{font-size:10px;display:block}.progress{height:3px;background:#b7c0ae;margin:18px 10%}.progress i{display:block;width:100%;height:100%;background:#31553c;transform:scaleX(0);transform-origin:left}.chapter{min-height:100vh;display:flex;align-items:center;padding:60px 12% 60px 0;border-top:1px solid #d5d2c6}.chapter>div{max-width:570px}.kicker{text-transform:uppercase;font-size:11px;letter-spacing:2px;color:#8f492e}h1,h2{font:clamp(36px,4.2vw,68px)/1.1 Georgia,serif;letter-spacing:-1px;margin:22px 0}p{max-width:460px}.conclusion{display:block;padding-right:0}.conclusion-copy{min-height:85vh;display:flex;flex-direction:column;justify-content:center;padding-right:12%}.chapter .ending{width:calc(100% / .65);max-width:none;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:35px 20px 80px}.ending #bread-target{width:240px;height:200px;flex-shrink:0}.ending h2{font:clamp(46px,7vw,104px)/.98 Arial,sans-serif;font-weight:800;margin:20px 0;letter-spacing:-3px;position:relative;z-index:3}.ending p{margin:15px}.ending a{color:inherit;font-size:13px;text-underline-offset:5px}footer{padding:30px 5%;font-size:12px;border-top:1px solid #ccc}a:focus-visible,input:focus-visible{outline:3px solid #8f492e;outline-offset:5px}
@media(max-width:700px){header{flex-wrap:wrap;gap:7px 20px}header>span{display:none}.instructions{font-size:12px}#story{display:block;margin:0 6%}.visual{top:0;height:220px;padding:8px;z-index:4}.visual-origin{height:145px}.object{width:155px;height:135px}.readout{line-height:1.3}.readout>span{display:inline;font-size:9px;margin-right:10px}.readout strong{font-size:19px}.readout small{font-size:9px}.progress{margin:7px 15%}.chapter{min-height:90vh;padding:65px 0;scroll-margin-top:230px}.chapter>div{max-width:100%}h1,h2{font-size:42px}.chapter p{font-size:16px}.conclusion{padding-bottom:0}.conclusion-copy{min-height:85vh;padding-right:0}.chapter .ending{width:100%;min-height:95vh;padding:30px 0 70px}.ending #bread-target{width:155px;height:135px}.ending h2{font-size:47px;letter-spacing:-2px}}
/* Static/no-JS/reduced-motion view: six drawings together, no sticky scene. */
.static #story{display:block}.static .visual{position:relative;top:auto;height:auto;margin-bottom:25px}.static .visual-origin{height:auto}.static .object{width:100%;height:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;transform:none!important}.static .state{position:relative;opacity:1!important;transform:none!important}.static .state:after{content:attr(data-name);display:block;text-align:center;font-size:12px}.static .state svg{height:100px}.static .readout{display:none}.static .chapter{min-height:0;padding:65px 0}.static .chapter>div{max-width:700px}.static .conclusion-copy{min-height:0}.static .chapter .ending{width:100%;min-height:50vh}.static #bread-target{display:none}.static .final-title{opacity:1!important;transform:none!important}@media(max-width:700px){.static .object{grid-template-columns:repeat(3,1fr)}}

/* V2: one shared matter scene; reference drawings are only the static fallback. */
html:not(.static) .state{display:none}.matter-scene{width:100%;height:100%;overflow:visible}.static .matter-scene{display:none}
.visual{background:transparent;border:0;padding:20px 10px}.readout{opacity:.65}.readout strong{font:14px Arial,sans-serif}.readout>span{font-size:9px;letter-spacing:1px}.readout small{font-size:9px}.progress{height:1px;margin:12px 22%}
@media(max-width:700px){
.visual{height:180px;padding:5px;background:#f5f1e8}.visual-origin{height:135px}.readout small{display:none}.progress{margin:6px 25%}
.chapter{min-height:76svh;align-items:flex-start;padding:28px 0 75px;scroll-margin-top:195px}
.chapter>div{position:sticky;top:200px;padding-bottom:15px}h1,h2{font-size:36px;margin:16px 0}.chapter p{margin:14px 0}
.chapter .conclusion-copy{position:relative;top:auto;min-height:65svh;justify-content:flex-start}.chapter .ending{position:relative;top:auto;min-height:95svh}.ending h2{font-size:47px}
.static .chapter>div{position:static}.static .visual{background:transparent}
}

/* V2.5: enlarge the SVG matter, not its panel. Reserve room only at the finale. */
html:not(.static) .readout{opacity:.3;line-height:1.2;margin-top:55px}
.readout #state-number,.readout .progress,.readout small{display:none}
.readout strong{font:10px Arial,sans-serif;letter-spacing:.3px}
@media(min-width:701px){html:not(.static) .matter-scene{transform:scale(1.25);transform-origin:center}.ending #bread-target{height:270px}}
@media(min-width:1100px){html:not(.static) .matter-scene{transform:scale(1.65)}.ending #bread-target{height:340px}html:not(.static) .readout{margin-top:80px}}
@media(max-width:700px){html:not(.static) .readout{margin-top:6px}.readout strong{font-size:9px}}

/* V3 art direction: permanent warm mineral paper, scroll-driven light only. */
:root{--sun:0;--heat:0;--powder:0;--earth:.2}
body{background:#f2ede2;color:#344133}
.atmosphere{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 70% 35%,#faf6ecaa,transparent 68%),linear-gradient(0deg,rgba(138,113,76,var(--earth)),transparent 60%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.045;background:url('paper-noise.svg');mix-blend-mode:multiply}
.atmosphere i{position:absolute;inset:0;display:block}
.light-growth{opacity:var(--sun);background:radial-gradient(ellipse at 72% 27%,#fff9e1d9,transparent 65%),repeating-linear-gradient(92deg,transparent 0 16%,#e4ddbf20 17%,transparent 18% 28%)}
.light-warmth{opacity:var(--heat);background:radial-gradient(ellipse at 74% 74%,#dcb87c55,transparent 58%)}
.powder-air{opacity:calc(var(--powder) * .28);background:radial-gradient(ellipse at 74% 43%,#fffdf2,transparent 58%),url('paper-noise.svg')}
header{border-color:#80735520;font-size:11px;letter-spacing:1px}header>span,.instructions,footer{color:#716d5d}.chapter{border-color:#81745a20}.kicker{color:#8e744e}h1,h2{font-weight:400}.ending h2{font-weight:600;letter-spacing:-3px}footer{border-color:#80735520}
html:not(.debug) .readout,html:not(.debug) header>span{display:none}
.three-matter{position:absolute;inset:0;width:100%;height:100%;display:block}
.three-ready:not(.static) .matter-scene{display:none}.static .three-matter{display:none!important}
@media(min-width:1100px){html:not(.static) .object{width:396px;height:330px}html:not(.static) .matter-scene{transform:none}}
@media(min-width:701px) and (max-width:1099px){html:not(.static) .object{width:300px;height:250px}html:not(.static) .matter-scene{transform:none}}
@media(max-width:700px){.visual{background:#f2ede2}.ending h2{letter-spacing:-2px}.three-matter{width:100%;height:100%}}
@media(prefers-reduced-motion:reduce){.atmosphere i{opacity:0!important}}