:root{
  --sans:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* warm paper and ink, so the library inside matches the door outside */
  --ground:#F3EEE4; --panel:#FBF8F2; --bar:#221609; --bar-ink:#F3EEE4; --bar-dim:#A08E74;
  --ink:#1A1410; --ink-2:#4E453C; --ink-3:#6B6156; --rule:#DED5C6; --rule-2:#C6BBA8;
  --hover:#EAE3D6; --on-c:#FFFFFF; --sig:#E53935;
  --c-books:#9B1E36; --c:var(--c-books);
  --stone:#E4D6BA; --brass:#C99C45;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#12100C; --panel:#1B1712; --bar:#000000; --bar-ink:#EFE8DA; --bar-dim:#8C8272;
    --ink:#EFE8DA; --ink-2:#B3A996; --ink-3:#978C7A; --rule:#2B251E; --rule-2:#3E362C;
    --hover:#1F1A14; --on-c:#12100C; --sig:#FF5A55; --c-books:#F06A84;
  }
}
:root[data-theme="dark"]{
  --ground:#12100C; --panel:#1B1712; --bar:#000000; --bar-ink:#EFE8DA; --bar-dim:#8C8272;
  --ink:#EFE8DA; --ink-2:#B3A996; --ink-3:#978C7A; --rule:#2B251E; --rule-2:#3E362C;
  --hover:#1F1A14; --on-c:#12100C; --sig:#FF5A55; --c-books:#F06A84;
}
.s-books{--c:var(--c-books)}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Newsreader",ui-serif,Georgia,serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(15px,3.4vw,40px)}

