/* ASAN: appearance, responsive layouts, and sticky track sizing. */
@font-face{
  font-family:Dongle;
  src:url('../assets/fonts/Dongle-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:block}

:root{
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --margin:clamp(25px,4.8vw,88px);
  --hairline:1px;
  --stage-h:100vh;
  --pose: url('../assets/images/yoga-warrior-ii.png')}

@supports(height:100svh){
  :root{
  --stage-h:100svh}
}

*{
  box-sizing:border-box}
html{
  background:var(--paper);
  color:var(--ink);
  scroll-behavior:auto}
body{
  margin:0;
  font-family:Archivo,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip}
::selection{
  color:var(--paper);
  background:var(--ink)}

a{
  color:inherit;
  text-decoration:none}
button,input{
  font:inherit;
  border-radius:0}
button,a,input{
  -webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:7px}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
.skip{
  position:fixed;
  left:20px;
  top:20px;
  z-index:100;
  transform:translateY(-180%);
  padding:16px;
  background:var(--paper);
  color:var(--ink)}
.skip:focus{
  transform:none}

/* Native sticky owns pinning. Never transform this element or its ancestors.
   The same 100svh unit defines both stage and track, including on touch devices. */
.story{
  position:relative;
  height:calc(var(--stage-h)*6.4);
  isolation:isolate}

.stage{
  position:sticky;
  top:0;
  height:var(--stage-h);
  width:100%;
  overflow:clip;
  background:var(--paper);
  isolation:isolate}

.nav{
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  width:100%;
  height:104px;
  padding:0 var(--margin);
  display:flex;
  justify-content:space-between;
  align-items:center}
.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--ink)}
.brand .name{
  width:86px;
  display:block}
.brand .fork{
  width:20px;
  display:block}
.brand svg{
  width:100%;
  display:block}
.nav-note{
  font-size:13px;
  position:absolute;
  left:50%;
  transform:translateX(-50%)}
.nav-link{
  font-size:14px;
  border-bottom:1px solid var(--ink);
  padding:10px 0}
.nav-link:hover{
  border-bottom-width:2px}

.art{
  position:absolute;
  z-index:3;
  width:min(60vw,100svh);
  aspect-ratio:2/3;
  right:-1.5vw;
  top:50%;
  transform:translate3d(0,-49%,0);
  transform-origin:52% 49%;
  will-change:transform;
  pointer-events:none;
  mix-blend-mode:multiply}

.pose{
  position:absolute;
  inset:0;
  background-image:var(--pose);
  background-repeat:no-repeat;
  background-size:300% 100%;
  filter:grayscale(1) contrast(1.035);
  will-change:opacity}
.pose-a{
  background-position:0 50%;
  opacity:1}
.pose-b{
  background-position:50% 50%;
  opacity:0}
.pose-c{
  background-position:100% 50%;
  opacity:0}

.art-guides{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:4;
  overflow:visible;
  pointer-events:none}
.art-guides path,.art-guides circle,.art-guides line{
  vector-effect:non-scaling-stroke}
.guide{
  opacity:0}
.guide .rule{
  fill:none;
  stroke:var(--ink);
  stroke-width:1;
  stroke-dasharray:3 5}
.guide .target{
  fill:var(--paper);
  stroke:var(--ink);
  stroke-width:1}
.guide .core{
  fill:var(--ink)}
.guide .pointer{
  fill:none;
  stroke:var(--ink);
  stroke-width:1}
.scan-rule{
  fill:none;
  stroke:var(--ink);
  stroke-width:1;
  opacity:0}

.cue{
  position:absolute;
  font-size:13px;
  line-height:1.45;
  letter-spacing:-.015em;
  max-width:155px;
  opacity:0;
  z-index:6;
  padding:9px 0;
  border-top:1px solid currentColor;
  background:var(--paper)}
.cue strong{
  font-weight:500;
  display:block}
.cue-shoulder{
  left:65%;
  top:23%}
.cue-knee{
  left:3%;
  top:43%}
.cue-settled{
  left:66%;
  top:63%}
