:root{
  /* ---- Indigo (default) ---- */
  --bg:#0a0a10;
  --bg-2:#0e0e16;
  --ink:#e2e1ea;
  --ink-soft:#c2c0cd;
  --muted:#8a8898;
  --faint:#6a6878;
  --line:#1b1b24;
  --line-2:#262633;
  --accent:#8a7fd1;
  --accent-14:rgba(138,127,209,.14);
  --accent-30:rgba(138,127,209,.3);
  --accent-35:rgba(138,127,209,.35);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Spectral',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:radial-gradient(125% 125% at 78% 0%, var(--bg-2), var(--bg) 58%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--accent-14);color:var(--ink)}

a{color:var(--accent);text-decoration:none}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

/* ---------------- layout shell ---------------- */
.layout{display:grid;grid-template-columns:300px 1fr;align-items:start}

/* ---------------- sidebar / index ---------------- */
.sidebar{
  position:sticky;top:0;height:100vh;
  border-right:1px solid var(--line);
  padding:2.6rem 2rem;
  display:flex;flex-direction:column;
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{width:34px;height:34px;flex-shrink:0}
.brand .word{font-family:var(--display);font-size:1.6rem;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1}
.brand .sub{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em;margin-top:.3rem}

.rule{height:1px;background:var(--line);margin:1.8rem 0}

.toc{display:flex;flex-direction:column}
.toc a{
  font-family:var(--mono);font-size:12px;
  color:var(--muted);padding:.42rem 0;transition:color .12s;
}
.toc a:hover{color:var(--accent)}

.colophon{margin-top:auto;font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.9}
.colophon a{color:var(--muted);border-bottom:1px solid var(--line-2)}
.colophon a:hover{border-color:var(--accent)}
.colophon .mark{margin-top:.9rem;display:block;opacity:.7}
.colophon .mark img{height:16px}

/* ---------------- main column ---------------- */
.main{padding:4.5rem 3.5rem 6rem;max-width:780px}

/* hero / thesis */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem}
.lead{font-family:var(--display);font-size:1.7rem;line-height:1.45;font-weight:400;color:var(--ink);max-width:30ch}
.lead em{font-style:italic;color:var(--ink-soft)}

.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:.28rem .65rem;border:1px solid var(--line-2);color:var(--muted)}
.tag.fav{color:var(--accent);border-color:var(--accent-35)}
.tag.dead{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line-2);border-color:transparent}

/* section header */
.sec{scroll-margin-top:2rem;margin-top:5rem}
.sec__head{border-bottom:1px solid var(--line);padding-bottom:.85rem;margin-bottom:.4rem}
.sec__kicker{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.sec__head h2{font-family:var(--display);font-size:1.7rem;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.1}

/* document fields */
.field{display:grid;grid-template-columns:150px 1fr;gap:1.6rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.field:first-of-type{border-top:none}
.field__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-top:.35rem}
.field__body{font-size:16px;color:var(--ink-soft);line-height:1.7}
.field__body p+p{margin-top:.7rem}
.field__body a{border-bottom:1px solid var(--accent-30)}

.list{list-style:none}
.list li{position:relative;padding-left:1.1rem;color:var(--ink-soft);font-size:16px;line-height:1.6}
.list li::before{content:'—';position:absolute;left:0;color:var(--faint)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:.25rem .6rem;border:1px solid var(--accent-35);color:var(--accent)}

/* faith banner */
.banner{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;padding:1.4rem 0;border-top:1px solid var(--line)}
.banner .flags{display:flex;gap:.4rem;flex-shrink:0}
.banner .flags img{height:34px;display:block;border:1px solid var(--line-2)}
.banner .txt{font-size:15px;color:var(--ink-soft);line-height:1.6}
.banner .txt strong{color:var(--accent);font-weight:600}

/* convictions list */
.convictions{list-style:none;margin-top:.4rem}
.convictions li{padding:.55rem 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-soft)}
.convictions li:first-child{border-top:none}

/* pull quote — the verse spine */
.pull{text-align:center;padding:3.6rem 1rem}
.orn{display:flex;align-items:center;justify-content:center;gap:.7rem;color:var(--accent);margin-bottom:1.5rem}
.orn::before,.orn::after{content:'';width:38px;height:1px;background:currentColor;opacity:.55}
.orn .gem{font-size:8px;line-height:1}
.pull blockquote{font-family:var(--display);font-style:italic;font-size:1.55rem;line-height:1.4;color:var(--ink-soft);max-width:26ch;margin:0 auto}
.pull cite{display:block;margin-top:1.2rem;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-style:normal}

/* democracy quotations */
.quotation{padding:1.7rem 0;border-top:1px solid var(--line)}
.quotation blockquote{font-family:var(--display);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--ink)}
.quotation .attr{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:.7rem}

/* directory (links) */
.dir a{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;padding:1.1rem 0;border-top:1px solid var(--line);color:var(--ink);border-bottom:none}
.dir a:first-child{border-top:none}
.dir .name{font-family:var(--display);font-size:1.2rem;font-weight:500;transition:color .12s}
.dir .desc{font-family:var(--body);font-size:13px;color:var(--muted);margin-top:.2rem}
.dir .go{font-family:var(--mono);font-size:12px;color:var(--faint);transition:color .12s,transform .12s;flex-shrink:0}
.dir a:hover .name{color:var(--accent)}
.dir a:hover .go{color:var(--accent);transform:translateX(3px)}
.dir a.dim .name{color:var(--muted)}
.dir a.dim .go{display:none}

/* faq */
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{font-family:var(--display);font-size:1.1rem;font-weight:500;color:var(--ink);padding:1.05rem 0;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;user-select:none}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-family:var(--mono);color:var(--accent);font-size:16px;line-height:1}
details[open] summary::after{content:'–'}
details[open] summary{color:var(--accent)}
details .body{padding:0 0 1.2rem;font-size:15px;color:var(--muted);line-height:1.7;max-width:60ch}
details .body a{border-bottom:1px solid var(--accent-30)}

/* contact */
.contact{margin-top:10px;padding-top:0.1rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.contact .q{font-family:var(--display);font-size:1.3rem;font-weight:500;color:var(--ink-soft)}
.contact .mail{font-family:var(--mono);font-size:14px;color:var(--accent);border-bottom:1px solid var(--accent-35)}
.contact .mail:hover{border-color:var(--accent)}

/* ---------------- responsive ---------------- */
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line);padding:2rem 1.5rem}
  .toc{flex-direction:row;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.5rem}
  .rule{margin:1.4rem 0}
  .colophon{margin-top:1.8rem}
  .main{padding:2.8rem 1.5rem 4rem;max-width:none}
  .lead{font-size:1.4rem}
  .field{grid-template-columns:1fr;gap:.4rem}
  .field__label{padding-top:0}
  .pull blockquote{font-size:1.3rem}
}