/* ============================================================
   THE BLEND
   Frame      Parlour   one confraternity received at a time, a rail to move
   Language   Ordo      family colour down the margin, a key to the marks
   Paper      Pew Card  one confraternity to a sheet, address written out, sign-off
   Habit      Register  an absent route struck once and left legible
   Palette    the navy, gold and vellum canon, with Compline as second paper

   PALETTE slot: every colour is a token here. The second paper is one block
   of overrides and nothing else.
   ============================================================ */

/* The three faces, served from this site rather than hoped for. Without
   these every reader without them installed, which is nearly all of them,
   got Palatino and Arial. Cut by publish/fonts.py: Cinzel at 400 only,
   because the humility note allows no other weight; the serif at its
   text optical size, since every display line on the page is Cinzel. */
@font-face { font-family: "Cinzel"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/cinzel-400.bd4a1203e7.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400 600; font-style: normal; font-display: swap;
  src: url("fonts/source-serif-4.136611624f.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400 600; font-style: italic; font-display: swap;
  src: url("fonts/source-serif-4-italic.8aab8b5721.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400 600; font-style: normal; font-display: swap;
  src: url("fonts/source-sans-3.0691d04493.woff2") format("woff2"); }

:root {
  --ink:      #0C2340;
  --ink-2:    #45505E;   /* 7.2:1 on paper */
  --ink-3:    #5B6775;   /* 5.3:1 on paper, 4.8:1 on paper-2 */
  --gold:     #C99700;   /* fills only. Fails as text on vellum. */
  --gold-ink: #7D5F00;   /* 5.5:1 on paper. Text only. */
  --paper:    #F9F6EF;
  --paper-2:  #F1EDE2;
  --paper-3:  #FDFBF6;
  --rule:     #D9D3C4;
  --rule-2:   #AAA18A;
  --rule-3:   #0C2340;
  --flag:     #8B1A1A;

  --fam-confraternity: #1E3A6E;
  --fam-order:         #4A2A6B;
  --fam-movement:      #1B6B4A;
  --fam-society:       #8B1A1A;

  --display: "Cinzel", "Trajan Pro 3", "Palatino Linotype", Palatino, serif;
  --body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Source Sans 3", "Franklin Gothic Book", Arial, sans-serif;

  --t-micro: 13px; --t-small: 15px; --t-body: 18px;
  --t-lead: 22px;  --t-head: 29px;  --t-display: 36px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
/* Compline: the night office. Cream on navy, the date in Latin. */
html[data-paper="compline"] {
  --ink: #F4F1E8; --ink-2: #C9CFD9; --ink-3: #A8B1BD;
  --gold-ink: #DCB22E; --paper: #0A1C32; --paper-2: #0F2740; --paper-3: #122C48;
  --rule: #24415F; --rule-2: #3A5878; --rule-3: #F4F1E8; --flag: #EE8A86;
  --fam-confraternity: #7FA3DC; --fam-order: #B692D8;
  --fam-movement: #6FC79C; --fam-society: #E89A96;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: var(--t-body); line-height: 1.55;
  font-variant-numeric: oldstyle-num;
  transition: background 400ms var(--ease), color 400ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.skip { position: absolute; left: .5rem; top: -4rem; z-index: 90; background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: var(--t-micro); padding: .8rem 1.1rem; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; }
.skip:focus { top: .5rem; }

.dstrip {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center;
  padding: .3rem 1.25rem; border-bottom: 1px solid var(--rule-2);
  font-family: var(--sans); font-size: var(--t-micro); background: var(--paper-2);
}
.dstrip b { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dstrip a, .dstrip button {
  color: var(--gold-ink); display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; font: inherit; cursor: pointer; text-decoration: underline; padding: 0;
}
.dstrip span { color: var(--ink-3); }
kbd { font-family: var(--sans); font-size: var(--t-micro); border: 1px solid var(--rule-2);
  padding: .05rem .3rem; color: var(--ink-2); background: var(--paper); }

/* ============================================================
   THE FIELD BAND  (the wordmark, and the category tabs on its rule.
   Ordo's language: one rule cut into runs, the count over each run.)
   ============================================================ */
.field {
  border-bottom: 1px solid var(--rule-2); background: var(--paper);
  padding: 1.1rem 1.25rem .9rem;
}
/* The masthead is centred, which is how a title page has been set since
   before there were pages: the mark above, the name under it, the register's
   Latin name under that, and the whole block on the spine of the sheet. The
   tabs centre with it so the head of the page reads as one stack rather than
   a brand on the left and some buttons after it.
   text-indent compensates for the trailing letterspace on the last letter,
   which otherwise leaves a centred run of capitals sitting a hair left. */
.field-in { max-width: 1240px; margin: 0 auto; display: flex;
  flex-wrap: wrap; gap: .5rem 2.5rem; align-items: center;
  justify-content: center; text-align: center; }
.field h1 {
  font-family: var(--display); font-weight: 400; font-size: var(--t-lead);
  letter-spacing: .2em; margin: 0 0 .5rem; text-indent: .2em;
}

/* ============================================================
   FRAME (Parlour): a rail to move through, a stage to read.
   The rail is its own grid item so sticky actually sticks.
   ============================================================ */
.room {
  display: grid; grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: 0 2.75rem; max-width: 1240px; margin: 0 auto; padding: 0 1.25rem 4rem;
  align-items: start;
}
.rail { position: sticky; top: 0; align-self: start; padding: 1.1rem 0;
  max-height: 100vh; display: flex; flex-direction: column; }
.rail h2 { margin: 0 0 .5rem; font-family: var(--sans); font-size: var(--t-micro);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.rail input {
  width: 100%; font-family: var(--body); font-size: var(--t-small); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-2);
  padding: .45rem .1rem; min-height: 44px;
}
.rail input:focus { outline: none; border-bottom-color: var(--gold); }
.chips {
  /* These filter the whole directory, so they sit in the
     header band at full width rather than inside the 280px rail, where
     seven of them wrapped to four ragged rows. Here they sit ON the
     header's own rule: the negative bottom margin pulls the row down so an
     active tab's gold underline lands exactly on it. */
  max-width: 1240px; margin: .9rem auto -.9rem;
  display: flex; flex-wrap: wrap; gap: 0 .2rem; justify-content: center;
}
.chips button {
  flex: none;
  display: flex; align-items: baseline; gap: .4rem;
  font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .04em;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-3); padding: .55rem .7rem; margin-bottom: -1px;
  cursor: pointer; border-radius: 0; white-space: nowrap; min-height: 44px;
  transition: color 160ms ease, border-color 160ms ease;
}
.chips button .n {
  font-variant-numeric: tabular-nums; font-size: var(--t-micro);
  color: var(--ink-3);
}
.chips button:first-child { padding-left: 0; }
.chips button:hover { color: var(--ink-2); border-bottom-color: var(--rule-2); }
.chips button[aria-selected="true"] {
  color: var(--ink); border-bottom-color: var(--gold); font-weight: 600;
}
.chips button[aria-selected="true"] .n { color: var(--gold-ink); opacity: 1; }
/* A tab with nothing behind it says so rather than looking available. */
/* No opacity: --ink-3 is already the quietest text the canon allows, and
   fading it further put the counts at 3.2:1. The 0 beside the word says the
   rest. */
.chips button[data-empty="true"] { color: var(--ink-3); }
/* The last three ask a different question from the first four: not "which of
   these can I do today" but "show me the ones that go together". A small gold
   square marks them as collections rather than filters. */
.chips button[data-kind="group"]::before {
  content: ""; width: 5px; height: 5px; background: var(--gold);
  flex: none; align-self: baseline; margin-right: .1rem;
  transform: translateY(-.32em);
}
.chips button[data-kind="group"][aria-selected="true"]::before { background: var(--gold-ink); }
.chips button:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; }
/* The tab panel wraps the list rather than being it, so the list stays a
   list ("68 items") to a screen reader instead of losing its semantics. */
.rail .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rail ol { list-style: none; margin: .5rem 0 0; padding: 0; overflow-y: auto; flex: 1; }
.rail li { border-bottom: 1px solid var(--rule); }
.rail li > button {
  width: 100%; text-align: left; background: none; border: 0; font: inherit;
  cursor: pointer; padding: .5rem .4rem; min-height: 44px; display: flex;
  gap: .5rem; align-items: baseline; color: var(--ink-2); font-size: var(--t-small);
  border-left: 3px solid var(--fam);
}
.rail li[data-family="confraternity"] { --fam: var(--fam-confraternity); }
.rail li[data-family="order"]         { --fam: var(--fam-order); }
.rail li[data-family="movement"]      { --fam: var(--fam-movement); }
.rail li[data-family="society"]       { --fam: var(--fam-society); }
.rail li > button:hover { background: var(--paper-2); color: var(--ink); }
.rail li[aria-current="true"] > button { color: var(--ink); font-weight: 600; background: var(--paper-2); }
.rail li > button:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; }
/* HABIT (Register): a route checked and confirmed absent is struck once and
   stays legible. A route nobody could reach is flagged instead. The two
   never render the same. */
.rail .struck { text-decoration: line-through; text-decoration-thickness: 1px; }
.rail .unchecked { color: var(--flag); }

/* ---------- the stage --------------------------------------- */
.stage { padding: 1.9rem 0 0; min-height: 90vh; }
/* The gate before the evidence, at every width. On a wide screen the
   evidence (other names, who it belongs to, the facts, what it is part of)
   is set in the margin beside the gate, the way a missal glosses its text,
   instead of stacking above it and pushing the way in below the fold. */
@media screen and (min-width: 62.01rem) {
  .stage { display: grid; grid-template-columns: minmax(0, 37rem) minmax(12rem, 17rem);
    column-gap: 2.6rem; align-content: start; }
  .stage > * { grid-column: 1; min-width: 0; }
  .stage > .fam, .stage > h2, .stage > .moves, .stage > .signoff { grid-column: 1 / -1; }
  .stage > .notes { grid-column: 2; grid-row: 3 / span 3; align-self: start; }
  .notes { padding-top: .1rem; }
  .notes .aka { margin: 0 0 1rem; }
  .notes .people { margin: 0 0 1rem; }
  .notes .facts { margin: 0 0 1.1rem; display: block; }
  /* In a column this narrow a run-in line breaks after a dot and starts the
     next line with one, so each fact takes its own line instead. */
  .notes .facts i { display: block; }
  .notes .facts i + i { margin-top: .4rem; }
  .notes .facts i + i::before { content: none; }
  .notes .belongs { margin: 0; }
}
.stage .fam {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-ink);
  margin: 0 0 .6rem; display: flex; align-items: center; gap: .55rem;
}
.stage .fam .dot { width: .6rem; height: .6rem; background: var(--fam); flex: none; }
.stage[data-family="confraternity"] { --fam: var(--fam-confraternity); }
.stage[data-family="order"]         { --fam: var(--fam-order); }
.stage[data-family="movement"]      { --fam: var(--fam-movement); }
.stage[data-family="society"]       { --fam: var(--fam-society); }
.stage h2 {
  font-family: var(--display); font-weight: 400; font-size: var(--t-head);
  letter-spacing: .055em; line-height: 1.24; margin: 0 0 .4rem; max-width: 27ch;
}
.stage .aka { margin: 0 0 .9rem; font-style: italic; color: var(--ink-3); font-size: var(--t-small); max-width: 48ch; }
/* LANGUAGE (Ordo): the fact line, abbreviated, between two rules. */
.facts {
  display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin: 0 0 1.5rem;
  font-family: var(--sans); font-size: var(--t-micro); color: var(--ink-2);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .55rem 0;
  max-width: 37rem;
}
.facts i { font-style: normal; }
.facts i + i::before { content: "· "; color: var(--rule-2); }

/* The way in is the largest thing on the stage: it is the one judgment. */
.gate { border: 1px solid var(--rule-3); padding: 1.4rem 1.5rem; margin: 0 0 1.9rem; max-width: 37rem; background: var(--paper-3); }
.gate .ease { font-family: var(--display); font-size: var(--t-display); font-weight: 400;
  letter-spacing: .015em; line-height: 1.06; margin: 0 0 .25rem; text-wrap: balance; }
.gate .easesub { margin: 0 0 1.1rem; font-size: var(--t-small); color: var(--ink-2); }
.gate dl { margin: 1.15rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem,1fr)); gap: .75rem 1.5rem; }
.gate dt { font-family: var(--sans); font-size: var(--t-micro); color: var(--ink-2); margin-bottom: .18rem; }
.gate dd { margin: 0; font-size: var(--t-small); }
.gate .portal { margin: 1rem 0 0; font-family: var(--sans);
  font-size: var(--t-micro); color: var(--ink-2); }
