/* St. Paul's Roman Catholic Church, Reading PA: shared look for every page.
   Owner: base-css lane (2026-10-06). Page CSS files use these tokens and never redefine them.
   Colors come from the parish emblem (design-spec.md section 3). */

/* 1. Fonts (files inside the site, SIL Open Font License, see fonts/OFL-*.txt) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-vietnamese-wght-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-vietnamese-wght-italic.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/lora-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/lora-vietnamese-wght-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/be-vietnam-pro-vietnamese-500-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* 2. Tokens */
:root {
  /* Colors from the emblem */
  --sp-ink: #2d1504;
  --sp-ink-soft: #4f3718;
  --sp-muted: #6e4a20;
  --sp-bronze: #703912;
  --sp-bronze-deep: #4f3718;
  --sp-night: #1f0e03;
  --sp-night-2: #2d1504;
  --sp-gold-100: #fadfa2;
  --sp-gold-300: #f6b75b;
  --sp-gold-500: #d68c3b;
  --sp-brick: #b96025;
  --sp-brick-deep: #7d3416;
  --sp-sky: #88b8dc;
  --sp-link: #7a2e12;
  --sp-ivory: #fbf6ec;
  --sp-paper: #f3e6cf;
  --sp-sand: #debf8e;
  --sp-sand-light: #e7d1ab;
  --sp-paper-grain: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .18 0 0 0 0 .08 0 0 0 0 .02 0 0 0 .55 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%27.09%27/%3E%3C/svg%3E');

  /* Era tone (default = today; [data-tone] changes them) */
  --sp-tone-bg: var(--sp-ivory);
  --sp-tone-fg: var(--sp-ink);
  --sp-tone-accent: var(--sp-link);
  --sp-tone-card: #fffdf8;

  /* Type */
  --sp-font-display: "Cormorant Garamond", Georgia, "Palatino Linotype", serif;
  --sp-font-text: Lora, Georgia, serif;
  --sp-font-label: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --sp-fs-display: clamp(2.6rem, 9vw, 5.5rem);
  --sp-fs-h1: clamp(2.2rem, 7vw, 4rem);
  --sp-fs-h2: clamp(1.8rem, 5.2vw, 2.9rem);
  --sp-fs-h3: clamp(1.3rem, 3.6vw, 1.75rem);
  --sp-fs-body: 1.0625rem;
  --sp-fs-small: 0.9375rem;
  --sp-fs-label: 0.8125rem;
  --sp-lh-tight: 1.15;
  --sp-lh-text: 1.6;

  /* Space */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 24px;
  --sp-space-6: 32px;
  --sp-space-7: 48px;
  --sp-space-8: 72px;
  --sp-space-9: 112px;
  --sp-gutter: clamp(16px, 4vw, 40px);
  --sp-wrap: 1200px;
  --sp-measure: 68ch;
  --sp-header-h: 64px;
  --sp-tap: 44px;

  /* Shape */
  --sp-radius-s: 4px;
  --sp-radius-m: 10px;
  --sp-radius-round: 999px;
  --sp-line: 1px;
  --sp-shadow-1: 0 1px 2px rgba(45, 21, 4, .08), 0 6px 16px -8px rgba(45, 21, 4, .22);
  --sp-shadow-2: 0 2px 6px rgba(45, 21, 4, .10), 0 22px 44px -18px rgba(45, 21, 4, .42);

  /* Motion */
  --sp-dur-1: 160ms;
  --sp-dur-2: 320ms;
  --sp-dur-3: 600ms;
  --sp-dur-4: 1200ms;
  --sp-dur-iris: 2400ms;
  --sp-ease-out: cubic-bezier(.2, .7, .2, 1);
  --sp-ease-inout: cubic-bezier(.7, 0, .2, 1);

  color-scheme: light;
}

/* 3. Reset and base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sp-header-h) + var(--sp-space-4));
}
body {
  min-height: 100svh;
  background: var(--sp-paper-grain) 0 0 / 180px 180px, var(--sp-ivory);
  color: var(--sp-ink);
  font-family: var(--sp-font-text);
  font-size: var(--sp-fs-body);
  line-height: var(--sp-lh-text);
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(214, 140, 59, .18);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, li, figcaption, dd { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sp-font-display);
  font-weight: 600;
  line-height: var(--sp-lh-tight);
  letter-spacing: .005em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--sp-fs-h1); }
h2 { font-size: var(--sp-fs-h2); }
h3 { font-size: var(--sp-fs-h3); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
small { font-size: max(12px, .8125rem); }
a {
  color: var(--sp-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--sp-gold-500);
  text-underline-offset: .18em;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sp-sky); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--sp-gold-100); color: var(--sp-ink); }
hr { border: 0; border-top: var(--sp-line) solid var(--sp-sand); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Skip link: off screen until it has focus */
.sp-skip {
  position: absolute;
  left: var(--sp-space-2);
  top: var(--sp-space-2);
  z-index: 100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sp-skip:focus, .sp-skip:focus-visible {
  width: auto;
  height: auto;
  min-height: var(--sp-tap);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-space-4);
  clip-path: none;
  background: var(--sp-brick-deep);
  color: var(--sp-ivory);
  font: 600 1rem/1.2 var(--sp-font-label);
  border-radius: var(--sp-radius-s);
  box-shadow: var(--sp-shadow-2);
}

/* 4. Gift preview notice (thin bar above the header) */
.sp-preview {
  position: relative;
  z-index: 51;
  padding: 6px var(--sp-gutter);
  background: var(--sp-paper);
  color: #7d4a1e; /* fix round: L about 82 (over the 70 cut), 5.93:1 on #f3e6cf */
  font: 500 var(--sp-fs-label)/1.45 var(--sp-font-label);
  letter-spacing: .02em;
  text-align: center;
  border-bottom: 1px solid rgba(214, 140, 59, .45);
}
/* On phones the notice keeps room for two lines, so the switch to Vietnamese or Spanish
   (a longer notice) never pushes the page down after it shows. */
@media (max-width: 767.98px) {
  .sp-preview { align-content: center; min-height: calc(2 * 1.45 * var(--sp-fs-label) + 12px); }
}
.sp-preview a {
  display: inline-block;
  padding: 14px 4px;
  margin: -14px -4px;
  color: var(--sp-link);
  text-decoration-color: var(--sp-gold-500);
  white-space: nowrap;
}

