/* 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}
}