/* The Hundred — a working library.
   Palette: manila card stock and ink, with five spine colours taken from the
   section headings. Type: Bodoni Moda for display, Newsreader for reading. */

:root{
  --paper:#e8e0cc;
  --paper-deep:#ded4bc;
  --ink:#221e19;
  --ink-soft:#655b4c;
  --rule:#c3b69a;
  --spine:#221e19;
  --measure:66ch;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:0 1.5rem 5rem;
  background:var(--paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.45), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(120,98,60,.10), transparent 46%);
  color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:1.0625rem;
  line-height:1.62;
}

.masthead,.contents,.toolbar,.sectionnav,.skill,.foot,.empty{
  max-width:52rem;margin-left:auto;margin-right:auto;
}

/* ---------- masthead ---------- */
.masthead{padding:4.5rem 0 2.25rem;border-bottom:3px double var(--rule)}
.masthead.small{padding-bottom:1.75rem}
.kicker{
  margin:0 0 .9rem;font-size:.95rem;letter-spacing:.02em;
  color:var(--ink-soft);font-style:italic;
}
.kicker a{color:inherit}
.masthead h1{
  font-family:"Bodoni Moda",Didot,Georgia,serif;
  font-weight:700;
  font-size:clamp(2.9rem,11vw,5.25rem);
  line-height:.94;
  margin:0;
  letter-spacing:-.015em;
}
.masthead.small h1{border-bottom:6px solid var(--spine);display:inline-block;padding-bottom:.15rem}
.deck{
  margin:1.25rem 0 0;max-width:42ch;font-size:1.15rem;color:var(--ink-soft);
  font-weight:300;
}

/* ---------- contents ---------- */
.contents{padding:2.25rem 0 .5rem}
.toc{list-style:none;margin:0;padding:0;counter-reset:sec}
.toc li{
  padding:1rem 0 1.1rem 1.25rem;
  border-left:6px solid var(--spine);
  border-bottom:1px solid var(--rule);
}
.toc li:first-child{border-top:1px solid var(--rule)}
.toc a{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;
  text-decoration:none;color:var(--ink);
}
.tocname{
  font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:700;
  font-size:clamp(1.55rem,4.4vw,2.1rem);line-height:1.1;
}
.toc a:hover .tocname,.toc a:focus-visible .tocname{color:var(--spine)}
.tocrange{color:var(--ink-soft);font-size:.95rem;font-style:italic}
.tocblurb{margin:.45rem 0 0;max-width:58ch;color:var(--ink-soft);font-weight:300}

/* ---------- toolbar ---------- */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem 1.5rem;
  padding:2.5rem 0 1rem;
}
.find{flex:1 1 20rem}
.find span{display:block;font-style:italic;color:var(--ink-soft);margin-bottom:.35rem;font-size:.95rem}
.find input{
  width:100%;font:inherit;font-size:1.1rem;color:var(--ink);
  background:transparent;border:0;border-bottom:2px solid var(--ink);
  padding:.35rem 0;border-radius:0;
}
.find input::placeholder{color:#9a8f7c;font-style:italic}
.find input:focus{outline:0;border-bottom-color:var(--spine,var(--ink));background:rgba(255,255,255,.35)}
.count{margin:0;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- section nav ---------- */
.sectionnav{
  display:flex;flex-wrap:wrap;gap:.35rem .5rem;
  padding:.75rem 0 2rem;border-bottom:1px solid var(--rule);
}
.sectionnav a{
  --spine:var(--ink);
  text-decoration:none;color:var(--ink-soft);
  padding:.28rem .6rem;border:1px solid var(--rule);
  font-size:.95rem;background:rgba(255,255,255,.28);
}
.sectionnav a:hover,.sectionnav a:focus-visible{border-color:var(--spine);color:var(--spine)}
.sectionnav a.here{background:var(--spine);border-color:var(--spine);color:var(--paper)}

/* ---------- a skill section ---------- */
.skill{padding-top:3rem}
.skillhead{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem 1rem;margin:0 0 .25rem;
  border-bottom:6px solid var(--spine);padding-bottom:.35rem;
}
.skillhead span{
  font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:700;
  font-size:clamp(1.8rem,6vw,2.8rem);line-height:1.05;
}
.skillhead small{color:var(--ink-soft);font-style:italic;font-weight:400;font-size:.95rem}

/* ---------- the books ---------- */
.books{list-style:none;margin:0;padding:0}
.book{
  display:grid;grid-template-columns:3.1rem 1fr;gap:0 .9rem;
  padding:1.45rem 0 1.5rem;border-bottom:1px solid var(--rule);
}
.num{
  font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:600;
  font-size:1.05rem;line-height:1;
  background:var(--spine);color:var(--paper);
  padding:.42rem 0;text-align:center;
  align-self:start;margin-top:.3rem;
  font-variant-numeric:tabular-nums;
}
.bt{margin:0;font-size:1.3rem;line-height:1.3;font-weight:400}
.tt{font-weight:600}
.by{color:var(--ink-soft)}
.by::before{content:"by "}
.yr{color:var(--ink-soft);font-size:.95rem;font-style:italic;white-space:nowrap}
.yr::before{content:"("}
.yr::after{content:")"}
.sum{margin:.5rem 0 .7rem;max-width:var(--measure)}
.meta{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.15rem;
  font-size:.95rem;
}
.buy{display:flex;flex-wrap:wrap;gap:.5rem 1.15rem}
.buy a{color:var(--spine);text-underline-offset:3px;text-decoration-thickness:1px}
.buy a:hover,.buy a:focus-visible{background:var(--spine);color:var(--paper);text-decoration:none}
.track{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-soft);cursor:pointer;font-style:italic}
.track input{accent-color:var(--spine);width:1rem;height:1rem;cursor:pointer}
.book.finished .tt{text-decoration:line-through;text-decoration-color:var(--rule)}
.book.finished .num{background:transparent;color:var(--spine);border:1px solid var(--spine);padding:calc(.42rem - 1px) 0}
.book[hidden]{display:none}

.empty{padding:3rem 0;font-style:italic;color:var(--ink-soft)}

/* ---------- footer ---------- */
.foot{
  margin-top:4rem;padding-top:1.5rem;border-top:3px double var(--rule);
  color:var(--ink-soft);font-size:.95rem;max-width:58ch;
}
.foot p{margin:0 0 .7rem;}
.sig{color:var(--ink);font-style:italic;line-height:1.75}
.sig a{color:inherit;text-underline-offset:3px}

a:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (max-width:540px){
  body{padding:0 1.1rem 4rem;font-size:1.02rem}
  .book{grid-template-columns:2.5rem 1fr;gap:0 .7rem}
  .masthead{padding-top:3rem}
  .bt{font-size:1.18rem}
}

@media (prefers-reduced-motion:no-preference){
  .buy a,.sectionnav a,.tocname{transition:color .12s ease,background-color .12s ease,border-color .12s ease}
}

@media print{
  body{background:#fff;color:#000;padding:0;font-size:10.5pt}
  .toolbar,.sectionnav,.track,.buy{display:none}
  .book{break-inside:avoid;page-break-inside:avoid}
  .num{background:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}