/* Lost in the Scroll. One room, one lit frame. Grounds live in a sticky stage, so nothing ever cuts. */
@font-face{font-family:"Anton";src:url(/assets/books/lost-in-the-scroll/anton-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@view-transition{navigation:auto}
:root{--blue:#1E3F8E;--lime:#7CD63F;--lime-ink:#62BE32;--white:#F4F6FA;--dark:#060A18;--wall:"Anton","Archivo Poster","Arial Narrow",Arial,sans-serif;--yb:45.5svh;--top:72px}
html{background:var(--dark)}
.lits{background:var(--dark);color:var(--white);overflow-x:clip}
.lits .top::before{background:linear-gradient(180deg,rgba(6,10,24,.55),rgba(6,10,24,.22) 55%,rgba(6,10,24,0))}
.lits .top.is-solid{background:none;box-shadow:none;backdrop-filter:none}
.lits .top.is-solid::before{opacity:1}
.film{position:relative;overflow:clip}

/* the stage: sticky, one viewport, every ground and the frame */
.hold{position:absolute;inset:0;z-index:1;pointer-events:none}
.hold--f{z-index:3}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:clip;background:#0B1B47}
.stage--f{background:none}
.plate{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%;opacity:0;will-change:opacity}
[data-plate="blue"]{opacity:1}
.spines{position:absolute;left:0;right:0;bottom:2%;height:44%;background:no-repeat 6% 100%/min(82%,1500px) auto;opacity:0;visibility:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 22%,#000 46%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 22%,#000 46%)}
.gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.grain{position:absolute;inset:0;opacity:0;background-position:0 0;background-size:256px 256px}
.ui{position:absolute;left:0;top:0;width:200px;height:435px;padding:0 0 14px 14px;transform-origin:0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;visibility:hidden;color:var(--white);text-align:center;will-change:transform}
.ui__k{font:700 15px/1.2 var(--label);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;color:#CFE0FF}
.ui__n{font:400 66px/1 var(--wall);letter-spacing:.015em;color:#A6F06A;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.touch{position:fixed;left:0;top:0;z-index:6;border:0;padding:0;margin:0;background:none;cursor:pointer;border-radius:22px;-webkit-tap-highlight-color:transparent}

/* sections */
.sc{position:relative;height:calc(var(--l,1)*100svh)}
.sc-a{--l:2.7}.sc-b{--l:2.9}.sc-c{--l:1.7}.sc-d{--l:1.3}.sc-e{--l:2.2}.sc-f{--l:2.1}.sc-g{--l:1.4}.sc-h{--l:1.4}.sc-i{--l:1.7}.sc-j{--l:1.3}.sc-k{--l:1.5}.sc-l{--l:1.6}.sc-m{--l:2.2}
.pin{position:sticky;top:0;height:100svh;overflow:clip}
.pin--low{z-index:2}
.pin--wall{z-index:4}
.pin--read{z-index:5}
.pin--over,.pin--low+.pin{margin-top:-100svh}
.live [data-fx]{opacity:0}
.still{display:none}

/* type */
.k{font:700 13px/1.3 var(--label);letter-spacing:.22em;text-transform:uppercase;color:#D5E2FF}
.wall{font-family:var(--wall);font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:.004em;color:var(--white)}
.wall span{display:block}
.line{position:absolute;font-family:var(--wall);text-transform:uppercase;line-height:1.1;letter-spacing:.012em;color:var(--white);margin:0}
.line em{color:var(--lime)}

/* 1 hero */
.hero{position:absolute;left:clamp(16px,4.6vw,88px);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding-top:4svh}
.hero__t{font-size:min(23.5svh,14.2vw);line-height:1.02;margin:.14em 0 .2em -.02em}
.hero__t span:nth-child(2){letter-spacing:.012em}
.book{position:absolute;margin:0}
.book__img{position:relative;width:100%;height:auto;max-width:none}
.book__sh{position:absolute;left:-34%;right:-6%;top:60%;bottom:-9%;background:url(/assets/books/lost-in-the-scroll/stack-shadow.webp) no-repeat 50% 50%/100% 100%}
.book--hero{--bh:93svh;height:var(--bh);width:calc(var(--bh)*.7828);right:clamp(16px,5vw,120px);bottom:calc(100svh - 100svh + 1.5svh)}
.book--close{--bh:min(96svh,62vw);height:var(--bh);width:calc(var(--bh)*.7828);left:clamp(16px,5vw,110px);bottom:1svh}

/* 2 entering */
.line--a{left:clamp(24px,7vw,132px);right:clamp(24px,10vw,200px);top:50%;transform:translateY(-50%);font-size:clamp(46px,6.5vw,124px)}

/* 3 4 scroll and screen */
.line span{display:block}
.line--b,.line--c{left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:clamp(50px,7.4vw,148px);padding:0 clamp(24px,8vw,160px)}

/* 5 forty */
.forty{position:absolute;right:-3vw;top:64px;height:110svh;margin:0}
.forty img{height:100%;width:auto;max-width:none}
.line--d{left:clamp(28px,5.4vw,104px);bottom:clamp(40px,9svh,110px);width:min(26vw,470px);font-size:clamp(30px,2.9vw,54px)}

.near{position:absolute;display:block;border-radius:999px;background:linear-gradient(196deg,#C9F59A 0,#86DD47 22%,#5DBB31 60%,#3E8F20 100%);box-shadow:0 18px 40px rgba(3,10,34,.5);will-change:transform}
.near--a{width:42vw;height:10svh;left:2vw;top:38%}
.near--b{width:20vw;height:4svh;left:44%;top:30%}

@media (max-aspect-ratio:145/100) and (min-aspect-ratio:851/1000){.forty{right:-14vw;height:min(100svh,66vw)}.line--d{width:25vw;font-size:clamp(22px,2.6vw,40px)}}

/* 6 each day */
.line--e{left:clamp(28px,6.6vw,120px);top:50%;transform:translateY(-50%);width:min(56vw,940px);font-size:clamp(34px,4.1vw,76px)}

/* 8 9 the turn */
.line--f{left:0;right:0;top:calc(var(--phone-top,50svh)*.5 + 26px);transform:translateY(-50%);text-align:center;font-size:clamp(44px,5.8vw,104px);padding:0 16px}
.line--g{left:clamp(28px,7vw,140px);width:min(32vw,520px);top:var(--phone-mid,66svh);transform:translateY(-50%);font-size:clamp(38px,4vw,74px)}
.flatcount{display:none}

/* 10 honest */
.honest{position:absolute;left:0;right:0;top:var(--top);text-align:center;font-size:min(16.6svh,10.6vw);line-height:1.04;background:linear-gradient(180deg,#F4F6FA 0,#F4F6FA 66%,#C9F3A2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 -.05em .1em rgba(2,6,20,.7))}

/* 11 12 13 letters stand on the back edge of the counter, their reflection in the stone */
.stand{position:absolute;left:0;right:0;top:0;height:var(--yb);text-align:center;display:flex;align-items:flex-end;justify-content:center}
.stand span{position:relative;display:block;line-height:.86;padding-bottom:0}
.stand span::after{content:attr(data-t);position:absolute;left:0;right:0;top:100%;transform:scaleY(-1);transform-origin:50% 0;opacity:.3;margin-top:.86em;-webkit-mask-image:linear-gradient(0deg,#000 0,transparent 46%);mask-image:linear-gradient(0deg,#000 0,transparent 46%)}
.stand--look{font-size:min(calc((var(--yb) - 72px)*1.13),24vw);color:var(--white)}
.stand--talk{font-size:min(calc((var(--yb) - 72px)*1.13),24vw);color:var(--lime)}
.stand--prac{font-size:min(calc((var(--yb) - 72px)*1.13),21.5vw);color:#14317A}
.line--h{left:clamp(28px,7vw,140px);width:min(40vw,640px);bottom:clamp(44px,12svh,120px);font-size:clamp(30px,3.2vw,58px);color:#14306F;line-height:1.1}

/* 14 the two lines */
.two{position:absolute;left:0;right:0;top:var(--top);text-align:center;font-size:min(10.6svh,6.3vw);line-height:1.1}
.two em{display:block;color:var(--lime)}

/* 15 close */
.buy{position:absolute;right:clamp(20px,8vw,170px);top:50%;transform:translateY(-50%);width:min(38vw,520px);display:flex;flex-direction:column;align-items:flex-start}
.buy__t{font:400 clamp(44px,5.4vw,96px)/1.02 var(--wall);text-transform:uppercase;letter-spacing:.006em;color:var(--white);margin:.16em 0 .18em}
.buy__p{font:400 clamp(44px,4.8vw,84px)/1 var(--wall);color:var(--lime);margin:.34em 0 .3em;letter-spacing:.01em}
.buy__btn{background:var(--lime);color:#0D2358;min-width:190px}
.buy__btn:hover{background:#fff}
.buy__n{font-size:15px;color:#CFDCF7;margin-top:12px}
.msg{margin-top:26px;width:100%}
.msg__play{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px 0 12px;border-radius:999px;border:2px solid rgba(124,214,63,.75);color:#C9F3A2;font:700 13px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:none;cursor:pointer}
.msg__play svg{width:28px;height:28px;flex:none}
.msg__play:hover{border-color:#fff;color:#fff}
.msg iframe{display:block;width:min(100%,340px);aspect-ratio:16/9;border:0;border-radius:10px}
.buy:has(iframe) .k:first-child{display:none}
.after{display:flex;gap:28px;margin-top:14px}
.after .textlink{color:#D5E2FF}
.film::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13svh;background:linear-gradient(180deg,rgba(5,11,26,0),#050B1A);z-index:4;pointer-events:none}
.foot{background:#050B1A;border-top:0}

/* phone and tall tablet: their own composition */
@media (max-aspect-ratio:85/100){
  :root{--top:68px;--yb:47svh}
  .spines{height:38%;bottom:1%;background-size:150% auto;background-position:42% 100%}
  .hero{left:16px;right:16px;top:calc(var(--top) + 8px);bottom:auto;display:block;padding:0}
  .hero__t{font-size:min(19.6vw,10.4svh);display:block;line-height:1;margin:.1em 0 .14em -.01em}
  .hero__t span{display:inline;margin-right:.18em}
  .hero__t span:nth-child(3){display:block}
  .book--hero{--bh:min(66svh,calc(105svh - 2*min(19.6vw,10.4svh) - 116px));right:auto;left:50%;margin-left:calc(var(--bh)*-.40);bottom:-5svh}
  .line--a{left:28px;right:24px;font-size:min(12.6vw,6.6svh);top:47%}
  .line--b,.line--c{font-size:min(14.2vw,7.4svh);padding:0 24px}
  .line--b span{display:inline}
  .forty{right:auto;left:50%;top:60px;height:58svh;transform:translateX(-50%)}
  .near--a{width:86vw;height:6svh;left:-14vw;top:60%}
  .near--b{width:40vw;height:2.6svh;left:50%;top:22%}
  .line--d{left:28px;right:24px;width:auto;bottom:calc(24px + 5svh);font-size:min(8.2vw,4.3svh)}
  .line--e{left:28px;right:24px;width:auto;top:auto;bottom:calc(30px + 6svh);transform:none;font-size:min(9.4vw,4.9svh)}
  .line--f{font-size:min(13vw,6.2svh);padding:0 28px;top:calc(var(--top) + 15svh)}
  .line--g{left:24px;right:24px;width:auto;text-align:center;top:calc(var(--top) + 15svh);font-size:min(11.4vw,5.6svh)}
  .honest{font-size:min(14.4vw,7.2svh);line-height:1.06;padding:0 16px;top:calc(var(--top) + 2svh)}
  .honest span{display:inline}
  .stand--look,.stand--talk{font-size:min(44vw,21svh)}
  .stand--prac{font-size:min(21.6vw,12svh)}
  .line--h{left:24px;right:24px;width:auto;text-align:center;font-size:min(7.2vw,3.6svh);bottom:24px}
  .two{font-size:min(11.3vw,5.6svh);padding:0 16px;line-height:1.12}
  .book--close{--bh:52svh;left:50%;margin-left:calc(var(--bh)*-.42);top:calc(var(--top) - 6px);bottom:auto}
  .buy{left:16px;right:16px;width:auto;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));transform:none;display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center}
  .buy>.k{grid-column:1/3;display:none}
  .buy__t{font-size:min(10.4vw,5.1svh);margin:0;grid-column:1}
  .buy__by{grid-column:1;font-size:11px}
  .buy__p{grid-column:2;grid-row:1/3;font-size:min(13vw,6.4svh);margin:0}
  .buy__btn{grid-column:1/3;margin-top:10px;width:100%}
  .buy__n{grid-column:1/3;text-align:center;margin-top:6px;font-size:14px}
  .msg{grid-column:1/3;margin-top:4px;display:flex;justify-content:center}
  .msg iframe{width:100%}
  .sc-m:has(iframe) .book--close{opacity:.28}
  .after{grid-column:1/3;justify-content:center;margin-top:0}
}

@media (max-aspect-ratio:85/100) and (min-aspect-ratio:651/1000){.line--h{right:auto;width:56vw;text-align:left}}

/* flat: no JavaScript, reduced motion or no WebGL. Every screen is a finished still, read top to bottom. */
html:not(.live) .hold{display:none}
html:not(.live) .sc{height:auto;min-height:100svh;margin-top:-1px}
html:not(.live) .pin{position:relative;height:auto;min-height:100svh;overflow:clip;margin-top:0}
html:not(.live) .pin--low,html:not(.live) .forty{display:none}
html:not(.live) .sc-c .pin--over{position:absolute;inset:0;margin:0;min-height:0}
html:not(.live) .still{display:block;position:absolute;inset:0;z-index:-1;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
html:not(.live) .still img{width:100%;height:100%;object-fit:cover}
html:not(.live) .line--c{top:62%}
html:not(.live) .line--b{top:38%}
html:not(.live) .touch,html:not(.live) .ui{display:none}
html:not(.live) .flatcount{display:block;position:absolute;left:clamp(28px,7vw,140px);top:calc(66svh + 13svh);margin:0}
html:not(.live) .flatcount span{font:700 13px/1.2 var(--label);letter-spacing:.2em;text-transform:uppercase;color:#CFE0FF;display:block}
html:not(.live) .flatcount b{font:400 56px/1.1 var(--wall);color:#A6F06A;font-variant-numeric:tabular-nums}
@media (min-aspect-ratio:651/1000){html:not(.live) .buy{position:relative;margin:0 0 0 auto;top:auto;bottom:auto;right:auto;transform:none;padding:12svh clamp(20px,8vw,170px) 12svh 0;box-sizing:content-box}}
@media (max-aspect-ratio:65/100){html:not(.live) .flatcount{left:0;right:0;top:calc(var(--top) + 26svh);text-align:center}}
html:not(.js) .flatcount{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}