/* ===========================================================================
   INTERIOR PAGES, GROUP A

   Plan Your Visit (canvas 2b), About and Our Story (2e), What We Believe (2f).

   HOW THESE NUMBERS WERE ARRIVED AT. The canvas was served locally and read
   with getComputedStyle, property by property, against the same property on
   the live page. Nothing here is estimated from the prose in
   docs/handoff/02-page-specs.md; where the canvas and the prose disagree the
   canvas wins and the disagreement is written down beside the rule.

   THE 1280 TRAP. The canvas is a fixed 1280px artboard, so every pixel in it
   was measured inside a 1200px content column. Our column is 1280 inside a
   wider window, so a measure copied literally wraps a line early. Measures
   below are therefore percentages of their own column, not the pixels drawn -
   and never `ch`, which is sized from the font and lands nowhere near the
   intended width on a 30px serif.

   HOW THESE SELECTORS ARE SCOPED. The README asks for `body.page-<slug> ...`.
   WordPress does not put a page's slug in the body class and functions.php
   belongs to someone else this session, so the scope is carried by the page's
   own root classes instead - `.tcf-visit__*`, `.tcf-about__*`,
   `.tcf-believe__*`. Each of those exists on exactly one page, so a rule here
   cannot reach a page it was not written for, which is the point of the rule.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   THE PAGE TITLE MOVES INTO THE PAGE

   Blocksy prints an `h1.page-title` in a hero block above the content. All
   three of these pages put their H1 inside their own opening band, per §2b.1,
   §2e.1 and §2f.1, and §1.2 allows exactly one h1 per page - so the theme's
   copy goes, rather than the designed one.

   `:has()` rather than a body class: the band is the thing that decides, so
   the page that carries the band is the page that loses the duplicate title.
   Add the pattern and the title moves; remove it and the theme's title comes
   back on its own.
   --------------------------------------------------------------------------- */
article:has(.tcf-visit__intro) > .hero-section,
article:has(.tcf-about__intro) > .hero-section,
article:has(.tcf-believe__intro) > .hero-section {
  display: none;
}

/* §1.3: bands butt against each other and against the header. Blocksy pads the
   content area away from the header, which left a strip of paper above a dark
   band. Same fix as `.tcf-has-hero` makes for the homepage hero, without
   needing a body class to hang it on. */
.ct-container-full:has(.tcf-visit__intro)[data-vertical-spacing],
.ct-container-full:has(.tcf-about__intro)[data-vertical-spacing],
.ct-container-full:has(.tcf-believe__intro)[data-vertical-spacing],
.ct-container:has(.tcf-visit__intro)[data-vertical-spacing],
.ct-container:has(.tcf-about__intro)[data-vertical-spacing],
.ct-container:has(.tcf-believe__intro)[data-vertical-spacing] {
  padding-top: 0;
}

/* And the same at the bottom, so the last band meets the footer rather than
   leaving a strip of paper between two coloured blocks (§1.3). */
.ct-container-full:has(.tcf-visit__closing)[data-vertical-spacing],
.ct-container-full:has(.tcf-about__doorway)[data-vertical-spacing],
.ct-container-full:has(.tcf-about__leaders)[data-vertical-spacing],
.ct-container-full:has(.tcf-believe__body)[data-vertical-spacing],
.ct-container:has(.tcf-visit__closing)[data-vertical-spacing],
.ct-container:has(.tcf-about__doorway)[data-vertical-spacing],
.ct-container:has(.tcf-about__leaders)[data-vertical-spacing],
.ct-container:has(.tcf-believe__body)[data-vertical-spacing] {
  padding-bottom: 0;
}

/* Filler on a coloured band. `tcf-lorem` is muted, which is right on paper and
   nearly invisible on brick and on ink - and scaffolding nobody can read
   defeats the point of showing the page its own proportions. It takes the
   band's own body colour instead, and stays italic, so it still reads as
   filler rather than as copy. */
.tcf-visit__intro .tcf-lorem,
.tcf-believe__intro .tcf-lorem {
  color: var(--tcf-on-ink-body);
}
.tcf-visit__panel--brick .tcf-lorem {
  color: var(--tcf-on-brick-body);
}

/* The draft notice is the one thing still sitting on paper above the opening
   band, and with the container padding gone it was touching the header. It is
   staging scaffolding and disappears with the copy; until then it gets its own
   room rather than the page keeping room for it. */
.entry-content:has(> .tcf-visit__intro) > .tcf-draft,
.entry-content:has(> .tcf-about__intro) > .tcf-draft,
.entry-content:has(> .tcf-believe__intro) > .tcf-draft {
  margin-top: var(--tcf-space-7);
}


