/* ===========================
   1. Theme / CSS variables (modern small-press fiction)
   =========================== */
:root{
  --bg: #f7f3ee;           /* warm paper */
  --text: #22211f;         /* deep charcoal */
  --muted: #7d7a78;        /* softened gray */
  --accent-1: #b88a49;     /* warm gold */
  --accent-2: #8aa39b;     /* muted sage */
  --header-bg: transparent;
  --max-width: 860px;      /* slightly narrower for prose */
  --radius: 8px;
  --shadow-1: 0 6px 18px rgba(34,33,31,0.06);
  --shadow-2: 0 10px 30px rgba(34,33,31,0.08);
}

/* ===========================
   2. Reset / base
   =========================== */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}

/* ===========================
   3. Typography
   =========================== */
h1,h2,h3{
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  font-weight:700;
  color:var(--text);
  letter-spacing: -0.01em;
}
h1{ font-size:2rem; }
h2{ font-size:1.6rem; margin-top:1.25rem; }
h3{ font-size:1.2rem; }
p{ margin-bottom:1rem; color: #333; }

/* ===========================
   4. Header / Nav (subtle, editorial)
   =========================== */
   /* Site title / top header — centered */
    .site-header {
      display: flex;
      flex-direction: column;
      align-items: center;    /* horizontally center title */
      justify-content: center; /* vertically center if header grows */
      padding: 1rem 1.25rem;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      background: transparent;
    }
    .site-header .site-title {
      /* changed to a modern literary display serif */
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      font-size: 2rem;
      margin: 0;
      color: var(--text, #222);
      text-decoration: none;
      display: inline-block;
      text-align: center;
    }

    /* Main navigation bar under the title */
    .main-nav {
      display: flex;
      justify-content: center;
      gap: 1.25rem;
      padding: 0.6rem 0 1.1rem;
      background: transparent;
    }
    .main-nav a {
      color: var(--muted, #6f6f6f);
      text-decoration: none;
      font-weight: 700;
      padding: 0.45rem 0.6rem;
      border-radius: 6px;
      transition: background .18s, color .18s, transform .12s;
    }
    .main-nav a:hover {
      background: rgba(0,0,0,0.04);
      color: var(--text, #222);
      transform: translateY(-1px);
    }
header{
  background: var(--header-bg);
  padding: 1rem 1.25rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom: 1px solid rgba(34,33,31,0.06);
}
header h1{
  font-size:1.25rem;
  margin:0;
}
nav a{
  color: var(--muted);
  margin-left:1.25rem;
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
}
nav a:hover{ color: var(--text); }

/* Dropdown: position flush under the nav item and use opacity/visibility so brief mouse gaps don't hide it */
.main-nav .dropdown {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0;
}

/* panel — start hidden (transparent + not interactive) and animate into view */
.main-nav .dropdown .dropdown-content {
  position: absolute;
  top: 100%;                 /* sit directly under the trigger */
  left: 0;
  margin-top: 0px;           /* very small gap so it feels connected */
  background: #222;
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;      /* prevent accidental hover when hidden */
}

/* show the panel when hovering or keyboard-focused — allow pointer events then */
.main-nav .dropdown:hover .dropdown-content,
.main-nav .dropdown:focus-within .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ensure links inside remain usable */
.main-nav .dropdown .dropdown-content a {
  color: var(--muted);
  padding: 0.5rem 1.2rem;
  display: block;
  text-decoration: none;
  font-size: 0.92rem;
}
.main-nav .dropdown .dropdown-content a:hover { background:#333; color:#fff; }

/* ===========================
   5. Layout / containers
   =========================== */
main { max-width: var(--max-width); margin: 2rem auto; padding: 0 1rem; }

/* ===========================
   6. Components (grouped)
   =========================== */

/* Book mosaic / grid */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 1.5rem;
}
.book-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .3s;
}
.book-card:hover { transform: translateY(-6px); }
.book-card img { width:100%; height:280px; object-fit:cover; }
.book-card h3 { text-align:center; padding:1rem; font-size:1.1rem; }

/* Book detail */
.book-page img { width:100%; border-radius:10px; margin-bottom:1rem; }
.reviews { margin-top:2rem; }
.review { background:#f1f1f1; padding:1rem; border-radius:6px; margin-bottom:1rem; }

/* Dropdown menu (Readings) */
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
  display: none;
  position: absolute;
  background: #222;
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  z-index: 1;
}
.dropdown-content a {
  color: var(--muted);
  padding: 0.5rem 1.2rem;
  display: block;
  text-decoration: none;
  font-size: 0.92rem; /* smaller font for dropdown */
}
.dropdown-content a:hover { background:#333; color:#fff; }
.dropdown:hover .dropdown-content { display:block; }

/* Readings popped-out notice */
.readings-notice {
  background: linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color: #fff;
  padding: 1.25rem 1rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(255,107,107,0.18);
  text-align: center;
  max-width: 820px;
  margin: 2rem auto;
  transition: transform 180ms ease;
}
.readings-notice:hover { transform: translateY(-4px); }
.readings-notice p { font-size:1.25rem; line-height:1.3; margin:0; }
.readings-notice .strong { font-weight:700; letter-spacing:0.02em; }

/* Components: shared buttons (used by book pages and elsewhere) */
.buy-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--text, #111);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.25s ease, transform 120ms ease;
}
.buy-btn:hover { background: #444; transform: translateY(-2px); }

/* Award block — center on page and make image larger */
.award {
  max-width: 900px;
  margin: 2.5rem auto;
  padding: 0 1rem;
  text-align: center;
}
.award .award-inner {
  display: inline-block;
  text-align: center;
}
.award img {
  display: block;
  margin: 0 auto 1rem;
  max-width: 560px; /* larger image */
  width: min(90%, 560px);
  height: auto;
}
.award a {
  font-weight: 700;
  color: var(--text, #222);
  text-decoration: none;
}
.award a:hover { text-decoration: underline; }
/* ===========================
   7. Utilities
   =========================== */
.text-center { text-align:center; }
.visually-hidden {
  position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
}

/* ===========================
   8. Responsive tweaks
   =========================== */
@media (max-width:700px){
  h1{ font-size:1.4rem; }
  .book-card img { height:220px; }
  .dropdown-content { min-width:160px; font-size:0.88rem; }
}

/* Books gallery — 3 per row, responsive */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* three columns on wide screens */
  gap: 1.25rem;
  align-items: start;
  max-width: var(--max-width);
  margin: 1.5rem auto;
  padding: 0 1rem;
}

/* Book card: center the image and ensure no white gap shows */
.book-card {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  box-shadow: var(--shadow-1);
  transition: transform .25s;
}
.book-card:hover { transform: translateY(-6px); }

.book-card img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: #000;
  box-sizing: border-box;
}

/* Responsive: reduce columns and image max-height on narrower viewports */
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .book-card img { max-height: 280px; }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; }
  .book-card img { max-height: 180px; }
}

/* load site fonts once for all pages */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Open+Sans&display=swap');

/* ensure site title is consistent across all pages */
.site-header .site-title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 5rem; /* change this if you want larger/smaller */
  line-height: 1;
  color: var(--text, #222);
  text-decoration: none;
}