/* Approved centered reading layout, with a bounded opening motion sample. */
.philosophy { background: var(--parchment); color: var(--brown); color-scheme: light; padding: 80px 28px 64px; }
.philosophy-text { display: flow-root; max-width: 620px; margin-inline: auto; font: 400 20px/1.75 var(--font-body); text-align: center; }
/* The twelve moments are metadata, not twelve layout sections. */
.philosophy-moment { display: contents; }
.philosophy p { margin: 0 0 1.3em; }
.philosophy strong { font-weight: 400; }
.philosophy h2 { margin: 0 0 36px; color: var(--garnet); font: 400 38px/1.35 var(--font-heading); letter-spacing: normal; text-align: center; text-wrap: balance; }
.philosophy .standalone { margin-block: 28px; font-size: .95em; }
.philosophy .declaration { margin: 36px 0 28px; color: var(--blood); font: 400 23px/1.55 var(--font-heading); text-align: center; text-wrap: balance; }
/* Emotional turns carry greater weight than supporting declarations. */
.philosophy :is(#philosophy-9, #philosophy-17, #philosophy-23) { margin-block: 40px 30px; font-size: 27px; line-height: 1.5; }
.philosophy #philosophy-25 { font-size: 30px; margin-block: 30px 20px; }
.philosophy #philosophy-2 { text-align: center; }
.philosophy :is(#philosophy-11, #philosophy-22) { color: var(--garnet); }
.philosophy #philosophy-31 { margin-bottom: 0; }
.thread-track, .philosophy-debug { display: none; }
.philosophy-ending { padding-top: 36px; text-align: center; }
.philosophy-logo { display: block; width: 140px; height: auto; margin-inline: auto; }

/* Progressive enhancement: no fixed/pinned stage, hidden text, or layout transforms. */
.philosophy { position: relative; isolation: isolate; }
.philosophy-text { position: relative; z-index: 1; }
.reading-thread { position: absolute; inset: 0 auto auto 0; z-index: 0; display: block; pointer-events: none; color: var(--blood); overflow: hidden; }
.reading-thread path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.reading-thread circle { fill: currentColor; }
.philosophy[data-guide="enabled"] #philosophy-2 { margin-bottom: 64px; }
.philosophy[data-guide="enabled"] #philosophy-11 { margin-bottom: 76px; }
.guide-diagnostic { position: fixed; z-index: 10; bottom: 12px; left: 12px; padding: 10px; background: var(--parchment); color: var(--brown); border: 1px solid currentColor; font: 12px/1.5 monospace; white-space: pre; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .reading-thread, .guide-diagnostic { display: none; }
  .philosophy [data-guide-passage] { opacity: 1 !important; }
  .philosophy[data-guide] :is(#philosophy-2, #philosophy-11) { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) and (max-width:600px) {
  .philosophy[data-guide] :is(#philosophy-2, #philosophy-11) { margin-bottom: 24px; }
}
@media (max-width: 600px) {
  .philosophy { padding: 52px 26px 44px; }
  .philosophy-text { font-size: 17px; line-height: 1.78; }
  .philosophy h2 { font-size: 30px; line-height: 1.4; margin-bottom: 28px; }
  .philosophy p { margin-bottom: 22px; }
  .philosophy .standalone { margin-block: 24px; font-size: 17px; }
  .philosophy .declaration { font-size: 21px; line-height: 1.55; margin-block: 30px 24px; }
  .philosophy :is(#philosophy-9, #philosophy-17, #philosophy-23) { margin-block: 32px 26px; font-size: 23px; }
  .philosophy #philosophy-25 { font-size: 26px; margin-block: 28px 20px; }
  .philosophy-ending { padding-top: 30px; }
  .philosophy-logo { width: 110px; }
}

/* Experiences 1–2 only. The remaining manifesto retains its approved reading layout. */
.philosophy[data-stage="experiences-1-2-review"]{padding-top:0;padding-inline:0}
.philosophy[data-stage="experiences-1-2-review"] .philosophy-text{max-width:676px;padding-inline:28px}
.prototype-experiences{margin:0;width:100%;position:relative}
.philosophy .prototype-scene{display:flex;align-items:center;justify-content:center;padding:56px 30px;position:relative}
.prototype-scene .scene-copy{width:100%;max-width:740px;position:relative;z-index:1}
.philosophy .prototype-scene h2{font-size:clamp(44px,4.1vw,60px);line-height:1.3;color:var(--brown);margin:0 0 32px;text-wrap:balance}
.philosophy .prototype-scene p{color:#755a52;font:400 21px/1.75 var(--font-body);text-align:left;margin:0 auto 28px;max-width:640px}
.philosophy .prototype-scene #philosophy-2{color:var(--oxblood);font:400 30px/1.5 var(--font-heading);text-align:center;margin:0}
.philosophy .prototype-scene #philosophy-4{max-width:740px;color:var(--brown);font:400 clamp(40px,3.5vw,52px)/1.35 var(--font-heading);text-align:center;margin:30px auto}
.philosophy .prototype-scene #philosophy-5{margin-bottom:0}
.prototype-motion .prototype-scene{min-height:var(--scene-height);padding-block:32px}
.prototype-word{display:inline-block;white-space:nowrap}
.prototype-letter{display:inline-block;transform-origin:50% 85%}
.prototype-thread{position:fixed;inset:0;width:100vw;height:100svh;z-index:0;pointer-events:none;overflow:hidden;color:var(--blood)}
.prototype-thread path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.prototype-thread circle{fill:currentColor}
@media(max-width:700px){
  .philosophy .prototype-scene{padding:40px 28px}
  .prototype-motion .prototype-scene{padding-block:24px}
  .philosophy .prototype-scene h2{font-size:clamp(30px,8vw,36px);line-height:1.4;margin-bottom:28px}
  .philosophy .prototype-scene p{font-size:17px;line-height:1.78;margin-bottom:24px}
  .philosophy .prototype-scene #philosophy-2{font-size:24px;line-height:1.5}
  .philosophy .prototype-scene #philosophy-4{font-size:clamp(28px,7.4vw,34px);line-height:1.4;margin:26px auto}
}
@media(prefers-reduced-motion:reduce){.prototype-thread{display:none}}
/* Pin a genuinely full-width box; negative margins make ScrollTrigger measure it narrower. */
.prototype-experiences{z-index:1}
@media(max-width:600px){.philosophy[data-stage="experiences-1-2-review"] .philosophy-text{max-width:672px;padding-inline:26px}}
/* Parchment shields behind live paragraphs protect words as the quiet strand travels. */
.meaning-scene .scene-copy>p{background:transparent;box-shadow:none}
/* The same approved Prata face supplies both live text and its outline geometry. */
@font-face{font-family:Prata;src:url('/assets/Prata-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.prototype-motion{display:grid;min-height:var(--scene-height)}
.prototype-motion .prototype-scene{grid-area:1/1;width:100%;min-width:0}
.prototype-thread .unravel-glyph{fill:var(--brown);stroke:none}
.prototype-baseline{display:inline-block;width:0;height:0}

/* Experience 3 continues the same parchment reading surface. */
.philosophy .threshold-scene #philosophy-6{font:400 32px/1.5 var(--font-heading);color:var(--oxblood);text-align:center;max-width:700px;margin:0 auto 30px;text-wrap:balance}
.philosophy .threshold-scene #philosophy-7{background:transparent;box-shadow:none}
.philosophy .threshold-scene #philosophy-8{font:400 28px/1.55 var(--font-heading);color:var(--oxblood);text-align:center;margin:32px auto 0;text-wrap:balance}
.threshold-motion{min-height:var(--threshold-height)}
.prototype-thread .threshold-branch{stroke-width:.85}
@media(max-width:700px){.philosophy .threshold-scene #philosophy-6{font-size:25px;line-height:1.5;margin-bottom:24px}.philosophy .threshold-scene #philosophy-8{font-size:23px;line-height:1.55;margin-top:26px}}

/* Continuous Experiences 3–9; no scene borders or background changes. */
.continuation-experience .scene-copy{max-width:740px;overflow-wrap:anywhere}
.philosophy .continuation-experience p{color:#755a52;font:400 21px/1.75 var(--font-body);text-align:left;max-width:640px;margin:0 auto 28px}
.philosophy .continuation-experience .standalone{color:var(--oxblood);font:400 28px/1.5 var(--font-heading);text-align:center;text-wrap:balance}
.philosophy .continuation-experience .declaration{color:var(--brown);font:400 clamp(34px,3vw,44px)/1.4 var(--font-heading);text-align:center;max-width:740px;margin:26px auto;text-wrap:balance}
.philosophy .continuation-experience :is(#philosophy-6,#philosophy-13,#philosophy-29){color:var(--oxblood);font:400 30px/1.5 var(--font-heading);text-align:center;text-wrap:balance}
.philosophy .continuation-experience #philosophy-25{font-size:44px;margin:0 auto 28px}
.narrative-phase>:last-child{margin-bottom:0!important}
.continuation-motion{min-height:var(--continuation-height)}
.continuation-motion .scene-copy{display:grid;min-height:var(--copy-height)}
.continuation-motion .narrative-phase{grid-area:1/1;align-self:center;min-width:0}
.narrative-phase p{background:transparent;box-shadow:none}
.preparation-clause{display:block;margin-bottom:12px}
.prototype-thread .continuation-branch{stroke-width:.85}
.prototype-thread .birthright-dot{fill:var(--blood)}
.continuation-experience .philosophy-ending{padding:0}
.continuation-experience .philosophy-logo{width:170px}
@media(max-width:700px){.philosophy .continuation-experience p{font-size:17px;line-height:1.78;margin-bottom:24px}.philosophy .continuation-experience .standalone{font-size:23px;line-height:1.5}.philosophy .continuation-experience .declaration{font-size:clamp(27px,7vw,33px);line-height:1.4;margin:24px auto}.philosophy .continuation-experience :is(#philosophy-6,#philosophy-13,#philosophy-29){font-size:25px;line-height:1.5}.philosophy .continuation-experience #philosophy-25{font-size:34px}.continuation-experience .philosophy-logo{width:140px}}
.continuation-experience:not(.continuation-motion) .narrative-phase+.narrative-phase{margin-top:32px}
/* Preserve declaration hierarchy over the earlier paragraph-specific reading rules. */
.philosophy .continuation-experience :is(#philosophy-9,#philosophy-17,#philosophy-20,#philosophy-23,#philosophy-28){color:var(--brown);font:400 clamp(34px,3vw,44px)/1.4 var(--font-heading);text-align:center;margin:26px auto}
.philosophy .continuation-experience :is(#philosophy-11,#philosophy-22){color:var(--oxblood);font:400 28px/1.5 var(--font-heading);text-align:center}
@media(max-width:700px){.philosophy .continuation-experience :is(#philosophy-9,#philosophy-17,#philosophy-20,#philosophy-23,#philosophy-28){font-size:clamp(27px,7vw,33px);line-height:1.4;margin:24px auto}.philosophy .continuation-experience :is(#philosophy-11,#philosophy-22){font-size:23px;line-height:1.5}}
.original-logo-composite{display:block;position:relative;width:170px;margin-inline:auto}
.original-logo-composite .philosophy-logo{width:100%}
.original-logo-composite>svg{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:700px){.original-logo-composite{width:140px}}
/* Reading repair: native flow, persistent words, and space tied to meaning. */
.philosophy .continuation-experience{padding-block:40px;display:block}
.continuation-experience .scene-copy{margin-inline:auto}
.continuation-experience .narrative-phase+.narrative-phase{margin-top:42px}
.philosophy .continuation-experience #philosophy-11{margin-block:54px 140px}
.experience-4 [data-phase="1"]{padding-bottom:110px}
.philosophy .continuation-experience #philosophy-23{margin-bottom:76px}
.experience-7 [data-phase="1"]{padding-bottom:52px}
.philosophy .continuation-experience #philosophy-25{margin-bottom:72px}
.philosophy .continuation-experience #philosophy-31{margin-bottom:0}
.continuation-experience .philosophy-ending{position:relative;width:200px;margin:64px auto 72px;padding:0}
.continuation-experience .philosophy-ending .philosophy-logo{width:100%;height:auto}
.flow-logo-artwork{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(max-width:700px){
 .philosophy .continuation-experience{padding:32px 28px}
 .continuation-experience .narrative-phase+.narrative-phase{margin-top:36px}
 .philosophy .continuation-experience #philosophy-9{margin-bottom:100px}
 .philosophy .continuation-experience #philosophy-11{margin-block:40px 126px}
 .philosophy .continuation-experience #philosophy-25{margin-bottom:84px}
 .experience-5 .scene-copy{padding-bottom:48px}
 .continuation-experience .philosophy-ending{width:164px;margin-block:64px 70px}
}

/* Nature study: type and material share one measured local composition. */
.philosophy :is(.nature-study,.nature-study-measure) #philosophy-9{margin:0 auto 28px}
.philosophy :is(.nature-study,.nature-study-measure) #philosophy-11{margin:0 auto}
:is(.nature-study,.nature-study-measure) [data-phase="1"]{padding-bottom:0}
.philosophy .nature-study{height:var(--study-height);padding:24px 30px;display:grid;grid-template-rows:auto 200px;row-gap:24px;justify-items:center;align-content:center}
.nature-study .scene-copy{display:grid;width:100%}
.nature-study .narrative-phase{grid-area:1/1;align-self:end;margin:0!important}
.nature-study-thread{display:block;width:100%;max-width:820px;height:200px;overflow:hidden;pointer-events:none;color:var(--blood)}
.nature-study-thread path{fill:none;stroke:currentColor;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){.philosophy .nature-study{padding-inline:28px}}
/* Full narrative rebuild: every composition reserves space for its own material. */
.philosophy :is(.narrative-study,.narrative-study-measure) .narrative-phase{display:flow-root;margin:0!important;padding:0}
.philosophy :is(.narrative-study,.narrative-study-measure) .narrative-phase>:first-child{margin-top:0}
.philosophy :is(.narrative-study,.narrative-study-measure) :is(#philosophy-23,#philosophy-25){margin-bottom:28px}
.philosophy :is(.narrative-study,.narrative-study-measure).experience-9 [data-phase="2"]{display:none}
.philosophy .narrative-study{height:var(--study-height);padding:24px 30px;display:grid;grid-template-rows:auto 200px;row-gap:24px;justify-items:center;align-content:center}
.narrative-study .scene-copy{display:grid;width:100%;padding:0}
.narrative-study .narrative-phase{grid-area:1/1;align-self:end}
.narrative-study-thread{display:block;width:100%;max-width:820px;height:200px;overflow:hidden;pointer-events:none;color:var(--blood)}
.narrative-study-thread path{fill:none;stroke:currentColor;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.narrative-study-thread circle{fill:currentColor}
@media(max-width:700px){.philosophy .narrative-study{padding-inline:28px}}
/* Shared reading stage removes document gaps between narrative compositions. */
.narrative-sequence{display:grid;width:100%;position:relative}
.narrative-sequence>.continuation-experience{grid-area:1/1;min-width:0;width:100%}
.philosophy .narrative-sequence.sequence-ready>.continuation-experience{height:100%;grid-template-rows:minmax(0,1fr)200px;align-content:initial}
.narrative-sequence.sequence-ready .scene-copy{align-self:end}
.narrative-study-thread defs path{fill:white;stroke:none}
.narrative-sequence-bridge{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:calc(100% - 60px);max-width:820px;height:200px;pointer-events:none;color:var(--blood);overflow:hidden}
.narrative-sequence-bridge path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media(max-width:700px){.narrative-sequence-bridge{width:calc(100% - 56px)}}
.reading-controls{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding:24px 28px 8px;position:relative;z-index:2;font:400 14px/1.5 var(--font-ui);text-align:center}
.reading-controls[hidden]{display:none}
.reading-controls button{font:inherit;min-height:44px;padding:10px 16px;border:1px solid var(--brown);border-radius:24px;background:transparent;color:var(--brown);cursor:pointer}
.reading-controls button[aria-pressed="true"]{background:var(--brown);color:var(--parchment)}
.reading-controls button:disabled{cursor:default}
.reading-controls span{max-width:280px}
html[data-reading-mode="plain"] .philosophy [id^="philosophy-"]{opacity:1!important;visibility:visible!important;transform:none!important}
html[data-reading-mode="plain"] .philosophy .prototype-scene{padding-block:28px}
html[data-reading-mode="plain"] .philosophy .narrative-phase{padding-bottom:0}
html[data-reading-mode="plain"] .philosophy .continuation-experience :is(#philosophy-9,#philosophy-11,#philosophy-23,#philosophy-25){margin-block:30px}
html[data-reading-mode="plain"] .philosophy .experience-5 .scene-copy{padding-bottom:0}

/* Complete-section reading: words never depend on animation progress. */
.section-reading .prototype-experiences{display:block;min-height:0}
.section-reading .prototype-scene .scene-copy{display:block}
.section-reading .narrative-phase{display:flow-root;position:static;opacity:1;visibility:visible;transform:none}
.section-reading .narrative-phase+.narrative-phase{margin-top:28px}
.philosophy.section-reading .continuation-experience #philosophy-9{margin-bottom:28px}
.philosophy.section-reading .continuation-experience #philosophy-11{margin-block:28px}
.philosophy.section-reading .continuation-experience #philosophy-23{margin-bottom:28px}
.philosophy.section-reading .continuation-experience #philosophy-25{margin-bottom:28px}
.section-reading .experience-4 [data-phase="1"],.section-reading .experience-7 [data-phase="1"],.section-reading .experience-5 .scene-copy{padding-bottom:0}
.section-gesture{display:block;width:100%;max-width:640px;height:140px;margin:16px auto 24px;overflow:hidden;pointer-events:none;color:var(--blood)}
.section-gesture path,.section-logo-gesture>path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.section-gesture circle{fill:currentColor}
.section-reading .philosophy-ending{position:relative}
.section-logo-gesture{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--blood)}
.section-reading[data-gestures="off"] .section-gesture{display:none}
.section-reading[data-gestures="off"] .section-logo-gesture{display:none}
html[data-reading-mode="plain"] .section-reading :is(.section-gesture,.section-logo-gesture){display:none}
html[data-reading-mode="plain"] .section-reading .philosophy-logo{opacity:1!important}
@media(prefers-reduced-motion:reduce){.section-reading :is(.section-gesture,.section-logo-gesture){display:none}.section-reading .philosophy-logo{opacity:1!important}}
@media(max-width:700px){.section-gesture{height:112px;margin-block:12px 20px}}

/* Autonomous staged reading: complete copy is measured before pinning. */
.staged-reading .prototype-experiences{display:block}
.philosophy.staged-reading .prototype-scene{display:flex;align-items:center;padding:32px 28px}
.staged-reading .prototype-scene .scene-copy{display:block;margin-inline:auto}
@media(min-width:1000px){.staged-reading .prototype-scene .scene-copy{max-width:900px}.philosophy.staged-reading .prototype-scene p{max-width:820px}}
.staged-reading .narrative-phase+.narrative-phase{margin-top:18px}
.philosophy.staged-reading .prototype-scene p{margin-bottom:18px}
.philosophy.staged-reading .prototype-scene :is(.standalone,.declaration){margin-block:18px}
.staged-reading .narrative-phase>:last-child{margin-bottom:0!important}
.staged-reading .section-gesture{height:88px;margin:18px auto 0}
.staged-reading .philosophy-ending{margin:24px auto 0;width:140px}
.staged-reading .reading-stage[data-stage-layout="pinned"]{min-height:0}
@media(max-width:700px){.philosophy.staged-reading .prototype-scene{padding:24px 28px}.staged-reading .section-gesture{height:76px}.staged-reading .philosophy-ending{width:120px}}

/* Living material: actual continuously bending curves, no scale animation. */
.staged-reading .section-gesture path{animation:none;transform:none}
.staged-reading .section-gesture .thread-layer-1{stroke:var(--oxblood);stroke-width:1.15;stroke-opacity:.58}
.staged-reading .section-gesture .thread-layer-2{stroke-width:1.1;stroke-opacity:.45}
.staged-reading .section-gesture .thread-layer-3{stroke:var(--oxblood);stroke-width:1;stroke-opacity:.35}

/* Bounded nature study: space for distinct contours rather than a tight ribbon. */
.philosophy.staged-reading .experience-4{padding-block:16px}
.staged-reading .experience-4 .narrative-phase+.narrative-phase{margin-top:12px}
.philosophy.staged-reading .experience-4 #philosophy-9{margin:0 auto 12px}
.philosophy.staged-reading .experience-4 #philosophy-11{margin:0 auto}
.staged-reading .experience-4 .section-gesture{height:100px;max-width:560px;margin:12px auto 0}
.staged-reading .experience-4 .thread-layer-1{stroke-opacity:.70}
.staged-reading .experience-4 .thread-layer-2{stroke-opacity:.52}
.staged-reading .experience-4 .thread-layer-3{stroke-opacity:.42}

/* Owner shape pass: one reading frame; native scroll pans only long copy. */
.staged-reading .reading-stage{align-items:flex-start;box-sizing:border-box}
.staged-reading .reading-stage[data-stage-layout="pinned"]{align-items:center}
.philosophy.staged-reading .experience-5.reading-stage[data-stage-layout="pinned"]{align-items:flex-start}
.philosophy.staged-reading .reading-stage[data-stage-layout="pan"]{align-items:flex-start}
.staged-reading .reading-stage .scene-copy{flex-shrink:0;will-change:transform}
.staged-reading .initiation-scene .section-gesture{height:120px;max-width:600px}
.staged-reading .experience-3 .section-gesture{height:92px;max-width:600px}
.staged-reading .experience-4 .section-gesture{height:140px;max-width:600px}
.staged-reading .experience-6 .section-gesture{height:60px;margin:8px auto 0;max-width:580px}
.staged-reading .section-gesture[data-gesture="underline"]{height:24px;margin:0 auto 8px;max-width:740px}
.philosophy.staged-reading .continuation-experience #philosophy-23{margin-bottom:4px}
.staged-reading .experience-8 .section-gesture{height:84px;max-width:600px}
.philosophy.staged-reading .experience-9 .narrative-phase[data-phase="2"]{margin-top:0}
.staged-reading .experience-9 .philosophy-ending{margin:12px auto 0}
.preparation-clause:last-child{margin-bottom:0}
.staged-reading[data-reading-layout="natural"] :is(.section-gesture,.section-logo-gesture){display:none}