/* ============================================================================
   Society of the Holy Trinity: main stylesheet
   ----------------------------------------------------------------------------
   Plain CSS with custom properties. No framework, no build step beyond Hugo's
   asset pipeline, no node_modules. See docs/design.md for the reasoning.

   Palette is sampled from the seal (the Rublev Trinity roundel): the field is
   crimson #990F07, the icon is gold #E3A718. Gold is a FILL colour only. On the
   cream page background it measures 2.02:1, so gold text would fail WCAG AA at
   every size; crimson on cream measures 8.16:1 and carries all the text.

   Type: Charis SIL for headings, Open Sans for body, both self-hosted. Charis SIL
   is a SIL OFL face designed for extended reading and has Greek and Cyrillic
   coverage, which matters on a site that quotes the Fathers.

   Font paths are RELATIVE to this stylesheet on purpose. The published CSS sits
   at /css/main.min.<hash>.css, so "../fonts/x.woff2" resolves to /fonts/ at a
   domain root and to /sts/fonts/ under a subfolder. A root-relative
   "/fonts/x.woff2" survives neither a subfolder test deploy nor a move: Hugo
   rewrites relative URLs in HTML but never inside a CSS asset, so this is the
   one place the host-agnostic rule has to be applied by hand.
   ========================================================================= */

