/* James: A Comprehensive Study. One leather hide, one line of silver tooling, from the wall of noise to the book on the desk. */
@font-face{font-family:"Oranienbaum";src:url(/assets/books/james/oranienbaum-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--ink:#0D0D0E;--silver:#E4E2DC;--dim:#BDBAB2;--display:"Oranienbaum","Times New Roman",serif}
@view-transition{navigation:auto}
.jms{background:var(--ink);color:var(--silver)}
.jms .top::before{background:linear-gradient(180deg,rgba(6,6,7,.8),rgba(6,6,7,.42) 55%,rgba(6,6,7,0))}
.jms .nav .nav__cta{border-color:rgba(228,226,220,.6)}
.jms .nav a:hover{color:#fff}
.jms :focus-visible{outline-color:var(--silver)}
.jms .skip{background:var(--silver);color:var(--ink)}
.jms .foot{background:#0B0A0A;border-top:0}
.jms .textlink{color:var(--silver)}

/* type, the same in every mode */
.sc__in{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100%;text-align:center;padding:96px var(--gutter) 64px}
.title{display:flex;flex-direction:column;align-items:center;font-weight:400}
.title__name{display:block;font:400 clamp(150px,27.5vw,50vh)/.86 var(--display);text-transform:uppercase;transform:scaleX(.8);letter-spacing:0}
.title__sub{margin-top:clamp(10px,2vh,22px);font:700 clamp(12px,1.05vw,16px)/1.3 var(--label);letter-spacing:.34em;text-transform:uppercase;color:var(--silver);text-indent:.34em}
.title__by{margin-top:10px;font:700 clamp(10px,.8vw,12px)/1.3 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.opener{margin-top:clamp(18px,4vh,40px);font:italic 400 clamp(18px,1.6vw,24px)/1.3 var(--serif);color:var(--silver)}
.hand{margin-top:8px;font:700 11px/1.4 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.small{font:italic 400 clamp(18px,1.7vw,26px)/1.3 var(--serif);color:var(--silver)}
.voice,.corners,.tongue,.heal{font:400 clamp(58px,10.2vw,19vh)/1.0 var(--display);letter-spacing:0}
.voice span,.corners span,.tongue span,.heal span{display:block}
.sc b{font-weight:400}
.voice__then{margin-top:clamp(18px,3.4vh,34px);font:italic 400 clamp(19px,1.8vw,28px)/1.3 var(--serif);color:var(--silver)}
.faith{display:flex;align-items:center;justify-content:center;gap:0;width:100%;font:400 clamp(90px,17vw,34vh)/1 var(--display)}
.faith__a,.faith__b{flex:1 1 0;text-align:center}
.faith__and{flex:none;font:italic 400 clamp(20px,2vw,30px)/1 var(--serif);color:var(--silver);padding:0 .6em}

/* the close */
.buy__kicker{color:var(--dim)}
.buy__title{margin-top:10px;font:400 clamp(64px,8.4vw,16vh)/.92 var(--display);text-transform:uppercase}
.buy__title span{display:block;margin-top:10px;font:700 clamp(12px,1vw,15px)/1.3 var(--label);letter-spacing:.3em;color:var(--silver)}
.buy__by{margin-top:10px;font:italic 400 clamp(16px,1.2vw,19px)/1.3 var(--serif);color:var(--silver)}
.buy__price{margin-top:clamp(12px,2.4vh,24px);font:400 clamp(44px,4.6vw,8.5vh)/1 var(--display);color:#F3EFE6}
.buy__btn{margin-top:clamp(12px,2.2vh,22px);min-width:200px;background:var(--silver);color:#141312}
.buy__btn:hover{background:#fff}
.buy__note{margin-top:10px;font-size:15px;color:var(--dim)}
.after{display:flex;gap:28px;margin-top:6px}

/* the book as a plain object, only when there is no film */
/* the book is in the picture; the image stays for its description and the page transition */
.object{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;overflow:hidden}
.book__front{width:100%;view-transition-name:book-james}

/* static: no JS, reduced motion, no WebGL. Stills from the film, feathered into each other */
html:not(.gl) .sc{position:relative;min-height:100svh;isolation:isolate}
html:not(.gl) .sc+.sc{margin-top:-14svh}
html:not(.gl) .sc__in{min-height:100svh}
html:not(.gl) .sc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--still,none) center/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14svh,#000 calc(100% - 14svh),transparent);mask-image:linear-gradient(180deg,transparent,#000 14svh,#000 calc(100% - 14svh),transparent)}
html:not(.gl) .sc:first-child::before{-webkit-mask-image:linear-gradient(180deg,#000,#000 calc(100% - 14svh),transparent);mask-image:linear-gradient(180deg,#000,#000 calc(100% - 14svh),transparent)}
html:not(.gl) .hand{display:none}
html:not(.gl) .sc--close{min-height:100svh}
html:not(.gl) .tongue{color:#FFD08A}
html:not(.gl) .sc--open{--still:url(/assets/books/james/still-1.webp)}
html:not(.gl) .sc--voice{--still:url(/assets/books/james/still-2.webp)}
html:not(.gl) .sc--corners{--still:url(/assets/books/james/still-3.webp)}
html:not(.gl) .sc--faith{--still:url(/assets/books/james/still-4.webp)}
html:not(.gl) .sc--tongue{--still:url(/assets/books/james/still-5.webp)}
html:not(.gl) .sc--heal{--still:url(/assets/books/james/still-6.webp)}
html:not(.gl) .sc--close{--still:url(/assets/books/james/still-7.webp)}
@media (max-width:760px){
  html:not(.gl) .sc--open{--still:url(/assets/books/james/still-1-m.webp)}
  html:not(.gl) .sc--voice{--still:url(/assets/books/james/still-2-m.webp)}
  html:not(.gl) .sc--corners{--still:url(/assets/books/james/still-3-m.webp)}
  html:not(.gl) .sc--faith{--still:url(/assets/books/james/still-4-m.webp)}
  html:not(.gl) .sc--tongue{--still:url(/assets/books/james/still-5-m.webp)}
  html:not(.gl) .sc--heal{--still:url(/assets/books/james/still-6-m.webp)}
  html:not(.gl) .sc--close{--still:url(/assets/books/james/still-7-m.webp)}
}

/* the film */
.gl .film{height:1500svh;position:relative}
.gl .stage{position:sticky;top:0;height:100svh}
.gl .stage canvas{position:absolute;inset:0 0 auto 0;width:100%;height:100lvh;display:block}
.gl .sc{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:opacity}
.gl .sc.is-on{pointer-events:auto}
.gl.on [data-stamp],.gl.on [data-stamp] *{color:transparent;text-shadow:none}
.sc--close .sc__in{align-items:flex-end;text-align:left;padding-right:clamp(32px,9vw,170px)}
.buy{width:min(40vw,520px)}
.small,.opener,.voice__then,.title__sub,.title__by,.hand,.faith__and,.sc h1,.sc h2,.buy p,.after a{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.65)}
.sc--close .sc__in{z-index:1}
.sc--close::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,rgba(11,10,10,0),#0B0A0A)}
.gl .sc--voice .sc__in{padding-top:clamp(84px,11vh,120px);padding-bottom:clamp(40px,7vh,80px)}
.gl .sc--open .sc__in{padding-top:clamp(70px,9vh,96px);padding-bottom:40px}
.sc--corners .sc__in{align-items:flex-start;text-align:left;justify-content:flex-end;padding-bottom:clamp(40px,9vh,90px)}
.sc--faith .sc__in{padding-inline:0}
.sc--faith .small{position:absolute;top:calc(50% - clamp(120px,14.5vw,27vh));left:0;width:50%;padding-right:3vw;text-align:center}
.faith__and{position:absolute;left:50%;transform:translateX(-100%);margin-left:-26px;padding:0;top:calc(50% + clamp(36px,5vw,9vh))}

@media (max-width:760px){
  .sc__in{padding:84px 20px 48px}
  .title__name{font-size:clamp(100px,35vw,26vh)}
  .voice,.tongue{font-size:clamp(58px,20vw,11.5vh);line-height:.98}
  .corners{font-size:clamp(46px,14.4vw,10vh);line-height:1.02}
  .heal{font-size:clamp(40px,12.6vw,9vh);line-height:1.04}
  .voice b,.tongue b,.heal b{display:block}
  .faith{flex-direction:column;font-size:clamp(100px,31vw,18vh);line-height:.95}
  .faith__a,.faith__b{flex:none}
  .faith__and{padding:.5em 0}
  .sc--faith .small{top:clamp(84px,12vh,120px);width:100%;padding:0 20px}
  .faith__and{left:auto;right:30px;top:calc(50% - 62px);transform:none;margin:0}
  .faith{gap:clamp(40px,8vh,80px)}
  .sc--close .sc__in{align-items:center;justify-content:flex-end;text-align:center;padding:0 20px 30px}
  .buy{width:100%;display:grid;grid-template-columns:1fr auto;align-items:end;text-align:left;column-gap:14px}
  .buy__kicker{display:none}
  .buy__title{grid-column:1;margin:0;font-size:46px}
  .buy__title span{font-size:10px;letter-spacing:.2em;margin-top:6px}
  .buy__by{grid-column:1;font-size:14px;margin-top:6px}
  .buy__price{grid-column:2;grid-row:1 / span 2;align-self:end;font-size:46px;margin:0}
  .buy__btn{grid-column:1 / -1;width:100%;margin-top:14px}
  .buy__note{grid-column:1 / -1;text-align:center;font-size:14px}
  .after{grid-column:1 / -1;justify-content:center}
}