/* ==========================================================================
   Hovercraft Library — theme overrides
   Brand colour, typography polish, landing-page cards, and the article
   browser (the filterable replacement for the old "browse all" dropdown).
   ========================================================================== */

/* --- Brand palette -------------------------------------------------------- */

:root,
[data-md-color-scheme="default"] {
  /* Hovercraft house token sheet — mirrored by family-hub/src/index.css. */
  --md-primary-fg-color: #d4281c;
  --md-primary-fg-color--light: #e04a3f;
  --md-primary-fg-color--dark: #b01f15;
  --md-accent-fg-color: #d4281c;
  --md-default-bg-color: #fbf8f2;
  --hc-font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;

  /* Local design tokens (kept theme-aware via Material's fg/bg vars). */
  --hc-radius: 0.55rem;
  --hc-radius-sm: 0.35rem;
  --hc-border: var(--md-default-fg-color--lightest);
  --hc-border-strong: var(--md-default-fg-color--lighter);
  --hc-surface: var(--md-default-bg-color);
  --hc-surface-muted: var(--md-default-fg-color--lightest);
  --hc-shadow: 0 1px 3px rgba(34, 27, 23, 0.08);
  --hc-shadow-hover: 0 8px 22px rgba(34, 27, 23, 0.12);

  /* Brand red when it is used as TEXT on the page background, as opposed to
     as a fill behind white text. The two need different values in dark mode
     and previously shared one, so every red link, active nav item, footnote
     reference and pager label sat at 3.16:1 against the slate background —
     below the 4.5:1 needed for body-sized text. Light mode is unaffected. */
  --hc-accent-text: var(--md-primary-fg-color);
  /* Set at scheme level, not only inside .md-typeset: Material colours the
     active nav item with this variable, and the sidebar is not typeset
     content, so a .md-typeset-scoped value never reached it. */
  --md-typeset-a-color: var(--hc-accent-text);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #d4281c;
  /* 4.9:1 on the slate background. The existing --light (#e04a3f) reaches
     only 4.0, so it is not enough on its own. Backgrounds keep the full-
     strength red above: white on #ee6055 would fall to 3.3:1. */
  --hc-accent-text: #ee6055;
  --md-typeset-a-color: var(--hc-accent-text);
  --md-primary-fg-color--light: #e04a3f;
  --md-primary-fg-color--dark: #b01f15;
  --md-accent-fg-color: #e04a3f;

  /* Re-derive theme-aware tokens inside the slate scope. Custom properties
     otherwise retain the light values resolved from their :root declaration. */
  --hc-border: var(--md-default-fg-color--lightest);
  --hc-border-strong: var(--md-default-fg-color--lighter);
  --hc-surface: var(--md-default-bg-color);
  --hc-surface-muted: var(--md-default-fg-color--lightest);
  --hc-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  --hc-shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.35);
}

/* --- Typography & rhythm -------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(a, button, input, label):focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 0.18rem;
}

.md-header__button:not([hidden]) {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
}

.md-header__title {
  min-width: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.md-header__topic,
.md-header__topic .md-ellipsis {
  min-width: 0;
}

/* Keep navigation as sober library furniture rather than a red app bar. */
.md-header,
.md-tabs {
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  box-shadow: none;
}

.md-header {
  border-bottom: 1px solid var(--hc-border-strong);
}

.md-tabs {
  border-bottom: 1px solid var(--hc-border);
}

.md-header__button,
.md-header__topic,
.md-tabs__link {
  color: var(--md-default-fg-color);
}

/* Home carries the library name in its page heading. */
body:has(.library-home) .md-header__title {
  visibility: hidden;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--hc-accent-text);
}

/* One primary navigation system: the sidebar on wide screens, with a compact
   drawer trigger retained on small screens where the sidebar is off-canvas. */