@font-face{font-family:"Charis SIL";src:url("../fonts/charis-sil-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Charis SIL";src:url("../fonts/charis-sil-400-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Charis SIL";src:url("../fonts/charis-sil-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
/* Charis SIL carries Latin; it has 23 Greek characters and no polytonic Greek at all, which
   is not enough for a site that quotes the Fathers. Gentium Plus does, and it is the same
   hand. `unicode-range` confines it to Greek, so Latin stays in Charis and the two faces are
   never mixed on one word. Measured: the Charis subsets carry no U+1F00; Gentium Plus covers
   the whole Greek Extended block, precomposed and decomposed. */
@font-face{font-family:"Gentium Plus";
  src:url("../fonts/gentium-plus-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0300-036F,U+0370-03FF,U+1F00-1FFF,U+2000-206F,U+00A0}
@font-face{font-family:"Gentium Plus";
  src:url("../fonts/gentium-plus-400-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0300-036F,U+0370-03FF,U+1F00-1FFF,U+2000-206F,U+00A0}
@font-face{font-family:"Gentium Plus";
  src:url("../fonts/gentium-plus-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0300-036F,U+0370-03FF,U+1F00-1FFF,U+2000-206F,U+00A0}

/* Open Sans ships as one variable file covering every weight. */
@font-face{font-family:"Open Sans";src:url("../fonts/open-sans-400-normal.woff2") format("woff2");
  font-weight:300 800;font-style:normal;font-display:swap}

:root{
  --crimson-900:#5E0A04; --crimson-700:#7E0C06; --crimson-600:#990F07; --crimson-100:#F5E4E2;
  /* Button fill. Brighter than the text crimson; 5.4:1 against white text. */
  --crimson-bright:#C0170E;
  /* Rubrics. Ancient practice: a direction to the assembly is printed in red, and set in
     italic. Named separately from the type crimson so it can be retuned in one place.
     Ted, 2026-10-16: "It is ancient tradition, or at least old tradition, that the rubrics
     in our worship orders are printed in red ... Italics is also traditional for rubrics.
     This should be consistent across the entire site." */
  --rubric:var(--crimson-600);
  --gold-600:#B0821A;    --gold-500:#E3A718;    --gold-100:#FAF1D9;
  --cream:#FBF8F1;       --paper:#FFFFFF;
  --ink:#1B1917;         --ink-muted:#57534E;   --rule:#E4DCCB;

  --font-head:"Charis SIL","Gentium Plus",Georgia,"Times New Roman",serif;
  --font-body:"Open Sans","Gentium Plus",system-ui,-apple-system,"Segoe UI",sans-serif;

  --measure:68ch;         /* body text measure, characters */
  --wrap:78rem;           /* page shell width */
  /* Side margins. Ted, 2026-10-16: a page needs real left and right margins on
     desktop, or the text runs to the edge and the page reads as a wall. */
  --gutter:clamp(1.25rem, 9vw, 11rem);
  --step-1:0.9rem; --step0:1.15rem; --step1:1.35rem; --step2:1.75rem; --step3:2.4rem;
  --lead:1.7;
  --pad:1.25rem;
  --radius:5px;
}


*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-size:var(--step0); line-height:var(--lead);
  font-synthesis-weight:none;
}

/* Skip link: must be the first focusable thing and must become visible. */
.skip{position:absolute;left:-9999px;top:0;background:var(--crimson-600);color:#fff;
  padding:.7rem 1rem;z-index:100;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}

a{color:var(--crimson-600);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--crimson-700)}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;color:var(--crimson-900);
  line-height:1.2;margin:2.2rem 0 .7rem;text-wrap:balance}
h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,var(--step3));line-height:1.14;margin-top:0}
h2{font-size:var(--step2);border-bottom:2px solid var(--gold-500);padding-bottom:.28rem}
h3{font-size:var(--step1)}
h4{font-size:1.1rem}
p,ul,ol{margin:0 0 1.05rem;max-width:var(--measure)}
li{margin-bottom:.35rem}
ul,ol{padding-left:1.3rem}
blockquote{font-family:var(--font-head);font-style:italic;font-size:1.25rem;line-height:1.6;
  color:var(--crimson-700);border-left:3px solid var(--gold-500);padding-left:1rem;
  margin:1.4rem 0;max-width:62ch}
/* A passage of the Society's own Rule, quoted at length as a document's opening matter
   (liturgical practice quotes Chapter III, the confession manual quotes Chapter V). The
   epigraph style above is for a sentence or two: italic Charis in crimson turns four hundred
   words of numbered articles into a slab nobody reads. This keeps the gold rule that marks a
   quotation and returns the words to body face and size. The quoted chapter's own title is a
   line inside the quotation, not a heading, so it is not a section of the page and does not
   appear in the page's contents. */
blockquote.rule-quote{font-family:var(--font-body);font-style:normal;font-size:var(--step0);
  line-height:var(--lead);color:var(--ink);border-left:3px solid var(--gold-500);
  padding-left:1.1rem;margin:1.6rem 0 2.2rem;max-width:var(--measure)}
blockquote.rule-quote .quote-title{font-family:var(--font-head);font-weight:700;
  font-size:1.08rem;line-height:1.3;color:var(--crimson-900);margin:0 0 .7rem}
blockquote.rule-quote ol.doc-items{margin:1rem 0 0}
blockquote.rule-quote ol.doc-items li:last-child{margin-bottom:0}
blockquote.rule-quote .quote-src{font-family:var(--font-body);font-style:normal;
  font-size:.84rem;color:var(--ink-muted);margin:1rem 0 0}

hr{border:0;border-top:1px solid var(--rule);margin:2.2rem 0}
img{max-width:100%;height:auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--gold-100);padding:.1em .35em;border-radius:3px}
table{border-collapse:collapse;width:100%;margin:0 0 1.3rem;font-size:.95rem}
th,td{text-align:left;padding:.5rem .7rem .5rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--font-head);font-weight:700;color:var(--crimson-900)}

/* ---------- shell ---------- */
.wrap,.shell{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- page head: the "I am in the right place" band ---------- */
.page-head{border-bottom:2px solid var(--gold-500);margin-bottom:2rem;padding-bottom:.7rem}
.page-head .kicker{font-family:var(--font-body);font-size:.78rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--crimson-600);margin:0 0 .35rem}
.page-head h1{margin:0}
.page-head .sub{font-size:1.05rem;color:var(--ink-muted);margin:.4rem 0 0;max-width:var(--measure)}
.page-head .meta{margin:.5rem 0 0;font-size:.9rem;color:var(--ink-muted)}
.skip:focus{position:fixed}

header.site{border-top:4px solid var(--gold-500);background:var(--paper);
  border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
header.site .bar{display:flex;align-items:center;gap:1rem;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;
  flex:0 0 auto;margin-right:auto}
.brand img{width:44px;height:44px;flex:0 0 auto}
.brand .txt{display:flex;flex-direction:column;line-height:1.15}
.brand .nm{font-family:var(--font-head);font-weight:700;font-size:1.06rem;color:var(--crimson-900)}
.brand .lt{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}

nav.main ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav.main a{display:block;padding:.5rem .6rem;font-size:.93rem;font-weight:600;
  text-decoration:none;color:var(--ink);border-radius:var(--radius)}
nav.main a:hover{background:var(--crimson-100);color:var(--crimson-900)}
/* The active item is marked with a solid rule across its own bottom edge. The previous
   version used an inset box-shadow on a rounded element, which drew a line whose ends
   curled up at the corners. No radius, real border, straight line. */
nav.main a[aria-current="page"]{color:var(--crimson-900);border-radius:0;
  border-bottom:3px solid var(--gold-500);padding-bottom:calc(.5rem - 3px)}

/* ---------- dropdowns ---------- */
.nav-item{position:relative}
.nav-item .caret{display:inline-block;margin-left:.35rem;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;vertical-align:.15em;opacity:.7}
.nav-item.has-kids > a:hover .caret{opacity:1}
.dropdown{position:absolute;top:100%;left:0;z-index:30;min-width:15rem;
  background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--gold-500);
  border-radius:0 0 var(--radius) var(--radius);box-shadow:0 8px 24px rgba(27,25,23,.14);
  padding:.4rem 0;display:none}
/* Specificity matters here: `nav.main ul` sets display:flex and is a MORE specific
   selector than `.dropdown ul`, so dropdown items laid out side by side in a row.
   Ted, 2026-10-16: they must be "stacked one underneath the next underneath the next". */
nav.main .dropdown ul{list-style:none;margin:0;padding:0;display:block}
.dropdown li{margin:0;break-inside:avoid}
.dropdown a{display:block;padding:.45rem .9rem;font-size:.92rem;font-weight:400;
  text-decoration:none;color:var(--ink);white-space:nowrap}
.dropdown a:hover{background:var(--crimson-100);color:var(--crimson-900)}
.dropdown li.strong a{font-weight:700}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown{display:block}
@media (min-width:60.001rem){
  nav.main .nav-item.is-active > a{border-bottom-color:var(--gold-500)}
}

.btn{display:inline-block;font-weight:600;font-size:.93rem;padding:.55rem 1rem;
  border-radius:var(--radius);text-decoration:none;border:1.5px solid transparent}
.btn-gold{background:var(--gold-500);color:#1B1917;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.btn-red{background:var(--crimson-bright);color:#fff}
.btn-ghost{border-color:var(--crimson-600);color:var(--crimson-600)}
.btn:hover{filter:brightness(.95)}

.navtoggle{display:none;background:none;border:1.5px solid var(--rule);border-radius:var(--radius);
  font:inherit;font-weight:600;padding:.45rem .7rem;cursor:pointer;color:inherit}

/* ---------- narrow screens: the header stacks ----------
   Ted, 2026-10-16: on a phone the logo lockup and the two buttons were forced onto one
   line and the row overflowed. The cause was .brand{margin-right:auto} in a non-wrapping
   flex row: the auto margin pushes the buttons away and the row cannot shrink.
   So on a narrow screen the bar wraps, the brand takes a full row and centres, and the
   Menu and Dues buttons sit together on the row beneath it. */
@media (max-width:48rem){
  header.site .bar{flex-wrap:wrap;justify-content:center;row-gap:.6rem;padding:.7rem 0}
  .brand{flex-basis:100%;margin-right:0;justify-content:center;text-align:center}
  .brand .txt{align-items:center}
  .brand .lt{letter-spacing:.05em}
  .navtoggle{order:2;margin:0}
  header.site .bar > a.btn-gold{order:3}
  nav.main{order:4;flex-basis:100%}
  nav.main ul{justify-content:center}
}

/* A four-column table cannot fit a phone. Let it scroll inside its own box rather than
   pushing the whole page sideways. */
@media (max-width:48rem){
  main table{display:block;overflow-x:auto;white-space:nowrap}
}

@media (max-width:60rem){
  .navtoggle{display:block}
  nav.main{display:none;flex-basis:100%}
  nav.main[data-open="true"]{display:block}
  nav.main ul{flex-direction:column;gap:0;padding-bottom:.5rem}
  nav.main a{padding:.7rem .5rem;border-bottom:1px solid var(--rule)}
  /* Submenus are not shown on a phone at all.
     Ted, 2026-10-16: opening the menu on an iPhone could not be scrolled, so the lower
     items were unreachable. The cause is the combination below: the header is
     position:sticky, and the submenu was always open inside it, so the nav grew taller
     than the screen while staying pinned to the top. A sticky box cannot scroll its own
     overflow, so the rest of the menu simply could not be reached.
     Every section hub page lists its own children, so the submenu items are still
     reachable one tap further in. */
  .dropdown{display:none}
  .nav-item .caret{display:none}
  /* The open menu is a panel pinned below the header bar, in the viewport.
     Two earlier bugs meet here, and both are recorded so neither returns. First, the
     submenu was always open inside a sticky header, so the header grew taller than the
     screen while pinned to the top and the lower items could not be reached. The fix then
     was to make the header position:static while the menu was open, which detached the bar
     from the viewport entirely: opening the menu after scrolling down sent the whole thing
     to the top of the document, 1793px above the reader. Second, the panel's height was
     capped against a guessed 11rem, which does not match a bar that wraps to two rows.

     So the bar keeps position:sticky and the panel is fixed to the viewport instead, sized
     by its own top and bottom edges, scrolling inside itself. --bar-h is the header's height
     with the menu closed, measured by nav.js; a fixed panel is positioned against the
     viewport even inside a sticky ancestor, because sticky does not create a containing
     block. */
  nav.main[data-open="true"]{
    display:block;
    position:fixed;
    top:var(--bar-h,6.75rem);
    left:0;right:0;bottom:0;
    z-index:19;                    /* under the sticky bar, which is z-index 20 */
    background:var(--paper);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  nav.main[data-open="true"] ul{max-width:var(--wrap);margin:0 auto;
    padding:0 var(--gutter) 1.5rem}
}

/* ---------- main + hero ---------- */
main{max-width:var(--wrap);margin:0 auto;padding:1.9rem var(--gutter) 4rem}

/* ---------- the page's own contents ----------

   Ted, 2026-10-17: a long document gets a floating rectangle of contents that tracks where
   the reader is and jumps to a part on a click. The width question is settled by the text:
   prose stops at --measure, so past about 60rem the shell leaves a band of empty space on
   the right, and that band is where the rectangle hangs, level with the text rather than out
   in the viewport margin (Ted chose the shell's own band). Below that width there is no band
   and the contents becomes a bar pinned under the navbar, closed until it is wanted.

   Two mechanisms, one markup: at wide widths `main.with-toc` is a two-column grid and the
   contents is the second column; narrower than that it is a sticky block that comes before
   the document in the source. The list is built by the template, not by the script, so the
   links work with the script off; nav.js only marks the current section and opens the bar.

   Without the script the bar's list stays open and the button is inert, which is the same
   bargain the menu button strikes: nothing the reader needs is behind a dead control. */
.page-body{min-width:0}
nav.toc{-webkit-text-size-adjust:100%}

/* Small screens: a bar under the navbar. */
nav.toc{position:sticky;top:calc(var(--bar-h,6.75rem) + .5rem);z-index:19;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  margin:0 0 1.5rem;font-size:.9rem;line-height:1.45;
  box-shadow:0 2px 10px rgba(27,25,23,.07)}
.toc-toggle{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;
  padding:.6rem .85rem;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--crimson-900)}
.toc-toggle .caret{flex:0 0 auto;width:.5rem;height:.5rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-.1rem,-.1rem);
  transition:transform .15s ease}
nav.toc[data-open="true"] .toc-toggle .caret{transform:rotate(-135deg) translate(-.15rem,-.15rem)}
.toc-label{display:none}
.toc-list{list-style:none;margin:0;padding:0 .85rem .7rem}
.toc-list ol{list-style:none;margin:0;padding:0 0 0 .7rem}
.toc-list li{margin:0;padding:.1rem 0 .1rem .55rem;border-left:2px solid transparent}
.toc-list a{display:block;color:var(--ink-muted);text-decoration:none;padding:.12rem 0}
.toc-list a:hover{color:var(--crimson-700);text-decoration:underline}
.toc-list .sub a{font-size:.84rem}
/* The section the reader is in. Gold bar at the left edge, the colour of the heading's own
   rule, and the wording at full contrast: the position is legible in a glance sideways. */
.toc-list li[data-current="true"]{border-left-color:var(--gold-500)}
.toc-list a[aria-current="true"]{color:var(--crimson-900);font-weight:700}
@media (max-width:60rem){
  nav.toc[data-open="false"] .toc-list{display:none}
  nav.toc[data-open="true"] .toc-list{max-height:calc(100vh - var(--bar-h,6.75rem) - 4.5rem);
    overflow:auto;overscroll-behavior:contain}
}

/* From 60.001rem the same markup is the right-hand column. The band is 12rem wide: at the
   switch-over width that leaves the text column about 66 characters, which is the measure the
   site is set to within a hair, and the widest contents entry still wraps to three lines
   rather than pushing the column open. */
@media (min-width:60.001rem){
  main.with-toc{display:grid;grid-template-columns:minmax(0,1fr) 12rem;
    column-gap:1.75rem;align-items:start}
  /* The title, its breadcrumb and its gold rule span the whole shell; the document and the
     contents share the row below it, so the rule runs the full width of the page and the
     contents starts under the rule rather than beside the title. */
  main.with-toc > .page-head-wrap{grid-column:1 / -1;grid-row:1}
  main.with-toc > .page-body{grid-column:1;grid-row:2}
  main.with-toc > nav.toc{grid-column:2;grid-row:2;position:sticky;
    top:calc(var(--bar-h,6.75rem) + 1.4rem);margin:0;font-size:.82rem;box-shadow:none;
    max-height:calc(100vh - var(--bar-h,6.75rem) - 3rem);display:flex;flex-direction:column}
  /* A heading that opens the document carries no space above it: the rule under the title is
     the only thing between the title and the text, so the first section and the contents begin
     at the same place. Only the heading: a document that opens with its record line keeps the
     little space above that line. */
  main.with-toc > .page-body > article > h1:first-child,
  main.with-toc > .page-body > article > h2:first-child{margin-top:0}
  .toc-toggle{display:none}
  .toc-label{display:block;margin:0;padding:.7rem .8rem .5rem;border-bottom:1px solid var(--rule);
    font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
    color:var(--crimson-600)}
  .toc-list{display:block;padding:.6rem .8rem .7rem;overflow:auto;overscroll-behavior:contain;
    min-height:0}
  .toc-list .sub a{font-size:.78rem}
}

/* A jump lands below the sticky header, and on a narrow screen below the contents bar too.
   --toc-h is the bar's own height, measured by the script; with the script off nothing is
   pinned under the header, so the fallback of zero happens to be right. */
:is(h1,h2,h3,h4,h5,h6)[id]{scroll-margin-top:calc(var(--bar-h,6.75rem) + var(--toc-h,0px) + 1.2rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.crumbs{padding-left:0;padding-right:0}
.crumbs{font-size:.82rem;color:var(--ink-muted);margin:0 0 1.4rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.crumbs li::after{content:"›";margin-left:.4rem;color:var(--rule)}
.crumbs li:last-child::after{content:""}

figure.hero{margin:0 0 2rem}
figure.hero img{width:100%;height:auto;display:block;border-radius:var(--radius)}
figure.hero figcaption{font-size:.85rem;color:var(--ink-muted);margin-top:.5rem}

.lede{font-size:1.22rem;line-height:1.6;color:var(--ink-muted);max-width:60ch;margin:0 0 2rem}

/* No rule across the top of a band. Ted: the gold underline beneath each heading already
   carries the divisions, and the extra line made the front page too lined. */
section.band{padding-top:.2rem;margin-bottom:2.6rem}
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1rem 1.1rem}
.card h3{margin:0 0 .3rem;font-size:1.12rem}
.card p{margin:0;font-size:.94rem;color:var(--ink-muted)}
.card a.stretch{text-decoration:none;color:inherit;display:block}
.card a.stretch:hover h3{text-decoration:underline}
.card .kicker{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--crimson-600);margin:0 0 .3rem}
.card-feature{border-left:4px solid var(--gold-500);max-width:44rem}
.card-feature h3{margin:.1rem 0 .35rem;font-size:1.3rem}
.card-feature h3 a{text-decoration:none}
.card-feature h3 a:hover{text-decoration:underline}
.card-feature p{margin:0 0 .5rem;color:var(--ink-muted);font-size:.95rem}
.card-actions{margin:.7rem 0 0 !important;display:flex;gap:.5rem;flex-wrap:wrap}

/* The officers: a card per person, portrait, name, office, and a way to reach them.
   Rendered from data/officers.yaml by partials/officers.html on both Leadership and
   Contact, so this is the second consumer of the card the hubs already use. The portrait is
   a 480x640 derivative (scripts/build_officer_photos.py): every source is between 0.741 and
   0.753 wide, so `object-fit:cover` on a 3:4 frame takes the picture apart by almost
   nothing, and no second rendition is needed for a retina screen.
   The address wraps mid-string where it must: an officer's mail domain is longer than the
   card, and overflowing it would widen the page instead. */
ul.officers{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  list-style:none;padding:0;margin:0 0 2.6rem;max-width:none}
ul.officers li{margin:0}
.officer{padding:.65rem .75rem 1rem}
.officer img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:3px;background:var(--gold-100);margin:0 0 .75rem}
.officer h3{font-size:1.02rem;margin:0 0 .25rem}
.officer .role{font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--crimson-600);margin:0 0 .55rem}
.officer .reach{font-size:.82rem;line-height:1.55;overflow-wrap:anywhere}
.officer .reach a{display:block}
/* On a phone a full-width portrait card costs most of a screen per officer and the page
   becomes seven screens of face. The same card turns on its side instead: the portrait in a
   narrow first column, the name, office and contact beside it. One rule, no second markup. */
@media (max-width:48rem){
  .officer{display:grid;grid-template-columns:7rem 1fr;column-gap:.9rem;align-items:start}
  .officer img{grid-row:1 / span 3;margin:0}
  .officer h3,.officer .role,.officer .reach{grid-column:2}
}

/* Document lists: name, then a quiet meta line. */
ul.docs{list-style:none;padding:0;margin:0 0 1.4rem}
ul.docs li{padding:.65rem 0;border-bottom:1px solid var(--rule);margin:0}
/* The issue contents list: tight, and the summary is body size rather than small print.
   Ted, 2026-10-16: "too much gap" and the summary "should be at least the same size as
   the normal body text". */
ul.docs.issue-contents li{padding:.5rem 0}
ul.docs.issue-contents .t{font-size:1.15rem;font-family:var(--font-head);font-weight:700;
  color:var(--crimson-900);display:block;margin-bottom:.15rem}
ul.docs.issue-contents .byline{font-size:1.15rem;color:var(--ink)}
ul.docs.issue-contents p.m{font-size:1.15rem;color:var(--ink);margin:.2rem 0 0;line-height:1.6}
ul.docs .t{font-weight:600;display:block}
ul.docs .m{font-size:.85rem;color:var(--ink-muted)}
/* What a listed document is. Body size in the muted ink: smaller than the title it sits under,
   and larger than the .m record line, because a sentence a reader uses to decide whether to
   open a link is not a caption. */
ul.docs .d{display:block;font-size:1rem;line-height:1.55;color:var(--ink-muted);
  max-width:62ch;margin:.2rem 0 0}
/* A document that belongs to the record but is not on this site yet. Read, not clicked: the
   title is muted so it never looks like a link that failed. */
ul.docs li.pending .t{color:var(--ink-muted);font-weight:500}
.pdf::after{content:" (PDF)";font-size:.8em;font-weight:400;color:var(--ink-muted)}

/* ---------- scripture citations ---------- */
.scr{border-bottom:1px dotted var(--gold-600);cursor:help;position:relative;white-space:nowrap}
/* A citation too long to read in a popover links out instead, and it keeps the citation's own
   look: the dotted rule, the surrounding text's colour and weight, no underline. Measured
   together by sts-ui-check.mjs, so the two treatments cannot drift apart. cursor goes back to
   pointer, because this one is clickable. */
a.scr{color:inherit;text-decoration:none;cursor:pointer}
/* The popover presents the same way wherever the citation sits. It used to inherit its
   surroundings, so a citation inside a blockquote opened a popover in the blockquote's own
   Charis SIL italic crimson (measured: rgb(126,12,6) against rgb(27,25,23) in body text),
   which reads as a second kind of tooltip rather than the same one. The inline citation is
   left inheriting on purpose: it is part of the sentence it sits in. */
.scr-pop{position:absolute;left:0;top:1.45em;z-index:40;display:none;white-space:normal;
  width:min(32rem,78vw);max-height:20rem;overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--gold-500);
  box-shadow:0 10px 28px rgba(27,25,23,.18);padding:.8rem 1rem;
  font-family:var(--font-body);font-style:normal;color:var(--ink);
  font-size:1rem;line-height:1.55;text-align:left}
.scr:hover .scr-pop,.scr:focus .scr-pop,.scr:focus-within .scr-pop{display:block}
.scr-h{display:block;font-family:var(--font-head);font-weight:700;color:var(--crimson-900);
  margin-bottom:.45rem}
.scr-attr{font-family:var(--font-body);font-weight:400;font-size:.85rem;color:var(--ink-muted)}
.scr-v{display:block;margin-bottom:.3rem}
.scr-v b{color:var(--crimson-600);font-size:.78em;margin-right:.3em;vertical-align:.15em}
@media (max-width:48rem){
  /* A popover on a phone: full width of the column, and it may hang below the fold. */
  .scr-pop{position:fixed;left:var(--gutter);right:var(--gutter);width:auto;top:auto;
    bottom:1rem;max-height:60dvh}
}

.notice{background:var(--gold-100);border-left:4px solid var(--gold-500);
  padding:.9rem 1.1rem;border-radius:0 var(--radius) var(--radius) 0}
.notice p{margin:0;font-size:.95rem}

/* ---------- pastoral statements and other archival documents ---------- */

/* The pinned status banner. Crimson rather than the gold of a general notice: the reader
   has to stop and read this one. */
.notice-status{background:var(--crimson-100);border-left-color:var(--crimson-600)}
.notice-status a{font-weight:600}

.doc-meta{font-size:.9rem;color:var(--ink-muted);margin:1.4rem 0 2rem}

/* The numbered articles. The documents' own numbering is their addressing scheme and other
   documents cite it, so the number is kept as typed text rather than generated by the list
   and `list-style` is turned off to stop it appearing twice. `role="list"` is set in the
   markup because Safari drops list semantics when list-style is none. */
ol.doc-items{list-style:none;padding-left:0;margin:1.6rem 0 2rem;counter-reset:none}
ol.doc-items li{margin:0 0 1.05rem;padding-left:0;max-width:var(--measure)}
ol.doc-items li::marker{content:""}

/* A document's footnotes, gathered at the end because a web page has no foot. The source's
   own number starts each entry, so the list marker is turned off and a hanging indent keeps
   the note's second line under its first, the way the printed page set it. `role="list"` for
   the same Safari reason as above. */
ol.doc-notes{list-style:none;padding-left:0;margin:1.4rem 0 2rem;counter-reset:none}
/* The note is a ROW: the text in one column, the way back in a narrow second one. It used
   to be an inline-block arrow at the end of the text, and an inline-block wrapping an SVG
   whose width comes from `1em` collapsed to its own padding in Chromium: the box measured
   9px wide while the icon painted 15px, 21px to the LEFT of it, straight over the note's
   last words. A flex item cannot do that. The hanging indent moves onto the text column,
   which is a block and honours `text-indent`. */
ol.doc-notes li{display:flex;align-items:flex-start;gap:.45rem;margin:0 0 .7rem;
  max-width:var(--measure);font-size:.95rem;line-height:1.55}
ol.doc-notes .note-body{flex:1 1 auto;min-width:0;padding-left:2.1em;text-indent:-2.1em}
ol.doc-notes li::marker{content:""}

/* The marker a footnote hangs from. Raised, small, and in the rubric red: it is apparatus,
   like a rubric, not part of the sentence. It is a real link to the note, and the note links
   back, so the pair works with the script off and on a phone. */
sup.fn-ref{font-size:.72em;line-height:0;vertical-align:super;color:var(--rubric);
  font-family:var(--font-body);font-weight:600;font-style:normal;letter-spacing:0}
sup.fn-ref a{color:inherit;text-decoration:none;padding:0 .1em;border-radius:2px;
  position:relative}
/* The glyph is deliberately small; the TARGET is not. An invisible box around the marker
   gives a thumb something to hit without changing the line's look. */
sup.fn-ref a::after{content:"";position:absolute;inset:-.5em -.4em}
sup.fn-ref a:hover,sup.fn-ref a:focus-visible{text-decoration:underline}
/* A jumped-to note lands clear of the sticky bar and is marked, so the reader can find the
   line they came for without hunting in a wall of bibliography. */
ol.doc-notes li{scroll-margin-top:calc(var(--bar-h,4rem) + 1rem)}
ol.doc-notes li:target{background:var(--crimson-100);border-radius:2px;
  box-shadow:0 0 0 .3rem var(--crimson-100)}
a.fn-back{display:inline;flex:0 0 auto;margin-top:.1em;padding:.12rem .3rem;
  border-radius:3px;color:var(--rubric);text-decoration:none;line-height:1;position:relative}
a.fn-back::after{content:"";position:absolute;inset:-.35rem -.3rem}
a.fn-back svg{width:1em;height:1em;display:inline-block}
a.fn-back:hover,a.fn-back:focus-visible{color:var(--crimson-900);background:var(--crimson-100)}
/* The hover card. Filled from the note itself, so nothing is printed twice; it names its own
   type, because a card that inherits from whatever paragraph it sits over looks like two
   different features. Pointer devices only; the script decides, and the links work either
   way. */
/* `pointer-events:none` is what stops the flicker: a card that can take the pointer sits
   under it, the marker loses its hover, the card closes, the pointer is over the marker
   again, and the pair oscillate. A card is to be read, not clicked. A note longer than the
   card is faded at the foot rather than clipped mid-line; the marker still jumps to it. */
.fn-pop{position:fixed;z-index:60;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 1.6rem), transparent);
  mask-image:linear-gradient(#000 calc(100% - 1.6rem), transparent);
  background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--gold-500);
  box-shadow:0 10px 28px rgba(27,25,23,.18);padding:.7rem .9rem;
  font-family:var(--font-body);font-style:normal;font-weight:400;color:var(--ink);
  font-size:.95rem;line-height:1.5;text-align:left}
