@charset "UTF-8";
/* ============================================================================
   SANGUIS CHRISTI · Devotion to the Most Precious Blood of Jesus Christ
   Design system — dark gothic / sacral, WCAG AAA text contrast throughout.
   ========================================================================== */

/* ───────────────────────────── 1. TOKENS ───────────────────────────── */

:root {
  /* Surfaces */
  --bg-primary:        #0a0304;   /* Deep Crimson Obsidian */
  --bg-secondary:      #140507;   /* Sacred Velvet */
  --bg-footer:         #050102;
  /* Near-opaque, so the prayers sit on a still, dark page and never on the
     falling drops and light rays of the canvas behind them. */
  --card-bg:           rgba(14, 5, 6, 0.94);

  /* Ink — set for large print: every value below is ≥ 10:1 on --bg-primary,
     well past WCAG AAA (7:1). Nothing a reader reads is dimmed any more; the
     old muted greys and the 9.7:1 gold were legible, but not bright. */
  --text-primary:      #fffaf1;   /* Light Parchment  · 19.7:1 */
  --text-secondary:    #f1e8da;   /* Aged Parchment   · 16.8:1 */
  --text-muted:        #d9ccb8;   /*                  · 12.9:1 */
  --text-gold-soft:    #ffe6a6;   /* long gold passages · 16.7:1 */

  /* Accents */
  --accent-gold:       #f3c64d;   /* Divine Gold      · 12.6:1 */
  --accent-gold-bright:#ffdd6e;   /* Bright Gold      · 15.4:1 */
  --accent-blood:      #8b0000;   /* Blood Crimson — decorative only */
  --accent-crimson:    #a71d2a;   /* Passion Red   — decorative only */
  --accent-rose:       #ff9fae;   /* text tint of Passion Red · 10.5:1 */

  /* Faces. Lora carries every word that is read: a sturdy book serif with a
     tall x-height and full Cyrillic. Cinzel is kept for the brand and the
     hero title only; it has no Cyrillic, so Ukrainian falls through to Lora
     rather than to whatever serif the device happens to have. */
  --font-read:    'Lora', Georgia, 'Times New Roman', serif;
  --font-display: 'Cinzel', 'Lora', Georgia, serif;
  --font-ui:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Lines & glows */
  --border-gold:       rgba(212, 175, 55, 0.35);
  --border-gold-glow:  rgba(212, 175, 55, 0.75);
  --glow-blood:        rgba(139, 0, 0, 0.55);
  --shadow-ink:        0 2px 4px rgba(0, 0, 0, 0.9);
  --shadow-ink-strong: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.7);

  /* Display cutouts. Named once here so every fixed element can respect the
     notch, the home indicator and the landscape ears without repeating the
     env() calls — the installed app runs edge-to-edge on iOS, where the web
     view genuinely extends under the status bar. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Metrics */
  --header-h: 64px;
  --header-total: calc(var(--header-h) + var(--safe-top));
  --gutter: clamp(14px, 3.5vw, 34px);
  --maxw: 1060px;
  --radius: 14px;
  --radius-sm: 9px;
  --speed: 0.28s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* The reader's own text size, chosen with the "Aa" control and restored
     by the boot script before the first paint. 1 is the default large print;
     it multiplies every size a reader reads, and nothing in the chrome. */
  --zoom: 1;

  /* Fluid type scale — about 22px of Lora on a phone, 28px on a desktop. */
  --fs-body:    calc(clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem) * var(--zoom));
  --fs-lead:    calc(clamp(1.45rem, 1.26rem + 0.85vw, 1.9rem) * var(--zoom));
  --fs-section: calc(clamp(1.7rem, 1.35rem + 1.6vw, 2.6rem) * var(--zoom));
  --fs-sub:     calc(clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem) * var(--zoom));
  --fs-small:   calc(clamp(1.1rem, 1rem + 0.4vw, 1.35rem) * var(--zoom));
  --fs-ui:      clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
}

/* ───────────────────────────── 2. RESET ───────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-total) + 18px);
  -webkit-text-size-adjust: 100%;
}

/* Set by the inline boot script and dropped on load. Anchored navigation is
   smooth once the reader is driving; the opening jump must not be, or the
   page appears to travel into a prayer by itself. */
