/*
Theme Name: Rationality Israel
Theme URI: https://rationality.co.il/
Author: Rationality Israel
Description: Warm literary RTL theme for Rationality Israel. Homepage hero is edited as a normal WordPress Page.
Version: 1.4.114
Text Domain: rationality-israel
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
*/

/* ========== Design tokens ========== */
:root {
  /*
   * Default site background is pure white (mix 0).
   * Slider: 0 = white/black edge, 100 = warm paper / dark paper.
   */
  --rc-bg-paper: oklch(0.985 0.009 85);
  --rc-bg-edge: #ffffff;
  --rc-bg-mix: 0;
  --bg: color-mix(in oklab, var(--rc-bg-paper) calc(var(--rc-bg-mix) * 1%), var(--rc-bg-edge));
  --card: color-mix(in oklab, var(--rc-bg-paper) calc(var(--rc-bg-mix) * 1%), var(--rc-bg-edge));
  --bg2: color-mix(in oklab, var(--bg) 92%, var(--rc-bg-paper));
  --fg: oklch(0.24 0.012 60);
  --fg-muted: oklch(0.44 0.012 60);
  --fg-faint: oklch(0.6 0.01 60);
  --border: oklch(0.9 0.012 80);
  --accent: oklch(0.6 0.14 58);
  --btn-bg: oklch(0.34 0.03 45);
  --btn-fg: oklch(0.97 0.01 85);
  --ph1: oklch(0.9 0.02 70);
  --ph2: oklch(0.87 0.025 65);
  --ph-fg: oklch(0.3 0.02 55);
  --quote: oklch(0.3 0.02 50);
  /*
   * Second book band — same warm paper family as the site,
   * a step deeper than --bg2 so both boxes read as related but distinct.
   */
  --bg3: oklch(0.94 0.02 68);
  /* Body reading size in pt (site default 12.5). */
  --rc-body-pt: 12.5;
  /* Line height for body prose (unitless). */
  --rc-body-lh: 1.6;
}

html[data-theme="dark"] {
  --rc-bg-paper: oklch(0.20 0.008 60);
  --rc-bg-edge: #000000;
  /* Remains driven by --rc-bg-mix (0 = black, 100 = dark paper). */
  --bg: color-mix(in oklab, var(--rc-bg-paper) calc(var(--rc-bg-mix) * 1%), var(--rc-bg-edge));
  --card: color-mix(in oklab, var(--rc-bg-paper) calc(var(--rc-bg-mix) * 1%), var(--rc-bg-edge));
  --bg2: color-mix(in oklab, var(--bg) 88%, var(--rc-bg-paper));
  --fg: oklch(0.92 0.012 80);
  --fg-muted: oklch(0.72 0.012 70);
  --fg-faint: oklch(0.58 0.012 65);
  --border: oklch(0.34 0.010 60);
  --accent: oklch(0.72 0.13 62);
  --btn-bg: oklch(0.72 0.13 60);
  --btn-fg: oklch(0.18 0.01 60);
  --ph1: oklch(0.34 0.02 65);
  --ph2: oklch(0.30 0.025 60);
  --ph-fg: oklch(0.85 0.03 70);
  --quote: oklch(0.86 0.02 65);
  --bg3: oklch(0.265 0.012 58);
}

/* ========== Base ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Assistant", sans-serif;
  /* No bg transition on load — avoids cream→white (or saved mix) flash between pages */
  transition: color 0.2s;
  -webkit-font-smoothing: antialiased;
}

/* Smooth bg only after first paint, when the user moves the slider / theme */
html.rc-bg-ready body {
  transition: background 0.2s, color 0.2s;
}

::selection {
  background: rgba(180, 120, 80, 0.22);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Layout shell ========== */
.rc-wrap {
  max-width: 1080px;
  margin: 0 auto;
  direction: rtl;
}

/*
 * Desktop only: a little breathing room on each side of the shell.
 * Padding is outside the 1080 content width (max-width expanded by the same
 * amount) so type, covers, and internal layout stay unchanged.
 */
@media (min-width: 821px) {
  .rc-wrap {
    box-sizing: border-box;
    max-width: calc(1080px + 40px);
    padding-left: 20px;
    padding-right: 20px;
  }
}

.rc-pad {
  padding-left: 48px;
  padding-right: 48px;
}

/* ========== Header / nav ========== */
.rc-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /*
   * Full site width (same as .rc-wrap) — no extra side padding/margin.
   * Page content still uses .rc-pad; the menu spans the real content shell.
   */
  padding: 22px 0 0;
  /* Line lives on .rc-header-row so it stays under the main menu only
     (does not drop below the reading tools when that bar is open). */
  border-bottom: none;
  gap: 0;
  overflow: visible;
}

/* Top row: logo + nav + actions — fixed underline under this row only */
.rc-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  /* Breathing room between menu items and the underline */
  padding-bottom: 16px;
}

.rc-logo {
  text-decoration: none;
  color: inherit;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.rc-logo span {
  color: var(--accent);
}

.rc-nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-muted);
  min-width: 0;
}

/* Desktop: panel is the horizontal menu */
.rc-nav-panel {
  display: flex;
  align-items: center;
  gap: 22px;
  transition: filter 0.28s ease, opacity 0.28s ease;
}

/* Search open: soft-blur nav instead of removing it (no layout jump) */
.rc-header.is-search-open .rc-nav-panel {
  filter: blur(5px);
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}

.rc-header.is-search-open .rc-burger {
  filter: blur(5px);
  opacity: 0.32;
  pointer-events: none;
  transition: filter 0.28s ease, opacity 0.28s ease;
}

.rc-nav-panel-head {
  display: none;
}

/* Hamburger — mobile only */
.rc-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 0.28s ease, opacity 0.28s ease, color 0.15s, border-color 0.15s;
}

.rc-burger:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.rc-burger-lines {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
}

.rc-burger-lines span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

.rc-burger[aria-expanded="true"] .rc-burger-lines span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.rc-burger[aria-expanded="true"] .rc-burger-lines span:nth-child(2) {
  opacity: 0;
}

.rc-burger[aria-expanded="true"] .rc-burger-lines span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.rc-nav-backdrop {
  display: none;
}

.rc-nav-links .menu {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rc-nav-links .menu > li {
  position: relative;
}

.rc-nav-links .menu > li > a {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rc-nav-links .menu > li > a:hover,
.rc-nav-links .menu > li > a:focus {
  color: var(--accent);
}

/* Submenus (WP nested menus) */
.rc-nav-links .menu .sub-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  min-width: 250px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 22px 48px -20px rgba(40, 30, 20, 0.45);
  padding: 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 60;
}

.rc-nav-links .menu > li:hover > .sub-menu,
.rc-nav-links .menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rc-nav-links .menu .sub-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 0;
  left: 0;
  height: 14px;
}

