/* ═══════════════════════════════════════════════════════════════════════════
   Embassy Church — site layer.

   Lifted verbatim from the static build's per-page <style> blocks and merged
   into one sheet. Class names and selectors are unchanged so the existing
   markup keeps styling itself; the only additions are marked "WP conversion".
   Everything else in the design lives in inline styles on the markup, exactly
   as it did before.
   ═══════════════════════════════════════════════════════════════════════ */

/* — WP conversion: neutralise Astra's page chrome so the scenes own the page.
     Astra's parent files are untouched; this is all cascade. — */
.embassy #page,
.embassy #content,
.embassy .site-content,
.embassy .ast-container,
.embassy .entry-content,
.embassy .ast-article-single,
.embassy .site-main {
  margin: 0;
  padding: 0;
  max-width: none;
  width: auto;
  background: transparent;
}
.embassy .ast-separate-container .ast-article-single { border: 0; box-shadow: none; }
.embassy .entry-content > *:not(main):not(.embassy-scene) { margin-inline: auto; }
.embassy .ast-primary-header-bar,
.embassy .site-header,
.embassy .site-footer,
.embassy .ast-above-header,
.embassy .ast-below-header { display: none !important; }

/* — WP conversion: re-assert the design system's base typography.

     Astra's Customizer output sets body and heading font-family, size, weight
     and line-height inline in the document (astra-theme-dynamic-css), which
     lands after our stylesheets. These rules restate what Broadsheet's base
     layer already says, at class specificity, so the serif and its metrics win
     inside the site's own markup. Heading SIZES stay where the design put them
     — on the elements themselves. — */
body.embassy {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
}
.embassy .embassy-main :is(h1, h2, h3, h4, h5, h6),
.embassy .em-overlay :is(h1, h2, h3, h4, h5, h6),
.embassy .em-footer :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
  text-transform: none;
}
.embassy .embassy-main :is(p, li) { font-family: var(--font-body); }
.embassy .embassy-main .btn,
.embassy .em-footer .btn {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
}
.embassy .embassy-main .input,
.embassy .embassy-main select.input,
.embassy .embassy-main textarea.input {
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

/* — WP conversion: real <img> elements stand in for the prototype's image
     slots, inside the design system's plate treatment.

     The `opacity:1` is load-bearing. Broadsheet's own .cmyk markup carries a
     hidden first <img> as the layout sizer (`.cmyk img:first-child{opacity:0}`);
     our single real photograph is the first child of .print and matches that
     selector too, so without this override every plate figure renders blank. — */
.cmyk .print > img,
.em-bleed > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.em-bleed { position: absolute; inset: 0; overflow: hidden; }

/* The halftone screen needs an explicit paper ground and a clipped box when it
   stands in for a plate figure (the strip, and any figure whose filter chain we
   deliberately avoid). */
.em-screen { position: relative; overflow: hidden; background: var(--color-bg); }
.em-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* — WP conversion: colour inheritance.

     The static build set colour ONCE per section (inline) and let every heading,
     paragraph and label inherit it. Astra instead colours h1–h6, paragraphs and
     links itself, which repaints the white type on the dark scenes as ink.

     The fix is narrow on purpose: hand inheritance back for exactly the elements
     Astra recolours, inside the site's own markup only. Nothing here introduces
     a colour — the section's inline colour, and the design system's component
     colours, both still decide. Editor content in .entry-content is left alone
     so links there keep the system's accent. — */
.embassy .embassy-main :is(h1, h2, h3, h4, h5, h6),
.embassy .em-overlay :is(h1, h2, h3, h4, h5, h6),
.embassy .em-footer :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}
.embassy .embassy-main > section > :is(p, ul, ol, blockquote),
.embassy .embassy-main .em-ix,
.embassy .embassy-main .em-row {
  color: inherit;
}
/* Links that are structural chrome rather than prose: the bar, the overlay, the
   footer index, the underline links and the row links all took their colour
   from the section in the original. */
.embassy :is(.em-nav, .em-overlay, .em-footer) a,
.embassy .em-link,
.embassy .em-row,
.embassy a.em-ix {
  color: inherit;
}
/* Prose links inside editor content keep the design system's accent. */
.embassy .entry-content a:not(.btn):not(.em-link) { color: var(--color-accent); }

