@charset "UTF-8";
/* ============================================================
   DW Design System — SHARED VISUAL PRIMITIVES
   Output target: ../css/primitives.css
   ------------------------------------------------------------
   The canonical, UNSCOPED `.lp-*` primitive vocabulary, shared
   by every dw* surface (theme + plugins, both sites). Each
   primitive composes purely from the token kernel (tokens.css),
   so it follows the active theme automatically.

   These are CLASS primitives — they only style elements that
   opt in by using the class, so hoisting them unscoped is purely
   additive: a site that doesn't use a class is unaffected.

   Depends on: dwtheme-tokens (--ink/--ink-mute/--line/--bg-2/
   --accent/--read/--font-*). Loaded after tokens.

   NOTE: the bare-element heading treatment (h1–h6 → sans) is
   deliberately NOT here — it stays scoped to body.dwlatinprayerdesign
   in the LP overlay to avoid colliding with dushanwegner.com's
   Customizer font system. Class primitives carry no such risk.
   ============================================================ */
/* ── Uppercase micro type — TWO rules, split by ROLE ──────────
   Every uppercase micro label on the site comes from one of these
   two, and the difference between them is whether the reader can
   TAP it. Naming something and offering a choice are different
   jobs, so they get different tracking: a label is read once and
   can afford to be airy; a control is scanned as a set and its
   options must read as words, not as spaced-out letters.

   Two more uppercase-micro roles follow below — .lp-badge and
   .lp-chip — because the gate distinguishes them by SHAPE, not by
   type: outlined = static classifier, filled = interactive filter.
   Those four are the closed set. If a new uppercase micro label is
   none of them, it is not a micro label. */
/* (1) EYEBROW — a quiet label that NAMES something. Not interactive.
   Sans, --fs-micro, 600, 0.16em up-tracking, muted, --lh-snug.
   Section eyebrows, group heads, kickers, rail labels, card meta.

   It states its own line-height because a label is not prose: left to
   inherit, a wrapping eyebrow takes the READING leading (1.7) meant for
   long-form, and the up-tracking that makes one line look deliberate
   makes three look like a paragraph of shouting. --lh-snug is the ramp's
   step for compact multi-line UI, and a single-line eyebrow is unmoved
   by it. */
.lp-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  /* A label breaks EVENLY or not at all. Greedy wrapping is right for prose,
     where the reader's eye is travelling anyway, and wrong for a short label,
     where it strands the last word on a line of its own — on a phone the Mass
     page's day label read "TODAY'S MASS · THURSDAY, AUGUST 20," / "2026". A
     one-line eyebrow is unaffected. */
  text-wrap: balance;
}

.lp-eyebrow--accent {
  color: var(--rubric);
}

/* For an eyebrow sitting on CHROME rather than on the page — the rail, where
   the muted grey drops below comfortable contrast against the sidebar's own
   surface. A colour modifier, not a second eyebrow: size, weight and tracking
   stay the primitive's. */
.lp-eyebrow--strong {
  color: var(--ink);
}

/* A SECONDARY run inside an eyebrow — the feast date in "TODAY'S ROSARY ·
   14 AUGUST". Not a second label: it shares the label's size, tracking and
   transform, and only steps back in weight and colour, so the pair reads as
   one line with a quieter tail. */
.lp-eyebrow--soft {
  font-weight: var(--fw-medium);
  color: var(--ink-mute);
}

/* (2) OPTION LABEL — the label ON a control the reader chooses from:
   segmented options, toggle buttons, filter chips. Same size and
   colour as the eyebrow (both are UI chrome), but MUCH tighter
   tracking, because these are read as a SET of competing words —
   "EN DE ES", "AUTO LIGHT DARK" — where 0.16em pushes each option
   so wide the group stops reading as a row of choices. 0.07em is
   the gate's own eyebrow tracking and the industry floor for
   legible uppercase UI labels.

   The ACTIVE option is marked by weight + the accent, never by a
   size change — a control whose options change width on selection
   makes the whole row shift under the thumb. */