/* ---------------------------------------------------------------------------
   BANDS RUN FULL WIDTH, THEIR CONTENTS DO NOT

   style.css already does this for `is-style-band-ink`, `is-style-band-alt`,
   `tcf-band-plain` and divided columns. The bands invented for these three
   pages need the same treatment, and the same zero margin - the block editor
   gives every top-level block a vertical margin, and §1.3 sets the band-to-band
   gap at zero.
   --------------------------------------------------------------------------- */
.entry-content > .tcf-visit__runs,
.entry-content > .tcf-visit__panels,
.entry-content > .tcf-visit__closing,
.entry-content > .tcf-about__intro,
.entry-content > .tcf-about__leaders,
.entry-content > .tcf-believe__body {
  width: 100vw;
  max-width: 100vw;
  /* !important beats WordPress's own !important auto margins on constrained
     layout children; without it the band re-centres at content width and the
     colour stops short of the window edge. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-block: 0 !important;
}

/* And the same zero margin for the bands that borrow a shared band style. */
.entry-content > .tcf-visit__intro,
.entry-content > .tcf-about__timeline,
.entry-content > .tcf-about__doorway,
.entry-content > .tcf-believe__intro {
  margin-block: 0 !important;
}

/* The opening dark bands carry an inner wrapper rather than letting
   `is-style-band-ink > *` constrain each child on its own, and that is not
   tidiness. A percentage measure on a heading resolves against its containing
   block; with the heading as a direct child of the band, 68% meant 68% of the
   WINDOW, and `margin-inline: auto` then centred the short line instead of
   aligning it to the column. One wrapper at the column width makes every
   percentage inside it a percentage of the column, which is what was measured. */
.tcf-visit__runs-inner,
.tcf-visit__intro-inner,
.tcf-believe__intro-inner,
.tcf-about__intro-inner,
.tcf-believe__inner,
.tcf-about__leaders > *,
.tcf-visit__closing > * {
  width: min(var(--tcf-content-max), calc(100% - var(--tcf-gutter) * 2));
  margin-inline: auto;
}


/* ===========================================================================
   2b - PLAN YOUR VISIT
   =========================================================================== */

/* 1. Dark intro band -------------------------------------------------------
   Canvas: padding 72px top, 78px bottom. `is-style-band-ink` ships 84px both
   ways for the homepage; this band is shallower at the bottom. */
.entry-content > .tcf-visit__intro {
  padding-block: 72px 78px;
}

/* The eyebrow measures 12px / 0.22em on this band and 11.5px / 0.2em on 2e's.
   The canvas contradicts itself, §1.2 says 11.5 / 0.2em, and `is-style-eyebrow`
   already is that - so the token stands and this band inherits it. The only
   change is the gap beneath, which the canvas sets at 18px against the token's
   16px. */
.tcf-visit__intro .is-style-eyebrow,
.tcf-believe__intro .is-style-eyebrow {
  margin-block-end: 18px;
}

/* The H1. Canvas 56px; §1.2 caps the page title at 52px and `--tcf-text-page`
   is built to that. The token stands - 56 is the artboard being generous, and
   the token is fluid where a fixed 56 would not be - but it is a real
   disagreement and it is recorded here rather than silently split.

   The measure is 820 of a 1200 column, so 68% of whatever this column is,
   which is what stops the heading wrapping a line early in a wider window.

   `text-wrap: wrap` is not a default: every heading on this site is set to
   `balance`, which deliberately leaves the first line short. Inside a band
   already wider than the artboard that reads as a wrapping bug, which is the
   lesson the homepage learned the hard way. */
.tcf-visit__title,
.tcf-believe__title {
  font-size: var(--tcf-text-page);
  line-height: var(--tcf-leading-display);
  letter-spacing: var(--tcf-tracking-display);
  text-wrap: wrap;
  margin-block: 0 20px;
}
.tcf-visit__title { max-width: 68%; }
.tcf-believe__title { max-width: 65%; }   /* canvas 780 of 1200 */

/* The lede, held to half the column. The canvas draws it at 19/1.65 and the
   site drew it there until 2026-09-07; it is body size now, site-wide, on Jay's
   instruction. The half-column measure is what makes it a lede and it stays -
   these two sit on ink bands 1200px wide, and at full width they would run
   around 145 characters a line. See the note above `.tcf-lede` in style.css and
   DECISIONS_TO_REVIEW.md §23a. */
.tcf-visit__lede,
.tcf-believe__lede {
  font-size: var(--tcf-text-body);
  line-height: var(--tcf-leading-body);
  margin-block: 0;
}
.tcf-visit__lede   { max-width: 50%; }    /* canvas 600 of 1200 */
.tcf-believe__lede { max-width: 52%; }    /* canvas 620 of 1200 */


/* 2. Four divided facts ----------------------------------------------------
   The shared `is-style-divided` carries the 1px dividers, the full-bleed and
   the mobile stacking. Two things differ from the homepage's three columns:
   the cells are shallower, and the value above the description is the 24px
   card size rather than the 27px stat size. */
.wp-block-columns.tcf-visit__facts > .wp-block-column {
  padding-block: 38px;
  /* Four EQUAL cells, and the dividers evenly spaced. WordPress ships columns
     as `flex-basis: 0; flex-grow: 1`, which shares out free space rather than
     width - so the first cell, which has no left padding, came out 300px while
     its neighbours came out 340 and the four dividers landed off the quarters.
     A basis of 25% with border-box sizing puts each divider exactly where the
     canvas draws it. */
  flex: 0 0 25%;
}
/* NOT a heading, and that is the accessibility check talking as much as the
   canvas. The canvas draws these as plain text, and marked up as h4 they gave
   the page an h1 -> h4 jump with nothing at h2 or h3 between - a screen-reader
   user skimming by heading would be told the page has four sections that are
   really four labelled facts. The eyebrow above each one is the label. */
.tcf-visit__fact-value {
  font-family: var(--tcf-font-serif);
  font-size: 1.5rem;        /* 24px, measured; the homepage row runs at 27 */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--tcf-ink);
  margin-block: 0 8px;
  max-width: none;
}
.wp-block-columns.tcf-visit__facts .is-style-eyebrow {
  margin-block-end: 12px;
}


