/* How the apostles died (11 November 2026). A scroll story: the map and the line of years stay in place while the
   words for each apostle scroll past. The controls frame the map they move (layout A, owner's pick 7 Nov 2026):
   the line of years above it, Back / the place / Next below it, the words after. */

@font-face { font-family: 'GT Sectra'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Sectra-Medium.woff') format('woff'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Sectra-Medium.woff') format('woff'); }
@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 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'); }

:root {
  /* design system tokens (christianpure-design-system tokens.css) */
  --page: #fbf8f3;
  --band: #f8f2e8;
  --ink: #002159;
  --muted: #67625d;
  --gold: #c58c23;
  --line: #e8e4df;
  --focus: #0951b1;
  /* the map: our content on a muted base */
  --sea: #e3e8eb;
  --land: #fbf8f3;
  --coast: #c9c2b8;
  --ring: #b9c2c8;
  --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;
  --head-h: 52px;
}

* { box-sizing: border-box; }
html { background: var(--page); color: var(--ink); }
body { margin: 0; font-family: var(--body-font); line-height: 1.5; -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; }
p, h1, h2, ul { margin: 0; }

/* header: where am I, and the way back */
.head { position: sticky; top: 0; z-index: 30; height: var(--head-h); display: grid; grid-template-columns: 1fr auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 20px; background: var(--page); border-bottom: 1px solid var(--line); }
.head h1 { font-family: var(--head-font); font-weight: 500; font-size: 22px; line-height: 1.15; text-align: center; }
.back { white-space: nowrap; justify-self: start; font-family: var(--label-font); font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.back-arrow { font-size: 20px; line-height: 1; }

/* laptop: the stage on the left, held in place; the words beside it */
.story { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); }
.stage { position: sticky; top: var(--head-h); height: calc(100vh - var(--head-h)); height: calc(100dvh - var(--head-h)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--page); border-right: 1px solid var(--line); z-index: 10; }

.band { background: var(--band); }
.band-top { padding: 14px 24px 10px; border-bottom: 1px solid var(--line); }
.when { display: grid; gap: 1px; }
.when-label { font-family: var(--label-font); font-size: 14px; line-height: 1.3; color: var(--muted); }
.when-text { font-family: var(--head-font); font-weight: 500; font-size: 24px; line-height: 1.2; min-height: 1.2em; }
.ruler { display: block; width: 100%; height: 46px; margin-top: 8px; overflow: visible; }
.ruler .axis { stroke: var(--ink); stroke-width: 1.5; }
.ruler .tick { stroke: var(--ink); stroke-width: 1; }
.ruler .tick-label { font-family: var(--label-font); font-size: 13px; fill: var(--muted); text-anchor: middle; }
.ruler .died { fill: var(--ink); }
.ruler .gap { stroke: var(--ink); stroke-width: 5; opacity: .28; }
.ruler .span { stroke-width: 7; stroke-linecap: round; }
.d-scripture { fill: var(--gold); stroke: var(--ink); stroke-width: 1; }
.d-early { fill: var(--ink); stroke: var(--ink); stroke-width: 1; }
.d-late { fill: var(--page); stroke: var(--ink); stroke-width: 1.6; }
.ruler .span.d-scripture { stroke: var(--gold); }
.ruler .span.d-early { stroke: var(--ink); }
.ruler .span.d-late { stroke: var(--ink); opacity: .32; }
.ruler .past { opacity: .3; }
.ruler g { transition: opacity .3s; }
.key { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 2px; font-family: var(--label-font); font-size: 13px; line-height: 1.4; color: var(--muted); }
.key li { display: inline-flex; align-items: center; gap: 6px; }

