@import url('atlas-v3.css?v=5');

/* A fixed viewport is travelled in depth; its chapters never scroll past it. */
#creation-story{position:relative;height:auto}
.creation-stage{position:relative;height:auto;overflow:clip;background:var(--paper);isolation:isolate}
.depth-world,.story-register,.depth-footer{display:none}
.story-flow{position:relative}
.flow-copy{position:relative;max-width:570px}
.story-overline{font-size:11px;line-height:1.6;letter-spacing:.035em;color:#617269;margin-bottom:24px}
.intro-copy h1,.story-passage h2,.finale-copy h2{font-size:clamp(80px,7.7vw,134px);line-height:.92;letter-spacing:-.045em}
.intro-copy h1 em{color:#6c7d67}
.intro-description,.story-passage .flow-copy>p:not(.story-overline),.finale-copy>p:not(.story-overline){font-size:16px;line-height:1.8;max-width:330px;margin-top:28px;color:#526359}
.scroll-cue{display:flex;align-items:center;gap:14px;font-size:11px;line-height:1.6;margin-top:34px;color:#52685e}
.scroll-cue>span{font-size:24px;font-weight:300}
.passage-note{display:block;font-size:11px;line-height:1.6;color:#5f7465;margin-top:24px}
.story-passage h2{font-size:clamp(72px,6.9vw,120px)}
.finale-copy{color:#f4f1e9}
.finale-copy h2{font-size:clamp(80px,8.2vw,145px)}
.finale-copy h2 em{color:#d5dfc0}
.finale-copy .story-overline,.finale-copy>p:not(.story-overline){color:#e5e8dc}
.finale-copy .light-link{width:max-content;max-width:100%;margin-top:28px}
.static-figure img{width:100%;height:100%;object-fit:cover}
.static-figure figcaption{font-size:11px;line-height:1.7;color:#627263;margin-top:15px}
.intro-plan img,.planted-plan img{object-fit:contain}
.static-landscape{position:absolute;inset:0;z-index:-1}
.static-landscape img{width:100%;height:100%;object-fit:cover;object-position:58% center}
.static-landscape::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#092017aa,transparent),linear-gradient(0deg,#09201790,transparent 65%)}
.static-concept-caption{position:absolute;right:var(--gutter);bottom:28px;font-size:11px;color:#fff;opacity:.8}

html[data-experience="depth"] #creation-story{height:600svh}
html[data-experience="depth"] .creation-stage{position:sticky;top:0;height:100svh}
html[data-experience="depth"] .depth-world{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
html[data-experience="depth"] #garden-world{width:100%;height:100%;position:absolute;inset:0;z-index:1}
.depth-reading-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(10,30,23,.66),rgba(10,30,23,.16) 48%,transparent 80%);opacity:var(--photo-shade,0)}
html[data-experience="depth"] .story-register{display:flex;z-index:4;top:138px;font-size:10px;letter-spacing:.02em;pointer-events:none;color:#536a64}
html[data-experience="depth"] .story-flow{position:absolute;inset:0;z-index:5;pointer-events:none;perspective:1200px;perspective-origin:64% 53%}
html[data-experience="depth"] .depth-chapter{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;will-change:transform,opacity;transform-origin:64% 53%}
html[data-experience="depth"] .depth-chapter:first-child{opacity:1;visibility:visible}
html[data-experience="depth"] .flow-copy{position:absolute;top:29%;left:var(--gutter);width:42%;max-width:600px;margin:0}
html[data-experience="depth"] .finale-copy{top:25%;width:65%;max-width:880px}
html[data-experience="depth"] .depth-chapter[data-active="true"] button{pointer-events:auto}
html[data-experience="depth"] .static-figure,html[data-experience="depth"] .static-landscape,html[data-experience="depth"] .static-concept-caption{display:none}
html[data-experience="depth"] .depth-footer{display:flex;position:absolute;z-index:10;inset:auto var(--gutter) 27px;align-items:center;gap:35px;font-size:10px;line-height:1.6;color:var(--ink)}
html[data-experience="depth"] .depth-footer::before{content:"";position:absolute;z-index:-1;inset:-42px calc(-1 * var(--gutter)) -27px;pointer-events:none;background:linear-gradient(0deg,#f4f1e9f5,#f4f1e9de 35%,#f4f1e900)}
.depth-invitation{display:flex;gap:13px;align-items:center;min-width:190px}
.depth-invitation>span:first-child{font-size:24px;font-weight:300}
.depth-concept{margin-left:auto;font-size:10px;opacity:.7}
.depth-skip{padding:10px 0;margin-left:15px;border-bottom:1px solid currentColor;display:flex;gap:25px;align-items:center}
.depth-skip>span{font-size:17px}
.depth-progress{position:absolute;bottom:-27px;left:calc(-1 * var(--gutter));width:100vw;height:2px;background:#253b3617}
.depth-progress>i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:#71806a}
.creation-stage.photo-active .depth-footer{color:#f4f1e9}
.creation-stage.photo-active .depth-footer::before{background:linear-gradient(0deg,#0a1e17d9,#0a1e1799 35%,#0a1e1700)}
.creation-stage.photo-active .depth-progress>i{background:#d2dec6}

/* Complete semantic narrative when reduced motion is requested or JS fails. */
html:not([data-experience="depth"]) .story-intro{padding:175px var(--gutter) 80px;display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;align-items:center}
html:not([data-experience="depth"]) .intro-copy h1{font-size:clamp(70px,7vw,120px)}
html:not([data-experience="depth"]) .intro-plan{width:100%;max-width:800px}
html:not([data-experience="depth"]) .intro-plan img{height:auto;max-height:650px}
html:not([data-experience="depth"]) .story-passage{padding:70px var(--gutter);display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;align-items:center;border-top:1px solid #253b3620}
html:not([data-experience="depth"]) .story-passage .static-figure img{height:390px}
html:not([data-experience="depth"]) .life-passage .static-figure img{height:auto;max-height:580px}
html:not([data-experience="depth"]) .story-finale{position:relative;isolation:isolate;background:#233d32;overflow:clip;min-height:100svh;padding:20svh var(--gutter) 120px}
html:not([data-experience="depth"]) .finale-copy{max-width:850px}

@media(min-width:701px) and (max-height:700px){
 html[data-experience="depth"] .story-register{top:105px}
 html[data-experience="depth"] .flow-copy{top:26%}
 html[data-experience="depth"] .finale-copy{top:23%}
 .intro-copy h1,.story-passage h2,.finale-copy h2{font-size:80px}
 .story-overline{margin-bottom:14px}.intro-description,.story-passage .flow-copy>p:not(.story-overline),.finale-copy>p:not(.story-overline){font-size:14px;margin-top:19px}.scroll-cue{margin-top:20px}
}
@media(min-width:701px) and (max-width:1100px){
 .intro-copy h1{font-size:83px}.story-passage h2{font-size:76px}.intro-description,.story-passage .flow-copy>p:not(.story-overline){font-size:14px;max-width:270px}
 html[data-experience="depth"] .story-register{top:120px}
 .finale-copy h2{font-size:100px}
}
@media(max-width:700px){
 html[data-experience="depth"] #creation-story{height:550svh}
 html[data-experience="depth"] .story-register{top:104px;left:24px;right:24px;font-size:9px}
 html[data-experience="depth"] .story-register>span:last-child{display:none}
 html[data-experience="depth"] .story-flow{perspective-origin:50% 64%}
 html[data-experience="depth"] .depth-chapter{transform-origin:50% 64%}
 html[data-experience="depth"] .flow-copy{top:18%;left:24px;width:calc(100% - 48px);max-width:410px}
 .story-overline{font-size:10px;margin-bottom:16px}
 .intro-copy h1{font-size:68px}.story-passage h2{font-size:62px}
 .intro-description,.story-passage .flow-copy>p:not(.story-overline),.finale-copy>p:not(.story-overline){font-size:13px;line-height:1.7;max-width:280px;margin-top:21px}
 .passage-note{font-size:10px;margin-top:19px}.scroll-cue{font-size:10px;gap:10px;margin-top:20px}.scroll-cue>span{font-size:21px}
 html[data-experience="depth"] .finale-copy{top:26%;max-width:100%}
 .finale-copy h2{font-size:70px}.finale-copy .light-link{font-size:12px;gap:22px;margin-top:24px}
 .depth-reading-shade{background:linear-gradient(180deg,#0a1e179c,transparent 85%),linear-gradient(90deg,#0a1e1755,transparent)}
 html[data-experience="depth"] .depth-footer{inset:auto 24px 22px;gap:15px;font-size:9px;flex-wrap:wrap}
 html[data-experience="depth"] .depth-footer::before{inset:-80px -24px -22px}
 .depth-invitation{min-width:0;gap:9px;flex:1}.depth-invitation>span:first-child{font-size:20px}.depth-concept{display:none}.depth-skip{font-size:9px;gap:13px;margin-left:0}.depth-progress{bottom:-22px}
 html:not([data-experience="depth"]) .story-intro{display:block;padding:135px 24px 45px}
 html:not([data-experience="depth"]) .intro-copy h1{font-size:65px}
 html:not([data-experience="depth"]) .intro-plan{margin-top:35px}
 html:not([data-experience="depth"]) .story-passage{padding:45px 24px;display:flex;flex-direction:column;gap:32px;align-items:stretch}
 html:not([data-experience="depth"]) .story-passage h2{font-size:57px}
 html:not([data-experience="depth"]) .story-passage .static-figure img{height:280px}
 html:not([data-experience="depth"]) .life-passage .static-figure img{height:auto}
 html:not([data-experience="depth"]) .story-finale{padding:19svh 24px 100px;min-height:100svh}
 .static-concept-caption{font-size:10px;left:24px;right:24px;bottom:24px}.static-figure figcaption{font-size:10px}
}
@media(max-width:700px) and (max-height:750px){
 html[data-experience="depth"] .flow-copy{top:20%}.intro-copy h1{font-size:54px}.story-passage h2{font-size:50px}.finale-copy h2{font-size:58px}.story-overline{font-size:9px;margin-bottom:12px}
 .intro-description,.story-passage .flow-copy>p:not(.story-overline),.finale-copy>p:not(.story-overline){font-size:12px;margin-top:16px;max-width:265px}.scroll-cue{margin-top:14px;font-size:9px}.passage-note{margin-top:13px;font-size:9px}
 html[data-experience="depth"] .story-register{top:94px;font-size:8px}
}
@media(max-width:360px){
 html[data-experience="depth"] .flow-copy{left:20px;width:calc(100% - 40px)}
 .intro-copy h1{font-size:51px}.story-passage h2{font-size:48px}.finale-copy h2{font-size:58px}
 html[data-experience="depth"] .depth-footer{left:20px;right:20px}.depth-skip{font-size:8px;gap:9px}.depth-invitation{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .depth-chapter{will-change:auto}
}
html[data-experience="depth"] .life-passage .flow-copy{color:#f4f1e9}
html[data-experience="depth"] .life-passage .story-overline,html[data-experience="depth"] .life-passage .flow-copy>p:not(.story-overline),html[data-experience="depth"] .life-passage .passage-note{color:#e5e8dc}
@media(min-width:1101px){html[data-experience="depth"] .story-register{top:127px}}
@media(max-width:700px){html[data-experience="depth"] .scroll-cue{display:none}.passage-note{margin-top:14px}}
.reduce-depth{font-size:9px;opacity:.78;padding:12px 0;color:inherit;white-space:nowrap}
.motion-preference{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);top:130px;display:flex;gap:25px;align-items:center;font-size:11px;line-height:1.6;color:#536a60}
.motion-preference button{display:flex;gap:15px;align-items:center;padding:6px 0;border-bottom:1px solid currentColor;font-size:11px;color:var(--ink)}
.creation-stage:has(.motion-preference:not([hidden])) .story-intro{padding-top:235px}
@media(max-width:700px){
 .reduce-depth{position:absolute;bottom:47px;right:0;font-size:8px;padding:8px 0;opacity:.72}
 .motion-preference{top:104px;left:24px;right:24px;display:block;font-size:10px}
 .motion-preference button{font-size:11px;margin-top:6px}
 .creation-stage:has(.motion-preference:not([hidden])) .story-intro{padding-top:215px}
}
/* Material copy stays clear of the approaching drawing. */
html[data-experience="depth"] .ground-passage h2{font-size:clamp(70px,6.3vw,108px);max-width:440px}
@media(max-width:700px){html[data-experience="depth"] .ground-passage h2{font-size:60px}}
@media(max-width:700px) and (max-height:750px){html[data-experience="depth"] .ground-passage h2{font-size:49px}}
@media(max-width:360px){html[data-experience="depth"] .ground-passage h2{font-size:47px}}