/* ==========================================================================
   Prophecy pages: shared stylesheet
   --------------------------------------------------------------------------
   EVERYTHING the boss is likely to tweak lives in the first :root block below.
   The ?edit=1 tweak panel reads this block and builds its controls from it,
   so a new setting added here shows up in the panel automatically.

   Naming conventions (the panel relies on them):
     --type-*   typography      --space-*   vertical spacing
     --layout-* widths/gutters  --color-*   colors
     --font-*   font stacks     --fluid-*   the phone/desktop range

     NAME-phone / NAME-desktop  a pair of plain pixel numbers (no "px").
                                The size scales smoothly between them as the
                                screen goes from --fluid-from to --fluid-to
                                wide, and is locked at each end.
     --_name                    derived value (leading underscore). Not
                                edited directly, hidden from the panel.
   ========================================================================== */

:root {
  /* Fluid range: the screen widths (px) where "phone" and "desktop" apply */
  --fluid-from: 375;
  --fluid-to: 1280;

  /* Fonts (article style #5 "Clean Modern Messianic Bible", chosen 2026-10-10) */
  --font-heading: "Inter", Arial, sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-ui: "Inter", Arial, sans-serif;
  --font-nav: "Mulish", Arial, sans-serif;
  --font-hebrew: "Noto Serif Hebrew", "Times New Roman", serif;

  /* Type sizes, in pixels: phone / desktop */
  --type-h1-phone: 42;
  --type-h1-desktop: 52;
  --type-h2-phone: 30;
  --type-h2-desktop: 34;
  --type-h3-phone: 24;
  --type-h3-desktop: 24;
  --type-deck-phone: 22;
  --type-deck-desktop: 22;
  --type-body-phone: 18;
  --type-body-desktop: 19;
  --type-pullquote-phone: 24;
  --type-pullquote-desktop: 34;
  --type-scripture-phone: 20;
  --type-scripture-desktop: 20;
  --type-scripture-hebrew-phone: 21;
  --type-scripture-hebrew-desktop: 21;
  --type-verse-title-phone: 29;
  --type-verse-title-desktop: 29;
  --type-verse-hebrew-phone: 27;
  --type-verse-hebrew-desktop: 27;
  --type-dropcap-phone: 66;
  --type-dropcap-desktop: 88;
  --type-verse-translit: 17px;
  --type-verse-english: 16px;
  --type-kicker: 12px;
  --type-caption: 14px;
  --type-byline: 13px;
  --type-nav: 16px;
  --type-slogan: 18px;
  --type-toc: 15px;
  --type-note: 12px;
  --type-footnote-phone: 15;
  --type-footnote-desktop: 16;
  --type-footnote-marker: 13px;
  --type-info-name: 34px;
  --type-info-text: 17px;
  /* Parts with a size of their own (they used to follow the body text size) */
  --type-lead-phone: 19;
  --type-lead-desktop: 21;
  --type-start-phone: 21;
  --type-start-desktop: 22;
  --type-question-phone: 21;
  --type-question-desktop: 22;
  --type-word-chart-title-phone: 19;
  --type-word-chart-title-desktop: 20;
  --type-word-chart-word-phone: 18;
  --type-word-chart-word-desktop: 21;
  --type-word-chart-quote-phone: 16;
  --type-word-chart-quote-desktop: 17;
  --type-word-chart-note-phone: 16;
  --type-word-chart-note-desktop: 17;
  --type-fulfillment-text-phone: 16;
  --type-fulfillment-text-desktop: 17;
  --type-callout-phone: 16;
  --type-callout-desktop: 17;
  --type-card-text-phone: 15;
  --type-card-text-desktop: 16;

  /* Line height (multiplier) and letter spacing */
  --type-leading-body: 1.77;
  --type-leading-heading: 1.3;
  --type-leading-h1: 1.1;
  --type-leading-h3: 1.47;
  --type-tracking-heading: -0.5px;
  --type-tracking-h1: -1.3px;
  --type-tracking-kicker: 1.4px;
  --type-weight-heading: 700;
  --type-weight-body: 400;

  /* Widths and gutters */
  --layout-page-max: 1200px;
  --layout-text-col: 760px;
  --layout-wide-col: 960px;
  --layout-gutter-phone: 21;
  --layout-gutter-desktop: 40;
  --layout-radius: 6px;
  --layout-rule: 1px;

  /* Vertical spacing */
  --space-paragraph: 22px;
  --space-heading-above: 56px;
  --space-heading-below: 20px;
  --space-back-link: 34px;
  --space-section-phone: 48;
  --space-section-desktop: 70;
  --space-block-phone: 32;
  --space-block-desktop: 36;

  /* Colors (article style #5; header/footer keep the NewFront site blues) */
  --color-ink: #18222c;
  --color-muted: #637181;
  --color-paper: #ffffff;
  --color-tint: #f2f7fb;
  --color-label-bg: #eaf2f8;
  --color-rule: #e2e8f0;
  --color-accent: #275c81;
  --color-accent-dark: #003366;
  --color-highlight: #00a0d1;
  --color-link: #3678e2;       /* words in an article linked to another page (Zev's "Click here", 2026-10-28) */
  /* Info boxes (js/infobox.js), per type: the dots under the word, the bar and label on its card, and the card's background */
  --color-info-sage: #5b3024;      /* Deep Chestnut (Zev, 2026-11-02) */
  --color-info-sage-bg: #f9f2e6;   /* Zev picked this over Warm Parchment #f7efdf (2026-11-02) */
  --color-info-book: #1e3a5f;       /* Deep Navy (Zev, 2026-11-02): also the card's category and Literary Note labels */
  --color-info-book-bg: #f8f2e8;    /* Warm Parchment (Zev, 2026-11-02) */
  --color-info-book-line: #dccfbe;  /* Soft Tan: the card's outline (Zev, 2026-11-02) */
  --color-info-book-text: #1f1a17;  /* Dark Charcoal: the card's words (Zev, 2026-11-02) */
  /* Phones: how dark the article behind an open card is, in percent (100 = black) */
  --count-info-shade: 80;
  --color-info-shade: #14100c;          /* its color */
  --color-info-sage-phonebar: #5b3024;  /* the top line of a sage card on phones (computers use the sage color) */
  /* Phones: the colored line on top of an open card (4px on computers) */
  --size-info-bar: 10px;
  /* Phones: the clear strip of backdrop right above that line (Zev: the backdrop must not touch it) */
  --size-info-clear: 1px;
  --count-info-clear-shade: 50;   /* how dark that strip is, in percent (0 = the page shows through untouched) */
  /* Header and menu: same as the donations page */
  --color-header-bg: #ffffff;
  --color-header-text: #4b407e;
  --color-nav-bg: #2aa4d0;
  --color-nav-text: #ffffff;
  --color-nav-home: #003366;
  --color-nav-donate: #80b32c;
  --color-nav-hover: #f1f1f1;
}

