/* Who has searched for Noah's ark? Full-screen viewer, version 2 (17 October 2026).
   The map takes the screen; the search you are on and the line of time sit under it. */

@font-face { font-family: 'Tiempos Headline'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/TiemposHeadline-Regular.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/TiemposHeadline-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Tiempos Headline'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/TiemposHeadline-Medium.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/TiemposHeadline-Medium.woff2') format('woff2'); }
@font-face { font-family: 'FK Roman Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/FKRomanText-Regular.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/FKRomanText-Regular.woff2') format('woff2'); }
@font-face { font-family: 'FK Roman Text'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/FKRomanText-Medium.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/FKRomanText-Medium.woff2') format('woff2'); }
@font-face { font-family: 'GT America LCG'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/GT-America-Condensed-Regular.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-America-Condensed-Regular.woff2') format('woff2'); }
@font-face { font-family: 'GT America LCG'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/GT-America-Condensed-Medium.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-America-Condensed-Medium.woff2') format('woff2'); }

:root {
  /* design system tokens (christianpure-design-system dist/css/christianpure/tokens.css) */
  --page: #fbf8f3;
  --band: #f8f2e8;
  --inset: #f5ede1;
  --raised: #ffffff;
  --ink: #002159;
  --muted: #67625d;
  --gold: #c58c23;
  --gold-ink: #9b6c20;
  --coral: #d8583f;
  --line: #e8e4df;
  --focus: #0951b1;
  /* the map */
  --water: #e3e8eb;
  --water-ink: #5a6b7a;
  --river: #a9bccb;
  --border: #9a8f84;
  --head-font: 'Tiempos Headline', Georgia, 'Times New Roman', serif;
  --body-font: 'FK Roman Text', Georgia, 'Times New Roman', serif;
  --label-font: 'GT America LCG', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--ink); }
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; cursor: pointer; }
[hidden] { display: none !important; }

.app { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; overflow: clip; }

/* Header: where you came from, where you are, About */
.head {
  flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 6px 14px; padding-top: max(6px, env(safe-area-inset-top)); background: var(--page); border-bottom: 1px solid var(--line);
  position: relative; z-index: 20;
}
.head h1 { margin: 0; font-family: var(--head-font); font-weight: 400; font-size: 25px; line-height: 1.15; text-align: center; letter-spacing: -0.005em; }
.back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px 0 2px; font-size: 18px; text-decoration: none; }
.back-arrow { font-size: 28px; line-height: 1; margin-top: -3px; }
.about-btn { justify-self: end; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); font-size: 18px; }