/* masthead */
.bar{background:var(--bar);color:var(--bar-ink)}
.bar-in{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:15px 0 14px;flex-wrap:wrap}
.wordmark{margin:0;line-height:0}
.wordmark a{color:inherit;display:inline-block}
.wm{display:block;width:clamp(178px,34vw,310px);height:auto;color:var(--bar-ink)}
.sigdot{fill:var(--sig)}
.nmk{display:block;width:100%;height:100%}
.nbg{fill:#111111}
.nfg{fill:#ffffff}
.slug{font-family:var(--sans);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bar-dim);line-height:1.7;text-align:right;padding-bottom:3px}
.slug b{color:var(--bar-ink);font-weight:500}
.slug a{color:inherit;text-decoration:none}
.slug a:hover{color:var(--bar-ink)}
.rule{height:5px;background:linear-gradient(90deg,#8a6a2a,#e2c26a 30%,#c99c45 60%,#8a6a2a)}

/* ================= the door =================
   Four layers in one coordinate space, never a cross fade. .stage is placed by
   fitDoor() exactly where object-fit:cover would put the artwork, and every
   layer inside is positioned in percentages of the native canvas, so the
   facade, the room behind it and the swinging leaf stay registered at any
   window shape. The room, the facade and the closed leaf are the resting
   picture, so those three are the whole door with no JavaScript at all.
   Every rule is scoped under .scene so none of it reaches The Shelf. */
body.at-door{background:#7A5240;overflow:hidden}
body.at-door .bar,body.at-door .rule,body.at-door #foot{display:none}
.scene{position:fixed;inset:0;overflow:hidden;background:#7A5240;color:#FFF3E2}
.scene .stage{position:absolute;background:#5E3C2C;
  /* fitDoor() replaces all four with exact pixels and clears the translate.
     These are the no-JavaScript fallback: cover and centred.
     The shipped HTML carries the landscape set, so this is 3:2 at every shape;
     a visitor with JavaScript gets the right master a moment later. */
  left:50%;top:50%;translate:-50% -50%;
  width:max(100vw,calc(100vh * 1.5));height:max(100vh,calc(100vw / 1.5))}
.scene .stage img{position:absolute;display:block;max-width:none}
.scene .facade{inset:0;width:100%;height:100%}
.scene .room{position:absolute;transform-origin:0 0;will-change:transform}
.scene .room img{inset:0;width:100%;height:100%}
.scene .fg{position:absolute;inset:0;transform-origin:var(--org,50% 47%);will-change:transform}
.scene .leaf{position:absolute}
.scene .leaf img{inset:0;width:100%;height:100%;visibility:hidden}
.scene .leaf img.on{visibility:visible}
/* light spilling from the doorway, on hover */
.scene .dlight{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,206,128,.45),rgba(255,180,96,.18) 45%,rgba(255,170,90,0) 100%);
  mix-blend-mode:screen;transition:opacity .45s ease}
.scene.peek .dlight{opacity:.55}
.scene .door{position:absolute;display:block;z-index:8;cursor:pointer;border-radius:5px}
.scene .door:focus-visible{outline:2px solid #FFD68A;outline-offset:5px}
/* a soft warm gradient under the copy, not a scrim over the whole scene */
.scene .shade{position:absolute;inset:0;pointer-events:none;transition:opacity .5s;
  background:linear-gradient(to top,rgba(36,19,11,.94) 0%,rgba(42,23,14,.72) 10%,rgba(50,28,17,.34) 19%,rgba(58,32,20,.1) 26%,rgba(58,32,20,0) 32%)}

/* ---- the entrance ----
   The swing is the stepped leaf, driven from the script. The portal is one
   scale about the fixed point in the geometry file: the facade and leaf grow
   until the doorway aperture is wider than the screen, while the room plate
   behind grows to fill the canvas. Nothing dissolves. The easing is the
   handoff's smoothstep, which cubic-bezier(.45,0,.55,1) tracks closely. */
.scene.open .dlight{opacity:.75;transition:opacity .8s ease}
.scene.go .fg{transform:scale(8.5);transition:transform 1.6s cubic-bezier(.45,0,.55,1)}
.scene.go .room{transform:translate(var(--rx),var(--ry)) scale(var(--rs));
  transition:transform .95s cubic-bezier(.45,0,.55,1)}
.scene.go .dlight{opacity:0;transition:opacity .5s ease}
.veil{position:fixed;inset:0;z-index:20;background:#FFD9A0;opacity:0;pointer-events:none;transition:opacity .4s ease}
.veil.on{opacity:1}
.veil.off{opacity:0;transition:opacity .8s ease}

/* ---- words, in screen space ---- */
.brand{position:absolute;left:clamp(16px,3vw,40px);top:clamp(14px,2.6vh,26px);width:clamp(120px,14vw,170px);z-index:9;color:#FFF3E2;opacity:.94;line-height:0;transition:opacity .5s;
  filter:drop-shadow(0 2px 10px rgba(40,20,10,.55))}
.brand svg{display:block;width:100%;height:auto}
.brand .sigdot{fill:var(--sig)}
.words{position:absolute;left:0;right:0;bottom:clamp(14px,3.5vh,36px);text-align:center;z-index:9;padding:0 20px;transition:opacity .5s}
.scene.open .words,.scene.open .brand,.scene.open .shade{opacity:0}
.door-line{margin:0 auto;max-width:52ch;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.5;color:#F0DCC2;text-wrap:balance;text-shadow:0 1px 10px rgba(30,15,8,.75)}
.door-line b{color:#FFF3E2;font-weight:500}
.door-enter{display:inline-block;margin:12px 0 0;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#FFD68A;text-decoration:none;border-bottom:2px solid #D9A053;padding:0 0 3px;text-shadow:0 1px 8px rgba(30,15,8,.6)}
.door-enter:hover{color:#fff;border-color:#FFD68A}
.words .fine{border-top:0;color:#BCA189;margin:16px 0 0;padding:0;justify-content:center;gap:22px;font-size:.62rem}
.words .fine .stu{color:#D6BC9E;border-color:#7A5F44}
@media (max-width:620px){.words .fine{display:none}.door-line{font-size:.95rem}}
@media (prefers-reduced-motion:reduce){
  .scene .fg,.scene .room,.scene .dlight,.scene .shade{transition:none!important}
}


/* the newest reads, at the top of the shelf */
.jf{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0}
.jf .pk-d{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.jf .pk-gr{margin-top:2px}
.pk-gr.lo{color:var(--ink-3)}
@media (max-width:860px){.jf{grid-template-columns:1fr}}

/* grade stamp */
.grade{display:inline-flex;align-items:center;gap:11px;border:3px solid var(--c);border-radius:11px;
  padding:8px 17px 7px 16px;background:transparent;flex:none;white-space:nowrap}
.grade .l{font-family:var(--sans);
  font-size:.58rem;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-2);line-height:1}
.grade .g{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.44rem;line-height:.9;
  letter-spacing:-.04em;color:var(--c)}
.grade.pending{border-style:dashed;border-color:var(--rule-2)}
.grade.pending .g{color:var(--ink-3)}
.gwrap{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.gsub{font-family:var(--sans);font-size:.67rem;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;line-height:1.5;max-width:92px}
.gpair{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gpair .arw{font-family:var(--sans);color:var(--ink-3);font-size:1rem}

/* shelf */
.shelf{padding:40px 0 0;max-width:730px}
.shelf h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(2.2rem,5.4vw,3.3rem);
  line-height:.98;letter-spacing:-.04em;margin:0 0 16px}
.shelf p{color:var(--ink-2);margin:0 0 8px;font-size:1.12rem}
.logdef{font-family:var(--sans) !important;font-size:.66rem !important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-books) !important;margin-bottom:12px !important}
.stats{display:flex;flex-wrap:wrap;border-top:3px solid var(--ink);margin:26px 0 0}
.stat{padding:16px 28px 16px 0;margin-right:28px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0;margin-right:0}
.stat .v{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .k{font-family:var(--sans);font-size:.67rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.tscroll{overflow-x:auto;padding-bottom:84px}
table{border-collapse:collapse;width:100%;min-width:660px;margin-top:26px}
th{font-family:var(--sans);font-size:.67rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:0 14px 9px 0;border-bottom:1px solid var(--rule-2);white-space:nowrap}
td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);font-size:1rem;vertical-align:top}
td.m{font-family:var(--sans);font-size:.78rem;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
td.gd{font-family:var(--sans);font-size:.82rem;font-weight:600}
.hi{color:var(--c-books)}
tbody tr:hover td{background:var(--hover)}

/* inkwool callout */
.iw{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;text-decoration:none;color:inherit;
  border:1px solid var(--c-books);border-radius:18px;padding:18px 22px;margin:28px 0 0;background:var(--panel);
  transition:background .15s ease}
.iw:hover{background:var(--hover)}
.iwl{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-c);background:var(--c-books);border-radius:999px;padding:6px 13px 5px;white-space:nowrap}
.iwb{font-size:1rem;line-height:1.5;color:var(--ink-2);max-width:62ch}
.iwb b{color:var(--ink);font-weight:600}
.iwb u{text-decoration:none;color:var(--c-books);font-weight:600}
.iwa{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:var(--c-books);white-space:nowrap}
@media (max-width:760px){.iw{grid-template-columns:1fr;gap:12px}.iwl{justify-self:start}}
.iw.top{margin:0 0 40px;padding:14px 18px;gap:16px;border-radius:14px}
.iw.top .iwb{font-size:.92rem;line-height:1.45}
@media (max-width:620px){.iw.top{padding:14px 16px;gap:10px}.iw.top .iwb{font-size:.88rem}}

/* shelf: sections, charts */
.sh2{font-family:var(--sans);font-weight:800;font-size:clamp(1.35rem,2.6vw,1.75rem);letter-spacing:-.028em;
  margin:52px 0 6px;padding-top:20px;border-top:3px solid var(--ink)}
.sh2 + .shp{margin:0 0 22px;color:var(--ink-2);font-size:1.05rem;max-width:62ch}
.figw{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:20px 20px 14px;margin:0 0 8px}
.figw svg{display:block;width:100%;height:auto;overflow:visible}
.gl{stroke:var(--rule);stroke-width:1}
.gt{fill:var(--ink-3);font-family:var(--sans);font-size:11px;font-weight:600}
.gt.r{text-anchor:end}.gt.m{text-anchor:middle}
.ln{fill:none;stroke:var(--c-books);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ar{fill:var(--c-books);opacity:.09}
.pt{fill:var(--c-books);stroke:var(--panel);stroke-width:2}
.pt.big{r:6}
.mean{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:5 5;opacity:.7}
.dlab{fill:var(--ink);font-family:var(--sans);font-size:12px;font-weight:700}
.hitz{fill:transparent;cursor:pointer}
.figd{margin:6px 0 0}
.figd summary{cursor:pointer;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:var(--ink-2);padding:6px 0}
.figd table{min-width:0;margin-top:8px}
.figd td{padding:6px 12px 6px 0;font-size:.9rem}
.figd td.m{font-size:.8rem}

/* best of year */
.boy{border-top:3px solid var(--ink)}
.boyr{display:grid;grid-template-columns:64px 54px 1fr;gap:0 18px;align-items:baseline;
  border-bottom:1px solid var(--rule);padding:15px 0}
.boyr:hover{background:var(--hover)}
.boyy{font-family:var(--sans);font-weight:800;font-size:1.15rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.boyg{font-family:var(--sans);font-weight:800;font-size:1rem;color:var(--c-books)}
.boyt{font-size:1.06rem;line-height:1.35}
.boyt b{font-weight:600}
.boyt > span{color:var(--ink-3);font-size:.95rem}
.also{display:block;margin-top:7px;font-size:.93rem;line-height:1.6;color:var(--ink-3)}
.also em{font-family:var(--sans);font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-right:12px}
.also .al{display:inline;margin-right:14px}
.also .al b{font-weight:600;color:var(--ink-2)}
.also .al i{font-style:normal;font-family:var(--sans);font-weight:700;font-size:.72rem;color:var(--c-books)}

/* recommendation cards: the A+ three */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:4px 0 0}
.tcard{background:var(--panel);border:1px solid var(--rule);border-top:4px solid var(--c-books);
  border-radius:16px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:9px}
.tcard .tg{font-family:var(--sans);font-size:1.5rem;font-weight:800;
  color:var(--c-books);letter-spacing:-.02em;line-height:1}
.tcard h3{font-size:1.22rem;line-height:1.25;font-weight:600;letter-spacing:-.012em}
.tcard .tby{font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.055em;text-transform:uppercase;color:var(--ink-3)}
.tnote{font-size:.97rem;line-height:1.55;color:var(--ink-2);border-left:2px solid var(--c-books);padding-left:13px;margin-top:auto}
@media (max-width:860px){.trio{grid-template-columns:1fr}}

/* best of year, rebuilt around the metric */
.boy{border-top:3px solid var(--ink)}
.byr{display:grid;grid-template-columns:74px 1fr;gap:0 18px;border-bottom:1px solid var(--rule);padding:20px 0}
.byy{font-family:var(--sans);font-weight:800;font-size:1.3rem;
  color:var(--ink-3);font-variant-numeric:tabular-nums;line-height:1.2}
.byh{font-size:1.12rem;line-height:1.35;font-weight:600}
.byh span{font-weight:400;color:var(--ink-3)}
.bym{display:flex;flex-wrap:wrap;gap:0 16px;margin:7px 0 0;font-family:var(--sans);
  font-size:.66rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:var(--ink-3)}
.bym .g{color:var(--c-books);font-size:.95rem;letter-spacing:-.01em;margin-right:2px}
.bym .fast{color:var(--ink);position:relative;padding-left:15px}
.bym .fast::before{content:"";position:absolute;left:0;top:2px;width:8px;height:8px;border-radius:50%;background:var(--c-books)}
.bynote{font-size:1rem;line-height:1.55;color:var(--ink-2);border-left:2px solid var(--rule-2);padding-left:14px;margin:12px 0 0;max-width:66ch}
.hon{display:block;margin-top:12px;font-size:.93rem;line-height:1.65;color:var(--ink-3)}
.hon em{font-family:var(--sans);font-style:normal;font-size:.58rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-right:12px}
.hon .al{display:inline;margin-right:14px}
.hon .al b{font-weight:600;color:var(--ink-2)}
.hon .al i{font-style:normal;font-family:var(--sans);font-weight:700;font-size:.72rem;color:var(--c-books)}
@media (max-width:620px){.byr{grid-template-columns:1fr;gap:6px}}
@media (max-width:700px){
  .tscroll{overflow:visible;padding-bottom:60px}
  table,tbody{display:block;min-width:0}
  thead{display:none}
  tbody tr{display:grid;grid-template-columns:1fr auto;gap:1px 14px;padding:12px 0;border-bottom:1px solid var(--rule)}
  td{display:block;padding:0;border:0}
  td.bt{grid-column:1;grid-row:1;font-weight:600;line-height:1.3}
  td.au{grid-column:1;grid-row:2;color:var(--ink-2);font-size:.95rem}
  td.sr{grid-column:1;grid-row:3;font-size:.78rem}
  td.sr.none,td.yr,td.pg{display:none}
  td.gd{grid-column:2;grid-row:1/4;align-self:start;font-size:1.05rem;padding-top:2px}
  tbody tr.bnote{display:block;padding:0 0 12px;border-bottom:1px solid var(--rule)}
  tbody tr.bnote td{padding:0}
  /* the dot plot is cramped here; a ranked list says the same thing */
  .arow{grid-template-columns:1fr auto;gap:4px 12px;align-items:start}
  .arow .tr,.axr{display:none}
  .arow .av i{white-space:nowrap}
}

/* the note under a table row */
.bnote td{padding:0 12px 14px !important;border-bottom:1px solid var(--rule) !important}
.bnote p{font-size:.94rem;line-height:1.55;color:var(--ink-2);border-left:2px solid var(--c-books);padding-left:12px;max-width:74ch}
.arow .an i{display:block;font-style:normal;font-family:var(--sans);
  font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;line-height:1.4}
.arow{align-items:center}

/* author dot plot */
.arow{display:grid;grid-template-columns:minmax(150px,232px) 1fr 78px;gap:0 18px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--rule);width:100%;text-align:left}
.arow:hover{background:var(--hover)}
.arow .an{font-size:1rem;font-weight:500;line-height:1.25}
.arow .tr{position:relative;height:20px}
.arow .tr::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--rule)}
.arow .dt{position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--c-books);box-shadow:0 0 0 2px var(--panel)}
.arow .av{font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.arow .av i{display:block;font-style:normal;font-size:.62rem;font-weight:600;color:var(--ink-3);letter-spacing:.05em}
.axr{display:grid;grid-template-columns:minmax(150px,232px) 1fr 78px;gap:0 18px;padding:6px 0 0}
.axr div:nth-child(2){display:flex;justify-content:space-between;font-family:var(--sans);
  font-size:.62rem;font-weight:600;letter-spacing:.05em;color:var(--ink-3)}

/* series chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.chip{display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--rule-2);border-radius:999px;
  padding:8px 15px 7px;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--ink)}
.chip:hover{border-color:var(--c-books);color:var(--c-books)}
.chip b{font-weight:600;color:var(--ink-3);font-size:.68rem}

/* tooltip */
#tip{position:fixed;z-index:60;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--bar);color:var(--bar-ink);border-radius:10px;padding:9px 12px;
  font-family:var(--sans);font-size:.75rem;line-height:1.45;box-shadow:0 8px 26px rgba(0,0,0,.28);max-width:250px}
#tip b{font-weight:700}
#tip i{font-style:normal;opacity:.7}

/* shelf filters: one bar above the wall drives the wall, the list, the count and the URL */
.fbar{border-top:3px solid var(--ink);padding:18px 0 0;margin-top:4px}
.frow{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.frow input[type=search]{font-family:var(--sans);font-size:.95rem;padding:10px 17px;border-radius:999px;
  border:1px solid var(--rule-2);background:var(--panel);color:var(--ink);min-width:220px;flex:1;max-width:360px}
.frow input:focus{outline:none;border-color:var(--c-books)}
.fpills{display:flex;gap:7px;flex-wrap:wrap}
.fp{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  padding:7px 14px 6px;border-radius:999px;border:1px solid var(--rule-2);color:var(--ink-2)}
.fp:hover{border-color:var(--c-books)}
.fp.on{background:var(--c-books);color:var(--on-c);border-color:var(--c-books)}
.fp.gp i{font-style:normal;font-weight:500;opacity:.65;margin-left:3px;letter-spacing:0}
.vtog{display:flex;margin-left:auto}
.vtog .fp{border-radius:0}
.vtog .fp:first-child{border-radius:999px 0 0 999px}
.vtog .fp:last-child{border-radius:0 999px 999px 0;margin-left:-1px}
.ftog{font-family:var(--sans);font-size:.74rem;font-weight:600;color:var(--ink-2);gap:8px 20px}
.ftog label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.ftog input{accent-color:var(--c-books);width:15px;height:15px;margin:0}
.ftog label i{font-style:normal;display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--rule-2);font-size:.58rem;color:var(--ink-3);cursor:help}
.fyr{display:inline-flex;gap:6px;margin-left:auto}
.fyr select{font-family:var(--sans);font-size:.74rem;padding:6px 8px;border-radius:8px;border:1px solid var(--rule-2);background:var(--panel);color:var(--ink)}
.fchips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.fchip{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.03em;
  color:var(--on-c);background:var(--c-books);border-radius:999px;padding:6px 12px 5px}
.fchip b{opacity:.75;font-weight:700}
.fchip:hover b{opacity:1}
.fchip.all{background:none;color:var(--ink-2);border:1px solid var(--rule-2)}
.fchip.all:hover{border-color:var(--ink)}
.wcount{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:6px 0 12px}
.wcount b{color:var(--ink);font-weight:800;letter-spacing:.01em}
.wcount b.qv{text-transform:none}
/* what the filtered books add up to, under the count */
.wsum{display:flex;flex-wrap:wrap;gap:6px 22px;margin:-6px 0 14px;padding:11px 0 0;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:.68rem;letter-spacing:.03em;color:var(--ink-3)}
.wsum b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.wsum a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.wsum a:hover{color:var(--c-books);border-color:var(--c-books)}
/* the matched run of a search, and the author as a way through from a result */
mark{background:color-mix(in srgb,var(--c-books) 20%,transparent);color:inherit;border-radius:2px;padding:0 2px}
/* the spoiler reveal on the book card */
.bc-spoil{margin:16px 0 0;border-top:1px solid var(--rule);padding-top:13px}
.bc-spoil summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:.67rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-books)}
.bc-spoil summary::-webkit-details-marker{display:none}
.bc-spoil summary:hover{color:var(--ink)}
.bc-spoil summary i{font-style:normal;font-weight:500;letter-spacing:.03em;text-transform:none;color:var(--ink-3)}
.bcs-m{display:inline-block;width:15px;height:15px;border:1px solid currentColor;border-radius:4px;position:relative;flex:none}
.bcs-m::before,.bcs-m::after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%)}
.bcs-m::before{width:7px;height:1.5px}
.bcs-m::after{width:1.5px;height:7px}
.bc-spoil[open] .bcs-m::after{display:none}
.bc-raw{margin-top:11px}
.lau{font:inherit;color:inherit;text-align:left;cursor:pointer;border-bottom:1px dotted var(--rule-2)}
.lau:hover,.lau:focus-visible{color:var(--c-books);border-bottom-color:var(--c-books)}

/* the wall: one spine per book, taller for longer, red where it earned an A.
   Rows are grid tracks so a spine's percentage height means something, and the
   shelf under each row is a repeating gradient at the row period. */
.wall{display:grid;grid-template-columns:repeat(auto-fill,6px);column-gap:1px;grid-auto-rows:96px;row-gap:16px;
  align-items:end;justify-content:start;padding-bottom:3px;
  background:repeating-linear-gradient(to bottom,transparent 0 96px,var(--ink) 96px 99px,transparent 99px 112px)}
.wall .sp{display:block;width:100%;background:var(--rule-2);border-radius:1px 1px 0 0;cursor:pointer;transition:opacity .15s}
.wall .ga,.wkey .ga{background:var(--c-books)}
.wall .gam,.wkey .gam{background:color-mix(in srgb,var(--c-books) 55%,var(--panel))}
.wall .gb,.wkey .gb{background:var(--ink-2)}
.wall .gc,.wkey .gc{background:var(--rule-2)}
.wall .sp.dim{opacity:.15}
.wall .sp:hover{outline:2px solid var(--ink);outline-offset:1px;opacity:1}
.wkey{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:14px 0 0;font-family:var(--sans);
  font-size:.64rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.wkey i{display:inline-block;width:8px;height:16px;margin-right:7px;vertical-align:-3px}
@media (max-width:700px){
  .wall{grid-template-columns:repeat(auto-fill,4px);grid-auto-rows:64px;row-gap:12px;padding-bottom:2px;
    background:repeating-linear-gradient(to bottom,transparent 0 64px,var(--ink) 64px 66px,transparent 66px 76px)}
  .vtog{margin-left:0}
  .fyr{margin-left:0}
}

/* list view */
#wview .tscroll{padding-bottom:20px}
#wview table{margin-top:6px}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover,th.on{color:var(--ink)}
th i{font-style:normal;margin-left:4px}
tr.lr{cursor:pointer}
@media (max-width:700px){td.pdc{display:none}}

/* pick one: the highest grade on each shelf, once genre is live */
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:4px 0 0}
.pk{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--rule);border-radius:14px;padding:16px 16px 14px;transition:border-color .15s}
.pk:hover{border-color:var(--c-books)}
.pk-g{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-books)}
.pk-g i{font-style:normal;color:var(--ink-3);font-weight:600}
.pk-gr{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--c-books);line-height:1}
.pk b{font-weight:600;font-size:1.05rem;line-height:1.3}
.pk span{font-size:.9rem;color:var(--ink-3)}
.pk p{margin:4px 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-2);border-left:2px solid var(--rule-2);padding-left:10px}
.gtag{font-family:var(--sans);font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--rule-2);border-radius:999px;padding:3px 9px 2px;margin-left:6px;vertical-align:2px;white-space:nowrap}