html.js-boot { scroll-behavior: auto; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(90, 12, 18, 0.55) 0%, transparent 62%),
    radial-gradient(ellipse 90% 55% at 50% 105%, rgba(60, 8, 12, 0.45) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-read);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.65;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  /* No -webkit-font-smoothing: antialiased. On macOS it thins every stroke,
     which is the opposite of what large print is for. */
}

img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
ul { list-style: none; }
a { color: var(--accent-gold); }

:focus-visible {
  outline: 2px solid var(--accent-gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 3000;
  padding: 12px 22px;
  background: var(--bg-secondary);
  border: 1px solid var(--accent-gold);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--accent-gold);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--speed) var(--ease);
}
.skip-link:focus-visible { top: 0; }

.ico { width: 1.25em; height: 1.25em; flex: none; }
.ico-sm { width: 1.05em; height: 1.05em; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--gutter), var(--safe-left));
  padding-right: max(var(--gutter), var(--safe-right));
}

/* ────────────────────── 3. AMBIENT BACKDROP ────────────────────── */

#bloodCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Keeps text legible where drops and rays are densest. */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 78% 62% at 50% 45%, rgba(10, 3, 4, 0.62) 0%, rgba(10, 3, 4, 0) 72%),
    linear-gradient(180deg, rgba(10, 3, 4, 0.55) 0%, rgba(10, 3, 4, 0) 22%, rgba(10, 3, 4, 0) 78%, rgba(10, 3, 4, 0.6) 100%);
}

main { position: relative; z-index: 10; padding-top: var(--header-total); }

/* ───────────────────────── 4. HEADER / NAV ───────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  isolation: isolate;   /* own stacking context — never merges with the canvas layer */
  height: var(--header-total);
  padding-top: var(--safe-top);
  background: rgba(10, 3, 4, 0.9);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--border-gold);
  transition: background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(6, 2, 3, 0.97);
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.6);
}

.header-inner {
  height: 100%;
  /* Wider than the reading column on purpose: at its larger type the
     seven-item rail needs up to ~985px of links (Spanish and Italian are the
     widest), plus ~290px of controls, plus the wordmark once it returns. */
  max-width: 1760px;
  margin-inline: auto;
  padding-left: max(clamp(12px, 2.6vw, 26px), var(--safe-left));
  padding-right: max(clamp(12px, 2.6vw, 26px), var(--safe-right));
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent-gold);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.8rem + 0.45vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 1.1px;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;       /* never shrinks, never grows */
}
.brand .ico { color: var(--accent-rose); }
.brand:hover { color: var(--accent-gold-bright); }

/* The nav takes the space that is left over and is clipped at its own edge,
   so a long translation can never paint across the language switcher. */
.main-nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.main-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(10px, 1.5vw, 22px);
}
.main-nav a,
.drawer-nav a {
  position: relative;
  display: block;
  padding: 6px 0;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--speed) var(--ease);
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent-gold);
  transition: width var(--speed) var(--ease);
}
.main-nav a:hover, .main-nav a.is-active,
.drawer-nav a:hover, .drawer-nav a.is-active { color: var(--accent-gold); }
.main-nav a:hover::after, .main-nav a.is-active::after { width: 100%; }

/* Reserved space on the right. flex-shrink:0 keeps the navigation from ever
   being able to push into or overflow across these controls. */
.header-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: auto;   /* stays pinned right when the nav rail is hidden */
  position: relative;
  z-index: 2;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease),
              background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.btn:hover:not(:disabled) { color: var(--accent-gold); border-color: var(--border-gold); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-icon { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.btn-icon[aria-pressed="true"] {
  color: var(--accent-gold-bright);
  border-color: var(--border-gold-glow);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.32);
}

.btn-primary {
  border-color: var(--border-gold);
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.16), rgba(139, 0, 0, 0.22));
  color: var(--accent-gold);
  text-transform: uppercase;
}
.btn-primary:hover:not(:disabled) {
  color: var(--accent-gold-bright);
  border-color: var(--border-gold-glow);
  box-shadow: 0 0 20px rgba(139, 0, 0, 0.55);
}
.btn-ghost { border-color: rgba(212, 175, 55, 0.2); text-transform: uppercase; }