.lp-optlabel {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.lp-optlabel:hover {
  color: var(--ink);
}

.lp-optlabel.is-active,
.lp-optlabel[aria-pressed=true],
.lp-optlabel[aria-selected=true] {
  font-weight: var(--fw-bold);
  color: var(--rubric);
}

/* (3) BADGE — an OUTLINED static classifier. It labels a thing that
   is already on screen ("Ordinary" / "Proper") and cannot be
   clicked. Outline rather than fill is the whole signal: in the
   gate, filled means interactive.
   (4) CHIP — a FILLED interactive filter ("Blindness", "Courage").
   Tighter again than the badge, because chips appear in dense rows
   and each one is a whole word rather than a one-word classifier.

   These two own TYPE and COLOUR only. Geometry — radius, padding —
   stays with the consumer, because LP squares its chips (round is
   for buttons) while other surfaces may not. */
.lp-badge {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
}

.lp-badge--accent {
  color: var(--rubric);
}

.lp-chip {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rubric);
  background: var(--rubric-tint);
}

/* ── Brand lockup — NOT an eyebrow ────────────────────────────
   The wordmark and its chip. They look like uppercase micro type
   and are therefore easy to sweep into the eyebrow rule — do not.
   A lockup's letterspacing is HAND-SET as part of drawing the
   mark (the LP wordmark is Jost with DW's own tracking), so it is
   the one place a bespoke value is intent rather than drift.

   What IS shared: the family, the uppercase, and the fact that
   the tracking is declared ONCE per lockup instead of re-derived
   at each callsite. Set --lp-lockup-track to the drawn value. */
.lp-lockup {
  font-family: var(--brand);
  text-transform: uppercase;
  letter-spacing: var(--lp-lockup-track, 0.22em);
}

/* Canonical italic eyebrow — small italic muted line (Latin subtitle). */
.lp-eyebrow-it {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
  margin: 0;
}

.lp-eyebrow-it--accent {
  color: var(--rubric);
}

/* ── Disclosure / chevron primitive ───────────────────────────
   A <details> row with a rotating chevron. Token-driven → theme
   for free. (Mirrors the wgnrstyle gate.) */
.lp-chev {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: rotate(-45deg); /* points right (closed) */
  transition: transform 0.16s ease;
  flex: none;
  margin-top: 0.45em;
}

@media (prefers-reduced-motion: reduce) {
  .lp-chev {
    transition: none;
  }
}
/* ── THE navigation chevron ───────────────────────────────────
   The site's ONE directional chevron, emitted ONLY by dwtheme_chevron()
   (inc/chevron.php). Every prev/next/up/back/pager/rail-row control
   renders this — no bare ← ↑ → « » glyphs, no second SVG anywhere.
   It is a LINK mark: bare (no box, no border), in the key colour
   (--rubric → oxblood in light, brick at night), inheriting size from
   its context. Direction = a rotation of the one right-pointing path. */
.dw-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--rubric); /* key colour, theme-switched */
  flex: none;
  transition: transform 0.16s ease;
}
.dw-chev svg {
  width: 0.6em; /* scales with the surrounding text */
  height: auto;
  display: block;
}
.dw-chev--right {
  transform: rotate(0deg);
}
.dw-chev { /* base glyph points right */ }
.dw-chev--left {
  transform: rotate(180deg);
}
.dw-chev--up {
  transform: rotate(-90deg);
}
.dw-chev--down {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .dw-chev {
    transition: none;
  }
}
/* ── THE video mark, inline placement ─────────────────────────
   "This version carries a video." One mark, emitted ONLY by
   dwtheme_video_mark_html() (inc/article-card.php) — no second play
   glyph anywhere. Two placements: over a list-row thumb (.dw-row-play,
   article-cards.scss) and here, inline in a line of text after the label
   it qualifies — the language links of the dwmultilang siblings widget,
   where it says which language's version comes with a video.
   It is a MARK, not a control: no box of its own, no hover state — it
   stays hoverable only so its title surfaces. Sized in em so it rides
   the type it sits in, and it trails its label: the leading space
   belongs to the mark, so no callsite has to remember it. */
