:root {
  /* --- Yelp-Structure Redesign (2026-07-28): cream removed as the dominant page system. ---
     --bg/--bg-soft/--muted/--line now hold NEUTRAL white/light-gray values instead of the old
     cream/beige palette. Every existing rule that reads these tokens (cards, sections, buttons,
     borders) picks up the new neutral system automatically, with NO selector-level changes needed
     — this is precisely why the token layer from the two prior passes exists. The dark CTA family
     (--surface-dark/--surface-dark-2/--accent/--accent-strong and the flagship-component CSS,
     which hardcodes its own near-black gradient rather than reading --bg) is UNCHANGED and
     deliberately NOT touched by this token swap — it is the one color system the owner asked to
     keep exactly as-is. */
  --bg: #ffffff;           /* was #f8f6f1 (cream) — main page background */
  --bg-soft: #f7f7f7;      /* was #efebe2 (cream-soft) — alternate/light-gray section surface */
  --surface: #ffffff;
  --surface-dark: #111214;
  --surface-dark-2: #191b20;
  --text: #1f1f1f;         /* was #1d1d1b — negligible shift, aligned to the requested #1f1f1f */
  --muted: #5f5f5f;        /* was #5a5854 (warm brownish-gray) — neutral medium-gray */
  --text-muted-subtle: #757575;  /* NEW — "subtle_text" tertiary tone, distinct from --muted */
  --line: #e4e4e4;         /* was #ded8ca (warm beige) — neutral light-gray border */
  --accent: #b78b3d;       /* UNCHANGED — reserved for dark-CTA gold buttons and accents now, not ordinary light-interface buttons */
  --accent-strong: #8f6827; /* UNCHANGED — same reservation */
  --max: 1240px;
  --radius: 14px;   /* Modern Design Refresh, 2026-07-28 — was 22px; cards now use a medium 12-18px radius, not the old oversized/decorative rounding. Flagship/promotional panels use their own --radius-lg (see below), not this token. */
  --shadow: 0 2px 10px rgba(0,0,0,0.05);   /* Modern Design Refresh — was 0 12px 32px rgba(0,0,0,0.06); a subtle modern card shadow, not a soft floating halo. */

  /* --- Modern Design Refresh (2026-07-28) semantic aliases — same underlying palette, formalized
     under the names this pass's design-system spec uses. --- */
  --page-background: var(--bg);
  --surface-alt: var(--bg-soft);
  --dark-surface: var(--surface-dark);
  --dark-surface-alt: var(--surface-dark-2);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-on-dark: #f6f2e8;
  --text-muted-on-dark: rgba(246,242,232,0.82);
  --border: var(--line);
  --border-dark: rgba(255,255,255,0.08);
  --accent-gold: var(--accent);
  --accent-gold-strong: var(--accent-strong);
  --accent-gold-on-dark: #d7b16b;
  --accent-gold-hover: #c89944;
  --disabled-bg-on-dark: transparent;
  --disabled-text-on-dark: rgba(246,242,232,0.68);
  --focus-ring: #1a5fb4;

  /* Radius scale */
  --radius-sm: 8px;   /* inputs, compact buttons */
  --radius-md: 14px;  /* cards — same value as --radius above */
  --radius-lg: 18px;  /* major promotional panels (flagship/trailer/newsletter CTA) */

  /* Restrained spacing scale (4/8/16/24/32/48/64/80) — the reference scale for new work; existing
     rem-based tokens below remain the primary values already wired into every component. */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
  --space-4xl: 5rem;    /* 80px */

  /* Spacing tokens (Site-Wide Spacing Audit, 2026-07-28) — the single governed scale every
     section/card/panel family below draws from. Do not hard-code a new padding value elsewhere;
     add or reuse a token here instead, so every page stays in sync from one shared source. */
  --section-pad-x-desktop: 3rem;   /* 48px — low end of the spacious-section desktop range */
  --section-pad-x-tablet: 2rem;    /* 32px */
  --section-pad-x-mobile: 1.25rem; /* 20px */
  --section-pad-y-desktop: 4.5rem; /* 72px — unchanged from the existing .section rule */
  --section-pad-y-tablet: 4rem;    /* 64px */
  --section-pad-y-mobile: 3rem;    /* 48px */

  --card-pad-desktop: 1.75rem; /* 28px — low end of the standard-card desktop range */
  --card-pad-tablet: 1.5rem;   /* 24px */
  --card-pad-mobile: 1.25rem;  /* 20px */

  --compact-pad: 0.75rem;      /* compact metadata blocks (chips, small facts) */
  --heading-body-gap: 0.85rem;
  --content-block-gap: 1.5rem;
  --section-gap: 4.5rem;

  /* Spacing-Regression Repair (2026-07-28) — a SEPARATE, deliberately smaller vertical-rhythm
     token for sections whose content already owns its own internal padding (card grids, CTA
     panels, Work-page card stacks) — see .section-tight below. .section's own 4.5rem/4rem/3rem
     values are UNCHANGED and now apply only to the three genuine bare-prose "information panel"
     sections (Current Topic Focus/What's Next, Methodology, Commercial Disclosure) plus the hero. */
  --section-tight-pad-y-desktop: 2.5rem; /* 40px */
  --section-tight-pad-y-tablet: 2rem;    /* 32px */
  --section-tight-pad-y-mobile: 1.5rem;  /* 24px */

  --prose-max-width: 760px; /* governed readable line length, 680-900px range */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1rem; }