.gate .step { margin: 1rem 0 0; font-size: var(--t-small); color: var(--ink-2); font-style: italic; }
.gate a.go {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 48px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  letter-spacing: .06em; padding: .75rem 1.3rem;
}
.gate a.go:hover { background: var(--gold-ink); }
/* Who it belongs to. Set quietly, under the names, because for a good number
   of these the saint IS the reason a reader stops: this is Kolbe's, this is
   the one Therese was enrolled in. The name takes the serif and the ink; what
   they did takes the quiet sans. */
.stage .people { margin: .1rem 0 1.1rem; max-width: 56ch; }
.stage .people span { display: block; font-size: var(--t-small);
  color: var(--ink-3); line-height: 1.5; }
.stage .people b { font-weight: 600; color: var(--ink-2); font-style: normal; }

/* ---------- the mark set -----------------------------------
   Pictorial icons are usually the fastest way to make a devotional page look
   like a dashboard, so these are deliberately few, hairline, and open: a
   label's worth of meaning in a 17px square, carrying the same stroke as the
   cross in the wordmark. The accessible name stays on the text beside them,
   so nothing here is the only way to know what a row is. */
.ico {
  width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px; color: var(--ink-3);
}
button .ico, a .ico { color: inherit; }

/* The channels: where the way in is an address rather than a link. The rows
   are plain text on purpose. The address is the thing a reader needs in their
   hand, so it is printed in full rather than hidden behind a word like
   "contact", and it survives being photocopied. */
