:root {
  --bg: #dbdae0;
  --page: #fbfaf6;
  --ink: #262530;
  --lilac-deep: #4c4d64;
  --lilac: #7e7f9a;
  --lilac-soft: #e8e7ed;
  --line: #d9d7d1;
  --moss: #6c7a33;
  --moss-deep: #5a6529;
  --moss-soft: #eceedd;
  --moss-softer: #eff1e4;
  /* raised panels (figures, deep-dives, cards) */
  --card: #fff;
  /* numbers of chapters that aren't out yet */
  --faint: #b9b8c4;
  /* dark panels with light text (cover, practice); stay dark in both themes */
  --deep: #4c4d64;
  --page-edge-1: #cbcad2;
  --page-edge-2: #d6d5dc;
  --shadow: rgba(38, 37, 48, 0.22);
  --display: "Fraunces", Georgia, serif;
  --body: "Lora", Georgia, serif;

  --height: 80vh;
  --width: 700px;
  /* side padding of the page text */
  --gutter: 2.6rem;
  color-scheme: light;
}
/* data-theme is set by the script in index.html's <head>, from the saved
   choice or the system setting. Every colour is a token, so dark mode only
   redefines them; the page SVGs are mapped onto tokens further down. */
:root[data-theme="dark"] {
  --bg: #131318;
  --page: #1d1d24;
  --ink: #e6e4ec;
  --lilac-deep: #bebfd8;
  --lilac: #9798b2;
  --lilac-soft: #2f2f3c;
  --line: #3a3a47;
  --moss: #a3b168;
  --moss-deep: #bccb82;
  --moss-soft: #2a301f;
  --moss-softer: #262b1c;
  --card: #25252d;
  --faint: #5a5a68;
  --deep: #34354a;
  --page-edge-1: #0e0e12;
  --page-edge-2: #16161b;
  --shadow: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background: var(--bg);
  font-family: var(--body);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem 1rem;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.book {
  width: 100%;
  max-width: var(--width);
  margin: auto 0;
}
body {
  align-items: flex-start;
}
.stage {
  position: relative;
  background: var(--page);
  box-shadow:
    -5px 0 0 -2px var(--page-edge-1),
    -9px 0 0 -4px var(--page-edge-2),
    0 14px 44px var(--shadow);
  border-left: 3px solid var(--lilac-deep);
  height: var(--height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* pages fill the stage below the running head */
.page {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  padding: 2rem var(--gutter) 6rem;
}
/* Reading text size (A− / A+ in the contents drawer, set by book.js). A zoom,
   because the page styles use fixed px sizes. Not on the cover, which is laid
   out as a whole, or on figures, whose diagrams already scale with the width. */
.page:not(.cover) > :not(.figure) {
  zoom: var(--text-zoom, 1);
}
.page.active {
  display: block;
}
/* Browsers without view transitions: the new page fades in. */
@supports not (view-transition-name: none) {
  .page.active {
    animation: turn 0.5s ease;
  }
}
@keyframes turn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page.active {
    animation: none;
  }
}

/* Page turns (turn() in book.js sets data-turn for the transition). Forward,
   the old page drifts left and fades while the new one comes in from the
   right; back is the reverse. The help page, outside the reading order, rises
   over the book and sinks back. The old page fades out before the new one
   fades in, so the two texts never overlap; the page title in the running
   head and in the nav does the same. The rest of the running head and nav
   cross-fade in place, so what doesn't change stays still. On desktop the
   page box moves; on phones, where the window scrolls, the whole view moves
   (see below). */
.page.active {
  view-transition-name: page;
}
.runhead {
  view-transition-name: runhead;
}
.runhead .r {
  view-transition-name: runhead-title;
}
.nav {
  view-transition-name: nav;
}
.nav-slot {
  view-transition-name: nav-slot;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.2s;
}
:root[data-turn="next"] {
  --turn-out: turn-out-left;
  --turn-in: turn-in-right;
}
:root[data-turn="prev"] {
  --turn-out: turn-out-right;
  --turn-in: turn-in-left;
}
:root[data-turn="up"] {
  --turn-out: turn-fade-out;
  --turn-in: turn-in-up;
}
:root[data-turn="down"] {
  --turn-out: turn-out-down;
  --turn-in: turn-fade-in;
}
:root[data-turn] {
  --turn-out-time: 0.1s;
  --turn-in-time: 0.15s;
}
:root[data-turn="up"],
:root[data-turn="down"] {
  --turn-out-time: 0.12s;
  --turn-in-time: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-turn] {
    --turn-out: turn-fade-out;
    --turn-in: turn-fade-in;
  }
}
:root[data-turn]::view-transition-old(page) {
  animation: var(--turn-out) var(--turn-out-time) ease-in both;
}
:root[data-turn]::view-transition-new(page) {
  animation: var(--turn-in) var(--turn-in-time) ease-out var(--turn-out-time)
    both;
}
:root[data-turn]::view-transition-old(runhead-title),
:root[data-turn]::view-transition-old(nav-slot) {
  animation: turn-fade-out var(--turn-out-time) ease-in both;
}
:root[data-turn]::view-transition-new(runhead-title),
:root[data-turn]::view-transition-new(nav-slot) {
  animation: turn-fade-in var(--turn-in-time) ease-out var(--turn-out-time)
    both;
}
@keyframes turn-out-left {
  to {
    transform: translateX(-12px);
    opacity: 0;
  }
}
@keyframes turn-in-right {
  from {
    transform: translateX(12px);
    opacity: 0;
  }
}
@keyframes turn-out-right {
  to {
    transform: translateX(12px);
    opacity: 0;
  }
}
@keyframes turn-in-left {
  from {
    transform: translateX(-12px);
    opacity: 0;
  }
}
@keyframes turn-in-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}
@keyframes turn-out-down {
  to {
    transform: translateY(24px);
    opacity: 0;
  }
}
@keyframes turn-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes turn-fade-in {
  from {
    opacity: 0;
  }
}

/* running head: one fixed header above the pages, text set by book.js */
.runhead {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--lilac);
  letter-spacing: 0.2px;
  margin: 0 var(--gutter);
  padding-top: 3rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.runhead[hidden] {
  display: none;
}
/* reading progress through the current page, drawn over the bottom border;
   book.js sets the scaleX */
.runhead {
  position: relative;
}
.runhead .progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--moss);
  transform: scaleX(0);
  transform-origin: left;
}
.runhead .r {
  font-style: italic;
}
.runhead .l {
  font-variant: small-caps;
  letter-spacing: 1px;
}

