/**
 * Styles for the shortcode listings.
 *
 * These render outside Elementor, so they cannot rely on the stylesheet the
 * components carry inline. Tokens are declared here rather than read from
 * Elementor's kit variables, so a friar page still looks right if Elementor is
 * ever deactivated. The values are the same palette.
 */

:root {
  --ofm-primary: #6B4C35;
  --ofm-hover:   #533B30;
  --ofm-ink:     #2F1F19;
  --ofm-muted:   #8B6843;
  --ofm-paper:   #F7F5EF;
  --ofm-alt:     #EBE6D6;
  --ofm-line:    #D9CDAF;
  --ofm-wheat:   #D2B475;
  --ofm-champ:   #E6D5AC;
  --ofm-sage:    #8A9B7C;
  --ofm-radius:  14px;
  --ofm-shadow:  0 18px 38px -24px rgba(47, 31, 25, .42);
}

/* ------------------------------------------------------------------ shared */

.ofm-empty {
  margin: 0;
  padding: 22px 24px;
  border: 1px dashed var(--ofm-line);
  border-radius: var(--ofm-radius);
  color: var(--ofm-muted);
  background: var(--ofm-paper);
}

.ofm-card {
  background: #fff;
  border: 1px solid var(--ofm-line);
  border-radius: var(--ofm-radius);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
.ofm-card:hover { transform: translateY(-4px); border-color: #C4AE80; box-shadow: var(--ofm-shadow); }

.ofm-arrow {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ofm-primary);
  text-decoration: none;
}
.ofm-arrow span { transition: transform .22s ease; }
.ofm-arrow:hover span { transform: translateX(4px); }

.ofm-num { font-variant-numeric: tabular-nums; }

.ofm-btn-sm {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 6px;
  background: var(--ofm-primary);
  color: #fff;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
/* `:link`/`:visited` for specificity, not decoration. Elementor's global kit
   emits `.elementor-kit-25 a { color: … }` at (0,1,1), which beat the plain
   `.ofm-btn-sm` rule above (0,1,0) and painted every button's label the exact
   brown of its own background — contrast 1.0, invisible, on the one page where
   the button matters. This lands at (0,2,1). It only showed on builder pages,
   because the kit stylesheet is not enqueued on the PHP templates. */
a.ofm-btn-sm:link,
a.ofm-btn-sm:visited { color: #fff; }
.ofm-btn-sm:hover,
a.ofm-btn-sm:hover { background: var(--ofm-hover); color: #fff; }

/* A photograph, or a monogram where none exists yet. */
.ofm-portrait {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ofm-alt);
  aspect-ratio: 4 / 5;
}
.ofm-portrait__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ofm-portrait__mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ofm-primary);
  background: linear-gradient(150deg, var(--ofm-alt), var(--ofm-line));
}

/* -------------------------------------------------------- friar directory */

.ofm-directory__search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 26px;
}
.ofm-directory__search input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid var(--ofm-line);
  border-radius: 8px;
  background: #fff;
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  color: var(--ofm-ink);
}
.ofm-directory__search input[type="search"]:focus-visible {
  outline: 3px solid var(--ofm-wheat);
  outline-offset: 2px;
  border-color: var(--ofm-primary);
}
.ofm-directory__search button {
  padding: 13px 26px;
  border: 0;
  border-radius: 8px;
  background: var(--ofm-primary);
  color: #fff;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
}
.ofm-directory__search button:hover { background: var(--ofm-hover); }

.ofm-directory__letters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ofm-line);
}
.ofm-directory__letters a,
.ofm-directory__letters span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.ofm-directory__letters a { color: var(--ofm-primary); background: var(--ofm-alt); }
.ofm-directory__letters a:hover { color: #fff; background: var(--ofm-primary); }
.ofm-directory__letters span { color: var(--ofm-line); }

.ofm-directory__letter {
  margin: 34px 0 14px;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--ofm-muted);
}
.ofm-directory__letter:first-of-type { margin-top: 0; }

.ofm-directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ofm-friar-card__link {
  display: block;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}
.ofm-friar-card__body { display: block; padding-top: 14px; }
.ofm-friar-card__name {
  display: block;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ofm-ink);
}
.ofm-friar-card__meta,
.ofm-friar-card__ministry {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ofm-muted);
}

/* ---------------------------------------------------------------- memorial */
/*
 * The roll of the friars in eternal rest: the friar directory's quieter
 * neighbour, and deliberately not built from the same parts. No cards, no
 * portraits, no hover lift — a name, a date and a hairline. Fifty-three cards
 * with a monogram apiece would read as a staff page for the dead.
 *
 * The date is pushed to the right of the row rather than following the name, so
 * the dates form a column of their own instead of ragging with the length of
 * each name.
 */
