/* style.css v1.11 — 2026-09-04
   Changelog:
   - v1.11 (2026-09-04): Two new standing keys. `investigated` (a favorable canonical
     enquiry that never became a decree — Knock, the Miraculous Medal) and
     `judged-negative` (formally judged NOT supernatural — Amsterdam), which is a
     different thing from `not-approved` (never established).
   - v1.10 (2026-09-04):
   - v1.10 (2026-09-04): The apparitions plot gained coastlines and pan/zoom. Land is
     a wash with a hairline border and sits UNDER the graticule, so the grid still
     reads as the measuring instrument and the map as context — the plot is still a
     plot, not a basemap with dots on it.
   - v1.9 (2026-09-04):
   - v1.9 (2026-09-04): Apparitions layers 3-5 — core-ask chips, the invariance
     spread bars, and link-strength badges. The badge colors are deliberately NOT
     a red-to-green scale: `unfulfilled` must not read as failure, and `established`
     must not read as proof. Same weight, different hue.
   - v1.8 (2026-09-04):
   - v1.8 (2026-09-04): Apparitions index components — century histogram, projected
     geographic scatter, sortable table with inline detail. Wide measure.
   - v1.7 (2026-09-04): Ladder component for long-interval devotions — nine
     consecutive months rather than nine days, where the sequence can be broken.
   - v1.6 (2026-09-04): Standing pill wraps instead of overflowing its card. The
     longest label is five words and nowrap pushed it past the edge on a phone.
   - v1.5 (2026-09-04): Distinct color for the indulgenced label; it was sharing green
     with 'approved', which made the two strongest claims look identical.
   - v1.4 (2026-09-04): Components for devotions with a rhythm rather than an arc
     (the Angelus): the hours, and the seasonal-text bar.
   - v1.3 (2026-09-04): Essay headings, bold, bullets and rules, for longer pieces.
     Drop cap scoped to the opening paragraph so it does not reappear after a heading.
   - v1.2 (2026-09-04): Essay components on the reading measure, adapted from the
     Aug 2026 layout; its Google Fonts dependency deliberately dropped.
   - v1.1 (2026-09-04): Layer-3 components for the catalog and plain pages. They share
     the tokens and primitives and nothing else with the prayer pages.
   - v1.0 (2026-09-04): Design system extracted from the LAN 54-day novena app.
     Cut in three layers so the novena's assumptions do not leak sitewide:
       LAYER 1  tokens        — palette, type, spacing. Universal.
       LAYER 2  primitives    — cards, pills, buttons, switches, top bar. Universal.
       LAYER 3  components    — per content type. Prayer pages here; essays and the
                                apparitions index get their own blocks, same tokens.
     Normative. Every page inherits layers 1 and 2 unchanged. */

/* ════════════════════════════════════════════════════════════════════
   LAYER 1 — TOKENS (universal)
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* light palette */
  --bg:#F4EDE2; --bg2:#EFE6D8; --surface:#FCF8F1; --surface2:#F7F0E4;
  --ink:#3B322A; --ink2:#5C5046; --muted:#8A7A69; --line:#E3D6C2; --line2:#D6C5AC;
  --terra:#B05B3B; --terra-d:#8C4429; --terra-l:#D8A98F; --terra-wash:#F6E7DD;

  /* mystery / theme accents */
  --joyful:#BE8A34; --sorrowful:#8E4034; --glorious:#6E7C52;

  /* status */
  --ok:#5F7A4E; --sync-ok:#5AA84F;

  /* type */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs:1;

  /* form */
  --radius:14px;
  --shadow:0 1px 2px rgba(80,55,35,.06), 0 6px 18px rgba(80,55,35,.07);

  /* measures — prayer pages are wide enough for step cards; prose is not */
  --measure-app:800px;    /* interactive prayer pages */
  --measure-read:640px;   /* essays: ~70 characters a line */
  --measure-wide:1100px;  /* reference pages: tables, timelines, maps */
  --pad:18px;
}
body.dim{
  --bg:#231C17; --bg2:#1D1712; --surface:#2C241D; --surface2:#332A22;
  --ink:#EDE1D0; --ink2:#D3C4B0; --muted:#A08F7C; --line:#413528; --line2:#4E4030;
  --terra:#D98B63; --terra-d:#E0A583; --terra-l:#8A5238; --terra-wash:#3A2A21;
  --joyful:#D5A24A; --sorrowful:#C4695A; --glorious:#9AAB78;
  --ok:#93AE7C; --sync-ok:#86D06F;
  --shadow:0 1px 2px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.28);
}

