/* Bumblebrook book pages (and the Look inside hub). Uses the tokens in site.css. */
.crumbs{padding-top:18px;padding-bottom:4px;font:650 15px var(--sans)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.crumbs a:hover{color:var(--red)}
.bk-hero{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding-top:12px;padding-bottom:clamp(36px,5vw,64px)}
.bk-cover img{width:100%;border-radius:6px;box-shadow:0 26px 40px -22px #183f3baa,0 0 0 1px #0000000f}
.bk-info h1{margin:0 0 14px}
.bk-hook{font-size:clamp(18px,1.8vw,21px);line-height:1.5;color:#2b4a45;margin:0 0 18px;max-width:30em}
.bk-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0}
.bk-facts li{padding:6px 14px;border-radius:999px;background:var(--soft);font:650 14px var(--sans)}
.bc-finds{display:flex;align-items:center;gap:8px;margin:0 0 22px;font:650 15px/1.35 var(--sans)}
.bc-w{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#fbe9c4}
.bc-w img{width:14px;height:auto}
.bk-actions{display:flex;flex-wrap:wrap;gap:12px}
.look{background:var(--soft);padding-top:clamp(44px,6vw,72px)}
.look h2{margin:0 0 24px}
.spreads{display:grid;gap:22px}
.spread{margin:0}
.spread img{width:100%;border-radius:10px;box-shadow:0 18px 32px -22px #183f3b99}
.spread figcaption{margin-top:8px;font:13px var(--sans);color:var(--muted);text-align:right}
.bk-about{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.bk-desc h2{margin:0 0 18px}
.bk-desc p{max-width:36em}
.bk-desc .bk-lead{font:clamp(20px,2vw,24px)/1.35 var(--serif);color:var(--ink)}
.bk-desc h3{font-size:22px;margin:26px 0 10px}
.bk-desc ul{padding-left:1.2em;margin:0 0 1em}
.bk-desc li{margin:0 0 8px}
.bk-side{display:grid;gap:18px}
.bk-finds,.bk-details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.bk-side h3{font:700 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8b482e;margin:0 0 12px}
.bk-finds ul{margin:0;padding:0;list-style:none}
.bk-finds li{position:relative;padding-left:24px;margin:0 0 8px;font-size:16px}
.bk-finds li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:50%;border:2px solid var(--red)}
.bk-details dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 18px;font-size:15px}
.bk-details dt{color:var(--muted)}
.bk-details dd{margin:0;font-weight:650}
.bk-details .btn{width:100%}
.more{padding-top:clamp(40px,5vw,64px)}
.more h2{margin:0 0 22px;font-size:clamp(26px,3vw,34px)}
.more-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,220px));gap:22px}
.more-grid a{display:flex;flex-direction:column;gap:10px;font:400 20px var(--serif);color:var(--ink)}
.more-grid a:hover{color:var(--red)}
.more-grid img{border-radius:5px;box-shadow:0 14px 24px -16px #183f3b99;transition:transform .2s}
.more-grid a:hover img{transform:translateY(-3px)}
.lib-grid{grid-template-columns:repeat(auto-fill,minmax(180px,260px))}
@media (max-width:760px){
  .bk-hero{grid-template-columns:1fr;text-align:center}
  .bk-cover{max-width:300px;margin:0 auto}
  .bk-hook{margin-left:auto;margin-right:auto}
  .bk-facts,.bk-actions,.bc-finds{justify-content:center}
  .bk-actions .btn{width:100%;white-space:normal}
  .bk-about{grid-template-columns:1fr}
  .spreads{gap:14px;margin:0 calc(var(--gut) * -1)}
  .spread img{border-radius:0}
  .spread figcaption{padding:0 var(--gut)}
  .more-grid{grid-template-columns:1fr 1fr;gap:14px}
  .more-grid a{font-size:17px}
}