/* Language switcher */
.lang-switch { position: relative; flex: 0 0 auto; flex-shrink: 0; }
.btn-lang { border-color: var(--border-gold); padding: 8px 12px; color: var(--accent-gold); }
.btn-lang .flag { font-size: 1.05em; line-height: 1; }
.btn-lang .ico:last-child { transition: transform var(--speed) var(--ease); }
.btn-lang[aria-expanded="true"] .ico:last-child { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 222px;
  padding: 8px;
  background: rgba(12, 4, 5, 0.985);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.72);
  z-index: 1200;
}
.lang-menu[hidden] { display: none; }
.lang-option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.lang-option .flag { font-size: 1.3rem; line-height: 1; }
.lang-option .lang-name { flex: 1; }
.lang-option:hover { background: rgba(212, 175, 55, 0.12); color: var(--accent-gold); }
.lang-option.is-current { color: var(--accent-gold-bright); background: rgba(139, 0, 0, 0.24); }

/* ── Voice prayer (Web Speech API) ── */
.voice { position: relative; flex: 0 0 auto; }
.voice .btn-icon.is-speaking {
  color: var(--accent-gold-bright);
  border-color: var(--border-gold-glow);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.32);
}

.voice-panel,
.textsize-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  padding: 16px;
  background: rgba(12, 4, 5, 0.985);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.72);
  text-align: left;
  z-index: 1200;
}
.voice-panel[hidden],
.textsize-panel[hidden] { display: none; }

.voice-panel-title {
  margin-bottom: 13px;
  font-family: var(--font-read);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-gold);
}
.voice-field { margin-bottom: 13px; }
.voice-legend {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.voice-genders { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.voice-gender {
  padding: 10px 6px;
  border: 1px solid var(--border-gold);
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease),
              background var(--speed) var(--ease);
}
.voice-gender:hover:not(:disabled) { color: var(--accent-gold); border-color: var(--border-gold-glow); }
.voice-gender[aria-checked="true"] {
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.18), rgba(139, 0, 0, 0.26));
  border-color: var(--border-gold-glow);
  color: var(--accent-gold-bright);
}
.voice-gender:disabled { opacity: 0.4; cursor: not-allowed; }

.voice-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.voice-actions .btn {
  flex-direction: column;
  gap: 4px;
  padding: 10px 3px;
  border-color: rgba(212, 175, 55, 0.35);
  font-size: 0.82rem;
  letter-spacing: 0.2px;
}

.voice-status {
  margin-top: 13px;
  min-height: 2.6em;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.voice-status.is-warning { color: var(--accent-rose); }

/* ── Text size ("Aa") ── */
.textsize { position: relative; flex: 0 0 auto; }
.textsize-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.textsize-step {
  min-height: 56px;
  border: 1px solid var(--border-gold-glow);
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.1);
  color: var(--accent-gold-bright);
  font-family: var(--font-read);
  font-weight: 700;
  line-height: 1;
}
.textsize-step[data-textsize-step="-1"] { font-size: 1.15rem; }
.textsize-step[data-textsize-step="1"]  { font-size: 1.6rem; }
.textsize-value {
  min-width: 4.4ch;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}
.textsize-hint {
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Reading progress */
.read-progress {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: transparent;
}
.read-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-blood), var(--accent-gold-bright));
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

/* Mobile drawer */
.menu-btn { display: none; }
.drawer { position: fixed; inset: 0; z-index: 1500; }
.drawer[hidden] { display: none; }
/* The backdrop must sit strictly beneath the panel — as a full-bleed overlay
   it would otherwise swallow every tap meant for a navigation link. */
.drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(3, 1, 1, 0.78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: min(340px, 86vw);
  padding: calc(78px + var(--safe-top)) max(26px, var(--safe-right)) calc(30px + var(--safe-bottom)) 26px;
  background: linear-gradient(180deg, #150507, #0a0304);
  border-left: 1px solid var(--border-gold);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.7);
  overflow-y: auto;
  animation: drawerIn var(--speed) var(--ease);
}
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-close { position: absolute; top: calc(14px + var(--safe-top)); right: max(18px, var(--safe-right)); }
.drawer-nav ul { display: flex; flex-direction: column; gap: 4px; }
.drawer-nav a {
  padding: 15px 4px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  color: var(--text-primary);
  font-size: 1.08rem;
  line-height: 1.35;
  white-space: normal;
}