/* 3. How a Friday evening runs ---------------------------------------------
   Canvas: 484.5 / 655.5 across a 1140 track with 60px between them, which is
   0.85fr / 1.15fr, and 80px of band padding. Expressed as fractions so the
   split survives a column wider than the artboard. */
.tcf-visit__runs {
  padding-block: 80px;
}
.tcf-visit__runs-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 60px;
  align-items: start;
}

.tcf-visit__runs-intro > h2 {
  margin-block: 0 14px;
  text-wrap: wrap;
  max-width: none;
}
/* 16.5px in muted, not the 17px ink of ordinary prose. Same correction the FAQ
   answers needed: at full strength this paragraph reads as heavy as the
   heading above it. */
.tcf-visit__runs-intro > p {
  font-size: 1.03125rem;   /* 16.5px */
  line-height: 1.7;
  color: var(--tcf-muted);
  margin-block: 0 26px;
  max-width: none;
}

/* The photograph sits where the canvas draws a slot for the door. §1.8 asks
   for "the blue side door seen from the parking lot"; there is no blue door
   and no side lot (DECISIONS_TO_REVIEW.md §14b), so the shot brief here is the
   main doors from the church parking lot, and the tracked placeholder that is
   closest to it stands in until the real photograph exists. 330px is the
   canvas height. */
.tcf-visit__photo {
  margin: 0;
}
.tcf-visit__photo img {
  display: block;
  width: 100%;
  height: 330px;
  object-fit: cover;
}
.tcf-visit__photo figcaption {
  margin-block-start: var(--tcf-space-2);
  font-size: var(--tcf-text-meta);
  color: var(--tcf-muted);
}

/* The running order. A 74px column for the time, then the row. The list is an
   <ol> because the order is the meaning; the times are not list markers. */
.tcf-visit__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--tcf-rule);
}
.tcf-visit__step {
  display: flex;
  gap: 26px;
  padding-block: 20px;
  border-bottom: 1px solid var(--tcf-rule);
}
.tcf-visit__step-time {
  flex: 0 0 74px;
  font-family: var(--tcf-font-serif);
  font-size: 1.1875rem;    /* 19px */
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--tcf-accent);
  font-variant-numeric: tabular-nums;
}
.tcf-visit__step-body { min-width: 0; }
.tcf-visit__step-title {
  display: block;
  font-family: var(--tcf-font-ui);
  font-size: 1.125rem;     /* 18px */
  font-weight: 600;
  line-height: 1.35;
  color: var(--tcf-ink);
  margin-block-end: 4px;
}
.tcf-visit__step-desc {
  display: block;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-sm);
  color: var(--tcf-muted);
}


/* 4. Two panels ------------------------------------------------------------
   Same construction as the homepage's pair: a 1px gap with the row's own
   `rule` background showing through it, full width, and the outer padding
   grown so the text inside still lines up with the 1280 column. */
.tcf-visit__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: var(--tcf-rule);
}
.tcf-visit__panel { padding: 60px 40px; }
.tcf-visit__panel--brick {
  background-color: var(--tcf-accent);
  padding-left: max(var(--tcf-gutter), calc(50vw - (var(--tcf-content-max) / 2)));
}
/* #EFE9DD is the map panel's own colour in §1.1 and §2a.9 - a documented
   in-component neutral rather than a palette slot. */
