/* ============================================================================
   books.css . the /52 reading challenge page.
   Loads AFTER pages.css and uses its tokens only. No new fonts, no CDN:
   the site CSP blocks external styles, scripts and fonts.
   ========================================================================== */

/* ---------- hero ---------- */
.b-top{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:end}
@media (max-width:860px){.b-top{grid-template-columns:1fr;align-items:start}}
.b-top h1{max-width:9ch}
.b-top .lede{margin-top:0}

/* ---------- 52 cell tracker ---------- */
.tracker{margin-top:clamp(28px,3.4vw,52px);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,1.8vw,28px)}
.tracker-head{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.tracker-head .k{font:600 clamp(10px,.78vw,12px)/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin:0}
.tracker-head .v{font:500 clamp(13px,1vw,16px)/1 var(--display);letter-spacing:-.01em;margin:0}
.cells{display:grid;grid-template-columns:repeat(26,1fr);gap:clamp(3px,.5vw,6px)}
@media (max-width:760px){.cells{grid-template-columns:repeat(13,1fr)}}
/* Four states. Muted, not traffic-light plastic: the palette stays sand and
   ink, the greens and clays are desaturated so the grid still reads premium.
   Colour is never the only signal, every cell is also focusable and labelled. */
.cells{--c-done:#4F6B4A;--c-now:#111110;--c-plan:#B8893B;--c-open:#A8563F}
.cell{aspect-ratio:1/1;border:1px solid rgba(17,17,16,.18);border-radius:4px;background:transparent;
  position:relative;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cell:hover{transform:translateY(-3px) scale(1.14);z-index:3}
.cell:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.cell.s-done{background:var(--c-done);border-color:var(--c-done)}
.cell.s-now{background:var(--white);border-color:var(--c-now);box-shadow:inset 0 0 0 2px var(--c-now);
  animation:cellpulse 2.4s var(--ease) infinite}
.cell.s-planned{background:rgba(184,137,59,.26);border-color:rgba(184,137,59,.85)}
.cell.s-open{background:transparent;border-color:rgba(168,86,63,.42);border-style:dashed}
.cell.s-open:hover{background:rgba(168,86,63,.12);border-color:var(--c-open)}
@keyframes cellpulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.cell.s-now{animation:none}.cell:hover{transform:none}}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,24px);margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.legend span{display:inline-flex;align-items:center;gap:8px;font:600 9.5px/1 var(--text);
  letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.legend i{width:11px;height:11px;border-radius:3px;border:1px solid rgba(17,17,16,.18);flex:none}
.legend .l-done i{background:#4F6B4A;border-color:#4F6B4A}
.legend .l-now i{background:var(--white);border-color:#111110;box-shadow:inset 0 0 0 2px #111110}
.legend .l-plan i{background:rgba(184,137,59,.26);border-color:rgba(184,137,59,.85)}
.legend .l-open i{border-color:rgba(168,86,63,.42);border-style:dashed}

/* the shared popover */
#cellpop{position:fixed;z-index:70;width:min(300px,86vw);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);padding:16px;box-shadow:0 22px 48px rgba(17,17,16,.22);
  opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
#cellpop.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
#cellpop::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r) var(--r) 0 0}
#cellpop.s-done::before{background:#4F6B4A}
#cellpop.s-now::before{background:#111110}
#cellpop.s-planned::before{background:#B8893B}
#cellpop.s-open::before{background:#A8563F}
.cp-week{font:600 9.5px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin:0 0 11px}
.cp-row{display:flex;gap:13px;align-items:flex-start}
.cp-art{width:54px;flex:none;border-radius:4px;background:var(--inset);box-shadow:0 6px 14px rgba(17,17,16,.18)}
.cp-ttl{font:500 clamp(15px,1.1vw,17px)/1.22 var(--display);letter-spacing:-.018em;margin:0;max-width:none}
.cp-sub{font:600 9.5px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin:7px 0 0}
.cp-rate{font:500 clamp(19px,1.5vw,23px)/1 var(--display);letter-spacing:-.02em;margin:10px 0 0}
.cp-rate small{font-weight:400;font-size:.55em;color:var(--gray)}
.cp-rate.cp-pending{font-size:clamp(13px,1vw,15px);color:var(--gray)}
.cp-tag{font:600 9.5px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:10px 0 0}
.cp-act{display:inline-block;margin-top:12px;font:500 12px/1 var(--text);text-decoration:none;cursor:pointer;
  background:var(--ink);color:var(--bone);border:1px solid var(--ink);border-radius:99px;padding:10px 16px;
  transition:background .3s var(--ease)}
.cp-act:hover{background:var(--ink-2)}
#cellpop.s-open .cp-act{background:var(--c-open,#A8563F);border-color:var(--c-open,#A8563F)}
#cellpop.s-open .cp-act:hover{filter:brightness(1.08)}

/* ---------- stats ---------- */
.bstats{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1vw,16px);margin-top:clamp(14px,1.4vw,22px)}
@media (max-width:860px){.bstats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.bstats{grid-template-columns:1fr}}
.bstat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,1.5vw,24px)}
.bstat .n{font:500 clamp(24px,2.6vw,38px)/1 var(--display);letter-spacing:-.03em;margin:0}
.bstat .n small{font-weight:400;font-size:.42em;color:var(--gray);letter-spacing:0}
.bstat .k{font:600 clamp(10px,.75vw,12px)/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin:10px 0 0}
.bstat.behind .n{color:var(--gray)}

/* ---------- currently reading ---------- */
.now-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,3.4vw,58px);align-items:center}
@media (max-width:860px){.now-grid{grid-template-columns:1fr;gap:28px}}
.now-frame{position:relative;background:var(--dark);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  min-height:300px;display:flex;align-items:center;justify-content:center;padding:clamp(22px,3vw,40px)}
.now-frame img{width:100%;max-width:300px;border-radius:6px;box-shadow:0 28px 54px rgba(0,0,0,.4)}
.now-frame.photo{padding:0}
.now-frame.photo img{max-width:none;width:100%;height:100%;max-height:min(58vh,520px);object-fit:cover;border-radius:0;box-shadow:none}
.now-frame .badge{position:absolute;left:0;top:clamp(16px,2vw,26px);background:var(--bone);color:var(--dark);
  font:600 10px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;padding:9px 15px;border-radius:0 99px 99px 0;z-index:3}