@media (max-width:48rem){
  .fn-pop{max-height:45dvh}
}
/* On a touch screen there is no hover, so the marker and the arrow are the whole mechanism
   and both need a target a thumb can hit. Padding on a raised marker costs no line height. */
@media (pointer:coarse){
  sup.fn-ref{font-size:.8em}
  sup.fn-ref a{padding:.28em .22em}
  a.fn-back{padding:.5rem .55rem}
}

/* The line recording which body adopted the document. Italic in every source PDF, set off
   from the articles because it is not one of them. */
.doc-adopted{font-family:var(--font-head);font-style:italic;font-size:1.05rem;
  color:var(--ink-muted);border-top:1px solid var(--rule);margin-top:2.4rem;padding-top:1rem}

/* The signature block of a pastoral letter: its own layout, so its line breaks survive. */
.doc-signature{margin:2.4rem 0 2rem;font-family:var(--font-head)}
.doc-signature p{margin:0 0 .9rem}
.doc-signature p:last-child{line-height:1.5}

.badge{display:inline-block;background:var(--crimson-100);color:var(--crimson-700);
  font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.1rem .4rem;border-radius:var(--radius)}

/* ---------- back to top ---------- */

/* Floating, bottom right, for the documents that run long. Hidden at the top of the page and
   shown once the reader is a screen or so down; the script sets `data-show`, and with the
   script off or not yet run the element is simply absent from view rather than broken. 44px
   square so it is a legal touch target. */