.tcf-visit__panel--map {
  background-color: #EFE9DD;
  padding-right: max(var(--tcf-gutter), calc(50vw - (var(--tcf-content-max) / 2)));
}

.tcf-visit__panel > .is-style-eyebrow { margin-block: 0 16px; }
.tcf-visit__panel h3 {
  font-family: var(--tcf-font-serif);
  font-size: 2rem;         /* 32px */
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: var(--tcf-tracking-heading);
  margin-block: 0 14px;
  max-width: none;
  text-wrap: wrap;
}
.tcf-visit__panel p {
  font-size: 1.03125rem;   /* 16.5px */
  line-height: 1.7;
  margin-block: 0;
}
.tcf-visit__panel--brick h3 { color: var(--tcf-page); }
.tcf-visit__panel--brick p  { color: var(--tcf-on-brick-body); max-width: 75%; }
.tcf-visit__panel--brick .is-style-eyebrow { color: var(--tcf-on-brick-accent); }

/* The canvas sets the map panel's eyebrow in #8A8175. That is the tertiary
   label colour, which measures about 3:1 on this panel and fails AA at eyebrow
   size - and §1.1 assigns eyebrows to brick anyway. Brick it is, as on the
   homepage's map panel; recorded because it is a deliberate departure. */
.tcf-visit__panel--map .is-style-eyebrow { color: var(--tcf-accent); }

.tcf-visit__venue {
  font-family: var(--tcf-font-serif);
  font-size: 1.625rem;     /* 26px */
  font-weight: 400;
  line-height: 1.35;
  color: var(--tcf-ink);
  margin-block: 0;
  max-width: none;
}
.tcf-visit__address {
  font-size: 1.03125rem;   /* 16.5px */
  line-height: 1.6;
  color: var(--tcf-muted);
  margin-block: 0 22px;
  max-width: none;
}
/* The plugin's map frame carries `aspect-ratio: 3 / 2`, so across a panel this
   wide it renders far taller than the canvas draws it. The height goes on the
   frame and the ratio has to be released for it to take - the same fix the
   homepage closing panel needed. */
.tcf-visit__panel--map .tcf-map__frame {
  aspect-ratio: auto;
  height: 200px;
}
/* 240 on a phone, because OSM's attribution bar wraps to two lines and 40px
   below about 560px of frame width and was taking a fifth of the map. The
   reserved space for this page is `body.page-plan-your-visit .tcf-map__reserve`
   in style.css and it is raised to 240 in the same breakpoint; the two are one
   decision and moving one alone puts a 40px jump back on the page. */
@media (max-width: 767px) {
  .tcf-visit__panel--map .tcf-map__frame { height: 240px; }
}
/* An iframe is focusable and the global focus rule in style.css lists anchors,
   buttons, form controls, summary and [tabindex] - not iframes - so a keyboard
   user landing on the loaded map saw nothing (§5.4). Fixed here for this page;
   the homepage and Contact carry the same map and the same gap, and the rule
   they need belongs in style.css beside the others. */
.tcf-visit__panel--map .tcf-map__frame:focus-visible {
  outline: 2px solid var(--tcf-accent);
  outline-offset: 2px;
}


/* 5. Closing --------------------------------------------------------------- */
.tcf-visit__closing {
  background-color: var(--tcf-page);
  padding-block: 70px;
  text-align: center;
}
.tcf-visit__closing-title {
  font-family: var(--tcf-font-serif);
  font-weight: 300;
  font-size: var(--tcf-text-section);
  line-height: 1.1;
  letter-spacing: var(--tcf-tracking-display);
  margin-block: 0 14px;
  max-width: none;
  text-wrap: wrap;
}
.tcf-visit__closing > p {
  max-width: 480px;
  font-size: var(--tcf-text-body);
  line-height: 1.65;
  color: var(--tcf-muted);
  margin-block: 0 28px;
}
.tcf-visit__closing .wp-block-buttons { justify-content: center; }
/* §1.4's primary button is 16px/30px of padding at 16px semibold, which is a
   51px control. The theme was rendering it at 40px, under the 44px floor §5.8
   sets. Stated here for this page; the same correction belongs in style.css,
   where the button style is shared. */
.tcf-visit__closing .wp-block-button__link {
  padding: 16px 30px;
  font-family: var(--tcf-font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--tcf-radius);
}


/* ===========================================================================
   2e - ABOUT AND OUR STORY
   =========================================================================== */

/* 1. Two-column intro on paper --------------------------------------------
   Canvas: 568 / 568 with 64px between, 76px of padding above and 64 below.
   Equal halves, so a plain 1fr 1fr. */
