/* --- self-hosted type ------------------------------------------------------
   These used to come from fonts.googleapis.com on every page of every visit.
   That meant two external requests, a render-blocking stylesheet, and — because
   the link carried display=swap — the whole page painting in system-ui and then
   reflowing when Source Sans 3 arrived. That was the flash.

   Served from this origin now, so they arrive with everything else and the USB
   build gets real type instead of falling back to system fonts offline.

   display:swap is kept, but the two faces that paint first are preloaded in
   each page's <head>, so in practice the swap happens before anything is drawn.
   Weights are exactly what the site asks for and no more: a face nobody uses is
   bandwidth nobody needed.

   The italic is not decorative. The KJV shards mark translator-supplied words
   with <i>, which method.html describes as a feature; without a real italic the
   browser slants the roman and that rendering is visibly poorer. */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/source-sans-3-v20-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/source-sans-3-v20-latin-600.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/source-sans-3-v20-latin-700.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/source-sans-3-v20-latin-italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2')}

/*
  Incredible Answers  -  incredibleanswers.org
  Copyright (c) 2026 Incredible Answers Org. All rights reserved.

  This file, and the analysis and visualizations it produces, is the
  copyright and intellectual property of Incredible Answers Org. No part of it may
  be copied, redistributed, adapted or reused without written permission.

  Source data is credited on the method page and remains the property of its
  respective owners under its own license.
*/
/* Incredible Answers - shared styles.
   Colors live in the two :root blocks. Site chrome follows.
   Change something here and it changes on every page. */


