/* pages.css — shared styling for the static, crawlable informational pages
   (About, What We Believe, Our Life Together, Giving, Visit).

   MOBILE-FIRST / PHONE-FIRST: the base rules target a phone; min-width media
   queries only widen the reading column on larger screens. Matches the app's
   parchment / missal aesthetic. */

:root {
  --ink:#1a1714; --ink-soft:#4a3f2e; --ink-mute:#8a7a5e;
  --paper:#faf5e8; --bg:#f4ede0; --gold:#b8893d; --accent:#7a2e2e;
  --rule:rgba(26,23,20,0.18); --rule-soft:rgba(26,23,20,0.08);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background:
    radial-gradient(circle at 20% 8%, rgba(184,137,61,0.10), transparent 52%),
    radial-gradient(circle at 82% 82%, rgba(122,46,46,0.07), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  line-height: 1.68; font-size: 17px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent); }

/* Reading column — full-width on a phone with comfortable side padding. */
.wrap { width:100%; max-width:720px; margin:0 auto; padding:0 20px; }

/* Header + primary navigation (wraps to multiple rows on a phone). */
header.site { background: var(--paper); border-bottom:1px solid var(--rule); }
.brand { text-align:center; padding:18px 20px 4px; }
.brand a { text-decoration:none; color:var(--ink); font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; letter-spacing:0.02em; line-height:1.15; }
.brand .motto { display:block; font-style:italic; color:var(--ink-mute); font-size:12.5px; margin-top:3px; letter-spacing:0.01em; }
nav.site { display:flex; flex-wrap:wrap; justify-content:center; padding:2px 8px 12px; }
nav.site a { text-decoration:none; color:var(--ink-soft); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; letter-spacing:0.13em; text-transform:uppercase; padding:8px 10px; white-space:nowrap; }
nav.site a[aria-current="page"] { color:var(--accent); border-bottom:2px solid var(--gold); }

/* Body */
main { padding: 24px 0 8px; }
.eyebrow { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
h1 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:33px; line-height:1.05; margin:0 0 4px; }
h1 .em { font-style:italic; color:var(--accent); }
h2 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:22px; margin:30px 0 4px; color:var(--ink); }
p { margin:12px 0; color:var(--ink-soft); }
.lead { font-style:italic; color:var(--ink-soft); font-size:1.02em; }
.rule { height:1px; background:var(--rule); margin:24px 0; border:0; }

/* Buttons + links */
.btn { display:inline-block; background:var(--accent); color:var(--paper)!important; text-decoration:none; border:0; border-radius:3px; padding:12px 20px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer; }
.btn.ghost { background:transparent; color:var(--ink)!important; border:1px solid rgba(184,137,61,0.55); }

/* Simple form (Communion memory) */
form.card { background:var(--paper); border:1px solid var(--rule); border-radius:3px; padding:16px; margin-top:14px; }
form.card label { display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:12px; }
form.card label:first-of-type { margin-top:0; }
form.card input, form.card textarea { width:100%; box-sizing:border-box; margin-top:6px; padding:10px 12px; font-family:'Newsreader',Georgia,serif; font-size:16px; color:var(--ink); background:var(--bg); border:1px solid var(--rule); border-radius:2px; outline:none; }
.memory { padding:12px 0; border-bottom:1px solid var(--rule-soft); }
.memory .who { font-family:'Cormorant Garamond',Georgia,serif; font-size:18px; color:var(--ink); }
.memory .text { font-style:italic; color:var(--ink-soft); font-size:15px; margin-top:2px; }
.memory .by { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9px; letter-spacing:0.1em; color:var(--ink-mute); margin-top:5px; text-transform:uppercase; }

/* Footer */
footer.site { border-top:1px solid var(--rule); margin-top:34px; padding:24px 0 44px; text-align:center; color:var(--ink-mute); font-size:14px; }
footer.site a { color:var(--ink-mute); }
footer.site .np { font-size:12px; margin-top:12px; opacity:0.9; line-height:1.5; }

/* Larger screens only — widen the column and headings. */
@media (min-width:768px){ body{font-size:18px;} .wrap{max-width:760px;} h1{font-size:44px;} h2{font-size:25px;} .brand a{font-size:24px;} nav.site a{font-size:10.5px;} }
@media (min-width:1100px){ .wrap{max-width:820px;} }