.tcf-about__intro {
  padding-block: 76px 64px;
}
.tcf-about__intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: stretch;
}
.tcf-about__intro-text > .is-style-eyebrow { margin-block: 0 16px; }
.tcf-about__title {
  font-size: var(--tcf-text-page);
  line-height: var(--tcf-leading-display);
  letter-spacing: var(--tcf-tracking-display);
  margin-block: 0 20px;
  max-width: none;
  text-wrap: wrap;
}
/* 17.5px / 1.8. The canvas sets these in #3B3630, a softened ink the palette
   does not own; §1.1 puts body text on ink, so ink it is. */
.tcf-about__intro-text > p {
  font-size: 1.09375rem;   /* 17.5px */
  line-height: 1.8;
  color: var(--tcf-ink);
  margin-block: 0 16px;
  max-width: none;
}
.tcf-about__intro-text > p:last-child { margin-block-end: 0; }

/* §2e.1 asks for a 430px slot; the canvas draws 480 because the slot stretches
   to the height of the column beside it. Both are satisfied by a floor of 430
   and letting the grid do the rest. */
.tcf-about__intro-photo {
  min-height: 430px;
}


/* 2. Timeline -------------------------------------------------------------- */
.entry-content > .tcf-about__timeline { padding-block: 76px; }

/* THE TWO BANDS ON PAPER-ALT CARRY AN INNER WRAPPER, and it is load-bearing.
   `.entry-content > .is-style-band-alt > *` gives every direct child the 1280
   column and `margin-inline: auto`. The list obeyed both; the heading beside it
   took the width and ignored the margin, and sat hard against the window edge -
   with only three rules in the whole stylesheet capable of setting a margin on
   it, none of which matches. Same unfindable cascade style.css records twice
   already. One wrapper takes the column, the heading sits inside it, and the
   question does not arise. */
.tcf-about__timeline-inner,
.tcf-about__doorway-inner {
  width: min(var(--tcf-content-max), calc(100% - var(--tcf-gutter) * 2));
  margin-inline: auto;
}
.tcf-about__timeline-inner > h2 { margin-block: 0 36px; }
.tcf-about__doorway-inner > h2  { margin-block: 0 32px; }

.tcf-about__eras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
/* §2e.2 says the first rule is brick and the rest are `rule`. Measured, the
   rest are #D9D0C0 - a step darker than `rule`, because `rule` on the
   paper-alt band is all but invisible. In-component value, canvas-sourced. */
.tcf-about__era {
  padding-block-start: 20px;
  border-top: 2px solid #D9D0C0;
}
.tcf-about__era:first-child { border-top-color: var(--tcf-accent); }

.tcf-about__era-year {
  display: block;
  font-family: var(--tcf-font-serif);
  font-size: 2.125rem;     /* 34px */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--tcf-accent);
  margin-block-end: 10px;
  font-variant-numeric: tabular-nums;
}
.tcf-about__era-title {
  display: block;
  font-size: var(--tcf-text-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tcf-ink);
  margin-block-end: 6px;
}
.tcf-about__era-desc {
  display: block;
  font-size: 0.9375rem;    /* 15px */
  line-height: 1.6;
  color: var(--tcf-muted);
}


/* 3. Who leads ------------------------------------------------------------- */
.tcf-about__leaders { padding-block: 76px; }
.tcf-about__leaders-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tcf-space-5);
  margin-block: 0 32px;
}
.tcf-about__leaders-head h2,
.tcf-about__leaders-head p { margin-block: 0; max-width: none; }

/* Three across, as drawn, holding the two people the church has. The empty
   third column is the honest state of it and keeps the cards at the drawn
   width; §2e wants leadership to become a CPT so the grid fills itself. */
.tcf-about__leader-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tcf-space-5);
  align-items: start;
}
/* The Our Leadership portraits.
   Distinct from `.tcf-about__portrait`, which sits in a fixed grid column and so
   is sized by its container. These sit in the single full-width prose column, so
   without a cap the block editor's `size-large` renders them at their natural
   800px - which is what shipped, and what Jay called "way too big".
   A face at 220px is recognisable, which is the entire job; the biography beside
   it is the content. The square crop matches the shot list, which specifies head
   and shoulders for D1 and D2. */
/* The cap goes on the IMG, not only on the figure. A `max-width` on the figure
   alone loses to WordPress's own `.wp-block-image` layout rules, and the first
   attempt at this made the portraits WORSE - `width: 100%` on the image applied
   while the figure's cap did not, so an 800px portrait stretched to the full
   1290px column. Constrain the thing being measured. */
/* Our Leadership: portrait and biography side by side, alternating.
   Jay's ruling, 2026-08-09 - "alternate left/right kelly and chad's pictures and
   biography on the page then a horizontal line and the list of elders/deacons".
   Alternating stops two stacked people reading as a template, which is the thing
   the page's own docblock says it exists to avoid.
   The portrait column is fixed at the 220px the image is capped to, so the
   biography gets everything else rather than being measured against a guess. */