/* ── Install / offline app ── */
.install { position: relative; flex: 0 0 auto; }
.install[hidden] { display: none; }

.install-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 274px;
  padding: 16px;
  background: rgba(12, 4, 5, 0.985);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.72);
  text-align: left;
  z-index: 1200;
}
.install-panel[hidden] { display: none; }

.install-title {
  margin-bottom: 9px;
  font-family: var(--font-read);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-gold);
}
.install-body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.install-ios {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgba(212, 175, 55, 0.22);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.install-ios[hidden] { display: none; }

.install-go {
  width: 100%;
  margin-top: 13px;
  justify-content: center;
}
.install-go[hidden] { display: none; }

/* The app's own live region: cache ready, network lost, update waiting. */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 1400;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, calc(100vw - 28px - var(--safe-left) - var(--safe-right)));
  padding: 11px 12px 11px 15px;
  background: rgba(12, 4, 5, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.app-toast[hidden] { display: none; }
.app-toast.is-open { opacity: 1; transform: translate(-50%, 0); }

.app-toast-icon { display: inline-flex; flex: 0 0 auto; color: var(--accent-gold); }
.app-toast-icon[hidden] { display: none; }
.app-toast-text { flex: 1 1 auto; min-width: 0; }

.app-toast-action {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid var(--border-gold-glow);
  border-radius: 7px;
  background: rgba(212, 175, 55, 0.13);
  color: var(--accent-gold-bright);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.app-toast-action:hover { background: rgba(212, 175, 55, 0.24); border-color: var(--accent-gold); }
.app-toast-action[hidden] { display: none; }

.app-toast-close {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}
.app-toast-close:hover { color: var(--accent-gold); }
.app-toast-close .ico { width: 17px; height: 17px; }

/* Inside the Android app (html.is-app, set by the boot script from the
   app's user agent). The prayers ship inside the app itself, so there is
   nothing to install and nothing to report about a cache; the web view has
   no print dialog either. */
.is-app .install,
.is-app [data-print] { display: none !important; }

/* A hairline along the top of the header while the device has no network —
   quiet enough to pray under, present enough to explain a missing image. */
body.is-offline .site-header { box-shadow: inset 0 2px 0 0 var(--accent-crimson); }

@media (prefers-reduced-motion: reduce) {
  .app-toast { transition: opacity 0.01ms; transform: translate(-50%, 0); }
}

/* ────────────────────────────── 5. HERO ────────────────────────────── */

.hero {
  height: calc(100vh - var(--header-total));
  height: calc(100svh - var(--header-total));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 1vh, 12px);
  padding: clamp(6px, 1.6vh, 20px) 0 clamp(4px, 1.2vh, 14px);
  text-align: center;
  overflow: hidden;           /* hard guarantee: never spills past the first fold */
}

.hero-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.1vh, 14px);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.8rem + 2.6vh, 2.6rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 1px;
  color: var(--accent-gold);
  text-wrap: balance;
  max-width: 22ch;
  text-shadow: 0 0 16px rgba(212, 175, 55, 0.35), 0 0 34px rgba(139, 0, 0, 0.75), var(--shadow-ink);
}

.hero-quote { max-width: 62ch; }
.hero-quote p {
  font-size: clamp(1rem, 0.72rem + 1.45vh, 1.45rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--text-primary);
  text-shadow: var(--shadow-ink);
}
.hero-quote cite {
  display: block;
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 0.68rem + 0.35vh, 0.9rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.crucifix-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid var(--accent-gold);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.2), rgba(139, 0, 0, 0.15));
  /* Permanent halo. The keyframes only intensify this — the animation is never
     the sole source of the glow, so it survives reduced-motion, paused or
     unsupported animation, and every viewport width. */
  box-shadow: 0 0 26px var(--glow-blood),
              0 0 52px rgba(139, 0, 0, 0.5),
              inset 0 0 14px rgba(212, 175, 55, 0.28);
  animation: haloPulse 5s infinite alternate ease-in-out;
}
.crucifix-img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  filter: contrast(1.05) brightness(0.96);
}