:root{--paper:#FFFFFF;--band:#F1F3F5;--well:#E8ECF0;--ink:#1B2B3D;--ink-soft:#4A5A6B;--ink-faint:#78889A;--rule:#D8DEE4;--rule-soft:#E4E9ED;--brand:#173252;--brand-dk:#12283F;--link:#1A6E8C;--accent:#1A6E8C;--ot:#B87516;--nt:#1A6E8C;--under:#A9B7C4}

:root{--bg:#F1F3F5;--bg2:#FFFFFF;--line:#D8DEE4;--line2:#E4E9ED;--fg:#1B2B3D;--fg2:#4A5A6B;--fg3:#78889A;--ot:#B87516;--nt:#1A6E8C}


body{margin:0;background:var(--band);color:var(--ink);font-family:'Source Sans 3',system-ui,sans-serif;font-size:16px;line-height:1.6;font-variant-numeric:tabular-nums}


body{background:var(--band)}

.site{background:var(--brand)}

.site .in{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px}

.site a.mark{color:#fff;text-decoration:none;font-size:19px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}

.site a.mark .tail{font-weight:400;font-size:15px;color:rgba(255,255,255,.68);letter-spacing:0;white-space:nowrap}
.site a.mark .tail b{font-weight:400;color:var(--ot)}

.site .tools{display:flex;gap:16px}

.site .tools a{color:#fff;opacity:.8;text-decoration:none;font-size:14px}

.site .tools a:hover{opacity:1;text-decoration:underline}


.nav{background:var(--brand-dk);position:relative;z-index:40;overflow:visible}

.nav .in{max-width:1140px;margin:0 auto;padding:0 28px;display:flex;align-items:stretch;gap:2px}

.nav a.top,.nav button.top{background:none;border:0;font-family:inherit;font-size:15px;color:#C8D8E6;
 text-decoration:none;padding:12px 15px;cursor:pointer;display:flex;align-items:center;gap:7px;
 border-bottom:3px solid transparent;white-space:nowrap}

.nav .in>a.top:first-child{padding-left:0}

.nav a.top:hover,.nav button.top:hover{color:#fff;background:rgba(255,255,255,.08)}

.nav .cur{color:#fff;font-weight:700;border-bottom-color:#7FD4E8}

.nav a.top,.nav button.top{touch-action:manipulation}   /* one tap, no double-tap-zoom wait */
.nav button.top svg{width:9px;height:6px;opacity:.7;transition:transform .16s}

.nav button.top[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav button.top[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.08)}

.dd{position:relative;display:flex}

.dd .menu{position:absolute;top:100%;left:0;min-width:250px;background:#223B57;
 border:1px solid #3A5B7C;border-top:0;border-radius:0 0 6px 6px;
 box-shadow:0 14px 34px rgba(0,0,0,.42);display:none;padding:4px 0}

.dd .menu.on{display:block}

.dd .menu a{display:block;padding:10px 18px;color:#C2D4E4;text-decoration:none;font-size:14.5px}

.dd .menu a:hover,.dd .menu a:focus-visible{background:#2E5074;color:#fff;outline:none}

.dd .menu a.cur{color:#fff;font-weight:700;background:transparent;box-shadow:inset 3px 0 0 #7FD4E8}

.nav a:focus-visible,.nav button:focus-visible{outline:2px solid #7FD4E8;outline-offset:-2px}

.sheet{background:var(--paper);border:1px solid var(--rule);border-radius:4px;margin:24px auto 30px;max-width:1080px;padding:0 0 8px}

.foot{background:var(--brand);color:#fff;margin-top:8px}

.foot .in{max-width:1140px;margin:0 auto;padding:24px 24px 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:8px 22px}

.foot h4{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.65}

.foot a,.foot p{color:#fff;font-size:13.5px;line-height:1.6;text-decoration:none;display:block;opacity:.85;margin:0}

.foot a:hover{text-decoration:underline;opacity:1}


@media (max-width:720px){.wrap{padding:0 20px}.site .tools{display:none}}

/* --- shared chrome on a phone ----------------------------------------------
   The chart pages share these class names but define them in their own <style>
   blocks, which load after this file \u2014 so these are scoped through .sheet to
   win on specificity rather than source order.

   The 16px on form controls is not cosmetic: below that, iOS Safari zooms the
   whole page when a control is focused and does not zoom back out, which reads
   as the site breaking.

   overscroll-behavior on the chart stages stops a sideways swipe on a wide
   chart from triggering the browser's back gesture.

   overflow-y is declared, not left out. Setting overflow-x to anything other
   than visible forces the other axis to compute as auto, so a stage that only
   ever needed to scroll sideways grew a vertical scrollbar with nothing to
   scroll. Every rule in this project that sets one axis must set both. */
@media (max-width:760px){
  /* the search box sits in the masthead, outside .sheet, and is the control
     people reach for first \u2014 it needs the same treatment */
  .sheet select,.sheet input,.sheet textarea,.srch input{font-size:16px}
  .sheet .controls,.sheet .key,.sheet .legend{gap:10px 16px;font-size:14px}
  .sheet .legend{margin-left:0;width:100%}
  .sheet .stage{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain}
  .sheet .seg button{padding:9px 13px}
  .sheet table{font-size:13.5px}
}

/* --- navigation on a phone -------------------------------------------------
   Six top items need about 620px and a phone gives 390, so the row swipes
   sideways. flex-shrink:0 matters: without it the items squeeze to fit and
   there is nothing to scroll.

   The dropdowns are NOT clipped by that scroller, which is the part worth
   knowing. A scroll container only clips descendants whose containing block is
   inside it; .menu is positioned against .nav, an ancestor of .nav .in, so it
   escapes and still opens across the full width. Give .dd position:relative and
   that stops being true \u2014 the menus would be trapped in the scroller. */
@media (max-width:760px){
  .nav .in{flex-wrap:nowrap;overflow-x:auto;padding:0 14px;gap:0;
    scrollbar-width:none;overscroll-behavior-x:contain}
  .nav .in::-webkit-scrollbar{display:none}
  .nav a.top,.nav button.top{flex-shrink:0;font-size:14px;padding:11px 13px;letter-spacing:0}
  /* .dd is position:relative by default, which would make the scroller the
     menu's containing block and clip it. Static hands that job back to .nav. */
  .nav .dd{flex-shrink:0;position:static}
  .nav .in>a.top:first-child{padding-left:13px}
  /* Fixed to the screen, just under the nav (--nav-bottom, set by site.js when a
     menu opens). Safari on iPhone clipped the absolutely positioned menu inside
     the sideways-scrolling row even though its containing block is outside it,
     so a tap "did nothing" (Sept 2026). A fixed menu cannot be clipped by the
     row in any engine. */
  .dd .menu{position:fixed;top:var(--nav-bottom,108px);left:0;right:0;min-width:0;border-radius:0;
    max-height:min(64vh,420px);overflow-y:auto}
  .dd .menu a{padding:13px 18px;font-size:15px}
}


.srch{position:relative;flex:1;max-width:340px;margin-left:auto}

.srch input{width:100%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:5px;color:#fff;font-family:inherit;font-size:14.5px;padding:8px 12px;outline:none}

.srch input::placeholder{color:rgba(255,255,255,.5)}

.srch input:focus{border-color:var(--link);background:rgba(255,255,255,.14)}

.srch .res{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--paper);border:1px solid var(--rule);border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.45);max-height:340px;overflow-y:auto;z-index:50;display:none}

.srch .res.on{display:block}

.srch .res a{display:flex;justify-content:space-between;gap:12px;padding:9px 13px;text-decoration:none;color:var(--ink-soft);font-size:14.5px;border-bottom:1px solid var(--rule-soft)}

.srch .res a:last-child{border-bottom:0}

.srch .res a.sel,.srch .res a:hover{background:var(--well);color:var(--ink)}

.srch .res a span{color:var(--ink-faint);font-size:12.5px;flex-shrink:0}

.srch .res .none{padding:11px 13px;color:var(--ink-faint);font-size:14px}

@media (max-width:760px){.srch{max-width:none;margin:0}}


/* --- technical-document layer ------------------------------------------- */
:root{--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}


/* One page title for the whole site. Pages used to set this themselves and
   had drifted into four different treatments — one of which never set a
   weight, so it rendered thin. Do not override it per page. */
h1{margin:0 0 10px;font-size:clamp(21px,2.5vw,30px);line-height:1.2;
 font-weight:700;letter-spacing:-.02em}
/* The title names the page; it is not the page. One line, at a size that lets
   the chart or the tool be the first thing the eye lands on. The gold half runs
   on inline rather than dropping to a second line. */
h1 .alt{color:var(--ot);display:inline;margin-left:.32em}
h2 .alt{color:var(--ot);display:block}

/* Collapsed header. Added by site.js the moment a page records a choice, so
   the chart and the result move up the screen instead of sitting below an
   introduction the reader has finished with. Pick-a-Verse had this on its own;
   it now belongs to every page that records anything. */
/* Everything introductory goes together. The how-to disclosure is part of the
   introduction, so leaving it behind gave a collapsed header two things to
   open and no reason to prefer one. */
body.compact .lede,body.compact .how,body.compact .epi,body.compact .intro{display:none}
body.compact h1{font-size:clamp(19px,2.2vw,26px);margin-bottom:6px}
body.compact .masthead{padding-bottom:14px}
/* Sits beside the title so the way back to the introduction is where the
   introduction used to be. Opening it by hand holds it open: a later choice
   will not collapse the header again. */
.hdrmore{appearance:none;background:none;border:0;cursor:pointer;padding:0;
 margin:6px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--ink-faint);
 border-bottom:1px solid var(--rule-soft);line-height:1.6}
.hdrmore:hover{color:var(--link);border-bottom-color:var(--link)}
body.compact .hdrmore{display:inline-block;margin:0 0 0 14px;vertical-align:middle}
@media print{.hdrmore{display:none}}

.fig{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--ink-faint);margin:0 0 8px;display:flex;align-items:baseline;gap:10px}
.fig b{color:var(--ot);font-weight:400}
.figcap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);
 margin:10px 0 0;text-transform:uppercase}

.panel{position:relative;background:var(--paper);border:1px solid var(--rule);padding:18px 20px}
.panel::before,.panel::after{content:"";position:absolute;width:7px;height:7px;border:1px solid var(--ot);opacity:.7}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.band{background:var(--band);margin-left:-34px;margin-right:-34px;padding-left:34px;padding-right:34px}
@media (max-width:720px){.band{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}}

/* corner ticks on the existing card-like blocks */
.readout,.tile,.info,.find .cap{position:relative}
.readout::before,.info::before{content:"";position:absolute;top:-1px;left:-1px;width:7px;height:7px;
 border:1px solid var(--ot);border-right:0;border-bottom:0;opacity:.7}
.readout::after,.info::after{content:"";position:absolute;bottom:-1px;right:-1px;width:7px;height:7px;
 border:1px solid var(--ot);border-left:0;border-top:0;opacity:.7}


/* --- alternating feature blocks ----------------------------------------- */
.feat{border-top:1px solid var(--rule-soft);padding:32px 0}
.feat:first-of-type{border-top:0}
.feat .row{display:grid;grid-template-columns:1fr 1.2fr;gap:42px;align-items:center}
.feat.flip .row{grid-template-columns:1.15fr 1fr}
.feat.flip .txt{order:2}
.feat .num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--ot);margin:0 0 10px}
.feat h3{margin:0 0 8px;font-size:clamp(19px,1.9vw,23px);font-weight:700;letter-spacing:-.015em;line-height:1.18}
.feat h3 .alt{color:var(--ot);display:block}
.feat p{margin:0 0 11px;color:var(--ink-soft);font-size:14.8px;line-height:1.55;max-width:50ch}
.feat ul{margin:0 0 13px;padding:0;list-style:none}
.feat li{position:relative;padding-left:17px;font-size:14px;color:var(--ink-soft);line-height:1.45;margin-bottom:5px}
.feat li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--nt);opacity:.75}
.feat .go{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--link);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px}
.feat .go:hover{border-bottom-color:var(--link)}
.pnl{position:relative;border:1px solid var(--rule);background:var(--paper)}
.pnl .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--ink-faint);padding:9px 12px;border-bottom:1px solid var(--rule-soft);display:flex;justify-content:space-between;gap:12px}
.pnl .cap b{color:var(--ot);font-weight:400}
.pnl svg{display:block;width:100%;height:auto}
.pnl .foot{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);
 padding:8px 12px;border-top:1px solid var(--rule-soft)}