/* Derived values: computed from the settings above. Do not edit by hand. */
:root {
  --_t: calc((100vw - var(--fluid-from) * 1px) / (var(--fluid-to) - var(--fluid-from)));

  --_h1:         clamp(calc(min(var(--type-h1-phone), var(--type-h1-desktop)) * 1px), calc(var(--type-h1-phone) * 1px + (var(--type-h1-desktop) - var(--type-h1-phone)) * var(--_t)), calc(max(var(--type-h1-phone), var(--type-h1-desktop)) * 1px));
  --_h2:         clamp(calc(min(var(--type-h2-phone), var(--type-h2-desktop)) * 1px), calc(var(--type-h2-phone) * 1px + (var(--type-h2-desktop) - var(--type-h2-phone)) * var(--_t)), calc(max(var(--type-h2-phone), var(--type-h2-desktop)) * 1px));
  --_h3:         clamp(calc(min(var(--type-h3-phone), var(--type-h3-desktop)) * 1px), calc(var(--type-h3-phone) * 1px + (var(--type-h3-desktop) - var(--type-h3-phone)) * var(--_t)), calc(max(var(--type-h3-phone), var(--type-h3-desktop)) * 1px));
  --_deck:       clamp(calc(min(var(--type-deck-phone), var(--type-deck-desktop)) * 1px), calc(var(--type-deck-phone) * 1px + (var(--type-deck-desktop) - var(--type-deck-phone)) * var(--_t)), calc(max(var(--type-deck-phone), var(--type-deck-desktop)) * 1px));
  --_body:       clamp(calc(min(var(--type-body-phone), var(--type-body-desktop)) * 1px), calc(var(--type-body-phone) * 1px + (var(--type-body-desktop) - var(--type-body-phone)) * var(--_t)), calc(max(var(--type-body-phone), var(--type-body-desktop)) * 1px));
  --_pullquote:  clamp(calc(min(var(--type-pullquote-phone), var(--type-pullquote-desktop)) * 1px), calc(var(--type-pullquote-phone) * 1px + (var(--type-pullquote-desktop) - var(--type-pullquote-phone)) * var(--_t)), calc(max(var(--type-pullquote-phone), var(--type-pullquote-desktop)) * 1px));
  --_scripture:  clamp(calc(min(var(--type-scripture-phone), var(--type-scripture-desktop)) * 1px), calc(var(--type-scripture-phone) * 1px + (var(--type-scripture-desktop) - var(--type-scripture-phone)) * var(--_t)), calc(max(var(--type-scripture-phone), var(--type-scripture-desktop)) * 1px));
  --_scripture-hebrew: clamp(calc(min(var(--type-scripture-hebrew-phone), var(--type-scripture-hebrew-desktop)) * 1px), calc(var(--type-scripture-hebrew-phone) * 1px + (var(--type-scripture-hebrew-desktop) - var(--type-scripture-hebrew-phone)) * var(--_t)), calc(max(var(--type-scripture-hebrew-phone), var(--type-scripture-hebrew-desktop)) * 1px));
  --_verse-title: clamp(calc(min(var(--type-verse-title-phone), var(--type-verse-title-desktop)) * 1px), calc(var(--type-verse-title-phone) * 1px + (var(--type-verse-title-desktop) - var(--type-verse-title-phone)) * var(--_t)), calc(max(var(--type-verse-title-phone), var(--type-verse-title-desktop)) * 1px));
  --_verse-hebrew: clamp(calc(min(var(--type-verse-hebrew-phone), var(--type-verse-hebrew-desktop)) * 1px), calc(var(--type-verse-hebrew-phone) * 1px + (var(--type-verse-hebrew-desktop) - var(--type-verse-hebrew-phone)) * var(--_t)), calc(max(var(--type-verse-hebrew-phone), var(--type-verse-hebrew-desktop)) * 1px));
  --_dropcap:    clamp(calc(min(var(--type-dropcap-phone), var(--type-dropcap-desktop)) * 1px), calc(var(--type-dropcap-phone) * 1px + (var(--type-dropcap-desktop) - var(--type-dropcap-phone)) * var(--_t)), calc(max(var(--type-dropcap-phone), var(--type-dropcap-desktop)) * 1px));
  --_gutter:     clamp(calc(min(var(--layout-gutter-phone), var(--layout-gutter-desktop)) * 1px), calc(var(--layout-gutter-phone) * 1px + (var(--layout-gutter-desktop) - var(--layout-gutter-phone)) * var(--_t)), calc(max(var(--layout-gutter-phone), var(--layout-gutter-desktop)) * 1px));
  --_section:    clamp(calc(min(var(--space-section-phone), var(--space-section-desktop)) * 1px), calc(var(--space-section-phone) * 1px + (var(--space-section-desktop) - var(--space-section-phone)) * var(--_t)), calc(max(var(--space-section-phone), var(--space-section-desktop)) * 1px));
  --_footnote:   clamp(calc(min(var(--type-footnote-phone), var(--type-footnote-desktop)) * 1px), calc(var(--type-footnote-phone) * 1px + (var(--type-footnote-desktop) - var(--type-footnote-phone)) * var(--_t)), calc(max(var(--type-footnote-phone), var(--type-footnote-desktop)) * 1px));
  --_block:      clamp(calc(min(var(--space-block-phone), var(--space-block-desktop)) * 1px), calc(var(--space-block-phone) * 1px + (var(--space-block-desktop) - var(--space-block-phone)) * var(--_t)), calc(max(var(--space-block-phone), var(--space-block-desktop)) * 1px));
  --_lead: clamp(calc(min(var(--type-lead-phone), var(--type-lead-desktop)) * 1px), calc(var(--type-lead-phone) * 1px + (var(--type-lead-desktop) - var(--type-lead-phone)) * var(--_t)), calc(max(var(--type-lead-phone), var(--type-lead-desktop)) * 1px));
  --_start: clamp(calc(min(var(--type-start-phone), var(--type-start-desktop)) * 1px), calc(var(--type-start-phone) * 1px + (var(--type-start-desktop) - var(--type-start-phone)) * var(--_t)), calc(max(var(--type-start-phone), var(--type-start-desktop)) * 1px));
  --_question: clamp(calc(min(var(--type-question-phone), var(--type-question-desktop)) * 1px), calc(var(--type-question-phone) * 1px + (var(--type-question-desktop) - var(--type-question-phone)) * var(--_t)), calc(max(var(--type-question-phone), var(--type-question-desktop)) * 1px));
  --_word-chart-title: clamp(calc(min(var(--type-word-chart-title-phone), var(--type-word-chart-title-desktop)) * 1px), calc(var(--type-word-chart-title-phone) * 1px + (var(--type-word-chart-title-desktop) - var(--type-word-chart-title-phone)) * var(--_t)), calc(max(var(--type-word-chart-title-phone), var(--type-word-chart-title-desktop)) * 1px));
  --_word-chart-word: clamp(calc(min(var(--type-word-chart-word-phone), var(--type-word-chart-word-desktop)) * 1px), calc(var(--type-word-chart-word-phone) * 1px + (var(--type-word-chart-word-desktop) - var(--type-word-chart-word-phone)) * var(--_t)), calc(max(var(--type-word-chart-word-phone), var(--type-word-chart-word-desktop)) * 1px));
  --_word-chart-quote: clamp(calc(min(var(--type-word-chart-quote-phone), var(--type-word-chart-quote-desktop)) * 1px), calc(var(--type-word-chart-quote-phone) * 1px + (var(--type-word-chart-quote-desktop) - var(--type-word-chart-quote-phone)) * var(--_t)), calc(max(var(--type-word-chart-quote-phone), var(--type-word-chart-quote-desktop)) * 1px));
  --_word-chart-note: clamp(calc(min(var(--type-word-chart-note-phone), var(--type-word-chart-note-desktop)) * 1px), calc(var(--type-word-chart-note-phone) * 1px + (var(--type-word-chart-note-desktop) - var(--type-word-chart-note-phone)) * var(--_t)), calc(max(var(--type-word-chart-note-phone), var(--type-word-chart-note-desktop)) * 1px));
  --_fulfillment-text: clamp(calc(min(var(--type-fulfillment-text-phone), var(--type-fulfillment-text-desktop)) * 1px), calc(var(--type-fulfillment-text-phone) * 1px + (var(--type-fulfillment-text-desktop) - var(--type-fulfillment-text-phone)) * var(--_t)), calc(max(var(--type-fulfillment-text-phone), var(--type-fulfillment-text-desktop)) * 1px));
  --_callout: clamp(calc(min(var(--type-callout-phone), var(--type-callout-desktop)) * 1px), calc(var(--type-callout-phone) * 1px + (var(--type-callout-desktop) - var(--type-callout-phone)) * var(--_t)), calc(max(var(--type-callout-phone), var(--type-callout-desktop)) * 1px));
  --_card-text: clamp(calc(min(var(--type-card-text-phone), var(--type-card-text-desktop)) * 1px), calc(var(--type-card-text-phone) * 1px + (var(--type-card-text-desktop) - var(--type-card-text-phone)) * var(--_t)), calc(max(var(--type-card-text-phone), var(--type-card-text-desktop)) * 1px));
}