@keyframes haloPulse {
  0%   { box-shadow: 0 0 22px var(--glow-blood), inset 0 0 10px rgba(212, 175, 55, 0.2); }
  100% { box-shadow: 0 0 44px rgba(212, 175, 55, 0.5), 0 0 72px rgba(139, 0, 0, 0.9),
                     inset 0 0 22px rgba(212, 175, 55, 0.4); }
}

.scroll-cue {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--accent-gold);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: clamp(0.78rem, 0.7rem + 0.3vh, 0.9rem);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: cueBounce 2.4s infinite;
}
.scroll-cue:hover { color: var(--accent-gold-bright); }
@keyframes cueBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-7px); }
  60% { transform: translateY(-3px); }
}

/* ──────────────────────── 6. SECTION CARDS ──────────────────────── */

.section-card {
  position: relative;
  margin: clamp(46px, 8vw, 84px) 0;
  padding: clamp(28px, 4.6vw, 52px) clamp(16px, 4vw, 48px);
  background: var(--card-bg);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  box-shadow: 0 0 26px rgba(139, 0, 0, 0.24), inset 0 0 60px rgba(10, 3, 4, 0.45);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.section-card:hover {
  border-color: var(--border-gold-glow);
  box-shadow: 0 0 40px rgba(139, 0, 0, 0.36), inset 0 0 60px rgba(10, 3, 4, 0.5);
}
.section-card::before {
  content: '✝';
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--bg-primary);
  border: 1px solid var(--accent-gold);
  border-radius: 50%;
  color: var(--accent-gold);
  font-size: 1.1rem;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

.section-header {
  margin-bottom: clamp(22px, 3.4vw, 36px);
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border-gold);
  text-align: center;
}
.section-index {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-read);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.25;
  color: var(--accent-gold);
  text-wrap: balance;
  text-shadow: var(--shadow-ink-strong);
}
.section-subtitle {
  margin-top: 10px;
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent-rose);
  text-shadow: var(--shadow-ink);
}

/* ────────────────────── 7. PRAYER TYPOGRAPHY ────────────────────── */

/* The reading measure. The card is allowed to be as wide as the layout gives
   it — the gilded frame reads better broad — but the prose inside is capped at
   a comfortable line and centred within it. Left unbounded, a 1920px screen
   ran the prayers past 90 characters a line, which is where the eye starts
   losing its place returning to the left margin. */
.prayer-text { color: var(--text-primary); }
.prayer-text > * + * { margin-top: 1em; }
/* :where() keeps this at zero added specificity, so the blocks that already
   declare a narrower measure of their own — the lead, the rule — keep it. */
.prayer-text > :where(p, ul, ol) { max-width: 66ch; margin-inline: auto; }

/* Ragged right, no indent, no hyphenation: justified large print opens
   uneven gaps between words, and a broken word is one more thing to read. */
.prayer-text p { text-align: left; text-indent: 0; hyphens: manual; }
/* Where supported, no line ends on a lone word ("помилуй / мене.") — the
   last two words of a line travel together. Elsewhere, plain wrapping. */
.prayer-text p, .litany-item, .promise-box p, .instruction-box p { text-wrap: pretty; }

.lead, .chant, .poem, .note { text-indent: 0 !important; text-align: center !important; }

/* Upright, not italic: a whole prayer set in italic tires the eye, and the
   pale gold already sets it apart. */
.lead {
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-gold-soft);
  max-width: 60ch;
  margin-inline: auto;
}
.chant {
  font-weight: 700;
  color: var(--accent-gold);
}
.poem {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--text-primary);
}
.chant .line,
.poem .line { display: block; text-wrap: balance; }
.poem .line { line-height: 1.5; padding-block: 0.15em; }
.note {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--text-muted);
}

.sacred-rule {
  border: 0;
  height: 1px;
  margin: clamp(24px, 4vw, 38px) auto;
  max-width: 70%;
  background: linear-gradient(90deg, transparent, var(--border-gold-glow), transparent);
}

/* Litanies */
.litany-group {
  /* `auto` inline, so a litany sits on the same reading measure as the
     paragraphs around it instead of hugging the left edge of a wide card. */
  margin: 1.5em auto;
  padding-left: clamp(12px, 2vw, 20px);
  border-left: 2px solid var(--accent-crimson);
}
.litany-item {
  margin-bottom: 0.7em;
  line-height: 1.5;
}
.litany-item:last-child { margin-bottom: 0; }
.litany-call { color: var(--text-primary); }
/* Bold gold rather than italic: the colour and the weight mark the people's
   answer clearly, and upright type stays easy to read at this size. */
