/* Preserved B-flow / C-story opening. Scoped to protect later storytelling. */
@scope (.approved-opening) {
:scope{position:relative;display:block;font:14px/1.5 Public,Arial,sans-serif;--muted:#aaa39a}.site-head{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px}.site-head .name{font:520 21px/1 Anybody,sans-serif;letter-spacing:-.8px}.site-head>span{color:var(--muted);font-size:11px}.site-head>a:last-child span{margin-left:15px}@media(max-width:750px){.site-head .name{font-size:19px}.site-head>span{display:none}.site-head>a:last-child{font-size:11px}}
:scope{background:#000;--copper:#d47e30}:scope .site-head{z-index:5;padding:30px 4.5%}.flow-sequence{height:260svh;position:relative}.flow-stage{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;--p:0;--intro:0;--out:1}.flow-art{position:absolute;inset:0;z-index:2;pointer-events:none}.flow-art canvas{width:100%;height:100%;display:block}.flow-static{position:absolute;left:12%;top:27%;width:76%;filter:invert(1);opacity:var(--out)}.scene-ready .flow-static{display:none}.approved-hero{position:absolute;inset:0;z-index:3;opacity:var(--out);pointer-events:none}.approved-hero h1{position:absolute;left:6.5%;bottom:14%;font:440 clamp(34px,4.6vw,70px)/1.02 Fraunces,serif;letter-spacing:-.055em;margin:0}.approved-note{position:absolute;top:17%;right:8%;font:12px/1.7 Public,sans-serif;color:var(--muted)}.approved-context{position:absolute;bottom:15%;right:8%;font:12px/1.8 Public,sans-serif;max-width:320px}.human{position:absolute;inset:0;z-index:1;opacity:var(--intro);pointer-events:none}.person{position:absolute;left:7%;bottom:5%;height:75%;max-width:48%;object-fit:contain;transform:translateY(calc((1 - var(--intro))*100px));transform-origin:50% 90%;filter:saturate(.7)}.person-note{position:absolute;left:9%;bottom:7%;font-size:10px;color:var(--muted)}.introduction{position:absolute;inset:0;z-index:3;opacity:var(--intro);pointer-events:none}.introduction h2{position:absolute;left:45%;top:33%;font:430 clamp(35px,5.4vw,84px)/1.04 Fraunces,serif;letter-spacing:-.052em;margin:0}.intro-detail{position:absolute;left:53%;top:62%;width:33%;max-width:470px;pointer-events:auto}.intro-copy{font-size:16px;line-height:1.65;margin:0 0 22px;max-width:370px}details{font-size:12px;color:#bdb7af;max-width:410px}summary{list-style:none;cursor:pointer;padding:10px 0;border-bottom:1px solid #6f4a2b;display:flex;justify-content:space-between;gap:24px;color:var(--ink)}summary::-webkit-details-marker{display:none}summary:focus-visible{outline:2px solid var(--copper);outline-offset:5px}summary span{color:var(--copper);font-size:18px;line-height:1}details[open] summary span{transform:rotate(45deg)}details p{font-size:12px;line-height:1.7;max-width:390px}.flow-scroll{position:absolute;z-index:4;bottom:5%;left:6.5%;font-size:11px;display:flex;align-items:center;gap:20px;opacity:var(--out)}.flow-scroll span{font-size:27px;color:var(--copper)}.flow-position{position:absolute;right:4.5%;top:43%;width:1px;height:120px;background:#30251c;z-index:4}.flow-position i{position:absolute;left:-1px;width:3px;height:25%;background:var(--copper);top:calc(var(--p)*75%)}.intro-anchor{position:absolute;top:65%}.flow-review{position:fixed;z-index:20;bottom:12px;right:18px;background:#080808dd;border:1px solid #29231d;display:flex;align-items:center;gap:0;font-size:10px;backdrop-filter:blur(12px)}.flow-review a{padding:9px 13px}.flow-review a[aria-current]{background:var(--copper);color:#000}.story-threshold{min-height:100svh;padding:16vh 7% 10vh;position:relative;background:#000;scroll-margin-top:0}.story-caption{display:flex;gap:36px;color:var(--copper);font-size:12px;margin-bottom:46px}.story-caption span:last-child{color:var(--muted)}.story-threshold h2{font:430 clamp(45px,7.5vw,118px)/1.03 Fraunces,serif;letter-spacing:-.055em;margin:0 0 70px;max-width:1100px}.story-body{margin-left:44%;max-width:530px;line-height:1.8;font-size:16px}.story-body p{margin:0 0 18px}.story-body p:nth-child(2){color:var(--muted)}.story-body a{display:inline-block;margin-top:22px;font-size:13px;border-bottom:1px solid var(--copper);padding-bottom:10px}.story-body a span{margin-left:35px}.study-end{margin:90px 0 0;color:#777;font-size:10px}:scope [inert]{pointer-events:none}.flow-stage.no-webgl .flow-static{display:block}
/* two: the opening lives above the signature, the introduction speaks across it */
:scope[data-variant="2"] .flow-sequence{height:245svh}:scope[data-variant="2"] .approved-hero h1{top:17%;bottom:auto;left:8%;font:570 clamp(48px,7.8vw,112px)/.96 Anybody,sans-serif;letter-spacing:-.07em}:scope[data-variant="2"] .approved-note{display:none}:scope[data-variant="2"] .approved-context{top:20%;bottom:auto;right:10%;max-width:300px}:scope[data-variant="2"] .flow-scroll{left:auto;right:8%;bottom:10%}:scope[data-variant="2"] .person{left:auto;right:6%;height:73%;bottom:5%;max-width:44%}:scope[data-variant="2"] .person-note{left:auto;right:10%;bottom:8%}:scope[data-variant="2"] .introduction h2{left:8%;top:23%;font:560 clamp(45px,6.8vw,100px)/1 Anybody,sans-serif;letter-spacing:-.065em}:scope[data-variant="2"] .intro-detail{left:8%;top:55%;width:35%}:scope[data-variant="2"] .intro-copy{font-size:17px;max-width:390px}:scope[data-variant="2"] .story-threshold h2{font-family:Anybody,sans-serif;font-weight:550;font-size:clamp(45px,7vw,105px)}
/* three: an editorial composition moves upward into a personal margin note */
:scope[data-variant="3"] .flow-sequence{height:230svh}:scope[data-variant="3"] .approved-hero h1{top:16%;bottom:auto;left:7%;font-size:clamp(40px,5.8vw,85px)}:scope[data-variant="3"] .approved-context{top:19%;bottom:auto;right:8%}:scope[data-variant="3"] .approved-note{display:none}:scope[data-variant="3"] .person{left:auto;right:9%;bottom:5%;height:52%;max-width:34%;transform:translateY(calc((1 - var(--intro))*160px)) rotate(-4deg)}:scope[data-variant="3"] .person-note{left:auto;right:12%;bottom:7%}:scope[data-variant="3"] .introduction h2{left:7%;top:22%;font-size:clamp(50px,7.2vw,110px);line-height:1.02}:scope[data-variant="3"] .intro-detail{left:8%;top:66%;width:37%}:scope[data-variant="3"] .intro-copy{font-size:15px}:scope[data-variant="3"] .story-threshold{padding-left:12%}:scope[data-variant="3"] .story-body{margin-left:34%}
@media(max-width:750px){:scope .site-head{padding:24px 6%}.flow-stage{min-height:720px}.flow-sequence{height:265svh}.approved-note{top:15%;left:7%;right:auto;font-size:10px}.approved-hero h1{left:7%;bottom:23%;font-size:39px}.approved-context{left:7%;right:7%;bottom:12%;font-size:11px}.flow-scroll{left:7%;bottom:4%;font-size:10px;gap:13px}.flow-position{right:4%;height:75px;top:43%}.person{height:44%;max-width:76%;left:12%;bottom:38%}.person-note{display:none}.introduction h2{left:7%;top:60%;font-size:37px;line-height:1.06}.intro-detail{left:7%;top:74%;width:85%;max-width:none}.intro-copy{font-size:12px;line-height:1.6;margin-bottom:7px;max-width:320px}details{font-size:10px;max-width:330px}details p{font-size:11px;line-height:1.6;background:#000;position:relative;z-index:6;padding:6px 0}summary{padding:7px 0}.flow-review{right:10px;bottom:8px;font-size:9px}.flow-review a{padding:7px 10px}.story-threshold{padding:12vh 7% 12vh;min-height:90svh}.story-caption{font-size:10px;gap:24px;margin-bottom:35px}.story-threshold h2{font-size:45px;margin-bottom:35px}.story-body{margin-left:0;font-size:14px}.study-end{margin-top:50px;font-size:9px}
:scope[data-variant="2"] .flow-sequence{height:260svh}:scope[data-variant="2"] .approved-hero h1{top:18%;left:7%;font-size:64px}:scope[data-variant="2"] .approved-context{top:auto;bottom:16%;left:7%;right:auto;font-size:11px}:scope[data-variant="2"] .flow-scroll{left:7%;right:auto;bottom:6%}:scope[data-variant="2"] .person{height:46%;max-width:85%;right:2%;bottom:38%}:scope[data-variant="2"] .introduction h2{top:61%;left:7%;font-size:42px}:scope[data-variant="2"] .intro-detail{top:76%;left:7%;width:86%}:scope[data-variant="2"] .intro-copy{font-size:12px;max-width:325px}:scope[data-variant="2"] .story-threshold h2{font-size:42px}
:scope[data-variant="3"] .flow-sequence{height:245svh}:scope[data-variant="3"] .approved-hero h1{top:18%;left:7%;font-size:43px}:scope[data-variant="3"] .approved-context{top:auto;bottom:17%;left:7%;font-size:12px}:scope[data-variant="3"] .person{height:30%;right:-3%;bottom:44%;max-width:49%}:scope[data-variant="3"] .introduction h2{left:7%;top:24%;font-size:47px;line-height:1.09;max-width:85%}:scope[data-variant="3"] .intro-detail{left:7%;top:65%;width:86%}:scope[data-variant="3"] .intro-copy{max-width:310px;font-size:13px}:scope[data-variant="3"] .story-threshold{padding-left:7%}:scope[data-variant="3"] .story-body{margin-left:0}}
@media(prefers-reduced-motion:reduce){.flow-stage{position:relative;height:auto;min-height:0;overflow:visible}.flow-sequence,:scope[data-variant] .flow-sequence{height:auto}.flow-art{height:85svh}.approved-hero{position:relative;height:85svh;opacity:1!important}.human{position:relative;height:50svh;opacity:1!important}:scope .person{height:100%;width:100%;max-width:100%;left:0;right:0;bottom:0;transform:none}:scope .introduction{position:relative;inset:auto;opacity:1!important;padding:30px 7% 70px}:scope .introduction h2{position:static;font-size:clamp(38px,6vw,72px);margin-bottom:30px}:scope .intro-detail{position:static;width:100%;max-width:550px}:scope .intro-copy{font-size:16px;max-width:500px}.flow-scroll,.flow-position,.intro-anchor{display:none}:scope details p{position:static}:scope .person-note{display:none}.story-threshold{min-height:0}}
@media(min-width:751px){
:scope[data-variant="1"] .person{height:58%;max-width:37%;left:31%;bottom:5%}
:scope[data-variant="1"] .person-note{left:42%;bottom:5%}
:scope[data-variant="1"] .introduction h2{top:30%;left:8%;font-size:clamp(42px,5.7vw,84px);z-index:2}
:scope[data-variant="1"] .intro-detail{left:72%;top:59%;width:22%;max-width:290px}
:scope[data-variant="1"] .intro-copy{font-size:14px}
:scope[data-variant="1"] details{font-size:11px}
:scope[data-variant="1"] .person{mask-image:linear-gradient(#000 89%,transparent 100%)}
}
.introduction{opacity:var(--copy,0)}
/* the third route uses document movement instead of a held crossfade */
@media(prefers-reduced-motion:no-preference){
:scope[data-variant="3"] .flow-sequence{height:auto}
:scope[data-variant="3"] .flow-stage{position:relative;height:220svh;overflow:visible}
:scope[data-variant="3"] .flow-art{position:sticky;top:0;height:100svh;overflow:hidden}
:scope[data-variant="3"] .approved-hero{height:100svh;bottom:auto;opacity:1}
:scope[data-variant="3"] .human,:scope[data-variant="3"] .introduction{top:110svh;height:100svh;bottom:auto;opacity:1}
:scope[data-variant="3"] .flow-scroll{top:88svh;bottom:auto;opacity:1}
:scope[data-variant="3"] .flow-position{display:none}
:scope[data-variant="3"] .person{transform:rotate(-4deg);height:60%;right:7%;bottom:8%;max-width:37%}
:scope[data-variant="3"] .introduction h2{top:9%;font-size:clamp(50px,7vw,105px)}
:scope[data-variant="3"] .introduction h2 span{display:block}
:scope[data-variant="3"] .introduction h2 span:nth-child(2){margin-left:16vw}
:scope[data-variant="3"] .intro-detail{top:61%;left:8%;width:36%}
:scope[data-variant="3"] .person-note{bottom:8%}
}
@media(max-width:750px) and (prefers-reduced-motion:no-preference){
:scope[data-variant="3"] .flow-stage{height:215svh}
:scope[data-variant="3"] .human,:scope[data-variant="3"] .introduction{top:102svh}
:scope[data-variant="3"] .introduction h2{top:15%;font-size:42px}
:scope[data-variant="3"] .introduction h2 span:nth-child(2){margin-left:15vw}
:scope[data-variant="3"] .person{height:36%;bottom:26%;right:-2%;max-width:58%}
:scope[data-variant="3"] .intro-detail{top:75%;width:85%;left:7%}
}
:scope h1,:scope h2,:scope p,:scope span,:scope a{text-shadow:none}
:scope h1,:scope h2{letter-spacing:-.038em}
:scope[data-variant="2"] h1,:scope[data-variant="2"] h2{letter-spacing:-.055em}
:scope:not(.motion-ready) .flow-sequence{height:auto}
:scope:not(.motion-ready) .flow-stage{position:relative;height:auto;min-height:0;overflow:visible}
:scope:not(.motion-ready) .flow-art{position:absolute;top:0;height:85svh}
:scope:not(.motion-ready) .approved-hero{position:relative;height:85svh;opacity:1}
:scope:not(.motion-ready) .human{position:relative;inset:auto;height:50svh;opacity:1}
:scope:not(.motion-ready) .person{height:100%;width:100%;max-width:100%;left:0;right:0;bottom:0;transform:none}
:scope:not(.motion-ready) .introduction{position:relative;inset:auto;height:auto;opacity:1;padding:30px 7% 70px}
:scope:not(.motion-ready) .introduction h2{position:static;font-size:clamp(38px,6vw,72px);margin-bottom:30px}
:scope:not(.motion-ready) .intro-detail{position:static;width:100%;max-width:550px}
:scope:not(.motion-ready) .flow-scroll,:scope:not(.motion-ready) .flow-position,:scope:not(.motion-ready) .person-note{display:none}
:scope{overflow-x:clip}
.human{overflow:hidden}
@media(max-width:750px){:scope[data-variant="3"] .person{right:2%}}
.flow-sequence{overflow-anchor:none}
@media(max-width:750px){:scope[data-variant="2"] .intro-detail{top:73%}.flow-review{bottom:5px}}
@media(max-width:750px){:scope[data-variant="1"] .person{bottom:41%}:scope[data-variant="2"] .person{bottom:44%}:scope[data-variant="2"] .introduction h2{top:57%}:scope[data-variant="2"] .intro-detail{top:70%}}
@media(prefers-reduced-motion:reduce){:scope[data-variant] .person{bottom:0;left:0;right:0;height:100%;max-width:100%;transform:none}:scope[data-variant] .introduction h2{position:static}:scope[data-variant] .intro-detail{position:static}:scope[data-variant] .human{overflow:hidden}}
:scope[data-variant="2"] .flow-static,:scope[data-variant="3"] .flow-static{top:51%;left:7%;width:86%}
/* selected combination: B composition and choreography, C chronology */
:scope[data-narrative="journey"] .approved-hero h1{font-size:clamp(45px,5.6vw,82px)}
:scope[data-narrative="journey"] .introduction h2{font-size:clamp(44px,5.1vw,75px);line-height:1.03}
:scope[data-narrative="journey"] .intro-detail{top:57%}
:scope[data-narrative="journey"] details{display:none}
.journey-entry{display:inline-flex;gap:25px;margin-top:8px;padding:10px 0;border-bottom:1px solid var(--copper);font-size:13px}
.journey-review-label{padding:7px 12px;color:var(--muted);border-right:1px solid #29231d}
@media(max-width:750px){:scope[data-narrative="journey"] .approved-hero h1{font-size:46px;max-width:87%}:scope[data-narrative="journey"] .introduction h2{font-size:32px;top:57%}:scope[data-narrative="journey"] .intro-detail{top:72%}.journey-entry{font-size:11px;margin-top:4px}.journey-review-label{font-size:8px;padding:7px}}
@media(prefers-reduced-motion:reduce){:scope[data-narrative="journey"] .introduction h2{position:static}:scope[data-narrative="journey"] .intro-detail{position:static}}

}