/* 5. Header: one line, 64 px, sticky */
.sp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--sp-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-inline: max(var(--sp-gutter), env(safe-area-inset-left)) max(var(--sp-gutter), env(safe-area-inset-right));
  background: color-mix(in srgb, var(--sp-ivory) 88%, transparent); /* frosted glass: the page shows softly through (Coach 2026-10-06) */
  -webkit-backdrop-filter: saturate(2) blur(22px);
  backdrop-filter: saturate(2) blur(22px);
  border-bottom: var(--sp-line) solid rgba(201, 138, 52, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 rgba(246, 183, 91, .25), 0 12px 28px -20px rgba(45, 21, 4, .5);
}
.sp-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: var(--sp-tap);
  color: var(--sp-ink);
  text-decoration: none;
  -webkit-touch-callout: none; /* a 5 second hold on the emblem replays the opening screen (js/site.js), so no phone link menu */
}
.sp-brand:hover { color: var(--sp-bronze); }
.sp-brand__emblem {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(45, 21, 4, .35));
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* While the emblem is held: a gold glow that grows over the 5 seconds (it starts after half a second, so a tap shows nothing) */
.sp-brand.is-holding .sp-brand__emblem { animation: sp-emblem-hold 5000ms linear both; }
@keyframes sp-emblem-hold {
  0%, 10% { filter: drop-shadow(0 1px 2px rgba(45, 21, 4, .35)); transform: none; }
  100% { filter: drop-shadow(0 0 3px #f6b75b) drop-shadow(0 0 12px rgba(246, 183, 91, .85)); transform: scale(1.15); }
}
.sp-brand__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--sp-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .015em;
  white-space: nowrap;
}
/* The parish name: "St. Paul's" over "Roman Catholic Church" (Coach order 2026-10-06).
   Below 768 px the place line hides so the name fits the 64 px header with the tools. */
.sp-brand__title { display: flex; flex-direction: column; min-width: 0; }
.sp-brand__saint { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.sp-brand__rcc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .045em;
  color: var(--sp-bronze);
}
.sp-brand__name small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--sp-font-label);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--sp-muted);
}
.sp-header .sp-brand__name small { display: none; }
@media (min-width: 768px) {
  .sp-header .sp-brand__name small { display: block; margin-top: 1px; }
  .sp-brand__saint { font-size: 1.375rem; }
}
.sp-header__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Language switch */
.sp-lang { position: relative; }
.sp-lang__toggle {
  display: inline-grid;
  place-items: center;
  width: var(--sp-tap);
  height: var(--sp-tap);
  padding: 0;
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-s);
  background: transparent;
  color: var(--sp-ink);
  font: 600 .875rem/1 var(--sp-font-label);
  letter-spacing: .06em;
}
.sp-lang__toggle:hover, .sp-lang__toggle[aria-expanded="true"] { background: var(--sp-paper); border-color: var(--sp-gold-500); }
.sp-lang__list {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 60;
  display: grid;
  gap: 8px;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--sp-ivory);
  border: var(--sp-line) solid var(--sp-gold-500);
  border-radius: var(--sp-radius-m);
  box-shadow: var(--sp-shadow-2);
}
.sp-lang__list::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 16px;
  width: 10px;
  height: 10px;
  background: var(--sp-ivory);
  border-left: var(--sp-line) solid var(--sp-gold-500);
  border-top: var(--sp-line) solid var(--sp-gold-500);
  transform: rotate(45deg);
}
.sp-lang__list button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--sp-tap);
  padding: 0 var(--sp-space-4) 0 34px;
  border: 0;
  border-radius: var(--sp-radius-s);
  background: transparent;
  color: var(--sp-ink);
  font: 500 1rem/1.2 var(--sp-font-label);
  text-align: left;
}
.sp-lang__list button:hover { background: var(--sp-paper); }
.sp-lang__list button[aria-pressed="true"],
.sp-lang__list button[aria-current="true"],
.sp-lang__list button[aria-checked="true"] { color: var(--sp-bronze); font-weight: 600; }
.sp-lang__list button[aria-pressed="true"]::before,
.sp-lang__list button[aria-current="true"]::before,
.sp-lang__list button[aria-checked="true"]::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 7px;
  height: 12px;
  margin-top: -8px;
  border-right: 2px solid var(--sp-gold-500);
  border-bottom: 2px solid var(--sp-gold-500);
  transform: rotate(45deg);
}

/* Menu button */
.sp-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: var(--sp-tap);
  min-height: var(--sp-tap);
  padding: 0 11px;
  border: var(--sp-line) solid var(--sp-brick-deep);
  border-radius: var(--sp-radius-s);
  background: var(--sp-brick-deep);
  color: var(--sp-ivory);
  font: 600 .9375rem/1 var(--sp-font-label);
  white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--sp-brick-deep), inset 0 0 0 3px rgba(246, 183, 91, .45);
}
.sp-menu-toggle:hover { background: var(--sp-bronze); }
@media (max-width: 379.98px) {
  .sp-menu-toggle { padding: 0 10px; font-size: .875rem; }
  .sp-menu-toggle__icon { display: none; }
}
.sp-menu-toggle__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 12px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}
.sp-menu-toggle__icon::before, .sp-menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--sp-dur-2) var(--sp-ease-out);
}
.sp-menu-toggle__icon::before { top: 0; }
.sp-menu-toggle__icon::after { top: 10px; }
.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle__icon { background-size: 0 2px; }
.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle__icon::before { transform: translateY(5px) rotate(45deg); }
.sp-menu-toggle[aria-expanded="true"] .sp-menu-toggle__icon::after { transform: translateY(-5px) rotate(-45deg); }

