@import url('theater.css');
/* The caption container is now the whole stage; voice and display type have separate addresses. */
#caption,#caption.right,#caption.center,#caption[data-cue]{inset:0;width:100%;height:100%;max-width:none;text-align:left;perspective:1100px;perspective-origin:50% 50%;transform-style:preserve-3d;will-change:auto;--x:7%;--y:20%;--w:86%;--size:clamp(44px,8vw,138px);--bx:67%;--by:72%;--bw:26%}
#caption::before{display:none}#where{display:none}
#caption #line{position:absolute;left:var(--x);top:var(--y);width:var(--w);max-width:none;font-size:var(--size);line-height:.94;letter-spacing:-.055em;text-align:left;text-wrap:balance;transform-style:preserve-3d;overflow:visible;margin:0;text-shadow:0 2px 25px #05090999}
#caption #line .line{overflow:visible;padding:0;margin:0;transform-style:preserve-3d}
#caption #line .line span{transform-origin:50% 50%;will-change:transform,opacity,filter}
#caption #body,#caption.center #body,#caption[data-cue="writing"] #body{position:absolute;left:var(--bx);top:var(--by);width:var(--bw);max-width:none;margin:0;font:clamp(16px,1.35vw,21px)/1.5 var(--body);text-wrap:pretty;text-shadow:0 2px 12px #000,0 0 30px #000b;will-change:opacity}
#caption #body::before{content:'';position:absolute;inset:-45px -50px;z-index:-1;background:radial-gradient(ellipse,#07101280,transparent 68%)}
#apparition{position:fixed;inset:0;z-index:2;pointer-events:none;perspective:900px;overflow:hidden;mix-blend-mode:screen}
#echo-word{position:absolute;left:50%;top:50%;font:400 34vw/.8 var(--display);letter-spacing:-.085em;white-space:nowrap;color:#d6d4c0;transform-origin:center;opacity:0;will-change:transform,opacity,filter}
header{font-size:11px}.brand{font-size:21px}.author{opacity:.5}footer{font-size:10px}#instruction{opacity:.55}
#ending{bottom:10%;font-size:11px}#ending>div{margin:10px 0 12px}#ending label{font-family:var(--body);font-size:15px}
#caption[data-cue="fall"]{--x:7%;--y:14%;--w:92%;--size:clamp(55px,12.5vw,220px);--bx:68%;--by:69%;--bw:25%}
#caption[data-cue="return"]{--x:8%;--y:70%;--w:67%;--size:clamp(35px,5vw,82px);--bx:8%;--by:16%;--bw:25%}
#caption[data-cue="bed"]{--x:7%;--y:20%;--w:85%;--size:clamp(44px,8vw,135px);--bx:7%;--by:77%;--bw:29%}
#caption[data-cue="dream"]{--x:24%;--y:25%;--w:72%;--size:clamp(50px,8.2vw,145px);--bx:7%;--by:80%;--bw:26%}
#caption[data-cue="dream"] #line .line span{white-space:nowrap}
#caption[data-cue="wake"]{--x:6%;--y:15%;--w:85%;--size:clamp(52px,10vw,165px);--bx:57%;--by:77%;--bw:40%}
#caption[data-cue="wake"] #body{font:400 clamp(27px,4vw,66px)/1.1 var(--display);letter-spacing:-.035em}
#caption[data-cue="museum"]{--x:7%;--y:17%;--w:91%;--size:clamp(64px,15vw,245px);--bx:65%;--by:78%;--bw:28%}
#caption[data-cue="photograph"]{--x:49%;--y:20%;--w:46%;--size:clamp(35px,6vw,98px);--bx:7%;--by:77%;--bw:29%}
#caption[data-cue="visitor"]{--x:8%;--y:13%;--w:82%;--size:clamp(48px,9.5vw,160px);--bx:68%;--by:72%;--bw:25%}
#caption[data-cue="egypt"]{--x:7%;--y:17%;--w:87%;--size:clamp(48px,7.6vw,125px);--bx:7%;--by:79%;--bw:29%}
#caption[data-cue="mother"]{--x:57%;--y:14%;--w:40%;--size:clamp(36px,5vw,85px);--bx:8%;--by:75%;--bw:30%}
#caption[data-cue="mother"] #line .line:last-child{font-size:1.45em}
#caption[data-cue="writing"]{--x:55%;--y:14%;--w:40%;--size:clamp(35px,5.2vw,88px);--bx:7%;--by:76%;--bw:36%}
#caption[data-cue="bentreshyt"]{--x:3%;--y:28%;--w:94%;--size:clamp(65px,16.5vw,280px);--bx:65%;--by:72%;--bw:28%}
#caption[data-cue="cost"]{--x:6%;--y:21%;--w:89%;--size:clamp(48px,7vw,120px);--bx:7%;--by:77%;--bw:33%}
#caption[data-cue="cost"] #line .line:last-child{margin-top:.7em;text-align:right}
#caption[data-cue="work"]{--x:7%;--y:67%;--w:65%;--size:clamp(34px,4.6vw,78px);--bx:66%;--by:14%;--bw:28%}
#caption[data-cue="darkness"]{--x:8%;--y:28%;--w:84%;--size:clamp(48px,9vw,150px);--bx:7%;--by:78%;--bw:31%}
#caption[data-cue="abydos"]{--x:7%;--y:17%;--w:79%;--size:clamp(38px,6vw,103px);--bx:64%;--by:76%;--bw:29%}
#caption[data-cue="garden"],#caption[data-cue="sand"]{--x:28%;--y:50%;--w:65%;--size:clamp(90px,19vw,320px);--bx:7%;--by:16%;--bw:26%}
#caption[data-cue="sand"] #line{color:#c6b68f}
#caption[data-cue="dig"]{--x:43%;--y:52%;--w:52%;--size:clamp(48px,7vw,120px);--bx:67%;--by:16%;--bw:26%}
#caption[data-cue="registration"]{--x:7%;--y:18%;--w:86%;--size:clamp(48px,9vw,150px);--bx:7%;--by:78%;--bw:30%}
#caption[data-cue="registration"] #line .line:last-child{margin-top:1.1em;text-align:right}
#caption[data-cue="stays"]{--x:7%;--y:64%;--w:86%;--size:clamp(64px,14vw,230px);--bx:66%;--by:17%;--bw:27%}
#caption[data-cue="after"]{--x:12%;--y:25%;--w:78%;--size:clamp(50px,10vw,175px);--bx:60%;--by:71%;--bw:33%}
#caption[data-cue="after"] #line{text-align:center}
@media(max-width:650px){
 #caption,#caption.right,#caption.center,#caption[data-cue]{--x:7%;--y:20%;--w:86%;--size:clamp(40px,12vw,68px);--bx:7%;--by:76%;--bw:86%;perspective:950px}
 #caption #body,#caption.center #body,#caption[data-cue="writing"] #body{font-size:15px;line-height:1.45}
 #caption[data-cue="fall"]{--size:13.3vw;--y:18%;--by:72%}
 #caption[data-cue="return"]{--y:65%;--size:10vw;--by:15%;--bw:75%}
 #caption[data-cue="dream"]{--x:7%;--w:88%;--y:23%;--size:13vw;--by:78%}
 #caption[data-cue="wake"]{--y:15%;--size:15vw;--by:75%}
 #caption[data-cue="wake"] #body{font-size:9vw}
 #caption[data-cue="museum"]{--y:20%;--size:19vw;--by:73%}
 #caption[data-cue="photograph"]{--x:15%;--w:78%;--y:22%;--size:12vw;--by:76%}
 #caption[data-cue="visitor"]{--y:17%;--size:13vw;--by:72%}
 #caption[data-cue="mother"]{--y:15%;--size:10vw;--by:76%}
 #caption[data-cue="writing"]{--y:13%;--size:10vw;--by:77%}
 #caption[data-cue="bentreshyt"]{--x:2%;--w:96%;--y:26%;--size:19vw;--by:74%}
 #caption[data-cue="cost"]{--y:17%;--size:10vw;--by:76%}
 #caption[data-cue="cost"] #line .line:last-child{margin-top:1.7em}
 #caption[data-cue="work"]{--y:16%;--size:11vw;--by:70%}
 #caption[data-cue="darkness"]{--y:25%;--size:14vw;--by:76%}
 #caption[data-cue="abydos"]{--y:15%;--size:11vw;--by:75%}
 #caption[data-cue="garden"],#caption[data-cue="sand"]{--x:16%;--y:52%;--w:80%;--size:28vw;--by:17%}
 #caption[data-cue="dig"]{--x:12%;--y:49%;--w:83%;--size:13vw;--by:15%}
 #caption[data-cue="registration"]{--y:22%;--size:14vw;--by:77%}
 #caption[data-cue="registration"] #line .line:last-child{margin-top:1.7em}
 #caption[data-cue="stays"]{--y:63%;--size:20vw;--by:17%}
 #caption[data-cue="after"]{--y:24%;--size:14vw;--by:64%}
 #echo-word{font-size:59vw}#ending{bottom:12%}
}
@media(min-aspect-ratio:6/5) and (max-height:540px){
 #caption,#caption.right,#caption.center,#caption[data-cue]{--y:18%;--size:clamp(27px,8vh,44px);--by:67%;--bw:35%;--bx:59%}
 #caption #body,#caption.center #body,#caption[data-cue="writing"] #body{font-size:13px;line-height:1.35}
 #caption[data-cue="fall"],#caption[data-cue="museum"]{--size:15vh;--y:19%;--by:68%}
 #caption[data-cue="return"],#caption[data-cue="work"]{--y:65%;--bx:65%;--by:18%;--bw:30%;--size:7vh}
 #caption[data-cue="bentreshyt"]{--size:23vh}
 #caption[data-cue="wake"] #body{font-size:clamp(18px,3vw,24px);line-height:1.15}
 #caption[data-cue="cost"] #line .line:last-child{margin-top:.5em}
 #caption[data-cue="garden"],#caption[data-cue="sand"]{--y:44%;--size:30vh;--bx:7%;--by:18%}
 #caption[data-cue="dig"]{--y:49%;--bx:67%;--by:17%;--bw:26%}
 #caption[data-cue="registration"]{--size:11vh;--by:75%;--bx:7%}
 #caption[data-cue="registration"] #line .line:last-child{margin-top:.6em}
 #caption[data-cue="stays"]{--size:17vh;--y:61%;--by:17%}
 #caption[data-cue="after"]{--x:7%;--y:23%;--w:45%;--by:66%;--bx:7%;--bw:42%}
 #ending{left:auto;right:6%;transform:none;bottom:20%;width:240px}
}
body.minimal #line .line span{transform:none!important;filter:none!important;opacity:1!important}
body.minimal #echo-word{display:none}
@media(prefers-reduced-motion:reduce){#echo-word{display:none}#line .line span{filter:none!important}}
/* A shared place, an independent foreground lens, then the returning gesture. */
#garden-film,#garden-still{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#garden-film[hidden],#garden-still[hidden]{display:none}
#caption[data-garden]{--size:clamp(44px,7.2vw,120px);--x:6.5%;--y:13%;--w:55%;--bx:7%;--by:41%;--bw:29%}
#caption[data-garden] #line{letter-spacing:-.05em;line-height:.98;color:#f4efde;font-weight:400;text-shadow:0 2px 22px #080b0970}
#caption[data-garden] #body{font:400 clamp(13px,1.14vw,17px)/1.55 'Threshold Sans',sans-serif;letter-spacing:.005em;color:#f0eada}
#caption[data-garden="left"]{--size:clamp(52px,8.1vw,142px);--by:43%;--bw:28%}
#caption[data-garden="water"]{--size:clamp(40px,5.6vw,96px);--y:16%;--by:39%;--bw:24%}
#caption[data-garden="hold"]{--x:6.5%;--y:13%;--w:60%;--bx:7%;--by:81%;--bw:30%;--size:clamp(48px,7.6vw,125px)}
#caption[data-garden="absence"]{--y:51%;--size:clamp(52px,8vw,138px);--by:79%;--bw:37%}
#caption[data-garden="point"]{--x:6.5%;--y:14%;--size:clamp(52px,7vw,120px);--by:40%;--bw:24%}
#caption[data-garden="nothing"]{--x:7%;--y:22%;--size:clamp(64px,10vw,174px);--by:66%;--bw:27%}
@media(max-width:650px){
 #caption[data-garden]{--x:7%;--y:13%;--w:88%;--bx:7%;--by:32%;--bw:68%;--size:clamp(38px,12vw,70px)}
 #caption[data-garden] #body{font-size:13px;line-height:1.5}
 #caption[data-garden="left"]{--size:16vw;--by:33%;--bw:69%}
 #caption[data-garden="water"]{--size:11.5vw;--y:14%;--by:29%;--bw:65%}
 #caption[data-garden="hold"]{--y:13%;--by:80%;--bw:69%;--size:15vw}
 #caption[data-garden="absence"]{--y:53%;--size:17vw;--by:74%;--bw:79%}
 #caption[data-garden="point"]{--y:14%;--size:15vw;--by:33%;--bw:63%}
 #caption[data-garden="nothing"]{--y:22%;--size:23vw;--by:58%}
}
@media(min-aspect-ratio:6/5) and (max-height:540px){
 #caption[data-garden]{--x:6%;--y:19%;--size:12vh;--by:46%;--bw:34%}
 #caption[data-garden] #body{font-size:12px;line-height:1.4}
 #caption[data-garden="water"]{--size:10vh;--by:44%}
 #caption[data-garden="hold"]{--by:77%;--bw:41%}
 #caption[data-garden="absence"]{--y:23%;--by:67%;--bw:40%;--size:19vh}
 #caption[data-garden="point"]{--size:11vh;--by:45%}
 #caption[data-garden="nothing"]{--size:17vh;--by:66%}
}
@media(min-width:651px){#caption[data-cue="registration"] #line .line:last-child{padding-right:7vw}}

/* The photographed camera path sits above the fixed garden, below its words. */
#garden-camera{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#garden-camera[hidden]{display:none}
#opening-film,#opening-still{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#opening-film[hidden],#opening-still[hidden]{display:none}
/* Words occupy the quiet part of these takes; the lower frame belongs to action. */
#caption[data-opening-film="return"]{--x:7%;--y:17%;--w:42%;--size:clamp(40px,5.5vw,84px);--bx:7%;--by:39%;--bw:27%}
#caption[data-opening-film="dream"]{--x:6%;--y:15%;--w:82%;--size:clamp(44px,6.5vw,108px);--bx:7%;--by:42%;--bw:27%}
#caption[data-opening-film="museum"]{--x:7%;--y:16%;--w:47%;--size:clamp(60px,9vw,142px);--bx:7%;--by:39%;--bw:29%}
@media(max-width:650px){
 #caption[data-opening-film="return"]{--x:7%;--y:16%;--w:86%;--size:10vw;--bx:7%;--by:31%;--bw:78%}
 #caption[data-opening-film="dream"]{--x:7%;--y:16%;--w:86%;--size:11.5vw;--bx:7%;--by:35%;--bw:78%}
 #caption[data-opening-film="museum"]{--x:7%;--y:16%;--w:86%;--size:16vw;--bx:7%;--by:32%;--bw:78%}
}
@media(min-aspect-ratio:6/5) and (max-height:540px){
 #caption[data-opening-film="return"],#caption[data-opening-film="museum"]{--x:6%;--y:22%;--w:35%;--size:10vh;--bx:6%;--by:47%;--bw:31%}
 #caption[data-opening-film="dream"]{--x:6%;--y:21%;--w:72%;--size:11vh;--bx:6%;--by:54%;--bw:30%}
}
#caption[data-camera="contact"][data-garden="water"]{--y:13%;--by:36%;--size:clamp(42px,5.5vw,92px)}
#caption[data-camera="return"][data-garden="hold"]{--size:clamp(44px,6vw,100px)}
#caption[data-camera="contact"][data-garden="hold"]{--y:13%;--by:36%;--size:clamp(42px,5.5vw,92px)}
@media(max-width:650px){
 #caption[data-camera="contact"][data-garden="water"]{--y:13%;--by:29%;--size:11.5vw}
 #caption[data-camera="return"][data-garden="hold"]{--size:13vw}
}

/* The later cut moves from touch to evidence to an inhabited path. */
#caption[data-opening-film="dust"],#caption[data-opening-film="roots"]{--x:6.5%;--y:15%;--w:48%;--size:clamp(42px,6vw,96px);--bx:7%;--by:41%;--bw:28%}
#caption[data-opening-film="grove"]{--x:6.5%;--y:19%;--w:35%;--size:clamp(46px,6vw,96px);--bx:7%;--by:72%;--bw:27%}
#caption[data-opening-film="dust"] #line,#caption[data-opening-film="roots"] #line,#caption[data-opening-film="grove"] #line{color:#f4efde;text-shadow:0 2px 22px #080b0990}
#caption[data-opening-film="dust"] #body,#caption[data-opening-film="roots"] #body,#caption[data-opening-film="grove"] #body{font:400 clamp(13px,1.14vw,17px)/1.55 'Threshold Sans',sans-serif;color:#f0eada}
#caption[data-opening-film="grove"] #line .line:last-child{margin:0;padding:0;text-align:left}
#caption[data-cue="stays"]{--x:6%;--y:17%;--w:34%;--size:clamp(44px,6.5vw,105px);--bx:6.5%;--by:64%;--bw:24%}
@media(max-width:650px){
 #caption[data-opening-film="dust"],#caption[data-opening-film="roots"]{--x:7%;--y:15%;--w:86%;--size:12vw;--bx:7%;--by:32%;--bw:82%}
 #caption[data-opening-film="grove"]{--x:7%;--y:15%;--w:86%;--size:12vw;--bx:7%;--by:77%;--bw:78%}
 #caption[data-opening-film="dust"] #body,#caption[data-opening-film="roots"] #body,#caption[data-opening-film="grove"] #body{font-size:13px;line-height:1.5}
 #caption[data-cue="stays"]{--x:7%;--y:51%;--w:86%;--size:14vw;--bx:7%;--by:61%;--bw:82%}
 #caption[data-cue="stays"] #body{font-size:13px;line-height:1.5}
 #caption[data-camera="contact"][data-garden="hold"]{--y:13%;--by:29%;--size:11.5vw}
}
@media(min-aspect-ratio:6/5) and (max-height:540px){
 #caption[data-opening-film="dust"],#caption[data-opening-film="roots"]{--x:6%;--y:21%;--w:39%;--size:10vh;--bx:6%;--by:48%;--bw:30%}
 #caption[data-opening-film="grove"]{--x:6%;--y:22%;--w:35%;--size:10vh;--bx:6%;--by:67%;--bw:29%}
 #caption[data-opening-film="dust"] #body,#caption[data-opening-film="roots"] #body,#caption[data-opening-film="grove"] #body{font-size:12px;line-height:1.4}
 #caption[data-cue="stays"]{--x:6%;--y:23%;--w:30%;--size:11vh;--bx:6%;--by:56%;--bw:29%}
 #caption[data-camera="contact"][data-garden="hold"]{--y:19%;--by:43%;--size:10vh}
}
@media(min-aspect-ratio:6/5) and (max-height:540px){
 #caption[data-camera="contact"][data-garden="water"]{--y:19%;--by:43%;--size:10vh}
}

/* The chosen title is a complete sentence, set in three equal voices. */
header .brand{font-size:clamp(17px,1.65vw,23px);line-height:1.04;letter-spacing:-.035em;flex-shrink:0}
header .brand span{display:block;white-space:nowrap}
#opening .dedication{top:15%;margin:0}
#opening #title{left:5.3%;top:29%;bottom:auto;max-width:76%;font-size:clamp(72px,11.7vw,186px);line-height:.86;letter-spacing:-.055em}
#opening #title span,#opening #title span:first-child{display:block;font-size:1em;letter-spacing:inherit;margin:0;white-space:nowrap}
@media(max-width:1000px) and (min-height:541px){
 #opening #title{top:30%;font-size:clamp(64px,13.5vw,135px);max-width:89%}
 #opening .opening-note{left:7%;right:auto;bottom:12%;max-width:85%}
}
@media(max-width:650px){
 header .brand{font-size:16px;line-height:1.05}
 #opening .dedication{top:18%;left:7%}
 #opening #title{left:6%;top:33%;font-size:17.5vw;line-height:.90;max-width:91%}
 #opening .opening-note{left:7%;right:7%;bottom:14%;max-width:none}
}
@media(min-aspect-ratio:6/5) and (max-height:540px){
 header .brand{font-size:16px}
 #opening .dedication{top:20%;font-size:12px;line-height:1.3}
 #opening #title{top:35%;left:5%;font-size:min(10vw,17.5vh);max-width:60%;line-height:.87}
 #opening .opening-note{left:auto;right:6%;bottom:19%;max-width:31%;font-size:13px}
}