:root {
  /* Dark and cozy: an old library pub. Walnut-leather cards, parchment text, whisky-amber accent.
     Built from Meadowlake's own palette (cream #f5efe0, sand #d7cfab, burnt orange #9d5e05, olive-brown #69603e),
     darkened and warmed for a dark page. Always dark, no light variant (Caleb, 2026-10-13). */
  --on-photo: #f3e9d4; --on-photo-muted: #d7cfab; --gold: #d6b062;
  --bg: #120c08; --card: rgba(40, 27, 18, .92); --ink: #f1e6cf; --muted: #bfae88; --line: #4d3824;
  --accent: #d4912f; --accent-ink: #1c1108; --soft: #3b2a19; --warn: #e48b72;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: #120c08; color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Background: the Holy Bible photo from meadowlakechurch.org, tinted dark so light text and the cards read cleanly.
   A fixed pseudo-element instead of background-attachment: fixed, which iOS Safari ignores. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,11,6,.35) 0%, rgba(18,11,6,.62) 45%, rgba(18,11,6,.85) 100%),
              url("bg-study.jpg") center 40% / cover no-repeat; }
.brand { display: block; width: 120px; height: auto; margin: 0 0 8px; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
header h1 { margin: 0; font-size: 1.9rem; letter-spacing: .01em; font-family: Georgia, "Times New Roman", serif; color: var(--on-photo); }
header p { margin: 4px 0 0; color: var(--on-photo-muted); }
a { color: var(--accent); }
.back { display: inline-block; margin-bottom: 12px; text-decoration: none; font-size: .95rem; color: var(--gold); }
.cards { display: grid; gap: 14px; margin-top: 24px; }
.card { display: block; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.35); border-radius: 14px;
  padding: 18px 20px; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--accent); }
.card h2 { margin: 0 0 4px; font-size: 1.2rem; color: var(--gold); font-family: Georgia, "Times New Roman", serif; letter-spacing: .01em; }
.card p { margin: 0; color: var(--muted); }
.note { margin-top: 28px; font-size: .9rem; color: var(--on-photo-muted); }
textarea, input[type=text], input[type=email], input[type=password] { width: 100%; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
textarea { min-height: 96px; resize: vertical; }
button { font: inherit; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); padding: 6px 14px; cursor: pointer; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; padding: 8px 18px; }
button.on { background: var(--soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
button.link { border: none; background: none; color: var(--muted); padding: 4px 6px; text-decoration: underline; }
button.danger { color: var(--warn); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.compose { margin-top: 20px; }
.prayer { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-top: 12px; }
.prayer .who { font-weight: 600; }
.prayer .when { color: var(--muted); font-size: .85rem; margin-left: 6px; }
.prayer .text { white-space: pre-wrap; margin: 6px 0 0; overflow-wrap: anywhere; }
.signed-in { color: var(--muted); font-size: .9rem; }
.answered { border-left: 4px solid var(--accent); }
.answered .tag { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--accent);
  background: var(--soft); border-radius: 999px; padding: 1px 10px; margin-left: 6px; }
.answer-note { margin: 8px 0 0; padding: 8px 12px; background: var(--soft); border-radius: 10px; white-space: pre-wrap; }
h2.section { margin: 36px 0 0; font-size: 1.15rem; color: var(--gold); }
.err { color: var(--warn); margin-top: 8px; }
.compose { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
#load-err:empty, #name-err:empty, #post-err:empty { display: none; }
.empty { color: var(--on-photo-muted); margin-top: 16px; }

.tabs { display: flex; gap: 4px; margin-top: 18px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.tabs a { flex: 1; text-align: center; padding: 8px 10px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95rem; }
.tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.tag.accountable { color: #f0c870; background: #3a2f18; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: .95rem; color: var(--muted); cursor: pointer; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.check strong { color: var(--ink); }
.info { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-top: 16px; }
.info-head { display: flex; justify-content: space-between; align-items: center; }
.info h2 { margin: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.info p { margin: 4px 0 0; }
.info .big { font-size: 1.15rem; font-weight: 600; margin-top: 8px; }
.info .muted { color: var(--muted); font-size: .95rem; }
.info .label { margin-top: 10px; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.info .tbd { color: var(--muted); font-style: italic; }
.edit-form label { display: block; margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.edit-form textarea { min-height: 0; margin-top: 4px; }
.info textarea { margin-top: 10px; }
.info input[type=text] { margin-top: 6px; }
.sent { list-style: none; padding: 0; margin: 12px 0 0; font-size: .88rem; color: var(--muted); }
.sent li { padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.purpose { margin: 6px 0 0; color: var(--on-photo-muted); font-style: italic; }
.event { margin-top: 14px; }
.event + .event { padding-top: 12px; border-top: 1px solid var(--line); }
.quiet-link { margin-left: 14px; color: var(--gold); text-decoration: none; font-size: .9rem; }

/* Desktop: logo in its own column on the left (like meadowlakechurch.org's header), content to its right.
   Phones keep the single column with a smaller logo on top. */
@media (min-width: 900px) {
  /* Landscape room for wide screens (Chippy, 2026-10-13); the tall image is for phones. */
  body::before { background: linear-gradient(180deg, rgba(18,11,6,.35) 0%, rgba(18,11,6,.62) 45%, rgba(18,11,6,.85) 100%),
                 url("bg-study-wide.jpg") center 55% / cover no-repeat; }
  main.home { max-width: 1060px; display: grid; grid-template-columns: 220px minmax(0, 720px);
    column-gap: 48px; justify-content: center; padding-top: 40px; }
  main.home > * { grid-column: 2; }
  main.home > .brand { grid-column: 1; grid-row: 1 / span 30; width: 220px; margin: 0;
    position: sticky; top: 40px; align-self: start; }
  header h1 { font-size: 2.4rem; }
}
@media (max-width: 480px) {
  header h1 { font-size: 1.6rem; }
  .card, .info { padding: 14px 16px; }
}

/* Sign-in page and account box (WordPress plugin, 2026-10-23). */
.signin { margin-top: 20px; }
.signin form { margin-top: 0; }
.signin label { display: block; margin-top: 12px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.signin input { margin-top: 4px; }
.signin .row { margin-top: 14px; }
.or { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; color: var(--muted); font-size: .9rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.notice { margin-top: 8px; color: var(--on-photo-muted); }
.blurb { margin: 10px 0 0; color: var(--on-photo-muted); }
details.account summary { cursor: pointer; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; }