.books-page{
  --ink:#25190d;
  --soft-ink:#4a3821;
  --old-gold:#d8bd6d;
  --paper:#eadfbd;
  --paper-deep:#cbb37a;
  --panel-dark:rgba(28, 22, 13, .68);
  min-height:100vh;
  padding-top:1.35rem;
  overflow-x:hidden;
  background-color:#20190f;
}

.books-sepia,
.paper-vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.books-sepia{
  z-index:1;
  background:
    radial-gradient(900px 620px at 62% 10%, rgba(255,224,144,.23), transparent 64%),
    radial-gradient(760px 560px at 16% 68%, rgba(154,95,35,.18), transparent 70%),
    linear-gradient(180deg, rgba(90,56,24,.14), rgba(32,22,9,.36));
  mix-blend-mode:soft-light;
}

.paper-vignette{
  z-index:1;
  background:
    linear-gradient(90deg, rgba(35,22,8,.55), transparent 16% 84%, rgba(35,22,8,.55)),
    radial-gradient(circle at 50% 38%, transparent 0 50%, rgba(9,7,5,.42) 82%),
    repeating-linear-gradient(0deg, rgba(255,244,203,.025) 0 1px, transparent 1px 5px);
}

.books-page .godrays{
  opacity:.45;
}

.books-page .firefly{
  background:rgba(255,224,143,.86);
  box-shadow:
    0 0 7px rgba(255,224,143,.72),
    0 0 16px rgba(177,119,55,.42);
}

.books-nav,
.books-hero,
.books-shell{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  max-width:100%;
}

.books-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.45rem 1.15rem;
  max-width:820px;
  margin:0 auto 2.3rem;
  padding:0 3.25rem;
}

.books-nav a{
  margin:0;
  color:#ead58c;
  text-shadow:0 1px 8px rgba(45,28,8,.65);
}

.books-nav a::after{
  content:"";
  display:block;
  height:1px;
  margin-top:.12rem;
  background:linear-gradient(90deg, transparent, rgba(234,213,140,.58), transparent);
}

.books-moon{
  position:fixed;
  left:clamp(.75rem, 2.6vw, 2rem);
  top:clamp(.75rem, 2.6vw, 2rem);
  width:42px;
  height:42px;
  color:#ead58c;
  z-index:4;
  opacity:.92;
  filter:drop-shadow(0 0 9px rgba(234,213,140,.58));
  animation:none;
}

.books-moon svg{
  width:100%;
  height:100%;
  display:block;
}

.books-hero{
  max-width:1120px;
  margin:0 auto 2rem;
  padding:0 1rem;
}

.books-hero h1{
  margin:.05rem 0 .35rem;
  text-align:left;
  color:#fff4cf;
  font-size:clamp(2.2rem, 5.2vw, 4.1rem);
  line-height:.95;
  text-shadow:
    0 2px 1px rgba(60,34,10,.95),
    0 0 16px rgba(234,213,140,.72),
    0 0 34px rgba(154,95,35,.35);
}

.books-page .eyebrow{
  margin:0 0 .25rem;
  color:#ead58c;
  font:700 .75rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.hero-copy{
  max-width:60rem;
  margin:0;
  color:rgba(255,249,231,.92);
  font-size:clamp(1.08rem, 2vw, 1.38rem);
  text-shadow:0 1px 10px rgba(31,19,6,.7);
}

.books-shell{
  max-width:1120px;
  margin:0 auto 4rem;
  padding:0 1rem;
}

.shelf-note{
  margin:0 0 1.25rem;
  padding:1.05rem 1.2rem;
  border:1px solid rgba(216,189,109,.22);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(247,231,181,.14), rgba(45,31,13,.5)),
    rgba(28,22,13,.64);
  box-shadow:0 16px 42px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035);
}

.shelf-note p{
  margin:0;
  color:rgba(255,249,231,.88);
  font-size:1.05rem;
}

.book-shelf{
  display:grid;
  gap:1.15rem;
}

.book-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(150px, 220px) minmax(0, 1fr);
  gap:1.35rem;
  align-items:stretch;
  padding:1rem;
  overflow:hidden;
  border:1px solid rgba(216,189,109,.28);
  border-radius:12px;
  background:
    radial-gradient(900px 320px at 22% 0%, rgba(255,237,181,.22), transparent 58%),
    linear-gradient(90deg, rgba(57,38,16,.76), rgba(38,29,17,.7)),
    rgba(26,20,13,.74);
  box-shadow:
    0 18px 50px rgba(0,0,0,.43),
    inset 0 0 0 1px rgba(255,255,255,.045);
}

.book-card::before{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(216,189,109,.16);
  border-radius:8px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,231,159,.16), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%);
}

