/* Saint Paul gift preview: the home page (index.html). Owner: home lane (2026-10-06).
   Uses the tokens of css/base.css only. Phone first (390 px), then 768 px, then 1440 px. */

/* ---------- Small line icons (CSS masks, no image files) ---------- */
.hm-ico {
  flex: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--hm-ico) center / contain no-repeat;
  mask: var(--hm-ico) center / contain no-repeat;
}
.hm-ico--call { --hm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.hm-ico--pin { --hm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.hm-ico--clock { --hm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.hm-ico--book { --hm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 5c3-1 6-1 9 1 3-2 6-2 9-1v14c-3-1-6-1-9 1-3-2-6-2-9-1z'/%3E%3Cpath d='M12 6v14'/%3E%3C/svg%3E"); }

/* ---------- Language pills (Mass rows, now band) ---------- */
.hm-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-round);
  background: var(--sp-paper);
  color: var(--sp-ink-soft);
  font: 500 .8125rem/1.2 var(--sp-font-label);
  letter-spacing: .02em;
  white-space: nowrap;
}
.hm-lang::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hm-dot, var(--sp-bronze)); }
.hm-lang--en { --hm-dot: var(--sp-link); }
.hm-lang--es { --hm-dot: var(--sp-brick); }
.hm-lang--vi { --hm-dot: var(--sp-gold-500); }

/* ---------- 1. Hero ---------- */
.hm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sp-night);
  color: var(--sp-gold-100);
}
.hm-hero__photo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -2;
  width: 100%;
  height: min(560px, 74svh);
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--sp-night-2);
}
.hm-hero__shade {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: min(561px, calc(74svh + 1px));
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(31, 14, 3, 0) 40%, rgba(31, 14, 3, .35) 100%),
    linear-gradient(180deg, rgba(31, 14, 3, .2) 0%, rgba(31, 14, 3, .28) 28%, rgba(31, 14, 3, .78) 62%, var(--sp-night) 100%);
  pointer-events: none;
}
/* Hero video (js/home.js): the same box as the photo, over the photo and under the shade. Hidden until it plays,
   then it fades out at the end so the photo shows again. */
.hm-hero__video {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -2;
  width: 100%;
  height: min(560px, 74svh);
  object-fit: cover;
  object-position: 50% 30%;
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;
}
.hm-hero__video.is-on { opacity: 1; transition-duration: 500ms; }
/* The video buttons: top right of the hero (Coach 2026-10-06: "the play and the pause button should be at the top right
   hand corner"). Round icons: a speaker, with a slash while muted, and Pause or Play; "Replay" keeps its word. */
