:root{
  --gold:#e1b56c;
  --gold-soft:#f0d39b;
  --cream:#f7e7c5;
  --line:rgba(240,211,155,0.17);
  --panel:rgba(30,10,7,0.62);
  --panel-soft:rgba(24,8,6,0.48);
  --btn-dark1:rgba(78,40,22,0.92);
  --btn-dark2:rgba(44,20,12,0.94);
  --btn-light1:rgba(156,97,46,0.95);
  --btn-light2:rgba(96,49,21,0.98);
  --shadow:0 20px 45px rgba(0,0,0,0.3);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--cream);
  background:
    linear-gradient(rgba(15,6,4,0.42), rgba(15,6,4,0.77)),
    url("assets/background.jpg") center top / cover no-repeat fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.page-wrap{min-height:100vh}
.container{width:min(1180px,92%);margin:0 auto}

header{
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom, rgba(22,8,5,0.82), rgba(22,8,5,0.42));
  backdrop-filter:blur(5px);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:24px 0;
}
.nav-side{
  display:flex;
  align-items:center;
  gap:34px;
  flex:1;
}
.nav-side.right{justify-content:flex-end}
.nav a{
  font-size:1.22rem;
  color:var(--cream);
}
.nav a:hover{color:var(--gold-soft)}

.logo-mark{
  width:82px;height:82px;border-radius:999px;
  display:grid;place-items:center;
  color:var(--gold);
  font-size:2.5rem;
  border:1px solid rgba(225,181,108,0.26);
  background:radial-gradient(circle at 50% 45%, rgba(225,181,108,0.12), rgba(255,255,255,0.02));
  box-shadow:inset 0 0 20px rgba(225,181,108,0.1);
}

.hero{
  text-align:center;
  padding:72px 0 58px;
}
.site-title{
  font-size:clamp(3.4rem,7vw,6rem);
  line-height:1.03;
  color:var(--gold-soft);
  text-shadow:0 2px 16px rgba(0,0,0,0.35);
}
.site-subtitle{
  margin-top:10px;
  font-size:clamp(1.45rem,2.7vw,2.35rem);
  color:var(--gold-soft);
  text-shadow:0 2px 12px rgba(0,0,0,0.28);
}

.search-bar{
  width:min(760px,100%);
  margin:34px auto 0;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  border:1px solid rgba(225,181,108,0.24);
  border-radius:18px;
  padding:12px;
  background:rgba(36,14,9,0.73);
  box-shadow:var(--shadow);
}
.search-bar input{
  width:100%;
  background:transparent;
  border:0;
  outline:none;
  color:var(--cream);
  font-size:1.28rem;
  padding:14px 16px;
}
.search-bar input::placeholder{color:rgba(247,231,197,0.62)}

.btn,.chip,.search-btn{
  border-radius:14px;
  border:1px solid rgba(225,181,108,0.18);
  color:var(--cream);
  font-family:inherit;
  cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
}
.btn:hover,.chip:hover,.search-btn:hover{transform:translateY(-1px);filter:brightness(1.07)}

.search-btn{
  min-height:58px;
  padding:0 24px;
  font-size:1.25rem;
  font-weight:700;
  background:linear-gradient(to bottom,var(--btn-light1),var(--btn-light2));
}

.category-row{
  margin-top:26px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.chip{
  padding:14px 24px;
  font-size:1.16rem;
  background:linear-gradient(to bottom, rgba(72,35,21,0.82), rgba(41,18,11,0.88));
  box-shadow:0 10px 24px rgba(0,0,0,0.22);
}

.section{
  padding:34px 0 74px;
}
.section-title{
  text-align:center;
  font-size:clamp(2.25rem,4vw,3.5rem);
  color:var(--gold-soft);
  margin-bottom:30px;
  text-shadow:0 2px 12px rgba(0,0,0,0.26);
}

.library-list{
  width:min(980px,100%);
  margin:0 auto;
  background:linear-gradient(to bottom, rgba(36,12,8,0.5), rgba(20,8,6,0.48));
  border:1px solid rgba(225,181,108,0.14);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.text-row{
  display:grid;
  grid-template-columns:132px 1fr auto;
  gap:24px;
  align-items:center;
  padding:26px 28px;
  border-top:1px solid rgba(225,181,108,0.12);
}
.text-row:first-child{border-top:0}

.book-thumb{
  width:132px;height:132px;border-radius:16px;
  background:
    linear-gradient(rgba(28,12,8,0.16), rgba(28,12,8,0.16)),
    url("assets/background.jpg") center / 240% auto no-repeat;
  border:1px solid rgba(225,181,108,0.16);
  box-shadow:inset 0 0 30px rgba(0,0,0,0.18);
}
.thumb-1{background-position:12% 55%}
.thumb-2{background-position:30% 56%}
.thumb-3{background-position:49% 58%}
.thumb-4{background-position:72% 60%}

.text-info h3{
  color:var(--gold-soft);
  font-size:clamp(1.8rem,2.8vw,2.6rem);
  line-height:1.14;
  margin-bottom:10px;
}
.text-info p{
  max-width:620px;
  font-size:1.15rem;
  line-height:1.72;
  color:rgba(247,231,197,0.92);
}
.text-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.btn{
  padding:14px 24px;
  font-size:1.14rem;
  font-weight:700;
  background:linear-gradient(to bottom,var(--btn-dark1),var(--btn-dark2));
  box-shadow:0 8px 18px rgba(0,0,0,0.2);
}
.btn.primary{
  background:linear-gradient(to bottom,var(--btn-light1),var(--btn-light2));
}

.content-card{
  max-width:980px;
  margin:0 auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:28px;
  padding:32px;
  box-shadow:var(--shadow);
  line-height:1.9;
  font-size:1.1rem;
}
.content-card h2{
  color:var(--gold-soft);
  margin-bottom:16px;
  font-size:2rem;
}
.content-card p + p{margin-top:14px}

.footer{
  padding:18px 0 56px;
  text-align:center;
  color:rgba(247,231,197,0.88);
  font-size:1.15rem;
}

@media (max-width:900px){
  .text-row{grid-template-columns:104px 1fr}
  .book-thumb{width:104px;height:104px}
  .text-actions{grid-column:1 / -1;justify-content:flex-start;padding-left:128px}
}

@media (max-width:760px){
  body{background-attachment:scroll}
  .nav{flex-wrap:wrap;justify-content:center}
  .nav-side{gap:22px;justify-content:center;flex:unset}
  .logo-mark{order:-1}
  .hero{padding-top:56px}
  .search-bar{grid-template-columns:1fr}
  .text-row{grid-template-columns:1fr;padding:22px}
  .book-thumb{width:100%;height:180px}
  .text-actions{grid-column:auto;padding-left:0}
  .btn,.chip,.search-btn{width:100%;text-align:center}
}