.rc-nav-links .menu .sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}

.rc-nav-links .menu .sub-menu a:hover {
  background: var(--bg2);
  color: var(--accent);
}

/* Fallback hardcoded menus */
.rc-top {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.rc-top:hover {
  color: var(--accent);
}

.rc-menu {
  position: relative;
}

.rc-menu > .rc-sub {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  min-width: 250px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 22px 48px -20px rgba(40, 30, 20, 0.45);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 60;
}

.rc-menu:hover > .rc-sub,
.rc-menu:focus-within > .rc-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rc-menu > .rc-sub::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 0;
  left: 0;
  height: 14px;
}

.rc-sub a {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}

.rc-sub a:hover {
  background: var(--bg2);
  color: var(--accent);
}

.rc-sub-div {
  height: 1px;
  background: var(--border);
  margin: 6px;
}

.rc-caret {
  font-size: 10px;
  opacity: 0.55;
  margin-inline-start: 5px;
}

.rc-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 16px;
  cursor: pointer;
  background: transparent;
  color: var(--fg-muted);
  padding: 0;
  font-family: inherit;
}

.rc-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/*
 * Reading comfort: book button is a sticky toggle.
 * When on → centered second header row with theme / font / size.
 */
.rc-tools {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  z-index: 5;
}

.rc-tools-trigger {
  position: relative;
  z-index: 2;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.rc-tools-trigger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.rc-tools-trigger-icon svg {
  display: block;
}

/* Active (bar open) — same accent treatment as hover */
.rc-header.is-reading-open .rc-tools-trigger,
html[data-reading-bar="1"] .rc-tools-trigger {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg2);
}

/* Second header row — centered reading toolbar (no separator line) */
.rc-reading-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
  pointer-events: none;
  visibility: hidden;
}

/*
 * Animate only when the user toggles (html.rc-reading-anim).
 * Restoring open state across chapter navigations stays instant — no re-open animation.
 */
html.rc-reading-anim .rc-reading-bar {
  transition:
    max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    padding 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.3s;
}

html.rc-reading-anim[data-reading-bar="1"] .rc-reading-bar,
html.rc-reading-anim .rc-header.is-reading-open .rc-reading-bar {
  transition:
    max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    padding 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.rc-header.is-reading-open .rc-reading-bar,
html[data-reading-bar="1"] .rc-reading-bar {
  /* Room for a full row of controls (and a wrap on narrow screens) */
  max-height: 120px;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  /* Let the font menu drop below the bar (closed state keeps overflow:hidden) */
  overflow: visible;
  /* Below the main-menu line; no extra border of its own */
  padding-top: 12px;
  padding-bottom: 2px;
  margin-top: 0;
  border: none;
}

.rc-reading-bar .rc-toggle {
  flex-shrink: 0;
  background: var(--bg2);
}

/*
 * Background control: dark/light toggle + always-visible slider.
 * Light track: paper → white. Dark track: paper → black.
 * Outer pill border sits just past the theme circle (small even inset).
 */
.rc-bg-control {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  height: 36px;
  width: 132px;
  max-width: min(132px, 38vw);
  /* ~3px breathing room past the circle; a bit more after the slider */
  padding-block: 0;
  padding-inline-start: 3px;
  padding-inline-end: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg2);
  box-sizing: border-box;
}

.rc-bg-control .rc-bg-theme {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg2);
}

.rc-bg-control .rc-bg-theme:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--card);
}

.rc-bg-slider-wrap {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
}

.rc-bg-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 7px;
  margin: 0;
  border-radius: 999px;
  /* Physical left = paper, physical right = edge (white light / black dark) */
  background: linear-gradient(90deg, var(--rc-bg-paper) 0%, var(--rc-bg-edge) 100%);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  outline: none;
  cursor: pointer;
  /* min (edge) on the right, max (paper) on the left */
  direction: rtl;
}

.rc-bg-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(40, 30, 20, 0.25);
  cursor: grab;
}

.rc-bg-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(40, 30, 20, 0.25);
  cursor: grab;
}

.rc-bg-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .rc-reading-bar {
    transition: none !important;
  }
}

/* Body-font picker: always Frank Ruhl "א"; menu lists available fonts */
.rc-font-picker {
  position: relative;
  flex-shrink: 0;
  z-index: 8;
}

.rc-font-toggle {
  font-size: 18px;
  line-height: 1;
}

.rc-font-picker.is-open .rc-font-toggle {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg2);
}

.rc-font-icon {
  display: block;
  line-height: 1;
  font-weight: 700;
}

.rc-font-icon--frank {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 700;
}

.rc-font-menu {
  position: absolute;
  top: calc(100% + 8px);
  /* Prefer opening toward center of the bar on RTL */
  inset-inline-end: 0;
  min-width: 11.5rem;
  padding: 6px;
  margin: 0;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 16px 40px -18px rgba(40, 30, 20, 0.45);
  z-index: 40;
  box-sizing: border-box;
}

.rc-font-menu[hidden] {
  display: none !important;
}

.rc-font-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  text-align: start;
  font-size: 15px;
  line-height: 1.2;
  font-family: inherit;
}

.rc-font-option:hover,
.rc-font-option:focus-visible {
  background: var(--bg2);
  color: var(--accent);
  outline: none;
}

.rc-font-option.is-selected {
  background: color-mix(in oklab, var(--accent) 12%, var(--bg2));
  color: var(--accent);
}

.rc-font-option-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.rc-font-option-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.rc-font-option--frank .rc-font-option-sample,
.rc-font-option--frank .rc-font-option-name {
  font-family: "Frank Ruhl Libre", serif;
}

.rc-font-option--assistant .rc-font-option-sample,
.rc-font-option--assistant .rc-font-option-name {
  font-family: "Assistant", sans-serif;
}

.rc-font-option--alef .rc-font-option-sample,
.rc-font-option--alef .rc-font-option-name {
  font-family: "Alef", sans-serif;
}

.rc-font-option--varela .rc-font-option-sample,
.rc-font-option--varela .rc-font-option-name {
  font-family: "Varela Round", sans-serif;
}

.rc-font-option--arial .rc-font-option-sample,
.rc-font-option--arial .rc-font-option-name {
  font-family: Arial, Helvetica, sans-serif;
}

/* Text size: −  אא  +  (LTR so minus is left, plus is right) */
.rc-size-control {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  height: 36px;
  padding: 0 2px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg2);
  box-sizing: border-box;
  direction: ltr;
}

.rc-size-control .rc-size-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-color: transparent;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--fg-muted);
}

.rc-size-control .rc-size-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--border);
  background: var(--card);
}

.rc-size-control .rc-size-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Center: icon (default) / momentary pt value after ± */
.rc-size-mid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  height: 28px;
  margin: 0;
  padding: 0 2px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}

