:root {
  --paper: #f6f1e7; --card: #fffdf8; --ink: #2a2622; --muted: #6d655b; --rule: #d9cfbd;
  --navy: #1f2f4a; --gold: #a8843a; --gold-soft: #efe4c9; --oxblood: #7a2e2e; --error: #9b2c2c;
  --serif: "EB Garamond", Georgia, serif; --display: "Cormorant Garamond", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16140f; --card: #1f1c17; --ink: #ece5d8; --muted: #a59c8e; --rule: #3a342b;
    --navy: #c9d4ea; --gold: #d1b36d; --gold-soft: #2e2819; --oxblood: #d98c8c; --error: #f0a3a3;
  }
}
:root[data-theme="dark"] {
  --paper: #16140f; --card: #1f1c17; --ink: #ece5d8; --muted: #a59c8e; --rule: #3a342b;
  --navy: #c9d4ea; --gold: #d1b36d; --gold-soft: #2e2819; --oxblood: #d98c8c; --error: #f0a3a3;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 19px/1.7 var(--serif) }
a { color: var(--navy) }
img { max-width: 100% }
.wrap { max-width: 640px; margin: 0 auto; padding: 24px 16px 64px }
.wide { max-width: 980px }
.topbar { display: flex; justify-content: center; padding: 18px 16px 0 }
.brand { font: 600 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); text-decoration: none }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 40px 36px; box-shadow: 0 1px 0 var(--rule) }
@media (max-width: 520px) { .card { padding: 28px 20px } body { font-size: 18px } }
h1, h2, h3 { font-family: var(--display); font-weight: 600; color: var(--navy); line-height: 1.15; text-wrap: balance }
h1 { font-size: 40px; margin: 6px 0 8px }
h2 { font-size: 28px; margin: 0 0 10px }
.center { text-align: center }
.muted { color: var(--muted) }
.small { font-size: 15px }
.label { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px }

/* Landing */
.hero { text-align: center; padding: 36px 0 26px }
.hero h1 { font-size: 52px; margin: 10px 0 6px }
.hero .tag { font: italic 22px/1.4 var(--display); color: var(--muted); margin: 0 auto 10px; max-width: 30em }
.hero .by { font: 500 14px/1.4 var(--sans); color: var(--muted) }
@media (max-width: 520px) { .hero h1 { font-size: 40px } }
.grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr } }
.promise { list-style: none; padding: 0; margin: 18px 0 }
.promise li { padding: 12px 0; border-top: 1px solid var(--rule) }
.promise b { font-family: var(--display); font-size: 21px; color: var(--navy); display: block }
.today-preview { background: var(--gold-soft); border-left: 3px solid var(--gold); padding: 18px 20px; margin-top: 20px }
.today-preview h3 { font-size: 26px; margin: 4px 0 8px }
.months { columns: 2; column-gap: 24px; font-size: 16px; padding: 0; list-style: none }
.months li { break-inside: avoid; padding: 3px 0 }
.months b { font-family: var(--display); font-size: 18px; color: var(--navy) }

/* Forms */
form .field { margin-bottom: 16px }
label.lab { display: block; font: 600 13px/1.3 var(--sans); color: var(--navy); margin-bottom: 6px }
.hint { font: 400 13px/1.4 var(--sans); color: var(--muted); margin-top: 4px }
input[type=text], input[type=email], input[type=tel], select {
  width: 100%; font: 16px/1.3 var(--sans); padding: 12px; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--paper); color: var(--ink)
}
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.row { display: flex; gap: 10px } .row > * { flex: 1 }
.choice { display: flex; gap: 10px; align-items: flex-start; font: 400 15px/1.45 var(--sans); margin: 8px 0; cursor: pointer }
.choice input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--navy); flex: none }
.consent { font-size: 13px; color: var(--muted) }
.btn { display: inline-block; font: 600 15px/1 var(--sans); padding: 15px 20px; border-radius: 4px; border: 1px solid var(--navy);
  background: var(--navy); color: var(--paper); text-decoration: none; cursor: pointer; text-align: center }