.gate .channels { margin: .9rem 0 0; display: grid; gap: .45rem; }
.gate .channels > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; }
.gate .channels .val { font-family: var(--sans); font-size: var(--t-small); color: var(--ink); }
.gate .channels a.val { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--rule-2); text-underline-offset: 2px; }
.gate .channels a.val:hover { text-decoration-color: var(--gold); }
.gate .channels .way {
  font-family: var(--sans); font-size: var(--t-micro); color: var(--gold-ink);
  letter-spacing: .05em;
}
.gate .channels .cnote { margin: .35rem 0 0; font-size: var(--t-small); color: var(--ink-2); }
.gate button.cp {
  font-family: var(--sans); font-size: var(--t-micro); background: none;
  border: 1px solid var(--rule-2); color: var(--ink-2); border-radius: 2px;
  padding: .2rem .55rem; cursor: pointer; min-height: 44px; margin: .3rem 0 0;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.gate button.cp:hover { border-color: var(--gold); color: var(--gold-ink); }

.gate .shut, .gate .noroute { margin: 0; font-size: var(--t-small); color: var(--ink-2);
  border-left: 3px solid var(--gold); padding: .6rem .85rem; background: var(--paper-2); }
.gate .noroute.unchecked { color: var(--flag); border-left-color: var(--flag); }

.prose { max-width: 35rem; }
.prose p { margin: 0 0 1rem; }
.prose .fld { border-top: 1px solid var(--rule); margin-top: 1.3rem; padding-top: .95rem; }
.prose .fld h3 { margin: 0 0 .35rem; font-family: var(--sans); font-size: var(--t-micro);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.prose .fld p { font-size: var(--t-small); }

.moves { display: flex; gap: .55rem; flex-wrap: wrap; margin: 2rem 0 0;
  border-top: 1px solid var(--rule); padding-top: 1.15rem; }
.moves button {
  font-family: var(--sans); font-size: var(--t-small); background: none;
  border: 1px solid var(--rule-2); color: var(--ink-2); padding: .6rem 1rem;
  min-height: 44px; cursor: pointer;
}
.moves button:hover { border-color: var(--gold); color: var(--gold-ink); }
.moves button:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

/* the key to the marks, kept at the foot where it is not in the way */

.signoff { display: none; }

/* ---------- picking a few to take with you --------------------
   A reader comparing three confraternities needs somewhere to put them.
   The plus is a quiet control in the rail; the list is its own view. */
.rail li { display: flex; align-items: stretch; }
.rail li > button.pick {
  flex: none; width: 2.5rem; border-left: 1px solid var(--rule);
  font-family: var(--sans); font-size: var(--t-small); color: var(--ink-3);
  background: none; border-top: 0; border-right: 0; border-bottom: 0;
  cursor: pointer; min-height: 44px;
}
.rail li > button.pick:hover { background: var(--paper-2); color: var(--gold-ink); }
.rail li > button.pick[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.rail li > button.pick:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; }
.rail li > button.open { flex: 1; }

/* ---------- the Fivefold Scapular ----------------------------
   Five scapulars sewn into one set. Drawn as a set rather than as five
   unrelated links, because the reader's real question is whether one
   ceremony covers all five, and the answer depends on faculties the
   records already name. Colour is carried by a small woven square, not
   by the text colour, so it survives the printer and colour blindness
   alike: every square is labelled with its colour in words. */
.belongs { margin: .7rem 0 1.7rem; font-size: var(--t-small); color: var(--ink-2);
  border-left: 3px solid var(--gold); padding-left: .85rem; max-width: 58ch; }
.belongs b { font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink);
  display: block; margin-bottom: .15rem; }
.belongs span { display: block; }
.belongs .soft { color: var(--ink-3); font-style: italic; }

.fivefold { border: 1px solid var(--rule-2); padding: 1.1rem 1.2rem; margin: 1.6rem 0 0;
  background: var(--paper-2); }
.fivefold h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-lead);
  letter-spacing: .05em; margin: 0 0 .4rem; }
