/* The book: /books/ai/ index pages and the chapter reader.
   Loaded after page.css, so it reuses its tokens and the shared .pg-back,
   .pg-header and .chip-links. The reader is deliberately plain — long-form
   prose, no card chrome around it */

body {
  max-width: 680px;
  padding: 20px 24px 80px;
}

/* ---- Top row: back link on the left, language pills on the right ---------- */

.book-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.book-top .pg-back {
  margin-bottom: 0;
}

.lang-switch {
  display: flex;
  gap: 6px;
  flex: none;
}
.lang-switch a,
.lang-switch span {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.lang-switch a {
  background: var(--surface-alt);
  color: var(--text-soft);
}
.lang-switch a:hover {
  background: var(--chip-hover);
  color: var(--chip-text);
}
.lang-switch span {
  background: var(--mint-panel);
  color: var(--heading-deep);
}

/* ---- Book index ------------------------------------------------------------ */

/* The shared .pg-header already reserves the right-hand 42% for a mascot; the
   book's kicker, byline, tagline and blurb join h1 in that narrower column.
   The ferret is a tall standing figure: she stands on the bottom edge of the
   panel at full height, whatever height the text makes it */
.book-hero {
  min-height: 230px;
  border-radius: 28px;
  padding: 32px 30px 34px;
}
.book-hero h1,
.book-hero .pg-sub,
.book-hero .book-kicker,
.book-hero .book-by,
.book-hero .book-tagline {
  max-width: 58%;
}
.book-hero img {
  right: 14px;
  bottom: 0;
  width: auto;
  /* Full height of the panel, leaving a little room above her head, but not
     larger than her artwork is sharp at */
  height: min(340px, calc(100% - 40px));
}
.book-hero h1 {
  font-size: 40px;
}
.book-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.book-hero .pg-sub {
  margin-top: 14px;
  font-size: 16px;
  color: var(--accent-strong);
}

/* page.css gives every h2 a divider and top padding meant for text pages */
h2.chapters-heading {
  margin: 36px 0 14px;
  padding-top: 0;
  border-top: none;
  font-size: 24px;
}

.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chapter-card {
  display: block;
  padding: 18px 22px 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
  color: var(--text);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.chapter-card:hover {
  color: var(--text);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}
.chapter-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.chapter-card-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.chapter-langs {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.chapter-card-title {
  display: block;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.15;
}
.chapter-card.soon {
  background: var(--surface-alt);
  box-shadow: none;
}
.chapter-card.soon .chapter-card-title {
  color: var(--text-faint);
}

/* ---- Chapter reader -------------------------------------------------------- */

.chapter-head {
  margin: 36px 0 28px;
}
.ch-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Georgia rather than the site's heading font: Caprasimo is a heavy display face
   with no Cyrillic, so the English title looked bold while the Russian,
   Belarusian and Ukrainian ones fell back to Georgia on their own. Naming it here
   makes all four languages look the same */
.chapter-head h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 40px;
  line-height: 1.1;
}

/* Reading measure: 680px body less padding is about 70 characters a line at
   this size, inside the 60-75 range that reads comfortably */
.prose {
  overflow-wrap: break-word;
}
.prose p {
  margin: 0 0 1.15em;
  font-size: 18px;
  line-height: 1.75;
}
.prose h2 {
  margin: 2em 0 0.6em;
  padding-top: 0;
  border-top: none;
  font-size: 24px;
}
.prose blockquote {
  margin: 1.4em 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--line);
  color: var(--text-soft);
}
.prose blockquote p {
  margin-bottom: 0.6em;
}
/* The model's console output: monospace on the site's deep green, wrapping
   rather than scrolling so nothing hides off the edge on a phone. The column
   alignment of the test table is done with real spaces in the markup */
.prose pre.console {
  margin: 1.5em 0;
  padding: 16px 18px;
  border: none;
  border-radius: 14px;
  background: var(--heading-deep);
  color: var(--mint-panel);
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  hyphens: none;
}
/* A line that appears on the screen in plain language rather than log text */
.prose blockquote.on-screen {
  margin: 1.6em 0;
  border-left-color: var(--accent);
  color: var(--text);
}
.prose blockquote.on-screen p {
  font-style: italic;
}

/* The small opening text before a chapter's story begins (not part of the
   story's own timeline): italic and a shade softer than the prose */
.prose .epigraph {
  color: var(--text-soft);
  font-style: italic;
}

/* Scene breaks are counted per chapter, in order: the first (which ends the
   opening text) is three asterisks, the second is two, every later one is a
   single asterisk. Plain <hr /> elements, no classes: the rule lives here so
   every chapter follows it without anyone remembering to */
.prose hr {
  border: none;
  margin: 2em 0;
  text-align: center;
}
.prose hr::after {
  content: '*';
  display: block;
  padding-left: 0.4em; /* cancels the trailing letter-spacing so it centres */
  letter-spacing: 0.4em;
  color: var(--text-faint);
}
.prose hr:nth-of-type(1)::after {
  content: '* * *';
}
.prose hr:nth-of-type(2)::after {
  content: '* *';
}

/* ---- Previous / all chapters / next ----------------------------------------- */

.chapter-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.chapter-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 44%;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.chapter-link .dir {
  font-size: 13px;
  color: var(--accent);
}
.chapter-link .name {
  font-weight: 400;
  color: var(--text-soft);
}
.chapter-link.next {
  margin-left: auto;
  text-align: right;
}
.chapter-link.all {
  align-self: center;
  max-width: none;
  color: var(--text-soft);
}
.chapter-link.soon .dir,
.chapter-link.soon .name {
  color: var(--text-faint);
}

.copyright {
  margin: 28px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}

@media (max-width: 680px) {
  body {
    padding: 16px 20px 64px;
  }
  .book-hero {
    min-height: 210px;
    padding: 26px 22px 28px;
  }
  .book-hero h1,
  .book-hero .pg-sub,
  .book-hero .book-kicker,
  .book-hero .book-by,
  .book-hero .book-tagline {
    max-width: none;
    padding-right: 96px;
  }
  .book-hero img {
    right: 8px;
    width: 118px;
    height: auto;
  }
  .book-hero h1,
  .chapter-head h1 {
    font-size: 32px;
  }
  .chapter-head {
    margin-top: 28px;
  }
  .prose p {
    font-size: 17px;
  }
  /* Only on a narrow phone column, where Russian's long words otherwise leave
     ragged gaps; on a desktop line the hyphens would just be noise */
  .prose {
    hyphens: auto;
  }
  .chapter-nav {
    flex-wrap: wrap;
  }
  .chapter-link {
    max-width: 100%;
  }
}

/* ---- Support note and byline ------------------------------------------------ */

.support-note {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 44px;
  padding: 18px 22px;
  border-radius: 20px;
  background: var(--mint-panel);
}
.support-note p {
  margin: 0;
  font-size: 15px;
  color: var(--accent-strong);
}
.support-note a {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.support-note a:hover {
  background: var(--accent-strong);
  color: var(--surface);
}

.book-by {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--heading-deep);
}

/* The book's line of dialogue, above the blurb */
.book-tagline {
  margin: 18px 0 0;
  font-size: 17px;
  font-style: italic;
  line-height: 1.4;
  color: var(--heading-deep);
}
.book-hero .book-tagline + .pg-sub {
  margin-top: 10px;
}