.cue small{
  font-size:12px;
  display:block;
  margin-top:4px}

.copy{
  position:absolute;
  z-index:6;
  left:var(--margin);
  top:27%;
  width:49%;
  pointer-events:none;
  opacity:0;
  visibility:hidden}
.copy h1,.copy h2{
  font-size:clamp(52px,6.6vw,108px);
  line-height:.99;
  letter-spacing:-.065em;
  font-weight:400;
  margin:0}
.copy h1 span,.copy h2 span{
  display:block;
  white-space:nowrap}
.copy p{
  font-size:clamp(14px,1.15vw,18px);
  line-height:1.6;
  letter-spacing:-.018em;
  max-width:330px;
  margin:28px 0 0}
.copy-intro{
  opacity:1;
  visibility:visible}
.copy-intro h1{
  font-size:clamp(52px,6.2vw,100px)}
.copy-intro p{
  max-width:285px}
.copy-settled h2{
  font-size:clamp(52px,5.9vw,100px)}

.word-sculpture{
  position:absolute;
  z-index:2;
  left:var(--margin);
  bottom:9%;
  width:min(41vw,650px);
  color:var(--ink);
  transform-origin:left bottom;
  pointer-events:none}
.word-sculpture svg{
  display:block;
  width:100%}

.still-word{
  position:absolute;
  z-index:1;
  left:var(--margin);
  bottom:10%;
  font-size:clamp(100px,16vw,270px);
  font-weight:400;
  line-height:.75;
  letter-spacing:-.07em;
  opacity:0;
  color:var(--paper);
  -webkit-text-stroke:1px var(--ink);
  pointer-events:none}

.scene-foot{
  position:absolute;
  z-index:10;
  bottom:27px;
  left:var(--margin);
  right:var(--margin);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  line-height:1.4}
.scroll-note{
  display:flex;
  align-items:center;
  gap:14px}
.scroll-line{
  display:block;
  width:1px;
  height:34px;
  background:var(--ink);
  transform-origin:top}
.pose-note{
  text-align:right}
.pose-note span{
  display:block}
.pose-note small{
  display:block;
  font-size:11px;
  margin-top:3px}
.story-caption{
  position:absolute;
  z-index:8;
  left:var(--margin);
  bottom:10%;
  font-size:clamp(15px,1.45vw,21px);
  line-height:1.35;
  max-width:330px;
  opacity:0;
  letter-spacing:-.02em}

.finale{
  position:absolute;
  inset:0;
  z-index:12;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:var(--paper)}
.final-mark{
  width:clamp(68px,7vw,115px);
  height:auto;
  margin-bottom:35px;
  transform-origin:50% 70%}
.final-mark svg{
  width:100%;
  display:block}
.finale h2{
  font-size:clamp(70px,10vw,156px);
  font-weight:400;
  line-height:.97;
  letter-spacing:-.075em;
  text-align:center;
  margin:0}
.finale h2 span{
  display:block}
.finale p{
  font-size:16px;
  margin:28px 24px 0;
  line-height:1.5;
  text-align:center}

.watermark{
  position:fixed;
  z-index:30;
  right:22px;
  bottom:20px;
  width:22px;
  opacity:0;
  pointer-events:none;
  color:#FFFFFF;
  mix-blend-mode:difference}
.watermark svg{
  display:block;
  width:100%}

.about{
  padding:clamp(105px,12vw,190px) var(--margin) clamp(100px,11vw,180px);
  max-width:1600px;
  margin:auto}
.about-label{
  font-size:15px;
  line-height:1.5;
  margin:0 0 38px}
.description{
  max-width:1170px;
  font-size:clamp(28px,3.65vw,57px);
  line-height:1.34;
  letter-spacing:-.045em;
  margin:0}
.details{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:55px;
  border-top:1px solid var(--ink);
  margin-top:90px;
  padding-top:27px}
.detail h3{
  font-size:20px;
  font-weight:500;
  letter-spacing:-.03em;
  margin:0 0 12px}
.detail p{
  font-size:15px;
  line-height:1.55;
  max-width:260px;
  margin:0}