.book-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background:
    repeating-linear-gradient(90deg, transparent 0 19px, rgba(255,236,176,.035) 20px, transparent 21px),
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(56,33,13,.08) 17px, transparent 18px);
  mix-blend-mode:soft-light;
}

.book-cover,
.book-copy{
  position:relative;
  z-index:1;
}

.book-cover{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:290px;
  padding:.6rem;
  border-radius:9px;
  background:
    linear-gradient(180deg, rgba(251,235,180,.12), rgba(30,18,8,.42)),
    rgba(22,17,11,.62);
  box-shadow:inset 0 0 0 1px rgba(216,189,109,.13);
}

.book-cover img{
  display:block;
  width:100%;
  max-width:180px;
  max-height:280px;
  object-fit:contain;
  border-radius:4px;
  box-shadow:
    0 16px 28px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,247,219,.16);
  background:#1f160e;
}

.book-copy{
  min-width:0;
  padding:.25rem .3rem .2rem 0;
}

.book-number{
  margin:0 0 .25rem;
  color:rgba(234,213,140,.72);
  font:700 .72rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.18em;
}

.book-copy h2{
  margin:0;
  color:#fff7df;
  font-size:clamp(1.65rem, 3vw, 2.35rem);
  line-height:1.02;
  text-align:left;
  text-shadow:0 2px 8px rgba(48,27,8,.7);
}

.book-subtitle{
  margin:.25rem 0 .7rem;
  color:#ead58c;
  font-size:clamp(1.08rem, 2vw, 1.32rem);
  font-weight:600;
}

.book-facts{
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
  margin:0 0 .75rem;
}

.book-facts div{
  display:flex;
  flex-wrap:wrap;
  gap:.32rem;
  align-items:baseline;
  padding:.24rem .5rem;
  border:1px solid rgba(216,189,109,.22);
  border-radius:999px;
  background:rgba(239,219,157,.09);
}

.book-facts dt{
  color:rgba(234,213,140,.86);
  font:700 .68rem/1.1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.book-facts dd{
  margin:0;
  color:rgba(255,249,231,.86);
  font-size:.95rem;
}

.book-copy p:not(.book-number):not(.book-subtitle){
  margin:.72rem 0 0;
  color:rgba(255,249,231,.9);
  font-size:clamp(1rem, 1.55vw, 1.12rem);
  line-height:1.52;
  text-shadow:0 1px 8px rgba(25,15,6,.55);
}

body.night.books-page .books-sepia{
  opacity:.26;
}

body.night.books-page .godrays{
  opacity:0;
  pointer-events:none;
}

body.night.books-page .firefly{
  background:rgba(246,241,231,.95);
  box-shadow:
    0 0 10px rgba(246,241,231,.9),
    0 0 22px rgba(246,241,231,.55),
    0 0 36px rgba(224,201,122,.35);
}

body.night.books-page .paper-vignette{
  background:
    linear-gradient(90deg, rgba(9,8,18,.68), transparent 18% 82%, rgba(9,8,18,.68)),
    radial-gradient(circle at 50% 38%, transparent 0 48%, rgba(0,0,0,.62) 84%);
}

body.night.books-page .book-card,
body.night.books-page .shelf-note{
  background:
    radial-gradient(800px 300px at 20% 0%, rgba(224,201,122,.12), transparent 58%),
    linear-gradient(90deg, rgba(26,22,23,.82), rgba(14,14,20,.78));
}

@media (max-width:760px){
  .books-page{
    padding-top:.85rem;
    background-attachment:scroll;
  }

  .books-nav{
    justify-content:center;
    margin:0 0 2rem;
    padding:0 3.65rem;
    gap:.5rem .8rem;
  }

  .books-moon{
    position:absolute;
    left:.85rem;
    top:.8rem;
  }

  .books-hero{
    text-align:center;
    margin-bottom:1.35rem;
    padding:0 .85rem;
  }

  .books-hero h1{
    text-align:center;
  }

  .hero-copy{
    max-width:100%;
  }

  .books-shell{
    padding:0 .85rem;
  }

  .book-card{
    grid-template-columns:1fr;
    gap:.85rem;
    padding:.85rem;
  }

  .book-cover{
    min-height:0;
  }

  .book-cover img{
    max-width:min(180px, 58vw);
    max-height:255px;
  }

  .book-copy{
    padding:0;
  }
}

@media (max-width:430px){
  .books-nav{
    padding:0 3.2rem;
  }

  .book-facts div{
    border-radius:10px;
  }
}

@media (prefers-reduced-motion:reduce){
  .books-page .firefly,
  .books-page .godrays,
  .books-page .godrays::after,
  .books-page h1,
  .books-page h2{
    animation:none !important;
  }
}