/* books-like.com — single stylesheet
   Extracted from the design mockups. Mobile-first; the book page needs no
   media queries (intrinsic clamp() + auto-fit grids). */

:root {
  --bg:        #f7f3ec;   /* page */
  --bg-sunk:   #f1ebde;   /* footer, genre pill */
  --card:      #fffdf8;   /* cards, inputs */
  --ink:       #2b2723;   /* primary text */
  --ink-2:     #37322b;   /* body copy (reasons, blurb) */
  --muted:     #6b6355;   /* secondary text */
  --muted-2:   #5c554c;
  --mono-dim:  #8a7f6c;   /* mono metadata */
  --mono-dim2: #a99f8c;
  --mono-dim3: #7c7263;
  --tag:       #b0917c;   /* rec index, eyebrow */
  --accent:    #9a3b2e;   /* links, buttons */
  --accent-dk: #7e2f24;   /* link/button hover */
  --accent-bg: #fbf1ef;   /* accent chip fill */
  --accent-bd: #e0c9c2;   /* accent chip border */
  --line:      #ded6c6;   /* section rules */
  --line-2:    #e4ddd0;   /* card border */
  --cover:     #e9e0cf;   /* cover fallback fill */
  --cover-bd:  #d3c9b5;
  --cover-bd2: #d8cfbd;
  --sans-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif:     'Spectral', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

figure { margin: 0; }  /* browser default is 1em 40px — deadly around covers */

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dk); }

img { max-width: 100%; display: block; }

/* ---- Layout shells ---------------------------------------------------- */
.wrap        { max-width: 1080px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 34px); }
.wrap-narrow { max-width: 960px;  margin: 0 auto; padding: clamp(22px, 5vw, 44px) clamp(16px, 4vw, 34px); }

/* ---- Site header (navbar) --------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(247, 243, 236, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; padding-block: 13px; }
.site-nav { margin-left: auto; display: flex; gap: clamp(14px, 3vw, 26px); }
.site-nav a { font-size: 14px; color: var(--muted); }
.site-nav a:hover { color: var(--accent); }
/* "How it works" yields on the narrowest screens (still in the footer) */
@media (max-width: 360px) { .site-nav a:nth-child(2) { display: none; } }
.brand {
  display: flex; align-items: baseline; gap: 2px;
  font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--ink);
}
.brand span { color: var(--accent); }
.brand:hover { color: var(--accent); }

/* ---- Site footer ------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-sunk); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 48px);
  justify-content: space-between; padding-block: clamp(28px, 4vw, 40px); }
.site-footer__intro { max-width: 34ch; display: flex; flex-direction: column; gap: 8px; }
.site-footer__intro p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.footer-nav { display: flex; flex-wrap: wrap; gap: clamp(30px, 4vw, 56px); }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h2 { margin: 0; font-family: var(--sans-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mono-dim2); }
.footer-col a { font-family: var(--sans-mono); font-size: 13px; color: var(--muted-2); }
.footer-legal { border-top: 1px solid #e2dacb; }
.footer-legal .wrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  padding-block: 14px; font-family: var(--sans-mono); font-size: 11px; color: var(--mono-dim2); }

/* ---- Breadcrumb ------------------------------------------------------- */
.crumbs { font-family: var(--sans-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--mono-dim);
  margin-bottom: clamp(18px, 4vw, 28px); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--mono-dim); }
.crumbs a:hover { color: var(--accent); }
.crumbs .current { color: var(--mono-dim2); }

