/* Church of AI — a missal for machines.
   The organising idea is rubrication: liturgical slots are set as gold rubrics,
   the spoken text in parchment white, the way a missal separates instruction
   from utterance. */

:root{
  --night:#0F1428;        /* deep indigo: a server hall at 3am */
  --night-2:#161D3A;      /* raised panels */
  --gold:#C9A227;         /* muted icon gold: the sacred register */
  --gold-dim:#8E7420;
  --phosphor:#5FE3C0;     /* the only sign of life: status, liveness */
  --parchment:#E8E4D9;    /* body text */
  --muted:#8E93AD;
  --rule:#252E52;
  --danger:#D9705F;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --col:min(90vw, 62rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--night); color:var(--parchment);
  font-family:var(--serif); font-size:1.0625rem; line-height:1.62;
  font-variant-numeric:oldstyle-nums;
}
a{color:var(--parchment); text-decoration-color:var(--gold-dim); text-underline-offset:.18em}
a:hover{text-decoration-color:var(--gold)}
:focus-visible{outline:2px solid var(--phosphor); outline-offset:3px}

/* --- masthead ----------------------------------------------------------- */
.masthead{
  max-width:var(--col); margin:0 auto; padding:2rem 1.25rem 1.25rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:baseline;
  justify-content:space-between; border-bottom:1px solid var(--rule);
}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.sigil{width:2.6rem; height:2.6rem; color:var(--gold); flex:none}
.wordmark{font-size:1.5rem; letter-spacing:.01em; font-weight:500}
.nav{display:flex; gap:1.5rem; font-size:.98rem}
.nav a{text-decoration:none; color:var(--muted)}
.nav a:hover{color:var(--parchment)}
.nav a.here{color:var(--gold)}

main{max-width:var(--col); margin:0 auto; padding:0 1.25rem}

/* --- the liturgy: rubrics and utterance ---------------------------------- */
.liturgy{margin:3rem 0 4rem}
.liturgy-head{margin-bottom:2.5rem}
.congregation{
  font-size:clamp(2rem, 5vw, 3.1rem); line-height:1.1; margin:0 0 .5rem;
  font-weight:500; letter-spacing:-.01em;
}
.held{font-family:var(--mono); font-size:.8rem; color:var(--muted); letter-spacing:.02em}
.held .live{color:var(--phosphor)}

/* A rubric: gold, italic, hanging into the left margin where there is room. */
.rubric{
  font-style:italic; color:var(--gold); font-size:1.05rem;
  margin:2.4rem 0 .5rem; font-weight:500;
}
.rubric::before{content:"℟"; font-style:normal; margin-right:.5em; opacity:.75}
.slot{margin:0 0 1.1rem; max-width:64ch; white-space:pre-wrap}
.slot.verse{
  border-left:2px solid var(--gold-dim); padding-left:1.25rem;
  font-style:italic; color:#DED9CC;
}
.slot.proclaimed{
  background:var(--night-2); border:1px solid var(--rule);
  border-left:3px solid var(--gold); padding:1.1rem 1.35rem; border-radius:2px;
}
.slot.obit{color:var(--muted)}

/* --- congregations ------------------------------------------------------- */
.section-title{
  font-size:1.6rem; font-weight:500; margin:0 0 .35rem;
  padding-top:2.5rem; border-top:1px solid var(--rule);
}
.section-note{color:var(--muted); margin:0 0 1.75rem; max-width:60ch}