.waitlist{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:100px var(--margin) 35px;
  overflow:hidden;
  min-height:760px;
  display:flex;
  flex-direction:column;
  justify-content:space-between}
.waitlist-top{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:8vw;
  align-items:start;
  position:relative;
  z-index:2}
.waitlist h2{
  font-size:clamp(56px,6.8vw,108px);
  line-height:1;
  letter-spacing:-.065em;
  font-weight:400;
  margin:0}
.waitlist h2 span{
  display:block}
.signup-wrap{
  padding-top:8px;
  max-width:480px}
.subtext{
  font-size:20px;
  line-height:1.5;
  letter-spacing:-.025em;
  max-width:370px;
  margin:0 0 35px}
.fields{
  display:flex;
  gap:18px;
  align-items:stretch}
input{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--paper);
  color:var(--paper);
  padding:17px 0;
  min-width:0;
  flex:1;
  font-size:17px}
input::placeholder{
  color:var(--paper);
  opacity:1}
button{
  border:1px solid var(--paper);
  background:var(--paper);
  color:var(--ink);
  padding:17px 24px;
  font-size:16px;
  cursor:pointer;
  min-height:58px;
  white-space:nowrap}
button:hover{
  background:var(--ink);
  color:var(--paper)}
button:disabled{
  cursor:wait}
.waitlist button:focus-visible{
  outline-color:var(--paper)}
.status{
  font-size:14px;
  line-height:1.5;
  min-height:45px;
  margin:20px 0 0}
.footer-word{
  position:relative;
  margin-top:85px;
  width:min(58vw,1000px);
  color:var(--paper);
  pointer-events:none}
.footer-word svg{
  width:100%;
  display:block}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:12px;
  line-height:1.5;
  margin-top:42px;
  position:relative;
  z-index:2}
.back-top{
  border-bottom:1px solid currentColor;
  padding-bottom:4px}
.back-top:hover{
  border-bottom-width:2px}

.static-story{
  display:none}

@media(min-width:1700px){
  .art{
  right:2vw}
.copy{
  top:29%}
}

@media(max-width:1000px) and (min-width:701px){
  .nav-note{
  display:none}
.copy{
  top:25%;
  width:48%}
.copy h1,.copy h2{
  font-size:6.5vw}
.copy p{
  font-size:14px;
  max-width:250px}
.art{
  width:62vw;
  right:-1vw}
.word-sculpture{
  bottom:13%}
.story-caption{
  bottom:14%;
  max-width:270px}
.cue{
  font-size:11px}
.cue small{
  font-size:10px}
.waitlist-top{
  gap:35px}
.waitlist{
  min-height:700px}
.fields{
  gap:10px}
button{
  padding:17px}
}

