/* Book recommendations */
/* ── BOOKS PAGE CSS ── */
#bk-page-wrap { background:#fff; color:var(--ink); }

.bk-hero {
padding: 120px 60px 72px;
border-bottom:1px solid var(--line);
position: relative; overflow: hidden;
background:#fff;
}
.bk-hero::before {
content: "READ";
position: absolute; right: -20px; bottom: -40px;
font-size:clamp(126px, 18vw, 234px); font-weight:700;
color:rgba(0,0,0,0.03); letter-spacing:-0.02em;
pointer-events: none; user-select: none; line-height:1.08;
font-family:var(--font-display);
}
.bk-hero-eye {
font-size:var(--eyebrow-size); letter-spacing: 4px; text-transform: uppercase;
color:var(--text-3); margin-bottom: 18px;
display: flex; align-items: center; gap: 12px;
animation: bkSlideUp .7s .1s cubic-bezier(.22,1,.36,1) both;
font-family:var(--font-body);
}
.bk-hero-eye::before { content: ""; width: 22px; height: 1px; background:#888; }
.bk-hero-h1 {
font-size:var(--fs-hero); font-weight:700;
letter-spacing:-0.02em; line-height:1.08; margin-bottom: 24px;
font-family:var(--font-display);
animation: bkSlideUp .9s .25s cubic-bezier(.22,1,.36,1) both;
}
.bk-hero-h1 em { font-style: italic; font-weight: 200; }
.bk-hero-sub {
color:var(--text-2); font-size: 15px; line-height: 1.7;
max-width: 500px; margin-bottom: 48px;
font-family:var(--font-body);
animation: bkSlideUp .7s .45s cubic-bezier(.22,1,.36,1) both;
}
.bk-kpi-row {
display: flex; gap: 0; border-top:1px solid var(--line);
animation: bkSlideUp .6s .6s cubic-bezier(.22,1,.36,1) both;
}
.bk-kpi-tile {
padding: 24px 36px; border-right:1px solid var(--line);
transition: background .2s; cursor: default; min-width: 120px;
}
.bk-kpi-tile:last-child { border-right:none; }
.bk-kpi-tile:hover { background:var(--cream); }
.bk-kpi-val {
font-size:clamp(25px, 3.6vw, 40px); font-weight:600; line-height:1.15;
letter-spacing:-0.012em; color:var(--ink); display: block;
font-family:var(--font-display);
}
.bk-kpi-lbl {
font-size:var(--eyebrow-size); letter-spacing: 2px; text-transform: uppercase;
color:var(--text-3); margin-top: 5px; font-family:var(--font-body);
}
@keyframes bkSlideUp {
from { opacity: 0; transform: translateY(32px); }
to { opacity: 1; transform: translateY(0); }
}

/* Suggest chips */
.bk-suggest-section {
padding: 32px 60px; border-bottom:1px solid var(--line);
background:var(--cream);
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bk-suggest-label {
font-size:var(--eyebrow-size); letter-spacing: 2px; text-transform: uppercase;
color:var(--text-3); flex-shrink: 0; font-family:var(--font-body);
}
.bk-suggest-chip {
border:1px solid var(--line); padding: 8px 18px;
font-family:var(--font-body); font-size:var(--eyebrow-size); letter-spacing: 1px;
text-transform: uppercase; cursor: pointer; background:#fff;
color:var(--text-2); transition: all .2s; font-weight: 600;
}
.bk-suggest-chip:hover { background:var(--ink); color:#fff; border-color:var(--ink); }

/* Filter section */
.bk-filter-section {
padding: 36px 60px; border-bottom:1px solid var(--line);
background:#fff; display: flex; flex-direction: column; gap: 20px;
}
.bk-search-wrap {
display: flex; align-items: center; gap: 10px;
border:1px solid var(--line); padding: 12px 18px;
max-width: 440px; background:var(--cream); transition: border-color .2s;
}
.bk-search-wrap:focus-within { border-color:var(--ink); }
.bk-search-icon { font-size: 14px; color:var(--text-3); }
.bk-search-input {
border:none; outline:none; background:transparent;
font-size: 14px; color:var(--ink); width: 100%;
font-family:var(--font-body);
}
.bk-search-input::placeholder { color:var(--text-3); }
.bk-filter-label {
font-size:var(--eyebrow-size); letter-spacing: 2px; text-transform: uppercase;
color:var(--text-3); margin-bottom: 10px; font-family:var(--font-body);
}
.bk-f-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-f-pill {
border:1px solid var(--line); padding: 6px 14px;
background:var(--cream); font-family:var(--font-body); font-size:var(--eyebrow-size);
letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
transition: all .15s; color:var(--text-2); font-weight: 600;
}
.bk-f-pill:hover { border-color:var(--ink); color:var(--ink); }
.bk-f-pill.active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* Books grid */
.bk-books-section { padding: 48px 60px 120px; }
.bk-grid-meta {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 28px;
}
.bk-grid-count { font-size: 11px; color:var(--text-3); letter-spacing: 1px; font-family:var(--font-body); }
.bk-books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1px; background: transparent;
}
/* lines around each card instead of a grey grid background: no empty blocks after a short row */
.bk-books-grid > .bk-card { box-shadow: 0 0 0 1px var(--line); }
.bk-group-header {
grid-column: 1/-1; background:#fff;
font-size:var(--eyebrow-size); font-weight: 800; letter-spacing: .16em;
text-transform: uppercase; color:var(--ink);
padding: 20px 20px 12px; border-bottom:2px solid var(--ink);
font-family:var(--font-body);
}
.bk-card {
background:#fff; padding: 24px 20px;
display: flex; flex-direction: column; gap: 8px;
border-top:3px solid transparent;
transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s;
cursor: default; position: relative; overflow: hidden;
}
.bk-card:hover {
transform: translateY(-4px);
box-shadow:0 14px 36px rgba(0,0,0,.09);
background:var(--cream);
}
.bk-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bk-rating-label { font-size:var(--eyebrow-size); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; font-family:var(--font-body); }
.bk-stars-num { font-size: 9px; color:var(--text-3); letter-spacing: 1px; font-weight: 600; font-family:var(--font-body); }
.bk-rating-bar-wrap { height: 2px; background:var(--line); border-radius:2px; width: 100%; margin: 2px 0 4px; }
.bk-rating-bar { height: 100%; border-radius:2px; transition: width .6s .1s cubic-bezier(.22,1,.36,1); }
.bk-title { font-size: 14px; font-weight: 800; line-height: 1.3; color:var(--ink); flex: 1; font-family:var(--font-body); }
.bk-why { font-size:15px; color:var(--text-2); line-height: 1.6; border-top:1px solid var(--line); padding-top: 8px; margin-top: auto; font-family:var(--font-body); }
.bk-comments-line { font-size: 11px; color:var(--text-3); line-height: 1.5; font-style: italic; font-family:var(--font-body); }
.bk-no-results { grid-column: 1/-1; padding: 80px 0; text-align: center; color:var(--text-3); font-size: 14px; display: none; font-family:var(--font-body); }

@media(max-width: 768px) {
.bk-hero { padding: 90px 24px 48px; }
.bk-suggest-section, .bk-filter-section, .bk-books-section { padding-left: 24px; padding-right: 24px; }
.bk-books-grid { grid-template-columns: 1fr 1fr; }
.bk-kpi-tile { padding: 18px 20px; min-width: 90px; }
}
@media(max-width: 480px) {
.bk-books-grid { grid-template-columns: 1fr; }
.bk-kpi-row { flex-wrap: wrap; }
}

.bk-card.s5{border-top-color:#16a34a}.bk-card.s4{border-top-color:#2563eb}.bk-card.s3{border-top-color:#d97706}.bk-card.s2,.bk-card.s1{border-top-color:#9ca3af}.bk-card.s0{border-top-color:#d1d5db}
label.bk-filter-label{display:block;font-weight:400}