/* Foxhole Faith: one ball chain, one tag, from the cover's low sun to the book. */
@font-face{font-family:"League Gothic";src:url(/assets/books/foxhole-faith/league-gothic.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@view-transition{navigation:auto}

.ff{
  --umber:#2a2017;--umber-2:#3b2b1d;--cream:#f6e9cc;--brass:#8f4f17;--brass-l:#f2b766;
  --lg:"League Gothic","Arial Narrow",var(--poster);
  --hdr:64px;
  background:#19140e;
}
body.ff{overflow-x:clip}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header in this page's light */
.ff .top::before{background:linear-gradient(180deg,rgba(26,18,11,.7),rgba(26,18,11,.3) 58%,rgba(26,18,11,0))}

/* the sky: one plate from the cover, re-lit; it never moves, so no section ever shows an edge */
.sky{position:fixed;top:0;left:0;width:100%;height:100lvh;z-index:0;background:#c9a56a;pointer-events:none}
.sky__p{position:absolute;inset:0;opacity:0}
.sky__p.is-gold{opacity:1}
.sky img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
main{position:relative;z-index:1}
.sc{position:relative}
.stage{position:relative;min-height:100svh;overflow:clip}
.js .stage{position:sticky;top:0;height:100svh;min-height:0}
.js .sc--open{height:300svh}
.js .sc--real{height:560svh}
.js .sc--days{height:390svh}
.js .sc--light{height:250svh}

/* shared layers */
.dust{--tile:1920px;position:absolute;left:0;width:calc(var(--tile) * 2);background-repeat:repeat-x;background-size:var(--tile) 100%;pointer-events:none;animation:drift 90s linear infinite;will-change:transform}
.dust--back{background-image:url(/assets/books/foxhole-faith/dust-back.webp);bottom:6vh;height:58vh;opacity:.9}
.dust--front{background-image:url(/assets/books/foxhole-faith/dust-front.webp);bottom:-9vh;height:48vh;opacity:.62;animation-duration:58s;animation-direction:reverse;z-index:3}
.dust--still{background-image:url(/assets/books/foxhole-faith/dust-back.webp);bottom:-4vh;height:52vh;opacity:.95;animation:none;z-index:2}
.is-off .dust{animation-play-state:paused}
@keyframes drift{to{transform:translate3d(calc(var(--tile) * -1),0,0)}}

.walk{position:absolute;left:50%;bottom:1vh;height:49vh;aspect-ratio:760/826;translate:-50% 0;transform-origin:50% 100%;z-index:2}
.walk__men{width:100%;height:100%}
.walk--sh{z-index:6;pointer-events:none}
.walk__shadow{position:absolute;left:-52.7%;top:95%;width:205.5%;max-width:none;height:auto;transform-origin:50% 0;transform:skewX(30deg)}
.js .walk__shadow{opacity:0}
.grass{position:absolute;left:50%;translate:-50% 0;bottom:-3vh;width:max(100%,150vh);max-width:none;height:auto;pointer-events:none;transform-origin:50% 100%;z-index:4}

/* 1 + 2: the cover opened out, then the long shadows */
.open__title{position:absolute;left:0;right:0;top:calc(var(--hdr) + 3.4vh);text-align:center;z-index:5}
.by{font:700 12px/1 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--umber-2);margin-bottom:1.8vh}
.ttl{font:400 min(19vw,34vh)/.8 var(--lg);text-transform:uppercase;letter-spacing:.004em;color:var(--umber);
  background:var(--umber) url(/assets/books/foxhole-faith/ink.webp) 0 0/420px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ttl__w{white-space:nowrap}
.ttl__o{position:relative;display:inline-block;margin-inline:.05em}
.js .ttl__o{visibility:hidden}
html:not(.js) .ttl__o{display:inline;position:static}
.o-pin{display:inline-block;width:0;height:0;vertical-align:baseline}
.ttl__sub{margin-top:2.2vh;font:400 min(4.4vw,6.2vh)/1 var(--lg);letter-spacing:.07em;text-transform:uppercase;color:var(--umber)}
.ttl__line{margin-top:1.3vh;font:italic 400 clamp(18px,1.55vw,25px)/1.3 var(--serif);color:var(--umber-2)}
.ttl__line em{color:var(--brass)}

.open__lines{position:absolute;inset:0;z-index:5;pointer-events:none;font-weight:400}
.l1,.l2{position:absolute;left:4vw;right:4vw;text-align:center;font-family:var(--lg);text-transform:uppercase;color:var(--cream)}
.l1{top:calc(var(--hdr) + 5vh);font-size:min(5.2vw,8.4vh);line-height:1;letter-spacing:.05em;text-shadow:0 2px 30px rgba(36,14,2,.55)}
.l2{bottom:5vh;font-size:min(14.4vw,25vh);line-height:.82;letter-spacing:.006em;text-shadow:0 6px 40px rgba(30,12,2,.45)}
.l2 em{color:var(--brass-l)}
.js .l1,.js .l2{opacity:0}

/* 3: the raw realities, stamped into the tag */
.real__men{position:absolute;left:22%;bottom:10vh;height:30vh;width:auto;opacity:.7}
.real__h{position:absolute;left:6vw;top:50%;translate:0 -50%;max-width:27vw;font:400 min(6.6vw,11.5vh)/.86 var(--lg);text-transform:uppercase;color:var(--cream);text-shadow:0 2px 30px rgba(20,8,2,.5)}
.real__h em{display:block;color:var(--brass-l)}
.js .real__list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.real__list li{font:400 min(9vw,12vh)/.9 var(--lg);text-transform:uppercase;color:var(--umber)}

/* 4: thirty beads at night */
.walk--night{height:17vh;left:47%;bottom:14vh;z-index:0;filter:brightness(.2) saturate(.4)}
.grass--night{filter:brightness(.3) saturate(.6);bottom:-8vh;z-index:0}
.days__n{position:absolute;right:5vw;top:50%;translate:0 -52%;font:400 min(50vw,88vh)/.8 var(--lg);color:#efdcb8;letter-spacing:-.01em;text-shadow:0 0 80px rgba(255,186,96,.22);font-variant-numeric:tabular-nums;z-index:1}
.days__copy{position:absolute;left:6vw;top:50%;translate:0 -50%;max-width:38vw;z-index:2}
.days__h{font:400 min(6.6vw,10.5vh)/.88 var(--lg);text-transform:uppercase;color:var(--cream)}
@media (min-width:761px){.js .days__h .sr{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}}
.days__sub{margin-top:1.2vh;font:italic 400 clamp(18px,1.5vw,24px)/1.35 var(--serif);color:#dccbaa}
.days__k{margin-top:5vh;font:700 12px/1 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--brass-l)}
.days__list{margin-top:1.8vh}
.days__list li{font:400 min(4.4vw,7.2vh)/1.04 var(--lg);text-transform:uppercase;color:var(--cream)}
.days__list em{color:var(--brass-l)}
.js .days__n,.js .days__h,.js .days__sub,.js .days__k,.js .days__list li{opacity:0}

/* 5: first light */
.walk--far{height:25vh;bottom:13vh;z-index:2}
.grass--dawn{filter:brightness(.62) saturate(.8);bottom:-5vh}
.light__q{position:absolute;left:8vw;right:8vw;top:calc(var(--hdr) + 9vh);text-align:center;z-index:5}
.light__q p{font:italic 400 min(5.8vw,9.6vh)/1.08 var(--serif);color:#2a1b14;max-width:19ch;margin-inline:auto;letter-spacing:-.01em}
.light__q figcaption{margin-top:2.6vh;font:700 12px/1 var(--label);letter-spacing:.26em;text-transform:uppercase;color:#5a3a26}
.light__h{position:absolute;left:5vw;right:5vw;top:calc(var(--hdr) + 5vh);text-align:center;font:400 min(8.6vw,13.6vh)/.86 var(--lg);text-transform:uppercase;color:#2a1b14;z-index:5}
.light__h span{display:block}
.light__h em{color:#8a3a10}
.js .light__q,.js .light__h{opacity:0}

/* 6: the book in the morning light */
.sc--close{min-height:max(100svh,700px)}
.close__scene{position:absolute;inset:0;overflow:clip}
.grass--back{bottom:-8vh;opacity:.85;z-index:1}
.grass--front{bottom:-31vh;width:max(118%,176vh);z-index:6}
.book{position:absolute;left:16vw;bottom:21vh;width:min(21vw,31vh);z-index:3}
.book__obj{position:relative;transform:perspective(1700px) rotateY(-20deg) rotateX(1deg);transform-style:preserve-3d;transform-origin:50% 100%}
.book__face{position:relative;box-shadow:inset 0 0 0 1px rgba(255,240,210,.18)}
.book__face img{width:100%;height:auto;view-transition-name:book-foxhole-faith}
.book__light{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(98deg,rgba(255,226,170,.42),rgba(255,226,170,0) 18%),linear-gradient(180deg,rgba(255,240,214,.1),rgba(40,22,8,.16))}
.book__pages{position:absolute;top:.5%;bottom:.5%;left:100%;width:7%;transform-origin:0 50%;transform:rotateY(90deg);
  background:linear-gradient(90deg,rgba(40,24,10,.25),rgba(40,24,10,0) 30%,rgba(40,24,10,.3)),repeating-linear-gradient(90deg,#d9c9a6 0 1px,#b9a582 1px 2px)}
.book__shadow{position:absolute;left:2%;top:calc(100% - 6px);width:104%;height:34%;transform-origin:0 0;transform:skewX(58deg);
  background:linear-gradient(180deg,rgba(30,16,6,.78),rgba(30,16,6,.42) 40%,rgba(30,16,6,0));filter:blur(5px);border-radius:2px 2px 30% 30%}
.book::after{content:"";position:absolute;left:-4%;right:-12%;bottom:-10px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,12,5,.75),rgba(20,12,5,0))}
.cover-pin{position:absolute;left:61.76%;top:10.48%;width:0;height:15.2%}

.close__copy{position:relative;z-index:7;margin-left:50vw;padding:calc(var(--hdr) + 18vh) 6vw 16vh 0}
.close__h{font:400 min(8.6vw,14.4vh)/.84 var(--lg);text-transform:uppercase;color:var(--umber);
  background:var(--umber) url(/assets/books/foxhole-faith/ink.webp) 0 0/420px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.close__h em{display:block;-webkit-text-fill-color:var(--brass);color:var(--brass)}
.close__t{margin-top:2.6vh;font:700 12px/1.4 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--umber-2)}
.close__price{margin-top:2.6vh;font:400 min(6.6vw,10.5vh)/1 var(--lg);color:var(--umber)}
.close__btn{margin-top:2vh;background:var(--umber);color:var(--cream);box-shadow:0 10px 30px -10px rgba(42,32,23,.7)}
.close__btn:hover{background:#45321f}
.close__btn:focus-visible{outline-color:var(--umber)}
.close__note{margin-top:1.4vh;font-size:14px;color:var(--umber-2)}
.close__links{margin-top:2.6vh;display:flex;gap:6px 28px;flex-wrap:wrap}
.sc--close .textlink{color:var(--umber)}
.sc--close :focus-visible{outline-color:var(--umber)}

/* the chain and the tag: one object for the whole page */
.hang{position:fixed;inset:0;z-index:5;pointer-events:none}
.chain{position:absolute;left:0;top:0;width:100%;height:100%}
.tag{position:absolute;left:0;top:0;width:518px;height:860px;transform-origin:259px 60px;will-change:transform;pointer-events:auto;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;transform:translate3d(-999px,-999px,0) scale(.1)}
.tag.is-drag{cursor:grabbing}
.tag__plate{position:absolute;inset:0;border-radius:132px;transform-origin:259px 60px}
.tag__plate--back{background:linear-gradient(162deg,#b9ae98,#8e8472 48%,#6f6656);box-shadow:16px 24px 34px -8px rgba(24,14,6,.5),inset 0 0 0 2px rgba(255,248,230,.22),inset -10px -12px 16px -6px rgba(30,22,14,.5)}
.tag__plate--front{overflow:hidden;
  background:radial-gradient(130% 80% at 22% 8%,rgba(255,250,236,.55),rgba(255,250,236,0) 52%),url(/assets/books/foxhole-faith/brushed.webp) 0 0/512px,linear-gradient(164deg,#d2c8b4 0%,#aaa08c 40%,#8c826f 74%,#b0a691 100%);
  background-blend-mode:screen,overlay,normal;
  box-shadow:16px 26px 36px -8px rgba(24,14,6,.55),inset 0 0 0 2px rgba(255,250,236,.4),inset 9px 11px 14px -5px rgba(255,250,236,.55),inset -11px -13px 16px -5px rgba(40,30,20,.5)}
.tag__plate--front::before{content:"";position:absolute;inset:24px;border-radius:110px;box-shadow:inset 3px 4px 3px rgba(40,30,20,.32),2px 3px 1px rgba(255,250,236,.4),inset -1px -1px 0 rgba(255,250,236,.25)}
.tag__star{position:absolute;left:50%;top:54%;width:56%;translate:-50% -50%;fill:#33291f;filter:drop-shadow(-2px -2px 0 rgba(20,14,8,.32)) drop-shadow(3px 3px 0 rgba(255,248,230,.4));transition:opacity .45s,scale .45s}
.tag.is-stamp .tag__star{opacity:.1;scale:.7}
.tag__hole{position:absolute;left:239px;top:40px;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 46% 44%,#1b130c 0 48%,#4d443a 60%,#e4dccb 74%,#8a8172 88%,rgba(90,80,68,0) 100%)}
.tag__stamps{position:absolute;left:7%;right:7%;top:15%;bottom:8%;display:grid;place-items:center}
.st{grid-area:1/1;margin:0;text-align:center;font:400 96px/.92 var(--lg);text-transform:uppercase;letter-spacing:.02em;color:#544b40;
  text-shadow:0 -4px 3px rgba(22,15,9,.62),0 4px 1px rgba(255,248,232,.66),0 0 1px rgba(30,22,14,.5);opacity:0}
.st--0{font-size:87px}.st--1{font-size:138px}.st--2{font-size:112px}.st--3{font-size:101px}.st--4{font-size:100px}
.st--5{font-size:50px;line-height:1.08;text-shadow:0 -2px 1px rgba(22,15,9,.55),0 2px 1px rgba(255,248,232,.6)}
.st.on{opacity:1}
.st.hit{animation:stamp .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes stamp{0%{opacity:0;transform:scale(1.22)}20%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:none}}
.tag__sheen{position:absolute;inset:-10% -60%;background:linear-gradient(104deg,rgba(255,252,240,0) 38%,rgba(255,252,240,.34) 48%,rgba(255,252,240,0) 58%);pointer-events:none}
.tag__dim{position:absolute;inset:0;background:#0b0e18;opacity:0;pointer-events:none}

.fx{position:fixed;inset:0;z-index:7;pointer-events:none;background:url(/assets/books/foxhole-faith/bokeh.webp) 50% 50%/cover no-repeat;opacity:0}
.grain{position:fixed;inset:0;z-index:8;pointer-events:none;background:url(/assets/books/foxhole-faith/grain.webp) 0 0/220px;opacity:.5}

/* the footer continues the ground */
.ff .foot{background:#19140e;border-top:0;padding:22px 0 26px}

/* phone: its own crops */
@media (max-width:760px){
  .ff{--hdr:60px}
  .dust{--tile:1280px}
  .sky img{object-position:50% 40%}
  .walk{height:44svh;bottom:5svh}
  .ttl{font-size:min(31vw,20svh);line-height:.8}
  .ttl__w{display:block}
  .ttl__sub{font-size:min(7.4vw,4.4svh);margin-top:1.6svh}
  .ttl__line{font-size:17px}
  .l1{font-size:min(8.6vw,5.4svh);top:calc(var(--hdr) + 4svh);left:6vw;right:6vw}
  .l2{font-size:min(21vw,13svh);bottom:6svh}
  .grass{width:max(100%,170svh)}
  .real__men{left:6%;bottom:14svh;height:22svh}
  .real__h{left:6vw;right:6vw;top:auto;bottom:4svh;translate:none;max-width:none;text-align:center;font-size:min(10vw,6.6svh)}
  .real__h em{display:inline}
  .days__n{left:0;right:0;top:calc(var(--hdr) + 1svh);translate:none;text-align:center;font-size:min(110vw,44svh)}
  .days__copy{left:6vw;right:6vw;top:auto;bottom:9svh;translate:none;max-width:none}
  .days__h{font-size:min(11vw,6.8svh)}
  .days__sub{font-size:17px}
  .days__k{margin-top:2.6svh}
  .days__list li{font-size:min(8.4vw,5svh)}
  .walk--far{height:20svh;bottom:12svh}
  .light__q{left:6vw;right:6vw;top:calc(var(--hdr) + 15svh)}
  .light__q p{font-size:min(9.4vw,5.6svh)}
  .light__h{font-size:min(12.4vw,7.6svh);top:calc(var(--hdr) + 14svh);left:4vw;right:4vw}
  .sc--close{min-height:max(100svh,700px)}
  .close__copy{margin-left:0;padding:calc(var(--hdr) + 5svh) 6vw 26svh}
  .close__h{font-size:min(16vw,9.6svh);text-align:center}
  .close__h em{display:inline}
  .close__t{margin-top:1.2svh;text-align:center;font-size:11px}
  .close__buy{margin:7svh 0 0 47vw}
  .close__price{font-size:min(15vw,8svh);margin-top:0}
  .close__btn{padding:0 20px}
  .close__note{font-size:13px;line-height:1.35}
  .close__links{flex-direction:column;align-items:flex-start;gap:0;margin:1.4svh 0 0 47vw}
  .walk--night{height:15svh;left:30%;bottom:30svh}
  .book{left:6vw;top:calc(var(--hdr) + 23svh);bottom:auto;width:min(40vw,24svh)}
  .grass--front{bottom:-14svh}
}

@media (prefers-reduced-motion:reduce){
  .dust{animation:none}
  .st.hit{animation:none}
  .tag__star{transition:none}
}

/* without script: every screen in order, still and readable */
html:not(.js) .ff{background:#d2b07a}
html:not(.js) .stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vh;padding:calc(var(--hdr) + 8vh) 6vw 26vh;text-align:center}
html:not(.js) .stage>:is(.open__title,.open__lines,.real__h,.real__list,.days__n,.days__copy,.light__q,.light__h){position:relative;inset:auto;top:auto;left:auto;right:auto;bottom:auto;translate:none;max-width:none;z-index:7}
html:not(.js) .sc--open .stage{justify-content:flex-start}
html:not(.js) .l1,html:not(.js) .l2{position:static;display:block;color:var(--umber);text-shadow:none}
html:not(.js) .l2 em,html:not(.js) .real__h em,html:not(.js) .days__list em{color:var(--brass)}
html:not(.js) :is(.real__h,.days__h,.days__list li,.days__n){color:var(--umber);text-shadow:none}
html:not(.js) .days__sub{color:var(--umber-2)}
html:not(.js) .days__k{color:var(--brass)}
html:not(.js) .walk--sh,html:not(.js) .real__men,html:not(.js) .walk--night{height:17vh;left:47%;bottom:14vh;z-index:0;filter:brightness(.2) saturate(.4)}
.grass--night{display:none}