/* ==========================================================================
   Base
   ========================================================================== */

/* The base rules below cover the whole page on a prophecy page, but only the
   roadmap inside the site's own header and footer on /messianic-prophecies/
   (WordPress: body.mb-prophecy-site, content in .mb-prophecy). :where() keeps
   their weight the same as plain "body", "p"... */
.mb-prophecy, :where(body:not(.mb-prophecy-site), .mb-prophecy) *, :where(body:not(.mb-prophecy-site), .mb-prophecy) *::before, :where(body:not(.mb-prophecy-site), .mb-prophecy) *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:where(body:not(.mb-prophecy-site), .mb-prophecy) {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--_body);
  font-weight: var(--type-weight-body);
  line-height: var(--type-leading-body);
  -webkit-font-smoothing: antialiased;
}

:where(body:not(.mb-prophecy-site), .mb-prophecy) img, :where(body:not(.mb-prophecy-site), .mb-prophecy) svg, :where(body:not(.mb-prophecy-site), .mb-prophecy) video { display: block; max-width: 100%; height: auto; }

:where(body:not(.mb-prophecy-site), .mb-prophecy) a { color: var(--color-accent); text-underline-offset: 0.15em; }
:where(body:not(.mb-prophecy-site), .mb-prophecy) a:hover { color: var(--color-accent-dark); }

