/* The site masthead. ONE head for every page: catholicintelligence.com wore
   seven on 2026-08-28 (the wire's, the essays', the old front door's, the
   cathedrals', the orders', the factbook's, and the record's), and the map was
   linked from none a stranger meets. Markup: functions/_lib/siteMasthead.ts.
   The same five sections in the same order everywhere; the page says which
   one it is with aria-current. Nothing here is set in the serif: chrome that
   competes with the record in its own typeface is what read as amateur.

   Every selector is scoped under .ci-mast / .ci-crumbs and the resets are not
   decorative: assets/record.css and the 1,444 pre-built /d/ pages still paint
   a bare `header` oxblood and centred, and canon.css / home.css still carry
   their retired heads' rules. The component defends itself.

   Tokens resolve through the page's own palette with the wire's and the
   record's names both honoured, and NONE falls back to --oxblood: the house
   accent is Marian blue on every page. */
/* The nameplate face. Declared here as well as in fonts.css (same family and
   src, so a page linking both loads it once): the factbook, orders and people
   pages link only this sheet, and a nameplate that falls back silently to
   Georgia on half the site is the drift this component exists to end. */
@font-face{
  font-family:'Cinzel';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/assets/fonts/cinzel-v26-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
.ci-mast,.ci-crumbs{
  --m-accent:var(--marian,var(--lapis,#27447e));
  --m-accent-deep:var(--marian-deep,#1b3160);
  --m-ink:var(--ink,var(--text,#232a3d));
  --m-muted:var(--ink-muted,var(--muted,var(--text-muted,#46506a)));
  --m-subtle:var(--ink-subtle,var(--faint,var(--text-subtle,#6a718a)));
  --m-ghost:var(--ink-ghost,var(--text-subtle,#8f94a6));
  --m-rule:var(--rule,#e2e1d8);
  --m-gold:var(--gold,#c0a054);
  --m-gold-deep:var(--gold-deep,var(--accent,#7d6420));
  --m-bg:var(--panel,var(--bg,var(--parchment,#faf9f5)));
  --m-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --m-wash:color-mix(in srgb,var(--m-ink) 7%,transparent);
}
.ci-mast{position:sticky;top:0;z-index:60;background:var(--m-bg);
  border-bottom:0;margin:0;padding:0;text-align:left;
  color:var(--m-ink);box-shadow:none;font-family:var(--m-sans);min-height:0}
/* The rule under the nameplate is an Oxford rule, thick over thin: 2px gold,
   a 3px light, a hairline. One border said "toolbar"; this says masthead. */
.ci-mast::after{content:"";display:block;height:6px;
  background:linear-gradient(to bottom,var(--m-gold) 0 2px,transparent 2px 5px,var(--m-rule) 5px 6px)}
.ci-mast.ci-mast--flow{position:static}
@supports (backdrop-filter:blur(1px)){
  .ci-mast{background:color-mix(in srgb,var(--m-bg) 86%,transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
.ci-mast .ci-mast-in{max-width:var(--mast-max,76rem);margin:0 auto;
  padding:.55rem clamp(1rem,2.5vw,2rem);
  display:flex;flex-wrap:nowrap;align-items:center;gap:.35rem 1rem;
  background:none;border:0;box-shadow:none}
.ci-mast .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Brand */
.ci-mast .ci-brand{display:flex;align-items:center;gap:.6rem;min-height:44px;
  text-decoration:none;min-width:0;flex:none;color:inherit}
.ci-mast .ci-rose{width:28px;height:28px;flex:none;color:var(--m-gold);display:block}
.ci-mast .ci-brand-text{display:flex;flex-direction:column;gap:.14rem;min-width:0}
.ci-mast .ci-wordmark{font-family:'Cinzel',Georgia,serif;font-size:1rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.1;white-space:nowrap;color:var(--m-accent)}
.ci-mast .ci-brand:hover .ci-wordmark{color:var(--m-gold-deep)}
.ci-mast .ci-wordmark-sub{font-size:max(.66rem,11px);font-weight:450;letter-spacing:.03em;
  line-height:1.25;color:var(--m-muted);text-transform:none;white-space:nowrap}
/* The wire keeps its psalm under the wordmark; each clause is its own line. */
.ci-mast .ci-wordmark-sub.ci-verse{font-family:"EB Garamond",Georgia,serif;
  font-style:italic;font-size:.76rem;letter-spacing:0;max-width:19rem;white-space:normal}
.ci-mast .ci-verse .verse{display:block;font-size:inherit}
.ci-mast .ci-verse span{display:block}
.ci-mast .ci-verse i{margin-left:.4rem;font-style:normal;font-family:var(--m-sans);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--m-gold-deep);white-space:nowrap}
/* Sections: five words, one weight, the current one underlined in gold. */
.ci-mast .ci-nav{display:flex;align-items:center;gap:1rem;margin-left:.3rem}
.ci-mast .ci-nav a{position:relative;display:inline-flex;align-items:center;min-height:34px;
  font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;color:var(--m-muted);padding:0;border:0;transition:color 150ms ease}
.ci-mast .ci-nav a:hover{color:var(--m-accent)}
.ci-mast .ci-nav a[aria-current="page"]{color:var(--m-accent);font-weight:700}
.ci-mast .ci-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;
  bottom:2px;height:2px;border-radius:2px;background:var(--m-gold)}
/* Tools: search, language, theme, account. One grammar: every quiet control
   is the same text button with a soft wash on hover; Join is the ONE filled
   pill, the door a stranger must find. */
/* DOM order is brand, sections, tools, search at every width, and the phone
   places them with grid areas, never `order`: focus never jumps back across
   the bar. The search field ends the row, as it did on the wire before. */
.ci-mast .ci-tools{display:flex;align-items:center;gap:.2rem;flex:none;margin-left:auto;min-width:0}
/* The search field. It was a bare pill in the serif whose placeholder
   truncated at "Search headlin" on a 1280 desk, which is the single control
   Tom named as amateur. Composed now: a soft-rect field on a faint wash, a
   glass glyph, a "/" keycap that says the shortcut (account.js binds it),
   and the placeholder in the chrome's own sans. The pill is reserved for
   Join, the one door. */
.ci-mast .ci-search{flex:1 1 13rem;min-width:12.5rem;max-width:18rem;margin-left:.35rem}
.ci-mast .ci-search label{position:relative;display:block}
.ci-mast .ci-search-ico{position:absolute;left:.72rem;top:50%;translate:0 -50%;
  width:14px;height:14px;color:var(--m-subtle);pointer-events:none}
.ci-mast .ci-search input{width:100%;min-height:36px;padding:.4rem 2.2rem .4rem 2.15rem;
  border:1px solid var(--m-rule);border-radius:9px;
  background:color-mix(in srgb,var(--m-ink) 4%,var(--m-bg));
  color:var(--m-ink);font:450 .82rem/1.3 var(--m-sans);letter-spacing:.01em;
  text-overflow:ellipsis;transition:border-color 150ms ease,background 150ms ease}
.ci-mast .ci-search input:hover{border-color:color-mix(in srgb,var(--m-gold) 60%,var(--m-rule))}
.ci-mast .ci-search input::placeholder{color:var(--m-subtle);opacity:1}
.ci-mast .ci-search-key{position:absolute;right:.55rem;top:50%;translate:0 -50%;
  min-width:1.35rem;padding:.08rem .3rem;border:1px solid var(--m-rule);border-bottom-width:2px;
  border-radius:5px;background:var(--m-bg);color:var(--m-ghost);text-align:center;
  font:600 11px/1.3 var(--m-sans);pointer-events:none}
.ci-mast .ci-search input:focus-visible~.ci-search-key,
.ci-mast .ci-search input:not(:placeholder-shown)~.ci-search-key{display:none}
/* Editions follow the tools, as the search does: a quiet control at the end
   of the row on a desk, its own row on a phone. */
.ci-mast .ci-lang{display:inline-flex;align-items:center;gap:.15rem;flex:none;margin-left:.35rem;font-size:.76rem;color:var(--m-ghost)}
.ci-mast .ci-lang-pick{flex:none;margin-left:.35rem}
.ci-mast .ci-lang a{display:inline-flex;align-items:center;min-height:34px;padding:0 .3rem;
  border-radius:999px;text-decoration:none;color:var(--m-muted)}
.ci-mast .ci-lang a:hover{color:var(--m-accent);background:var(--m-wash)}
.ci-mast .ci-lang a[aria-current]{color:var(--m-accent);font-weight:650}
.ci-mast .ci-lang-select{min-height:34px;padding:.2rem 1.6rem .2rem .6rem;border:1px solid transparent;
  border-radius:999px;background:transparent;color:var(--m-muted);font:500 .8rem var(--m-sans);
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238f94a6' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat;background-position:right .55rem center}
.ci-mast .ci-lang-select:hover{color:var(--m-accent);background-color:var(--m-wash)}
.ci-mast .ci-theme{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:36px;min-height:36px;padding:0;border:1px solid transparent;border-radius:999px;
  background:transparent;color:var(--m-muted);cursor:pointer;font:500 .8rem var(--m-sans);line-height:1}
.ci-mast .ci-theme svg{width:17px;height:17px;display:block}
.ci-mast .ci-theme:hover{color:var(--m-accent);background:var(--m-wash)}
.ci-mast .account{display:inline-flex;align-items:center;gap:.15rem;flex:none;
  margin-left:.25rem;padding-left:.45rem;border-left:1px solid var(--m-rule)}
.ci-mast .account a,.ci-mast .account button{display:inline-flex;align-items:center;min-height:34px;
  padding:.3rem .6rem;border:1px solid transparent;border-radius:999px;background:transparent;
  color:var(--m-muted);cursor:pointer;font:500 .8rem var(--m-sans);letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;transition:color 150ms ease,background 150ms ease}
.ci-mast .account a:hover,.ci-mast .account button:hover{color:var(--m-accent);background:var(--m-wash)}
.ci-mast .account .acct-who{max-width:11rem;overflow:hidden;text-overflow:ellipsis;color:var(--m-accent)}
.ci-mast .account .acct-admin{color:var(--m-gold-deep);font-weight:600}
.ci-mast .account .acct-join{padding:.3rem .95rem;background:var(--m-accent);color:var(--m-bg);font-weight:600}
.ci-mast .account .acct-join:hover{background:var(--m-accent-deep);color:var(--m-bg)}
.ci-mast .account button[disabled]{opacity:.6;cursor:progress}
.ci-mast a:focus-visible,.ci-mast button:focus-visible,
.ci-mast select:focus-visible,.ci-crumbs a:focus-visible{
  outline:2px solid var(--m-accent);outline-offset:2px;box-shadow:0 0 0 5px color-mix(in srgb,var(--m-gold) 45%,transparent);border-radius:999px}
.ci-mast input:focus-visible{outline:2px solid var(--m-accent);outline-offset:2px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--m-gold) 45%,transparent);border-radius:9px;border-color:var(--m-accent)}

/* Below 64rem the five sections cannot share the bar with the tools. They get
   a rail of their own rather than vanishing: the whole menu exists at every
   width, which is the one thing every retired head failed at on a phone. */
.ci-mast .ci-subnav{display:none}
@media (max-width:64rem){
  /* Pinned only while it is one row. Three rows (brand, search, sections)
     pinned over a 624px laptop viewport hid a fifth of the page and put
     story titles under the bar for axe. */
  .ci-mast{position:static}
  .ci-mast .ci-mast-in{flex-wrap:wrap}
  .ci-mast .ci-nav{display:none}
  .ci-mast .ci-subnav{display:flex;flex-wrap:wrap;justify-content:flex-start;
    gap:0 1.5rem;max-width:var(--mast-max,76rem);margin:0 auto;padding:0 clamp(1rem,2.5vw,2rem) .15rem}
  .ci-mast .ci-subnav a{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 .3rem;
    font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border:0;white-space:nowrap;color:var(--m-muted)}
  .ci-mast .ci-subnav a:hover{color:var(--m-accent)}
  .ci-mast .ci-subnav a[aria-current="page"]{color:var(--m-accent);font-weight:600}
  .ci-mast .ci-subnav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;
    bottom:4px;height:2px;border-radius:2px;background:var(--m-gold)}
  .ci-mast .ci-subnav a:first-child{margin-left:-.3rem}
  .ci-mast .ci-wordmark-sub.ci-verse{display:none}
  /* The search field takes a full row of its own once the sections have left
     the bar; it is a full-width control on every width below the laptop. */
  .ci-mast .ci-search{flex:1 1 100%;max-width:none;margin:.1rem 0 0}
}
/* Phones: the brand and the tools share the first row, the sections rail is
   the second, and the wire's search field is a third of its own. Nothing is
   smaller than 40px tall; touch.css floors inputs at 44. */
@media (max-width:40rem){
  /* Grid placement, not `order`: brand|tools on the first row, the search
     field on the second, which is also DOM order. */
  .ci-mast .ci-mast-in{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:.2rem .4rem;padding:.3rem .8rem 0}
  .ci-mast .ci-brand{grid-row:1;grid-column:1;gap:.45rem}
  .ci-mast .ci-tools{grid-row:1;grid-column:2}
  .ci-mast .ci-rose{width:24px;height:24px}
  .ci-mast .ci-wordmark{font-size:.8rem;letter-spacing:.09em;white-space:normal;line-height:1.2}
  .ci-mast .ci-wordmark-sub{display:none}
  .ci-mast .ci-tools{gap:0;margin-left:0}
  .ci-mast .ci-search{grid-row:2;grid-column:1 / -1;max-width:none;margin:.15rem 0 .1rem}
  .ci-mast .ci-search input{font-size:16px;font-family:var(--m-sans)}
  .ci-mast .ci-search-key{display:none}
  .ci-mast .ci-lang{grid-row:2;grid-column:1 / -1;margin:0;justify-self:start}
  .ci-mast .ci-lang-pick{grid-row:2;grid-column:1 / -1;margin:.1rem 0 0 -.4rem;justify-self:start}
  .ci-mast .ci-search{grid-row:3}
  .ci-mast .ci-lang-select{padding-left:.4rem;font-size:max(.74rem,12px)}
  .ci-mast .ci-theme{width:40px;min-height:40px}
  .ci-mast .account{margin-left:0;padding-left:0;border-left:0}
  .ci-mast .account a,.ci-mast .account button{min-height:40px;padding:.25rem .45rem;font-size:max(.74rem,12px)}
  .ci-mast .account .acct-who{max-width:7rem}
  .ci-mast .account .acct-join{padding:.2rem .8rem;margin-left:.15rem}
  /* One swipeable row, the same ribbon the wire's editions use. Uppercase
     made five sections wider than 390px and the rail wrapped DEVELOPERS onto
     a second line of chrome; the menu still exists in full, it scrolls. */
  .ci-mast .ci-subnav{flex-wrap:nowrap;justify-content:flex-start;gap:0 1.1rem;padding:0 .8rem;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 1.4rem),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 1.4rem),transparent)}
  .ci-mast .ci-subnav::-webkit-scrollbar{display:none}
  .ci-mast .ci-subnav a{font-size:max(.7rem,12px);min-height:44px;flex:none}
}
@media (max-width:23rem){.ci-mast .ci-subnav a{font-size:max(.7rem,11px);letter-spacing:0}}
@media (pointer:coarse){
  .ci-mast .ci-nav a,.ci-mast .ci-subnav a,.ci-mast .ci-lang a,.ci-mast .account a,.ci-mast .account button{min-height:44px}
  .ci-mast .ci-theme{width:44px;min-height:44px}
  .ci-mast .ci-search-key{display:none}
}

/* Breadcrumb rail. Outside .ci-mast on purpose: the sticky element stays one
   row tall, and the trail scrolls away with the page it describes. */
.ci-crumbs{max-width:var(--crumb-max,76rem);margin:0 auto;
  padding:.85rem var(--crumb-pad,clamp(1rem,2.5vw,2rem)) 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 .1rem;
  font-family:var(--m-sans);font-size:.75rem;line-height:1.5;color:var(--m-subtle)}
.ci-crumbs a{color:var(--m-muted);text-decoration:none;padding:.15rem 0}
.ci-crumbs a:hover{color:var(--m-accent);text-decoration:underline;text-underline-offset:3px}
.ci-crumbs .ci-crumb-sep{padding:0 .5rem;color:var(--m-ghost)}
.ci-crumbs [aria-current="page"]{color:var(--m-ink);font-weight:550}
@media (pointer:coarse){.ci-crumbs a{display:inline-flex;align-items:center;min-height:44px}}