/* ======================================================
   PSUIC – Modern Thick Book Library (Homepage)
   ====================================================== */

:root{
  --bg:#f3f5f7;
  --ink:#0b1220;
  --muted:#6b7280;

  --accent:#00eaff;
  --accent-dark:#233047;

  --shadow: 0 22px 60px rgba(0,0,0,.14);
}

/* base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 10% -20%, #ffffff 0%, var(--bg) 60%),
    radial-gradient(900px 600px at 90% 0%, #ffffff 0%, var(--bg) 70%);
  color:var(--ink);
}

/* ===== topbar ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.brand{display:flex; gap:14px; align-items:center;}
.logo{
  width:48px; height:48px;
  border-radius:16px;
  display:grid; place-items:center;
  font-weight:900;
  background:linear-gradient(180deg,#0b1220,#1b2a44);
  color:#fff;
  position:relative;
}
.logo::after{
  content:"";
  position:absolute; inset:-6px;
  background:radial-gradient(closest-side, rgba(0,234,255,.35), transparent 70%);
  filter:blur(6px);
  border-radius:20px;
  z-index:-1;
}

.title h1{margin:0; font-size:18px}
.title p{margin:4px 0 0; font-size:13px; color:var(--muted)}

.search{
  width:min(420px,60vw);
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  outline:none;
}
.search:focus{
  border-color:rgba(0,234,255,.5);
  box-shadow:0 0 0 4px rgba(0,234,255,.15);
}

/* ===== layout ===== */
.container{
  max-width:1200px;
  margin:26px auto;
  padding:0 18px 60px;
}

/* ===== bookshelf grid ===== */
.bookshelf{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:28px;
  justify-items:center;
}

/* ===== thick book ===== */
.book-thick{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  perspective:1200px;
}

/* 3D book */
.book-3d{
  position:relative;
  width:160px;
  height:220px;
  transform-style:preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease;
}

/* pages (thickness) */
.book-pages{
  position:absolute;
  top:6px;
  left:10px;
  right:-14px;
  bottom:-10px;
  border-radius:14px;
  background:
    repeating-linear-gradient(
      90deg,
      #ffffff 0px,
      #ffffff 2px,
      #eaeaea 3px,
      #ffffff 4px
    );
  box-shadow:
    inset -3px 0 6px rgba(0,0,0,.15),
    0 16px 32px rgba(0,0,0,.28);
}

/* cover */
.book-cover{
  position:absolute;
  inset:0;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  transform: translateZ(14px);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}

.book-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* glossy */
.book-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.45), transparent 45%);
}

/* hover */
.book-thick:hover .book-3d{
  transform:
    rotateY(-20deg)
    rotateX(4deg)
    translateY(-12px);
}

/* title */
.book-title{
  max-width:160px;
  text-align:center;
  font-size:13px;
  font-weight:800;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* responsive */
@media (max-width:1100px){
  .bookshelf{grid-template-columns: repeat(4,1fr);}
}
@media (max-width:720px){
  .bookshelf{grid-template-columns: repeat(2,1fr);}
}