:where(body:not(.mb-prophecy-site), .mb-prophecy) h1:not(.road *, .journey *),
:where(body:not(.mb-prophecy-site), .mb-prophecy) h2:not(.road *, .journey *),
:where(body:not(.mb-prophecy-site), .mb-prophecy) h3:not(.road *, .journey *) {
  font-family: var(--font-heading);
  font-weight: var(--type-weight-heading);
  line-height: var(--type-leading-heading);
  letter-spacing: var(--type-tracking-heading);
  color: var(--color-ink);
  text-wrap: balance;
}

:where(body:not(.mb-prophecy-site), .mb-prophecy) p { margin: 0 0 var(--space-paragraph); }

/* Layout containers */
.wrap {
  width: 100%;
  max-width: calc(var(--layout-page-max) + var(--_gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--_gutter);
}
.col-text { max-width: calc(var(--layout-text-col) + var(--_gutter) * 2); margin-inline: auto; }
.col-wide { max-width: calc(var(--layout-wide-col) + var(--_gutter) * 2); margin-inline: auto; }

/* ==========================================================================
   Site header / footer (static: these pages live outside WordPress)
   ========================================================================== */

/* Same header and menu as the donations page (donations.messianicbible.com/Donate).
   Computers (992px and up): logo, slogan, blue menu bar.
   Phones and tablets: logo and a menu button; the menu drops down as a list.
   js/site-header.js opens the menus and scrolls the header out of view on load. */
.site-header {
  background: var(--color-header-bg);
  font-family: var(--font-nav);
}
.site-header ul { list-style: none; margin-block: 0; padding-block: 0; }
.site-header-in {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 15px;
}
.site-brand {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 4px;
}
.site-logo { display: block; line-height: 0; }
.site-logo img { width: 460px; max-width: 100%; height: auto; }
.site-slogan {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font: 400 var(--type-slogan)/1.5 Helvetica, Arial, sans-serif;
  color: var(--color-header-text);
}
.site-slogan img { width: 24px; height: 27px; }
.site-menu-button { display: none; }

.site-nav { background: var(--color-nav-bg); }
.site-nav-list { display: flex; justify-content: center; }   /* centered, like the donations page */
.site-nav-list > li { position: relative; }
.site-nav-list > li > a,
.site-nav-more > button {
  display: block;
  padding: 0 20px;
  border: 0;
  background: none;
  font: 400 var(--type-nav)/52px var(--font-nav);
  color: var(--color-nav-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.site-nav-list > li > a:hover,
.site-nav-more > button:hover,
.site-nav-more.is-open > button {
  color: #000000;
  background: var(--color-nav-hover);
  text-decoration: underline;
}
.site-nav-list > .site-nav-home > a { padding-inline: 26px; background: var(--color-nav-home); color: #ffffff; text-decoration: none; }
.site-nav-list > .site-nav-home > a:hover { background: var(--color-nav-home); color: #f7f7f7; }
.site-nav-home svg { display: block; height: 52px; }
.site-nav-list > .site-nav-donate > a,
.site-nav-list > .site-nav-donate > a:hover { background: var(--color-nav-donate); color: #ffffff; font-weight: 700; }
.site-nav-more { background: var(--color-nav-home); }
.site-nav-more > button::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  vertical-align: 3px;
  border-top: 5px solid currentColor;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.site-nav-more-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  padding: 8px 0;
  background: var(--color-nav-hover);
  border: 5px solid var(--color-nav-bg);
  border-top-width: 0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}
.site-nav-more.is-open .site-nav-more-menu { display: block; }
.site-nav-more-menu a {
  display: block;
  padding: 10px 24px 10px 45px;
  font: 400 var(--type-nav)/1.5 var(--font-nav);
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav-more-menu a:hover { background: var(--color-nav-bg); }

/* Narrower computers: tighter menu, and the More list opens to the left */
@media (min-width: 992px) and (max-width: 1199px) {
  .site-nav-list > li > a, .site-nav-more > button { padding-inline: 15px; }
  .site-nav-list > .site-nav-home > a { padding-inline: 20px; }
  .site-nav-more-menu { left: auto; right: 0; }
}

@media (max-width: 991px) {
  .site-brand { align-items: center; padding-block: 10px; }
  .site-logo img { width: 230px; }
  .site-slogan { display: none; }
  .site-menu-button {
    display: block;
    flex: none;
    width: 52px;
    height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    background: none;
    cursor: pointer;
  }
  .site-menu-button span,
  .site-menu-button span::before,
  .site-menu-button span::after {
    display: block;
    height: 2px;
    background: #555555;
    border-radius: 1px;
  }
  .site-menu-button span { position: relative; }
  .site-menu-button span::before,
  .site-menu-button span::after { content: ""; position: absolute; left: 0; right: 0; }
  .site-menu-button span::before { top: -8px; }
  .site-menu-button span::after { top: 8px; }
  .site-nav { display: none; }
  .site-header.is-open .site-nav { display: block; }
  .site-nav .site-header-in { padding-inline: 0; }
  .site-nav-list { flex-direction: column; }
  .site-nav-list > li > a, .site-nav-more > button { width: 100%; text-align: left; line-height: 48px; padding-inline: 21px; }
  .site-nav-list > .site-nav-home > a { padding-inline: 21px; }
  .site-nav-home svg { height: 48px; }
  .site-nav-more-menu { position: static; border: 0; box-shadow: none; padding: 4px 0; }
  .site-nav-more-menu a { padding-left: 41px; white-space: normal; }
}

.site-footer {
  margin-top: var(--_section);
  padding-block: 40px;
  background: var(--color-accent-dark);
  color: #cdd7e4;
  font-family: var(--font-ui);
  font-size: var(--type-caption);
}
.site-footer a { color: #ffffff; }

/* ==========================================================================
   Article
   ========================================================================== */

.article-head { padding-top: var(--_section); }

/* A supporting page (word study...): back to the article it goes with */
.back-link { margin: 0 0 var(--space-back-link); font-family: var(--font-ui); font-size: var(--type-caption); }
.back-link a { color: var(--color-accent); text-decoration: none; }
/* A page that keeps its Word document's own look (docx-exact.js): none of the house
   styles reach inside; every look is the document's own (inline styles). */
.word-doc { margin: 0 auto 48px; padding: 0 16px; box-sizing: content-box; background: #fff; }
.word-doc * { all: revert; }
.word-doc p { white-space: pre-wrap; tab-size: 36pt; }
.word-doc a[href] { color: var(--color-link); text-decoration: none; }
.word-doc a[href]:hover { text-decoration: underline; }
.word-doc figure.article-figure { margin: 12pt 0; }
.word-doc figure.article-figure img { display: block; max-width: 100%; height: auto; }
.word-doc figure.article-figure figcaption { margin-top: 4pt; font-family: 'Calibri', Carlito, sans-serif; font-size: 10pt; color: #555; }
.word-doc sup.fn { cursor: pointer; color: var(--color-link); }
.word-exact > .footnotes { max-width: 468pt; margin: 24px auto 48px; padding: 0 16px; box-sizing: content-box; }
/* Links in an article's text (not the footnote list): bright blue, no line until the mouse is on them */
.article-body a:not(.button):not(.footnotes a) { color: var(--color-link); text-decoration: none; }
.article-body a:not(.button):not(.footnotes a):hover { color: var(--color-link); text-decoration: underline; }
.back-link a:hover { text-decoration: underline; }

.kicker {
  display: inline-block;
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-size: var(--type-kicker);
  font-weight: 700;
  letter-spacing: var(--type-tracking-kicker);
  text-transform: uppercase;
  color: var(--color-accent);
}

.article-head h1 {
  font-size: var(--_h1);
  line-height: var(--type-leading-h1);
  letter-spacing: var(--type-tracking-h1);
  margin: 0 0 14px;
}

.deck {
  font-size: var(--_deck);
  line-height: 1.45;
  color: var(--color-muted);
  margin: 0 0 25px;
}

.byline {
  font-family: var(--font-ui);
  font-size: var(--type-byline);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-muted);
  margin: 0 0 15px;
}
.byline strong { color: var(--color-ink); }

.hero { margin: var(--_block) auto; }
.hero img { width: 100%; border-radius: var(--layout-radius); }

:where(body:not(.mb-prophecy-site), .mb-prophecy) figcaption {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  line-height: 1.45;
  color: var(--color-muted);
  margin-top: 10px;
}

.article-body h2 {
  font-size: var(--_h2);
  margin: var(--space-heading-above) 0 var(--space-heading-below);
}
.article-body h3 {
  font-size: var(--_h3);
  line-height: var(--type-leading-h3);
  margin: calc(var(--space-heading-above) * 0.75) 0 var(--space-heading-below);
}
.article-body ul, .article-body ol { margin: 0 0 var(--space-paragraph); padding-left: 1.3em; }
.article-body li { margin-bottom: 8px; }

/* Drop cap on the first paragraph */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-size: var(--_dropcap);
  font-weight: var(--type-weight-heading);
  line-height: 0.8;
  margin: 0.06em 0.08em 0 0;
  color: var(--color-accent);
}

/* Scripture quotation */
.scripture {
  margin: var(--_block) 0;
  padding: 25px 28px;
  background: var(--color-tint);
  border-left: 4px solid var(--color-accent);
  border-radius: calc(var(--layout-radius) / 2);
}
.scripture p {
  font-size: var(--_scripture);
  line-height: 1.65;
  margin: 0 0 18px;
}
.scripture p:last-child { margin-bottom: 0; }
.scripture .scripture-hebrew {
  font-family: var(--font-hebrew);
  font-size: var(--_scripture-hebrew);
  line-height: 1.85;
  text-align: right;
}
.scripture cite {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-accent-dark);
}

/* Verse heading: reference, transliteration, Hebrew, English, centered */
.verse-head { text-align: center; margin: 32px auto 38px; }
.verse-head p { margin: 0; }
/* A verse line dragged out of its box keeps its look and stays centered. */
.article-body > :is(.verse-title, .verse-hebrew, .verse-translit, .verse-english) { text-align: center; }
:is(.verse-head, .article-body) > .verse-title {
  font-family: var(--font-heading);
  font-size: var(--_verse-title);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 17px;
}
:is(.verse-head, .article-body) > .verse-translit {
  font-family: var(--font-ui);
  font-size: var(--type-verse-translit);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 1.15em;
}
:is(.verse-head, .article-body) > .verse-hebrew {
  font-family: var(--font-hebrew);
  font-size: var(--_verse-hebrew);
  line-height: 1.55;
  margin-bottom: 1.15em;
}
.verse-english { font-family: var(--font-heading); font-size: var(--type-verse-english); line-height: 1.5; color: var(--color-ink); }

/* Paragraph variants */
.lead { font-size: var(--_lead); }
.emphasis { font-weight: 600; }
.coming-soon { margin: 32px 0; font-family: var(--font-heading); font-size: 32px; font-weight: 600; text-align: center; color: var(--color-accent); }
.start {
  font-family: var(--font-heading);
  font-size: var(--_start);
  font-weight: 700;
  margin-top: 1.5em;
}
.question {
  font-family: var(--font-heading);
  font-size: var(--_question);
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 var(--space-paragraph);
}

/* "Jump to a section" list */
.jump-note {
  margin-top: 35px;
  font-family: var(--font-ui);
  font-size: var(--type-kicker);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.article-body .toc {
  margin: 12px 0 45px;
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--type-toc);
  line-height: 1.5;
  border-top: var(--layout-rule) solid var(--color-rule);
}
.article-body .toc li { margin: 0; padding: 10px 4px; border-bottom: var(--layout-rule) solid var(--color-rule); }
.toc a { color: var(--color-ink); text-decoration: none; }
.toc a:hover { color: var(--color-accent); text-decoration: underline; }
.toc .n { display: inline-block; width: 28px; color: var(--color-accent); font-weight: 700; }
/* js/toc.js: an item whose section exists glides down to it */
.toc li.toc-live { cursor: pointer; }
.toc li.toc-live:hover, .toc li.toc-live:focus-visible { color: var(--color-accent); text-decoration: underline; outline: none; }
.article-body h2, .article-body h3 { scroll-margin-top: 24px; }
.toc-flash { background: var(--color-tint); transition: background 1.5s; }
html.tw-editing .toc li[data-toc-missing]::after { content: "  (no section with this heading yet)"; font-family: system-ui, sans-serif; font-size: 12px; color: #9a6700; }

/* Small label above a section heading, and the short bar under it */
.section-kicker {
  display: inline-block;
  margin: var(--space-heading-above) 0 10px;
  padding: 6px 9px;
  background: var(--color-label-bg);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: var(--type-kicker);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--type-tracking-kicker);
  text-transform: uppercase;
  color: var(--color-accent);
}
.article-body .section-kicker + h2 { margin-top: 0; }
.accent-rule { width: 64px; height: 3px; background: var(--color-accent); margin: 20px 0 34px; }

/* Small print at the end of an article */
.page-note {
  margin-top: 56px;
  padding-top: 14px;
  border-top: var(--layout-rule) solid var(--color-rule);
  font-family: var(--font-ui);
  font-size: var(--type-note);
  line-height: 1.55;
  color: var(--color-muted);
}

/* Instructions found in an imported Word document (docx-import.js): never
   shown to readers; a yellow box in edit mode until someone deletes them. */
.import-note { display: none; }
html.tw-editing .import-note {
  display: block;
  margin: 12px 0;
  padding: 8px 12px;
  border-left: 4px solid #e0a800;
  background: #fff4c2;
  color: #5c4500;
  font: 14px/1.45 system-ui, sans-serif;
}
html.tw-editing .import-note::before { content: "Note in the Word file (readers do not see this): "; font-weight: 700; }
html.tw-editing .import-check { border-left-color: #0060a6; background: #e8f2fb; color: #0b3a5e; }
html.tw-editing .import-check::before { content: "Word import (readers do not see this): "; }

/* A list item holding several paragraphs or a picture (Word import) */
.article-body li > p { margin: 0 0 10px; }
.article-body li > .article-figure { margin: 16px 0; }

/* A picture inside the article text (added with "+ Picture" in the panel) */
.article-figure { margin: var(--_block) 0; }
.article-figure img { display: block; width: 100%; height: auto; border-radius: var(--layout-radius); }
/* A looping YouTube video in place of a picture: plays by itself, muted
   (browsers only autoplay silent video), no controls, clicks pass through. */
.article-video .video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: var(--layout-radius); }
/* The player is 80px taller than the box at top and bottom: the picture fills the box
   exactly and YouTube's title and channel logo land in the hidden strip above it. */
.article-video iframe { position: absolute; left: 0; top: -80px; width: 100%; height: calc(100% + 160px); border: 0; pointer-events: none; }
/* An ordinary YouTube player in the article (data-play-in-view starts it, muted, when it scrolls into view). */
.article-embed .video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: var(--layout-radius); }
.article-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
/* "Tap for sound" on a video that started by itself, muted (js/youtube-loop.js),
   in the middle of the picture where YouTube puts its play button */
.video-sound { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px 18px 24px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #ffffff; font: 600 22px/1 var(--font-ui); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); cursor: pointer; }
.video-sound:hover { background: rgba(0, 0, 0, 0.88); }
.video-sound:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 2px; }
.video-sound[hidden] { display: none; }
/* Edge to edge across the whole window; js/full-width.js lines it up. */
.full-width, .full-width .video-frame { border-radius: 0; }
/* Above the floating section menu, so the menu slides underneath a wide video. */
.full-width { position: relative; z-index: 2; }

/* Footnotes (js/footnotes.js numbers them and adds the pop-up and "View Footnotes").
   In the text: <sup class="fn" data-fn="KEY">[1]</sup>
   At the end of the article body:
   <section class="footnotes"><ol class="fn-list"><li data-fn="KEY">The note</li></ol></section> */
sup.fn {
  font-family: var(--font-ui);
  font-size: var(--type-footnote-marker);
  font-weight: 600;
  line-height: 0;
  color: var(--color-accent);
  cursor: pointer;
  padding: 0 1px;
  white-space: nowrap;
}
sup.fn:hover, sup.fn:focus-visible { text-decoration: underline; outline: none; }
.fn-pop {
  position: absolute;
  z-index: 50;
  width: min(340px, calc(100vw - 24px));
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--layout-rule) solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--layout-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: var(--_footnote);
  line-height: 1.55;
  overflow-wrap: anywhere;   /* a long web address breaks onto the next line instead of running out of the box */
}
.fn-pop b { font-family: var(--font-ui); color: var(--color-accent); margin-right: 6px; }
.footnotes {
  margin-top: 48px;
  padding-top: 16px;
  border-top: var(--layout-rule) solid var(--color-rule);
}
.fn-toggle {
  all: unset;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--_h3);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fn-toggle::after { content: "\203A"; font-size: 1.3em; line-height: 1; transition: transform .2s; }
.fn-toggle[aria-expanded="true"]::after { transform: rotate(90deg); }
.fn-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.fn-list {
  margin: 18px 0 0;
  padding-left: 1.6em;
  font-size: var(--_footnote);
  line-height: 1.6;
  color: var(--color-ink);
}
.fn-list li { margin: 0 0 12px; padding-left: 4px; overflow-wrap: anywhere; }
/* A web link in a note is the title of the article or reference, underlined; "on [website]" follows it (fn-links.js) */
.fn-list a[href^="http"], .fn-pop a[href^="http"] { text-decoration: underline; text-underline-offset: 0.15em; }
.fn-list li::marker { font-family: var(--font-ui); font-weight: 600; color: var(--color-accent); }
.fn-list li.fn-flash { background: var(--color-tint); transition: background 1.5s; }
.footnotes.fn-closed .fn-list { display: none; }
@media print { .footnotes.fn-closed .fn-list { display: block; } .fn-toggle::after, .fn-pop { display: none; } }

/* Info boxes (js/infobox.js): a dotted word opens a card about a sage or a book */
span.info[data-info] {
  --_ic: var(--color-info-sage);
  text-decoration: underline dotted var(--_ic);
  text-decoration-thickness: 2px;
  text-underline-offset: 2.5pt;
  text-decoration-skip-ink: none;
  cursor: pointer;
}
span.info.info-book, .info-card.info-book { --_ic: var(--color-info-book); --_ibg: var(--color-info-book-bg); }
span.info[data-info]:focus-visible { outline: 2px solid var(--_ic); outline-offset: 2px; border-radius: 2px; }
/* The word whose card is open (computer): tinted in its color */
span.info.info-on { position: relative; z-index: 52; background: color-mix(in srgb, var(--_ic) 14%, var(--color-paper)); border-radius: 3px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--_ic) 14%, var(--color-paper)); }
.info-card {
  --_ic: var(--color-info-sage);
  --_ibg: var(--color-info-sage-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--type-info-text);
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
}
.info-pop {
  position: absolute;
  z-index: 51;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);   /* the whole card without its own scroll bar, unless it is taller than the screen */
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--_ibg);
  border-top: 4px solid var(--_ic);
  overscroll-behavior: contain;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
  padding: 24px 30px 18px;
}
.info-name { margin: 0; font-family: var(--font-body); font-size: var(--type-info-name); font-weight: 700; line-height: 1.15; overflow-wrap: normal; }
.info-he { margin-left: .4em; font-family: var(--font-hebrew); font-weight: 600; }
.info-type { margin: 0 0 8px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--_ic); }
.info-sub { margin: 4px 0 0; color: var(--color-muted); font-size: .95em; }
.info-sage .info-sub { font-weight: 700; }
/* Jewish Texts cards (Zev's design, 2026-11-02): outline on three sides (the top is the colored line) */
.info-card.info-book { color: var(--color-info-book-text); }
.info-pop.info-book { border-left: 1px solid var(--color-info-book-line); border-right: 1px solid var(--color-info-book-line); border-bottom: 1px solid var(--color-info-book-line); }
.info-book .info-sub { color: inherit; font-weight: 700; }
/* Fonts from the card editor's buttons */
.info-text .f-sans { font-family: var(--font-ui); }
.info-text .f-hebrew { font-family: var(--font-hebrew); }
.info-text p { margin: 14px 0 0; }
.info-foot { margin: 18px 0 0; font-family: var(--font-ui); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-muted); }
.info-book .info-foot { font-size: 12px; font-weight: 700; color: var(--_ic); }
.info-close { display: none; }
.info-shade { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .3); }
@media (max-width: 600px) {
  /* Phones: a pop-up over the greyed-out article (the page does not move). A short
     card sits in the middle of the screen; a long one comes up from the bottom,
     its top 78px below the top of the screen, and scrolls inside. */
  .info-shade { --_clear: var(--size-info-clear); background: color-mix(in srgb, var(--color-info-shade) calc(var(--count-info-shade) * 1%), transparent); }
  .info-rim { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--color-info-shade) calc(var(--count-info-clear-shade) * 1%), transparent); }
  .info-pop.info-sage { border-top-color: var(--color-info-sage-phonebar); }
  .info-pop {
    position: fixed; left: 12px; right: 12px; top: 50%; bottom: auto;
    border-top-width: var(--size-info-bar);
    width: auto; max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px);   /* infobox.js sets the exact height */
    border-radius: 14px;
    padding: 22px 20px 20px;
    transform: translateY(-50%);
    animation: info-in .18s ease-out;
  }
  .info-pop.info-sheet {
    left: 0; right: 0; top: auto; bottom: 0;
    max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px);
    border-radius: 14px 14px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    transform: none;
    animation: info-up .2s ease-out;
  }
  .info-close {
    display: block; position: absolute; top: 6px; right: 8px;
    width: 40px; height: 40px; padding: 0; border: 0; background: none;
    font: 28px/1 var(--font-ui); color: var(--color-muted); cursor: pointer;
  }
  .info-name { padding-right: 34px; font-size: min(var(--type-info-name), 28px); }
}
@keyframes info-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes info-in { from { transform: translateY(-50%) scale(.96); opacity: 0; } }
@media print { .info-pop, .info-shade, .info-rim { display: none; } span.info[data-info] { text-decoration: none; } }

