/* ============================================================
   BOOKSHELF + BOOKBOARD · Crea✦Ting design system tokens
   (page-scoped standalone copy; merges into assets/styles.css
   under a banner comment at site-integration time)
   ============================================================ */
:root{
  --paper:#FAF9F5; --paper-deep:#F2EFE8; --paper-card:#FFFFFF;
  --ink:#1A1A18; --ink-soft:#3C3C3A; --ink-muted:#6B6B66; --ink-faint:#A6A39A;
  --ink-line:#DEDACE; --ink-line-2:#CFCABB;
  --gold:#C8972F; --gold-deep:#A2761E; --gold-soft:#E6C679; --gold-wash:#F1E6C7;
  --clay:#B05D40; --clay-deep:#8A4530; --clay-wash:#F0DDD2;
  --ink-surface:#201F1C; --ink-surface-2:#2C2A26;
  --f-display:'Poppins',sans-serif; --f-body:'Hanken Grotesk',sans-serif; --f-mono:'Space Mono',monospace;
  --r-sm:10px; --r-md:16px; --r-pill:999px;
  --shadow-sm:0 2px 10px rgba(26,26,24,.07);
  --shadow-md:0 14px 34px rgba(26,26,24,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ---------- shared chrome ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:26px clamp(20px,4vw,48px) 0}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:.01em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:1px}
.brand .spark{width:.72em;height:.72em;fill:var(--gold);margin:0 1px;transform:translateY(1px)}
.view-link{font-family:var(--f-mono);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--gold-soft);padding-bottom:2px}
.view-link:hover{color:var(--ink)}
.pager{font-family:var(--f-mono);font-size:.82rem;font-weight:700;letter-spacing:.05em;display:flex;gap:14px}
.pager span{color:var(--ink);cursor:default}
.pager .on{color:var(--gold-deep)}
.pager .off{color:var(--ink-faint)}
.eyebrow{font-family:var(--f-mono);font-weight:700;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:.55em}
.eyebrow::before{content:"";width:.85em;height:.85em;background:var(--gold-deep);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 9 C 57 29 71 43 91 50 C 71 57 57 71 50 91 C 43 71 29 57 9 50 C 29 43 43 29 50 9 Z"/></svg>') center/contain no-repeat}
.cue{text-align:center;font-style:italic;color:var(--clay);font-size:.95rem;margin:0;padding:0 20px}
.cue .arr{display:inline-block;animation:cuebob 1.6s ease-in-out infinite;margin-left:.35em}
@keyframes cuebob{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.footer{border-top:1px solid var(--ink-line);padding:26px clamp(20px,4vw,48px);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer .mail{font-family:var(--f-mono);font-size:.85rem;color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--gold-soft)}
.footer small{color:var(--ink-muted)}

/* ---------- shelf view (spine slider) ---------- */
.stage{min-height:100vh;display:flex;flex-direction:column;overflow:hidden;position:relative}
.head{text-align:center;margin-top:clamp(6px,3.2vh,34px);position:relative;z-index:1}
.big{font-family:var(--f-display);font-weight:600;font-size:clamp(2.6rem,8.6vw,6.4rem);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;margin:.18em 0 0;color:var(--ink)}
.shelfwrap{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:clamp(18px,3vh,30px);
  position:relative;z-index:2;margin-top:calc(-1 * clamp(8px,3.4vw,44px));padding-bottom:5.5vh}
.shelfrow{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:26px 28px 4px}
.shelfrow::-webkit-scrollbar{display:none}
.shelf{display:flex;align-items:flex-end;gap:clamp(10px,1.2vw,18px);--bh:clamp(250px,46vh,520px);width:max-content;margin:0 auto}
.book{position:relative;height:calc(var(--bh) * var(--hf,1));width:calc(var(--bh) * var(--sf,.04));flex:0 0 auto;
  perspective:1500px;cursor:pointer;border:0;padding:0;background:none;
  transition:width .8s cubic-bezier(.24,.9,.28,1), transform .8s cubic-bezier(.24,.9,.28,1);
  transform:rotate(var(--tilt,0deg));transform-origin:bottom center;
  filter:drop-shadow(0 16px 10px rgba(26,26,24,.22))}
.book:hover,.book:focus-visible,.book.open{width:calc(var(--bh) * var(--cf,.7));transform:rotate(0);z-index:5}
.book:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}
.b3d{position:absolute;left:0;top:0;height:100%;width:calc(var(--bh) * var(--cf,.7));transform-style:preserve-3d;
  transform-origin:calc(var(--bh) * var(--sf,.04)) 50%;transition:transform .8s cubic-bezier(.24,.9,.28,1)}
.book:hover .b3d,.book:focus-visible .b3d,.book.open .b3d{transform:translateX(calc(-1 * var(--bh) * var(--sf,.04))) rotateY(-90deg)}
.spineface{position:absolute;left:0;top:0;width:calc(var(--bh) * var(--sf,.04));height:100%;backface-visibility:hidden;overflow:hidden}
.spineface img{width:100%;height:100%;object-fit:fill;display:block}
.coverface{position:absolute;left:calc(var(--bh) * var(--sf,.04));top:0;width:calc(var(--bh) * var(--cf,.7));height:100%;
  transform:rotateY(90deg);transform-origin:left center;overflow:hidden;background:var(--paper-card)}
.coverface img{width:100%;height:100%;object-fit:cover;display:block}
.coverface::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(26,26,24,.28)0,rgba(255,255,255,.14)6px,rgba(26,26,24,.10)10px,transparent 22px)}