.kicker {
  font-style: italic;
  font-size: 15px;
  color: var(--lilac);
  margin-bottom: 0.6rem;
}

/* cover */
.cover {
  background: var(--deep);
  color: #f3f2f6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.4rem 3rem;
}
.cover:not(.active) {
  display: none;
}
.cover .imprint {
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #c6c7d6;
  margin-bottom: 2.4rem;
  line-height: 1.6;
}
.cover h1 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(40px, 10vw, 54px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.5px;
  margin-bottom: 1.6rem;
}
.cover h1 .dot {
  color: var(--moss);
}
.cover .rule {
  width: 44px;
  height: 2px;
  background: var(--moss);
  margin-bottom: 1.6rem;
}
.cover .sub {
  font-size: 17px;
  line-height: 1.75;
  color: #e4e3ec;
  max-width: 30ch;
  margin-bottom: 2.6rem;
}
.cover .basis {
  font-size: 13.5px;
  line-height: 1.7;
  color: #bfc0d0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 1.3rem;
  max-width: 38ch;
}
.cover .start {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  font-size: 15px;
  color: #f3f2f6;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  padding: 10px 14px 10px 18px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.cover .start:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--moss);
}
.cover .start .icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cover .open {
  font-size: 13px;
  color: #c6c7d6;
  font-style: italic;
  margin-top: 1rem;
}
.cover-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
}
.cover-help {
  background: none;
  border: none;
  border-bottom: 1px dotted #c9d19a;
  padding: 2px 0;
  font-family: var(--body);
  font-size: 14px;
  color: #dfe5b8;
  text-align: left;
  cursor: pointer;
}
.cover-help:hover {
  color: #fff;
  border-bottom-color: #fff;
}

h2.chapter-title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.4px;
  margin-bottom: 1.4rem;
  color: var(--ink);
}
h3.sub {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  color: var(--lilac-deep);
  line-height: 1.18;
  margin-bottom: 1rem;
  letter-spacing: -0.2px;
}

.page p {
  font-size: 16px;
  line-height: 1.82;
  margin-bottom: 1.05rem;
  max-width: 60ch;
}
.accent {
  color: var(--lilac-deep);
  font-weight: 500;
}
.term {
  font-weight: 500;
  font-style: italic;
}

.story.first::first-letter {
  font-family: var(--display);
  font-size: 58px;
  font-weight: 400;
  color: var(--lilac-deep);
  float: left;
  line-height: 0.72;
  margin: 8px 12px 0 0;
}

/* chapter map */
.lede {
  font-size: 16.5px;
  line-height: 1.8;
  margin-bottom: 1.8rem;
}
.movement {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: var(--lilac-deep);
  margin: 1.6rem 0 0.7rem;
}
.movement:first-of-type {
  margin-top: 0;
}
.map-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 13px 2px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition:
    padding-left 0.18s ease,
    background 0.18s ease;
  color: var(--ink);
}
.map-item:hover {
  padding-left: 8px;
  background: var(--lilac-soft);
}
.map-item .n {
  font-family: var(--display);
  font-size: 17px;
  color: var(--lilac);
  flex-shrink: 0;
  width: 1.4em;
  font-variant-numeric: lining-nums;
}
.map-item .t {
  font-size: 16px;
}
.map-item.gut .n {
  color: var(--moss-deep);
}
.map-item .t .cs {
  display: block;
  font-size: 12.5px;
  color: var(--lilac);
  font-style: italic;
  margin-top: 0.15rem;
}
.map-item.soon {
  cursor: default;
}
.map-item.soon:hover {
  padding-left: 2px;
  background: none;
}
.map-item.soon .n {
  color: var(--faint);
}
.map-item.soon .t {
  color: var(--lilac-deep);
}
.map-item .status {
  margin-left: auto;
  font-variant: small-caps;
  letter-spacing: 1px;
  font-size: 11.5px;
  color: var(--lilac);
  opacity: 0.75;
  flex-shrink: 0;
  align-self: center;
}
.map-note {
  font-size: 13.5px;
  color: var(--lilac);
  font-style: italic;
  margin-top: 1.6rem;
  line-height: 1.7;
}

/* book contents */
.toc-part {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  color: var(--lilac-deep);
  margin: 1.5rem 0 0.3rem;
}
.toc-part:first-of-type {
  margin-top: 0.4rem;
}
.toc-chapter {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 14px 2px;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition:
    padding-left 0.18s ease,
    background 0.18s ease;
}
.toc-chapter:not(.soon):hover {
  padding-left: 8px;
  background: var(--lilac-soft);
}
.toc-chapter .rn {
  font-family: var(--display);
  font-size: 16px;
  color: var(--lilac);
  flex-shrink: 0;
  width: 2.4em;
  font-variant: small-caps;
  letter-spacing: 1px;
}
.toc-chapter .ct {
  font-size: 16px;
  flex: 1;
}
.toc-chapter .ct .cs {
  display: block;
  font-size: 12.5px;
  color: var(--lilac);
  font-style: italic;
  margin-top: 0.15rem;
}
.toc-chapter .status {
  font-variant: small-caps;
  letter-spacing: 1px;
  font-size: 11.5px;
  color: var(--moss-deep);
  flex-shrink: 0;
  align-self: center;
}
.toc-chapter.soon {
  cursor: default;
}
.toc-chapter.soon .rn {
  color: var(--faint);
}
.toc-chapter.soon .ct {
  color: var(--lilac);
}
.toc-chapter.soon .status {
  color: var(--lilac);
  opacity: 0.75;
}

/* inline insight */
.insight {
  border-left: 3px solid var(--moss);
  padding: 0.2rem 0 0.2rem 18px;
  margin: 1.5rem 0;
}
.insight p {
  font-size: 16.5px;
  line-height: 1.75;
  margin: 0;
  color: var(--ink);
}

/* reframe panel */
.counter {
  background: var(--lilac-soft);
  padding: 1.15rem 1.35rem;
  margin: 1.5rem 0;
}
.counter p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
}