.rc-size-mid:hover {
  color: var(--accent);
  background: color-mix(in oklab, var(--card) 70%, transparent);
}

.rc-size-icon {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  font-weight: 700;
  user-select: none;
}

.rc-size-mid.is-showing-value .rc-size-icon {
  display: none;
}

.rc-size-value {
  display: none;
  min-width: 2.1em;
  text-align: center;
  font-family: "Assistant", sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--accent);
  user-select: none;
}

.rc-size-mid.is-showing-value .rc-size-value {
  display: inline-block;
}

.rc-size-a--sm {
  font-size: 10px;
  opacity: 0.75;
}

.rc-size-a--lg {
  /* Scales slightly with the chosen body size */
  font-size: calc(11px + (var(--rc-body-pt) - 11) * 0.55px);
}

/* Line-spacing control icon: three lines; gap scales with --rc-body-lh */
.rc-lh-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 14px;
  height: 14px;
  gap: calc(1px + (var(--rc-body-lh) - 1.2) * 2.2px);
  pointer-events: none;
}

.rc-lh-icon span {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}

.rc-size-mid.is-showing-value .rc-lh-icon {
  display: none;
}

/* ========== Inline header search (compact expand + motion) ========== */
.rc-header-search {
  position: relative;
  z-index: 40;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.rc-header-search-open {
  position: relative;
  z-index: 2;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Closed: form collapsed over the icon slot (same 36×36 as other toggles — no header growth) */
.rc-header-search-form {
  position: absolute;
  top: 50%;
  /* Expand toward the nav (physical right in RTL header layout) */
  inset-inline-end: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bg2);
  box-sizing: border-box;
  font-family: "Assistant", sans-serif;
  direction: rtl;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 3;
  transition:
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    padding 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    visibility 0s linear 0.3s;
}

.rc-header.is-search-open .rc-header-search-open {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

.rc-header.is-search-open .rc-header-search-form {
  /* Compact field — not full-bar */
  width: min(240px, calc(100vw - 11rem));
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  padding: 0 4px 0 6px;
  border-color: var(--border);
  box-shadow: 0 6px 20px -12px rgba(40, 30, 20, 0.45);
  transition:
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease,
    padding 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    visibility 0s linear 0s;
}

.rc-search-glyph {
  font-size: 15px;
  color: var(--fg-faint);
  flex-shrink: 0;
  line-height: 1;
  padding-inline-start: 2px;
}

.rc-header-search-form input[type="search"],
.rc-header-search-form input#rc-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 2px;
  height: 100%;
}

.rc-header-search-form input::placeholder {
  color: var(--fg-faint);
  font-weight: 500;
}

/* Chrome/Safari/Edge: hide the built-in blue “clear” ✕ on type=search */
.rc-header-search-form input[type="search"]::-webkit-search-cancel-button,
.rc-header-search-form input[type="search"]::-webkit-search-decoration,
.rc-header-search-form input[type="search"]::-webkit-search-results-button,
.rc-header-search-form input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  width: 0;
  height: 0;
}

.rc-header-search-form input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

/* Clear-typed-text ✕ — only visible while the field has content */
.rc-search-clear-input {
  border: none;
  background: transparent;
  color: var(--fg-faint);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}

.rc-search-clear-input[hidden] {
  display: none !important;
}

.rc-search-clear-input:hover {
  color: var(--fg);
}

.rc-header-search-close {
  width: 28px;
  height: 28px;
  font-size: 13px;
  flex-shrink: 0;
  border-color: transparent;
}

.rc-header-search-close:hover {
  border-color: var(--border);
}

/*
 * Whole-word toggle = the icon itself (VS Code style: אב + overline with end caps).
 */
.rc-search-exact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  user-select: none;
}

.rc-search-exact-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

.rc-search-exact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  color: var(--fg-faint);
  background: transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.rc-search-exact-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.rc-search-exact:hover .rc-search-exact-icon {
  color: var(--fg);
  background: var(--card);
  border-color: var(--border);
}

.rc-search-exact-input:focus-visible + .rc-search-exact-icon {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rc-search-exact-input:checked + .rc-search-exact-icon {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 16%, var(--bg));
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent);
}

.rc-search-exact-input:checked + .rc-search-exact-icon:hover,
.rc-search-exact:hover .rc-search-exact-input:checked + .rc-search-exact-icon {
  background: color-mix(in oklab, var(--accent) 22%, var(--bg));
}

@supports not (background: color-mix(in oklab, white 50%, black)) {
  .rc-search-exact-input:checked + .rc-search-exact-icon {
    background: var(--card);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc-header-search-form,
  .rc-header-search-open,
  .rc-nav-panel,
  .rc-header.is-search-open .rc-burger {
    transition: none !important;
  }
}

/* ========== Homepage: hero ========== */
.rc-hero {
  /*
   * Equal vertical air: nav underline → title, and lead paragraph → first box.
   * (Was 64 top / 20 bottom — unbalanced and either too airy or too tight.)
   */
  padding: 36px 48px 36px;
  text-align: center;
}

.rc-hero-kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 22px;
}

.rc-hero-title {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 700;
  font-size: 62px;
  line-height: 1.12;
  margin: 0 auto 24px;
  max-width: 980px; /* allow longer titles on one line */
  letter-spacing: -0.015em;
}

.rc-hero-lead {
  font-family: "Assistant", sans-serif;
  font-size: 19px; /* same as .rc-featured-desc (text inside book boxes) */
  font-weight: 400;
  line-height: 1.7;
  color: var(--fg-muted);
  max-width: 980px; /* same width as hero title */
  /* No extra bottom margin — hero padding + box border-top handle the gap */
  margin: 0 auto;
}

/*
 * Body/paragraph font via --rc-body-font (html[data-body-font=…]).
 * Default Assistant. Headings stay Frank Ruhl Libre (title classes).
 * Picker options: frank | assistant | alef | varela
 */
:root,
html[data-body-font="assistant"] {
  --rc-body-font: "Assistant", sans-serif;
}

html[data-body-font="frank"] {
  --rc-body-font: "Frank Ruhl Libre", serif;
}

html[data-body-font="alef"] {
  --rc-body-font: "Alef", sans-serif;
}

html[data-body-font="varela"] {
  --rc-body-font: "Varela Round", sans-serif;
}

html[data-body-font="arial"] {
  --rc-body-font: Arial, Helvetica, sans-serif;
}

p,
.rc-hero-lead,
.rc-hero-lead p,
.rc-featured-desc,
.rc-featured-desc p,
.rc-featured-list-title,
.rc-card-excerpt,
.rc-card-meta,
.rc-entry,
.rc-entry p,
.rc-entry .wp-block-paragraph,
.rc-entry li,
.rc-entry blockquote,
.rc-entry .wp-block-quote,
.rc-entry .wp-block-quote p,
.rc-search-excerpt {
  font-family: var(--rc-body-font);
}