/* ---------- bookboard view (cover grid) ---------- */
.board{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px) 40px}
.board-head{text-align:center;margin:clamp(10px,3.5vh,40px) 0 clamp(26px,5vh,58px)}
.board-sub{font-style:italic;color:var(--ink-muted);font-size:1rem;margin:10px 0 0}
.brow{margin:0 0 clamp(30px,5vh,54px)}
.brow-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.brow-label{font-family:var(--f-mono);font-weight:700;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.brow-count{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.brow-rail{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:14px 6px 0}
.brow-rail::-webkit-scrollbar{display:none}
.brow-books{display:flex;align-items:flex-end;gap:clamp(14px,1.8vw,26px);--rh:clamp(150px,21vw,236px);
  width:max-content;margin:0 auto;position:relative;padding:0 8px 16px}
.bcard{position:relative;flex:0 0 auto;border:0;padding:0;background:none;cursor:grab;z-index:2;
  height:calc(var(--rh) * var(--hf,1));width:calc(var(--rh) * var(--wf,.76));
  transition:transform .25s ease, filter .25s ease;
  filter:drop-shadow(0 10px 14px rgba(26,26,24,.18))}
.bcard img{width:100%;height:100%;object-fit:cover;display:block;background:var(--paper-card)}
.bcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(26,26,24,.22)0,rgba(255,255,255,.16)3px,rgba(26,26,24,.08)6px,transparent 14px)}
.bcard:hover,.bcard:focus-visible{transform:translateY(-6px);filter:drop-shadow(0 18px 22px rgba(26,26,24,.24));z-index:4}
.bcard:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}
.bcard.dragging{z-index:10;cursor:grabbing;transition:none;
  filter:drop-shadow(0 26px 30px rgba(26,26,24,.32)) brightness(1.03)}
.bcard.settling{transition:transform .35s cubic-bezier(.24,.9,.28,1)}
.brow-glass{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,249,245,.30),rgba(242,239,232,.42));
  -webkit-backdrop-filter:blur(7px) saturate(1.05);backdrop-filter:blur(7px) saturate(1.05);
  border:1px solid rgba(222,218,206,.75);border-radius:8px;
  box-shadow:0 10px 24px rgba(26,26,24,.10), inset 0 1px 0 rgba(255,255,255,.55)}

/* ---------- reader ---------- */
.reader{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  background:rgba(26,26,24,.62)}
.reader.on{display:flex}
.fb-stage{perspective:2800px}
.fbook{position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.35,.12,.22,1);
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.sheet{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;
  transform-style:preserve-3d;transition:transform .65s cubic-bezier(.3,.1,.25,1);touch-action:none;cursor:grab}
.sheet.flipped{transform:rotateY(-180deg)}
/* top-bound flip book (calendar style) */
.fbook.vert .sheet{left:0;top:50%;width:100%;height:50%;transform-origin:center top}
.fbook.vert .sheet.flipped{transform:rotateX(180deg)}
.fbook.vert .pg.back{transform:rotateX(180deg)}
.fbook.vert .pg.front::after{background:linear-gradient(180deg,rgba(26,26,24,.14),transparent 7%)}
.fbook.vert .pg.back::after{background:linear-gradient(0deg,rgba(26,26,24,.14),transparent 7%)}
.fbook.vert .tapzone.l{left:0;top:0;width:100%;height:50%}
.fbook.vert .tapzone.r{left:0;right:auto;top:auto;bottom:0;width:100%;height:50%}
.pg{position:absolute;inset:0;backface-visibility:hidden;background:var(--paper-card);overflow:hidden;user-select:none}
.pg img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.pg.blank{background:var(--paper-deep)}
.pg.front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,26,24,.14),transparent 7%)}
.pg.back{transform:rotateY(180deg)}
.pg.back::after{content:"";position:absolute;inset:0;background:linear-gradient(-90deg,rgba(26,26,24,.14),transparent 7%)}
.rd-close{position:fixed;top:22px;right:26px;z-index:60;width:44px;height:44px;border-radius:var(--r-pill);
  border:1px solid rgba(250,249,245,.5);background:none;color:var(--paper);font-size:1.15rem;cursor:pointer;
  font-family:var(--f-body);line-height:1;transition:background .2s,color .2s}
.rd-close:hover{background:var(--paper);color:var(--ink)}
.rd-title{position:fixed;top:30px;left:50%;transform:translateX(-50%);z-index:60;max-width:70vw;
  font-family:var(--f-mono);font-weight:700;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:60;width:46px;height:46px;border-radius:var(--r-pill);
  border:1px solid rgba(250,249,245,.5);background:none;color:var(--paper);font-size:1.2rem;cursor:pointer;
  transition:background .2s,color .2s,opacity .2s;font-family:var(--f-body)}
.rd-nav:hover{background:var(--paper);color:var(--ink)}
.rd-nav[disabled]{opacity:.25;cursor:default}
.rd-nav[disabled]:hover{background:none;color:var(--paper)}
.rd-prev{left:clamp(10px,3vw,40px)}
.rd-next{right:clamp(10px,3vw,40px)}
.rd-count{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:60;
  font-family:var(--f-mono);font-weight:700;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--paper)}
.tapzone{position:absolute;top:0;height:100%;width:50%;z-index:40;background:none;border:0;cursor:pointer}
.tapzone.l{left:0}.tapzone.r{right:0}

@media (max-width:767px){
  .shelf{--bh:clamp(180px,32vh,280px);gap:6px;margin:0}
  .shelfrow{padding:18px 20px 4px}
  .big{font-size:clamp(2.2rem,11vw,3.6rem)}
  .cue{font-size:.85rem}
  .brow-books{--rh:clamp(120px,34vw,170px);margin:0}
}
@media (prefers-reduced-motion:reduce){
  .book,.b3d,.sheet,.fbook,.cue .arr,.bcard{transition:none!important;animation:none!important}
}