/* Paul's missionary journeys: a full-screen viewer that opens from the article "Facts about Paul in the Bible".
   Built from the frame of the live Ararat viewer (layout A, the owner's pick of 17 Oct 2026: the land fills the screen,
   the place's words sit beneath it), with the brand type of 5 Nov 2026: GT Sectra for headings, GT Pantheon Text for
   reading and Scripture, GT Pantheon Micro for small text and labels. The fonts load from the site itself. */

@font-face { font-family: 'GT Pantheon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Pantheon-Text-Regular.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Pantheon-Text-Regular.woff2') format('woff2'); }
@font-face { font-family: 'GT Pantheon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Pantheon-Text-Regular-Italic.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Pantheon-Text-Regular-Italic.woff2') format('woff2'); }
@font-face { font-family: 'GT Pantheon Text'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Pantheon-Text-Medium.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Pantheon-Text-Medium.woff2') format('woff2'); }
@font-face { font-family: 'GT Pantheon Micro'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Pantheon-Micro-Regular.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Pantheon-Micro-Regular.woff2') format('woff2'); }
@font-face { font-family: 'GT Pantheon Micro'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Pantheon-Micro-Medium.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Pantheon-Micro-Medium.woff2') format('woff2'); }
@font-face { font-family: 'GT Sectra'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Sectra-Regular.woff') format('woff'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Sectra-Regular.woff') format('woff'); }
@font-face { font-family: 'GT Sectra'; font-style: italic; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Sectra-Regular-Italic.woff') format('woff'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Sectra-Regular-Italic.woff') format('woff'); }

:root {
  --page: #fffbf9;
  --band: #f8f2e8;
  --ink: #002159;
  --text: #002b63;
  --muted: #56607a;
  --gold: #c58c23;
  --gold-ink: #8f6418;
  --line: #e6ded3;
  --focus: #0951b1;
  --paper: #efe5d3;
  --water: #3d6784;
  --sky-top: #e3e8ea;
  --sky-mid: #eceee9;
  --sky-low: #f6f0e5;
  --head-font: 'GT Sectra', Georgia, 'Times New Roman', serif;
  --body-font: 'GT Pantheon Text', Georgia, 'Times New Roman', serif;
  --label-font: 'GT Pantheon Micro', Georgia, 'Times New Roman', serif;
  --sea: #b4c6d3;
  --radius: 4px; /* the design system's button.radius: every control on the site has 4 px corners */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--text); }