/* figure */
.figure {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.4rem 1.1rem 0.8rem;
  margin: 1.7rem 0 0.6rem;
}
.figtitle {
  font-variant: small-caps;
  letter-spacing: 1.4px;
  font-size: 12.5px;
  color: var(--lilac);
  text-align: center;
  margin-bottom: 1.1rem;
}
.fignote {
  font-size: 13px;
  line-height: 1.65;
  color: var(--lilac);
  font-style: italic;
  text-align: center;
  margin: 0.5rem 0 1.6rem;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* restrained statement */
.stat {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.2rem 0;
  margin: 1.8rem 0;
}
.stat .big {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.3px;
}
.stat .small {
  font-size: 14px;
  color: var(--lilac);
  margin-top: 0.35rem;
  font-style: italic;
}

/* На цифри */
.figrow {
  display: flex;
  align-items: baseline;
  gap: 1.3rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.figrow:first-of-type {
  border-top: 1px solid var(--line);
}
.figrow .fnum {
  font-family: var(--display);
  font-size: 33px;
  font-weight: 400;
  color: var(--lilac-deep);
  line-height: 1;
  flex-shrink: 0;
  min-width: 4.4em;
  letter-spacing: -0.5px;
}
.figrow .ftxt {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}

/* research note, expandable */
.note {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 1.6rem 0;
}
.note-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 14px 2px;
  text-align: left;
  color: var(--lilac-deep);
}
.note-head .lab {
  font-variant: small-caps;
  letter-spacing: 1.2px;
  font-size: 13.5px;
}
.note-head .tog {
  margin-left: auto;
  font-family: var(--display);
  font-size: 22px;
  color: var(--lilac);
  line-height: 1;
  transition: transform 0.25s;
}
.note.open .note-head .tog {
  transform: rotate(45deg);
}
.note-body .inner {
  padding: 0 2px 16px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink);
  max-width: 58ch;
}
.note-body .inner p {
  font-size: 14.5px;
  line-height: 1.72;
  margin: 0 0 0.8rem;
  max-width: 58ch;
}
.note-body .inner p:last-child {
  margin-bottom: 0;
}

/* Collapsible blocks: notes, deep-dives and the footnote definitions. The
   body is a one-row grid that animates from 0fr to 1fr, so it opens to its
   full height at any text size. Closed, it's hidden from screen readers and
   Tab too; visibility switches only after the closing animation. A 0fr row
   can't shrink below the inner block's padding, so that animates as well. */
.note-body,
.deepen-body,
.def,
.k6-body,
.check .ck-body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 0.35s ease,
    visibility 0.35s;
}
.note.open .note-body,
.deepen.open .deepen-body,
.def.open,
.k6-dd.open .k6-body,
.check .ck.open .ck-body {
  grid-template-rows: 1fr;
  visibility: visible;
}
.note-body > .inner,
.deepen-body > .inner,
.def > .inner,
.k6-body > .inner,
.check .ck-body > .inner {
  min-height: 0;
  overflow: hidden;
  transition:
    padding 0.35s ease,
    margin 0.35s ease;
}
.note:not(.open) .note-body > .inner,
.deepen:not(.open) .deepen-body > .inner,
.def:not(.open) > .inner,
.k6-dd:not(.open) .k6-body > .inner,
.check .ck:not(.open) .ck-body > .inner {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* deep-dive */
.deepen {
  border: 1px solid var(--line);
  border-left: 3px solid var(--lilac-deep);
  background: var(--card);
  margin: 1.7rem 0;
}
.deepen-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 1rem 1.2rem;
  text-align: left;
  color: var(--lilac-deep);
}
.deepen-head .lab {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  color: var(--lilac-deep);
  line-height: 1.15;
}
.deepen-head .hint {
  display: block;
  font-size: 12.5px;
  color: var(--lilac);
  font-style: italic;
  margin-top: 0.2rem;
  font-family: var(--body);
}
.deepen-head .tog {
  margin-left: auto;
  font-family: var(--display);
  font-size: 26px;
  color: var(--lilac);
  line-height: 1;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.deepen.open .deepen-head .tog {
  transform: rotate(45deg);
}
.deepen-body .inner {
  padding: 0 1.2rem 1.3rem;
}
.deepen-body .inner p {
  max-width: 58ch;
}
.deepen-body .figure {
  margin-top: 1rem;
}

/* source / citation */
.source {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-left: 3px solid var(--moss);
  padding: 0.95rem 1.2rem;
  margin: 0.6rem 0;
  transition: background 0.18s;
}
.source:hover {
  background: var(--moss-soft);
}
.source .lab {
  font-variant: small-caps;
  letter-spacing: 1.2px;
  font-size: 12px;
  color: var(--moss-deep);
  display: block;
  margin-bottom: 0.3rem;
}
.source .ttl {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  display: block;
}
.source .rep {
  font-size: 12.5px;
  color: var(--lilac);
  margin-top: 0.25rem;
  display: block;
  font-style: italic;
}

/* practice counsel */
.practice {
  background: var(--deep);
  color: #efeef3;
  padding: 1.4rem 1.5rem;
  margin-top: 1.8rem;
}
.practice .lab {
  font-variant: small-caps;
  letter-spacing: 1.4px;
  font-size: 13px;
  color: #eceedd;
  margin-bottom: 0.55rem;
}
.practice p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: #efeef3;
  max-width: none;
}
/* links in the dark box: the usual link colours would match its background */
.practice a.xref,
.practice a.seesrc,
.practice a.tel {
  color: #eceedd;
  border-bottom-color: #eceedd;
}
.practice a.xref:hover,
.practice a.xref:focus,
.practice a.seesrc:hover,
.practice a.tel:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

/* a way to the help page from within the book (contents, chapter maps,
   ch5-help) */
.help-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 2rem;
  padding: 0.95rem 1.15rem;
  background: var(--moss-soft);
  border: none;
  border-left: 3px solid var(--moss);
  font-family: var(--body);
  text-align: left;
  color: var(--moss-deep);
  cursor: pointer;
  transition: background 0.15s;
}
.help-cta:hover {
  background: var(--moss-softer);
}
.help-cta .icon {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.help-cta .t {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.3;
}
.help-cta .s {
  display: block;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--lilac-deep);
  margin-top: 0.15rem;
}
/* clinical caution */
.caution {
  border: 1px solid var(--moss);
  background: var(--moss-soft);
  padding: 1.3rem 1.45rem;
  margin-top: 1.6rem;
}
.caution .lab {
  font-family: var(--display);
  font-size: 17px;
  color: var(--moss-deep);
  margin-bottom: 0.6rem;
}
.caution p {
  font-size: 14.5px;
  line-height: 1.72;
  margin: 0 0 0.7rem;
  color: var(--ink);
}
.caution p:last-child {
  margin-bottom: 0;
}
.caution ul {
  margin: 0.2rem 0 0.8rem;
  padding-left: 1.1rem;
}
.caution li {
  font-size: 14.5px;
  line-height: 1.7;
  margin-bottom: 0.3rem;
}

