/* ============ TOKENS ============ */
:root{
  --ink: #12101c;
  --ink-2: #1b1830;
  --parchment: #f4ecd8;
  --gold: #e3a53d;
  --gold-soft: #f0c477;
  --teal: #5fa8a0;
  --cream: #ede6d6;
  --muted: #a79dc9;
  --danger: #d9704f;

  --bg: var(--ink);
  --bg-2: var(--ink-2);
  --surface: rgba(255,255,255,0.06);
  --surface-border: rgba(255,255,255,0.12);
  --text: var(--cream);
  --text-muted: #b6aed6;
  --shadow: 0 20px 60px rgba(0,0,0,0.45);

  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
}

body.light{
  --bg: var(--parchment);
  --bg-2: #ece0c4;
  --surface: rgba(255,255,255,0.55);
  --surface-border: rgba(30,20,10,0.1);
  --text: #241c12;
  --text-muted: #5b4f3a;
  --shadow: 0 20px 50px rgba(90,70,30,0.18);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  transition: background .4s ease, color .4s ease;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
h1,h2,h3{ font-family: var(--font-display); font-weight:600; line-height:1.1; }
.italic{ font-style: italic; font-weight:500; color: var(--gold-soft); }
code{ font-family: var(--font-mono); background: var(--surface); padding: 2px 6px; border-radius:4px; font-size:0.85em; }

.section-head{ max-width: 1100px; margin: 0 auto 2.2rem; padding: 0 1.5rem; }
.section-head h2{ font-size: clamp(1.8rem, 3.5vw, 2.6rem); }

/* ============ NAVBAR ============ */
.navbar{
  position: sticky; top:0; z-index: 500;
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--surface-border);
}
.nav-inner{
  max-width: 1300px; margin:0 auto; padding: 0.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:0.5rem; font-family: var(--font-display); font-size:1.3rem; font-weight:700; }
.brand-mark{ font-size:1.4rem; }
.nav-links{ display:flex; gap:1.8rem; font-size:0.92rem; font-weight:500; }
.nav-links a{ opacity:0.85; transition: opacity .2s, color .2s; position:relative; }
.nav-links a:hover{ opacity:1; color: var(--gold); }
.nav-actions{ display:flex; align-items:center; gap:0.9rem; }
.search-wrap{ position:relative; }
.search-wrap input{
  background: var(--surface); border:1px solid var(--surface-border); color: var(--text);
  padding: 0.5rem 0.9rem 0.5rem 2rem; border-radius: 999px; font-size:0.85rem; width: 190px;
  transition: width .25s ease, border-color .2s;
}
.search-wrap input:focus{ outline:none; width: 230px; border-color: var(--gold); }
.search-icon{ position:absolute; left:0.7rem; top:50%; transform:translateY(-50%); opacity:0.6; }
.theme-toggle, .hamburger{
  width:38px; height:38px; border-radius:50%; background: var(--surface); border:1px solid var(--surface-border);
  display:flex; align-items:center; justify-content:center; font-size:1rem; transition: transform .2s;
}
.theme-toggle:hover{ transform: rotate(20deg); }
.hamburger{ display:none; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .search-wrap input{ width:130px; }
}

/* ============ HERO ============ */
.hero{ position:relative; min-height: 92vh; display:flex; align-items:center; overflow:hidden; padding-top: 2rem;}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse at 20% 20%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 55%),
              radial-gradient(ellipse at 80% 70%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 55%),
              var(--bg);
}
.floating-particles{ position:absolute; inset:0; }
.particle{
  position:absolute; border-radius:50%; background: var(--gold-soft); opacity:0.35;
  animation: float linear infinite;
}
@keyframes float{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.4; }
  90%{ opacity:0.4; }
  100%{ transform: translateY(-110vh) translateX(20px); opacity:0; }
}