.pnl::before,.pnl::after{content:"";position:absolute;width:7px;height:7px;border:1px solid var(--ot);opacity:.7}
.pnl::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.pnl::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
@media (max-width:820px){
 .feat .row,.feat.flip .row{grid-template-columns:1fr;gap:26px}
 .feat.flip .txt{order:0}
}

/* --- reveal on scroll ---------------------------------------------------- */
/* The panels start 64px to one side, so until they land the page is genuinely
   wider than the screen and scrolls sideways a little. Clipped on the body \u2014
   with CLIP, not HIDDEN: hidden makes the body a scroll container and the
   sticky journey bar stops sticking. */
html,body{overflow-x:clip}
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.18,.72,.28,1),transform 1s cubic-bezier(.18,.72,.28,1)}
.rv.l{transform:translateX(-64px)}
.rv.r{transform:translateX(64px)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* 64px is a sixth of a phone's width, which reads as a lurch rather than a
   reveal. Vertical only down here. */
@media (max-width:760px){.rv.l,.rv.r{transform:translateY(26px)}}


.methodlink{padding:26px 0 6px}
.methodlink .note{max-width:70ch;color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0 0 12px}
.methodlink .go{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
 color:var(--link);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px}
.methodlink .go:hover{border-bottom-color:var(--link)}

@media (max-width:1040px){.site a.mark .tail{display:none}}

/* --- one bar: name | menu | search (14 Oct 2026) ------------------------------
   The menu sits inside the masthead row, so the chrome above the journey bar is
   one 62px row instead of two (108px). Where the three don't fit side by side
   (under 1100px) the menu drops to its own full-width row underneath, as before.
   --chrome-h is the height of this chrome, for pages that size a stage to the
   window. */
:root{--chrome-h:62px}
.site.one{position:relative;z-index:40}
.site.one>.in{max-width:1480px;padding:0 28px;gap:24px;justify-content:flex-start;align-items:stretch}
.site.one a.mark{flex:none}
.site.one .nav{background:none;display:flex;flex:0 1 auto;min-width:0;z-index:auto}
.site.one .nav .in{max-width:none;margin:0;padding:0;align-items:stretch;justify-content:flex-start;gap:0;flex-wrap:nowrap}
.site.one .nav a.top,.site.one .nav button.top{padding:0 14px}
.site.one .nav .in>a.top:first-child{padding-left:14px}
.site.one .srch{align-self:center;flex:0 1 320px;min-width:190px;margin-left:auto}
@media (max-width:1300px){.site.one a.mark .tail{display:none}}
@media (max-width:1099px){
  :root{--chrome-h:112px}
  .site.one>.in{flex-wrap:wrap;gap:0 20px;padding:0 24px}
  .site.one .nav .in{min-height:0}
  .site.one a.mark{min-height:62px}
  .site.one .nav{order:3;flex:1 0 100%;margin:0 -24px;padding:0 24px;background:var(--brand-dk)}
  .site.one .nav a.top,.site.one .nav button.top{padding:12px 15px}
  .site.one .nav .in>a.top:first-child{padding-left:0}
}
@media (max-width:760px){
  .site.one .nav{margin:0 -24px;padding:0}
  .site.one .nav a.top,.site.one .nav button.top{padding:11px 13px}
  .site.one .nav .in>a.top:first-child{padding-left:13px}
  /* The search shares the name's row on a phone (17 Oct 2026). A 160px basis plus the
     name was wider than a phone, so the box wrapped onto a line of its own and the chrome
     ran to three rows. A zero basis lets it take whatever the name leaves. */
  .site.one>.in{column-gap:14px}
  .site.one .srch{flex:1 1 0;min-width:0}
}
@media (max-width:400px){
  .site.one a.mark{font-size:17px}
  .site.one>.in{column-gap:10px;padding:0 16px}
  .site.one .nav{margin:0 -16px}
  .site.one .srch input{padding:7px 10px}
}
@media (max-width:720px){:root{--chrome-h:108px}}

/* --- session trail ------------------------------------------------------- */
/* The journey bar is permanent, so its height is a fixed quantity the rest of
   the site can subtract. Declared once here: change it and the home page hero
   compensates automatically instead of drifting out of step. */
:root{--trail-h:34px}

.trailbar{background:var(--well);border-bottom:1px solid var(--rule)}
.trailbar .in{max-width:1140px;margin:0 auto;padding:0 28px;min-height:calc(var(--trail-h) - 1px);
 display:flex;align-items:center;
 gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.trailbar .lb{color:var(--ink-faint);margin-right:4px}
.trailbar .trail-empty{color:var(--ink-faint);opacity:.8;white-space:nowrap}
/* Stops read as ink with a gold ball, as on the home page tour; the link shows
   itself on hover. The stop you are standing on carries a soft ring. */
.trailbar .tb-stop{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap}
.trailbar .tb-ball{display:inline-block;flex-shrink:0;width:7px;height:7px;border-radius:50%;background:#e9c46a}
.trailbar .tb-here .tb-ball{box-shadow:0 0 0 3px rgba(233,196,106,.28)}
.trailbar a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.trailbar a:hover{color:var(--ink);border-bottom-color:var(--ink-faint)}
.trailbar .sep{color:var(--ink-faint);opacity:.7;margin:0 2px}
.trailbar .now{color:var(--ink);font-weight:500}
.trailbar .grp{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap}
.trailbar .sep{flex-shrink:0}
.trailbar .gt{font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;
 background:none;border:0;color:var(--ink-soft);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:7px}
.trailbar .gt i{font-style:normal;background:var(--rule);color:var(--ink);border-radius:8px;padding:1px 6px;font-size:10px}
.trailbar .gt:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-faint)}
.trailbar .steps{display:none;align-items:center;gap:8px}
.trailbar .grp.open .steps{display:inline-flex}
.trailbar .grp.open .gt{color:var(--ink-faint)}
@media (max-width:620px){:root{--trail-h:30px} .trailbar .in{padding:0 20px;font-size:10px}}

/* --- journey call to action ---------------------------------------------- */
.jcta{margin:26px 0 0;border:1px solid var(--rule);border-left:3px solid var(--ot);background:var(--paper)}
.jcta .in{padding:16px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.jcta p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.55;max-width:58ch}
.jcta p b{color:var(--ink);font-weight:700}
.jcta .btn{margin-left:auto;white-space:nowrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
 text-transform:uppercase;color:#fff;background:var(--link);text-decoration:none;padding:9px 18px;border-radius:4px}
.jcta .btn:hover{filter:brightness(1.08)}
@media (max-width:620px){.jcta .btn{margin-left:0}}
@media print{.jcta{display:none!important}}

/* --- versification split --------------------------------------------------
   3 John 1:15 is the site's one verse without a King James number of its own.
   Both 1:14 and 1:15 show the King James verse entire; on 1:15 the words the
   other versification numbers separately are marked, and explained. */
.vsplit{background:rgba(184,117,22,.13);padding:2px 3px;
 -webkit-box-decoration-break:clone;box-decoration-break:clone}
.vsplitnote{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-faint);
 margin:10px 0 0;max-width:62ch}
.vsplitnote a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--rule)}
.vsplitnote a:hover{border-bottom-color:var(--link)}
/* On paper the link cannot be followed, so journey.html carries the whole
   explanation inline and it must stay with the verse. */