.md-nav--primary .md-nav__title {
  height: auto;
  min-height: 0;
  padding: 0.7rem 1.1rem;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border-bottom: 1px solid var(--hc-border-strong);
  box-shadow: none;
  font-family: var(--hc-font-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.md-nav--primary .md-nav__title .md-logo {
  display: none;
}

.md-nav--primary > .md-nav__list {
  padding: 0.35rem 0 0.65rem;
}

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  min-height: 0;
  margin: 0;
  padding: 0.62rem 1.1rem;
  border-bottom: 1px solid var(--hc-border);
  color: var(--md-default-fg-color);
  font-family: var(--hc-font-serif);
  font-size: 1rem;
  font-weight: 600;
}

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link[aria-current="page"] {
  color: var(--hc-accent-text);
}

.md-nav--primary .md-nav__link:hover {
  color: var(--hc-accent-text);
}

.md-typeset {
  --md-typeset-a-color: var(--hc-accent-text);
  font-family: var(--hc-font-serif);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__title {
  font-family: var(--hc-font-serif);
}

.md-typeset h1 {
  font-size: 2.15rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin-top: 2.2em;
  padding-top: 0.65em;
  border-top: 1px solid var(--hc-border-strong);
}

.md-typeset h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h2 + h3 {
  margin-top: 0.8em;
}

/* Comfortable measure for long-form reading on wide screens. */
.md-grid {
  max-width: 68rem;
}

/* Intro / lead paragraph directly under the page title. */
.md-typeset h1 + p {
  font-size: 1.05em;
  color: var(--md-default-fg-color--light);
}

/* Newspaper-like prose details without adding decorative containers. */
.md-typeset > p > a,
.md-typeset > ol > li > a,
.md-typeset > ul:not(.article-browser__list) > li > a {
  text-decoration: underline;
  text-decoration-color: rgba(212, 40, 28, 0.38);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.16em;
}

.md-typeset blockquote {
  margin: 1.6em 0;
  padding: 0.15em 0 0.15em 1.1em;
  color: var(--md-default-fg-color--light);
  border-left: 2px solid var(--md-primary-fg-color);
  font-family: var(--hc-font-serif);
  font-style: italic;
}

.md-typeset hr {
  border-color: var(--hc-border-strong);
}

/* Section headings in the left sidebar. */
.md-nav--primary .md-nav__item--section > .md-nav__link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

/* Material keeps an empty TOC rail beside short/index pages at tablet widths.
   Remove that reserved column when there is no actual secondary navigation. */
.md-sidebar--secondary:not(:has(.md-nav--secondary .md-nav__list > .md-nav__item)) {
  display: none;
}

/* Catalogue volume indexes expose their chapter browser in the desktop TOC
   rail, since the browser links are pages rather than Markdown headings. */
.md-sidebar--secondary .wellred-catalogue-toc {
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

.md-sidebar--secondary .wellred-catalogue-toc .md-nav__link {
  font-size: 0.76rem;
  line-height: 1.3;
}

/* Subtle active-tab underline in the top nav. */
.md-tabs__link--active {
  font-weight: 700;
}

/* --- Article metadata bar ------------------------------------------------- */

.md-typeset .article-meta {
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  margin-top: -0.5em;
  margin-bottom: 1.5em;
}

.md-typeset .article-meta a {
  color: var(--hc-accent-text);
}

/* --- Reader context ------------------------------------------------------- */

.reader-context {
  display: flex;
  gap: 0.42rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 1.15rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
}

.reader-context__return {
  width: 100%;
  margin-bottom: 0.15rem;
  font-weight: 700;
}

.reader-context__trail {
  display: flex;
  gap: 0.42rem;
  align-items: center;
  flex-wrap: wrap;
}

.md-typeset .reader-context a {
  color: var(--md-default-fg-color--light);
  text-decoration: none;
}

.md-typeset .reader-context a:hover,
.md-typeset .reader-context a[aria-current="location"],
.reader-context [aria-current="page"] {
  color: var(--hc-accent-text);
}

.md-content__inner:has(.reader-context) {
  max-width: 38rem;
  margin-right: auto;
  margin-left: auto;
}

/* --- Tables --------------------------------------------------------------- */

.md-typeset table:not([class]) {
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-sm);
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--hc-surface-muted);
  font-weight: 700;
}

.md-typeset p.collection-banner {
  margin: 1.75rem 0;
}

.md-typeset p.collection-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 647;
  object-fit: cover;
  object-position: 50% 50%;
  border: 1px solid var(--hc-border-strong);
  filter: contrast(1.02);
}

.md-typeset p.collection-banner + h2 {
  margin-top: 1.35em;
}

[data-md-color-scheme="slate"] .md-typeset p.collection-banner img {
  filter: invert(0.92) hue-rotate(180deg) contrast(0.95);
}

.md-typeset p.collection-banner--jukebox img {
  object-position: 50% 8%;
}

/* --- Landing-page collection index (Material .grid.cards markup) --------- */

