/* Tokens and base copied from help.html by build_questions.py. Edit help.html, then rebuild. */

/* ============================================================
   MERCY — givemercy.app/support
   Same system as index: serif-editorial, warm paper, one accent.
   ============================================================ */
:root{
  --paper:        oklch(97.2% 0.012 82);
  --paper-2:      oklch(94.5% 0.018 80);
  --paper-3:      oklch(90.5% 0.024 78);
  --rule:         oklch(86% 0.02 75);
  --rule-2:       oklch(76% 0.025 70);
  --ink:          oklch(22% 0.02 50);
  --ink-2:        oklch(38% 0.02 50);
  --muted:        oklch(50% 0.018 55);
  --ox:           oklch(42% 0.14 28);
  --ox-deep:      oklch(34% 0.13 28);
  --gold:         oklch(78% 0.12 75);
  --gold-deep:    oklch(66% 0.13 70);
  --ledger:       oklch(44% 0.06 170);
  --chapel:       oklch(19% 0.018 55);
  --chapel-2:     oklch(24% 0.02 55);
  --chapel-ink:   oklch(94% 0.02 80);
  --chapel-muted: oklch(70% 0.02 75);
  --chapel-rule:  oklch(32% 0.02 55);
  --f-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1200px;
  --sec: clamp(64px, 8vw, 112px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-paper: 0 1px 0 rgba(60,40,20,.06), 0 24px 48px -28px rgba(60,40,20,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.eyebrow{font-family:var(--f-mono); font-weight:600; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ox)}
.eyebrow.on-dark{color:var(--gold)}
h1,h2,h3,.display{font-family:var(--f-display); font-weight:400; letter-spacing:-0.012em; line-height:1.06; margin:0; text-wrap:balance}
h1{font-size:clamp(48px, 7vw, 92px)}
h2{font-size:clamp(38px, 5.2vw, 68px)}
h3{font-size:clamp(26px, 3vw, 36px); line-height:1.12}
em.i{font-style:italic; color:var(--ox)}
.on-dark em.i{color:var(--gold)}
.lede{font-size:clamp(18px,2vw,21px); line-height:1.5; color:var(--ink-2); max-width:58ch}
p{margin:0}
.measure{max-width:62ch}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in oklch, var(--paper) 86%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand svg{width:18px; height:24px; fill:var(--ox)}
.brand .name{font-family:var(--f-display); font-size:26px; letter-spacing:-0.01em}
.nav-links{display:flex; gap:28px; align-items:center}
.nav-links a{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); font-weight:600}
.nav-links a:hover{color:var(--ox)}
.nav-links a.here{color:var(--ox)}
@media (max-width:720px){.nav-links a:not(.btn){display:none}}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border-radius:999px; font-family:var(--f-mono); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:transform .18s var(--ease-out), background .18s, color .18s, box-shadow .18s; border:1.5px solid transparent}
.btn.solid{background:var(--ox); color:var(--paper); box-shadow:0 8px 24px rgba(110,30,26,.25)}
.btn.solid:hover{background:var(--ox-deep); transform:translateY(-1px)}
.btn.ghost{border-color:var(--ink); color:var(--ink); background:transparent}
.btn.ghost:hover{background:var(--ink); color:var(--paper); transform:translateY(-1px)}
.on-dark .btn.ghost{border-color:var(--chapel-ink); color:var(--chapel-ink)}
.on-dark .btn.ghost:hover{background:var(--chapel-ink); color:var(--chapel)}
.btn svg{width:16px;height:16px}

section{padding:var(--sec) 0}
.sec-head{display:grid; gap:18px; margin-bottom:clamp(36px,5vw,56px); max-width:780px}
.sec-head .eyebrow{display:flex; align-items:center; gap:12px}
.sec-head .eyebrow::before{content:""; width:28px; height:1.5px; background:currentColor; opacity:.7}

/* page hero — light paper, document register */
.page-hero{background:var(--paper); border-bottom:1px solid var(--rule); padding:clamp(64px,9vw,128px) 0 clamp(48px,6vw,88px)}
.page-hero .wrap{display:grid; gap:24px}
.page-hero h1{max-width:15ch}