.tcf-leader {
  display: grid;
  /* Not `1fr`. The biography column would then take the whole content width -
     measured at 1042px, about 130 characters a line, where comfortable reading
     is 60 to 75. The portrait alternates; the measure should not change with it. */
  grid-template-columns: 220px minmax(0, 62ch);
  gap: var(--tcf-space-5);
  align-items: start;
  justify-content: start;
  margin-block: var(--tcf-space-6);
}
.tcf-leader--b { grid-template-columns: minmax(0, 62ch) 220px; }
.tcf-leader--b .tcf-leader__portrait { grid-column: 2; grid-row: 1; }
.tcf-leader--b .tcf-leader__body { grid-column: 1; grid-row: 1; }

/* THE NAME AND TITLE FOLLOW THE PORTRAIT ACROSS. Jay, 2026-08-10: "move the
   title and name to the right for kelly hahn on the leadership page so it's next
   to his picture."

   Alternating the columns moved the portrait but not the label attached to it.
   Measured at 1440: in the reversed block the portrait sits at x=748 while the
   heading started at x=75, the far edge of a 645px column, so a name and a face
   that belong together were about 670px apart with a biography between them. In
   the first block they are adjacent, which is why only this one looks wrong.

   The heading and eyebrow only. The biography keeps its left edge: it is prose
   at a 62ch measure, and right-aligning a paragraph gives every line a ragged
   left edge, which is materially harder to read because the eye loses the return
   sweep. So the label moves and the text it introduces does not. */
.tcf-leader--b .tcf-leader__body > h3,
.tcf-leader--b .tcf-leader__body > .is-style-eyebrow {
  text-align: right;
}
.tcf-leader__body > :first-child { margin-block-start: 0; }
.tcf-leader-rule { margin-block: var(--tcf-space-6); }

/* One column on a phone, and the portrait always leads. Alternation is a
   two-column idea; stacked, a picture below its own biography just reads as a
   mistake. */
@media (max-width: 767px) {
  .tcf-leader,
  .tcf-leader--b { grid-template-columns: 1fr; }
  .tcf-leader--b .tcf-leader__portrait,
  .tcf-leader--b .tcf-leader__body { grid-column: 1; grid-row: auto; }
  /* Stacked, the portrait leads again and there is no column to the right for a
     name to sit beside, so it goes back to the left with everything else.
     Overriding a responsive component inherits the duty to hand its breakpoint
     back. */
  .tcf-leader--b .tcf-leader__body > h3,
  .tcf-leader--b .tcf-leader__body > .is-style-eyebrow {
    text-align: left;
  }
}

/* `margin-inline` needs `!important`, and this is the third time this file has
   learned it. The page's `.entry-content` is `is-layout-constrained`, which
   centres any block narrower than the column with auto side margins - measured
   here as 535px a side. A plain `margin: 0 0 16px` loses to it, so the portrait
   sat marooned in the middle of the column with the biography beneath it. */
figure.wp-block-image.tcf-leader__portrait {
  max-width: 220px;
  margin: 0 0 16px !important;
  margin-inline-end: auto !important;
}
figure.wp-block-image.tcf-leader__portrait img {
  display: block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
}

.tcf-about__portrait { margin: 0 0 16px; }
.tcf-about__portrait img {
  display: block;
  width: 100%;
  height: 300px;           /* canvas 302 including its 1px slot border */
  object-fit: cover;
}
/* 24px, measured. `--tcf-text-card` runs to 30px at this width, which is the
   §1.2 range rather than the drawn size. */
.tcf-about__leader-name {
  font-family: var(--tcf-font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--tcf-ink);
  margin-block: 0;
  text-wrap: wrap;
}
.tcf-about__leader-role {
  font-family: var(--tcf-font-ui);
  font-size: 0.90625rem;   /* 14.5px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--tcf-accent);
  margin-block: 0 8px;
  max-width: none;
}
.tcf-about__leader-bio {
  font-size: 0.9375rem;    /* 15px */
  line-height: 1.6;
  color: var(--tcf-muted);
  margin-block: 0;
  max-width: none;
}


/* 4. Where to go from here -------------------------------------------------
   Not in the canvas: /about/ is a doorway page with no drawn screen of its own,
   and the cross-page rule in §2e says a page ends on a call to action rather
   than running body copy into the footer. Ordinary `is-style-card` cards, which
   already carry the 1px rule, the square corners and the brick hover border
   §1.4 asks for. */
