/* ==========================================================
   COMPONENTS — reusable page forms authored pages can call on
   Laws, pull quotes, tables of correspondence, lexicons, ritual steps, illuminated frames.
   ========================================================== */

/* ============ SPECIMEN COMPONENTS (appendix) ============ */
/* numbered laws: rubricated roman numerals, hanging indent */
.laws{ list-style:none; counter-reset:law; margin-top:.6em; font-size:calc(var(--page-w) * .0295); }
.laws li{
  counter-increment:law;
  position:relative;
  padding-left:2.7em;
  margin-bottom:1em;
  line-height:1.5;
  text-align:left;
}
.laws li::before{
  content:counter(law, upper-roman) ".";
  position:absolute; left:0; top:.05em;
  font-family:'IM Fell English SC', serif;
  color:var(--rubric);
}
.laws .law-name{ font-variant:small-caps; letter-spacing:.04em; }

/* pull quote with brass rules */
.pullquote{
  margin:1.2em 0 .4em;
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:calc(var(--page-w) * .05);
  line-height:1.35;
  color:var(--ink);
}
.pullquote .q-mark{
  display:block;
  font-size:1.8em; line-height:.5;
  color:var(--brass);
  font-style:normal;
}
.pullquote-attr{
  text-align:center;
  font-family:'IM Fell English SC', serif;
  font-size:calc(var(--page-w) * .0175);
  letter-spacing:.28em; text-indent:.28em;
  color:var(--ink-faint);
  margin:.9em 0 1.2em;
}
.rule-orn{ display:flex; align-items:center; gap:.8em; margin:1.1em 0; color:var(--brass);
  font-size:calc(var(--page-w) * .024); }
.rule-orn::before,.rule-orn::after{ content:""; flex:1; border-top:1px solid rgba(156,124,60,.45); }

/* table of correspondences */
.grim-table{ width:100%; border-collapse:collapse; margin:1.1em 0 .5em;
  font-size:calc(var(--page-w) * .027); }
.grim-table th{
  font-family:'IM Fell English SC', serif; font-weight:400;
  font-size:calc(var(--page-w) * .019); letter-spacing:.2em; text-indent:.2em;
  color:var(--rubric); padding:.5em .3em;
  border-bottom:1px solid rgba(122,47,29,.45);
}
.grim-table td{
  padding:.6em .3em; text-align:center;
  border-bottom:1px dotted rgba(93,76,53,.4);
}
.grim-table td:first-child{ font-variant:small-caps; letter-spacing:.03em; }
.grim-table .glyph{ color:var(--rubric); font-size:1.1em; }

/* two-column lexicon */
.lexicon{ column-count:2; column-gap:2em; column-rule:1px solid rgba(156,124,60,.3);
  font-size:calc(var(--page-w) * .026); margin-top:.8em; }
.lexicon dt{ font-variant:small-caps; letter-spacing:.05em; color:var(--rubric); break-after:avoid; }
.lexicon dd{ font-family:'Cormorant Garamond', serif; font-style:italic;
  color:var(--ink-faint); margin:0 0 .95em; line-height:1.45; }

/* ritual steps with tall numerals */
.steps{ list-style:none; counter-reset:step; margin-top:.7em;
  font-size:calc(var(--page-w) * .0295); }
.steps li{ counter-increment:step; display:flex; gap:.95em; margin-bottom:1.15em; line-height:1.55; }
.steps li::before{
  content:counter(step);
  font-family:'Cormorant Garamond', serif;
  font-size:2em; line-height:.9;
  color:var(--brass);
  min-width:1em; text-align:center;
}

/* illuminated frame page */
.frame-svg{ position:absolute; inset:4%; width:92%; height:92%; pointer-events:none; }