.ofm-memorial { max-width: 680px; }

.ofm-memorial__group + .ofm-memorial__group { margin-top: 34px; }

/*
 * Two classes, not one, and not by accident. The Elementor kit styles every
 * heading as `.elementor-kit-N h2` — colour, family, size, weight, leading —
 * which is specificity (0,1,1) and beats a lone `.ofm-memorial__grouphead` at
 * (0,1,0). Loading this sheet after the kit does not help: specificity is
 * settled before source order is consulted. Doubling the class takes it to
 * (0,2,0), which wins. Do not "simplify" this back to one selector — the
 * decade would silently return to 34px.
 */
.ofm-memorial .ofm-memorial__grouphead {
  margin: 0 0 2px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ofm-line);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ofm-muted);
}

.ofm-memorial__list { margin: 0; padding: 0; list-style: none; }

.ofm-memorial__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 2px;
  /* Softer than --ofm-line, which is doing the heavier work under the decade. */
  border-bottom: 1px solid rgba(217, 205, 175, .48);
}
.ofm-memorial__row:last-child { border-bottom: 0; }

.ofm-memorial__name {
  flex: 1 1 auto;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ofm-ink);
}
.ofm-memorial__name a { color: var(--ofm-primary); text-decoration: none; }
.ofm-memorial__name a:hover,
.ofm-memorial__name a:focus-visible { text-decoration: underline; }

.ofm-memorial__date {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--ofm-muted);
  /* Lines the days up under one another where the face supports it. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ------------------------------------------------ provincial administration */

.ofm-offices { display: grid; gap: 0; }
.ofm-office {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid var(--ofm-line);
}
.ofm-office:first-child { padding-top: 0; }
.ofm-office:last-child { border-bottom: 0; }
.ofm-office__role {
  margin: 0 0 4px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ofm-primary);
}
.ofm-office__name { margin: 0 0 8px; font-size: 22px; }
.ofm-office__name a { color: var(--ofm-ink); text-decoration: none; }
.ofm-office__name a:hover { color: var(--ofm-primary); }
.ofm-office__name--vacant { color: var(--ofm-muted); font-style: italic; }
.ofm-office__contact { margin: 0 0 14px; font-size: 15px; color: var(--ofm-muted); }
.ofm-office__contact a { color: var(--ofm-primary); }

.ofm-office__dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 26px;
  margin: 0 0 16px;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--ofm-paper);
}
.ofm-office__dates dt {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ofm-primary);
}
.ofm-office__dates dd { margin: 2px 0 0; font-size: 15px; color: var(--ofm-ink); font-variant-numeric: tabular-nums; }
.ofm-office__more { margin: 0; }

/* ---------------------------------------------------------------- friaries */

.ofm-friaries--with-map {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
/* Three across, fixed. An auto-fill grid fits four at 1180px and leaves the six
   houses as 4 + 2; a fixed track count gives the clean 3 + 3 the set wants. The
   map variant runs two across, because its column is roughly 40% narrower. */
.ofm-friaries__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.ofm-friaries--with-map .ofm-friaries__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.ofm-friary-card { overflow: hidden; }
.ofm-friary-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.ofm-friary-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ofm-friary-card__body { padding: 20px 22px 24px; }
.ofm-friary-card__name { margin: 0 0 8px; font-size: 19px; }
.ofm-friary-card__address,
.ofm-friary-card__phone { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; color: var(--ofm-muted); }
.ofm-friary-card__phone a { color: var(--ofm-primary); text-decoration: none; }
.ofm-friary-card__body .ofm-arrow { margin-top: 10px; }

.ofm-friaries__map {
  position: sticky;
  top: 110px;
  padding: 18px;
  border: 1px solid var(--ofm-line);
  border-radius: var(--ofm-radius);
  background: #fff;
}
.ofm-friaries__map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 10px;
  background: var(--ofm-alt);
}

/* --- the Leaflet map ---
   `.ofm-leaflet`, not `.ofm-map`: the latter is already the wrapper class the
   Elementor Google Maps widget carries in component 12, and this sheet loads
   site-wide, so a square aspect-ratio here silently reshaped every page built
   from that component.

   Square, not 4:3. Malta and Gozo set the zoom by their width either way, so a
   taller box does not zoom out — it just stops the pins crowding the edges. */
/* Hidden until the script has Leaflet and is about to build: without this an
   empty styled box sat as a grey square on top of the noscript fallback for
   anyone with JavaScript off or blocked. The class is added by ofm-map.js
   before it measures — the map cannot be hidden while it is being sized, or
   fitBounds resolves against a zero-height box. */