.view { position: relative; min-height: 0; background: var(--sea); overflow: hidden; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.land { fill: var(--land); stroke: var(--coast); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ring-line { fill: none; stroke: var(--ring); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ring-label { font-family: var(--label-font); fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--sea); stroke-linejoin: round; }
.spoke { stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; fill: none; }
.spoke.open { stroke-dasharray: 5 5; }
.mark { vector-effect: non-scaling-stroke; }
.mark.named { fill: var(--ink); stroke: var(--page); stroke-width: 1.5; }
.mark.open { fill: var(--page); stroke: var(--ink); stroke-width: 2.4; }
.mark.past.named { fill: var(--ink); opacity: .45; }
.mark.past.open { stroke-width: 1.5; opacity: .6; }
.mark.home { fill: var(--gold); stroke: var(--ink); stroke-width: 1.5; }
.place { font-family: var(--label-font); font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: var(--page); stroke-linejoin: round; }
.place.past { font-weight: 400; fill: var(--muted); }
.loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--label-font); font-size: 15px; color: var(--muted); background: var(--sea); }

.band-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.step-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; background: var(--page); border: 1px solid var(--line); border-radius: 4px; font-family: var(--label-font); font-size: 15px; line-height: 1.2; text-align: left; }
.step-btn[disabled] { visibility: hidden; }
.step-btn .chev { font-size: 20px; line-height: 1; }
.next .step-word { display: grid; }
.next-label { color: var(--muted); font-size: 13px; }
.next-to { font-weight: 500; }
.here { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; justify-content: center; justify-self: center; text-align: left; min-width: 0; }
.here-key { grid-row: 1 / span 2; }
.here-name { font-family: var(--head-font); font-weight: 500; font-size: 20px; line-height: 1.2; }
.here-sub { font-family: var(--label-font); font-size: 14px; line-height: 1.3; color: var(--muted); }

/* the words */
.steps { padding: 0 40px 40vh; }
.step { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; max-width: 34em; margin: 0 auto; padding: 40px 0; opacity: .38; transition: opacity .3s; }
.step.on { opacity: 1; }
.step h2 { font-family: var(--head-font); font-weight: 500; font-size: 32px; line-height: 1.15; margin-bottom: 14px; }
.step p { font-size: 19px; line-height: 1.55; }
.more { display: grid; gap: 10px; margin-top: 26px; font-family: var(--label-font); font-size: 16px; }
.more a { display: inline-flex; align-items: center; min-height: 32px; }

/* phone and tablet: the stage on top, held in place; the words scroll under it */
@media (max-width: 899px) {
  :root { --head-h: 48px; }
  .head { padding: 0 14px; }
  .head h1 { font-size: 18px; }
  .back-more { display: none; }
  .story { display: block; }
  .stage { height: 56vh; height: 56dvh; min-height: 330px; border-right: 0; border-bottom: 1px solid var(--line); }
  .band-top { padding: 8px 14px 6px; }
  .when-label { font-size: 13px; }
  .when-text { font-size: 18px; }
  .ruler { height: 38px; margin-top: 4px; }
  .ruler .tick-label { font-size: 12px; }
  .key { font-size: 12px; gap: 0 12px; }
  .band-bottom { padding: 6px 10px; gap: 8px; }
  .step-btn { padding: 0 9px; font-size: 14px; }
  .prev .step-word { display: none; }
  .next-label { font-size: 12px; }
  .next { max-width: 42vw; }
  .here-name { font-size: 17px; }
  .here-sub { font-size: 13px; }
  .steps { padding: 0 20px 44vh; }
  .step { min-height: 46vh; justify-content: flex-start; padding: 22px 0 26px; }
  .step h2 { font-size: 25px; margin-bottom: 8px; }
  .step p { font-size: 17.5px; line-height: 1.5; }
}
@media (max-width: 380px) { .key { font-size: 12px; gap: 0 8px; } .key li { gap: 4px; } .next-to { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .step, .ruler g { transition: none; } }

/* ?still=: the map alone, for the entry pictures */
html.bare .head, html.bare .band, html.bare .steps, html.bare .map text { display: none !important; }
html.bare .story { display: block; }
html.bare .stage { position: fixed; inset: 0; height: auto; min-height: 0; display: block; border: 0; }
html.bare .view { position: absolute; inset: 0; }