.litany-response {
  color: var(--accent-gold);
  font-weight: 700;
}

/* Numbered litany (1.–10.) — the counter is drawn in gold outside the text
   column so the invocations stay flush with the unnumbered litanies above. */
.litany-numbered {
  list-style: none;
  counter-reset: litany;
}
.litany-numbered .litany-item {
  position: relative;
  padding-left: 2.3em;
  counter-increment: litany;
  margin-bottom: 0.9em;
}
.litany-numbered .litany-item::before {
  content: counter(litany) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9em;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-gold);
}

/* The antiphon said before and after the litany. */
.refrain {
  text-indent: 0 !important;
  text-align: center !important;
  max-width: 46ch;
  margin-inline: auto;
  padding: 0.55em 1.2em;
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.45;
  color: var(--accent-gold-bright);
  text-wrap: balance;
  border-block: 1px solid var(--border-gold-glow);
}

/* Instruction & promise boxes */
.instruction-box, .promise-box {
  margin: 1.7em 0;
  padding: clamp(16px, 2.6vw, 26px) clamp(16px, 3vw, 30px);
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.instruction-box {
  background: rgba(139, 0, 0, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--text-primary);
}
.promise-box {
  background: linear-gradient(150deg, rgba(139, 0, 0, 0.3), rgba(212, 175, 55, 0.08));
  border: 1px solid var(--border-gold-glow);
  box-shadow: inset 0 0 34px rgba(139, 0, 0, 0.24), 0 0 24px rgba(139, 0, 0, 0.3);
  color: var(--text-primary);
  text-align: center;
}
.instruction-box p, .promise-box p { text-indent: 0; text-align: left; }
.promise-box p { text-align: center; }
.instruction-box p + p, .promise-box p + p { margin-top: 0.8em; }

.box-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 0.7em;
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent-gold-bright);
  text-align: center;
}
.instruction-box strong, .promise-box strong { color: var(--accent-gold-bright); }
.instruction-box em, .promise-box em { color: var(--accent-rose); font-style: italic; }

/* ───────────── 8. NAME RUBRIC (personal consecration) ───────────── */

.user-name {
  color: var(--accent-gold-bright);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--border-gold-glow);
  text-underline-offset: 5px;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.45), var(--shadow-ink);
  white-space: nowrap;
}

/* ────────────────────── 9. 33-DAY PRAYER TRACKER ────────────────────── */

.tracker {
  margin: 1.9em 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  background: rgba(20, 5, 7, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  text-align: center;
}
.tracker-title {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--accent-gold);
}
.tracker-lead {
  margin-top: 7px;
  font-size: var(--fs-small);
  color: var(--text-primary);
  text-indent: 0;
  text-align: center;
}
.tracker-bar {
  position: relative;
  height: 9px;
  margin: 18px 0 12px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: rgba(10, 3, 4, 0.9);
  overflow: hidden;
}
.tracker-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-blood), var(--accent-gold-bright));
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.55);
  transition: width 0.55s var(--ease);
}
.tracker-status {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--accent-gold-bright);
  text-indent: 0;
  text-align: center;
  min-height: 1.4em;
}

.tracker-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 4px;
}
.tracker-dots i {
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  background: rgba(10, 3, 4, 0.8);
  transition: background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.tracker-dots i.is-done {
  background: radial-gradient(circle at 35% 30%, var(--accent-gold-bright), var(--accent-blood));
  box-shadow: 0 0 9px rgba(212, 175, 55, 0.75);
}

.tracker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

/* ───────────────────────── 10. FOOTER / TOP ───────────────────────── */

.site-footer {
  position: relative;
  z-index: 10;
  margin-top: clamp(40px, 8vw, 80px);
  padding: clamp(34px, 6vw, 58px) 0 calc(clamp(34px, 6vw, 58px) + var(--safe-bottom));
  background: var(--bg-footer);
  border-top: 1px solid var(--border-gold);
  text-align: center;
  color: var(--text-secondary);
}
.footer-motto {
  font-family: var(--font-read);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent-gold);
  text-wrap: balance;
}
.footer-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 24px 0 20px;
}
.footer-langs a {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  text-decoration: none;
}
.footer-langs a:hover { color: var(--accent-gold); }
.footer-langs a[aria-current="true"] { color: var(--accent-gold-bright); }
.footer-note { font-size: var(--fs-small); font-style: italic; color: var(--text-muted); max-width: 62ch; margin-inline: auto; }
/* Offline status. Reads as a quiet fact, not a badge — it is only ever gold
   once the whole devotion is genuinely on the device. */