.fivefold > p { margin: 0 0 1rem; font-size: var(--t-small); color: var(--ink-2); max-width: 58ch; }
.fivefold ol { list-style: none; margin: 0; padding: 0; }
.fivefold li { display: flex; gap: .7rem; align-items: baseline;
  border-top: 1px solid var(--rule); padding: .55rem 0; }
.fivefold li:first-child { border-top: 0; }
.fivefold .sq { flex: none; width: 13px; height: 16px; border: 1px solid var(--ink);
  position: relative; top: 2px; }
.fivefold .sq-brown { background: #6B4A2B; }
.fivefold .sq-black { background: #1C1C1C; }
.fivefold .sq-blue  { background: #2C4A7C; }
.fivefold .sq-white { background: #FFFFFF; }
.fivefold .sq-red   { background: #8C2A2A; }
.fivefold .nm { flex: 1; font-size: var(--t-small); }
.fivefold .nm b { font-weight: 600; }
.fivefold .nm i { font-style: italic; color: var(--ink-2); }
.fivefold .nm a { color: var(--gold-ink); text-decoration: none;
  border-bottom: 1px solid var(--rule-2); display: inline-block; min-height: 24px; }
.fivefold .nm a:hover { border-bottom-color: var(--gold); }
.fivefold .here { font-family: var(--sans); font-size: var(--t-micro); color: var(--ink-3); }
.fivefold .nowhere { font-family: var(--sans); font-size: var(--t-micro); color: var(--flag); }
.fivefold .faculty { display: block; font-family: var(--sans); font-size: var(--t-micro);
  color: var(--ink-2); margin-top: .15rem; }

.gate .pick-row { margin: 1.15rem 0 0; }
.gate button.pickbig {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  background: none; border: 1px solid var(--rule-2); color: var(--ink-2);
  font-family: var(--sans); font-size: var(--t-small); padding: .55rem 1rem; cursor: pointer;
}
.gate button.pickbig:hover { border-color: var(--gold); color: var(--gold-ink); }
.gate button.pickbig[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* your list, as its own page */
.yourlist { max-width: 1240px; margin: 0 auto; padding: 1.8rem 1.25rem 4rem; }
.yourlist h2 { font-family: var(--display); font-weight: 400; font-size: var(--t-head);
  letter-spacing: .1em; margin: 0 0 .5rem; }
.yourlist .lede { margin: 0 0 1.4rem; color: var(--ink-2); font-size: var(--t-small); max-width: 54ch; }
.yourlist .tools { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.8rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .9rem 0; }
.yourlist .tools button .ico { margin-right: .4rem; }
.yourlist .tools button, .yourlist .tools a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  padding: .7rem 1.15rem; cursor: pointer; text-decoration: none;
  background: none; border: 1px solid var(--rule-2); color: var(--ink-2);
}
.yourlist .tools button.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.yourlist .tools button:hover { border-color: var(--gold); color: var(--gold-ink); }
.yourlist .tools button.primary:hover { background: var(--gold-ink); border-color: var(--gold-ink); color: var(--paper); }
.yourlist .said { font-family: var(--sans); font-size: var(--t-micro); color: var(--ink-2);
  align-self: center; }
/* The list lives at the other end of the strip, so a confirmation that only
   showed inside the list view would never be read by the person adding. */
.gate .pick-row .said { display: block; margin: .5rem 0 0;
  font-family: var(--sans); font-size: var(--t-micro); color: var(--gold-ink); min-height: 1.1em; }
.yourlist .warn { margin: 0 0 1.4rem; font-size: var(--t-small); color: var(--ink-2);
  border-left: 3px solid var(--flag); padding: .5rem 0 .5rem .8rem; max-width: 54ch; }
.sheet { border-top: 2px solid var(--rule-3); padding: 1.1rem 0 1.4rem; }
.sheet .n { font-family: var(--sans); font-size: var(--t-micro); color: var(--gold-ink);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .35rem; }
.sheet h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-lead);
  letter-spacing: .04em; margin: 0 0 .5rem; }
.sheet .row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,18rem); gap: 1rem 2.5rem; }
.sheet dl { margin: 0; }
.sheet dl > div { display: flex; gap: .6rem; align-items: baseline;
  border-bottom: 1px dotted var(--rule); padding: .3rem 0; }
.sheet dt { font-family: var(--sans); font-size: var(--t-micro); color: var(--ink-2); }
.sheet dd { margin: 0 0 0 auto; font-size: var(--t-small); text-align: right; }
.sheet .promise { margin: 0; font-size: var(--t-small); }
.sheet .promise b { display: block; font-family: var(--sans); font-size: var(--t-micro);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .3rem; }
.sheet .addr a { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--rule-2); text-underline-offset: 2px; }
.sheet .addr a:hover { text-decoration-color: var(--gold); }
.sheet .addr { font-family: var(--sans); font-size: var(--t-micro); color: var(--ink-2);
  word-break: break-all; margin: .6rem 0 0; }