/* Pull quote */
.pullquote {
  margin: var(--_block) 0;
  padding-block: 20px;
  border-block: 3px solid var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--_pullquote);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}
.pullquote p { margin: 0; }

/* Prophecy / fulfillment comparison */
.fulfillment {
  margin: var(--_block) 0;
  border: var(--layout-rule) solid var(--color-rule);
  border-radius: var(--layout-radius);
  overflow: hidden;
}
.fulfillment-title {
  margin: 0;
  padding: 14px 20px;
  background: var(--color-accent-dark);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: var(--type-byline);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.fulfillment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--layout-rule) solid var(--color-rule);
}
.fulfillment-row:first-of-type { border-top: 0; }
.fulfillment-row > div { padding: 16px 20px; font-size: var(--_fulfillment-text); line-height: 1.5; }
.fulfillment-row > div + div { border-left: var(--layout-rule) solid var(--color-rule); background: var(--color-tint); }
.fulfillment-row .ref {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 4px;
}
@media (max-width: 600px) {
  .fulfillment-row { grid-template-columns: 1fr; }
  .fulfillment-row > div + div { border-left: 0; border-top: var(--layout-rule) dashed var(--color-rule); }
}

/* Word chart: a chart rebuilt from a picture as real text (one row per
   translation; the row class colours the word it chose). */