.ofm-leaflet { display: none; }
.ofm-leaflet.is-live {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 10px;
  background: var(--ofm-alt);
  font: inherit;
  /* Leaflet's panes sit at 400-700 and would otherwise ride over the header. */
  z-index: 0;
  isolation: isolate;
}

/* --- the Leaflet map ---
   Leaflet's own stylesheet supplies the layout; these only bring its furniture
   into the palette. `z-index` is deliberate: Leaflet panes sit at 400-700 and
   would otherwise ride over the sticky header. */
.ofm-leaflet .leaflet-control-zoom a {
  border-radius: 0;
  color: var(--ofm-primary);
  border-color: var(--ofm-line);
  background: #fff;
}
.ofm-leaflet .leaflet-control-zoom a:hover { background: var(--ofm-paper); color: var(--ofm-hover); }
.ofm-leaflet .leaflet-control-attribution {
  font-size: 10.5px;
  color: var(--ofm-muted);
  background: rgba(255, 255, 255, .82);
}
.ofm-leaflet .leaflet-control-attribution a { color: var(--ofm-primary); }
.ofm-leaflet .leaflet-marker-icon { cursor: pointer; }
.ofm-leaflet .leaflet-marker-icon:focus-visible { outline: 3px solid var(--ofm-wheat); outline-offset: 2px; border-radius: 4px; }
.ofm-leaflet .leaflet-tooltip {
  padding: 6px 10px;
  border: 1px solid var(--ofm-line);
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--ofm-shadow);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ofm-ink);
  white-space: normal;
  max-width: 190px;
}
.ofm-leaflet .leaflet-tooltip-top::before { border-top-color: var(--ofm-line); }
.ofm-friaries__pins { margin: 14px 0 0; padding: 0; list-style: none; }
.ofm-friaries__pins li { border-top: 1px solid var(--ofm-line); }
.ofm-friaries__pins a {
  display: block;
  padding: 9px 2px;
  font-size: 14.5px;
  color: var(--ofm-ink);
  text-decoration: none;
}
.ofm-friaries__pins a:hover { color: var(--ofm-primary); }

/* --------------------------------------------------------------- community */

.ofm-community {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ofm-community__member { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; }
.ofm-community__member .ofm-portrait { border-radius: 10px; }
.ofm-community__name {
  display: block;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ofm-ink);
  text-decoration: none;
}
.ofm-community__name:hover { color: var(--ofm-primary); }
.ofm-community__role {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--ofm-primary);
}
.ofm-community__ministry { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ofm-muted); }

/* ------------------------------------------------------------------- times */

/* Mass times take the wide column; hours, prayers and confessions stack beside
   them. Four equal cards forced every value into a 120px cell and wrapped
   "Monday to Saturday 06:00" onto four lines. */
.ofm-times { display: grid; gap: 20px; }
.ofm-times--split { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.ofm-times__aside { display: grid; gap: 20px; }

.ofm-times__box {
  padding: 24px 26px 26px;
  border: 1px solid var(--ofm-line);
  border-radius: var(--ofm-radius);
  background: #fff;
}
/* Astra also gives tables a bottom margin, which left the Mass card 28px
   taller than its content and unbalanced against its own top padding. */
.ofm-times__box table { margin: 0; border: 0; border-collapse: collapse; }
.ofm-times__box h3 {
  margin: 0 0 16px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--ofm-wheat);
  font-size: 16px;
  letter-spacing: .2px;
}

/* --- the Mass table: horizontal rules only, never a grid of cells ---
   Astra sets `border: 1px solid var(--ast-border-color)` on `table, td, th`.
   Resetting the cells alone leaves the TABLE's own border drawing a wheat line
   down the left and across the top, which reads as a broken cell grid. */
.ofm-mass { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.ofm-mass tbody,
.ofm-mass tr { border: 0; }
.ofm-mass th,
.ofm-mass td { padding: 14px 0; text-align: left; vertical-align: top; border: 0; border-top: 1px solid var(--ofm-alt); }
.ofm-mass tr:first-child th,
.ofm-mass tr:first-child td { border-top: 0; padding-top: 0; }
.ofm-mass tr:last-child th,
.ofm-mass tr:last-child td { padding-bottom: 0; }
.ofm-mass th {
  width: 34%;
  padding-right: 20px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ofm-primary);
}

/* --- one row shape for every timetable, qualified or not --- */
.ofm-times__lines { margin: 0; padding: 0; list-style: none; }
.ofm-times__lines li { display: block; padding: 4px 0; font-size: 15px; line-height: 1.5; color: var(--ofm-ink); }
.ofm-times__lines li:first-child { padding-top: 0; }
.ofm-times__lines--qual li { display: grid; grid-template-columns: minmax(88px, auto) 1fr; gap: 14px; align-items: baseline; }
.ofm-times__qual {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ofm-muted);
  white-space: nowrap;
}
.ofm-times__inline { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--ofm-ink); }
.ofm-times__inline span { color: var(--ofm-line); margin: 0 2px; }