.btn.block { display: block; width: 100% }
.btn.ghost { background: transparent; color: var(--navy) }
.btn.link { background: none; border: 0; color: var(--navy); text-decoration: underline; padding: 6px 0; font-weight: 500 }
.errors { background: #fbeaea; color: var(--error); border: 1px solid #e8c4c4; border-radius: 4px; padding: 12px 16px; font: 15px/1.5 var(--sans); margin-bottom: 16px }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .errors { background: #3a1f1f; border-color: #5a2d2d } }
.notice { background: var(--gold-soft); border-radius: 4px; padding: 12px 16px; font: 15px/1.5 var(--sans); margin-bottom: 16px }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.code-input { font-size: 28px !important; letter-spacing: .4em; text-align: center }

/* Reading */
.mast { text-align: center; border-bottom: 1px solid var(--rule); padding-bottom: 22px; margin-bottom: 28px }
.mast .date { font: 500 15px/1.4 var(--sans); color: var(--muted); margin-top: 10px }
.reading h1 { font-size: 38px; text-align: center; margin: 6px 0 4px }
.sub { text-align: center; color: var(--muted); font-style: italic; margin: 0 0 6px }
.read { text-align: center; font: 500 13px/1 var(--sans); color: var(--muted); margin-bottom: 28px }
details { border: 1px solid var(--rule); background: var(--gold-soft); border-radius: 4px; margin-bottom: 18px }
summary { cursor: pointer; padding: 14px 18px; font: 600 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 12px }
summary::-webkit-details-marker { display: none }
summary .hint { margin: 0; text-transform: none; letter-spacing: 0 }
details[open] summary .hint::after { content: "Hide" } details:not([open]) summary .hint::after { content: "Read" }
details .inner { padding: 0 22px 18px }
.translations { font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 12px }
.lesson p { margin: 0 0 1em }
.lesson p:first-child::first-letter { font-family: var(--display); float: left; font-size: 3.4em; line-height: .8; padding: 6px 8px 0 0; color: var(--oxblood) }
.pull { font-family: var(--display); font-style: italic; font-size: 1.3em; line-height: 1.35; color: var(--navy); text-align: center;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 8px; margin: 1.4em 0 !important }
.lesson p.pull:first-child::first-letter { all: unset }
.scripture { margin: 32px 0 20px; padding: 26px 24px; border-left: 3px solid var(--gold); background: var(--gold-soft) }
.scripture blockquote { margin: 0 0 14px; font: italic 24px/1.4 var(--display) }
.scripture blockquote:last-of-type { margin-bottom: 0 }
.scripture cite { display: block; margin-top: 10px; font-style: normal; color: var(--muted); font-size: 16px; font-family: var(--serif) }
.tr { text-decoration: none; font: 600 11px/1 var(--sans); letter-spacing: .08em; border: 1px solid var(--gold); color: var(--gold);
  border-radius: 3px; padding: 3px 5px; margin-left: 6px; vertical-align: 2px; cursor: help }
.scripture .note { margin: 12px 0 0; color: var(--muted); font-style: italic; font-size: 17px }
.challenge { border: 2px solid var(--navy); padding: 22px 24px; border-radius: 4px; scroll-margin-top: 20px }
.challenge .label { color: var(--oxblood) }
.challenge p { margin: 0 }
.challenge .btn { margin-top: 16px }
.accepted { margin-top: 16px; background: var(--gold-soft); padding: 12px; text-align: center; font: 600 15px/1.4 var(--sans); color: var(--navy); border-radius: 4px }
.tomorrow { margin-top: 36px; text-align: center; border-top: 1px solid var(--rule); padding-top: 28px }
.tomorrow h3 { font-size: 26px; margin: 6px 0 10px }
.tomorrow p { color: var(--muted); margin: 0 auto 18px; max-width: 30em }
.btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.sign { text-align: center; font: italic 20px var(--display); color: var(--muted); margin-top: 28px }
.foot { text-align: center; font: 500 12px/1.6 var(--sans); color: var(--muted); margin-top: 22px }
.foot a { color: inherit }
.foot .credits { display: block; margin-top: 12px; font-weight: 400 }
audio { width: 100%; margin: 0 0 24px }

/* Admin */
table.data { width: 100%; border-collapse: collapse; font: 14px/1.4 var(--sans) }
table.data th, table.data td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: top }
table.data th { color: var(--muted); font-weight: 600 }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 16px 0 24px }
.stat { background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 14px }
.stat b { display: block; font: 600 30px/1.1 var(--display); color: var(--navy) }
.stat span { font: 500 12px/1.3 var(--sans); color: var(--muted) }
.scroll { overflow-x: auto }