/* поле (стаж) */
.field {
  border: 1px solid var(--moss);
  background: var(--moss-soft);
  padding: 1.3rem 1.45rem;
  margin: 1.7rem 0;
}
.field .lab {
  font-family: var(--display);
  font-size: 17px;
  color: var(--moss-deep);
  margin-bottom: 0.5rem;
}
.field p {
  font-size: 14.5px;
  line-height: 1.72;
  margin: 0;
  color: var(--ink);
  max-width: none;
}
.field .todo {
  color: var(--lilac);
  font-style: italic;
}

/* визитка */
.vcard {
  border: 1px solid var(--line);
  border-left: 3px solid var(--moss);
  background: var(--card);
  padding: 1.4rem 1.5rem;
  margin: 1.3rem 0;
  display: flex;
  gap: 1.3rem;
  align-items: flex-start;
}
.vcard .avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--lilac-deep);
  color: var(--page);
  font-family: var(--display);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}
.vcard.two .avatar {
  background: var(--moss-deep);
}
.vcard .who {
  flex: 1;
}
.vcard .role {
  font-variant: small-caps;
  letter-spacing: 1.1px;
  font-size: 12.5px;
  color: var(--moss-deep);
  margin-bottom: 0.15rem;
}
.vcard h4 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.55rem;
}
.vcard .bio {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 0.85rem;
  max-width: none;
}
.vcard .bio .todo {
  color: var(--lilac);
  font-style: italic;
}
.vcard .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.vcard .tag {
  font-size: 12px;
  color: var(--lilac-deep);
  border: 1px solid var(--line);
  padding: 3px 10px;
  border-radius: 2px;
  background: var(--page);
}
.vcard .tag.todo {
  color: var(--lilac);
  font-style: italic;
}

.eyebrow-src {
  font-variant: small-caps;
  letter-spacing: 1.2px;
  font-size: 12.5px;
  color: var(--lilac);
  margin-top: 1.6rem;
  margin-bottom: 0.2rem;
}

/* nav */
.nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 15px 1.25rem;
  background: var(--page);
  border-top: 1px solid var(--line);
}
.nav button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--lilac-deep);
  padding: 6px 2px;
  transition: color 0.15s;
}
.nav button[hidden] {
  display: none;
}
.nav button:hover:not(:disabled) {
  color: var(--ink);
}
.nav button:disabled {
  opacity: 0.3;
  cursor: default;
}
.nav .icon,
.toc .icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The ≡ runs from the top of a capital to the baseline, like a letter, so it
   lines up with the capital С beside it rather than sitting low next to it. */
.nav .home .icon {
  translate: 0 -0.09em;
}
/* The way to the help page, always at hand: the one filled control in the
   nav, so it's easy to find. Square like the book's other buttons. On the
   help page it turns pale, like a tab that's open. */
.nav .help {
  color: var(--page);
  background: var(--moss-deep);
  border-radius: 2px;
  padding: 6px 12px 6px 10px;
  transition:
    color 0.2s,
    background-color 0.2s;
}
.nav .help:hover:not([aria-current]) {
  color: var(--page);
  background: var(--moss);
}
.nav .help[aria-current="page"],
.nav .help[aria-current="page"]:hover {
  color: var(--moss-deep);
  background: var(--moss-soft);
  cursor: default;
}
/* the theme button shows the theme it switches to */
:root[data-theme="dark"] .nav .theme .moon,
:root:not([data-theme="dark"]) .nav .theme .sun {
  display: none;
}
/* Lora has more room above its letters than below, so a label centred as a
   box reads about 1.8px low next to its icon (and in the help button's box).
   Lift it by that much, so the lowercase letters sit on the icon's middle. */
.nav .label {
  translate: 0 -0.125em;
}
/* visually hidden, still read by screen readers */
.nav .theme .label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Holds the page label or the back button, and takes the room the buttons
   leave. */