/* Modern Design Refresh (2026-07-28) — Inter/system-sans is now the DEFAULT for every heading,
   nav item, label, button, and body element. Cormorant Garamond (the editorial serif) is retained
   ONLY for selective moments that are literally a book/publication title — see .font-serif-title,
   used by the flagship book's own standalone title headings. It is never the default for h1-h4.
   Typography-Density Pass (2026-07-28): headings now lead with Manrope (ExtraBold/Bold) — the
   headline direction CLAUDE.md already specifies ("Manrope ExtraBold or a similarly clean,
   friendly geometric sans serif") — for a bolder, tighter, more condensed headline treatment,
   matching the reference layout's typographic density. Inter remains the fallback/body face; this
   is a typography-only change — no color, content, URL, or link changed alongside it. */
h1, h2, h3, h4 {
  font-family: 'Manrope', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  line-height: 1.14;
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
}

/* Restrained responsive type scale (Modern Design Refresh) — h1 was clamp(2.7rem,5vw,4.5rem)
   (43-72px, wrapping into a huge multi-line mast on desktop); now a moderate content-platform
   headline scale. */
h1 { font-size: clamp(2.15rem, 3.4vw, 3.1rem); }   /* ~34-50px, "h1_standard" range */
h2 { font-size: clamp(1.65rem, 2.2vw, 2.15rem); }  /* ~26-34px, "h2" range */
h3 { font-size: clamp(1.2rem, 1.4vw, 1.45rem); }   /* ~19-23px, "h3" range */

/* Reserved for literal book/publication titles only (flagship sidebar/feature-CTA standalone
   title headings) — never applied to a sentence-style headline. */
.font-serif-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Modern Design Refresh (2026-07-28): mobile/tablet gutter bumped from a flat 1rem (16px) to a
   responsive 1rem/1.5rem/2rem (16/24/32px) step, matching the requested page_container side-
   padding ranges more closely. Above ~1240px+64px viewport width, the container's own 1240px
   max-width already leaves ample margin outside it on any modern screen, so no further padding
   is added there — content-level insets (.section-inset/.section-tight) govern anything narrower
   than that within the column itself. */
.container {
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
}
@media (min-width: 721px) {
  .container { width: min(var(--max), calc(100% - 3rem)); }
}
@media (min-width: 1081px) {
  .container { width: min(var(--max), calc(100% - 4rem)); }
}

.section { padding: var(--section-pad-y-desktop) 0; }
.section-soft { background: var(--bg-soft); }
.narrow { max-width: 900px; }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }

/* Governed inner inset for genuine bare-prose "information panel" content — text sitting
   directly on a section's own background with NO card/CTA of its own to provide an inset
   (Current Topic Focus/What's Next, Methodology, Commercial Disclosure, and the homepage hero
   copy — the exact gap the Commercial Disclosure block originally exposed). CORRECTED (Spacing-
   Regression Repair, 2026-07-28): this class was previously also applied to card-grid and CTA
   wrapper sections (Browse, Featured Directory Works, hub-page index/detail pages, Work pages,
   the flagship/trailer/newsletter CTA wrappers) — those already have their own card/CTA padding,
   so the added inset there was pure double-padding, not a real fix. It is now reserved for the
   handful of genuinely bare-prose sections above; see .section-tight for the card/CTA family. */
.section-inset {
  padding: 0 var(--section-pad-x-mobile);
}
@media (min-width: 721px) {
  .section-inset { padding: 0 var(--section-pad-x-tablet); }
}
@media (min-width: 1081px) {
  .section-inset { padding: 0 var(--section-pad-x-desktop); }
}

/* Compact vertical rhythm for sections whose content already owns its own internal padding —
   card grids (Browse, Featured Directory Works, hub-page index/detail pages, Work-page card
   stack) and CTA panels (flagship feature/trailer, newsletter) — Rule A/B of the Spacing-
   Regression Repair: "cards and CTAs own their internal padding; page sections mainly control
   separation." Deliberately has NO horizontal padding of its own (relies on bare .container),
   since these sections' content is either a card grid or a single CTA card, neither of which
   needs a second outer inset. */