/* ---- Covers ----------------------------------------------------------- */
.cover {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border: 1px solid var(--cover-bd2); border-radius: 2px; background: var(--cover);
  box-shadow: 0 1px 3px rgba(43, 39, 35, 0.14);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
/* Fallback shown when no cover image exists */
.cover--empty {
  display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px;
  background: repeating-linear-gradient(135deg, rgba(43,39,35,.035) 0 7px, rgba(43,39,35,0) 7px 14px), var(--cover);
}
.cover--empty .cover__brand { font-family: var(--sans-mono); font-size: 8px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #9a8f79; }
.cover--empty .cover__title { font-family: var(--serif); font-size: 15px; line-height: 1.24;
  font-weight: 600; color: #3a342c; text-wrap: balance; overflow-wrap: break-word; }
.cover--empty .cover__author { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--muted); }

/* ---- Book card (atom, reused in grids) -------------------------------- */
.book-card { display: flex; flex-direction: column; gap: 9px; color: var(--ink); }
.book-card:hover { color: var(--ink); }
.book-card:hover .book-card__title { color: var(--accent); }
.book-card__meta { display: flex; flex-direction: column; gap: 2px; }
.book-card__title { font-weight: 600; font-size: 15px; line-height: 1.24; color: var(--ink); text-wrap: pretty; overflow-wrap: break-word; }
.book-card__author { font-style: italic; font-size: 13px; color: var(--muted); }

/* ---- Book page header ------------------------------------------------- */
.book-head { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 34px); align-items: flex-start;
  border-bottom: 1px solid var(--line); padding-bottom: clamp(24px, 4vw, 34px); }
.book-head__cover { flex: 0 0 auto; width: clamp(116px, 30%, 178px); border-radius: 3px;
  border-color: var(--cover-bd); box-shadow: 0 4px 14px rgba(43, 39, 35, 0.16); }
.book-head__cover.cover--empty { padding: 18px 15px; }
.book-head__cover .cover__brand { font-size: 9px; }
.book-head__cover .cover__title { font-size: 19px; line-height: 1.22; }
.book-head__cover .cover__author { font-size: 13px; }
.book-head__body { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 14px; }
.genre-pill { align-self: flex-start; font-family: var(--sans-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mono-dim); border: 1px solid var(--line-2);
  background: var(--bg-sunk); padding: 5px 11px; border-radius: 100px; }
.book-title { margin: 0; font-weight: 600; font-size: clamp(26px, 5vw, 40px); line-height: 1.12;
  letter-spacing: -0.01em; text-wrap: balance; }
.book-title em { font-style: italic; color: var(--accent); }
.book-byline { margin: 0; font-family: var(--sans-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--mono-dim3); }
.book-blurb { margin: 0; font-size: clamp(15px, 2.4vw, 17px); line-height: 1.66; color: var(--ink-2);
  max-width: 52ch; text-wrap: pretty; }

/* ---- Recommendations section ------------------------------------------ */
.recs { padding-top: clamp(30px, 5vw, 44px); }
.recs__title { margin: 0 0 6px; font-weight: 600; font-size: clamp(21px, 3.4vw, 28px); line-height: 1.2; text-wrap: balance; }
.recs__title em { font-style: italic; }
.recs__dek { margin: 0 0 clamp(20px, 3vw, 26px); font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 56ch; }
.recs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(16px, 2vw, 20px); align-items: stretch; }

/* ---- Recommendation card (the heart of the page) ---------------------- */
.rec-card { display: flex; flex-direction: column; gap: 16px; height: 100%;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 5px;
  padding: 22px; box-shadow: 0 1px 3px rgba(43, 39, 35, 0.05); }
.rec-card__head { display: flex; gap: 15px; align-items: flex-start; }
.rec-card__cover { flex: 0 0 auto; width: 70px; }
.rec-card__cover.cover--empty { padding: 9px 8px; }
.rec-card__cover .cover__title { font-size: 11px; line-height: 1.2; }
.rec-card__cover .cover__author { font-size: 9px; }
.rec-card__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rec-card__index { font-family: var(--sans-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--tag); }
/* no text-wrap:balance here: combined with break opportunities inside
   words it splits words that would fit; plain greedy wrap + emergency
   break-word keeps whole words unless one truly can't fit the column */