.ofm-season + .ofm-season { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ofm-alt); }
.ofm-season h4 {
  margin: 0 0 6px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ofm-primary);
}

.ofm-times__box--slim { padding-bottom: 22px; }

@media (max-width: 900px) {
  .ofm-times--split { grid-template-columns: 1fr; }
  .ofm-mass th { width: 40%; }
}
@media (max-width: 560px) {
  .ofm-mass th, .ofm-mass td { display: block; width: auto; padding-right: 0; }
  .ofm-mass td { padding-top: 4px; border-top: 0; }
  .ofm-times__lines--qual li { grid-template-columns: 1fr; gap: 2px; }
}

/* -------------------------------------------------------------------- news */

.ofm-news {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ofm-news-card { overflow: hidden; display: flex; flex-direction: column; }
.ofm-news-card__media { display: block; aspect-ratio: 800 / 520; overflow: hidden; background: var(--ofm-alt); }
.ofm-news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ofm-news-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(150deg, var(--ofm-alt), var(--ofm-line)); }
/* `flex: 1` so the body absorbs the stretched card's spare height — without it
   `margin-top: auto` on the arrow has nothing to push against, and the
   Read more links sit at ragged heights across a row. */
.ofm-news-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.ofm-news-card__meta {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ofm-primary);
}
.ofm-news-card__title { margin: 0; font-size: 19px; line-height: 1.3; }
.ofm-news-card__title a { color: var(--ofm-ink); text-decoration: none; }
.ofm-news-card__title a:hover { color: var(--ofm-primary); }
.ofm-news-card__excerpt { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ofm-muted); }
.ofm-news-card__body .ofm-arrow { margin-top: auto; padding-top: 8px; }

/* ----------------------------------------------------------------- contacts */

.ofm-contacts { display: grid; gap: 52px; }

/* --- the postal address, given the weight a contact page's address deserves */
.ofm-contacts__lead {
  padding: 34px 36px 36px;
  border: 1px solid var(--ofm-line);
  border-left: 4px solid var(--ofm-wheat);
  border-radius: var(--ofm-radius);
  background: #fff;
}
.ofm-contacts__eyebrow {
  margin: 0 0 8px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ofm-primary);
}
.ofm-contacts__lead-title { margin: 0 0 8px; font-size: 26px; letter-spacing: -.3px; color: var(--ofm-ink); }
.ofm-contacts__lead-note { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: var(--ofm-muted); }
.ofm-contacts__address { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ofm-ink); }
.ofm-contacts__lead .ofm-arrow { margin-top: 16px; }

/* Two columns, because one left half the card empty: an address block is a
   narrow thing by nature, and stretching it across 1180px only moved the white
   space rather than using it. */
.ofm-contacts__lead-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; }
.ofm-contacts__lead-main > * + * { margin-top: 10px; }
.ofm-contacts__lead-side { display: grid; gap: 6px; justify-items: start; }
.ofm-contacts__lead-side .ofm-fs-contact { width: 100%; }

/* --- a titled group of cards --- */
.ofm-contacts__heading { margin: 0 0 6px; font-size: 22px; letter-spacing: -.2px; color: var(--ofm-ink); }
.ofm-contacts__note { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--ofm-muted); }
.ofm-contacts__note a { color: var(--ofm-primary); text-decoration: underline; text-underline-offset: .18em; }
.ofm-contacts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ofm-contact-card { display: flex; flex-direction: column; padding: 20px 22px 22px; }
.ofm-contact-card__role {
  margin: 0 0 6px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ofm-primary);
}
.ofm-contact-card__name { margin: 0 0 4px; font-family: Montserrat, system-ui, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ofm-ink); }
.ofm-contact-card__name a { color: inherit; text-decoration: none; }
.ofm-contact-card__name a:hover { color: var(--ofm-primary); }
.ofm-contact-card__meta { margin: 0 0 8px; font-size: 14px; color: var(--ofm-muted); }
.ofm-contact-card__email {
  /* `auto` so a two-line name does not push its card's address out of line
     with the one-line names beside it. */
  margin-top: auto;
  padding-top: 12px;
  align-self: start;
  font-size: 14.5px;
  color: var(--ofm-primary);
  word-break: break-word;
}

