:link { color: rgb(27, 7, 126) }  /* for unvisited links */
:visited { color: rgb(0, 0, 7) } /* for visited links */
/* :visited { color: rgb(0, 96, 255) }  for visited links */
a:active { color: rgb(255, 0, 102) } /* when link is clicked */
/* :hover { color: rgb(178, 0, 0) }  when mouse is over link */

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

/* Defensive backstop: a descendant with a hardcoded legacy pixel
   width (e.g. misc/index.html's old <table width="590">) can inflate
   the whole page's layout width on some engines even when the
   element itself is capped via max-width, rather than just
   overflowing in place. Hard-clamp the document itself so no future
   instance of this can force the page wider than the screen. */
html, body { overflow-x: hidden; max-width: 100%; }

body { background: #000080 }

body,li,p,td { font-family: verdana, sans-serif; font-size: 10pt; text-decoration: none; }

/* color: #333333; text-decoration: none; } */
/* A { text-decoration: none; } */

a.plain { text-decoration: none }
/* This is <a class="plain" href="what.html">not underlined</a> */

a.tmp {
background-color: #cccc66;
}

/* Marks a link as leaving the site (opens an external page) or as a
   file download, so readers know what a click will do before they
   click it. Usage: <a href="..." class="ext-link"> or
   <a href="..." class="file-link" data-ext="xls">. */
a.ext-link::after {
  content: " (external)";
  font-size: 0.75em;
  opacity: 0.6;
}

a.file-link::after {
  content: " (" attr(data-ext) ")";
  font-size: 0.75em;
  opacity: 0.6;
  text-transform: uppercase;
}

/* Marks a link to a personal-letter-style page (opens "Dear
   Friend,"/"Dear Brother," etc.), so readers know before clicking
   that it's a letter, not a regular article. */
a.letter-link::after {
  content: " (letter)";
  font-size: 0.75em;
  opacity: 0.6;
}

pre {font-family: monospace;}

/* Replaces the browser default 3D-inset groove look with a plain thin
   line, site-wide -- used as a generic section divider on ~330 pages. */
hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 1.5em 0;
}

/* font sizes: xx-small, x-small, small, medium, large, x-large, xx-large */

H1 {
/*  align: center; */
/*  font-variant: small-caps; */
/*  font-family: sans-serif; */ 
/*    font-size: 36pt; */
    font-size: x-large;
    font-family: serif }

H2 {
  font-family: sans-serif;
  font-size: medium; }
/* P { margin: 1em } */

H3 {
  font-family: sans-serif;
  font-size: medium;
  text-decoration: underline; }

.scripture {
  color: rgb(27, 7, 126);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: normal;
  line-height: 1.6;
  margin: 1.5em auto;
  max-width: 480px;
}

.center {
  margin: 2em;
}

b.scripture {
  color: rgb(27, 7, 126);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: normal;
}

blockquote.scripture {
  color: rgb(27, 7, 126);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: normal;
  line-height: 1.6;
  max-width: none;
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 3px solid #b20000;
}

/* The Bible reference line, e.g. <i>Genesis 1:27</i> -- almost always
   a citation inside .scripture, so style it via this descendant
   selector rather than touching every markup file. Upright against
   the now-italic verse body, muted gray like .concordance's
   reference column, own line. A handful of older pages used <i> for
   inline word emphasis instead (e.g. "the <i>WAY</i>, the
   <i>TRUTH</i>...") -- those were converted to <b> (see .scripture b
   below) specifically so they don't hit this rule. */
.scripture i {
  display: block;
  margin-top: 0.6em;
  font-style: normal;
  font-size: 0.8em;
  letter-spacing: 0.03em;
  color: #666;
}

/* Inline word-level emphasis/gloss inside a verse (e.g. a clarifying
   "(her)" or a footnoted term), as opposed to the trailing reference
   -- upright against the italic quote body, same "upright emphasis
   inside italic quote" trick as .quote strong, but without the full
   bold-red .highlight treatment since these are quieter asides. */
.scripture b {
  font-style: normal;
  font-weight: normal;
}

.highlight {
  color: #b20000;
  font-style: normal;
  font-weight: bold;
}

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

/* to not print an object */
@media print {
  .navbar { display: none }
}

/* make fonts larger for mobile views */
/*
@media (max-width: 400px) {
  h1 {font-size: 32pt}
  *  {font-size: 24pt}
}
*/