/* Google Docs embeds often set fonts inline — override for non-default body fonts */
html:not([data-body-font="assistant"]) .rc-entry #gd_body,
html:not([data-body-font="assistant"]) .rc-entry #gd_body p,
html:not([data-body-font="assistant"]) .rc-entry #gd_body li,
html:not([data-body-font="assistant"]) .rc-entry #gd_body span,
html:not([data-body-font="assistant"]) .rc-entry #gd_body div,
html:not([data-body-font="assistant"]) .rc-entry #gd_body td {
  font-family: var(--rc-body-font) !important;
}

/* Markdown-paste articles also follow the body font */
.rc-entry .markdown,
.rc-entry .md-content,
.rc-entry [class*="markdown-main"],
.rc-entry [class*="tutor-markdown"] {
  font-family: var(--rc-body-font);
}

/*
 * Paragraph size (reading comfort) — continuous via --rc-body-pt (default 13).
 * ONLY body/running text scales. Headings keep Docs/theme sizes & margins.
 * Paragraph gaps stay fixed so body growth doesn’t inflate spacing.
 */
.rc-entry > p,
.rc-entry .wp-block-paragraph,
.rc-entry li,
.rc-entry blockquote,
.rc-entry .wp-block-quote,
.rc-entry .wp-block-quote p,
.rc-entry .wp-block-pullquote,
.rc-entry .wp-block-pullquote p,
.rc-hero-lead,
.rc-hero-lead p,
.rc-featured-desc,
.rc-featured-desc p,
.rc-featured .rc-featured-desc,
.rc-featured .rc-featured-desc p,
.rc-featured-list a,
.rc-featured-list-title,
.rc-featured .rc-featured-list a,
.rc-featured .rc-featured-list-title,
.rc-search-excerpt {
  font-size: calc(var(--rc-body-pt) * 1pt);
  line-height: var(--rc-body-lh);
}

/*
 * Docs running text only. Never target h1–h6 or their spans.
 * Exclude title/subtitle paragraphs and empty spacer lines (c6).
 */
.rc-entry #gd_body p:not(.title):not(.Subtitle):not(.subtitle):not(.c6),
.rc-entry #gd_body p:not(.title):not(.Subtitle):not(.subtitle):not(.c6) > span,
.rc-entry #gd_body li,
.rc-entry #gd_body li > span,
.rc-entry #gd_body td,
.rc-entry #gd_body td > span {
  font-size: calc(var(--rc-body-pt) * 1pt) !important;
  line-height: var(--rc-body-lh) !important;
}

/* Spacer paragraphs: fixed 13pt line box so they don’t inflate */
.rc-entry #gd_body p.c6,
.rc-entry #gd_body p.c6 span {
  font-size: 13pt !important;
  line-height: var(--rc-body-lh) !important;
}

.rc-entry #gd_body p,
.rc-entry p {
  margin-top: 0 !important;
  margin-bottom: 5.2pt !important;
}

.rc-entry li {
  margin-bottom: 3.25pt !important;
}

/* Explicitly do NOT touch heading metrics — leave Docs/theme CSS alone. */

.rc-hero-lead a,
.rc-featured-desc a,
.rc-featured-more,
.rc-hero-kicker a,
.rc-hero-title a,
.rc-featured-title a,
.rc-entry a {
  color: var(--accent);
  text-decoration: none;
}

.rc-hero-lead a:hover,
.rc-featured-desc a:hover,
.rc-featured-more:hover,
.rc-entry a:hover {
  color: var(--accent);
  opacity: 0.85;
}

/* Inline “עוד…” after first box blurb — same line/size as body, not bold. */
.rc-featured-more {
  display: inline;
  margin-inline-start: 0.35em;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  white-space: nowrap;
}

.rc-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.rc-btn {
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  padding: 14px 30px;
  border-radius: 8px;
  display: inline-block;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.rc-btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.rc-btn-primary:hover {
  filter: brightness(1.08);
}

.rc-btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--fg);
}

.rc-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ========== Homepage: featured ========== */
/* Book boxes stacked flush (no gap) — only the shared border-top separates them */
.rc-books {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 8px;
}

.rc-featured {
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 44px;
  align-items: center;
  /* Same as site background — no special band color */
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
}

.rc-featured--alt {
  background: transparent;
}

.rc-cover {
  text-decoration: none;
  aspect-ratio: 3 / 4;
  background: repeating-linear-gradient(
    135deg,
    var(--ph1) 0 14px,
    var(--ph2) 14px 28px
  );
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  box-shadow: 0 20px 40px -18px rgba(70, 45, 25, 0.5);
  overflow: hidden;
  position: relative;
  max-width: 280px;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rc-cover:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 48px -16px rgba(70, 45, 25, 0.55);
}

/* Real book covers: keep full image, no crop */
.rc-cover.has-image {
  aspect-ratio: auto;
  height: auto;
  padding: 0;
  background: transparent;
  display: block;
  overflow: visible;
  line-height: 0;
}

.rc-cover-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: 8px;
  box-shadow: 0 20px 40px -18px rgba(70, 45, 25, 0.5);
}

.rc-cover-title {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ph-fg);
}

.rc-featured-title {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 700;
  font-size: 36px;
  margin: 0 0 6px;
}

.rc-featured-title a {
  color: inherit;
  text-decoration: none;
}

.rc-featured-title a:hover {
  color: var(--accent);
}

/* Sub-header under the box title */
.rc-featured-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 14px;
}

/*
 * Book-box prose must track the reading controls (--rc-body-pt / --rc-body-lh).
 * Never reintroduce fixed px here — a later fixed size was overriding the
 * shared body-size rules and making the slider ignore these boxes.
 */
.rc-featured-desc,
.rc-featured .rc-featured-desc {
  font-family: "Assistant", sans-serif;
  font-size: calc(var(--rc-body-pt) * 1pt);
  line-height: var(--rc-body-lh);
  color: var(--fg-muted);
  margin: 0 0 22px;
  /* Full justify (both edges) for box blurbs — works in RTL */
  text-align: justify;
  text-align-last: right; /* last line stays natural in RTL */
  -webkit-text-align-last: right;
}

.rc-hero-lead p {
  margin: 0 0 0.6em;
  font-size: calc(var(--rc-body-pt) * 1pt);
  line-height: var(--rc-body-lh);
}

/* Same paragraph gap as site body prose (.rc-entry p → 5.2pt). */
.rc-featured-desc p,
.rc-featured .rc-featured-desc p {
  margin: 0 0 5.2pt;
  font-size: calc(var(--rc-body-pt) * 1pt);
  line-height: var(--rc-body-lh);
}

.rc-hero-lead p:last-child,
.rc-featured-desc p:last-child,
.rc-featured .rc-featured-desc p:last-child {
  margin-bottom: 0;
}

