/* DNA Design Books: library, home shelf, book page and viewer UI. Uses the site's own colour tokens. */
.books-page{background:var(--black,#070707);color:var(--white,#f7f6f2);min-height:100vh}
.books-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px max(20px,calc((100vw - 1480px)/2));min-height:72px;border-bottom:1px solid var(--line,rgba(255,255,255,.17));background:rgba(7,7,7,.97);position:sticky;top:0;z-index:50}
.books-bar .brand img{display:block;width:150px;height:48px;object-fit:contain}
.books-bar nav{display:flex;gap:clamp(14px,2.4vw,34px)}
.books-bar nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:#d5d3ce;padding:10px 2px}
.books-bar nav a:hover,.books-bar nav a[aria-current]{color:#fff}
.books-main{padding:clamp(48px,7vw,100px) 0 clamp(60px,8vw,120px)}
.books-title{margin:0 0 clamp(30px,5vw,60px);font-size:clamp(38px,6vw,84px);line-height:.95;letter-spacing:-.05em}
.books-empty{max-width:640px;color:#bbb7b0;line-height:1.7}
.books-empty a,.books-foot a{color:#fff}
.books-foot{padding:34px 0;border-top:1px solid var(--line,rgba(255,255,255,.17));color:#aaa;font-size:13px}
.books-foot p{margin:0}

/* shelf: every book keeps its own real proportions (--r = width / height), sitting on a common baseline */
.books-shelf{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,56px) clamp(24px,3.4vw,50px);align-items:flex-end;margin-top:clamp(34px,5vw,64px);perspective:1400px}
.book-card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;max-width:100%}
.book-card-cover{position:relative;display:block;height:clamp(210px,24vw,330px);aspect-ratio:var(--r,.707);max-width:100%;background:#1a1a1a;border-radius:2px 5px 5px 2px;box-shadow:0 22px 38px -14px rgba(0,0,0,.85),0 3px 6px rgba(0,0,0,.5);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.book-card-cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px 5px 5px 2px}
.book-card-blank{display:grid;place-items:center;height:100%;padding:16px;text-align:center;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;color:#d9c9a8;background:linear-gradient(145deg,#2a2218,#0d0b08);border:1px solid rgba(185,147,86,.5)}
.book-card-spine{position:absolute;inset:0 auto 0 0;width:9%;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.14) 45%,rgba(0,0,0,.0));border-radius:2px 0 0 2px;pointer-events:none}
.book-card:hover .book-card-cover,.book-card:focus-visible .book-card-cover{transform:rotateY(-17deg) translateY(-6px);box-shadow:26px 26px 40px -14px rgba(0,0,0,.9),0 3px 6px rgba(0,0,0,.5)}
.book-card-meta{display:flex;flex-direction:column;gap:4px;max-width:260px}
.book-card-meta small{text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--gold,#b99356)}
.book-card-meta strong{font-size:17px;line-height:1.25}
.book-card-meta em{font-style:normal;font-size:12px;color:#aaa}
.books-all{margin-top:clamp(30px,4vw,54px);display:flex;gap:12px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.book-card-cover{transition:none}.book-card:hover .book-card-cover{transform:none}}
@media(max-width:680px){.books-bar nav{gap:12px}.books-bar nav a{font-size:10px;letter-spacing:.1em}.books-bar .brand img{width:118px}.books-shelf{gap:28px 20px;justify-content:center}.book-card-cover{height:clamp(190px,52vw,260px)}.book-card-meta{max-width:200px}}

/* book page */
.book-preview-banner{margin:0;padding:10px 20px;background:#b99356;color:#111;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.book-hero{padding-top:clamp(18px,3vw,36px)}
.book-hero-head{width:var(--shell,min(1480px,calc(100% - 40px)));margin:0 auto clamp(8px,1.6vw,20px);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.book-hero-head .eyebrow{margin:0;flex-basis:100%}
.book-hero-head h1{margin:0;font-size:clamp(28px,4.2vw,58px);letter-spacing:-.04em;line-height:1}
.book-hero-meta{margin:0;color:#aaa;font-size:14px;letter-spacing:.04em}
.book-stage{position:relative;width:100%;height:clamp(420px,calc(100svh - 190px),1000px);background:radial-gradient(ellipse at 50% 40%,#2a2824 0,#121110 55%,#070707 100%);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;outline:none}
.book-stage canvas{display:block;width:100%;height:100%;outline:none;cursor:grab;touch-action:pan-y}
.book-stage canvas.is-dragging{cursor:grabbing}
.book-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;color:#d5d3ce;font-size:13px;letter-spacing:.14em;text-transform:uppercase;z-index:4;background:rgba(7,7,7,.55);transition:opacity .5s}
.book-loading.is-done{opacity:0;pointer-events:none}
.book-spinner{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--gold,#b99356);animation:book-spin 1s linear infinite}
@keyframes book-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.book-spinner{animation-duration:3s}}
.book-noscript{padding:30px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));position:relative;z-index:6;background:#070707}
.book-noscript p{grid-column:1/-1}.book-noscript img{width:100%;height:auto}

/* controls */
.book-ui{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 12px calc(10px + env(safe-area-inset-bottom));pointer-events:none}
.book-ui>*{pointer-events:auto}
.book-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;padding:6px 8px;background:rgba(7,7,7,.72);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);max-width:100%}
.book-btn{min-width:44px;min-height:44px;padding:0 12px;border:1px solid transparent;background:transparent;color:#f1ede4;cursor:pointer;font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.book-btn:hover:not(:disabled){background:rgba(185,147,86,.28);border-color:var(--gold,#b99356)}
.book-btn:disabled{opacity:.35;cursor:default}
.book-btn[aria-pressed="true"]{background:rgba(185,147,86,.3);border-color:var(--gold,#b99356)}
.book-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.book-counter{min-width:92px;text-align:center;font-size:12px;letter-spacing:.14em;color:#e8e4da}
.book-seek{display:flex;align-items:center;gap:10px;width:min(560px,86vw)}
.book-seek input[type=range]{flex:1;accent-color:#b99356;min-height:28px}
.book-resume{padding:8px 12px;background:rgba(7,7,7,.82);border:1px solid var(--gold,#b99356);font-size:12px;letter-spacing:.06em;color:#f1ede4;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.book-resume button{min-height:36px;padding:0 12px;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.book-hint{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);z-index:5;padding:8px 14px;background:rgba(7,7,7,.7);border:1px solid rgba(255,255,255,.14);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#d5d3ce;transition:opacity .8s;pointer-events:none;text-align:center;max-width:92%}
.book-hint.is-hidden{opacity:0}
.book-effects-note{position:absolute;top:14px;right:14px;z-index:5;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8d8a82}
.book-stage:fullscreen,.book-stage:-webkit-full-screen{height:100%;width:100%}

/* thumbnail strip */
.book-thumbs{position:absolute;left:0;right:0;bottom:0;z-index:6;max-height:46%;overflow:auto;padding:14px 14px calc(14px + env(safe-area-inset-bottom));background:rgba(7,7,7,.94);border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;transform:translateY(100%);transition:transform .35s;visibility:hidden}
.book-thumbs.is-open{transform:none;visibility:visible}
.book-thumbs button{padding:0;border:1px solid rgba(255,255,255,.18);background:#111;cursor:pointer;display:flex;flex-direction:column;color:#bbb;font-size:10px;letter-spacing:.1em}
.book-thumbs button.is-current{border-color:var(--gold,#b99356)}
.book-thumbs img{display:block;width:100%;height:96px;object-fit:contain;background:#1b1b1b}
.book-thumbs span{padding:4px 0;text-align:center}
@media(prefers-reduced-motion:reduce){.book-thumbs{transition:none}.book-hint{transition:none}}

/* flat (no-WebGL / reduced-motion / failure) viewer */
.book-flat{position:absolute;inset:0;display:flex;overflow:auto;padding:14px 14px 130px;z-index:2}
.book-flat-spread{display:flex;align-items:center;justify-content:center;margin:auto;gap:0;box-shadow:0 20px 50px rgba(0,0,0,.7);flex:none}
.book-flat-spread img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#f4f1ea}
.book-flat-spread .is-blank{background:#e9e5db}
.book-flat-note{position:absolute;top:10px;left:14px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8d8a82;z-index:5}

/* info below the stage */
.book-info{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:clamp(30px,6vw,90px);padding-block:clamp(36px,5vw,70px)}
.book-intro{margin:0 0 26px;font-size:clamp(17px,1.7vw,22px);line-height:1.6;color:#d4d1cb;max-width:760px}
.book-actions{display:flex;gap:12px;flex-wrap:wrap}
.book-copy-status{min-height:22px;margin:12px 0 0;color:#8fd19e;font-size:13px}
.book-cta{padding:28px;border:1px solid var(--line,rgba(255,255,255,.17));background:#0e0e0e;align-self:start}
.book-cta p{color:#bbb7b0;line-height:1.6}
.book-cta .eyebrow{margin-bottom:12px}
.book-related{padding-bottom:clamp(50px,7vw,100px)}
@media(max-width:900px){.book-info{grid-template-columns:1fr}.book-stage{height:clamp(380px,calc(100svh - 170px),820px)}.book-btn{min-width:42px;padding:0 9px}.book-counter{min-width:70px}}

@media(max-width:560px){
  .book-bar{gap:2px;padding:4px 4px}
  .book-btn{min-width:36px;min-height:44px;padding:0 4px}
  .book-btn.b-first,.book-btn.b-last,.book-btn.b-zoomout{display:none}
  .book-counter{min-width:64px;font-size:11px;letter-spacing:.08em}
  .book-hint{bottom:auto;top:10px}
  .book-seek{width:92vw}
}

/* progress + continue exploring */
.book-progress{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.08);z-index:5;pointer-events:none}
.book-progress span{display:block;height:100%;width:0;background:var(--gold,#b99356);transition:width .5s}
.book-explore{position:absolute;inset:auto 0 0 0;z-index:7;margin:0 auto;max-width:min(980px,96%);bottom:calc(112px + env(safe-area-inset-bottom));padding:18px 20px 14px;background:rgba(7,7,7,.93);border:1px solid rgba(185,147,86,.55);backdrop-filter:blur(10px)}
.book-explore[hidden]{display:none}
.book-explore .eyebrow{margin:0 0 12px;color:var(--gold,#b99356)}
.book-explore-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.book-explore-links a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid rgba(255,255,255,.18);text-decoration:none;color:#f7f6f2;min-height:56px}
.book-explore-links a:hover{border-color:var(--gold,#b99356);background:rgba(185,147,86,.15)}
.book-explore-links small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#aaa69e}
.book-explore-links strong{font-size:15px;line-height:1.25}
.book-explore-dismiss{margin-top:12px;min-height:40px;padding:0 14px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:560px){.book-explore{bottom:calc(100px + env(safe-area-inset-bottom));padding:14px}.book-explore-links{grid-template-columns:1fr 1fr}.book-btn.b-close{min-width:38px}}
@media(prefers-reduced-motion:reduce){.book-progress span{transition:none}}

/* phones and tablets: full-screen reading, rotate tip, compact stage (v2) */
.book-rotate{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;width:max-content;max-width:92%;padding:8px 14px;background:rgba(7,7,7,.8);border:1px solid rgba(185,147,86,.6);color:#f1ede4;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;line-height:1.35;text-align:left;font-family:inherit}
.book-rotate[hidden],.book-exit-fs[hidden]{display:none}
.book-rotate svg,.book-exit-fs svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--gold,#b99356);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.book-stage.has-rotate .book-hint{top:64px;bottom:auto}
.book-exit-fs{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:9;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;background:rgba(7,7,7,.8);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.book-stage.is-immersive{position:fixed;inset:0;width:100%;height:auto!important;z-index:1000;overscroll-behavior:contain;touch-action:none}
.book-stage.is-immersive canvas{touch-action:none}
.book-stage.is-immersive .book-ui{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
html.book-immersive,html.book-immersive body{overflow:hidden;overscroll-behavior:none}
.book-stage.is-compact .book-explore{inset:0;max-width:none;margin:0;overflow:auto;border-width:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.book-stage.is-compact .book-explore-links{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .books-bar{position:static;min-height:44px;padding-top:4px;padding-bottom:4px}
  .books-bar .brand img{height:34px;width:auto}
  .book-hero{padding-top:0}
  .book-hero-head{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .book-stage{height:calc(100svh - 46px);min-height:0}
  .book-btn{min-height:40px}
  .book-hint{bottom:auto;top:8px}
}
/* the one-time analytics notice must never sit on top of the reading controls */
html.book-immersive .dna-notice{display:none!important}
@media(max-height:520px) and (orientation:landscape){.book-view .dna-notice{max-width:min(340px,42vw)!important;left:8px!important;right:auto!important;font-size:11px!important;padding:8px 10px!important}.book-view .dna-notice p{margin-bottom:6px!important}.book-view .dna-notice button,.book-view .dna-notice .dna-notice-opt{min-height:30px!important}}