.section-tight {
  padding: var(--section-tight-pad-y-mobile) 0;
}
@media (min-width: 721px) {
  .section-tight { padding: var(--section-tight-pad-y-tablet) 0; }
}
@media (min-width: 1081px) {
  .section-tight { padding: var(--section-tight-pad-y-desktop) 0; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,0.92);   /* was rgba(248,246,241,0.92) — a hardcoded cream tint, not a token; now neutral white */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.brand {
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.main-nav {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}

.main-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
}

.main-nav a:hover,
.brand:hover { color: var(--text); }

.hero-grid,
.page-shell,
.two-column-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2rem;
  align-items: start;
}

.hero-copy {
  padding: 1rem 0;
}

.hero-text,
.lead,
.subtitle {
  font-size: 1.08rem;
  color: var(--muted);
}

/* Yelp-Structure Redesign (2026-07-28): gold is now reserved for the dark CTA family — this base
   (light-background) eyebrow uses a neutral muted-gray kicker instead, so gold reads as special
   rather than appearing on every ordinary section. Dark-panel eyebrows keep their own gold
   override just below (.promo-inline-dark .eyebrow etc.), and the flagship components' own
   .flagship-section-label — a separate class — is untouched. */
.eyebrow,
.promo-eyebrow {
  display: inline-block;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.card,
.promo,
.book-row,
.book-card,
.author-card,
.shelf-card,
.featured-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-pad-desktop);
  box-shadow: var(--shadow);
}
@media (max-width: 1080px) {
  .card,
  .promo,
  .book-row,
  .book-card,
  .author-card,
  .shelf-card,
  .featured-strip { padding: var(--card-pad-tablet); }
}
@media (max-width: 720px) {
  .card,
  .promo,
  .book-row,
  .book-card,
  .author-card,
  .shelf-card,
  .featured-strip { padding: var(--card-pad-mobile); }
}

.featured-strip-dark,
.promo-hero,
.sidebar-promo,
.promo-inline-dark {
  background: linear-gradient(180deg, var(--surface-dark), var(--surface-dark-2));
  color: #f6f2e8;
  border-color: rgba(255,255,255,0.08);
}

