/*
Theme Name: Speak Up Community
Theme URI: https://speakupcommunity.com
Author: Speak Up
Description: Block theme for speakupcommunity.com. Instrument Serif for display, DM Sans for reading. The ministry list is content, not markup: it is read from the pages that carry a door.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.2.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: speakupmag
*/

:root {
  --su-outer: var(--wp--custom--margin-outer);
  --su-inner: var(--wp--custom--margin-inner);
  --su-accent: var(--wp--custom--accent-default);
}

body { -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------- header */

.su-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 36px var(--su-outer) 0;
}
.su-header .wp-block-site-logo img { height: 52px; width: auto; display: block; }
.su-header .wp-block-navigation {
  gap: 28px;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(17px, 1.53vw, 22px);
  color: var(--wp--preset--color--mute);
}
/* Navigation is interactive text and has to be readable: the tag grey was 2.17:1
   on white. Mute is 7.34:1. tag stays for genuinely decorative small print. */
.su-header .wp-block-navigation a { color: var(--wp--preset--color--mute); text-decoration: none; }
.su-header .wp-block-navigation a:hover { color: var(--wp--preset--color--ink); text-decoration: none; }

/* ------------------------------------------------------- the splash list */

.su-ministry-list.is-spread { font-family: var(--wp--preset--font-family--display); }

.su-ministry-list.is-spread .su-filter {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding: 0 var(--su-inner);
  margin: clamp(56px, 7.8vw, 84px) 0 clamp(18px, 2.2vw, 30px);
  font-size: clamp(17px, 1.53vw, 22px);
  line-height: 1.25;
}
.su-ministry-list.is-spread .su-filter button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--wp--preset--color--mute);
}
.su-ministry-list.is-spread .su-filter button.is-on {
  color: var(--wp--preset--color--ink);
  border-bottom: 1px solid; padding-bottom: 1px;
}

.su-ministry-list.is-spread .su-spread {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  column-gap: clamp(40px, 5.55vw, 80px);
  align-items: start;
  padding: 0 var(--su-outer) 0 var(--su-inner);
}

.su-ministry-list .su-list { display: flex; flex-direction: column; }
.su-ministry-list .su-item {
  display: block; white-space: nowrap; text-decoration: none;
  font-size: clamp(22px, 1.9vw, 27px); line-height: 1.65;
  color: var(--wp--preset--color--quiet);
  transition: color .3s;
}
.su-ministry-list .su-item:hover { text-decoration: none; }
.su-ministry-list .su-item.is-on { color: var(--wp--preset--color--ink); }
.su-ministry-list.is-hovering .su-item:not(.is-on) { color: var(--wp--preset--color--faint); }
.su-ministry-list .su-item.is-hidden { display: none; }

.su-ministry-list .su-slot { position: relative; min-height: 560px; }
.su-ministry-list .su-card,
.su-ministry-list .su-hint {
  position: absolute; inset: 0 0 auto 0; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  opacity: 0; transition: opacity 0s;
}
.su-ministry-list .su-card.is-on,
.su-ministry-list .su-hint.is-on { opacity: 1; transition: opacity .18s; }
.su-ministry-list .su-hint { margin-top: 142px; }
/* The resting sentence is the front page's one statement: a lot bigger than the
   program descriptions that replace it on hover, which keep the display size. */
.su-ministry-list .su-hint p {
  font-size: clamp(34px, 4.9vw, 76px) !important;
  line-height: 1.04 !important;
  max-width: 15ch;
  letter-spacing: -.01em;
}
.su-ministry-list .su-card img {
  order: 1; height: 120px; width: auto; max-width: 100%;
  object-fit: cover; filter: grayscale(1); display: block;
}
/* A page's own icon in the card's place: a mark, not a photograph, so it keeps its
   own colours and sits a little smaller than a picture would. */
.su-ministry-list .su-card img.su-card-icon { height: 96px; object-fit: contain; filter: none; }
.su-ministry-list .su-card .su-desc,
.su-ministry-list .su-hint p {
  order: 2; margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--display);
  line-height: 1.1;
  color: var(--wp--preset--color--ink);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* the phone: one column, sentence first, tap a name to open it beneath */
