/* Artwork and proportions follow the original visual concept. */
img{height:auto}
[hidden]{display:none!important}
body{overflow-x:clip}
.header{border-bottom:0}
.wordmark{display:block;width:310px;flex:0 0 auto}
.wordmark:after{display:none}
.wordmark img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:contain}

/* A short river landscape connects the gates to the archive. */
.story{padding:32px 24px 46px;border-top:0;min-height:240px}
.story-backdrop{background:linear-gradient(180deg,#07131b8c,transparent 28%,#06121b22 78%,#06121b66),url('assets/river.webp') center 53%/cover no-repeat;filter:none}
.story-inner{max-width:790px}
.story h2{font-size:42px;margin:0 0 17px}
.timeline{max-width:700px;margin-bottom:16px;gap:20px}
.timeline span{font-size:27px}
.story p:not(.eyebrow){font-size:18px;line-height:1.45}

/* One continuous parchment scene, with no inset picture or flat border. */
.archive{z-index:2;min-height:570px;padding:42px 5.5% 0;margin-top:-12px;margin-bottom:-14px;background-color:#eedabb;background-image:linear-gradient(90deg,#f4e5c6db 0%,#f4e5c6b3 21%,#f4e5c65c 33%,transparent 48%),url('assets/archive.webp');background-size:cover;background-position:center 53%;clip-path:polygon(0 1.7%,2% 1.1%,4% 2%,6% .7%,8% 1.5%,10% .5%,13% 1.7%,16% .8%,19% 1.5%,22% .6%,25% 1.6%,28% .7%,31% 1.5%,34% .4%,37% 1.4%,40% .6%,43% 1.6%,46% .5%,49% 1.5%,52% .7%,55% 1.7%,58% .5%,61% 1.6%,64% .7%,67% 1.4%,70% .5%,73% 1.5%,76% .7%,79% 1.7%,82% .5%,85% 1.5%,88% .8%,91% 1.6%,94% .5%,97% 1.5%,100% .8%,100% 98.7%,97% 99.3%,94% 98.5%,91% 99.5%,88% 98.6%,85% 99.4%,82% 98.5%,79% 99.5%,76% 98.6%,73% 99.5%,70% 98.7%,67% 99.6%,64% 98.5%,61% 99.4%,58% 98.6%,55% 99.5%,52% 98.7%,49% 99.6%,46% 98.6%,43% 99.5%,40% 98.5%,37% 99.3%,34% 98.6%,31% 99.5%,28% 98.6%,25% 99.5%,22% 98.7%,19% 99.4%,16% 98.6%,13% 99.6%,10% 98.6%,7% 99.5%,4% 98.7%,0 99.6%)}
.archive:before,.archive:after{display:none}
.archive-inner{display:block;position:relative;max-width:1440px;min-height:440px;margin:auto;overflow:visible}
.archive-copy{width:36%;padding:22px 0 34px}
.archive h2{font-size:clamp(40px,3.7vw,56px)}
.artifact-scene{position:absolute;inset:0 0 0 38%;margin:0;min-height:0;align-self:auto}
.artifact-scene:after{display:none}
.hotspot-map{left:28%;top:39%}
.hotspot-letter{left:65%;top:65%}
.hotspot-notebook{right:0;top:34%}
.artifact-hint{bottom:13px;right:3%}
.archive-index{max-width:1440px;padding:16px 0 25px;background:linear-gradient(90deg,#f3e2bfe8,#f0dcbae3);border-top-color:#78553d40}
.archive-index button{padding:10px 24px}
.archive-index button:first-child{padding-left:16px}
.archive-index button:last-child{padding-right:16px}

/* The cover always retains its native 2:3 proportions. */
.book{padding:73px 8% 65px}
.book-inner{max-width:1100px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.book-object{width:270px;height:auto;aspect-ratio:2/3;min-height:0;align-self:center;justify-self:center}
.book-object img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}
.original-art>img{width:100%;height:auto;aspect-ratio:686/490;object-fit:contain}

@media(min-width:1600px){.archive{padding-left:max(5.5%,calc((100vw - 1440px)/2));padding-right:max(5.5%,calc((100vw - 1440px)/2));min-height:600px}.archive-inner{min-height:470px}.book-object{width:290px}}
@media(max-width:1100px){.wordmark{width:260px}.story h2{font-size:39px}.archive{padding-left:5%;padding-right:5%;min-height:545px}.archive-inner{min-height:415px}.archive-copy{width:39%}.archive h2{font-size:42px}.artifact-scene{inset:0 0 0 39%;margin:0}.book-object{width:235px}}
@media(max-width:760px){.wordmark{width:235px}.story{padding:29px 7% 42px;min-height:230px}.story h2{font-size:32px}.story p:not(.eyebrow){font-size:16px}.timeline{gap:11px;margin-bottom:18px}.timeline span{font-size:22px}.story-backdrop{background-position:center center}.archive{padding:45px 7% 0;min-height:0;background-image:linear-gradient(180deg,#f3e2c2f2 0%,#f3e2c2e8 37%,#f3e2c285 53%,transparent 67%),url('assets/archive.webp');background-size:auto,auto 100%;background-position:center,right center;clip-path:polygon(0 .8%,5% .3%,10% 1%,15% .4%,20% .9%,25% .3%,30% 1%,35% .4%,40% .9%,45% .3%,50% .8%,55% .3%,60% 1%,65% .4%,70% .9%,75% .3%,80% 1%,85% .4%,90% .9%,95% .3%,100% .8%,100% 99.4%,95% 99.8%,90% 99.2%,85% 99.7%,80% 99.3%,75% 99.8%,70% 99.3%,65% 99.7%,60% 99.2%,55% 99.8%,50% 99.3%,45% 99.7%,40% 99.2%,35% 99.8%,30% 99.3%,25% 99.7%,20% 99.2%,15% 99.8%,10% 99.3%,5% 99.7%,0 99.3%)}.archive-inner{min-height:0;display:flex;flex-direction:column}.archive-copy{width:100%;max-width:400px;padding:10px 0 0}.archive-copy>p:not(.eyebrow){font-size:20px}.archive h2{font-size:41px}.artifact-scene{position:relative;inset:auto;flex:none;width:100%;height:270px;min-height:0;margin:0;overflow:visible}.hotspot-map{left:12%;top:35%}.hotspot-letter{left:55%;top:65%}.hotspot-notebook{right:-3%;top:28%}.artifact-hint{right:2%;bottom:5px;font-size:11px}.archive-index{padding:17px 0 25px;margin-top:5px}.archive-index button{font-size:8px;padding:7px 9px;gap:7px}.archive-index button:first-child{padding-left:9px}.archive-index button:last-child{padding-right:9px}.book{padding:70px 7% 60px}.book-inner{grid-template-columns:1fr;gap:36px}.book-object{width:205px;aspect-ratio:2/3}.book h2{font-size:38px}}
@media(max-width:380px){.wordmark{width:215px}.archive h2{font-size:38px}.story h2{font-size:29px}}
@media(max-width:760px){.archive{background-color:#f1dfbf;background-image:linear-gradient(180deg,#f1dfbf 0%,#f1dfbf 44%,#f1dfbf00 62%),url('assets/archive.webp');background-size:auto,auto 420px;background-position:center,right bottom 65px;background-repeat:no-repeat}.hotspot-letter{left:60%;top:55%}}

/* Let the book cross the parchment edge, like an object resting in the world. */
.archive-index{width:62%;max-width:none;margin-left:auto;margin-right:0}
.book{z-index:3;padding-top:45px;overflow:visible}
.book-inner{position:relative;z-index:1}
.book-object{margin-top:-125px;margin-bottom:0;align-self:start}
@media(max-width:760px){
  .archive-index{width:100%;margin:5px auto 0;padding-bottom:100px}
  .book{padding-top:0}
  .book-object{margin-top:-55px;margin-bottom:0}
}
.archive{margin-bottom:0}
.book{scroll-margin-top:70px}
@media(max-width:760px){.book{scroll-margin-top:80px}}

/* Comfortable excerpt reading on phones and larger screens. */
#excerpt-content{font-size:24px;line-height:1.75;overflow-wrap:break-word}
#excerpt-content>p{margin-bottom:1.15em}
#excerpt-content>h3{font-size:34px}
#excerpt-content>p:first-of-type:first-letter{font-size:3.5em}
.reader-chapters button{font-size:16px;min-height:44px;opacity:.8}
.reader-subtitle{font-size:20px}
.dialog-toolbar>span{font-size:16px}
@media(max-width:760px){
  .reader-scroll{padding-left:20px;padding-right:20px}
  #excerpt-content{font-size:22px;line-height:1.7}
  #excerpt-content>h3{font-size:30px}
  .reader-chapters{gap:8px}
  .reader-chapters button{font-size:14px;padding:10px 8px}
}

/* Give visitors the premise while keeping the river landscape visible. */
.story{padding-top:42px;padding-bottom:62px}
.story-backdrop{background-image:linear-gradient(180deg,#07131b9c,#07131ba6 50%,#06121bb3),url('assets/river.webp')}
.story .story-synopsis{max-width:690px;margin:22px auto 0;text-wrap:pretty}
.story .story-synopsis p{font-size:20px;line-height:1.65;text-shadow:0 2px 12px #0008}
.story .story-synopsis p+p{margin-top:16px;color:var(--gold)}
@media(max-width:760px){
  .story{padding-top:36px;padding-bottom:56px}
  .story .story-synopsis{margin-top:22px}
  .story .story-synopsis p{font-size:18px;line-height:1.65}
}
/* Book purchase and author portrait. */
.header nav>a.nav-read{padding:11px 24px;border:1px solid var(--gold)}
.header nav>a.nav-read:hover{border-color:var(--gold)}
.book-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.book-actions>.button{min-height:56px}
.book-actions>.button-outline{font-size:14px;padding:16px 21px;gap:21px;white-space:nowrap}
.book-actions>.button-amazon{gap:12px;padding:14px 19px 17px;background:#ffc361;color:#141921;border:1px solid #edb051;border-radius:3px;white-space:nowrap;box-shadow:0 4px 15px #0002}
.book-actions>.button-amazon:hover{background:#ffd18a;box-shadow:0 5px 20px #0003}
.button-amazon>.amazon-label{font-family:var(--sans);font-size:10px;line-height:1.2;letter-spacing:.17em;text-transform:uppercase}
.button-amazon>.amazon-wordmark{font-family:Arial,sans-serif;font-size:23px;font-weight:700;letter-spacing:-1px;line-height:1;position:relative;display:inline-block}
.amazon-wordmark svg{position:absolute;width:54px;height:11px;left:6px;top:21px}
.book-formats{font-size:12px;line-height:1.8;opacity:.85;letter-spacing:.025em;margin-top:19px}
.author-inner{display:block;max-width:880px;margin-inline:auto}
.author-copy>p:not(.eyebrow):not(.author-date){font-size:18px;line-height:1.8}
@media(max-width:1100px){.book-actions{gap:12px}}
@media(max-width:760px){.header nav>a.nav-read{font-size:14px}.book-actions{flex-direction:column;gap:14px}.book-actions>.button{width:min(100%,290px)}.book-formats{max-width:320px;margin:18px auto 0;font-size:12px}.author-copy>p:not(.eyebrow):not(.author-date){font-size:17px;line-height:1.8}}

/* Sample and store choices, with each format beside its destination. */
.header{gap:24px}
.header .wordmark{width:260px}
.header nav{gap:23px;font-size:14px}
.nav-actions{display:flex;align-items:center;gap:10px}
.header .nav-actions .button{min-height:42px;padding:11px 17px;gap:10px;white-space:nowrap;font-size:13px}
.nav-amazon,.button-amazon{background:#ffc361;color:#141921;border:1px solid #edb051;border-radius:3px}
.nav-amazon:hover,.button-amazon:hover{background:#ffd18a}
.nav-bn,.button-bn{background:#234c42;color:#fff2d9;border:1px solid #82957a;border-radius:3px}
.nav-bn:hover,.button-bn:hover{background:#306454}
.book{padding-left:6%;padding-right:6%}
.book-inner{max-width:1200px;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:6%}
.book-actions{display:grid;grid-template-columns:minmax(115px,.8fr) repeat(2,minmax(155px,1fr));align-items:start;gap:12px;margin:0 auto;max-width:650px}
.book-actions .button{width:100%;min-height:64px}
.book-actions>.sample-button{font-size:14px;padding:16px 12px;gap:12px;white-space:nowrap}
.purchase-option{min-width:0}
.purchase-option>.button{display:flex;flex-direction:column;gap:7px;padding:10px 12px 16px;white-space:nowrap;box-shadow:0 4px 15px #0002}
.purchase-option .amazon-label,.purchase-option .store-label{font-family:var(--sans);font-size:8px;letter-spacing:.16em;text-transform:uppercase;line-height:1.1}
.purchase-option .amazon-wordmark{font-family:Arial,sans-serif;font-size:23px;font-weight:700;letter-spacing:-1px;line-height:1;position:relative}
.purchase-option .bn-wordmark{font-family:var(--serif);font-size:20px;line-height:1.1;letter-spacing:-.035em}
.purchase-option .book-formats{font-size:10px;line-height:1.8;opacity:.9;letter-spacing:0;margin:10px 0 0;white-space:nowrap}
@media(min-width:761px) and (max-width:1200px){
  .header{padding-left:4%;padding-right:4%;gap:15px}
  .header .wordmark{width:215px}
  .header nav{gap:17px;font-size:12px}
  .header .nav-actions .button{padding:11px 12px;font-size:12px}
  .nav-actions{gap:7px}
  .book-inner{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:5%}
  .book-object{width:210px}
}
@media(min-width:761px) and (max-width:980px){
  .header{height:145px;align-items:flex-start;padding-top:22px}
  .header nav{flex-wrap:wrap;justify-content:flex-end;gap:12px 22px;padding-top:8px;max-width:430px}
  .nav-actions{width:100%;justify-content:flex-end}
  .hero-inner{padding-top:185px}
  .book-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .book-actions>.sample-button{grid-column:1/-1;justify-self:center;width:200px;min-height:50px}
}
@media(max-width:760px){
  .header .wordmark{width:235px}
  .header nav{font-size:20px;gap:14px}
  .header .nav-read{margin-top:0}
  .nav-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:390px;margin-top:12px;gap:12px}
  .header .nav-actions .nav-read{grid-column:1/-1}
  .header .nav-actions .button{min-height:48px;font-size:13px;padding:12px;gap:8px}
  .book-inner{grid-template-columns:1fr;gap:36px}
  .book-object{width:205px}
  .book-actions{grid-template-columns:1fr;gap:20px;max-width:290px}
  .book-actions>.sample-button{width:100%;min-height:56px}
  .purchase-option>.button{min-height:66px}
  .purchase-option .book-formats{font-size:12px;margin-top:9px}
}
@media(max-width:380px){.header .wordmark{width:215px}}

/* A signpost into the playable world, beneath the story synopsis. */
.world-entry{display:flex;flex-direction:column;align-items:center;width:min(100%,460px);margin:34px auto 0;padding:0 16px 8px;border-radius:4px}
.world-entry img{width:360px;max-width:100%;height:auto;filter:drop-shadow(0 8px 12px #0008) drop-shadow(0 0 12px #ffd65a9e) drop-shadow(0 0 30px #ffcf454d);transform:rotate(-2deg);transition:transform .3s,filter .3s}
.world-entry:hover img,.world-entry:focus-visible img{transform:rotate(0deg) translateY(-4px);filter:drop-shadow(0 10px 14px #0009) drop-shadow(0 0 16px #ffdc6acc) drop-shadow(0 0 42px #ffd34d73)}
.world-entry:focus-visible{outline:2px solid #ffdc6a;outline-offset:8px}
@media(prefers-reduced-motion:reduce){.world-entry img{transition:none}.world-entry:hover img,.world-entry:focus-visible img{transform:rotate(-2deg)}}
.world-entry-title{font-size:21px;color:var(--gold);margin-top:10px;line-height:1.4}
.world-entry-title>span{margin-left:9px}
.world-entry-description{font-size:15px;color:#e2ddd0;line-height:1.6;margin-top:7px;text-wrap:balance}
.parent-note-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 21px;margin:0 0 21px;border:1px solid #e18a7a;border-radius:30px;background:#a43c33;color:#fff3e3;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.035em;box-shadow:0 3px 14px #5c151d40;transition:background .2s,border-color .2s}
.parent-note-button:hover{background:#bd493e;border-color:#f2ad98}
.parent-dialog{width:min(660px,calc(100% - 32px));max-height:90svh;overflow:auto}
.parent-note-body{padding:34px 42px 40px}
.parent-note-body h2{font-size:35px;line-height:1.15;letter-spacing:-.035em;margin-bottom:24px;color:#552923}
.parent-note-body p{font-size:18px;line-height:1.7;margin:17px 0 0}
.parent-note-body .parent-signature{margin-top:24px;font-style:italic}
.parent-note-body .button{margin-top:26px;font-size:16px}
.shop-link{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:7px 0;border-bottom:1px solid #d9af7459;color:var(--gold);font-size:16px;line-height:1.5}
.shop-link:hover{color:#f1d3a4;border-color:var(--gold)}
.header nav{gap:20px}
.header nav>a{white-space:nowrap}
@media(min-width:981px) and (max-width:1200px){.header nav{gap:13px}.header .wordmark{width:205px}.header .nav-actions .button{padding-left:11px;padding-right:11px}}
@media(min-width:761px) and (max-width:980px){.header nav{gap:12px 19px}}
@media(max-width:760px){
  .world-entry{margin-top:27px;padding-left:0;padding-right:0}
  .world-entry img{width:310px}
  .world-entry-title{font-size:20px}
  .world-entry-description{font-size:14px;max-width:290px}
  .parent-note-button{margin-bottom:20px;min-height:44px}
  .parent-note-body{padding:27px 23px 30px}
  .parent-note-body h2{font-size:30px;margin-bottom:20px}
  .parent-note-body p{font-size:17px;line-height:1.65}
  .header nav{gap:14px}
}