/* ─────────────────────────────────────────────────────────────────────────────
   Evangel.chat: the hub's one stylesheet (front page, /practice/, /verse/, /horizons/, 404).
   The system is redesign/STEP1-DESIGN-BRIEF.md §3, as approved 2026-11-07. /horizons/ is built
   in ~/OTHermeneutics and adds its own small stylesheet on top of this one. The legal pages
   carry their own styles and do not load this file.

   Colour rules that are easy to break:
   - --blue is the logo blue. White on it is 3.96:1, so it is a FIELD and a display colour
     only: never the fill of a button, never small white text. Small text on it is --ink (4.5:1).
   - --blue-ink is every button and every blue word on paper (white on it 5.6:1).
   - --blue-tint is blue text on ink (7.8:1).
   ───────────────────────────────────────────────────────────────────────────── */

/* Self-hosted, latin subset (no request to Google on any visit). Plus Jakarta Sans is one
   variable file for weights 400–800. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }

:root {
  --blue: #0F7BFF;
  --blue-ink: #0A63D2;
  --blue-ink-hover: #0853B3;
  --blue-tint: #6AAEFF;
  --ink: #0E1726;
  --ink-2: #172235;
  --paper: #FFFFFF;
  --mist: #F5F8FD;
  --line: #E3E9F2;
  --line-strong: #C9D3E1;
  --muted: #5B6577;
  --on-ink: #D5DCE7;
  --on-ink-muted: #A9B4C6;
  --bar: #DCE6F4;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-ctl: 8px;
  --r-card: 16px;
  --r-panel: 20px;
  --shadow: 0 1px 2px rgb(14 23 38 / .06), 0 14px 34px -14px rgb(14 23 38 / .22);
  --pad: clamp(72px, 10vw, 144px);
  --gutter: clamp(16px, 4vw, 56px);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--paper); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.035em; line-height: 1.06; font-weight: 800; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue-tint); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.label { font-family: var(--mono); font-size: .75rem; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); }
.lede { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; }
.muted { color: var(--muted); }
.prose { max-width: 62ch; }
.prose a, .inline-link { color: var(--blue-ink); font-weight: 600; text-underline-offset: 3px; }
/* Inline links are small targets; give them the 44px the scorecard asks for on phones. */
.inline-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Buttons: one primary action, same words everywhere ───────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 22px;
  border-radius: var(--r-ctl); border: 1px solid transparent; font: 600 1rem/1.1 var(--sans); text-decoration: none; text-align: center;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--blue-ink); color: #fff; }