@media (max-width: 900px) {
  :root { --su-outer: 24px; --su-inner: 24px; }
  .su-header { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 22px; }
  .su-header .wp-block-site-logo img { height: 42px; }
  .su-header .wp-block-navigation { gap: 18px; font-size: 16px; flex-wrap: wrap; }

  .su-ministry-list.is-spread .su-spread { display: flex; flex-direction: column; }
  .su-ministry-list.is-spread .su-filter { margin: 26px 0 22px; font-size: 15px; gap: 18px; padding: 0 var(--su-outer); }
  .su-ministry-list .su-slot { position: static; min-height: 0; order: 1; }
  .su-ministry-list .su-slot .su-card { display: none; }
  .su-ministry-list .su-hint {
    position: static; opacity: 1; margin: 0 0 26px;
    font-size: 22px; line-height: 1.18; max-width: 22ch;
  }
  .su-ministry-list .su-list { order: 2; }
  .su-ministry-list .su-item { font-size: 24px; line-height: 1.55; color: var(--wp--preset--color--quiet); }
  .su-ministry-list.is-hovering .su-item:not(.is-on) { color: var(--wp--preset--color--quiet); }
  .su-ministry-list .su-list .su-card { position: static; opacity: 1; display: none; margin: 6px 0 20px; }
  .su-ministry-list .su-list .su-card.is-on { display: flex; }
  .su-ministry-list .su-list .su-card img { height: 96px; }
  .su-ministry-list .su-list .su-card .su-desc { font-size: 20px; line-height: 1.25; color: var(--wp--preset--color--body); max-width: 34ch; }
}

/* ------------------------------------------- the footer directory + rows */

/* One row of columns, though they come from two places: the doors are generated,
   the external links are written in the footer part. display:contents lifts the
   generated ones into the same flex row so both align on one baseline. */
/* A grid, not a flex row: five columns fit at 1440 and wrap only when the window
   genuinely cannot hold them. A flex row wrapped the fifth column the moment one
   long name widened another. */
/* Five columns, one row. Equal tracks, so no name can push a column off the row;
   long names wrap inside their column instead. */
.su-footer-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px clamp(24px, 3vw, 56px); }
@media (max-width: 1000px) { .su-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .su-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Specificity matters here: the generated .su-columns has its own flex rule at
   (0,3,0), and a (0,2,0) contents rule lost to it — leaving four columns squeezed
   into one grid track. These outrank it. */
.su-footer-cols > .su-ministry-list.is-columns,
.su-footer-cols > .su-ministry-list.is-columns .su-columns { display: contents !important; }
.su-footer-cols .su-column { min-width: 0; }
.su-ministry-list.is-columns .su-columns {
  display: flex; gap: clamp(30px, 5vw, 80px); flex-wrap: wrap;
}
.su-column-links ul { list-style: none; margin: 0; padding: 0; }
.su-column-links li {
  font-family: var(--wp--preset--font-family--text);
  font-size: 15px; line-height: 1.9; color: var(--wp--preset--color--body);
}
/* Both kinds of column head — the generated ones and the core heading block in
   the footer part — sit on the same top line. The heading block otherwise brings
   the theme's own top margin with it. */
.su-footer-cols { align-items: flex-start; }
.su-footer-cols .su-column-head,
.su-footer-cols h2.su-column-head.wp-block-heading {
  font-family: var(--wp--preset--font-family--text);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.4; color: var(--wp--preset--color--quiet);
  margin: 0 0 10px !important; padding: 0;
}
.su-column-links ul { margin-top: 0; }
/* The links group is the second child of a flow-layout group, so core hands it a
   block-gap top margin the generated columns never get; that put its head a line
   below the others. */
.su-footer-cols > .su-column-links { margin-block-start: 0 !important; }
.su-ministry-list.is-columns .su-column-head {
  font-family: var(--wp--preset--font-family--text);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wp--preset--color--quiet); margin: 0 0 10px;
}
.su-ministry-list.is-columns ul,
.su-ministry-list.is-rows ul { list-style: none; margin: 0; padding: 0; }
.su-ministry-list.is-columns li,
.su-ministry-list.is-rows li {
  font-family: var(--wp--preset--font-family--text);
  font-size: 15px; line-height: 1.9; color: var(--wp--preset--color--body);
}
.su-ministry-list.is-columns a:hover { color: var(--wp--preset--color--ink); }

.su-footer { border-top: 1px solid var(--wp--preset--color--hairline); margin-top: 90px; padding: 34px var(--su-outer) 70px; }

/* ------------------------------------------------------------ the editor */

.su-editor-note {
  font-family: var(--wp--preset--font-family--text); font-size: 13px;
  color: var(--wp--preset--color--quiet); margin: 0 0 10px;
}
.su-empty { font-family: var(--wp--preset--font-family--text); color: var(--wp--preset--color--quiet); }