/* Breadcrumb nav used across all of bible/kjv/*.html + kjv/psalms/index.html
   (e.g. "Bible / Genesis"). Restored verbatim (2026-08-18) after being
   wrongly deleted as "dead code" during an unrelated session -- a shell
   globbing bug made the usage-check silently report zero matches when
   there were actually 67. Deliberately scoped to the `ul` tag (unlike
   the newer `nav.breadcrumb` below) so the two never collide, even
   though they happen to share a class name. */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

/* ============================================================
   Page shell (Design Cleanup Phase 1) — replaces the per-page
   <center><table width="..." bgcolor="..."> scaffolding that used
   to be hand-copied onto every page. Fixed 600px width to match
   .content-box below.
   ============================================================ */

.site-header {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: #000080;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 10px;
}

.site-logo {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

.site-logo .site-tagline {
  display: block;
  font-family: verdana, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 8px;
  letter-spacing: 0.06em;
  color: #ff9a9a;
}

.site-nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.site-nav a {
  display: inline-block;
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 4px;
  background: #1b077e;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus {
  background: #b20000;
}

/* On phone-width screens there are 6 nav links (Gospel/Importance/Intake/
   Topical/Misc/Bible) and not enough width for all of them at the desktop
   padding/font-size -- Misc and Bible scrolled off to the right, invisible
   unless you knew to swipe. Shrink the logo, gaps, link padding, and link
   font-size together so all 6 fit in one unscrolled row instead. */
@media (max-width: 600px) {
  .site-header {
    padding: 6px 6px;
    gap: 4px 6px;
  }

  .site-logo {
    font-size: 13px;
  }

  .site-nav {
    gap: 1px;
  }

  .site-nav a {
    padding: 4px 4px;
    font-size: 9px;
  }
}

/* Older/smaller phones (e.g. iPhone SE at 320px) still overflowed even
   with the tier above -- squeeze harder: drop the tagline (it's dead
   weight once the logo itself is already this small) and shave a little
   more off the link padding and gap. */
@media (max-width: 340px) {
  .site-logo {
    font-size: 12px;
  }

  .site-logo .site-tagline {
    display: none;
  }

  .site-nav {
    gap: 0;
  }

  .site-nav a {
    padding: 4px 3px;
    font-size: 8.5px;
  }
}

/* Breadcrumb trail for pages nested under a section (e.g. topical/*).
   Rendered via include/breadcrumb.html, which a page opts into by
   setting `breadcrumbs` before including it. Deliberately low-contrast
   and placed on the navy field itself rather than inside .content-box --
   it must never compete with .page-title for attention, only be there
   for a reader who's specifically looking for it. Scoped to the `nav`
   tag -- include/breadcrumb.html always renders a <nav>, never a <ul> --
   specifically so this never collides with the older, differently-shaped
   ul.breadcrumb (a plain slash-separated <li> list, see above) despite
   the shared class name. */
nav.breadcrumb {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: #f2f2f6;
  padding: 4px 10px 5px;
  font-family: verdana, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.02em;
  color: #7a7f99;
}

nav.breadcrumb a {
  color: rgb(27, 7, 126);
  text-decoration: none;
}

nav.breadcrumb a:hover,
nav.breadcrumb a:focus {
  color: #b20000;
  text-decoration: underline;
}

nav.breadcrumb .breadcrumb-current {
  color: #b20000;
  font-weight: bold;
}

nav.breadcrumb .breadcrumb-sep {
  margin: 0 0.35em;
  color: #c2c2d0;
}

.content-box {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}

/* Some legacy images are wider than the 600px box (e.g. gospel/images/
   isa592.jpg at 605px) even without an explicit width/height attribute
   forcing it -- never let an image push the box wider than its content
   area, regardless of the image's native size or any hardcoded
   width/height attributes. */
.content-box img {
  max-width: 100%;
  height: auto;
}

/* Same problem, but for legacy <table width="NNN"> attributes (e.g.
   misc/index.html's width="590") -- never let a hardcoded table width
   push the box wider than its content area. */
.content-box table {
  max-width: 100%;
  box-sizing: border-box;
}

/* Page title. Replaces <font face="Vivaldi" size="+10">, which never
   actually renders as Vivaldi (a Windows-only font) — every page was
   already falling back to serif, just at inconsistent sizes. */
.page-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
  font-weight: normal;
  margin: 0 0 0.5em;
}

