:root{
  --ink:#15171a;
  --ink-soft:#6b7178;
  --line:#e7e7e5;
  --bg:#ffffff;
  --accent:#2456de;
  --star:#e0a12b;
  --cover-w:110px;
  --cover-h:165px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.55;
  font-size:16px;
}
.wrap{max-width:720px;margin:0 auto;padding:0 24px;}

/* header */
header.site{
  display:flex;align-items:center;gap:12px;
  padding:20px 0;border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.avatar{width:34px;height:34px;border-radius:50%;background:#d8d8d5;flex:none;}
.site-name{font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;}
nav.site{margin-left:auto;display:flex;gap:22px;font-size:14px;flex-wrap:wrap;}
nav.site a{color:var(--ink-soft);text-decoration:none;}
nav.site a:hover, nav.site a:focus-visible{color:var(--ink);}
nav.site a.current{color:var(--ink);}

main{padding:32px 0 20px;}
h1{font-size:30px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em;}
.subtitle{color:var(--ink-soft);font-size:15px;margin:0 0 24px;}

/* search */
.search-row{margin-bottom:32px;}
#search-input{
  width:100%;padding:10px 14px;font-size:15px;
  border:1px solid var(--line);border-radius:6px;
  font-family:inherit;color:var(--ink);
}
#search-input:focus{outline:none;border-color:var(--accent);}

h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin:0 0 16px;padding-top:4px;}
h2.section-gap{margin-top:8px;border-top:1px solid var(--line);padding-top:24px;}

/* base cover — fixed size everywhere, so all sections look consistent */
.cover{
  width:var(--cover-w);height:var(--cover-h);border-radius:3px;flex:none;
  background:#eee;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;
  object-fit:cover;
}
.empty{color:var(--ink-soft);font-size:14px;font-style:italic;padding:8px 0;}

/* reading now */
.reading-list{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;}
.reading-row{
  display:flex;gap:14px;align-items:center;width:100%;
  border:none;background:none;padding:8px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border-radius:6px;
}
.reading-row:hover, .reading-row:focus-visible{background:#f7f6f4;}
.reading-text{flex:1;min-width:0;}
.reading-title{font-weight:600;font-size:15px;}
.reading-author{color:var(--ink-soft);font-size:13.5px;}
.progress-track{margin-top:6px;height:3px;background:var(--line);border-radius:2px;max-width:220px;}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;}

/* years / grid — fixed-width columns matching the cover size, so cards never stretch */
.year-block{margin-bottom:36px;}
.year-head{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;border-top:1px solid var(--line);padding-top:18px;}
.year-num{font-size:19px;font-weight:700;}
.year-count{font-size:13px;color:var(--ink-soft);}

.grid{
  display:grid;grid-template-columns:repeat(auto-fill, var(--cover-w));gap:16px 12px;
  justify-content:start;
}
.book{cursor:pointer;border:none;background:none;padding:0;text-align:left;font:inherit;color:inherit;width:var(--cover-w);}
.book .cover{margin-bottom:7px;}
.book-title{font-size:13px;font-weight:600;line-height:1.3;min-height:calc(1.3em * 3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.book-author{font-size:12px;color:var(--ink-soft);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.book-rating{font-size:11.5px;color:var(--star);margin-top:3px;}
.book-rating-none{color:var(--ink-soft);font-style:italic;}

.status-line{font-size:12.5px;color:var(--ink-soft);padding:4px 0 28px;}

/* footer */
footer{border-top:1px solid var(--line);padding:28px 0 48px;font-size:13.5px;color:var(--ink-soft);}
footer .copy{margin-bottom:18px;}
footer .cols{display:flex;flex-wrap:wrap;gap:32px;}
footer h3{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin:0 0 8px;font-weight:600;}
footer a{color:var(--ink);text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* detail overlay — intentionally larger than the list/grid cover */
.overlay{
  position:fixed;inset:0;background:rgba(20,20,20,0.4);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:10;
}
.overlay.open{display:flex;}
.detail-card{
  background:#fff;border-radius:8px;max-width:340px;width:100%;
  padding:20px;box-shadow:0 20px 60px rgba(0,0,0,0.2);
  text-align:center;
}
.detail-card .cover{width:100%;max-width:200px;height:auto;aspect-ratio:2/3;margin:0 auto;font-size:32px;}
.detail-card .book-title{font-size:17px;margin-top:14px;}
.detail-card .book-author{font-size:14px;margin-top:4px;}
.detail-card .book-rating{font-size:13px;margin-top:8px;}
.detail-card .book-meta{font-size:12.5px;color:var(--ink-soft);margin-top:6px;}
.detail-card .book-meta-none{font-style:italic;}
.detail-card .book-meta a{color:var(--accent);text-decoration:none;font-weight:600;}
.detail-card .book-meta a:hover{text-decoration:underline;}
.detail-close{margin-top:16px;background:var(--ink);color:#fff;border:none;border-radius:5px;padding:8px 14px;font-size:13px;cursor:pointer;}

/* ===================== RESPONSIVE — TABLET / MOBILE ===================== */
@media (max-width: 640px){
  :root{ --cover-w:92px; --cover-h:138px; }
  .wrap{padding:0 16px;}
  header.site{gap:10px;padding:16px 0;}
  .site-name{font-size:14px;}
  nav.site{
    margin-left:0;width:100%;order:3;
    gap:16px;padding-top:10px;border-top:1px solid var(--line);margin-top:10px;
    font-size:13.5px;
  }
  h1{font-size:24px;}
  .subtitle{font-size:14px;margin-bottom:20px;}
  main{padding:24px 0 12px;}

  .grid{gap:14px 10px;}
  .book-title{font-size:12.5px;}
  .book-author{font-size:11.5px;}

  .reading-row{gap:12px;}

  footer .cols{gap:24px;flex-direction:column;}
}

@media (max-width: 380px){
  :root{ --cover-w:78px; --cover-h:117px; }
}