@media(max-width:700px){
  :root{
  --margin:24px}
.story{
  height:calc(var(--stage-h)*5.8)}
.nav{
  height:78px}
.brand .name{
  width:65px}
.brand .fork{
  width:15px}
.nav-note{
  display:none}
.nav-link{
  font-size:12px}
.copy{
  top:15%;
  width:calc(100% - 48px)}
.copy h1,.copy h2,.copy-settled h2{
  font-size:clamp(44px,11.8vw,76px);
  line-height:1.01;
  letter-spacing:-.06em}
.copy h1 span,.copy h2 span{
  display:inline;
  white-space:normal}
.copy h1 span::after,.copy h2 span::after{
  content:' '}
.copy-intro h1{
  max-width:350px}
.copy p{
  font-size:13px;
  line-height:1.5;
  max-width:280px;
  margin-top:17px}
.copy:not(.copy-intro) p{
  display:none}
.art{
  width:min(100vw,80svh);
  right:50%;
  top:63%;
  transform:translate3d(50%,-49%,0)}
.word-sculpture{
  width:40vw;
  bottom:9%;
  left:24px;
  z-index:4}
.still-word{
  font-size:22vw;
  bottom:9%}
.scene-foot{
  bottom:18px;
  font-size:10px}
.scroll-note{
  gap:9px;
  max-width:170px}
.scroll-line{
  height:25px}
.pose-note small{
  font-size:9px;
  max-width:100px}
.story-caption{
  bottom:9%;
  font-size:15px;
  max-width:260px;
  left:24px}
.cue{
  font-size:11px;
  max-width:110px;
  padding:6px 0}
.cue small{
  display:none}
.cue-shoulder{
  left:66%;
  top:23%}
.cue-knee{
  left:5%;
  top:42%}
.cue-settled{
  left:65%;
  top:62%}
.finale h2{
  font-size:clamp(68px,16vw,105px)}
.final-mark{
  width:65px;
  margin-bottom:30px}
.finale p{
  max-width:270px;
  font-size:14px}
.about{
  padding-top:85px;
  padding-bottom:90px}
.about-label{
  font-size:13px;
  margin-bottom:28px}
.description{
  font-size:29px;
  line-height:1.4}
.details{
  grid-template-columns:1fr;
  gap:30px;
  margin-top:55px;
  padding-top:30px}
.detail{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:20px}
.detail h3{
  font-size:17px}
.detail p{
  font-size:13px}
.waitlist{
  padding-top:75px;
  min-height:760px}
.waitlist-top{
  grid-template-columns:1fr;
  gap:35px}
.waitlist h2{
  font-size:clamp(44px,12.6vw,62px)}
.subtext{
  font-size:17px;
  margin-bottom:25px;
  max-width:310px}
.fields{
  gap:14px}
input{
  font-size:16px}
button{
  padding:17px 21px;
  font-size:15px}
.footer-word{
  width:86%;
  margin-top:65px}
.footer-bottom{
  font-size:10px;
  margin-top:30px}
.watermark{
  width:18px;
  right:16px;
  bottom:18px}
}

@media(max-height:650px) and (min-width:701px){
  .nav{
  height:75px}
.copy{
  top:23%}
.copy h1,.copy h2{
  font-size:min(6vw,65px)}
.copy p{
  margin-top:16px;
  font-size:13px}
.art{
  width:95svh;
  right:3vw}
.word-sculpture{
  width:26vw;
  bottom:12%}
.story-caption{
  bottom:12%}
.scene-foot{
  bottom:16px}
.finale h2{
  font-size:75px}
.final-mark{
  width:55px;
  margin-bottom:20px}
}

@media(max-width:700px) and (max-height:650px){
  .copy{
  top:17%}
.copy h1,.copy h2{
  font-size:40px;
  max-width:290px}
.copy p{
  font-size:12px;
  max-width:260px;
  margin-top:11px}
.art{
  width:90vw;
  top:65%}
.word-sculpture{
  bottom:10%;
  width:30vw}
.story-caption{
  font-size:13px;
  bottom:11%;
  max-width:225px}
.scene-foot{
  bottom:14px}
.pose-note small{
  display:none}
}

@media(prefers-reduced-motion:reduce){
  .story{
  height:auto}
.stage{
  position:relative;
  min-height:var(--stage-h);
  height:var(--stage-h)}
.copy-intro{
  opacity:1!important;
  visibility:visible!important;
  clip-path:none!important}
.copy:not(.copy-intro),.story-caption,.still-word,.art-guides,.cue,.finale,.scroll-line{
  display:none!important}
.pose-a,.pose-b{
  opacity:0!important}
.pose-c{
  opacity:1!important}
.art{
  opacity:1!important;
  transform:translate3d(0,-49%,0)!important}
.pose-note{
  opacity:1!important}
.word-sculpture{
  opacity:1!important;
  transform:none!important;
  clip-path:none!important}
.static-story{
  display:block;
  padding:55px var(--margin);
  border-top:1px solid var(--ink)}
.static-story p{
  font-size:clamp(26px,4vw,48px);
  line-height:1.25;
  letter-spacing:-.04em;
  margin:0 0 24px}
.scroll-note{
  display:none}
.watermark{
  display:none}
}

@media(prefers-reduced-motion:reduce) and (max-width:700px){
  .art{
  transform:translate3d(50%,-49%,0)!important}
}