.hero-inner{
  position:relative; z-index:1; max-width:1300px; margin:0 auto; padding: 0 1.5rem;
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap:3rem; align-items:center; width:100%;
}
.hero-title{ font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin: 0.4rem 0 1.1rem; }
.hero-sub{ color: var(--text-muted); max-width: 480px; font-size:1.05rem; margin-bottom: 1.8rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.btn{
  display:inline-block; padding: 0.85rem 1.6rem; border-radius: 999px; font-weight:600; font-size:0.92rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{ background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#1a1408; box-shadow: 0 10px 30px rgba(227,165,61,0.35); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(227,165,61,0.45); }
.btn-ghost{ border: 1px solid var(--surface-border); background: var(--surface); }
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }

/* ---- 3D shelf scene ---- */
.shelf-scene{
  perspective: 1400px; position:relative; height: 420px;
  display:flex; flex-direction:column; justify-content:center;
}
.shelf-board{
  height: 18px; border-radius: 4px;
  background: linear-gradient(180deg, #7a5230, #4a3018);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
.shelf-books{
  display:flex; align-items:flex-end; gap:6px; height: 300px; padding: 0 10px;
  transform-style: preserve-3d; transform: rotateX(4deg);
}
.mini-book{
  flex: 1; height: 92%; border-radius: 4px 8px 8px 4px; position:relative; cursor:pointer;
  transform-origin: bottom left; transition: transform .35s cubic-bezier(.2,.8,.3,1.4), height .3s ease;
  box-shadow: inset -6px 0 10px rgba(0,0,0,0.25), 2px 8px 18px rgba(0,0,0,0.35);
  animation: bob 4.5s ease-in-out infinite;
}
.mini-book:nth-child(odd){ animation-delay: -1.5s; }
.mini-book:nth-child(3n){ animation-delay: -3s; }
@keyframes bob{
  0%,100%{ transform: translateY(0) rotateZ(0deg); }
  50%{ transform: translateY(-4px) rotateZ(0deg); }
}
.mini-book:hover{
  transform: translateY(-26px) rotateZ(-8deg) scale(1.06);
  z-index: 5;
  box-shadow: -10px 20px 30px rgba(0,0,0,0.5);
}

/* ============ CATEGORIES ============ */
.categories{ padding: 4rem 0 1rem; }
.filter-row{
  max-width:1100px; margin: 0 auto; padding: 0 1.5rem;
  display:flex; gap:0.7rem; flex-wrap:wrap;
}
.filter-chip{
  padding: 0.55rem 1.1rem; border-radius:999px; border:1px solid var(--surface-border);
  background: var(--surface); font-size:0.85rem; font-weight:600; transition: all .2s ease;
}
.filter-chip:hover{ border-color: var(--gold); }
.filter-chip.active{ background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#1a1408; border-color: transparent; }

/* ============ LIBRARY / CARDS ============ */
.library{ padding: 3.5rem 0 5rem; max-width:1300px; margin:0 auto; }
.book-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.8rem; padding: 0 1.5rem;
}
.empty-state{ text-align:center; padding: 3rem; color: var(--text-muted); }

.book-card{
  background: var(--surface); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); overflow:hidden; backdrop-filter: blur(10px);
  box-shadow: var(--shadow); transform-style: preserve-3d; transition: transform .35s ease, box-shadow .35s ease;
  opacity:0; transform: translateY(24px);
  display:flex; flex-direction:column;
}
.book-card.revealed{ animation: reveal .6s ease forwards; }
@keyframes reveal{ to{ opacity:1; transform: translateY(0); } }

.book-card:hover{ transform: translateY(-8px) rotateX(3deg) rotateY(-2deg); box-shadow: 0 26px 55px rgba(0,0,0,0.5); }
.card-cover{ position:relative; aspect-ratio: 3/4; overflow:hidden; }
.card-cover img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.book-card:hover .card-cover img{ transform: scale(1.08); }
.card-fav{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background: rgba(0,0,0,0.45); color:#fff; display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px); font-size:1rem; transition: background .2s ease, transform .2s ease;
}
.card-fav:hover{ transform: scale(1.1); }
.card-fav.active{ background: var(--gold); color:#1a1408; }
.card-genre-tag{
  position:absolute; left:10px; bottom:10px; font-family: var(--font-mono); font-size:0.68rem;
  background: rgba(0,0,0,0.5); color: var(--gold-soft); padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:0.06em;
}
.card-body{ padding: 1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:0.4rem; flex:1; }
.card-body h3{ font-size:1.05rem; }
.card-author{ color: var(--text-muted); font-size:0.85rem; }
.card-rating{ color: var(--gold); font-size:0.85rem; }
.card-desc{ color: var(--text-muted); font-size:0.85rem; line-height:1.4; flex:1; }
.card-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:0.6rem; }
.read-btn{
  background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#1a1408; font-weight:700;
  padding: 0.5rem 1.1rem; border-radius:999px; font-size:0.82rem; transition: transform .2s ease;
}
.read-btn:hover{ transform: translateX(2px); }
.reading-time{ font-family: var(--font-mono); font-size:0.72rem; color: var(--text-muted); }

/* ============ POPULAR CAROUSEL ============ */
.popular{ padding: 2rem 0 5rem; }
.carousel{
  display:flex; gap:1.2rem; overflow-x:auto; padding: 0 1.5rem 1rem; scroll-snap-type:x mandatory;
}
.carousel::-webkit-scrollbar{ height:6px; }
.carousel::-webkit-scrollbar-thumb{ background: var(--surface-border); border-radius:10px; }
.carousel-card{
  min-width: 170px; scroll-snap-align:start; cursor:pointer; border-radius: var(--radius-sm); overflow:hidden;
  border:1px solid var(--surface-border); position:relative; transition: transform .25s ease;
}
.carousel-card:hover{ transform: translateY(-6px); }
.carousel-card img{ aspect-ratio:3/4; object-fit:cover; }
.carousel-card span{
  position:absolute; bottom:0; left:0; right:0; padding: 0.5rem; font-size:0.78rem; font-weight:600;
  background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  color:#fff;
}

/* ============ ABOUT ============ */
.about{ padding: 5rem 0; background: var(--bg-2); }
.about-inner{ max-width: 800px; margin:0 auto; padding: 0 1.5rem; text-align:left; }
.about-copy h2{ font-size: clamp(1.6rem,3vw,2.2rem); margin: 0.5rem 0 1rem; }
.about-copy p{ color: var(--text-muted); line-height:1.6; margin-bottom:1.5rem; }
.about-stats{ display:flex; gap:2.5rem; margin-top:1rem; }
.about-stats strong{ display:block; font-family: var(--font-display); font-size:1.8rem; color: var(--gold); }
.about-stats span{ font-size:0.8rem; color: var(--text-muted); }

/* ============ CONTACT ============ */
.contact{ padding: 5rem 1.5rem; max-width: 700px; margin:0 auto; }
.contact-form{ display:flex; flex-direction:column; gap:1rem; }
.form-row{ display:flex; gap:1rem; }
.form-row input, .contact-form textarea{
  width:100%; background: var(--surface); border:1px solid var(--surface-border); color:var(--text);
  padding:0.8rem 1rem; border-radius: var(--radius-sm); font-family:inherit; font-size:0.9rem; resize:vertical;
}
.form-row input:focus, .contact-form textarea:focus{ outline:none; border-color: var(--gold); }
.contact-form .btn{ align-self:flex-start; }
.form-note{ font-size:0.82rem; color: var(--text-muted); }
@media (max-width:600px){ .form-row{ flex-direction:column; } }

.footer{ text-align:center; padding: 2rem; color: var(--text-muted); font-size:0.8rem; border-top:1px solid var(--surface-border); }

/* ============ READER MODAL ============ */
.reader-overlay{
  position:fixed; inset:0; background: rgba(5,4,10,0.82); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:1000;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.reader-overlay.open{ opacity:1; pointer-events:all; }
.reader{
  width:min(760px, 92vw); max-height:88vh; background: var(--bg); border:1px solid var(--surface-border);
  border-radius: var(--radius-lg); box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  display:flex; flex-direction:column; overflow:hidden;
  transform: scale(0.94) rotateX(4deg); transition: transform .35s cubic-bezier(.2,.8,.3,1.2);
}
.reader-overlay.open .reader{ transform: scale(1) rotateX(0deg); }
body.sepia-mode .reader{ background:#f3e6c8; color:#3a2e17; }

.reader-top{ display:flex; align-items:flex-start; justify-content:space-between; padding: 1.2rem 1.4rem 0.6rem; gap:1rem; }
.reader-title-block h3{ font-size:1.3rem; }
.reader-title-block p{ color: var(--text-muted); font-size:0.85rem; }
.reader-controls{ display:flex; gap:0.4rem; flex-wrap:wrap; }
.reader-controls button{
  width:32px; height:32px; border-radius:50%; background: var(--surface); border:1px solid var(--surface-border);
  font-size:0.85rem; transition: background .2s;
}
.reader-controls button:hover{ background: var(--gold); color:#1a1408; }
.reader-controls button.active{ background: var(--gold); color:#1a1408; }

.reader-progress{ height:3px; background: var(--surface-border); }
.reader-progress-bar{ height:100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); width:0%; transition: width .3s ease; }

.reader-body{ padding: 1.4rem; overflow-y:auto; flex:1; }
.reader-image{ width:100%; max-height:280px; object-fit:cover; border-radius: var(--radius-sm); margin-bottom:1.1rem; }
.reader-text{ font-size: var(--reader-font, 1.05rem); line-height:1.75; white-space:pre-line; }
.reader-moral{ margin-top:1.2rem; padding:0.9rem 1rem; border-left:3px solid var(--gold); background: var(--surface); border-radius: var(--radius-sm); font-style:italic; }

.reader-nav{ display:flex; align-items:center; justify-content:space-between; padding: 1rem 1.4rem; border-top:1px solid var(--surface-border); }
#pageIndicator{ font-family: var(--font-mono); font-size:0.8rem; color: var(--text-muted); }

@media (max-width: 700px){
  .hero-inner{ grid-template-columns: 1fr; }
  .shelf-scene{ height: 260px; }
  .reader-controls{ display:none; }
}

/* reveal-on-scroll helper for sections */
.reveal{ opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.revealed{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}