/* everything that names a book opens its card */
a.tcard{text-decoration:none;color:inherit;transition:border-color .15s}
a.tcard:hover{border-color:var(--c-books)}
a.tcard:hover h3{color:var(--c-books)}
.hon a.al{text-decoration:none;color:inherit}
.hon a.al:hover b{color:var(--c-books)}
.byh .bk{text-decoration:none;color:inherit;border-bottom:1px solid var(--rule-2)}
.byh .bk:hover{color:var(--c-books);border-color:var(--c-books)}
.arow .an i .bk{text-decoration:none;color:inherit;border-bottom:1px solid var(--rule-2)}
.arow .an i .bk:hover{color:var(--c-books);border-color:var(--c-books)}
.an-b{font-weight:500}
.an-b:hover{color:var(--c-books)}
.auth .arow{cursor:default}

/* the book card: side drawer on desktop, bottom sheet on a phone */
#bc-ov{position:fixed;inset:0;background:rgba(10,12,15,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}
.card-open #bc-ov{opacity:1;pointer-events:auto}
#bookcard{--c:var(--c-books);position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--panel);z-index:71;
  overflow-y:auto;transform:translateX(100%);transition:transform .25s ease;border-left:1px solid var(--rule);
  box-shadow:-20px 0 60px rgba(0,0,0,.18)}