/* The map */
.view { flex: 1 1 auto; position: relative; min-height: 0; background: var(--water); overflow: hidden; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.m-land { fill: var(--inset); }
.m-lake { fill: var(--water); stroke: #c3cfd8; stroke-width: .8; vector-effect: non-scaling-stroke; }
.m-river { fill: none; stroke: var(--river); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.m-border { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; opacity: .7; }
.m-coast { fill: none; stroke: #b9c6d1; stroke-width: .8; vector-effect: non-scaling-stroke; }
.loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-family: var(--label-font); font-size: 17px; color: var(--muted); }
.app[data-ready="true"] .loading { display: none; }

/* Everything drawn over the map, in screen pixels */
.marks { position: absolute; inset: 0; pointer-events: none; }
.marks svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-dot { fill: var(--ink); stroke: var(--raised); stroke-width: 2; }
.pl-dot.quiet { fill: var(--muted); stroke-width: 1.5; }
.pl-peak { fill: var(--ink); }
.pl-peak.quiet { fill: var(--muted); }
.pl-ring { fill: rgba(0, 33, 89, .06); stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; }
.pl-ring.open { stroke: var(--gold); fill: rgba(197, 140, 35, .08); }
.pl-ring.cur { stroke: var(--coral); stroke-width: 2.4; stroke-dasharray: none; fill: none; }
.pl-link { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 1 5; stroke-linecap: round; }
.pl-leader { stroke: var(--ink); stroke-width: 1.2; }
.pl-leader.quiet { stroke: var(--muted); opacity: .6; }

.name { position: absolute; transform: translate(0, -50%); white-space: nowrap; font-family: var(--label-font); font-size: 15px; line-height: 1.1; color: var(--ink);
  text-shadow: 0 0 3px var(--page), 0 0 3px var(--page), 0 0 6px var(--page); }
.name small { display: block; font-size: 13px; color: var(--muted); }
.name.end { transform: translate(-100%, -50%); text-align: right; }
.name.mid { transform: translate(-50%, -50%); text-align: center; }
.name.water { font-family: var(--body-font); font-style: italic; color: var(--water-ink); font-size: 14px; text-shadow: 0 0 3px var(--water), 0 0 3px var(--water); }
.name.country { font-family: var(--label-font); font-size: 15px; letter-spacing: .14em; color: var(--muted); }
.name.big { font-size: 17px; }
.name.quiet { color: var(--muted); font-size: 14px; }
.name.big small { font-size: 14px; }

/* A search on the map: its years and what came of it (designs B and C) */
.tag {
  position: absolute; pointer-events: auto; display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  min-height: 30px; padding: 4px 10px; border: 1px solid #d9d2c8; border-radius: 6px; background: var(--raised); color: var(--ink);
  font-family: var(--label-font); font-size: 15px; line-height: 1.2; box-shadow: 0 1px 2px rgba(0, 33, 89, .08);
}
.tag b { font-weight: 500; }
.tag .tw { color: var(--muted); }
.tag.open { border: 1.5px dashed var(--gold); background: var(--raised); }   /* white: the gold words reach 4.6:1 (4.4 on cream) */
.tag.open .tw { color: var(--gold-ink); }
.tag.cur { background: var(--ink); border-color: var(--ink); color: var(--raised); box-shadow: 0 2px 6px rgba(0, 33, 89, .25); }
.tag.cur .tw { color: #dbe6f6; }
.tag.cur.open { border: 1.5px dashed var(--gold); }
.stack-head { position: absolute; font-family: var(--label-font); font-size: 14px; color: var(--muted); white-space: nowrap; text-shadow: 0 0 3px var(--page), 0 0 3px var(--page); }

.corner { position: absolute; right: 12px; bottom: 10px; display: flex; align-items: flex-end; gap: 14px; font-family: var(--label-font); font-size: 13px; color: var(--muted); }
.scale { display: inline-flex; align-items: center; gap: 6px; }
.scale-line { display: inline-block; height: 6px; border: 1.5px solid var(--muted); border-top: 0; }
.north { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }

/* The bar under the map */
.bar { flex: 0 0 auto; background: var(--page); border-top: 1px solid var(--line); padding: 12px 20px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.rec { max-width: 1240px; }
.r-head { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.r-when { font-family: var(--head-font); font-size: 26px; line-height: 1.1; }
.r-place { font-family: var(--label-font); font-size: 16px; color: var(--muted); }
.r-open { font-family: var(--label-font); font-size: 15px; color: var(--gold-ink); border: 1.5px dashed var(--gold); border-radius: 999px; padding: 1px 10px; }
.r-pair { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4px 36px; }
.r-k { margin: 0 0 2px; font-family: var(--label-font); font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.r-t { margin: 0; font-family: var(--head-font); font-size: 21px; line-height: 1.25; }
.r-who { margin: 4px 0 0; font-size: 15px; line-height: 1.35; color: var(--muted); }
.r-more { margin: 6px 0 0; padding: 0; min-height: 32px; border: 0; background: none; font-family: var(--label-font); font-size: 16px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-align: left; }

.lab { display: inline-block; padding: 1px 7px; border-radius: 4px; font-family: var(--label-font); font-size: 13px; line-height: 1.35; }
.lab:empty { display: none; }
.lab-scripture { background: var(--ink); color: var(--raised); }
.lab-record { background: #e7ecf3; color: var(--ink); }
.lab-recon { background: #efe6d6; color: #5d4a2c; }
.lab-reading { background: #f7e3dd; color: #7d2f20; }

/* The line of time: a true scale above, the searches as buttons below */
.time { position: relative; margin-top: 10px; }
.axis { display: block; width: 100%; height: 42px; overflow: visible; }
.ax-line { stroke: #b9b1a6; stroke-width: 1.5; }
.ax-tick { stroke: #b9b1a6; stroke-width: 1; }
.ax-txt { font-family: var(--label-font); font-size: 13px; fill: var(--muted); }
.ax-break { stroke: var(--muted); stroke-width: 1.4; }
.ax-span { font-family: var(--label-font); font-size: 12px; fill: var(--muted); }
.ax-dot { fill: var(--ink); }
.ax-bar { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.ax-dot.open { fill: #fffaf0; stroke: var(--gold); stroke-width: 1.8; stroke-dasharray: 3 2; }
.ax-bar.open { stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 4 3; stroke-linecap: butt; }
.ax-cur { fill: none; stroke: var(--coral); stroke-width: 2.4; }
.leader { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leader line { stroke: var(--coral); stroke-width: 1.6; }

.controls { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.play, .step { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--raised); font-size: 26px; line-height: 1; display: grid; place-items: center; }
.play { background: var(--ink); border-color: var(--ink); }
.play-icon { width: 0; height: 0; border-left: 14px solid var(--raised); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.play[aria-pressed="true"] .play-icon { width: 13px; height: 16px; border: 0; margin: 0; background: linear-gradient(90deg, var(--raised) 0 4px, transparent 4px 9px, var(--raised) 9px 13px); }
.step:disabled { opacity: .35; cursor: default; }
.chips { flex: 1 1 auto; display: flex; gap: 6px; margin: 0; padding: 2px 2px 4px; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.chips::-webkit-scrollbar { display: none; }
.chips { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); padding-left: 10px; padding-right: 10px; }
.chip { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised);
  font-family: var(--label-font); font-size: 16px; font-weight: 500; white-space: nowrap; }
.chip.open { border: 1.5px dashed var(--gold); background: #fffaf0; }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--raised); }

/* Sheets: the full record, and About */
.sheet { width: min(760px, calc(100vw - 24px)); max-height: min(88svh, 900px); padding: 0; border: 0; border-radius: 10px; background: var(--page); color: var(--ink); box-shadow: 0 10px 40px rgba(0, 33, 89, .25); }
.sheet::backdrop { background: rgba(0, 20, 50, .35); }
.sheet-in { padding: 22px 26px 26px; overflow-y: auto; max-height: inherit; position: relative; }
.sheet h2 { margin: 0 0 12px; font-family: var(--head-font); font-weight: 400; font-size: 28px; line-height: 1.15; padding-right: 80px; }
.sheet h3 { margin: 20px 0 6px; font-family: var(--label-font); font-weight: 500; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.sheet h4 { margin: 16px 0 6px; font-family: var(--label-font); font-weight: 500; font-size: 16px; }
.sheet p, .sheet li, .sheet dd { font-size: 17px; line-height: 1.5; }
.sheet p { margin: 0 0 10px; }
.sheet-close { position: absolute; right: 16px; top: 16px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); font-family: var(--label-font); font-size: 16px; }
.s-when { margin: 0 0 4px; font-family: var(--label-font); font-size: 16px; color: var(--muted); padding-right: 80px; }
.s-who { color: var(--muted); }
.s-src { padding-left: 18px; }
.s-src li { font-size: 15px; margin-bottom: 6px; }
.reading { margin: 14px 0 0; padding: 10px 14px; background: var(--band); border-left: 3px solid var(--coral); }
.labels { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.labels dd { margin: 0; }
.latest { padding: 10px 14px; background: var(--band); border-left: 3px solid var(--gold); }
.tablewrap { overflow-x: auto; }
.sheet table { border-collapse: collapse; width: 100%; font-size: 15px; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.sheet th { font-family: var(--label-font); font-weight: 500; }
.sheet tr.open td { color: var(--gold-ink); }
.more { padding-left: 18px; }
.noscript { padding: 20px; }

/* Phones and narrow windows: the same order, re-stacked */
@media (max-width: 760px) {
  .head { padding: 4px 8px; padding-top: max(4px, env(safe-area-inset-top)); grid-template-columns: auto minmax(0, 1fr) auto; }
  .head h1 { font-size: 19px; }
  .back-more { display: none; }
  .back { font-size: 17px; }
  .about-btn { font-size: 17px; padding: 0 13px; }
  .bar { padding: 10px 14px 8px; }
  .r-when { font-size: 21px; }
  .r-place { font-size: 15px; }
  .r-pair { grid-template-columns: 1fr; gap: 8px; }
  .r-t { font-size: 18px; }
  .r-who { font-size: 14px; }
  .r-k { font-size: 14px; }
  .r-more { font-size: 15px; min-height: 30px; margin-top: 2px; }
  .time { margin-top: 6px; }
  .axis { height: 34px; }
  .play, .step { width: 42px; height: 42px; }
  .chip { font-size: 15px; min-height: 38px; padding: 5px 11px; }
  .tag { font-size: 14px; min-height: 28px; padding: 3px 8px; }
  .name { font-size: 14px; }
  .sheet-in { padding: 18px 18px 22px; }
  .sheet h2 { font-size: 24px; }
  .sheet p, .sheet li, .sheet dd { font-size: 16px; }
}
@media (max-width: 760px) {
  /* on a phone the card keeps the claim and what came of it; who made it is in the full record */
  .r-who { display: none; }
}
@media (prefers-reduced-motion: reduce) { .chips { scroll-behavior: auto; } }

/* Recording (?record=1&format=reel|wide): the map with its own captions, no controls */
.rec-layer { display: none; }
body.record .rec-layer { display: flex; }
body.record .head, body.record .bar, body.record .loading { display: none !important; }
body.record .app { height: 100vh; min-height: 0; }
body.record .chips { scroll-behavior: auto; }
body.record .tag { pointer-events: none; }
.rec-cap { display: flex; flex-direction: column; gap: 6px; }
.rec-cap.off { visibility: hidden; }
.rec-cap p { margin: 0; }
.rec-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-family: var(--head-font); font-size: 32px; line-height: 1.1; }
.rec-place { font-family: var(--label-font); font-size: 17px; color: var(--muted); }
.rec-line { font-family: var(--head-font); font-size: 25px; line-height: 1.22; }
.rec-came { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-family: var(--label-font); font-size: 20px; line-height: 1.25; }
.rec-k { font-size: 16px; color: var(--muted); }
#recCame.open { color: var(--gold-ink); }
.rec-card { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--page); padding: 40px 36px; }
.rec-card .rec-in { max-width: 30em; display: grid; gap: 14px; }
.rec-card h2 { margin: 0; font-family: var(--head-font); font-weight: 400; font-size: 40px; line-height: 1.15; }
.rec-kicker { margin: 0; font-family: var(--label-font); font-size: 18px; color: var(--gold-ink); }
.rec-sub { margin: 0; font-family: var(--body-font); font-size: 20px; line-height: 1.4; color: var(--muted); }
/* Reel, 1080 x 1920 at twice 540 x 960: captions on top, every word above 65 % of the height and clear of the right-hand buttons */
body.record.reel .rec-layer { flex: 0 0 23vh; align-items: flex-end; padding: 0 72px 14px 22px; background: var(--page); border-bottom: 1px solid var(--line); }
body.record.reel .corner { display: none; }
body.record.reel .rec-card { padding: 40px 72px 36vh 28px; }
/* Wide, 1920 x 1080: the map on the left, the caption beside it */
body.record.wide .app { flex-direction: row; }
body.record.wide .rec-layer { order: 2; flex: 0 0 36%; flex-direction: column; justify-content: center; padding: 36px 34px; background: var(--page); border-left: 1px solid var(--line); }
body.record.wide .rec-when { font-size: 30px; }
body.record.wide .rec-line { font-size: 24px; }

/* ?entry=1: the map alone, for the article's entry picture */
body.entry .head, body.entry .bar, body.entry .loading, body.entry .corner { display: none !important; }
body.entry .app { height: 100vh; min-height: 0; }
body.entry.bare .marks .tag, body.entry.bare .marks .name, body.entry.bare .marks .stack-head { visibility: hidden; }