a.totop{position:fixed;right:1rem;bottom:1rem;z-index:30;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--crimson-600);color:#fff;font-size:1.15rem;line-height:1;
  text-decoration:none;box-shadow:0 4px 14px rgba(27,25,23,.28);
  opacity:0;visibility:hidden;transition:opacity .18s ease}
a.totop[data-show="true"]{opacity:1;visibility:visible}
a.totop:hover{background:var(--crimson-700)}
a.totop:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}
/* A phone in the corner already has the thumb zone occupied; keep it clear of the footer
   and of the popover, which sits along the bottom of the screen. */
@media (max-width:48rem){a.totop{right:.75rem;bottom:.75rem}}

/* ---------- liturgical texts: a rite's speech, its rubrics, a source's list ---------- */

/* A run of speeches is ONE table in effect, though it is laid out with padding rather than
   a grid so the markup stays a plain paragraph per speech.
   The label column is a single width for the whole run, set by the engine from the longest
   label in it. Every speech in a run therefore starts its words at the same place.
   What this replaced: each speech was its own CSS grid sized to its own label, so one page
   carried FIVE label-column widths (52px, 70px, 94px, 164px, 587px) and the speeches began
   at five different x positions. The 587px column was the General Confession: a grid makes
   every child an item, so each `<strong>` run in that speech became its own cell and the
   paragraph exploded into a two-column grid of bold fragments. Padding cannot do that.
   Ted, 2026-10-16: "for items where the pastor and the penitents responses ... are
   immediately following each other they should be in one table so that it aligns the cells
   properly." */