.rc-featured-list {
  --rc-featured-rows: 3;
  /* Row height tracks body type size so list stays readable when size changes */
  --rc-featured-row-h: calc(var(--rc-body-pt) * 1pt * var(--rc-body-lh) + 1.1rem);
  display: flex;
  flex-direction: column;
}

.rc-featured-list.is-scroll {
  max-height: calc(var(--rc-featured-rows) * var(--rc-featured-row-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 6px;
  margin-inline-end: -6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.rc-featured-list.is-scroll::-webkit-scrollbar {
  width: 6px;
}

.rc-featured-list.is-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.rc-featured-list a,
.rc-featured .rc-featured-list a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--rc-featured-row-h);
  padding: 0.55em 0;
  border-top: 1px solid var(--border);
  font-size: calc(var(--rc-body-pt) * 1pt);
  line-height: var(--rc-body-lh);
  box-sizing: border-box;
  transition: color 0.15s ease;
}

.rc-featured-list a:hover .rc-featured-list-title {
  color: var(--accent);
}

.rc-featured-list a:hover .rc-featured-list-arrow {
  color: var(--accent);
  transform: translateX(-3px);
}

.rc-featured-list-title,
.rc-featured .rc-featured-list-title {
  font-family: "Assistant", sans-serif;
  font-weight: 500;
  font-size: inherit;
  line-height: inherit;
  flex: 1;
  min-width: 0;
}

.rc-featured-list-arrow {
  margin-inline-start: auto;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-faint);
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
}

/* ========== Homepage: recent (dense list, LessWrong-style) ========== */
.rc-recent {
  padding: 28px 48px 36px;
}

.rc-recent-heading {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.rc-recent-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

/*
 * Dense article row (LessWrong-style):
 *   Title ………………………………… author name   ← same meta style as old time slot
 *   One-line description  ⏳ time     ← time after the paragraph, same line
 */
.rc-post-row {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}

/* Last row: no stroke — footer/page edge already draws a line */
.rc-recent-list .rc-post-row:last-child {
  border-bottom: none;
}

.rc-post-row:hover {
  background: color-mix(in oklab, var(--bg2) 65%, transparent);
}

.rc-post-row:hover .rc-post-row-title {
  color: var(--accent);
}

.rc-post-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}

.rc-post-row-title {
  min-width: 0;
  flex: 1 1 auto;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

/* Author (Customizer sub-header) — same look as the old right-side time meta */
.rc-post-row-by {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-faint);
  white-space: nowrap;
}

.rc-post-row-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0.75em;
  margin-top: 3px;
}

.rc-post-row-desc {
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
  font-family: "Assistant", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reading time after the description, current hourglass design */
.rc-post-row-meta {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-faint);
  white-space: nowrap;
}

.rc-post-row-meta .rc-read-time {
  color: inherit;
  font: inherit;
}

/* Keep card styles for search / archive templates that still use them */
.rc-card {
  text-decoration: none;
  color: inherit;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}

.rc-card:hover {
  border-color: var(--accent);
  background: var(--bg2);
}

.rc-card-title {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 4px;
}

.rc-card-cat {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 10px;
}

.rc-card-excerpt {
  font-family: "Assistant", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
}

.rc-card-meta {
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  color: var(--fg-faint);
}

.rc-card-meta .rc-read-time {
  color: inherit;
  font: inherit;
}

/* ========== Footer ========== */
.rc-footer {
  padding: 40px 48px;
  border-top: 1px solid var(--border);
  color: var(--fg-faint);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.rc-footer-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rc-footer-sep {
  opacity: 0.7;
}

.rc-footer-link {
  color: var(--fg-faint);
  text-decoration: none;
}

.rc-footer-link:hover {
  color: var(--accent);
}

/* ========== Generic page content ========== */
.rc-page {
  padding: 56px 48px 72px;
}

.rc-page-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* Wider column for download tables / multi-link book grids */
.rc-page--wide .rc-page-inner {
  max-width: 1080px; /* match site shell width */
}

.rc-page--wide .rc-entry .wp-block-table,
.rc-page--wide .rc-entry table {
  width: 100%;
  border-collapse: collapse;
}

.rc-page--wide .rc-entry .wp-block-table {
  overflow-x: auto;
  max-width: 100%;
}

.rc-page--wide .rc-entry .wp-block-table table,
.rc-page--wide .rc-entry table {
  white-space: nowrap;
}

.rc-page--wide .rc-entry .wp-block-table td,
.rc-page--wide .rc-entry .wp-block-table th,
.rc-page--wide .rc-entry table td,
.rc-page--wide .rc-entry table th {
  padding: 10px 14px;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
}

/*
 * Book cover grid (download-options):
 * Markup is:  title <br> cover <br> PDF|WORD|EPUB|AZW3
 * Center the cell; kill <br> spacing so only a few px separate the three rows.
 */
.rc-page--wide .rc-entry .wp-block-table > div {
  justify-content: center !important;
  gap: 20px 16px;
}

.rc-page--wide .rc-entry .wp-block-table > div > div {
  text-align: center;
  line-height: 1.25;
}

/* <br> was the main source of large vertical gaps — remove entirely */
.rc-page--wide .rc-entry .wp-block-table br {
  display: none !important;
}

.rc-page--wide .rc-entry .wp-block-table img,
.rc-page--wide .rc-entry table img {
  display: block !important;
  float: none !important;
  /* Equal tight gap title↔cover and cover↔links (~same as one text line gap) */
  margin: 6px auto !important;
  height: auto;
  max-width: 100%;
  vertical-align: top;
}

/* Keep reading paragraphs readable even on wide pages */
.rc-page--wide .rc-entry > p,
.rc-page--wide .rc-entry > .wp-block-paragraph {
  max-width: 720px;
}

/* Page title block — title + meta (read time; later author/translator) */
.rc-page-header {
  margin: 0 0 28px;
}

.rc-page-title {
  font-family: "Frank Ruhl Libre", serif; /* headings stay serif */
  font-weight: 700;
  font-size: 44px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.015em;
}

.rc-page-header .rc-page-title {
  margin: 0;
}

.rc-page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.85em;
  margin-top: 10px;
  font-family: "Assistant", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-faint);
  line-height: 1.35;
}

.rc-page-meta-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.rc-page-meta .rc-read-time {
  color: inherit;
  font: inherit;
  gap: 0.35em;
}

/*
 * HPMOR chapter bar — borderless, spacing-tight (type stays readable)
 * [→]  book name (muted) · פרק N (accent) · time  [←]
 */
.rc-hpmor-bar {
  margin: 0 0 0.4rem;
  padding: 0;
  border: none;
  background: transparent;
  font-family: "Assistant", sans-serif;
}

.rc-hpmor-bar--footer {
  margin: 1.25rem 0 0;
  padding: 0.45rem 0 0;
  border-top: 1px solid var(--border);
}

