:root {
  --ink: #1d1d1f;
  --muted: #5b5b61;
  --paper: #fdfcf8;
  --accent: #2c5a8a;
  --accent-ink: #ffffff;
  --line: #e4e1d8;
  --soft: #f2efe7;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

h1 { font-size: 2rem; line-height: 1.2; margin: 1.5rem 0 1rem; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 1rem; }
h3 { font-size: 1.1rem; margin: 0 0 0.25rem; }

p { margin: 0 0 1rem; }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
}

.skip-link:focus { left: 1rem; top: 1rem; }

.site-header,
.site-footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

.site-header { border-bottom: 1px solid var(--line); }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }

.brand { font-weight: 700; color: var(--ink); text-decoration: none; }

.lead { font-size: 1.15rem; color: var(--muted); }

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
}

.button:hover { background: #23486f; }

.button-muted {
  background: var(--soft);
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: default;
}

.button-muted:hover { background: var(--soft); }

.store-buttons { margin: 1rem 0 0; }
.store-buttons .button { margin: 0 0.5rem 0.5rem 0; }

.store-note { color: var(--muted); font-size: 0.9rem; }

.cta-secondary { margin-top: -0.5rem; font-size: 0.95rem; }

.related-topics ul { padding-left: 1.25rem; }

.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefit-list li {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.crumbs {
  font-size: 0.9rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.crumbs a { color: var(--muted); }

.verse-text {
  font-size: 1.2rem;
  line-height: 1.55;
  margin: 1.25rem 0 0.75rem;
}

.verse-ref {
  color: var(--muted);
  font-size: 0.95rem;
}

.explanation {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--accent);
  background: var(--soft);
}

.explanation h2 { margin-top: 0; }

.verse-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.verse-nav a { max-width: 48%; }

.verse-list,
.chapter-list,
.book-list { padding-left: 1.25rem; }

.verse-list li,
.chapter-list li { margin-bottom: 0.75rem; }

.book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.25rem 1rem;
  list-style: none;
  padding: 0;
}

.book-list li { padding: 0.2rem 0; }

.legal .placeholder {
  padding: 1rem;
  background: var(--soft);
  border-left: 4px solid var(--accent);
}

.faq h3 { margin: 1.5rem 0 0.25rem; }
.faq p { margin: 0; color: var(--muted); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f0ea;
    --muted: #b8b5ad;
    --paper: #161614;
    --accent: #8ab4e8;
    --accent-ink: #10151c;
    --line: #33312c;
    --soft: #23221e;
  }

  .button:hover { background: #a6c8f2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 30rem) {
  h1 { font-size: 1.65rem; }
  .verse-text { font-size: 1.1rem; }
  .verse-nav { flex-direction: column; }
  .verse-nav a { max-width: 100%; }
}

@media print {
  .site-header,
  .site-footer,
  .crumbs,
  .cta,
  .verse-nav,
  .skip-link { display: none; }

  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
}

.topic-list { list-style: none; padding: 0; margin: 0; }
.topic-list li { padding: 0.5rem 0; border-top: 1px solid var(--line); }

.votd-month h2 { margin-top: 2rem; }
.votd-list { list-style: none; padding: 0; margin: 0; }
.votd-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; justify-content: space-between; padding: 0.45rem 0.5rem; border-top: 1px solid var(--line); }
.votd-list li.is-today { background: var(--soft); border-left: 4px solid var(--accent); }
.votd-ref { color: var(--muted); }

.topic-verse-list { list-style: none; padding: 0; margin: 0; }
.topic-verse-list li { padding: 1rem 0; border-top: 1px solid var(--line); }
.support-note { margin: 0 0 1.5rem; padding: 0.75rem 1rem; border-left: 4px solid var(--accent); background: var(--soft); font-weight: 600; }
.topic-verse-text { margin: 0 0 0.35rem; }

.plan-list,
.plan-day-list { list-style: none; padding: 0; margin: 0; }
.plan-list li,
.plan-day-list li { padding: 0.5rem 0; border-top: 1px solid var(--line); }