.su-colophon {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--wp--preset--color--hairline);
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--fine);
  color: var(--wp--preset--color--quiet);
}
.su-colophon p { color: inherit; font-size: inherit; margin: 0; }

/* ------------------------------------- a door landing page: the super-hub */

.su-ministry-list.is-cards { border-top: 1px solid var(--wp--preset--color--hairline); }
.su-cards { display: block; }
.su-card-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 26px; align-items: start;
  padding: 24px 0; border-bottom: 1px solid var(--wp--preset--color--hairline);
  text-decoration: none;
}
.su-card-row:hover { text-decoration: none; }
.su-card-row-image {
  width: 150px; height: 112px; object-fit: cover; filter: grayscale(1); display: block;
}
.su-card-row-image.is-empty { background: var(--wp--preset--color--hairline); }
.su-card-row-title {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 30px; line-height: 1.1; color: var(--wp--preset--color--ink);
}
.su-card-row:hover .su-card-row-title { color: var(--wp--preset--color--brand); }
.su-card-row-desc {
  display: block; margin-top: 6px; max-width: 36em;
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--body); line-height: 1.5;
  color: var(--wp--preset--color--body);
}
@media (max-width: 700px) {
  .su-card-row { grid-template-columns: 1fr; }
  .su-card-row-image { width: 100%; height: auto; aspect-ratio: 4/3; }
}

/* --------------------------------------- a page with sections, not a slab */

.su-lede {
  font-size: var(--wp--preset--font-size--lede); line-height: 1.5;
  color: var(--wp--preset--color--body); max-width: 34em; margin-top: 22px;
}
.su-figure { margin: 34px 0 0; }
.su-figure img { filter: grayscale(1); width: 100%; height: auto; display: block; }
.su-figure figcaption {
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--fine); color: var(--wp--preset--color--quiet);
  margin-top: 9px; text-align: left;
}
.su-section { margin-top: clamp(64px, 8vw, 108px); }
.su-section-head {
  font-family: var(--wp--preset--font-family--text) !important;
  font-size: 12px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wp--preset--color--quiet); margin: 0 0 26px;
  padding-top: 18px; border-top: 1px solid var(--wp--preset--color--hairline);
}
.su-childlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--hairline); }
.su-childlist li { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.su-childlist li a {
  display: block; padding: 15px 0; text-decoration: none;
  font-family: var(--wp--preset--font-family--display); font-size: 25px;
}
.su-childlist li a:hover { color: var(--wp--preset--color--brand); text-decoration: none; }
.su-out .wp-block-button__link {
  font-family: var(--wp--preset--font-family--text); font-size: 15px; font-weight: 500;
  border-radius: 0; border: 1px solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink); background: transparent; padding: 11px 20px;
}
.su-out .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: #fff; }

/* --------------------------------------------------------- the writing feed */

.su-feed-filter { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 26px; }
.su-feed-filter button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(17px, 1.53vw, 22px); color: var(--wp--preset--color--mute);
}
.su-feed-filter button.is-on { color: var(--wp--preset--color--ink); border-bottom: 1px solid; padding-bottom: 1px; }

.su-feed.is-cards .su-feed-items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 40px 30px;
}
.su-feed.is-list .su-feed-items { border-top: 1px solid var(--wp--preset--color--hairline); }
.su-feed.is-list .su-feed-item {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.su-feed-item.is-hidden { display: none; }
.su-feed-image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; filter: grayscale(1); display: block; }
.su-feed-meta {
  font-family: var(--wp--preset--font-family--text);
  font-size: 12.5px; color: var(--wp--preset--color--quiet);
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 11px;
}
.su-feed-meta a { text-decoration: none; }
.su-feed-meta a:hover { color: var(--wp--preset--color--ink); }
.su-feed-source {
  border: 1px solid var(--wp--preset--color--hairline); padding: 1px 7px;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
}
.su-feed-title { font-size: 25px; line-height: 1.14; margin: 6px 0 0; }
.su-feed-title a { text-decoration: none; }
.su-feed-item:hover .su-feed-title a { color: var(--wp--preset--color--brand); }
.su-feed-desc {
  font-family: var(--wp--preset--font-family--text);
  font-size: 15.5px; line-height: 1.5; color: var(--wp--preset--color--body);
  margin: 7px 0 0; max-width: 38em;
}
.su-feed.is-list .su-feed-desc { display: none; }
.su-feed-more {
  display: inline-block; margin-top: 26px;
  font-family: var(--wp--preset--font-family--text); font-size: 15px; font-weight: 500;
  border-bottom: 1px solid var(--wp--preset--color--ink); text-decoration: none; padding-bottom: 2px;
}