/* Optional modifier for a page-title that wants more presence than the
   plain default -- italic, and a short accent rule instead of relying
   on size alone. Opt in per-page with class="page-title page-title--accent". */
.page-title--accent {
  font-style: italic;
}

.page-title--accent::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  margin-top: 0.15em;
  background: #b20000;
}

/* Optional second modifier for a page-title--accent title that's
   unusually long (e.g. two stacked questions joined by <br>) -- the
   default 2.5rem size makes those wrap to 3-4 lines and dominate the
   page before any content appears. Combine as class="page-title
   page-title--accent page-title--compact". */
.page-title--compact {
  font-size: 1.6rem;
}

/* On phone-width screens, shrink the plain 2.5rem page-title -- it eats
   too much of the viewport on mobile. Plain in-article <h1> sub-headings
   (e.g. gospel1.html's "God created man") aren't viewport-scaled and sit
   around 24px regardless, so shrinking only the title to that same range
   would flatten it to the same size as a section heading. Scale both down
   together instead, keeping the title clearly the bigger of the two. */
@media (max-width: 600px) {
  .page-title {
    font-size: 1.6rem;
  }

  .content-box h1:not(.page-title) {
    font-size: 1.2rem;
  }
}

/* Stacked scripture-quote cards, e.g. gospel/index.html's 4-verse list. */
.verse-cards {
  position: relative;
  background: #efefef;
  margin: 1em 0;
  padding: 10px;
}

/* One quiet ornamental quote mark for the whole card group, not one
   per card -- framing the group as "these are quotes" without
   repeating the mark down the left edge. */
.verse-cards::before,
.verse-cards::after {
  position: absolute;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.5rem;
  font-weight: bold;
  color: #b20000;
  opacity: 0.18;
  line-height: 1;
  pointer-events: none;
}

.verse-cards::before {
  content: "\201C";
  top: -0.2em;
  left: 0.2em;
}

.verse-cards::after {
  content: "\201D";
  top: calc(100% - 2.9rem);
  right: 0.2em;
}

.verse-card {
  text-align: center;
  padding: 15px 10px;
}

.verse-card .ref {
  display: block;
  font-size: 0.85em;
  font-style: italic;
  margin-top: 0.4em;
}

.verse-card .quote {
  display: inline-block;
  position: relative;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 1.4;
  /* explicit, not relying on :link -- .quote is a plain <span> on some
     pages (e.g. importance/index.html) and an <a> on others (gospel/
     index.html), and both need to read the same. */
  color: rgb(27, 7, 126);
}

/* The emphasized clause inside a pull-quote: bold and upright against
   the surrounding italic, instead of shouting in all caps. Tried brand
   red (#b20000) here too, but it clashed with the red in the header
   image right above -- plain bold reads clearly without the clash. */
.quote strong {
  font-style: normal;
}

/* Shaded box holding a list of link "buttons", e.g. importance/index.html. */
.link-list {
  background: #efefef;
  margin: 1em 0;
  padding: 5px 10px;
}

.link-list a {
  display: block;
  font-size: 16pt;
  padding: 8px 0;
  text-decoration: none;
}

/* topical/index.html's hub sections: a colored bar that expands a shaded
   body of block-style links, using native <details>/<summary> so it needs
   no JS. Collapsed by default -- with the hub now fully flat (9 sections,
   several 12-14 articles deep), showing everything expanded at once was
   a long wall of text; closed bars let a reader scan section titles first
   and open only what they want. A fragment link straight into a section
   (e.g. a page's breadcrumb, "/topical/index.html#church") still works:
   browsers auto-open a <details> when the jump target is inside it. */
.topic-section {
  margin: 0.6em 0 0;
  border: 1px solid #e2e2e6;
  border-left: 3px solid #1b077e;
  background: #fff;
}

/* Open state gets the brand red instead of navy -- a quiet way to see
   at a glance which section(s) are currently expanded. */
.topic-section[open] {
  border-left-color: #b20000;
}

.topic-section summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: #1b077e;
  font-weight: bold;
  font-size: 1.05rem;
  padding: 10px 16px;
  user-select: none;
}

.topic-section summary:hover,
.topic-section summary:focus-visible {
  background: #f7f7fa;
}

.topic-section summary::-webkit-details-marker { display: none; }