/* Main menu: a drawer under the header below 1200 px */
.sp-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  max-height: calc(100svh - var(--sp-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sp-ivory);
  border-top: var(--sp-line) solid rgba(214, 140, 59, .35);
  border-bottom: var(--sp-line) solid var(--sp-gold-500);
  box-shadow: var(--sp-shadow-2);
}
.sp-header.is-open .sp-nav,
.sp-header:has(.sp-menu-toggle[aria-expanded="true"]) .sp-nav {
  display: block;
  box-shadow: var(--sp-shadow-2), 0 0 0 100vmax rgba(79, 55, 24, .30);
  clip-path: inset(0 -100vmax -100vmax -100vmax);
}
@media (max-width: 1199.98px) {
  /* The page stays still under the open menu. Only html: "hidden" on body as well made body its own scroll box, so the
     sticky top bar went back to the top of the page and left the screen when the menu opened after a scroll (Coach 2026-10-07). */
  html.sp-menu-open { overflow: hidden; }
}
.sp-nav ul {
  margin: 0 auto;
  padding: var(--sp-space-2) var(--sp-gutter) var(--sp-space-5);
  max-width: var(--sp-wrap);
  list-style: none;
}
.sp-nav li { border-bottom: var(--sp-line) solid rgba(214, 140, 59, .32); }
.sp-nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-3);
  min-height: 48px;
  padding: 6px 4px;
  color: var(--sp-ink);
  font: 500 1.0625rem/1.25 var(--sp-font-label);
  text-decoration: none;
}
.sp-nav a::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--sp-gold-500);
  border-right: 1.5px solid var(--sp-gold-500);
  transform: rotate(45deg);
}
.sp-nav a:hover { color: var(--sp-bronze); background: linear-gradient(90deg, rgba(243, 230, 207, .9), transparent); }
.sp-nav a[aria-current] {
  color: var(--sp-bronze);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--sp-gold-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
@media (min-width: 1200px) {
  .sp-header { gap: var(--sp-space-4); }
  .sp-brand { flex: none; }
  .sp-brand__name { font-size: 1.5rem; }
  .sp-brand__saint { font-size: 1.45rem; }
  .sp-nav, .sp-header.is-open .sp-nav,
  .sp-header:has(.sp-menu-toggle[aria-expanded="true"]) .sp-nav {
    position: static;
    order: 1;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    clip-path: none;
    animation: none;
  }
  .sp-header__tools { order: 2; }
  .sp-nav ul {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 0;
    max-width: none;
  }
  .sp-nav li { border: 0; }
  .sp-nav .sp-nav__secondary { display: none; }
  .sp-nav a {
    min-height: var(--sp-tap);
    padding: 0 11px;
    font-size: .9375rem;
    white-space: nowrap;
    border-radius: var(--sp-radius-s);
  }
  .sp-nav a::after { display: none; }
  .sp-nav a:hover { background: var(--sp-paper); }
  .sp-menu-toggle { display: none; }
}

/* 6. Layout and sections */
.sp-wrap {
  width: min(100% - 2 * var(--sp-gutter), var(--sp-wrap));
  margin-inline: auto;
}
.sp-section {
  position: relative;
  padding-block: clamp(var(--sp-space-7), 9vw, var(--sp-space-9));
}
.sp-section--paper { background: var(--sp-paper-grain) 0 0 / 180px 180px, var(--sp-paper); }
.sp-section--dark { background: var(--sp-night-2); color: var(--sp-gold-100); }
.sp-section__head { max-width: var(--sp-measure); margin-bottom: clamp(var(--sp-space-5), 4vw, var(--sp-space-7)); }
.sp-eyebrow {
  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;
}
.sp-eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 7px;
  background:
    linear-gradient(var(--sp-gold-500), var(--sp-gold-500)) left center / 20px 1px no-repeat,
    linear-gradient(45deg, transparent 35%, var(--sp-gold-500) 35% 65%, transparent 65%) right center / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 35%, var(--sp-gold-500) 35% 65%, transparent 65%) right center / 7px 7px no-repeat;
}
.sp-title {
  margin-bottom: var(--sp-space-4);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h2);
  font-weight: 600;
  line-height: var(--sp-lh-tight);
  color: inherit;
  text-wrap: balance;
}
.sp-lede {
  max-width: var(--sp-measure);
  color: var(--sp-ink-soft);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.6;
}
.sp-section--dark .sp-eyebrow, [data-tone="past"] .sp-eyebrow { color: var(--sp-gold-300); }
.sp-section--dark .sp-lede, [data-tone="past"] .sp-lede { color: var(--sp-gold-100); }
.sp-section--dark a:not(.sp-btn), [data-tone="past"] a:not(.sp-btn) { color: var(--sp-gold-100); text-decoration-color: var(--sp-gold-300); }