/* a piece that first appeared elsewhere */
.su-source { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--wp--preset--color--hairline); }
.su-source-link {
  font-family: var(--wp--preset--font-family--text); font-size: 15px; font-weight: 500;
  border: 1px solid var(--wp--preset--color--ink); padding: 11px 20px; display: inline-block; text-decoration: none;
}
.su-source-link:hover { background: var(--wp--preset--color--ink); color: #fff; text-decoration: none; }
.su-post-meta {
  font-family: var(--wp--preset--font-family--text); font-size: 12.5px;
  color: var(--wp--preset--color--quiet); gap: 14px; margin-bottom: 8px;
}
.su-post-meta a { text-decoration: none; }

/* An optional one-line description under the page title. Empty on pages that
   do not want one; it is the page excerpt, edited in the sidebar. */
.su-page-desc {
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--lede); line-height: 1.5;
  color: var(--wp--preset--color--body);
  max-width: 34em; margin: 18px 0 0;
}
.su-page-desc:empty { display: none; }

/* Getting from the splash into a door's own page. */
.su-filter-go {
  align-self: flex-start; margin-top: 22px;
  font-family: var(--wp--preset--font-family--text); font-size: 15px; font-weight: 500;
  color: var(--wp--preset--color--ink); border-bottom: 1px solid var(--wp--preset--color--ink);
  text-decoration: none; padding-bottom: 3px;
}
.su-filter-go:hover { color: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); }
.su-filter-go[hidden] { display: none; }

/* ═══ THE INDEX ══════════════════════════════════════════════════════════
   The blog as a table of contents: one row per piece. Date, door and source down
   the left; the title at display size with its deck and writer; a small square
   picture at the right. Matt's pick of five, 2026-09-06 (design/feed4.html, a). */
.su-kicker { font-weight: 600; letter-spacing: .14em; color: var(--wp--preset--color--brand); }
.su-feed.is-index .su-index { max-width: 1100px; }
.su-ix {
  display: grid; grid-template-columns: 150px 1fr 140px; gap: 34px;
  padding: 28px 0; border-bottom: 1px solid var(--wp--preset--color--hairline); align-items: start;
}
.su-ix.is-hidden { display: none; }
.su-feed-none { font-family: var(--wp--preset--font-family--text); color: var(--wp--preset--color--quiet); margin: 8px 0 0; }
.su-ix, .su-ix a { text-decoration: none; color: inherit; }
.su-ix-side {
  display: flex; flex-direction: column; gap: 6px; padding-top: 8px;
  font-family: var(--wp--preset--font-family--text); font-size: 11.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--quiet);
}
.su-ix-src { color: var(--wp--preset--color--mute); }
.su-ix h3 {
  font-family: var(--wp--preset--font-family--display); font-weight: 400;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.05; margin: 0; letter-spacing: -.005em;
}
.su-ix h3 { color: var(--wp--preset--color--ink); transition: color .2s; }
.su-ix:hover h3 { color: var(--wp--preset--color--brand); }
.su-ix-deck {
  margin: 8px 0 0; font-family: var(--wp--preset--font-family--text);
  font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--body); max-width: 34em;
}
.su-ix-by { margin: 8px 0 0; font-family: var(--wp--preset--font-family--text); font-size: 13.5px; color: var(--wp--preset--color--quiet); }
.su-ix-img { display: block; width: 140px; aspect-ratio: 1; }
.su-ix-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .4s; display: block; }
.su-ix-img.is-blank { background: var(--wp--preset--color--ink); }
.su-ix:hover img { filter: grayscale(0); }
@media (max-width: 900px) {
  .su-ix { grid-template-columns: 1fr; gap: 10px; }
  .su-ix-img { width: 120px; }
}


/* Air around the parts of a super-hub: the cards, then the writing. */
.su-ministry-list.is-cards { margin-top: clamp(38px, 5vw, 64px); }
.su-feed { margin-top: clamp(64px, 8vw, 108px); }
.su-feed .su-section-head { margin-bottom: 26px; }
.su-card-row { padding: clamp(24px, 3vw, 34px) 0; }

/* ------------------------------------------------------------ events */