/* membership (mirrors index) */
.member{background:var(--paper-2)}
.member .two{display:grid; grid-template-columns:1fr 380px; gap:clamp(28px,5vw,72px); align-items:start}
.plans{border:1px solid var(--rule); background:var(--paper); box-shadow:var(--shadow-paper)}
.plan{display:flex; justify-content:space-between; align-items:baseline; padding:22px 24px; border-bottom:1px solid var(--rule)}
.plan:last-of-type{border-bottom:0}
.plan.pick{background:var(--paper-2); box-shadow:inset 3px 0 0 var(--ox)}
.plan .l{font-family:var(--f-display); font-size:22px}
.plan .s{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; font-weight:600}
.plan .p{font-family:var(--f-display); font-size:34px; font-variant-numeric:tabular-nums}
.plan.pick .p{color:var(--ox)}
.plans .cta{padding:18px 24px 22px; display:grid; gap:12px}
.fine{font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:.04em; line-height:1.7}
.free-list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px}
.free-list li{display:grid; grid-template-columns:20px 1fr; gap:12px; font-size:16.5px; color:var(--ink-2)}
.free-list li::before{content:"✓"; font-family:var(--f-mono); color:var(--ledger); font-weight:600}
@media (max-width:900px){.member .two{grid-template-columns:1fr}}

/* patreon */
.patreon .two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
.patreon-card{border:1px solid var(--rule); background:var(--paper); box-shadow:var(--shadow-paper); padding:clamp(28px,4vw,44px); display:grid; gap:18px}
.patreon-card .l{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}
.patreon-card .big{font-family:var(--f-display); font-size:clamp(24px,2.6vw,32px); line-height:1.15}
@media (max-width:860px){.patreon .two{grid-template-columns:1fr}}

/* free ways — dark chapel canvas */
.freeways{background:var(--chapel); color:var(--chapel-ink)}
.freeways .lede{color:var(--chapel-muted)}
.ways-grid{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--chapel-rule); background:var(--chapel-rule); gap:1px}
.way{background:var(--chapel-2); padding:26px 24px 30px; display:grid; gap:12px; align-content:start}
.way .n{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--gold); font-weight:600}
.way h3{font-size:clamp(24px,2.4vw,30px)}
.way p{font-size:15.5px; color:var(--chapel-muted); line-height:1.55}
@media (max-width:860px){.ways-grid{grid-template-columns:1fr}}

/* fund */
.fund{background:var(--paper)}
.fund-body{display:grid; gap:24px; max-width:66ch}
.fund-body p{font-size:clamp(17px,1.9vw,19px); color:var(--ink-2); line-height:1.65}
.pledge{border-left:2px solid var(--ledger); padding-left:20px; font-family:var(--f-display); font-style:italic; font-size:clamp(20px,2.3vw,26px); line-height:1.4; color:var(--ink)}
.fund-note{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; line-height:1.9}

/* closing */
.closing{background:var(--chapel); color:var(--chapel-ink); position:relative; overflow:hidden; isolation:isolate}
.closing::before{content:""; position:absolute; inset:0; z-index:-1; background:url("https://qkjslswshdeaytzskpai.supabase.co/storage/v1/object/public/prayer-art/001.png") center 40% / cover no-repeat; filter:brightness(.34) saturate(.95)}
.closing::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,10,7,.7), rgba(14,10,7,.35) 50%, rgba(14,10,7,.8))}
.closing .wrap{display:grid; gap:26px; text-align:center; justify-items:center; padding-top:clamp(80px,10vw,140px); padding-bottom:clamp(80px,10vw,140px)}
.closing h2{max-width:16ch; text-shadow:0 2px 24px rgba(0,0,0,.5)}
.closing .lede{text-align:center; max-width:50ch}

/* footer */
footer{background:var(--paper); border-top:1px solid var(--rule); padding:32px 0 48px}
footer .wrap{display:grid; gap:12px}
footer p{font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:.06em; line-height:1.8}
footer .vow{color:var(--ox); font-weight:600}
footer a{text-decoration:none}

/* reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto}}
/* ---------- sibling brands ----------
   The other apps from the same builder; TradeGreen carries the mirror of this
   row. Muted on purpose — a person came for the prayer, not the portfolio. */
/* ---------- app download row (footer) ---------- */
.get-app{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding-bottom:18px; margin-bottom:6px; border-bottom:1px solid var(--rule)}
.get-app .lbl{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:600; margin-right:4px}
.get-app .store{display:inline-grid; min-height:48px; min-width:150px; padding:7px 18px; border-radius:12px; background:var(--chapel); color:var(--chapel-ink); text-decoration:none; align-content:center; transition:background .18s var(--ease-out)}
.get-app .store:hover{background:var(--ox-deep)}
.get-app .s1{font-family:var(--f-display); font-size:19px; line-height:1.1}
.get-app .s2{font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--chapel-muted)}
.siblings{display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center;
  margin-top:18px; padding-top:18px; border-top:1px solid var(--rule)}
