/* ==========================================================================
   Trinity UCC design system
   Consolidated from nine per-page <style> blocks (68 KB inline, 294 distinct
   rules) into one cached stylesheet.

   SCOPE: everything is scoped under .t-page, the wrapper class on each block.
   Nothing here can escape that wrapper and restyle a host theme's header,
   nav or footer. Element selectors are scoped too, which is the mistake that
   broke the homepage in October.

   DEFENSIVE RESETS: where a host theme is known to style a bare element that
   we also use (blockquote, header), we set the vulnerable properties
   explicitly rather than escalating specificity. See "Host theme defence".

   SPECIFICITY: a descendant rule like `.t-page .t-intro p` is (0,2,1) and will
   beat a single-class rule like `.t-page .t-lead` at (0,2,0). Any class meant
   to style one paragraph inside a styled container is therefore qualified with
   its parent. This cost five silent bugs on 2026-11-01; do not "simplify" them.

   WRITING PAGE-LOCAL CSS: an ID beats any number of classes. A page-local rule
   like `#my-page .t-intro p` is (1,1,1) and will silently override a shared
   rule like `.t-page .t-intro .t-lead` at (0,3,0), however many classes the
   shared one carries. Where a page-local rule targets a bare element inside a
   shared container, exclude the shared classes it must not touch, e.g.
   `p:not(.t-lead)`. This bit the Black Value System and Statement of Faith
   lead paragraphs on 2026-11-02.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

.t-page {
  --t-plum: #7c2b8d;
  --t-deep: #52185e;
  --t-ink: #141414;
  --t-muted: #6b6b6f;
  --t-line: #dedcd6;
  --t-paper: #fff;
  --t-surface: #f2f1ee;
  --t-gold: #D4AF37;

  /* set per page: .t-hero { --t-hero-img: url("...") } */
  --t-hero-img: none;
  --t-hero-pos: center;
  --t-hero-min: 470px;

  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--t-ink);
}

/* --------------------------------------------------------------------------
   2. Base, scoped
   -------------------------------------------------------------------------- */

.t-page *,
.t-page *::before,
.t-page *::after { box-sizing: border-box; }

.t-page img { max-width: 100%; display: block; height: auto; }
.t-page p { margin: 0; }
.t-page a { text-decoration: none; }

.t-page h1,
.t-page h2,
.t-page h3 {
  margin: 0;
  padding: 0;
  text-transform: none;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* Focus rings switch with the band. Gold is 2.1:1 on white, below the 3:1 a
   focus indicator needs, but 9.4:1 on near-black. Plum is the reverse at
   8.1 and 2.4. So: plum by default, gold inside dark bands. */
.t-page a:focus-visible,
.t-page button:focus-visible {
  outline: 3px solid var(--t-plum);
  outline-offset: 3px;
}
.t-page .t-hero a:focus-visible,
.t-page .t-dark a:focus-visible { outline-color: var(--t-gold); }

/* --------------------------------------------------------------------------
   3. Host theme defence
   Properties a parent theme is likely to set on bare elements we use. Setting
   them explicitly is more portable than out-specifying an unknown theme.
   -------------------------------------------------------------------------- */

.t-page blockquote {
  width: auto;      /* Satellite sets blockquote{width:40%;float:left} */
  float: none;
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
}

.t-page header.t-hero {
  position: relative; /* Satellite sets header{position:fixed;z-index:110} */
  z-index: 0;
  top: auto;
  left: auto;
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.t-page .t-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.t-page .t-col  { max-width: 760px; margin: 0 auto; }

/* Full-bleed breakout. Only needed when an ancestor constrains width (the old
   Satellite theme hardcodes .container_inner to 1100px). On a theme whose
   content area is already full width this is a no-op, but it is safe to leave:
   the 50% resolves against the parent and the 50vw against the viewport, so
   the difference is exactly the correction needed at any screen size.
   NOTE: 100vw includes the scrollbar. If you see a horizontal scrollbar after
   migrating, the host theme is already full width and you can drop .t-bleed. */
.t-page .t-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   5. Type and marks
   -------------------------------------------------------------------------- */

.t-page .t-rule {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--t-gold);
  margin: 0 0 22px;
}
.t-page .t-rule--c { margin: 0 auto 22px; }
.t-page .t-rule--w { background: rgba(255, 255, 255, .55); }

.t-page .t-h1 {
  color: #fff;
  font-size: clamp(38px, 6vw, 68px);
  margin: 0 0 20px;
  max-width: 20ch;
}
.t-page .t-h1--wide { max-width: 24ch; font-size: clamp(36px, 5.6vw, 62px); }
.t-page .t-h2 { font-size: clamp(30px, 4.4vw, 50px); }
.t-page .t-h2--sm { font-size: clamp(28px, 4vw, 44px); }

.t-page .t-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-plum);
  margin-bottom: 12px;
}