/* 7. Buttons and links */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-2);
  min-width: var(--sp-tap);
  min-height: var(--sp-tap);
  padding: 10px 22px;
  border: var(--sp-line) solid var(--sp-bronze);
  border-radius: var(--sp-radius-s);
  background: transparent;
  color: var(--sp-ink);
  font: 600 .9375rem/1.2 var(--sp-font-label);
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--sp-dur-1) var(--sp-ease-out);
}
.sp-btn:hover { text-decoration: none; }
.sp-btn:active { transform: scale(.97); }
.sp-btn--primary {
  background: var(--sp-brick-deep);
  border-color: var(--sp-brick-deep);
  color: var(--sp-ivory);
  box-shadow: inset 0 0 0 3px var(--sp-brick-deep), inset 0 0 0 4px rgba(246, 183, 91, .5), var(--sp-shadow-1);
}
.sp-btn--primary:hover { background: var(--sp-bronze); border-color: var(--sp-bronze); color: var(--sp-ivory); box-shadow: inset 0 0 0 3px var(--sp-bronze), inset 0 0 0 4px rgba(250, 223, 162, .6), var(--sp-shadow-2); }
.sp-btn--ghost { background: transparent; border-color: var(--sp-bronze); color: var(--sp-ink); }
.sp-btn--ghost:hover { background: var(--sp-paper); color: var(--sp-bronze); }
.sp-btn--gold {
  background: var(--sp-gold-300);
  border-color: var(--sp-gold-500);
  color: var(--sp-ink);
  box-shadow: inset 0 0 0 3px var(--sp-gold-300), inset 0 0 0 4px rgba(112, 57, 18, .35), var(--sp-shadow-1);
}
.sp-btn--gold:hover { background: var(--sp-gold-100); }
.sp-btn--small { padding: 8px 14px; font-size: .875rem; }
.sp-section--dark .sp-btn--ghost, [data-tone="past"] .sp-btn--ghost, .sp-card--dark .sp-btn--ghost {
  color: var(--sp-gold-100);
  border-color: var(--sp-gold-300);
}
.sp-section--dark .sp-btn--ghost:hover, [data-tone="past"] .sp-btn--ghost:hover, .sp-card--dark .sp-btn--ghost:hover { background: rgba(250, 223, 162, .1); }
.sp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: var(--sp-tap);
  min-height: var(--sp-tap);
  color: var(--sp-link);
  font: 600 .9375rem/1.3 var(--sp-font-label);
  text-decoration: underline;
  text-decoration-color: var(--sp-gold-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.sp-link:hover { text-decoration-thickness: 2px; }

/* 8. Frames, corners, divider */
.sp-frame {
  position: relative;
  display: block;
  margin: 0;
  padding: 6px;
  background: var(--sp-paper);
  border: var(--sp-line) solid var(--sp-gold-500);
  border-radius: 2px;
  box-shadow: var(--sp-shadow-1);
}
.sp-frame::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: var(--sp-line) solid var(--sp-bronze);
  pointer-events: none;
}
.sp-frame > img, .sp-frame > picture > img { width: 100%; height: auto; background: var(--sp-paper); }
.sp-frame--dark { background: var(--sp-night-2); border-color: var(--sp-gold-300); }
.sp-frame--dark::after { border-color: rgba(214, 140, 59, .65); }
.sp-frame--dark > img { background: var(--sp-night-2); }
.sp-frame--medallion {
  width: 96px;
  aspect-ratio: 1;
  padding: 3px;
  border: 3px solid var(--sp-gold-300);
  border-radius: 50%;
  background: var(--sp-paper);
  box-shadow: 0 0 0 1px var(--sp-bronze), 0 0 0 4px rgba(214, 140, 59, .18), var(--sp-shadow-1);
  overflow: hidden;
}
.sp-frame--medallion::after { inset: 3px; border-radius: 50%; border-color: rgba(112, 57, 18, .45); }
.sp-frame--medallion > img, .sp-frame--medallion > picture > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
}
.sp-corners { position: relative; }
.sp-corners::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 1;
  --c: var(--sp-gold-500);
  background:
    linear-gradient(var(--c), var(--c)) left top / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 2px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 2px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 2px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 2px 14px no-repeat;
}
.sp-section--dark .sp-corners::before, [data-tone="past"] .sp-corners::before, .sp-card--dark.sp-corners::before { --c: var(--sp-gold-300); }
.sp-divider {
  display: block;
  width: min(100% - 2 * var(--sp-gutter), var(--sp-wrap));
  height: 28px;
  margin: var(--sp-space-6) auto;
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='none' stroke='%23d68c3b' stroke-width='.8' opacity='.7'/%3E%3Cpath d='M14 5.5v17M8.5 11h11' fill='none' stroke='%23d68c3b' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='11' r='1.4' fill='%23f6b75b'/%3E%3C/svg%3E") center / 28px 28px no-repeat,
    linear-gradient(90deg, transparent, var(--sp-gold-500) 18%, var(--sp-gold-500) calc(50% - 22px), transparent calc(50% - 22px), transparent calc(50% + 22px), var(--sp-gold-500) calc(50% + 22px), var(--sp-gold-500) 82%, transparent) center / 100% 1px no-repeat;
}

/* 9. Photos, captions, badges, chips */
.sp-photo { margin: 0; }
.sp-photo img { width: 100%; height: auto; background: var(--sp-paper); }
.sp-photo > a { display: block; }
.sp-caption {
  margin-top: var(--sp-space-2);
  color: var(--sp-muted);
  font-size: var(--sp-fs-small);
  font-style: italic;
  line-height: 1.5;
}
.sp-section--dark .sp-caption, [data-tone="past"] .sp-caption, .sp-card--dark .sp-caption { color: var(--sp-gold-100); }
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px;
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-round);
  background: var(--sp-paper);
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-label)/1.25 var(--sp-font-label);
  letter-spacing: .03em;
  vertical-align: middle;
}
.sp-badge::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}
.sp-badge--original { background: var(--sp-paper); border-color: var(--sp-sand); color: var(--sp-bronze); }
.sp-badge--today { background: #fffdf8; border-color: var(--sp-gold-500); color: var(--sp-ink); }
.sp-badge--today::before { background: var(--sp-link); box-shadow: 0 0 0 3px rgba(246, 183, 91, .45); opacity: 1; }
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-s);
  background: var(--sp-ivory);
  color: var(--sp-ink-soft);
  font: 500 .875rem/1.3 var(--sp-font-label);
  text-decoration: none;
}
a.sp-chip, button.sp-chip { min-height: var(--sp-tap); min-width: var(--sp-tap); color: var(--sp-link); cursor: pointer; }
a.sp-chip:hover, button.sp-chip:hover { border-color: var(--sp-gold-500); background: var(--sp-paper); }
.sp-section--dark .sp-chip, [data-tone="past"] .sp-chip, .sp-card--dark .sp-chip { background: transparent; border-color: rgba(246, 183, 91, .45); color: var(--sp-gold-100); }

/* 10. Cards */
.sp-card {
  position: relative;
  padding: clamp(var(--sp-space-4), 3vw, var(--sp-space-6));
  background: #fffdf8;
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-m);
  box-shadow: var(--sp-shadow-1);
}
.sp-card--paper { background: var(--sp-paper); border-color: var(--sp-sand); }
.sp-card--dark { background: var(--sp-night-2); border-color: rgba(246, 183, 91, .45); color: var(--sp-gold-100); }
.sp-card--dark a:not(.sp-btn) { color: var(--sp-gold-100); }