body { font-family: var(--body-font); line-height: 1.4; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* The app: the header, the land, the bar. It fills the screen and never scrolls. */
.app { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; overflow: clip; }

.head {
  flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 4px 10px; padding-top: max(4px, env(safe-area-inset-top)); background: var(--page); border-bottom: 1px solid var(--line);
  position: relative; z-index: 20; min-height: 52px;
}
.back {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px; padding: 0 6px 0 2px;
  font: 400 16px/1 var(--body-font); color: var(--ink); text-decoration: none; white-space: nowrap;
}
.back-arrow { font: 400 30px/1 var(--body-font); margin-top: -3px; }
.back-word { display: none; }
.back-more { display: none; margin-left: 0.24em; }
.back:hover .back-word, .back:hover .back-more { text-decoration: underline; text-underline-offset: 3px; }
.head h1 {
  margin: 0; min-width: 0; text-align: center; text-wrap: balance;
  font: 400 18px/1.12 var(--head-font); letter-spacing: -0.01em; color: var(--ink);
}
.about-btn {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer;
  font: 400 16px/1 var(--body-font); color: var(--ink);
}
.about-btn:hover { border-color: var(--gold); }

.main { flex: 1 1 auto; min-height: 0; display: flex; position: relative; }
.view {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; overflow: clip;
  background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-low) 78%, #f8f2e8 100%);
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
#gl:active { cursor: grabbing; }
#gl:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }

/* Labels on the land: small on purpose, the one place small type belongs */
.pin { position: absolute; left: 0; top: 0; will-change: transform; }
.pin .dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px rgba(255, 251, 249, 0.92); }
.pin .stem { position: absolute; left: -0.5px; bottom: 4px; width: 1px; height: 18px; background: rgba(0, 33, 89, 0.5); }
.pin .tagbox {
  position: absolute; left: 0; bottom: 22px; transform: translateX(-50%); white-space: nowrap;
  font: 500 13px/1.2 var(--label-font); letter-spacing: 0.01em; color: var(--ink);
  background: rgba(255, 251, 249, 0.95); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px;
}
.pin .tagbox b { font-weight: 500; }
.pin .tagbox small { font-weight: 400; color: var(--muted); margin-left: 5px; font-variant-numeric: tabular-nums; }
.pin .tagbox .who { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: normal; max-width: 210px; }
.pin.pos-below .stem { bottom: auto; top: 4px; }
.pin.pos-below .tagbox { bottom: auto; top: 22px; }
.pin.pos-right .stem, .pin.pos-left .stem { display: none; }
.pin.pos-right .tagbox { bottom: auto; top: -12px; left: 11px; transform: none; }
.pin.pos-left .tagbox { bottom: auto; top: -12px; left: auto; right: 11px; transform: none; }
.corner {
  position: absolute; right: 12px; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 12px;
  font: 400 12.5px/1 var(--label-font); color: var(--muted); pointer-events: none;
  background: rgba(255, 251, 249, 0.86); padding: 5px 8px; border-radius: 5px;
}
.scale { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.scale-line { display: inline-block; height: 6px; border: 1.5px solid #7d8496; border-top: 0; width: 60px; }
.north { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 500; }
.north-arrow { display: inline-block; font-size: 13px; }
.view-note {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6; margin: 0; max-width: min(460px, calc(100% - 32px));
  background: rgba(0, 33, 89, 0.88); color: #fff; font: 400 14px/1.35 var(--body-font); padding: 7px 12px; border-radius: 6px; text-align: center; pointer-events: none;
}

.loading {
  position: absolute; inset: 0; display: grid; place-items: center; font: 400 17px var(--body-font);
  color: var(--muted); background: var(--paper); z-index: 20; transition: opacity 0.4s; padding: 0 24px; text-align: center;
}
.loading.done { opacity: 0; pointer-events: none; }


.card { position: relative; min-width: 0; }
.card p, .card blockquote { margin: 0; }
.card-body { margin-top: 6px; }
.card-body .q { font: italic 700 17px/1.34 var(--head-font); color: var(--ink); letter-spacing: -0.005em; }
.card-body .q cite { display: block; margin-top: 3px; font: 400 13.5px/1.3 var(--body-font); font-style: normal; color: var(--muted); }
.card-body .t { font: 400 15.5px/1.42 var(--body-font); color: var(--text); margin-top: 6px !important; }
.card-body .t:first-child { margin-top: 0 !important; }
.card-body .facts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 7px 0 0; padding: 0; list-style: none; font: 400 14px/1.35 var(--body-font); color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.card-body .facts li span { color: var(--muted); margin-right: 4px; }
.card-body .act { margin-top: 8px !important; }
.card-body .extra { padding-top: 10px; }
.card-body .pic { display: none; }
.btn {
  min-height: 44px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--line); display: inline-flex; align-items: center;
  background: #fff; font: 400 16px/1 var(--body-font); color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--gold); }
.btn.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* About this view */
dialog#about {
  width: min(720px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); background: var(--page); box-shadow: 0 10px 40px rgba(0, 33, 89, 0.2);
}
dialog#about::backdrop { background: rgba(0, 20, 50, 0.45); }
.about-head {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px 10px 24px; background: var(--page); border-bottom: 1px solid var(--line);
}
.about-head h2 { margin: 0; font: 400 24px/1.2 var(--head-font); color: var(--ink); letter-spacing: -0.01em; }
.about-body { padding: 4px 24px 28px; }
.about-body h3 { margin: 26px 0 8px; font: 400 21px/1.25 var(--head-font); color: var(--ink); }
.about-body h4 { margin: 18px 0 2px; font: 500 17px/1.3 var(--body-font); color: var(--ink); }
.about-body p, .about-body dd { font: 400 17px/1.5 var(--body-font); margin: 0 0 12px; }
.reading-sum { color: var(--muted); font-size: 16px !important; margin-bottom: 6px !important; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; font: 400 16px/1.4 var(--body-font); }
kbd {
  font: 500 13px/1 var(--label-font); min-width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0 5px;
  border: 1px solid #d9d1c6; border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--ink);
}
.sources, .more { padding-left: 20px; margin: 0; }
.sources li, .more li { font: 400 15.5px/1.45 var(--body-font); margin: 6px 0; overflow-wrap: anywhere; }
.more li { font-size: 16.5px; }

/* Hide (H): only the land, and one button to bring the rest back */
.show-ui { display: none; }
.hide-ui .head, .hide-ui .jwrap, .hide-ui .stepper, .hide-ui .card { display: none !important; }
.hide-ui .show-ui {
  display: block; position: absolute; right: 12px; top: 12px; z-index: 16; min-height: 44px; padding: 0 16px;
  border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255, 251, 249, 0.95); font: 400 16px var(--body-font); color: var(--ink); cursor: pointer;
}

