/* Books, counted - one-page infographics. Muted palette, light + dark, no libraries. */
.ig{
  --paper:#ffffff; --ink:#1f1f1d; --ink2:#55534f; --mute:#6e6a63;
  --line:#e8e7e3; --line2:#d6d4cd; --wash:#f1f0ec;
  --fic:#c27555; --non:#3f7184; --stone:#8f8a7e; --ghost:#d9d7d0;
  --h0:#efeeea; --h1:#c6d9df; --h2:#a1c0cb; --h3:#7ba4b3; --h4:#58889a; --h5:#3f7184;
  --r:14px;
  position:relative; box-sizing:border-box; max-width:960px; margin:0 auto; padding:0 16px 56px;
  color:var(--ink); font-family:inherit; font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])) .ig[data-scheme="auto"]{
    --paper:#161615; --ink:#f0efec; --ink2:#bdbab2; --mute:#8a877f;
    --line:#2b2a28; --line2:#3a3936; --wash:#1f1f1d;
    --fic:#d9906f; --non:#7aa6b8; --stone:#a39d90; --ghost:#3a3936;
    --h0:#232322; --h1:#2f4a54; --h2:#3d6170; --h3:#4f7d8f; --h4:#6a9bad; --h5:#90bdcd;
  }
}
:root[data-theme="dark"] .ig{
  --paper:#161615; --ink:#f0efec; --ink2:#bdbab2; --mute:#8a877f;
  --line:#2b2a28; --line2:#3a3936; --wash:#1f1f1d;
  --fic:#d9906f; --non:#7aa6b8; --stone:#a39d90; --ghost:#3a3936;
  --h0:#232322; --h1:#2f4a54; --h2:#3d6170; --h3:#4f7d8f; --h4:#6a9bad; --h5:#90bdcd;
}
.ig *,.ig *::before,.ig *::after{box-sizing:border-box}
.ig ::selection{background:var(--h2);color:var(--ink)}
:where(.ig) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.ig a{color:inherit;text-decoration-color:var(--line2);text-underline-offset:3px}
.ig a:hover{text-decoration-color:currentColor}
.ig :focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.ig h1,.ig h2,.ig h3,.ig p{margin:0}
.ig-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ig-fail{padding:40px 0;color:var(--ink2)}

/* hero: the headline figures live in one sentence, then the shelf */
.ig-hero{padding:40px 0 8px}
.ig-hero h1{font-size:clamp(30px,6vw,46px);line-height:1.08;font-weight:650;letter-spacing:-.025em}
.ig-lede{margin-top:16px;color:var(--ink2);font-size:clamp(18px,2.3vw,21px);line-height:1.6;max-width:31em;text-wrap:pretty}
.ig-fig{color:var(--ink);font-weight:650;font-size:1.5em;line-height:1;letter-spacing:-.025em;white-space:nowrap}
.ig-src{display:block;margin-top:6px;color:var(--mute);font-size:14px}
.ig-shelf{display:flex;align-items:flex-end;gap:2px;height:104px;min-height:104px;overflow:hidden;margin-top:28px;padding:0 2px;border-bottom:3px solid var(--ink)}
.ig-spine{flex:none;border-radius:3px 3px 0 0;transform-origin:50% 100%;transition:transform .18s ease}
.ig-spine:hover{transform:translateY(-4px) rotate(-3deg)}
.ig-shelfcap{margin-top:8px;color:var(--mute);font-size:13px}