.hm-hero__vbtns {
  position: absolute;
  top: var(--sp-space-3);
  right: max(var(--sp-gutter), env(safe-area-inset-right));
  z-index: 2;
  display: flex;
  gap: var(--sp-space-2);
}
.hm-hero__vbtn[hidden] { display: none; }
.hm-hero__vbtn {
  min-height: var(--sp-tap);
  border-color: rgba(246, 183, 91, .7);
  border-radius: var(--sp-radius-round);
  background: rgba(31, 14, 3, .55);
  color: var(--sp-gold-100);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hm-hero__vbtn:hover { background: rgba(31, 14, 3, .75); color: var(--sp-ivory); }
.hm-hero__vbtn--icon { width: var(--sp-tap); height: var(--sp-tap); padding: 0; border-radius: 50%; }
.hm-hero__svg { display: block; flex: none; width: 22px; height: 22px; }
.hm-hero__slash { display: none; }
.hm-hero__vbtn.is-muted .hm-hero__slash { display: inline; }
.hm-hero__vico { position: relative; flex: none; width: 12px; height: 12px; background: currentColor; }
.hm-hero__vico--play { clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.hm-hero__vico--pause { background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.hm-hero__vico--sound { clip-path: polygon(0 32%, 30% 32%, 70% 0, 70% 100%, 30% 68%, 0 68%); }
.hm-hero__vico--replay { background: none; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; }
.hm-hero__vico--replay::after { content: ""; position: absolute; top: -3px; right: -3px; border: 4px solid transparent; border-left-color: currentColor; transform: rotate(-30deg); }
.hm-hero__grid {
  display: grid;
  gap: var(--sp-space-5);
  padding-top: clamp(120px, 21svh, 200px);
  padding-bottom: var(--sp-space-4);
}
.hm-hero__text { max-width: 40rem; }
.hm-hero__eyebrow { color: var(--sp-gold-300); text-shadow: 0 1px 8px rgba(31, 14, 3, .7); text-wrap: balance; }
/* While the landing video shows, or waits to start by itself, the label and the headline step aside; they come back
   with the photo (js/home.js, Coach 2026-10-06). */
.hm-hero__eyebrow, .hm-hero__title { transition: opacity 700ms ease; }
.hm-film-wait .hm-hero__eyebrow, .hm-film-wait .hm-hero__title,
.hm-hero--film .hm-hero__eyebrow, .hm-hero--film .hm-hero__title { opacity: 0; }
/* The headline in three languages, one at a time in the same place, so nothing below it moves (js/home.js) */
.hm-hero__say { grid-area: 1 / 1; opacity: 0; transition: opacity 700ms ease; }
.hm-hero__say.is-on { opacity: 1; }
.hm-hero__title {
  display: grid;
  margin: 0 0 var(--sp-space-3);
  color: var(--sp-ivory);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.005em;
  text-shadow: 0 2px 24px rgba(31, 14, 3, .65);
  text-wrap: balance;
}
.hm-hero__lede {
  max-width: 34rem;
  margin-bottom: var(--sp-space-4);
  color: var(--sp-gold-100);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.3rem);
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(31, 14, 3, .8);
}
.hm-hero__motto {
  display: grid;
  gap: 4px;
  margin-bottom: var(--sp-space-5);
  padding-left: var(--sp-space-4);
  border-left: 2px solid var(--sp-gold-300);
}
.hm-hero__motto-label {
  color: var(--sp-gold-300);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hm-hero__words {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--sp-ivory);
  font: italic 500 1.2rem/1.35 var(--sp-font-display);
}
.hm-hero__words i { font-style: normal; color: var(--sp-gold-500); }
.hm-hero__cta { margin: 0; }
.hm-hero__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding-bottom: var(--sp-space-5);
  color: var(--sp-muted);
  font-size: .875rem;
  font-style: italic;
  line-height: 1.45;
}

/* ---------- The opening screen (Coach 2026-10-06) ----------
   A gold ring draws itself, the emblem opens from its center, a light sweeps across it, and slow rays turn behind it.
   The name comes into focus with "Est. 1860" between two gold lines. There is no count. The 12.5 second film that starts
   at the church of today fills the screen at once by itself (whole picture on the dark ground, silent, Coach 2026-10-07),
   with a gold "Sound on" button and "Skip"; the emblem hides. Where a browser blocks it, the screen waits with a gold
   "Play the video" button (the film with sound) and a Continue button; a tap anywhere else or a key also continues.
   When the film ends, or on Skip or Escape, the film fades and the exit runs as usual. At the end the emblem moves forward and fades, and two dark doors open onto the church. The
   small script in the head of index.html turns it on once per browser visit (never with reduced motion); js/home.js runs
   the film, the wait for Continue or Play, and the exit. If a script fails, it hides itself after 12 seconds. */
.hm-intro { display: none; }
.hm-intro-run .hm-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  padding: max(var(--sp-space-6), env(safe-area-inset-top)) var(--sp-gutter) max(var(--sp-space-7), env(safe-area-inset-bottom));
  overflow: hidden;
  color: var(--sp-gold-100);
  text-align: center;
  animation: hm-intro-end 1ms linear 12s both;
}
.hm-intro-run.hm-intro-film .hm-intro { animation: none; } /* the film runs past 12 seconds; its end, Skip, or Escape starts the exit */
.hm-intro-run.hm-intro-wait .hm-intro { animation: none; } /* the script runs, so the film or the wait for Continue or Play has no count (Coach 2026-10-06) */
.hm-intro-run.hm-intro-exit .hm-intro { animation: hm-intro-gone 1ms linear 1400ms both; } /* a new name, so the timing starts again */
/* The two doors: one dark field split down the middle, with a thin gold edge where they meet */
.hm-intro__door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: radial-gradient(130% 80% at 100% 44%, var(--sp-night-2) 0%, var(--sp-night) 72%);
}
.hm-intro__door--l { left: 0; }
.hm-intro__door--r { right: 0; background: radial-gradient(130% 80% at 0% 44%, var(--sp-night-2) 0%, var(--sp-night) 72%); }
.hm-intro__stage { position: relative; align-self: center; display: grid; justify-items: center; }
.hm-intro__rays {
  position: absolute;
  left: 50%;
  top: calc(min(60vw, 300px) / 2);
  width: 170vmax;
  height: 170vmax;
  margin: -85vmax 0 0 -85vmax;
  background: repeating-conic-gradient(from 0deg, rgba(246, 183, 91, .1) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .45) 28%, transparent 62%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .45) 28%, transparent 62%);
  opacity: 0;
  pointer-events: none;
  animation: hm-intro-show 1800ms var(--sp-ease-out) 200ms forwards, hm-intro-spin 90s linear infinite;
}
.hm-intro__seal { position: relative; width: min(60vw, 300px); aspect-ratio: 1; }
.hm-intro__seal::before { /* warm glow */
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246, 183, 91, .34), transparent 72%);
  opacity: 0;
  animation: hm-intro-glow 2600ms var(--sp-ease-inout) 400ms forwards;
}
.hm-intro__emblem {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip-path: circle(0% at 50% 50%);
  animation: hm-intro-iris 1100ms var(--sp-ease-inout) 250ms forwards;
}
.hm-intro__seal::after { /* the light sweep */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 242, 210, .5) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  mix-blend-mode: screen;
  animation: hm-intro-sweep 1300ms var(--sp-ease-inout) 1150ms both;
}
.hm-intro__ring { position: absolute; left: -14px; top: -14px; width: calc(100% + 28px); max-width: none; height: auto; aspect-ratio: 1; overflow: visible; }
.hm-intro__ring circle { fill: none; stroke: var(--sp-gold-300); stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hm-intro-draw 1400ms var(--sp-ease-inout) 100ms forwards; }
.hm-intro__name { display: grid; gap: 8px; margin: var(--sp-space-6) 0 0; }
.hm-intro__saint {
  color: var(--sp-ivory);
  font: 600 clamp(2.4rem, 11vw, 3.5rem)/1 var(--sp-font-display);
  letter-spacing: .16em;
  opacity: 0;
  filter: blur(12px);
  animation: hm-intro-focus 1100ms var(--sp-ease-out) 650ms forwards;
}
.hm-intro__rcc { display: block; overflow: hidden; }
.hm-intro__rcc > span {
  display: block;
  color: var(--sp-gold-100);
  font: 500 clamp(1.05rem, 4.8vw, 1.45rem)/1.25 var(--sp-font-display);
  letter-spacing: .08em;
  transform: translateY(110%);
  animation: hm-intro-up 900ms var(--sp-ease-out) 950ms forwards;
}
.hm-intro__est {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: var(--sp-space-4) 0 0;
  color: var(--sp-gold-300);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: 0;
  animation: hm-intro-show 900ms var(--sp-ease-out) 1250ms forwards;
}
.hm-intro__est span { margin-right: -.3em; } /* the letter spacing after the last letter, so the words sit in the middle */
.hm-intro__est::before, .hm-intro__est::after { content: ""; width: 44px; height: 1px; background: currentColor; transform: scaleX(0); animation: hm-intro-line 900ms var(--sp-ease-out) 1300ms forwards; }
.hm-intro__est::before { transform-origin: right; }
.hm-intro__est::after { transform-origin: left; }
/* The Play and Continue buttons */
.hm-intro__foot { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--sp-space-4); opacity: 0; animation: hm-intro-show 700ms var(--sp-ease-out) 1300ms forwards; }
.hm-intro__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hm-intro__go, .hm-intro__play, .hm-intro__sound {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--sp-tap);
  padding: 10px 22px 10px 18px;
  border: 1px solid rgba(246, 183, 91, .6);
  border-radius: var(--sp-radius-round);
  background: rgba(250, 223, 162, .06);
  color: var(--sp-gold-100);
  font: 600 .9375rem/1 var(--sp-font-label);
  letter-spacing: .04em;
  cursor: pointer;
}
.hm-intro__go:hover { background: rgba(250, 223, 162, .14); color: var(--sp-ivory); }
.hm-intro__go:focus-visible { outline: 2px solid var(--sp-gold-300); outline-offset: 3px; }
.hm-intro__x { position: relative; width: 14px; height: 14px; }
.hm-intro__x::before, .hm-intro__x::after { content: ""; position: absolute; left: -1px; top: 6px; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.hm-intro__x::after { transform: rotate(-45deg); }
.hm-intro__play { border-color: var(--sp-gold-300); background: var(--sp-gold-300); color: var(--sp-night); }
.hm-intro__play:hover { border-color: var(--sp-gold-100); background: var(--sp-gold-100); color: var(--sp-night); }
.hm-intro__play:focus-visible { outline: 2px solid var(--sp-ivory); outline-offset: 3px; }
.hm-intro__sound { display: none; border-color: var(--sp-gold-300); background: var(--sp-gold-300); color: var(--sp-night); } /* shows only while the film plays silent */
.hm-intro-film.hm-intro-muted .hm-intro__sound { display: inline-flex; }
.hm-intro__sound:hover { border-color: var(--sp-gold-100); background: var(--sp-gold-100); color: var(--sp-night); }
.hm-intro__sound:focus-visible { outline: 2px solid var(--sp-ivory); outline-offset: 3px; }
.hm-intro__speaker { width: 18px; height: 18px; flex: none; }
.hm-intro__tri { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; }
/* The film: the whole picture on the dark ground, above the doors and the emblem, below the Skip button */
.hm-intro__video { position: fixed; inset: 0; z-index: 1; /* fixed: it covers the screen even if the box was scrolled */ width: 100%; height: 100%; max-width: none; object-fit: contain; background: var(--sp-night); }
.hm-intro-film .hm-intro__stage { visibility: hidden; }
.hm-intro-film .hm-intro__play { display: none; }
.hm-intro-film .hm-intro__go { border-color: var(--sp-gold-300); background: rgba(31, 14, 3, .78); color: var(--sp-ivory); } /* Skip stays easy to read over a bright frame of the film */
.hm-intro-film .hm-intro__go:hover { background: rgba(31, 14, 3, .9); }
.hm-intro-exit .hm-intro__video { animation: hm-intro-hide 400ms var(--sp-ease-out) both; }
#main:focus { outline: none; } /* the page takes focus after the opening (and from the skip link) with no ring around it */
/* The exit: the emblem moves forward and fades, then the doors open and the church photo settles */
.hm-intro-exit .hm-intro__stage { animation: hm-intro-away 700ms var(--sp-ease-inout) both; }
.hm-intro-exit .hm-intro__foot { animation: hm-intro-hide 300ms var(--sp-ease-out) both; }
.hm-intro-exit .hm-intro__door--l { animation: hm-intro-door-l 900ms var(--sp-ease-inout) 450ms forwards; } /* the gold edges show only while the doors move */
.hm-intro-exit .hm-intro__door--r { animation: hm-intro-door-r 900ms var(--sp-ease-inout) 450ms forwards; }
.hm-intro-run .hm-hero__photo { animation: hm-intro-photo-wait 1400ms var(--sp-ease-out) 12s both; }
.hm-intro-run.hm-intro-exit .hm-hero__photo { animation: hm-intro-photo 1400ms var(--sp-ease-out) 450ms both; }
/* Short screens (under 700 px tall): the emblem, the name, and both buttons stay inside the screen.
   A small laptop gets a smaller emblem. A phone held sideways (under 540 px tall) puts the emblem and the name
   on the left and the buttons, one above the other, on the right. 700 px and taller: no change. */
@media (max-height: 699.98px) {
  .hm-intro { --hm-seal: min(60vw, 300px, calc(100svh - 370px)); }
  .hm-intro__seal { width: var(--hm-seal); }
  .hm-intro__rays { top: calc(var(--hm-seal) / 2); }
}
@media (max-height: 699.98px) and (orientation: landscape) {
  .hm-intro { --hm-seal: min(60vw, 300px, calc(100svh - 400px)); } /* air between "Est. 1860" and the buttons */
}
@media (max-height: 539.98px) and (orientation: landscape) {
  .hm-intro {
    --hm-seal: min(300px, calc(80svh - 90px));
    grid-template-rows: none;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: clamp(24px, 6vw, 80px);
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .hm-intro__name { gap: 4px; margin-top: clamp(10px, 3svh, 24px); }
  .hm-intro__saint { font-size: clamp(1.75rem, 9svh, 3rem); }
  .hm-intro__rcc > span { font-size: clamp(.95rem, 4.4svh, 1.3rem); }
  .hm-intro__est { margin-top: var(--sp-space-2); }
  .hm-intro__actions { flex-direction: column; align-items: stretch; }
  .hm-intro__go, .hm-intro__play, .hm-intro__sound { justify-content: center; }
  .hm-intro-film .hm-intro__foot { position: fixed; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); } /* Skip at the bottom of the film, as on tall screens */
}
@keyframes hm-intro-show { to { opacity: 1; } }
@keyframes hm-intro-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes hm-intro-spin { to { transform: rotate(360deg); } }
@keyframes hm-intro-glow { 50% { opacity: 1; } 100% { opacity: .6; } }
@keyframes hm-intro-iris { to { clip-path: circle(50% at 50% 50%); } }
@keyframes hm-intro-sweep { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes hm-intro-draw { to { stroke-dashoffset: 0; } }
@keyframes hm-intro-focus { to { opacity: 1; filter: none; letter-spacing: 0; } }
@keyframes hm-intro-up { to { transform: none; } }
@keyframes hm-intro-line { to { transform: scaleX(1); } }
@keyframes hm-intro-away { to { opacity: 0; transform: scale(1.35); filter: blur(6px); } }
@keyframes hm-intro-door-l { from, to { box-shadow: inset -1px 0 0 rgba(246, 183, 91, .45); } to { transform: translateX(-101%); } }
@keyframes hm-intro-door-r { from, to { box-shadow: inset 1px 0 0 rgba(246, 183, 91, .45); } to { transform: translateX(101%); } }
@keyframes hm-intro-end { to { visibility: hidden; } }
@keyframes hm-intro-gone { to { visibility: hidden; } }
@keyframes hm-intro-photo { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes hm-intro-photo-wait { from { transform: scale(1.12); } to { transform: scale(1); } }

/* ---------- 2. The "now" band ---------- */
.hm-now {
  max-width: 34rem;
  color: var(--sp-ink);
  background: linear-gradient(180deg, rgba(255, 253, 248, .8), rgba(251, 246, 236, .7)); /* light frosted glass, like the top and bottom bars (Coach 2026-10-06: "make this glass as well") */
  border-color: rgba(214, 140, 59, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 253, 248, .3), var(--sp-shadow-2);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  backdrop-filter: saturate(1.6) blur(20px);
}
.hm-now__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-space-3);
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hm-now__title::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sp-sky);
  box-shadow: 0 0 0 4px rgba(136, 184, 220, .25);
}
@media (prefers-reduced-motion: no-preference) {
  .hm-now__title::before { animation: hm-pulse 2.4s var(--sp-ease-inout) 3; }
}
@keyframes hm-pulse { 50% { transform: scale(.8); opacity: .55; } }
.hm-now__label {
  margin-bottom: 4px;
  color: var(--sp-ink-soft);
  font: 500 .875rem/1.3 var(--sp-font-label);
}
.hm-now__next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: var(--sp-space-2);
  color: var(--sp-ink);
}
.hm-now__rel {
  color: var(--sp-brick-deep);
  font: 600 1.05rem/1.2 var(--sp-font-label);
}
.hm-now__day { font: 500 1.05rem/1.2 var(--sp-font-label); }
.hm-now__time {
  font-family: var(--sp-font-display);
  font-size: clamp(2.1rem, 8vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--sp-ink);
}
.hm-now .hm-lang { align-self: center; background: rgba(214, 140, 59, .14); border-color: rgba(214, 140, 59, .6); color: var(--sp-bronze); }
.hm-now__mass-note { margin-bottom: var(--sp-space-2); color: var(--sp-ink-soft); font-size: var(--sp-fs-small); font-style: italic; }
.hm-now__fallback { color: var(--sp-ink-soft); }
/* Room for the next Mass before js/home.js fills it, so nothing below moves (measured 80 to 85 px on phones, 66 px at 768, 94 px at 1440) */
.hm-now__body { min-height: 5.3rem; }
@media (min-width: 700px) and (max-width: 999.98px) { .hm-now__body { min-height: 4.2rem; } }
@media (min-width: 1000px) { .hm-now__body { min-height: 5.9rem; } }
.hm-now__today {
  margin-top: var(--sp-space-3);
  padding-top: var(--sp-space-3);
  border-top: var(--sp-line) solid rgba(214, 140, 59, .4);
}
.hm-now__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.hm-now__slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;
  border: var(--sp-line) solid rgba(214, 140, 59, .55);
  border-radius: var(--sp-radius-round);
  color: var(--sp-ink);
  font: 600 .9375rem/1.2 var(--sp-font-label);
}
.hm-now__slot.is-past { opacity: .7; } /* still faded, and readable on the glass card */
.hm-now__slot.is-past .hm-now__slot-time { text-decoration: line-through; text-decoration-thickness: 1px; }
.hm-now__none { margin: 0; font-size: var(--sp-fs-small); }
.hm-now__none a { color: var(--sp-link); text-decoration-color: var(--sp-gold-500); }
.hm-now__notices { margin-top: var(--sp-space-3); padding: var(--sp-space-3); border-radius: var(--sp-radius-s); background: rgba(214, 140, 59, .14); list-style: none; font-size: var(--sp-fs-small); }
.hm-now__notices strong { color: var(--sp-brick-deep); }
.hm-now__note {
  margin: var(--sp-space-3) 0;
  color: var(--sp-ink-soft);
  font-size: .875rem;
  line-height: 1.45;
}
.hm-now__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-space-2);
}
.hm-now__act {
  flex-direction: column;
  gap: 4px;
  min-height: 56px;
  padding: 8px 6px;
  font-size: .875rem;
  line-height: 1.15;
  text-wrap: balance;
}
.hm-now .sp-btn--ghost { background: rgba(255, 253, 248, .45); color: var(--sp-ink); border-color: rgba(112, 57, 18, .5); }
.hm-now .sp-btn--ghost:hover { background: rgba(250, 223, 162, .55); color: var(--sp-bronze); }