@media (max-width: 600px) {
  .ofm-contacts { gap: 40px; }
  .ofm-contacts__lead { padding: 24px 22px 26px; }
  .ofm-contacts__lead-body { grid-template-columns: 1fr; gap: 18px; }
  .ofm-contacts__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
  .ofm-friaries--with-map { grid-template-columns: 1fr; }
  .ofm-friaries__map { position: static; }
  .ofm-friaries__list,
  .ofm-friaries--with-map .ofm-friaries__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ofm-office { grid-template-columns: 96px 1fr; gap: 18px; padding: 24px 0; }
  .ofm-office__name { font-size: 19px; }
  .ofm-office__dates { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
    .ofm-directory__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .ofm-friaries__list,
  .ofm-friaries--with-map .ofm-friaries__list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ofm-card,
  .ofm-arrow span,
  .ofm-btn-sm { transition: none; }
  .ofm-card:hover { transform: none; }
}

/* ------------------------------------------------------- single friary page
 * The template is wp-content/themes/ofm/single-ofm_friary.php. Bands mirror the
 * Elementor sections exactly — same 1180 measure, same 104/80/60 rhythm — so a
 * friary page and a builder page sit in the same grid.
 */

.ofm-friary-single { --fs-max: 1180px; }

.ofm-fs-band { padding: 84px 24px; }
.ofm-fs-band--paper { background: var(--ofm-paper); }
.ofm-fs-band--alt { background: var(--ofm-alt); }
.ofm-fs-inner { max-width: var(--fs-max); margin: 0 auto; }

.ofm-fs-heading { margin: 0 0 6px; font-size: 34px; letter-spacing: -.4px; color: var(--ofm-ink); }
.ofm-fs-sub { margin: 0 0 26px; font-size: 17px; color: var(--ofm-primary); }
.ofm-fs-band .ofm-fs-heading + .ofm-times,
.ofm-fs-band .ofm-fs-heading + .ofm-community { margin-top: 26px; }

/* --- banner --- */
.ofm-fs-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  padding: 132px 24px 44px;
  background: var(--ofm-hover);
  overflow: hidden;
}
.ofm-fs-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A banner carrying a photograph gets more height than one on solid ground: at
   the plain height a 16:9 image is letterboxed to a 3.8:1 strip and whatever it
   was a picture of is cropped away. */
.ofm-fs-banner--photo { min-height: 500px; }
.ofm-fs-banner--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* The header zone, anchored in pixels rather than a percentage because the
       header is a fixed height whatever the banner's is. Over a bright
       photograph the old single .32 top stop left the white nav links at a
       contrast of 1.98 — invisible. This puts them above 6. */
    linear-gradient(180deg, rgba(47, 31, 25, .78) 0%, rgba(47, 31, 25, 0) 210px),
    /* The text zone: light across the middle so the photograph reads, dark
       under the title and standfirst, which sit on the bottom edge. */
    linear-gradient(180deg, rgba(47, 31, 25, .18) 0%, rgba(47, 31, 25, .86) 100%);
}
.ofm-fs-banner__inner { position: relative; z-index: 1; max-width: var(--fs-max); margin: 0 auto; width: 100%; }
.ofm-fs-eyebrow {
  margin: 0 0 10px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ofm-champ);
}
.ofm-fs-eyebrow a { color: inherit; text-decoration: none; }
.ofm-fs-eyebrow a:hover { text-decoration: underline; }
.ofm-fs-title { margin: 0; max-width: 18ch; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -.8px; color: #fff; }
.ofm-fs-lead { margin: 12px 0 0; max-width: 62ch; font-size: 19px; line-height: 1.6; color: rgba(247, 245, 239, .78); }

/* --- history beside the contact rail --- */
.ofm-fs-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ofm-fs-main { min-width: 0; }
.ofm-fs-history h2 { margin: 0 0 14px; font-size: 26px; letter-spacing: -.3px; }
.ofm-fs-history p { max-width: 70ch; }

.ofm-fs-aside { position: sticky; top: 118px; display: grid; gap: 18px; }
.ofm-fs-card { padding: 24px 26px 26px; border: 1px solid var(--ofm-line); border-radius: var(--ofm-radius); background: #fff; }
.ofm-fs-card__title {
  margin: 0 0 14px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--ofm-wheat);
  font-size: 15px;
  letter-spacing: .2px;
}
.ofm-fs-address { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--ofm-ink); }
.ofm-fs-contact { margin: 0; padding: 0; list-style: none; }
.ofm-fs-contact li { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ofm-alt); font-size: 15px; }
.ofm-fs-contact li:first-child { border-top: 0; }
.ofm-fs-contact span {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ofm-primary);
  padding-top: 3px;
}
.ofm-fs-contact a { color: var(--ofm-ink); text-decoration: none; word-break: break-word; }
.ofm-fs-contact a:hover { color: var(--ofm-primary); }
.ofm-fs-btn { margin-top: 16px; }
.ofm-fs-form { margin-top: 16px; }

