.salvation-page {
  --salvation-midnight: #102f3d;
  --salvation-teal: #1f6970;
  --salvation-gold: #d9a441;
  --salvation-cream: #fffaf0;
  --salvation-paper: #fffef9;
  --salvation-ink: #203b43;
  background: var(--salvation-paper);
}

.salvation-page main > section { padding-right: var(--page-gutter); padding-left: var(--page-gutter); }
.salvation-page .salvation-kicker { margin: 0 0 14px; color: #8f5c0b; font: 800 .76rem/1.2 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }

.salvation-hero {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 88px;
  padding-bottom: 100px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 33%, rgba(255,225,147,.94) 0 6%, rgba(245,185,83,.54) 7% 17%, transparent 34%),
    linear-gradient(155deg, #0b2c3b 0%, #165264 46%, #c48144 83%, #f0c474 100%);
}
.salvation-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,26,35,.64), transparent 70%); }
.salvation-hero::after { content: ""; position: absolute; right: -12%; bottom: -42%; z-index: -1; width: 78%; aspect-ratio: 1; border: 1px solid rgba(255,235,189,.14); border-radius: 50%; box-shadow: 0 0 0 90px rgba(255,235,189,.035), 0 0 0 180px rgba(255,235,189,.025); }
.salvation-hero-copy { position: relative; z-index: 2; max-width: 780px; }
.salvation-hero .salvation-kicker { color: #f7d78e; }
.salvation-hero h1 { max-width: 760px; color: #fff; font-family: Georgia, serif; font-size: clamp(3.25rem, 7vw, 6.6rem); font-weight: 500; line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.salvation-hero-copy > p:not(.salvation-kicker) { max-width: 650px; margin: 28px 0 34px; color: #edf6f4; font-size: clamp(1.1rem, 2vw, 1.28rem); line-height: 1.75; }
.salvation-hero-link { display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: #fff; background: rgba(6,35,44,.28); font: 800 .82rem Arial, sans-serif; letter-spacing: .04em; text-decoration: none; }
.salvation-hero-link:hover, .salvation-hero-link:focus-visible { border-color: #fff; background: rgba(255,255,255,.14); }
.salvation-hero-link span { font-size: 1.1rem; }
.salvation-intro { max-width: none; margin: 0; padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(62px, 9vw, 100px); text-align: center; }
.salvation-intro > * { width: min(900px, 100%); margin-right: auto; margin-left: auto; }
.salvation-intro h2, .salvation-response h2 { color: var(--salvation-midnight); font-family: Georgia, serif; font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.salvation-intro > p:last-child { margin: 28px auto 0; color: #52666a; font-size: 1.1rem; line-height: 1.85; }

.salvation-artwork { margin: 0; padding: 0 var(--page-gutter) clamp(76px, 10vw, 120px); background: var(--salvation-paper); }
.salvation-artwork-frame { width: min(1120px, 100%); margin: 0 auto; overflow: hidden; border: 1px solid #d8c6a4; border-radius: 6px 38px 6px 38px; background: var(--salvation-midnight); box-shadow: 0 26px 70px rgba(16,47,61,.2); }
.salvation-artwork img { width: 100%; height: auto; }
.salvation-artwork figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px clamp(22px, 4vw, 42px) 24px; color: #e8f1ef; background: var(--salvation-midnight); }
.salvation-artwork figcaption span { color: #edcc82; font: 800 .74rem Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.salvation-artwork figcaption strong { color: #fff; font: 500 clamp(1.2rem, 2.4vw, 1.75rem)/1.2 Georgia, serif; text-align: right; }

.romans-road { position: relative; padding-top: 20px; padding-bottom: 110px; background: linear-gradient(180deg, var(--salvation-paper), #f5efe1); }
.romans-road-list { position: relative; width: min(920px, 100%); margin: 0 auto; padding: 0; list-style: none; }
.romans-road-list::before { content: ""; position: absolute; top: 70px; bottom: 70px; left: 48px; width: 3px; background: linear-gradient(var(--salvation-gold), var(--salvation-teal)); }
.road-stop { position: relative; display: grid; grid-template-columns: 98px minmax(0, 1fr); gap: 26px; align-items: start; padding: 0 0 38px; }
.road-stop:last-child { padding-bottom: 0; }
.road-marker { position: sticky; top: 96px; z-index: 2; display: grid; width: 98px; height: 98px; place-items: center; border: 7px solid #f5efe1; border-radius: 50%; background: var(--salvation-midnight); box-shadow: 0 0 0 2px var(--salvation-gold), 0 14px 28px rgba(16,47,61,.16); }
.road-marker span { color: #f7d58c; font: 800 .86rem Arial, sans-serif; letter-spacing: .1em; }
.road-stop article { padding: clamp(27px, 5vw, 48px); border: 1px solid #e0d4bc; border-radius: 5px 32px 5px 32px; background: rgba(255,254,249,.94); box-shadow: 0 18px 50px rgba(72,54,27,.08); }
.road-step { margin: 0 0 8px; color: #9b660e; font: 800 .72rem Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.road-stop h2 { margin: 0 0 24px; color: var(--salvation-midnight); font: 600 clamp(1.75rem, 3vw, 2.55rem)/1.1 Georgia, serif; letter-spacing: -.025em; }
.road-stop blockquote { margin: 0 0 24px; padding: 24px 26px; border-left: 4px solid var(--salvation-gold); background: #fbf3df; }
.road-stop blockquote p { margin: 0; color: #294852; font: italic 500 clamp(1.15rem, 2.4vw, 1.42rem)/1.62 Georgia, serif; }
.road-stop cite { display: block; margin-top: 12px; color: #76571d; font: 800 .75rem Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.road-stop article > p:last-child { margin: 0; color: #53676b; font-size: 1.04rem; line-height: 1.78; }

.salvation-response { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(40px, 8vw, 100px); align-items: center; padding-top: clamp(80px, 10vw, 125px); padding-bottom: clamp(80px, 10vw, 125px); color: #eaf2f0; background: var(--salvation-midnight); }
.salvation-response .salvation-kicker { color: #efcb78; }
.salvation-response h2 { margin-bottom: 24px; color: #fff; }
.salvation-response > div > p:last-child { color: #d6e5e2; font-size: 1.07rem; line-height: 1.8; }
.salvation-response aside { padding: clamp(28px, 5vw, 46px); border: 1px solid rgba(255,255,255,.22); border-radius: 28px 7px 28px 7px; background: rgba(255,255,255,.07); box-shadow: 14px 16px 0 rgba(217,164,65,.18); }
.salvation-response aside > p { margin-top: 0; color: #f0f6f4; font-size: 1.04rem; }
.salvation-contact-links { display: grid; gap: 10px; margin-top: 24px; }
.salvation-contact-links a { display: grid; gap: 2px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; color: #fff; background: rgba(255,255,255,.05); font-family: Arial, sans-serif; text-decoration: none; }
.salvation-contact-links a:hover, .salvation-contact-links a:focus-visible { border-color: #f1d28c; background: rgba(255,255,255,.11); }
.salvation-contact-links strong { color: #f5d88f; font-size: .92rem; }
.salvation-contact-links span { color: #dce9e6; font-size: .82rem; }

.salvation-closing { padding-top: 82px; padding-bottom: 82px; text-align: center; background: radial-gradient(circle at 50% 35%, #fff7dc, var(--salvation-paper) 55%); }
.salvation-closing p { max-width: 840px; margin: 0 auto; color: var(--salvation-midnight); font: italic 500 clamp(2rem, 5vw, 4rem)/1.15 Georgia, serif; letter-spacing: -.03em; }
.salvation-closing span { display: block; margin-top: 18px; color: #8f5c0b; font: 800 .76rem Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.esv-notice { max-width: none; margin: 0; padding: 0 var(--page-gutter) 54px; color: #728083; font: .72rem/1.55 Arial, sans-serif; text-align: center; }
.esv-notice span { display: block; width: min(900px, 100%); margin: 0 auto; }

@media (max-width: 800px) {
  .salvation-hero { min-height: 620px; }
  .salvation-response { grid-template-columns: 1fr; }
  .salvation-response aside { max-width: 650px; }
}

@media (max-width: 560px) {
  .salvation-hero { min-height: 590px; padding-top: 68px; padding-bottom: 80px; }
  .salvation-hero h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .romans-road { padding-bottom: 78px; }
  .romans-road-list::before { left: 25px; }
  .road-stop { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; padding-bottom: 26px; }
  .road-marker { top: 86px; width: 52px; height: 52px; border-width: 4px; }
  .road-marker span { font-size: .68rem; }
  .road-stop article { padding: 24px 20px; border-radius: 4px 22px 4px 22px; }
  .road-stop blockquote { padding: 19px 18px; }
  .salvation-response aside { padding: 24px 20px; }
  .salvation-artwork-frame { border-radius: 4px 24px 4px 24px; }
  .salvation-artwork figcaption { align-items: flex-start; flex-direction: column; gap: 7px; }
  .salvation-artwork figcaption strong { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .salvation-hero-link { scroll-behavior: auto; }
}