/* ---------- 3. The time machine portal ---------- */
.hm-portal { background: radial-gradient(70% 55% at 50% 58%, #fffaf0 0%, var(--sp-paper) 62%, #ead6b2 100%); color: var(--sp-ink); }
.hm-portal.sp-grain::after { opacity: .05; mix-blend-mode: multiply; animation: none; }
.hm-portal__grid {
  display: grid;
  gap: var(--sp-space-6);
  justify-items: center;
  text-align: center;
}
.hm-portal__text { max-width: 40rem; }
.hm-portal__text .sp-eyebrow { justify-content: center; }
.hm-portal__text .sp-title { color: var(--sp-ink); }
.hm-portal__text .sp-eyebrow { color: var(--sp-bronze); }
.hm-portal__text .sp-lede { color: var(--sp-ink-soft); }
.hm-portal__text .sp-lede { margin-inline: auto; }
.hm-portal__figure { margin: 0; display: grid; justify-items: center; gap: var(--sp-space-3); }
.hm-portal .hm-portal__door {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--sp-radius-m);
  color: var(--sp-ink);
  text-decoration: none;
}
.hm-portal__medal.sp-frame--medallion {
  position: relative;
  width: 220px;
  margin-bottom: var(--sp-space-3);
  padding: 5px;
  border-width: 4px;
  background: var(--sp-night);
  box-shadow: 0 0 0 1px var(--sp-bronze), 0 0 0 10px rgba(214,140,59,.12), 0 22px 50px -14px rgba(112,57,18,.5);
}
.hm-portal__medal img { filter: sepia(.35) contrast(1.05); background: var(--sp-night-2); }
.hm-portal__ring {
  position: absolute;
  top: 0;
  left: 50%;
  width: 240px;
  height: 240px;
  margin-left: -120px;
  border-radius: 50%;
  pointer-events: none;
}
.hm-portal__ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-portal__ring-track { fill: none; stroke: rgba(112,57,18,.18); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hm-portal__ring-line { fill: none; stroke: var(--sp-gold-500); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke var(--sp-dur-2) var(--sp-ease-out); }
.hm-portal__ring-dot { position: absolute; inset: 0; pointer-events: none; }
.hm-portal__ring-dot::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sp-gold-100) 0 2px, var(--sp-gold-500) 2.5px);
  box-shadow: 0 0 0 3px rgba(214,140,59,.2), 0 0 10px var(--sp-gold-300);
}
.hm-portal__door:hover .hm-portal__ring-line, .hm-portal__door:focus-visible .hm-portal__ring-line { stroke: var(--sp-brick); }
@media (prefers-reduced-motion: no-preference) {
  .hm-portal__medal { transition: transform var(--sp-dur-2) var(--sp-ease-out); }
  .hm-portal__door:hover .hm-portal__medal, .hm-portal__door:focus-visible .hm-portal__medal { transform: scale(1.03); }
}
/* Signature: the door ring draws itself with the scroll, and the old photo settles to its sepia rest */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hm-portal__figure { view-timeline: --hm-door block; }
    .hm-portal__ring-line { animation: hm-ring-draw linear both; animation-timeline: --hm-door; animation-range: entry 15% contain 35%; }
    .hm-portal__ring-dot { animation: hm-ring-turn linear both; animation-timeline: --hm-door; animation-range: entry 15% contain 35%; }
    .hm-portal__medal img { animation: hm-door-settle linear both; animation-timeline: --hm-door; animation-range: entry 0% contain 35%; }
  }
  @supports not (animation-timeline: view()) {
    html.sp-js .hm-portal__ring-line { stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--sp-ease-inout), stroke var(--sp-dur-2) var(--sp-ease-out); }
    html.sp-js .hm-portal__ring-dot { rotate: 0deg; transition: rotate 1400ms var(--sp-ease-inout); }
    html.sp-js .hm-portal__figure.is-drawn .hm-portal__ring-line { stroke-dashoffset: 0; }
    html.sp-js .hm-portal__figure.is-drawn .hm-portal__ring-dot { rotate: 360deg; }
  }
}
@keyframes hm-ring-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hm-ring-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes hm-door-settle { from { scale: 1.14; filter: sepia(.85) contrast(1.05) brightness(.82); } to { scale: 1; filter: sepia(.35) contrast(1.05); } }
.hm-portal__label {
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h3);
  font-weight: 600;
  line-height: 1.15;
  text-decoration: underline;
  text-decoration-color: var(--sp-gold-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.hm-portal__door:hover .hm-portal__label { text-decoration-color: var(--sp-brick); text-decoration-thickness: 2px; }
.hm-portal__span {
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hm-portal__caption { color: var(--sp-muted); font-size: .875rem; font-style: italic; }
.hm-portal__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--sp-bronze);
  font: 500 .875rem/1.3 var(--sp-font-label);
  letter-spacing: .02em;
}
.hm-portal__hint[hidden] { display: none; }
.hm-portal__hint-ico {
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0 3px, transparent 4px);
}
@media (prefers-reduced-motion: no-preference) {
  .hm-portal__hint-ico { animation: hm-tap 2.6s var(--sp-ease-inout) 2; }
}
@keyframes hm-tap { 0%, 60%, 100% { transform: scale(1); opacity: 1; } 30% { transform: scale(.82); opacity: .7; } }
/* The second hint: a small play mark inside the same ring */
.hm-portal__hint-ico--play { background: conic-gradient(from 240deg at 100% 50%, currentColor 0 60deg, transparent 0) 60% 50% / 8px 9px no-repeat; }
/* Two taps on the door: the film pop-up, in the site's dialog look */
.hm-film .hm-film__figure { width: 100%; }
.hm-film .hm-film__stage {
  position: relative;
  overflow: hidden;
  width: min(100%, 1280px, calc((100dvh - 190px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: var(--sp-night-2);
  border: var(--sp-line) solid rgba(246, 183, 91, .55);
  box-shadow: 0 0 0 6px var(--sp-night-2), 0 0 0 7px rgba(214, 140, 59, .45);
}
.hm-film .hm-film__video { display: block; width: 100%; height: 100%; }
/* The door's 1871 photo, laid where its spire and tower meet the film's first frame (numbers in js/home.js) */
.hm-film .hm-film__then {
  position: absolute;
  left: 12.34%;
  top: -5.28%;
  width: 54.01%;
  height: auto;
  max-width: none;
  max-height: none; /* not the dialog picture rules of base.css */
  object-fit: fill;
  border: 0;
  box-shadow: none;
  background: none;
  pointer-events: none;
  filter: sepia(.35) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hm-film .hm-film__stage.is-live .hm-film__then { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hm-film .hm-film__stage.is-live .hm-film__then { transition: opacity 1.1s var(--sp-ease-out); }
}
.hm-film .hm-film__caption { color: var(--sp-gold-100); font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label); letter-spacing: .1em; text-transform: uppercase; }
.hm-portal__door { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hm-portal__door:active .hm-portal__medal { transform: scale(.97); }
.hm-portal__eras { width: 100%; text-align: left; }
.hm-portal__eras-title {
  margin-bottom: var(--sp-space-3);
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.hm-portal__eras ol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-space-2);
  padding: 0;
  list-style: none;
  counter-reset: hm-era;
}
.hm-era.sp-chip {
  position: relative;
  display: grid;
  align-content: center;
  gap: 2px;
  width: 100%;
  min-height: 60px;
  padding: 8px 14px 8px 46px;
  border-color: var(--sp-sand);
  background: #fffdf8;
  color: var(--sp-ink);
  box-shadow: var(--sp-shadow-1);
  text-align: left;
  counter-increment: hm-era;
}
.hm-era.sp-chip::before {
  content: counter(hm-era);
  position: absolute;
  left: 12px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sp-gold-500);
  border-radius: 50%;
  color: var(--sp-bronze);
  font: 600 .8125rem/1 var(--sp-font-label);
}
.hm-era.sp-chip:hover { border-color: var(--sp-gold-500); background: #fffdf8; }
.hm-era__span { color: var(--sp-bronze); font: 600 .8125rem/1.2 var(--sp-font-label); letter-spacing: .04em; }
.hm-era__title { color: var(--sp-ink); font: 500 1.05rem/1.25 var(--sp-font-display); }
.hm-eras__hint { display: none; }

/* Phones: the eras become a sideways strip with snap points and a progress line */
@media (max-width: 699px) {
  .hm-portal__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-portal__eras { min-width: 0; }
  .hm-portal__eras ol {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(232px, 76%);
    gap: 12px;
    margin-inline: calc(-1 * var(--sp-gutter));
    padding: 4px var(--sp-gutter) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sp-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .hm-portal__eras ol::-webkit-scrollbar { display: none; }
  .hm-portal__eras li { display: flex; scroll-snap-align: start; }
  .hm-era.sp-chip { min-height: 104px; align-content: end; padding: 14px 16px 14px 16px; border-radius: var(--sp-radius-m); background: linear-gradient(160deg, #fffdf8, var(--sp-paper)); }
  .hm-era.sp-chip::before { position: static; margin: 0 0 6px; }
  .hm-eras__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: var(--sp-space-3) 0 0;
    color: var(--sp-muted);
    font: 500 .875rem/1.3 var(--sp-font-label);
    text-align: center;
  }
  .hm-eras__track { position: relative; width: 64px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(112,57,18,.18); }
  .hm-eras__thumb { position: absolute; inset: 0; width: 25%; border-radius: 2px; background: var(--sp-gold-500); transform-origin: 0 50%; will-change: transform; }
}

/* ---------- 4. Mass and prayer times ---------- */
.hm-welcome {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: var(--sp-space-2);
  color: var(--sp-muted);
  font: italic 500 1.1rem/1.4 var(--sp-font-display);
}
.hm-welcome i { font-style: normal; color: var(--sp-gold-500); }
.hm-times__grid {
  display: grid;
  gap: var(--sp-space-5);
  align-items: start;
}
.hm-times__card { padding: clamp(var(--sp-space-5), 3vw, var(--sp-space-6)); }
.hm-times__h {
  margin-bottom: var(--sp-space-4);
  padding-bottom: var(--sp-space-3);
  border-bottom: var(--sp-line) solid var(--sp-sand);
  color: var(--sp-bronze);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h3);
  font-weight: 600;
}
.hm-days, .hm-day__rows { padding: 0; list-style: none; }
.hm-day + .hm-day { margin-top: var(--sp-space-4); }
.hm-day__name {
  margin-bottom: 6px;
  color: var(--sp-muted);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hm-mass {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
  border-top: var(--sp-line) dashed rgba(222, 191, 142, .9);
}
.hm-mass:first-child { border-top: 0; }
.hm-mass .hm-lang { justify-self: start; }
.hm-mass__time {
  color: var(--sp-ink);
  font-family: var(--sp-font-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.hm-mass__note { grid-column: 2; color: var(--sp-muted); font-size: var(--sp-fs-small); font-style: italic; line-height: 1.35; }
@media (prefers-reduced-motion: no-preference) {
  .hm-mass.is-shown { animation: hm-fade var(--sp-dur-1) var(--sp-ease-out); }
}
@keyframes hm-fade { from { opacity: 0; } }
.hm-filter { margin-bottom: var(--sp-space-4); }
.hm-filter button { flex: 1 1 auto; }
.hm-times__empty { color: var(--sp-muted); font-style: italic; }
.hm-prayer + .hm-prayer { margin-top: var(--sp-space-4); padding-top: var(--sp-space-4); border-top: var(--sp-line) solid var(--sp-sand); }
.hm-prayer__h {
  margin-bottom: 6px;
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hm-prayer p, .hm-prayer li { font-size: var(--sp-fs-small); line-height: 1.55; color: var(--sp-ink-soft); }
.hm-prayer__list { padding-left: 1.1em; }
.hm-prayer__list li + li { margin-top: 6px; }
.hm-prayer__list li::marker { color: var(--sp-gold-500); }
.hm-times__source {
  margin-top: var(--sp-space-5);
  color: var(--sp-muted);
  font-size: var(--sp-fs-small);
  font-style: italic;
  text-align: center;
}

/* ---------- 5. This week ---------- */
.hm-week__grid { display: grid; gap: var(--sp-space-5); align-items: center; }
.hm-week__grid .sp-section__head { margin-bottom: 0; }
.hm-week__card { padding: clamp(var(--sp-space-5), 3vw, var(--sp-space-6)); }
.hm-week__text { margin-bottom: var(--sp-space-4); font-size: 1.125rem; }
.hm-week__cta { margin-bottom: var(--sp-space-2); }
.hm-week__where { margin-bottom: var(--sp-space-4); color: var(--sp-muted); font-size: var(--sp-fs-small); }
.hm-week__signup { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: var(--sp-space-4); }
.hm-week__notices { padding-top: var(--sp-space-4); border-top: var(--sp-line) solid var(--sp-sand); }
.hm-week__h { margin-bottom: 6px; color: var(--sp-bronze); font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label); letter-spacing: .08em; text-transform: uppercase; }
.hm-week__notices ul { padding-left: 1.1em; }
.hm-week__none { color: var(--sp-muted); font-size: var(--sp-fs-small); font-style: italic; }

/* ---------- 7. Sacraments ---------- */
.hm-sacraments__grid { display: grid; gap: var(--sp-space-5); align-items: start; }
.hm-sac__body p { color: var(--sp-ink-soft); }
.hm-sac__body p + p { margin-top: 4px; }

/* ---------- 8. Parish life ---------- */
.hm-life__grid { display: grid; gap: var(--sp-space-5); }
.hm-life__card { padding-top: var(--sp-space-7); }
.hm-life__num {
  position: absolute;
  top: var(--sp-space-4);
  left: clamp(var(--sp-space-4), 3vw, var(--sp-space-6));
  color: var(--sp-brick);
  font: 600 1.9rem/1 var(--sp-font-display);
}
.hm-life__num::after { content: ""; display: inline-block; width: 36px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--sp-gold-500); }
.hm-life__title { margin-bottom: var(--sp-space-3); font-family: var(--sp-font-display); font-size: var(--sp-fs-h3); font-weight: 600; }
.hm-life__card p { color: var(--sp-ink-soft); }
.hm-life__card p + p { margin-top: var(--sp-space-2); }
.hm-groups { display: grid; gap: var(--sp-space-3); padding: 0; list-style: none; }
.hm-groups li { display: grid; gap: 2px; padding-left: var(--sp-space-3); border-left: 2px solid var(--sp-gold-500); }
.hm-groups strong { font: 600 1.05rem/1.3 var(--sp-font-display); }
.hm-groups span { color: var(--sp-ink-soft); font-size: var(--sp-fs-small); line-height: 1.5; }
.hm-life__traditions { margin-top: var(--sp-space-7); }
.hm-life__h { margin-bottom: var(--sp-space-4); font-family: var(--sp-font-display); font-size: var(--sp-fs-h3); font-weight: 600; text-align: center; }
.hm-trad { display: grid; gap: 0; padding: 0; list-style: none; border-top: var(--sp-line) solid var(--sp-sand); }
.hm-trad__item {
  display: grid;
  grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr);
  gap: var(--sp-space-4);
  align-items: baseline;
  padding: var(--sp-space-4) 0;
  border-bottom: var(--sp-line) solid var(--sp-sand);
}
.hm-trad__when { color: var(--sp-brick); font: 600 clamp(1.15rem, 5.2vw, 1.6rem)/1 var(--sp-font-display); letter-spacing: .02em; overflow-wrap: normal; }
.hm-trad__name { margin-bottom: 2px; font: 600 1.2rem/1.25 var(--sp-font-display); }
.hm-trad__item p { color: var(--sp-ink-soft); font-size: var(--sp-fs-small); }
.hm-life__note { margin-top: var(--sp-space-4); color: var(--sp-muted); font-size: var(--sp-fs-small); font-style: italic; text-align: center; }

/* ---------- 9. Visit and contact ---------- */
.hm-visit__grid { display: grid; gap: var(--sp-space-5); align-items: start; }
.hm-visit__card { min-width: 0; }
.hm-visit__card--place { text-align: left; }
.hm-visit__emblem { width: 64px; height: 64px; margin-bottom: var(--sp-space-3); border-radius: 50%; box-shadow: 0 0 0 1px var(--sp-gold-500), 0 0 0 4px var(--sp-paper), 0 0 0 5px var(--sp-sand); }
.hm-visit__name { margin-bottom: var(--sp-space-2); font-family: var(--sp-font-display); font-size: var(--sp-fs-h3); font-weight: 600; }
.hm-visit__addr { margin-bottom: var(--sp-space-4); color: var(--sp-ink-soft); font-size: 1.125rem; line-height: 1.5; }
.hm-visit__dl { margin-top: var(--sp-space-4); }
.hm-visit__dl dt { margin-top: var(--sp-space-3); color: var(--sp-muted); font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label); letter-spacing: .08em; text-transform: uppercase; }
.hm-visit__dl dd { margin: 0; overflow-wrap: anywhere; }
.hm-visit__dl dd span { color: var(--sp-ink-soft); font-size: var(--sp-fs-small); }
.hm-visit__h { margin-bottom: var(--sp-space-3); font-family: var(--sp-font-display); font-size: var(--sp-fs-h3); font-weight: 600; }
.hm-safe, .hm-links { display: grid; gap: var(--sp-space-3); padding: 0; list-style: none; }
.hm-safe li { display: grid; padding-bottom: var(--sp-space-3); border-bottom: var(--sp-line) solid var(--sp-sand); min-width: 0; }
.hm-safe li:last-child { border-bottom: 0; padding-bottom: 0; }
.hm-safe .sp-link, .hm-visit__dl .sp-link { overflow-wrap: anywhere; justify-self: start; }
.hm-safe strong { font: 600 1.05rem/1.3 var(--sp-font-display); }
.hm-safe span { color: var(--sp-ink-soft); font-size: var(--sp-fs-small); }
.hm-visit__card > p { color: var(--sp-ink-soft); }
.hm-links { gap: 0; }
.hm-links li { border-bottom: var(--sp-line) solid var(--sp-sand); }
.hm-links li:last-child { border-bottom: 0; }
.hm-links .sp-link { width: 100%; }
.hm-note { font-weight: 500; color: var(--sp-muted); }

/* ---------- Phone only: the next Mass and the actions on the first screen ---------- */
@media (max-width: 699px) {
  .hm-hero__grid { gap: 0; padding-top: 0; }
  .hm-hero__photo { height: min(460px, 58svh); object-position: 24% 0%; } /* the whole church shows: tower, front, and roof (Coach 2026-10-06) */
  .hm-hero__video { height: min(460px, 58svh); object-position: 50% 0%; } /* the video keeps the church in the middle (Coach 2026-10-06) */
  .hm-hero__shade { height: min(461px, calc(58svh + 1px)); background: linear-gradient(180deg, rgba(31, 14, 3, .18) 0%, rgba(31, 14, 3, .22) 50%, rgba(31, 14, 3, .3) 86%, var(--sp-night) 100%); }
  .hm-hero__text { display: contents; }
  /* The label and the headline sit over the tower, and they fill the photo's height, so the Mass card starts
     below the photo and the whole church, doors too, shows above it (Coach 2026-10-06). */
  .hm-hero__head { order: 1; box-sizing: border-box; min-height: min(460px, 58svh); padding-top: clamp(120px, 18svh, 168px); }
  .hm-hero__title { margin-bottom: var(--sp-space-4); font-size: clamp(2.25rem, 10vw, 2.75rem); }
  .hm-now { order: 3; margin-bottom: var(--sp-space-5); }
  .hm-hero__lede { order: 4; }
  .hm-hero__motto { order: 5; }
  .hm-hero__cta { order: 6; }
  .hm-now__title { margin-bottom: var(--sp-space-2); }
  .hm-hero__grid { text-align: center; }
  .hm-hero__eyebrow { justify-content: center; }
  .hm-now { justify-self: center; width: 100%; }
  .hm-now__title, .hm-now__next { justify-content: center; }
  .hm-hero__lede { margin-inline: auto; }
  .hm-hero__motto { justify-items: center; padding-left: 0; border-left: 0; }
  .hm-hero__words { justify-content: center; }
  .hm-hero__caption { justify-content: center; text-align: center; }
}
@media (max-width: 380px) {
  .hm-hero__eyebrow { letter-spacing: .02em; }
}
/* Phones: the words of the page language arrive a moment after the first paint, so keep room for the longest language
   (lede 3 lines, action labels 2 lines, emblem label 2 lines below 420 px). Nothing below them moves. */
@media (max-width: 699px) {
  .hm-hero__lede { min-height: calc(3 * 1.5em); }
  .hm-now__act { min-height: 72px; }
}
@media (max-width: 419.98px) {
  .hm-hero__motto-label { min-height: calc(2 * 1.3em); }
}
/* Phones: a compact Mass card, so the church photo shows above it. The Mass section below repeats the day list and the note. */
@media (max-width: 767.98px) {
  .hm-now__more, .hm-now__note { display: none; }
  .hm-now__actions { margin-top: var(--sp-space-3); }
}

/* ---------- Tablet: 768 px and up ---------- */
@media (min-width: 700px) {
  .hm-hero__grid { padding-top: clamp(200px, 30svh, 300px); }
  .hm-portal__eras ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-times__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-times__card--prayer { grid-column: 1 / -1; }
  .hm-life__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-life__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hm-visit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-visit__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hm-trad { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-space-6); }
  .hm-portal__medal.sp-frame--medallion { width: 250px; }
  .hm-portal__ring { width: 272px; height: 272px; margin-left: -136px; }
}

/* ---------- Desktop: 1000 px and up ---------- */
@media (min-width: 1000px) {
  .hm-hero { min-height: min(calc(100svh - 170px), 720px); display: flex; flex-direction: column; justify-content: flex-end; }
  .hm-hero__photo { inset: 0; height: 100%; object-position: 50% 40%; }
  .hm-hero__video { inset: 0; height: 100%; object-position: 50% 40%; }
  .hm-hero__shade {
    inset: 0;
    height: auto;
    background:
      linear-gradient(90deg, rgba(31,14,3,.66) 0%, rgba(31,14,3,.34) 38%, rgba(31,14,3,.06) 66%, rgba(31,14,3,.38) 100%),
      linear-gradient(180deg, rgba(31,14,3,0) 45%, rgba(31,14,3,.6) 100%);
  }
  .hm-hero__grid {
    width: min(100% - 2 * var(--sp-gutter), var(--sp-wrap));
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .85fr);
    align-items: end;
    gap: var(--sp-space-7);
    padding-top: var(--sp-space-8);
    padding-bottom: var(--sp-space-5);
  }
  .hm-now { justify-self: end; width: 100%; }
  .hm-portal__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "text figure" "eras eras";
    align-items: center;
    justify-items: start;
    text-align: left;
    column-gap: var(--sp-space-8);
  }
  .hm-portal__text { grid-area: text; }
  .hm-portal__text .sp-eyebrow { justify-content: flex-start; }
  .hm-portal__text .sp-lede { margin-inline: 0; }
  .hm-portal__figure { grid-area: figure; justify-self: center; }
  .hm-portal__eras { grid-area: eras; }
  .hm-portal__eras ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-portal__medal.sp-frame--medallion { width: 280px; }
  .hm-portal__ring { width: 306px; height: 306px; margin-left: -153px; top: -3px; }
  .hm-times__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); }
  .hm-times__card--prayer { grid-column: auto; }
  .hm-week__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-space-8); }
  .hm-sacraments__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-space-8); }
  .hm-sacraments__grid .sp-section__head { position: sticky; top: calc(var(--sp-header-h) + var(--sp-space-5)); }
  .hm-life__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-life__grid > :last-child:nth-child(odd) { grid-column: auto; }
  .hm-visit__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .hm-visit__grid > :last-child:nth-child(odd) { grid-column: auto; }
  .hm-trad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The "Enter the time machine" link inside the shared full-screen viewer (added by js/home.js) */
