/* The reading-order gallery is the default. Only a fully initialized story opts in. */
.story-pin,.story-stage{display:contents}
.story-architecture,.story-chapter-rail,.story-status,.story-collection-control{display:none}

html.personal-story-ready:not(.motion-paused) .story-track{
  --story-length:300svh;
  position:relative;display:block;height:var(--story-length);min-height:0;
  padding:0!important;margin:0;isolation:isolate;scroll-margin-top:0;
}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="portrait"]{--story-length:250svh}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"]{--story-length:400svh}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="reflection"]{--story-length:380svh}
html.personal-story-ready:not(.motion-paused) .story-pin{
  position:sticky;top:0;display:block;width:100%;height:100svh;overflow:clip;background:var(--cream);
}
html.personal-story-ready:not(.motion-paused) .story-stage{
  position:relative;display:block;width:100%;height:100%;perspective:1400px;
  perspective-origin:68% 52%;transform-style:preserve-3d;background:transparent;
}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"] .story-stage{
  --momentum-night:clamp(0,calc((var(--story-p,0) - .52) * 6),1);
}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"] .story-pin{background:#111a1d}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="reflection"] .story-pin{background:#eee7da}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="studies"] .story-pin{background:#eeeae1}

/* Original layout groups disappear as boxes; the original figures remain the image controls. */
html.personal-story-ready:not(.motion-paused) .story-track :is(.personal-duet,.personal-court-pair,.personal-night,.personal-reflection-grid){display:contents}
html.personal-story-ready:not(.motion-paused) .story-track .story-frame{
  position:absolute;left:68%;top:52%;width:32vw;height:68svh;max-width:none;
  padding:0!important;margin:0!important;grid-column:auto;justify-self:auto;
  z-index:var(--frame-order,1);
  transform-origin:center center;
  transform:translate(-50%,-50%)
    translate3d(calc(var(--frame-x,0) * 1vw),calc(var(--frame-y,0) * 1svh),calc(var(--frame-z,0) * 1px))
    rotateY(calc(var(--frame-yaw,0) * 1deg)) rotateZ(calc(var(--frame-rotate,0) * 1deg))
    scale(var(--frame-scale,1));
  opacity:var(--frame-opacity,1);
  clip-path:inset(calc(var(--frame-clip,0) * 1%) 0 calc(var(--frame-clip,0) * 1%));
  backface-visibility:hidden;transition:none;
}
html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame="hero"]{width:38vw;height:min(78svh,calc(100svh - 190px))}
html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame="night"]{width:40vw;height:73svh}
html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame="wide"]{width:35vw;height:73svh}
html.personal-story-ready:not(.motion-paused) .story-track .story-frame[inert]{pointer-events:none}
html.personal-story-ready:not(.motion-paused) .story-frame .personal-image{
  display:flex;align-items:center;justify-content:center;width:100%;height:calc(100% - 36px);
  min-height:0;overflow:visible;background:transparent;border:0;border-radius:0;
}
html.personal-story-ready:not(.motion-paused) .story-frame .personal-image img{
  display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  aspect-ratio:auto;box-shadow:0 18px 45px #30281c1b;transform:none;filter:none;
  transition:opacity .25s;
}
html.personal-story-ready:not(.motion-paused) .story-frame .personal-image:hover img{transform:none;opacity:.97}
html.personal-story-ready:not(.motion-paused) .story-frame .personal-image-open{
  right:12px;bottom:12px;font-size:9px;padding:12px 14px;transform:none;
}
html.personal-story-ready:not(.motion-paused) .story-frame figcaption{
  position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0;padding:12px 0 0;background:transparent;font-size:10px;line-height:1.6;
  color:#55564c;white-space:normal;
}
html.personal-story-ready:not(.motion-paused) .story-frame figcaption span:last-child{font-size:8px;letter-spacing:.11em;color:#827762}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"] .story-frame figcaption{color:#d4d4c8}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"] .story-frame figcaption span:last-child{color:#93a39e}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"] .story-frame img{box-shadow:0 20px 60px #0005}
html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-portrait:before{display:none}

/* Text remains on a stable reading plane while the photographs move through depth. */
html.personal-story-ready:not(.motion-paused) .story-track .story-copy{
  position:absolute;left:var(--gutter);top:26%;display:block;width:31%;max-width:440px;
  margin:0;padding:0;z-index:4;
  opacity:calc(var(--story-enter,1) * (1 - var(--story-exit,0)));
  transform:translate3d(0,calc((1 - var(--story-enter,1)) * 30px),30px);
  transition:none;
}
html.personal-story-ready:not(.motion-paused) .story-copy>.eyebrow{display:block;padding:0;margin:0 0 30px;font-size:9px;color:#927d58}
html.personal-story-ready:not(.motion-paused) .story-copy h2{font-size:clamp(55px,5.3vw,88px);line-height:.95;letter-spacing:-.04em}
html.personal-story-ready:not(.motion-paused) .story-copy>p{font-size:13px;line-height:1.8;color:#74766a;padding:0;margin:28px 0 0}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="portrait"] .story-copy{top:18%;width:43%;max-width:660px}
html.personal-story-ready:not(.motion-paused) .story-track .personal-back{font-size:9px}
html.personal-story-ready:not(.motion-paused) .story-track .personal-edition{margin:44px 0 27px;font-size:9px}
html.personal-story-ready:not(.motion-paused) .story-track .personal-hero h1{font-size:clamp(70px,7.3vw,118px)}
html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-copy h1{font-size:clamp(64px,7.2vw,116px);line-height:.92}
html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-copy>p{margin:29px 0 24px;font-size:14px}
html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-foot{margin-top:42px;padding-top:19px;font-size:8px;max-width:390px}
html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-foot span{font-size:8px}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"] .story-copy{
  opacity:calc(var(--story-enter,1) * (1 - var(--story-exit,0)) * (1 - var(--momentum-night,0)));
}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"] .story-copy>.eyebrow{color:#a6b5ad}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"] .story-copy>p{color:#a8b2ac}
html.personal-story-ready:not(.motion-paused) .story-track .story-secondary-copy{
  position:absolute;left:var(--gutter);top:28%;width:30%;max-width:410px;z-index:4;
  padding:0;margin:0;opacity:calc(var(--momentum-night,0) * (1 - var(--story-exit,0)));
  transform:translate3d(0,calc((1 - var(--momentum-night,0)) * 26px),30px);
}
html.personal-story-ready:not(.motion-paused) .story-secondary-copy>.eyebrow{font-size:9px;color:#a6b5ad;margin-bottom:30px}
html.personal-story-ready:not(.motion-paused) .story-secondary-copy h3{font-size:clamp(60px,6vw,96px);line-height:.94}
html.personal-story-ready:not(.motion-paused) .story-secondary-copy p{max-width:225px;font-size:13px;line-height:1.8}
html.personal-story-ready:not(.motion-paused) .story-secondary-copy .personal-fine-rule{margin:30px 0}
html.personal-story-ready:not(.motion-paused) :is(.personal-index,.personal-endnote){display:none}

/* Atmospheric details belong to the scene, never the input plane. */
html.personal-story-ready:not(.motion-paused) .story-architecture{display:block;position:absolute;inset:0;pointer-events:none;transform:translateZ(-140px)}
html.personal-story-ready:not(.motion-paused) .story-architecture:before{
  content:"";position:absolute;inset:112px 34px 87px;border:1px solid #947d5720;
  border-top-color:transparent;border-left-color:transparent;
}
html.personal-story-ready:not(.motion-paused) .story-architecture:after{
  content:"";position:absolute;inset:0;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.16' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.personal-story-ready:not(.motion-paused) .story-ambient{
  position:absolute;width:95vw;height:95vw;left:24%;top:3%;border-radius:50%;
  background:radial-gradient(ellipse,#c6ab7f24,transparent 62%);
  transform:translate3d(calc(var(--story-p,0) * -11vw),calc(var(--story-p,0) * -8svh),-90px);
}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"] .story-ambient{background:radial-gradient(ellipse,#416a832c,transparent 62%)}
html.personal-story-ready:not(.motion-paused) .story-track[data-story="reflection"] .story-ambient{background:radial-gradient(ellipse,#e4bd7540,transparent 62%)}
html.personal-story-ready:not(.motion-paused) .story-scene-line{
  position:absolute;top:52%;left:47%;width:52%;height:1px;background:linear-gradient(90deg,transparent,#9e89552b,transparent);
  transform:rotate(calc(-18deg + var(--story-p,0) * 32deg));
}
html.personal-story-ready:not(.motion-paused) .story-scene-coordinate{position:absolute;bottom:96px;right:46px;font-size:8px;line-height:1.3;letter-spacing:.18em;color:#9e8a69}
html.personal-story-ready:not(.motion-paused) .story-scene-coordinate i{font-style:normal;margin:0 10px;opacity:.5}

/* Fixed wayfinding stays below the existing header and outside the transformed scenes. */
html.personal-story-ready:not(.motion-paused) .story-chapter-rail{
  position:fixed;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  z-index:87;gap:2px;padding:6px 0;
}
html.personal-story-ready:not(.motion-paused) .story-chapter-rail:before{content:"";position:absolute;left:50%;top:20px;bottom:20px;width:1px;background:#b49b713d;pointer-events:none}
html.personal-story-ready:not(.motion-paused) .story-chapter-rail a{position:relative;display:grid;place-items:center;width:36px;min-height:44px;color:#b0a188;font-size:8px;letter-spacing:.04em;isolation:isolate}
html.personal-story-ready:not(.motion-paused) .story-rail-index{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#20231dd9;border:1px solid #cfb58c29;transition:background .2s,color .2s}
html.personal-story-ready:not(.motion-paused) .story-chapter-rail a[aria-current] .story-rail-index{background:var(--gold);color:#191a16;border-color:var(--gold)}
html.personal-story-ready:not(.motion-paused) .story-rail-label{position:absolute;right:41px;top:9px;padding:8px 12px;border-radius:3px;background:#20231def;color:#ebe5d5;white-space:nowrap;font-size:9px;letter-spacing:.03em;opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;pointer-events:none}
html.personal-story-ready:not(.motion-paused) .story-chapter-rail a:is(:hover,:focus-visible) .story-rail-label{opacity:1;transform:none}
html.personal-story-ready:not(.motion-paused) .story-status{position:fixed;bottom:29px;left:var(--gutter);z-index:86;display:flex;align-items:center;gap:13px;color:#92836a;font-size:9px;line-height:1.5;letter-spacing:.12em;pointer-events:none}
html.personal-story-ready:not(.motion-paused) .story-status [data-story-current]{color:#a98b54;font-size:11px;font-variant-numeric:tabular-nums}
html.personal-story-ready:not(.motion-paused) .story-status [data-story-count]{opacity:.55;font-variant-numeric:tabular-nums}
html.personal-story-ready:not(.motion-paused) .story-status-rule{display:block;width:36px;height:1px;background:currentColor;opacity:.6}
html.personal-story-ready:not(.motion-paused) .story-status [data-story-label]{text-transform:uppercase;font-size:8px;letter-spacing:.17em;margin-left:12px}
html.personal-story-ready:not(.motion-paused) .story-collection-control{display:block;position:fixed;right:var(--gutter);top:112px;z-index:86}
html.personal-story-ready:not(.motion-paused) .story-view-all{display:flex;gap:25px;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #b59c6d66;border-radius:3px;background:#1d201bde;color:#ebe5d5;backdrop-filter:blur(10px);font-size:10px;line-height:1.5;transition:background .2s,color .2s}
html.personal-story-ready:not(.motion-paused) .story-view-all span{color:var(--gold);font-size:16px}
html.personal-story-ready:not(.motion-paused) .story-view-all:hover{background:#363b2f;color:white}
.personal-page.menu-open :is(.story-chapter-rail,.story-status,.story-collection-control){visibility:hidden}
body.gallery-viewer-open :is(.story-chapter-rail,.story-status,.story-collection-control){visibility:hidden}

@media(max-width:1000px) and (min-width:761px){
  html.personal-story-ready:not(.motion-paused) .story-track .story-copy{left:var(--gutter);width:34%;top:27%}
  html.personal-story-ready:not(.motion-paused) .story-copy h2{font-size:clamp(48px,5.8vw,62px)}
  html.personal-story-ready:not(.motion-paused) .story-track[data-story="portrait"] .story-copy{width:43%;top:19%}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-copy h1{font-size:clamp(57px,7vw,76px)}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-edition{margin-top:30px}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame{width:36vw}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame="hero"]{width:39vw}
  html.personal-story-ready:not(.motion-paused) .story-secondary-copy h3{font-size:66px}
  html.personal-story-ready:not(.motion-paused) .story-status [data-story-label]{max-width:170px}
}
@media(max-width:760px){
  html.personal-story-ready:not(.motion-paused) .story-track{--story-length:260svh}
  html.personal-story-ready:not(.motion-paused) .story-track[data-story="portrait"]{--story-length:200svh}
  html.personal-story-ready:not(.motion-paused) .story-track[data-story="momentum"]{--story-length:360svh}
  html.personal-story-ready:not(.motion-paused) .story-track[data-story="reflection"]{--story-length:330svh}
  html.personal-story-ready:not(.motion-paused) .story-stage{perspective:1000px;perspective-origin:50% 57%}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame{left:50%;top:57%;width:78vw;height:54svh}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame^="court-"]{width:46vw}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame:is([data-story-frame="book"],[data-story-frame="work"],[data-story-frame="lamp"],[data-story-frame="robe"],[data-story-frame^="connected-"]){width:calc(78vw - clamp(0,(var(--story-p,0) - .72) / .28,1) * 32vw)}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame="hero"]{left:50%;top:60%;width:82vw;height:48svh}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame="night"]{width:84vw;height:55svh}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame="wide"]{width:78vw;height:55svh}
  html.personal-story-ready:not(.motion-paused) .story-frame .personal-image{height:calc(100% - 34px)}
  html.personal-story-ready:not(.motion-paused) .story-frame figcaption{font-size:9px;gap:12px;padding-top:10px;line-height:1.4}
  html.personal-story-ready:not(.motion-paused) .story-frame figcaption span:last-child{font-size:7px;letter-spacing:.07em}
  html.personal-story-ready:not(.motion-paused) .story-frame .personal-image-open{right:10px;bottom:10px;padding:9px 11px;font-size:8px;gap:17px;opacity:1}
  html.personal-story-ready:not(.motion-paused) .story-frame .personal-image-open i{font-size:15px}
  html.personal-story-ready:not(.motion-paused) .story-track .story-copy,
  html.personal-story-ready:not(.motion-paused) .story-track[data-story="portrait"] .story-copy{left:var(--gutter);top:111px;width:calc(100% - var(--gutter) * 2);max-width:none}
  html.personal-story-ready:not(.motion-paused) .story-copy>.eyebrow{margin-bottom:21px;font-size:8px;width:calc(100% - 150px)}
  html.personal-story-ready:not(.motion-paused) .story-copy h2{font-size:clamp(40px,8.2vw,57px);line-height:.92;max-width:94%;letter-spacing:-.035em}
  html.personal-story-ready:not(.motion-paused) .story-copy>p{font-size:10px;line-height:1.6;margin-top:14px;max-width:270px}
  html.personal-story-ready:not(.motion-paused) .story-copy>p br{display:none}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-back{font-size:7px;gap:10px;min-height:18px;max-width:calc(100% - 140px)}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-edition{display:none}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-copy h1{font-size:clamp(44px,10.6vw,67px);line-height:.91;margin-top:22px}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-copy>p{font-size:10px;line-height:1.6;margin:15px 0 10px;max-width:255px}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-copy>p br{display:none}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-copy>.text-link{font-size:9px;min-height:30px;gap:22px}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-foot{display:none}
  html.personal-story-ready:not(.motion-paused) .story-track .story-secondary-copy{left:var(--gutter);top:111px;width:calc(100% - var(--gutter) * 2);max-width:none}
  html.personal-story-ready:not(.motion-paused) .story-secondary-copy>.eyebrow{font-size:8px;margin-bottom:21px}
  html.personal-story-ready:not(.motion-paused) .story-secondary-copy h3{font-size:clamp(40px,8.2vw,57px);line-height:.92}
  html.personal-story-ready:not(.motion-paused) .story-secondary-copy .personal-fine-rule{display:none}
  html.personal-story-ready:not(.motion-paused) .story-secondary-copy p{font-size:10px;line-height:1.6;margin-top:14px;max-width:255px}
  html.personal-story-ready:not(.motion-paused) .story-architecture:before{inset:99px 13px 117px;border-color:#947d571a;border-top-color:transparent;border-left-color:transparent}
  html.personal-story-ready:not(.motion-paused) .story-ambient{width:140vw;height:140vw;top:20%;left:-8%}
  html.personal-story-ready:not(.motion-paused) .story-scene-coordinate{right:26px;bottom:130px;font-size:6px}
  html.personal-story-ready:not(.motion-paused) .story-scene-coordinate i{margin:0 5px}
  html.personal-story-ready:not(.motion-paused) .story-chapter-rail{right:0;top:50%;gap:0}
  html.personal-story-ready:not(.motion-paused) .story-chapter-rail a{width:30px;min-height:44px;font-size:7px}
  html.personal-story-ready:not(.motion-paused) .story-rail-index{width:17px;height:17px}
  html.personal-story-ready:not(.motion-paused) .story-rail-label{right:34px;top:10px;font-size:8px}
  html.personal-story-ready:not(.motion-paused) .story-status{bottom:25px;gap:8px;font-size:7px;max-width:calc(100vw - 170px)}
  html.personal-story-ready:not(.motion-paused) .story-status [data-story-current]{font-size:10px}
  html.personal-story-ready:not(.motion-paused) .story-status-rule{width:20px}
  html.personal-story-ready:not(.motion-paused) .story-status [data-story-label]{display:none}
  html.personal-story-ready:not(.motion-paused) .story-collection-control{top:100px;right:var(--gutter)}
  html.personal-story-ready:not(.motion-paused) .story-view-all{min-height:44px;padding:8px 11px;font-size:8px;gap:18px}
  html.personal-story-ready:not(.motion-paused) .story-view-all span{font-size:13px}
}
@media(max-width:370px){
  html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-copy h1{font-size:43px}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-back{font-size:6.5px;gap:7px}
  html.personal-story-ready:not(.motion-paused) .story-copy h2,
  html.personal-story-ready:not(.motion-paused) .story-secondary-copy h3{font-size:39px}
  html.personal-story-ready:not(.motion-paused) .story-view-all{font-size:7px;padding:8px 9px;gap:13px}
  html.personal-story-ready:not(.motion-paused) .story-copy>.eyebrow{width:calc(100% - 130px)}
}
@media(max-height:700px) and (min-width:761px){
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame{top:55%;height:63svh}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame="hero"]{height:67svh}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame="night"]{height:66svh}
  html.personal-story-ready:not(.motion-paused) .story-track .story-frame[data-story-frame="wide"]{height:66svh}
  html.personal-story-ready:not(.motion-paused) .story-track[data-story="portrait"] .story-copy{top:20%}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-copy h1{font-size:62px}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-edition{margin:24px 0 20px}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-copy>p{margin:20px 0 18px;font-size:12px}
  html.personal-story-ready:not(.motion-paused) .story-track .personal-hero-foot{margin-top:22px;padding-top:14px}
  html.personal-story-ready:not(.motion-paused) .story-copy h2{font-size:54px}
}
@media(forced-colors:active){
  .story-architecture{display:none!important}
  html.personal-story-ready:not(.motion-paused) .story-view-all{background:Canvas;color:CanvasText;border:1px solid ButtonText}
  html.personal-story-ready:not(.motion-paused) .story-rail-index{background:Canvas;color:CanvasText;border:1px solid ButtonText}
}
