Files

1849 lines
110 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The good news of Jesus, presented as a courtroom case: God the Judge, the charge, the Substitute who took your place, and the pardon, with the full Gospel record of his trial, crucifixion and resurrection.">
<link rel="canonical" href="https://versebyversewithnate.us/salvation">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Verse by Verse with Nate">
<meta property="og:url" content="https://versebyversewithnate.us/salvation">
<meta property="og:title" content="The Gospel, in a Courtroom">
<meta property="og:description" content="God is the Judge, you are on trial, and a Substitute has stepped forward. Hear the case and enter your plea.">
<meta property="og:image" content="https://versebyversewithnate.us/images/banner.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<title>The Gospel, in a Courtroom | Verse by Verse with Nate</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<style>
:root {
--parchment: #f5edd8;
--parchment-dark: #e8d9b8;
--ink: #1a1208;
--ink-light: #3d2c10;
--crimson: #8b1a1a;
--gold: #b8860b;
--gold-light: #d4a843;
--matt-color: #4a6fa5;
--mark-color: #7a4a8f;
--luke-color: #2e7d52;
--john-color: #b5651d;
--acts-color: #2f6f73;
--shadow: rgba(26,18,8,0.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #1a0f05;
font-family: 'EB Garamond', Georgia, serif;
color: var(--ink);
min-height: 100vh;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
opacity: 0.5;
}
.scroll-wrapper {
max-width: 960px;
margin: 0 auto;
padding: 0 1.5rem 4rem;
position: relative;
z-index: 1;
}
header {
text-align: center;
padding: 3.5rem 2rem 2rem;
}
.header-rule {
height: 3px;
background: linear-gradient(90deg, transparent, var(--gold), var(--crimson), var(--gold), transparent);
margin-bottom: 1.8rem;
position: relative;
}
.header-rule::before, .header-rule::after {
content: '✦';
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--gold);
font-size: 0.9rem;
background: #1a0f05;
padding: 0 0.5rem;
}
.header-rule::before { left: 20%; }
.header-rule::after { right: 20%; }
header h1 {
font-family: 'Cinzel', serif;
font-size: clamp(1.6rem, 5vw, 3rem);
font-weight: 900;
color: var(--parchment);
letter-spacing: 0.06em;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
line-height: 1.15;
}
header h1 span { color: var(--gold-light); }
header .subtitle {
font-family: 'EB Garamond', serif;
font-style: italic;
color: var(--parchment-dark);
font-size: 1.1rem;
margin-top: 0.6rem;
opacity: 0.85;
}
.legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem 1.4rem;
margin: 2rem auto 1rem;
padding: 1rem 1.5rem;
background: rgba(245,237,216,0.06);
border: 1px solid rgba(184,134,11,0.3);
border-radius: 4px;
max-width: 700px;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.45rem;
font-family: 'Cinzel', serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
cursor: pointer;
transition: opacity 0.2s;
color: var(--parchment);
user-select: none;
}
.legend-item.dimmed { opacity: 0.35; }
.legend-dot {
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
flex-shrink: 0;
}
.filter-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 1rem 0 2.5rem;
}
.filter-btn {
font-family: 'Cinzel', serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
padding: 0.35rem 0.9rem;
border-radius: 2px;
border: 1px solid;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
}
.filter-btn.active-filter { color: var(--ink); font-weight: 700; }
.filter-btn:not(.active-filter) {
background: transparent;
color: var(--parchment-dark);
opacity: 0.55;
}
.filter-btn:hover { opacity: 1; }
.timeline {
position: relative;
padding-left: 2.5rem;
}
.timeline::before {
content: '';
position: absolute;
left: 0.95rem;
top: 0; bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--gold) 0%, var(--crimson) 50%, var(--gold) 100%);
opacity: 0.5;
}
.phase-header {
position: relative;
margin: 2.5rem 0 1rem;
display: flex;
align-items: center;
gap: 1rem;
}
.phase-header::before {
content: '';
position: absolute;
left: -2.5rem;
width: 2rem;
height: 2px;
background: var(--gold);
}
.phase-node {
width: 1.8rem; height: 1.8rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--crimson));
border: 3px solid var(--parchment-dark);
position: absolute;
left: -2.42rem;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 12px rgba(184,134,11,0.5);
z-index: 2;
}
.phase-label {
font-family: 'Cinzel', serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-light);
padding: 0.2rem 0.8rem;
border: 1px solid rgba(184,134,11,0.4);
border-radius: 2px;
background: rgba(26,9,5,0.6);
}
.phase-title {
font-family: 'Cinzel', serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--parchment);
letter-spacing: 0.04em;
}
.event-card {
position: relative;
margin: 0.65rem 0;
background: linear-gradient(135deg, rgba(245,237,216,0.96) 0%, rgba(232,217,184,0.94) 100%);
border-radius: 4px;
padding: 1rem 1.2rem 1rem 1.4rem;
border-left: 4px solid var(--crimson);
box-shadow: 2px 3px 14px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.4);
transition: transform 0.18s, box-shadow 0.18s, opacity 0.25s;
}
.event-card:hover {
transform: translateX(3px);
box-shadow: 4px 5px 20px rgba(26,18,8,0.28);
}
.event-card.hidden { display: none; }
.event-card::before {
content: '';
position: absolute;
left: -2.09rem;
top: 1.1rem;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--parchment);
border: 2px solid var(--crimson);
box-shadow: 0 0 0 2px rgba(26,18,8,0.15);
}
.event-title {
font-family: 'Cinzel', serif;
font-size: 0.88rem;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.04em;
margin-bottom: 0.35rem;
line-height: 1.3;
}
.event-body {
font-size: 0.9rem;
color: var(--ink-light);
line-height: 1.6;
font-style: italic;
margin-bottom: 0.5rem;
}
.gospel-badges {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.4rem;
}
/* shared badge base */
.badge {
font-family: 'Cinzel', serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
padding: 0.15rem 0.55rem;
border-radius: 2px;
border: 1px solid;
color: white;
text-decoration: none;
display: inline-block;
cursor: default;
}
a.badge {
cursor: pointer;
transition: filter 0.15s, transform 0.15s;
}
a.badge:hover {
filter: brightness(1.25);
transform: translateY(-1px);
}
.badge-matt { background: var(--matt-color); border-color: #3a5a8a; }
.badge-mark { background: var(--mark-color); border-color: #6a3a7f; }
.badge-luke { background: var(--luke-color); border-color: #1e6040; }
.badge-john { background: var(--john-color); border-color: #8b4513; }
.badge-acts { background: var(--acts-color); border-color: #1f4f52; }
.ref-text {
font-size: 0.72rem;
color: #7a5a2a;
margin-top: 0.35rem;
font-style: normal;
letter-spacing: 0.02em;
}
.unique-note {
font-size: 0.75rem;
font-style: italic;
color: var(--crimson);
margin-top: 0.3rem;
padding-top: 0.25rem;
border-top: 1px dashed rgba(139,26,26,0.25);
}
.bsb-hint {
font-size: 0.68rem;
color: #9a7a3a;
margin-top: 0.4rem;
font-style: italic;
opacity: 0.8;
}
/* ── Gospel message + response ── */
.gospel-message, .respond {
background: linear-gradient(135deg, rgba(245,237,216,0.97) 0%, rgba(232,217,184,0.95) 100%);
border-radius: 4px;
border-top: 4px solid var(--crimson);
box-shadow: 2px 3px 18px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.4);
padding: 2rem 2.2rem;
margin: 1.5rem 0 2.2rem;
}
.gospel-message h2, .respond h2 {
font-family: 'Cinzel', serif;
font-size: clamp(1.25rem, 3.4vw, 1.7rem);
font-weight: 700;
color: var(--ink);
letter-spacing: 0.04em;
margin-bottom: 0.5rem;
}
.gospel-lead { font-size: 1.15rem; font-style: italic; color: var(--ink-light); line-height: 1.6; margin-bottom: 1.4rem; }
.gospel-points { list-style: none; display: grid; gap: 1.1rem; counter-reset: gp; }
.gospel-points li { counter-increment: gp; position: relative; padding-left: 2.8rem; line-height: 1.6; font-size: 1.05rem; color: var(--ink); }
.gospel-points li::before {
content: counter(gp);
position: absolute; left: 0; top: 0.05rem;
width: 1.9rem; height: 1.9rem; border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--crimson));
color: #fff; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.85rem;
display: grid; place-items: center;
}
.gospel-points strong { font-family: 'Cinzel', serif; font-size: 0.95rem; letter-spacing: 0.03em; }
.gospel-points .verse { display: block; margin-top: 0.2rem; font-style: italic; color: var(--ink-light); font-size: 0.98rem; }
.gospel-points .verse cite { font-style: normal; font-size: 0.8rem; color: #7a5a2a; letter-spacing: 0.04em; }
.gospel-cta { margin-top: 1.6rem; font-style: italic; color: var(--ink-light); }
.gospel-cta a { color: var(--crimson); font-weight: 600; }
.docket { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; margin-bottom: 1.2rem; border: 1px solid rgba(139,26,26,0.35); border-left: 4px solid var(--crimson); background: rgba(139,26,26,0.06); }
.docket-scales { font-size: 2.1rem; line-height: 1; color: var(--crimson); }
.docket-court { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.8rem; color: var(--crimson); }
.docket-case { font-size: 0.95rem; color: var(--ink-light); margin-top: 0.15rem; }
.docket-case em { font-style: normal; font-weight: 600; color: var(--ink); }
.stage { display: block; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crimson); margin-bottom: 0.25rem; }
.stage--plain { margin-bottom: 0.4rem; }
.gospel-points li { padding-bottom: 1.1rem; border-bottom: 1px dashed rgba(139,26,26,0.25); }
.gospel-points li:last-child { border-bottom: 0; padding-bottom: 0; }
.gospel-points .verse + .verse { margin-top: 0.35rem; }
.gospel-points li { padding-left: 0; }
.gospel-points li::before { display: none; }
.timeline-intro { text-align: center; margin: 2.8rem 0 0.4rem; }
.timeline-intro h2 { font-family: 'Cinzel', serif; color: var(--parchment); font-size: 1.3rem; letter-spacing: 0.05em; }
.timeline-intro p { color: var(--parchment-dark); font-style: italic; opacity: 0.85; margin-top: 0.3rem; }
.prayer {
margin: 1.2rem 0 1.4rem; padding: 1.1rem 1.4rem;
border-left: 4px solid var(--gold); background: rgba(184,134,11,0.09);
font-style: italic; font-size: 1.1rem; line-height: 1.75; color: var(--ink);
}
.respond .note { font-size: 0.95rem; color: var(--ink-light); line-height: 1.6; }
.btn-pray, .btn-send {
font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.08em; font-size: 0.85rem;
text-transform: uppercase; cursor: pointer; border-radius: 2px;
padding: 0.8rem 1.6rem; border: 1px solid #6b1010;
background: linear-gradient(135deg, var(--crimson), #6b1010); color: var(--parchment);
transition: filter 0.15s, transform 0.15s;
}
.btn-pray:hover, .btn-send:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-send:disabled { opacity: 0.6; cursor: default; transform: none; }
.btn-ghost { font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; border: 0; color: var(--ink-light); cursor: pointer; text-decoration: underline; margin-left: 1rem; }
.respond-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.respond-form { display: none; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px dashed rgba(139,26,26,0.3); }
.respond-form.open { display: block; }
.respond-form label { display: block; font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light); margin: 0.9rem 0 0.3rem; }
.respond-form input[type=text], .respond-form input[type=email], .respond-form textarea {
width: 100%; font-family: 'EB Garamond', serif; font-size: 1.05rem; color: var(--ink);
background: rgba(255,255,255,0.55); border: 1px solid rgba(26,18,8,0.3); border-radius: 2px; padding: 0.6rem 0.8rem;
}
.respond-form input:focus, .respond-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.respond-form .hp { position: absolute; left: -9999px; }
.form-error { color: var(--crimson); font-style: italic; margin-top: 0.8rem; min-height: 1.2em; }
.respond-done { display: none; }
.respond-done.open { display: block; }
.respond-done ul { margin: 0.8rem 0 0 1.2rem; line-height: 1.8; }
.respond-done a { color: var(--crimson); font-weight: 600; }
@media (max-width: 600px) { .gospel-message, .respond { padding: 1.4rem 1.2rem; } }
/* ── Courtroom framing for the harmony timeline ── */
.legend-title, .filter-title {
text-align: center; font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--gold-light); margin-top: 2rem; opacity: 0.9;
}
.filter-title { margin-top: 1.2rem; }
.legend-title + .legend { margin-top: 0.8rem; }
.court-note {
margin: 0.2rem 0 1rem; padding: 1rem 1.2rem;
border: 1px solid rgba(184,134,11,0.35); border-left: 4px solid var(--gold);
background: rgba(245,237,216,0.06); border-radius: 3px; color: var(--parchment);
}
.court-note-head { font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.4rem; }
.court-note p { font-size: 1rem; line-height: 1.65; font-style: italic; color: var(--parchment); opacity: 0.92; }
.court-note p + p { margin-top: 0.5rem; }
.court-note cite { font-style: normal; font-size: 0.8rem; color: var(--gold-light); letter-spacing: 0.04em; }
.exhibit { display: block; font-family: 'Cinzel', serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--crimson); margin-bottom: 0.2rem; opacity: 0.85; }
.adjourned {
margin: 2.2rem 0 0; padding: 1.2rem 1.4rem; text-align: center;
border-top: 1px solid rgba(184,134,11,0.4); border-bottom: 1px solid rgba(184,134,11,0.4);
color: var(--parchment);
}
.adjourned h3 { font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.5rem; }
.adjourned p { font-style: italic; line-height: 1.65; opacity: 0.92; }
@media (max-width: 600px) { .court-note { padding: 0.85rem 0.95rem; } }
footer {
text-align: center;
padding: 3rem 1rem 1.5rem;
font-size: 0.8rem;
color: rgba(245,237,216,0.35);
font-style: italic;
font-family: 'EB Garamond', serif;
letter-spacing: 0.04em;
}
@media (max-width: 600px) {
.timeline { padding-left: 2rem; }
.timeline::before { left: 0.7rem; }
.event-card::before { left: -1.6rem; }
.phase-node { left: -1.92rem; }
.phase-header::before { left: -2rem; width: 1.6rem; }
.event-card { padding: 0.9rem 1rem 0.9rem 1.1rem; }
}
/* ── Readability ── */
body { font-size: 18px; }
header .subtitle { font-size: 1.25rem; opacity: 1; }
.legend-item { font-size: 0.9rem; }
.filter-btn { font-size: 0.82rem; padding: 0.5rem 1rem; }
.filter-btn:not(.active-filter) { opacity: 0.85; }
.legend-title, .filter-title { font-size: 0.82rem; opacity: 1; }
.legend-sub { font-size: 1.05rem !important; opacity: 0.95 !important; }
.phase-label { font-size: 0.82rem; }
.phase-title { font-size: 1.3rem; line-height: 1.3; }
.event-card { padding: 1.2rem 1.4rem 1.2rem 1.6rem; }
.event-title { font-size: 1.05rem; line-height: 1.4; margin-bottom: 0.5rem; }
.event-body { font-size: 1.12rem; line-height: 1.75; font-style: normal; color: #2b1d08; margin-bottom: 0.7rem; }
.badge { font-size: 0.78rem; padding: 0.25rem 0.7rem; }
.ref-text { font-size: 0.92rem; color: #5e4318; margin-top: 0.55rem; }
.unique-note { font-size: 0.98rem; line-height: 1.55; color: #7a1414; padding-top: 0.45rem; margin-top: 0.5rem; }
.exhibit { font-size: 0.72rem; opacity: 1; }
.court-note { padding: 1.2rem 1.4rem; background: rgba(245,237,216,0.09); }
.court-note-head { font-size: 0.8rem; }
.court-note p { font-size: 1.15rem; line-height: 1.75; font-style: normal; opacity: 1; }
.adjourned h3 { font-size: 1.1rem; }
.adjourned p { font-size: 1.15rem; line-height: 1.75; font-style: normal; opacity: 1; }
.timeline-intro h2 { font-size: 1.5rem; }
.timeline-intro p { font-size: 1.15rem; opacity: 1; }
.gospel-lead { font-size: 1.25rem; font-style: normal; }
.gospel-points li { font-size: 1.15rem; line-height: 1.7; }
.gospel-points strong { font-size: 1.05rem; }
.gospel-points .verse { font-size: 1.08rem; line-height: 1.6; color: #3d2c10; }
.gospel-points .verse cite { font-size: 0.9rem; color: #5e4318; }
.stage { font-size: 0.82rem; }
.docket-court { font-size: 0.9rem; }
.docket-case { font-size: 1.05rem; }
.gospel-cta { font-size: 1.1rem; font-style: normal; }
.respond .note { font-size: 1.1rem; line-height: 1.7; }
.prayer { font-size: 1.2rem; line-height: 1.8; }
.respond-form label { font-size: 0.82rem; }
.respond-form input[type=text], .respond-form input[type=email], .respond-form textarea { font-size: 1.15rem; }
footer { font-size: 0.95rem; color: rgba(245,237,216,0.7); }
@media (max-width: 600px) { body { font-size: 17px; } .phase-title { font-size: 1.15rem; } }
/* ══ Redesign ══════════════════════════════════════════════ */
:root { --bar-h: 52px; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.topbar { position: sticky; top: 0; z-index: 50; height: var(--bar-h); background: rgba(14,8,3,0.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(184,134,11,0.35); }
.topbar-inner { max-width: 1100px; height: 100%; margin: 0 auto; padding: 0 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar a { color: var(--parchment); text-decoration: none; font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.08em; }
.topbar-back { font-weight: 700; color: var(--gold-light) !important; white-space: nowrap; }
.topbar-back:hover { color: #fff !important; }
.topbar-back-short { display: none; }
.topbar-links { display: flex; align-items: center; gap: 1.1rem; }
.topbar-links a { opacity: 0.8; padding: 0.3rem 0; border-bottom: 2px solid transparent; transition: opacity .15s, border-color .15s; text-transform: uppercase; }
.topbar-links a:hover, .topbar-links a.active { opacity: 1; border-bottom-color: var(--gold); }
.topbar-plea { opacity: 1 !important; color: var(--gold-light) !important; }
.topbar-sep { width: 1px; height: 1.1rem; background: rgba(245,237,216,0.25); }
.hero { padding: 3.5rem 1.5rem 2rem; }
.hero-kicker { font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); margin: 1.6rem 0 0.9rem; }
.hero-kicker span { font-size: 1.4rem; vertical-align: -0.1em; margin-right: 0.3rem; }
.hero h1 { font-size: clamp(2.2rem, 7vw, 3.8rem); line-height: 1.1; }
.hero-lead { max-width: 40rem; margin: 1.2rem auto 0; font-size: 1.3rem; line-height: 1.65; color: var(--parchment); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1.8rem; }
.hero-btn { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--parchment); border: 1px solid rgba(184,134,11,0.6); padding: 0.8rem 1.4rem; border-radius: 2px; transition: background .15s, transform .15s; }
.hero-btn:hover { background: rgba(184,134,11,0.18); transform: translateY(-1px); }
.hero-btn--primary { background: linear-gradient(135deg, var(--gold), #9a6f0a); color: var(--ink); border-color: var(--gold); }
.hero-btn--primary:hover { background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.hero-verse { margin-top: 1.8rem; font-style: italic; font-size: 1.15rem; color: var(--parchment-dark); }
.hero-verse cite { font-style: normal; font-size: 0.9rem; color: var(--gold-light); letter-spacing: 0.05em; margin-left: 0.3rem; }
.gospel-message { margin-top: 2.2rem; }
.record-head { text-align: center; margin: 3.5rem 0 0.5rem; }
.record-kicker { font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); }
.record-head h2 { font-family: 'Cinzel', serif; font-size: clamp(1.7rem, 5vw, 2.5rem); color: var(--parchment); letter-spacing: 0.05em; margin-top: 0.4rem; }
.record-sub { font-family: 'Cinzel', serif; color: var(--gold-light); letter-spacing: 0.06em; margin-top: 0.5rem; font-size: 1rem; }
.record-text { color: var(--parchment-dark); font-style: italic; font-size: 1.15rem; margin-top: 0.7rem; }
.filter-bar { position: sticky; top: var(--bar-h); z-index: 20; margin: 1rem -1.5rem 2rem; padding: 0.7rem 1.5rem; background: linear-gradient(180deg, #1a0f05 75%, rgba(26,15,5,0)); }
.site-foot { text-align: center; padding: 3rem 1rem 3.5rem; margin-top: 2.5rem; border-top: 1px solid rgba(184,134,11,0.4); font-style: normal; color: var(--parchment); }
.foot-brand { font-family: 'Cinzel', serif; font-size: 1.15rem; letter-spacing: 0.08em; color: var(--gold-light); text-decoration: none; }
.foot-line { margin-top: 0.4rem; opacity: 0.85; font-size: 1.05rem; font-style: italic; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.foot-btn { font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--parchment); border: 1px solid rgba(184,134,11,0.45); padding: 0.6rem 1rem; border-radius: 2px; transition: background .15s; }
.foot-btn:hover { background: rgba(184,134,11,0.18); }
.foot-btn--primary { background: rgba(184,134,11,0.22); color: #fff; border-color: var(--gold); font-weight: 700; }
.foot-share { margin-top: 1.4rem; background: transparent; border: 0; color: var(--gold-light); font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.foot-note { min-height: 1.3em; margin-top: 0.4rem; font-size: 0.95rem; color: var(--parchment-dark); font-style: italic; }
.foot-small { margin-top: 1.4rem; font-size: 0.95rem; line-height: 1.7; color: rgba(245,237,216,0.7); font-style: italic; }
.to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--gold); background: rgba(14,8,3,0.92); color: var(--gold-light); font-size: 1.2rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; }
.to-top.show { opacity: 1; pointer-events: auto; }
@media (max-width: 720px) {
.topbar-links a:not(.topbar-plea):not([data-spy="record"]) { display: none; }
.topbar-sep { display: none; }
.topbar-links { gap: 0.9rem; }
.topbar-back-long { display: none; }
.topbar-back-short { display: inline; }
.hero { padding: 2.2rem 0.5rem 1.5rem; }
.hero-lead { font-size: 1.15rem; }
.filter-bar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 1rem -1.5rem 1.6rem; -webkit-overflow-scrolling: touch; }
.filter-btn { white-space: nowrap; }
}
.filter-bar { gap: 0.4rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.filter-btn { font-size: 0.74rem; padding: 0.42rem 0.7rem; letter-spacing: 0.06em; }
.gospel-points .para { display: block; margin-top: 0.55rem; }
/* ══ Tabs + plea ══════════════════════════════════════════ */
:root { --tab-h: 52px; }
.tabbar { position: sticky; top: var(--bar-h); z-index: 30; display: flex; justify-content: center; gap: 0.5rem; padding: 0.6rem 0; margin: 1.2rem -1.5rem 0; background: linear-gradient(180deg, #1a0f05 80%, rgba(26,15,5,0)); }
.tabbar button { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--parchment-dark); background: transparent; border: 1px solid rgba(184,134,11,0.5); padding: 0.7rem 1.8rem; border-radius: 2px; cursor: pointer; transition: background .15s, color .15s; }
.tabbar button:hover { background: rgba(184,134,11,0.15); }
.tabbar button[aria-selected="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.panel[hidden] { display: none; }
.filter-bar { top: calc(var(--bar-h) + var(--tab-h)); }
.panel, .gospel-message, .respond, .record-head { scroll-margin-top: calc(var(--bar-h) + var(--tab-h) + 12px); }
.adjourned-cta { margin-top: 1.4rem; }
.adjourned-cta .hero-btn { display: inline-block; }
.respond { margin-top: 2rem; }
.respond h3 { font-family: 'Cinzel', serif; color: var(--ink); }
.plea-picker { margin: 1.2rem 0 1rem; }
.plea-picker label { display: block; font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 0.4rem; }
.plea-picker select { width: 100%; max-width: 30rem; font-family: 'EB Garamond', serif; font-size: 1.25rem; color: var(--ink); background: rgba(255,255,255,0.7); border: 2px solid var(--crimson); border-radius: 2px; padding: 0.7rem 0.9rem; cursor: pointer; }
.plea-picker select:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.plea-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; }
.plea-card { padding: 1.1rem 1.2rem; border: 1px solid rgba(26,18,8,0.25); border-top: 4px solid var(--gold); background: rgba(255,255,255,0.35); border-radius: 2px; transition: box-shadow .2s, border-color .2s, opacity .2s; }
.plea-card h3 { font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem; }
.plea-card p { font-size: 1.05rem; line-height: 1.6; color: var(--ink); }
.plea-card p + p { margin-top: 0.6rem; }
.plea-card.is-selected { border-color: var(--crimson); border-top-color: var(--crimson); box-shadow: 0 0 0 2px var(--crimson); background: rgba(255,255,255,0.65); }
.plea-card.is-dim { opacity: 0.55; }
.plea-panel { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 2px solid var(--crimson); }
.plea-panel[hidden] { display: none; }
.plea-title { font-size: clamp(1.15rem, 3vw, 1.45rem); line-height: 1.35; margin-bottom: 0.8rem; }
.plea-panel .note { margin-top: 0.8rem; }
.plea-panel .verse { display: block; margin-top: 0.5rem; font-style: italic; font-size: 1.08rem; color: #3d2c10; }
.plea-panel .verse cite { font-style: normal; font-size: 0.9rem; color: #5e4318; }
.next-steps { margin: 1rem 0 0 1.3rem; display: grid; gap: 0.9rem; font-size: 1.1rem; line-height: 1.65; color: var(--ink); }
.next-steps li::marker { color: var(--crimson); font-weight: 700; }
.next-steps .prayer { margin-top: 0.7rem; }
.selftest { margin: 1.2rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--crimson); background: rgba(139,26,26,0.07); }
.selftest-head { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); }
.selftest ul { margin: 0.6rem 0 0.4rem 1.2rem; display: grid; gap: 0.4rem; font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.btn-link { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--crimson); border: 1px solid var(--crimson); padding: 0.75rem 1.1rem; border-radius: 2px; }
.btn-link:hover { background: rgba(139,26,26,0.1); }
@media (max-width: 720px) {
.plea-cards { grid-template-columns: 1fr; }
.tabbar button { padding: 0.65rem 1.1rem; font-size: 0.85rem; }
}
.plea-panel { scroll-margin-top: calc(var(--bar-h) + var(--tab-h) + 20px); }
.record-callout { margin: 2rem 0; padding: 2rem 2.2rem; text-align: center; background: linear-gradient(145deg, rgba(139,26,26,0.35), rgba(26,9,5,0.85)); border: 2px solid var(--gold); border-radius: 4px; box-shadow: 0 6px 28px rgba(0,0,0,0.45); color: var(--parchment); }
.callout-kicker { font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); }
.record-callout h2 { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.2; color: #fff; margin: 0.5rem 0 1rem; letter-spacing: 0.04em; }
.record-callout p { font-size: 1.2rem; line-height: 1.7; max-width: 38rem; margin: 0 auto 0.9rem; }
.record-callout strong { color: var(--gold-light); }
.callout-actions { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-top: 1.4rem; }
.record-callout .hero-btn--primary { font-size: 0.95rem; padding: 1rem 2rem; }
.callout-skip { color: var(--parchment-dark); font-size: 1rem; font-style: italic; text-decoration: underline; opacity: 0.85; }
.callout-skip:hover { opacity: 1; }
@media (max-width: 600px) { .record-callout { padding: 1.5rem 1.1rem; } .record-callout p { font-size: 1.1rem; } }
.phase-label { white-space: nowrap; }
.filter-bar { scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
@media (max-width: 720px) {
.hero-actions { flex-direction: column; align-items: stretch; max-width: 18rem; margin-left: auto; margin-right: auto; }
.hero-btn { text-align: center; }
.phase-header { flex-wrap: wrap; row-gap: 0.4rem; }
.phase-title { flex-basis: 100%; }
}
.sent-badge { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, #2e7d52, #1e6040); margin-bottom: 0.8rem; box-shadow: 0 2px 10px rgba(30,96,64,0.4); }
.sent-reach { font-size: 1.2rem !important; }
.sent-welcome { margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-left: 4px solid var(--gold); background: rgba(184,134,11,0.1); }
.sent-welcome-head { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; color: var(--ink); }
.sent-welcome .note { margin-top: 0.6rem; }
.sent-welcome a { color: var(--crimson); font-weight: 600; }
.field-hint { margin-top: 0.4rem; font-size: 0.98rem; line-height: 1.55; color: var(--ink-light); font-style: italic; }
.adjourned { padding: 2rem 1.4rem 2.4rem; border-top-width: 2px; border-bottom-width: 2px; border-color: var(--gold); background: radial-gradient(ellipse at center, rgba(184,134,11,0.18), transparent 70%); }
.adjourned h3 { font-size: 1.3rem; }
.adjourned-q { margin-top: 1.6rem; font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1.2; }
.adjourned-cta { margin-top: 1.2rem; }
.plea-big {
display: inline-block; font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(1.25rem, 4vw, 1.7rem);
letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: #1a0f05;
background: linear-gradient(135deg, #f0c24a, var(--gold) 55%, #9a6f0a);
padding: 1.3rem 3.2rem; border: 2px solid #f6d77a; border-radius: 3px;
box-shadow: 0 0 0 4px rgba(184,134,11,0.3), 0 10px 30px rgba(0,0,0,0.5), 0 0 40px rgba(240,194,74,0.35);
transition: transform .15s, box-shadow .15s, filter .15s; animation: plea-glow 2.6s ease-in-out infinite;
}
.plea-big:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.08); box-shadow: 0 0 0 6px rgba(184,134,11,0.4), 0 14px 36px rgba(0,0,0,0.55), 0 0 55px rgba(240,194,74,0.55); }
.plea-big:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.plea-big span { display: inline-block; margin-left: 0.5rem; transition: transform .15s; }
.plea-big:hover span { transform: translateX(5px); }
@keyframes plea-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(184,134,11,0.3), 0 10px 30px rgba(0,0,0,0.5), 0 0 30px rgba(240,194,74,0.25); } 50% { box-shadow: 0 0 0 8px rgba(184,134,11,0.2), 0 10px 30px rgba(0,0,0,0.5), 0 0 55px rgba(240,194,74,0.55); } }
@media (prefers-reduced-motion: reduce) { .plea-big { animation: none; } }
@media (max-width: 600px) { .plea-big { display: block; padding: 1.15rem 0.6rem; font-size: 1.12rem; letter-spacing: 0.05em; white-space: nowrap; } .plea-big span { margin-left: 0.3rem; } }
.audio-card { margin: 1.5rem 0 0; padding: 1.1rem 1.3rem; background: linear-gradient(145deg, rgba(139,26,26,0.3), rgba(26,9,5,0.85)); border: 1px solid var(--gold); border-radius: 4px; color: var(--parchment); }
.audio-card[hidden] { display: none; }
.audio-top { display: flex; align-items: center; gap: 0.9rem; }
.audio-icon { font-size: 1.8rem; }
.audio-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-light); }
.audio-sub { font-size: 1rem; opacity: 0.9; font-style: italic; }
.audio-controls { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.9rem; }
.audio-btn { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--parchment); background: transparent; border: 1px solid rgba(184,134,11,0.6); border-radius: 2px; padding: 0.55rem 0.7rem; cursor: pointer; white-space: nowrap; }
.audio-btn:hover { background: rgba(184,134,11,0.18); }
.audio-play { width: 2.9rem; height: 2.9rem; border-radius: 50%; padding: 0; font-size: 1rem; color: #1a0f05; background: var(--gold); border-color: var(--gold); }
.audio-play:hover { background: var(--gold-light); }
#audio-seek { flex: 1; min-width: 0; accent-color: var(--gold); height: 1.6rem; cursor: pointer; }
.audio-time { font-family: 'Cinzel', serif; font-size: 0.8rem; min-width: 4.6rem; text-align: right; color: var(--parchment-dark); white-space: nowrap; }
@media (max-width: 600px) { .audio-controls { flex-wrap: wrap; } #audio-seek { flex-basis: 100%; order: 5; } .audio-time { margin-left: auto; } }
.audio-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(184,134,11,0.5); }
.audio-actions[hidden] { display: none; }
.audio-q { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: 0.7rem; text-align: center; }
.audio-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.audio-choice { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 1rem 0.8rem; font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: #1a0f05; background: linear-gradient(135deg, #f0c24a, var(--gold) 55%, #9a6f0a); border: 2px solid #f6d77a; border-radius: 3px; cursor: pointer; box-shadow: 0 0 22px rgba(240,194,74,0.3); transition: transform .15s, filter .15s; }
.audio-choice small { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.audio-choice:hover { transform: translateY(-2px); filter: brightness(1.08); }
.audio-choice--alt { background: transparent; color: var(--parchment); border-color: var(--gold); box-shadow: none; }
.audio-choice--alt:hover { background: rgba(184,134,11,0.18); filter: none; }
.audio-actions-row { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.audio-actions-row .audio-choice { flex: 1 1 14rem; }
.audio-skip { margin-top: 0.8rem; text-align: center; }
.audio-skip[hidden] { display: none; }
.audio-link { background: none; border: 0; color: var(--parchment-dark); font-family: 'EB Garamond', serif; font-size: 1rem; font-style: italic; text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) { .audio-choices { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<nav class="topbar" aria-label="Site and page navigation">
<div class="topbar-inner">
<a class="topbar-back" href="/"><span aria-hidden="true">←</span> <span class="topbar-back-long">Verse by Verse with Nate</span><span class="topbar-back-short">Back to site</span></a>
<div class="topbar-links">
<a href="#good-news" data-spy="good-news">The Case</a>
<a href="#record" data-spy="record">The Record</a>
<a href="#respond" data-spy="respond" class="topbar-plea">Your Plea</a>
<span class="topbar-sep" aria-hidden="true"></span>
<a href="/start-here" class="topbar-site">Start Here</a>
<a href="/episodes" class="topbar-site">Episodes</a>
<a href="/study" class="topbar-site">Studies</a>
</div>
</div>
</nav>
<div class="scroll-wrapper">
<header class="hero">
<div class="header-rule"></div>
<p class="hero-kicker"><span aria-hidden="true">⚖</span> The Court of Heaven Is in Session</p>
<h1>The Gospel, <span>in a Courtroom</span></h1>
<p class="hero-lead">God is the Judge. Satan is the accuser. The charges are your sins, and you are the one on trial. But a Substitute has stepped forward to take your place. Hear the case, read the record, and enter your plea.</p>
<div class="hero-actions">
<a class="hero-btn hero-btn--primary" href="#good-news">Hear the Case</a>
<a class="hero-btn" href="#record">Read the Record</a>
<a class="hero-btn" href="#respond">Enter Your Plea</a>
</div>
<p class="hero-verse">“Therefore, there is now no condemnation for those who are in Christ Jesus.” <cite>Romans 8:1</cite></p>
<div class="header-rule" style="margin-top:1.8rem;margin-bottom:0"></div>
</header>
<div class="tabbar" role="tablist" aria-label="Page sections">
<button type="button" role="tab" id="tab-case" aria-controls="panel-case" aria-selected="true" data-tab="case">The Case</button>
<button type="button" role="tab" id="tab-record" aria-controls="panel-record" aria-selected="false" data-tab="record">The Record</button>
</div>
<div class="panel" id="panel-case" role="tabpanel" aria-labelledby="tab-case">
<div class="audio-card" id="audio-card" hidden>
<div class="audio-top">
<span class="audio-icon" aria-hidden="true">🎧</span>
<div>
<p class="audio-title" id="audio-title">Listen to the case</p>
<p class="audio-sub" id="audio-sub">The case read aloud, about 10 minutes. At the end you choose your plea.</p>
</div>
</div>
<audio id="audio-el" preload="none"></audio>
<div class="audio-controls">
<button type="button" class="audio-btn audio-play" id="audio-play" aria-label="Play">▶</button>
<button type="button" class="audio-btn" id="audio-back" aria-label="Back 15 seconds">↺ 15</button>
<input type="range" id="audio-seek" min="0" max="100" value="0" step="0.1" aria-label="Seek">
<span class="audio-time" id="audio-time">0:00</span>
<button type="button" class="audio-btn audio-speed" id="audio-speed" aria-label="Playback speed">1×</button>
</div>
<div class="audio-actions" id="audio-actions" hidden></div>
<p class="audio-skip" id="audio-skip-wrap"><button type="button" class="audio-link" id="audio-skip">Skip to the plea</button></p>
</div>
<section class="gospel-message" aria-labelledby="good-news">
<div class="docket" aria-hidden="true">
<span class="docket-scales">⚖</span>
<div>
<p class="docket-court">In the Court of Heaven</p>
<p class="docket-case">The Case of <em>You</em> · Presiding: <em>God, the Righteous Judge</em> · Accuser: <em>Satan</em></p>
</div>
</div>
<h2 id="good-news">The Case and the Good News</h2>
<p class="gospel-lead">Every one of us will stand before God. The gospel is the news of how a guilty person can walk out of that courtroom free. Follow the case from the accuser’s first charge to the final pardon.</p>
<ol class="gospel-points">
<li><span class="stage">I · The Judge</span>
<strong>God is perfectly just. He will not overlook wrongdoing.</strong> Nothing is hidden from him, and he judges rightly.
<span class="verse">“Will not the Judge of all the earth do right?” <cite>Genesis 18:25</cite></span>
<span class="verse">“For He has set a day when He will judge the world with justice by the Man He has appointed.” <cite>Acts 17:31</cite></span></li>
<li><span class="stage">II · The Accuser</span>
<strong>Every courtroom has an accuser, and ours is Satan.</strong> His name means “adversary.” Scripture calls him the accuser of the brothers, who brings charges against us before God. He does not have to invent anything. He only has to point to what we have actually done.
<span class="verse">“...the accuser of our brothers, who accuses them before our God day and night.” <cite>Revelation 12:10</cite></span>
<span class="verse">“Your adversary the devil prowls around like a roaring lion, looking for someone to devour.” <cite>1 Peter 5:8</cite></span></li>
<li><span class="stage">III · The Charges</span>
<strong>The charges are the sins you have committed.</strong>
<span class="para">Sin is breaking God’s law. That includes the wrong things we knowingly do, the good things we fail to do, and the things we say and think in secret.</span>
<span class="para">It also includes breaking his law <em>without knowing it</em>. Not knowing the law has never made anyone innocent. God’s standard is written on every conscience, so no one is without excuse (Romans 1:20; 2:14–15), and even sin done unknowingly still leaves a person guilty (Leviticus 5:17).</span>
<span class="para">And God does not grade on a curve. Stumbling at one point means you have broken the whole law. <em>We have all sinned. That includes you and me.</em></span>
<span class="verse">“Everyone who practices sin practices lawlessness; indeed, sin is lawlessness.” <cite>1 John 3:4</cite></span>
<span class="verse">“For whoever keeps the whole law but stumbles at just one point is guilty of breaking all of it.” <cite>James 2:10</cite></span>
<span class="verse">“There is no one righteous, not even one.” <cite>Romans 3:10</cite></span>
<span class="verse">“For all have sinned and fall short of the glory of God.” <cite>Romans 3:23</cite></span></li>
<li><span class="stage">IV · The Verdict</span>
<strong>The evidence is clear, and there is no defense.</strong> We cannot argue our way out, and our good deeds cannot cancel our guilt. The sentence for sin is death, separation from the God who made us.
<span class="verse">“...so that every mouth may be silenced and the whole world held accountable to God.” <cite>Romans 3:19</cite></span>
<span class="verse">“For the wages of sin is death...” <cite>Romans 6:23</cite></span></li>
<li><span class="stage">V · The Substitute</span>
<strong>Then God himself stepped forward to take your place.</strong>
<span class="para">Jesus is God. The eternal Son took on flesh and was born as a baby in Bethlehem, and he came for one purpose: to take the place of sinners like you and me. He did not come to be served. He came to give his life, and the cross was always where the road was heading.</span>
<span class="para">He lived the perfect life you could not live. On the cross he took the sentence that belonged to you, and he rose again on the third day to prove the payment was accepted.</span>
<span class="para">The story below walks through his arrest, his trials, his crucifixion and his resurrection.</span>
<span class="verse">“The Word became flesh and dwelt among us.” <cite>John 1:14</cite></span>
<span class="verse">“She will bear a Son, and you are to name Him Jesus, because He will save His people from their sins.” <cite>Matthew 1:21</cite></span>
<span class="verse">“For even the Son of Man did not come to be served, but to serve, and to give His life as a ransom for many.” <cite>Mark 10:45</cite></span>
<span class="verse">“For Christ also suffered once for sins, the righteous for the unrighteous, to bring you to God.” <cite>1 Peter 3:18</cite></span>
<span class="verse">“God made Him who knew no sin to be sin for us, so that in Him we might become the righteousness of God.” <cite>2 Corinthians 5:21</cite></span>
<span class="verse">“But God proves His love for us in this: While we were still sinners, Christ died for us.” <cite>Romans 5:8</cite></span></li>
<li><span class="stage">VI · The Pardon</span>
<strong>The pardon is a gift. It cannot be earned or bought.</strong> You receive it by turning from your sin and trusting Jesus alone. When you do, God declares you forgiven and counts you righteous because of what Christ has done.
<span class="verse">“For by grace you have been saved through faith, and this is not from yourselves, but it is the gift of God, not by works, so that no one can boast.” <cite>Ephesians 2:8–9</cite></span>
<span class="verse">“If you confess with your mouth that Jesus is Lord, and believe in your heart that God raised Him from the dead, you will be saved.” <cite>Romans 10:9</cite></span></li>
<li><span class="stage">VII · The Result</span>
<strong>Case closed. The accuser has nothing left to say.</strong> Our sins were real charges, but they have been answered, because the penalty has been paid in full by the Substitute. The one who trusts in Christ is not waiting nervously for a verdict. The verdict has already been given in their favor.
<span class="verse">“Therefore, there is now no condemnation for those who are in Christ Jesus.” <cite>Romans 8:1</cite></span>
<span class="verse">“Who can bring an accusation against those whom God has chosen? It is God who justifies. Who then can condemn? Christ Jesus, who died—more than that, was raised to life—is at the right hand of God, and He is interceding for us.” <cite>Romans 8:33–34</cite></span></li>
</ol>
</section>
<aside class="record-callout" aria-labelledby="callout-h">
<p class="callout-kicker">Before you plead</p>
<h2 id="callout-h">Read what Jesus did for you.</h2>
<p>Everything above tells you <em>that</em> the Substitute took your place. The record shows you <em>how</em>: the night he was arrested, the trials where he was declared innocent and condemned anyway, the long road to the cross, and the empty tomb on the third day.</p>
<p><strong>Please do not skip it.</strong> It is the story of what Jesus did for you, told by four witnesses and woven into one account. Take your time and read it slowly. Then come back and enter your plea.</p>
<div class="callout-actions">
<a class="hero-btn hero-btn--primary" href="#record">Read what Jesus did for you →</a>
<a class="callout-skip" href="#respond">I have already read it. Take me to my plea</a>
</div>
</aside>
<section class="respond" id="respond" aria-labelledby="respond-h">
<p class="stage stage--plain">VIII · Your Plea</p>
<h2 id="respond-h">How Do You Plead?</h2>
<p class="note">The court is not asking whether you are a good person. It is asking you to be honest about the charges and to decide where you will stand: on your own record, or on what Jesus has done in your place. Choose your plea below. Have a question first? <a href="/contact?source=salvation">Ask a question about the courtroom</a>.</p>
<div class="plea-picker">
<label for="plea-select">Your plea</label>
<select id="plea-select">
<option value="">Choose your plea…</option>
<option value="guilty">Guilty: I accept the pardon</option>
<option value="not-guilty">Not guilty: I stand on my own record</option>
</select>
</div>
<div class="plea-cards" aria-label="What each plea means">
<div class="plea-card" id="card-guilty">
<h3>Guilty</h3>
<p class="plea-means"><strong>What it means:</strong> I admit it. I have broken God’s law, whether I knew it or not, and I cannot save myself. I am not asking the court to find me innocent. I am asking for the pardon Jesus paid for with his life.</p>
<p class="plea-result"><strong>What happens:</strong> The Judge declares you forgiven and counts you righteous because of Christ. The accuser has nothing left to say.</p>
</div>
<div class="plea-card" id="card-notguilty">
<h3>Not Guilty</h3>
<p class="plea-means"><strong>What it means:</strong> I stand on my own record. I believe I have kept God’s law well enough to be found innocent, and I do not need anyone to take my place.</p>
<p class="plea-result"><strong>What happens:</strong> You are judged by God’s perfect standard, with no Substitute. Be sure you understand what that means before you stand on it.</p>
</div>
</div>
<!-- GUILTY: next steps -->
<div class="plea-panel" id="plea-guilty" hidden>
<h3 class="plea-title">You have pleaded guilty. That is the beginning of the good news.</h3>
<p class="note">You are not earning anything by saying this. You are receiving a gift: “For the wages of sin is death, but the gift of God is eternal life in Christ Jesus our Lord” (Romans 6:23). Here is what to do next.</p>
<ol class="next-steps">
<li><strong>Tell God.</strong> Words do not save you. Trusting Jesus does. But you can say it to him in your own words, or you can pray something like this:
<div class="prayer">“Lord God, I plead guilty. I have sinned against you, and I cannot save myself. I believe Jesus Christ took my place on the cross, died for my sins and rose again. I turn from my sin and I trust him alone. Thank you for the pardon I could never earn. Make me new, and help me follow you. Amen.”</div></li>
<li><strong>Believe it is finished.</strong> If you meant that prayer, God has forgiven you: “Therefore, there is now no condemnation for those who are in Christ Jesus” (Romans 8:1). Your feelings may go up and down, but the verdict does not.</li>
<li><strong>Tell someone.</strong> Tell a Christian friend or family member what you decided, and tell us too (the optional form is just below).</li>
<li><strong>Start reading.</strong> Begin with the Gospel of John, then keep going through the New Testament, and talk with God every day.</li>
<li><strong>Find a church.</strong> Join a Bible-teaching church where you can grow, and be baptized as a public sign of your faith (Acts 2:38).</li>
</ol>
<div id="respond-intro">
<p class="note">If you prayed this and meant it, we would love to rejoice with you and help you take your next steps. Letting us know is completely optional.</p>
<div class="respond-actions">
<button type="button" class="btn-pray" id="btn-pray" aria-expanded="false" aria-controls="respond-form">I prayed. Let the team know</button>
</div>
<form class="respond-form" id="respond-form" novalidate>
<p class="note">Thank you for telling us. Everything below is optional. Your response is sent by email to the Verse by Verse with Nate team at versebyversewithnate.us. It is never posted publicly or shared.</p>
<input class="hp" type="text" name="_honey" tabindex="-1" autocomplete="off" aria-hidden="true">
<label for="r-name">First name</label>
<input type="text" id="r-name" name="name" maxlength="100" autocomplete="given-name">
<label for="r-email">Email (optional)</label>
<input type="email" id="r-email" name="email" maxlength="200" autocomplete="email" aria-describedby="r-email-hint">
<p class="field-hint" id="r-email-hint">If you add your email, we will send you a short confirmation message right away, and someone from the team will reach out to you personally. It is a one-time email, and we will not add you to any mailing list. If you leave it blank, we will still receive your message, but we will not be able to reply.</p>
<label for="r-msg">Anything you would like to share</label>
<textarea id="r-msg" name="message" rows="4" maxlength="2000"></textarea>
<p class="form-error" id="r-error" role="alert"></p>
<div class="respond-actions">
<button type="submit" class="btn-send" id="btn-send">Let us know</button>
<button type="button" class="btn-ghost" id="btn-cancel">Not now</button>
</div>
</form>
</div>
<div class="respond-done" id="respond-done" role="status" tabindex="-1">
<div class="sent-badge" aria-hidden="true">✓</div>
<h3 class="plea-title">Your message has been sent.</h3>
<p class="note sent-reach" id="sent-reach"></p>
<div class="sent-welcome">
<p class="sent-welcome-head">Pardoned. Welcome to the family of God.</p>
<p class="note">“Therefore, there is now no condemnation for those who are in Christ Jesus.” (Romans 8:1) You are no longer a defendant. You are a child of the Judge.</p>
<p class="note">While you wait, begin with the Gospel of John, talk to God every day, and look for a Bible-teaching church. <a href="/start-here">Start Here</a> is a good path through the podcast and studies, and you can <a href="/contact?source=salvation">ask a question</a> any time.</p>
</div>
</div>
</div>
<!-- NOT GUILTY: make sure they understand -->
<div class="plea-panel" id="plea-notguilty" hidden>
<h3 class="plea-title">You have pleaded not guilty. Please be sure you understand what that means.</h3>
<p class="note">Pleading not guilty is not just saying, “I’m not a bad person.” It is telling the Judge, “I have kept your law perfectly, and I need no one to take my place.”</p>
<p class="note">God’s standard is not “better than most people.” It is perfection, and breaking it at even one point makes a person guilty of breaking all of it. That includes the things done without knowing they were wrong.</p>
<span class="verse">“Be perfect, therefore, as your heavenly Father is perfect.” <cite>Matthew 5:48</cite></span>
<span class="verse">“For whoever keeps the whole law but stumbles at just one point is guilty of breaking all of it.” <cite>James 2:10</cite></span>
<div class="selftest">
<p class="selftest-head">Test your plea honestly</p>
<ul>
<li>Have you ever told a lie, even a small one?</li>
<li>Have you ever taken something that was not yours?</li>
<li>Have you ever used God’s name carelessly, or put something else ahead of him: money, a person, yourself?</li>
<li>Have you ever hated someone in your heart, or looked at someone with lust? Jesus said those count too (Matthew 5:21–22, 27–28).</li>
</ul>
<p class="note">If the answer to any of these is yes, then by God’s own standard the plea does not hold. “If we say that we have no sin, we are deceiving ourselves, and the truth is not in us” (1 John 1:8).</p>
</div>
<p class="note"><strong>What a not-guilty plea costs.</strong> It means standing before the Judge on your own record, with no Substitute. The sentence for sin stands (Romans 6:23). That is not what God wants for you. He says he takes no pleasure in anyone’s death (Ezekiel 33:11), and the offer of pardon is open right now: “Now is the day of salvation” (2 Corinthians 6:2).</p>
<p class="note"><strong>If you are not sure.</strong> Questions and doubts are fine. Asking honestly is not the same as refusing. You can read the record of what Jesus did, or ask us a question.</p>
<div class="respond-actions">
<button type="button" class="btn-pray" id="btn-change-plea">Change my plea to guilty</button>
<a class="btn-link" href="#record">Read the record</a>
<a class="btn-link" href="/contact?source=salvation">Ask a question</a>
</div>
</div>
</section>
</div>
<div class="panel" id="panel-record" role="tabpanel" aria-labelledby="tab-record" hidden>
<section class="record-head" id="record" aria-labelledby="record-h">
<p class="record-kicker">Part Two</p>
<h2 id="record-h">The Record of the Court</h2>
<p class="record-sub">A Gospel Harmony: the Trial, Crucifixion &amp; Resurrection of Jesus</p>
<p class="record-text">Jesus was tried in your place. The witnesses give their testimony, woven into one record of the proceedings.</p>
</section>
<div class="record-wrap">
<p class="legend-title">The Witnesses</p>
<p class="legend-sub" style="text-align:center;color:var(--parchment-dark);font-style:italic;opacity:0.8;font-size:0.95rem;margin-top:0.3rem">The four Gospel writers give testimony, and Luke’s second account, Acts, adds what happened after the resurrection. Tap a name to hear one witness on his own.</p>
<div class="legend">
<div class="legend-item" data-gospel="matt" onclick="toggleGospel('matt',this)">
<div class="legend-dot" style="background:var(--matt-color)"></div> Matthew
</div>
<div class="legend-item" data-gospel="mark" onclick="toggleGospel('mark',this)">
<div class="legend-dot" style="background:var(--mark-color)"></div> Mark
</div>
<div class="legend-item" data-gospel="luke" onclick="toggleGospel('luke',this)">
<div class="legend-dot" style="background:var(--luke-color)"></div> Luke
</div>
<div class="legend-item" data-gospel="john" onclick="toggleGospel('john',this)">
<div class="legend-dot" style="background:var(--john-color)"></div> John
</div>
<div class="legend-item" data-gospel="acts" onclick="toggleGospel('acts',this)">
<div class="legend-dot" style="background:var(--acts-color)"></div> Acts
</div>
</div>
<p class="filter-title">The Proceedings</p>
<div class="filter-bar">
<button class="filter-btn active-filter" style="border-color:var(--gold);background:var(--gold);color:var(--ink)" onclick="filterPhase('all',this)">All Events</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('arrest',this)">Arrest</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('jewish-trial',this)">Jewish Trial</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('roman-trial',this)">Roman Trial</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('crucifixion',this)">Crucifixion</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('burial',this)">Burial</button>
<button class="filter-btn" style="border-color:#555" onclick="filterPhase('resurrection',this)">Resurrection</button>
</div>
<div class="timeline" id="timeline"></div>
</div>
<section class="adjourned" aria-label="Court adjourned">
<h3>Court Is Adjourned, but the Case Is Not Over</h3>
<p>The record is complete. The accused was innocent, the sentence was real, the payment was made in full by the Substitute, and God raised him from the dead. The only question left is the one the court now puts to you.</p>
<p class="adjourned-q">How do you plead?</p>
<p class="adjourned-cta"><a class="plea-big" href="#respond">Enter Your Plea <span aria-hidden="true">→</span></a></p>
</section>
</div>
<footer class="site-foot">
<a class="foot-brand" href="/">✦ Verse by Verse with Nate</a>
<p class="foot-line">Free Bible teaching, one verse at a time.</p>
<nav class="foot-links" aria-label="More from the site">
<a class="foot-btn foot-btn--primary" href="/">← Back to the main site</a>
<a class="foot-btn" href="/start-here">Start Here</a>
<a class="foot-btn" href="/episodes">Episodes</a>
<a class="foot-btn" href="/study">Bible Studies</a>
<a class="foot-btn" href="/questions">Q&amp;A</a>
<a class="foot-btn" href="/contact?source=salvation">Ask a question</a>
</nav>
<button type="button" class="foot-share" id="btn-share">Share this page</button>
<p class="foot-note" id="share-note" role="status"></p>
<p class="foot-small">
A harmonic arrangement of Matthew 26–28, Mark 14–16, Luke 22–24, John 18–20, and Acts 1.<br>
Click any Gospel badge to open that passage in the Berean Standard Bible (BSB) at BibleHub.
</p>
</footer>
</div>
<button type="button" class="to-top" id="to-top" aria-label="Back to top">↑</button>
<script>
// BSB URL helper — BibleHub format: https://biblehub.com/bsb/matthew/26.htm
const BSB = {
matt: (ch) => `https://biblehub.com/bsb/matthew/${ch}.htm`,
mark: (ch) => `https://biblehub.com/bsb/mark/${ch}.htm`,
acts: (ch) => `https://biblehub.com/bsb/acts/${ch}.htm`,
luke: (ch) => `https://biblehub.com/bsb/luke/${ch}.htm`,
john: (ch) => `https://biblehub.com/bsb/john/${ch}.htm`,
};
const GOSPELS = ['matt','mark','luke','john','acts'];
const activeGospels = new Set(GOSPELS);
let activePhase = 'all';
const data = [
// ── PHASE 1: ARREST ──────────────────────────────────────────
{ phase:'arrest', court:{ head:"The Accused Is Taken Into Custody", text:["The night before the trial begins, the court meets in a garden. The accused is not captured by force; he gives himself up. Everything that follows is the Father’s plan and the Son’s willing choice."] }, phaseLabel:'Phase I', phaseTitle:'The Arrest in Gethsemane', events:[
{
title:'The Last Supper & Passover Meal',
body:"Jesus eats the Passover meal with his twelve disciples, institutes the Lord's Supper, and predicts his betrayal.",
gospels:['matt','mark','luke','john'],
refs:'Matt 26:20–29 · Mark 14:17–25 · Luke 22:14–23 · John 13:1–30',
unique:"John alone records Jesus washing the disciples' feet and the extended farewell discourse (John 13–17).",
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(13) }
},
{
title:"Jesus Predicts Peter's Denial",
body:"Jesus tells Peter that before the rooster crows, he will deny him three times.",
gospels:['matt','mark','luke','john'],
refs:'Matt 26:31–35 · Mark 14:27–31 · Luke 22:31–34 · John 13:36–38',
unique:'Luke adds that Jesus prayed specifically for Peter that his faith would not fail.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(13) }
},
{
title:'The Agony in Gethsemane',
body:'Jesus prays alone in the garden in great anguish: "Father, if you are willing, remove this cup from me; nevertheless, not my will, but yours, be done."',
gospels:['matt','mark','luke'],
refs:'Matt 26:36–46 · Mark 14:32–42 · Luke 22:39–46',
unique:'Luke alone records that an angel appeared to strengthen Jesus, and that his sweat became like drops of blood.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22) }
},
{
title:'Judas Arrives with the Crowd',
body:'Judas leads a crowd with swords and clubs, sent from the chief priests and elders, into the garden.',
gospels:['matt','mark','luke','john'],
refs:'Matt 26:47 · Mark 14:43 · Luke 22:47 · John 18:3',
unique:'John specifies it was a Roman cohort plus Jewish officers, and that they carried lanterns and torches.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(18) }
},
{
title:"The Betrayer's Kiss",
body:"Judas greets Jesus with a kiss as the prearranged sign of identification.",
gospels:['matt','mark','luke'],
refs:'Matt 26:48–49 · Mark 14:44–45 · Luke 22:47–48',
unique:'John omits the kiss; instead Jesus steps forward and declares "I am he," causing the crowd to fall to the ground.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22) }
},
{
title:'Jesus Identifies Himself — "I Am He" (John)',
body:'Jesus asks "Whom do you seek?" When they say "Jesus of Nazareth," he says "I am he," and the entire crowd falls backward to the ground.',
gospels:['john'],
refs:'John 18:4–9',
unique:'Unique to John — a powerful "I Am" moment that echoes the divine name.',
bsbLinks:{ john:BSB.john(18) }
},
{
title:"The Servant's Ear Cut Off",
body:"One of those with Jesus draws a sword and cuts off the right ear of the high priest's servant, Malchus.",
gospels:['matt','mark','luke','john'],
refs:'Matt 26:51 · Mark 14:47 · Luke 22:50 · John 18:10',
unique:'Only John names the attacker as Peter and the servant as Malchus. Only Luke records that Jesus healed the ear.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(18) }
},
{
title:'Jesus Rebukes the Sword & Surrenders',
body:'"Put your sword back in its place. Shall I not drink the cup the Father has given me?" Then all the disciples fled.',
gospels:['matt','mark','luke','john'],
refs:'Matt 26:52–56 · Mark 14:48–50 · Luke 22:51–53 · John 18:11',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(18) }
},
{
title:'The Young Man Who Fled (Mark)',
body:'A young man follows Jesus wearing only a linen cloth; when seized, he leaves the cloth behind and flees naked.',
gospels:['mark'],
refs:'Mark 14:51–52',
unique:'Unique to Mark — possibly a self-reference by the author.',
bsbLinks:{ mark:BSB.mark(14) }
},
]},
// ── PHASE 2: JEWISH TRIAL ─────────────────────────────────────
{ phase:'jewish-trial', court:{ head:"The Hearing Before the Religious Court", text:["Witnesses are called, but their testimony does not agree (Mark 14:56). In the end the verdict comes from the accused’s own lips, when he truthfully claims who he is. The Judge of all the earth stands in the dock, and he is found “guilty” of blasphemy by men who would not believe him."] }, phaseLabel:'Phase II', phaseTitle:'The Jewish Trial', events:[
{
title:'Jesus Led to Annas (John)',
body:"Jesus is first brought to Annas, father-in-law of Caiaphas, who questions Jesus about his disciples and teaching.",
gospels:['john'],
refs:'John 18:12–14, 19–24',
unique:'Unique to John. After the interrogation, Annas sends Jesus bound to Caiaphas.',
bsbLinks:{ john:BSB.john(18) }
},
{
title:"Peter Follows to the Courtyard",
body:"Peter and another disciple follow Jesus to the high priest's courtyard. Peter stands warming himself by the fire.",
gospels:['matt','mark','luke','john'],
refs:'Matt 26:58 · Mark 14:54 · Luke 22:54–55 · John 18:15–16',
unique:"John identifies 'another disciple' known to the high priest who helped Peter gain entry.",
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(18) }
},
{
title:'The Trial Before Caiaphas & the Sanhedrin',
body:"The Sanhedrin assembles and seeks false testimony against Jesus. Many false witnesses come, but their testimony does not agree.",
gospels:['matt','mark'],
refs:'Matt 26:57, 59–61 · Mark 14:53, 55–59',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14) }
},
{
title:'"Are You the Christ?" — The High Priest\'s Question',
body:'"I adjure you by the living God, tell us if you are the Christ, the Son of God." Jesus answered, "You have said so. But I tell you, from now on you will see the Son of Man seated at the right hand of Power."',
gospels:['matt','mark','luke'],
refs:'Matt 26:63–64 · Mark 14:61–62 · Luke 22:66–70',
unique:"Luke places a formal Sanhedrin inquiry at daybreak. Mark records Jesus' most direct 'I am' reply.",
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22) }
},
{
title:'The Verdict: Blasphemy — Deserving Death',
body:'The high priest tears his robes: "He has uttered blasphemy!" The assembly declares Jesus deserves death and begins spitting on him, striking him, and mocking him.',
gospels:['matt','mark','luke'],
refs:'Matt 26:65–68 · Mark 14:63–65 · Luke 22:63–65',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22) }
},
{
title:"Peter's Three Denials",
body:"As Jesus is being tried, Peter denies knowing him three times — to a servant girl, another servant, and bystanders — and the rooster crows.",
gospels:['matt','mark','luke','john'],
refs:'Matt 26:69–75 · Mark 14:66–72 · Luke 22:56–62 · John 18:17–18, 25–27',
unique:'Luke alone records that Jesus turned and looked at Peter, and Peter went out and wept bitterly.',
bsbLinks:{ matt:BSB.matt(26), mark:BSB.mark(14), luke:BSB.luke(22), john:BSB.john(18) }
},
{
title:"Judas's Remorse & Death (Matthew)",
body:"Judas sees that Jesus has been condemned, brings the thirty pieces of silver back to the chief priests, and goes and hangs himself. The priests use the money to buy the Potter's Field.",
gospels:['matt'],
refs:'Matt 27:3–10',
unique:'Unique to Matthew. Acts 1:18–19 offers a parallel account of Judas\'s end.',
bsbLinks:{ matt:BSB.matt(27) }
},
{
title:'Early Morning Formal Condemnation',
body:'At daybreak the chief priests and the whole council hold a formal session and bind Jesus to hand him over to Pilate.',
gospels:['matt','mark','luke'],
refs:'Matt 27:1–2 · Mark 15:1 · Luke 22:66–23:1',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
]},
// ── PHASE 3: ROMAN TRIAL ──────────────────────────────────────
{ phase:'roman-trial', court:{ head:"The Trial Before the Governor", text:["Now the case moves to the civil court, and the verdict reverses. Pilate examines the accused and declares him innocent again and again: “I find no basis for a charge” (John 18:38; Luke 23:4, 14–15, 22). Yet the crowd demands a conviction. A guilty man, Barabbas, is released, and the innocent one is condemned in his place. This is the gospel in a single exchange."] }, phaseLabel:'Phase III', phaseTitle:'The Roman Trial Before Pilate', events:[
{
title:'Jesus Brought Before Pilate',
body:"The Jewish leaders bring Jesus to Pilate's headquarters. They do not enter so as not to be defiled before Passover. They accuse Jesus of misleading the nation, opposing taxes, and claiming to be King.",
gospels:['matt','mark','luke','john'],
refs:'Matt 27:2,11 · Mark 15:1–2 · Luke 23:1–2 · John 18:28–32',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(18) }
},
{
title:'"Are You the King of the Jews?" — Pilate\'s First Question',
body:'"Are you the King of the Jews?" Jesus replies, "You have said so" — or in John\'s longer account, "My kingdom is not of this world."',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:11 · Mark 15:2 · Luke 23:3 · John 18:33–37',
unique:'John records the extensive private exchange between Pilate and Jesus about kingship and truth.',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(18) }
},
{
title:'Jesus Silent Before Accusations',
body:'As the chief priests heap on charges, Jesus gives no answer, so that Pilate is greatly amazed.',
gospels:['matt','mark'],
refs:'Matt 27:12–14 · Mark 15:3–5',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15) }
},
{
title:'Jesus Sent to Herod Antipas (Luke)',
body:"Learning Jesus is from Galilee, Pilate sends him to Herod, who is in Jerusalem. Herod questions Jesus at length but Jesus says nothing. Herod mocks him, dresses him in splendid clothing, and sends him back.",
gospels:['luke'],
refs:'Luke 23:6–12',
unique:'Unique to Luke. Luke notes this made Herod and Pilate friends that day.',
bsbLinks:{ luke:BSB.luke(23) }
},
{
title:'Pilate Declares Jesus Innocent',
body:'Pilate announces he finds no guilt in Jesus, and that neither does Herod. He offers to release one prisoner according to the custom.',
gospels:['luke','john'],
refs:'Luke 23:13–16 · John 18:38–19:6',
unique:"Luke alone notes three formal declarations of innocence by Pilate.",
bsbLinks:{ luke:BSB.luke(23), john:BSB.john(18) }
},
{
title:'Barabbas Released — Jesus Condemned',
body:'The crowd chooses to release Barabbas, a notorious rebel and murderer, instead of Jesus. The crowd shouts "Crucify him!"',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:15–23 · Mark 15:6–14 · Luke 23:18–23 · John 18:39–40',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(18) }
},
{
title:"Pilate's Wife's Warning (Matthew)",
body:'"Have nothing to do with that righteous man, for I have suffered much over him today in a dream."',
gospels:['matt'],
refs:'Matt 27:19',
unique:'Unique to Matthew.',
bsbLinks:{ matt:BSB.matt(27) }
},
{
title:"Pilate Washes His Hands (Matthew)",
body:'Pilate takes water and washes his hands before the crowd: "I am innocent of this man\'s blood." The people respond, "His blood be on us and on our children."',
gospels:['matt'],
refs:'Matt 27:24–25',
unique:'Unique to Matthew.',
bsbLinks:{ matt:BSB.matt(27) }
},
{
title:'"Behold the Man" — Ecce Homo (John)',
body:'Pilate leads Jesus out wearing the crown of thorns and a purple robe: "Behold the man!" The chief priests cry "Crucify him!"',
gospels:['john'],
refs:'John 19:4–7',
unique:'Unique to John.',
bsbLinks:{ john:BSB.john(19) }
},
{
title:'"Son of God" Accusation Frightens Pilate (John)',
body:'When the Jews say Jesus made himself the Son of God, Pilate is even more afraid and questions Jesus again about his origin, but Jesus gives no answer.',
gospels:['john'],
refs:'John 19:8–11',
unique:"Unique to John — Jesus' declaration that Pilate's authority comes from above.",
bsbLinks:{ john:BSB.john(19) }
},
{
title:"The Soldiers' Mockery",
body:"Pilate's soldiers strip Jesus, put a scarlet/purple robe on him, press a crown of thorns on his head, put a reed in his right hand, kneel before him mockingly, spit on him, and strike him.",
gospels:['matt','mark','john'],
refs:'Matt 27:27–31 · Mark 15:16–20 · John 19:2–3',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), john:BSB.john(19) }
},
{
title:'Final Condemnation — Jesus Handed Over',
body:'Pilate, seeking to release Jesus but fearful of the cry "You are no friend of Caesar!", finally hands Jesus over to be crucified.',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:26 · Mark 15:15 · Luke 23:24–25 · John 19:12–16',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
]},
// ── PHASE 4: CRUCIFIXION ──────────────────────────────────────
{ phase:'crucifixion', court:{ head:"The Sentence Is Carried Out", text:["The sentence is passed and carried out. Everything the law demanded for sin, the penalty our verdict deserved, falls on the Substitute. Hear the words he cries at the end: “It is finished.” The debt is paid in full."] }, phaseLabel:'Phase IV', phaseTitle:'The Way of the Cross & Crucifixion', events:[
{
title:'Jesus Carries His Cross',
body:'Jesus goes out carrying his own cross to the place called Golgotha, "The Place of a Skull."',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:31–32 · Mark 15:20–21 · Luke 23:26 · John 19:17',
unique:'John uniquely emphasizes Jesus carried his own cross (echoing Isaac carrying wood in Gen 22). The Synoptics record Simon of Cyrene being compelled to carry it.',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
{
title:'Simon of Cyrene Carries the Cross',
body:'Coming in from the country, Simon of Cyrene is seized and compelled to carry the cross behind Jesus.',
gospels:['matt','mark','luke'],
refs:'Matt 27:32 · Mark 15:21 · Luke 23:26',
unique:"Mark names Simon's sons, Alexander and Rufus, suggesting they were known to Mark's community.",
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'Jesus Addresses the Daughters of Jerusalem (Luke)',
body:'"Daughters of Jerusalem, do not weep for me, but weep for yourselves and for your children... For if they do these things when the wood is green, what will happen when it is dry?"',
gospels:['luke'],
refs:'Luke 23:27–31',
unique:'Unique to Luke.',
bsbLinks:{ luke:BSB.luke(23) }
},
{
title:'The Offer of Wine Mixed with Gall/Myrrh',
body:'Before the crucifixion, soldiers offer Jesus wine mixed with gall (or myrrh) — a narcotic to dull the pain — but Jesus refuses after tasting it.',
gospels:['matt','mark'],
refs:'Matt 27:34 · Mark 15:23',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15) }
},
{
title:'The Crucifixion — The Third Hour',
body:'Jesus is crucified between two criminals. The soldiers cast lots for his garments, fulfilling Psalm 22:18.',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:35 · Mark 15:24–25 · Luke 23:33 · John 19:18, 23–24',
unique:"John uniquely emphasizes the lot-casting fulfills Scripture and describes the tunic as seamless (echoing the high priest's garment).",
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
{
title:'The Title on the Cross: "King of the Jews"',
body:'Pilate has a notice written in Hebrew, Greek, and Latin: "Jesus of Nazareth, the King of the Jews."',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:37 · Mark 15:26 · Luke 23:38 · John 19:19–22',
unique:'John alone records the Jewish leaders\' protest and Pilate\'s firm reply: "What I have written, I have written."',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
{
title:'The Mockery at the Cross',
body:'Passersby wag their heads: "You who would destroy the temple, save yourself!" The chief priests, scribes, and elders join in mocking.',
gospels:['matt','mark','luke'],
refs:'Matt 27:39–44 · Mark 15:29–32 · Luke 23:35–37',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'One Criminal Repents — "Remember Me" (Luke)',
body:'One criminal joins the mockery. The other rebukes him and says, "Jesus, remember me when you come into your kingdom." Jesus replies, "Today you will be with me in paradise."',
gospels:['luke'],
refs:'Luke 23:39–43',
unique:'Unique to Luke — the only death-row conversion recorded in the Gospels.',
bsbLinks:{ luke:BSB.luke(23) }
},
{
title:"Jesus Entrusts His Mother to the Beloved Disciple (John)",
body:'"Woman, behold your son... Behold your mother." From that hour the disciple took her into his own home.',
gospels:['john'],
refs:'John 19:25–27',
unique:'Unique to John.',
bsbLinks:{ john:BSB.john(19) }
},
{
title:'Darkness Over the Land — Three Hours',
body:'From the sixth hour (noon) to the ninth hour (3 p.m.), darkness covers all the land.',
gospels:['matt','mark','luke'],
refs:'Matt 27:45 · Mark 15:33 · Luke 23:44',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'"My God, My God, Why Have You Forsaken Me?"',
body:'About the ninth hour Jesus cries out, "Eloi, Eloi, lema sabachthani?" — quoting Psalm 22:1. Some bystanders think he is calling for Elijah.',
gospels:['matt','mark'],
refs:'Matt 27:46–47 · Mark 15:34–35',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15) }
},
{
title:'"I Thirst" (John)',
body:'Jesus says "I thirst." A sponge soaked in sour wine is put on a hyssop branch and offered to him.',
gospels:['john'],
refs:'John 19:28–29',
unique:"John frames this as Jesus knowing 'all was now finished, to fulfill Scripture' (Ps 22:15; 69:21). The hyssop branch echoes the Passover lamb.",
bsbLinks:{ john:BSB.john(19) }
},
{
title:'"Father, Forgive Them" (Luke)',
body:'"Father, forgive them, for they know not what they do."',
gospels:['luke'],
refs:'Luke 23:34',
unique:'Unique to Luke.',
bsbLinks:{ luke:BSB.luke(23) }
},
{
title:'"It Is Finished" — Tetelestai (John)',
body:'Jesus says, "It is finished" (τετέλεσται — tetelestai, meaning "paid in full"). He bows his head and gives up his spirit.',
gospels:['john'],
refs:'John 19:30',
unique:'Unique to John — the climactic proclamation of completed redemption.',
bsbLinks:{ john:BSB.john(19) }
},
{
title:'"Father, Into Your Hands I Commit My Spirit" (Luke)',
body:'With a loud cry, Jesus says, "Father, into your hands I commit my spirit!" (quoting Psalm 31:5), and breathes his last.',
gospels:['luke'],
refs:'Luke 23:46',
unique:'Unique to Luke.',
bsbLinks:{ luke:BSB.luke(23) }
},
{
title:'Jesus Breathes His Last & The Temple Curtain Torn',
body:'Jesus utters a loud cry and breathes his last. The curtain of the temple is torn in two, from top to bottom.',
gospels:['matt','mark','luke'],
refs:'Matt 27:50–51 · Mark 15:37–38 · Luke 23:45–46',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'Earthquake, Rocks Split & Tombs Opened (Matthew)',
body:'The earth shakes and rocks split. Tombs are opened and many saints who had fallen asleep are raised, appearing to many in Jerusalem after the resurrection.',
gospels:['matt'],
refs:'Matt 27:51–53',
unique:'Unique to Matthew — a remarkable eschatological sign accompanying the death of Christ.',
bsbLinks:{ matt:BSB.matt(27) }
},
{
title:"The Centurion's Confession",
body:'The Roman centurion, seeing how Jesus died, declares: "Truly this man was the Son of God!" (Matt/Mark) or "Certainly this man was innocent!" (Luke).',
gospels:['matt','mark','luke'],
refs:'Matt 27:54 · Mark 15:39 · Luke 23:47',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'The Women Watching from a Distance',
body:'Many women who followed Jesus from Galilee look on from a distance, including Mary Magdalene, Mary the mother of James and Joseph, and Salome.',
gospels:['matt','mark','luke'],
refs:'Matt 27:55–56 · Mark 15:40–41 · Luke 23:49',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:"Soldiers Break No Bones — Spear Thrust (John)",
body:"To hasten death, soldiers break the legs of the two criminals. Finding Jesus already dead, a soldier pierces his side with a spear, and blood and water immediately flow out.",
gospels:['john'],
refs:'John 19:31–37',
unique:"Unique to John. He sees this fulfilling 'Not one of his bones will be broken' (Ex 12:46; Ps 34:20) and Zechariah 12:10.",
bsbLinks:{ john:BSB.john(19) }
},
]},
// ── PHASE 5: BURIAL ──────────────────────────────────────────
{ phase:'burial', court:{ head:"The Sentence Served, the Case Sealed", text:["The death is certified, the body is claimed, and the tomb is sealed and guarded. The court records show that the sentence has been served in full. But the case is not over."] }, phaseLabel:'Phase V', phaseTitle:'The Burial of Jesus', events:[
{
title:'Joseph of Arimathea Requests the Body',
body:"Joseph of Arimathea, a respected council member and secret disciple, goes to Pilate and asks for the body of Jesus. Pilate confirms with the centurion that Jesus is dead and grants the request.",
gospels:['matt','mark','luke','john'],
refs:'Matt 27:57–58 · Mark 15:42–45 · Luke 23:50–52 · John 19:38',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
{
title:'Nicodemus Brings Spices (John)',
body:"Nicodemus, who had come to Jesus by night, brings a mixture of myrrh and aloes — about seventy-five pounds.",
gospels:['john'],
refs:'John 19:39',
unique:'Unique to John. The extravagant amount of spices honors Jesus as royalty.',
bsbLinks:{ john:BSB.john(19) }
},
{
title:'The Body Wrapped & Laid in the Tomb',
body:'The body is wrapped in a clean linen shroud and laid in a new tomb cut from rock, in which no one had yet been buried. A large stone is rolled against the entrance.',
gospels:['matt','mark','luke','john'],
refs:'Matt 27:59–60 · Mark 15:46 · Luke 23:53 · John 19:40–42',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23), john:BSB.john(19) }
},
{
title:'The Women See Where He Is Laid',
body:'Mary Magdalene and Mary the mother of Joses observe where Jesus is laid. They return home and prepare spices and ointments.',
gospels:['matt','mark','luke'],
refs:'Matt 27:61 · Mark 15:47 · Luke 23:55–56',
bsbLinks:{ matt:BSB.matt(27), mark:BSB.mark(15), luke:BSB.luke(23) }
},
{
title:'The Guard Placed at the Tomb (Matthew)',
body:"The chief priests and Pharisees ask Pilate to secure the tomb, fearing the disciples will steal the body and claim a resurrection. Pilate gives them a guard; they seal the stone.",
gospels:['matt'],
refs:'Matt 27:62–66',
unique:'Unique to Matthew — sets up the resurrection narrative in Matthew 28.',
bsbLinks:{ matt:BSB.matt(27) }
},
]},
{ phase:'resurrection', court:{ head:'The Verdict Overturned', text:[
"The court meets again at dawn, and what the world called the end becomes the evidence that settles everything. The tomb is empty, the stone is rolled away, and the risen Jesus appears alive to many witnesses. Even the cover story the authorities invent (Matthew 28:11–15) only confirms that the body was gone.",
"This is the Father’s public ruling. Jesus “was delivered over to death for our trespasses and was raised to life for our justification” (Romans 4:25). The sentence he served in our place is accepted, death has no more claim on him, and everyone who trusts him receives the same verdict: forgiven, and declared righteous."
] }, phaseLabel:'Phase VI', phaseTitle:'The Resurrection of Jesus', events:[
{
title:'The Women Come to the Tomb at Dawn',
body:'Very early on the first day of the week, Mary Magdalene and the other women come to the tomb with spices and find the great stone already rolled away from the entrance.',
gospels:['matt','mark','luke','john'],
refs:'Matt 28:1–4 · Mark 16:1–4 · Luke 24:1–2 · John 20:1',
unique:'Matthew alone records the great earthquake and the angel of the Lord rolling back the stone, so that the guards shook with fear and became like dead men (Matt 28:2–4).',
bsbLinks:{ matt:BSB.matt(28), mark:BSB.mark(16), luke:BSB.luke(24), john:BSB.john(20) }
},
{
title:'The Angels Announce: "He Has Risen"',
body:'An angel tells the frightened women, "He is not here; He has risen, just as He said." They are invited to see the place where he lay and sent to tell his disciples.',
gospels:['matt','mark','luke'],
refs:'Matt 28:5–8 · Mark 16:5–8 · Luke 24:3–8',
unique:'Luke records two men in dazzling clothes who remind the women that Jesus had told them he would rise on the third day (Luke 24:4–8).',
bsbLinks:{ matt:BSB.matt(28), mark:BSB.mark(16), luke:BSB.luke(24) }
},
{
title:'Peter and John Run to the Tomb',
body:'Mary Magdalene tells Peter and John that the body is gone. They run to the tomb and find the linen cloths lying there, and the face cloth folded up by itself.',
gospels:['luke','john'],
refs:'Luke 24:12 · John 20:2–10',
unique:'John alone records that the other disciple outran Peter, went in, and "saw and believed" (John 20:8).',
bsbLinks:{ luke:BSB.luke(24), john:BSB.john(20) }
},
{
title:'Jesus Appears to Mary Magdalene (John)',
body:'Weeping outside the tomb, Mary meets a man she takes to be the gardener. When he speaks her name, she recognizes her risen Lord and is sent to tell the disciples, "I have seen the Lord."',
gospels:['john'],
refs:'John 20:11–18',
unique:'Unique to John — the first person to see the risen Jesus recognizes him only when he says her name.',
bsbLinks:{ john:BSB.john(20) }
},
{
title:'Jesus Meets the Women on the Road (Matthew)',
body:'As the women hurry to tell the disciples, Jesus meets them. They take hold of his feet and worship him, and he tells them not to be afraid and to send word to his brothers to go to Galilee.',
gospels:['matt'],
refs:'Matt 28:9–10',
bsbLinks:{ matt:BSB.matt(28) }
},
{
title:"The Guards' Report & the Bribe (Matthew)",
body:'Some of the guards report everything to the chief priests. The elders give the soldiers a large sum of money and tell them to say the disciples stole the body while they slept.',
gospels:['matt'],
refs:'Matt 28:11–15',
unique:'Unique to Matthew — the authorities tamper with the evidence, and Matthew notes the story was still being told "to this day."',
bsbLinks:{ matt:BSB.matt(28) }
},
{
title:'The Road to Emmaus (Luke)',
body:'Two disciples walking to Emmaus are joined by Jesus, whom they do not recognize. He explains from Moses and all the Prophets that the Christ had to suffer and enter his glory. They know him when he breaks the bread, and they hurry back to Jerusalem.',
gospels:['luke'],
refs:'Luke 24:13–35',
unique:'Unique to Luke — Jesus shows from all the Scriptures that the cross and the resurrection were the plan all along.',
bsbLinks:{ luke:BSB.luke(24) }
},
{
title:'Jesus Appears to the Disciples',
body:'That evening Jesus stands among the gathered disciples: "Peace be with you." He shows them his hands and side, and they rejoice when they see the Lord.',
gospels:['luke','john'],
refs:'Luke 24:36–49 · John 20:19–23',
unique:'Luke records Jesus eating a piece of broiled fish to show he is no ghost (Luke 24:39–43). John records him breathing on them: "Receive the Holy Spirit" (John 20:22).',
bsbLinks:{ luke:BSB.luke(24), john:BSB.john(20) }
},
{
title:'Thomas Sees and Believes (John)',
body:'Thomas, who was absent, says he will not believe unless he touches the wounds. A week later Jesus appears again and invites him to touch, and Thomas answers, "My Lord and my God!"',
gospels:['john'],
refs:'John 20:24–29',
unique:'Jesus adds, "Blessed are those who have not seen and yet believe" (John 20:29).',
bsbLinks:{ john:BSB.john(20) }
},
{
title:'The Great Commission',
body:'Jesus declares that all authority in heaven and on earth has been given to him, and sends his disciples to make disciples of all nations, teaching them to obey all he has commanded. Acts adds his promise that they will receive power when the Holy Spirit comes on them and will be his witnesses in Jerusalem, in all Judea and Samaria, and to the ends of the earth.',
gospels:['matt','luke','acts'],
refs:'Matt 28:16–20 · Luke 24:44–49 · Acts 1:4–8',
unique:'Luke records that repentance and forgiveness of sins are to be proclaimed in his name to all nations (Luke 24:46–47). Acts 1:8 gives the plan: Jerusalem, Judea and Samaria, and the ends of the earth.',
bsbLinks:{ matt:BSB.matt(28), luke:BSB.luke(24), acts:BSB.acts(1) }
},
{
title:'The Ascension (Luke & Acts)',
body:'Jesus leads his disciples out to Bethany, lifts his hands in blessing, and is taken up into heaven. They worship him and return to Jerusalem with great joy. Acts adds that he had appeared to them over forty days, and that as they watched, a cloud took him out of their sight.',
gospels:['luke','acts'],
refs:'Luke 24:50–53 · Acts 1:1–11',
unique:'Luke’s second volume, Acts, repeats and expands the account: forty days of appearances, the promise of the Holy Spirit and power to be his witnesses, and the promise of two men in white that Jesus will return in the same way he went (Acts 1:3–11).',
bsbLinks:{ luke:BSB.luke(24), acts:BSB.acts(1) }
},
]},
];
function buildTimeline() {
const container = document.getElementById('timeline');
container.innerHTML = '';
const colorMap = { matt:'var(--matt-color)', mark:'var(--mark-color)', luke:'var(--luke-color)', john:'var(--john-color)', acts:'var(--acts-color)' };
let exhibitNo = 0;
data.forEach(phase => {
const phHeader = document.createElement('div');
phHeader.className = 'phase-header';
phHeader.setAttribute('data-phase', phase.phase);
phHeader.innerHTML = `<div class="phase-node"></div><span class="phase-label">${phase.phaseLabel}</span><span class="phase-title">${phase.phaseTitle}</span>`;
container.appendChild(phHeader);
if (phase.court) {
const note = document.createElement('div');
note.className = 'court-note';
note.setAttribute('data-phase', phase.phase);
note.innerHTML = `<div class="court-note-head">The Court Record · ${phase.court.head}</div>` + phase.court.text.map(t => `<p>${t}</p>`).join('');
container.appendChild(note);
}
phase.events.forEach(ev => {
const card = document.createElement('div');
card.className = 'event-card';
card.setAttribute('data-gospels', ev.gospels.join(' '));
card.setAttribute('data-phase', phase.phase);
const borderColor = ev.gospels.length === 4 ? 'var(--crimson)' : colorMap[ev.gospels[0]];
card.style.borderLeftColor = borderColor;
const badges = ev.gospels.map(g => {
const url = ev.bsbLinks && ev.bsbLinks[g];
const label = g.charAt(0).toUpperCase() + g.slice(1);
if (url) {
return `<a class="badge badge-${g}" href="${url}" target="_blank" rel="noopener" title="Open ${label} in BSB">${label} ↗</a>`;
}
return `<span class="badge badge-${g}">${label}</span>`;
}).join('');
const uniqueNote = ev.unique ? `<div class="unique-note">✦ ${ev.unique}</div>` : '';
exhibitNo += 1;
card.innerHTML = `
<span class="exhibit">Exhibit ${exhibitNo}</span>
<div class="event-title">${ev.title}</div>
<div class="event-body">${ev.body}</div>
<div class="gospel-badges">${badges}</div>
<div class="ref-text">${ev.refs}</div>
${uniqueNote}
`;
container.appendChild(card);
});
});
applyFilters();
}
// After a filter shortens the page, the browser would leave the reader at the bottom (on the
// plea and footer). Bring them back to the top of the results instead.
function resetScrollToResults() {
const timeline = document.getElementById('timeline');
const bar = document.querySelector('.filter-bar');
const barH = document.querySelector('.topbar').offsetHeight + document.querySelector('.tabbar').offsetHeight + (bar ? bar.offsetHeight : 0);
const top = timeline.getBoundingClientRect().top + window.scrollY - barH - 12;
if (window.scrollY > top) window.scrollTo({ top: Math.max(top, 0), behavior: 'auto' });
}
function applyFilters() {
document.querySelectorAll('.event-card').forEach(card => {
const cPhase = card.getAttribute('data-phase');
const cGospels = card.getAttribute('data-gospels').split(' ');
const phaseOk = activePhase === 'all' || cPhase === activePhase;
const gospelOk = cGospels.some(g => activeGospels.has(g));
card.classList.toggle('hidden', !phaseOk || !gospelOk);
});
document.querySelectorAll('.phase-header, .court-note').forEach(h => {
const hPhase = h.getAttribute('data-phase');
h.style.display = (activePhase === 'all' || hPhase === activePhase) ? '' : 'none';
});
}
function toggleGospel(gospel, el) {
if (activeGospels.has(gospel)) {
if (activeGospels.size === 1) return;
activeGospels.delete(gospel);
el.classList.add('dimmed');
} else {
activeGospels.add(gospel);
el.classList.remove('dimmed');
}
applyFilters();
resetScrollToResults();
}
function filterPhase(phase, btn) {
activePhase = phase;
document.querySelectorAll('.filter-btn').forEach(b => {
b.classList.remove('active-filter');
b.style.background = 'transparent';
b.style.color = 'var(--parchment-dark)';
b.style.borderColor = '#555';
});
btn.classList.add('active-filter');
btn.style.background = 'var(--gold)';
btn.style.color = 'var(--ink)';
btn.style.borderColor = 'var(--gold)';
applyFilters();
resetScrollToResults();
}
buildTimeline();
// ── Tabs, navigation, plea ───────────────────────────────────
(function () {
const tabs = { case: document.getElementById('panel-case'), record: document.getElementById('panel-record') };
const tabBtns = document.querySelectorAll('.tabbar [data-tab]');
const recordIds = new Set(['record', 'record-h']);
function showTab(name) {
Object.keys(tabs).forEach(function (k) { tabs[k].hidden = (k !== name); });
tabBtns.forEach(function (b) { b.setAttribute('aria-selected', b.getAttribute('data-tab') === name ? 'true' : 'false'); });
document.querySelectorAll('[data-spy="good-news"]').forEach(function (a) { a.classList.toggle('active', name === 'case'); });
document.querySelectorAll('[data-spy="record"]').forEach(function (a) { a.classList.toggle('active', name === 'record'); });
}
function route(scroll) {
const id = decodeURIComponent(location.hash.slice(1));
const name = recordIds.has(id) || (id && tabs.record.querySelector('#' + CSS.escape(id))) ? 'record' : 'case';
showTab(name);
const target = id ? document.getElementById(id) : null;
if (scroll) {
if (target) target.scrollIntoView({ block: 'start' });
else window.scrollTo({ top: document.querySelector('.tabbar').offsetTop - document.querySelector('.topbar').offsetHeight, behavior: 'auto' });
}
}
tabBtns.forEach(function (b) {
b.addEventListener('click', function () {
const name = b.getAttribute('data-tab');
history.pushState(null, '', name === 'record' ? '#record' : '#good-news');
route(true);
});
});
window.addEventListener('hashchange', function () { route(true); });
route(location.hash.length > 1);
// back to top + share
const toTop = document.getElementById('to-top');
window.addEventListener('scroll', function () { toTop.classList.toggle('show', window.scrollY > 600); }, { passive: true });
toTop.addEventListener('click', function () { window.scrollTo({ top: 0, behavior: 'smooth' }); });
const share = document.getElementById('btn-share');
const note = document.getElementById('share-note');
share.addEventListener('click', async function () {
const url = location.origin + '/salvation';
const data = { title: 'The Gospel, in a Courtroom', text: 'The good news of Jesus, presented as a courtroom case.', url: url };
try {
if (navigator.share) { await navigator.share(data); return; }
await navigator.clipboard.writeText(url);
note.textContent = 'Link copied. Thank you for sharing the good news.';
} catch (e) {
note.textContent = 'You can copy the address from your browser to share this page.';
}
});
// ── Audio narration (shown only when URLs are set in Admin → Gospel Page) ──
// The listener hears the case, then chooses Guilty or Not guilty and hears that branch.
fetch('/api/salvation-audio').then(function (r) { return r.ok ? r.json() : {}; }).then(function (d) {
if (!d || !d.url) return;
const card = document.getElementById('audio-card');
const el = document.getElementById('audio-el');
const playBtn = document.getElementById('audio-play');
const seek = document.getElementById('audio-seek');
const timeEl = document.getElementById('audio-time');
const speedBtn = document.getElementById('audio-speed');
const titleEl = document.getElementById('audio-title');
const subEl = document.getElementById('audio-sub');
const actions = document.getElementById('audio-actions');
const skipWrap = document.getElementById('audio-skip-wrap');
let part = 'case';
el.src = d.url;
card.hidden = false;
const fmt = function (t) { if (!isFinite(t)) return '0:00'; const m = Math.floor(t / 60); const s = Math.floor(t % 60); return m + ':' + (s < 10 ? '0' : '') + s; };
const paint = function () {
seek.value = el.duration ? (el.currentTime / el.duration) * 100 : 0;
timeEl.textContent = fmt(el.currentTime) + (el.duration ? ' / ' + fmt(el.duration) : '');
};
const setPlayIcon = function (playing) { playBtn.textContent = playing ? '❚❚' : '▶'; playBtn.setAttribute('aria-label', playing ? 'Pause' : 'Play'); };
const button = function (cls, html, onClick) {
const b = document.createElement('button');
b.type = 'button'; b.className = cls; b.innerHTML = html; b.addEventListener('click', onClick);
return b;
};
const show = function (nodes) { actions.innerHTML = ''; nodes.forEach(function (n) { actions.appendChild(n); }); actions.hidden = false; };
const hideActions = function () { actions.hidden = true; actions.innerHTML = ''; };
const reveal = function () { card.scrollIntoView({ behavior: 'smooth', block: 'center' }); };
function showChoice() {
skipWrap.hidden = true;
const wrap = document.createElement('div');
const q = document.createElement('p'); q.className = 'audio-q'; q.textContent = 'How do you plead?';
const row = document.createElement('div'); row.className = 'audio-choices';
row.appendChild(button('audio-choice', 'Guilty<small>I accept the pardon</small>', function () { plead('guilty'); }));
row.appendChild(button('audio-choice audio-choice--alt', 'Not guilty<small>I stand on my own record</small>', function () { plead('not-guilty'); }));
wrap.appendChild(q); wrap.appendChild(row);
show([wrap]);
}
function playPart(name, url, title, sub) {
part = name;
hideActions();
titleEl.textContent = title; subEl.textContent = sub;
el.src = url; el.playbackRate = el.playbackRate || 1;
el.play().catch(function () {});
}
function plead(value) {
skipWrap.hidden = true;
// Keep the page in step with the audio: select the plea and open its panel without scrolling away.
choose(value, { scroll: false, setSelect: true });
const url = value === 'guilty' ? d.guiltyUrl : d.notGuiltyUrl;
if (!url) { choose(value, { scroll: true, setSelect: true }); return; }
playPart(value === 'guilty' ? 'guilty' : 'not-guilty', url,
value === 'guilty' ? 'You pleaded guilty' : 'You pleaded not guilty',
value === 'guilty' ? 'Here is what happens next.' : 'Please be sure you understand what this means.');
reveal();
}
function onEnded() {
setPlayIcon(false);
if (part === 'case') { showChoice(); reveal(); return; }
const row = document.createElement('div'); row.className = 'audio-actions-row';
if (part === 'guilty') {
row.appendChild(button('audio-choice', 'Let us know', function () {
choose('guilty', { scroll: false, setSelect: true });
const pray = document.getElementById('btn-pray'); if (pray && pray.style.display !== 'none') pray.click();
document.getElementById('plea-guilty').scrollIntoView({ behavior: 'smooth', block: 'start' });
}));
row.appendChild(button('audio-choice audio-choice--alt', 'Read the record', function () { location.hash = '#record'; }));
} else {
row.appendChild(button('audio-choice', 'Change my plea to guilty', function () { plead('guilty'); }));
row.appendChild(button('audio-choice audio-choice--alt', 'Read the record', function () { location.hash = '#record'; }));
row.appendChild(button('audio-choice audio-choice--alt', 'Ask a question', function () { location.href = '/contact?source=salvation'; }));
}
show([row]); reveal();
}
playBtn.addEventListener('click', function () { if (el.paused) el.play(); else el.pause(); });
el.addEventListener('play', function () { setPlayIcon(true); });
el.addEventListener('pause', function () { setPlayIcon(false); });
el.addEventListener('ended', onEnded);
el.addEventListener('timeupdate', paint);
el.addEventListener('loadedmetadata', paint);
seek.addEventListener('input', function () { if (el.duration) el.currentTime = (seek.value / 100) * el.duration; });
document.getElementById('audio-back').addEventListener('click', function () { el.currentTime = Math.max(0, el.currentTime - 15); });
document.getElementById('audio-skip').addEventListener('click', function () { el.pause(); showChoice(); });
const speeds = [1, 1.25, 1.5, 0.85];
let si = 0;
speedBtn.addEventListener('click', function () { si = (si + 1) % speeds.length; el.playbackRate = speeds[si]; speedBtn.textContent = speeds[si] + '×'; });
}).catch(function () {});
// ── The plea ──
const select = document.getElementById('plea-select');
const guilty = document.getElementById('plea-guilty');
const notGuilty = document.getElementById('plea-notguilty');
const cardG = document.getElementById('card-guilty');
const cardN = document.getElementById('card-notguilty');
function choose(value, opts) {
const o = opts || {};
if (o.setSelect) select.value = value;
guilty.hidden = value !== 'guilty';
notGuilty.hidden = value !== 'not-guilty';
cardG.classList.toggle('is-selected', value === 'guilty');
cardN.classList.toggle('is-selected', value === 'not-guilty');
cardG.classList.toggle('is-dim', value === 'not-guilty');
cardN.classList.toggle('is-dim', value === 'guilty');
const panel = value === 'guilty' ? guilty : value === 'not-guilty' ? notGuilty : null;
if (panel && o.scroll !== false) panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
select.addEventListener('change', function () { choose(select.value); });
document.getElementById('btn-change-plea').addEventListener('click', function () { select.value = 'guilty'; choose('guilty'); });
// ── Let us know (guilty only) ──
const pray = document.getElementById('btn-pray');
const form = document.getElementById('respond-form');
const err = document.getElementById('r-error');
const send = document.getElementById('btn-send');
const intro = document.getElementById('respond-intro');
const done = document.getElementById('respond-done');
pray.addEventListener('click', function () {
form.classList.add('open');
pray.setAttribute('aria-expanded', 'true');
pray.style.display = 'none';
document.getElementById('r-name').focus();
});
document.getElementById('btn-cancel').addEventListener('click', function () {
form.classList.remove('open');
pray.style.display = '';
pray.setAttribute('aria-expanded', 'false');
pray.focus();
});
form.addEventListener('submit', async function (e) {
e.preventDefault();
err.textContent = '';
send.disabled = true;
send.textContent = 'Sending…';
try {
const res = await fetch('/api/salvation-response', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: form.name.value, email: form.email.value, message: form.message.value, _honey: form._honey.value })
});
const data = await res.json().catch(function () { return {}; });
if (!res.ok) throw new Error(data.message || 'We could not send this right now.');
const reach = document.getElementById('sent-reach');
const given = (form.email.value || '').trim();
if (given) {
reach.textContent = '';
reach.appendChild(document.createTextNode(data.confirmationSent ? 'We just sent a confirmation email to ' : 'Someone from the team will reach out to you soon at '));
const strong = document.createElement('strong');
strong.textContent = given;
reach.appendChild(strong);
reach.appendChild(document.createTextNode(data.confirmationSent
? ', and someone from the team will reach out to you personally soon. If you do not see our emails, please check your spam folder.'
: '. If you do not see a reply in a few days, please check your spam folder.'));
} else {
reach.textContent = 'We are rejoicing with you. Because you did not leave an email address, we are not able to reach out to you, but you are always welcome to write to us.';
}
intro.style.display = 'none';
done.classList.add('open');
done.scrollIntoView({ block: 'center' });
done.focus();
} catch (ex) {
err.textContent = (ex && ex.message ? ex.message : 'We could not send this right now.') + ' Your decision is between you and God either way, and you are welcome to write to us from the contact page.';
send.disabled = false;
send.textContent = 'Let us know';
}
});
})();
</script>
</body>
</html>