/* === Catholic Intelligence: the public front door ===========================

   One authoritative stylesheet for the anonymous homepage. Everything here is
   scoped to `body.public-home:not(.has-workbench)` wherever it touches a class
   the member workbench also uses (.card, .motto, .motto-en, .actions, ...), so
   the signed-in library at assets/register-intelligence.css is untouched.

   The design: two faces and no third. Garamond carries every sentence; Cinzel,
   tracked and in capitals, carries every LABEL -- the masthead, the sections,
   the day above the plate. There is deliberately no UI sans: a system
   -apple-system stack in the navigation was the one thing on the page that
   announced a web product rather than an ecclesial review, and it is gone.
   Measured lines, square edges, little shadow, one Marian palette day and night.

   Tokens (--bg, --ink, --gold, ...) come from the inline <style> in index.html
   and follow the three-way theme (auto / light / dark).
   ========================================================================= */

/* ---- The Marian palette -------------------------------------------------
   Day: ivory linen, ink of deep lapis, ornament in quiet antique gold.
   Night: the mantle: midnight lapis ground, starlight gold, moonlit blue.
   Scoped to the anonymous face only; the member workbench keeps the root
   tokens from index.html untouched. ---------------------------------------- */

body.public-home:not(.has-workbench) {
  --hp-wash: radial-gradient(60% 34rem at 50% 0%, rgba(39, 68, 126, 0.055), transparent 70%),
             radial-gradient(42% 26rem at 82% 0%, rgba(168, 134, 47, 0.07), transparent 70%);
  --hp-gutter: clamp(1.25rem, 5vw, 3rem);
  --hp-max: 78rem;
  --hp-text: 68rem;
  /* The reading measure. 40rem ran to 87 characters at 1280px, past the 45 to
     75 that sustained reading wants; the root font-size here is 18px, so a rem
     buys more line than it looks like it should. 33rem measures ~72. */
  --hp-reading: 33rem;
  /* Two faces, and no --hp-sans. There was one, and it set the masthead, the
     account control, the search results and the footer; a UI sans is what made
     a page of Garamond and Cinzel read as a web product with an ecclesial skin
     on it. Every one of those surfaces now takes the serif if it is a sentence
     and the display face if it is a label. */
  --hp-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --hp-display: "Cinzel", Georgia, serif;

  --marian: #27447e;
  --marian-deep: #1b3160;
  --marian-soft: #51699c;

  --bg: #faf9f5;
  --card: #ffffff;
  --card-warm: #f3f2ec;
  --card-inset: #edece2;
  --rule: #e2e1d8;
  --rule-strong: #c6c5b6;
  --ink: #232a3d;
  --ink-muted: #46506a;
  --ink-subtle: #697188;
  --ink-ghost: #6b7085;
  --gold: #a8862f;
  --gold-bright: #c3a04a;
  --gold-deep: #7d6420;
  --field-focus: rgba(39, 68, 126, 0.28);

  --hp-gold-text: var(--gold-deep);
  --hp-shadow: 0 1px 2px rgba(35, 42, 61, 0.04), 0 12px 32px rgba(35, 42, 61, 0.06);
  --hp-shadow-lift: 0 2px 4px rgba(35, 42, 61, 0.06), 0 16px 40px rgba(35, 42, 61, 0.1);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.public-home:not(.has-workbench) {
    --hp-wash: radial-gradient(60% 34rem at 50% 0%, rgba(143, 176, 232, 0.06), transparent 70%),
               radial-gradient(42% 26rem at 82% 0%, rgba(216, 186, 106, 0.055), transparent 70%);
    --marian: #8fb0e8;
    --marian-deep: #a9c2ee;
    --marian-soft: #6f8cc0;
    --bg: #0f1420;
    --card: #141a2a;
    --card-warm: #192134;
    --card-inset: #1e2740;
    --rule: #26304a;
    --rule-strong: #394668;
    --ink: #e7e4d8;
    --ink-muted: #b6b8c8;
    --ink-subtle: #9298b0;
    --ink-ghost: #7d8299;
    --gold: #d8ba6a;
    --gold-bright: #e5cc85;
    --gold-deep: #b39440;
    --field-focus: rgba(143, 176, 232, 0.35);
    --hp-gold-text: var(--gold);
    --hp-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.24);
    --hp-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.25), 0 16px 40px rgba(0, 0, 0, 0.32);
  }
}
html[data-theme="dark"] body.public-home:not(.has-workbench) {
  --hp-wash: radial-gradient(60% 34rem at 50% 0%, rgba(143, 176, 232, 0.06), transparent 70%),
             radial-gradient(42% 26rem at 82% 0%, rgba(216, 186, 106, 0.055), transparent 70%);
  --marian: #8fb0e8;
  --marian-deep: #a9c2ee;
  --marian-soft: #6f8cc0;
  --bg: #0f1420;
  --card: #141a2a;
  --card-warm: #192134;
  --card-inset: #1e2740;
  --rule: #26304a;
  --rule-strong: #394668;
  --ink: #e7e4d8;
  --ink-muted: #b6b8c8;
  --ink-subtle: #9298b0;
  --ink-ghost: #7d8299;
  --gold: #d8ba6a;
  --gold-bright: #e5cc85;
  --gold-deep: #b39440;
  --field-focus: rgba(143, 176, 232, 0.35);
  --hp-gold-text: var(--gold);
  --hp-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.24);
  --hp-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.25), 0 16px 40px rgba(0, 0, 0, 0.32);
}
/* The html element paints the overscroll area; follow the body's ground. */
html:has(body.public-home:not(.has-workbench)) { background: #faf9f5; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]):has(body.public-home:not(.has-workbench)) { background: #0f1420; }
}
html[data-theme="dark"]:has(body.public-home:not(.has-workbench)) { background: #0f1420; }

body.public-home:not(.has-workbench) ::selection { background: var(--marian); color: #ffffff; }

/* ---- Page frame --------------------------------------------------------- */

body.public-home:not(.has-workbench) {
  display: block;
  padding: 0 0 4rem;
  background-image: var(--hp-wash);
  background-repeat: no-repeat;
  font-family: var(--hp-serif);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}

body.public-home:not(.has-workbench) .wrap,
body.public-home:not(.has-workbench) .wrap.wide {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

body.public-home:not(.has-workbench) .card {
  max-width: none;
  margin: 0;
  padding: 0 var(--hp-gutter);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  overflow: visible;
}

/* Elements the workbench needs in the DOM but the front door does not show. */
body.public-home:not(.has-workbench) .rule,
body.public-home:not(.has-workbench) .colophon { display: none; }

/* ---- Masthead ----------------------------------------------------------- */

.hp-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
@supports (backdrop-filter: blur(1px)) {
  body.public-home:not(.has-workbench) .hp-topbar {
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
body.has-workbench .hp-topbar { margin-bottom: 1rem; position: static; }

.hp-topbar-in {
  max-width: var(--hp-max, 76rem);
  margin: 0 auto;
  padding: 0.6rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  /* Wrap is the graceful failure everywhere: a width where the account and
     the toggle cannot share the brand's line drops them to a second row
     instead of pushing the toggle off the right edge. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
}

.hp-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}
.hp-brand .home-rose {
  width: 28px;
  height: 28px;
  flex: none;
  opacity: 0.95;
}
.hp-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  min-width: 0;
}
.hp-brand .wordmark {
  display: block;
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--marian);
}
.hp-brand:hover .wordmark { color: var(--hp-gold-text, var(--gold-deep)); }
.hp-brand .wordmark-sub {
  display: block;
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 0.69rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.015em;
  text-transform: none;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink-subtle);
}
@media (max-width: 40rem) {
  .hp-brand .wordmark-sub { display: none; }
  .hp-brand .wordmark { font-size: 0.74rem; letter-spacing: 0.06em; }
}
/* Below 40rem the wordmark, the nav and the theme toggle cannot reliably
   share one line. Two deliberate rows, never three: the brand takes the
   first, and the second is a single control rail: the theme toggle seated
   left, the account seated right. `order` moves the toggle ahead of the nav
   without touching the DOM, so real phones whose fonts render a shade wider
   than headless cannot wrap it to a third row. */
@media (max-width: 40rem) {
  .hp-topbar-in {
    gap: 0 0.75rem;
    padding-top: 0.6rem;
    padding-bottom: 0.4rem;
  }
  .hp-brand { flex: 1 0 100%; margin-right: 0; }
  body.public-home .theme-toggle,
  body.has-workbench .theme-toggle {
    order: 1;
    margin-right: auto;
  }
  .hp-nav { order: 2; }
}

/* The section links, below the width where the bar can hold them. They get
   their own rail under the account row rather than vanishing: the whole menu
   exists at every screen size. Hidden >=64rem where the bar carries them. */
.hp-subnav { display: none; }
@media (max-width: 64rem) {
  .hp-subnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.6rem;
    max-width: var(--hp-max, 76rem);
    margin: 0 auto;
    padding: 0 1rem 0.25rem;
  }
  .hp-subnav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--hp-display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
    white-space: nowrap;
  }
  .hp-subnav a:hover { color: var(--marian); }
}
/* Phones: one line, always. The links spread across the full rail
   (space-between absorbs the width variance of real device fonts). */
@media (max-width: 40rem) {
  .hp-subnav {
    justify-content: space-between;
    gap: 0;
    padding: 0 clamp(1rem, 4vw, 2.5rem) 0.2rem;
  }
  .hp-subnav a { font-size: 0.74rem; }
}
@media (max-width: 23rem) {
  .hp-subnav a { font-size: 0.7rem; letter-spacing: 0; }
}

.hp-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}
.hp-nav a {
  font-family: var(--hp-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease;
}
.hp-nav a:hover { color: var(--marian); }
/* 64rem: brand + full nav + toggle need the room before the toggle clears
   the right edge. Below that, drop the wide links rather than spill. */
@media (max-width: 64rem) {
  .hp-nav .hp-nav-wide { display: none; }
}
@media (max-width: 30rem) {
  .hp-nav { gap: 0.8rem; }
  .hp-nav a { font-size: 0.64rem; letter-spacing: 0.1em; }
}

/* The toggle lives in the bar, a quiet pill. */
body.public-home .theme-toggle,
body.has-workbench .theme-toggle {
  position: static;
  top: auto;
  right: auto;
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-subtle);
  font-family: var(--hp-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: none;
  transition: color 150ms ease, border-color 150ms ease;
}
body.public-home .theme-toggle:hover,
body.has-workbench .theme-toggle:hover { border-color: var(--marian-soft); color: var(--marian); }

/* Account control in the front-door bar. State filled per browser by
   assets/account.js; the homepage is static and cacheable, so the markup
   ships signed-out and is upgraded, never server-rendered. */
.hp-nav .account { display: inline-flex; align-items: center; gap: 0.5rem; }
.hp-nav .account a,
.hp-nav .account button {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0.38rem 0.9rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-muted); cursor: pointer;
  font-family: var(--hp-display);
  font-size: 0.66rem; font-weight: 650;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.hp-nav .account a:hover,
.hp-nav .account button:hover { color: var(--marian); }
.hp-nav .account .acct-join,
.hp-nav .account .acct-out {
  background: var(--marian); color: var(--bg); font-weight: 600;
}
.hp-nav .account .acct-join:hover,
.hp-nav .account .acct-out:hover { background: var(--marian-deep); color: var(--bg); }
.hp-nav .account .acct-who {
  max-width: 10rem; overflow: hidden; text-overflow: ellipsis;
  color: var(--hp-gold-text, var(--gold-deep));
  font-family: "EB Garamond", Georgia, serif;
  font-size: 0.88rem; letter-spacing: 0.01em; text-transform: none;
}
.hp-nav .account button[disabled] { opacity: 0.6; cursor: progress; }
@media (pointer: coarse) {
  .hp-nav .account a, .hp-nav .account button { min-height: 44px; }
}

/* ---- Hero: the word ----------------------------------------------------- */

body.public-home:not(.has-workbench) .home-copy > .hp-hero,
body.public-home:not(.has-workbench) .archive-search {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hp-hero {
  padding-top: 0;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

/* The J.M.J. sits above the card in the DOM; it opens the hero, so it
   carries the hero's crown of space. */
body.public-home:not(.has-workbench) .jmj {
  display: block;
  margin: 0 0 1.1rem;
  padding-top: clamp(3rem, 8vw, 5.5rem);
  font-family: var(--hp-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.55em;
  text-indent: 0.55em; /* recenters the tracked line */
  color: var(--ink-ghost);
  text-align: center;
  line-height: 1;
}

.hp-hero-rose {
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 auto clamp(1.35rem, 3vw, 1.8rem);
  opacity: 0.84;
}

body.public-home:not(.has-workbench) .motto {
  max-width: 46rem;
  margin: 0 auto 1.25rem;
  font-family: var(--hp-serif);
  /* Upright, not italic. The italic was right while this line was a quotation
     from Matthew 5; it is now a plain statement of what the register is for,
     and a statement set in display italic reads as someone else's words. */
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.35rem, 6.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}

body.public-home:not(.has-workbench) .motto-en {
  max-width: 38rem;
  margin: 0 auto;
  font-family: var(--hp-serif);
  font-size: clamp(1.12rem, 1.8vw, 1.28rem);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  text-wrap: pretty;
}

@media (max-width: 34rem) {
  body.public-home:not(.has-workbench) .jmj { padding-top: 2rem; }
  .hp-hero { margin-bottom: 1.4rem; }
  .hp-hero-rose { width: 46px; height: 46px; margin-bottom: 1rem; }
  body.public-home:not(.has-workbench) .motto { font-size: clamp(2.15rem, 11vw, 2.85rem); }
  body.public-home:not(.has-workbench) .motto-en { font-size: 1.08rem; line-height: 1.58; }
}

/* ---- The search --------------------------------------------------------- */

body.public-home:not(.has-workbench) .archive-search { margin-top: 0; }
body.public-home:not(.has-workbench) .archive-search .search-field { position: relative; }
body.public-home:not(.has-workbench) .search-icon {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--ink-ghost);
  pointer-events: none;
}
body.public-home:not(.has-workbench) .archive-search input[type="search"] {
  min-height: 60px;
  padding: 0.95rem 1.5rem 0.95rem 3rem;
  text-align: left;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--card);
  font-family: var(--hp-serif);
  font-size: 1.12rem;
  box-shadow: 0 1px 2px rgba(35, 42, 61, 0.04), 0 8px 24px rgba(35, 42, 61, 0.045);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.public-home:not(.has-workbench) .archive-search input[type="search"]::placeholder {
  color: var(--ink-ghost);
  font-style: italic;
}
body.public-home:not(.has-workbench) .archive-search input[type="search"]:focus {
  outline: none;
  border-color: var(--marian-soft);
  box-shadow: 0 0 0 4px var(--field-focus), var(--hp-shadow);
}

/* The results become an overlay panel instead of pushing the page down. */
body.public-home:not(.has-workbench) .archive-search .search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.55rem);
  z-index: 40;
  margin: 0;
  max-height: 26rem;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  box-shadow: var(--hp-shadow-lift);
  text-align: left;
}
body.public-home:not(.has-workbench) .archive-search .search-group-label {
  padding: 0.75rem 1.15rem 0.3rem;
  font-family: var(--hp-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marian);
}
body.public-home:not(.has-workbench) .archive-search a.search-hit { padding: 0.6rem 1.15rem; border-left: 2px solid transparent; }
body.public-home:not(.has-workbench) .archive-search a.search-hit:hover,
body.public-home:not(.has-workbench) .archive-search a.search-hit.is-active {
  background: var(--card-warm);
  border-left-color: var(--marian);
}
body.public-home:not(.has-workbench) .archive-search .hit-badge {
  font-family: var(--hp-display);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-gold-text, var(--gold-deep));
}
body.public-home:not(.has-workbench) .archive-search .hit-meta {
  font-family: var(--hp-serif);
  font-size: 0.92rem;
  font-style: normal;
  color: var(--ink-subtle);
}
body.public-home:not(.has-workbench) .archive-search .hit-mass { color: var(--hp-gold-text, var(--gold-deep)); font-size: 0.74rem; }
body.public-home:not(.has-workbench) .archive-search .search-status {
  font-family: var(--hp-serif);
  font-size: 0.94rem;
  font-style: italic;
  color: var(--ink-subtle);
  text-align: center;
}

/* ---- The day's plate ------------------------------------------------------
   A public-domain painting mounted beneath the search, with the day it belongs
   to named under it. A plate in a book, not a hero image: the frame is a warm
   inset with a hairline in the day's liturgical colour, and the picture is
   CONTAINED, never cropped. An altarpiece cropped to a banner cuts through
   faces, and the whole point of choosing a work for a feast is that it can be
   looked at.

   The frame's height is fixed rather than derived from the picture, so a tall
   Assumption and a wide Adoration occupy the same space and the page does not
   move when the plate arrives. -------------------------------------------- */

.hp-plate {
  --plate-colour: var(--gold);
  max-width: 46rem;
  margin: clamp(2.75rem, 6vw, 4rem) auto 0;
  text-align: center;
}
/* The section is announced to a screen reader and drawn for nobody else: the
   caption beneath the picture says all of this again, in the page's own voice,
   and a visible heading here would only repeat it. */
.hp-plate-hd {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hp-plate-fig { margin: 0; }

/* A DAY WITH NO PLATE IS STILL A DAY. The rota substitutes nothing when no
   public-domain work matches the day's Gospel, which is most days, so the
   frame is removed rather than left standing empty and the caption becomes
   the whole section: the celebration, the Gospel, and the hour being prayed,
   set under a hairline in the day's own liturgical colour. */
.hp-plate[data-plate-art="none"] .hp-plate-frame { display: none; }
.hp-plate[data-plate-art="none"] .hp-plate-cap {
  margin-top: 0;
  padding-top: clamp(1rem, 2.4vw, 1.4rem);
  border-top: 2px solid var(--plate-colour);
}

/* THE MOUNT TAKES THE SHAPE OF THE WORK. Two custom properties do it, both set
   by the fill script from dimensions the manifest already carries: --plate-ratio
   as a CSS ratio and --plate-aspect as the same number, because `aspect-ratio`
   needs the first and `calc()` needs the second.

   width = min(what there is, how wide this work would be at full height)

   so the mount is as tall as it is allowed to be and no wider than the picture,
   and on a phone, where the width runs out first, the HEIGHT gives way instead
   of the picture floating in bands of empty board. The shape is known before a
   byte of the image arrives, so nothing reflows when it does. */
.hp-plate-frame {
  --plate-h: clamp(19rem, 54vh, 30rem);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  aspect-ratio: var(--plate-ratio, 3 / 4);
  width: min(100%, calc(var(--plate-h) * var(--plate-aspect, 0.75)));
  height: auto;
  max-height: var(--plate-h);
  padding: 0.6rem;
  background: var(--card-warm);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--plate-colour);
  border-radius: 4px;
  overflow: hidden;
}
.hp-plate-img {
  /* The mount is already the picture's shape, so the picture fills it.
     `contain` is the belt: it absorbs the fraction of a percent the mount's
     padding costs the ratio, and it means a manifest whose dimensions ever
     disagreed with the file would letterbox rather than stretch a face. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The mount, not a drop shadow: a hairline and a little lift, as a print sits
     on a board. */
  box-shadow: 0 1px 2px rgba(35, 42, 61, 0.14), 0 10px 26px rgba(35, 42, 61, 0.13);
}
/* At night the board is dark, so the lift has to come from a darker shadow and
   a faint warm edge rather than from grey. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .hp-plate-img {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.45);
  }
}
html[data-theme="dark"] .hp-plate-img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.45);
}

.hp-plate-cap {
  margin: clamp(0.9rem, 2vw, 1.25rem) auto 0;
  max-width: 40rem;
  /* A little air of its own, so no line ever runs to the edge of the screen
     even when the page gutter is at its narrowest. */
  padding: 0 0.5rem;
  text-wrap: pretty;
}
.hp-plate-day {
  margin: 0 0 0.4rem;
  font-family: var(--hp-display);
  /* 0.7rem is 11.2px, the floor tests/publicSurfaceDesign.audit.mjs enforces.
     These two lines sat at 0.66 and 0.6, and at 0.58 and 0.54 on mobile, where
     they rendered at 10.44px and 9.72px: the liturgical date and the picture
     credit, both wide-tracked display type, which is the hardest kind to read
     small. */
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp-gold-text, var(--gold-deep));
  /* Tracked capitals run long. "Wednesday, 12 August · Ordinary Time" is fine
     on a laptop and two lines on a phone; balance keeps the second line from
     being one orphaned word. */
  text-wrap: balance;
}
.hp-plate-title {
  margin: 0;
  font-family: var(--hp-serif);
  font-size: clamp(1.28rem, 2.6vw, 1.6rem);
  line-height: 1.24;
  color: var(--ink);
  text-wrap: balance;
}
.hp-plate-also {
  margin: 0.45rem 0 0;
  font-family: var(--hp-serif);
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-muted);
}
.hp-plate-gospel {
  margin: 0.65rem 0 0;
  font-family: var(--hp-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-gold-text, var(--gold-deep));
}
/* The Hours. Set in the same tracked capitals as the Gospel line above it,
   because they are the same kind of fact about the day, and given the gold
   only on the link so that the sentence reads as one line with one door in
   it rather than as a banner. */