/* filter */
.ig-filter{position:sticky;top:0;z-index:6;margin:22px -16px 0;padding:10px 16px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.ig-filter-l{font-size:13px;color:var(--mute);flex:none}
.ig-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px;flex:1;-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 94%,transparent)}
.ig-chips::-webkit-scrollbar{display:none}
.ig-chip{flex:none;padding:7px 14px;border-radius:99px;border:1px solid var(--line2);font-size:14px;line-height:1.3;color:var(--ink2);transition:background .15s,color .15s,border-color .15s}
.ig-chip:hover{border-color:var(--ink2)}
.ig-chip[aria-checked="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ig-select{display:none;flex:1;font:inherit;font-size:15px;padding:9px 10px;border-radius:10px;border:1px solid var(--line2);background:var(--paper);color:var(--ink)}
@media (max-width:620px){.ig-chips{display:none}.ig-select{display:block}}

/* sections */
.ig-sec{margin-top:64px}
.ig-sec h2{font-size:clamp(21px,3.4vw,26px);line-height:1.2;font-weight:620;letter-spacing:-.015em;max-width:30em;text-wrap:balance}
.ig-sub{margin-top:6px;color:var(--ink2);font-size:14px;max-width:44em}
.ig-body{margin-top:18px}
.ig-note{margin-top:10px;color:var(--mute);font-size:12.5px;line-height:1.4}
.ig-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink2);margin-bottom:6px}
.ig-legend span{display:inline-flex;align-items:center;gap:6px}
.ig-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.is-fic{background:var(--fic)} .is-non{background:var(--non)} .is-all{background:var(--stone)} .is-ink{background:var(--ink)} .is-ghost{background:var(--ghost)}
.ig svg{display:block;width:100%;height:auto;overflow:visible}
.ig svg text{font-family:inherit;font-size:11.5px;fill:var(--mute)}
.ig svg text.lab{fill:var(--ink2)}
.ig svg text.strong{fill:var(--ink);font-weight:600}
.ig svg .grid{stroke:var(--line);stroke-width:1}
.ig svg .axis{stroke:var(--line2);stroke-width:1}
.ig svg .fic{fill:var(--fic)} .ig svg .non{fill:var(--non)} .ig svg .stone{fill:var(--stone)} .ig svg .ghost{fill:var(--ghost)}
.ig svg .lfic{stroke:var(--fic);fill:none} .ig svg .lnon{stroke:var(--non);fill:none}
.ig svg .dim{opacity:.38}
/* selectable columns: a faint wash on hover says "this can be chosen" */
.ig svg .hit{fill:var(--ink);fill-opacity:0;cursor:pointer;transition:fill-opacity .12s}
.ig svg .hit:hover{fill-opacity:.05}
.ig svg .hit.open{fill-opacity:.08}
.ig svg .hit:focus-visible{outline:none;stroke:var(--ink);stroke-width:2;rx:6}
.ig svg .pick{cursor:pointer}
.ig svg .aim{stroke:var(--ink2);stroke-width:1}
.ig svg .ring{stroke:var(--paper);stroke-width:2}

/* two-column layout */
.ig-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px}
@media (max-width:760px){.ig-cols{grid-template-columns:1fr}}
.ig-h3{font-size:15px;font-weight:620;margin:0 0 2px}
.ig-col .ig-sub{margin-top:2px}