.now-wk{font:600 clamp(10px,.78vw,12px)/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin:0 0 14px}
.now-ttl{font:500 clamp(26px,3.4vw,50px)/1.03 var(--display);letter-spacing:-.032em;margin:0;max-width:none}
.now-sub{font:400 clamp(15px,1.3vw,21px)/1.35 var(--display);color:var(--ink-2);margin:10px 0 0;max-width:34ch}
.now-by{font:600 clamp(11px,.85vw,13px)/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin:18px 0 0}
.bar{height:4px;background:rgba(17,17,16,.12);border-radius:99px;margin-top:24px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:99px;transition:width 1.2s var(--ease)}
.now-meta{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,40px);margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.now-meta .k{font:600 10px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin:0}
.now-meta .v{font:500 clamp(16px,1.2vw,20px)/1 var(--display);letter-spacing:-.015em;margin:7px 0 0}
.prelaunch{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,3.4vw,58px);align-items:center}
@media (max-width:860px){.prelaunch{grid-template-columns:1fr;gap:28px}}
.cd{font:400 clamp(30px,4vw,54px)/1 var(--display);letter-spacing:-.035em;margin:22px 0 0}
.cd b{font-weight:600}

/* ---------- the shelf ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2vw,30px)}
.filt{font:500 clamp(12px,.88vw,14px)/1 var(--text);padding:10px 17px;border-radius:99px;
  border:1px solid rgba(17,17,16,.16);background:transparent;color:var(--gray);cursor:pointer;transition:all .3s var(--ease)}
.filt:hover{color:var(--ink);border-color:var(--ink)}
.filt.on{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(16px,2vw,30px)}
@media (max-width:560px){.shelf{grid-template-columns:repeat(2,1fr);gap:14px}}
.bk{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.bk-art{display:block;position:relative;aspect-ratio:2/3;background:var(--inset);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.bk:hover .bk-art{transform:translateY(-6px);box-shadow:0 20px 38px rgba(17,17,16,.18)}
.bk-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.bk-fallback{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(42px,4vw,50px) 18px 18px;background:var(--card)}
.bk-fallback .ft{display:block;font:500 clamp(15px,1.1vw,18px)/1.18 var(--display);letter-spacing:-.018em}
.bk-fallback .fa{display:block;font:600 10px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.bk-num{display:block;position:absolute;z-index:3;left:12px;top:12px;background:var(--ink);color:var(--bone);
  font:600 10px/1 var(--text);letter-spacing:.1em;padding:7px 11px;border-radius:99px}
.bk-rate{display:block;position:absolute;z-index:3;right:10px;bottom:10px;background:var(--bone);color:var(--ink);
  font:600 clamp(13px,1vw,15px)/1 var(--display);letter-spacing:-.01em;padding:8px 12px;border-radius:99px;
  box-shadow:0 6px 16px rgba(0,0,0,.2)}
.bk-rate small{font-weight:400;color:var(--gray);font-size:.74em}
.bk-meta{display:block;margin-top:14px}
.bk-meta .t{display:block;font:500 clamp(15px,1.1vw,18px)/1.22 var(--display);letter-spacing:-.018em}
.bk-meta .a{display:block;font:600 10px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-top:7px}
.bk-meta .v{display:block;font-size:clamp(13px,.95vw,15px);line-height:1.5;color:var(--gray);margin-top:10px}
.shelf-empty{background:var(--card);border:1px dashed rgba(17,17,16,.2);border-radius:var(--r);
  padding:clamp(34px,5vw,64px);text-align:center}
.shelf-empty .t{font:500 clamp(20px,2.2vw,32px)/1.1 var(--display);letter-spacing:-.025em;margin:0}
.shelf-empty p{color:var(--gray);margin:12px auto 0;max-width:48ch}

/* ---------- drawer ---------- */
#bdrawer{position:fixed;inset:0;z-index:60;display:none}
#bdrawer.open{display:block}
#bdrawer .scrim{position:absolute;inset:0;background:rgba(14,13,11,.58);opacity:0;transition:opacity .3s var(--ease)}
#bdrawer.in .scrim{opacity:1}
#bdrawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(620px,100%);background:var(--bg);
  overflow-y:auto;transform:translateX(100%);transition:transform .5s var(--ease);
  padding:clamp(26px,4vw,52px);box-shadow:-24px 0 60px rgba(14,13,11,.24)}