/* Taking one off the list is a correction, not a decision, so it reads as a
   mark rather than a sentence. U+00D7 is the multiplication sign: the letter x
   in its place is the tell of a page that was never set properly. The hit band
   below keeps the 44px target without the 44px box. */
.sheet .drop { margin-top: .9rem; }
.sheet .drop button {
  position: relative; font-family: var(--body); font-size: 19px; line-height: 1;
  background: none; border: 1px solid var(--rule); color: var(--ink-3);
  width: 30px; height: 30px; padding: 0; cursor: pointer; border-radius: 50%;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.sheet .drop button::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.sheet .drop button:hover { border-color: var(--flag); color: var(--flag); }
.sheet .drop button:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.yourlist .none { font-size: var(--t-small); color: var(--ink-2); max-width: 50ch; }
body[data-view="list"] .room { display: none; }
body:not([data-view="list"]) .yourlist { display: none; }

@media (max-width: 62rem) {
  .field-in { grid-template-columns: minmax(0,1fr); }
  .room { grid-template-columns: minmax(0,1fr); }
  /* PAPER slot on screen: the phone takes the Pew Card's order. The
     judgment comes first; the rail becomes a drawer underneath. */
  .stage { order: 1; padding-top: 1.3rem; min-height: 0; }
  .rail { order: 2; position: static; max-height: none;
    border-top: 1px solid var(--rule-2); margin-top: 2.2rem; }
  .rail ol { max-height: 28rem; }
  .gate { padding: 1.05rem; }
  /* The fold at 390 is 844px and the act has to be inside it. Two moves:
     the run bar is orientation rather than work, so it stands down; and the
     alternate name and founding facts are EVIDENCE, so they fall below the
     gate. The order is family, name, the way in, then everything else. */
  .stage { display: flex; flex-direction: column; }
  .stage .fam   { order: 1; }
  .stage h2     { order: 2; font-size: var(--t-lead); }
  .stage .gate  { order: 3; }
  .stage .notes { order: 4; }
  .stage .aka   { order: 4; margin: 1.3rem 0 0; }
  /* On a phone the saints wait their turn. They are the reason a reader
     stops, but the way in is the reason the page exists, and a people line
     above the gate pushed the enrollment link off the first screen. */
  .stage .people { order: 5; margin: .5rem 0 0; }
  .stage .facts { order: 6; margin: .9rem 0 0; }
  /* Every child of the stage needs a place here. The two panels had none,
     and order 0 put "Belongs to" above the name it belongs to. They are
     evidence, so they follow the facts. */
  .stage .belongs { order: 7; margin: 1.2rem 0 0; }
  .stage .prose { order: 8; margin-top: 1.4rem; }
  .stage .fivefold { order: 9; }
  .stage .moves { order: 10; }
  .stage .signoff { order: 11; }
  .gate .ease { font-size: var(--t-lead); }
  .field { padding: .8rem 1.25rem .7rem; }
  /* A thumb needs 44px. At desktop the chips stay compact. */
  .chips button { min-height: 48px; padding: .6rem .8rem; }
}

/* ============================================================
   PAPER (Pew Card): the confraternity on the stage prints to ONE sheet, with
   the enrollment address written out and a line for the priest.
   ============================================================ */
@media print {
  :root {
    --paper: #fff; --paper-2: #fff; --paper-3: #fff; --ink: #000;
    --ink-2: #222; --ink-3: #333; --rule: #bbb; --rule-2: #777;
    --rule-3: #000; --gold-ink: #000; --gold: #000; --flag: #000;
    --fam-confraternity: #000; --fam-order: #000; --fam-movement: #000; --fam-society: #000;
  }
  /* A 400ms colour transition on body meant a PDF taken straight after
     switching to print media captured navy part-way to black. */
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* .chips moved out of .rail and into the header band, which took it out of
     this list and put seven buttons on the paper. Hiding a container is only
     as durable as the container. */
  .dstrip, .skip, .rail, .chips, .moves { display: none; }
  /* One confraternity to a sheet: the paper carries who, the way in, what you
     promise and the sign-off. The long explanation is for the screen. */
  .prose > p { display: none; }
  /* The set is the one thing a reader takes to a priest, so it prints. */
  .belongs { border-left: 2px solid #000; }
  .fivefold { border: 1px solid #000; background: #fff; break-inside: avoid;
    padding: .6rem .7rem; margin: .7rem 0 0; }
  .fivefold h3 { font-size: 14px; }
  .fivefold > p, .fivefold .nm { font-size: 12px; }
  .fivefold .nm a::after { content: ""; }
  .fivefold .sq { border: 1px solid #000; }
  .prose .fld { display: none; }
  .prose .fld-promise { display: block; border-top: 1px solid #000;
    margin-top: .6rem; padding-top: .45rem; }
  .gate dl, .stage .facts { display: none; }
  /* 12px is 9pt, which is the floor this set prints to. Below it a line is
     not small, it is unreadable to the person this sheet is for. */
  .stage .aka { font-size: 12px; margin-bottom: .2rem; }
  .stage .people { margin: 0 0 .5rem; }
  .stage .people span { font-size: 12px; }
  .gate { padding: .55rem .7rem; }
  .gate .easesub { margin: 0 0 .5rem; }
  .gate .step { margin: .5rem 0 0; }
  .signoff { margin-top: .7rem; padding-top: .45rem; }
  /* Your list, printed: one confraternity to a sheet, each with its address
     and room for a signature. */
  .yourlist .tools, .sheet .drop, .gate .pick-row, .rail li > button.pick,
  .gate button.cp { display: none; }
  /* A sheet is about ONE confraternity. On screen the Fivefold panel is a
     map of all five, which is the point of it; on paper four of those rows
     are about somebody else's enrollment and were pushing this record to a
     third sheet. Paper keeps the reader's own colour and the explanation,
     and says in one line that there are five. */
  .fivefold li:not(.mine) { display: none; }
  .fivefold::after {
    content: "The set has five: Brown, Black, Blue, White and Red. Each is a "
             "separate enrollment with its own faculty, listed in full on the page.";
    display: block; margin-top: .45rem; font-family: var(--sans);
    font-size: 12px; color: #000;
  }
  .fivefold { break-inside: avoid; }
  /* The address block is the way in on paper, so it stays, tightened. */
  .gate .channels { margin: .5rem 0 0; gap: .25rem; }
  .gate .channels .way { font-size: 12px; }
  /* The marks are strokes, so they print as ink at the same weight as the
     rules. No icon on this page is a raster. */
  .ico { color: #000; width: 14px; height: 14px; vertical-align: -2px; }
  .gate .channels .val, .gate .channels a.val { font-size: 12px; color: #000;
    text-decoration: none; }
  .yourlist { padding: 0; max-width: none; }
  .sheet { break-inside: avoid; break-after: page; border-top: 2px solid #000; }
  .sheet:last-of-type { break-after: auto; }
  .signoff .lines { margin-top: .8rem; }
  .field { border-bottom: 2px solid #000; padding: 0 0 .6rem; }
  .field-in { display: block; }
  .field h1 { font-size: 15px; }
  .room { display: block; padding: 0; }
  .stage { padding: .8rem 0 0; min-height: 0; }
  body { font-size: 12.5px; background: #fff; }
  .gate { break-inside: avoid; border: 1px solid #000; background: #fff; padding: .7rem .8rem; }
  .gate .ease { font-size: 20px; }
  .gate a.go { background: none; color: #000; border: 1px solid #000; min-height: 0; padding: .3rem .5rem; }
  .gate a.go::after { content: " " attr(data-plain); font-family: monospace; font-size: 12px; word-break: break-all; }
  .signoff { display: block; margin-top: 1rem; border-top: 1px solid #000; padding-top: .6rem; }
  .signoff p { margin: 0 0 .2rem; font-family: var(--sans); font-size: 12px; }
  .signoff .lines { display: flex; gap: 1.4rem; margin-top: 1.1rem; }
  .signoff .lines div { flex: 1; border-top: 1px solid #000; padding-top: .2rem;
    font-size: 12px; font-family: var(--sans); }
}

/* ==============================================================
   PROMOTED FROM directions/directory/d5-blend.html
   Everything above is the blend as it was measured. Everything below is what
   the product adds back: the Sign of the Cross at the opening, the Sacred
   Host at the close, and the Latin register name under the wordmark.
   ============================================================== */

/* The Sign of the Cross, the name, and the register's Latin name: one
   centred stack, the mark above the words as it stands above a door. */
.wordmark { display: flex; flex-direction: column; gap: .3rem; align-items: center; }
.cross-mark { color: var(--gold); flex: none; }
.field h1 { margin: 0; }
.field .sub {
  margin: .1rem 0 0; font-family: var(--display); font-weight: 400;
  font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3); font-style: normal; text-indent: .22em;
}

/* The close answers the opening: the Host centred above the words, the way
   the cross stands centred above them at the top of the page. */
.colophon {
  border-top: 1px solid var(--rule); margin: 2.5rem auto 0;
  padding: 1.6rem 1.25rem 2.6rem; display: flex; flex-direction: column;
  gap: .9rem; align-items: center; text-align: center; max-width: 1240px;
}
.colophon .host-mark { color: var(--gold); flex: none; }
.colophon p { margin: 0 0 .5rem; font-size: var(--t-small); color: var(--ink-2); max-width: 54ch; }
.colophon .quiet { font-size: var(--t-micro); color: var(--ink-3); }
.colophon .latin {
  font-family: var(--display); font-weight: 400; font-size: var(--t-micro);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin: 0;
  text-indent: .2em;
}
@media (max-width: 700px) {
  .colophon { margin: 2rem auto 0; padding: 1.3rem 1rem 2rem; }
}
@media print {
  /* The rite closes on paper too: the Host is the last mark on the sheet,
     centred under the last line like a printer's device. */
  .colophon { display: flex; flex-direction: column; align-items: center;
    text-align: center; break-inside: avoid; border-top: 1px solid #000;
    margin: 1rem 0 0; padding: .6rem 0 0; gap: .4rem; }
  .colophon .host-mark { color: #000; }
  .colophon p, .colophon .latin { font-size: 12px; }
}