/* 11. Era tones */
[data-tone] {
  background-color: var(--sp-tone-bg);
  color: var(--sp-tone-fg);
}
[data-tone="past"] {
  --sp-tone-bg: var(--sp-night);
  --sp-tone-fg: var(--sp-gold-100);
  --sp-tone-accent: var(--sp-gold-300);
  --sp-tone-card: var(--sp-night-2);
}
[data-tone="mid"] {
  --sp-tone-bg: color-mix(in srgb, var(--sp-bronze-deep) 16%, var(--sp-paper));
  --sp-tone-fg: var(--sp-ink);
  --sp-tone-accent: var(--sp-bronze);
  --sp-tone-card: var(--sp-paper);
}
[data-tone="today"] {
  --sp-tone-bg: var(--sp-ivory);
  --sp-tone-fg: var(--sp-ink);
  --sp-tone-accent: var(--sp-link);
  --sp-tone-card: #fffdf8;
}
[data-tone] .sp-card:not(.sp-card--dark):not(.sp-card--paper) { background: var(--sp-tone-card); }
[data-tone="past"] .sp-card:not(.sp-card--paper) { color: var(--sp-gold-100); border-color: rgba(246, 183, 91, .4); }
[data-tone="past"] .sp-card--paper { color: var(--sp-ink); }
[data-tone="past"] .sp-card--paper a:not(.sp-btn) { color: var(--sp-link); }
[data-tone="mid"] .sp-eyebrow { color: var(--sp-bronze); }
[data-tone="today"] .sp-eyebrow { color: var(--sp-link); }
[data-tone="today"] .sp-eyebrow::before {
  background:
    linear-gradient(var(--sp-sky), var(--sp-sky)) left center / 20px 1px no-repeat,
    radial-gradient(circle, var(--sp-sky) 60%, transparent 62%) right center / 7px 7px no-repeat;
}
[data-tone="past"] .sp-frame:not(.sp-frame--medallion) { background: var(--sp-night-2); border-color: var(--sp-gold-300); }
[data-tone="past"] .sp-frame:not(.sp-frame--medallion)::after { border-color: rgba(214, 140, 59, .65); }

/* 12. Compare slider (wired by js/compare.js) */
.sp-compare {
  --pos: 50%;
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--sp-paper);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y pinch-zoom;
  cursor: ew-resize;
}
.sp-compare > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  background: var(--sp-paper);
  pointer-events: none;
  -webkit-touch-callout: none;
}
.sp-compare__after { z-index: 0; }
.sp-compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 1; }
.sp-compare__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.sp-compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: var(--sp-gold-100);
  box-shadow: 0 0 0 1px rgba(214, 140, 59, .75), 0 0 12px rgba(31, 14, 3, .45);
  pointer-events: none;
}
.sp-compare__knob {
  position: absolute;
  top: 50%;
  /* the whole knob stays inside the frame at both ends; the divider line still runs the full width */
  left: clamp(24px, var(--pos), calc(100% - 24px));
  z-index: 3;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 2px solid var(--sp-gold-500);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 54%, rgba(214, 140, 59, .22) 56%, transparent 60%),
    color-mix(in srgb, var(--sp-ivory) 84%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.6);
  backdrop-filter: blur(8px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(112, 57, 18, .35), 0 6px 16px -4px rgba(31, 14, 3, .45);
  pointer-events: none;
  transition: transform var(--sp-dur-1) var(--sp-ease-out);
}
.sp-compare__knob::before, .sp-compare__knob::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -6px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.sp-compare__knob::before { left: 8px; border-right: 7px solid var(--sp-bronze); }
.sp-compare__knob::after { right: 8px; border-left: 7px solid var(--sp-bronze); }
.sp-compare:hover .sp-compare__knob { transform: scale(1.06); }
.sp-compare.is-dragging .sp-compare__knob { transform: scale(1.1); }
.sp-compare.is-dragging .sp-compare__line { box-shadow: 0 0 0 1px rgba(214, 140, 59, .75), 0 0 18px rgba(246, 183, 91, .7); }
.sp-compare__range:focus-visible ~ .sp-compare__knob { outline: 3px solid var(--sp-sky); outline-offset: 3px; }

/* 13. Filter buttons (a group, each button uses aria-pressed) */
.sp-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-2);
}
.sp-filter button, button.sp-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--sp-tap);
  min-height: var(--sp-tap);
  padding: 8px 16px;
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-round);
  background: var(--sp-ivory);
  color: var(--sp-ink);
  font: 500 .9375rem/1.2 var(--sp-font-label);
}
.sp-filter button:hover, button.sp-filter:hover { border-color: var(--sp-gold-500); background: var(--sp-paper); }
.sp-filter button[aria-pressed="true"], button.sp-filter[aria-pressed="true"] {
  background: var(--sp-bronze);
  border-color: var(--sp-bronze);
  color: var(--sp-gold-100);
  box-shadow: inset 0 0 0 2px var(--sp-bronze), inset 0 0 0 3px rgba(246, 183, 91, .55);
}

/* 14. Accordion (details and summary) */
.sp-accordion { border-top: var(--sp-line) solid var(--sp-sand); }
details.sp-accordion, .sp-accordion details { border-bottom: var(--sp-line) solid var(--sp-sand); }
.sp-accordion details:first-child { border-top: 0; }
.sp-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-4);
  min-height: 48px;
  padding: 10px 2px;
  cursor: pointer;
  list-style: none;
  font: 600 1.25rem/1.25 var(--sp-font-display);
  color: inherit;
}
.sp-accordion summary::-webkit-details-marker { display: none; }
.sp-accordion summary::marker { content: ""; }
.sp-accordion summary::after {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border: var(--sp-line) solid var(--sp-gold-500);
  border-radius: 50%;
  background:
    linear-gradient(var(--sp-bronze), var(--sp-bronze)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--sp-bronze), var(--sp-bronze)) center / 1.5px 10px no-repeat;
  transition: transform var(--sp-dur-2) var(--sp-ease-out);
}
.sp-accordion details[open] > summary::after, details.sp-accordion[open] > summary::after { transform: rotate(45deg); }
.sp-accordion summary:hover { color: var(--sp-bronze); }
.sp-accordion details > :not(summary), details.sp-accordion > :not(summary) { padding: 0 2px var(--sp-space-4); }