.footer-offline {
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  max-width: 46ch;
  margin-inline: auto;
}
.footer-offline.is-complete { color: var(--accent-gold); }
.footer-offline.is-complete::before { content: '✓'; margin-inline-end: 8px; }

.footer-copy {
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.to-top {
  position: fixed;
  right: max(clamp(14px, 3vw, 28px), var(--safe-right));
  bottom: calc(clamp(14px, 3vw, 28px) + var(--safe-bottom));
  z-index: 900;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  background: rgba(12, 4, 5, 0.92);
  color: var(--accent-gold);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease),
              visibility var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--accent-gold-bright); box-shadow: 0 0 20px rgba(139, 0, 0, 0.6); }

/* ───────────────────────── 11. REVEAL / MOTION ───────────────────────── */

.js-reveal .reveal { opacity: 0; transform: translateY(26px); }
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

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

  /* The pulse stops, the halo does not. */
  .crucifix-frame {
    box-shadow: 0 0 34px rgba(212, 175, 55, 0.42),
                0 0 64px rgba(139, 0, 0, 0.8),
                inset 0 0 18px rgba(212, 175, 55, 0.35);
  }
}

/* ─────────────────────────── 12. RESPONSIVE ─────────────────────────── */

/* Below this the seven-item rail cannot fit beside the controls in the widest
   language, so the drawer — with its large, full-width links — takes over.
   Measured per locale at weight 600: at 0.8rem the links run 861px (uk) to
   920px (es/it), at 0.86rem up to ~985px; the controls take ~290px. Re-measure
   Spanish and Italian, never just Ukrainian, if an item is added. */
@media (max-width: 1339px) {
  .main-nav { display: none; }
  .menu-btn { display: inline-flex; }
}

/* Until there is room to spare the wordmark yields its ~240px to the
   navigation; the cross still carries the brand and the full title heads the
   page immediately below. */
@media (max-width: 1799px) {
  .brand-text { display: none; }
}

@media (min-width: 1340px) {
  .header-inner { gap: 14px; }
  .main-nav ul { gap: 10px; }
  .main-nav a { font-size: 0.8rem; letter-spacing: 0.4px; }
}
@media (min-width: 1440px) {
  .main-nav a { font-size: 0.86rem; }
}