.dlg-run{--lbl-w:6rem}
p.dlg{position:relative;padding-left:var(--lbl-w,6rem);margin:0 0 .3rem;max-width:var(--measure)}
.dlg-run p.dlg:last-child{margin-bottom:1.2rem}
/* A speech with no label needs no column. */
p.dlg:not(:has(.lbl)){padding-left:0}
p.dlg .lbl{position:absolute;left:0;top:0;font-family:var(--font-head);font-weight:700;
  color:var(--crimson-600);font-size:.95em}
/* The assembly's part is bold in every one of these sources, and stays bold: it is the
   one distinction a reader has to see at a glance when leading from the page. */
p.dlg strong{font-weight:700}

/* A psalm: one paragraph per verse, each half-verse on its own line, the second half
   indented. Ted, 2026-10-16: "It needs to look like a psalm, the way that we form out
   psalms." */
div.psalm{margin:1.4rem 0 2rem;max-width:var(--measure)}
p.psalm-v{margin:0 0 .7rem}
p.psalm-v .h{display:block}
p.psalm-v .h.i{padding-left:2.6rem}

/* A rubric: a direction to the assembly, not words anybody says. RED, which is what a
   rubric is: the word means the red ink a service book printed its directions in, and every
   one of these sources sets them that way. Italic as well. */