/* 15. Lightbox (one dialog made by js/site.js) */
.sp-dialog {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 56px var(--sp-gutter) var(--sp-space-5);
  border: 0;
  background: var(--sp-night);
  color: var(--sp-gold-100);
  overflow: auto;
  overscroll-behavior: contain;
}
.sp-dialog[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-space-3); }
.sp-dialog::backdrop { background: rgba(31, 14, 3, .82); }
.sp-dialog figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-space-3); max-width: 100%; }
.sp-dialog img {
  width: auto;
  height: auto;
  max-width: min(100%, 1600px);
  max-height: calc(100dvh - 190px);
  object-fit: contain;
  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);
}
.sp-dialog figcaption, .sp-dialog p { max-width: var(--sp-measure); font-size: var(--sp-fs-small); text-align: center; }
.sp-dialog a { color: var(--sp-gold-100); text-decoration-color: var(--sp-gold-300); display: inline-flex; align-items: center; min-height: var(--sp-tap); }
.sp-dialog button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--sp-tap);
  min-height: var(--sp-tap);
  padding: 0 16px;
  border: var(--sp-line) solid var(--sp-gold-300);
  border-radius: var(--sp-radius-s);
  background: rgba(45, 21, 4, .85);
  color: var(--sp-gold-100);
  font: 600 .9375rem/1 var(--sp-font-label);
}
.sp-dialog button:hover { background: var(--sp-bronze); }
.sp-dialog .sp-dialog__close, .sp-dialog [data-sp-close] {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 2;
}
@media (min-width: 900px) {
  .sp-dialog {
    width: min(96vw, 1680px);
    height: auto;
    max-height: 96dvh;
    margin: auto;
    padding: 64px var(--sp-space-6) var(--sp-space-5);
    border: var(--sp-line) solid var(--sp-gold-300);
    border-radius: var(--sp-radius-m);
    box-shadow: var(--sp-shadow-2);
  }
  .sp-dialog .sp-dialog__close, .sp-dialog [data-sp-close] { position: absolute; top: 12px; right: 12px; }
}

/* 16. Film grain overlay (static tile, moved in 6 steps) */
.sp-grain { position: relative; overflow: clip; isolation: isolate; }
.sp-grain::after {
  content: "";
  position: absolute;
  inset: -48px;
  z-index: 5;
  pointer-events: none;
  background: url("../assets/ui/grain-160.webp") 0 0 / 160px 160px repeat;
  opacity: .08;
}

/* 17. Footer */
.sp-footer {
  position: relative;
  padding: var(--sp-space-7) max(var(--sp-gutter), env(safe-area-inset-left)) calc(var(--sp-space-5) + env(safe-area-inset-bottom));
  background: var(--sp-paper-grain) 0 0 / 180px 180px, linear-gradient(180deg, var(--sp-paper) 0%, var(--sp-sand-light) 100%);
  color: var(--sp-ink);
  border-top: 3px double var(--sp-gold-500);
}
.sp-footer::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 6v16M9 11h10' fill='none' stroke='%23703912' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat,
    var(--sp-ivory);
  box-shadow: 0 0 0 1px var(--sp-gold-500);
  z-index: 1;
}
.sp-footer__inner {
  width: min(100%, var(--sp-wrap));
  margin-inline: auto;
  display: grid;
  gap: var(--sp-space-5);
}
.sp-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-space-3); }
.sp-footer__brand img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  filter: drop-shadow(0 6px 16px rgba(45, 21, 4, .22));
}
.sp-footer .sp-brand__name { color: var(--sp-ink); white-space: normal; }
.sp-footer .sp-brand__saint { font-size: 1.75rem; }
.sp-footer .sp-brand__rcc { margin-top: 4px; font-size: 1rem; color: var(--sp-bronze); letter-spacing: .06em; }
.sp-footer .sp-brand__name small { margin-top: 6px; color: var(--sp-muted); font-size: .875rem; }
.sp-footer__motto {
  font-family: var(--sp-font-display);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sp-ink-soft);
}
.sp-footer__contact { display: grid; gap: var(--sp-space-1); align-content: start; font-size: var(--sp-fs-small); }
.sp-footer__contact > * { margin: 0; }
.sp-footer__contact dt, .sp-footer__contact strong, .sp-footer__contact b {
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-label)/1.4 var(--sp-font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sp-footer__contact dd { margin: 0 0 var(--sp-space-2); }
.sp-footer a { color: var(--sp-link); text-decoration-color: var(--sp-gold-500); }
.sp-footer .sp-link { color: var(--sp-link); text-decoration-color: var(--sp-gold-500); font-size: 1rem; }
.sp-footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-space-4);
  align-content: start;
}
.sp-footer__nav a {
  display: flex;
  align-items: center;
  min-height: var(--sp-tap);
  padding: 4px 0;
  border-bottom: var(--sp-line) solid rgba(112, 57, 18, .18);
  font: 500 .9375rem/1.25 var(--sp-font-label);
  text-decoration: none;
}
.sp-footer__nav a:hover { color: var(--sp-bronze); text-decoration: underline; }
.sp-footer__note {
  width: min(100%, var(--sp-measure));
  margin: var(--sp-space-5) auto 0;
  color: var(--sp-ink-soft);
  font-size: .875rem;
  line-height: 1.55;
  text-align: center;
}
.sp-footer__inner + .sp-footer__note { margin-top: var(--sp-space-6); padding-top: var(--sp-space-4); border-top: var(--sp-line) solid rgba(112, 57, 18, .2); }
@media (min-width: 768px) {
  .sp-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
}

/* 17b. Full-screen before and after viewer (js/site.js SP.viewer) */
.sp-viewer-able { cursor: zoom-in; }
.sp-viewer-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--sp-space-3) 0;
  color: var(--sp-muted);
  font: 500 var(--sp-fs-label)/1.4 var(--sp-font-label);
  letter-spacing: .03em;
}
.sp-viewer-hint::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: var(--sp-line) solid var(--sp-gold-500);
  background: radial-gradient(circle, var(--sp-gold-500) 0 3px, transparent 3.5px 6px, rgba(214, 140, 59, .45) 6.5px 7.5px, transparent 8px);
}
.sp-section--dark .sp-viewer-hint, [data-tone="past"] .sp-viewer-hint { color: var(--sp-gold-100); }
html.sp-has-viewer, html.sp-has-viewer body { overflow: hidden; }
.sp-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(112, 57, 18, .38), transparent 70%),
    var(--sp-night);
  color: var(--sp-gold-100);
}
.sp-viewer[open] { display: flex; align-items: center; justify-content: center; touch-action: pinch-zoom; }
.sp-viewer::backdrop { background: rgba(31, 14, 3, .9); }
.sp-viewer__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-3);
  width: 100%;
  margin: 0;
  padding: 64px 0 max(16px, env(safe-area-inset-bottom));
}
.sp-viewer__stage { display: flex; justify-content: center; width: 100%; }
.sp-viewer .sp-compare {
  flex: none;
  max-width: calc(100% - 32px);
  box-shadow: 0 0 0 1px rgba(246, 183, 91, .55), 0 28px 60px -24px rgba(0, 0, 0, .9);
  transform-origin: center center;
  will-change: transform;
}
/* cover, not contain: an original and its color version with different shapes still line up at one scale */
.sp-viewer .sp-compare > img { object-fit: cover; object-position: 50% 30%; background: var(--sp-night-2); }
.sp-viewer__caption {
  max-width: var(--sp-measure);
  padding-inline: max(var(--sp-gutter), env(safe-area-inset-left)) max(var(--sp-gutter), env(safe-area-inset-right));
  color: var(--sp-gold-100);
  font: italic 500 1.125rem/1.4 var(--sp-font-display);
  text-align: center;
}
.sp-viewer__close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 6;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--sp-line) solid var(--sp-gold-300);
  border-radius: 50%;
  background: rgba(31, 14, 3, .72);
  color: var(--sp-gold-100);
  box-shadow: 0 0 0 3px rgba(31, 14, 3, .5), 0 6px 18px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform var(--sp-dur-1) var(--sp-ease-out);
}
.sp-viewer__close:hover { background: var(--sp-bronze); }
.sp-viewer__close:active { transform: scale(.94); }
@media (min-width: 768px) {
  .sp-viewer .sp-compare { max-width: 100%; }
  .sp-viewer__figure { padding: 72px 48px 32px; }
  .sp-viewer__close { top: 16px; right: 16px; width: 52px; height: 52px; }
}