.hm-viewer-go {
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 48px;
  margin: 12px auto 0;
  font-style: normal;
}

/* Phones: centered (Coach 2026-10-06) */
@media (max-width: 699px) {
  .hm-portal__eras-title { text-align: center; }
  .hm-times .sp-section__head, .hm-week .sp-section__head, .hm-sacraments .sp-section__head,
  .hm-life .sp-section__head, .hm-visit .sp-section__head { margin-inline: auto; text-align: center; }
  .hm-times .sp-eyebrow, .hm-week .sp-eyebrow, .hm-sacraments .sp-eyebrow,
  .hm-life .sp-eyebrow, .hm-visit .sp-eyebrow { justify-content: center; }
  .hm-sacraments .sp-lede, .hm-life .sp-lede, .hm-visit .sp-lede { margin-inline: auto; }
  .hm-welcome { justify-content: center; }
  .hm-times__h { text-align: center; }
  .hm-filter { justify-content: center; }
  .hm-week__card { text-align: center; }
  .hm-week__signup { justify-content: center; }
  .hm-week__notices ul { text-align: left; }
  .hm-life__num { left: 0; right: 0; text-align: center; }
  .hm-life__title { text-align: center; }
  .hm-visit__emblem { display: block; margin-inline: auto; }
  .hm-visit__name, .hm-visit__h { text-align: center; }
  .hm-visit__card > p:not(.hm-visit__addr) { text-align: center; }
}