.rc-hpmor-bar-row--nav {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
  align-items: center;
  gap: 0.15rem 0.35rem;
  min-width: 0;
}

.rc-hpmor-bar--footer .rc-hpmor-bar-row--nav {
  grid-template-columns: 2.25rem 2.25rem;
  justify-content: space-between;
  width: 100%;
}

.rc-hpmor-bar-side {
  display: flex;
  align-items: center;
}

.rc-hpmor-bar-prev {
  justify-content: flex-start;
}

.rc-hpmor-bar-next {
  justify-content: flex-end;
}

.rc-hpmor-bar-center {
  min-width: 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.5em;
  row-gap: 0.05em;
}

/* Full-size serif title — muted so it doesn’t compete with body text */
.rc-hpmor-bar-title {
  display: inline;
  max-width: 100%;
  font-family: "Frank Ruhl Libre", serif;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--fg-muted);
  text-decoration: none;
}

.rc-hpmor-bar-title:hover {
  color: var(--accent);
}

.rc-hpmor-bar-chapter {
  font-family: "Frank Ruhl Libre", serif;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--accent);
  white-space: nowrap;
}

/* Reading time + hourglass (homepage cards, HPMOR header bar, …) */
.rc-read-time {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
}

.rc-read-time-icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.85;
  line-height: 0;
}

.rc-read-time-icon svg {
  width: 0.9em;
  height: 0.9em;
  display: block;
}

/* Keep time on the same visual band when space allows */
.rc-hpmor-bar-read {
  font-family: "Assistant", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg-faint);
}

/* In-doc “פרק N” is shown in the bar — hide residual if filter misses. */
.rc-page:has(.rc-hpmor-bar--header) #gd_body #contents > h2:first-child,
.rc-page:has(.rc-hpmor-bar--header) #gd_body #contents > h2:first-of-type {
  display: none !important;
}

/* Arrow-only controls */
.rc-hpmor-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.rc-hpmor-bar-btn:hover {
  color: var(--accent);
  background: color-mix(in oklab, var(--bg2) 80%, var(--accent) 8%);
}

.rc-hpmor-bar-btn--ghost {
  visibility: hidden;
  pointer-events: none;
}

.rc-hpmor-bar-dir {
  line-height: 1;
  opacity: 0.9;
}

/*
 * Chapter pages: much less top padding than generic pages (56px),
 * but keep a bit of air on desktop under the site header.
 */
.rc-page:has(.rc-hpmor-bar--header) {
  padding-top: 22px;
  padding-bottom: 48px;
}

.rc-page:has(.rc-hpmor-bar--header) .rc-entry {
  margin-top: 0;
}

.rc-page:has(.rc-hpmor-bar--header) .rc-entry > #gd_body,
.rc-page:has(.rc-hpmor-bar--header) .rc-entry > #gd_body > #contents {
  margin-top: 0;
  padding-top: 0;
}

/* Legacy series-label (if used elsewhere) */
.rc-series-label {
  margin: 0 0 0.35em;
  padding: 0;
  text-align: center;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 18pt;
  font-weight: 700;
  line-height: 1.25;
  color: var(--fg);
}

.rc-series-label a {
  color: inherit;
  text-decoration: none;
  font: inherit;
}

.rc-series-label a:hover {
  color: var(--accent);
}

/* Mobile: tight chapter chrome (as now); restore top-bar side margins */
@media (max-width: 820px) {
  .rc-page:has(.rc-hpmor-bar--header) {
    padding-top: 8px;
  }

  .rc-hpmor-bar {
    margin-bottom: 0.35rem;
  }

  .rc-hpmor-bar-row--nav {
    grid-template-columns: 2.1rem minmax(0, 1fr) 2.1rem;
  }
}

.rc-entry {
  font-family: "Assistant", sans-serif;
  /* Default / base; running text uses --rc-body-pt / --rc-body-lh */
  font-size: calc(var(--rc-body-pt, 13) * 1pt);
  line-height: var(--rc-body-lh, 1.6);
  /* Inherit justify into Docs <p> and paste/markdown <div> blocks alike */
  text-align: justify;
  text-align-last: start;
}

/* Basic paragraphs: justify (both edges) */
.rc-entry p,
.rc-entry .wp-block-paragraph {
  text-align: justify;
  text-align-last: start; /* last line not stretched oddly */
}

/* Headings stay start-aligned (not stretched) */
.rc-entry h1,
.rc-entry h2,
.rc-entry h3,
.rc-entry h4,
.rc-entry h5,
.rc-entry h6 {
  text-align: start;
  text-align-last: auto;
}

/*
 * Pasted “markdown” articles (Grok/ChatGPT/etc.): content is <div> not <p>,
 * so normal .rc-entry p rules never fire. Match Docs body gaps & type.
 * Example: /more-articles/האם-טועים-לעומת-אני-צודק/
 */
.rc-entry .markdown,
.rc-entry .md-content,
.rc-entry [class*="markdown-main"],
.rc-entry [class*="tutor-markdown"] {
  font-size: calc(var(--rc-body-pt) * 1pt);
  line-height: var(--rc-body-lh);
  color: inherit;
}

/* Top-level blocks inside markdown wrappers ≈ paragraphs */
.rc-entry .markdown > div,
.rc-entry .md-content > div,
.rc-entry [class*="markdown-main"] > div,
.rc-entry [class*="tutor-markdown"] > div {
  margin-top: 0 !important;
  margin-bottom: 5.2pt !important;
  font-size: calc(var(--rc-body-pt) * 1pt);
  line-height: var(--rc-body-lh);
  text-align: justify;
  text-align-last: start;
}

/* Empty spacer / hr wrappers: don’t add huge air */
.rc-entry .markdown > div:empty,
.rc-entry .md-content > div:empty,
.rc-entry .markdown > div:has(> hr:only-child),
.rc-entry .md-content > div:has(> hr:only-child) {
  margin-bottom: 0.4em !important;
}

/* List item text blocks */
.rc-entry .markdown li,
.rc-entry .md-content li,
.rc-entry [class*="markdown-main"] li,
.rc-entry [class*="tutor-markdown"] li {
  margin-bottom: 3.25pt !important;
}

.rc-entry .markdown li > div,
.rc-entry .md-content li > div,
.rc-entry [class*="markdown-main"] li > div,
.rc-entry [class*="tutor-markdown"] li > div {
  margin-bottom: 0 !important;
  font-size: calc(var(--rc-body-pt) * 1pt);
  line-height: var(--rc-body-lh);
  text-align: justify;
  text-align-last: start;
}

.rc-entry .markdown ul,
.rc-entry .markdown ol,
.rc-entry .md-content ul,
.rc-entry .md-content ol {
  margin: 0 0 5.2pt;
  padding-inline-start: 1.4em;
}