.t-page .t-tagline {
  color: #d8cfdb;
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.t-page .t-lede {
  max-width: 62ch;
  color: var(--t-muted);
  font-size: 17px;
  margin-top: 16px;
}

/* Qualified with the parent: .t-intro p is (0,2,1) and would beat this. */
.t-page .t-intro .t-lead {
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   6. Hero
   Per page, set only the image:  .t-hero { --t-hero-img: url("…") }
   -------------------------------------------------------------------------- */

.t-page .t-hero {
  position: relative;
  z-index: 0;
  border-bottom: 0;
  min-height: var(--t-hero-min);
  display: flex;
  align-items: center;
  background-color: #141414;
  background-image: var(--t-hero-img);
  background-position: var(--t-hero-pos);
  background-size: cover;
  background-repeat: no-repeat;
}

/* Directional scrim: near-opaque on the left where the headline sits, clearing
   to the right so the photograph still reads. Busy, mid-toned images need this
   rather than an even wash. */
.t-page .t-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(10, 10, 10, .92) 0%,
    rgba(18, 8, 22, .86) 34%,
    rgba(82, 24, 94, .50) 64%,
    rgba(124, 43, 141, .14) 100%);
}
/* Centred headline over a busy image wants a vertical scrim instead. */
.t-page .t-hero--centre { text-align: center; }
.t-page .t-hero--centre::after {
  background: linear-gradient(180deg,
    rgba(10, 10, 10, .86) 0%,
    rgba(82, 24, 94, .72) 50%,
    rgba(10, 10, 10, .92) 100%);
}

.t-page .t-hero-in { position: relative; z-index: 2; width: 100%; padding: 104px 0 72px; }
.t-page .t-hero-in--tall { padding: 120px 0; }
.t-page .t-hero-in--short { padding: 56px 0 36px; }