/* ---------- Greeting on cream, after the hero (amazing round) ---------- */
.hm-greet { background: radial-gradient(80% 70% at 50% 0%, #fff3d6 0%, rgba(255,243,214,0) 70%), var(--sp-ivory); text-align: center; padding-block: var(--sp-space-7) var(--sp-space-8); }
.hm-greet__inner { max-width: 40rem; margin-inline: auto; display: grid; justify-items: center; }
.hm-greet .hm-hero__lede { margin-inline: auto; color: var(--sp-ink-soft); text-shadow: none; font: italic 500 clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem)/1.4 var(--sp-font-display); }
.hm-greet .hm-hero__motto { border-left: 0; padding-left: 0; justify-items: center; }
.hm-greet .hm-hero__motto-label { color: var(--sp-bronze); }
.hm-greet .hm-hero__words { color: var(--sp-ink); justify-content: center; }
@media (max-width: 699px) {
  .hm-greet .hm-hero__lede { min-height: calc(3 * 1.4em); }
  /* Dawn behind the glass Mass card: night under the photo, then amber, then cream (Coach 2026-10-06: "make this glass as well") */
  .hm-hero { background: linear-gradient(180deg, var(--sp-night) 0, var(--sp-night) calc(min(460px, 58svh) + 20px), #6e3815 calc(min(460px, 58svh) + 80px), #c98a4a calc(min(460px, 58svh) + 140px), #ecd3a8 calc(min(460px, 58svh) + 195px), var(--sp-ivory) calc(min(460px, 58svh) + 250px)); }
  .hm-now {
    background: linear-gradient(180deg, rgba(255, 246, 228, .84), rgba(251, 246, 236, .74));
    box-shadow: 0 18px 40px -16px rgba(45,21,4,.45), inset 0 1px 0 rgba(255,255,255,.8);
  }
}

/* Hero settle (computer): the photo eases down with the scroll */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @media (min-width: 1000px) {
      .hm-hero__photo, .hm-hero__shade { animation: hm-hero-settle linear both; animation-timeline: scroll(root block); animation-range: 0px 100svh; }
      .hm-hero__video { animation: hm-hero-settle linear both; animation-timeline: scroll(root block); animation-range: 0px 100svh; }
    }
  }
  /* The title comes into focus after the opening doors part */
  .hm-intro-exit .hm-hero__head { animation: hm-head-in 900ms var(--sp-ease-out) 650ms both; }
}
@keyframes hm-hero-settle { to { translate: 0 18%; } }
@keyframes hm-head-in { from { opacity: 0; translate: 0 14px; filter: blur(6px); } }

/* Phones: the era cards roll in and out as they slide past */
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hm-portal__eras li { animation: hm-era-roll linear both; animation-timeline: view(inline); animation-range: entry 0% exit 100%; }
  }
}
@keyframes hm-era-roll { 0% { scale: .92; translate: 0 8px; } 28%, 72% { scale: 1; translate: 0 0; } 100% { scale: .92; translate: 0 8px; } }
@media (min-width: 700px) { .hm-hero__caption { color: color-mix(in srgb, var(--sp-gold-100) 82%, var(--sp-night)); } }

/* Parish photos (2010): a modest band, so the Mass times stay near the top on a phone */
.hm-photo { margin: var(--sp-space-5) 0 0; }
.hm-photo__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; max-height: 15rem; object-fit: cover; border-radius: var(--sp-radius-m); }
.hm-photo--doors .hm-photo__img { object-position: 50% 82%; }
.hm-visit__card--place .hm-photo { margin: 0 0 var(--sp-space-4); }
.hm-photo__cap { margin-top: var(--sp-space-2); color: var(--sp-muted); font-size: .875rem; font-style: italic; }