.card-open #bookcard{transform:none}
.bc-in{padding:56px 30px 40px}
.bc-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--rule-2);
  display:grid;place-items:center;font-size:1.3rem;line-height:1;color:var(--ink-2);background:var(--panel);z-index:1}
.bc-x:hover{color:var(--ink);border-color:var(--ink)}
.bc-t{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.7rem;line-height:1.05;letter-spacing:-.03em;margin:18px 0 6px;text-wrap:balance}
.bc-a{margin:0 0 12px;font-size:1.05rem;color:var(--ink-2)}
.bc-au{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.bc-au:hover{color:var(--c-books);text-decoration-color:var(--c-books)}
.bc-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.bc-tag{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--c-books);color:var(--c-books);border-radius:999px;padding:5px 11px 4px}
.bc-tag:hover{background:var(--c-books);color:var(--on-c)}
#bookcard .bym{margin-top:4px}
#bookcard .bym .g{display:none}
.bc-note{font-size:1rem;line-height:1.55;color:var(--ink-2);border-left:2px solid var(--c-books);padding-left:14px;margin:18px 0 0}
.bc-sec{margin:26px 0 0;border-top:1px solid var(--rule);padding-top:14px}
.bc-sec h4{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.bl{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:baseline;text-decoration:none;color:inherit;
  padding:7px 0;border-bottom:1px solid var(--rule);font-size:.97rem;line-height:1.3}
.bl:hover .blt{color:var(--c-books)}
.bl.cur{background:var(--hover);margin:0 -8px;padding:7px 8px;border-radius:6px}
.bl.cur .blt{font-weight:600}
.blg{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--ink-3)}
.blg.hi{color:var(--c-books)}
.bly{font-family:var(--sans);font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bc-link{margin:28px 0 0;display:flex;flex-direction:column;gap:6px}
.bc-link span{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-3)}
.bc-link input{font-family:var(--sans);font-size:.8rem;padding:8px 10px;border:1px solid var(--rule-2);border-radius:8px;
  background:var(--ground);color:var(--ink-2);width:100%}
