/* ============================================================
   Brown Girl Book Club — browngirlbook.club
   Design rationale: _PLAN/01_DESIGN_REVIEW_BY_PERSONA.md §2

   The buyer is not shopping — she is choosing what to spend the
   next two weeks of her attention on, and looking for a room
   where her taste is assumed rather than explained.

   Two defaults deliberately rejected:
     · cream-and-brown "cosy bookish" — the generic book-blog look,
       says nothing about this audience
     · purple-and-gold "empowerment" — the visual cliché applied to
       Black women's brands; reads as marketing, not taste

   Instead: a deep oxblood ground with brass. Dark is unusual in
   this category, immediately distinctive, and it makes cover art
   glow rather than sit flat on white. Cover art is the site's only
   imagery, so the design exists to serve it.

   Structural idea: the current pick IS the interface. One dominant
   object, not a grid. A monthly rhythm that makes returning feel
   like arriving somewhere familiar.

   Contrast (WCAG 2.2 AA) — the risk with dark grounds, handled:
     --cream on --ground     = 14.1:1
     --cream-soft on --ground=  9.6:1
     --brass on --ground     =  8.2:1
     --ground on --brass     =  8.2:1
     --cream on --ground-2   = 12.4:1
   ============================================================ */

:root {
  --ground:     #2b1418;   /* deep oxblood */
  --ground-2:   #3a1c21;   /* raised panel */
  --ground-3:   #4a262c;   /* borders, hairlines */

  --cream:      #f6ece1;
  --cream-soft: #cfb9ab;

  --brass:      #d9a441;
  --brass-deep: #b8862c;

  --accent:     var(--brass);
  --accent-ink: #2b1418;
  --ink:        var(--cream);
  --paper:      var(--ground);
  --focus:      #f6ece1;   /* light ring — the only thing visible on a dark ground */

  --serif: 'Hoefler Text', 'Baskerville', 'Palatino Linotype', Georgia, serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --measure: 66ch;
}

/* ============ Document ============ */
body {
  background: var(--ground);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1.09rem;      /* generous — people read long reviews here */
  line-height: 1.72;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  color: var(--cream);
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 6.5vw, 4.4rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.15rem); margin: 3.25rem 0 1rem; }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); margin: 2rem 0 0.5rem; }

p { margin-bottom: 1.25rem; color: var(--cream); }
ul, ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
li { margin-bottom: 0.5rem; }
strong { font-weight: 650; color: var(--brass); }

a { color: var(--brass); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: #eab95c; text-decoration-thickness: 2px; }

hr { border: none; border-top: 1px solid var(--ground-3); margin: 3rem 0; }

/* ============ Layout ============ */
.wrap         { width: min(100% - 2.5rem, 1080px); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 680px);  margin-inline: auto; }
.section      { padding: 4rem 0; }
.section--alt { background: var(--ground-2); }

/* ============ Header — a masthead, not a nav bar ============ */
.site-header {
  background: var(--ground);
  border-bottom: 1px solid var(--ground-3);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.1rem 0; flex-wrap: wrap;
}
.site-logo {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.site-logo::after {
  content: "";
  display: block;
  width: 2.2rem; height: 2px;
  background: var(--brass);
  margin-top: 0.35rem;
}
.site-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
  text-decoration: none;
  padding: 0.7rem 0;
  display: inline-block;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--brass); }

/* ============ The pick — the site's whole interface ============ */
.pick {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: 3.5rem 0 3rem;
}
@media (min-width: 50rem) {
  .pick { grid-template-columns: minmax(0, 20rem) 1fr; gap: 4rem; }
}

/* Original title panel, deliberately distinct from publisher cover art.
   Cap the width so single-column layouts do not become a tall blank panel. */
.pick__cover {
  width: min(100%, 20rem);
  justify-self: center;
  aspect-ratio: 2 / 3;
  background: linear-gradient(150deg, var(--ground-3), var(--ground-2));
  border: 1px solid var(--ground-3);
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.45);
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}
.pick__cover span {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--cream-soft);
  font-style: italic;
}

.pick__meta {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1rem;
}
.pick h1 { margin-bottom: 0.5rem; }
.pick__author {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--cream-soft);
  margin-bottom: 1.5rem;
}
.pick__date {
  display: inline-block;
  border: 1px solid var(--brass);
  color: var(--brass);
  padding: 0.55rem 1.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  background: var(--brass);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.btn:hover { background: #eab95c; color: var(--accent-ink); }
.btn--ghost {
  background: transparent;
  color: var(--brass);
  border: 1px solid var(--brass);
}
.btn--ghost:hover { background: var(--brass); color: var(--accent-ink); }

/* ============ Reading list — a dense index, never cards ============
   This audience scans many titles fast. Cards waste vertical space
   on chrome and slow that down. */
.index { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--ground-3); }
.index > li {
  border-bottom: 1px solid var(--ground-3);
  padding: 1.15rem 0;
  display: grid;
  gap: 0.15rem 2rem;
}
@media (min-width: 46rem) {
  .index > li { grid-template-columns: 1fr auto; align-items: baseline; }
}
.index__title {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--cream);
}
.index__title a { color: var(--cream); text-decoration: none; }
.index__title a:hover { color: var(--brass); }
.index__author { font-style: italic; color: var(--cream-soft); font-size: 0.98rem; }
.index__when {
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream-soft);
  white-space: nowrap;
}

/* ============ Discussion questions — the conversion moment ============ */
.questions {
  background: var(--ground-2);
  border-left: 3px solid var(--brass);
  padding: 2rem 2.25rem;
  margin: 2.5rem 0;
}
.questions h2 { margin-top: 0; font-size: 1.4rem; }
.questions ol { margin-bottom: 0; }
.questions li { margin-bottom: 0.9rem; }

/* ============ Callout / disclosure ============ */
.callout, .disclosure {
  background: var(--ground-2);
  border-left: 3px solid var(--ground-3);
  padding: 1.4rem 1.6rem;
  margin: 2.25rem 0;
  max-width: var(--measure);
}
.disclosure { border-left-color: var(--brass); font-size: 0.94rem; margin-bottom: 2rem; }
.callout p:last-child, .disclosure p:last-child { margin-bottom: 0; }

/* ============ Signup — no count claim, by policy ============ */
.signup {
  border: 1px solid var(--ground-3);
  background: var(--ground-2);
  padding: 2.5rem 2.25rem;
  max-width: 42rem;
}
.signup h2 { margin-top: 0; }
.signup__form { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.4rem; align-items: flex-end; }
.signup label {
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream-soft);
  margin-bottom: 0.4rem;
}
.signup input[type="email"] {
  width: 100%;
  padding: 0.85rem 0.9rem;
  background: var(--ground);
  border: 1px solid var(--ground-3);
  border-radius: 0;
  color: var(--cream);
}
.signup input[type="email"]:focus-visible { border-color: var(--brass); }
.signup__note { font-size: 0.9rem; color: var(--cream-soft); margin: 1.1rem 0 0; }

/* ============ Footer ============ */
.site-footer {
  border-top: 1px solid var(--ground-3);
  padding: 3rem 0;
  margin-top: 4.5rem;
  font-size: 0.9rem;
}
.site-footer ul { display: flex; gap: 1.5rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1.2rem; }
.site-footer a { color: var(--cream-soft); text-decoration: none; padding: 0.35rem 0; display: inline-block; }
.site-footer a:hover { color: var(--brass); }
.site-footer p { color: var(--cream-soft); margin: 0; max-width: none; }