.word-chart {
  --wc-ink: var(--color-accent);
  --wc-bg: var(--color-paper);
  margin: var(--_block) 0;
  border: var(--layout-rule) solid var(--color-rule);
  border-radius: var(--layout-radius);
  overflow: hidden;
  background: var(--color-paper);
}
.word-chart p { margin: 0; }
.word-chart [lang="he"] { font-family: var(--font-hebrew); font-style: normal; }
.word-chart-title {
  padding: 14px 20px;
  background: var(--color-accent-dark);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--_word-chart-title);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
.word-chart table { width: 100%; border-collapse: collapse; }
.word-chart th, .word-chart td {
  padding: 12px 16px;
  border-top: var(--layout-rule) solid var(--color-rule);
  vertical-align: middle;
  text-align: left;
}
.word-chart th + th, .word-chart th + td, .word-chart td + td { border-left: var(--layout-rule) solid var(--color-rule); }
/* A chart with no title row starts right at the box edge: no double line. */
.word-chart > table:first-child:not(:has(thead)) tbody tr:first-child > * { border-top: 0; }
.word-chart thead th {
  background: var(--color-label-bg);
  color: var(--color-accent);
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}
.word-chart thead th:first-child { width: 26%; }
.word-chart thead th:nth-child(2) { width: 22%; }
.word-chart .wc-name { font-family: var(--font-ui); font-weight: 700; color: var(--color-accent); line-height: 1.3; }
.word-chart .wc-edition { font-family: var(--font-ui); font-size: var(--type-caption); color: var(--color-muted); }
.word-chart .wc-word {
  background: var(--wc-bg);
  color: var(--wc-ink);
  font-family: var(--font-heading);
  font-size: var(--_word-chart-word);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.word-chart .wc-also { font-size: var(--type-caption); font-weight: 400; color: var(--color-ink); margin-top: 4px; }
.word-chart .wc-quote { font-size: var(--_word-chart-quote); line-height: 1.5; }
.word-chart .wc-hit { color: var(--wc-ink); }
.word-chart .wc-thrust { --wc-ink: #1e6b2e; --wc-bg: #edf7ee; }
.word-chart .wc-slain { --wc-ink: #6b2bd1; --wc-bg: #f4eefd; }
.word-chart .wc-stabbed { --wc-ink: #c0261f; --wc-bg: #fdf1e7; }
.word-chart-note {
  padding: 14px 20px 6px;
  border-top: var(--layout-rule) solid var(--color-rule);
  color: var(--color-accent);
  font-size: var(--_word-chart-note);
  font-style: italic;
  text-align: center;
}
.word-chart-art { display: block; width: 100%; height: auto; }
@media (max-width: 600px) {
  /* Phones: each translation becomes a small card. */
  .word-chart thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .word-chart table, .word-chart tbody, .word-chart tr, .word-chart th, .word-chart td { display: block; }
  .word-chart tr { padding: 14px 16px; border-top: var(--layout-rule) solid var(--color-rule); }
  .word-chart tbody tr:first-child { border-top: 0; }
  .word-chart th, .word-chart td { padding: 0; border: 0 !important; text-align: left; }
  .word-chart .wc-name, .word-chart .wc-edition, .word-chart .wc-word p { display: inline; }
  .word-chart .wc-edition { margin-left: 6px; }
  .word-chart .wc-word { display: inline-block; margin: 8px 0; padding: 4px 12px; border-radius: 999px; }
  .word-chart .wc-also { display: inline; margin: 0 0 0 4px; }
  /* A table with no row names (Version A / Version B): each cell keeps its
     column title, since the title row is hidden, as a band across the card
     with the same background as the title row on a computer. */
  .word-chart tr:has(> td[data-label]) { padding-top: 0; }
  .word-chart td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin: 0 -16px 10px;
    padding: 12px 16px;
    background: var(--color-label-bg);
    font-family: var(--font-ui);
    font-size: var(--type-caption);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--color-accent);
  }
  .word-chart td[data-label] + td[data-label] { margin-top: 14px; }
  .word-chart td[data-label] + td[data-label]::before { border-top: var(--layout-rule) solid var(--color-rule); }
}

/* A diagram rebuilt from a picture as an inline SVG drawing. */
.chart-figure svg { display: block; width: 100%; height: auto; }
/* Two layouts of the same drawing: a wide one, and a one-column one for
   phones (a 760-wide drawing would shrink its words too far). */
.chart-figure .chart-narrow { display: none; }
@media (max-width: 600px) {
  .chart-figure:has(.chart-narrow) .chart-wide { display: none; }
  .chart-figure .chart-narrow { display: block; max-width: 420px; margin-inline: auto; }
}

/* Call-out box */
.callout {
  margin: var(--_block) 0;
  padding: 24px 28px;
  border: 2px solid var(--color-highlight);
  border-radius: var(--layout-radius);
  font-family: var(--font-ui);
  font-size: var(--_callout);
}
.callout h3 { margin-top: 0; font-size: var(--_h3); }
.callout p:last-child { margin-bottom: 0; }

.button {
  display: inline-block;
  padding: 14px 26px;
  background: var(--color-accent);
  color: #ffffff;
  font-family: var(--font-ui);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--layout-radius);
}
.button:hover { background: var(--color-accent-dark); color: #ffffff; }

/* Index page cards */
.card-list { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); padding: 0; list-style: none; }
.card { border: var(--layout-rule) solid var(--color-rule); border-radius: var(--layout-radius); padding: 22px; }
.card h2 { font-size: var(--_h3); margin: 0 0 8px; }
.card p { font-size: var(--_card-text); color: var(--color-muted); margin: 0; }