/* — motion primitives — */
@keyframes em-rise { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: translateY(0); } }
@keyframes em-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes em-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.em-mask { display: block; overflow: hidden; }
.em-mask-plate { padding: 0.18em 0.06em; margin: -0.18em -0.06em; }
.em-mask > span { display: block; animation: em-rise 1.1s cubic-bezier(.16,.84,.24,1) both; }
[data-reveal] .em-mask > span { animation-play-state: paused; }
[data-reveal].is-in .em-mask > span { animation-play-state: running; }
[data-reveal] .em-soft { opacity: 0; }
[data-reveal].is-in .em-soft { animation: em-fade 1.2s ease 0.35s both; }

/* — links — */
.em-link { position: relative; text-decoration: none; color: inherit; }
.em-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s cubic-bezier(.16,.84,.24,1);
}
.em-link:hover::after { transform: scaleX(1); }

/* — message rows — */
.em-row {
  position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: baseline; gap: clamp(12px, 3vw, 40px); padding: clamp(20px, 2.6vw, 34px) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  text-decoration: none; color: inherit; transition: opacity 0.4s ease;
}
.em-row.em-row-4 { grid-template-columns: 4.5rem minmax(0, 1fr) 12rem auto; }
.em-row:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); }
.em-row-title { transition: transform 0.6s cubic-bezier(.16,.84,.24,1); }
.em-row:hover .em-row-title { transform: translateX(14px); }
.em-row-thumb {
  position: absolute; right: 12%; top: 50%; width: 190px; opacity: 0;
  transform: translateY(-50%) scale(0.96); pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.16,.84,.24,1);
}
.em-row:hover .em-row-thumb { opacity: 1; transform: translateY(-50%) scale(1); }

/* — indexes and splits — */
.em-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.em-ix {
  display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); font-size: 16px;
}
.em-ix .lead {
  flex: 1; min-width: 24px; align-self: flex-end; margin-bottom: 6px;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-text) 40%, transparent);
}
.em-ix-lg { padding: clamp(16px,2vw,24px) 0; }
.em-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.em-split-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.em-cols3 { display: grid; gap: clamp(24px,3vw,48px); grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }

/* — the header bar — */
.em-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(14px,1.6vw,22px) clamp(20px,5vw,72px);
  font-family: var(--font-body); background: transparent; color: var(--color-text);
  transition: background-color 0.5s cubic-bezier(.16,.84,.24,1), color 0.4s ease, box-shadow 0.5s ease;
}
.em-nav.on-dark { color: var(--color-bg); }
.em-nav.is-solid {
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 12%, transparent);
  color: var(--color-text);
}
.em-nav-brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: inherit; }
.em-nav-mark { font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; }
.em-nav-note { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }
.em-nav-actions { display: flex; align-items: center; gap: clamp(16px,2.4vw,34px); }
.em-nav-cta { font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: inherit; }
.em-underline { position: relative; }
.em-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(.16,.84,.24,1);
}
.em-underline:hover::after { transform: scaleX(1); }
.em-burger {
  display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: inherit;
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
}
.em-burger-lines { display: flex; flex-direction: column; gap: 4px; }
.em-burger-lines span { display: block; width: 20px; height: 1px; background: currentColor; }

/* — the menu overlay — */
.em-overlay {
  position: fixed; inset: 0; z-index: 9990; background: var(--color-text); color: var(--color-bg);
  display: none; flex-direction: column; padding: clamp(20px,3vw,34px) clamp(20px,5vw,72px); overflow: auto;
}
.em-overlay.is-open { display: flex; }
.em-overlay-head { display: flex; justify-content: space-between; align-items: center; }
.em-overlay-mark { font-family: var(--font-heading); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; }
.em-overlay-close { background: none; border: 0; padding: 0; color: inherit; font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.em-overlay-body { display: flex; flex: 1; align-items: center; gap: clamp(24px,6vw,96px); padding: clamp(32px,6vw,64px) 0; }
.em-overlay-links { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(4px,1vw,10px); }
.em-overlay-figure { margin: 0; width: clamp(240px,26vw,380px); flex: none; }
.em-overlay-caption { color: var(--color-bg); opacity: 0.6; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 12px; }
.em-overlay-foot { display: flex; flex-wrap: wrap; gap: 12px 40px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.em-overlay-foot a { color: inherit; text-decoration: none; }
.em-menu-line { display: block; overflow: hidden; }
.em-menu-line > span { display: block; animation: em-rise 0.85s cubic-bezier(.16,.84,.24,1) both; }
.em-menu-num { font-size: 0.3em; letter-spacing: 0.1em; vertical-align: super; opacity: 0.5; margin-right: 0.5em; }

/* — the paper grain and the drawn cursor — */
.em-grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
#em-cursor {
  display: none; position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  align-items: center; justify-content: center; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  color: var(--color-text); will-change: transform;
  transition: width 0.35s cubic-bezier(.16,.84,.24,1), height 0.35s cubic-bezier(.16,.84,.24,1), margin 0.35s cubic-bezier(.16,.84,.24,1), color 0.3s ease;
}
#em-cursor-ring { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; }
#em-cursor-x { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; }
#em-cursor-x span:first-child { position: absolute; left: 50%; top: -8px; bottom: -8px; width: 1px; background: currentColor; }
#em-cursor-x span:last-child { position: absolute; top: 50%; left: -8px; right: -8px; height: 1px; background: currentColor; }
#em-cursor-label {
  position: relative; font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0; transition: opacity 0.25s ease; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #em-cursor { display: flex; }
  body.embassy { cursor: none; }
  .embassy a, .embassy button, .embassy input, .embassy textarea, .embassy select { cursor: none; }
  .embassy iframe { cursor: auto; }
}