.su-events-rows { border-top: 1px solid var(--wp--preset--color--hairline); }
.su-events-rows { container-type: inline-size; }
.su-event {
  display: grid; grid-template-columns: 132px minmax(150px, auto) 1fr auto; gap: 30px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid var(--wp--preset--color--hairline); text-decoration: none;
}
.su-event:hover { text-decoration: none; }
/* Bigger, and in colour at rest: an event's poster is the one picture on the site
   that is designed to be read, and the posters are made in colour. */
.su-event-cover { width: 132px; height: 132px; background: var(--wp--preset--color--hairline); overflow: hidden; }
.su-event-cover:empty { background: none; }
.su-event-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.su-event-when {
  font-family: var(--wp--preset--font-family--text);
  font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--wp--preset--color--quiet);
}
/* Which calendar it came from: Speak Up, York County Prayer, one day the Athletic Club. */
.su-event-from { display: block; font-weight: 500; letter-spacing: .04em; color: var(--wp--preset--color--mute); margin-top: 3px; }
.su-event-what { font-family: var(--wp--preset--font-family--display); font-size: 27px; line-height: 1.12; padding-top: 2px; }
.su-event-blurb {
  display: block; margin-top: 5px;
  font-family: var(--wp--preset--font-family--text); font-size: 14.5px; line-height: 1.45;
  color: var(--wp--preset--color--body); max-width: 46em;
}
.su-event:hover .su-event-what { color: var(--wp--preset--color--brand); }
.su-event-where {
  font-family: var(--wp--preset--font-family--text); font-size: 13.5px;
  color: var(--wp--preset--color--quiet); text-align: right; max-width: 24em;
}
.su-events-src {
  font-family: var(--wp--preset--font-family--text); font-size: 12.5px;
  color: var(--wp--preset--color--tag); margin-top: 12px;
}
@container (max-width: 600px) {
  .su-event { grid-template-columns: 64px 1fr; gap: 6px 16px; }
  .su-event-cover { grid-row: 1 / span 3; width: 64px; height: 64px; }
  .su-event-where { text-align: left; }
}
@media (max-width: 780px) {
  .su-event { grid-template-columns: 64px 1fr; gap: 6px 16px; }
  .su-event-cover { grid-row: 1 / span 3; width: 64px; height: 64px; }
  .su-event-where { text-align: left; }
}

/* ------------------------------------------------- testimonials and quotes */

.wp-block-quote.is-style-su-testimonial {
  border: 0; margin: 0; padding: 26px 0 0; border-top: 1px solid var(--wp--preset--color--ink);
}
.wp-block-quote.is-style-su-testimonial p {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(21px, 1.9vw, 26px); line-height: 1.22;
  color: var(--wp--preset--color--ink); margin: 0;
}
.wp-block-quote.is-style-su-testimonial cite {
  display: block; margin-top: 14px; font-style: normal;
  font-family: var(--wp--preset--font-family--text);
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--quiet);
}
.wp-block-group.is-style-su-quotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(26px, 3vw, 44px);
}

.wp-block-quote.is-style-su-pull {
  border: 0; margin: clamp(38px, 4vw, 56px) 0; padding: 0; max-width: 22em;
}
.wp-block-quote.is-style-su-pull p {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(28px, 3vw, 40px); line-height: 1.1;
  color: var(--wp--preset--color--ink); margin: 0; text-wrap: pretty;
}
.wp-block-quote.is-style-su-pull cite {
  display: block; margin-top: 12px; font-style: normal;
  font-family: var(--wp--preset--font-family--text);
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--quiet);
}

/* ------------------------------ something that has not started yet */

.su-stage {
  font-family: var(--wp--preset--font-family--text);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wp--preset--color--quiet);
  border-left: 2px solid var(--wp--preset--color--brand);
  padding: 3px 0 3px 14px; margin: 22px 0 0; max-width: 34em;
}

/* ---------------------------------------------- registering interest */