.ofm-fs-map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 10px; background: var(--ofm-alt); }
.ofm-fs-map .ofm-arrow { margin-top: 12px; }

/* --- the other houses ---
   Cards, not a row of text with an arrow after it. With names running to two
   lines, `justify-content: space-between` stranded the arrow at the far right
   of an empty gap, and the two-line names made every row a different height. */
.ofm-fs-others {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.ofm-fs-other { overflow: hidden; }
.ofm-fs-other > a { display: block; color: inherit; text-decoration: none; }
.ofm-fs-other__media { display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--ofm-line); }
.ofm-fs-other__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2, .7, .3, 1); }
.ofm-fs-other:hover .ofm-fs-other__media img { transform: scale(1.05); }
.ofm-fs-other__body { display: block; padding: 15px 16px 18px; }
.ofm-fs-other__where {
  display: block;
  margin-bottom: 4px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ofm-primary);
}
.ofm-fs-other__name {
  display: block;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ofm-ink);
}
.ofm-fs-other:hover .ofm-fs-other__name { color: var(--ofm-primary); }

@media (max-width: 1100px) { .ofm-fs-others { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ofm-fs-others { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .ofm-fs-other__media img,
  .ofm-fs-other:hover .ofm-fs-other__media img { transition: none; transform: none; }
}

@media (max-width: 1024px) {
  .ofm-fs-split { grid-template-columns: 1fr; gap: 34px; }
  .ofm-fs-aside { position: static; }
  .ofm-fs-band { padding: 64px 24px; }
}
@media (max-width: 767px) {
  .ofm-fs-banner { min-height: 320px; padding: 104px 20px 32px; }
  .ofm-fs-banner--photo { min-height: 400px; }
  .ofm-fs-banner--photo::after {
    background:
      linear-gradient(180deg, rgba(47, 31, 25, .78) 0%, rgba(47, 31, 25, 0) 150px),
      linear-gradient(180deg, rgba(47, 31, 25, .18) 0%, rgba(47, 31, 25, .86) 100%);
  }
  .ofm-fs-band { padding: 48px 20px; }
  .ofm-fs-heading { font-size: 26px; }
}


/* No history yet: the two cards share the row rather than leaving a gap. */
.ofm-fs-split--cards { grid-template-columns: 1fr; }
.ofm-fs-split--cards .ofm-fs-aside {
  position: static;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: 20px;
}


/* ============================================================ friar single ==
   Shares the friary page's bands, cards and container width. What differs is
   the banner — a friar's featured image is a portrait, not a landscape plate,
   so it sits beside the name rather than behind it, and the monogram fallback
   takes the same slot when there is no photograph. */

.ofm-friar-single { --fs-max: 1180px; }

.ofm-friar-banner__inner { display: flex; align-items: flex-end; gap: 34px; }
.ofm-friar-banner__portrait {
  flex: 0 0 auto;
  width: 156px;
  border: 1px solid rgba(210, 180, 117, .34);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .6);
}
.ofm-friar-banner__text { min-width: 0; }
/* Names run longer than a friary's, and the shared 18ch cap breaks them across
   three lines. */
.ofm-friar-banner__name { max-width: 22ch; }
.ofm-friar-banner__role { color: var(--ofm-champ); font-size: 17.5px; }

/* The value half of a label/value row. `.ofm-fs-contact span` is the label
   style, and it would otherwise catch plain-text values too — on the friary
   page every value happened to be a link, which hid that. */
.ofm-fs-contact .ofm-fs-val {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ofm-ink);
  padding-top: 0;
}

/* The main column carries up to three blocks, not one. */
.ofm-friar-single .ofm-fs-main { display: grid; gap: 40px; align-content: start; }
.ofm-friar-bio h2,
.ofm-friar-block__title { margin: 0 0 14px; font-size: 26px; letter-spacing: -.3px; color: var(--ofm-ink); }
.ofm-friar-bio p { max-width: 70ch; }

.ofm-friar-offices,
.ofm-friar-ministry { margin: 0; padding: 0; list-style: none; max-width: 70ch; }
.ofm-friar-offices li,
.ofm-friar-ministry li { padding: 13px 0; border-top: 1px solid var(--ofm-line); font-size: 16px; line-height: 1.55; }
.ofm-friar-offices li:first-child,
.ofm-friar-ministry li:first-child { border-top: 0; padding-top: 0; }
.ofm-friar-offices li { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; }
.ofm-friar-offices__title { font-family: Montserrat, system-ui, sans-serif; font-weight: 700; color: var(--ofm-ink); }
.ofm-friar-offices__email a { color: var(--ofm-primary); }
.ofm-friar-offices + .ofm-arrow { margin-top: 18px; }

