:root{
  --blue:#1E3A5F; --amber:#C98A2D; --amber-text:#8A5E14; --amber-hover:#E0A644;
  --ivory:#FAF7F1; --ink:#1E2A38; --body:#3D4855; --muted:#5A6572; --line:#E8E0D0;
  --hero:var(--blue); --accent:var(--amber); --accent-text:var(--amber-text);
  --hero-text:var(--ivory); --hero-kicker:var(--amber-hover);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Nunito Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5}
a{color:var(--blue)}a:hover{color:var(--accent-text)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:10px 14px;z-index:10}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* header / footer */
.site-head{background:var(--blue);color:var(--ivory)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.brand{color:var(--ivory);text-decoration:none;font-family:var(--serif);font-weight:700;font-size:19px}
.brand:hover{color:var(--ivory)}
.head-link{color:var(--ivory);font-weight:600;text-decoration:none;padding:12px 4px;font-size:16px}
.head-link:hover{color:var(--amber-hover)}
.site-foot{background:var(--blue);color:#E8E2D6;text-align:center;padding:28px 20px;font-size:15px;margin-top:40px}
.site-foot a{color:#E8E2D6}
.site-foot .verse{font-family:var(--serif);font-size:18px;color:var(--ivory)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:12px;font-weight:700;font-size:17px;text-decoration:none;padding:0 20px}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{color:var(--ink);filter:brightness(1.07)}
.btn-outline{border:2px solid var(--blue);color:var(--blue)}

.kicker{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}

/* reading plan */
.hero{background:var(--hero);color:var(--hero-text);padding:36px 0 64px}
.hero .kicker{color:var(--hero-kicker)}
.hero h1{margin:10px 0 10px;font-family:var(--serif);font-weight:700;font-size:clamp(38px,8vw,56px);line-height:1.05}
.hero p{margin:0;font-size:19px;opacity:.92}
.hero-banner{width:100%;border-radius:14px;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:14px;font-weight:600}
.progress{margin-top:-40px;background:#fff;border-radius:16px;padding:18px;box-shadow:0 6px 20px rgba(30,58,95,.12)}
.progress-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.progress-top strong{color:var(--blue)}
.progress-count{color:var(--muted);font-size:15px}
.progress-count b{color:var(--blue);font-size:21px}
.bar{height:10px;border-radius:999px;background:#EFE9DD;overflow:hidden;margin:10px 0 8px}
.bar span{display:block;height:100%;border-radius:999px;background:var(--accent);width:0;transition:width .3s}
.note{font-size:14px;color:var(--muted)}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:20px 0 18px}
.tab{min-height:46px;border-radius:10px;border:2px solid #D9D2C3;background:#fff;color:var(--blue);font:700 15px var(--sans);cursor:pointer}
.tab[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--ivory)}
.week-head .kicker{color:var(--accent-text)}
.week-head h2{margin:6px 0;font-family:var(--serif);font-size:28px;line-height:1.15;color:var(--blue)}
.week-head p{margin:0;color:var(--body)}
.days{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.day{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.day.done{background:#F3EEE3}
.day.today{border:2px solid var(--accent)}
.check{width:46px;height:46px;flex:none;border-radius:12px;border:2px solid #B9B0A0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.check svg{opacity:0}
.day.done .check{background:var(--blue);border-color:var(--blue)}
.day.done .check svg{opacity:1}
.day-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.day-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.day-date{font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.tag{font-size:12px;font-weight:700;color:var(--accent-text);background:#F6EBD7;padding:2px 8px;border-radius:999px}
.ref{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--blue);text-decoration:none;min-height:30px}
.ref:hover{text-decoration:underline}
.focus{font-size:16px;color:var(--body)}
.card-dark{background:var(--hero);color:var(--hero-text);border-radius:16px;padding:22px;margin-top:22px}
.card-dark .kicker{color:var(--hero-kicker)}
.card-dark p{margin:8px 0 0;font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.35}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:14px;display:flex;gap:14px;align-items:flex-start}
.card .icon{width:46px;height:46px;flex:none;border-radius:12px;background:#F6EBD7;display:flex;align-items:center;justify-content:center}
.card .kicker{color:var(--accent-text)}
.card p{margin:4px 0 0;font-size:17px}
.prayer{border-top:2px solid var(--accent);margin-top:24px;padding-top:18px}
.prayer .kicker{color:var(--muted)}
.prayer p{margin:8px 0 0;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.4;color:var(--blue)}
.actions{display:grid;gap:10px;margin-top:26px}
@media (min-width:600px){.actions{grid-template-columns:1fr 1fr}}

/* simple pages */
.page{padding:48px 0}
.page h1{font-family:var(--serif);color:var(--blue);font-size:40px;line-height:1.1;margin:0 0 12px}
.list{list-style:none;padding:0;margin:24px 0;display:grid;gap:12px}
.list a{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none}
.list a strong{display:block;font-family:var(--serif);font-size:21px;color:var(--blue)}
.list a span{color:var(--body)}