@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root {
  --shelf-ink: #171610;
  --shelf-cream: #f5f0e5;
  --shelf-paper: #fbf9f4;
  --shelf-gold: #d69a2d;
  --shelf-green: #173f37;
  --shelf-muted: #6d6a60;
}

.bookshelf-page, .bookshelf-page * { box-sizing: border-box; }
.bookshelf-page { overflow: hidden; background: var(--shelf-paper); color: var(--shelf-ink); font-family: "DM Sans", sans-serif; }
.bookshelf-page h1, .bookshelf-page h2, .bookshelf-page h3, .bookshelf-page p { margin-top: 0; }

.bookshelf-hero {
  min-height: 720px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 50%, rgba(214,154,45,.2), transparent 28%),
    linear-gradient(125deg, #0b2722 0%, #143f37 55%, #0a241f 100%);
  color: #fff;
}
.bookshelf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .11;
  background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(to right, #000, transparent 85%);
}
.bookshelf-hero::after {
  content: "V";
  position: absolute;
  right: -1vw;
  top: 50%;
  transform: translateY(-52%);
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.1);
  font: 600 min(55vw, 650px)/.75 "Playfair Display", serif;
}
.bookshelf-noise { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.bookshelf-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.bookshelf-orb-one { width: 420px; height: 420px; right: 8%; top: -240px; border: 1px solid rgba(255,255,255,.15); }
.bookshelf-orb-two { width: 650px; height: 650px; right: -270px; bottom: -470px; border: 1px solid rgba(214,154,45,.25); }
.hero-book-stage { --stage-x: 0px; --stage-y: 0px; position: absolute; z-index: 1; width: 490px; height: 560px; right: max(3vw, calc((100vw - 1320px) / 2)); top: 50%; transform: translate(var(--stage-x), calc(-48% + var(--stage-y))); transition: transform .3s cubic-bezier(.2,.8,.2,1); perspective: 1200px; }
.hero-glow { position: absolute; width: 430px; height: 430px; left: 20px; top: 75px; border-radius: 50%; background: rgba(225,164,52,.28); filter: blur(70px); animation: heroGlow 5s ease-in-out infinite; }
.hero-book { position: absolute; width: 220px; height: 330px; object-fit: contain; filter: drop-shadow(0 28px 28px rgba(0,0,0,.42)); transform-origin: center bottom; }
.hero-book-main { width: 260px; height: 390px; left: 115px; top: 65px; z-index: 3; animation: bookFloatMain 6s ease-in-out infinite; }
.hero-book-back { left: 3px; top: 135px; z-index: 1; transform: rotate(-12deg); animation: bookFloatLeft 7s ease-in-out infinite; }
.hero-book-front { right: 0; top: 155px; z-index: 2; transform: rotate(11deg); animation: bookFloatRight 6.5s ease-in-out infinite; }
.hero-spark { position: absolute; z-index: 5; width: 7px; height: 7px; border-radius: 50%; background: #f0bd5c; box-shadow: 0 0 0 6px rgba(240,189,92,.08), 0 0 25px #e9bc68; }
.hero-spark-one { left: 28px; top: 90px; animation: sparkPulse 3s ease-in-out infinite; }
.hero-spark-two { right: 35px; top: 88px; animation: sparkPulse 3.7s ease-in-out .5s infinite; }
.hero-spark-three { right: 70px; bottom: 60px; width: 4px; height: 4px; animation: sparkPulse 4.3s ease-in-out 1s infinite; }
.bookshelf-hero-inner { padding-top: 85px; padding-bottom: 100px; position: relative; z-index: 2; }
.bookshelf-kicker, .bookshelf-eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 700; }
.bookshelf-kicker { display: flex; align-items: center; gap: 12px; color: #e9bc68; margin-bottom: 30px; }
.bookshelf-kicker span { width: 36px; height: 1px; background: currentColor; }
.bookshelf-hero h1 {
  max-width: 760px;
  font: 600 clamp(52px, 6.7vw, 100px)/.96 "Playfair Display", serif;
  letter-spacing: -.045em;
  color: #fff;
  margin-bottom: 30px;
}
.bookshelf-hero h1 em { color: #e9bc68; font-weight: 600; }
.bookshelf-hero-inner > p { max-width: 590px; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.8; margin-bottom: 35px; }
.bookshelf-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bookshelf-hero-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 27px; border-radius: 100px; font-weight: 700; font-size: 14px; transition: .3s ease; }
.bookshelf-primary { background: var(--shelf-gold); color: #111 !important; }
.bookshelf-primary:hover { background: #f1b84e; transform: translateY(-3px); }
.bookshelf-secondary { border: 1px solid rgba(255,255,255,.28); color: #fff !important; }
.bookshelf-secondary:hover { border-color: #fff; background: #fff; color: var(--shelf-green) !important; transform: translateY(-3px); }
.bookshelf-stats { display: flex; gap: 0; margin-top: 72px; border-top: 1px solid rgba(255,255,255,.14); max-width: 690px; }
.bookshelf-stats div { min-width: 190px; padding: 25px 42px 0 0; }
.bookshelf-stats strong { display: block; font: 600 28px/1 "Playfair Display", serif; color: #fff; }
.bookshelf-stats span { display: block; font-size: 11px; color: rgba(255,255,255,.52); text-transform: uppercase; letter-spacing: .12em; margin-top: 8px; }
.bookshelf-scroll { position: absolute; bottom: 48px; right: 4%; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .15em; font-size: 9px; writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px; }
.bookshelf-scroll span { height: 52px; width: 1px; background: linear-gradient(#e9bc68, transparent); }

.bookshelf-library { padding: 115px 0 135px; background: var(--shelf-paper); }
.bookshelf-heading { display: grid; grid-template-columns: 1.4fr .7fr; gap: 70px; align-items: end; margin-bottom: 50px; }
.bookshelf-eyebrow { display: block; color: #9a6b19; margin-bottom: 19px; }
.bookshelf-heading h2 { font: 600 clamp(40px, 5vw, 70px)/1.02 "Playfair Display", serif; letter-spacing: -.035em; margin-bottom: 0; }
.bookshelf-heading h2 em { color: var(--shelf-green); }
.bookshelf-heading > p { color: var(--shelf-muted); line-height: 1.8; font-size: 15px; max-width: 440px; margin-bottom: 4px; }
.bookshelf-tools { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 22px 0; border-top: 1px solid #d9d3c7; border-bottom: 1px solid #d9d3c7; margin-bottom: 58px; }
.bookshelf-search { width: min(100%, 500px); display: flex; align-items: center; gap: 14px; position: relative; }
.bookshelf-search > i { color: #9a6b19; }
.bookshelf-search input { width: 100%; border: 0; outline: 0; background: transparent; padding: 7px 42px 7px 0; font-size: 15px; color: var(--shelf-ink); }
.bookshelf-search input::placeholder { color: #89857c; }
.bookshelf-search button { border: 0; background: #e9e2d6; color: #444; width: 28px; height: 28px; border-radius: 50%; position: absolute; right: 0; opacity: 0; pointer-events: none; transition: .2s ease; }
.bookshelf-search button.is-visible { opacity: 1; pointer-events: auto; }
.bookshelf-count { white-space: nowrap; color: var(--shelf-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .11em; }
.bookshelf-count span { color: var(--shelf-green); font-weight: 800; }
.bookshelf-marquee { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; border-bottom: 1px solid #d9d3c7; margin-top: -21px; margin-bottom: 58px; padding: 19px 0; color: #8b651f; }
.bookshelf-marquee-track { display: flex; align-items: center; gap: 35px; width: max-content; animation: shelfMarquee 28s linear infinite; }
.bookshelf-marquee span { font: italic 600 17px "Playfair Display", serif; white-space: nowrap; }
.bookshelf-marquee i { width: 5px; height: 5px; border-radius: 50%; background: var(--shelf-green); opacity: .55; }

.bookshelf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; row-gap: 68px; perspective: 1400px; }
.book-card { min-width: 0; opacity: 0; transform: translateY(28px); transition: opacity .6s ease var(--delay), transform .6s ease var(--delay); }
.book-card.is-visible { opacity: 1; transform: none; }
.book-card[hidden] { display: none; }
.book-cover-wrap {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  position: relative;
  display: block;
  height: 425px;
  padding: 25px 28px 0;
  overflow: hidden;
  background: #e9e3d8;
  border-radius: 3px;
  box-shadow: inset 0 -1px rgba(0,0,0,.08);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .35s ease;
}
.book-cover-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,39,34,.75), transparent 50%); opacity: 0; transition: .4s ease; }
.book-cover-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 18px rgba(27,22,13,.22)); transform-origin: center bottom; transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease; }
.book-cover-wrap:hover img { transform: translateY(-9px) scale(1.035) rotateY(-3deg); filter: drop-shadow(0 25px 24px rgba(27,22,13,.32)); }
.book-cover-wrap:hover { box-shadow: 0 24px 55px rgba(41,34,20,.16), inset 0 -1px rgba(0,0,0,.08); }
.book-cover-wrap:hover::after { opacity: 1; }
.book-shine { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255,255,255,.46), transparent 24%); mix-blend-mode: soft-light; transition: opacity .25s ease; }
.book-cover-wrap:hover .book-shine { opacity: 1; }
.book-number { position: absolute; z-index: 2; left: 15px; top: 14px; color: rgba(23,22,16,.42); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.book-store { position: absolute; z-index: 3; right: 14px; top: 12px; border-radius: 100px; padding: 6px 9px; background: rgba(255,255,255,.88); color: #2c2a23; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.book-view { position: absolute; z-index: 3; left: 50%; bottom: 23px; transform: translate(-50%, 15px); opacity: 0; color: #fff; display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 13px; transition: .35s ease; }
.book-cover-wrap:hover .book-view { transform: translate(-50%, 0); opacity: 1; }
.book-meta { padding: 23px 2px 0; }
.book-meta > span { display: block; color: #9a6b19; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 10px; }
.book-meta h3 { font: 600 21px/1.28 "Playfair Display", serif; margin-bottom: 15px; min-height: 54px; }
.book-meta h3 a { color: var(--shelf-ink); transition: color .25s ease; }
.book-meta h3 a:hover { color: #9a6b19; }
.book-link { display: inline-flex; gap: 9px; align-items: center; color: var(--shelf-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.book-link i { color: #9a6b19; transition: transform .25s ease; }
.book-link:hover { color: var(--shelf-green); }
.book-link:hover i { transform: translateX(4px); }
.bookshelf-empty { text-align: center; padding: 90px 20px 30px; }
.bookshelf-empty i { color: #b68835; font-size: 38px; margin-bottom: 20px; }
.bookshelf-empty h3 { font: 600 30px "Playfair Display", serif; }
.bookshelf-empty p { color: var(--shelf-muted); }
.bookshelf-empty button { border: 0; background: var(--shelf-green); color: #fff; border-radius: 100px; padding: 13px 22px; font-weight: 700; }

.bookshelf-cta { padding: 0 0 110px; background: var(--shelf-paper); }
.bookshelf-cta-inner { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .7fr; align-items: end; gap: 70px; background: var(--shelf-green); color: #fff; padding: 75px 80px; border-radius: 4px; }
.bookshelf-cta-inner::after { content: "V"; position: absolute; right: -25px; bottom: -120px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); font: 600 330px/.8 "Playfair Display", serif; }
.bookshelf-cta-inner > div { position: relative; z-index: 1; }
.bookshelf-cta span { color: #e9bc68; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.bookshelf-cta h2 { font: 600 clamp(36px, 4vw, 58px)/1.05 "Playfair Display", serif; color: #fff; margin: 16px 0 0; }
.bookshelf-cta p { color: rgba(255,255,255,.67); line-height: 1.75; margin-bottom: 24px; }
.bookshelf-cta a { display: inline-flex; align-items: center; gap: 12px; background: var(--shelf-gold); color: #111; padding: 16px 23px; border-radius: 100px; font-size: 13px; font-weight: 800; transition: .3s ease; }
.bookshelf-cta a:hover { background: #fff; transform: translateY(-3px); }

@keyframes heroGlow { 0%,100% { transform: scale(.92); opacity: .65; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes bookFloatMain { 0%,100% { transform: translateY(0) rotateY(-4deg); } 50% { transform: translateY(-19px) rotateY(4deg); } }
@keyframes bookFloatLeft { 0%,100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-13px) rotate(-9deg); } }
@keyframes bookFloatRight { 0%,100% { transform: translateY(0) rotate(11deg); } 50% { transform: translateY(-16px) rotate(8deg); } }
@keyframes sparkPulse { 0%,100% { transform: scale(.5); opacity: .3; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes shelfMarquee { to { transform: translateX(-50%); } }

@media (max-width: 1199px) {
  .hero-book-stage { width: 380px; right: 2%; opacity: .86; transform: translate(var(--stage-x), calc(-45% + var(--stage-y))) scale(.86); }
  .bookshelf-hero h1 { max-width: 650px; }
  .bookshelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .book-cover-wrap { height: 420px; }
}
@media (max-width: 991px) {
  .bookshelf-hero { min-height: 670px; }
  .hero-book-stage { right: -100px; opacity: .34; }
  .bookshelf-heading { grid-template-columns: 1fr; gap: 24px; }
  .bookshelf-heading > p { max-width: 650px; }
  .bookshelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-cover-wrap { height: 500px; }
  .bookshelf-cta-inner { padding: 60px 45px; grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 767px) {
  .bookshelf-hero { min-height: auto; text-align: center; }
  .bookshelf-hero-inner { padding-top: 95px; padding-bottom: 75px; }
  .hero-book-stage { width: 360px; right: 50%; top: 53%; transform: translate(50%, -50%) scale(.82); opacity: .14; }
  .bookshelf-kicker { justify-content: center; margin-bottom: 22px; }
  .bookshelf-hero h1 { font-size: clamp(43px, 13vw, 65px); }
  .bookshelf-hero-inner > p { font-size: 15px; }
  .bookshelf-hero-actions { justify-content: center; }
  .bookshelf-stats { justify-content: center; margin-top: 52px; }
  .bookshelf-stats div { min-width: 0; width: 33.333%; padding: 22px 6px 0; }
  .bookshelf-stats strong { font-size: 20px; }
  .bookshelf-stats span { font-size: 8px; }
  .bookshelf-scroll { display: none; }
  .bookshelf-library { padding: 80px 0 95px; }
  .bookshelf-heading { text-align: center; margin-bottom: 38px; }
  .bookshelf-heading h2 { font-size: clamp(40px, 12vw, 58px); }
  .bookshelf-tools { align-items: stretch; flex-direction: column; gap: 13px; padding: 16px 0; margin-bottom: 20px; }
  .bookshelf-marquee { margin-top: 0; margin-bottom: 38px; }
  .bookshelf-count { text-align: left; padding-left: 30px; }
  .bookshelf-grid { gap: 48px 18px; }
  .book-cover-wrap { height: 390px; padding: 21px 18px 0; }
  .book-meta h3 { font-size: 19px; min-height: 0; }
  .bookshelf-cta { padding-bottom: 75px; }
  .bookshelf-cta-inner { text-align: center; padding: 55px 24px; }
}
@media (max-width: 575px) {
  .bookshelf-hero-actions a { width: 100%; }
  .bookshelf-grid { grid-template-columns: 1fr; max-width: 370px; margin: 0 auto; }
  .book-cover-wrap { height: 490px; padding-left: 34px; padding-right: 34px; }
  .book-meta { text-align: center; }
  .book-meta h3 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .book-card { opacity: 1; transform: none; transition: none; }
  .book-cover-wrap img, .bookshelf-page a { transition: none !important; }
  .hero-book, .hero-glow, .hero-spark, .bookshelf-marquee-track { animation: none !important; }
}