/* — the footer index — */
.em-foot-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; }

/* — responsive — */
@media (max-width: 900px) {
  .em-split, .em-split-wide { grid-template-columns: 1fr; }
  .em-row, .em-row.em-row-4 { grid-template-columns: 3rem minmax(0,1fr); }
  .em-row-thumb, .em-row-watch, .em-row-meta { display: none; }
}
@media (max-width: 860px) { .em-nav-desk { display: none !important; } }
@media (min-width: 861px) { .em-nav-mob { display: none !important; } }
@media (max-width: 780px) { .em-foot-index { grid-template-columns: 1fr 1fr; } }

/* — prayer wall — */
.prayer-modal {
  display: none; visibility: hidden;
  position: fixed; inset: 0; z-index: 10000;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.prayer-modal.is-open { display: flex; visibility: visible; }
.prayer-modal[aria-hidden="true"] { visibility: hidden; }
body.prayer-modal-open { overflow: hidden; }

.prayer-modal-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-bg);
  color: var(--color-text);
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.prayer-modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: inherit;
  font-size: 24px; line-height: 1; cursor: pointer;
  opacity: 0.6; transition: opacity 0.3s ease;
}
.prayer-modal-close:hover { opacity: 1; }

/* — the form itself: editorial, not a boxed WordPress input — */
.prayer-form { display: flex; flex-direction: column; gap: 26px; }
.prayer-field { display: flex; flex-direction: column; gap: 8px; }
.prayer-field > label {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.prayer-input {
  width: 100%; font: inherit; font-size: 17px; color: var(--color-text);
  background: transparent; border: 0; border-bottom: 1px solid var(--color-divider);
  border-radius: 0; padding: 10px 2px; caret-color: var(--color-accent);
  transition: border-color 0.35s cubic-bezier(.16,.84,.24,1);
}
.prayer-input::placeholder { color: color-mix(in srgb, var(--color-text) 45%, transparent); opacity: 1; }
.prayer-input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.prayer-input:focus-visible { outline: none; border-color: var(--color-accent); }
textarea.prayer-input { min-height: 130px; resize: vertical; line-height: 1.6; }
select.prayer-input { cursor: pointer; }

.prayer-checks { display: flex; flex-direction: column; gap: 14px; }
.prayer-check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.prayer-check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--color-accent); }
.prayer-privacy-note {
  font-size: 13px; line-height: 1.65; margin: 0;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  padding-top: 14px; border-top: 1px solid var(--color-divider);
}
.prayer-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 22px; flex-wrap: wrap; }
/* This button also carries .prayer-modal-close for the JS hook, which
   absolutely-positions the × icon in the corner — reset that back to an
   inline text button here, after it in source order so these rules win. */
.prayer-modal-close-text {
  position: static; width: auto; height: auto;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.65; transition: opacity 0.3s ease;
}
.prayer-modal-close-text:hover { opacity: 1; }