/* True blockquotes (when used) — same bar as theme quotes */
.rc-entry .markdown blockquote,
.rc-entry .md-content blockquote {
  margin: 1.1em 0;
  padding-block: 4px;
  padding-inline-start: 1em;
  padding-inline-end: 0;
  border-inline-start: 3px solid var(--accent);
  font-style: italic;
  color: var(--quote);
  font-size: calc(var(--rc-body-pt) * 1pt);
  line-height: var(--rc-body-lh);
}

/* Headings inside page content stay literary serif */
.rc-entry h1,
.rc-entry h2,
.rc-entry h3,
.rc-entry h4,
.rc-page-title,
.rc-hero-title,
.rc-featured-title,
.rc-card-title,
.rc-cover-title {
  font-family: "Frank Ruhl Libre", serif;
}

.rc-entry > *:first-child {
  margin-top: 0;
}

/*
 * Chapter embeds (HPMOR / gdembed) often start with a redundant <hr>
 * above the document body — hide that top rule only.
 */
.rc-entry > hr:first-child,
.rc-entry > hr:first-of-type {
  display: none;
}

/*
 * Google Docs often repeat the page title as the first line (p.title / h1).
 * When the theme already shows .rc-page-title, hide that Doc header so it
 * does not appear twice. HPMOR chapters do NOT use this class (they keep
 * in-doc “פרק N” + chapter name and hide the WP title instead).
 */
.rc-page--hide-doc-title #gd_body #contents p.title,
.rc-page--hide-doc-title #gd_body #contents .title,
.rc-page--hide-doc-title #gd_body #contents > .doc-content > p.title,
.rc-page--hide-doc-title #gd_body #contents h1:first-of-type,
.rc-page--hide-doc-title #gd_body .doc-content > h1:first-of-type,
.rc-page--hide-doc-title #gd_body p.title {
  display: none !important;
}

/* Many Docs put the title in the first .doc-content paragraph (not class "title"). */
.rc-page--hide-doc-title #gd_body .doc-content > p:first-of-type {
  display: none !important;
}

/* Compact paragraph spacing for long reading text */
.rc-entry p,
.rc-entry .wp-block-paragraph {
  margin-top: 0;
  margin-bottom: 0.4em;
}

.rc-entry p:last-child,
.rc-entry .wp-block-paragraph:last-child {
  margin-bottom: 0;
}

.rc-entry h2 {
  font-size: 30px;
  margin: 1.35em 0 0.45em;
}

.rc-entry h3 {
  font-size: 24px;
  margin: 1.2em 0 0.4em;
}

.rc-entry ul,
.rc-entry ol,
.rc-entry .wp-block-list {
  padding-inline-start: 1.4em;
  margin: 0 0 0.4em;
}

.rc-entry li {
  margin-bottom: 0.25em;
}

.rc-entry blockquote,
.rc-entry .wp-block-quote,
.rc-entry .wp-block-pullquote {
  margin: 1.1em 0;
  padding-block: 4px;
  padding-inline-start: 1em; /* gap between bar and text */
  padding-inline-end: 0;
  border-inline-start: 3px solid var(--accent);
  font-size: 13pt; /* same as body / Google Docs running text */
  line-height: 1.6;
  font-style: italic;
  color: var(--quote);
}

.rc-entry .wp-block-quote p,
.rc-entry .wp-block-pullquote p {
  margin: 0;
  padding: 0;
  border: none;
}

/* Google Docs quote bars (border-right in RTL) — space text from the line */
#gd_body p {
  box-sizing: border-box;
}

.rc-entry img {
  border-radius: 8px;
  height: auto;
  max-width: 100%;
}

/* Clear floats so following headings/sections don't collide */
.rc-entry::after {
  content: "";
  display: table;
  clear: both;
}

/*
 * WordPress media alignment (classic editor + captions).
 * Needed for floated meme on /hpmor/ (figure.wp-caption.alignleft).
 */
.rc-entry .alignleft,
.rc-entry img.alignleft,
.rc-entry figure.alignleft,
.rc-entry .wp-caption.alignleft {
  float: left;
  margin: 0.4em 1.1em 0.8em 0;
  max-width: 100%;
}

.rc-entry .alignright,
.rc-entry img.alignright,
.rc-entry figure.alignright,
.rc-entry .wp-caption.alignright {
  float: right;
  margin: 0.4em 0 0.8em 1.1em;
  max-width: 100%;
}

.rc-entry .aligncenter,
.rc-entry img.aligncenter,
.rc-entry figure.aligncenter,
.rc-entry .wp-caption.aligncenter {
  display: block;
  float: none;
  margin: 0.8em auto;
}

.rc-entry .alignnone,
.rc-entry img.alignnone {
  float: none;
  margin: 0.5em 0;
}

.rc-entry .wp-caption {
  max-width: 100%;
  box-sizing: border-box;
}

.rc-entry .wp-caption img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 8px;
}

.rc-entry .wp-caption-text,
.rc-entry figcaption {
  font-family: "Assistant", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-muted);
  margin: 0.45em 0 0;
  text-align: start;
}

/* Headings after a float should clear so they don't sit beside the image oddly */
.rc-entry h2,
.rc-entry h3 {
  clear: both;
}

/* Search results */
.rc-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rc-results-list > li,
.rc-result-group {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.rc-results-list a {
  text-decoration: none;
  color: inherit;
}

.rc-result-title-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0.75em;
  text-decoration: none;
  color: inherit;
}

.rc-result-title-link:hover .rc-card-title {
  color: var(--accent);
}

.rc-results-list a:hover .rc-card-title {
  color: var(--accent);
}

.rc-search-occ-count {
  font-family: "Assistant", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
}

