@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

:root{
  --ink:        #1B2430;
  --ink-soft:   #263041;
  --forest:     #2B3B2E;
  --parchment:  #F1E9D8;
  --parchment-2:#E8DEC7;
  --brass:      #B98B4E;
  --brass-dim:  #8C6836;
  --rust:       #A3402F;
  --cream:      #F4EFE3;
  --cream-dim:  #C9C2B0;
  --text-dark:  #241F14;
  --text-dim:   #5A5240;
  --line:       rgba(244,239,227,0.14);
  --line-dark:  rgba(36,31,20,0.14);
  --radius-sm:  3px;
  --radius-md:  6px;
  --shadow-cover: 0 10px 22px rgba(10,8,4,0.35), 0 2px 4px rgba(10,8,4,0.25);
  --max-w: 1160px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.display{
  font-family: 'Fraunces', 'Source Serif 4', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--cream);
}

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
img{ max-width:100%; display:block; }
:focus-visible{ outline: 2px solid var(--brass); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- layout shell ---------- */
.shell{ max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }

.topbar{
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  position: sticky; top:0; z-index: 50;
}
.topbar-inner{
  max-width: var(--max-w); margin:0 auto; padding: 18px 32px;
  display:flex; align-items:center; gap: 36px;
}
.logo{
  font-family:'Fraunces', serif; font-weight: 600; font-size: 22px;
  color: var(--cream); white-space: nowrap;
}
.logo em{ color: var(--brass); font-style: italic; font-weight: 500; }
.nav{ display:flex; gap: 26px; margin-right: auto; }
.nav a{
  font-size: 15.5px; color: var(--cream-dim); border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.nav a.active, .nav a:hover{ color: var(--cream); border-color: var(--brass); }

.nav-search{ display:flex; align-items:center; }
.nav-search input{
  width: 220px; background: rgba(244,239,227,0.06); border: 1px solid var(--line);
  color: var(--cream); padding: 8px 12px; border-radius: var(--radius-sm);
  font-family:'Source Serif 4', serif; font-size: 14.5px;
}
.nav-search input::placeholder{ color: var(--cream-dim); }
.nav-search input:focus{ background: rgba(244,239,227,0.1); }

@media (max-width: 720px){
  .topbar-inner{ flex-wrap: wrap; gap: 14px; padding: 16px 20px; }
  .nav{ order:3; width: 100%; margin-right:0; gap: 20px; }
  .shell{ padding: 0 20px; }
}

/* ---------- hero ---------- */
.hero{ padding: 76px 0 40px; }
.hero h1{
  font-size: clamp(38px, 5.4vw, 64px); line-height: 1.04; max-width: 15ch;
}
.hero .lede{
  margin-top: 18px; max-width: 54ch; color: var(--cream-dim); font-size: 18px;
}
.search-row{ margin-top: 34px; max-width: 620px; }
.search-row form{ display:flex; gap:0; border-bottom: 2px solid var(--brass); }
.search-row input[type=text]{
  flex:1; background: transparent; border: none; color: var(--cream);
  font-family:'Fraunces', serif; font-size: 21px; padding: 10px 4px;
}
.search-row input[type=text]::placeholder{ color: var(--cream-dim); }
.search-row button{
  background: none; border: none; color: var(--brass); font-size: 15px;
  font-family:'Source Serif 4', serif; padding: 0 6px 0 16px;
}

/* subject chips */
.chips{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip{
  border: 1px solid var(--line); color: var(--cream-dim);
  padding: 7px 15px; border-radius: 999px; font-size: 14.5px;
  background: rgba(244,239,227,0.03);
}
.chip:hover, .chip.active{ border-color: var(--brass); color: var(--cream); background: rgba(185,139,78,0.12); }

/* ---------- shelves / grid ---------- */
.section-head{
  display:flex; align-items: baseline; justify-content: space-between;
  margin: 56px 0 20px; gap: 16px; flex-wrap: wrap;
}
.section-head h2{ font-size: 25px; }
.section-head .hint{ color: var(--cream-dim); font-size: 14.5px; }

.shelf{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 26px 20px;
}
.book-card{ display:flex; flex-direction:column; }
.cover-wrap{
  position:relative; aspect-ratio: 2/3; border-radius: var(--radius-sm);
  overflow:hidden; box-shadow: var(--shadow-cover); background: var(--forest);
}
.cover-wrap img{ width:100%; height:100%; object-fit: cover; }
.cover-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; padding: 14px; font-family:'Fraunces', serif; font-size: 14px;
  color: var(--cream-dim); background: linear-gradient(155deg, var(--forest), #1f2b21);
}
.add-btn{
  position:absolute; right:8px; bottom:8px; width:32px; height:32px; border-radius:50%;
  background: rgba(27,36,48,0.88); border: 1px solid var(--line); color: var(--cream);
  font-size: 17px; display:flex; align-items:center; justify-content:center; line-height:0;
}
.add-btn:hover{ border-color: var(--brass); color: var(--brass); }
.add-btn.added{ background: var(--brass); color: var(--ink); border-color: var(--brass); }
.book-title{ margin-top: 10px; font-family:'Fraunces', serif; font-size: 15px; font-weight:500; line-height:1.3; }
.book-author{ color: var(--cream-dim); font-size: 13px; margin-top: 3px; }
.book-card a.cover-wrap, .book-card a.book-title{ display:block; }

.empty, .loading, .error{ color: var(--cream-dim); font-size: 15.5px; padding: 20px 0; }
.error{ color: #D98B7C; }

.pager{ display:flex; justify-content:center; gap: 14px; margin: 44px 0 10px; }
.pager button{
  background: none; border: 1px solid var(--line); color: var(--cream);
  padding: 9px 20px; border-radius: var(--radius-sm); font-size: 14.5px;
}
.pager button:disabled{ opacity: .35; cursor: default; }
.pager button:not(:disabled):hover{ border-color: var(--brass); }

footer{ border-top: 1px solid var(--line); margin-top: 80px; padding: 28px 0 60px; color: var(--cream-dim); font-size: 13.5px; }

/* ---------- library page ---------- */
.page-head{ padding: 56px 0 8px; }
.page-head h1{ font-size: 38px; }
.page-head p{ color: var(--cream-dim); margin-top: 10px; max-width: 56ch; }

.lib-list{ margin-top: 34px; display:flex; flex-direction:column; }
.lib-row{
  display:flex; gap: 22px; align-items:center; padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.lib-row .cover-wrap{ width: 64px; flex: none; box-shadow: none; }
.lib-info{ flex:1; min-width:0; }
.lib-info .book-title{ font-size: 18px; margin-top:0; }
.lib-info .book-author{ margin-top: 4px; }
.progress-track{ height:4px; background: rgba(244,239,227,0.1); border-radius:2px; margin-top:12px; max-width: 320px; }
.progress-fill{ height:100%; background: var(--brass); border-radius:2px; }
.progress-label{ font-size: 12.5px; color: var(--cream-dim); margin-top: 6px; }
.lib-actions{ display:flex; align-items:center; gap: 14px; flex: none; }
.btn{
  font-family:'Source Serif 4', serif; font-size: 14.5px; padding: 9px 18px;
  border-radius: var(--radius-sm); border: 1px solid var(--brass); color: var(--ink);
  background: var(--brass);
}
.btn:hover{ background: var(--brass-dim); border-color: var(--brass-dim); }
.btn-ghost{ background: none; color: var(--cream-dim); border: 1px solid var(--line); }
.btn-ghost:hover{ color: var(--rust); border-color: var(--rust); }

@media (max-width: 560px){
  .lib-row{ flex-wrap: wrap; }
  .lib-actions{ width:100%; justify-content: flex-start; margin-left: 86px; }
}

/* ---------- reader page ---------- */
body.reader-body{ background: var(--parchment); color: var(--text-dark); }
.reader-topbar{
  background: var(--parchment); border-bottom: 1px solid var(--line-dark);
  position: sticky; top:0; z-index: 50;
}
.reader-topbar-inner{
  max-width: 780px; margin:0 auto; padding: 14px 24px;
  display:flex; align-items:center; gap: 18px;
}
.back-link{ font-size: 14px; color: var(--text-dim); flex:none; }
.back-link:hover{ color: var(--rust); }
.reader-progress-track{ flex:1; height:3px; background: rgba(36,31,20,0.12); border-radius:2px; }
.reader-progress-fill{ height:100%; background: var(--brass-dim); border-radius:2px; width:0%; }
.reader-pct{ font-size: 13px; color: var(--text-dim); flex:none; width: 40px; text-align:right; }

.reader-main{ max-width: 700px; margin: 0 auto; padding: 56px 24px 140px; }
.reader-kicker{ font-size: 14px; color: var(--text-dim); }
.reader-main h1{ color: var(--text-dark); font-size: 34px; margin-top: 6px; line-height:1.15; }
.reader-byline{ color: var(--text-dim); margin-top: 8px; font-size: 15.5px; }
.reader-divider{ width: 46px; height:2px; background: var(--brass); margin: 30px 0; border:none; }
.reader-text{ font-size: var(--reader-fs, 19px); line-height: 1.75; }
.reader-text p{ margin: 0 0 1.3em; }
.reader-text p:first-of-type::first-letter{
  font-family:'Fraunces', serif; font-size: 3.4em; float:left; line-height: 0.8;
  padding: 0.06em 0.08em 0 0; color: var(--forest);
}

.reader-toolbar{
  position: fixed; left:50%; transform: translateX(-50%); bottom: 26px;
  background: var(--ink); color: var(--cream); border-radius: 999px;
  padding: 10px 10px 10px 18px; display:flex; align-items:center; gap: 14px;
  box-shadow: 0 12px 30px rgba(10,8,4,0.35); z-index: 60;
}
.reader-toolbar .fsize-btn{
  background:none; border:1px solid var(--line); color: var(--cream); width:30px; height:30px;
  border-radius:50%; font-family:'Fraunces', serif; font-size: 14px;
}
.reader-toolbar .fsize-btn:hover{ border-color: var(--brass); color: var(--brass); }
.reader-toolbar .save-state{ font-size: 12.5px; color: var(--cream-dim); min-width: 96px; }
.reader-toolbar .lib-toggle{
  background: var(--brass); color: var(--ink); border:none; border-radius: 999px;
  padding: 8px 16px; font-size: 13.5px;
}
.reader-loading, .reader-error{ max-width: 700px; margin: 90px auto; padding: 0 24px; color: var(--text-dim); }
.reader-error{ color: var(--rust); }

@media (max-width: 560px){
  .reader-main{ padding: 40px 18px 150px; }
  .reader-main h1{ font-size: 27px; }
  .reader-toolbar{ width: calc(100% - 28px); justify-content: space-between; padding: 10px 14px; }
}