/* The house look. Every value a theme is allowed to change is a token
   here; a per-site theme.css redefines a handful of them on :root and
   inherits the rest. Nothing below this block may hard-code a colour or
   a font family — that is what makes a theme possible at all, and a
   dark theme in particular (dianaseere.com inverts bg and ink). */
:root {
  /* Surfaces and text */
  --ink: #241f21; --muted: #6c6468; --line: #e4dee1; --bg: #fdfcfc;
  --accent: #8c2f4e; --accent-ink: #fff;
  --header-bg: #fff;
  --chip-bg: #f2e8ec;
  --shadow-card: 0 2px 8px rgba(0,0,0,.25);
  --shadow-cover: 0 3px 12px rgba(0,0,0,.3);

  /* Type. --font-display is the wordmark/brand face; it falls back to
     the heading face so a theme that does not set one looks unchanged. */
  --font-body: Georgia, "Times New Roman", serif;
  --font-heading: system-ui, sans-serif;
  --font-display: var(--font-heading);
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 var(--font-body); color: var(--ink);
  background: var(--bg); }
main { max-width: 1080px; margin: 0 auto; padding: 1rem 1.25rem 4rem; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.25; }
a { color: var(--accent); }

.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: .75rem 1.25rem; border-bottom: 2px solid var(--accent); background: var(--header-bg); }
.logo { max-height: 64px; width: auto; }
.logo-link { text-decoration: none; }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
  letter-spacing: .01em; color: var(--accent); }
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-family: var(--font-heading); }
.site-nav a { text-decoration: none; color: var(--ink); font-weight: 600; }
.site-nav a:hover { color: var(--accent); }

.hero { text-align: center; padding: 2rem 0 1rem; }
.hero h1 { font-size: 2.4rem; margin-bottom: .25rem; }
.tagline { color: var(--muted); font-style: italic; }

.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.25rem; margin: 1.5rem 0; }
.cover-card { display: block; text-decoration: none; color: var(--ink); text-align: center; }
.cover-card img { width: 100%; height: auto; border-radius: 4px;
  box-shadow: var(--shadow-card); transition: transform .15s; }
.cover-card:hover img { transform: translateY(-3px); }
.cover-title { display: block; margin-top: .5rem; font-family: var(--font-heading);
  font-size: .92rem; font-weight: 600; }
.cover-order { display: block; color: var(--muted); font-size: .8rem;
  font-family: var(--font-heading); }

.book-layout { display: grid; grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 2rem; margin-top: 1rem; }
/* With no cover or author photo there is no left column to fill, and the
   text would otherwise be squeezed into the 300px slot meant for the
   image. Diana Seere has no author photo — the pen name is two people —
   so this is the normal case there, not an edge case. */
.book-layout.no-cover { grid-template-columns: 1fr; }
.book-layout.no-cover .book-description { max-width: 46rem; }
@media (max-width: 720px) { .book-layout { grid-template-columns: 1fr; } }
.book-cover img { width: 100%; height: auto; border-radius: 6px;
  box-shadow: var(--shadow-cover); }
.book-info h1 { margin: 0 0 .25rem; }
.subtitle { color: var(--muted); font-style: italic; margin-top: 0; }
.byline { font-family: var(--font-heading); }
.book-meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
  color: var(--muted); font-family: var(--font-heading); font-size: .9rem; }
.crumbs { font-family: var(--font-heading); font-size: .9rem; margin-bottom: .5rem; }

.format-switch { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem;
  font-family: var(--font-heading); }
.format-switch a { padding: .3rem .8rem; border: 1px solid var(--accent); border-radius: 999px;
  text-decoration: none; font-size: .88rem; }
.format-switch a.active { background: var(--accent); color: var(--accent-ink); }

.retail-links h2 { margin-bottom: .5rem; }
.retail-button { display: inline-block; margin: 0 .5rem .5rem 0; padding: .5rem 1rem;
  background: var(--accent); color: var(--accent-ink); border-radius: 6px;
  text-decoration: none; font-family: var(--font-heading); font-weight: 600;
  font-size: .92rem; }
.retail-button:hover { filter: brightness(1.1); }

/* Author links block. Uses .retail-button so an author's links and a
   book's buy links are the same object visually, and so a theme styles
   both by setting one token. */
.author-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.author-links .retail-button { margin: 0; }

.book-description { margin-top: 1.5rem; }
.chip { display: inline-block; background: var(--chip-bg); border: 1px solid var(--line);
  border-radius: 999px; padding: .1rem .7rem; margin: 0 .3rem .3rem 0;
  font-family: var(--font-heading); font-size: .82rem; }
.content-warnings { margin-top: 1rem; color: var(--muted);
  font-family: var(--font-heading); font-size: .9rem; }

.series-description { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--line); padding: .5rem 0; }
.faq summary { cursor: pointer; font-family: var(--font-heading); font-weight: 600; }

.site-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.5rem;
  text-align: center; color: var(--muted); font-family: var(--font-heading);
  font-size: .9rem; }
.footer-links a { margin: 0 .75rem; }

/* Optional hero strip, rendered only when the site declares a
   hero_image. Never cropped: this is somebody's artwork and a height cap
   decapitated it (the first attempt cut the wolf's eyes off the Diana
   Seere banner). Instead the image is capped at its own natural width
   and centred, so it is shown whole on a wide screen and scales down
   proportionally on a narrow one. */
.site-hero { display: block; width: 100%; margin: 0; background: var(--header-bg); }
.site-hero img { display: block; width: 100%; max-width: var(--hero-max-width, 1200px);
  height: auto; margin: 0 auto; }