/* ====== Brand Variables (match your Books page) ====== */
:root{
  --bg: #f9f5f2;         /* page background */
  --ink: #222222;        /* base text */
  --burgundy: #6b1e46;   /* header, primary buttons, h1 */
  --sapphire: #1b3a4b;   /* footer bg, h2 */
  --emerald: #00755e;    /* h3 and accents */
  --banner: #f3ede8;     /* page banner background */
  --gold: #d4af37;       /* divider/accent */
  --white: #ffffff;
  --surface: #ffffff;
  --shadow: 0 4px 6px rgba(0,0,0,.10);
  --radius: 12px;
}

/* ====== Base ====== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Lora', serif;              /* NEW: Lora for body */
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;  /* NEW: Cormorant for headings */
  margin: 0 0 .5rem;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--burgundy); }
h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--sapphire); }
h3 { font-size: 1.25rem; color: var(--emerald); }
p  { margin: 0 0 1rem; }

/* ====== Layout Helpers ====== */
.container { width: min(100% - 2rem, 1100px); margin-inline: auto; }
.grid { display: grid; gap: 2rem; }
.two-col { grid-template-columns: 1.1fr .9fr; align-items: center; }
.hero-split { padding: 2rem 0; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
.card-img { border-radius: var(--radius); box-shadow: var(--shadow); }
.small { font-size: .9rem; opacity: .85; }

/* ====== Header / Nav (matches your Books header colors) ====== */
.site-header {
  background: var(--burgundy);
  color: var(--white);
  padding: 1rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-header .brand img { height: 60px; }
.nav { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; }
.nav a { color: var(--white); font-weight: 700; }
.nav a.active { border-bottom: 2px solid var(--gold); padding-bottom: .2rem; }

/* ====== Page Banner (same tones as Books page) ====== */
.page-banner {
  background: var(--banner);
  padding: 3rem 2rem;
  text-align: center;
  border-bottom: 2px solid var(--gold);
}

/* ====== Buttons ====== */
.button {
  display: inline-block;
  background: var(--burgundy);
  color: var(--white);
  padding: .65rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: var(--shadow);
}
.button:hover { filter: brightness(.95); }
.button.outline {
  background: transparent;
  color: var(--burgundy);
  border: 2px solid var(--burgundy);
}
/* Add darker shades (if not already set) */
:root{
  --burgundy-hover: #8a2759; /* a step brighter/warmer */
  --burgundy-active: #571738; /* deeper for pressed state */
}

/* ====== Newsletter ====== */
.newsletter {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin: 2rem 0 3rem;
}
.inline-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.inline-form label { font-weight: 700; }
.inline-form input {
  padding: .6rem .7rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-width: 240px;
  font-family: 'Lora', serif;
}
.inline-form button { border: none; }

/* Center the H2 that lives inside the .cards grid */
.cards > h2 {
  grid-column: 1 / -1;   /* span full grid width */
  justify-self: center;  /* center the element itself */
  text-align: center;
  margin-bottom: .25rem;
}

/* Ensure cards fill rows in order (no odd re-packing) */
.cards {
  grid-auto-flow: row;   /* keep natural DOM order */
  align-items: stretch;
}

/* Make card heights consistent so rows look even */
.cards .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}


/* ====== Footer (same sapphire as Books page) ====== */
.site-footer {
  background: var(--sapphire);
  color: var(--white);
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 2rem;
}
.site-footer a { color: var(--gold); }

/* ====== Responsive ====== */
@media (max-width: 1024px){
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .site-header { padding: .8rem 1rem; }
  .nav { gap: .8rem; }
  .cards { grid-template-columns: 1fr; }
}