.plan-passage { margin-top: 2rem; }
.plan-passage h2 { margin-top: 0; }
.plan-passage h2 a { color: var(--ink); text-decoration: none; }
.plan-passage h2 a:hover { text-decoration: underline; }

/* BiblePeace W-20: calm editorial presentation, with the existing reader retained. */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:72rem; padding:1.5rem 1.5rem; }
.brand { font-family:Georgia,serif; font-size:1.5rem; letter-spacing:-.04em; }
.site-header nav { display:flex; gap:1.5rem; align-items:center; font-size:.9rem; }
.site-header nav a { color:var(--ink); text-decoration:none; padding:.5rem 0; }
.site-header nav a:hover { text-decoration:underline; text-underline-offset:5px; }
main:has(.sales-home), main:has(.sales-page) { max-width:72rem; }
.site-footer { max-width:72rem; padding:2rem 1.5rem; }
.sales-home { --accent:#244d45; --accent-ink:#fff; }
.eyebrow { font-size:.72rem; font-weight:650; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.peace-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:4rem; align-items:center; padding:3rem 0 4rem; }
.peace-hero h1 { font-family:Georgia,serif; font-size:clamp(3.3rem,6vw,5.2rem); font-weight:400; letter-spacing:-.055em; line-height:1.05; margin:1.3rem 0 1.8rem; }
.peace-hero .lead { max-width:32rem; font-size:1.12rem; line-height:1.8; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin:1.5rem 0; }
.quiet-link { font-weight:600; text-underline-offset:5px; }
.small-note { font-size:.85rem; color:var(--muted); }
.verse-window { position:relative; border-radius:10rem 10rem 1rem 1rem; padding:5rem 2.5rem 2.5rem; background:#e9ede6; border:1px solid #d6ddd1; color:#1f3631; box-shadow:0 15px 40px #29392c0a; }
.verse-window blockquote { margin:1.5rem 0 2rem; font-family:Georgia,serif; font-size:1.55rem; line-height:1.65; }
.verse-window a { color:#244d45; font-size:.88rem; text-underline-offset:4px; }
.verse-edition { font-size:.7rem; margin-left:.5rem; border:1px solid #b4bfb0; padding:.2rem .4rem; border-radius:.2rem; }
.reading-path { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:2.5rem 0; display:grid; grid-template-columns:1fr 1.15fr; gap:3rem; }
.reading-path h2,.study-intro h2,.peace-faq h2,.sales-home .books h2 { font-family:Georgia,serif; font-weight:400; font-size:2.25rem; margin:.8rem 0 1.5rem; letter-spacing:-.03em; }
.path-links a { display:flex; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.path-links a:last-child { border:0; }
.path-links a span:first-child { color:var(--muted); font-size:.75rem; }
.path-links a span:last-child { margin-left:auto; }
.study-intro { padding:4rem 0 3rem; }
.study-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin:2.5rem 0; }
.study-columns h3 { font-size:1rem; margin:1rem 0 .7rem; }
.study-columns p { color:var(--muted); font-size:.95rem; }
.chapter-number { font-family:Georgia,serif; font-size:1.6rem; color:var(--accent); }
.peace-faq { padding:2.5rem 0; border-top:1px solid var(--line); }
.peace-faq details,.tracker-plan { border-bottom:1px solid var(--line); padding:1.1rem 0; }
summary { cursor:pointer; font-weight:600; }
details p { margin:1rem 0 .5rem; max-width:45rem; }
.sales-home .books { margin-top:2rem; border-top:1px solid var(--line); padding-top:3rem; }
.sales-page { padding:1.5rem 0; }
.sales-page>h1 { max-width:48rem; font-family:Georgia,serif; font-size:clamp(2.5rem,5vw,3.7rem); font-weight:400; letter-spacing:-.04em; }
.test-notice { border:1px solid #c9ae71; border-radius:.5rem; padding:1rem 1.2rem; background:#faf1dd; color:#594310; margin:1.5rem 0; font-size:.9rem; }
.offer-grid,.auth-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin:2rem 0; }
.offer { border:1px solid var(--line); padding:2rem; border-radius:1rem; }
.offer h2 { margin:.5rem 0; font-size:1.7rem; }
.offer-premium { border:2px solid var(--accent); }
.offer-price { font-family:Georgia,serif; font-size:1.4rem; margin:1rem 0; }
.offer li { margin:.7rem 0; }
.sales-page label { display:block; margin:.85rem 0 .35rem; font-weight:600; font-size:.9rem; }
.sales-page input:not([type=checkbox]),.sales-page select { width:100%; padding:.8rem; font:inherit; border:1px solid var(--muted); border-radius:.4rem; background:var(--paper); color:var(--ink); }
.sales-page input[type=checkbox] { width:1.1rem; height:1.1rem; margin:0 .5rem 0 0; vertical-align:middle; }
.checkbox-label { line-height:1.6; font-weight:400 !important; margin:1rem 0 !important; }
button.button { border:0; font:inherit; font-weight:600; cursor:pointer; }
.button-secondary { background:var(--soft); color:var(--ink); border:1px solid var(--line) !important; }
.button-secondary:hover { background:var(--line); color:var(--ink); }
.text-button { background:none; border:0; color:var(--accent); text-decoration:underline; cursor:pointer; font:inherit; padding:.6rem 0; }
button:disabled { opacity:.65; cursor:wait; }
.reader-controls { display:grid; grid-template-columns:minmax(10rem,2fr) minmax(5rem,1fr) auto; gap:1rem; align-items:end; margin:2rem 0; }
.reader-card { padding:1.5rem 1rem; border-top:1px solid var(--line); scroll-margin-top:1rem; }
.reader-card h2 { margin:0 0 1rem; font-size:1rem; }
.reader-text { font-family:Georgia,serif; font-size:1.6rem; line-height:1.65; }
.reader-card section { max-width:45rem; }
.reader-card h3 { margin:1.5rem 0 .6rem; }
.tracker-plan li { padding:1rem 0; }
.tracker-plan li .small-note { display:block; }
.tracker-plan li button { margin:.5rem 0; display:block; }
#sales-message:not(:empty) { border-left:3px solid var(--accent); padding:.75rem 1rem; background:var(--soft); }
.legal-links li { margin:.75rem 0; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #b2751a; outline-offset:4px; }
@media (max-width:700px) {
  .site-header { padding:1rem; gap:.5rem; align-items:flex-start; }
  .site-header nav { gap:.8rem; font-size:.78rem; flex-wrap:wrap; justify-content:flex-end; max-width:55%; }
  .brand { font-size:1.3rem; white-space:nowrap; }
  .peace-hero { grid-template-columns:1fr; gap:2rem; padding:1.5rem 0 2rem; }
  .peace-hero h1 { font-size:3.6rem; }
  .verse-window { padding:4rem 1.7rem 2rem; max-width:28rem; }
  .verse-window blockquote { font-size:1.35rem; }
  .reading-path,.study-columns,.offer-grid,.auth-grid { grid-template-columns:1fr; gap:1.5rem; }
  .study-columns { gap:1rem; }
  .reading-path h2,.study-intro h2,.peace-faq h2,.sales-home .books h2 { font-size:1.9rem; }
  .study-intro { padding:3rem 0 2rem; }
  .reader-controls { grid-template-columns:2fr 1fr; }
  .reader-controls button { grid-column:1/-1; }
  .offer { padding:1.5rem; }
}
@media (prefers-color-scheme:dark) {
  .verse-window { background:#253c35; color:#f6f3e8; border-color:#466356; }
  .verse-window a { color:#d1e0cb; }
  .sales-home { --accent:#b6d0b2; --accent-ink:#192b22; }
  .test-notice { background:#362e19; color:#ead69f; border-color:#887343; }
}