#bdrawer.in .panel{transform:none}
.dr-close{position:sticky;top:0;float:right;margin:-8px -8px 0 0;background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:10px 18px;font:500 clamp(12px,.88vw,14px)/1 var(--text);color:var(--gray);cursor:pointer;z-index:4;
  transition:all .3s var(--ease)}
.dr-close:hover{color:var(--ink);border-color:var(--ink)}
.dr-num{font:600 clamp(10px,.78vw,12px)/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin:0 0 18px}
.dr-cover{width:120px;float:right;margin:0 0 18px 22px;border-radius:8px;background:var(--inset);
  box-shadow:0 16px 32px rgba(17,17,16,.22)}
.dr-ttl{font:500 clamp(24px,3vw,40px)/1.05 var(--display);letter-spacing:-.032em;margin:0;max-width:none}
.dr-by{font:600 clamp(11px,.85vw,13px)/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin:14px 0 0}
.dr-score{display:flex;align-items:baseline;gap:14px;margin:26px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dr-score .big{font:600 clamp(34px,5vw,58px)/1 var(--display);letter-spacing:-.04em}
.dr-score .big small{font-weight:400;font-size:.34em;color:var(--gray)}
.dr-score .k{font:600 10px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.dr-body{color:var(--ink-2);max-width:none}
.dr-h{font:600 clamp(10px,.78vw,12px)/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:30px 0 14px}
.dr-take{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.dr-take li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.dr-take b{font:600 10px/1.6 var(--text);letter-spacing:.1em;color:var(--gray)}
.dr-quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin:26px 0 0;
  font:400 clamp(17px,1.3vw,21px)/1.42 var(--display);letter-spacing:-.012em}
.dr-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.dr-tags span{font:600 10px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--gray);
  border:1px solid var(--line);border-radius:99px;padding:8px 14px}

/* ---------- up next ---------- */
.queue{display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;padding-bottom:14px;margin:0;list-style:none}
.qk{flex:0 0 clamp(124px,14vw,160px);display:block;text-decoration:none;color:inherit}
.qk .art{display:block;position:relative;aspect-ratio:2/3;border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  overflow:hidden;opacity:.55;filter:grayscale(1);transition:all .5s var(--ease);display:flex;align-items:flex-end;padding:14px}
.qk:hover .art{opacity:1;filter:none}
.qk .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.qk .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;z-index:0;font:500 clamp(13px,1vw,15px)/1.18 var(--display);letter-spacing:-.015em}
.qk .t{display:block;font:500 clamp(13px,.98vw,15px)/1.22 var(--display);letter-spacing:-.015em;margin:11px 0 0}
.qk .a{display:block;font:600 9.5px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin:6px 0 0}