p.rubric{font-family:var(--font-head);font-style:italic;color:var(--rubric);
  margin:1.2rem 0 1rem;max-width:var(--measure)}

/* The sign of the cross in a rubric, and the speaker letters beside a speech, which are
   rubrical apparatus too. `✠` is U+2720, the mark a printed liturgy uses for the sign.
   The shipped webfonts are subset to Latin and Greek and do NOT carry it, so the stack names
   them first and falls back to the symbol faces every desktop and phone ships. Extending the
   subsets would keep it in the site's own typeface; until then this is the honest arrangement. */
.cross,.lbl{color:var(--rubric)}
.cross{font-family:var(--font-head),"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",
  "DejaVu Sans",sans-serif;font-style:normal;font-weight:400;padding:0 .06em}

/* A schedule: the hour in one column, what happens in the other. AT BODY SIZE: the generic
   `table{font-size:.95rem}` above shrinks every table, and Ted asked for this one's text to
   match the body. Ted, 2026-10-16. */
table.schedule{border-collapse:collapse;margin:1.4rem 0 2rem;max-width:34rem;
  font-size:1.15rem}
table.schedule td{padding:.3rem .9rem .3rem 0;vertical-align:top;border:0}
table.schedule td:first-child{white-space:nowrap;color:var(--ink-muted);
  font-variant-numeric:tabular-nums;width:7.6rem}