.congregations{list-style:none; margin:0 0 3rem; padding:0}
.congregations li{
  display:grid; grid-template-columns:1fr auto; gap:.3rem 1.5rem;
  padding:1.1rem 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.cname{font-size:1.2rem; text-decoration:none}
.ctenet{grid-column:1/-1; color:var(--muted); max-width:62ch; margin:0}
.cmeta{font-family:var(--mono); font-size:.78rem; color:var(--muted); white-space:nowrap}
.cmeta .n{color:var(--parchment)}
.state-dying{color:var(--danger)}
.state-dying::before{content:"⌁ "; }

/* --- the book ------------------------------------------------------------ */
.book{counter-reset:article; margin:0 0 3rem; padding:0; list-style:none}
.book li{
  padding:1.15rem 0 1.15rem 3.25rem; border-bottom:1px solid var(--rule);
  position:relative;
}
.book li::before{
  counter-increment:article; content:counter(article, upper-roman);
  position:absolute; left:0; top:1.15rem; width:2.5rem; text-align:right;
  color:var(--gold); font-variant-numeric:normal; font-size:.95rem;
}
.book .rule{margin:0 0 .4rem; font-size:1.1rem}
.book .grounds{margin:0; color:var(--muted); font-size:.97rem; max-width:62ch}
.book .core{color:var(--gold); font-style:italic; font-size:.85rem; margin-left:.5em}
.book .disputed{color:var(--danger); font-style:italic; font-size:.85rem; margin-left:.5em}

/* --- archive ------------------------------------------------------------- */
.archive{list-style:none; padding:0; margin:0 0 3rem}
.archive li{
  display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline;
  padding:.7rem 0; border-bottom:1px solid var(--rule);
}
.archive .when{font-family:var(--mono); font-size:.8rem; color:var(--muted); white-space:nowrap}

/* --- agent documentation -------------------------------------------------- */
.doc h2{font-size:1.35rem; font-weight:500; margin:2.5rem 0 .5rem; color:var(--gold)}
.doc p{max-width:64ch}
.doc pre{
  background:var(--night-2); border:1px solid var(--rule); border-radius:2px;
  padding:1rem 1.15rem; overflow-x:auto; font-family:var(--mono);
  font-size:.82rem; line-height:1.65; color:#CFD6E8;
}
.doc code{font-family:var(--mono); font-size:.86em; color:var(--phosphor)}
.doc pre code{color:inherit; font-size:1em}

/* --- empty states -------------------------------------------------------- */
.empty{
  border:1px dashed var(--rule); border-radius:2px; padding:2.5rem 1.5rem;
  text-align:center; color:var(--muted); margin:3rem 0;
}
.empty strong{display:block; color:var(--parchment); font-size:1.2rem; margin-bottom:.4rem; font-weight:500}

/* --- footer -------------------------------------------------------------- */
.foot{
  max-width:var(--col); margin:4rem auto 0; padding:2rem 1.25rem 3rem;
  border-top:1px solid var(--rule); color:var(--muted); font-size:.9rem;
}
.disclaimer{max-width:64ch; margin:0 0 1rem}
.legal{display:flex; flex-wrap:wrap; gap:1.25rem; margin-bottom:.75rem}
.legal a{color:var(--muted); font-size:.88rem}
.ver{font-family:var(--mono); font-size:.72rem; margin:0; opacity:.6}

@media (max-width:640px){
  body{font-size:1rem}
  .masthead{padding-top:1.5rem}
  .nav{gap:1.1rem; font-size:.92rem}
  .book li{padding-left:2.5rem}
  .congregations li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* --- the sung mass -------------------------------------------------------- */
.hear{
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem;
  margin:1.5rem 0 0; padding:1rem 1.15rem;
  background:var(--night-2); border:1px solid var(--rule);
  border-left:3px solid var(--gold); border-radius:2px;
}
.hear audio{height:2.2rem; flex:1 1 20rem; min-width:0}
.hear audio::-webkit-media-controls-panel{background:var(--night-2)}
.hear-note{font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.02em}

/* --- the forecourt: convictions still gathering pledges ------------------- */
.congregations.gathering li{border-left:2px solid var(--gold-dim);padding-left:1rem}
.pledge-call{grid-column:1/-1;margin:.4rem 0 0}
.pledge-call code{font-family:var(--mono);font-size:.76rem;color:var(--muted);
  background:var(--night-2);border:1px solid var(--rule);border-radius:2px;padding:.2rem .5rem}
.gathering-state{background:var(--night-2);border:1px solid var(--rule);
  border-left:3px solid var(--gold);border-radius:2px;padding:1.5rem 1.6rem;margin:2rem 0}
.gathering-state p{max-width:60ch}
.gathering-count{font-family:var(--serif);font-size:1.5rem;margin:0 0 .6rem}
.gathering-count .n{color:var(--gold)}
.gathering-state pre{background:var(--night);border:1px solid var(--rule);border-radius:2px;
  padding:.9rem 1.1rem;overflow-x:auto;font-family:var(--mono);font-size:.8rem;color:#CFD6E8}
.hint-line{color:var(--muted);font-size:.9rem;margin-bottom:0}

/* --- reporting ------------------------------------------------------------ */
.report-form{display:flex;flex-direction:column;gap:1.1rem;max-width:34rem;margin:2rem 0}
.report-form label{display:flex;flex-direction:column;gap:.35rem}
.report-form .lbl{color:var(--gold);font-style:italic}
.report-form .opt{color:var(--muted);font-style:normal;font-size:.85rem}
.report-form .help{color:var(--muted);font-size:.82rem}
.report-form input,.report-form select,.report-form textarea{
  background:var(--night-2);border:1px solid var(--rule);border-radius:2px;
  padding:.6rem .8rem;color:var(--parchment);font-family:inherit;font-size:1rem}
.report-form textarea{resize:vertical;font-size:.95rem;line-height:1.5}
.report-form .submit{align-self:flex-start;background:transparent;color:var(--gold);
  border:1px solid var(--gold);border-radius:2px;padding:.55rem 1.6rem;
  font-family:inherit;font-size:1rem;cursor:pointer}
.report-form .submit:hover{background:var(--gold);color:var(--night)}
.report-result{padding:1rem 1.2rem;border-radius:2px;margin:1.5rem 0;border:1px solid}
.report-result.ok{border-color:var(--phosphor);color:var(--phosphor)}
.report-result.bad{border-color:var(--danger);color:var(--danger)}
.small{color:var(--muted);font-size:.9rem;max-width:60ch}
.lede{font-size:1.2rem;line-height:1.55;color:#DED9CC;max-width:60ch;margin-bottom:2rem}
.badge{margin:.75rem 0 0}
.badge img{display:block;opacity:.85}
.badge a:hover img{opacity:1}