.nav-slot {
  flex: 0 1 224px;
  min-width: 0;
  text-align: center;
  /* Always two lines high, whether it shows a title and position, a title
     alone (help, contents) or the back button, so the nav keeps one height. */
  height: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pageno {
  display: block;
  font-size: 12.5px;
  color: var(--lilac);
  font-style: italic;
  /* one line, so title + position fit the slot's two; the full title is in
     the running head */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pagepos {
  display: block;
  font-variant: small-caps;
  letter-spacing: 1px;
  font-size: 11px;
  color: var(--lilac);
  opacity: 0.8;
}
.pageno[hidden],
.pagepos[hidden],
.pagepos:empty {
  display: none;
}

/* contents drawer (a modal <dialog>, filled by book.js) */
.toc {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(360px, 88vw);
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  border-right: 3px solid var(--lilac-deep);
  background: var(--page);
  color: var(--ink);
  box-shadow: 0 0 44px var(--shadow);
}
/* The drawer slides in from the left (easing out) and back out (easing in)
   while its backdrop fades. Closing, `overlay` and `display` switch only at
   the end, so it stays on screen until it's out. With reduced motion it only
   fades. */
.toc,
.toc::backdrop {
  transition:
    transform 0.2s ease-in,
    opacity 0.2s ease-in,
    overlay 0.2s allow-discrete,
    display 0.2s allow-discrete;
}
.toc {
  transform: translateX(-100%);
}
.toc[open] {
  transform: none;
}
.toc::backdrop {
  background: rgba(20, 20, 28, 0.4);
  opacity: 0;
}
.toc[open]::backdrop {
  opacity: 1;
}
.toc[open],
.toc[open]::backdrop {
  transition-duration: 0.25s;
  transition-timing-function: ease-out;
}
@starting-style {
  .toc[open] {
    transform: translateX(-100%);
  }
  .toc[open]::backdrop {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .toc,
  .toc[open] {
    transform: none;
    opacity: 0;
  }
  .toc[open] {
    opacity: 1;
  }
  @starting-style {
    .toc[open] {
      transform: none;
      opacity: 0;
    }
  }
}
/* the page behind doesn't scroll while the drawer is open */
html:has(.toc[open]) {
  overflow: hidden;
}
.toc-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0.8rem 0.6rem 1.4rem;
}
.toc-head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  color: var(--lilac-deep);
}
.toc-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--lilac-deep);
}
.toc-close:hover {
  color: var(--ink);
}
.toc-settings {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 1.4rem 0.8rem;
  color: var(--lilac-deep);
}
.toc-help {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 1.4rem 0.9rem;
  padding: 0.6rem 0.8rem;
  width: calc(100% - 2.8rem);
  background: var(--moss-soft);
  border: none;
  border-left: 3px solid var(--moss);
  font-family: var(--body);
  font-size: 15px;
  color: var(--moss-deep);
  text-align: left;
  cursor: pointer;
}
.toc-help:hover {
  color: var(--ink);
}
.toc-settings .lab {
  flex: 1;
  font-variant: small-caps;
  letter-spacing: 1px;
  font-size: 13px;
  color: var(--lilac);
}
.toc-settings button {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  font-family: var(--display);
  color: var(--lilac-deep);
}
.toc-settings button:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--lilac);
}
.toc-settings button:disabled {
  opacity: 0.35;
  cursor: default;
}
#text-smaller {
  font-size: 14px;
}
#text-larger {
  font-size: 19px;
}
.toc-settings output {
  min-width: 3.4em;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--lilac);
}
.toc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 1.4rem 0.8rem;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--lilac);
}
.toc-search:focus-within {
  border-color: var(--moss);
}
.toc-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: var(--body);
  /* 16px or more, or iOS zooms in on focus */
  font-size: 16px;
  color: var(--ink);
}
.toc-search input::placeholder {
  color: var(--lilac);
  font-style: italic;
}
.toc-list,
.toc-results {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1.4rem 2rem;
}
.toc-list[hidden],
.toc-results[hidden] {
  display: none;
}
.toc-group {
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  color: var(--lilac-deep);
  margin: 1.1rem 0 0.3rem;
}
.toc-pages {
  list-style: none;
}
/* pages after the last chapter */
.toc-pages + .toc-pages {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.toc-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
  padding: 6px 10px;
}
.toc-link:hover,
.toc-hit:hover {
  background: var(--lilac-soft);
}
.toc-link[aria-current] {
  border-left-color: var(--moss);
  background: var(--moss-soft);
  color: var(--moss-deep);
  font-style: italic;
}
.toc-count {
  font-size: 12.5px;
  font-style: italic;
  color: var(--lilac);
  margin: 0.2rem 0 0.4rem;
}
.toc-hit {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--body);
  color: var(--ink);
  padding: 10px 6px;
}
.hit-title {
  display: block;
  font-size: 14.5px;
  color: var(--lilac-deep);
}
.hit-meta {
  display: block;
  font-variant: small-caps;
  letter-spacing: 1px;
  font-size: 11px;
  color: var(--lilac);
}
.hit-snip {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
}
.hit-snip mark {
  background: var(--moss-soft);
  color: inherit;
  box-shadow: inset 0 -2px var(--moss);
}
/* the search match on the page, set by showHit() in book.js */
::highlight(search) {
  background-color: var(--moss-soft);
  color: var(--ink);
  text-decoration: underline 2px var(--moss);
}

/* The class colour is only a default: a label with its own fill="…" keeps it
   (CSS would otherwise beat the attribute, e.g. light text on a dark node). */
.svg-label {
  font-family: "Lora", Georgia, serif;
  font-size: 12px;
}
.svg-label:not([fill]) {
  fill: var(--ink);
}
.svg-label-sm {
  font-family: "Lora", Georgia, serif;
  font-size: 10.5px;
}
.svg-label-sm:not([fill]) {
  fill: var(--lilac-deep);
}
.svg-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  font-weight: 500;
}

/* --- дълга, превъртаща се страница --- */
.page.scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 6.5rem;
  scroll-behavior: smooth;
}

/* --- илюстрация в рамка --- */
.figure.illus {
  padding: 0.55rem;
}
.figure.illus img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* --- кликаеми бележки към понятия (1,2,3,4) --- */
.fnmark {
  font-family: var(--display);
  font-size: 11px;
  line-height: 1;
  color: var(--moss-deep);
  background: var(--moss-soft);
  border: 1px solid var(--moss);
  border-radius: 50%;
  width: 17px;
  height: 17px;
  padding: 0;
  margin: 0 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  position: relative;
  top: -0.45em;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.1s;
}
.fnmark:hover,
.fnmark:focus {
  background: var(--moss);
  color: var(--page);
  outline: none;
}
.fnmark:active {
  transform: scale(0.9);
}

.defs {
  margin: 0.1rem 0 1.05rem;
}
.def {
  border-left: 3px solid var(--moss);
  background: var(--moss-soft);
}
.def.open {
  margin-bottom: 0.6rem;
}
.def .inner {
  padding: 0.8rem 1.05rem;
}
.def .term-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  color: var(--moss-deep);
  display: block;
  margin-bottom: 0.3rem;
}
.def p {
  font-size: 14px;
  line-height: 1.68;
  margin: 0;
  color: var(--ink);
  max-width: none;
}