/* honeypot — visually hidden and out of the tab order, still in the DOM for bots */
.prayer-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* — category filters: quiet text tabs, not pill buttons — */
.prayer-filter {
  background: none; border: 0; padding: 4px 0; cursor: pointer; position: relative;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  transition: color 0.3s ease;
}
.prayer-filter::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(.16,.84,.24,1);
}
.prayer-filter:hover { color: var(--color-text); }
.prayer-filter.is-active { color: var(--color-text); }
.prayer-filter.is-active::after { transform: scaleX(1); }
.prayer-filter:disabled { opacity: 0.4; cursor: default; }

/* — the wall itself: an editorial column flow, not a card grid — */
.prayer-columns { column-count: 2; column-gap: clamp(48px, 5vw, 88px); }
.prayer-card {
  display: block; break-inside: avoid; margin: 0 0 clamp(44px, 5vw, 64px);
  padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}
.prayer-card.is-hidden { display: none !important; }
.prayer-card-lg .prayer-card-body { font-size: clamp(22px, 2.2vw, 28px); }
.prayer-card-body {
  font-family: var(--font-heading); font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; letter-spacing: -0.005em;
  margin: 0 0 20px; color: var(--color-text);
  transition: transform 0.5s cubic-bezier(.16,.84,.24,1);
}
.prayer-card:hover .prayer-card-body { transform: translateX(4px); }
.prayer-card-meta {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 18px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}
.prayer-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.prayer-count {
  font-size: 12px; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  transition: opacity 0.3s ease;
}
.prayer-card .prayer-cta {
  background: none; border: 0; padding: 0; cursor: pointer; position: relative;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); transition: color 0.3s ease;
}
.prayer-card .prayer-cta::after { content: "→"; margin-left: 6px; display: inline-block; transition: transform 0.3s cubic-bezier(.16,.84,.24,1); }
.prayer-card .prayer-cta:hover::after { transform: translateX(4px); }
.prayer-card .prayer-cta.is-pressed { color: color-mix(in srgb, var(--color-text) 55%, transparent); cursor: default; }
.prayer-card .prayer-cta.is-pressed::after { content: ""; margin-left: 0; }
.prayer-card .prayer-cta:disabled { opacity: 0.55; cursor: default; }

/* a single tasteful pulse on "I'm praying" — a prayer action, not a "like" */
@keyframes prayer-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 35%, transparent); }
  100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--color-accent) 0%, transparent); }
}
.prayer-cta.is-pressed { animation: prayer-pulse 0.9s ease-out; }

@supports selector(:has(a)) {
  .prayer-card:has(.prayer-cta.is-pressed) .prayer-count { opacity: 0.6; }
}

@media (max-width: 900px) {
  .prayer-columns { column-count: 1; }
}
@media (max-width: 640px) {
  .prayer-filters { overflow-x: auto; white-space: nowrap; padding-bottom: 6px; gap: 20px !important; flex-wrap: nowrap !important; }
  .prayer-modal-panel { padding: 28px 20px; max-height: 92vh; }
}

/* — devotional — */
.devo-filter {
  background: none; border: 0; padding: 4px 0; cursor: pointer; position: relative;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  transition: color 0.3s ease;
}
.devo-filter::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(.16,.84,.24,1);
}
.devo-filter:hover { color: var(--color-text); }
.devo-filter.is-active { color: var(--color-text); }
.devo-filter.is-active::after { transform: scaleX(1); }

.devo-row.is-hidden { display: none !important; }

.devo-copy, .devo-share, .devo-save {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; color: inherit; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--radius-md);
  padding: 11px 22px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.devo-copy:hover, .devo-share:hover, .devo-save:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.devo-copy.is-done, .devo-share.is-done, .devo-save.is-done {
  border-color: var(--color-accent); color: var(--color-accent);
}

@media (max-width: 640px) {
  .devo-filters { overflow-x: auto; white-space: nowrap; padding-bottom: 6px; gap: 20px !important; flex-wrap: nowrap !important; }
}

@media (prefers-reduced-motion: reduce) {
  .em-mask > span, [data-reveal].is-in .em-soft { animation: none !important; opacity: 1 !important; transform: none !important; }
  .em-strip-wrap { height: auto !important; }
  .em-strip-sticky { position: static !important; height: auto !important; }
  .em-strip-track { transform: none !important; overflow-x: auto; }
  .prayer-card-body, .prayer-cta::after, .prayer-filter::after, .prayer-input { transition: none !important; }
  .prayer-cta.is-pressed { animation: none !important; }
  .devo-filter::after, .devo-copy, .devo-share, .devo-save { transition: none !important; }
}