.promo-hero .promo-eyebrow,
.sidebar-promo .promo-eyebrow,
.promo-inline-dark .eyebrow,
.featured-strip-dark .eyebrow { color: #d7b16b; }

.promo-copy,
.promo-subtitle,
.promo-points,
.featured-strip-dark p,
.promo-inline-dark p { color: rgba(246,242,232,0.88); }

.promo-points {
  padding-left: 1.1rem;
  margin: 0 0 1.2rem;
}

.promo-cover,
.placeholder-cover {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(160deg, #2a2e38, #121419);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.72);
  font-size: 0.9rem;
  font-weight: 600;
}

.placeholder-cover { background: linear-gradient(160deg, #ececec, #d8d8d8); color: var(--muted); border: 1px solid var(--line); }   /* was a tan/cream gradient (#ded8ca/#bdb29b) — now neutral gray, text-first "No Cover Available" labeling unchanged */
.placeholder-cover.small { width: 82px; height: 118px; flex: 0 0 82px; }
.placeholder-cover.large,
.promo-cover { width: 100%; max-width: 260px; height: 360px; }

/* Real book-cover images (as opposed to the text placeholder above) for Works with an
   owner-approved cover asset — same box dimensions as .placeholder-cover so a Work's card/hero
   never reflows when a real cover replaces the placeholder. */
.book-cover-img {
  border-radius: 16px;
  border: 1px solid var(--line);
  object-fit: cover;
  display: block;
}
.book-cover-img.small { width: 82px; height: 118px; flex: 0 0 82px; }
.book-cover-img.large { width: 100%; max-width: 260px; height: 360px; }

.button-row,
.button-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.button-stack { flex-direction: column; align-items: stretch; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: var(--radius-sm);   /* was 12px — now 8px, within the requested 8-10px control radius */
  min-height: 46px;
  padding: 0.8rem 1.15rem;
  font-weight: 700;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-small { min-height: 40px; padding: 0.6rem 0.95rem; }
.btn-full { width: 100%; }
.btn-dark { background: #121316; color: #fff; border: 1px solid #121316; }
.btn-accent { background: var(--accent); color: #1c160f; border: 1px solid var(--accent); }
.btn-accent:hover { background: #c89944; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-outline-light { background: transparent; color: #f6f2e8; border: 1px solid rgba(255,255,255,0.22); }

.section-heading {
  margin-bottom: 1.5rem;
}

.card-grid {
  display: grid;
  gap: 1rem;
}
.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.shelf-card,
.author-card {
  text-decoration: none;
}

.book-list-grid {
  display: grid;
  gap: 1rem;
}
.book-card,
.book-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.meta {
  color: var(--muted);
  font-size: 0.96rem;
}

/* Prepublication Readiness assignment (2026-07-29) — homepage Featured Directory Works card gains
   the same cover-thumbnail-plus-text layout already used by .book-row (Books-index), so the two
   share one visual pattern rather than diverging cover logic. */
.featured-work-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.featured-work-card > div { min-width: 0; }

/* Explicit "Model B" full-card action link (see render_view_details_link()) — every card that
   already links its title/Author/Topic independently ends with this unambiguous destination, so
   no nested <a> is ever needed to make "the whole card" feel clickable. */
.view-details-link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 720px) {
  .featured-work-card { flex-direction: column; }
}

.start-here-card,
.compact-promo { min-height: 100%; }
.clean-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.clean-list li + li { margin-top: 0.55rem; }
.clean-list a { text-decoration: none; }
.clean-list a:hover { text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);   /* Yelp-Structure Redesign: expanded from 3 columns (brand, Browse, About) to brand + 4 link groups (Directory/Featured Topics/About/Will Blesch) — collapses to 1 column below 1080px via the existing shared responsive rule further down this file */
  gap: 1.5rem;
}
.footer-grid h4 { font-size: 0.95rem; }
.site-footer {
  background: #111214;
  color: #e8e0d0;
  padding: 3rem 0;
  margin-top: 2rem;
}
.site-footer h3,
.site-footer h4 { color: #fff; }
.site-footer a { color: #f2ead9; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.breadcrumbs a { text-decoration: none; }

.book-hero-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.5rem;
}
.meta-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.meta-table th,
.meta-table td {
  text-align: left;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.meta-table th { width: 180px; font-weight: 700; }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.tag {
  border: 1px solid var(--line);
  background: var(--bg-soft);   /* was #f4f1ea, a hardcoded cream tint — now the neutral light-gray alt surface */
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  font-size: 0.92rem;
  color: var(--muted);   /* was #4f4a42, a hardcoded warm-gray literal */
}

.sticky-card {
  position: sticky;
  top: 92px;
}

.featured-strip,
.inline-promo {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  align-items: center;
}

.promo-inline-light {
  background: linear-gradient(180deg, #f0ebe0, #e6ddcb);
}

.ranked-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.rank-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111214;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}

.muted-card { opacity: 0.88; }

@media (max-width: 1080px) {
  .four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .three-up { grid-template-columns: 1fr 1fr; }
  .hero-grid,
  .page-shell,
  .two-column-shell,
  .book-hero-grid,
  .footer-grid,
  .media-promo-block { grid-template-columns: 1fr; }
  .sticky-card { position: static; }
  .section { padding: var(--section-pad-y-tablet) 0; }
}

@media (max-width: 720px) {
  .header-inner { align-items: flex-start; flex-direction: column; }
  .main-nav { gap: 0.8rem; }
  .four-up,
  .three-up { grid-template-columns: 1fr; }
  .featured-strip,
  .inline-promo,
  .book-row,
  .book-card { flex-direction: column; }
  /* h1/h2 no longer need a fixed mobile override — the clamp()-based type scale above already
     handles this responsively (Modern Design Refresh, 2026-07-28). */
  .section { padding: var(--section-pad-y-mobile) 0; }
}


.media-promo-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: 1.5rem;
  align-items: center;
}

.video-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #0c0d10;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.video-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.media-promo-copy > *:last-child {
  margin-bottom: 0;
}


.header-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.search-form {
  position: relative;
  width: min(100%, 420px);
}

.search-form input {
  width: 100%;
  min-height: 50px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  color: var(--text);
  padding: 0.9rem 1rem 0.9rem 1rem;
  font: inherit;
}

.hero-search {
  margin-top: 1.25rem;
}

.search-live-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.search-live-item,
.search-live-empty {
  display: block;
  padding: 0.85rem 1rem;
  text-decoration: none;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.search-live-item:first-child,
.search-live-empty:first-child { border-top: 0; }
.search-live-item strong { display: block; }
.search-live-item span,
.search-live-type { display: block; color: var(--muted); font-size: 0.92rem; }
.search-live-type { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.74rem; margin-bottom: 0.2rem; }

.search-strip {
  padding: 2rem 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0));
}

.search-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
}

.search-result-card .subtitle-compact {
  font-size: 1rem;
  color: var(--muted);
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 980px) {
  .header-inner, .header-actions {
    flex-wrap: wrap;
  }
  .search-page-grid, .page-shell, .hero-grid {
    grid-template-columns: 1fr;
  }
}


.video-fallback {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.95rem;
}

.video-fallback a {
  color: inherit;
  text-decoration: underline;
}