/* ---------- forms ---------- */
.bform{display:grid;gap:16px}
.fld{display:grid;gap:7px}
.fld label{font:600 10px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.fld input,.fld textarea{font:400 clamp(15px,1.02vw,17px)/1.5 var(--text);color:var(--ink);background:var(--white);
  border:1px solid rgba(17,17,16,.16);border-radius:10px;padding:13px 15px;outline:none;resize:vertical;
  transition:border-color .3s var(--ease)}
.fld input:focus,.fld textarea:focus{border-color:var(--ink)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--gray);opacity:.75}
.bform .note{font-size:clamp(12px,.88vw,14px);color:var(--gray);margin:0}
.bform button{justify-self:start;cursor:pointer}
.b-ok{display:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,34px)}
.b-ok h3{margin-bottom:8px}
.b-ok p{color:var(--gray);margin:0}

/* dark band variants */
.band .bform .fld label{color:rgba(237,231,216,.55)}
.band .bform .fld input,.band .bform .fld textarea{background:rgba(237,231,216,.06);border-color:var(--wline);color:var(--bone)}
.band .bform .fld input:focus,.band .bform .fld textarea:focus{border-color:var(--bone)}
.band .bform .fld input::placeholder,.band .bform .fld textarea::placeholder{color:rgba(237,231,216,.38)}
.band .bform .note{color:rgba(237,231,216,.5)}
.band .b-ok{background:rgba(237,231,216,.06);border-color:var(--wline)}
.band .b-ok h3{color:var(--bone)}
.band .b-ok p{color:rgba(237,231,216,.68)}
.join-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,4vw,72px);align-items:start}
@media (max-width:860px){.join-grid{grid-template-columns:1fr}}
.band ol.rules{counter-reset:r;list-style:none;margin:clamp(22px,2.4vw,34px) 0 0;padding:0;border-top:1px solid var(--wline)}
.band ol.rules li{counter-increment:r;display:grid;grid-template-columns:38px 1fr;gap:14px;padding:15px 0;
  border-bottom:1px solid var(--wline);color:rgba(237,231,216,.68)}
.band ol.rules li::before{content:counter(r,decimal-leading-zero);font:600 10px/1.7 var(--text);letter-spacing:.1em;color:var(--bone)}
.band ol.rules b{color:var(--bone);font-weight:600}
.band ol.rules p{margin:0;max-width:none}

/* ---------- recommend ---------- */
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,60px);align-items:start}
@media (max-width:860px){.rec-grid{grid-template-columns:1fr}}
.rec-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,34px)}

/* ---------- disclosure ---------- */
.disc{font-size:clamp(12px,.88vw,14px);line-height:1.65;color:var(--gray);max-width:78ch}

/* queue: week badge + the buy affordance */
.qk .qn{position:absolute;left:0;top:12px;z-index:2;background:var(--bone);color:var(--dark);
  font:600 9px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:0 99px 99px 0}
/* always visible: this row exists so people can order ahead, so the buy
   affordance cannot be hover-only. It just brightens on hover. */
.qk .get{display:block;font:600 9.5px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);margin-top:9px;opacity:.7;transition:opacity .3s var(--ease),color .3s var(--ease)}
.qk:hover .get{opacity:1;color:var(--ink)}