/* john11.app — the read-on-the-web surface.
   One sheet for all 32,000 generated pages, so it caches once and every page
   after the first costs only its own text. That matters: this site exists partly
   for readers on slow, metered connections who can't install an app at all. */

:root{
  --bg:#faf8f3; --ink:#1c1a17; --muted:#8a8275; --accent:#bd8b2c;
  --line:#e4ddcf; --bg2:#f1ece1;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--serif); line-height:1.6;
  padding:clamp(24px,6vw,64px) clamp(20px,6vw,40px);
}
main{max-width:38rem;margin:0 auto}
body.index main{max-width:44rem}

.top{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:flex; justify-content:space-between; gap:1rem;
}
.top a{color:var(--muted);text-decoration:none}

/* ---- the verse page ---- */
body.verse h1{
  font-size:.82rem; font-family:var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:400; margin:2.4rem 0 .8rem;
}
.verse-text{
  font-size:clamp(1.5rem,5vw,2rem); margin:0 0 1.6rem;
  border-left:3px solid var(--accent); padding-left:1.2rem;
}
.cta{
  display:inline-block; font-family:var(--sans); font-size:.95rem; color:var(--bg);
  background:var(--accent); border-radius:999px; padding:.8rem 2rem; text-decoration:none;
}
.open{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-top:.9rem}
.open a{color:var(--accent);text-decoration:none}

h2{
  font-size:.78rem; font-family:var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:400; margin:3.2rem 0 0;
  border-top:1px solid var(--line); padding-top:1.6rem;
}
.lede{font-family:var(--sans);font-size:.9rem;color:var(--muted);margin:.6rem 0 1.8rem}
ul{list-style:none;padding:0;margin:0}
li{margin:0 0 1.5rem}
li a{text-decoration:none;color:inherit;display:block}
.rel{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.rel.j::after{content:" \2726"}
.cref{
  font-family:var(--sans); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-top:.15rem;
}
.ctext{margin-top:.2rem}

/* ---- the chapter reader ---- */
body.chapter{line-height:1.75}
body.chapter h1{font-size:clamp(1.7rem,6vw,2.3rem);font-weight:400;margin:2rem 0 1.6rem}
p.v{margin:0 0 1rem;font-size:1.1rem}
p.v a{
  color:var(--accent); text-decoration:none; font-family:var(--sans); font-size:.7rem;
  vertical-align:super; margin-right:.4rem;
}

/* ---- the book index ---- */
body.index h1{font-size:clamp(1.8rem,6vw,2.4rem);font-weight:400;margin:1.6rem 0 .4rem}
body.index .lede{max-width:30rem;font-size:.95rem;line-height:1.6;margin:0 0 2.4rem}
body.index h2{border-top:none;padding-top:0;margin:2.4rem 0 1rem}
.bk{margin:0 0 1.1rem}
.bk b{font-weight:400;display:block;margin-bottom:.3rem}
.ch{display:flex;flex-wrap:wrap;gap:.3rem}
.ch a{
  font-family:var(--sans); font-size:.8rem; color:var(--accent); text-decoration:none;
  border:1px solid var(--line); border-radius:6px; padding:.15rem .5rem;
  min-width:2rem; text-align:center;
}

/* ---- shared chrome ---- */
.seq{
  display:flex; gap:1.2rem; flex-wrap:wrap; font-family:var(--sans); font-size:.85rem;
  margin:0 0 2.2rem;
}
body.chapter .seq{margin:2.4rem 0;border-top:1px solid var(--line);padding-top:1.4rem}
.seq a{color:var(--accent);text-decoration:none}
footer{
  margin-top:3.5rem; border-top:1px solid var(--line); padding-top:1.4rem;
  font-family:var(--sans); font-size:.8rem; color:var(--muted);
}
body.chapter footer{margin-top:2rem;border-top:none;padding-top:0}
footer a{color:var(--accent);text-decoration:none}

@media (prefers-color-scheme:dark){
  :root{--bg:#0e0e10;--ink:#ece7dd;--muted:#7c776e;--accent:#e0ad4e;--line:#26262c;--bg2:#17171a}
}

/* ---- the connection of the day ---- */
body.daily h1{
  font-size:.82rem; font-family:var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:400; margin:2.4rem 0 1.6rem;
}
body.daily .verse-text{margin-bottom:.5rem}
body.daily .cref{margin:0 0 0 1.2rem}
.thread{margin:1.6rem 0 1.6rem 1.2rem;padding-left:1.1rem;border-left:3px solid var(--accent)}
.thread .rel::before{content:"\2726  "}
body.daily .lede{margin:2.4rem 0 1.8rem}
.more{margin:1.6rem 0 0;font-family:var(--sans);font-size:.9rem}
.more a{color:var(--accent);text-decoration:none}