/* Marks the ministry lines as a list without a bullet glyph fighting the type. */
.ofm-friar-ministry li { padding-left: 20px; position: relative; }
.ofm-friar-ministry li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 23px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ofm-wheat);
}
.ofm-friar-ministry li:first-child::before { top: 10px; }

/* --- the protected record --- */
.ofm-friar-record { background: var(--ofm-paper); }
.ofm-friar-dl { margin: 0; }
.ofm-friar-dl > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 0; border-top: 1px solid var(--ofm-alt); }
.ofm-friar-dl > div:first-child { border-top: 0; }
.ofm-friar-dl dt {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ofm-primary);
  align-self: center;
}
.ofm-friar-dl dd { margin: 0; font-size: 15px; color: var(--ofm-ink); text-align: right; }
.ofm-friar-record__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ofm-muted); }

.ofm-friar-back { margin: 26px 0 0; }
.ofm-friar-tail { padding-top: 46px; padding-bottom: 46px; }

@media (max-width: 767px) {
  .ofm-friar-banner__inner { display: block; }
  .ofm-friar-banner__portrait { width: 108px; margin-bottom: 20px; }
  .ofm-friar-banner__name { max-width: none; }
  .ofm-friar-dl > div { grid-template-columns: 1fr; gap: 2px; }
  .ofm-friar-dl dd { text-align: left; }
}


/* ================================================================ newsroom ==
   The News listing, archives, search and the article page, in the same bands as
   the friary and friar pages.

   The card is NOT redefined here: `.ofm-news-card` above is the one the
   [ofm_news] shortcode puts on the home page, and these templates render the
   same markup so the two cannot drift. Only the grid variant, the banner, the
   pagination, the article and the search form are new. */

.ofm-newsroom { --fs-max: 1180px; }

/* The listing banner carries no photograph, so it needs less height than the
   friary's — but keeps the top padding that clears the transparent header. */
.ofm-news-banner:not(.ofm-fs-banner--photo) { min-height: 340px; }
.ofm-newsroom .ofm-fs-title { max-width: 24ch; }

/* The listing wants a roomier card than the home page's three-up teaser row. */
.ofm-newsroom .ofm-news { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.ofm-newsroom .ofm-news--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ofm-newsroom .ofm-news-card__media img { transition: transform .55s cubic-bezier(.2, .7, .3, 1); }
.ofm-newsroom .ofm-news-card:hover .ofm-news-card__media img { transform: scale(1.05); }

/* --- pagination --- */
.ofm-news-pagination { margin-top: 46px; }
.ofm-news-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ofm-news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--ofm-line);
  border-radius: 8px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ofm-primary);
  text-decoration: none;
  background: #fff;
}
.ofm-news-pagination .page-numbers:hover { border-color: var(--ofm-wheat); color: var(--ofm-hover); }
.ofm-news-pagination .page-numbers.current { background: var(--ofm-primary); border-color: var(--ofm-primary); color: #fff; }
.ofm-news-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* --- the article --- */
.ofm-article__title { max-width: 20ch; }
.ofm-article__body { max-width: 68ch; font-size: 17.5px; line-height: 1.75; color: var(--ofm-ink); }
.ofm-article__body > :first-child { margin-top: 0; }
.ofm-article__body p { margin: 0 0 1.15em; }
.ofm-article__body h2 { margin: 1.7em 0 .5em; font-size: 27px; letter-spacing: -.3px; }
.ofm-article__body h3 { margin: 1.5em 0 .45em; font-size: 21px; }
.ofm-article__body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--ofm-wheat);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ofm-primary);
}
.ofm-article__body img { border-radius: 10px; }
.ofm-article__body figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ofm-muted); }
.ofm-article__pages { margin-top: 1.4em; font-size: 15px; }
.ofm-article__tags { margin: 32px 0 0; font-size: 14.5px; color: var(--ofm-muted); }
.ofm-article__tags span {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ofm-primary);
}
.ofm-article__tags a { color: var(--ofm-primary); }
.ofm-article__back { margin: 28px 0 0; }

/* The scope note under the results box: quiet, but it has to be readable. */
.ofm-search-scope {
  margin: -6px 0 22px;
  font-size: 14px;
  color: var(--ofm-muted);
}
.ofm-search-scope a { color: var(--ofm-primary); }
/* --- the search form --- */
.ofm-search-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; max-width: 520px; }
.ofm-search-form input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 11px 15px;
  border: 1px solid var(--ofm-line);
  border-radius: 8px;
  background: #fff;
  font-size: 15.5px;
  color: var(--ofm-ink);
}
.ofm-search-form input[type="search"]:focus { outline: 2px solid var(--ofm-wheat); outline-offset: 1px; border-color: var(--ofm-wheat); }
.ofm-search-form button { flex: 0 0 auto; border: 0; cursor: pointer; }