.t-page .t-pill {
  display: inline-block;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  border-radius: 2px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.t-page .t-pill-row { margin-bottom: 26px; }

.t-page .t-hero-meta { color: #d8cfdb; font-size: 15px; max-width: 58ch; line-height: 1.6; }
.t-page .t-hero-meta strong { color: #fff; font-weight: 700; }

/* Artwork credit, bottom of a hero whose background is someone's work. */
.t-page .t-credit {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  z-index: 3;
  color: rgba(255, 255, 255, .62);
  font-size: 11.5px;
  letter-spacing: .05em;
}
.t-page .t-credit span { display: block; max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* --------------------------------------------------------------------------
   7. Bands
   -------------------------------------------------------------------------- */

.t-page .t-band        { padding: 84px 0; }
.t-page .t-band--paper { background: var(--t-paper); }
.t-page .t-band--surface { background: var(--t-surface); }
.t-page .t-band--tight { padding: 46px 0 88px; }
.t-page .t-band--foot  { padding: 64px 0 72px; }

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.t-page .t-btn {
  display: inline-block;
  padding: 16px 30px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid transparent;
  border-radius: 2px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.t-page .t-btn--gold  { background: var(--t-gold); color: #141414; border-color: var(--t-gold); }
.t-page .t-btn--gold:hover { background: #e2c45c; border-color: #e2c45c; color: #141414; }
.t-page .t-btn--solid { background: var(--t-plum); color: #fff; border-color: var(--t-plum); }
.t-page .t-btn--solid:hover { background: var(--t-deep); border-color: var(--t-deep); color: #fff; }
.t-page .t-btn--line  { border-color: var(--t-plum); color: var(--t-plum); }
.t-page .t-btn--line:hover { background: var(--t-plum); color: #fff; }
.t-page .t-btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.t-page .t-btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }

/* Inline text link with a rule under it. */
.t-page .t-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--t-plum);
  border-bottom: 2px solid var(--t-plum);
  padding-bottom: 3px;
}
.t-page .t-link:hover { color: var(--t-deep); border-color: var(--t-deep); }
.t-page .t-link svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   9. Staff directory
   Used by Pastoral Staff, Program Team, Executive Leadership, Office of the
   Senior Pastor. Four pages, identical markup, different rosters.
   -------------------------------------------------------------------------- */

.t-page .t-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 26px;
}

.t-page .t-card {
  background: var(--t-paper);
  border: 1px solid var(--t-line);
  border-top: 3px solid var(--t-plum);
  display: flex;
  flex-direction: column;
}
.t-page .t-card-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--t-line); }
.t-page .t-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.t-page .t-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.t-page .t-card-body h3 { font-size: 20px; }
.t-page .t-card-actions {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.t-page .t-role {
  color: var(--t-plum);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.45;
}
.t-page .t-excerpt { color: var(--t-muted); font-size: 15px; }

.t-page .t-more {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--t-plum);
  border-bottom: 2px solid var(--t-plum);
  padding-bottom: 3px;
}
.t-page .t-more:hover { color: var(--t-deep); border-color: var(--t-deep); }

.t-page .t-mail {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 2px solid var(--t-line);
  color: var(--t-plum);
  border-radius: 2px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.t-page .t-mail svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.t-page .t-mail:hover { background: var(--t-plum); border-color: var(--t-plum); color: #fff; }

/* --------------------------------------------------------------------------
   10. Long-form bio and article
   -------------------------------------------------------------------------- */

.t-page .t-bio { padding: 78px 0; background: var(--t-paper); }
.t-page .t-bio--alt { background: var(--t-surface); }
.t-page .t-bio-head { margin-bottom: 30px; }
.t-page .t-bio-head h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 10px; }
.t-page .t-bio-head .t-role { font-size: 15px; }

.t-page .t-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--t-muted);
}
.t-page .t-back:hover { color: var(--t-plum); }
.t-page .t-back-row { margin-bottom: 22px; }

.t-page .t-email { color: var(--t-muted); font-size: 14px; margin-top: 8px; }
.t-page .t-email a { color: var(--t-muted); border-bottom: 1px solid var(--t-line); }
.t-page .t-email a:hover { color: var(--t-plum); border-color: var(--t-plum); }

.t-page .t-article { max-width: 780px; }
.t-page .t-article p { margin: 0 0 20px; font-size: 17px; }
.t-page .t-article p:last-child { margin-bottom: 0; }
.t-page .t-article::after { content: ""; display: block; clear: both; }

.t-page .t-dropcap {
  float: left;
  font-weight: 800;
  font-size: 58px;
  line-height: .8;
  color: var(--t-plum);
  margin: 6px 11px 0 0;
}

/* Floated portrait, newspaper style: prose wraps around it. */
.t-page .t-figure { float: right; width: 268px; margin: 0 0 18px 32px; shape-outside: margin-box; }
.t-page .t-figure img { width: 100%; border-top: 3px solid var(--t-plum); }
.t-page .t-figure figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--t-muted);
  line-height: 1.45;
  border-top: 1px solid var(--t-line);
  padding-top: 9px;
}

/* --------------------------------------------------------------------------
   11. Document pages (Black Value System, Statement of Faith)
   -------------------------------------------------------------------------- */

/* Pull quote. The blockquote reset in section 3 is what keeps a host theme
   from squeezing this to 40% and floating it left. */
.t-page .t-quote { border-left: 4px solid var(--t-gold); padding-left: 24px; }
.t-page .t-quote p {
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -.01em;
}
.t-page .t-quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--t-plum);
}

