/* 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. */
.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:1px solid var(--m-rule);margin:0;padding:0;text-align:left;
  color:var(--m-ink);box-shadow:none;font-family:var(--m-sans);min-height:0}
.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-size:.84rem;font-weight:650;letter-spacing:.11em;
  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:22rem;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:1.2rem;margin-left:.4rem}
.ci-mast .ci-nav a{position:relative;display:inline-flex;align-items:center;min-height:34px;
  font-size:.82rem;font-weight:500;letter-spacing:.01em;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:600}
.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}
.ci-mast .ci-search{flex:1 1 8rem;min-width:7rem;max-width:16rem;margin-left:.35rem}
.ci-mast .ci-search input{width:100%;min-height:36px;padding:.4rem .95rem;
  border:1px solid var(--m-rule);border-radius:999px;background:var(--m-bg);
  color:var(--m-ink);font:inherit;font-size:.86rem;font-family:"EB Garamond",Georgia,serif}
.ci-mast .ci-search input::placeholder{color:var(--m-subtle)}
/* 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 input: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}

/* 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:.8rem;font-weight:500;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:.72rem;letter-spacing:.08em;white-space:normal;line-height:1.15}
  .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-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}
  .ci-mast .ci-subnav{justify-content:space-between;gap:0 .3rem;padding:0 .8rem}
  .ci-mast .ci-subnav a:last-child{margin-right:-.3rem}
  .ci-mast .ci-subnav a{font-size:max(.74rem,12px);min-height:44px}
}
@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}
}

/* 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}}