@media (max-width:700px){
  #bookcard{top:auto;left:0;right:0;width:100%;max-height:88vh;border-radius:16px 16px 0 0;border-left:0;
    border-top:1px solid var(--rule);transform:translateY(100%);box-shadow:0 -20px 60px rgba(0,0,0,.18)}
  .bc-in{padding:50px 20px 34px}
}
td.bt{font-weight:500}

/* footer */
footer{border-top:3px solid var(--ink);background:var(--panel)}
.colo{display:grid;grid-template-columns:1.35fr 1.15fr 1fr;gap:32px;padding:42px 0 46px}
.colo h5{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.colo p{margin:0 0 12px;color:var(--ink-2);font-size:1rem;max-width:44ch}
.colo ol{margin:0;padding-left:18px;color:var(--ink-2);font-size:.96rem;line-height:1.6}
.colo ol li{margin-bottom:7px}
.colo ul{list-style:none;margin:0;padding:0;color:var(--ink-2);font-size:.98rem;line-height:1.95}
.colo li i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:10px;font-style:normal}
.fmark{margin:0 0 14px;line-height:0}
.fmark .wm{width:186px;color:var(--ink)}
.fine{border-top:1px solid var(--rule);padding:14px 0 32px;display:flex;justify-content:space-between;gap:14px;
  flex-wrap:wrap;font-family:var(--sans);font-size:.67rem;letter-spacing:.055em;text-transform:uppercase;color:var(--ink-3)}