/* bar rows (authors, categories, languages, ratings) */
.ig-rows{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.ig-row{display:grid;grid-template-columns:minmax(0,38%) 1fr auto;align-items:center;gap:10px;width:100%;text-align:left;min-height:28px}
.ig-row .n{font-size:14px;line-height:1.25;color:var(--ink)}
.ig-row .t{height:14px;border-radius:99px;background:var(--wash);overflow:hidden;position:relative}
.ig-row .b{position:absolute;inset:0 auto 0 0;border-radius:99px;transform-origin:0 50%}
.ig-row .c{font-size:13px;color:var(--ink2);min-width:2.2em;text-align:right;font-variant-numeric:tabular-nums}
button.ig-row:hover .n{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.ig-more{display:none;margin:2px 0 6px;padding:8px 12px 8px 14px;border-left:1px solid var(--line2);font-size:13px;color:var(--ink2)}
.ig-more.open{display:block}
.ig-more li{margin:2px 0}
.ig-more ul{margin:0;padding:0;list-style:none}
.ig-empty{margin-top:14px;color:var(--mute);font-size:14px}

/* heatmap */
.ig-heat,.ig-mbars{display:grid;grid-template-columns:40px repeat(12,minmax(0,1fr)) 34px;gap:3px}
.ig-heat{align-items:center;margin-top:8px}
.ig-heat .hd{font-size:11.5px;color:var(--mute);text-align:center;padding-bottom:2px}
.ig-heat .hd .sm{display:none}
.ig-heat .yr{font-size:12.5px;color:var(--ink2);padding-right:4px;font-variant-numeric:tabular-nums}
.ig-heat .tot{font-size:12px;color:var(--mute);text-align:right;font-variant-numeric:tabular-nums}
.ig-heat .row{display:contents}
.ig-heat .row.dim>*{opacity:.35}
.ig-cell{display:block;height:24px;border-radius:7px;background:var(--h0);position:relative;transition:transform .12s ease,box-shadow .12s}
.ig-cell.c1{background:var(--h1)} .ig-cell.c2{background:var(--h2)} .ig-cell.c3{background:var(--h3)} .ig-cell.c4{background:var(--h4)} .ig-cell.c5{background:var(--h5)}
.ig-cell.fu{background:transparent;border:1px dashed var(--line2)}
.ig-cell.on:hover{transform:scale(1.14)}
.ig-cell.open{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.ig-mbars{align-items:stretch;height:62px;margin-top:6px;padding-top:4px;border-top:1px solid var(--line)}
.ig-mbars .mb{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;border-radius:5px 5px 0 0}
.ig-mbars .b{display:block;background:var(--stone);border-radius:5px 5px 0 0;min-height:2px;position:relative;transform-origin:50% 100%;transition:background .12s}
.ig-mbars .mb.mx .b{background:var(--ink)}
.ig-mbars button.mb:hover .b{background:var(--ink2)}
.ig-mbars .mb.open .b{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.ig-mbars .b span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:11px;color:var(--ink2);padding-bottom:2px;white-space:nowrap}
.ig-mbars .lbl{font-size:12px;color:var(--ink2);align-self:center;padding-right:4px}
.ig-scale{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;margin-top:12px;font-size:12px;color:var(--mute)}
.ig-scale i{width:18px;height:12px;border-radius:4px;display:inline-block}
/* phones: drop the total column (it is in the numbers table) so each month gets a usable target */
@media (max-width:600px){
  .ig-heat,.ig-mbars{grid-template-columns:34px repeat(12,minmax(0,1fr));gap:2px}
  .ig-heat .tt,.ig-mbars .tt{display:none}
  .ig-heat .hd .lg{display:none} .ig-heat .hd .sm{display:inline}
  .ig-heat .yr{font-size:11.5px;padding-right:2px}
  .ig-cell{height:28px;border-radius:6px}
  .ig-scale i{height:12px}
}

/* book list panel (months, page lengths) */
.ig-panel{margin-top:16px;padding:16px;border:1px solid var(--line2);border-radius:var(--r);background:var(--wash)}
.ig-panel[hidden]{display:none}
.ig-panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.ig-x{flex:none;margin:-8px -10px -8px 0;padding:8px 10px;font-size:14px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}

/* books */
.ig-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:16px 14px}
.ig-book{display:block;text-decoration:none!important;font-size:12.5px;line-height:1.3}
.ig-book .cv{display:block;aspect-ratio:2/3;border-radius:6px 9px 9px 6px;overflow:hidden;background:var(--ghost);box-shadow:inset 3px 0 0 rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.12);transition:transform .18s ease}
.ig-book:hover .cv{transform:translateY(-3px) rotate(-1.5deg)}
.ig-book:nth-child(even):hover .cv{transform:translateY(-3px) rotate(1.5deg)}
.ig-book img{width:100%;height:100%;object-fit:cover;display:block}
.ig-ph{width:100%;height:100%;padding:8px 6px 8px 9px;display:flex;align-items:flex-end;font-size:11px;line-height:1.2;font-weight:600;color:var(--ink2);background:var(--wash);border-left:5px solid var(--non);overflow:hidden;overflow-wrap:break-word;hyphens:auto}
.ig-ph.f{border-left-color:var(--fic)}
.ig-xc .ig-ph{font-size:9.5px;padding:6px 4px 6px 7px}
.ig-book .tt{display:block;margin-top:7px;color:var(--ink);font-weight:550;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ig-book .au{display:block;color:var(--mute);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-btn{margin-top:22px;padding:9px 18px;border:1px solid var(--line2);border-radius:99px;font-size:14px;color:var(--ink2);background:var(--paper)}
.ig-btn:hover{border-color:var(--ink2);color:var(--ink)}

/* short and long */
.ig-ext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media (max-width:620px){.ig-ext{grid-template-columns:1fr}}
.ig-xc{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r);align-items:flex-start}
.ig-xc .ig-book{width:64px;flex:none}
.ig-xc .k{font-size:12.5px;color:var(--mute)}
.ig-xc .big{font-size:30px;line-height:1.1;font-weight:650;letter-spacing:-.02em}
.ig-xc .big small{font-size:.5em;font-weight:500;color:var(--mute);letter-spacing:0}
.ig-xc .ti{margin-top:4px;font-weight:580;line-height:1.3}
.ig-xc .au{font-size:13px;color:var(--ink2)}
.ig-xc .cmp{margin-top:6px;font-size:13px;color:var(--ink2)}

/* time-lapse */
.ig-ctl{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.ig-play{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 16px 7px 12px;border-radius:99px;background:var(--ink);color:var(--paper)!important;font-size:14px;font-weight:550}
.ig-play svg{width:12px;height:12px;overflow:visible}
.ig-play svg path{fill:var(--paper)}
.ig-range{flex:1;min-width:140px;accent-color:var(--ink2)}
.ig-when{font-size:13px;color:var(--ink2);min-width:11em;font-variant-numeric:tabular-nums}

/* the five-star shelf: the page's last and warmest moment */
.ig-five{margin-top:80px;padding:40px 28px 34px;background:var(--wash);border-radius:var(--r)}
.ig-five h2{font-size:clamp(24px,4.4vw,34px);line-height:1.15;letter-spacing:-.02em;max-width:22em}
.ig-five .ig-sub{font-size:15px}
.ig-five .ig-body{margin-top:28px}
.ig-five .ig-ph{background:var(--paper)}
.ig-five .ig-row .t{background:var(--paper)}
/* covers stand on one continuous shelf line, like the spines at the top */
.ig-shelf5{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));column-gap:0;row-gap:26px}
.ig-shelf5 .ig-book{padding:0 9px}
.ig-shelf5 .sh{display:block;margin:0 -9px;padding:0 9px;border-bottom:3px solid var(--ink)}
.ig-shelf5 .tt{margin-top:9px}
@media (max-width:620px){
  .ig-five{margin:72px -16px 0;padding:32px 16px 28px;border-radius:0}
  .ig-shelf5{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* tooltip */
.ig-tip{position:absolute;z-index:20;pointer-events:none;max-width:240px;padding:8px 11px;border-radius:10px;background:var(--ink);color:var(--paper);font-size:13px;line-height:1.35;opacity:0;transition:opacity .08s}
.ig-tip.on{opacity:1}
.ig-tip b{display:block;font-weight:620}
.ig-tip .r{display:flex;align-items:center;gap:7px}
.ig-tip .d{width:8px;height:8px;border-radius:50%;flex:none}
.ig-tip .m{opacity:.75}

/* details + table */
.ig-numbers{margin-top:48px;border-top:1px solid var(--line);padding-top:14px}
.ig-numbers summary{cursor:pointer;font-size:14px;color:var(--ink2)}
.ig-numbers table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;font-variant-numeric:tabular-nums}
.ig-numbers th,.ig-numbers td{padding:5px 8px;text-align:right;border-bottom:1px solid var(--line)}
.ig-numbers th:first-child,.ig-numbers td:first-child{text-align:left}
.ig-numbers th{color:var(--mute);font-weight:500}
.ig-tablewrap{overflow-x:auto}
.ig-foot{margin-top:28px;color:var(--mute);font-size:12.5px;line-height:1.5}
.ig-foot a{color:var(--ink2)}

/* motion */
@keyframes igGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes igGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes igPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.ig .grow-y{animation:igGrowY .7s cubic-bezier(.2,.7,.2,1) both}
.ig .grow-x{animation:igGrowX .8s cubic-bezier(.2,.7,.2,1) both}
.ig .pop{animation:igPop .5s cubic-bezier(.2,.9,.3,1.3) both}
.ig svg .grow-y{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){
  .ig *,.ig *::before,.ig *::after{animation:none!important;transition:none!important}
  .ig .ig-play{display:none}
}
@media print{.ig-filter{position:static}.ig-tip{display:none}.ig-five{background:none}}

/* on the WordPress page: the theme already prints the page title, and the admin bar must not cover the sticky filter */
.ig[data-heading="off"] .ig-hero{padding-top:8px}
body.admin-bar .ig-filter{top:32px}
@media (max-width:782px){body.admin-bar .ig-filter{top:46px}}