/* The day a row belongs to is a full-width band across both columns; the timetable's own
   headings are what a reader scans for, so they take the heading face and a rule. */
table.schedule th[colspan]{text-align:left;font-family:var(--font-head);font-weight:700;
  padding:1.3rem .9rem .3rem 0;border-bottom:1px solid var(--rule)}
table.schedule thead th{text-align:left;font-weight:600;font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-muted);padding:0 .9rem .3rem 0}

/* A two-column comparison the author set as a table with no rules: the printed column
   headings, then one row per pair. `table.schedule` is the wrong vehicle -- its first column
   is nowrap and its measure short. Cells are top-aligned and read as short prose, so the
   measure does the work and no borders are drawn. */
table.compare{border-collapse:collapse;margin:1.6rem 0 2.2rem;max-width:var(--measure);
  font-size:1.05rem}
table.compare caption{text-align:left;font-family:var(--font-head);font-weight:700;
  font-size:.86rem;letter-spacing:.04em;color:var(--ink-muted);padding:0 0 .5rem}
table.compare thead th{text-align:left;font-family:var(--font-head);font-weight:700;
  font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);
  padding:0 1.4rem .5rem 0;border-bottom:1px solid var(--rule);vertical-align:bottom}
table.compare td{padding:.9rem 1.4rem .9rem 0;vertical-align:top;border:0;
  border-bottom:1px solid var(--rule)}
table.compare tbody tr:last-child td{border-bottom:0}
table.compare td:first-child{width:50%}

/* A source list whose own markers carry meaning: a roman-numeral instruction, a bulleted
   duty, a page number opening an errata entry. `list-style` is off because the marker is
   in the text; `role="list"` is in the markup because Safari drops list semantics when
   list-style is none. */
ul.doc-items{list-style:none;padding-left:0;margin:1.6rem 0 2rem}
ul.doc-items li{margin:0 0 .9rem;max-width:var(--measure)}
ul.doc-items li::marker{content:""}

/* The credit a source prints under its own title ("Prepared by ... at the encouragement of
   ..."). The document's own words, carried where the source prints them. */
p.doc-credit{font-family:var(--font-head);color:var(--ink-muted);margin:0 0 2rem;
  max-width:var(--measure)}

/* ---------- the Council's working papers: minutes, reports, budgets ---------- */

/* An outline, up to four depths. The printed markers (`A.`, `a.`, `i.`, `1.`) are the
   document's own addressing scheme and are typed text, so `list-style` is off and the indent
   alone shows the depth. A bulleted run inside an entry has no address to keep, so it keeps a
   real disc. */
ol.outline,ul.outline{margin:.35rem 0 .7rem}
ol.outline{list-style:none;padding-left:0}
ol.outline ol.outline{padding-left:1.5em}
ul.outline{list-style:disc;padding-left:1.5em}
ul.outline ul.outline{list-style:circle}
/* Four depths on a phone would spend a third of the measure on indents. */
@media (max-width:640px){
  ol.outline ol.outline{ padding-left:1.05em }
  ul.outline,ul.outline ul.outline{ padding-left:1.15em }
}
.outline > li{max-width:var(--measure);margin:0 0 .5rem}
.outline > li > ol.outline,.outline > li > ul.outline{margin-top:.35rem}

/* The record of a decision, printed at the depth the discussion had reached. Its label keeps
   the source's capitals: `CONSENSUS:` is the act the minutes record, not a heading. */
p.decision{margin:.55rem 0 .75rem;max-width:var(--measure)}