.siblings .lbl{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.siblings a{display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
  /* The row is small by design, but a tap target is not a style choice:
     padding lifts it to 44px without changing how the row looks. */
  min-height:44px; padding:4px 0;
  transition:color .18s var(--ease-out)}
.siblings a:hover{color:var(--ink)}
.siblings img{width:18px; height:18px; border-radius:5px; flex-shrink:0; object-fit:cover}


/* ---------- question pages (generated by build_questions.py) ---------- */
a.eyebrow{text-decoration:none}
.page-hero h1{max-width:20ch; font-size:clamp(40px,6vw,76px)}
.page-hero .answer{color:var(--ink); max-width:60ch}
.post{background:var(--paper); padding:clamp(48px,6vw,88px) 0}
.post .wrap{max-width:720px; display:grid; gap:22px}
.post p{font-size:clamp(17.5px,1.9vw,19px); line-height:1.7; color:var(--ink-2)}
.post h2{font-size:clamp(28px,3.6vw,40px); margin-top:18px; color:var(--ink)}
.post blockquote{margin:6px 0; border-left:2px solid var(--ox); padding:4px 0 4px 22px; display:grid; gap:8px}
.post blockquote p{font-family:var(--f-display); font-size:clamp(21px,2.4vw,26px); line-height:1.4; color:var(--ink)}
.post cite{font-family:var(--f-mono); font-style:normal; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
.greek{margin-top:4px; font-size:15px; color:var(--muted)}
.greek summary{cursor:pointer; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ox); min-height:44px; display:flex; align-items:center}
.post .greek p{font-family:var(--f-body); font-size:15.5px; line-height:1.6; color:var(--ink-2); margin-top:6px}
.post .greek .grc{font-family:"Gentium Plus","Noto Serif",Georgia,serif; font-size:19px; color:var(--ink)}
.greek .note{border-left:2px solid var(--gold-deep); padding-left:12px}
.next{background:var(--paper-2); border-top:1px solid var(--rule)}
.next .wrap{max-width:900px; display:grid; gap:clamp(40px,5vw,56px)}
.related{list-style:none; margin:0; padding:0; display:grid; gap:2px; max-width:none}
.related li{padding:0; border-bottom:1px solid var(--rule)}
.related li::before{content:none}
.related li a{color:var(--ink); text-decoration:none; font-family:var(--f-display); font-size:clamp(21px,2.3vw,26px); line-height:1.3; display:block; min-height:44px; padding:12px 0}
.related li a:hover{color:var(--ox)}
.painting{background:var(--paper); margin:0; padding:clamp(28px,4vw,48px) 0 0}
.painting .wrap{max-width:1040px}
.painting img{width:100%; height:auto; aspect-ratio:25/14; object-fit:cover; box-shadow:var(--shadow-paper)}
.stories .wrap{max-width:1200px}
.story-group{display:grid; gap:14px; scroll-margin-top:88px}
.story-group h2{font-size:clamp(30px,4vw,46px)}
.stories .tailpiece{margin:clamp(40px,6vw,72px) auto}
.story-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(20px,3vw,32px); margin-top:14px}
.story-card{display:grid; gap:8px; align-content:start; text-decoration:none; color:var(--ink); background:var(--paper); border:1px solid var(--rule); box-shadow:var(--shadow-paper); padding-bottom:20px; transition:transform .18s var(--ease-out)}
.story-card:hover{transform:translateY(-2px)}
.story-card img{width:100%; height:auto; aspect-ratio:25/14; object-fit:cover}
.story-card .meta,.story-card .t,.story-card .who{padding:0 20px}
.story-card .meta{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ox); font-weight:600; margin-top:8px}
.story-card .t{font-family:var(--f-display); font-size:clamp(24px,2.4vw,28px); line-height:1.15}
.story-card .who{font-size:15px; color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.story-card{transition:none}.story-card:hover{transform:none}}
.app-card{border:1px solid var(--rule); background:var(--paper); box-shadow:var(--shadow-paper); padding:clamp(28px,4vw,44px); display:grid; gap:16px; justify-items:start}
.app-card .display{font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--ink)}
.app-card p{color:var(--ink-2); max-width:52ch}