/* ---------- phones ---------- */
@media (max-width: 899px) {
  .corner { flex-wrap: wrap; justify-content: flex-end; max-width: 150px; column-gap: 10px; row-gap: 4px; right: 8px; bottom: 8px; padding: 4px 7px; }
  .corner .north { flex-direction: row; gap: 2px; }
  dialog#about { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .about-head { padding: 6px 12px 6px 18px; padding-top: max(6px, env(safe-area-inset-top)); }
  .about-head h2 { font-size: 22px; }
  .about-body { padding: 2px 18px 28px; }
  .about-body p, .about-body dd { font-size: 16.5px; }
}
@media (max-width: 360px) { .head h1 { font-size: 16.5px; } }

/* ---------- laptops: the back link in words ---------- */
@media (min-width: 900px) {
  .head { padding: 6px 24px; grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); }
  .back { font-size: 17px; }
  .back-word, .back-more { display: inline; }
  .head h1 { font-size: 25px; white-space: nowrap; }
  .about-btn { justify-self: end; font-size: 17px; }
  .pin .tagbox { font-size: 14px; }
  .pin.candidate .tagbox b { font-size: 16.5px; }
  .card-body .q { font-size: 19px; }
  .card-body .t { font-size: 16px; }
  .corner { right: 20px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) { .loading { transition: none; } }