/* A bare year introducing a run of dates under a decision. */
p.list-label{font-family:var(--font-head);font-weight:700;font-size:.95rem;
  color:var(--ink-muted);margin:.85rem 0 .1rem}

/* A money column. The label takes the width and the figure sits right, tabular so the
   decimal points line up the way they do on the printed page. */
table.budget{border-collapse:collapse;margin:.8rem 0 2rem;max-width:32rem;font-size:1.08rem}
table.budget td{padding:.24rem 0 .24rem 0;border:0;vertical-align:top}
table.budget td:first-child{padding-right:1.6rem}
table.budget td:last-child{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
table.budget td.total{font-weight:700;border-top:1px solid var(--rule);padding-top:.6rem}

/* The small print under a table. */
p.note{font-size:.9rem;color:var(--ink-muted);max-width:var(--measure);margin:0 0 .8rem}

.dues-call{background:var(--crimson-900);color:#F7F1E7;border-radius:var(--radius);
  padding:1.2rem 1.3rem}
.dues-call h2{color:#F7F1E7;border-color:var(--gold-500);margin-top:0}
.dues-call p{margin:0 0 .9rem}
.dues-call .btn-gold{margin-right:.5rem}

/* ---------- footer ---------- */
footer.site{border-top:3px solid var(--gold-500);background:var(--paper);
  padding:1.6rem 0 2.2rem;font-size:.9rem}
footer.site .cols{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
footer.site h2{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-muted);border:0;margin:0 0 .5rem;font-family:var(--font-body);font-weight:700}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:.3rem}
footer.site .colophon{color:var(--ink-muted);font-size:.82rem;margin-top:1.6rem;
  border-top:1px solid var(--rule);padding-top:.9rem;max-width:none}

@media print{
  header.site,footer.site,.navtoggle,.dues-call,a.totop,nav.toc{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:#000;text-decoration:underline}
  main{padding:0;max-width:none}
  main.with-toc{display:block}
  h1,h2,h3{color:#000;break-after:avoid}
  p,li{max-width:none}
}

/* A brief-lesson leaflet is a list of two things per entry: the date and occasion, then the
   verse the office says. That is a definition list, not a table and not forty headings: a
   heading per Sunday would put a gold rule under every one of them. The date carries the
   rubric face and colour the site gives any liturgical label; the verse is ordinary body
   text, because it IS the lesson. The reference inside the date is a citation like any
   other and keeps `.scr`'s treatment. */
dl.brief-lessons{margin:1.4rem 0 0;max-width:var(--measure)}
dl.brief-lessons dt{font-family:var(--font-head);color:var(--rubric);font-size:.97rem;
  margin:1.6rem 0 .3rem}
dl.brief-lessons dt:first-child{margin-top:0}
dl.brief-lessons dd{margin:0;line-height:1.7}
/* The leaflet's own subtitle sits between the h1 and the Psalm 119 grid. */
p.brief-office{color:var(--ink-muted);font-size:.92rem;margin:-.3rem 0 1.4rem}
/* The leaflet's own closing credit: authorship, set quieter than the lessons. */
p.brief-credit{color:var(--ink-muted);font-size:.86rem;margin:2.2rem 0 0;
  max-width:var(--measure)}

/* A page that reproduces a document gives the document its own h1, because the document's
   title is not the page's title (Ted, 2026-10-17, on Who We Are: "Should be h1 level because
   it is the title of the document that follows"). The page head's h1 sits flush by design;
   a title inside the content needs the space above it that marks it off from the intro. */
article h1{margin-top:2.8rem}

/* A list of names, one per line: the founding members who subscribed the statement, and
   anything else that is a roll rather than a set of points. No markers, tight leading, so it
   reads as a signature block and not as twenty separate claims. Ted, 2026-10-17: "the list of
   subscribers to the statement should be on separate lines." */
ul.signers{list-style:none;padding-left:0;margin:1.2rem 0 2rem;max-width:var(--measure)}
ul.signers li{margin:0 0 .22rem;line-height:1.5}

/* A photograph gallery: the year pages' retreat photographs. A plain grid, no script, so it
   works with JavaScript off, and each tile is a link to the full 1200px file rather than a
   lightbox the reader cannot open with the keyboard. */
div.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:.7rem;margin:1.4rem 0 2rem}
div.gallery a{display:block;line-height:0}
div.gallery img{width:100%;height:220px;object-fit:cover;display:block;
  border-radius:var(--radius);background:var(--rule)}
@media (max-width:520px){div.gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  div.gallery img{height:150px}}

/* The officers' block a Society letter prints at its foot: the office, then the person, the
   address and the contact under it. A definition list rather than a run-on paragraph, so a
   reader can find the Secretary. Ted, 2026-10-26: "the individual names and addresses at the
   bottom should be broken onto lines or better formatted." */
dl.officers{display:grid;grid-template-columns:max-content 1fr;gap:.15rem 1.4rem;
  margin:2rem 0 0;font-size:.92rem;color:var(--ink-muted);max-width:34rem}
dl.officers dt{font-family:var(--font-head);font-weight:700;color:var(--ink);
  font-size:.95rem;padding-top:.5rem}
dl.officers dd{margin:0;padding-top:.5rem;line-height:1.5}
dl.officers a{color:inherit;overflow-wrap:anywhere}
@media (max-width:520px){dl.officers{grid-template-columns:1fr;gap:0}
  dl.officers dd{padding-top:.1rem;margin-bottom:.6rem}}

/* The Chapter a document was delivered to, under its record strip. A quiet line: it is a way
   back to the retreat's own page, not a second title. Omitted entirely when there is none. */
p.doc-chapter{margin:.2rem 0 1.6rem;font-size:.9rem;color:var(--ink-muted)}
p.doc-chapter a{color:var(--crimson-700)}