.rc-result-previews {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.rc-result-previews > li {
  font-family: "Assistant", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  background: oklch(0.975 0.012 85);
  border: 1px solid var(--border);
}

/* Search hit highlight inside result snippets */
.rc-search-excerpt mark.rc-search-hit,
.rc-results-list mark.rc-search-hit {
  background: oklch(0.92 0.06 85);
  color: inherit;
  font-weight: 700;
  padding: 0 0.12em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.rc-search-stats {
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  color: var(--fg-muted);
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.rc-search-stats-count {
  margin: 0;
}

.rc-search-stats-exact-tip {
  margin: 0;
}

.rc-search-exact-tip-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: "Assistant", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  line-height: 1.35;
}

.rc-search-exact-tip-link:hover,
.rc-search-exact-tip-link--wide:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tip label is always accent-colored (both exact / widen). */
.rc-search-exact-tip-text {
  color: var(--accent);
}

.rc-search-exact-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  background: color-mix(in oklab, var(--accent) 12%, var(--bg));
  color: var(--accent);
}

.rc-search-exact-tip-icon svg {
  display: block;
}

@supports not (background: color-mix(in oklab, white 50%, black)) {
  .rc-search-exact-tip-icon {
    border-color: var(--border);
    background: var(--bg2);
  }
}

/* “Widen search” tip: icon stays muted; text still uses accent above. */
.rc-search-exact-tip-icon--off {
  color: var(--fg-muted);
  border-color: var(--border);
  background: var(--bg2);
}

.rc-search-cap-notice {
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  background: oklch(0.96 0.03 85);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 1.25rem;
  color: var(--fg);
}

.rc-search-cap-notice p {
  margin: 0 0 0.5em;
}

.rc-search-cap-notice p:last-child {
  margin-bottom: 0;
}

.rc-search-exact-link {
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-inline-start: 0.35em;
}

.rc-search-occ {
  display: inline-block;
  margin-inline-start: 0.5em;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  opacity: 0.9;
}

.rc-search-pagination {
  margin-top: 1.5rem;
}

.rc-search-pagination--top {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.rc-search-pagination--bottom {
  margin-top: 1.5rem;
}

.rc-search-pagination .nav-links,
.rc-search-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rc-search-pagination .page-numbers a,
.rc-search-pagination .page-numbers span,
.rc-search-pagination a.page-numbers,
.rc-search-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  padding: 0.35em 0.55em;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  font-family: "Assistant", sans-serif;
}

.rc-search-pagination .page-numbers.current,
.rc-search-pagination span.page-numbers.current {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

/* Screen reader */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ========== Responsive ========== */

@media (max-width: 820px) {
  .rc-pad,
  .rc-hero,
  .rc-featured,
  .rc-recent,
  .rc-footer,
  .rc-page {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Restore side margins on the top bar (match former mobile chrome) */
  .rc-header {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /*
   * Reading bar (book submenu): keep every control on one line.
   * Shorten the color slider + tighten gaps; keep original button sizes.
   */
  .rc-reading-bar {
    flex-wrap: nowrap;
    gap: 6px 7px;
    justify-content: center;
  }

  .rc-header.is-reading-open .rc-reading-bar,
  html[data-reading-bar="1"] .rc-reading-bar {
    /* Single row only — no room needed for a wrap */
    max-height: 56px;
  }

  .rc-bg-control {
    width: 88px;
    max-width: 88px;
    gap: 2px;
    padding-inline-start: 2px;
    padding-inline-end: 5px;
  }

  /*
   * Font menu: center under the א button (not flush to screen edge).
   * left/translateX works the same in RTL absolute positioning.
   */
  .rc-font-menu {
    inset-inline-end: auto;
    inset-inline-start: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* Keep clear of viewport edges if the bar is near the side */
    max-width: min(11.5rem, calc(100vw - 32px));
  }

  .rc-logo {
    font-size: 22px;
  }

  .rc-burger {
    display: flex;
  }

  .rc-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(25, 18, 12, 0.45);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  .rc-nav-backdrop[hidden] {
    display: none !important;
  }

  .rc-nav-backdrop:not([hidden]) {
    display: block;
  }

  /*
   * Mobile drawer: fully off-screen when closed (was peeking on the left
   * because RTL used translateX(-110%) while docked on the wrong edge).
   * RTL → docked to the right, slides out further right when closed.
   * LTR → docked to the left, slides out further left when closed.
   */
  .rc-nav-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(320px, 88vw);
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 16px 28px;
    background: var(--card);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 16px;
    color: var(--fg);
    transition: transform 0.22s ease, visibility 0.22s;
    /* Closed by default — fully hidden */
    visibility: hidden;
    pointer-events: none;
  }

  /* RTL (this site): panel from the right */
  html[dir="rtl"] .rc-nav-panel {
    right: 0;
    left: auto;
    border-left: 1px solid var(--border);
    border-right: none;
    transform: translateX(100%);
  }

  /* LTR fallback: panel from the left */
  html[dir="ltr"] .rc-nav-panel,
  html:not([dir]) .rc-nav-panel {
    left: 0;
    right: auto;
    border-right: 1px solid var(--border);
    border-left: none;
    transform: translateX(-100%);
  }

  .rc-nav-panel.is-open {
    transform: translateX(0) !important;
    visibility: visible;
    pointer-events: auto;
  }

  .rc-nav-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  .rc-nav-panel-title {
    font-family: "Frank Ruhl Libre", serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--fg);
  }

  /* Stack menu items */
  .rc-nav-panel .menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .rc-nav-panel .menu > li {
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  .rc-nav-panel .menu > li > a {
    display: block;
    padding: 14px 8px;
    color: var(--fg);
  }

  .rc-nav-panel .menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0 8px 10px 8px;
    min-width: 0;
    background: transparent;
  }

  .rc-nav-panel .menu .sub-menu a {
    padding: 10px 12px;
    white-space: normal;
  }

  .rc-nav-panel > .rc-menu,
  .rc-nav-panel > .rc-top {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  .rc-nav-panel > .rc-top,
  .rc-nav-panel .rc-menu > .rc-top {
    display: block;
    padding: 14px 8px;
    color: var(--fg);
  }

  .rc-nav-panel .rc-menu > .rc-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0 8px 10px;
    min-width: 0;
    background: transparent;
  }

  .rc-nav-panel .rc-sub a {
    white-space: normal;
  }

  .rc-hero-title {
    font-size: 40px;
  }

  .rc-hero-lead {
    font-size: 17px; /* stay close to featured-desc on small screens */
  }

  .rc-featured {
    grid-template-columns: 1fr;
  }

  .rc-recent {
    padding-top: 20px;
    padding-bottom: 28px;
  }

  .rc-post-row {
    padding: 10px 0;
  }

  .rc-post-row-top {
    gap: 8px 12px;
  }

  .rc-post-row-desc {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .rc-books {
    gap: 0; /* no space between the two large boxes on mobile */
    padding: 0;
  }

  .rc-featured {
    padding: 28px 24px;
    border-radius: 0;
  }

  /* Center book covers when the grid stacks; a bit smaller than desktop (280px) */
  .rc-featured .rc-cover {
    justify-self: center;
    margin-inline: auto;
    max-width: 200px;
  }

  /* Avoid a double top edge where the two boxes meet */
  .rc-books .rc-featured + .rc-featured {
    border-top: none;
  }

  .rc-featured-title {
    font-size: 28px;
  }

  .rc-page-title {
    font-size: 32px;
  }
}

/* Native replacement for the existing desktop back-to-top control. */
.rc-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 5px;
  border: 0;
  border-radius: 5%;
  background: #000;
  color: #fff;
  cursor: pointer;
  opacity: 0.5;
}
.rc-back-to-top[hidden] { display: none; }
.rc-back-to-top:hover,
.rc-back-to-top:focus-visible { opacity: 1; }
.rc-back-to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .rc-back-to-top { display: none; }
}