@media (max-width: 900px) { .ofm-newsroom .ofm-news--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ofm-news-banner:not(.ofm-fs-banner--photo) { min-height: 260px; }
  .ofm-newsroom .ofm-news,
  .ofm-newsroom .ofm-news--three { grid-template-columns: 1fr; gap: 22px; }
  .ofm-article__body { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ofm-newsroom .ofm-news-card__media img,
  .ofm-newsroom .ofm-news-card:hover .ofm-news-card__media img { transition: none; transform: none; }
}

/* --- comments ---
   Astra's comments.php supplies the markup; this only holds it to the article's
   measure and gives the form the same fields as the search box. */
.ofm-article__comments { max-width: 68ch; margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--ofm-line); }
.ofm-article__comments .comments-title,
.ofm-article__comments .comment-reply-title { margin: 0 0 20px; font-size: 22px; letter-spacing: -.2px; color: var(--ofm-ink); }
.ofm-article__comments .comment-list { margin: 0 0 34px; padding: 0; list-style: none; }
.ofm-article__comments .comment-list ol.children { margin: 18px 0 0 26px; padding: 0; list-style: none; }
.ofm-article__comments .comment-body { padding: 18px 0; border-top: 1px solid var(--ofm-alt); }
.ofm-article__comments .comment-list > li:first-child > .comment-body { border-top: 0; padding-top: 0; }
.ofm-article__comments .comment-author { font-family: Montserrat, system-ui, sans-serif; font-size: 15px; font-weight: 700; color: var(--ofm-ink); }
.ofm-article__comments .comment-author img { border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.ofm-article__comments .comment-metadata,
.ofm-article__comments .comment-meta { font-size: 12.5px; color: var(--ofm-muted); }
.ofm-article__comments .comment-metadata a { color: var(--ofm-muted); }
.ofm-article__comments .comment-content { margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--ofm-ink); }
.ofm-article__comments .reply a { font-family: Montserrat, system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ofm-primary); text-decoration: none; }
.ofm-article__comments .reply a:hover { text-decoration: underline; }
.ofm-article__comments input[type="text"],
.ofm-article__comments input[type="email"],
.ofm-article__comments input[type="url"],
.ofm-article__comments textarea {
  width: 100%;
  padding: 11px 15px;
  border: 1px solid var(--ofm-line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--ofm-ink);
}
.ofm-article__comments input:focus,
.ofm-article__comments textarea:focus { outline: 2px solid var(--ofm-wheat); outline-offset: 1px; border-color: var(--ofm-wheat); }
.ofm-article__comments .comment-form-comment,
.ofm-article__comments .comment-form-author,
.ofm-article__comments .comment-form-email,
.ofm-article__comments .comment-form-url { margin-bottom: 14px; }
.ofm-article__comments label { display: block; margin-bottom: 5px; font-family: Montserrat, system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ofm-primary); }
.ofm-article__comments .comment-notes,
.ofm-article__comments .form-submit { font-size: 14px; color: var(--ofm-muted); }
.ofm-article__comments .submit {
  padding: 12px 26px;
  border: 0;
  border-radius: 8px;
  background: var(--ofm-primary);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.ofm-article__comments .submit:hover { background: var(--ofm-hover); }

/* ============================================================ section hubs ==
   The card list on Who We Are, Friars, Vocations and Ministries. Built by
   [ofm_section_children] from the page tree, so it is a plain <ul> that has to
   lose its bullets and become a grid. */

.ofm-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ofm-section-card { display: flex; flex-direction: column; padding: 24px 26px 26px; }
.ofm-section-card__title { margin: 0 0 8px; font-size: 19px; line-height: 1.3; letter-spacing: -.2px; }
.ofm-section-card__title a { color: var(--ofm-ink); text-decoration: none; }
.ofm-section-card:hover .ofm-section-card__title a { color: var(--ofm-primary); }
.ofm-section-card__note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ofm-muted); }
/* `auto` so the arrow sits on the card's bottom edge whether or not the page
   carries a note, keeping a row of cards aligned. */
.ofm-section-card__more { margin-top: auto; padding-top: 16px; }

.ofm-sections__note {
  margin: 22px 0 0;
  padding: 12px 16px;
  border: 1px dashed var(--ofm-line);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ofm-muted);
}

@media (max-width: 600px) {
  .ofm-sections { grid-template-columns: 1fr; }
}