/* ---------- this viewer's own parts ---------- */
/* The journeys: four equal choices, a segmented control */
.journeys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; background: #fff; }
.journeys button {
  min-height: 40px; border: 0; border-radius: 2px; background: transparent; cursor: pointer; padding: 0 6px;
  font: 400 15px/1.1 var(--label-font); color: var(--ink); white-space: nowrap;
}
.journeys button .yrs { display: none; color: var(--muted); margin-left: 6px; font-size: 13px; }
.journeys button:hover { background: var(--band); }
.journeys button[aria-selected="true"] { background: var(--ink); color: #fff; }
.journeys button[aria-selected="true"] .yrs { color: #c9d3e6; }

/* the key in the corner: the line styles */
.key { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.key i { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--ink); }
.key i.k-sea { border-top-style: dashed; border-top-color: #2f5f86; }

/* labels on the map */
.pin .dot { background: #fff; border: 2px solid var(--ink); box-shadow: none; width: 9px; height: 9px; left: -4.5px; top: -4.5px; }
.pin.pass .dot { width: 6px; height: 6px; left: -3px; top: -3px; border-width: 1.5px; }
.pin.done .dot { background: var(--ink); }
.pin.active .dot { width: 14px; height: 14px; left: -7px; top: -7px; background: var(--gold); border: 3px solid var(--ink); box-shadow: 0 0 0 2px rgba(255, 251, 249, 0.92); }
.pin .tagbox { font: 500 13px/1.2 var(--label-font); }
.pin.pass .tagbox { font-weight: 400; color: var(--muted); background: rgba(255, 251, 249, 0.86); }
.pin.active .tagbox { font: 400 15px/1.15 var(--head-font); border-color: var(--ink); box-shadow: 0 1px 8px rgba(0, 33, 89, 0.18); }
.pin.region .dot, .pin.region .stem { display: none; }
.pin.region .tagbox { background: transparent; border: 0; padding: 0; color: #6b6150; font: italic 400 15px/1 var(--head-font); letter-spacing: 0.02em; text-shadow: 0 0 3px rgba(255, 251, 249, 0.95), 0 0 6px rgba(255, 251, 249, 0.8); transform: translate(-50%, 50%); bottom: 0; }
.pin.mover .dot { width: 12px; height: 12px; left: -6px; top: -6px; background: var(--gold); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--ink); }
.pin.mover .tagbox, .pin.mover .stem { display: none; }

/* the card: verse, note, leg facts, profile */
.card-body .q { font: italic 400 17px/1.38 var(--body-font); color: var(--ink); letter-spacing: 0; }
.card-body .q cite { font-family: var(--label-font); }
.card-body .leg { list-style: none; margin: 0; padding: 0; font: 400 14px/1.35 var(--label-font); color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.card-body .leg li { margin: 0 0 3px; }
.card-body .leg .from { color: var(--muted); }
.card-body .leg b { font-weight: 500; color: var(--ink); }
.card-body .leg .said { color: var(--ink); }
.card-body .prof { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.card-body .prof text { font: 400 11px var(--label-font); fill: var(--muted); font-variant-numeric: tabular-nums; }
.card-body .extra p, .card-body .extra blockquote { margin: 0 0 8px; font: 400 15px/1.45 var(--body-font); }
.card-body .extra h3 { margin: 6px 0 4px; font: 500 14px/1.3 var(--label-font); color: var(--muted); }
.card-body .extra .q { font-size: 16px; margin-bottom: 10px; }
.card-body .totals { font: 400 14px/1.4 var(--label-font); color: var(--muted); margin-top: 6px !important; }

@media (max-width: 899px) {
  .journeys button { font-size: 14.5px; min-height: 40px; }
  .corner .key { display: none; }
  .corner { max-width: none; }
}
@media (min-width: 900px) {
  .journeys button { font-size: 15.5px; }
  .journeys button .yrs { display: inline; }
}

/* stills for the article (?still=1): the map alone */
body.still .corner, body.still .show-ui, body.still .loading { display: none !important; }
body.still .head, body.still .jwrap, body.still .stepper, body.still .card { display: none !important; }
body.still .app { min-height: 0; }

/* ---------- the controls frame the land: the journeys above it, Back, the place and Next below it, the words after
   (owner's pick A, 7 Nov 2026; layouts B and C were dropped) ---------- */
.main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.main > * { grid-column: 1; }
.jwrap { grid-row: 1; background: var(--band); padding: 6px 12px; position: relative; z-index: 8; }
.view { grid-row: 2; }
.stepper { grid-row: 3; background: var(--band); padding: 6px 12px 8px; position: relative; z-index: 8; }
.journeys { max-width: 720px; margin: 0 auto; }

.step-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; max-width: 1100px; margin: 0 auto; }
.step {
  min-height: 48px; min-width: 48px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 400 16px/1.1 var(--body-font); color: var(--ink); white-space: nowrap;
}
.step .chev { font: 400 26px/1 var(--body-font); margin-top: -3px; }
.step.next { background: var(--ink); border-color: var(--ink); color: #fff; max-width: 42vw; border-radius: var(--radius); padding: 0 10px 0 16px; }
.step.next .step-word { display: flex; flex-direction: column; align-items: flex-start; text-align: left; white-space: normal; padding: 5px 0; }
.next-label { font: 400 12.5px/1.2 var(--label-font); color: #c9d3e6; }
.next-to { font: 400 16px/1.15 var(--body-font); }
.step.next.end .next-label { display: none; }
.step.prev { padding: 0; width: 48px; }
.step.prev .step-word { display: none; }
.step:hover { border-color: var(--gold); }
.step:disabled { opacity: 0.4; cursor: default; }
.here { min-width: 0; position: relative; padding-left: 25px; }
.here::before { content: ''; position: absolute; left: 2px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--ink); }
.here-name { margin: 0; font: 400 21px/1.15 var(--head-font); color: var(--ink); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.here-n { margin: 1px 0 0; font: 400 13.5px/1.25 var(--label-font); color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }

/* the words, after the controls: they scroll in their own band */
.card { flex: 0 0 auto; background: var(--page); border-top: 1px solid var(--line); }
.card-body { margin: 0; padding: 12px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); max-height: 30svh; overflow-y: auto; overscroll-behavior: contain; }
.legbox { margin-top: 8px; }
@media (max-width: 899px) {
  .here-name { font-size: 19px; }
  .card-body { max-height: 25svh; } /* the land stays the largest thing on a phone */
  .step-row { gap: 8px; }
  .step.prev { width: 44px; min-width: 44px; min-height: 44px; }
  .here-n { font-size: 13px; }
}
@media (min-width: 900px) {
  .jwrap { padding: 8px 28px; }
  .stepper { padding: 8px 28px 10px; }
  .step.prev { width: auto; padding: 0 16px 0 12px; }
  .step.prev .step-word { display: inline; }
  .step.next { max-width: none; padding: 0 14px 0 20px; }
  .step.next .step-word { flex-direction: row; align-items: baseline; gap: 0; padding: 0; white-space: nowrap; }
  .next-label { font: inherit; color: inherit; }
  .next-label::after { content: ':\00a0'; }
  .next-to { font: inherit; }
  .here-name { font-size: 24px; }
  .card-body { max-height: 212px; padding: 14px 28px 16px; display: grid; grid-template-columns: minmax(0, 760px) 260px; column-gap: 48px; justify-content: center; align-content: start; }
  .card-body > * { grid-column: 1; }
  .card-body > .legbox { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .card-body > .extra { grid-column: 1 / -1; max-width: 1068px; }
}

/* ---- The text under the map (reference.<lang>.html, added 8 Nov 2026): the page reads without the map. ---- */
html, body { height: auto; min-height: 100%; }
.head-end { display: flex; align-items: center; gap: 4px; justify-self: end; }
.text-btn { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.text-btn[hidden] { display: none; }
.t-long { display: none; }
@media (max-width: 899px) { .head-end .about-btn { padding: 0 10px; } }
@media (min-width: 900px) { .head-end { gap: 8px; } .t-long { display: inline; } .t-short { display: none; } }
.rp { background: var(--page); color: var(--text); padding: 56px 24px 72px; font: 400 18px/1.55 var(--body-font); }
.rp__in { max-width: 44rem; margin: 0 auto; }
.rp a { color: var(--ink); text-underline-offset: 0.2em; }
.rp__back { margin: 0 0 32px; font-size: 16px; }
.rp__h { margin: 56px 0 8px; font: 400 32px/1.15 var(--head-font); color: var(--ink); }
.rp__in > .rp__h:first-of-type { margin-top: 0; }
.rp__sh { margin: 32px 0 8px; font: 400 22px/1.25 var(--head-font); color: var(--ink); }
.rp__lede { margin: 0 0 32px; }
.rp p { margin: 0 0 12px; }
.rp__j { margin: 48px 0 0; }
.rp__jh { margin: 0; font: 400 26px/1.2 var(--head-font); color: var(--ink); }
.rp__meta { font-size: 16px; }
.rp__map { display: block; width: 100%; height: auto; border-radius: 4px; }
.rp__do { margin: 12px 0 0; }
.rp__btn { display: inline-block; font: 500 15px/1.2 var(--body-font); color: var(--ink); background: none; border: 1px solid currentColor; border-radius: 4px; padding: 10px 14px; cursor: pointer; text-decoration: none; }
.rp__dl { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.rp__stops { margin: 24px 0 0; padding: 0 0 0 1.6em; }
[dir="rtl"] .rp__stops { padding: 0 1.6em 0 0; }
.rp__stops li { margin: 0 0 14px; }
.rp__place { font-weight: 500; color: var(--ink); }
.rp__ref { font-size: 16px; }
.rp__note { margin: 2px 0 0 !important; }
.rp__verse { margin: 2px 0 0 !important; font-size: 16px; }
.rp__sources { margin: 0; padding: 0; list-style: none; font-size: 16px; }
.rp__sources li { margin: 0 0 8px; overflow-wrap: anywhere; }
.rp__muted { font-size: 16px; }
.rp__cite { overflow-wrap: anywhere; user-select: all; }
.rp__by { margin-top: 48px !important; font-size: 16px; }
@media (max-width: 640px) { .rp { padding: 40px 16px 56px; font-size: 17px; } .rp__h { font-size: 27px; } }

/* Printing: the text without the map; one journey on its own page when a journey's button was used. */
@media print {
  .app, dialog { display: none !important; }
  html, body { height: auto; background: #fff; }
  .rp { padding: 0; color: #000; font-size: 11pt; }
  .rp__in { max-width: none; }
  .rp__back, .rp__do, .rp__dl { display: none; }
  html[data-print] .rp__in > *:not(.is-print) { display: none !important; }
  html[data-print] .rp__j.is-print { margin: 0; }
  html[data-print] .rp__map { max-height: 9.5cm; width: auto; max-width: 100%; margin: 6pt 0; }
  html[data-print] .rp__verse { display: none; }
  html[data-print] .rp__stops { margin-top: 8pt; column-count: 2; column-gap: 14pt; font-size: 9pt; line-height: 1.25; }
  html[data-print] .rp__stops li { margin-bottom: 4pt; break-inside: avoid; }
  html[data-print] .rp__ref { font-size: 8.5pt; }
  html[data-print] .rp__j.is-print::after { content: "Free to copy for your church or class. Christian Pure, christianpure.com/pauls-missionary-journeys/"; display: block; margin-top: 8pt; font-size: 8pt; }
}