:root{
  --bg: #fff;
  --text: #1b1b1b;
  --muted: #6b6b6b;
  --brand: #cc7a2b;
  --brand-2: #8f3a1f;
  --cream: #fff6ef;
  --card: #ffffff;
  --shadow: 0 8px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{padding:0;margin:0}
body{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 80px; /* adjust based on your header height */
}


/* Utilities */
.container{width:min(1200px, 92%); margin-inline:auto}
.section{padding: clamp(3rem, 8vw, 6rem) 0}
.section--alt{background: var(--cream)}
.h2{
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 1rem 0;
}
.h3{font-size:1.25rem;margin:0 0 1rem}
.eyebrow{letter-spacing:.12em; text-transform:uppercase; color:var(--brand); font-weight:600; font-size:.85rem}

/* Header */
.site-header{
  position: sticky; top:0; z-index: 10;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, white 80%, transparent);
  border-bottom: 1px solid #eee;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding-block:.8rem}
.brand{font-weight:700; letter-spacing:.08em; color:var(--text); text-decoration:none}
.nav-toggle{display:none; font-size:1.25rem; background:none; border:0; cursor:pointer}
.nav-list{display:flex; gap:1rem; list-style:none; padding:0; margin:0}
.nav-list a{color:#333; text-decoration:none; padding:.5rem .75rem; border-radius:10px}
.nav-list a:hover{background:#f2f2f2}

/* Hero */
.hero{
  position:relative; overflow:hidden; background: linear-gradient(180deg, #fff, #fff9f4);
}
.hero-grid{
  display:grid; gap:2rem;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.hero-title{
  font-family:'Playfair Display', serif;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height:1.05;
  margin: .25rem 0 .75rem;
}
.hero-title span{color:var(--brand)}
.hero-sub{color:var(--muted); margin-bottom:1rem}
.hero-cta{display:flex; align-items:center; gap:1rem}
.btn{
  display:inline-block; padding:.8rem 1.2rem; border-radius:999px;
  font-weight:600; text-decoration:none; border:2px solid transparent; transition:.2s;
}
.btn-primary{background:var(--brand); color:white}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{border-color:var(--brand); color:var(--brand); background:transparent}
.btn-outline:hover{background:var(--brand); color:white}
.slide-indicator{color:#b8b8b8; font-weight:700}
.mini-covers{display:flex; gap:1rem; margin-top:2rem}
.mini-covers img{width:100px; aspect-ratio:3/4; object-fit:cover; border-radius:12px; box-shadow: var(--shadow)}
.hero-art{display:grid; place-items:center}
.book-hero{width:min(420px, 90%); aspect-ratio:3/4; object-fit:cover; border-radius:10px; box-shadow: var(--shadow)}

/* Decorative blobs */
.hero-decor{position:absolute; border-radius:50%; filter:blur(40px); opacity:.35}
.hero-decor--tl{width:420px; height:420px; background: radial-gradient(circle at 30% 30%, #e09f56, #8f3a1f); top:-120px; left:-120px}
.hero-decor--br{width:380px; height:380px; background: radial-gradient(circle at 70% 70%, #e9b27a, #cc7a2b); bottom:-140px; right:-140px}

/* About the books */
.about-grid{display:grid; gap:2.5rem; grid-template-columns: 1.1fr .9fr; align-items:center}
.about-copy p{color:var(--muted)}
.about-cover img{width:95%; border-radius:18px; }

.section--about-books {
  background: #ffe9d7; /* soft cream */
}

.vinyl-section {
  background: var(--cream);
  text-align: center;
}

.vinyl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.vinyl-title {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.vinyl-item {
  position: relative;
  cursor: pointer;
}

.vinyl img {
  width: 100%;
  max-width: 180px;
}

/* spin forever while hovered */
.vinyl-item:hover .vinyl img {
  animation: spin 2s linear infinite;
  will-change: transform;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}



/* Gallery */
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.25rem}
.sub{color:var(--muted)}
.gallery-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(3, 1fr);
}
.gallery-grid img{width:100%; height:260px; object-fit:cover; border-radius:14px; box-shadow: var(--shadow)}

/* Author */
.author-card{
  display:grid; gap:2rem; grid-template-columns: .9fr 1.1fr;
  align-items:center; background: var(--card); padding:clamp(1.25rem, 4vw, 2rem);
  border-radius:20px; box-shadow: var(--shadow);
}
.author-photo img{width:100%; border-radius:16px; object-fit:cover}

/* Reviews */
.reviews{display:grid; gap:1rem}
.review{display:flex; gap:1rem; align-items:flex-start; background:var(--card); padding:1rem; border-radius:14px; box-shadow: var(--shadow)}
.review-avatar img{width:56px; height:56px; border-radius:50%; object-fit:cover}

/* Contact */
.contact-grid{display:grid; gap:2rem; grid-template-columns: 1fr 1fr; align-items:start}
form{display:grid; gap:1rem}
label{display:grid; gap:.35rem}
input, textarea{
  width:100%; border:1px solid #e7e7e7; background:#fff;
  padding:.8rem 1rem; border-radius:12px; font:inherit
}
.contact-map iframe{width:100%; height:100%; min-height:360px; border:0; border-radius:16px; box-shadow: var(--shadow)}

/* Footer */
.site-footer{padding:2rem 0; border-top:1px solid #eee}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.footer-inner .socials a{margin-left:.75rem; text-decoration:none; color:#999}

/* Responsive */
@media (max-width: 992px){
  .hero-grid, .about-grid, .author-card, .contact-grid{
    grid-template-columns: 1fr;
  }
  .mini-covers img{width:80px}
}
@media (max-width: 720px){
  .nav-toggle{display:inline-block}
  .nav-list{position:absolute; right:1rem; top:60px; background:white; padding:1rem; border-radius:12px; box-shadow: var(--shadow); display:none; flex-direction:column; min-width:200px}
  .nav-list.open{display:flex}
  .gallery-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 520px){
  .gallery-grid{grid-template-columns: 1fr}
  .book-hero{width:80%}
}



/* ---------- Reusable Blurred Blob System ---------- */
/* Make sections able to hold absolutely–positioned decor */
.section,
.section--alt { position: relative; overflow: hidden; }

/* Base blob */
.blob {
  position: absolute;
  width: var(--size, 420px);
  height: var(--size, 420px);
  border-radius: 50%;
  filter: blur(40px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at var(--gx,30%) var(--gy,30%), var(--c1, #e09f56), var(--c2, #8f3a1f));
  transform: rotate(var(--rotate, 0deg)) scale(var(--scale, 1));
}

/* Direction helpers */
.blob--tl { top:  -140px; left:  -140px; }
.blob--tr { top:  -140px; right: -140px; }
.blob--bl { bottom:-140px; left:  -140px; }
.blob--br { bottom:-140px; right: -140px; }

/* Side-center options */
.blob--lc { top: 50%; left:-160px; transform: translateY(-50%) rotate(var(--rotate,0deg)) scale(var(--scale,1)); }
.blob--rc { top: 50%; right:-160px; transform: translateY(-50%) rotate(var(--rotate,0deg)) scale(var(--scale,1)); }

/* Color variants using your theme tokens */
.blob--brand  { --c1: #e9b27a; --c2: var(--brand); }
.blob--brand2 { --c1: #f0a771; --c2: var(--brand-2); }
.blob--cream  { --c1: #fff0e2; --c2: #f3d8c2; } /* subtle for alt sections */

/* Optional: twin depth (small darker core) */
.blob.blob--core {
  width: calc(var(--size,420px) * .7);
  height: calc(var(--size,420px) * .7);
  filter: blur(30px);
  opacity: .45;
  --gx: 65%; --gy: 65%;
}


/* Header navigation smooth animation */
.nav-list a {
  position: relative;
  color: #333;
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 10px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Animated underline effect */
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: var(--brand);
  transition: width 0.3s ease;
}

/* On hover */
.nav-list a:hover {
  color: var(--brand);
  background: rgba(204, 122, 43, 0.08);
}

.nav-list a:hover::after {
  width: 100%;
}


/* --- Hamburger button --- */
.nav-toggle{
  display:none;
  width:42px; height:38px;
  border:0; background:transparent; cursor:pointer;
  padding:6px; border-radius:10px;
  display:none; align-items:center; justify-content:center;
}
.nav-toggle:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.nav-toggle .bar{
  display:block; width:26px; height:2px; background:#333;
  border-radius:2px; position:relative; transition:transform .3s ease, opacity .2s ease, translate .3s ease;
}
.nav-toggle .bar + .bar{ margin-top:6px }

/* transform to "X" when active */
.nav-toggle.active .bar:nth-child(1){ transform:rotate(45deg) translate(5px, 5px) }
.nav-toggle.active .bar:nth-child(2){ opacity:0 }
.nav-toggle.active .bar:nth-child(3){ transform:rotate(-45deg) translate(6px, -6px) }

/* --- Mobile menu panel --- */
@media (max-width: 720px){
  .nav-toggle{ display:flex }

  /* panel */
  .nav-list{
    position: absolute;
    right: 1rem; top: 60px;
    background: #fff;
    padding: .75rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column;
    min-width: 220px;
    gap: .25rem;
    transform: translateY(-10px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .nav-list.open{
    opacity: 1; pointer-events: auto;
    transform: translateY(0);
  }
  .nav-list a{
    padding: .7rem .85rem; border-radius: 10px;
  }
}

/* Other Books */

@media (max-width: 1100px){ .books-grid{ grid-template-columns: repeat(4,1fr); } }
@media (max-width: 900px){  .books-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 680px){  .books-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){  .books-grid{ grid-template-columns: 1fr; } }
/* make all cards stretch equally in the page grid */
.books-page { align-items: stretch; }

/* card fills its grid cell */
.book-card { height: 100%; }
.book-actions {
  margin-top: auto;   /* still pushes it down */
}
.book-actions .btn {
  border-radius: 8px;   /* smaller curve instead of pill */
  padding: .8rem 0;     /* consistent height */
}


.book-actions .btn {
  display: block;
  width: 100%;
  text-align: center; /* keeps text centered */
}

/* stack title + author + actions vertically */
.book-meta {
  display: flex;
  flex-direction: column;
  gap: .6rem;           /* optional spacing */
  height: 100%;
}

/* push the button group to the bottom */
.book-actions { 
  margin-top: auto; 
}

.book-card{
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform .2s ease, box-shadow .2s ease;
}
.book-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.12); }

.book-cover{
  display: block;
  width: 100%;
  aspect-ratio: 3/4;         /* keeps covers consistent */
  overflow: hidden;
}
.book-cover img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.book-cover:hover img{ transform: scale(1.05); }

.book-meta{
  padding: .9rem .95rem 1rem;
}
.book-title{
  margin: 0 0 .35rem;
  font-size: clamp(1rem, 1.1vw, 1.05rem);
  line-height: 1.3;
}
.book-author{
  margin: 0 0 .8rem;
  color: var(--muted);
  font-size: .95rem;
}

.book-actions{
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.books-foot{
  display: grid; place-items: center;
  margin-top: clamp(1rem, 3vw, 1.5rem);
}


/* ---- Paginated Books Slider ---- */
.books-slider { display: grid; gap: 1rem; }
.books-viewport {
  overflow: hidden;
  border-radius: 16px;
}
.books-track {
  display: flex; 
  transition: transform .45s ease;
  will-change: transform;
}

/* Each page is a grid of 4 cards; responsive columns but still 4 items per page */
.books-page {
  min-width: 100%;
  padding: .25rem;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.25rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px){
  .books-page { grid-template-columns: repeat(2, 1fr); } /* 2 columns x 2 rows = 4 items */
}
@media (max-width: 480px){
  .books-page { gap: 0.9rem; }
}

/* Controls */
.books-controls{
  display: flex; align-items: center; justify-content: center;
  gap: .6rem;
}
.books-prev, .books-next{
  width: 40px; height: 40px;
  border-radius: 999px; border: 1px solid #e6e6e6;
  background: #fff; color: #333; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  transition: transform .15s ease, background-color .2s ease;
}
.books-prev:hover, .books-next:hover{ transform: translateY(-2px); background: #fafafa; }
.books-prev:disabled, .books-next:disabled{ opacity: .4; cursor: not-allowed; }

.books-dots { display: flex; gap: .4rem; align-items: center; }
.books-dot{
  width: 9px; height: 9px; border-radius: 999px; border: 0; cursor: pointer;
  background: #d5d5d5;
}
.books-dot[aria-current="true"]{ background: var(--brand); }

/* Reuse your existing .book-card styles — they’ll render inside .books-page */