.dw-vid {
  display: inline-block;
  width: 1.15em; /* the glyph is 28×20 → 1.4 : 1 */
  height: 0.82em;
  margin-left: 0.3em;
  vertical-align: -0.08em; /* optically centred on the x-height */
  line-height: 0;
}
.dw-vid svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lp-disclosure {
  border-bottom: 1px solid var(--rule);
}
.lp-disclosure:first-child {
  border-top: 1px solid var(--rule);
}
.lp-disclosure > summary {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}
.lp-disclosure > summary::-webkit-details-marker {
  display: none;
}
.lp-disclosure > summary::marker {
  content: "";
}
.lp-disclosure > summary:active {
  opacity: 0.7;
}
.lp-disclosure[open] > summary .lp-chev {
  transform: rotate(45deg);
}
.lp-disclosure { /* points down */ }
.lp-disclosure__body {
  flex: 1 1 auto;
  min-width: 0;
}
.lp-disclosure__panel {
  padding: 0 0 12px;
}
.lp-disclosure {
  /* --bare: the disclosure IS a block that already draws its own rule and its
     own padding — a Mass part, a card, a section that was made openable after
     the fact. It takes the behaviour (the summary row, the chevron, the press
     dip) and none of the chrome, so the container's spacing survives being made
     a <details> and two hairlines never stack. Same idea as
     .dwlp-prayers-head--flush: a variant for "my neighbour already drew it". */
}
.lp-disclosure--bare {
  border-bottom: 0;
}
.lp-disclosure--bare:first-child {
  border-top: 0;
}
.lp-disclosure--bare > summary {
  padding: 0;
}

/* ── Button — the ONE primitive ───────────────────────────────
   Flat, bordered, theme-aware; accent on hover/active. Same family
   as the language-switcher chip. */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--rule);
  background: var(--bg-2);
  /* Foreground rides a custom property so ONE rule can restore the button's own
     colour wherever a stronger ancestor rule (e.g. `.entry-content a`) would
     otherwise repaint it — see the content-link guard in the LP variants. Every
     state/variant sets --lp-btn-fg, never `color` directly. */
  --lp-btn-fg: var(--ink);
  color: var(--lp-btn-fg);
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lp-btn:hover, .lp-btn:focus {
  --lp-btn-fg: var(--rubric);
  border-color: var(--rubric);
  text-decoration: none;
}
.lp-btn {
  /* Active/selected — solid accent (same as the switcher active chip). */
}
.lp-btn.is-active, .lp-btn[aria-pressed=true] {
  background: var(--rubric);
  border-color: var(--rubric);
  --lp-btn-fg: #fff;
}
.lp-btn {
  /* Large — the ONE page-level call to action: a page whose whole purpose is a
     single act (join the beta group, get the app) gets one unmissable target.
     Scales the one button up (padding + the body type step) rather than
     inventing a second button. Goes full-width on a phone, where the thumb
     target should span the measure; stays inline from --bp-s up. Use at most
     once per page — a second --lg on the same view means neither is primary. */
}
.lp-btn--lg {
  padding: 16px 28px;
  font-size: var(--fs-body);
  font-weight: 600;
  display: flex;
  width: 100%;
  justify-content: center;
}
@media (min-width: 520px) {
  .lp-btn--lg {
    display: inline-flex;
    width: auto;
  }
}

/* ── Card ──────────────────────────────────────────────────── */
.lp-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 20px;
  transition: border-color 0.15s;
}

.lp-card--hover:hover {
  border-color: var(--ink-mute);
}

/* ── Language switcher — the ONE switcher look ─────────────────
   Bordered-chip bar; theme-aware accent active state. */
.lp-lang-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.lp-lang-switcher a,
.lp-lang-switcher button {
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.2;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--bg-2);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.lp-lang-switcher a:hover, .lp-lang-switcher a:focus,
.lp-lang-switcher button:hover,
.lp-lang-switcher button:focus {
  border-color: var(--rubric);
  color: var(--rubric);
  text-decoration: none;
}
.lp-lang-switcher a.active,
.lp-lang-switcher button.active {
  background: var(--rubric);
  color: #fff;
  border-color: var(--rubric);
}
.lp-lang-switcher .active {
  background: var(--rubric);
  color: #fff;
  border-color: var(--rubric);
}