/* ============================================================ The Book of Anything - The Living Tome (book.css) Shared stylesheet for the generated /book/ site. Loads AFTER ../_shared/styles.css (the site design system): site tokens (--gold, --cyan, --stone-line, --card-line, ...) come from there; this file carries only the book's own layer. Mood is driven by attributes read by mood-engine.js. Human/ancient voice = warm gold. Narrator/AI voice = cool cyan. ============================================================ */ :root{ --desk:#0a0a12; --serif:"Iowan Old Style","Palatino Linotype","Palatino","Book Antiqua",Georgia,"Times New Roman",serif; --sans:ui-sans-serif,"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --bmono:ui-monospace,"SFMono-Regular","Cascadia Code",Consolas,monospace; /* mood vars, set per page by mood-engine.js */ --accent:#b8925a; --edge:#d7c9a8; --glow:#efe3c4; --ground:#efe7d6; --bink:#2b2419; --amb:0.6; --motif-op:0.10; --pulse:7s; --tdur:2500ms; --reading-size:1.16rem; --rail-w:264px; } /* body keeps the site's sans (so the shared header/nav match exactly); the reading surfaces opt into the book serif themselves */ body.book-body{background:var(--desk); min-height:100vh; min-height:100dvh; overflow-x:hidden} .leaf{font-family:var(--serif)} .leaf,.leaf p{color:var(--bink)} button{font-family:inherit; cursor:pointer} :focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px} img{max-width:100%} /* enhanced scrollbars — the site's thin stone->gold bars (matching _shared/comments.css) on every scroll surface in the reader, replacing the OS-default chunky bars: contents rail, reading rail, settings popout, page (Gortiva, 2026-07-06) */ *{scrollbar-width:thin; scrollbar-color:rgba(90,61,28,.9) transparent} ::-webkit-scrollbar{width:8px; height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(90,61,28,.9); border-radius:99px} ::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)} .desk{position:fixed; inset:0; z-index:0; background:radial-gradient(120% 90% at 50% -10%, #1b1b2c 0%, var(--desk) 55%, #050508 100%)} .desk::after{content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(1px 1px at 20% 30%, rgba(232,184,75,.35), transparent), radial-gradient(1px 1px at 70% 60%, rgba(232,184,75,.25), transparent), radial-gradient(1px 1px at 45% 80%, rgba(255,255,255,.15), transparent), radial-gradient(1px 1px at 85% 20%, rgba(69,214,223,.2), transparent)} /* mood stardust (Visual Resonance's particles, translated to a reading whisper) */ #dust{position:fixed; inset:0; z-index:1; pointer-events:none} /* ============ SITE CHROME on book pages ============ The real site header, UNMODIFIED — same banner, same proportions, same mobile behavior as research/ and your-thoughts/ (the flawless match). .wm-h1 mirrors styles.css `.wordmark h1` so the chapter title can stay the page's single H1 (deliberate small duplication for a11y). */ .wordmark .wm-h1{ display:block; font-size:clamp(22px,4.4vw,40px);font-weight:800;letter-spacing:2px;line-height:1; background:linear-gradient(180deg,#FBE7A6 0%,#E8B84B 45%,#9c6e22 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold); text-shadow:0 1px 0 rgba(0,0,0,.3)} .wordmark a{text-decoration:none} /* ===================== LANDING (index) ===================== */ .hero{position:relative; z-index:2; min-height:calc(100vh - 210px); min-height:calc(100dvh - 210px); overflow:hidden} .hero-art-bg{position:absolute; inset:0; z-index:0; background-position:center center; background-size:cover; background-repeat:no-repeat; filter:blur(36px) brightness(.5) saturate(1.15); transform:scale(1.15)} .hero-art{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center 42%} @media (min-aspect-ratio:1/1){ .hero-art{object-fit:contain; object-position:center center} } .hero-panel{position:absolute; left:0; right:0; bottom:0; z-index:3; max-height:46dvh; overflow-y:auto; text-align:center; padding:3.4rem clamp(1rem,4vw,2rem) 1.5rem; background:linear-gradient(180deg, transparent, rgba(5,7,13,.62) 30%, rgba(3,4,9,.94)); scrollbar-width:thin} .hero-panel::before{content:""; position:absolute; left:50%; top:1.4rem; transform:translateX(-50%); width:46px; height:2px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.55} .eyebrow{font-family:var(--sans); text-transform:uppercase; letter-spacing:.32em; font-size:.66rem; color:#b7a98a; font-weight:600} .hero-panel .lede{font-family:var(--serif); max-width:46ch; margin:.8rem auto; color:#c8bda3; font-size:1rem; line-height:1.55} .hero-panel .lede b{color:#e7d9b8; font-weight:600} .btn-open{display:inline-block; font-family:var(--sans); letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; font-weight:600; color:#1a1206; text-decoration:none; background:linear-gradient(#f0cf7c,#d9a94a); border:1px solid #b98c34; padding:.85em 1.8em; border-radius:2px; box-shadow:0 6px 18px -6px rgba(217,169,74,.6); transition:transform .15s, box-shadow .15s} .btn-open:hover{transform:translateY(-2px); box-shadow:0 10px 24px -6px rgba(217,169,74,.75)} /* Continue Reading: appears only when a saved position exists (mood-engine) */ .btn-continue{display:none; margin-left:.7rem; font-family:var(--sans); letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; font-weight:600; color:var(--cyan); text-decoration:none; background:rgba(69,214,223,.08); border:1px solid rgba(69,214,223,.45); padding:.85em 1.5em; border-radius:2px; box-shadow:0 0 18px -8px rgba(69,214,223,.7); transition:transform .15s, box-shadow .15s} .btn-continue:hover{transform:translateY(-2px); box-shadow:0 0 24px -6px rgba(69,214,223,.8)} .btn-continue .bc2{display:block; font-size:.56rem; letter-spacing:.18em; color:#8fc9ce; margin-top:.25em; text-transform:none} .hero-about{font-family:var(--serif); margin:1rem auto 0; padding-top:.9rem; border-top:1px solid rgba(232,184,75,.16); max-width:52ch; color:#a99e86; font-size:.82rem; line-height:1.55} .six{display:flex; flex-wrap:wrap; gap:.3rem .55rem; justify-content:center; margin:.65rem 0 .1rem; font-family:var(--sans); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:#8f846c} .hero-links{margin-top:.8rem; font-family:var(--sans); font-size:.66rem; letter-spacing:.08em} .hero-links a{color:#c9a86a; text-decoration:none; margin:0 .5rem} .hero-links a:hover{text-decoration:underline} /* ===================== TABLE OF CONTENTS (landing) ===================== */ .toc{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:clamp(2rem,6vw,4rem) 1.25rem 5rem} .toc h1,.toc h2{font-family:var(--serif); font-variant:small-caps; letter-spacing:.05em; color:#efe3c4; font-size:1.6rem; font-weight:600; text-align:center; margin:0 0 .3rem} .toc .sub{text-align:center; color:#9b8f76; font-family:var(--sans); font-size:.78rem; margin-bottom:2.2rem} .toc-part{margin-bottom:1.6rem} .toc-part h3{font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em; font-size:.66rem; color:#8f846c; margin:0 0 .55rem; padding-bottom:.35rem; border-bottom:1px solid rgba(255,255,255,.08)} .toc-row{display:flex; align-items:center; gap:.7rem; padding:.42rem .5rem; border-radius:5px; text-decoration:none; color:#d9cdb0; transition:background .15s} .toc-row:hover{background:rgba(255,255,255,.05)} .toc-sw{width:10px; height:26px; border-radius:2px; flex:0 0 auto} .toc-num{font-family:var(--bmono); font-size:.72rem; color:#8f846c; width:2.4em; text-align:right; flex:0 0 auto; font-variant-numeric:tabular-nums} .toc-title{font-family:var(--serif); font-size:1.02rem} .toc-row.narrator .toc-title{color:#cfeef0} /* ===================== LANDING: THE LIBRARY (wide screens) ===================== The landscape plate becomes the room: the chapters live in a glass window over the left shelves, the book's own window sits over the right, and the tome stays clear in the middle with the way in beneath it. Under 1020px the landing falls back to the cover hero + scrolling contents above. */ .lib{display:none} @media (min-width:1020px){ body.landing .hero, body.landing .toc{display:none} .lib{position:relative; z-index:2; display:block; overflow:hidden} .lib-bg{position:absolute; inset:0; /* css-relative: /book/assets/ -> site /images/ */ background:url('../../images/BookLibraryHero_web.jpg') center 38%/cover no-repeat} .lib-veil{position:absolute; inset:0; background: linear-gradient(180deg, rgba(5,5,10,.46) 0%, rgba(5,5,10,.08) 22%, rgba(5,5,10,.05) 68%, rgba(5,5,10,.5) 100%)} .lib-grid{position:relative; display:grid; grid-template-columns:minmax(300px,392px) 1fr minmax(300px,392px); gap:clamp(1.2rem,2.4vw,2.6rem); box-sizing:border-box; height:calc(100vh - 202px); height:calc(100dvh - 202px); min-height:620px; max-height:1080px; max-width:1760px; margin:0 auto; padding:clamp(1.1rem,2vh,2rem) clamp(1.2rem,2.6vw,3rem)} .lib-win{display:flex; flex-direction:column; min-height:0; border-radius:14px; background:linear-gradient(160deg, rgba(69,214,223,.13) 0%, rgba(11,11,20,.86) 40%, rgba(155,93,229,.12) 100%); border:1px solid var(--card-line); box-shadow:0 12px 48px rgba(0,0,0,.55), inset 0 0 60px -20px rgba(69,214,223,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)} .lw-head{flex:0 0 auto; padding:1.05rem 1.25rem .85rem; border-bottom:1px solid rgba(255,255,255,.08)} .lw-eyebrow{display:block; font-family:var(--sans); text-transform:uppercase; letter-spacing:.3em; font-size:.68rem; font-weight:600; color:var(--gold)} .lw-count{display:block; margin-top:.4rem; font-family:var(--sans); font-size:.64rem; letter-spacing:.06em; color:#9b8f76} .lw-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; padding:1rem 1.25rem 1.3rem; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent} .lib .toc-part{margin-bottom:1.3rem} .lib-center{display:flex; align-items:flex-end; justify-content:center; min-height:0; padding-bottom:clamp(.6rem,3.5vh,2.6rem)} .lib-cta{display:flex; flex-direction:column; align-items:center; gap:.85rem} .lib-cta .btn-open{font-size:.9rem; padding:1em 2.4em; box-shadow:0 10px 30px -6px rgba(217,169,74,.65), 0 0 44px -10px rgba(69,214,223,.35)} .lib-cta .btn-continue{margin-left:0} .lib-info .lw-lede{font-family:var(--serif); color:#e7d9b8; font-size:1.04rem; line-height:1.6; margin:.2rem 0 .9rem} .lib-info .lw-body{font-family:var(--serif); color:#c8bda3; font-size:.95rem; line-height:1.65; margin:0 0 1.1rem} .lib-info .lw-body b{color:#e7d9b8; font-weight:600} .lw-rule{height:1px; margin:1.05rem 0; background:linear-gradient(90deg, transparent, rgba(232,184,75,.28), transparent)} .lw-feats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem} .lw-feats li{font-family:var(--sans); font-size:.8rem; line-height:1.55; color:#a99e86; padding-left:1.05rem; position:relative} .lw-feats li::before{content:""; position:absolute; left:0; top:.52em; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px rgba(69,214,223,.8)} .lw-feats li b{color:#d9cdb0; font-weight:600} .lw-six{font-family:var(--sans); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#8f846c; line-height:1.9} .lw-links{margin-top:1.15rem; display:flex; gap:1.2rem; flex-wrap:wrap; font-family:var(--sans); font-size:.7rem; letter-spacing:.08em} .lw-links a{color:#c9a86a; text-decoration:none} .lw-links a:hover{text-decoration:underline} } /* ===================== READER LAYOUT ===================== */ /* shell: [site header][ rails+stage ][console] as one column */ body.paged{height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column} body.paged .book-hdr,body.paged .console{flex:0 0 auto} .reader-row{position:relative; z-index:2; display:flex; align-items:stretch; gap:0; flex:1 1 auto; min-height:0} body:not(.paged) .reader-row{min-height:calc(100dvh - 210px)} .stage{position:relative; display:flex; align-items:flex-start; justify-content:center; flex:1 1 auto; min-width:0; padding:clamp(.8rem,2.5vw,2rem) 1rem 1.2rem; transition:background var(--tdur) ease; touch-action:pan-y} body.paged .stage{min-height:0; overflow-y:auto; overflow-x:hidden} body.paged.compact .stage{align-items:center} .ambient-glow{position:fixed; inset:0; z-index:1; pointer-events:none; background: radial-gradient(46% 38% at 38% 40%, var(--glow) 0%, transparent 72%), radial-gradient(40% 34% at 64% 52%, var(--glow) 0%, transparent 76%); opacity:calc(var(--amb) * .5); transition:opacity var(--tdur) ease, background var(--tdur) ease; animation:breathe var(--pulse) ease-in-out infinite} @keyframes breathe{ 0%,100%{opacity:calc(var(--amb) * .32); transform:translateX(-1.5%) scale(1)} 50%{opacity:calc(var(--amb) * .6); transform:translateX(1.5%) scale(1.04)}} .page{position:relative; z-index:3; width:min(880px,100%); background:var(--ground); color:var(--bink); border-radius:3px; padding:clamp(1.7rem,4.5vw,3.6rem) clamp(1.4rem,5vw,3.8rem); box-shadow:0 24px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.04); overflow:hidden; animation:pagein .6s ease both; perspective:1600px; touch-action:pan-y} @keyframes pagein{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}} .page::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--edge)} .page::after{content:""; position:absolute; right:0; top:0; bottom:0; width:6px; background:var(--edge); opacity:.6} body.paged .page{overflow:visible; animation:none} /* the folio: the page number printed on the sheet's top-right corner */ .pageno{position:absolute; top:.85rem; right:1.15rem; z-index:2; font-family:var(--sans); font-size:.62rem; letter-spacing:.14em; font-variant-numeric:tabular-nums; color:var(--accent); opacity:.75; pointer-events:none} body:not(.paged) .pageno{display:none} /* the leaf tilt on a page turn (skipped under reduced motion) */ .leaf{transform-origin:left center} .leaf.turn-f{animation:turnF .26s ease-out} .leaf.turn-b{animation:turnB .26s ease-out} @keyframes turnF{from{opacity:.25; transform:rotateY(-7deg)} to{opacity:1; transform:none}} @keyframes turnB{from{opacity:.25; transform:rotateY(7deg)} to{opacity:1; transform:none}} .ch-eyebrow{font-family:var(--sans); text-transform:uppercase; letter-spacing:.26em; font-size:.62rem; color:var(--accent); font-weight:700} .ch-title{font-size:clamp(1.6rem,4.6vw,2.3rem); line-height:1.14; margin:.35rem 0 1.3rem; text-wrap:balance; font-weight:600; letter-spacing:.01em} .ch-rule{height:2px; width:70px; background:var(--accent); margin-bottom:1.5rem; opacity:.8} .prose{font-size:var(--reading-size); line-height:1.6; max-width:70ch; margin-left:auto; margin-right:auto} .prose p{margin:0 0 1.15em} .prose .dropcap{float:left; font-size:3.3em; line-height:.82; padding:.02em .12em 0 0; color:var(--accent); font-weight:600} .prose h3.sub{font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:var(--accent); margin:2rem 0 .8rem; font-weight:700} .prose .attrib{font-style:italic; color:#8a7f6a; font-size:.95rem; margin-top:1.4rem} .prose em{font-style:italic} .prose.narrator{border-left:2px solid var(--cyan); padding-left:1.4rem; margin-left:-.2rem} .prose.narrator .dropcap{color:var(--cyan)} .prose.narrator .attrib{color:var(--cyan)} .bpage-sep{display:flex; align-items:center; gap:1rem; max-width:70ch; margin:2.6rem auto 2.4rem; font-family:var(--sans); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:#a4906c} .bpage-sep::before,.bpage-sep::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(120,95,45,.4),transparent)} body.night .bpage-sep{color:#6f6752} body.night .bpage-sep::before,body.night .bpage-sep::after{background:linear-gradient(90deg,transparent,rgba(180,170,150,.22),transparent)} body.paged .bpage-sep{display:none} /* margin motifs */ .motif{position:absolute; z-index:2; color:var(--accent); opacity:var(--motif-op); pointer-events:none} .motif svg{display:block; width:100%; height:100%} .motif.m-tl{top:-6px; left:-6px; width:130px; height:130px} .motif.m-br{bottom:-6px; right:-6px; width:150px; height:150px} .drift{animation:drift 14s ease-in-out infinite alternate} @keyframes drift{from{transform:translateY(0)} to{transform:translateY(8px)}} /* turn zones: absolute inside .reader-row, so they always span exactly the space between the header and the console whatever their heights; in focus mode a center strip toggles the minimal chrome instead of turning */ /* the zones are pass-through: tap/swipe is handled on the stage so scrolling over them still scrolls the page (they no longer trap the gesture) */ .turnzone{position:absolute; top:0; bottom:0; z-index:4; pointer-events:none} .turnzone.left{left:0; width:32%} .turnzone.right{right:0; width:38%} .turnzone.center{left:32%; width:30%; display:none; cursor:default} body.focus .turnzone.left{width:30%} body.focus .turnzone.center{display:block} body.focus .turnzone.right{left:60%; right:0; width:auto} body:not(.paged) .turnzone{display:none} @media (min-width:1180px){ body:not(.focus) .turnzone.left{left:var(--rail-w)} body:not(.focus) .turnzone.right{right:var(--rail-w)} } /* ===================== SIDE RAILS (desktop) ===================== */ .rail{display:none; position:relative; z-index:5; flex:0 0 var(--rail-w); min-height:0; font-family:var(--sans); color:#cbbfa6} @media (min-width:1180px){ .rail{display:flex; flex-direction:column} } .rail-inner{margin:.9rem .8rem; padding:1rem .95rem 1.1rem; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:rgba(12,12,24,.55); border:1px solid var(--card-line); border-radius:14px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 0 60px -20px rgba(69,214,223,.06)} .rail h2{font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:.62rem; color:#9b8f76; margin:0 0 .7rem; font-weight:700} /* contents rail: every chapter, mood swatch, read tick; current gets the 3px left bar (the sitewide Card Standard, carved to rail size) */ .rail-toc .rows{overflow-y:auto; min-height:0; scrollbar-width:thin; padding-right:2px} .rail-part{margin:0 0 .8rem} .rail-part h3{font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:#8f846c; margin:0 0 .3rem; font-weight:600} .rrow{display:flex; align-items:center; gap:.5rem; padding:.28rem .45rem .28rem .5rem; border-radius:6px; border-left:3px solid transparent; text-decoration:none; color:#c9bda2; font-size:.8rem; line-height:1.3; transition:background .15s} .rrow:hover{background:rgba(255,255,255,.05); color:#efe3c4} .rrow .sw{width:7px; height:18px; border-radius:2px; flex:0 0 auto} .rrow .rnum{font-family:var(--bmono); font-size:.62rem; color:#8f846c; width:1.9em; text-align:right; flex:0 0 auto} .rrow .rtl{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .rrow .tick{flex:0 0 auto; font-size:.6rem; color:#7c725d; opacity:0} .rrow.read .tick{opacity:.9; color:var(--gold)} .rrow.cur{border-left-color:var(--accent); background:rgba(255,255,255,.06); color:#f2ecdc} .rrow.narrator .rtl{color:#aadde2} /* the reading rail */ .rail-read .pos{margin-bottom:1rem} .rail-read .pos .p1{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:#8f846c} .rail-read .pos .p2{font-family:var(--serif); font-variant:small-caps; letter-spacing:.03em; color:#efe3c4; font-size:1.05rem; line-height:1.3; margin:.2rem 0 .45rem} .rail-read .pos .pagebig{font-family:var(--bmono); font-variant-numeric:tabular-nums; color:var(--gold); font-size:1.5rem; letter-spacing:.04em} .rail-read .pos .pagebig small{font-size:.7rem; color:#9b8f76; letter-spacing:.1em} .rail-read .pos .bkm{font-size:.62rem; color:#7fb9be; margin-top:.35rem; letter-spacing:.04em} .qt{display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin:0 0 1rem} .qt button{display:flex; align-items:center; justify-content:center; gap:.4rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#cbbfa6; padding:.5em .4em; border-radius:7px; font-size:.68rem; letter-spacing:.04em; transition:background .15s} .qt button:hover{background:rgba(255,255,255,.11)} .qt button.on{background:rgba(69,214,223,.13); border-color:rgba(69,214,223,.45); color:var(--cyan)} .rail-btn{display:block; width:100%; text-align:center; background:rgba(232,184,75,.1); border:1px solid rgba(232,184,75,.4); color:#f0dca6; padding:.6em .5em; border-radius:8px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600} .rail-btn:hover{background:rgba(232,184,75,.18)} .rail-read .stones{margin-top:auto; padding-top:1rem} /* ===================== BOTTOM CONSOLE ===================== */ .console{position:sticky; bottom:0; z-index:6; padding:.5rem clamp(.6rem,3vw,1.4rem) .55rem; background:linear-gradient(transparent, rgba(8,8,14,.82) 34%, #06060c); display:flex; flex-direction:column; gap:.45rem} body.paged .console{position:static} /* row 1: a true grid so Prev / the reading / Next stay perfectly centered */ .navrow{display:grid; grid-template-columns:1fr minmax(0,auto) 1fr; align-items:center; gap:.6rem; font-family:var(--sans); color:#cbbfa6} .navrow .nav-btn:first-child{justify-self:start} .navrow .nav-btn:last-child{justify-self:end} .nav-btn{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#e7d9b8; border-radius:4px; padding:.4em .8em; font-size:.8rem; letter-spacing:.03em; text-decoration:none; white-space:nowrap} .nav-btn:hover{background:rgba(255,255,255,.13)} .nav-btn.disabled{opacity:.35; pointer-events:none} .nowreading{text-align:center; min-width:0} .nowreading .n1{font-family:var(--serif); font-variant:small-caps; letter-spacing:.04em; color:#efe3c4; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .nowreading .n2{font-size:.58rem; text-transform:uppercase; letter-spacing:.2em; color:#8f846c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums} .nowreading .n2 b{color:#c9b98a; font-weight:600} .iconbtn{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#d9cdb0; width:36px; height:32px; border-radius:6px; display:grid; place-items:center; font-size:.95rem; transition:background .15s} .iconbtn:hover{background:rgba(255,255,255,.12)} .iconbtn.active{background:rgba(69,214,223,.16); border-color:rgba(69,214,223,.5); color:var(--cyan)} .iconbtn .ankh-ic{width:17px; height:17px; display:block; filter:drop-shadow(0 0 4px rgba(69,214,223,.4))} .icons{display:flex; gap:.35rem} @media (min-width:1180px){ .iconbtn.tocbtn{display:none} } /* row 2: icons + the cairn, one centered line */ .consolebar{display:flex; align-items:center; justify-content:center; gap:1.1rem} .stones{display:flex; gap:5px; align-items:center; justify-content:center} .stones .slabel{font-family:var(--sans); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:#7c725d; margin-right:.3rem} .stone{width:11px; height:8px; border-radius:50%/60% 60% 40% 40%; background:#3a3a44; box-shadow:inset 0 -1px 1px rgba(0,0,0,.5); transition:background .5s, box-shadow .5s} .stone.laid{background:linear-gradient(#d9cdb0,#9c9280); box-shadow:0 0 6px rgba(232,184,75,.4)} @media (min-width:1180px){ .console .stones{display:none} } /* ===================== AEON POPOUTS ===================== The site's glass idiom (cyan into violet over deep space) + the locked Aeon close mark (32px rounded shadow box, stone-line border, cyan breath), inherited from _shared/comments.css .yt-close. */ .scrim{position:fixed; inset:0; z-index:19; background:rgba(4,4,8,.55); opacity:0; pointer-events:none; transition:opacity .3s} .scrim.on{opacity:1; pointer-events:auto} .boa-pop{position:fixed; z-index:20; left:50%; top:50%; transform:translate(-50%,-50%) scale(.97); width:min(430px,calc(100vw - 28px)); max-height:min(78dvh,700px); display:flex; flex-direction:column; background:linear-gradient(160deg,rgba(69,214,223,.16) 0%,rgba(11,11,20,.97) 40%,rgba(155,93,229,.15) 100%); border:1px solid var(--card-line); border-radius:14px; box-shadow:0 12px 48px rgba(0,0,0,.6), inset 0 0 60px -20px rgba(69,214,223,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; pointer-events:none; transition:opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1); font-family:var(--sans); color:#d9cdb0} .boa-pop.on{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)} .boa-pop .pop-head{flex:0 0 auto; padding:1.05rem 3.4rem .65rem 1.25rem} .boa-pop .pop-head h2{font-family:var(--serif); font-variant:small-caps; letter-spacing:.05em; color:#efe3c4; font-size:1.2rem; margin:0} .boa-pop .pop-body{flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; padding:.2rem 1.25rem 1.4rem} .boa-close{position:absolute; top:12px; right:12px; width:32px; height:32px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:0; z-index:5; background:rgba(10,10,18,.62); border:1px solid var(--stone-line); border-radius:9px; color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer; box-shadow:0 3px 14px rgba(0,0,0,.5); transition:color .16s ease, border-color .16s ease, box-shadow .2s ease, transform .16s ease} .boa-close:hover{color:var(--ink); border-color:var(--cyan); box-shadow:0 3px 16px rgba(0,0,0,.55), 0 0 12px rgba(69,214,223,.3)} .boa-close:active{transform:scale(.94)} @media (prefers-reduced-motion:reduce){.boa-close{transition:none}.boa-close:active{transform:none}} /* settings controls inside the popout */ .set{margin-bottom:1.3rem} .set>label{display:block; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:#9b8f76; margin-bottom:.5rem; font-weight:600} .segbtns{display:flex; gap:.35rem; flex-wrap:wrap} .segbtns button{flex:1; min-width:60px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#cbbfa6; padding:.5em .3em; border-radius:6px; font-size:.76rem} .segbtns button.sel{background:rgba(232,184,75,.16); border-color:rgba(232,184,75,.55); color:#f0dca6; font-weight:600} input[type=range]{width:100%; accent-color:var(--gold)} .rangeval{float:right; color:#cbbfa6; font-variant-numeric:tabular-nums} .inks{display:flex; gap:.5rem} .ink-sw{width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer} .ink-sw.sel{border-color:#fff} .boa-pop .hint{font-size:.71rem; line-height:1.5; color:#8f846c; margin-top:.3rem} /* contents popout rows reuse the rail row styles */ .boa-pop .rail-part h3{color:#8f846c} /* Desktop: float the popout in the lower-left over the contents rail instead of dead-center over the page, shrink it, and lighten the scrim so the book stays visible while you adjust settings (Gortiva, 2026-07-06). */ @media (min-width:1180px){ .boa-pop{ left:14px; right:auto; top:auto; bottom:84px; width:min(260px,19vw); max-height:min(56dvh,500px); transform-origin:bottom left; transform:translateY(10px) scale(.98); } .boa-pop.on{ transform:translateY(0) scale(1); } .scrim{ background:rgba(4,4,8,.22); } } /* ===================== FOCUS MODE ===================== Just the book. Every bar gone; a faint page chip; tap the page center to breathe the minimal chrome back in. */ body.focus .book-hdr, body.focus .console, body.focus .rail{display:none} body.focus .stage{padding:.6rem .6rem 2.2rem} body.focus .page{width:min(880px,100%)} .focus-chip{position:fixed; left:50%; bottom:12px; transform:translateX(-50%); z-index:21; display:none; font-family:var(--bmono); font-variant-numeric:tabular-nums; font-size:.66rem; letter-spacing:.18em; color:#9b8f76; background:rgba(8,8,14,.55); border:1px solid rgba(255,255,255,.09); border-radius:999px; padding:.34em 1em; pointer-events:auto; cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)} body.focus .focus-chip{display:block} /* the way out is always visible: a labeled pill, full-strength on hover/peek */ .focus-x{position:fixed; top:12px; right:12px; z-index:22; height:38px; box-sizing:border-box; display:none; align-items:center; justify-content:center; gap:.45em; padding:0 1em 0 .85em; background:rgba(10,10,18,.72); border:1px solid var(--stone-line); border-radius:999px; color:var(--ink-soft); font-size:15px; line-height:1; cursor:pointer; box-shadow:0 3px 14px rgba(0,0,0,.5); opacity:.62; transition:opacity .25s, color .16s, border-color .16s; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)} .focus-x .fx-label{font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase} body.focus .focus-x{display:flex} body.focus.chrome-peek .focus-x{opacity:1} .focus-x:hover{opacity:1; color:var(--ink); border-color:var(--cyan)} /* night void theme */ body.night{--ground:#08080e} body.night .page{box-shadow:0 24px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04)} body.night .leaf,body.night .leaf p{color:var(--bink)} /* about page */ .about-wrap{position:relative; z-index:2; font-family:var(--serif); max-width:640px; margin:0 auto; padding:clamp(2rem,6vw,4rem) 1.35rem 5rem; color:#c3b89f; font-size:1.02rem; line-height:1.7} .about-wrap h1{font-family:var(--serif); font-variant:small-caps; color:#efe3c4; font-size:1.9rem; margin-bottom:1.4rem} .about-wrap h2{font-family:var(--sans); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:#9b8f76; margin:2rem 0 .6rem} .about-wrap b{color:#efe3c4} .about-wrap .cy{color:var(--cyan)} .about-wrap a{color:var(--gold)} /* reduced motion */ body.reduced .page,body.reduced .ambient-glow,body.reduced .drift,body.reduced .stage, body.reduced .leaf.turn-f,body.reduced .leaf.turn-b{animation:none !important; transition:none !important} @media (prefers-reduced-motion:reduce){ .page,.ambient-glow,.drift,.leaf.turn-f,.leaf.turn-b{animation:none !important} } @media (max-width:540px){ .motif.m-tl{width:92px;height:92px} .motif.m-br{width:104px;height:104px} }