.su-interest { margin: 0; max-width: 30em; }
/* Donorbox's frame: their form is 500px wide at most; widget.js sets the height. */
.su-donorbox iframe { display: block; width: 100%; max-width: 500px; min-width: 250px; border: 0; }
.su-interest-label {
  display: block; font-family: var(--wp--preset--font-family--text);
  font-size: 17px; line-height: 1.5; color: var(--wp--preset--color--body); margin-bottom: 14px;
}
.su-interest-row { display: flex; gap: 0; flex-wrap: wrap; }
.su-interest-email {
  flex: 1 1 220px; font-family: var(--wp--preset--font-family--text); font-size: 16px;
  border: 1px solid #d5d5d5; border-right: 0; padding: 12px 14px; background: #fff; color: var(--wp--preset--color--ink);
}
.su-interest-email:focus { outline: 2px solid var(--wp--preset--color--ink); outline-offset: -2px; }
.su-interest-button {
  font-family: var(--wp--preset--font-family--text); font-size: 15px; font-weight: 500;
  border: 1px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--ink);
  color: #fff; padding: 12px 22px; cursor: pointer;
}
.su-interest-button:hover { background: #fff; color: var(--wp--preset--color--ink); }
.su-interest-button[disabled] { opacity: .5; cursor: default; }
.su-interest-thanks {
  font-family: var(--wp--preset--font-family--text); font-size: 17px;
  color: var(--wp--preset--color--body); margin: 0;
}

/* ═══ NAVIGATION: two devices, one meaning each ═══════════════════════════ */

/* The door bar — every ministry behind this page's door. Horizontal, under the
   header, identical on every page in that door. */
.su-doorbar {
  display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap;
  margin: 0; padding: 15px var(--su-outer);
  border-top: 1px solid var(--wp--preset--color--hairline);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.su-cover + .su-doorbar { border-top: 0; }
.su-doorbar-name { font-family: var(--wp--preset--font-family--display); font-size: 23px; line-height: 1.15; }
.su-doorbar-name a { text-decoration: none; }
.su-doorbar-items {
  display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto;
  font-family: var(--wp--preset--font-family--text); font-size: 15px;
  color: var(--wp--preset--color--mute);
}
.su-doorbar-items a { text-decoration: none; }
.su-doorbar-items a:hover { color: var(--wp--preset--color--ink); }
.su-doorbar-items a.is-on { color: var(--wp--preset--color--ink); font-weight: 500; }
.su-doorbar-extra { position: relative; }
.su-doorbar-items .su-doorbar-extra:first-of-type::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  width: 1px; height: 15px; transform: translateY(-50%);
  background: var(--wp--preset--color--hairline);
}

/* The rail column stays reserved on every page so the reading column starts in
   the same place and holds the same measure throughout. There is no rail in it
   any more — a hub's own pages ride in a second bar above the content. */
.su-body { padding: 44px var(--su-outer) 0; }
/* Centred, his call 2026-09-06 ("certainly I'm going to want the blog centered").
   The rail this grid once reserved a column for is gone, so nothing argued for
   the off-centre column any more. One wide container in the middle of the page;
   inside it a three-track grid: prose sits in the middle track at the reading
   measure, and a block that wants the whole width spans all three. */
.su-main { max-width: 1100px; margin: 0 auto; }
.su-main > * { max-width: none; }
.su-main .entry-content {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34em) minmax(0, 1fr);
}
.su-main .entry-content > * { grid-column: 2; max-width: none; min-width: 0; }
.su-main .entry-content > .su-figure,
.su-main .entry-content > .su-feed,
.su-main .entry-content > .su-events,
.su-main .entry-content > .su-artrow,
.su-main .entry-content > .su-ministry-list { grid-column: 1 / -1; }

/* The second row: this hub's own pages, under the door's row. Quieter than the
   bar above it, and absent entirely when a hub has no pages of its own. */