.md-typeset .grid.cards > ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
  border-top: 2px solid var(--md-default-fg-color);
}

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  position: relative;
  margin: 0;
  padding: 1.25rem 0 1.4rem;
  border: 0;
  border-bottom: 1px solid var(--hc-border-strong);
  border-radius: 0;
  box-shadow: none;
  transition: color 120ms ease;
}

.md-typeset .grid.cards .card-stretched-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.md-typeset .grid.cards .card-stretched-link:focus-visible {
  outline: none;
}

.md-typeset .grid.cards .card-stretched-link:focus-visible::after {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 0.18rem;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  box-shadow: none;
  transform: none;
}

.md-typeset .grid.cards > ul > li > hr {
  margin: 0.7em 0;
  border-color: var(--hc-border);
}

.md-typeset .grid.cards > ul > li > p:first-child strong,
.md-typeset .grid.cards > ul > li > p:first-child a {
  font-family: var(--hc-font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.md-typeset .grid.cards > ul > li:hover > p:first-child strong,
.md-typeset .grid.cards > ul > li:hover > p:first-child a {
  color: var(--hc-accent-text);
}

/* --- Article browser (replaces the "browse all" dropdown) ----------------- */

.article-browser {
  margin: 1.4em 0 0;
}

.article-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.article-browser__search {
  position: relative;
  flex: 1 1 16rem;
}

.article-browser__search svg {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  transform: translateY(-50%);
  fill: var(--md-default-fg-color--light);
  pointer-events: none;
}

.article-browser__filter {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.8rem 0.55rem 2.3rem;
  font-size: 0.78rem;
  color: var(--md-default-fg-color);
  background: var(--hc-surface);
  border: 1px solid var(--hc-border-strong);
  border-radius: var(--hc-radius-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}

/* --- Offline copy status ------------------------------------------------- */

.offline-status {
  position: relative;
  z-index: 1;
  width: min(68rem, 100%);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0.35rem 0.8rem;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border-bottom: 1px solid var(--hc-border-strong);
  font-size: 0.7rem;
}

.offline-status__summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.4rem 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.offline-status__summary:hover {
  color: var(--hc-accent-text);
}

.offline-status__summary-text {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offline-status__dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--md-default-fg-color--light);
}

.offline-status__panel {
  position: absolute;
  right: 0.8rem;
  bottom: calc(100% + 0.45rem);
  width: min(22rem, calc(100vw - 1.6rem));
  padding: 0.8rem;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--hc-border-strong);
  border-radius: var(--hc-radius-sm);
  box-shadow: var(--hc-shadow-hover);
}

.offline-status__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.offline-status__text {
  font-weight: 700;
}

.offline-status__meta,
.offline-status__storage {
  color: var(--md-default-fg-color--light);
  line-height: 1.35;
}

.offline-status[data-state="ready"] .offline-status__dot { background: #2e7d32; }
.offline-status[data-state="working"] .offline-status__dot { background: #ef8c00; }
.offline-status[data-state="offline"] .offline-status__dot { background: #1976d2; }
.offline-status[data-state="paused"] .offline-status__dot { background: #8d6e63; }
.offline-status[data-state="warning"] .offline-status__dot,
.offline-status[data-state="error"] .offline-status__dot { background: #c62828; }

.offline-status__progress {
  width: 100%;
  height: 0.35rem;
  margin-top: 0.55rem;
  accent-color: var(--md-primary-fg-color);
}

.offline-status__actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.7rem;
}

.offline-status__link,
.offline-status__refresh {
  padding: 0;
  color: var(--hc-accent-text);
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.offline-status__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.update-notice {
  position: fixed;
  z-index: 20;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  width: min(28rem, calc(100vw - 2rem));
  box-sizing: border-box;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--hc-border-strong);
  border-radius: var(--hc-radius-sm);
  box-shadow: var(--hc-shadow-hover);
  font-size: 0.78rem;
}

.update-notice button {
  min-height: 2.75rem;
  padding: 0 0.8rem;
  color: white;
  background: var(--md-primary-fg-color);
  border: 0;
  border-radius: var(--hc-radius-sm);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
}

@media screen and (max-width: 40rem) {
  .offline-status {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
  }

  .offline-status__panel {
    right: 0.5rem;
    width: calc(100vw - 1rem);
  }
}

.article-browser__filter::placeholder {
  color: var(--md-default-fg-color--light);
}

.article-browser__filter:focus {
  outline: none;
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 0 0 3px rgba(212, 40, 28, 0.18);
}

.article-browser__count {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

/* The list itself. */
.md-typeset .article-browser__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 2px solid var(--md-default-fg-color);
  border-bottom: 1px solid var(--hc-border-strong);
  border-radius: 0;
  overflow: hidden;
}

.md-typeset .article-browser__list > li {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hc-border);
}

.md-typeset .article-browser__list > li:first-child {
  border-top: none;
}

.md-typeset .article-browser__list > li.article-browser__group {
  padding: 0.8rem 0.95rem 0.45rem;
  border-top: 2px solid var(--hc-border-strong);
  color: var(--md-default-fg-color--light);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.md-typeset .article-browser__list > li.article-browser__group:first-child {
  border-top: none;
}

.md-typeset .article-card__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.95rem;
  color: var(--md-default-fg-color);
  text-decoration: none;
  transition: background 100ms ease;
  min-height: 2.2rem;
}

.article-card__details {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.article-card__byline {
  color: var(--md-default-fg-color);
  font-size: 0.73rem;
  font-weight: 600;
}

.article-card__summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.article-browser--books .article-card__link {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.35rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.article-browser--books .article-card__link:has(.article-card__cover) {
  grid-template-columns: 4.75rem minmax(0, 1fr);
  column-gap: 1rem;
}

.article-card__cover {
  grid-row: 1 / span 2;
  width: 4.75rem;
  overflow: hidden;
  border: 1px solid var(--hc-border-strong);
  background: var(--hc-surface-muted);
  box-shadow: 0 0.2rem 0.55rem rgb(0 0 0 / 10%);
}

.article-card__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 8;
  object-fit: cover;
}

.collected-works-volume-cover {
  width: min(15rem, 58vw);
  margin: 1.5rem auto 1.8rem;
}

.collected-works-volume-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hc-border-strong);
  box-shadow: 0 0.45rem 1.15rem rgb(0 0 0 / 14%);
}

.article-browser--books .article-card__title {
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
}

.md-typeset .article-card__link:hover {
  background: var(--hc-surface-muted);
}

.article-card__title {
  font-family: var(--hc-font-serif);
  font-weight: 500;
  line-height: 1.4;
  /* Override the generic `.md-typeset li { overflow-wrap: anywhere }` mobile
     rule below: on narrow viewports it was shrinking this flex item down to
     its minimum content box (a single character), forcing titles to wrap
     one letter per line instead of at word boundaries. */
  overflow-wrap: normal;
  word-break: normal;
}

.md-typeset .article-card__link:hover .article-card__title {
  color: var(--hc-accent-text);
}

/* --- Home: editorial collection hierarchy ------------------------------ */

.md-main__inner:has(.library-home) {
  margin-top: 0.75rem;
}

.library-home {
  margin-top: 1.5rem;
  border-top: 2px solid var(--md-default-fg-color);
  border-bottom: 1px solid var(--hc-border-strong);
}

.md-typeset .library-home__heading {
  margin: 0;
  padding: 0.85rem 0 0.65rem;
  border-top: 0;
  color: var(--hc-accent-text);
  font-family: var(--hc-font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.continue-reading {
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hc-border);
}

.continue-reading h2 {
  margin: 0;
  padding: 0 0 0.6rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.continue-reading__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.md-typeset .continue-reading__item {
  display: flex;
  min-height: 5.5rem;
  padding: 0 1.2rem 0.9rem 0;
  color: var(--md-default-fg-color);
  flex-direction: column;
  text-decoration: none;
}

.md-typeset .continue-reading__item + .continue-reading__item {
  padding-left: 1.2rem;
  border-left: 1px solid var(--hc-border-strong);
}

.continue-reading__title {
  font-family: var(--hc-font-serif);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.continue-reading__meta {
  margin-top: 0.45rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
}

.continue-reading__progress {
  display: block;
  margin-top: auto;
  padding-top: 1.1rem;
}

.continue-reading__progress::before {
  display: block;
  height: 0.18rem;
  content: "";
  background: var(--hc-border);
}

.continue-reading__progress-fill {
  display: block;
  height: 0.18rem;
  margin-top: -0.18rem;
  background: var(--md-primary-fg-color);
}

.library-home__primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.md-typeset .library-home__feature {
  display: grid;
  grid-template-columns: 7.1rem minmax(0, 1fr);
  column-gap: 1rem;
  min-height: 8.6rem;
  padding: 1.15rem 1.25rem 1.15rem 0;
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.md-typeset .library-home__feature:nth-child(2n) {
  padding-right: 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--hc-border-strong);
}

.md-typeset .library-home__feature:nth-child(n+3) {
  padding-top: 1.15rem;
  border-top: 1px solid var(--hc-border-strong);
}

.library-home__cover {
  width: 7.1rem;
  aspect-ratio: 1 / 1;
  grid-row: 1 / span 4;
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--hc-border-strong);
}

.library-home__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: contrast(1.02);
  transition: transform 0.5s ease;
}

.md-typeset .library-home__feature:hover .library-home__cover img {
  transform: scale(1.025);
}

.library-home__cover--jukebox img {
  object-position: 50% 12%;
}

[data-md-color-scheme="slate"] .library-home__cover img {
  filter: invert(0.92) hue-rotate(180deg) contrast(0.95);
}

.library-home__label {
  margin-bottom: 0.35rem;
  color: var(--hc-accent-text);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.library-home__label,
.library-home__title,
.library-home__description,
.library-home__foot {
  grid-column: 2;
}

.library-home__title {
  color: inherit;
  font-family: var(--hc-font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.library-home__description {
  margin-top: 0.4rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  line-height: 1.6;
}

.library-home__foot {
  margin-top: 0.7rem;
  padding-top: 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
}

.library-home__foot b {
  margin-left: 0.25rem;
  color: var(--hc-accent-text);
  font-weight: 400;
}

.md-typeset .library-home__feature:hover .library-home__title {
  color: var(--hc-accent-text);
}


@media screen and (max-width: 40rem) {
  .md-typeset .library-home__heading {
    padding: 0.7rem 0 0.55rem;
  }

  .library-home__primary {
    grid-template-columns: 1fr;
  }

  .continue-reading__list {
    grid-template-columns: 1fr;
  }

  .md-typeset .continue-reading__item,
  .md-typeset .continue-reading__item + .continue-reading__item {
    min-height: 0;
    padding: 0.9rem 0;
    border-left: 0;
  }

  .md-typeset .continue-reading__item + .continue-reading__item {
    border-top: 1px solid var(--hc-border-strong);
  }

  .md-typeset .library-home__feature {
    min-height: 0;
    padding: 0.85rem 0;
  }

  .md-typeset .library-home__feature:nth-child(2n) {
    padding-left: 0;
    border-left: 0;
  }

  .md-typeset .library-home__feature:nth-child(n+2) {
    padding-top: 0.85rem;
    border-top: 1px solid var(--hc-border-strong);
  }

  .library-home__cover {
    width: 6rem;
    grid-row: 1 / span 2;
  }

  .md-typeset .library-home__feature {
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: 0.85rem;
  }

  .library-home__description,
  .library-home__foot {
    grid-column: 1 / -1;
  }

  .library-home__description {
    margin-top: 0.8rem;
  }

  .library-home__foot:not(.library-home__foot--count) {
    display: none;
  }
}

.article-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.72fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--md-default-fg-color);
}

.md-typeset .article-pager__link {
  display: flex;
  min-height: 5rem;
  color: var(--md-default-fg-color);
  flex-direction: column;
  text-decoration: none;
}

.md-typeset .article-pager__return {
  display: flex;
  min-height: 5rem;
  align-items: center;
  color: var(--md-default-fg-color);
  flex-direction: column;
  text-align: center;
  text-decoration: none;
}

.md-typeset .article-pager__return:hover .article-pager__title {
  color: var(--hc-accent-text);
}

.md-typeset .article-pager__link--next {
  text-align: right;
  align-items: flex-end;
}

.article-pager__label {
  color: var(--hc-accent-text);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-pager__title {
  margin-top: 0.45rem;
  font-family: var(--hc-font-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.md-typeset .article-pager__link:hover .article-pager__title {
  color: var(--hc-accent-text);
}

.article-pager__spacer {
  min-height: 1px;
}

@media screen and (max-width: 40rem) {
  .article-pager {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .md-typeset .article-pager__return {
    min-height: 0;
    order: -1;
    align-items: flex-start;
    text-align: left;
  }

  .md-typeset .article-pager__link--next {
    text-align: left;
    align-items: flex-start;
  }
}

.article-card__meta {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

.article-browser__empty {
  padding: 1.2rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

/* --- Tablet and mobile reading layout ------------------------------------ */

@media screen and (max-width: 76.1875em) {
  .md-header__title {
    margin-left: 0.4rem;
  }

  .md-header__topic .md-ellipsis {
    font-size: 0.92rem;
    font-weight: 600;
  }

  .md-content__inner {
    margin: 0;
    padding: 1.1rem 0.95rem 2.5rem;
  }

  .md-content__inner:has(.library-home) {
    padding-top: 0.65rem;
  }

  .md-typeset {
    font-size: 0.9rem;
    line-height: 1.68;
  }

  .md-typeset h1 {
    font-size: 1.75rem;
    line-height: 1.08;
    margin-bottom: 0.75em;
  }

  .md-typeset h2 {
    font-size: 1.3rem;
    line-height: 1.18;
    margin-top: 1.6em;
  }

  .md-typeset h3 {
    font-size: 1.08rem;
    line-height: 1.25;
  }

  .md-typeset p,
  .md-typeset li,
  .md-typeset td,
  .md-typeset th {
    font-size: 0.95rem;
  }

  .md-typeset p,
  .md-typeset li {
    overflow-wrap: anywhere;
  }

  .md-nav__link,
  .md-nav__title {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .md-nav__item .md-nav__link {
    margin-top: 0.12rem;
    padding-bottom: 0.45rem;
    padding-top: 0.45rem;
  }

  .md-typeset table:not([class]) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  .md-search__form {
    border-radius: 0.35rem;
  }

  /* Article browser stays comfortable on touch screens. */
  .article-browser__filter {
    font-size: 0.9rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  .md-typeset .article-card__link {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  .article-card__title {
    font-size: 0.92rem;
  }
}

@media screen and (max-width: 40rem) {
  .md-content__inner {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
  }

  .md-typeset {
    font-size: 0.86rem;
    line-height: 1.66;
  }

  .md-typeset h1 {
    font-size: 1.58rem;
  }

  .md-typeset h2 {
    font-size: 1.22rem;
  }

  .md-typeset p,
  .md-typeset li,
  .md-typeset td,
  .md-typeset th {
    font-size: 0.9rem;
  }

  .md-typeset .grid.cards > ul {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .md-typeset .grid.cards > ul > li {
    padding: 1rem 0;
  }

  .md-typeset .grid.cards > ul > li > p:first-child strong,
  .md-typeset .grid.cards > ul > li > p:first-child a {
    font-size: 1.12rem;
  }

  .md-typeset .article-card__link {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.65rem;
    padding-right: 0.15rem;
    padding-left: 0.15rem;
  }

  .article-card__meta {
    white-space: normal;
  }

  .article-browser--books .article-card__link {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .article-browser--books .article-card__link:has(.article-card__cover) {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    column-gap: 0.8rem;
  }

  .article-card__cover {
    width: 4.25rem;
  }

  .article-browser--books .article-card__summary {
    -webkit-line-clamp: 3;
  }
}

html,
body,
.md-main,
.md-content {
  max-width: 100%;
}

.md-typeset img,
.md-typeset pre,
.md-typeset code {
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Breadcrumb and pager links, everywhere rather than only inside the reading
   wrapper. They measured 23px tall — one pixel under the 24px minimum for a
   pointer target — and they are the primary way back out of a page. Inline
   links inside a sentence are deliberately left alone: the 24px rule exempts
   them, and padding them out would wreck the line spacing of running prose. */
.reader-context a,
.article-pager a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/* Reading measure for the rest of the library.

   The collected-works chapters were clamped to ~68 characters a line; every
   other page still set prose across the full content column — 89 to 119
   characters, against a comfortable 60-75. The homepage was the worst of them
   at 118. Same measure everywhere now, so the library reads as one system.

   544px is the books' 34em at their 16px body size, written as a length
   because these elements do not share one container to clamp: they are
   siblings under .md-content__inner, so each is capped individually and an
   `em` value would resolve against each element's own font-size and give
   headings a wider column than the prose beneath them.

   Only running text is capped. Card grids, the volume browser and anything
   else laid out as a DIV keep the full width, which is what they are for. */
:root {
  --hc-measure: 544px;
}

.md-content__inner > p,
.md-content__inner > ul:not(.grid),
.md-content__inner > ol,
.md-content__inner > blockquote,
.md-content__inner > dl,
.md-content__inner > h1,
.md-content__inner > h2,
.md-content__inner > h3,
.md-content__inner > h4,
.md-content__inner > h5,
.md-content__inner > h6,
.md-content__inner > details {
  max-width: var(--hc-measure);
}

/* Admonitions and code blocks are display matter rather than running prose;
   they keep their own width, as tables already do. */
.md-content__inner > .admonition,
.md-content__inner > .highlight,
.md-content__inner > pre {
  max-width: none;
}