/* ════════════════════════════════════════════════════════════════════
   LAYER 2 — PRIMITIVES (universal)
   ════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:calc(16px * var(--fs)); line-height:1.55;
}
button{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
[hidden]{display:none!important}

.wrap{max-width:var(--measure-app);margin:0 auto;padding:0 var(--pad)}
.wrap-read{max-width:var(--measure-read);margin:0 auto;padding:0 var(--pad)}
.wrap-wide{max-width:var(--measure-wide);margin:0 auto;padding:0 var(--pad)}

/* --- top bar --- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap,.topbar .wrap-read,.topbar .wrap-wide{display:flex;align-items:center;gap:10px;height:58px}
.brand{font-family:var(--serif);font-weight:600;font-size:1.02em;letter-spacing:.01em;color:var(--terra-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand a{color:inherit;text-decoration:none}
.brand small{display:block;font-family:var(--sans);font-size:.66em;font-weight:500;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.spacer{flex:1}

/* --- buttons --- */
.iconbtn{
  border:1px solid var(--line2);background:var(--surface);color:var(--ink2);
  width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:.95em;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background .12s,border-color .12s,color .12s;
}
.iconbtn:hover{background:var(--terra-wash);border-color:var(--terra-l);color:var(--terra-d)}
.iconbtn.on{background:var(--terra);border-color:var(--terra);color:#fff}
.btn{
  border:1px solid var(--line2);background:var(--surface);color:var(--ink2);
  padding:7px 14px;border-radius:10px;cursor:pointer;font-size:.85em;font-weight:600;
  font-family:var(--sans);transition:background .12s,border-color .12s,color .12s;
}
.btn:hover{background:var(--terra-wash);border-color:var(--terra-l);color:var(--terra-d)}
.btn.primary{background:var(--terra);border-color:var(--terra);color:#fff}
.btn.primary:hover{background:var(--terra-d);border-color:var(--terra-d)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.4;cursor:default}
.btn-big{
  border:none;border-radius:12px;padding:15px 34px;font-size:1.05em;font-weight:700;
  cursor:pointer;background:var(--terra);color:#fff;font-family:var(--sans);
}
.btn-big:hover{background:var(--terra-d)}

/* --- cards --- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin:14px 0;overflow:hidden;
}
.card > .body{padding:18px 20px}

/* --- pills --- */
.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;min-width:0}
.pills > *{min-width:0}
.pill{
  font-size:.74em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);
  background:var(--surface2);white-space:nowrap;
}
.pill.set{color:#fff;border-color:transparent}
.pill.phase{background:var(--terra-wash);color:var(--terra-d);border-color:var(--terra-l)}
.pill.done{background:var(--ok);color:#fff;border-color:transparent}

/* --- standing pill (approval status) — tappable, explains itself --- */
/* "Private revelation with local approval" is five words; nowrap pushed it past the
   card edge on a phone. It wraps, and the flex parent is allowed to shrink. */
.standing{
  font-family:var(--sans);font-size:.74em;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid currentColor;background:transparent;
  white-space:normal;text-align:left;max-width:100%;line-height:1.35;
}
.standing[data-standing="approved"]{color:var(--ok)}
/* indulgenced is a stronger, narrower claim than approved — it needs its own color
   or the two most positive labels are indistinguishable */
.standing[data-standing="indulgenced"]{color:var(--terra)}
.standing[data-standing="local"]{color:var(--joyful)}
.standing[data-standing="none"]{color:var(--muted)}
.standing[data-standing="not-approved"]{color:var(--sorrowful)}
.standing::after{content:" ⓘ";font-weight:400}
/* on a catalog card the label only informs — no ⓘ, which would promise a tap */
.standing.static{cursor:default}
.standing.static::after{content:""}
.standing-note{
  margin-top:10px;padding:11px 14px;border-radius:10px;background:var(--surface2);
  border:1px solid var(--line);color:var(--ink2);font-size:.88em;line-height:1.6;
}

/* --- note / nudge --- */
.note{
  margin-top:14px;padding:11px 14px;border-radius:10px;
  background:var(--terra-wash);border:1px solid var(--terra-l);
  color:var(--terra-d);font-size:.9em;
}
.note b{font-weight:700}
.note .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}

/* --- toggle switch (state, not action) --- */
.sw{
  width:46px;height:27px;border-radius:999px;background:var(--line2);
  border:1px solid var(--line2);position:relative;cursor:pointer;padding:0;flex:0 0 auto;
  transition:background .18s,border-color .18s;
}
.sw i{
  position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 3px rgba(80,55,35,.28);transition:transform .18s;
}
.sw.on{background:var(--terra);border-color:var(--terra)}
.sw.on i{transform:translateX(19px)}
.sw:focus-visible{outline:2px solid var(--terra-l);outline-offset:2px}

/* --- settings rows --- */
.sechead{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:16px 0 8px}
.kv{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92em}
.kv:last-child{border-bottom:none}
.kv b{font-weight:600;color:var(--ink2)}
.kv > span{color:var(--terra-d);font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
.hint{color:var(--muted);font-size:.86em;margin-top:8px;line-height:1.6}

/* --- panels --- */
.panel{display:none;scroll-margin-top:72px}
.panel.open{display:block}
/* Settings is a mode: hide the page behind it so it is unambiguous which
   one you are in. Overlay panels (a day grid) keep the page visible. */
body.settings-open .pagebody,
body.settings-open .daynav,
body.settings-open .foot{display:none}
.donerow{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);text-align:center}

/* --- prose (essays, description text, about) --- */
.prose{font-family:var(--serif);font-size:1.06em;line-height:1.72;color:var(--ink)}
.prose p{margin:0 0 1em}
.prose h2{font-family:var(--serif);font-size:1.3em;font-weight:600;margin:1.6em 0 .5em}
.prose blockquote{
  margin:1.4em 0;padding:2px 0 2px 18px;border-left:3px solid var(--terra-l);
  color:var(--ink2);font-style:italic;
}
.prose a{color:var(--terra-d)}

/* --- footer --- */
.foot{text-align:center;color:var(--muted);font-size:.78em;padding:26px 0 10px;line-height:1.7}
.foot a{color:var(--terra-d)}

/* ════════════════════════════════════════════════════════════════════
   LAYER 3 — COMPONENTS: prayer pages
   Novena / chaplet / devotion only. Essays and the apparitions index
   do NOT use these; they get their own block on the same tokens.
   ════════════════════════════════════════════════════════════════════ */

/* --- progress rail --- */
.rail{height:3px;background:var(--line);position:relative;overflow:hidden}
.rail i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--terra-l),var(--terra));transition:width .4s ease}