.su-hubbar {
  display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap;
  margin: 0; padding: 13px var(--su-outer);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.su-hubbar-name {
  font-family: var(--wp--preset--font-family--display); font-size: 17px; line-height: 1.15;
  color: var(--wp--preset--color--mute);
}
.su-hubbar-name a { text-decoration: none; color: inherit; }
.su-hubbar-items {
  display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto;
  font-family: var(--wp--preset--font-family--text); font-size: 14px;
  color: var(--wp--preset--color--mute);
}
.su-hubbar-items a { text-decoration: none; }
.su-hubbar-items a:hover { color: var(--wp--preset--color--ink); }
.su-hubbar-items a.is-on { color: var(--wp--preset--color--ink); font-weight: 500; }
.su-hubbar-out {
  border: 1px solid var(--wp--preset--color--ink); padding: 4px 11px;
  color: var(--wp--preset--color--ink) !important; font-weight: 500;
}
.su-hubbar-out:hover { background: var(--wp--preset--color--ink); color: #fff !important; }
.su-doorbar + .su-hubbar { border-top: 0; }

/* One column until there is genuinely room for the reserved rail column beside a
   full-width reading measure. Below this, two columns made the text NARROWER as the
   window got wider — 901px was worse than 900px. */
@media (max-width: 1100px) {
  /* Inline flow rather than flex: a flex line can be pushed past a narrow
     viewport by one long name, putting an item out of reach. */
  .su-doorbar, .su-hubbar { display: block; }
  .su-doorbar-name, .su-hubbar-name { display: block; margin-bottom: 10px; }
  .su-doorbar-items, .su-hubbar-items { display: block; margin-left: 0; width: auto; }
  .su-doorbar-items a, .su-hubbar-items a { display: inline-block; margin: 0 20px 7px 0; }
  .su-doorbar-items .su-doorbar-extra:first-of-type::before { display: none; }
}

/* ═══ THE PAGE HEAD ═══════════════════════════════════════════════════════
   Door label, then title, always in that order and always in the same place.
   A cover image is the ground it sits on, never a different layout. */

.su-pagehead {
  position: relative;
  padding: clamp(44px, 6vw, 78px) var(--su-outer) clamp(28px, 3.4vw, 40px);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.su-pagehead.has-cover {
  background-size: cover; background-position: center;
  min-height: min(46vh, 400px);
  display: flex; align-items: flex-end;
  padding-bottom: clamp(26px, 3vw, 38px);
  border-bottom: 0;
  /* Colour, under a heavy dark veil — his call to try, 2026-09-06 ("still thinking
     images will be color but with a heavy dark overlay"). The black-and-white cover
     was: filter: grayscale(1) here and a lighter gradient below. */
  filter: saturate(.85);
}
.su-pagehead.has-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 40%, rgba(0,0,0,.5) 100%);
}
/* No cap: a name belongs on one line. The 24em box was breaking "York County
   Prayer" and "Rock Hill Prayer Room" across two. */
.su-pagehead-text { position: relative; z-index: 2; max-width: none; }
.su-pagehead-door {
  font-family: var(--wp--preset--font-family--text);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--quiet);
}
.su-pagehead.has-cover .su-pagehead-door { color: rgba(255,255,255,.85); }
.su-pagehead-title {
  font-family: var(--wp--preset--font-family--display); font-weight: 400;
  font-size: var(--wp--preset--font-size--title); line-height: 1.02;
  margin: 8px 0 0; color: var(--wp--preset--color--ink);
  text-wrap: balance;
}
/* A short name holds one line; a long headline is allowed to wrap. su_page_head()
   decides, so a post title can never run off the edge. */
.su-pagehead-title.is-oneline { white-space: nowrap; }
@media (max-width: 780px) { .su-pagehead-title.is-oneline { white-space: normal; } }
.su-pagehead.has-cover .su-pagehead-title { color: #fff; }
.su-pagehead-title.is-mark { margin-top: 10px; font-size: 0; line-height: 0; white-space: normal; }
.su-pagehead-mark { height: 64px; width: auto; display: block; }
.su-pagehead-mark.is-inverted { filter: brightness(0) invert(1); }
@media (max-width: 700px) { .su-pagehead-mark { height: 46px; } }

/* The bar sits flush under the head, whichever kind of head it is. */
.su-pagehead + .su-doorbar { border-top: 0; }

/* ═══ A STREAM OF PICTURES ════════════════════════════════════════════════
   The Art Collective's own work, and anywhere else a page wants photographs
   rather than one figure. Core's gallery layout classes are not emitted by a
   hand-seeded block, so the stream carries its own. */
/* One wide row: five pieces, equal height, the full width of the page rather
   than the reading measure. */
.su-artrow {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
  margin: 30px 0 38px; padding: 0; max-width: none !important;
}
/* 140px basis, so the row reflows on the width it actually has rather than on the
   window's — the row lives inside a column that can be far narrower. */
.su-artrow figure, .su-artrow .wp-block-image { margin: 0; flex: 1 1 140px; min-width: 0; }
.su-artrow img {
  display: block; width: 100%; height: clamp(120px, 15vw, 250px);
  object-fit: cover; background: var(--wp--preset--color--hairline);
}

/* ═══ PEOPLE ═════════════════════════════════════════════════════════════
   A team page: a face, a name, what they carry, then who they are. */
.su-person { margin: 40px 0 0; }
/* Not circular avatars. These are the photographs the team actually has — a
   canyon overlook, a beach, a man playing guitar — and a round crop throws the
   faces away. Fixed width, natural height. */
.su-person-photo img {
  display: block; width: 240px; height: 240px; object-fit: cover; margin: 0 0 16px;
}
.su-person-role {
  font-family: var(--wp--preset--font-family--text);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wp--preset--color--quiet); margin: -6px 0 12px !important;
}
.su-main .su-person h3 { margin-bottom: 6px; }