/* 17c. Phone action bar: Call, Directions, Mass times (made by js/site.js, phones only) */
.sp-dock { display: none; }
@media (max-width: 767.98px) {
  .sp-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: calc(56px + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: color-mix(in srgb, var(--sp-ivory) 88%, transparent); /* light frosted glass, like the top bar (Coach 2026-10-06) */
    -webkit-backdrop-filter: saturate(2) blur(22px);
    backdrop-filter: saturate(2) blur(22px);
    border-top: var(--sp-line) solid rgba(201, 138, 52, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 -12px 28px -20px rgba(45, 21, 4, .45);
    transition: transform var(--sp-dur-2) var(--sp-ease-out), opacity var(--sp-dur-2) var(--sp-ease-out);
  }
  .sp-dock--lifted { bottom: var(--sp-dock-lift, 0px); height: 56px; padding-bottom: 0; }
  .sp-dock.is-hidden { transform: translateY(calc(100% + var(--sp-dock-lift, 0px) + 2px)); }
  .sp-header.is-open ~ .sp-dock, html.sp-has-viewer .sp-dock, html.sp-has-dialog .sp-dock {
    transform: translateY(calc(100% + var(--sp-dock-lift, 0px) + 2px));
    opacity: 0;
    pointer-events: none;
  }
  .sp-dock__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: var(--sp-tap);
    min-height: 56px;
    padding: 4px 6px;
    color: var(--sp-ink);
    font: 600 var(--sp-fs-label)/1.15 var(--sp-font-label);
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
  }
  .sp-dock__item + .sp-dock__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: linear-gradient(transparent, rgba(201, 138, 52, .45), transparent);
  }
  .sp-dock__item svg { color: var(--sp-bronze); }
  .sp-dock__item:active { background: rgba(201, 138, 52, .12); }
  .sp-dock__item:focus-visible { outline-offset: -4px; }
  html.sp-has-dock .sp-footer {
    padding-bottom: calc(var(--sp-space-6) + 56px + var(--sp-dock-lift, 0px) + env(safe-area-inset-bottom));
  }
}

/* 17c2. Back to top (made by js/site.js on every page, Coach 2026-10-07): a round frosted button, bottom right, shown
   after one screen of scrolling. --sp-totop-lift is the height of a full-width bar fixed at the bottom of the screen. */
.sp-totop {
  position: fixed;
  right: max(var(--sp-space-4), env(safe-area-inset-right));
  bottom: calc(var(--sp-space-4) + var(--sp-totop-lift, env(safe-area-inset-bottom)));
  z-index: 44;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--sp-line) solid rgba(201, 138, 52, .55);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sp-ivory) 88%, transparent);
  -webkit-backdrop-filter: saturate(2) blur(22px);
  backdrop-filter: saturate(2) blur(22px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px -12px rgba(45, 21, 4, .55);
  color: var(--sp-bronze);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--sp-dur-2) var(--sp-ease-out), transform var(--sp-dur-2) var(--sp-ease-out), visibility 0s linear var(--sp-dur-2);
}
.sp-totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sp-totop:hover { background: var(--sp-ivory); }
.sp-totop:active { transform: scale(.94); }
.sp-totop svg { width: 24px; height: 24px; }
html.sp-menu-open .sp-totop, html.sp-has-viewer .sp-totop, html.sp-has-dialog .sp-totop { opacity: 0; visibility: hidden; }
/* The last footer note that shows (the draft note shows only in Vietnamese and Spanish) ends above the button. */
html.sp-js .sp-footer__note:not([hidden]):not(:has(~ .sp-footer__note:not([hidden]))) { margin-bottom: calc(48px + var(--sp-space-2)); }
@media (min-width: 768px) {
  .sp-totop { right: max(var(--sp-space-5), env(safe-area-inset-right)); bottom: calc(var(--sp-space-5) + var(--sp-totop-lift, env(safe-area-inset-bottom))); }
}

/* 17d. Not-found page (404.html) */
.sp-notfound {
  display: grid;
  place-items: start center;
  min-height: calc(100svh - var(--sp-header-h) - 40px);
  padding: var(--sp-space-7) max(var(--sp-gutter), env(safe-area-inset-left)) var(--sp-space-8) max(var(--sp-gutter), env(safe-area-inset-right));
  background: radial-gradient(90% 70% at 50% 30%, var(--sp-paper), var(--sp-ivory) 70%);
  text-align: center;
}
.sp-notfound__inner { display: flex; flex-direction: column; align-items: center; max-width: 34rem; }
.sp-notfound__emblem { width: min(52vw, 220px); height: auto; margin-bottom: var(--sp-space-5); border-radius: 50%; filter: drop-shadow(0 10px 26px rgba(45, 21, 4, .28)); }
.sp-notfound__code { justify-content: center; }
.sp-notfound__title { margin-bottom: var(--sp-space-3); font-size: var(--sp-fs-h1); }
.sp-notfound__text { margin-bottom: var(--sp-space-5); color: var(--sp-ink-soft); }
.sp-notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-space-3); margin: 0; padding: 0; list-style: none; }
@media (max-width: 479.98px) {
  .sp-notfound__links { flex-direction: column; align-items: stretch; width: 100%; }
  /* room for two lines, so the translated title never pushes the links down */
  .sp-notfound__title { min-height: calc(2 * var(--sp-lh-tight) * 1em); display: flex; align-items: center; justify-content: center; }
  .sp-notfound__text { min-height: calc(3 * var(--sp-lh-text) * 1em); align-content: center; }
}