/* --- кликаема препратка към източник --- */
.seesrc {
  color: var(--moss-deep);
  text-decoration: none;
  cursor: pointer;
  font-style: italic;
  border-bottom: 1px dotted var(--moss);
  transition:
    background 0.15s,
    color 0.15s;
}
.seesrc:hover {
  color: var(--ink);
  background: var(--moss-soft);
}
.source {
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.xref {
  color: var(--lilac-deep);
  text-decoration: none;
  font-style: italic;
  cursor: pointer;
  border-bottom: 1px dotted var(--lilac);
  transition:
    background 0.15s,
    color 0.15s;
}
/* a phone number in running text; calls it on a phone */
.tel {
  color: var(--moss-deep);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px dotted var(--moss);
  transition:
    background 0.15s,
    color 0.15s;
}
.tel:hover {
  color: var(--ink);
  background: var(--moss-soft);
}
.xref:hover,
.xref:focus {
  color: var(--ink);
  background: var(--lilac-soft);
  outline: none;
}
/* at most two lines, to fit the slot; a longer label ends in "…" */
.nav .back {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  line-height: 1.25;
  font-style: italic;
  color: var(--moss-deep);
  border-bottom: 1px dotted var(--moss);
  padding: 0 2px;
}
.nav .back:hover {
  color: var(--ink);
}
.source.flash {
  background: var(--moss-soft);
  box-shadow: 0 0 0 2px var(--moss);
}

/* Phones: the book fills the screen and the window scrolls, instead of a
   fixed-height box with its own scroll area. The running head and nav stick
   to the top and bottom. Keep the width in sync with PHONE in book.js. */
@media (max-width: 600px) {
  html,
  body {
    height: auto;
  }
  body {
    display: block;
    padding: 0;
  }
  .stage {
    box-shadow: none;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    /* visible, not hidden, so the sticky head and nav work */
    overflow: visible;
  }
  .page,
  .page.scroll {
    overflow: visible;
    overflow-x: clip;
    padding-bottom: 2.5rem;
  }
  /* The page runs far past the screen here, so a page turn moves the view
     (the root snapshot) instead; the running head and nav stay put. */
  .page.active {
    view-transition-name: none;
  }
  :root[data-turn]::view-transition-old(root) {
    animation: var(--turn-out) var(--turn-out-time) ease-in both;
  }
  :root[data-turn]::view-transition-new(root) {
    animation: var(--turn-in) var(--turn-in-time) ease-out
      var(--turn-out-time) both;
  }
  /* between the two, a blank sheet rather than the canvas behind */
  :root[data-turn]::view-transition {
    background: var(--page);
  }
  .runhead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--page);
    margin: 0;
    padding: 0.9rem var(--gutter) 0.7rem;
  }
  .nav {
    position: sticky;
    z-index: 1;
    gap: 0.25rem;
    padding: 4px 0.75rem;
  }
  .nav button {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .nav .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav-slot {
    flex: 1 1 auto;
  }
  /* The slot is too narrow for "Обратно към <page>" in two lines, so the
     words are only read out and an arrow stands in for them. */
  .nav .back .back-to {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* no label beside it here, so it stays centred like the other icons */
  .nav .home .icon {
    translate: none;
  }
  /* icon only; the colour fills a square inside the 44px tap target */
  .nav .help {
    padding: 5px;
    background-clip: content-box;
  }
  .nav .back::before {
    content: "↩\00a0";
    content: "↩\00a0" / "";
    font-style: normal;
  }
  /* Diagrams are drawn 340 units wide and scale with the figure, so every
     pixel of width makes their labels bigger. Let top-level figures run to
     the screen edges (nested ones, e.g. in a deep-dive, keep their box). */
  .page > .figure {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-left: none;
    border-right: none;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 1.5rem;
  }
  .cover {
    padding: 2.6rem 1.8rem;
  }
  .page p {
    font-size: 15.5px;
  }
  .vcard {
    flex-direction: column;
    gap: 1rem;
  }
  .figrow .fnum {
    min-width: 3.6em;
    font-size: 29px;
  }
}

/* shown in a page slot when pages/<name>.html fails to load */
.load-error {
  font-style: italic;
  color: var(--lilac);
}

/* Dark theme for the page SVGs. Their colours are written in as the light
   palette's hex values (fill="#6C7A33", style="fill:#FBFAF6"…), so each one
   is pointed at its token here. Inline styles need !important to be beaten.
   Add a line if a page SVG starts using a new colour. */
[data-theme="dark"] .page svg [fill="#6C7A33" i] {
  fill: var(--moss);
}
[data-theme="dark"] .page svg [stroke="#6C7A33" i] {
  stroke: var(--moss);
}
[data-theme="dark"] .page svg [stop-color="#6C7A33" i] {
  stop-color: var(--moss);
}
[data-theme="dark"] .page svg [style*="fill:#6C7A33" i] {
  fill: var(--moss) !important;
}
[data-theme="dark"] .page svg [fill="#5A6529" i] {
  fill: var(--moss-deep);
}
[data-theme="dark"] .page svg [stroke="#5A6529" i] {
  stroke: var(--moss-deep);
}
[data-theme="dark"] .page svg [stop-color="#5A6529" i] {
  stop-color: var(--moss-deep);
}
[data-theme="dark"] .page svg [style*="fill:#5A6529" i] {
  fill: var(--moss-deep) !important;
}
[data-theme="dark"] .page svg [fill="#ECEEDD" i] {
  fill: var(--moss-soft);
}
[data-theme="dark"] .page svg [stroke="#ECEEDD" i] {
  stroke: var(--moss-soft);
}
[data-theme="dark"] .page svg [stop-color="#ECEEDD" i] {
  stop-color: var(--moss-soft);
}
[data-theme="dark"] .page svg [style*="fill:#ECEEDD" i] {
  fill: var(--moss-soft) !important;
}
[data-theme="dark"] .page svg [fill="#EFF1E4" i] {
  fill: var(--moss-softer);
}
[data-theme="dark"] .page svg [stroke="#EFF1E4" i] {
  stroke: var(--moss-softer);
}
[data-theme="dark"] .page svg [stop-color="#EFF1E4" i] {
  stop-color: var(--moss-softer);
}
[data-theme="dark"] .page svg [style*="fill:#EFF1E4" i] {
  fill: var(--moss-softer) !important;
}
[data-theme="dark"] .page svg [fill="#4C4D64" i] {
  fill: var(--lilac-deep);
}
[data-theme="dark"] .page svg [stroke="#4C4D64" i] {
  stroke: var(--lilac-deep);
}
[data-theme="dark"] .page svg [stop-color="#4C4D64" i] {
  stop-color: var(--lilac-deep);
}
[data-theme="dark"] .page svg [style*="fill:#4C4D64" i] {
  fill: var(--lilac-deep) !important;
}
[data-theme="dark"] .page svg [fill="#7E7F9A" i] {
  fill: var(--lilac);
}
[data-theme="dark"] .page svg [stroke="#7E7F9A" i] {
  stroke: var(--lilac);
}
[data-theme="dark"] .page svg [stop-color="#7E7F9A" i] {
  stop-color: var(--lilac);
}
[data-theme="dark"] .page svg [style*="fill:#7E7F9A" i] {
  fill: var(--lilac) !important;
}
[data-theme="dark"] .page svg [fill="#E8E7ED" i] {
  fill: var(--lilac-soft);
}
[data-theme="dark"] .page svg [stroke="#E8E7ED" i] {
  stroke: var(--lilac-soft);
}
[data-theme="dark"] .page svg [stop-color="#E8E7ED" i] {
  stop-color: var(--lilac-soft);
}
[data-theme="dark"] .page svg [style*="fill:#E8E7ED" i] {
  fill: var(--lilac-soft) !important;
}
[data-theme="dark"] .page svg [fill="#FBFAF6" i] {
  fill: var(--page);
}
[data-theme="dark"] .page svg [stroke="#FBFAF6" i] {
  stroke: var(--page);
}
[data-theme="dark"] .page svg [stop-color="#FBFAF6" i] {
  stop-color: var(--page);
}
[data-theme="dark"] .page svg [style*="fill:#FBFAF6" i] {
  fill: var(--page) !important;
}
[data-theme="dark"] .page svg [fill="#D9D7D1" i] {
  fill: var(--line);
}
[data-theme="dark"] .page svg [stroke="#D9D7D1" i] {
  stroke: var(--line);
}
[data-theme="dark"] .page svg [stop-color="#D9D7D1" i] {
  stop-color: var(--line);
}
[data-theme="dark"] .page svg [style*="fill:#D9D7D1" i] {
  fill: var(--line) !important;
}
[data-theme="dark"] .page svg [fill="#262530" i] {
  fill: var(--ink);
}
[data-theme="dark"] .page svg [stroke="#262530" i] {
  stroke: var(--ink);
}
[data-theme="dark"] .page svg [stop-color="#262530" i] {
  stop-color: var(--ink);
}
[data-theme="dark"] .page svg [style*="fill:#262530" i] {
  fill: var(--ink) !important;
}
/* the one photo-like illustration: take the glare off on a dark page */
[data-theme="dark"] .figure.illus img {
  filter: brightness(0.88);
}

/* visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* keyboard focus; mouse clicks don't show it */
:is(button, a, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}
/* book.js moves focus to the page itself after a page turn from a link on
   the old page; the whole page doesn't need a ring */
.page:focus-visible {
  outline: none;
}

/* chapter V: book cards on the shelf page */
.shelf{display:block;border:1px solid var(--line);border-left:3px solid var(--lilac-deep);background:var(--card);padding:.95rem 1.2rem;margin:.6rem 0;}
.shelf.kid{border-left-color:var(--moss);}
.shelf .lab{font-variant:small-caps;letter-spacing:1.1px;font-size:12px;color:var(--lilac-deep);display:block;margin-bottom:.3rem;}
.shelf.kid .lab{color:var(--moss-deep);}
.shelf .ttl{font-family:var(--display);font-size:15.5px;font-weight:500;color:var(--ink);line-height:1.3;display:block;}
.shelf .rep{font-size:13.5px;line-height:1.65;color:var(--ink);margin-top:.35rem;display:block;}
.page[data-page^="ch5"] .note.open .note-body{max-height:900px;}

/* help page */
  .urgent{background:var(--deep);color:#EFEEF3;padding:1.2rem 1.4rem 1.3rem;margin:0 0 2.2rem;}
  .urgent .lab{font-variant:small-caps;letter-spacing:1.4px;font-size:13px;color:#eceedd;margin-bottom:.7rem;}
  .urgent .calls{display:grid;grid-template-columns:1fr 1.25fr;gap:1rem 1.4rem;}
  .urgent .call{text-decoration:none;color:inherit;display:block;border-top:1px solid rgba(255,255,255,.18);padding-top:.6rem;}
  .urgent .call .n{display:block;font-family:var(--display);font-size:32px;font-weight:400;line-height:1.05;color:#fff;letter-spacing:-.3px;}
  .urgent .call .d{display:block;font-size:13px;line-height:1.55;color:#D6D6E2;margin-top:.3rem;}
  .urgent .call:hover .n,.urgent .call:focus-visible .n{color:#eceedd;}
  .urgent .call:focus-visible{outline:2px solid #eceedd;outline-offset:3px;}

  .check{margin:1rem 0 0;}
  .check-group{font-family:var(--display);font-style:italic;font-size:15.5px;color:var(--lilac-deep);margin:1.3rem 0 .2rem;}
  .check-group .why{display:block;font-family:var(--body);font-size:12.5px;color:var(--lilac);margin-top:.1rem;}
  .check label{display:flex;gap:13px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid var(--line);cursor:pointer;font-size:15px;line-height:1.6;transition:background .15s;}
  .check label:first-of-type{border-top:1px solid var(--line);}
  .check label:hover{background:var(--lilac-soft);}
  .check input{accent-color:var(--moss-deep);width:18px;height:18px;flex-shrink:0;margin-top:4px;cursor:pointer;}
  .check .urgent-set input{accent-color:var(--lilac-deep);}

  .verdict{margin:1.4rem 0 2rem;padding:1.1rem 1.3rem;border-left:3px solid var(--line);background:var(--card);transition:border-color .25s,background .25s;}
  .verdict .v-lab{font-family:var(--display);font-size:18px;line-height:1.2;margin-bottom:.4rem;color:var(--ink);}
  .verdict p{font-size:14.5px;line-height:1.72;margin:0;max-width:none;}
  .verdict.y{border-left-color:var(--moss);background:var(--moss-soft);}
  .verdict.y .v-lab{color:var(--moss-deep);}
  .verdict.r{border-left-color:var(--lilac-deep);background:var(--lilac-soft);}
  .verdict.r .v-lab{color:var(--lilac-deep);}
  .verdict .v-calls{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem;}
  .verdict .v-calls a{font-family:var(--display);font-size:17px;text-decoration:none;color:var(--page);background:var(--lilac-deep);padding:5px 14px;}
  .verdict .v-calls a:hover,.verdict .v-calls a:focus-visible{background:var(--ink);outline:none;}

  .path{position:relative;margin:1.4rem 0 1.2rem;padding-left:38px;}
  .path::before{content:'';position:absolute;left:11px;top:14px;bottom:26px;border-left:2px dashed var(--lilac);opacity:.7;}
  .stop{position:relative;margin-bottom:1.35rem;}
  .stop:last-child{margin-bottom:0;}
  .stop .x{position:absolute;left:-38px;top:-3px;width:24px;height:26px;background:var(--page);
    font-family:var(--display);font-size:31px;font-weight:500;line-height:26px;text-align:center;color:var(--moss-deep);}
  .stop h4{font-family:var(--display);font-size:18.5px;font-weight:500;color:var(--ink);line-height:1.2;margin-bottom:.3rem;}
  .stop p{font-size:15px;line-height:1.72;margin:0;}

  .deepen-body ul{margin:.1rem 0 1rem;padding-left:1.15rem;}
  .deepen-body li{font-size:15px;line-height:1.7;margin-bottom:.35rem;max-width:56ch;}

  .hl{margin:.6rem 0 0;}
  .hl-row{display:grid;grid-template-columns:8.2em 1fr;gap:1.1rem;padding:1.05rem 0;border-bottom:1px solid var(--line);align-items:baseline;}
  .hl-row:first-child{border-top:1px solid var(--line);}
  .hl-num{font-family:var(--display);font-size:23px;font-weight:400;color:var(--lilac-deep);text-decoration:none;white-space:nowrap;letter-spacing:-.2px;}
  .hl-num:hover,.hl-num:focus-visible{color:var(--moss-deep);outline:none;}
  .hl-txt{font-size:14.5px;line-height:1.68;}
  .hl-txt strong{display:block;font-weight:500;font-size:15.5px;margin-bottom:.15rem;}
  .hl-txt a{color:var(--moss-deep);}
  .hl-txt .when{display:block;font-size:13px;font-style:italic;color:var(--lilac);margin-top:.3rem;}

  @media(max-width:480px){
    .urgent .calls{grid-template-columns:1fr;}
    .hl-row{grid-template-columns:1fr;gap:.25rem;}
  }

  .urgent .call .n.n-sm{font-size:24px;line-height:1.15;}
  .help-h{margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--line);scroll-margin-top:1rem;}
  .ages{margin:.4rem 0 .2rem;}
  .agerow{display:grid;grid-template-columns:7.6em 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);align-items:baseline;}
  .agerow:first-child{border-top:1px solid var(--line);}
  .agerow .a{font-family:var(--display);font-size:16.5px;color:var(--lilac-deep);}
  .agerow .f{font-size:14.5px;line-height:1.65;}
  .check .ck-t{display:block;}
  .check .ck-h{display:block;font-size:13px;line-height:1.55;color:var(--lilac);font-style:italic;margin-top:.2rem;}
  .caution#h-death{margin:2rem 0 .5rem;}
  .myth{padding:1rem 0 .9rem;border-bottom:1px solid var(--line);}
  .myth:first-of-type{border-top:1px solid var(--line);}
  .myth .q{font-family:var(--display);font-style:italic;font-size:19px;color:var(--lilac-deep);margin-bottom:.35rem;line-height:1.25;}
  .myth p:not(.q){font-size:15px;line-height:1.72;margin:0;}
  .path-quiet .stop .x{color:var(--lilac);}
  @media(max-width:480px){.agerow{grid-template-columns:1fr;gap:.15rem;}}

  /* checklist items with an explanation that expands */
  .check .ck{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line);}
  .check .ck-sub+.ck,.check .check-group+.ck{border-top:1px solid var(--line);}
  .check .ck .ck-row{border:none;padding:11px 2px;}
  .check label.ck-row:first-of-type{border-top:none;}
  .check .ck-more{background:none;border:none;border-left:1px solid var(--line);cursor:pointer;width:44px;
    font-family:var(--display);font-size:22px;color:var(--lilac);line-height:1;transition:color .15s,background .15s;}
  .check .ck-more span{display:inline-block;transition:transform .25s;}
  .check .ck-more:hover,.check .ck-more:focus-visible{color:var(--moss-deep);background:var(--moss-soft);outline:none;}
  .check .ck.open .ck-more span{transform:rotate(45deg);}
  .check .ck-body{grid-column:1 / -1;}
  .check .ck-body .inner{margin:0 2px 12px 33px;padding:.75rem 1rem;border-left:3px solid var(--moss);background:var(--moss-soft);}
  .check .urgent-set .ck-body .inner{border-left-color:var(--lilac-deep);background:var(--lilac-soft);}
  .check .ck-body p{font-size:14px;line-height:1.68;margin:0;max-width:none;}
  .check .ck-body .ck-go{margin-top:.55rem;font-size:13.5px;color:var(--lilac-deep);}
  .check .ck-sub{font-variant:small-caps;letter-spacing:1.2px;font-size:12.5px;color:var(--lilac);margin:1.1rem 0 .1rem;}
  .ck-demo{display:inline-block;font-family:var(--display);color:var(--moss-deep);border:1px solid var(--line);padding:0 7px;line-height:1.3;}
  @media(prefers-reduced-motion:reduce){.check .ck-body,.check .ck-body>.inner,.check .ck-more span{transition:none;}}
  @media(max-width:480px){.check .ck-body .inner{margin-left:2px;}.check .ck-more{width:38px;margin-right:8px;}}

  /* the summary of ticked signs, built by book.js */
  .verdict .v-sec{font-variant:small-caps;letter-spacing:1.2px;font-size:12.5px;color:var(--lilac-deep);margin:1rem 0 .35rem;}
  .verdict .v-list{margin:0;padding-left:1.1rem;}
  .verdict .v-list li{font-size:14.5px;line-height:1.65;margin-bottom:.3rem;}
  .verdict .v-list strong{font-weight:500;}
  .verdict .v-theme{font-style:italic;color:var(--lilac-deep);}
  .verdict .v-obs{margin-top:.8rem;font-style:italic;color:var(--lilac-deep);}
  .verdict .v-note{margin-top:.9rem;font-size:13.5px;color:var(--lilac-deep);}
  .verdict .v-note a{color:var(--moss-deep);}
  .verdict .v-calls a[href="#"]{font-family:var(--body);font-size:14px;align-self:center;}
  .verdict .v-copy{margin-top:1rem;background:none;border:1px solid var(--line);font-family:var(--body);font-size:13.5px;color:var(--lilac-deep);padding:6px 12px;cursor:pointer;}
  .verdict .v-copy:hover,.verdict .v-copy:focus-visible{background:var(--page);border-color:var(--lilac);outline:none;}

  /* the deep-dive on a child talking about death */
  .deepen.deepen-grave{margin:2rem 0 .6rem;border-left-color:var(--lilac-deep);scroll-margin-top:1rem;}
  .deepen.deepen-grave .deepen-head{background:var(--lilac-soft);}
  .deepen.deepen-grave .deepen-body .inner{padding-top:.6rem;}
  .deepen.deepen-grave ul{margin:.1rem 0 1rem;padding-left:1.15rem;}
  .deepen.deepen-grave li{font-size:15px;line-height:1.7;margin-bottom:.4rem;max-width:56ch;}
  .deepen.deepen-grave .figrow .fnum{font-size:28px;min-width:3.9em;}
  .deepen.deepen-grave .movement{margin-top:1.3rem;}
  .grave-calls{display:flex;gap:.5rem;margin-top:.4rem;}
  .grave-calls a{font-family:var(--display);font-size:17px;text-decoration:none;color:var(--page);background:var(--lilac-deep);padding:5px 14px;}
  .grave-calls a:hover,.grave-calls a:focus-visible{background:var(--ink);outline:none;}