.entry-content > .tcf-about__doorway { padding-block: 76px; }
.tcf-about__doors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tcf-space-5);
  /* No `align-items: start`. These are bordered cards landing on a shared
     baseline, so a card with a three-line description must still close at its
     row's height. Measured at 1280 with `start`: heights 198/222/174/222, so
     "Our leadership" stopped 48px (21.6%) above its three siblings and its
     bottom rule floated. Also wrong at 1440 (24px) and at 1023 and 900 (24px on
     both rows).

     Stretch is the whole fix here, and it leaves the content top-aligned by
     itself: `.tcf-about__door` is a flex column with no `justify-content` and
     no trailing action - the title IS the link - so the surplus falls to the
     bottom. If a "Read more" line is ever added, it needs `margin-top: auto`
     or four links will sit at four heights inside four equal boxes.

     Deliberately distinct from the `align-items: start` on the layout grids
     above (`.tcf-visit__runs-inner`, `.tcf-believe__inner`, `.tcf-leader`) and
     on the member hub panels, which is correct there and must stay. The test is
     whether the item has a visible boundary landing on a shared baseline. */
}
.tcf-about__door {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Colour and underline come from the site's own link style (§1.1); only the
   size and the family are the card's.

   The 44px floor is §5.8, not decoration: a 24px serif line is a 30px target,
   and these four are the only thing this page is for. The box grows around the
   text rather than the text growing, so the type still matches the leadership
   card titles beside it. */
.tcf-about__door-title {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--tcf-font-serif);
  font-size: 1.5rem;       /* 24px, matching the leadership card titles */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}
.tcf-about__door-desc {
  font-size: 0.9375rem;    /* 15px */
  line-height: 1.6;
  color: var(--tcf-muted);
}


/* ===========================================================================
   2f - WHAT WE BELIEVE
   =========================================================================== */

.entry-content > .tcf-believe__intro { padding-block: 72px; }

/* Canvas: 427.5 / 712.5 across a 1140 track, which is the 0.75fr / 1.25fr §2f
   names, with 60px between and 72px of band padding. */
.tcf-believe__body { padding-block: 72px; }
.tcf-believe__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 60px;
  align-items: start;
}

.tcf-believe__aside > h2 {
  font-family: var(--tcf-font-serif);
  font-size: 2rem;         /* 32px */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--tcf-tracking-heading);
  margin-block: 0 14px;
  max-width: none;
  text-wrap: wrap;
}
.tcf-believe__aside > p {
  font-size: 1.03125rem;   /* 16.5px */
  line-height: 1.7;
  color: var(--tcf-muted);
  margin-block: 0 24px;
  max-width: none;
}
.tcf-believe__aside .wp-block-buttons { margin-block: 0 14px; }
/* The secondary button, per §1.4 and the canvas: transparent, a 1px border,
   ink text, 13px/24px of padding. WordPress's own `is-style-outline` was
   painting it as a 2px brick outline with brick text and 5px of padding, which
   is a second primary button rather than a secondary one. Scoped to this page
   because `is-style-outline` is used site-wide and style.css owns it; the same
   correction belongs there. The border colour is the project's #918470 rather
   than the handoff's #C9BFAE, which fails 1.4.11 - already ruled. */
.tcf-believe__aside .wp-block-button.is-style-outline > .wp-block-button__link {
  border: 1px solid var(--tcf-button-border);
  border-radius: var(--tcf-radius);
  padding: 13px 24px;
  font-family: var(--tcf-font-ui);
  font-size: var(--tcf-text-ui);
  font-weight: 600;
  color: var(--tcf-ink);
  background-color: transparent;
  transition: border-color var(--tcf-motion-hover) var(--tcf-ease);
}
.tcf-believe__aside .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color: var(--tcf-ink);
  color: var(--tcf-ink);
}
.tcf-believe__also {
  font-size: 0.9375rem;    /* 15px */
  line-height: 1.7;
  color: var(--tcf-muted);
  margin-block: 0;
  max-width: none;
}

/* The accordion is the FAQ's, with a numeral column in front of a serif title.
   The numerals count themselves so an article can be added or moved without
   renumbering the ones below it. */
.tcf-believe__articles { counter-reset: tcf-article; }
.tcf-believe__article  { counter-increment: tcf-article; }

.tcf-believe__articles .tcf-accordion__summary {
  align-items: center;
  gap: 20px;
}
.tcf-believe__num {
  flex: 0 0 26px;
  font-family: var(--tcf-font-serif);
  font-size: 0.9375rem;    /* 15px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--tcf-numeral);
  font-variant-numeric: tabular-nums;
}
.tcf-believe__num::before { content: counter(tcf-article, decimal-leading-zero); }

.tcf-believe__article-name {
  flex: 1 1 auto;
  font-family: var(--tcf-font-serif);
  font-size: 1.5rem;       /* 24px */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--tcf-ink);
  transition: color var(--tcf-motion-hover) var(--tcf-ease);
}
.tcf-believe__articles .tcf-accordion__summary:hover .tcf-believe__article-name {
  color: var(--tcf-accent);
}

