:root{--night:#030b1e;--blue:#071b3a;--gold:#e0b874;--cream:#f3e6d0;--menu-h:152px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--menu-h)}body{margin:0;color:var(--cream);font-family:Georgia,'Times New Roman',serif;background:var(--night);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 22% 32%,#385c8f40,transparent 32%),radial-gradient(circle at 80% 80%,#a1742822,transparent 34%),radial-gradient(#b9c7ef77 .65px,transparent 1px);background-size:auto,auto,89px 83px}.site-top{height:var(--menu-h);position:fixed;top:0;left:0;width:100%;z-index:50;display:flex;align-items:flex-start;padding:8px 3%;background:linear-gradient(180deg,#020819 1%,#04142ced 75%,#04142cdb);border-bottom:1px solid #cead6477;box-shadow:0 8px 32px #0008}.cup{z-index:2;width:103px;height:105px;flex-shrink:0;display:grid;place-items:center}.cup img{width:96px;height:96px;object-fit:contain}.site-top nav{z-index:2;position:absolute;top:20px;left:50%;transform:translateX(-50%);display:flex;gap:clamp(12px,3vw,48px);white-space:nowrap}.site-top nav a{font-size:clamp(13px,1.6vw,19px);color:var(--gold);text-decoration:none;letter-spacing:.05em}.site-top nav a:hover,.subtle-link:hover,footer a:hover{text-decoration:underline}.brand{position:absolute;top:67px;left:50%;transform:translateX(-50%);width:60%;text-align:center;display:grid;gap:5px;pointer-events:none}.brand span,.eyebrow{color:var(--gold);font-size:10px;letter-spacing:.35em}.brand strong{font-size:clamp(15px,2.1vw,30px);font-weight:400;line-height:1.05}.brand em{font-style:normal;color:var(--gold);white-space:nowrap}.fixed-people{position:absolute;inset:0;pointer-events:none}.fixed-people img{position:absolute;top:14px;width:104px;height:122px;object-fit:cover;border:2px solid #a98b55;border-radius:50% 50% 44% 44%;box-shadow:0 0 23px #f0bc6650}.author-photo{left:130px;object-position:center}.grandpa-photo{right:28px;object-position:center 18%}.intro{min-height:100vh;padding:calc(var(--menu-h) + 12vh) 6% 15vh;display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at 50% 60%,#28518a66 0%,transparent 55%)}.intro-inner{max-width:820px}.intro h1{font-weight:400;font-size:clamp(42px,7vw,100px);line-height:1.07;margin:30px 0}.intro h1 i{color:var(--gold);font-style:normal}.intro p:not(.eyebrow){font-size:clamp(17px,2.1vw,24px);line-height:1.65;color:#e1d9d0}.subtle-link{display:inline-block;margin-top:45px;color:var(--gold);text-decoration:none;font-size:16px}.book{min-height:110vh;scroll-margin-top:var(--menu-h);display:flex;align-items:center;justify-content:center;padding:calc(var(--menu-h) + 28px) 8% 11vh;position:relative;background:radial-gradient(ellipse at 52% 65%,#3a5b9460 0%,transparent 52%),linear-gradient(180deg,transparent,#9671420c 65%,transparent)}.book:nth-of-type(odd){background:radial-gradient(ellipse at 55% 60%,#80623650,transparent 59%)}.book-content{max-width:1080px;width:100%;display:grid;grid-template-columns:minmax(200px,1fr) minmax(240px,420px);align-items:center;gap:clamp(30px,7vw,100px);opacity:0;transform:translateY(65px) scale(.96);filter:blur(8px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1),filter 1s ease}.book.visible .book-content{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}.details h2{font-weight:400;color:var(--gold);font-size:clamp(39px,5vw,69px);line-height:1.05;margin:22px 0}.details p:not(.eyebrow){font-size:clamp(17px,1.7vw,22px);line-height:1.65;max-width:430px}.cover-area{position:relative;margin:auto;width:min(100%,370px);filter:drop-shadow(0 20px 30px #000a)}.cover{display:block;width:100%;aspect-ratio:5/6.7;object-fit:fill;border:1px solid #caa667;box-shadow:0 0 0 7px #0b1535,0 0 0 9px #a88a4c80,0 17px 50px #0009}.placeholder{display:flex;flex-direction:column;justify-content:space-around;text-align:center;align-items:center;padding:32px 12px;background:radial-gradient(ellipse at center,#253b64,#07132b 60%,#050b1b);color:var(--gold)}.placeholder span:first-child{font-size:12px;letter-spacing:.15em}.placeholder strong{font-size:clamp(28px,3vw,42px);font-weight:400;line-height:1.15}.placeholder small{font-size:13px}.gold-mark{font-size:90px;color:#daba78;text-shadow:0 0 25px #dba85e}.download{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);padding:13px 35px;border-radius:40px;border:1px solid var(--gold);color:#fff;background:#071832ec;box-shadow:0 5px 22px #0009;letter-spacing:.07em;text-decoration:none;font-size:17px;transition:background .2s,transform .2s}.download:hover{background:#624621;transform:translateX(-50%) translateY(-4px)}footer{padding:85px 20px 110px;text-align:center;border-top:1px solid #bba06d44;color:#e7dbca}footer span{font-size:40px;color:var(--gold)}footer a{color:var(--gold)}@media(max-width:750px){:root{--menu-h:123px}.site-top{padding:5px}.cup{width:70px;height:73px}.cup img{width:71px;height:71px}.site-top nav{top:18px;left:51%;gap:14px}.site-top nav a{font-size:12px}.fixed-people img{width:60px;height:66px;top:56px}.author-photo{left:11px}.grandpa-photo{right:10px}.brand{width:70%;top:57px}.brand strong{font-size:15px}.brand span{font-size:8px}.book{padding:calc(var(--menu-h) + 28px) 9% 75px;min-height:105vh}.book-content{grid-template-columns:1fr;gap:30px;text-align:center}.details h2{font-size:38px;margin:12px 0}.details p:not(.eyebrow){font-size:16px;max-width:none}.cover-area{max-width:285px}.intro{padding-top:calc(var(--menu-h) + 12vh)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.book-content{opacity:1;transform:none;filter:none;transition:none}}

/* Bibliography v2 visual refinements */
.intro{position:relative;isolation:isolate;min-height:100vh;background:radial-gradient(circle at 50% 62%,#b88c3a37,transparent 20%),radial-gradient(ellipse at 50% 34%,#29538b77,transparent 52%);overflow:hidden}
.intro:before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-radial-gradient(circle at 50% 64%,transparent 0 58px,#dbb66d29 60px,#dbb66d15 61px,transparent 63px);mask-image:linear-gradient(180deg,transparent 12%,black 62%,transparent 97%)}
.hero-orbit{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);font-size:min(38vw,450px);color:#dbb66d0c;pointer-events:none}
.intro h1{font-size:clamp(40px,6vw,82px);font-weight:400}.intro h1 i{font-size:1.04em}.intro-inner{position:relative;z-index:2}
.books-anchor{scroll-margin-top:var(--menu-h)}
.book .cover{height:auto;aspect-ratio:auto;object-fit:contain;max-height:min(70vh,760px);background:#020817}
.book-content{transition:opacity .85s ease,transform 1.05s cubic-bezier(.2,.8,.2,1),filter .85s ease}
.pending{cursor:default;white-space:nowrap;color:#e2ca98;background:#0e1622e8;font-size:13px}.pending:hover{background:#0e1622e8;transform:translateX(-50%)}
.book:nth-child(3n){background:radial-gradient(ellipse at 50% 65%,#9b702b45 0%,transparent 55%)}
.book:nth-child(3n+1){background:radial-gradient(ellipse at 50% 65%,#244a7c66 0%,transparent 55%)}
.book:nth-child(3n+2){background:radial-gradient(ellipse at 50% 65%,#27515d5e 0%,transparent 55%)}
@media(max-width:750px){.book .cover{max-height:49vh}.book{min-height:100svh}.intro h1{font-size:clamp(37px,9vw,62px)}}

/* Version 3: robust fixed portraits and long-title readability */
:root{--menu-h:174px}
.site-top{height:var(--menu-h);isolation:isolate}
.fixed-people{z-index:3;overflow:visible}
.fixed-people img{width:125px;height:138px;top:16px;display:block;object-fit:cover}
.author-photo{left:clamp(120px,13vw,205px)}
.grandpa-photo{right:clamp(14px,3vw,48px)}
.site-top nav{z-index:5;top:18px}
.brand{top:73px;width:min(56%,650px)}
.details h2{font-size:clamp(32px,4.3vw,61px);overflow-wrap:anywhere}
.details h3{font-weight:normal;color:#eed4a5;font-size:clamp(17px,2vw,24px);line-height:1.35}
.details p:not(.eyebrow){font-size:clamp(16px,1.45vw,19px)}
@media(max-width:800px){:root{--menu-h:166px}.site-top nav{top:9px;left:auto;right:8px;transform:none;gap:10px}.site-top nav a{font-size:11px}.cup{width:64px;height:65px}.cup img{width:62px;height:62px}.fixed-people img{width:72px;height:80px;top:77px}.author-photo{left:13px}.grandpa-photo{right:13px}.brand{top:75px;width:calc(100% - 180px)}.brand strong{font-size:clamp(12px,2.3vw,19px);line-height:1.2}.brand em{white-space:normal}.brand span{font-size:8px;letter-spacing:.12em}.book-content{grid-template-columns:1fr}.book{padding-left:7%;padding-right:7%}}
@media(max-width:430px){.brand{width:calc(100% - 170px)}.site-top nav a{font-size:10px}.site-top nav{gap:8px}.intro h1{font-size:clamp(34px,8.5vw,53px)}}

/* v4 — hero is the first, intentionally empty scrolling panel.
   The scene behind every panel stays fixed; book cards scroll over it. */
:root{--menu-h:78px}
html{scroll-padding-top:var(--menu-h)}
body{background:#020815 url('assets/bibliography-hero.jpg') center center / cover fixed no-repeat}
body:before{display:none}
.site-top{height:var(--menu-h);padding:5px 2%;align-items:center;background:linear-gradient(180deg,#021026f5,#051329df);border-bottom:1px solid #d5af6b9c}
.site-top .fixed-people,.site-top .brand{display:none}
.site-top .cup{width:82px;height:68px}
.site-top .cup img{width:73px;height:68px;object-fit:contain}
.site-top nav{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);gap:clamp(18px,5vw,88px)}
.site-top nav a{font-size:clamp(14px,1.7vw,23px)}
.intro,.intro:before{background:none!important;mask-image:none!important}
.intro{position:relative;min-height:100svh;padding:var(--menu-h) 0 0;display:block;overflow:hidden}
.intro .hero-orbit,.intro .intro-inner{display:none}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:#041024e5;color:#f8e5bd;border:1px solid #d5ad6b;border-radius:30px;padding:10px 22px;text-decoration:none;font-size:14px;white-space:nowrap}
.book,.book:nth-of-type(odd),.book:nth-child(3n),.book:nth-child(3n+1),.book:nth-child(3n+2){background:transparent!important;min-height:110svh}
.book-content{padding:clamp(18px,3vw,42px);border:1px solid #d6ac6752;border-radius:18px;background:linear-gradient(105deg,#020a1df0,#06152ce7);box-shadow:0 22px 80px #000a;backdrop-filter:blur(9px)}
.details h2{text-shadow:0 2px 12px #000}
footer{background:#020a1deb}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){:root{--menu-h:65px}.site-top nav{top:50%;right:9px;left:auto;transform:translateY(-50%);gap:12px}.site-top .cup{width:58px;height:55px}.site-top .cup img{width:54px;height:54px}.site-top nav a{font-size:clamp(11px,2.6vw,15px)}.book-content{padding:20px}.book{padding-top:calc(var(--menu-h) + 30px)}.intro{min-height:100svh}}
@media(max-width:650px){body{background-attachment:scroll;background-position:center top;background-size:auto 100svh}body:after{content:'';position:fixed;z-index:-1;inset:0;background:url('assets/bibliography-hero.jpg') center top / auto 100svh no-repeat;pointer-events:none}.book-content{background:#020a1df0}}
@media(prefers-reduced-motion:reduce){.book-content{transition:none;filter:none;transform:none;opacity:1}}


/* v5 — keep the entire title artwork visible BELOW the fixed menu,
   independently of viewport width and height. The soft enlarged layer
   fills extra horizontal space on unusually wide screens. */
:root{--menu-h:78px}
html{scroll-padding-top:var(--menu-h)}
body{background:#020815 !important; min-height:100vh; isolation:isolate}
body::before,body::after{content:"";position:fixed;left:0;right:0;top:var(--menu-h);bottom:0;pointer-events:none;display:block !important}
body::before{z-index:-2;background:#020815 url('assets/bibliography-hero.jpg') center center / cover no-repeat;filter:blur(22px) brightness(.43);transform:scale(1.045)}
body::after{z-index:-1;background:url('assets/bibliography-hero.jpg') center center / contain no-repeat}
.site-top{top:0;z-index:50}
main,footer{position:relative;z-index:1}
.intro{height:100svh;min-height:100svh;padding-top:var(--menu-h)}
/* Keep all book panels translucent so the fixed artwork remains visible. */
.book,.book:nth-of-type(odd),.book:nth-child(3n),.book:nth-child(3n+1),.book:nth-child(3n+2){background:transparent !important}
@media(max-width:800px){:root{--menu-h:65px}}
@media(max-width:650px){body{background:#020815 !important;background-attachment:initial !important}body::before{background-position:center center}body::after{background-position:center center;background-size:contain}}

/* v6: keep long single-word book titles intact (e.g. HETEROLEXICON).
   Avoid the previous overflow-wrap:anywhere that split titles mid-word. */
.details h2 {
  font-size: clamp(24px, 2.7vw, 43px);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
@media (max-width: 800px) {
  .details h2 { font-size: clamp(23px, 5vw, 36px); }
}
@media (max-width: 430px) {
  .details h2 { font-size: clamp(21px, 5.4vw, 27px); }
}

/* v7: unobtrusive animated scroll hint, anchored to the left side of the first scene. */
.finger-cue{position:fixed;z-index:43;left:clamp(12px,3.2vw,62px);bottom:clamp(72px,10vh,130px);display:flex;flex-direction:column;align-items:center;gap:6px;color:#ffe2a0;font:700 clamp(12px,1.25vw,18px) Georgia,serif;letter-spacing:.16em;text-shadow:0 2px 12px #000,0 0 12px #120c05;pointer-events:none;opacity:1;transition:opacity .55s ease}
.pointing-finger{display:block;font-size:clamp(42px,5vw,76px);line-height:1.2;filter:drop-shadow(0 3px 9px #000);animation:bow-finger-bob 1.45s ease-in-out infinite}
.finger-cue.is-hidden{opacity:0}
.finger-cue.is-recalled{opacity:1}
@keyframes bow-finger-bob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(13px)}}
#books-nav{font-weight:600}
.book{scroll-margin-top:calc(var(--menu-h) + 10px)}
@media(max-width:650px){.finger-cue{left:10px;bottom:78px}.pointing-finger{font-size:40px}}
@media(prefers-reduced-motion:reduce){.pointing-finger{animation:none}.finger-cue{transition:none}}