.btn-primary:hover { background: var(--blue-ink-hover); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { border-color: var(--ink); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-note { margin-top: 14px; font-size: .9375rem; color: var(--muted); }
/* On the blue field the primary turns ink: same words, the strongest contrast available there. */
.on-blue { color: var(--ink); }
.on-blue .btn-primary { background: var(--ink); }
.on-blue .btn-primary:hover { background: #050b16; }
.on-blue .btn-quiet { border-color: rgb(14 23 38 / .35); }
.on-blue .btn-quiet:hover { border-color: var(--ink); }
.on-blue .cta-note { color: var(--ink); }
.on-ink { color: #fff; }
.on-ink .btn-quiet { color: #fff; border-color: rgb(255 255 255 / .32); }
.on-ink .btn-quiet:hover { border-color: #fff; }
.on-ink .cta-note, .on-ink .muted { color: var(--on-ink-muted); }

/* ── Nav: logo, the three products, the action. One bar. ──────────────────── */
.nav { position: relative; z-index: 10; }
.nav-row { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.02em; }
/* 19px bold counts as large text, so the white ".chat" on the logo blue (3.96:1) clears the 3:1 bar. */
.brand img { width: 32px; height: 32px; }
.brand .dot { color: var(--blue-ink); }
.on-blue .brand .dot { color: #fff; }
.on-ink .brand .dot { color: var(--blue-tint); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-ctl); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.nav-links a:hover { background: rgb(14 23 38 / .07); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.on-ink .nav-links a:hover { background: rgb(255 255 255 / .08); }
.nav .btn { min-height: 44px; padding: 0 16px; font-size: .9375rem; white-space: nowrap; }
.menu-btn { display: none; min-width: 44px; min-height: 44px; border: 0; border-radius: var(--r-ctl); background: none; color: inherit; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.menu { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .menu[data-open] { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .menu a { display: flex; align-items: center; min-height: 56px; padding: 0 var(--gutter); border-top: 1px solid var(--line); text-decoration: none; font-weight: 600; }
}
/* Phones: the mark alone, so the one action keeps its full words beside the menu. */
@media (max-width: 480px) {
  .nav .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav .brand img { width: 36px; height: 36px; }
  /* With the wordmark hidden the link would be only as wide as the 36px mark; keep it a 44px target. */
  .nav .brand { min-width: 44px; justify-content: center; }
  .nav-row { gap: 12px; }
}

/* ── Hero on the blue field ───────────────────────────────────────────────── */
.field { background: var(--blue); }
.hero { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 7vw, 104px) clamp(64px, 9vw, 128px); }
.hero h1 { color: #fff; font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.5rem); letter-spacing: -0.045em; line-height: 1; }
.hero .lede { margin-top: 24px; max-width: 36ch; font-weight: 500; }
.hero .cta { margin-top: 32px; }
.hero .cta-note { opacity: .9; }

/* A practice partner, shown working */
.partner-card { background: #fff; color: var(--ink); border-radius: var(--r-panel); padding: 28px; box-shadow: 0 30px 60px -30px rgb(14 23 38 / .55); }
.partner-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.partner-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--mist); color: var(--blue-ink); flex: none; }
.partner-icon svg { width: 24px; height: 24px; }
.partner-head h2 { font-size: 1.5rem; letter-spacing: -0.03em; }
.partner-head p { font-size: .9375rem; color: var(--muted); }
.partner-card dl { display: grid; gap: 14px; margin-top: 18px; }
.partner-card dt { color: var(--blue-ink); }
.partner-card dd { margin-top: 4px; font-size: 1rem; line-height: 1.5; }
.rule { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: .9375rem; line-height: 1.45; }
.rule b { color: var(--blue-tint); font-weight: 600; }

/* ── Proof band: real counts only ─────────────────────────────────────────── */
.proof { background: var(--ink); color: #fff; }
.proof-row { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 40px; }
.stat { padding: 8px 24px; border-left: 1px solid rgb(255 255 255 / .14); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat b { display: block; font: 500 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--mono); letter-spacing: -0.02em; color: var(--blue-tint); }
.stat span { display: block; margin-top: 10px; }
.stat small { display: block; margin-top: 4px; font-size: .9375rem; color: var(--on-ink-muted); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.band { padding-block: var(--pad); }
.band-mist { background: var(--mist); }
.band-ink { background: var(--ink); color: #fff; }
.sec-head { max-width: 760px; }
.sec-head .lede, .sec-head p { margin-top: 16px; color: var(--muted); }
.band-ink .sec-head p { color: var(--on-ink); }
.eyebrow { color: var(--blue-ink); }
.band-ink .eyebrow { color: var(--blue-tint); }
.sec-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 40px; }

/* Evangel Chat in three screens */
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.screens > li { display: grid; gap: 12px; align-content: start; }
.cap { display: flex; align-items: baseline; gap: 10px; }
.cap .mono { font-size: .875rem; color: var(--blue-ink); }
.cap h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.screens .sub { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.mini { min-height: 268px; padding: 16px; border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--mist); }
.pick { display: grid; gap: 8px; }
.pick li { padding: 10px 12px; border-radius: 12px; background: #fff; font-size: .9375rem; line-height: 1.35; }
.pick li b { display: block; }
.pick li span { color: var(--muted); font-size: .9375rem; }
.pick li.sel { outline: 2px solid var(--blue-ink); }
.talk { display: grid; gap: 10px; }
.talk .who { font-size: .9375rem; color: var(--muted); }
.note { padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: #fff; font-size: .9375rem; line-height: 1.45; }
.note .label { display: block; margin-bottom: 4px; color: var(--blue-ink); }
.typing { display: flex; gap: 5px; justify-self: end; padding: 13px; border-radius: 16px 16px 5px 16px; background: var(--blue-ink); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .45; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: 1; } }
.mini:hover .typing i { animation-play-state: paused; }
.report { display: grid; gap: 12px; }
.report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.report-head .label { color: var(--muted); }
.score { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; font-size: .9375rem; font-weight: 600; }
.score .mono { font-weight: 500; }
.score .bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--bar); overflow: hidden; }
.score .bar i { display: block; height: 100%; border-radius: 4px; background: var(--blue-ink); }
.score small { grid-column: 1 / -1; font-weight: 400; font-size: .9375rem; color: var(--muted); }

/* The 24 practice partners */
.wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 44px; }
.wall li { min-height: 76px; padding: 12px; border-radius: 12px; background: var(--ink-2); border: 1px solid rgb(255 255 255 / .07); }
.wall b { display: block; font-size: 1rem; }
.wall span { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.35; color: var(--on-ink-muted); }
.wall-note { margin-top: 20px; color: var(--on-ink-muted); font-size: .9375rem; max-width: 70ch; }

/* Pass the Verse: one game, drawn */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split-rev { grid-template-columns: 7fr 5fr; }
.split .lede { margin-top: 18px; color: var(--muted); }
.split .cta { margin-top: 28px; }
.facts { display: grid; gap: 8px; margin-top: 22px; }
.facts li { display: flex; gap: 10px; font-size: 1rem; line-height: 1.5; }
.facts svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--blue-ink); }
.board { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-panel); background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.board .label { color: var(--blue-tint); }
.board blockquote { margin: 12px 0 0; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; font-weight: 500; }
.ink-out { display: inline-block; min-width: 4.2em; height: .95em; vertical-align: -.1em; border-radius: 3px; background: #3A4760; }
.rounds { display: grid; gap: 8px; margin-top: 22px; }
.rounds li { display: grid; grid-template-columns: 28px 76px 1fr auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: 12px; background: var(--ink-2); font-size: .9375rem; }
.rounds .n { font-family: var(--mono); color: var(--blue-tint); }
.rounds b { font-weight: 600; }
.rounds .ans { color: var(--on-ink); }
.rounds .ok { width: 22px; height: 22px; color: #7BD6A4; }
.board-foot { margin-top: 16px; font-size: .9375rem; color: var(--on-ink-muted); }

/* Two Horizons: then → in Christ */
.pairs { display: grid; gap: 10px; }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
.pair .then, .pair .now { font-family: var(--mono); font-size: .9375rem; }
.pair .then { color: #8A5A0B; }
.pair .now { color: #3E4CB0; text-align: right; }
.pair svg { width: 20px; height: 20px; color: var(--muted); }
.pair-station { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: .9375rem; color: var(--muted); }
.pair-station b { color: var(--ink); font-weight: 600; }
.pairs-note { margin-top: 14px; font-size: .9375rem; color: var(--muted); }

/* Questions */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 88px); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--blue-ink); border-bottom: 2px solid var(--blue-ink); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 0 20px; color: var(--muted); max-width: 64ch; }

/* Final band */
.close { background: var(--blue); color: var(--ink); text-align: center; }
.close .wrap { padding-block: clamp(72px, 10vw, 136px); }
.close h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); color: #fff; letter-spacing: -0.045em; }
.close h2 span { display: block; color: var(--ink); }
.close p { margin: 20px auto 0; max-width: 52ch; font-size: 1.125rem; }
.close .cta { justify-content: center; margin-top: 32px; }

/* Footer */
.foot { background: var(--ink); color: var(--on-ink); font-size: .9375rem; }
.foot-grid { display: grid; grid-template-columns: 5fr 3fr 3fr; gap: 40px; padding-block: 56px 32px; }
.foot .brand { color: #fff; }
.foot .brand .dot { color: var(--blue-tint); }
.foot-brand p { margin-top: 12px; max-width: 40ch; color: var(--on-ink-muted); }
.foot-col h2 { font: 500 .75rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-muted); }
.foot-col ul { margin-top: 10px; }
.foot-col a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: #fff; white-space: nowrap; }
.foot-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-tag { padding: 2px 8px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .25); font: 500 .6875rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-ink); }
.foot-base { padding-block: 20px 40px; border-top: 1px solid rgb(255 255 255 / .1); color: var(--on-ink-muted); }

/* /practice/: the score meanings */
.axes-table { width: 100%; border-collapse: collapse; align-self: start; }
.axes-table th, .axes-table td { text-align: left; vertical-align: top; padding: 18px 0; border-bottom: 1px solid var(--line-strong); }
.axes-table thead th { padding: 0 0 10px; border-bottom: 2px solid var(--ink); color: var(--muted); }
.axes-table tbody th { width: 34%; padding-right: 16px; font-size: 1.125rem; letter-spacing: -0.01em; }
.axes-table td { color: var(--muted); }

/* /practice/: the ladder */
.ladder { display: grid; gap: 10px; margin-top: 44px; }
.ladder li { display: grid; grid-template-columns: 64px 1.1fr 1.4fr; gap: 24px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.ladder .mono { font-size: 1.5rem; color: var(--blue-ink); line-height: 1.2; }
.ladder h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.ladder .for { margin-top: 6px; font-size: .9375rem; color: var(--muted); }
.ladder p.can { font-size: 1rem; line-height: 1.55; }
.quote-block { margin-top: 28px; padding: 22px 24px; border-left: 3px solid var(--blue-ink); background: var(--mist); border-radius: 0 var(--r-card) var(--r-card) 0; }
.quote-block p { font-size: 1.125rem; line-height: 1.55; }
.quote-block .label { display: block; margin-top: 10px; color: var(--muted); }
.lesson { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-panel); background: var(--ink); color: #fff; }
.lesson .label { color: var(--blue-tint); }
.lesson h3 { margin-top: 8px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.lesson .bubble { margin-top: 20px; padding: 16px 18px; border-radius: 18px 18px 18px 6px; background: #fff; color: var(--ink); font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.lesson .narr { margin-top: 16px; color: var(--on-ink); }

/* /verse/ pieces */
.ticks { display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; line-height: 1.55; }
.ticks svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--blue-ink); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; margin-top: 40px; }
.grid-2 h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.grid-2 p { margin-top: 8px; color: var(--muted); }

/* 404 */
.lost { min-height: 70vh; display: grid; align-content: center; padding-block: var(--pad); }
.lost h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); color: #fff; letter-spacing: -0.045em; }
.lost p { margin-top: 16px; font-size: 1.1875rem; }
.lost .cta { margin-top: 28px; }

/* ── Phones and narrow screens ────────────────────────────────────────────── */
@media (max-width: 1000px) { .wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) {
  .hero, .split, .split-rev, .faq { grid-template-columns: 1fr; }
  .proof-row { grid-template-columns: 1fr; gap: 20px; }
  .stat { padding: 0; border-left: 0; }
  .screens, .grid-2 { grid-template-columns: 1fr; }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .ladder li { grid-template-columns: 44px 1fr; }
  .ladder p.can { grid-column: 2; }
}
@media (max-width: 400px) {
  .foot-grid { grid-template-columns: 1fr; }
  .rounds li { grid-template-columns: 24px 64px 1fr auto; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}