.fine .stu,.colo .stu{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:1px}
.fine .stu:hover,.colo .stu:hover{color:var(--c-books);border-color:var(--c-books)}


/* ---- The Shelf as a ledger: header, columns, shelves by year, sidebar ---- */
.shelf.wide{max-width:none;padding-top:34px}
.shead{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.shead h1{margin:0}
.shead .logdef{margin:0 !important;flex:1;min-width:260px}
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));border-top:3px solid var(--ink);margin:18px 0 0}
.lt{padding:14px 18px 14px 0;border-right:1px solid var(--rule);margin-right:18px}
.lt:last-child{border-right:0;margin-right:0}
.lt .v{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.55rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lt .v.t{font-size:1.1rem;letter-spacing:-.01em;padding-top:5px}
.lt .k{font-family:var(--sans);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:7px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 44px;align-items:start;margin-top:14px}
.maincol{min-width:0}
.side{position:sticky;top:18px;display:flex;flex-direction:column;gap:18px;padding-top:22px}
.sb{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:16px 18px 14px}
.sb h3{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.last{display:flex;flex-direction:column}
.lr2{display:grid;grid-template-columns:44px 26px 1fr;gap:8px;align-items:baseline;text-decoration:none;color:inherit;padding:6px 0;border-top:1px solid var(--rule)}
.lr2:first-child{border-top:0;padding-top:0}
.lr2:hover b{color:var(--c-books)}
.ld{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.lg{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--ink-3)}
.lg.hi{color:var(--c-books)}
.lt2{min-width:0;line-height:1.25;font-size:.95rem}
.lt2 b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt2 span{display:block;font-size:.8rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0 0 12px}
.mini b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.3rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mini span{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-top:4px;line-height:1.35}
.sparkl{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--rule);padding-top:10px}
.spark{display:block;width:100%;height:auto;overflow:visible}
.spark .ln{stroke-width:2}
.sparkl span{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.sparkl:hover span{color:var(--c-books)}
.iw2{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;border-color:var(--c-books)}
.iw2:hover{background:var(--hover)}
.iw2 .iwl{align-self:flex-start}
.iw2 .iwb{font-size:.88rem;line-height:1.4}
.iw2 .iwa{font-size:.66rem}
/* reading now */
.rn{border-color:var(--c-books);border-left-width:4px}
.rn h3{color:var(--c-books)}
.rn1{padding:4px 0 2px}
.rn1 + .rn1{border-top:1px solid var(--rule);margin-top:10px;padding-top:12px}
.rn1 .rt{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.12rem;line-height:1.2;letter-spacing:-.015em}
.rn1 .ra{display:block;font-size:.92rem;color:var(--ink-2);margin-top:2px}
.rn1 .rmeta,.nx1 .rmeta{font-family:var(--sans);font-size:.64rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;line-height:1.7}
.rn1 .rmeta i,.nx1 .rmeta i{font-style:normal;opacity:.55;margin:0 1px}
.rn1 .rbar{height:6px;background:var(--rule);border-radius:3px;overflow:hidden;margin-top:10px}
.rn1 .rbar i{display:block;height:100%;background:var(--c-books);border-radius:3px}
.rn1 .rpc{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
/* up next: the book on the shelf, not started */
.nx{border-top:1px solid var(--rule);margin-top:12px;padding-top:11px}
.nx.solo{border-top:0;margin-top:0;padding-top:0}
.nx h4{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 7px}
.nx1 + .nx1{margin-top:9px}
.nx1 b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.98rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink-2)}
.nx1 > span{display:block;font-size:.85rem;color:var(--ink-3);margin-top:1px}
.nx1 .rmeta{margin-top:5px}
/* shelves by year */
.yshelves{margin-top:6px}
.ysh{display:grid;grid-template-columns:58px 1fr auto;gap:0 14px;align-items:end;padding:10px 0 0;border-bottom:4px solid var(--ink)}
.ysh + .ysh{margin-top:12px}
.yl{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.03em;color:var(--ink-3);line-height:1;padding-bottom:6px;font-variant-numeric:tabular-nums}
.yrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 1px;min-height:62px}
.yrow .sp{display:block;width:5px;border-radius:1px 1px 0 0;cursor:pointer;transition:opacity .15s;background:var(--rule-2)}
.yshelves .ga{background:var(--c-books)}
.yshelves .gam{background:color-mix(in srgb,var(--c-books) 55%,var(--panel))}
.yshelves .gb{background:var(--ink-2)}
.yshelves .gc{background:var(--rule-2)}
.yrow .sp.dim{opacity:.15}
.yrow .sp:hover{outline:2px solid var(--ink);outline-offset:1px;opacity:1}
.ys{font-family:var(--sans);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);text-align:right;padding-bottom:6px;white-space:nowrap}
.ys b{color:var(--ink);font-weight:700}
.ys i{font-style:normal;opacity:.6;margin:0 2px}
.ys .none{opacity:.6;text-transform:none;letter-spacing:0}
.wkey .wk2{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
#wview .fbar{margin-top:0}
.maincol .fbar{border-top:0;padding-top:20px}
.maincol .sh2:first-of-type{margin-top:44px}
@media (max-width:1000px){
  /* On a phone the sidebar used to stack under the whole main column, which
     buried Reading now and Last ten below the charts. The aside becomes
     display:contents so its panels are ordered around the main column: the
     two live ones first, the rest after. */
  /* align-items:start from the desktop rule would size the column to its
     max-content and push 30px off the right edge of a phone */
  .cols{display:flex;flex-direction:column;align-items:stretch;gap:18px}
  .side{display:contents}
  .side .sb{max-width:640px}
  .rn{order:-2}
  .lastten{order:-1}
  .maincol{order:0}
  .yearnow{order:1}
  .iw2{order:2}
  .maincol .fbar{padding-top:6px}
}
@media (max-width:700px){
  .ysh{grid-template-columns:44px 1fr;gap:0 10px}
  .ys{grid-column:1/3;text-align:left;padding:4px 0 6px}
  .yrow .sp{width:4px}
  .yl{font-size:1rem}
  .lt{padding:12px 12px 12px 0;margin-right:12px}
  .lt .v{font-size:1.25rem}
  .wkey .wk2{margin-left:0;flex-basis:100%}
}

@media (max-width:760px){
  .colo{grid-template-columns:1fr;gap:26px}
  .slug{text-align:left}
}
/* ---- 19 October, second pass: search, covers, cards, the numbers ---- */
/* the masthead search, phones only, and only inside the library */
.mq{display:none;flex-basis:100%;margin:2px 0 0}
.mq input{width:100%;font-family:var(--sans);font-size:16px;padding:11px 16px;border-radius:999px;border:1px solid #4A3A28;
  background:#2E2114;color:var(--bar-ink)}
.mq input::placeholder{color:var(--bar-dim)}
.mq input:focus{outline:none;border-color:var(--brass)}
@media (max-width:1000px){body:not(.at-door) .mq{display:block}}
/* copy a link */
.clink{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-books);
  border:1px solid var(--rule-2);border-radius:999px;padding:4px 10px 3px;margin-left:10px;vertical-align:1px;white-space:nowrap}
.clink:hover{border-color:var(--c-books)}
.clink.did{background:var(--c-books);color:var(--on-c);border-color:var(--c-books)}
.clink.big{font-size:.66rem;padding:9px 14px 8px;margin:0;flex:none}
.bc-lr{display:flex;gap:8px;align-items:stretch}
.bc-lr input{min-width:0}
.wdnf{font-style:normal;color:var(--ink-3);font-weight:600;letter-spacing:.04em}
/* tags in the list */
.rrt{font-family:var(--sans);font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--rule-2);border-radius:999px;padding:2px 7px 1px;margin-left:6px;vertical-align:2px;white-space:nowrap}
.rrt.nt{color:var(--c-books);border-color:var(--c-books)}
td.gd.dn{color:var(--ink-3);font-size:.7rem;letter-spacing:.06em}
tr.dnfh td{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  padding:22px 0 8px;border-bottom:2px solid var(--rule-2)}
tr.dnfr td{color:var(--ink-2)}
/* covers */
.cv,.cvs{display:block;object-fit:cover;background:var(--rule);border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cvs{width:28px;height:42px}
td.cvc{width:28px;padding:9px 12px 9px 0}
td.bt{min-width:150px}
#wview table:has(.cvc){min-width:700px}
td.m.sr{max-width:130px;white-space:normal}
th.cvh{padding:0}
.bc-in.hascv{position:relative;padding-right:30px}
.bc-cv{float:right;margin:0 0 14px 18px;width:118px;shape-outside:margin-box}
.bc-cv .cv{width:118px;height:auto;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.last.withcv .lr2{grid-template-columns:28px 44px 26px 1fr;align-items:center}
.lcv .cvs{width:28px;height:42px}
.pk.withcv{padding-left:92px;position:relative;min-height:126px}
.pkcv{position:absolute;left:16px;top:16px;width:62px}
.pkcv .cv{width:62px;height:auto;border-radius:3px}
/* the note runs the full width of the card, under the cover */
.pk.withcv p{margin-left:-76px}
.pk.withcv .pk-g{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard.withcv{position:relative;padding-left:124px}
.tcv{position:absolute;left:20px;top:20px;width:88px}
.tcv .cv{width:88px;height:auto;border-radius:4px}
.byr.withcv .byy{display:flex;flex-direction:column;gap:8px}
.bycv{display:block;width:60px;line-height:0}
.bycv .cv{width:60px;height:auto}
.byr.withcv{grid-template-columns:74px 1fr}
.tipc{display:flex;gap:10px;align-items:flex-start}
.tipc img{width:46px;height:69px;object-fit:cover;border-radius:2px;flex:none}
.tipn{display:block;margin-top:4px;opacity:.8;font-style:italic}
#tip{max-width:300px}
@media (max-width:700px){
  .bc-cv{width:84px;margin-left:14px}.bc-cv .cv{width:84px}
  .pk.withcv{padding-left:92px;padding-top:16px}
  .tcard.withcv{padding-left:20px;padding-top:160px}
  td.cvc,th.cvh{display:none}
}
/* pick one for me */
.pick1{margin-left:auto;border-color:var(--c-books);color:var(--c-books)}
.pick1:hover{background:var(--c-books);color:var(--on-c)}
.ftog .pick1{font-size:.66rem}
@media (max-width:700px){.pick1{margin-left:0;flex-basis:100%;text-align:center}}
/* year labels are buttons now */
button.yl{cursor:pointer}
button.yl:hover{color:var(--c-books)}
@media (pointer:coarse){.ysh{cursor:pointer}}
/* did not finish */
.dnf{display:flex;flex-direction:column;border-top:3px solid var(--ink)}
.dnf1{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline;text-decoration:none;color:inherit;padding:13px 0;border-bottom:1px solid var(--rule)}
.dnf1:hover .dn-t b{color:var(--c-books)}
.dn-t{font-size:1.04rem;line-height:1.3}
.dn-t b{font-weight:600}
.dn-t span{color:var(--ink-3)}
.dn-m{font-family:var(--sans);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.dn-m i{font-style:normal;opacity:.55;margin:0 2px}
@media (max-width:620px){.dnf1{grid-template-columns:1fr}.dn-m{white-space:normal}}
/* the numbers */
.sh3{font-family:var(--sans);font-weight:800;font-size:1.12rem;letter-spacing:-.015em;margin:34px 0 4px}
.sh3 + .shp{margin:0 0 12px}
.recs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:14px 0 6px}
.rec{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:13px 15px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.rec .k{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rec b{font-weight:600;font-size:1.05rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.rec .s{font-family:var(--sans);font-size:.72rem;color:var(--ink-2)}
.rec .bk,.rec .who{text-decoration:none;color:inherit;border-bottom:1px solid var(--rule-2);font:inherit}
.rec .bk:hover,.rec .who:hover{color:var(--c-books);border-color:var(--c-books)}
.who{cursor:pointer}
.wsum .who{font-family:var(--sans);font-size:.72rem;font-weight:700;color:var(--c-books);border-bottom:1px solid var(--rule-2)}
.wkey.fig{margin:10px 0 0}
.figw svg .ga{fill:var(--c-books)}
.figw svg .gam{fill:color-mix(in srgb,var(--c-books) 55%,var(--panel))}
.figw svg .gb{fill:var(--ink-2)}
.figw svg .gc{fill:var(--rule-2)}
.figw svg .pbar{fill:var(--c-books);opacity:.85}
.heat{display:grid;gap:2px;align-items:center}
.hy{font-family:var(--sans);font-size:.6rem;font-weight:600;color:var(--ink-3);text-align:center}
.hg{font-family:var(--sans);font-size:.62rem;font-weight:700;color:var(--ink-2);padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hgb{border:0;padding:4px 0;font-size:.62rem;letter-spacing:.04em;background:none;color:var(--ink-2)}
.hgb:hover{color:var(--c-books)}
.hc{height:22px;border-radius:3px;background:color-mix(in srgb,var(--c-books) calc(var(--v) * 100% * 1.25),var(--panel));cursor:default}
.hc:hover{outline:2px solid var(--ink);outline-offset:-1px}
@media (max-width:700px){.heat{grid-template-columns:84px repeat(17,1fr)!important}.hc{height:16px}.hg,.hgb{font-size:.56rem}}
.calhead{display:flex;align-items:center;gap:14px;margin:0 0 8px;font-family:var(--sans)}
.calhead b{font-size:1.1rem;font-weight:800}
.calhead span{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);flex:1}
.calhead span i{font-style:normal;opacity:.55;margin:0 2px}
.calhead .fp[disabled]{opacity:.3;cursor:default}
.calm{display:grid;grid-template-columns:repeat(53,1fr);gap:2px;font-family:var(--sans);font-size:.58rem;font-weight:600;color:var(--ink-3);margin-bottom:3px}
.calm span{grid-row:1;white-space:nowrap}
.cal{display:grid;grid-template-columns:repeat(53,1fr);grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:2px}
.cal .cd{display:block;aspect-ratio:1;border-radius:2px;background:var(--rule)}
.cal .cd.out{background:transparent}
.cal .cd.on{background:color-mix(in srgb,var(--c-books) 28%,var(--panel))}
.cal .cd.fin{cursor:pointer}
.cal .cd.fin.ga{background:var(--c-books)}
.cal .cd.fin.gam{background:color-mix(in srgb,var(--c-books) 65%,var(--panel))}
.cal .cd.fin.gb{background:var(--ink-2)}
.cal .cd.fin.gc{background:var(--rule-2)}
.cal .cd:hover{outline:2px solid var(--ink);outline-offset:-1px}
@media (max-width:700px){.calhead span{display:none}.cal,.calm{gap:1px}}
/* author card */
.ac-mini{margin-top:4px}
.aspark{display:block;width:100%;height:auto;overflow:visible;margin:4px 0 0}
.aspark .apt{stroke:var(--panel);stroke-width:1.5}
.aspark .ga{fill:var(--c-books)}.aspark .gam{fill:color-mix(in srgb,var(--c-books) 55%,var(--panel))}
.aspark .gb{fill:var(--ink-2)}.aspark .gc{fill:var(--rule-2)}
.bc-acts{margin:22px 0 0}
.bc-acts .fp{border-color:var(--c-books);color:var(--c-books)}
.bc-acts .fp:hover{background:var(--c-books);color:var(--on-c)}
#bookcard .chips{margin:4px 0 0}
#bookcard .mini b{font-size:1.15rem}
/* genre pills scroll sideways on a phone instead of stacking four rows */
@media (max-width:700px){
  .fpills[aria-label="Genre"]{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;margin:0 -15px;padding-left:15px;padding-right:15px;-webkit-overflow-scrolling:touch}
  .fpills[aria-label="Genre"]::-webkit-scrollbar{display:none}
  .fpills[aria-label="Genre"] .fp{flex:none}
  .frow:has(.fpills[aria-label="Genre"]){display:block}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}