@media print{
  .vsplit{background:none;box-shadow:none;padding:0;border-bottom:1px solid #999}
/* in place of a verse a translation keeps in a footnote (the BSB, 17 Oct 2026) */
.vnote{font-style:italic;opacity:.7;font-size:.9em}
  .vsplitnote{display:block;color:#444;font-size:9.5px;margin-top:6px;
   break-inside:avoid;page-break-inside:avoid}
}

/* --- journey bar, pinned --------------------------------------------------
   The bar scrolls up with the header, then pins to the top so the path stays
   in reach while reading a long page. It sits above the panels but below the
   nav dropdowns, which open over it. */
.trailbar{position:sticky;top:0;z-index:35;
 box-shadow:0 1px 0 rgba(27,43,61,.06),0 4px 12px rgba(27,43,61,.05)}
/* One line, always. A long journey scrolls sideways rather than wrapping into
   a bar that is only tall enough for one row \u2014 wrapping left a stop stranded
   below the others with a gap where it should have been. */
.trailbar .in{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
 -webkit-overflow-scrolling:touch}
.trailbar .in::-webkit-scrollbar{display:none}
.trailbar .lb{flex-shrink:0}
.trailbar .now,.trailbar a,.trailbar .gt{white-space:nowrap}
@media print{.trailbar{position:static}.trailbar.blank{display:none}}

/* --- translation bar -------------------------------------------------------
   Sits directly under the page title, above the More-about control. Low
   profile on purpose: it is a property of the page, not a headline feature,
   and on most visits the reader will leave it alone. */
.trbar{display:flex;align-items:center;gap:8px;margin:10px 0 0;flex-wrap:wrap}
.trbar .trlab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.trbar button{appearance:none;background:none;border:1px solid var(--rule);border-radius:4px;
  padding:3px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);cursor:pointer}
