/* Theme: Library. A warm, bookish look: cream paper, bottle green and oxblood, Libre Baskerville
   headings and Source Serif text. A centred newspaper-style masthead, a narrower reading column,
   banners framed like old prints, and the author list laid out as catalogue cards with coloured spines. */
:root:root:root {
  --art-theme: library;
  --bg: #f4eee1;
  --surface: #fbf8f0;
  --ink: #2a2118;
  --ink-2: #554739;
  --muted: #7d6e5c;
  --grid: #e6dccb;
  --rule: #cdbfa6;
  --lead: #2f5d4a;
  --major: #6f9a7f;
  --minor: #c9dccd;
  --on-lead: #f7f2e6;
  --on-major: #10251b;
  --on-minor: #17301f;
  --hl: rgba(47, 93, 74, 0.08);
  --hl-strong: rgba(47, 93, 74, 0.18);
  --accent: #8a2f2a;
  --vote: #8a2f2a;
  --vote-bg: rgba(138, 47, 42, 0.08);
  --tab: #ece3d2;
  --bar: #f4eee1;
  --on-bar: #2a2118;
  --shadow: 0 8px 28px rgba(60, 42, 20, 0.18);
  --display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --body: "Source Serif 4", Georgia, serif;
  --spine-crime: #6b2420; --spine-thriller: #23394d; --spine-romance: #a24d5c; --spine-fantasy: #4d3f73;
  --spine-scifi: #24525e; --spine-horror: #2b2b2b; --spine-hist: #7b5a2a; --spine-lit: #2f5d4a; --spine-ya: #8c4d8a; --spine-kids: #c06a2c;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:root:root:not([data-theme="light"]) {
    --bg: #1b1712; --surface: #241f18; --ink: #efe6d4; --ink-2: #cdbfa6; --muted: #9c8e77; --grid: #33291f; --rule: #4a3d2e;
    --lead: #a9d1b8; --major: #5e8f72; --minor: #2f4a3a; --on-lead: #10251b; --on-major: #0b1a12; --on-minor: #e2efe6;
    --hl: rgba(169, 209, 184, 0.10); --hl-strong: rgba(169, 209, 184, 0.2); --accent: #e09a8c; --vote: #e09a8c; --vote-bg: rgba(224, 154, 140, 0.14);
    --tab: #2b241b; --bar: #1b1712; --on-bar: #efe6d4; color-scheme: dark;
  }
}
:root:root:root[data-theme="dark"] {
  --bg: #1b1712; --surface: #241f18; --ink: #efe6d4; --ink-2: #cdbfa6; --muted: #9c8e77; --grid: #33291f; --rule: #4a3d2e;
  --lead: #a9d1b8; --major: #5e8f72; --minor: #2f4a3a; --on-lead: #10251b; --on-major: #0b1a12; --on-minor: #e2efe6;
  --hl: rgba(169, 209, 184, 0.10); --hl-strong: rgba(169, 209, 184, 0.2); --accent: #e09a8c; --vote: #e09a8c; --vote-bg: rgba(224, 154, 140, 0.14);
  --tab: #2b241b; --bar: #1b1712; --on-bar: #efe6d4; color-scheme: dark;
}
body { font-size: 16.5px; }

/* Centred masthead with double rules */
.topbar { border-bottom: 4px double var(--rule); }
.topbar .inner { flex-direction: column; justify-content: center; gap: 8px; padding-block: 18px 12px; max-width: 1080px; }
.brand { font-size: clamp(26px, 4vw, 40px); font-weight: 700; letter-spacing: 0.02em; }
.brand .mk { display: none; }
.topbar nav { justify-content: center; gap: 4px 24px; border-top: 1px solid var(--rule); padding-top: 8px; width: 100%; font-variant: small-caps; font-size: 16px; letter-spacing: 0.06em; }
.topbar nav a { opacity: 1; color: var(--ink-2); }
.topbar nav a[aria-current="page"], .topbar nav a:hover { color: var(--accent); }

.wrap { max-width: 1080px; }
h1 { font-weight: 700; font-size: clamp(34px, 5vw, 56px); line-height: 1.08; }
h2 { font-weight: 700; font-size: clamp(24px, 3vw, 30px); }
h3 { font-family: var(--display); font-size: 19px; font-weight: 700; }
.eyebrow { font-family: var(--body); font-variant: small-caps; text-transform: lowercase; font-size: 15px; letter-spacing: 0.12em; color: var(--accent); }

/* Banners framed like a print on a mat */
.art-banner { display: block; background: var(--surface); padding: 10px; border: 1px solid var(--rule); box-shadow: var(--shadow); height: clamp(130px, 24vw, 280px); }
.art-banner svg { display: block; width: 100%; height: 100%; }
.hero, .masthead { text-align: center; justify-items: center; }
.hero .lede, .masthead .lede, .masthead .caveat { margin-inline: auto; }
.hero .figures, .hero .quick, .masthead .tagrow, .masthead .jump, .masthead .vote-row { justify-content: center; }
.hero .searchbox { width: 100%; text-align: left; }
.hero h1 { font-size: clamp(40px, 6.5vw, 74px); font-style: italic; }
.section-head { text-align: center; justify-items: center; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.section-head p { margin-inline: auto; }

.panel, .board, .cast-card, .results { border-radius: 2px; }
.panel { box-shadow: 0 1px 0 var(--rule); }
.chip { border-radius: 3px; font-family: var(--body); font-variant: small-caps; font-size: 15px; letter-spacing: 0.04em; padding: 3px 11px; }
.chip[aria-pressed="true"] { background: var(--lead); border-color: var(--lead); color: var(--on-lead); }
.buy { border-radius: 2px; }
.searchbox input { border-radius: 2px; border-width: 1px 1px 2px; font-family: var(--body); }

/* Author list as catalogue cards with a coloured spine for the main genre */
.author-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.author-card {
  border-radius: 2px;
  border-left: 10px solid var(--spine-lit);
  padding: 14px 16px 12px 18px;
  background: var(--surface) repeating-linear-gradient(to bottom, transparent 0 25px, var(--grid) 25px 26px);
  background-position: 0 38px;
  box-shadow: 0 1px 2px rgba(60, 42, 20, 0.12);
}
.author-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.author-card .nm { font-size: 21px; }
.author-card .leads { font-style: italic; }
.author-card[data-cats^="crime"] { border-left-color: var(--spine-crime); }
.author-card[data-cats^="thriller"] { border-left-color: var(--spine-thriller); }
.author-card[data-cats^="romance"] { border-left-color: var(--spine-romance); }
.author-card[data-cats^="fantasy"] { border-left-color: var(--spine-fantasy); }
.author-card[data-cats^="scifi"] { border-left-color: var(--spine-scifi); }
.author-card[data-cats^="horror"] { border-left-color: var(--spine-horror); }
.author-card[data-cats^="hist"] { border-left-color: var(--spine-hist); }
.author-card[data-cats^="ya"] { border-left-color: var(--spine-ya); }
.author-card[data-cats^="kids"] { border-left-color: var(--spine-kids); }
.footer { border-top: 4px double var(--rule); }
.footer .inner { max-width: 1080px; text-align: center; justify-items: center; }

/* City map banners */
.art-banner.art-custom { padding: 10px; }
.art-banner.art-custom svg { width: 100%; height: 100%; }