/* ═══ A RUN OF FACTS ═════════════════════════════════════════════════════
   Where, when, what it costs. Not a spec table — three short lines. */
.su-facts { margin: 26px 0; }
.su-facts p { margin: 0 0 10px !important; }
.su-facts strong {
  display: block; font-family: var(--wp--preset--font-family--text);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 500; color: var(--wp--preset--color--quiet);
}

/* ═══ ROOM BETWEEN SECTIONS ══════════════════════════════════════════════
   A heading in the body starts a new section, and a section wants air above
   it — more than the 18px blockGap that separates paragraphs. */
.su-main .entry-content > h2 { margin-top: 76px; margin-bottom: 22px; }
.su-main .entry-content > h2:first-child { margin-top: 0; }
.su-main .entry-content > h3 { margin-top: 44px; margin-bottom: 14px; }
.su-main .entry-content > .su-artrow { margin: 34px 0 8px; }
.su-main .entry-content > .su-person { margin-top: 34px; }
.su-main .entry-content > .su-person + .su-person { margin-top: 56px; }
.su-main .entry-content > .wp-block-buttons { margin-top: 30px; }
.su-main .entry-content > .su-facts { margin: 34px 0; }
.su-main .entry-content > .su-events,
.su-main .entry-content > .su-feed { margin-top: 34px; }
.su-main .entry-content > .su-figure { margin: 34px 0; }
/* The page's own lede sits away from the bar above it. */
.su-main .entry-content > .su-lede { margin-bottom: 34px; }
/* An empty paragraph is a slot waiting for words, not a gap in the page. Gutenberg
   shows its placeholder to the editor and nothing to the reader — his call
   2026-09-07: "the first heading should be at the top of the editable page - not
   beneath a random empty spot". Every empty paragraph goes, at every depth. */
.su-main .entry-content p:empty { display: none; }
/* A heading that opens a page has nothing above it to be spaced away from. */
.su-main .entry-content > *:first-child,
.su-main .entry-content > .su-lede:empty + * { margin-top: 0 !important; }
@media (max-width: 700px) {
  .su-main .entry-content > h2 { margin-top: 52px; }
  .su-main .entry-content > h3 { margin-top: 34px; }
}

/* Where a passage came from, when it came from somewhere else. */
.su-source-note {
  font-family: var(--wp--preset--font-family--text) !important;
  font-size: 13px !important; line-height: 1.5;
  color: var(--wp--preset--color--quiet) !important;
  margin-top: 14px !important;
}

/* A collapse bar. Core's details block, dressed to match the bars above it. */
.su-main .entry-content > .wp-block-details {
  border-top: 1px solid var(--wp--preset--color--hairline);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  padding: 0; margin: 0 0 -1px;
}
.su-main .entry-content > .wp-block-details + .wp-block-details { margin-top: 0; }
.wp-block-details > summary {
  cursor: pointer; list-style: none; padding: 17px 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 21px; line-height: 1.2; color: var(--wp--preset--color--ink);
  display: flex; align-items: baseline; gap: 12px;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: "+"; margin-left: auto;
  font-family: var(--wp--preset--font-family--text); font-size: 20px; font-weight: 300;
  color: var(--wp--preset--color--quiet);
}
.wp-block-details[open] > summary::after { content: "\2013"; }
.wp-block-details > *:not(summary) { margin-bottom: 18px; }
.wp-block-details > *:last-child { margin-bottom: 26px; }

/* The way back to where a piece first appeared. */
.su-source {
  margin-top: 44px; padding-top: 18px;
  border-top: 1px solid var(--wp--preset--color--hairline);
  font-family: var(--wp--preset--font-family--text) !important;
  font-size: 15px !important; font-weight: 500;
}
.su-source a { color: var(--wp--preset--color--ink); text-decoration: none; }
.su-source a:hover { color: var(--wp--preset--color--brand); }

/* A filtered-out piece in the issue layout. The base rule above is (0,3,0), so
   the plain .is-hidden rule the list layout uses never won here. */
.su-feed.is-issue .su-issue-item.is-hidden { display: none; }

/* Navigation lists in the footer are lists, not prose: no underline there. The
   underline belongs to a link that sits inside a sentence. */
.su-ministry-list.is-columns a,
.su-column-links a,
.su-doorbar a, .su-hubbar a,
.su-feed a, .su-issue-item, .su-event,
.su-header a { text-decoration: none; }