/* Title grows to fill the row, so the count + chevron group always lands
   in the same right-hand column regardless of how long the title is --
   with plain space-between across all three, the count's position shifted
   per row based on title length instead of lining up. */
.topic-section__title {
  flex: 1 1 auto;
}

.topic-section__count {
  flex: none;
  font-weight: normal;
  font-size: 0.7em;
  color: #767688;
  white-space: nowrap;
}

.topic-section summary::after {
  content: "\25BE";
  flex: none;
  font-size: 0.8em;
  color: #767688;
  transition: transform 0.15s ease;
}

.topic-section[open] summary::after {
  transform: rotate(180deg);
}

.topic-section__body {
  background: #f7f7fa;
  border-top: 1px solid #e2e2e6;
  padding: 14px 18px;
}

.topic-section__intro {
  margin: 0 0 0.8em;
}

/* Block-style link rows inside a .topic-section__body -- replaces the
   old bulleted <ul> with a cleaner, denser list matching the site's
   existing .link-list "button list" idiom (see importance/index.html). */
.topic-links a {
  display: block;
  padding: 9px 4px;
  font-size: 16px;
  text-decoration: none;
  border-top: 1px solid #dcdce2;
}

.topic-links a:first-child { border-top: none; }

.topic-links a:hover,
.topic-links a:focus-visible {
  text-decoration: underline;
  background: #eeeef3;
}

/* A .verse-cards quote nested inside .topic-section__body (Elementary
   Principles) already sits on the section's own shaded backdrop, so
   don't add a second, different-shade box on top of it -- keep only the
   positioning context for the bookend quote marks. Left-align instead of
   centering, since this reads as a normal paragraph of prose with inline
   links, not a short centered pull-quote. Restore the underline .quote's
   links would otherwise lack, since they'd match the surrounding text
   color exactly and be impossible to pick out. */
.topic-section__body .verse-cards { background: none; padding: 0; margin: 0 0 0.8em; }
.topic-section__body .verse-card { text-align: left; padding: 0; }
.topic-section__body .verse-card .quote a { text-decoration: underline; }

/* One-link "hub" sections (End Times, Sovereignty) skip the accordion --
   a single article doesn't need an expand step, so the whole bar is
   itself the link straight to that section's overview page. Same quiet
   card styling as .topic-section's summary bar, for visual consistency. */
.topic-hub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  margin: 0.6em 0 0;
  padding: 10px 16px;
  border: 1px solid #e2e2e6;
  border-left: 3px solid #1b077e;
  background: #fff;
  color: #1b077e;
  font-weight: bold;
  font-size: 1.05rem;
  text-decoration: none;
}

.topic-hub-link:hover,
.topic-hub-link:focus-visible {
  background: #f7f7fa;
  text-decoration: underline;
}

.topic-hub-link::after {
  content: "\2192";
  font-weight: normal;
  color: #767688;
}

/* Clean, striped reference table — replaces bare <table border="1">
   layouts (e.g. gospel/MessiahProphecies.html's OT/NT prophecy list). */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 10pt;
}

.data-table th {
  background: #1b077e;
  color: #fff;
  font-weight: bold;
  text-align: left;
  padding: 8px 10px;
}

.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

.data-table tr:nth-child(even) td {
  background: #f2f2f2;
}

/* Plain divided list of article links -- replaces bullet/underline
   clutter on "Related articles" style sections, e.g. gospel/index.html. */
.article-list {
  list-style: none;
  margin: 0.5em 0;
  padding: 0;
}

.article-list li { border-bottom: 1px solid #eee; }
.article-list li:last-child { border-bottom: none; }

.article-list a {
  display: block;
  padding: 0.65em 0.2em;
  text-decoration: none;
  color: rgb(27, 7, 126);
}

.article-list a:hover { text-decoration: underline; }

/* "You are here" row in a .article-list, e.g.
   include/gospel-related-articles.html's current-page item -- no <a>,
   so it wouldn't otherwise get .article-list a's padding/display, and
   would sit at a different height than its linked siblings. Bold and
   muted rather than link-indigo, so it reads as "this one" and not as
   another clickable link. */
.article-list .current {
  display: block;
  padding: 0.65em 0.2em;
  font-weight: bold;
  color: #333;
}

/* "Show more articles" disclosure -- native <details>, no JS. */
.article-list-more summary {
  cursor: pointer;
  padding: 0.65em 0.2em;
  color: rgb(27, 7, 126);
  list-style: none;
}

.article-list-more summary::-webkit-details-marker { display: none; }

.article-list-more summary::before {
  content: "+ ";
  font-weight: bold;
}

.article-list-more[open] summary::before { content: "\2212 "; }

.article-list-more .article-list { margin-top: 0; }

/* Link + trailing description on the same line, description flush right
   -- opt in per list with class="article-list article-list--annotated"
   (e.g. misc/creation/links.html, where each entry names a site and adds
   a short note about it). Wraps to its own line on narrow viewports since
   .article-list a keeps its block padding as a flex item, not a
   full-width block. */
.article-list--annotated li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 1em;
}