.trbar button:hover{border-color:var(--link);color:var(--link)}
.trbar button[aria-pressed="true"]{border-color:var(--ot);color:var(--ot);background:var(--band);font-weight:700}
/* The attribution that follows every reference. A link when the license asks
   for one, plain text when it does not — but always present, so no quotation
   is ever shown without naming its translation. */
.trtag{font-family:var(--mono);font-size:.82em;letter-spacing:.08em;color:var(--ink-faint);
  margin-left:6px;text-decoration:none;border-bottom:1px solid transparent}
a.trtag{color:var(--link);border-bottom-color:var(--rule)}
a.trtag:hover{border-bottom-color:var(--link)}
.trnote{margin:10px 0 0;font-size:13.5px;color:var(--ot);max-width:60ch}

/* Segmented buttons, shared. These lived only in phrases.html, so the year
   buttons on phrase-places.html rendered as bare browser buttons. */
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.seg button{appearance:none;background:var(--paper);border:0;border-right:1px solid var(--rule);font-family:inherit;font-size:13.5px;padding:7px 13px;cursor:pointer;color:var(--ink-soft)}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--well)}
.seg button[aria-pressed="true"]{background:var(--brand);color:#fff;font-weight:600}
.seg button:focus-visible{outline:2px solid var(--link);outline-offset:-2px}

/* --- reserving space for the injected chrome --------------------------------
   site.js injects the masthead, nav and translation bar on DOMContentLoaded,
   which is after first paint. Until this was added, the page painted with an
   empty [data-site-header] and then roughly 133px of chrome appeared and shoved
   everything down — the flash of a "preload" page settling into place.

   Nothing here changes what is injected or when. It only shapes the hole first,
   so the chrome lands in space already set aside and nothing moves. The heights
   are the computed heights of what arrives: 62px masthead (.site .in has
   min-height:62px), ~46px of nav row (12px padding either side of a 15px line),
   and ~29px of translation bar.

   If any of those three change height, these numbers must follow, or the gap
   will be wrong in the other direction and leave a visible band. */
[data-site-header]{min-height:62px}           /* one 62px row: name, menu, search */
.has-trail [data-site-header]{min-height:96px}    /* plus the 34px trail bar */
@media (max-width:1099px){
  [data-site-header]{min-height:112px}          /* the menu on its own ~50px row */
  .has-trail [data-site-header]{min-height:146px}
}
.masthead .trbar{min-height:25px}

@media (max-width:720px){
  /* Shorter here: 14px nav font with 11px padding, and --trail-h drops to 30. */
  [data-site-header]{min-height:108px}
  .has-trail [data-site-header]{min-height:138px}
}
/* Back to the Chapter Atlas: a pill at the left edge, just above eye level, on
   a reading page reached from the Atlas */
.atlasback{position:fixed;left:14px;top:38vh;z-index:45;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border-radius:999px;
 background:var(--brand);color:#fff;text-decoration:none;font-size:13px;line-height:1.2;box-shadow:0 6px 18px rgba(18,40,63,.28);border:1px solid rgba(233,196,106,.55)}
.atlasback b{font-weight:600;color:#f3d98a}
.atlasback .ab-ar{color:#e9c46a;font-size:12px}
.atlasback:hover,.atlasback:focus-visible{background:var(--brand-dk);outline:none;border-color:#e9c46a}
/* where the margin is narrow, a short tab at the edge that opens on hover */
@media (max-width:1499px){.atlasback{left:0;border-radius:0 999px 999px 0;border-left:0;padding:8px 12px 8px 9px;font-size:12px}
 .atlasback .ab-tx{display:none}.atlasback::after{content:attr(data-short);font-family:var(--mono,monospace);letter-spacing:.08em;font-size:11px}
 .atlasback:hover .ab-tx,.atlasback:focus-visible .ab-tx{display:inline}.atlasback:hover::after,.atlasback:focus-visible::after{content:none}}
@media (max-width:760px){.atlasback{top:40vh}}
/* short windows: below the stages' top-left controls (Watch the intro, Continue) */
@media (min-width:761px) and (max-height:760px){.atlasback{top:auto;bottom:20vh}}
/* the pill can be dragged out of the way: it settles at the nearer side, at the
   height it was dropped, and stays there for the visit (site.js) */
.atlasback{touch-action:none;-webkit-user-select:none;user-select:none}
.atlasback.ab-right{left:auto;right:14px}
.atlasback.ab-moved{bottom:auto}
.atlasback.ab-drag{transition:none;box-shadow:0 12px 30px rgba(18,40,63,.45);opacity:.94;cursor:grabbing}
@media (max-width:1499px){.atlasback.ab-right{right:0;border-radius:999px 0 0 999px;border-left:1px solid rgba(233,196,106,.55);border-right:0;padding:8px 9px 8px 12px}}
@media print{.atlasback{display:none!important}}
/* the footer, one line: support, about, overview and the data's source */
.foot.slim .in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:16px 24px}
.foot.slim a{display:inline;font-size:13px}
.foot.slim .sep{opacity:.45}
.foot.slim .cr{margin-left:auto;font-size:12px;opacity:.6}
@media (max-width:600px){.foot.slim .cr{margin-left:0;width:100%}}

/* story mode's full-screen tip (IA.fsTip in site.js) */
#fsTip{position:fixed;top:78px;right:24px;z-index:90;display:flex;align-items:center;gap:10px;max-width:min(440px,calc(100% - 48px));padding:9px 10px 9px 14px;border-radius:999px;
 background:rgba(5,8,15,.94);border:1px solid rgba(233,196,106,.55);box-shadow:0 10px 26px rgba(0,0,0,.45);color:#e8e2d0;font-size:13.5px;line-height:1.35;
 opacity:0;transform:translateY(-6px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
#fsTip.bl{top:auto;right:auto;left:24px;bottom:24px;transform:translateY(6px)}
#fsTip.on{opacity:1;transform:none;pointer-events:auto}
#fsTip b{flex:none;font-family:var(--mono,monospace);font-weight:500;font-size:10.5px;letter-spacing:.16em;color:#e9c46a}
#fsTip kbd{font-family:var(--mono,monospace);font-size:11.5px;padding:1px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff}
#fsTip button{flex:none;appearance:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#b9c9d8;cursor:pointer;font-size:14px;line-height:1}
#fsTip button:hover{color:#fff;border-color:#e9c46a}

/* the ⋮ menu in story mode, and the note on watching on a TV (site.js) */
#iaMore{position:fixed;z-index:95;min-width:230px;padding:6px 0;border-radius:10px;background:rgba(8,14,24,.97);border:1px solid rgba(233,196,106,.45);box-shadow:0 14px 34px rgba(0,0,0,.55)}
#iaMore button{display:flex;align-items:center;gap:10px;width:100%;appearance:none;background:none;border:0;padding:10px 16px;text-align:left;cursor:pointer;
 font-family:var(--mono,monospace);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#dbe5ee}
#iaMore button:hover,#iaMore button:focus-visible{background:rgba(233,196,106,.14);color:#fff;outline:none}
#iaMore button i{font-style:normal;width:18px;text-align:center;color:#e9c46a}
#iaCastHelp{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:96;width:min(520px,calc(100% - 32px));padding:20px 22px 18px;border-radius:12px;
 background:rgba(8,14,24,.98);border:1px solid rgba(233,196,106,.5);box-shadow:0 20px 50px rgba(0,0,0,.6);color:#dbe5ee;font-size:14.5px;line-height:1.5}
#iaCastHelp h3{margin:0 0 10px;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#f3e7c9}
#iaCastHelp ul{margin:0 0 10px;padding-left:18px}#iaCastHelp li{margin:0 0 8px}
#iaCastHelp p{margin:0 0 14px;color:#b9c9d8;font-size:13.5px}
#iaCastHelp button{appearance:none;cursor:pointer;padding:9px 18px;border-radius:6px;border:1px solid #e9c46a;background:rgba(40,30,8,.85);color:#f3e7c9;font-family:var(--mono,monospace);letter-spacing:.14em}

/* the demos' sound cue (site.js demoCue): a large Sound on button that pulses,
   then glides onto the real Sound button, which flashes; then the ⋮ menu shows */
#iaCue{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);z-index:130;display:flex;flex-direction:column;align-items:center;gap:2px;
  appearance:none;cursor:pointer;padding:16px 30px 12px;border-radius:999px;border:1.5px solid #e9c46a;background:rgba(18,28,44,.94);color:#ffe7ad;
  font-family:var(--mono,monospace);font-size:18px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 0 0 rgba(233,196,106,.6),0 18px 40px rgba(0,0,0,.55);
  animation:iaCuePulse 1s ease-in-out infinite alternate}
#iaCue .n{font-size:22px;letter-spacing:0}
#iaCue small{font-size:10px;letter-spacing:.16em;color:#c9d6e2;text-transform:uppercase}
#iaCue:hover,#iaCue:focus-visible{background:#b8892a;color:#fff;outline:none}
#iaCue.glide{animation:none;transition:transform .9s cubic-bezier(.55,0,.25,1),opacity .9s ease;opacity:.35}
#iaCue.fade,#iaCue.chose{animation:none;transition:opacity .5s ease,transform .5s ease;opacity:0}
#iaCue.chose{transform:translate(-50%,-50%) scale(1.12)}
#iaCue.still{animation:none}
@keyframes iaCuePulse{from{box-shadow:0 0 0 0 rgba(233,196,106,.55),0 18px 40px rgba(0,0,0,.55);transform:translate(-50%,-50%) scale(1)}
  to{box-shadow:0 0 0 14px rgba(233,196,106,0),0 18px 40px rgba(0,0,0,.55);transform:translate(-50%,-50%) scale(1.06)}}
.ia-cue{animation:iaCueFlash .9s ease 2}
@keyframes iaCueFlash{0%,100%{box-shadow:0 0 0 0 rgba(233,196,106,0)}40%{box-shadow:0 0 0 4px rgba(233,196,106,.85),0 0 22px rgba(233,196,106,.6);border-color:#e9c46a!important;color:#ffe7ad!important}}
#iaMore.ia-cued{animation:iaCueFlash .9s ease 1}
@media (max-width:760px){#iaCue{font-size:15px;padding:14px 24px 10px}}
@media (prefers-reduced-motion:reduce){#iaCue,.ia-cue,#iaMore.ia-cued{animation:none}}