/* --- day nav --- */
.daynav{display:flex;align-items:center;gap:10px;margin:20px 0 14px}
.daynav .mid{flex:1;text-align:center;min-width:0}
.daynav .dl{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.daynav .dd{font-family:var(--serif);font-size:1.5em;line-height:1.2;color:var(--ink)}
.nav-round{width:42px;height:42px;border-radius:50%;font-size:1.1em}

/* --- hero --- */
.hero .stripe{height:5px;background:var(--terra)}
.hero .body{padding:20px}
.hero h1{margin:0;font-family:var(--serif);font-size:1.75em;line-height:1.2;font-weight:600}
.hero .sub{color:var(--ink2);margin-top:6px;font-size:.95em}

/* --- step cards --- */
.step{scroll-margin-top:76px}
.step .head{display:flex;align-items:baseline;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface2)}
.step .num{
  font-family:var(--serif);font-size:.9em;font-weight:700;color:#fff;
  background:var(--accent,var(--terra));min-width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  align-self:center;font-variant-numeric:tabular-nums;
}
.step .t{font-family:var(--serif);font-size:1.12em;font-weight:600;line-height:1.3}
.step .t em{display:block;margin-top:2px;font-style:normal;color:var(--muted);font-size:.78em;font-family:var(--sans);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.step .body{padding:18px 20px}

/* --- prayer text --- */
blockquote.prayer,blockquote.rb{margin:0}
.prayer{font-family:var(--serif);font-size:1.06em;line-height:1.72;color:var(--ink);white-space:pre-wrap}
.prayer + .prayer{margin-top:1em}
.prayer .rub{display:block;margin-bottom:6px;color:var(--terra-d);font-family:var(--sans);font-size:.8em;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.intent{background:var(--terra-wash);border-bottom:2px solid var(--terra-l);padding:1px 6px;border-radius:4px;font-style:italic;color:var(--terra-d)}
.intent.empty{color:var(--muted);border-bottom-style:dashed;font-style:normal;font-family:var(--sans);font-size:.86em}
.vr{margin-top:1em;font-family:var(--serif);font-size:1.02em;line-height:1.7}
.vr span{color:var(--terra-d);font-weight:700;display:inline-block;width:1.6em}

/* --- beads --- */
.beads{margin-top:16px;padding:14px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.beads .bl{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-size:.8em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.beads .count{margin-left:auto;color:var(--terra-d);letter-spacing:0;font-variant-numeric:tabular-nums}
.beads .row{display:flex;flex-wrap:wrap;gap:9px}
.bead{
  width:30px;height:30px;border-radius:50%;border:2px solid var(--line2);
  background:var(--surface);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.7em;font-weight:700;color:var(--muted);font-family:var(--sans);
  transition:transform .1s,background .15s,border-color .15s,color .15s;
}
.bead:hover{border-color:var(--terra-l)}
.bead:active{transform:scale(.9)}
.bead.on{background:var(--terra);border-color:var(--terra);color:#fff}
.beads .lbls{display:flex;gap:9px;margin-top:7px;font-size:.7em;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.beads .lbls span{width:30px;text-align:center}

/* --- scripture reading --- */
.reading{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);overflow:hidden}
.reading > summary{
  cursor:pointer;padding:12px 15px;list-style:none;display:flex;align-items:center;gap:10px;
  font-size:.85em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--terra-d);
}
.reading > summary::-webkit-details-marker{display:none}
.reading > summary::after{content:"▾";margin-left:auto;font-size:1.1em;color:var(--muted);transition:transform .15s}
.reading[open] > summary::after{transform:rotate(180deg)}
.reading .rb{padding:4px 18px 18px;font-family:var(--serif);font-size:1.02em;line-height:1.75}
.reading .rb sup{color:var(--terra);font-size:.62em;font-weight:700;font-family:var(--sans);margin-right:2px;vertical-align:super}
.reading .cite{padding:0 18px 16px;font-size:.78em;color:var(--muted);font-family:var(--sans)}
.reading .trad{padding:0 18px 14px;font-size:.82em;color:var(--muted);font-style:italic}

/* --- intention --- */
.intbox textarea{
  width:100%;border:1px solid var(--line2);border-radius:10px;padding:11px 13px;
  font-family:var(--serif);font-size:1.02em;line-height:1.6;background:var(--bg2);
  color:var(--ink);resize:vertical;min-height:74px;
}
.intbox textarea:focus{outline:2px solid var(--terra-l);outline-offset:1px;border-color:var(--terra-l)}
.intbox .row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.saved{color:var(--ok);font-size:.82em;font-weight:600;opacity:0;transition:opacity .3s}
.saved.show{opacity:1}

/* --- finish --- */
.finish{text-align:center;padding:26px 20px}
.finish .btn-big.isdone{background:var(--ok)}
.finish p{color:var(--muted);font-size:.88em;margin:12px 0 0}

/* --- day grid (overlay: pick a day, panel closes) --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:6px}
.gd{
  border:1px solid var(--line2);background:var(--surface2);border-radius:10px;
  padding:8px 6px;cursor:pointer;text-align:center;font-family:var(--sans);
  position:relative;overflow:hidden;color:var(--ink2);
}
.gd:hover{border-color:var(--terra-l)}
.gd .n{display:block;font-family:var(--serif);font-size:1.05em;font-weight:700;line-height:1.15}
.gd .d{display:block;font-size:.68em;color:var(--muted);margin-top:1px;white-space:nowrap}
.gd .bar{position:absolute;left:0;right:0;top:0;height:3px}
.gd.cur{border-color:var(--terra);box-shadow:0 0 0 2px var(--terra-wash);background:var(--surface)}
.gd.done{background:var(--terra-wash)}
.gd .chk{position:absolute;right:4px;bottom:3px;font-size:.7em;color:var(--ok);font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:.76em;color:var(--muted)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* --- footer day nav --- */
.footnav{display:flex;gap:10px;margin:18px 0 4px}
.footnav .fn{
  flex:1 1 0;min-width:0;display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:13px 15px;cursor:pointer;color:var(--ink2);
  font-family:var(--sans);text-align:left;transition:border-color .12s,background .12s;
}
.footnav .fn:hover{border-color:var(--terra-l);background:var(--terra-wash)}
.footnav .fn.r{justify-content:flex-end;text-align:right}
.footnav .a{font-size:1.35em;color:var(--terra);line-height:1;flex:0 0 auto}
.footnav .l{min-width:0;overflow:hidden}
.footnav .l em{display:block;margin-bottom:2px;font-style:normal;font-size:.68em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.footnav .l b{display:block;font-weight:600;font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footnav .spacer-fn{flex:1 1 0}

/* --- guided mode: one step at a time --- */
.gbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--line2);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
}
.gbar .inner{display:flex;align-items:center;gap:12px;max-width:var(--measure-app);margin:0 auto}
.gbar .pos{font-size:.8em;color:var(--muted);font-weight:600;white-space:nowrap}
body.guided .gbar{display:block}
body.guided{padding-bottom:96px}
body.guided .step{display:none}
body.guided .step.active{display:block}
/* the hero, nudge and intention are not steps — show them only on step one */
body.guided .hero,body.guided .intbox,body.guided .footnav{display:none}
body.guided.at-start .hero,body.guided.at-start .intbox{display:block}
/* settings takes over even in guided mode */
body.settings-open .gbar{display:none}

/* --- description state (two-state page) --- */
.desc h1{font-family:var(--serif);font-size:2em;line-height:1.15;font-weight:600;margin:0}
.desc .lede{font-family:var(--serif);font-size:1.12em;line-height:1.65;color:var(--ink2);margin-top:12px}
.desc .begin{text-align:center;padding:8px 0 4px}
.desc .begin .hint{max-width:44ch;margin:12px auto 0}
.dl-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.95em}
.dl-row:last-child{border-bottom:none}
.dl-row dt{flex:0 0 8.5em;font-weight:700;color:var(--muted);font-size:.82em;letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
.dl-row dd{margin:0;color:var(--ink);flex:1}
.desc dl{margin:0}

/* ════════════════════════════════════════════════════════════════════
   LAYER 3 — COMPONENTS: catalog and plain pages
   Own component set on the same tokens. Deliberately shares nothing with
   the prayer-page components above.
   ════════════════════════════════════════════════════════════════════ */
.site-intro{padding:34px 0 8px}
.site-intro h1{font-family:var(--serif);font-size:2.1em;line-height:1.15;font-weight:600;margin:0;color:var(--ink)}
.site-intro p{font-family:var(--serif);font-size:1.1em;line-height:1.7;color:var(--ink2);margin:14px 0 0;max-width:34em}

.needbar{margin:26px 0 6px}
.needbar .lbl{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.needbar .chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--sans);font-size:.86em;padding:7px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink2);
  transition:background .12s,border-color .12s,color .12s;
}
.chip:hover{border-color:var(--terra-l);background:var(--terra-wash);color:var(--terra-d)}
.chip.on{background:var(--terra);border-color:var(--terra);color:#fff}

.catgroup{margin-top:26px}
.catgroup > h2{font-family:var(--sans);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.itemcard{
  display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px;transition:border-color .12s,transform .12s;
}
.itemcard:hover{border-color:var(--terra-l);transform:translateY(-1px)}
.itemcard h3{font-family:var(--serif);font-size:1.3em;line-height:1.25;font-weight:600;margin:0;color:var(--ink)}
.itemcard .line{font-family:var(--serif);font-size:1em;line-height:1.6;color:var(--ink2);margin:10px 0 0}
.itemcard .meta{font-size:.84em;color:var(--muted);margin-top:12px}
.itemcard .for{font-size:.88em;color:var(--ink2);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.itemcard .for em{font-style:normal;color:var(--muted);font-size:.86em;letter-spacing:.04em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:4px}
.itemcard .pills{margin-top:12px}
.emptynote{color:var(--muted);font-style:italic;padding:18px 0}

.plainpage{padding:34px 0 10px}
.plainpage h1{font-family:var(--serif);font-size:1.9em;line-height:1.2;font-weight:600;margin:0 0 18px;color:var(--ink)}
.sitenav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.sitenav a{color:var(--terra-d);text-decoration:none;font-size:.9em}
.sitenav a:hover{text-decoration:underline}

/* ════════════════════════════════════════════════════════════════════
   LAYER 3 — COMPONENTS: devotions with a rhythm, not an arc
   The Angelus is prayed three times a day forever. There is no day count,
   no progress and nothing to complete, so none of the novena machinery
   applies — just the hours, and which text belongs to the season.
   ════════════════════════════════════════════════════════════════════ */
.hours{display:flex;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.hour{
  flex:1 1 0;min-width:112px;text-align:center;padding:13px 10px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface2);
}
.hour.now{border-color:var(--terra);background:var(--terra-wash)}
.hour .t{font-family:var(--serif);font-size:1.25em;font-weight:600;color:var(--ink);line-height:1.2}
.hour .n{display:block;margin-top:3px;font-size:.7em;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.hour.now .n{color:var(--terra-d)}
.seasonbar{
  margin-top:16px;padding:12px 15px;border-radius:10px;background:var(--surface2);
  border:1px solid var(--line);font-size:.9em;color:var(--ink2);line-height:1.6;
}
.seasonbar b{color:var(--terra-d)}
.versepair{margin:0 0 1.1em;font-family:var(--serif);font-size:1.06em;line-height:1.7}
.versepair span{color:var(--terra-d);font-weight:700;display:inline-block;width:1.7em}

/* ════════════════════════════════════════════════════════════════════
   LAYER 3 — COMPONENTS: the apparitions index
   A read-only reference page on the wide measure. Nothing here is shared
   with the prayer pages beyond tokens and primitives.
   ════════════════════════════════════════════════════════════════════ */
.filterbar{margin:22px 0 4px}
.filterbar .lbl{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.filterbar .chips{display:flex;flex-wrap:wrap;gap:8px}
.countline{margin-top:12px;font-size:.9em;color:var(--ink2)}
.countline b{color:var(--terra-d)}

/* century histogram — the frequency argument */
.hist{display:flex;align-items:flex-end;gap:3px;height:132px;margin-top:8px}
/* height:100% so the bars' percentage heights have something to resolve against */
.hist .col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
.hist .bwrap{flex:1;width:100%;display:flex;align-items:flex-end}
.hist .bar{width:100%;background:var(--terra-l);border-radius:3px 3px 0 0;min-height:2px;transition:height .3s}
.hist .col.hot .bar{background:var(--terra)}
.hist .col{cursor:pointer}
.hist .col:hover .bar{background:var(--terra-d)}
.hist .col.sel .bar{background:var(--terra-d);outline:2px solid var(--terra);outline-offset:1px}
.hist .col.sel .cv{color:var(--terra-d);font-weight:700}
.hist .cn{font-size:.58em;color:var(--muted);margin-top:5px;white-space:nowrap;transform:rotate(-90deg) translateX(-6px);transform-origin:center;height:22px}
.hist .cv{font-size:.62em;color:var(--terra-d);font-weight:700;margin-bottom:3px}

/* geographic plot — a projected scatter, not a cartographic map */
.geo{margin-top:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);padding:10px;overflow-x:auto}
.geo svg{display:block;width:100%;min-width:520px;height:auto}
.geo .grid{stroke:var(--line2);stroke-width:.5;fill:none}
.geo .lbl{fill:var(--muted);font-size:8px;font-family:var(--sans)}
.geo .pt{fill:var(--terra);opacity:.8;cursor:pointer}
.geo .pt:hover{fill:var(--terra-d);opacity:1}
.geo .pt.dim{fill:var(--line2);opacity:.5}

/* the table — where a skeptic works */
.tblwrap{overflow-x:auto;margin-top:8px;border:1px solid var(--line);border-radius:12px}
table.app{width:100%;min-width:620px;border-collapse:collapse;font-family:var(--sans);font-size:.88em;background:var(--surface)}
table.app th{
  text-align:left;padding:11px 12px;background:var(--surface2);border-bottom:1px solid var(--line);
  font-size:.82em;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;
  cursor:pointer;white-space:nowrap;
}
table.app th:hover{color:var(--terra-d)}
table.app th.sorted::after{content:" ▾";color:var(--terra)}
table.app th.sorted.asc::after{content:" ▴"}
table.app td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink2)}
table.app tr.row{cursor:pointer}
table.app tr.row:hover td{background:var(--terra-wash)}
table.app tr.row.open td{background:var(--surface2)}
table.app .nm{color:var(--ink);font-weight:600}
table.app .yr{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
table.app tr.detail td{background:var(--surface2);padding:0}
.detailbox{padding:16px 14px;font-family:var(--serif);font-size:1em;line-height:1.7;color:var(--ink)}
.detailbox dl{margin:0}
.detailbox .dr{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.detailbox .dr:last-child{border-bottom:none}
.detailbox .dr dt{flex:0 0 8em;font-family:var(--sans);font-size:.76em;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;padding-top:3px}
.detailbox .dr dd{margin:0;flex:1;min-width:0}
.gap{color:var(--muted);font-style:italic;font-family:var(--sans);font-size:.88em}

/* standing chips inside the table */
.stt{font-family:var(--sans);font-size:.74em;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.stt.local{color:var(--joyful)} .stt.approved{color:var(--ok)}
.stt.scripture{color:var(--ok)} .stt.tradition{color:var(--muted)}
.stt.contested{color:var(--terra)} .stt.not-approved{color:var(--sorrowful)}
.stt.other-communion{color:var(--glorious)} .stt.approved-devotion-only{color:var(--terra)}
.stt.unassessed{color:var(--line2)}
.stt.investigated{color:var(--joyful)}
.stt.judged-negative{color:var(--sorrowful)}
.unsourced{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;font-size:.92em}

/* the plot's land, controls and clusters */
.land path{fill:var(--line);stroke:var(--line2);stroke-width:.6;opacity:.85}
.geo .grid.eq{stroke:var(--terra-l)}
.geo{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.geo.grabbing{cursor:grabbing}
.geo svg{display:block;width:100%;height:auto}
.geobar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.geobar .btn{padding:5px 11px;font-size:.86em}
.geobar #geoIn,.geobar #geoOut{min-width:2.2em;font-weight:700;font-size:1em;line-height:1}
.geoz{font-family:var(--sans);font-size:.8em;color:var(--muted);
  font-variant-numeric:tabular-nums;margin-left:2px}
.cluster circle{fill:var(--terra);stroke:var(--surface);cursor:zoom-in}
.cluster text{fill:#fff;text-anchor:middle;font-family:var(--sans);font-weight:700;
  pointer-events:none}
.cluster.dim circle{fill:var(--line2)}
.cluster.dim text{fill:var(--muted)}
.glbl text{fill:var(--muted);font-family:var(--sans);letter-spacing:.06em;
  text-anchor:middle;pointer-events:none;opacity:.85}

/* core-ask chips — the fixed vocabulary, layer 3 */
.corechip{display:inline-block;font-family:var(--sans);font-size:.74em;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;margin:0 5px 5px 0;
  border-radius:999px;background:var(--terra-wash);color:var(--terra-d);
  border:1px solid var(--terra-l)}
.corenone{display:inline-block;font-family:var(--sans);font-size:.78em;color:var(--muted);
  font-style:italic}

/* the invariance spread — one row per core ask, bar spans first to last occurrence */
.spread{margin-top:12px}
.sprow{display:flex;align-items:center;gap:10px;padding:5px 0}
.sprow .lbl{flex:0 0 7.4em;font-family:var(--sans);font-size:.76em;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--terra-d)}
.sprow .track{flex:1;min-width:0;height:14px;position:relative;background:var(--line);
  border-radius:7px;overflow:hidden}
.sprow .track i{position:absolute;top:0;bottom:0;background:var(--terra);border-radius:7px;
  opacity:.75}
.sprow .track b{position:absolute;top:0;bottom:0;width:3px;background:var(--terra-d)}
.sprow .cnt{flex:0 0 3.6em;text-align:right;font-variant-numeric:tabular-nums;
  font-size:.84em;color:var(--muted)}
.spaxis{display:flex;justify-content:space-between;font-size:.72em;color:var(--muted);
  margin-top:4px;padding-left:calc(7.4em + 10px);padding-right:calc(3.6em + 10px)}

/* link-strength badges — layer 5.
   Not a traffic light. A four-step red-to-green scale would tell the reader what to
   conclude, which is the opposite of the point: `unfulfilled` is included on purpose
   and is not a failure state, and `established` means the dating is documented, not
   that the causal question is settled. So: one weight, four hues, no ranking implied
   by color alone — the words carry the meaning. */
.lsb{display:inline-block;font-family:var(--sans);font-size:.7em;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:4px;
  border:1px solid currentColor}
.lsb.established{color:var(--glorious)}
.lsb.arguable{color:var(--joyful)}
.lsb.asserted{color:var(--terra)}
.lsb.unfulfilled{color:var(--ink2)}

.claim{padding:16px 0;border-bottom:1px solid var(--line)}
.claim:last-child{border-bottom:0}
.claim .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.claim .top .yr{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.86em}
.claim .top .nm{font-family:var(--serif);font-weight:600;font-size:1.04em}
.claim .said,.claim .did{margin:5px 0;font-size:.96em}
.claim .said b,.claim .did b{font-family:var(--sans);font-size:.74em;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px}
.claim .why{margin-top:9px;font-size:.92em;color:var(--ink2);background:var(--bg2);
  border-left:3px solid var(--line2);padding:10px 12px;border-radius:0 8px 8px 0}

@media (max-width:640px){
  .hist{height:104px}
  .detailbox .dr{flex-direction:column;gap:2px}
  .detailbox .dr dt{flex:none}
  .sprow .lbl{flex:0 0 5.6em;font-size:.68em}
  .spaxis{padding-left:calc(5.6em + 10px)}
}

/* ════════════════════════════════════════════════════════════════════
   LAYER 3 — COMPONENTS: long-interval devotions
   Nine consecutive months, not nine days. A completion arc measured in
   months needs a ladder, not a day grid: each rung is a dated occasion,
   and the sequence can be broken, which the day grids cannot express.
   ════════════════════════════════════════════════════════════════════ */
.ladder{margin:18px 0 0}
.rung{
  display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface2);margin-bottom:8px;
}
.rung.done{background:var(--terra-wash);border-color:var(--terra-l)}
.rung.next{border-color:var(--terra);box-shadow:0 0 0 2px var(--terra-wash)}
.rung.past{opacity:.62}
.rung .n{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;
  font-size:.9em;border:2px solid var(--line2);color:var(--muted);background:var(--surface);
}
.rung.done .n{background:var(--terra);border-color:var(--terra);color:#fff}
.rung .when{flex:1;min-width:0}
.rung .when b{display:block;font-weight:600;font-size:.95em;color:var(--ink)}
.rung .when em{display:block;font-style:normal;font-size:.78em;color:var(--muted);margin-top:1px}
.rung .mark{
  flex:0 0 auto;border:1px solid var(--line2);background:var(--surface);color:var(--ink2);
  border-radius:9px;padding:6px 12px;font-size:.8em;font-weight:600;cursor:pointer;
  font-family:var(--sans);
}
.rung .mark:hover{border-color:var(--terra-l);background:var(--terra-wash);color:var(--terra-d)}
.rung.done .mark{background:transparent;border-color:transparent;color:var(--ok)}
.broken{
  margin-top:16px;padding:13px 15px;border-radius:10px;
  background:var(--surface2);border:1px solid var(--line2);color:var(--ink2);font-size:.9em;line-height:1.65;
}
.broken b{color:var(--terra-d)}

/* ════════════════════════════════════════════════════════════════════
   LAYER 3 — COMPONENTS: essays
   The reading measure, not the app measure. Taken from the Aug 2026 layout
   in docs/essay-layout-2026-08-09/ and re-skinned to these tokens; the
   Google Fonts dependency it came with is deliberately dropped.
   ════════════════════════════════════════════════════════════════════ */
.essay{padding:40px 0 10px;position:relative}
.essay h1{
  font-family:var(--serif);font-size:2.25em;line-height:1.14;font-weight:600;
  margin:0 0 6px;color:var(--ink);letter-spacing:-.005em;
}
.essay .sig{
  font-family:var(--sans);font-size:.72em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 26px;
}
.essay .whatthis{
  font-size:.9em;line-height:1.6;color:var(--ink2);background:var(--surface2);
  border:1px solid var(--line);border-radius:10px;padding:12px 15px;margin:0 0 30px;
}
.essay .body{font-family:var(--serif);font-size:1.13em;line-height:1.78;color:var(--ink)}
.essay .body p{margin:0 0 1.15em}
.essay .body em,.essay .body i{font-style:italic}
.essay .body .break{
  text-align:center;color:var(--terra-l);letter-spacing:.7em;margin:1.9em 0;font-size:.9em;
}
.essay .body h2{
  font-family:var(--serif);font-size:1.32em;line-height:1.3;font-weight:600;
  margin:2.1em 0 .6em;color:var(--ink);
}
.essay .body h2:first-child{margin-top:0}
.essay .body strong{font-weight:700;color:var(--ink)}
.essay .body ul{margin:0 0 1.15em;padding-left:1.25em;list-style:none}
.essay .body ul li{position:relative;margin:0 0 .45em}
.essay .body ul li::before{
  content:"—";position:absolute;left:-1.25em;color:var(--terra-l);
}
.essay .body hr{
  border:none;height:1px;background:var(--line);margin:2.2em 0;
}
/* the drop cap belongs to the opening paragraph only, not to one after a heading */
.essay .body > p:first-of-type::first-letter{
  float:left;font-size:3.1em;line-height:.86;padding:.06em .09em 0 0;
  color:var(--terra);font-weight:600;
}
.essay .body h2 ~ p::first-letter{float:none;font-size:inherit;padding:0;color:inherit;font-weight:inherit}
.essay .end{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.88em;color:var(--muted);line-height:1.7;
}
/* On a wide screen the signature moves into the left margin, as in the Aug layout. */
@media (min-width:1080px){
  .essay .sig{position:absolute;left:-9rem;top:.7em;width:8rem;text-align:right;margin:0}
}
@media (max-width:520px){
  .essay h1{font-size:1.75em}
  .essay .body{font-size:1.06em}
  .essay .body p:first-of-type::first-letter{font-size:2.7em}
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE + PRINT
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:520px){
  .brand small{display:none}
  .daynav .dd{font-size:1.25em}
  .card > .body,.step .body,.hero .body{padding:16px 15px}
  .step .head{padding:12px 15px}
  .bead{width:28px;height:28px}
  .dl-row{flex-direction:column;gap:3px}
  .dl-row dt{flex:none}
  .desc h1{font-size:1.6em}
  .site-intro h1{font-size:1.7em}
  .cards{grid-template-columns:1fr}
}
@media (max-width:420px){
  .footnav .l em{display:none}
  .footnav .fn{padding:12px}
}
@media print{
  .topbar,.daynav,.panel,.finish,.beads,.foot,.footnav,.intbox .row,.desc .begin,.gbar{display:none!important}
  body.guided .step,body.guided .hero,body.guided .intbox{display:block!important}
  body{background:#fff;color:#000}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .reading{border:1px solid #ddd}
  .reading .rb{display:block!important}
}