.hp-plate-hours {
  margin: 0.3rem 0 0;
  font-family: var(--hp-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.hp-plate-hours a {
  color: var(--hp-gold-text, var(--gold-deep));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  /* The underline sits off the capitals rather than through them. */
  padding-bottom: 0.1em;
}
.hp-plate-hours a:hover,
.hp-plate-hours a:focus-visible { color: var(--ink); }

.hp-plate-work {
  margin: 0.55rem 0 0;
  font-family: var(--hp-serif);
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.hp-plate-where {
  margin: 0.1rem 0 0;
  font-family: var(--hp-serif);
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-subtle);
  text-wrap: balance;
}
@media (max-width: 44rem) {
  .hp-plate-frame { --plate-h: clamp(15rem, 48vh, 22rem); }
  /* Tracked capitals are the first thing to break a narrow line. Tightened,
     "THURSDAY, 13 AUGUST · ORDINARY TIME" holds one line at 390px instead of
     wrapping and starting the second with an orphaned separator. */
  .hp-plate-day { font-size: 0.7rem; letter-spacing: 0.13em; }
  /* The attribution is the longest unbroken line in the caption -- an artist,
     a title and a date, joined -- and at full size it filled a 390px screen
     kerb to kerb. */
  .hp-plate-work,
  .hp-plate-where,
  .hp-plate-also { font-size: 0.9rem; }
  .hp-plate-gospel,
  .hp-plate-hours { font-size: 0.7rem; letter-spacing: 0.09em; }
  .hp-plate-title { font-size: 1.22rem; }
}

/* The workbench is a different room and keeps none of this. */
body.has-workbench .hp-plate { display: none !important; }

/* ---- This day in the Church ---------------------------------------------
   A working section: heading on the left, the door to Catholic News on the
   right, the two columns as quiet cards beneath. ---------------------------- */

.hp-news {
  max-width: var(--hp-text, 64rem);
  margin: clamp(3.5rem, 8vw, 5.25rem) auto 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1rem;
  text-align: left;
}
.hp-news-hd {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 1.15rem;
  font-family: var(--hp-serif);
  font-size: clamp(1.65rem, 3vw, 2.05rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--ink);
}
.hp-news-hd::after { content: none; }
.hp-news-more {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 0.84rem;
  font-style: normal;
  text-align: right;
}
.hp-news-more a {
  font-family: var(--hp-serif);
  font-style: italic;
  font-size: 1rem;
  font-weight: 500;
  color: var(--marian);
  text-decoration: none;
  border: 0;
  white-space: nowrap;
}
.hp-news-more a::after { content: " \2192"; }
.hp-news-more a:hover { color: var(--marian-deep); text-decoration: underline; text-underline-offset: 3px; }
.hp-news-cols {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
}
/* Phones: the heading and the door cannot share a row; let the section flow
   and the door close it from beneath the columns. */
@media (max-width: 44rem) {
  .hp-news { display: block; }
  .hp-news-more { margin-top: 1.1rem; text-align: left; }
}
@media (min-width: 44rem) {
  .hp-news-cols { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.hp-news-col {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--marian-soft);
  border-radius: 4px;
  padding: 1.2rem 1.4rem 0.95rem;
  box-shadow: none;
}
.hp-news-col h3 {
  margin: 0 0 0.5rem;
  font-family: var(--hp-display);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hp-gold-text, var(--gold-deep));
}
.hp-news-col ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hp-news-col li { border-top: 1px solid var(--rule); }
.hp-news-col li:first-child { border-top: 0; }
.hp-news-col a {
  display: block;
  padding: 0.6rem 0 0.65rem;
  text-decoration: none;
}
.hp-news-headline {
  display: block;
  font-family: var(--hp-serif);
  font-size: 1.1rem;
  line-height: 1.38;
  color: var(--ink);
  transition: color 150ms ease;
  /* A headline is DATA, not copy we wrote: it arrives from the wire in 37
     languages and can carry a single unbroken token longer than the column --
     a German compound, a URL a publisher left in a title. Prose wrapping alone
     lets that push the card past the page and give the whole front door a
     horizontal scrollbar. `pretty` for the ordinary case, `anywhere` as the
     floor so nothing can ever exceed its column. */
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.hp-news-col a:hover .hp-news-headline { color: var(--marian); }
.hp-news-meta {
  display: block;
  margin-top: 0.18rem;
  font-family: var(--hp-serif);
  font-size: 0.85rem;
  font-style: normal;
  color: var(--ink-subtle);
}
/* The workbench keeps its own panel; this section is the public face only. */

/* ---- Contents -----------------------------------------------------------
   A compact reading map is the humane answer to a long front page. It lets a
   visitor understand the record in seconds and enter at any chapter. -------- */

.hp-contents {
  max-width: var(--hp-text, 68rem);
  margin: clamp(3rem, 7vw, 4.75rem) auto 0;
  padding: 1.35rem 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 3fr);
  gap: 1.25rem clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
}
.hp-contents-label {
  margin: 0;
  padding-top: 0.18rem;
  font-family: var(--hp-display);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--hp-gold-text, var(--gold-deep));
}
.hp-contents ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem 1.4rem;
  list-style: none;
}
.hp-contents a {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: baseline;
  color: var(--ink-muted);
  font-family: var(--hp-serif);
  font-size: 0.98rem;
  line-height: 1.25;
  text-decoration: none;
  transition: color 150ms ease;
}
.hp-contents a span {
  color: var(--ink-ghost);
  font-family: var(--hp-display);
  /* 0.57rem is 10.26px at this root. These numerals are the index of the whole
     page, so they are read, not decoration. */
  font-size: max(0.57rem, 11px);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.hp-contents a:hover { color: var(--marian); }
.hp-contents a:hover span { color: var(--hp-gold-text, var(--gold-deep)); }
@media (max-width: 48rem) {
  .hp-contents { grid-template-columns: 1fr; gap: 0.85rem; }
  .hp-contents ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .hp-contents { padding-block: 1.15rem; }
  .hp-contents ol { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ---- The account of the work --------------------------------------------
   Nine numbered chapters. On a wide screen each chapter is a row: the
   number and heading hold the left rail while the text reads on the right
   in a single measured column. On a phone the rail folds above the text. --- */

.hp-canon {
  max-width: var(--hp-text, 64rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  text-align: left;
  counter-reset: hp-essay;
}
.hp-essay {
  counter-increment: hp-essay;
  border-top: 1px solid var(--rule);
  padding: clamp(2.25rem, 5vw, 3.35rem) 0;
}
.hp-essay:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 54rem) {
  .hp-essay {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .hp-essay h2 { grid-column: 1; }
  .hp-essay p { grid-column: 2; }
}
.hp-essay h2 {
  margin: 0 0 1.1rem;
  font-family: var(--hp-serif);
  font-size: clamp(1.55rem, 2.7vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  line-height: 1.2;
  color: var(--ink);
  align-self: start;
  text-wrap: balance;
}
@media (min-width: 54rem) {
  .hp-essay h2 { position: sticky; top: 4.75rem; }
}
.hp-essay h2::before {
  content: counter(hp-essay, decimal-leading-zero);
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--hp-display);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--hp-gold-text, var(--gold-deep));
}
.hp-essay h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin-top: 0.85rem;
  background: var(--gold);
  opacity: 0.7;
}
.hp-essay p {
  max-width: var(--hp-reading, 40rem);
  margin: 0 0 1.05rem;
  font-family: var(--hp-serif);
  font-size: clamp(1.07rem, 1.5vw, 1.14rem);
  line-height: 1.68;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.hp-essay > p:first-of-type {
  font-size: clamp(1.12rem, 1.65vw, 1.2rem);
  color: var(--ink);
}
.hp-essay p:last-child { margin-bottom: 0; }
.hp-essay em { color: var(--ink); }
.hp-essay a {
  color: var(--marian);
  text-decoration: underline;
  text-decoration-color: rgba(168, 134, 47, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms ease, color 150ms ease;
}
.hp-essay a:hover { color: var(--marian-deep); text-decoration-color: var(--marian); }

.hp-further {
  margin: 1.15rem 0 0;
  font-style: normal;
  text-align: left;
}
.hp-further a {
  font-family: var(--hp-serif);
  font-size: 0.98rem;
  font-style: italic;
  font-weight: 500;
  color: var(--marian);
  text-decoration: none;
}
.hp-further a::after { content: " \2192"; }
.hp-further a:hover { color: var(--marian-deep); text-decoration: underline; text-underline-offset: 3px; }

.hp-essay .hp-contact {
  margin-top: 1.35rem;
  padding: 0.75rem 0 0.75rem 1rem;
  border-left: 2px solid var(--gold);
  color: var(--ink);
  font-size: 1rem;
  font-style: italic;
}

/* ---- Footnotes ---------------------------------------------------------- */

sup.fn {
  font-size: 0.55em;
  line-height: 0;
  vertical-align: super;
  letter-spacing: 0;
}
.motto sup.fn { font-size: 0.38em; }
sup.fn a {
  color: var(--hp-gold-text, var(--gold-deep));
  text-decoration: none;
  border: 0;
  padding: 0 0.1em;
}
sup.fn a:hover { color: var(--marian); }

.hp-notes {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.hp-notes-hd {
  margin: 0 0 0.85rem;
  font-family: var(--hp-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-subtle);
}
.hp-notes ol {
  margin: 0;
  /* Roman numerals to match the sup.fn markers in the essays. "viii." is
     wider than "8.", so the gutter grows to keep the list flush. */
  list-style: lower-roman;
  padding-left: 2.1rem;
}
@media (min-width: 48rem) {
  .hp-notes ol { columns: 2; column-gap: 3rem; }
  .hp-notes li { break-inside: avoid; }
}
.hp-notes li {
  font-family: var(--hp-serif);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-subtle);
  margin-bottom: 0.35rem;
}
.hp-notes li::marker {
  color: var(--hp-gold-text, var(--gold-deep));
  font-size: 0.72rem;
}
.hp-notes a {
  color: var(--marian);
  text-decoration: none;
}
.hp-notes a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-notes .fn-back { color: var(--ink-ghost); }
.hp-notes .fn-back:hover { color: var(--marian); }
.hp-notes li:target { color: var(--ink); }

/* ---- Our Lady's word ----------------------------------------------------- */

.hp-madonna {
  max-width: var(--hp-text, 64rem);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--card-warm);
  background: linear-gradient(135deg, var(--card-warm), color-mix(in srgb, var(--card-warm) 88%, var(--marian) 12%));
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-align: center;
}
.hp-madonna-stars {
  margin: 0 0 1.1rem;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  line-height: 1;
}
.hp-madonna-quote {
  margin: 0 auto;
  max-width: 38rem;
  border: 0;
}
.hp-madonna-quote p {
  margin: 0;
  font-family: var(--hp-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.5;
  text-wrap: balance;
  color: var(--ink);
}
.hp-madonna-cite {
  margin: 1.1rem 0 0;
  font-family: var(--hp-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hp-madonna-cite a {
  color: var(--marian);
  text-decoration: none;
}
.hp-madonna-cite a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-madonna-cite em { font-style: normal; }
body.has-workbench .hp-madonna { display: none !important; }
body.has-workbench .hp-news,
body.has-workbench .hp-contents { display: none !important; }

/* ---- The doors ---------------------------------------------------------- */

body.public-home:not(.has-workbench) .home-doors {
  max-width: var(--hp-text, 64rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 0;
  border: 0;
}
@media (max-width: 36rem) {
  body.public-home:not(.has-workbench) .home-doors { grid-template-columns: 1fr; }
}
body.public-home:not(.has-workbench) .door {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--rule-strong);
  border-radius: 4px;
  padding: 1.25rem 1.35rem 1.35rem;
  text-align: left;
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
body.public-home:not(.has-workbench) .door:hover {
  border-color: var(--marian-soft);
  background: var(--card-warm);
  box-shadow: none;
  transform: translateY(-2px);
}
body.public-home:not(.has-workbench) .door strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--hp-display);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
/* A door that is locked should say so before it is tried. Since the register
   went behind the wall, clicking Cathedrals lands on a sign-up form, and a
   reader who did not expect that reads it as the site being broken rather than
   as a door with a porter. The mark is small and quiet: it is a fact about the
   page, not a sales badge, and it sits inline so it cannot be mistaken for a
   heading of its own. */
/* The same fact, in the two navs. The door cards carried this mark from the
   day the wall went up; the bar above them did not, so the first Cathedrals on
   the page -- the one in the primary nav, and its twin in the section rail --
   was the one link that did not say what it was. Default is DISPLAY:NONE so
   that any state this rule does not anticipate (the signed-in workbench, a
   template that reuses the bar) renders nothing rather than a stray word. */
.nav-members {
  display: none;
}
body.public-home:not(.has-workbench) .nav-members,
body.public-home:not(.has-workbench) .door-members {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-family: var(--hp-display);
  /* 0.58rem is 9.3px and the nav variant below was 8px. This mark is the only
     thing that tells a reader the link behind it asks for a name, so it is not
     decoration and it does not get to sit under the 11px floor. It stays quiet
     by colour and weight instead of by being too small to read. */
  font-size: max(0.58rem, 11px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  vertical-align: 0.12em;
}
/* Quieter in the bar than on the card: the nav is four words wide and the mark
   must not read as a fifth. */
body.public-home:not(.has-workbench) .nav-members {
  margin-left: 0.4em;
  padding: 0.05em 0.32em;
  font-size: max(0.5rem, 11px);
  opacity: 0.75;
}

body.public-home:not(.has-workbench) .door strong::after {
  content: " \2192";
  color: var(--marian);
  opacity: 0;
  transition: opacity 150ms ease;
}
body.public-home:not(.has-workbench) .door:hover strong::after { opacity: 1; }
body.public-home:not(.has-workbench) .door span {
  font-family: var(--hp-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-subtle);
}
@media (prefers-reduced-motion: reduce) {
  body.public-home:not(.has-workbench) .door:hover { transform: none; }
}

/* ---- The entrance: one quiet line, never a plea ------------------------- */

.hp-entrance { margin-top: clamp(2rem, 4vw, 2.75rem); }
body.public-home:not(.has-workbench) .home-ctas {
  justify-content: center;
  margin: 0;
}
body.public-home:not(.has-workbench) .home-ctas .quiet { margin-top: 0; }
body.public-home:not(.has-workbench) a.quiet {
  font-size: 0.95rem;
  color: var(--ink-subtle);
}
body.public-home:not(.has-workbench) a.quiet:hover { color: var(--marian); }
body.public-home:not(.has-workbench) .status { margin-top: 1rem; text-align: center; }

/* ---- Epigraph ----------------------------------------------------------- */

.hp-epigraph {
  max-width: var(--hp-text, 64rem);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: clamp(1.75rem, 4vw, 2.75rem) var(--hp-gutter) 0;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.hp-epigraph .home-rose {
  width: 44px;
  height: 44px;
  margin: 0 auto 1rem;
  display: block;
  opacity: 0.6;
}
.hp-epigraph-line {
  margin: 0 0 0.4rem;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink);
}
body.public-home:not(.has-workbench) .motto-cite {
  max-width: 36rem;
  margin: 0 auto;
  font-family: var(--hp-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--hp-gold-text, var(--gold-deep));
}
body.public-home:not(.has-workbench) .motto-cite a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 134, 47, 0.45);
}
body.public-home:not(.has-workbench) .motto-cite a:hover { border-bottom-color: var(--gold); }
@media (max-width: 34rem) {
  .hp-epigraph { margin-top: 1.75rem; padding-top: 1.5rem; }
}
body.has-workbench .hp-epigraph { display: none !important; }
body.has-workbench .hp-hero { margin: 0; padding: 0; }
body.has-workbench .hp-hero-rose { display: none; }
body.has-workbench .home-ctas { margin: 0; }

/* ---- Footer ------------------------------------------------------------- */

body.public-home:not(.has-workbench) .disclaimer {
  /* 46rem at 0.76rem in a system sans runs to ~118 characters a line, the
     longest measure on the site and set in its smallest type. Small text needs
     a SHORTER line than body copy, not a longer one. 29rem measures ~74
     characters here; 38rem still ran to 98. */
  max-width: 29rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) var(--hp-gutter) 0;
  border-top: 1px solid var(--rule);
  font-family: var(--hp-serif);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-ghost);
  text-align: center;
  text-wrap: pretty;
}
body.public-home:not(.has-workbench) .laudetur {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--hp-gold-text, var(--gold-deep));
}

/* ---- Motion ----------------------------------------------------------------
   One easing, one direction: things rise gently into place. The hero staggers
   on load; below the fold, sections rise as they enter the viewport (scroll-
   driven animations, progressive: engines without animation-timeline simply
   show the page at rest). Reduced motion turns all of it off. ---------------- */

@keyframes hp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes hp-pop {
  from { opacity: 0; transform: translateY(-5px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

body.public-home:not(.has-workbench) .jmj { animation: hp-rise 550ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
body.public-home:not(.has-workbench) .hp-hero-rose { animation: hp-rise 550ms cubic-bezier(0.2, 0.7, 0.2, 1) 70ms backwards; }
body.public-home:not(.has-workbench) .motto { animation: hp-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 140ms backwards; }
body.public-home:not(.has-workbench) .motto-en { animation: hp-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 230ms backwards; }
body.public-home:not(.has-workbench) .archive-search { animation: hp-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 320ms backwards; }

/* The results panel pops each time it opens ([hidden] toggling restarts it). */
body.public-home:not(.has-workbench) .archive-search .search-results {
  transform-origin: top center;
  animation: hp-pop 160ms ease-out;
}

/* Below the fold, only the discrete feature blocks rise. Running prose stays
   still: reading should never depend on an animation completing. */
@supports (animation-timeline: view()) {
  body.public-home:not(.has-workbench) .hp-news-col,
  body.public-home:not(.has-workbench) .hp-madonna,
  body.public-home:not(.has-workbench) .door,
  body.public-home:not(.has-workbench) .hp-epigraph {
    animation: hp-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
  /* The doors rise as a run, not a block: each a beat behind its neighbor. */
  body.public-home:not(.has-workbench) .door:nth-child(2) { animation-range: entry 5% entry 40%; }
  body.public-home:not(.has-workbench) .door:nth-child(3) { animation-range: entry 10% entry 45%; }
  body.public-home:not(.has-workbench) .door:nth-child(4) { animation-range: entry 15% entry 50%; }
}

/* The masthead earns its shadow only once the page moves under it. */
@supports (animation-timeline: scroll()) {
  @keyframes hp-bar { to { box-shadow: var(--hp-shadow); } }
  body.public-home:not(.has-workbench) .hp-topbar {
    animation: hp-bar linear both;
    animation-timeline: scroll();
    animation-range: 0 140px;
  }
}

/* Footnote hops glide; the sticky bar must not cover the landing. */
html:has(body.public-home:not(.has-workbench)) { scroll-behavior: smooth; }
body.public-home:not(.has-workbench) .hp-essay,
body.public-home:not(.has-workbench) .hp-notes li,
body.public-home:not(.has-workbench) sup.fn a { scroll-margin-top: 5.5rem; }
@media (max-width: 64rem) {
  body.public-home:not(.has-workbench) .hp-essay,
  body.public-home:not(.has-workbench) .hp-notes li,
  body.public-home:not(.has-workbench) sup.fn a { scroll-margin-top: 8rem; }
}


/* Standalone links (their own line, not mid-sentence) get the 44px touch
   floor. Notes citations stay inline: they sit inside running list text,
   where a 44px box inflates every line (the a.discuss lesson). */
@media (pointer: coarse) {
  .hp-contents a,
  .hp-further a,
  .hp-news-more a,
  .hp-madonna-cite a,
  body.public-home:not(.has-workbench) .home-ctas .quiet,
  body.public-home:not(.has-workbench) .motto-cite a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hp-contents a {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-home *, body.public-home *::before, body.public-home *::after {
    transition: none !important;
    animation: none !important;
  }
  html:has(body.public-home:not(.has-workbench)) { scroll-behavior: auto; }
}

/* The narrowest phones (SE class, ~320px): the control rail must still be one
   row. touch.css floors the toggle label at max(0.75rem, 12px); hold the 12px
   floor exactly. The doubled class outranks touch.css at equal cascade
   distance. Targets stay 44px tall throughout; only width is trimmed. */
@media (max-width: 23rem) {
  body.public-home .theme-toggle.theme-toggle,
  body.has-workbench .theme-toggle.theme-toggle {
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.55rem;
  }
  .hp-nav { gap: 0.5rem; }
  .hp-nav .account .acct-in,
  .hp-nav .account .acct-join,
  .hp-nav .account .acct-out {
    font-size: 12px;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}


/* ---- Gated links inside running prose -----------------------------------
   The nav marks /cathedrals/ "Members" and always has. Four links in the
   homepage's own sentences point at the same wall (/orders, /communion/,
   /lectionary, /ontology) and carried no mark, so a reader following "the
   appointed readings" out of a paragraph about the liturgy arrived at a form
   asking for their name. The wall page reads well and explains itself; it
   still is not what the sentence promised.

   A full chip mid-sentence reads as a fifth word in a line of prose, so this
   is a superscript in the same small caps: present, checkable, and out of the
   way. Text rather than a glyph, because a mark carrying this much meaning
   cannot be colour or shape alone. */
.hp-gated::after {
  content: "members";
  margin-left: 0.28em;
  font-family: var(--hp-display);
  font-size: max(0.5em, 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  vertical-align: 0.42em;
  white-space: nowrap;
  /* The mark sits inside the anchor, so it inherits the prose underline and
     draws a second short rule under the word. It is a label on the link, not
     part of it. */
  text-decoration: none;
  display: inline-block;
}