/* The open body lines up under the title rather than under the numeral: 26px
   of numeral plus the 20px gap. */
.tcf-believe__articles .tcf-accordion__panel {
  padding: 0 60px 26px 46px;
  max-width: none;
}


/* ===========================================================================
   RESPONSIVE (§1.10)

   Three-across becomes two, two-column splits stack, and every percentage
   measure above is released - a measure that is right at 1280 is a straitjacket
   at 700.
   =========================================================================== */

@media (max-width: 1023px) {
  .tcf-about__eras        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcf-about__leader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcf-about__doors       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .tcf-visit__runs-inner,
  .tcf-about__intro-inner,
  .tcf-believe__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tcf-space-6);
  }

  .tcf-visit__title,
  .tcf-visit__lede,
  .tcf-believe__title,
  .tcf-believe__lede {
    max-width: none;
  }
  .tcf-visit__panel--brick p { max-width: none; }

  .tcf-about__intro-photo { min-height: 300px; }
  .tcf-visit__photo img   { height: 260px; }
}

@media (max-width: 767px) {
  .entry-content > .tcf-visit__intro,
  .entry-content > .tcf-believe__intro { padding-block: 44px; }
  .tcf-visit__runs,
  .tcf-about__intro,
  .tcf-about__leaders,
  .tcf-believe__body { padding-block: 44px; }
  .entry-content > .tcf-about__timeline { padding-block: 44px; }
  .tcf-visit__closing { padding-block: 44px; }

  .tcf-visit__panels { grid-template-columns: minmax(0, 1fr); }
  .tcf-visit__panel  { padding: 40px 24px; }
  .tcf-visit__panel--brick { padding-left: 24px; }
  .tcf-visit__panel--map   { padding-right: 24px; }

  .tcf-about__eras        { grid-template-columns: minmax(0, 1fr); gap: var(--tcf-space-5); }
  .tcf-about__leader-grid { grid-template-columns: minmax(0, 1fr); }
  .tcf-about__doors       { grid-template-columns: minmax(0, 1fr); }
  .entry-content > .tcf-about__doorway { padding-block: 44px; }

  /* The time keeps its own column on a phone; dropping it under the title
     would break the one thing this list is for, which is reading down the
     evening at a glance. It narrows instead. */
  .tcf-visit__step { gap: var(--tcf-space-4); }
  .tcf-visit__step-time { flex-basis: 56px; }

  .tcf-believe__articles .tcf-accordion__panel { padding: 0 0 26px 46px; }
}

/* Two rows of the running order carry no clock time: the sequence is known and
   the minute is not. The cell still has to hold the column open, or the title
   beside it slides left and the list stops reading as a timeline. */
body.page-plan-your-visit .tcf-visit__step-time:empty::before {
  content: "";
  display: block;
  min-height: 1px;
}

/* THE JOIN BELOW THE BELIEF BAND, and the creeds section's own top edge.
   Added 2026-08-10, closing the first of the three follow-ons the belief-page
   merge left behind.

   When The Creeds and How We Practice This were separate pages, each opened with
   its own band and the transition was free. Merged into What We Believe, they
   became plain top-level blocks inheriting the interior prose styles, sitting on
   plain paper directly under the tinted `.tcf-believe__body` band with nothing
   between them. It passed `check_design.py` and read acceptably at 1440 and 390,
   which is precisely why it needed deciding rather than leaving: a seam that is
   only slightly wrong never gets fixed by accident.

   A HAIRLINE, NOT A BAND, and the reasoning is the same as the home page's
   two-panels seam on the same day. Giving the creeds a tinted band of their own
   would put three coloured bands in a row on a page that already alternates
   correctly, and it would compete with the aside that is meant to be the one
   framed thing on the page. The rule marks the join and claims nothing.

   `--tcf-rule` at 1px, the site's own divider, and generous space above the
   first creed so the rule reads as the end of the band rather than as an
   underline attached to the paragraph below it. */
.entry-content > .tcf-believe__body + p {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--tcf-rule);
}

/* The in-page jump from the articles aside lands here, and `tabindex="-1"` in
   the pattern is what makes a keyboard land WITH it rather than merely scroll to
   it. That attribute is invisible until focused, and the browser's default focus
   ring on a paragraph is both ugly and easy to mistake for a selection, so it
   gets the site's own treatment: no outline, a brick rule down the left, which
   is the same vocabulary the accordion summary uses when focused. */
#the-creeds:focus {
  outline: none;
}
#the-creeds:focus-visible {
  outline: none;
  box-shadow: -14px 0 0 -12px var(--tcf-accent);
}