@media (max-width: 900px) {
  :root { --header-h: 56px; }

  /* Solid bar, no translucency and no backdrop blur. A blurred backdrop over
     the fixed canvas composites to an opaque black slab on several mobile
     browsers, which is what made the header and its controls disappear. */
  .site-header {
    background: #0c0405;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header.is-scrolled { background: #070203; }

  /* Legible, thumb-sized controls: 44px targets and icons sized in px so they
     no longer inherit the ~12px UI font. */
  .btn-icon { width: 44px; height: 44px; }
  .btn-lang { min-height: 44px; }
  .header-tools .ico { width: 22px; height: 22px; }
  .header-tools .btn { color: var(--text-primary); }
  .header-tools .btn-lang { color: var(--accent-gold); }
  .menu-btn { color: var(--accent-gold); }

  .instruction-box p, .promise-box p { text-align: left; }
  .promise-box { text-align: left; }
  .box-title { justify-content: flex-start; text-align: left; }
}

@media (max-width: 560px) {
  .header-tools { gap: 2px; }
  .btn-lang { padding: 7px 9px; }
  .lang-menu { right: -6px; min-width: 200px; }

  /* Printing from a phone is rare; the header's room goes to the text-size
     control instead, which a phone reader reaches for far more often. */
  .header-tools [data-print] { display: none; }

  /* Anchored to the viewport, not the button — the voice trigger sits well in
     from the right edge, so a button-anchored panel would run off-screen. */
  .voice-panel,
  .textsize-panel {
    position: fixed;
    top: calc(var(--header-total) + 8px);
    left: max(12px, var(--safe-left));
    right: max(12px, var(--safe-right));
    width: auto;
  }
  .section-card { padding: 26px 15px; border-radius: 10px; }
  .tracker-dots i { width: 18px; height: 18px; }
}

/* The narrowest phones (320–360px): five controls and the language badge no
   longer fit beside the cross, so the badge drops its globe — the flag alone
   still says which language is showing. */
@media (max-width: 360px) {
  .btn-lang > .ico:first-child { display: none; }
  .btn-lang { padding: 7px 8px; gap: 4px; }
}


/* Short / landscape viewports — the hero must still never exceed one fold. */
@media (max-height: 560px) {
  .hero-quote cite { display: none; }
  .hero-title { max-width: 34ch; }
}
@media (max-height: 430px) {
  .hero-quote { display: none; }
  .scroll-cue span { display: none; }
}

@media (min-width: 1600px) {
  :root { --maxw: 1180px; --header-h: 70px; }
}
@media (min-width: 2200px) {
  :root { --maxw: 1320px; --fs-body: calc(1.9rem * var(--zoom)); --fs-lead: calc(2.05rem * var(--zoom)); }
}

/* ─────────────────────────── 13. PRINT ─────────────────────────── */

.print-header { display: none; }

@media print {
  @page { margin: 16mm 14mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11.5pt;
    line-height: 1.5;
  }
  body { background-image: none !important; }

  #bloodCanvas, .vignette, .site-header, .drawer, .to-top, .scroll-cue,
  .skip-link, .no-print, .site-footer .footer-langs { display: none !important; }

  main { padding-top: 0 !important; }
  .container { max-width: none; padding: 0; }

  .print-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 6pt;
    margin-bottom: 14pt;
    border-bottom: 1pt solid #999;
    font-family: var(--font-display);
    font-size: 9.5pt;
    color: #333;
  }

  .hero { height: auto !important; page-break-after: always; padding: 0; overflow: visible; }
  .hero-title { color: #000 !important; text-shadow: none !important; font-size: 20pt; max-width: none; }
  .hero-quote p { color: #333 !important; text-shadow: none !important; font-size: 12pt; }
  .hero-quote cite { display: block; color: #666 !important; }
  .crucifix-frame { border: 1pt solid #999; animation: none !important; box-shadow: none !important; background: none !important; }
  .crucifix-img { max-height: 150mm; filter: none !important; }

  .section-card {
    margin: 0 0 12mm;
    padding: 0;
    border: 0 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .section-card::before { display: none; }
  .section-header { border-bottom: 0.75pt solid #999; text-align: left; }
  .section-index { color: #888 !important; }
  .section-title { color: #000 !important; font-size: 15pt; text-shadow: none !important; text-align: left; }
  .section-subtitle { color: #444 !important; text-shadow: none !important; text-align: left; }

  .app-toast, .install, .install-panel { display: none !important; }
  .prayer-text, .prayer-text p, .litany-call { color: #000 !important; text-shadow: none !important; }
  .litany-response { color: #000 !important; font-weight: 700; }
  .litany-group { border-left: 1.5pt solid #999; }
  .litany-numbered .litany-item::before { color: #000 !important; opacity: 1; }
  .refrain {
    color: #000 !important;
    text-shadow: none !important;
    border-block-color: #999 !important;
  }
  .lead, .poem, .chant { color: #000 !important; text-shadow: none !important; }
  .note { color: #555 !important; }
  .sacred-rule { background: #999 !important; }

  .instruction-box, .promise-box {
    background: none !important;
    border: 0.75pt solid #999 !important;
    box-shadow: none !important;
    color: #000 !important;
    backdrop-filter: none !important;
    page-break-inside: avoid;
  }
  .box-title, .instruction-box strong, .promise-box strong { color: #000 !important; }
  .instruction-box em, .promise-box em { color: #333 !important; }

  .user-name {
    color: #000 !important;
    text-shadow: none !important;
    text-decoration: underline;
  }

  .site-footer { background: none !important; border-top: 0.75pt solid #999; padding: 8mm 0 0; }
  .footer-motto { color: #000 !important; font-size: 12pt; }
  .footer-note, .footer-copy { color: #555 !important; }

  a { color: #000 !important; text-decoration: none; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}