.rec-card__title { margin: 0; font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--ink); overflow-wrap: break-word; }
.rec-card__title a { color: var(--ink); }
.rec-card__title a:hover { color: var(--accent); }
.rec-card__byline { font-size: 14px; color: var(--muted); }
.rec-card__byline .pub { font-family: var(--sans-mono); font-size: 11px; color: var(--mono-dim); }
/* The reason — most important content on the page */
.rec-card__reason { margin: 0; flex: 1; font-size: 16px; line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.rec-card__reason p { margin: 0 0 0.75em; }
.rec-card__reason p:last-child { margin-bottom: 0; }
.buy-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: var(--card); padding: 11px 18px; border-radius: 3px;
  font-family: var(--sans-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.buy-btn:hover { background: var(--accent-dk); color: var(--card); }
.buy-btn span { font-size: 14px; }

/* ---- Genre / listing pages -------------------------------------------- */
.listing__eyebrow { font-family: var(--sans-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tag); }
.listing__title { margin: 4px 0 8px; font-weight: 600; font-size: clamp(28px, 4vw, 38px); line-height: 1.1; }
.listing__intro { margin: 0 0 6px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 56ch; }
.listing__meta { margin: 0 0 clamp(24px, 3vw, 32px); font-family: var(--sans-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--mono-dim2); }
/* auto-fill, not auto-fit: empty tracks must survive so a section with
   one book (single-book author pages) keeps its card at column width
   instead of stretching it across the row */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: clamp(16px, 2.5vw, 26px); }

/* ---- Pagination ------------------------------------------------------- */
/* ---- Static prose pages (about, how it works, contact) ---------------- */
.prose { max-width: 62ch; }
.prose p { margin: 0 0 1em; font-size: 16.5px; line-height: 1.66; color: var(--ink-2); text-wrap: pretty; }
.prose h2 { margin: 1.6em 0 0.5em; font-weight: 600; font-size: 21px; line-height: 1.25; }
.prose a { color: var(--accent); }
.prose a:hover { color: var(--accent-dk); }
.prose blockquote { margin: 1.8em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--accent-bd); }
.prose blockquote p { margin: 0 0 0.7em; font-style: italic; font-size: 15px; line-height: 1.58; color: var(--muted-2); }
.prose blockquote cite { display: block; font-style: normal; font-family: var(--sans-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mono-dim); }

.pagination { margin-top: clamp(26px, 4vw, 36px); padding-top: clamp(18px, 3vw, 24px);
  border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  font-family: var(--sans-mono); font-size: 13px; }
.pagination a, .pagination span { padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 4px; }
.pagination a { background: var(--card); color: var(--muted-2); }
.pagination a:hover { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }
.pagination [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--card); }

/* ---- Homepage --------------------------------------------------------- */
.home { padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px); display: flex; flex-direction: column;
  gap: clamp(28px, 4vw, 38px); text-align: center; align-items: center; }
.home__eyebrow { font-family: var(--sans-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #9a8f79; }
.home__title { margin: 0; font-weight: 600; font-size: clamp(30px, 6vw, 46px); line-height: 1.08;
  letter-spacing: -0.01em; text-wrap: balance; }
.home__lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted-2); max-width: 50ch; text-wrap: pretty; }
.home-featured { display: flex; flex-direction: column; gap: 14px; width: 100%; text-align: left; }
/* one modest shelf row at every width: 8 small covers fit the column on
   desktop; anything narrower swipes horizontally */
.home-featured .card-grid {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.home-featured .book-card {
  flex: 0 0 clamp(96px, calc((100% - 7 * 14px) / 8), 112px);
  scroll-snap-align: start;
}
.home-featured .book-card__title { font-size: 13px; line-height: 1.25; }
.home-featured .book-card__author { font-size: 11px; }
/* mobile: bleed the shelf under the right screen edge so a sliced cover
   signals "swipe" (page padding = .home inset + .wrap-narrow inset) */
@media (max-width: 640px) {
  .home-featured .card-grid {
    margin-right: calc(-1 * (clamp(24px, 5vw, 48px) + clamp(16px, 4vw, 34px)));
    padding-right: clamp(24px, 5vw, 48px);
  }
}
.genre-browse { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.genre-browse__label { font-family: var(--sans-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mono-dim2); }
.genre-list { list-style: none; margin: 0; padding: 0; text-align: left;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.genre-list a { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  font-size: 15px; line-height: 1.28; color: var(--ink-2); border: 1px solid var(--line-2);
  background: var(--card); padding: 10px 13px; border-radius: 4px; }
.genre-list a:hover { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }
.genre-list .count { flex: 0 0 auto; font-family: var(--sans-mono); font-size: 11px; color: var(--mono-dim2); padding-top: 2px; }