.article-list--annotated .note {
  padding: 0.65em 0.2em;
  color: #555;
  font-style: italic;
  text-align: right;
}

/* "Read a sample paraphrase" disclosure -- native <details>, no JS.
   Lives inside a bold/navy/centered .scripture block, so reset the
   summary back to a plain link look and the revealed text back to
   plain left-aligned prose. */
.paraphrase-toggle summary {
  cursor: pointer;
  color: blue;
  font-style: normal;
  font-weight: normal;
  text-decoration: underline;
  list-style: none;
}

.paraphrase-toggle summary::-webkit-details-marker { display: none; }

.paraphrase-toggle summary::before {
  content: "+ ";
  font-weight: bold;
  text-decoration: none;
}

.paraphrase-toggle[open] summary::before { content: "\2212 "; }

.paraphrase-toggle .paraphrase-text {
  font-style: normal;
  font-weight: normal;
  color: #000;
  text-align: left;
  margin-top: 0.5em;
}

/* Collapsed "..." mid-quote in a long scripture blockquote, e.g.
   tithing.html's Numbers 18:24-27 -- native <details>, no JS. Unlike
   .paraphrase-toggle, this doesn't reset font-style/color: the
   collapsed marker and revealed text both stay inline and inherit
   the surrounding blockquote.scripture italic/navy styling, since
   it's the same quote, just collapsed rather than a separate
   paraphrase. */
.scripture-more {
  display: inline;
}

.scripture-more summary {
  cursor: pointer;
  list-style: none;
  display: inline;
}

.scripture-more summary::-webkit-details-marker { display: none; }

.scripture-more summary::before {
  content: "+ ";
  font-weight: bold;
}

.scripture-more[open] summary::before { content: "\2212 "; }

/* Word-study reference list, e.g. misc/creation/scriptures.html's "mar
   10:6 | But from the beginning of the creation..." -- was a <pre>
   block before, which doesn't wrap and forced the page wider than its
   fixed-width viewport. A fluid two-column table reflows instead. */
.concordance {
  width: 100%;
  border-collapse: collapse;
}

.concordance td {
  vertical-align: top;
  padding: 2px 6px 2px 0;
  font-size: 0.9em;
}

.concordance td:first-child {
  white-space: nowrap;
  font-family: monospace;
  color: #666;
}

/* Boxed invitation for high-traffic reference/utility pages that many
   visitors land on directly from search (e.g. misc/Resources/abbrevs.html)
   without ever seeing the homepage. Usage: a <div class="welcome-callout">
   with an <h2>, an intro <p>, an optional <p class="callout-primary"> for
   the single most important link, and a <ul class="article-list"> for
   secondary links. */
.welcome-callout {
  background: #efefef;
  border-radius: 4px;
  padding: 1.2em 1.5em;
  margin: 1.5em 0;
}

.welcome-callout h2 { margin-top: 0; }

/* The one link in a .welcome-callout that should stand out above the
   rest -- same bold + accent-bar treatment as the homepage's "Gospel of
   Christ" link, so the two reinforce each other. */
.callout-primary {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0.3em;
}

.callout-primary a { text-decoration: none; }

.callout-primary::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  margin-top: 0.2em;
  background: #b20000;
}

/* Side-by-side reference tables, e.g. misc/Resources/abbrevs.html's
   Old Testament / New Testament book-code lists. Usage: a
   <div class="abbrev-columns"> wrapping one <div> per column, each with
   its own heading and <table class="data-table">. Wraps to stacked
   columns on narrow viewports. */
.abbrev-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2em;
}

.abbrev-columns > div {
  flex: 1 1 250px;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.site-footer__translate { text-align: right; }