/* 18. Reveal, transitions, motion (only when the reader has not asked for less motion) */
@keyframes sp-reveal-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sp-fade-in { from { opacity: 0; } }
@keyframes sp-drawer-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes sp-grain-jitter {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-18px, 10px); }
  33% { transform: translate(12px, -16px); }
  50% { transform: translate(-8px, 22px); }
  67% { transform: translate(20px, 6px); }
  83% { transform: translate(-14px, -10px); }
  100% { transform: translate(0, 0); }
}
@keyframes sp-sepia-out { to { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .sp-brand__emblem { view-transition-name: sp-emblem; }
  .sp-header { view-transition-name: sp-header; }
  .sp-dock { view-transition-name: sp-dock; }
  ::view-transition-group(sp-header) { animation-duration: 300ms; animation-timing-function: var(--sp-ease-out); }
  ::view-transition-old(root) { animation: 220ms ease-in both sp-page-out; }
  ::view-transition-new(root) { animation: 420ms var(--sp-ease-out) 60ms both sp-page-in; }

  .sp-header.is-open .sp-nav,
  .sp-header:has(.sp-menu-toggle[aria-expanded="true"]) .sp-nav { animation: sp-drawer-in var(--sp-dur-2) var(--sp-ease-out); }
  .sp-lang__list:not([hidden]) { animation: sp-drawer-in var(--sp-dur-2) var(--sp-ease-out); }
  .sp-dialog[open] { animation: sp-fade-in var(--sp-dur-2) var(--sp-ease-out); }

  @supports (animation-timeline: view()) {
    .sp-reveal {
      animation: sp-reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 85%;
    }
  }
  @supports not (animation-timeline: view()) {
    html.sp-js .sp-reveal {
      transition: opacity var(--sp-dur-3) var(--sp-ease-out), transform var(--sp-dur-3) var(--sp-ease-out);
    }
    html.sp-js .sp-reveal:not(.is-in) { opacity: 0; transform: translateY(12px); }
  }
}

/* 18b. The gold thread (shared motif), footer rule from the cross, presses, header frost (amazing round 2026-10-06) */
.sp-header::before, .sp-header::after { content: none; }
@keyframes sp-thread { to { transform: translateX(0); } }
@keyframes sp-rule-open { from { transform: scaleX(0); } }
@keyframes sp-cross-glint { 50% { box-shadow: 0 0 0 1px var(--sp-gold-500), 0 0 22px 6px rgba(246, 183, 91, .6); } }
@keyframes sp-header-settle {
  from { background-color: var(--sp-ivory); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
  to { background-color: color-mix(in srgb, var(--sp-ivory) 82%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 rgba(246, 183, 91, .25), 0 12px 28px -20px rgba(45, 21, 4, .5); }
}
@keyframes sp-page-out { to { opacity: 0; filter: sepia(.35) brightness(1.06); } }
@keyframes sp-page-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) {
  .sp-btn, .sp-link, a.sp-chip, button.sp-chip, .sp-filter button, button.sp-filter,
  .sp-lang__toggle, .sp-menu-toggle, .sp-dock__item, .sp-nav a, .sp-viewer__close {
    transition: transform var(--sp-dur-1) var(--sp-ease-out);
  }
  .sp-btn:active, .sp-link:active, a.sp-chip:active, button.sp-chip:active, .sp-filter button:active, button.sp-filter:active,
  .sp-lang__toggle:active, .sp-menu-toggle:active, .sp-dock__item:active, .sp-nav a:active, .sp-viewer__close:active {
    transform: scale(.97);
    transition-duration: 100ms;
  }
  @media (hover: hover) {
    .sp-btn--primary:hover, .sp-btn--gold:hover { transform: translateY(-1px); }
  }
  @supports (animation-timeline: scroll()) {
    .sp-header {
      animation: sp-header-settle linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 140px;
    }
    .sp-header::after, .sp-header::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      pointer-events: none;
      transform: translateX(-100%);
      animation: sp-thread linear both;
      animation-timeline: scroll(root block);
    }
    .sp-header::after {
      bottom: -1px;
      height: 2px;
      background: linear-gradient(90deg, rgba(214, 140, 59, 0), var(--sp-gold-500) 12%, var(--sp-gold-300) 85%, var(--sp-gold-100));
    }
    .sp-header::before {
      bottom: -4px;
      height: 8px;
      background: radial-gradient(circle at calc(100% - 4px) 50%, var(--sp-gold-100) 0 2.5px, rgba(246, 183, 91, .85) 3px, rgba(246, 183, 91, 0) 7px);
    }
    body[data-page="history"] .sp-header::before, body[data-page="history"] .sp-header::after,
    body[data-page="404"] .sp-header::before, body[data-page="404"] .sp-header::after,
    .sp-header.is-open::before, .sp-header.is-open::after,
    .sp-header:has(.sp-menu-toggle[aria-expanded="true"])::before,
    .sp-header:has(.sp-menu-toggle[aria-expanded="true"])::after { content: none; }
  }
  @supports (animation-timeline: view()) {
    .sp-footer { view-timeline: --sp-foot block; border-top-color: transparent; }
    .sp-footer::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -3px;
      height: 3px;
      box-sizing: border-box;
      border-block: 1px solid var(--sp-gold-500);
      pointer-events: none;
      transform-origin: 50% 50%;
      animation: sp-rule-open linear both;
      animation-timeline: --sp-foot;
      animation-range: entry 0% entry 70%;
    }
    .sp-footer::before {
      animation: sp-cross-glint linear both;
      animation-timeline: --sp-foot;
      animation-range: entry 30% entry 90%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .sp-reveal { opacity: 1 !important; transform: none !important; }
}

/* Phones: centered (Coach 2026-10-06) */
@media (max-width: 699px) {
  .sp-footer__inner { text-align: center; }
  .sp-footer__brand { align-items: center; }
  .sp-footer__contact { justify-items: center; }
  .sp-footer__nav a { justify-content: center; text-align: center; }
}