/* Numbered concepts. The numbering is the source document's own, not decoration. */
.t-page .t-list { list-style: none; margin: 48px 0 0; padding: 0; }
.t-page .t-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0 24px;
  padding: 34px 0;
  border-top: 1px solid var(--t-line);
}
.t-page .t-item:last-child { border-bottom: 1px solid var(--t-line); }
.t-page .t-num {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--t-plum);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.t-page .t-item h3 { font-size: 22px; margin-bottom: 12px; }
.t-page .t-item p { margin-bottom: 16px; }
.t-page .t-item p:last-child { margin-bottom: 0; }

.t-page .t-scripture {
  border-left: 3px solid var(--t-gold);
  padding-left: 18px;
  color: var(--t-muted);
  font-size: 15.5px;
  line-height: 1.6;
}
.t-page .t-scripture cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--t-plum);
  margin-bottom: 6px;
}

.t-page .t-sub { list-style: none; margin: 4px 0 0; padding: 0; }
.t-page .t-sub li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 16.5px;
  line-height: 1.6;
}
.t-page .t-sub li:last-child { margin-bottom: 0; }
.t-page .t-sub li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 9px; height: 2px;
  background: var(--t-plum);
}

/* Foreign term, set in italic by convention and plum so it lifts once. */
.t-page .t-term { font-style: italic; color: var(--t-plum); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Aside card ("Learn more")
   -------------------------------------------------------------------------- */

.t-page .t-aside {
  margin: 36px 0 0;
  background: var(--t-paper);
  border: 1px solid var(--t-line);
  border-left: 3px solid var(--t-plum);
  padding: 28px 30px 30px;
}
.t-page .t-aside h3 { font-size: 21px; margin-bottom: 10px; }
.t-page .t-aside p { font-size: 16px; color: var(--t-muted); margin-bottom: 18px; line-height: 1.6; }
.t-page .t-aside p:last-child { margin-bottom: 0; }
/* Qualified: .t-aside p above is (0,2,1) and would win on colour and size. */
.t-page .t-aside .t-aside-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-plum);
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   13. Link-card grid (My Trinity)
   Cards are anchors. Everything inside must stay inline: a block element
   inside an <a> makes wpautop's paragraph wrapping tear the anchor apart.
   -------------------------------------------------------------------------- */

.t-page .t-linkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 24px;
  margin-top: 30px;
}
.t-page .t-linkcard {
  display: block;
  background: var(--t-paper);
  border: 1px solid var(--t-line);
  border-top: 3px solid var(--t-plum);
  padding: 28px 26px 26px;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.t-page .t-linkcard:hover { border-color: var(--t-plum); background: #fdfcfd; }
.t-page .t-linkcard svg {
  width: 26px; height: 26px;
  fill: none; stroke: var(--t-plum); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 18px;
}
.t-page .t-linkcard-title {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 9px;
  color: var(--t-ink);
}
.t-page .t-linkcard-desc { display: block; color: var(--t-muted); font-size: 15px; margin-bottom: 18px; }
.t-page .t-open {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--t-plum);
  border-bottom: 2px solid var(--t-plum);
  padding-bottom: 3px;
}
.t-page .t-linkcard:hover .t-open { color: var(--t-deep); border-color: var(--t-deep); }

/* --------------------------------------------------------------------------
   14. Anchor offset
   Clears a fixed site header so a jump link does not land under it.
   Set --t-header-h to the host theme's header height.
   -------------------------------------------------------------------------- */

.t-page { --t-header-h: 112px; }
.t-page [id] { scroll-margin-top: var(--t-header-h); }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .t-page .t-split { grid-template-columns: minmax(0, 1fr); gap: 38px; }
}

@media (max-width: 860px) {
  .t-page .t-hero-in { padding: 84px 0 56px; }
  .t-page .t-hero-in--tall { padding: 88px 0; }
  .t-page .t-band { padding: 60px 0; }
  .t-page .t-band--tight { padding: 36px 0 64px; }
  .t-page .t-bio { padding: 58px 0; }
  .t-page .t-figure { float: none; width: 230px; margin: 0 0 22px; }
  .t-page .t-item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 28px 0; }
  .t-page .t-num { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .t-page * { transition-duration: .01ms !important; }
}