/**
 * interior-b.css - Life Together (2g), Contact and Resources (2h), member area (2i)
 *
 * Enqueued automatically after style.css by the css/*.css loop in functions.php.
 * Read css/README.md before editing: every selector here is scoped to one page
 * family, every value is a var(--tcf-*) unless the design names a literal, and
 * there is no !important without a sentence saying what it beats.
 *
 * SCOPING. There is no slug body class on this site - core gives pages only
 * `page-id-N`, and Blocksy adds nothing useful - so the scope is carried by the
 * section wrapper class in the page's own markup instead. Every class below
 * begins `tcf-lt-` (Life Together: /life-together/ and its two children),
 * `tcf-ct-` (Contact), `tcf-rs-` (Resources) or `tcf-mb-` (the member area), and
 * those classes exist on no other page. Two components are shared between
 * Contact and the member area (the agenda rows, the document rows); they are
 * written as an :is() list of both scopes rather than as a loose class.
 *
 * MEASURES. Every pixel figure in docs/handoff/design-reference.html was drawn
 * for a fixed 1280px mock whose inner content column is 1200px. This site's
 * content column is 1290px (Blocksy's .ct-container) and the band inner is
 * 1280px. Where a canvas measure is a cap on a text column it is kept literally
 * (820px, 456px); where it describes a share of the column it is expressed as a
 * proportion or a fraction so it does not wrap a line early. Nothing here uses
 * `ch`: a `ch` is sized from the font, so 22ch of 30px Newsreader is 370px.
 *
 * Two live bugs in style.css that this file works around rather than papers
 * over, both of them the undefined-custom-property trap css/README.md warns
 * about. Reported, not fixed here, because style.css is not this file's to edit:
 *
 *   - `--tcf-font-sans` is never defined. `.tcf-closing__address` asks for it
 *     and silently inherits. Use `--tcf-font-body` (or its alias `--tcf-font-ui`).
 *   - `--wp--preset--font-size--lede` is empty, so `.has-lede-font-size` - which
 *     the homepage hero and several patterns set - computes at 17px rather than
 *     the 19px §1.2 specifies. Ledes here set their size from `--tcf-text-lede`
 *     directly instead of trusting the preset class.
 */


/* ---------------------------------------------------------------------------
   One place the canvas was not followed: the hairline on a paper-alt band

   Every divider inside an alt band in 2g and 2h measures #E0D7C7 on the canvas,
   a shade darker than --tcf-rule (#E7E0D4), because --tcf-rule is mixed for
   paper (#FBF8F3) and goes faint on paper-alt (#F3EEE4). That is a real
   observation and it was built that way first.

   check_design.py failed it: §1.1 is six colours plus a NAMED list of
   in-component neutrals, and #E0D7C7 is not on that list. The difference
   between the two on this background is about half a percent of contrast, and
   docs/DECISIONS_TO_REVIEW.md §3 makes the case that a gate loosened once gets
   loosened again. So the dividers take --tcf-rule and the gate stays strict.
   If a reviewer wants the canvas's exact hairline back it is one token.
   --------------------------------------------------------------------------- */


/* ===========================================================================
   0. THE CONTENT AREA BUTTS THE HEADER AND THE FOOTER  (§1.3)

   "Band-to-band gap is 0 - bands butt together and are separated by colour or a
   rule hairline", and §2's cross-page rule ends every page on a band rather than
   on body text. Blocksy puts 60px of padding on the content container
   (`[data-vertical-spacing*="top"|"bottom"]`, one class of specificity), which
   left a strip of paper above the first band and, worse, between the last band
   and the footer - so the closing panel read as a slab floating over the page
   rather than as the foot of it. Measured: 60px top, 60px bottom.

   Selected through :has() on this file's own section classes, so it reaches
   exactly the pages built here and nothing else. Two classes beats one; no
   !important needed.
   =========================================================================== */
.ct-container-full:has(> * > .entry-content > .tcf-lt-intro),
.ct-container-full:has(> * > .entry-content > .tcf-ct-top),
.ct-container-full:has(> * > .entry-content > .tcf-rs-intro),
.ct-container:has(> * > .entry-content > .tcf-lt-intro),
.ct-container:has(> * > .entry-content > .tcf-ct-top),
.ct-container:has(> * > .entry-content > .tcf-rs-intro),
.tcf-members-page {
  padding-block: 0;
}

/* A signed-out member page is short - an ink band and nothing else - and
   Blocksy keeps the footer at the bottom of the window on a short page by
   letting <main> grow past its content. Measured: 27px of paper between the
   bottom of the ink band and the ink footer, a pale stripe across the foot of
   the page. It is not a margin and not a stray text node; both were chased
   first, and neither is there.

   So <main> takes the band's own colour on exactly the pages that can be short
   enough to show it. The band is full-bleed, so the two are continuous and the
   stripe has nowhere to appear. Nothing else on the page draws a background at
   this level, so there is nothing for it to conflict with. */
main.site-main:has(.tcf-mb-signin) {
  background-color: var(--tcf-ink);
}


/* ===========================================================================
   1. PAGE INTRO  (2g.1, 2h.1, and the head of every member page)

   §2g.1: "820px column: eyebrow, H1, lede". Measured on the canvas at
   padding 72px top / 56px bottom, h1 52/1.06 weight 300 at -0.02em, eyebrow
   11.5px at 0.2em in brick, 16px under the eyebrow and 18px under the h1.

   The h1 needs no type rules: entry-content already renders h1 at exactly
   52px/1.06 weight 300 -0.02em Newsreader, which is the `page-title` token.
   Only the margins and the measure are set here.

   Blocksy's own page-title hero is switched off per page (post meta
   has_hero_section = disabled) so there is exactly one h1 on the page and it is
   the design's headline rather than the WordPress page name.
   =========================================================================== */
.tcf-lt-intro,
.tcf-rs-intro,
.tcf-mb-intro {
  padding-block: var(--tcf-space-8) var(--tcf-space-7);  /* 72 / 56 */
  background-color: var(--tcf-page);
}

/* Two levels on purpose. `__inner` takes the band's 1280px cap and the 40px
   gutter from the full-bleed rule in section 10, and `__col` narrows the text
   inside it - LEFT aligned. Putting both on one element makes the 820px column
   inherit that rule's `margin-inline: auto` and centre itself, which is not what
   the canvas draws. */
.tcf-lt-intro__col,
.tcf-rs-intro__col,
.tcf-mb-intro__col {
  /* The canvas caps the intro text at 820 of its 1200px column. Our column is
     1280, so 820 is if anything slightly generous here rather than tight - it
     is kept literal because it is a cap on a headline, not a share of a grid. */
  max-width: 820px;
}

.tcf-lt-intro h1,
.tcf-rs-intro h1,
.tcf-mb-intro h1 {
  margin: 0 0 18px;
  max-width: none;   /* the 820px column is the measure; 68ch of 52px serif is not */
}

/* Body size, not the 19/1.65 §1.2 draws: see the note above `.tcf-lede` in
   style.css. The 820px column is still the measure and the colour is still ink,
   so what marks this paragraph as the opening one is where it sits, not how
   big it is. */
.tcf-lt-intro__lede,
.tcf-rs-intro__lede,
.tcf-mb-intro__lede {
  margin: 0;
  max-width: none;
  font-family: var(--tcf-font-body);
  font-size: var(--tcf-text-body);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-ink);
  text-wrap: pretty;
}

/* 2g.1 draws the intro column as eyebrow, H1, lede and stops there, so the lede
   is normally the last thing in the column and `margin: 0` is right for it.

   Where a page carries the thought on into body copy that zero is wrong,
   because this rhythm is margin-bottom-only: nothing carries a top margin, so
   an element that ends at 0 leaves the next one touching it. Measured on
   /life-together/home-groups/ at 1280 while the lede was still 19px: it ended
   at 481px and the 17px paragraph beneath it began at 481px. Two paragraphs at
   two sizes with no space between them do not read as a lede and a body. They
   read as one paragraph whose font changed halfway through, which is what was
   reported.

   NO PAGE EXERCISES THIS RULE AS OF 2026-09-07. Home groups was the only one,
   and its opening paragraph is no longer a lede - Jay looked at the spaced
   version and still read the 19-to-17 step as a fault, so the class came off
   that paragraph (see the header of patterns/page-life-together.php, and
   DECISIONS_TO_REVIEW.md §23a). The rule stays because the trap it closes is
   real and the next page to carry a lede into prose will hit it: `margin: 0`
   is right only while the lede is last in its column, which is the shape 2g.1
   draws and the shape /life-together/ and Kids & Youth still have.

   28px rather than the 25.5px body-to-body rhythm. THIS ONE IS NOW ARGUABLE:
   the size step it was compensating for is gone, so a lede handing off to body
   copy is no longer a larger break than one paragraph to the next, and 25.5
   would be the consistent answer. It is left at 28 because no page renders it
   and changing an unrendered number proves nothing. The page that next carries
   a lede into prose should be looked at, and 25.5 tried first. */
.tcf-lt-intro__lede:not(:last-child),
.tcf-rs-intro__lede:not(:last-child),
.tcf-mb-intro__lede:not(:last-child) { margin-bottom: var(--tcf-space-5); }

@media (max-width: 767px) {
  .tcf-lt-intro,
  .tcf-rs-intro,
  .tcf-mb-intro { padding-block: var(--tcf-space-6) var(--tcf-space-6); }
}


/* ===========================================================================
   2. CARD GRID  (2g.2 group cards, and the Resources list)

   Canvas: three columns, 28px gap, each card a 1px rule border with no radius
   and no shadow (§1.4), a 190px photo slot flush to the top edge, and 26px of
   padding under it.

   The photo slot is expressed as an aspect ratio rather than 190px: the canvas
   card is 379x190, which is 2:1, and our card is ~411px wide - a literal 190px
   would make the slot progressively squatter as the column grows.
   =========================================================================== */
.tcf-lt-cards,
.tcf-rs-cards {
  padding-block: 0 var(--tcf-space-8);
  background-color: var(--tcf-page);
}

.tcf-lt-cards__grid,
.tcf-rs-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tcf-space-5);   /* 28px, §1.3 grid gutter for cards */
}

.tcf-lt-card,
.tcf-rs-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tcf-rule);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--tcf-page);
  transition: border-color var(--tcf-motion-hover) var(--tcf-ease);
}

/* §1.4: "Hover on linked cards: border goes to brick, nothing else moves." */
.tcf-lt-card:has(a:hover),
.tcf-lt-card:has(a:focus-visible),
.tcf-rs-card:has(a:hover),
.tcf-rs-card:has(a:focus-visible) { border-color: var(--tcf-accent); }

/* The slot keeps is-style-photo-slot's fill, dashed border and PHOTO SLOT
   label from style.css; only the box changes. The canvas drops the dash to the
   bottom edge alone, because the card's own solid rule already draws the other
   three sides. */
.tcf-lt-card__photo,
.tcf-rs-card__photo {
  min-height: 0;
  aspect-ratio: 2 / 1;
  padding: 18px;
  border: 0;
  border-bottom: 1px dashed var(--tcf-photo-border);
}

/* THE COVER BOX. Jay, 2026-08-10, chose to use the publishers' cover images
   after I proposed photographing our own copies; his call, his church.

   A COVER IS PORTRAIT AND THE CARD IS NOT, which is the whole problem this rule
   solves. The two covers are 0.64 and 0.81 wide-to-tall; dropping either into
   the 2:1 landscape box the photo slots use would crop the title off. So the box
   keeps a fixed 3:2 so both cards stay the same height, and the cover is
   CONTAINED inside it rather than cropped: whole cover, always, whatever shape
   the next one is.

   `--tcf-surface` behind it, not `--tcf-page`. A contained portrait leaves bands
   either side, and on the card's own paper those bands read as broken layout;
   on the alternating tint they read as a mount. The 1px bottom rule is the same
   divider the photo slots use, so the two card families still line up. */
.tcf-rs-card__cover {
  position: relative;      /* see below: this is what makes the box win */
  /* A FIXED HEIGHT, NOT A RATIO, and the first version got this wrong.
     It used `aspect-ratio: 3 / 2`, which is fine on a narrow card and absurd on
     a wide one: §7 below pins this grid to TWO columns, so a card is 626px and
     a 3:2 box came out 416px tall for a book thumbnail. A cover is a small fixed
     object, so the box that holds it should be a fixed size too, and the card's
     width should not decide how big a paperback looks. */
  height: clamp(190px, 17vw, 250px);
  background-color: var(--tcf-surface);
  border-bottom: 1px solid var(--tcf-rule);
  overflow: hidden;
}
/* ABSOLUTELY POSITIONED, AND THAT IS THE FIX RATHER THAN A FLOURISH.
   The first attempt was a flex box with `aspect-ratio: 3/2` and an image at
   `max-height: 100%`. It did not constrain anything: aspect-ratio only sets the
   height when the CONTENT does not force it larger, and the image's max-height
   resolved against a height that was itself still auto. Measured live, the
   covers came out 910px and 721px tall and the cards 2327px. Taking the image
   out of flow leaves the box's ratio as the only thing deciding the height. */
.tcf-rs-card__cover figure {
  position: absolute;
  inset: 20px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tcf-rs-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* whole cover, never cropped, whatever shape it is */
  border-radius: 2px;
}

/* THE PHOTOGRAPH ROUTE IS STILL HERE for the two cards that have no
   recommendation yet, and the reasoning is kept because it decides the next one.
   Added 2026-08-10 with the first two real recommendations.

   A book cover is the publisher's artwork. Copying one onto this server to
   illustrate a recommendation is republishing somebody else's work, and it also
   makes a church's resources page look like a shop listing. A photograph of the
   copy that actually sits in this church is unambiguously ours, matches every
   other photograph on the site, and says something the cover cannot: that people
   here use this.

   Same 2:1 box as the Life Together cards, so a page of recommendations and a
   page of activities read as the same component family. */

.tcf-lt-card__body,
.tcf-rs-card__body {
  padding: 26px;   /* §1.4 card padding */
}

/* The colour is repeated here on purpose. is-style-eyebrow carries brick at one
   class of specificity, and the card's own `> p` rule below carries muted at a
   class plus a type - so without this the eyebrow, which is a <p>, came out
   muted. Measured: rgb(107,98,89) where the canvas draws rgb(150,65,46). */
.tcf-lt-card__body > .is-style-eyebrow,
.tcf-rs-card__body > .is-style-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  max-width: none;
  color: var(--tcf-accent);
}

.tcf-lt-card__name,
.tcf-rs-card__name {
  margin: 0 0 10px;
  max-width: none;
  font-family: var(--tcf-font-display);
  /* 26px, the bottom of §1.2's 26-30 card-title band. --tcf-text-card tops out
     at 30px, which is sized for a half-page panel; across a third of the column
     it puts two words on a line. */
  font-size: 1.625rem;
  font-weight: 400;
  line-height: var(--tcf-leading-card);
  letter-spacing: var(--tcf-tracking-heading);
  color: var(--tcf-ink);
}

.tcf-lt-card__body > p,
.tcf-rs-card__body > p {
  margin: 0 0 18px;
  max-width: none;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-sm);
  color: var(--tcf-muted);
}

.tcf-lt-card__body > p:last-child,
.tcf-rs-card__body > p:last-child { margin-bottom: 0; }

@media (max-width: 1023px) {
  /* §1.10: 3-across becomes 2-across */
  .tcf-lt-cards__grid,
  .tcf-rs-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tcf-lt-cards__grid,
  .tcf-rs-cards__grid { grid-template-columns: minmax(0, 1fr); }
  .tcf-lt-cards,
  .tcf-rs-cards { padding-bottom: var(--tcf-space-6); }
}


/* ===========================================================================
   3. TIMED ROWS inside a panel  (2g.3 "What an evening looks like")

   Canvas: flex row, 20px gap, 14px vertical padding, a rule under every row but
   the last, the time in Newsreader 17px brick in a fixed 62px column.

   2b's five-row schedule is the same component at a 74px column and lives in
   interior-a.css; this one is deliberately not shared, because they belong to
   two pages that are being built in parallel.
   =========================================================================== */
/* Same margin-bottom-only trap as the lede above, and the same measurement:
   the schedule ended at 1706px and the paragraph after it began at 1706px, so
   "Some of it will be awkward" arrived looking like a sixth timed row that had
   lost its time. The schedule keeps its zero when it is the last thing in the
   panel, which is the shape 2g.3 draws. */
.tcf-lt-panels .tcf-lt-schedule { margin: 0; }
.tcf-lt-panels .tcf-lt-schedule:not(:last-child) { margin-bottom: var(--tcf-space-5); }

.tcf-lt-panels .tcf-lt-schedule__row {
  display: flex;
  gap: 20px;
  padding-block: 14px;
  border-bottom: 1px solid var(--tcf-rule);
}
.tcf-lt-panels .tcf-lt-schedule__row:last-child { border-bottom: 0; padding-bottom: 0; }

.tcf-lt-panels .tcf-lt-schedule__time {
  flex: 0 0 auto;
  width: 62px;
  font-family: var(--tcf-font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--tcf-accent);
  font-variant-numeric: tabular-nums;
}

/* 17px, the `body` step, and NOT the canvas's 16.
   The canvas draws this row at 16px, and 16 is not a step of §1.2's scale at
   all: it goes 15.5 (body-sm) to 17 (body) with nothing between. The drawing
   can carry an off-scale value because in the canvas this panel holds four
   timed rows and nothing else. Ours holds five rows and then a paragraph of
   prose, inside the same panel, in the same ink and the same face - and 16
   against 17 across that join is a font change with no reason a reader can
   see, which is the defect Jay reported twice. Measured at 1280: the row ended
   at y=1708 and "Some of it will be awkward" began at 1762.
   15.5 was built and shot too: it still steps, and it drops the row below the
   17px serif in the time column beside it. 17 is the nearest step, matches the
   serif, and closes the join. */
.tcf-lt-panels .tcf-lt-schedule__what {
  margin: 0;
  max-width: none;
  font-size: var(--tcf-text-body);
  line-height: var(--tcf-leading-sm);
  color: var(--tcf-ink);
}


/* ===========================================================================
   4. THE TWO-PANEL ROW on a Life Together page  (2g.3)

   .tcf-two-panels itself is style.css's, full-bleed with the panels butting
   together over a 1px rule. Two things change here: the left panel is paper-alt
   rather than paper (measured #F3EEE4 in the canvas), and the right panel's
   call to action is a solid paper button rather than an arrow link.
   =========================================================================== */
.tcf-lt-panels .tcf-two-panels__panel--paper { background-color: var(--tcf-surface); }

.tcf-lt-panels .tcf-two-panels__panel h3 { margin-bottom: 22px; }
.tcf-lt-panels .tcf-two-panels__panel--brick h3 { margin-bottom: 16px; }

/* Canvas: 400 of the 559px panel, so a little under three quarters - which is
   the 75% cap style.css already puts on a panel paragraph. Left alone. */
.tcf-lt-panels .tcf-two-panels__panel--brick > p { margin-bottom: 26px; }

/* §1.4 has no white-on-brick button variant; 2g draws one, and it is the only
   control on a brick field, so it takes the primary button's geometry with the
   fill and the text swapped. */
.tcf-lt-panels a.tcf-lt-button-onbrick,
.entry-content .tcf-lt-panels a.tcf-lt-button-onbrick {
  display: inline-block;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--tcf-radius);
  background-color: var(--tcf-page);
  font-family: var(--tcf-font-body);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  /* !important, and measured before reaching for it. It beats style.css's
     `.entry-content a:not(...)` body-link rule, whose nine :not() arguments put
     it at roughly ten classes of specificity - far above anything a sane
     selector here can reach. That rule exists to underline links in prose; this
     is a button, and the canvas draws it without an underline. */
  text-decoration: none !important;
  /* -webkit-text-fill-color as well as color: style.css's "nothing vanishes
     under the pointer" backstop repaints foregrounds on brick and reaches this
     button, which would put paper text on a paper fill. */
  color: var(--tcf-ink) !important;
  -webkit-text-fill-color: var(--tcf-ink) !important;
  transition: background-color var(--tcf-motion-hover) var(--tcf-ease);
}
.tcf-lt-panels a.tcf-lt-button-onbrick:hover,
.tcf-lt-panels a.tcf-lt-button-onbrick:focus-visible { background-color: var(--tcf-surface); }


/* ===========================================================================
   5. CONTACT, top half  (2h.1)

   Canvas: 72px band padding, two equal columns with a 64px gutter. Left is the
   eyebrow, the h1, the lede and the rule-separated definition list; right is
   the map and the bordered "Getting here" box.
   =========================================================================== */
.tcf-ct-top {
  padding-block: var(--tcf-space-8);
  background-color: var(--tcf-page);
}

.tcf-ct-top__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.tcf-ct-top h1 { margin: 0 0 20px; max-width: none; }

.tcf-ct-top__lede {
  margin: 0 0 34px;
  /* 440 of the canvas's 568px column - kept as the proportion so the line
     count holds as the column grows. */
  max-width: 78%;
  font-family: var(--tcf-font-body);
  /* Body size site-wide since 2026-09-07 - the note above `.tcf-lede` in
     style.css. The 78% is the lede here, not the size. */
  font-size: var(--tcf-text-body);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-ink);
  text-wrap: pretty;
}

/* -- the definition list -----------------------------------------------------
   Email, phone and post come from the tcf/contact-details block so they stay
   editable under Settings -> Church details, and so an unset value leaves the
   page rather than printing an empty label. That block renders a two-column
   grid <dl>; the canvas draws stacked rows with a hairline between, so the grid
   is unwound here and the rule hung on the <dd>.
   -------------------------------------------------------------------------- */
.tcf-ct-list { border-top: 1px solid var(--tcf-rule); }

.tcf-ct-list .tcf-contact-details { margin: 0; }

.tcf-ct-list .tcf-contact-details__list {
  display: block;
  margin: 0;
  gap: 0;
}

.tcf-ct-list .tcf-contact-details__list dt,
.tcf-ct-row__label {
  margin: 0;
  padding-top: 20px;
  font-family: var(--tcf-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tcf-tracking-eyebrow);
  text-transform: uppercase;
  /* The canvas draws these labels in #8A8175, which is --tcf-tertiary and which
     style.css's own palette note flags at 3.62:1 on paper. check_a11y.py failed
     it. §5 wins over the drawing on a contrast question, so they take --tcf-muted
     (5.64:1) instead. The one visible difference is that the labels are a shade
     darker than drawn. */
  color: var(--tcf-muted);
  opacity: 1;   /* the shared rule dims dt to 0.75; the canvas does not */
}

.tcf-ct-list .tcf-contact-details__list dd {
  margin: 0;
  padding-bottom: 20px;
  padding-top: 8px;
  border-bottom: 1px solid var(--tcf-rule);
}

/* Email and phone in Newsreader 24px, per §2h.1. Post and the in-person block
   stay in the sans at body size, as the canvas draws them. */
.tcf-ct-list .tcf-contact-details__list dd > a {
  font-family: var(--tcf-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--tcf-tracking-heading);
}

.tcf-ct-list .tcf-contact-details__list dd address,
.tcf-ct-row__value {
  margin: 0;
  max-width: none;
  font-family: var(--tcf-font-body);
  font-size: 17px;
  font-style: normal;
  line-height: 1.6;
  color: var(--tcf-ink);
}

.tcf-ct-row { padding-bottom: 20px; border-bottom: 1px solid var(--tcf-rule); }
.tcf-ct-row:last-child { border-bottom: 0; }
.tcf-ct-row__label { display: block; margin-bottom: 8px; }

/* -- map and the getting-here box ------------------------------------------ */
.tcf-ct-map .tcf-map { margin: 0 0 28px; }
.tcf-ct-map .tcf-map__frame {
  /* The frame carries aspect-ratio 3/2 from style.css, which across a 613px
     column renders 409px tall and overshoots the 330px the canvas draws. The
     ratio has to be released for a height to take effect. */
  aspect-ratio: auto;
  height: 330px;
}
/* The map is click-to-load, so what a visitor sees until they ask for it is the
   button, not the frame. It takes the same 330px, or the box jumps height when
   the map finally arrives. */
.tcf-ct-map .tcf-map__load { height: 330px; }
/* And the same for the reserved space, which is what actually renders now that
   the map loads on scroll rather than on a click (Decision 17). `style.css`
   sets a flat 200px, which is right on the home page and Plan Your Visit and
   wrong here, where the frame is 330px. Measured with map.js blocked: the
   placeholder was 200px and the arriving frame 330px, so `.tcf-ct-here` and
   everything below it dropped 130px at 1440 and 40px at 375 the moment the
   observer fired. Decision 17 promises "the space is reserved at the frame's
   exact height, so nothing moves when it arrives"; on this page it did not.
   Three halves of one number - frame, load button, reserve. Change all or
   none. */
.tcf-ct-map .tcf-map__reserve { height: 330px; }
/* An <iframe> is focusable and had no focus ring, which check_a11y.py reports
   against §5.4. The ring goes on the container with :focus-within, not on the
   iframe: focus moves into the embedded cross-origin document, so an outline on
   the <iframe> itself is drawn under the map and is not reliably visible - the
   checker's own comment says as much.

   This fixes it on Contact only. The same iframe is unringed on the home page
   and on Plan Your Visit, where the map comes from .tcf-closing and
   .tcf-map in style.css - which is not this file's to edit. Reported. */
.tcf-ct-map .tcf-map:focus-within {
  outline: 2px solid var(--tcf-accent);
  outline-offset: 2px;
}

.tcf-ct-here {
  border: 1px solid var(--tcf-rule);
  padding: 28px;
}
.tcf-ct-here > .is-style-eyebrow { margin: 0 0 14px; font-size: 11px; max-width: none; }
.tcf-ct-here > p {
  margin: 0;
  max-width: none;
  font-size: 16px;
  line-height: var(--tcf-leading-body);
  color: var(--tcf-ink);
}

@media (max-width: 1023px) {
  .tcf-ct-top__grid { gap: 40px; }
}
@media (max-width: 767px) {
  .tcf-ct-top { padding-block: var(--tcf-space-6); }
  .tcf-ct-top__grid { grid-template-columns: minmax(0, 1fr); gap: var(--tcf-space-6); }
  .tcf-ct-top__lede { max-width: none; }
  .tcf-ct-map .tcf-map__frame,
  .tcf-ct-map .tcf-map__load,
  .tcf-ct-map .tcf-map__reserve { height: 240px; }
}


/* ===========================================================================
   6. AGENDA  (2h.2 Calendar, and /members/calendar/ and /members/events/)

   Canvas: a paper-alt band, the heading and the subscribe link on one baseline
   30px above the rows, then rows of 78px date block / title and detail / time
   and place, 22px of vertical padding and a hairline between.

   THERE IS NO EVENTS POST TYPE. docs/DECISIONS_TO_REVIEW.md §6 records that
   Events, Calendar and Newsletter are members-only and that the homepage strip
   was built from three recurring rules instead. So this is a shell: the rows
   below are styled and ready, and every page that carries the component today
   renders the empty state rather than invented entries.
   =========================================================================== */
.tcf-ct-calendar,
.tcf-mb-agenda {
  padding-block: var(--tcf-space-8);
  background-color: var(--tcf-surface);
}

:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--tcf-space-5);
  margin-bottom: 30px;
}
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__head > h2 { margin: 0; }

:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__rows {
  border-top: 1px solid var(--tcf-rule);
}

:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--tcf-rule);
}

:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__date {
  flex: 0 0 auto;
  width: 78px;
  text-align: center;
}
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__day {
  display: block;
  font-family: var(--tcf-font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--tcf-accent);
  font-variant-numeric: tabular-nums;
}
/* A second place the canvas was not followed, and the same resolution as the
   hairline at the head of this file: the contrast floor wins.

   §2h paints the month abbreviation under the date numeral in #8A8175, which is
   this file's `tertiary`. At 12px on paper-alt that measures 3.32:1 and fails
   1.4.3 outright - it is small text, so the bar is 4.5:1 and there is no
   large-text exemption to reach for. It went unnoticed until the calendar work
   put real rows on the page: an empty agenda has no date blocks to measure.

   `muted` is 5.64:1 and reads a shade darker than drawn. That is the trade every
   time this conflict comes up on this site, and it goes the same way: the canvas
   loses to the floor, because a colour a reader cannot resolve is not a design
   decision. */
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__month {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tcf-muted);
}

:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__what { flex: 1 1 0; min-width: 0; }
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__title {
  margin: 0 0 4px;
  max-width: none;
  font-family: var(--tcf-font-body);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tcf-ink);
}
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__detail {
  margin: 0;
  max-width: none;
  font-size: var(--tcf-text-ui);
  line-height: 1.4;
  color: var(--tcf-muted);
}
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__when {
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  font-size: var(--tcf-text-ui);
  line-height: 1.4;
  color: var(--tcf-muted);
}

/* The empty state. docs/MICROCOPY.md §2.3 writes it; it sits where the rows
   would, so the band never collapses to a bare heading. */
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__empty {
  margin: 0;
  padding: 30px 4px 0;
  max-width: 620px;
  font-size: var(--tcf-text-body);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-muted);
}
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__empty strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--tcf-ink);
}

@media (max-width: 767px) {
  .tcf-ct-calendar,
  .tcf-mb-agenda { padding-block: var(--tcf-space-6); }
  :is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__head { flex-direction: column; align-items: flex-start; gap: var(--tcf-space-3); }
  :is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__row { flex-wrap: wrap; gap: 8px 20px; }
  :is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__what { flex-basis: calc(100% - 98px); }
  :is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__when { flex-basis: 100%; padding-left: 98px; }
}


/* ===========================================================================
   7. RESOURCES  (no canvas section; built from 2g's card vocabulary)

   §2h has no Resources screen and neither does the canvas. Rather than invent a
   third interior layout - which the cross-page rules forbid - the page opens on
   the same paper intro column as 2g and lists its entries in the same bordered
   cards, without the photo slot: a resource is a link and a sentence, not a
   photograph.
   =========================================================================== */
.tcf-rs-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcf-rs-card__body > p:first-of-type { margin-top: 0; }

@media (max-width: 767px) {
  .tcf-rs-cards__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ===========================================================================
   8. MEMBER AREA, SIGNED OUT  (2i, left half)

   §2i: an ink panel carrying the eyebrow "SIGNED OUT", the H2, an explanatory
   paragraph and a login card on rgba(251,248,243,0.06) - labelled email and
   password fields, a full-width brick "Sign in", and a reset line that also
   says "or ask your home group leader".

   The canvas draws signed-out and signed-in side by side as two halves of one
   screen. §2i says to build them as two templates, so each state takes the full
   column here and the two-up drawing is read as two pages, not a split view.

   The form itself is WP-Members' own (the [wpmem_form login] shortcode), so the
   nonce, the POST handling and the error messages stay the plugin's. Only its
   appearance is set below. Before this, a logged-out member page rendered
   WP-Members' unstyled fieldset - and, underneath it, a public self-registration
   form - inside the site chrome.
   =========================================================================== */
.tcf-mb-signin {
  padding-block: var(--tcf-space-8);
  background-color: var(--tcf-ink);
  color: var(--tcf-page);
}

/* The canvas's `1fr 1fr` is the two STATES side by side (signed out | signed in),
   which §2i says to build as two templates - it is not text-beside-card, and the
   signed-out half of the drawing is a single stacked column. So the ratio here is
   ours to choose.

   The card's track is sized to the card, so the card's right edge lands on the
   band's 1280px content edge - the same line the navigation and the footer end
   on. 384 is the card, and the card is 326px of field inside 28px of padding and
   a 1px hairline: a decision about how long an email address is, not a share of
   a grid. minmax() rather than a flat 384px so the track shrinks instead of
   overflowing at an awkward width.

   `center`, not `start`. The text block is about 200px tall against a ~430px
   card, so top-aligning them left ~230px of bare ink in the bottom-left of the
   band and nothing anywhere else - an L-shaped hole, which is the "a lot of
   nothing" in the brief. Centred, that becomes roughly 115px above and below,
   and symmetric air reads as intention where asymmetric air reads as a hole.
   The previous review weighed `start` against CAP-HEIGHT alignment and rejected
   the latter for needing a magic number; centring needs none. */
.tcf-mb-signin__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 384px);
  gap: 64px;   /* §1.3's coarse rhythm scale; there is no token at 64 - see §9 */
  align-items: center;
}

.tcf-mb-signin .is-style-eyebrow {
  margin: 0 0 var(--tcf-space-4);
  /* §1.2's `eyebrow` role, which `.is-style-eyebrow` is already set to in
     style.css. The 11px literal that was here was half a pixel of drift with
     nothing behind it. */
  font-size: var(--tcf-text-eyebrow);
  max-width: none;
  color: var(--tcf-on-ink-accent);
}

/* The site's h1, not a hand-written clamp one step below it.

   The rule this replaces wrote out --tcf-text-section (28 -> 40) with the reason
   "the panel is half the screen". It is 65% of the screen now (832 of 1280), and
   more to the point the SIGNED-IN state of this same page renders its h1 at
   52px: .tcf-mb-greeting h1 sets no size, so it inherits entry-content's
   page-title. One URL, two states, two headline sizes, minutes apart. §2b's and
   §2f's dark intro bands are 52 as well; this panel was the outlier.

   This is the one change on this panel that check_canvas.py can see - the canvas
   draws the 2i heading at 40px. Recorded in that tool's ACCEPTED map and in
   docs/REFACTOR_PLAN.md's decision register. */
.tcf-mb-signin h1 {
  margin: 0 0 18px;   /* the canvas's 18, shared with every .tcf-*-intro h1 */
  max-width: none;
  font-size: var(--tcf-text-page);
  line-height: var(--tcf-leading-display);
  letter-spacing: var(--tcf-tracking-display);
  color: var(--tcf-page);
}

/* "No account?", answered under the lede on /log-in/ and nowhere else.

   A step below the lede, not level with it: the lede is what the member came to
   read and this is what a minority of them need, so it takes `body-sm` against
   the lede's 17-19 and --tcf-on-ink-muted against its --tcf-on-ink-body. Both
   still clear their contrast floors on ink (muted is 5.81:1 on --tcf-ink, the
   figure style.css records against the token itself), and
   two type sizes in a column is the cheapest hierarchy there is.

   28px above it, which is the same "8 binds, 28 separates" step the card uses
   internally - the note is a separate thought from the lede, not a second half
   of it. Capped at the lede's own measure so the two share a right edge; the
   column is 832px at 1440 and an uncapped sentence would run past the paragraph
   above it and look like a different column. */
.tcf-mb-signin__note {
  margin: var(--tcf-space-5) 0 0;
  max-width: var(--tcf-measure-lede);
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-sm);
  color: var(--tcf-on-ink-muted);
  text-wrap: pretty;
}
/* The mailto. Same treatment as the reset line's "Reset it", and it needs the
   same !important for the same reason: style.css paints every link inside
   .entry-content brick at roughly ten classes of specificity, which is 6.41:1 on
   paper and 2.25:1 here. Written as its own rule rather than folded into the
   reset line's because that one is inside the card and this one is not - the two
   share a colour, not a container. */
.tcf-mb-signin__note a,
.entry-content .tcf-mb-signin__note a {
  color: var(--tcf-on-ink-accent) !important;
  -webkit-text-fill-color: var(--tcf-on-ink-accent) !important;
  font-size: inherit !important;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--tcf-on-ink-rule);
  transition: color var(--tcf-motion-hover) var(--tcf-ease);
}
.tcf-mb-signin__note a:hover,
.entry-content .tcf-mb-signin__note a:hover {
  color: var(--tcf-page) !important;
  -webkit-text-fill-color: var(--tcf-page) !important;
  text-decoration-color: var(--tcf-page);
}

.tcf-mb-signin__lede {
  margin: 0;
  /* Was `68%`, which was a proxy for the canvas's 380-of-520 and became 517px the
     moment the text column grew to 760. §1.2 caps a lede at 56ch, which is the
     thing the percentage was always trying to say. */
  max-width: var(--tcf-measure-lede);
  /* Body size site-wide - the note above `.tcf-lede` in style.css. The 56ch
     measure and the on-ink colour are untouched. */
  font-size: var(--tcf-text-body);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-on-ink-body);
  text-wrap: pretty;
}

/* THE DARK SURFACE MOVES TWO FIELD TOKENS AND NOTHING ELSE.

   Every metric of a control - height, padding, type size, radius, the 44px
   floor, the label size and weight - is identical to the paper form the same
   member edits two clicks later on /members/my-profile/. If the control changed
   shape between those two screens, the site would be telling them they are in
   two different places. Only colour moves, and it moves by re-declaring the
   token rather than by restating the rule, which is the same idiom
   `prefers-contrast: more` uses in style.css.

   The border goes transparent rather than to a colour: the paper fill measures
   14.40:1 against this card, so it satisfies WCAG 1.4.11 on its own, and a
   border here would be decoration pretending to be a boundary. It stays 1px
   wide so the box model is identical to the paper surface.

   The focus ring is deliberately NOT a field token. It is a property of the
   band - every focusable element here needs the same substitution, links
   included - and the band-wide rule below already scopes it. */
.tcf-mb-signin {
  --tcf-field-border: transparent;
  --tcf-field-label:  var(--tcf-on-ink-body);   /* 7.11:1 on the card */
}

/* 384px, not 456.

   456 was 400px of field inside 28px of padding, and the comment that used to
   sit here claimed that was "a decision about how long an email address looks".
   Measured, it is not. 400px of field is 366px of text area, and at 8.4px per
   character - read out of a browser against the shipped Public Sans at 16px, not
   estimated - that is FORTY-THREE characters, for an address that runs to
   twenty-two to twenty-five. 384 gives a 326px content box and 326px fields,
   which is 292px of text area, about thirty-five characters. The longest address
   anyone on this congregation's providers plausibly types,
   `firstname.lastname@somechurch.org`, sets to 277.0px and fits with 15px to
   spare. Eighteen characters of slack is what "silly" meant; two is right.

   THE HAIRLINE IS §1.4 APPLIED, not a new idea. §1.4 defines a card as "1px rule
   border, no radius, no shadow"; this was the only card on the site without one,
   because it was drawn as a tint - and measured, that tint is #282521 on #1A1714
   = 1.17:1, which is not a perceptible edge. So a visitor saw two paper
   rectangles and a brick bar floating on black rather than a form inside a card,
   which is exactly why the rectangles' width was the thing that got noticed.
   --tcf-on-ink-rule composites to #4A4743 and reads 1.92:1 against the band. It
   does NOT need 3:1: 1.4.11 covers controls and meaningful graphics, and this is
   a container edge - the fields inside carry their own ~14:1 boundary. Do not
   "fix" it upward.

   The fill stays #282521. §2i asks for rgba(251,248,243,0.06) and the same 6-7%
   tint is what --tcf-panel-alpha gives the teaching player; brightening this one
   would make the member card a different species of panel from every other dark
   panel on the site. Written flat because a contrast checker cannot see through
   an alpha - against the translucent value check_a11y.py read the labels at
   2.90:1 and failed them, when the real figure over ink is 7.11:1.

   40 top and bottom against 28 left and right: a container padded about 1.4x
   more vertically than horizontally reads as composed, one padded equally on
   four sides reads as shrink-wrapped around whatever was dropped in. Both are
   tokens, so the 28px literal is gone. */
.tcf-mb-signin__card {
  max-width: 384px;
  padding: var(--tcf-space-6) var(--tcf-space-5);   /* 40 / 28 */
  border: 1px solid var(--tcf-on-ink-rule);
  background-color: #282521;

  /* Inside a 326px card the CARD is the measure. The ladder in
     member-forms.css would cap a `md` field at 320 and leave a 6px step between
     the fields and the button they sit above, and one shared edge is the whole
     point of this change. `sm` is deliberately left alone, so the registration
     branch's phone field stays short among long ones. */
  --tcf-field-measure-md: 100%;
  --tcf-field-measure-lg: 100%;
}

/* The legend repeats "Existing Users Log In" above a card whose own heading
   already says so, and WP-Members' in-page anchor is a layout artefact. Both
   are taken off the page visually and left for a screen reader, rather than
   display:none - the legend is what names the fieldset.

   EVERY CARD, and the comment that used to sit here said so while the selector
   said otherwise. It was once scoped to the login card, for a good reason: on
   the reset and username-reminder forms the legend was the only element naming
   the form, and hiding it left a box and a button with nothing saying what they
   were for. Then page-members.php gave those branches their own panel headline,
   the comment was updated to say the legend "stays hidden too" - and the
   selector was not. Measured on 2026-08-10: /members/my-profile/?a=pwdreset
   rendered "Reset your password" as the h1 and "Reset your password" again
   inside the card, four lines below it.

   So the rule now covers what the comment always claimed. Visually hidden, never
   display:none - the legend is what names the fieldset to a screen reader, and
   on a form this consequential that is not decoration. */
.tcf-mb-signin__card legend,
.tcf-mb-signin__card--login > div > a[id],
.tcf-mb-signin__card > div > a[id] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Off the page is not the same as out of the document. The legend still carries
   type, and it was carrying the browser's - Arial 24px bold, the only element on
   this site set in neither of its two typefaces. It says "Sign in", which is the
   button's own words, so it takes the button's type. Nothing about this is
   visible; it is here because tools/check_canvas.py measures every element that
   has words of its own, pairs them by those words, and was reporting the login
   button as having lost its typeface. */
.tcf-mb-signin__card legend {
  font-family: var(--tcf-font-body);
  /* !important, and measured before reaching for it: without it the legend
     computed at 24px/700, which is the block editor's own legend rule landing
     after this stylesheet. Same trap as the fields below. */
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  /* The UA's own inline padding and offset on a legend, which put the recovery
     forms' heading 15px to the left of the label under it. */
  padding: 0;
  margin-inline: 0;
  /* THE COLOUR IS A FIX, not tidying. `#wpmem_login` is the wrapper the plugin
     prints around the password-reset and username-reminder forms as well as the
     login one, and style.css was colouring every legend inside it `--tcf-ink`
     at id specificity. Those two forms render inside THIS card, where ink
     measures 1.15:1 - so "Reset your password" was being drawn in a colour
     nobody can read, visible in a screenshot only as a slightly darker smear
     above the first label. Measured on the build site, 2026-08-09. The token is
     re-pointed on `.tcf-mb-signin`, so this simply stops bypassing it. */
  color: var(--tcf-field-label);
}

/* WP-Members ships its form wrappers at a fixed 300px, which inside a 400px
   card leaves the fields short of the button and the whole thing off-centre.
   Measured: #wpmem_login 300px wide inside 400px of card.

   The .wp-block-group line is for the ?a= branch, where the card renders the
   page's own content: /members/my-profile/ wraps [wpmem_profile] in a paper
   section, and inside the ink card that painted a paper slab behind the reset
   form with the labels, which are coloured for ink, sitting on top of it. */
/* :not(.wpmem_msg) because the failed-login dialog is also a direct div child,
   and this reset is what was flattening it to bare text against the card: it
   lost its padding, its background and its margin, and ran straight into the
   first field label. It is the one direct child that is not a form wrapper. */
.tcf-mb-signin__card > div:not(.wpmem_msg),
.tcf-mb-signin__card .wp-block-group,
.tcf-mb-signin__card #wpmem_login,
.tcf-mb-signin__card #wpmem_reg,
.tcf-mb-signin__card form,
.tcf-mb-signin__card fieldset {
  background-color: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ---------------------------------------------------------------------------
   !important through the rest of this card, and measured before reaching for
   it. Blocksy emits its form settings as INLINE CSS after the child stylesheet
   (README.md: "an override at equal specificity changes nothing and fails
   silently" - this has now bitten four times). Measured before: the labels came
   out ink on ink at 1.15:1, and the fields at Blocksy's 8px/10px padding and
   16px type rather than the canvas's 14px/16px and 15.5px. Specificity cannot
   win against a later stylesheet, so priority does.
   --------------------------------------------------------------------------- */
/* Sentence case at the `ui` role, not 12.5px uppercase at 0.14em.

   Uppercase strips the ascender and descender shapes that make a word
   recognisable, tracking breaks it into letters, and 12.5px/700 thickens the
   strokes into the counters - three legibility costs stacked on the one form
   where misreading a label locks a member out. §1.2 has no role at 12.5px;
   `ui` (15 / Public Sans 500-600) is what interface text is, and the reset line
   below already settled on it for the same reason.

   The colour is `--tcf-on-ink-body` (7.5:1 on the card) rather than
   `--tcf-on-ink-muted` (4.97:1, and §1.6's FOOTER colour). The label was quieter
   than the reset line under it, which is the hierarchy upside down.

   This diverges from the canvas deliberately: check_canvas.py pairs by text and
   will report size/weight/transform/tracking on "Email" and "Password". */
.tcf-mb-signin__card label {
  display: block !important;
  margin-bottom: var(--tcf-space-2);   /* 8 - binds the label to its own field */
  font-family: var(--tcf-font-body);
  /* !important kept from the rule this replaces: Blocksy's inline form CSS lands
     after this stylesheet and specificity cannot beat source order. */
  font-size: var(--tcf-text-ui) !important;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tcf-on-ink-body) !important;
}

/* Geometry, type and colour all come from the --tcf-field-* tokens now; what is
   left here is the card's own vertical rhythm and the !important that Blocksy's
   inline form CSS forces.

   28 under the email field, not 18. Label-to-field is 8, so 18 gave a 2.25:1
   ratio between "these two things belong together" and "these two things are
   separate", which is not enough to bind a label to its box - the card read as
   six loose things stacked rather than two labelled fields, an option and a
   button. 28 makes it 3.5:1. */
.tcf-mb-signin__card input[type="text"],
.tcf-mb-signin__card input[type="email"],
.tcf-mb-signin__card input[type="password"] {
  display: block;
  width: 100% !important;
  margin: 0 0 var(--tcf-space-5) !important;   /* 28 */
  border: var(--tcf-field-border-w) solid var(--tcf-field-border) !important;
  border-radius: var(--tcf-radius) !important;
  background-color: var(--tcf-field-fill) !important;
  font-family: var(--tcf-font-body);
  color: var(--tcf-ink) !important;
}
/* 16, and it is not a third rhythm. The remember-me row below is 44px tall with
   a 20px box centred in it, so it carries 12px of internal air: 16 + 12 = 28 to
   the checkbox, the same gap as between the two fields. Optically the card has
   exactly two gaps, 8 and 28, from its top edge to its bottom. */
/* SCOPED TO THE LOGIN CARD, and the reason is in the paragraph above: the 12px
   this borrows back is inside the remember-me row, and only the login form has
   one. Unscoped it also hit the registration form, where the two password boxes
   sit in the MIDDLE of five fields and there is nothing underneath to make the
   16 back up to 28 - so the card came out 28, 28, 28, 16, 16, which reads as the
   bottom of the form being crowded. Measured on /register/ before this line was
   scoped. */
.tcf-mb-signin__card--login input[type="password"] { margin-bottom: var(--tcf-space-4) !important; }

/* Set by the wpmem_login_form filter on a failed POST (see the review, §8).
   An inset ring rather than a border: inset puts paper on both sides of the ring
   (6.4:1), where a border would put the dark card on its outer edge (2.25:1).
   Brick is correct here and nowhere else on this panel, because this is the only
   mark that sits entirely on paper. */
.tcf-mb-signin__card input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--tcf-status-error) !important;
}

/* AUTOFILL. There was no handling for this anywhere in the theme, so the moment
   a password manager filled these boxes both repainted in Chrome's autofill
   colour - a cold blue-white on a warm paper field inside a warm ink card, on
   the one screen we most want to look composed. Every browser paints that
   highlight in a way `background-color` cannot override; an inset box-shadow
   filling the padding box can, which is why a shadow is doing a background's job
   here.

   TWO SEPARATE RULES, AND THEY MUST STAY SEPARATE. An unknown pseudo-class
   invalidates the ENTIRE selector list it appears in - forgiving parsing only
   applies inside :is() and :where(). Written as one list,
   `input:-webkit-autofill, input:autofill { }` is dropped wholesale by any
   browser that knows only one of the two spellings, silently, with nothing in
   the console. Same class of failure as an undefined custom property, and no
   gate in this repo would catch it. An unknown PROPERTY is dropped on its own,
   so the -webkit- properties inside the standard rule are safe. */
.tcf-mb-signin__card input:-webkit-autofill,
.tcf-mb-signin__card input:-webkit-autofill:hover,
.tcf-mb-signin__card input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--tcf-field-fill) !important;
          box-shadow: inset 0 0 0 1000px var(--tcf-field-fill) !important;
  -webkit-text-fill-color: var(--tcf-ink) !important;
  caret-color: var(--tcf-ink);
}
/* Firefox applies its highlight as a `filter` rather than a background, so the
   box-shadow alone does not clear it. */
.tcf-mb-signin__card input:autofill {
  box-shadow: inset 0 0 0 1000px var(--tcf-field-fill) !important;
  filter: none !important;
  -webkit-text-fill-color: var(--tcf-ink) !important;
  caret-color: var(--tcf-ink);
}

/* Autofilled AND invalid, which is the likeliest failure on this page: the
   manager filled a stale password and the sign-in failed.

   box-shadow does not accumulate across rules - whichever declaration wins
   replaces the other outright - so without these two the ring and the fill
   cancel each other and one of them silently disappears. The ring is listed
   FIRST because the first shadow in a list paints on top. */
.tcf-mb-signin__card input[aria-invalid="true"]:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 2px var(--tcf-status-error),
                      inset 0 0 0 1000px var(--tcf-field-fill) !important;
          box-shadow: inset 0 0 0 2px var(--tcf-status-error),
                      inset 0 0 0 1000px var(--tcf-field-fill) !important;
}
.tcf-mb-signin__card input[aria-invalid="true"]:autofill {
  box-shadow: inset 0 0 0 2px var(--tcf-status-error),
              inset 0 0 0 1000px var(--tcf-field-fill) !important;
}

/* §5.4 asks for a 2px brick ring. Brick is 2.78:1 on this band and 2.35:1 on the
   card, so on ink it fails 1.4.11 as a focus indicator - the same substitution
   the link colour already makes twenty lines down. The old rule covered inputs
   only, which left every LINK on the band (the reset line, the mailto inside the
   error, the plugin's own links on the reset and username forms) taking the
   global brick ring.

   Two classes plus a type selector = (0,2,1), which beats style.css's
   `html :is(...)` at (0,1,2). outline-color restated for the same reason the
   global rule restates it. */
.tcf-mb-signin :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tcf-on-ink-accent);
  outline-color: var(--tcf-on-ink-accent);
  outline-offset: 2px;
}

.tcf-mb-signin__card .div_text { margin: 0; }

/* The remember-me row. The canvas has no checkbox; the plugin does, and losing it
   would cost members a real convenience, so it is set quietly under the fields
   rather than removed.

   44px tall, not 24. check_design.py enforces WCAG 2.5.8's 24px (Jay, 2026-08-08:
   AA is enough, because 44 destroyed the §2c teaching row) - and today this control
   passes that gate only through 2.5.8's SPACING exemption, on a union of about
   150x21 that nothing else happens to sit near. The 44px trade was refused where
   it cost a design; here the row is alone above a full-width button and it costs
   about 13px of card. Taking the stricter number where it is free is the ruling
   applied, not reversed. */
.tcf-mb-signin__card .button_div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 44px;
  /* zero, not 8px: WP-Members puts a literal &nbsp; between the checkbox and its
     label, and that text node is an anonymous flex item - a gap on top of it
     opened a 20px hole. */
  gap: 0;
  margin: 0 !important;
}

/* accent-color was `--tcf-accent`: brick on #282521 is 2.35:1, so the one piece of
   information this control carries - whether it is on - failed 1.4.11. The on-ink
   accent is 8.9:1, and the browser derives the tick's own colour from it. */
.tcf-mb-signin__card #rememberme {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--tcf-on-ink-accent);
  cursor: pointer;
}

/* `order: 1` is kept: the plugin emits the label before the box. It is safe where
   the removed `order: -1` on the submit was not, because a <label> is not a tab
   stop, so moving it cannot desynchronise focus order from paint order.
   The label is the target: 44px tall, and its inline-start padding extends the hit
   area back toward the box so the union is one contiguous 44px strip. */
.tcf-mb-signin__card label[for="rememberme"] {
  order: 1;
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding-inline-start: 8px;
  font-size: var(--tcf-text-ui) !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tcf-on-ink-body) !important;
  cursor: pointer;
  transition: color var(--tcf-motion-hover) var(--tcf-ease);
}
.tcf-mb-signin__card label[for="rememberme"]:hover { color: var(--tcf-page) !important; }

/* No `order` here, deliberately.

   The button used to be pulled above the "Keep me signed in" checkbox with
   `order: -1`. CSS order does not move the tab stop, so a keyboard user left the
   password field, landed on a checkbox drawn BELOW the button, then tabbed back
   UP to the button. Focus order has to match paint order (WCAG 2.4.3), and the
   remembered-me row above a full-width button is the conventional form footer
   anyway - §2i's card has no checkbox at all, so the button is last there. */
/* `order: 2`, so the row paints checkbox, then words, then button.

   The label carries `order: 1` because WP-Members emits it BEFORE the box; with
   the submit left at the default 0 it painted between them, and "Keep me signed
   in" ended up below the button with a stray tick above it.

   This is safe where the removed `order: -1` was not. The only two focusable
   elements in this row are the checkbox and the button, and they keep their DOM
   order under this rule: checkbox, then button, painted and tabbed the same way.
   A <label> is not a tab stop, so moving it moves nothing. */
.tcf-mb-signin__card input[type="submit"] {
  order: 2;
  width: 100% !important;
  margin: var(--tcf-space-4) 0 0 !important;   /* 16; the row's own 12px of air makes it 28 optically */
  padding: 14px !important;
  border: 0 !important;
  border-radius: var(--tcf-radius) !important;
  background-color: var(--tcf-accent) !important;
  font-family: var(--tcf-font-body);
  font-size: 15.5px !important;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tcf-page) !important;
  cursor: pointer;
  transition: background-color var(--tcf-motion-hover) var(--tcf-ease);
}
.tcf-mb-signin__card input[type="submit"]:hover { background-color: var(--tcf-accent-strong) !important; }

/* WP-Members prints its own "Forgot password? Click here to reset" under the
   button. On the default login view the panel already carries §2i's reset line,
   which adds "or ask your home group leader" - so the plugin's duplicate is hidden
   there, and only there: on the reset and username-reminder forms that same
   element carries links a member needs.

   SINCE J-39 IT HIDES A SECOND LINK, and that is deliberate rather than
   incidental. The moment `user_pages['register']` names a page, the plugin
   staples "New User? Click here to register" into this same element - and only
   on the login page, because of a condition in class-wp-members-forms.php that
   suppresses it everywhere else. The panel's left column already answers "no
   account?" in a sentence that also says a person reads the request, which is
   the half a bare link cannot carry. One route, worded once. */
.tcf-mb-signin__card--login .link-text { display: none; }

.tcf-mb-signin__card .link-text,
.tcf-mb-signin__reset {
  margin: var(--tcf-space-5) 0 0;   /* 28; was 16, which read as a caption on the button */
  max-width: none;
  /* The plugin right-aligns this line on the password and username forms, which
     put "Forgot username? Click here" against the far edge of a card whose every
     other line starts at the left. !important, and measured: the plain
     declaration that used to be here lost, and the line was still ragged-right
     inside the card on 2026-08-09. */
  text-align: left !important;
  /* §2i draws this line at 14px and §1.2 sets a floor of 15px on every
     breakpoint, so this is one of the places the two disagree and §1.2 wins.
     check_design.py enforces the floor and failed the 14px version outright:
     "the way to honour a floor is to not go near it". It is set explicitly
     rather than left to inherit so the intent is on the record. */
  font-size: var(--tcf-text-ui) !important;
  line-height: 1.5;
  color: var(--tcf-on-ink-muted);
}
/* !important, and measured before reaching for it: check_a11y.py read "Reset it"
   at 2.25:1, because style.css's `.entry-content a:not(...)` rule paints every
   link in the content area brick - which is a 6.41:1 colour on paper and a
   2.25:1 one on this dark panel. That rule sits at roughly ten classes of
   specificity, so priority is the only way past it. #E0B9A6 is §1.1's accent
   for text on ink, at 9.91:1. */
.tcf-mb-signin__card .link-text a,
.tcf-mb-signin__reset a,
.entry-content .tcf-mb-signin__reset a {
  color: var(--tcf-on-ink-accent) !important;
  -webkit-text-fill-color: var(--tcf-on-ink-accent) !important;
  /* The link sat a whole step above the sentence it is inside: the 14px reset
     line rendered its own anchor at 15px, because a global link rule sets a size
     on `a` and nothing here was giving it one back. A link in running text takes
     the size of the text it is running in. */
  font-size: inherit !important;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--tcf-on-ink-rule);
  transition: color var(--tcf-motion-hover) var(--tcf-ease);
}

/* THESE LINKS HAD NO HOVER STATE AT ALL, and it was invisible in review because
   the rule above looks complete. It sets `color` with !important - it has to, to
   beat entry-content's brick link colour at roughly ten classes of specificity -
   and a global `a:hover` without !important cannot beat an !important normal
   declaration. So hovering "Reset it" changed nothing.

   On desktop the hover is the primary confirmation that something is a link, and
   this is the only recovery path a locked-out member has. !important for exactly
   the same reason the rule above needs it. Paper on the card is ~14:1. §1.7
   lists link hover colour among the four permitted transitions. */
.tcf-mb-signin__card .link-text a:hover,
.tcf-mb-signin__reset a:hover,
.entry-content .tcf-mb-signin__reset a:hover,
.tcf-mb-signin__card .wpmem_msg a:hover,
.entry-content .tcf-mb-signin__card .wpmem_msg a:hover {
  color: var(--tcf-page) !important;
  -webkit-text-fill-color: var(--tcf-page) !important;
  text-decoration-color: var(--tcf-page);
}

/* WP-Members' failed-login dialog. The wording is replaced in
   theme/tcf-child/page-members.php with docs/MICROCOPY.md §3.2's; this is what it
   looks like. Left-aligned, at the card's own measure, above the fields it is
   about - it arrived centred, bold and in WordPress's register, quoting the
   username back at whoever typed it.

   It stays ABOVE the fields for three reasons: it is about the card, so it belongs
   to the card; Shift+Tab from the focused field must be able to reach the mailto:
   link some branches carry, which aria-describedby flattens to plain text; and a
   message above the field is in view when the browser scrolls the autofocused
   field into view.

   The left rule stays `--tcf-on-ink-accent` and is NOT `--tcf-status-error`:
   that token is brick, which is 2.35:1 on this card and fails 1.4.11 for a
   meaning-bearing indicator. On ink, the accent tint is the error colour.

   `max-width: 456px` is gone - it could never bind, because this element's
   containing block is the card's 400px content box.

   `.tcf-mb-signin__msg` is the same treatment for the one message this theme
   writes itself: the "we did not recognise that link" line page-members.php puts
   on the card when a `?a=` action falls off tcf_member_signin_action()'s
   allowlist. One message style on this card whoever wrote the message, which is
   why it is a second selector here rather than a rule of its own further down -
   that is exactly how `.tcf-mb-signin__notice` came to be declared twice with two
   different backgrounds before it was deleted. */
.tcf-mb-signin__card .wpmem_msg,
.tcf-mb-signin__card .tcf-mb-signin__msg {
  /* WP-Members' own stylesheet sets `.wpmem_msg { width: 75% }`, and the rule
     above that forces every other child of the card to 100% deliberately skips
     this one. So the message has always been 300px inside a 400px card: three
     quarters of the width of the fields it is about, with a ragged right edge
     nothing else on the card shares. The `max-width: 456px` that used to sit
     here could never have found it, because 456 is wider than the containing
     block it was capping. */
  width: 100%;
  margin: 0 0 var(--tcf-space-5);   /* 28, joining the card's rhythm; was 22 */
  padding: 14px 16px;
  border-left: 2px solid var(--tcf-on-ink-accent);
  /* The flattened panel tint, one step up from the card so the message reads as
     laid on it rather than cut out of it. #322E29 is rgba(251,248,243,0.10) over
     ink, written flat for the same reason the card colour is: a contrast checker
     cannot see through an alpha. */
  background-color: #322E29;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-sm);
  color: var(--tcf-page);
  text-align: left;
  scroll-margin-block-start: var(--tcf-space-6);
}
.tcf-mb-signin__card .wpmem_msg p { margin: 0; max-width: none; }
.tcf-mb-signin__card .wpmem_msg a,
.entry-content .tcf-mb-signin__card .wpmem_msg a {
  color: var(--tcf-on-ink-accent) !important;
  -webkit-text-fill-color: var(--tcf-on-ink-accent) !important;
  font-size: inherit !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--tcf-on-ink-rule);
}

/* `.tcf-mb-signin__notice` was declared here a second time, with a different
   background from the declaration above it, and nothing in the theme has ever
   carried the class. Both are gone; the plugin's dialog is `.wpmem_msg`. */

/* §1.10 stacks a hero split at 768-1023; this panel is that pattern, and a 40px
   headline over a 456px card in a 332px column was the worst layout on the page at
   any width. So the two-up is a >=1024 layout and everything below it is one
   column.

   The card keeps its 456 cap all the way down. The override that removed it made
   the card 660px wide at a 700px viewport - the bloat the cap exists to prevent,
   arriving only on small screens - and at 320px the cap never binds anyway. */
@media (max-width: 1023px) {
  .tcf-mb-signin__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tcf-space-6);
  }
}
@media (max-width: 767px) {
  .tcf-mb-signin { padding-block: var(--tcf-space-6); }
}


/* ===========================================================================
   9. MEMBER AREA, SIGNED IN  (2i, right half)
   =========================================================================== */
/* The greeting band is rendered by page-members.php, not by page content: the
   name in it comes from the signed-in user. Its bottom padding is the canvas's
   30px gap between the greeting and the first row, so the section that follows
   opens at zero. */
.tcf-mb-greeting {
  padding-block: var(--tcf-space-8) 30px;
  background-color: var(--tcf-page);
}
.tcf-mb-greeting__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--tcf-space-5);
}
.tcf-mb-greeting .is-style-eyebrow,
.tcf-mb-greeting__eyebrow {
  margin: 0 0 16px;
  max-width: none;
  font-family: var(--tcf-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tcf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tcf-accent);
}
/* The canvas draws this at Newsreader 34/400, and that was built first. §1.2
   says an interior page h1 is `page-title`, 34 -> 52 at weight 300, and the
   canvas figure is a half-panel artefact of the same kind as the 40px heading in
   the signed-out state: 2i is a two-up mock and both of its panels are 640px
   wide, where ours is 1290. Where the canvas and §1.2 disagree, §1.2 wins.

   It matters more here than it looks. Six of the seven member pages put their
   own TITLE in this slot - "Give", "Calendar", "My Profile" - so at 34px the
   member area was the one part of the site whose page titles were smaller than
   its section headings, and an h2 below rendered larger than the h1 above it.
   That is precisely the failure docs/DESIGN_SYSTEM.md calls out in the old
   Blocksy defaults: it misstates the structure of the page to anyone skimming
   it. At the page-title step the ladder reads 52 / 40 / 30 again.

   Nothing below sets type. entry-content already renders an h1 as the
   `page-title` token, and §1.2's tracking is switched by rendered size through a
   media query at 550px - so overriding letter-spacing here would have been right
   at one width and wrong at every other. Only the margins are this file's. */
.tcf-mb-greeting h1 {
  margin: 0 0 6px;
  max-width: none;
}
.tcf-mb-greeting__links {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--tcf-text-ui);
}
.tcf-mb-notice {
  margin: 0 0 30px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tcf-muted);
}

/* -- the page lede on a member child page -----------------------------------
   §2g.1's page head is "eyebrow, H1, lede" and the greeting band above supplies
   the first two. The third has to be page content rather than template, because
   it is the one sentence per page that an editor will want to change, so it is
   its own band that opens at zero and butts the greeting.

   The greeting closes at 30px when the docs list follows it, which is the
   canvas's gap between the greeting and the first row. A lede is not a row: the
   canvas puts 18px under an h1 before a lede, so the band tightens when one
   follows. :has() rather than a modifier class, because the template renders the
   greeting and the pattern renders the lede and neither knows about the other.
   -------------------------------------------------------------------------- */
.tcf-mb-greeting:has(+ .tcf-mb-lede) { padding-bottom: 18px; }

.tcf-mb-lede {
  padding-block: 0 var(--tcf-space-7);
  background-color: var(--tcf-page);
}
.tcf-mb-lede__inner > p {
  margin: 0;
  /* The canvas's lede column is 380 of a 560px panel. Expressed as a share
     rather than as its pixel value: this column is 1280 wide, and 380px of it
     would be a four-word line. Capped at the prose measure so it cannot run the
     full band on a wide screen. */
  max-width: min(68%, var(--tcf-measure-lede));
  /* Body size site-wide - the note above `.tcf-lede` in style.css. The measure
     and the muted colour are what hold this apart from the rows beneath it. */
  font-size: var(--tcf-text-body);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-muted);
  text-wrap: pretty;
}

/* -- a section head: heading, and optionally a control on the same baseline --
   §2h draws the calendar's heading and its subscribe link on one baseline 30px
   above the rows, and that is the shape every list on these pages wants. The
   agenda band already has its own copy of this (section 6, shared with Contact);
   this is the same measure for the bands that are not agendas.
   -------------------------------------------------------------------------- */
.tcf-mb-sec__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--tcf-space-5);
  margin-bottom: 30px;
}
.tcf-mb-sec__head > h2 { margin: 0; max-width: none; }

/* The agenda head's right-hand control, which §2h draws as "Subscribe (iCal)"
   and which /members/calendar/ uses to reach the same dates as a list. */
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__all,
.tcf-mb-sec__head > p {
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  font-size: var(--tcf-text-ui);
}

/* -- a plain paper band ------------------------------------------------------
   The closing band on most member pages: two panels of "what next". It opens at
   zero because §1.3 says bands butt, and the band above it always closes with
   its own bottom padding.
   -------------------------------------------------------------------------- */
.tcf-mb-band {
  padding-block: 0 var(--tcf-space-8);
  background-color: var(--tcf-page);
}
/* The alt variant is for a band that follows one which is already paper, where
   colour is the only thing separating them (§1.3: "separated by colour or a rule
   hairline"). It pays for its own top padding, because it is a change of
   surface rather than a continuation. */
.tcf-mb-band--alt {
  padding-block: var(--tcf-space-8);
  background-color: var(--tcf-surface);
}

/* -- panels ------------------------------------------------------------------
   The same bordered card as the landing's routes, without the card being a
   link. Two up rather than three: these carry a paragraph each, and three
   columns of prose at this width gives a 25-character line.
   -------------------------------------------------------------------------- */
.tcf-mb-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tcf-space-5);
  align-items: start;
}
.tcf-mb-panel {
  padding: 26px;
  border: 1px solid var(--tcf-rule);
  background-color: var(--tcf-page);
}
/* The calendar's subscribe block draws its own frame, and inside a panel that
   came out as a bordered card sitting in a bordered card two hairlines apart,
   with the heading that introduces it stranded above both. The block is the
   guest here: the panel already supplies the frame, the heading and the
   paragraph that say what the thing is, so the block gives up its own.

   Scoped to `inside a member panel` rather than written into the block's own
   stylesheet, which belongs to the calendar work and not to this file. Anywhere
   else on the site it keeps its frame. */
.tcf-mb-panel > .tcf-subscribe {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
/* Its own heading stays. It names the control ("Put this calendar on your
   phone") where the panel title above names the subject, and it is what the
   block's aria-labelledby points at - hiding it would take the section's
   accessible name with it. */
.tcf-mb-panel > .tcf-subscribe > .tcf-subscribe__heading { margin-top: 18px; }
.tcf-mb-band--alt .tcf-mb-panel { background-color: var(--tcf-surface); }

.tcf-mb-panel__title {
  margin: 0 0 10px;
  max-width: none;
  font-family: var(--tcf-font-display);
  font-size: var(--tcf-text-card);
  font-weight: 400;
  line-height: var(--tcf-leading-card);
  letter-spacing: var(--tcf-tracking-heading);
  color: var(--tcf-ink);
}
.tcf-mb-panel > p {
  margin: 0 0 12px;
  max-width: none;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-sm);
  color: var(--tcf-muted);
}
.tcf-mb-panel > p:last-child { margin-bottom: 0; }

/* A group's night and neighbourhood, above its description. Not used by any
   page yet - the home-group directory has no groups in it - but it is the line
   the card shape needs and it is cheaper to draw it now than to guess later. */
.tcf-mb-panel__meta {
  margin: -4px 0 10px;
  max-width: none;
  font-size: var(--tcf-text-meta);
  line-height: 1.4;
  /* --tcf-muted, not --tcf-tertiary, for the same reason the contact labels
     above take it: tertiary is 3.62:1 on paper and this is 14px reader-facing
     metadata, not a photo-slot label, so the documented exception does not reach
     it. Muted is 5.64:1 and its documented job is "secondary text, metadata".
     This line renders nowhere yet, but it shares its value with
     .tcf-mb-docs__meta below, which does and which was measured failing. */
  color: var(--tcf-muted);
}

.tcf-mb-panel__action {
  margin: 14px 0 0;
  font-size: var(--tcf-text-ui);
}
/* A standalone control, not a link inside a sentence, so WCAG 2.5.8's inline
   exemption does not apply to it and it has to carry its own target. A 15px
   line box is 17px tall; 4px of padding either side takes it past 24. Measured
   at 17px before, 25px after. Same for the control beside a section heading. */
.tcf-mb-panel__action > a,
.tcf-mb-sec__head > p > a,
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__all > a,
.tcf-mb-greeting__links > a {
  display: inline-block;
  padding-block: 4px;
}

/* Placeholder prose inside a panel. The same italic-and-muted treatment the
   standing notice uses, so "these words are not final" reads the same way
   wherever it appears. */
.tcf-mb-note {
  /* `muted`, not `tertiary`. Tertiary is 3.62:1 on paper and the palette note
     beside it says so: it is for a 14px label, not for a paragraph somebody
     reads. This is a paragraph. The italic is what marks it as placeholder. */
  color: var(--tcf-muted);
}

/* The closing line under the landing's route cards. */
.tcf-mb-foot {
  margin: var(--tcf-space-5) 0 0;
  max-width: 720px;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-sm);
  color: var(--tcf-muted);
}

/* -- the document list ------------------------------------------------------
   Canvas: a hairline above the first row, 18px of vertical padding, an 18px
   gap, a 44px type tag in brick 11px at 0.1em, then title over posted-date, and
   the action pulled right.
   -------------------------------------------------------------------------- */
.tcf-mb-docs {
  padding-block: 0 var(--tcf-space-8);
  background-color: var(--tcf-page);
}
.tcf-mb-docs__list { border-top: 1px solid var(--tcf-rule); }

.tcf-mb-docs__row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--tcf-rule);
}
.tcf-mb-docs__tag {
  flex: 0 0 auto;
  width: 44px;
  font-family: var(--tcf-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--tcf-accent);
}
.tcf-mb-docs__body { flex: 1 1 0; min-width: 0; }
.tcf-mb-docs__title {
  margin: 0;
  max-width: none;
  font-family: var(--tcf-font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tcf-ink);
}
.tcf-mb-docs__meta {
  margin: 3px 0 0;
  max-width: none;
  font-size: var(--tcf-text-meta);
  line-height: 1.4;
  /* Measured signed in on /members/newsletter/ 2026-09-07: three "Sent <date>"
     lines rendering #8A8175 at 14px on paper, 3.62:1, an AA failure. An
     anonymous crawl cannot see this page, which is why it survived. Same fix and
     same reasoning as the contact labels above: --tcf-muted, 5.64:1. */
  color: var(--tcf-muted);
}
/* Ink with an underline, not brick: DECISIONS_TO_REVIEW.md §4 rules that §1.1's
   "links in body copy are brick" is about running prose, not row controls, and
   the canvas draws Download exactly this way. The underline is the photo-slot
   neutral, which is the colour measured on the canvas. */
.tcf-mb-docs__action,
.entry-content .tcf-mb-docs__action {
  flex: 0 0 auto;
  font-family: var(--tcf-font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tcf-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--tcf-photo-border);
}
.tcf-mb-docs__action:hover,
.entry-content .tcf-mb-docs__action:hover { text-decoration-color: var(--tcf-accent); }

.tcf-mb-docs__empty {
  margin: 0;
  padding: 26px 2px 0;
  max-width: 620px;
  font-size: var(--tcf-text-body);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-muted);
}
.tcf-mb-docs__empty strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--tcf-ink);
}

/* -- the callout ------------------------------------------------------------
   §2i: a paper-alt callout with a 2px brick left border.
   -------------------------------------------------------------------------- */
.tcf-mb-callout {
  margin-top: 30px;
  padding: 22px 24px;
  max-width: 720px;
  border-left: 2px solid var(--tcf-accent);
  background-color: var(--tcf-surface);
}
.tcf-mb-callout > p {
  margin: 0;
  max-width: none;
  font-size: 16px;
  line-height: var(--tcf-leading-lede);
  color: var(--tcf-ink);
}

/* -- where to go next -------------------------------------------------------
   Not in the canvas, which draws the member landing as a document list alone.
   The member area on this site is six pages rather than a folder of PDFs, so
   the landing has to route to them; it does it in the same bordered card the
   rest of the build uses, so nothing new is invented.
   -------------------------------------------------------------------------- */
.tcf-mb-nav {
  padding-block: 0 var(--tcf-space-8);
  background-color: var(--tcf-page);
}
.tcf-mb-nav__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tcf-space-5);
}
.tcf-mb-nav__card {
  padding: 26px;
  border: 1px solid var(--tcf-rule);
  background-color: var(--tcf-page);
  transition: border-color var(--tcf-motion-hover) var(--tcf-ease);
}
.tcf-mb-nav__card:has(a:hover),
.tcf-mb-nav__card:has(a:focus-visible) { border-color: var(--tcf-accent); }
.tcf-mb-nav__title {
  margin: 0 0 8px;
  max-width: none;
  font-family: var(--tcf-font-display);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: var(--tcf-leading-card);
  letter-spacing: var(--tcf-tracking-heading);
}
/* The card title is the link, and it takes the row-control treatment rather
   than the prose-link one: ink with a neutral underline that goes brick on
   hover, the same as the Download control in the document list and for the same
   reason (DECISIONS_TO_REVIEW.md §4). !important because it is beating
   style.css's `.entry-content a:not(...)` rule, whose nine :not() arguments put
   it around ten classes of specificity. */
.tcf-mb-nav__title a,
.entry-content .tcf-mb-nav__title a {
  color: var(--tcf-ink) !important;
  -webkit-text-fill-color: var(--tcf-ink);
  text-decoration: underline !important;
  text-decoration-color: var(--tcf-photo-border) !important;
  text-underline-offset: 4px;
}
.tcf-mb-nav__card:hover .tcf-mb-nav__title a,
.entry-content .tcf-mb-nav__card:hover .tcf-mb-nav__title a {
  text-decoration-color: var(--tcf-accent) !important;
}
.tcf-mb-nav__card > p {
  margin: 0;
  max-width: none;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-sm);
  color: var(--tcf-muted);
}

/* -- draft prose on a member child page ------------------------------------
   Give and the other written member pages are still placeholder copy. They get
   the prose measure §1.3 asks for rather than running 1280px wide.
   -------------------------------------------------------------------------- */
.tcf-mb-prose { padding-block: 0 var(--tcf-space-8); background-color: var(--tcf-page); }
.tcf-mb-prose__inner > h2:first-child { margin-top: 0; }
.tcf-mb-prose__inner > p,
.tcf-mb-prose__inner > ul,
.tcf-mb-prose__inner > ol { max-width: 720px; }

.tcf-mb-greeting__links a {
  color: var(--tcf-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--tcf-link-underline);
}

/* -- the profile form -------------------------------------------------------
   [wpmem_profile] on /members/my-profile/. Same treatment as the login card:
   the plugin keeps the form, the design gets the appearance.
   -------------------------------------------------------------------------- */
.tcf-mb-profile { padding-block: 0 var(--tcf-space-8); background-color: var(--tcf-page); }
.tcf-mb-profile fieldset { margin: 0; padding: 0; border: 0; }
.tcf-mb-profile legend {
  padding: 0;
  font-family: var(--tcf-font-display);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: var(--tcf-leading-card);
  color: var(--tcf-ink);
}
/* The form's own fields - labels, inputs, ticks, the submit - are NOT styled
   here any more. They live in css/member-profile.css, which works against the
   real structure that tcf-church/includes/profile-form.php now emits (groups
   and section headings) rather than against a flat run of siblings.

   Two sets of rules for the same controls were live at once, and they disagreed:
   one sized the tick 24px, the other 17px, and which one won was decided by
   alphabetical file order. What is left below is the container, the legend, and
   the bits of plugin furniture that are not fields. */

.tcf-mb-profile fieldset,
.tcf-mb-profile form,
.tcf-mb-profile #wpmem_reg { background-color: transparent; }

/* WP-Members names the fieldset with a legend - "Edit Your Information",
   "Change Password" - directly under the h2 that already names the section, so
   the page carried the same heading twice in two different registers. Taken off
   the page and left for a screen reader rather than removed: the legend is what
   names the fieldset, and a form control's group label is not decoration. */
.tcf-mb-profile legend {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


.tcf-mb-profile .req { color: var(--tcf-accent); }
.tcf-mb-profile .req-text {
  margin-top: 18px;
  font-size: var(--tcf-text-meta);
  /* `muted`, not `tertiary`: this is a sentence explaining the asterisks, and
     tertiary reads it at 3.62:1. The palette note beside the token says it is
     for a label. */
  color: var(--tcf-muted);
}

/* The plugin's own credit line, centred under the button. It is not the
   church's design and the plugin does not require it. */
.tcf-mb-profile form > div[align="center"] { display: none; }

/* The member menu, on any profile view that still shows it. WP-Members renders
   it as a bare <ul> of two links; left alone it arrived as an unstyled bullet
   list under an empty screen and read as a broken page. */
.tcf-mb-profile__inner > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tcf-space-5);
  margin: 0 0 var(--tcf-space-6);
  padding: 0 0 22px;
  list-style: none;
  border-bottom: 1px solid var(--tcf-rule);
}
.tcf-mb-profile__inner > ul > li { margin: 0; }
.tcf-mb-profile__inner > ul a,
.entry-content .tcf-mb-profile__inner > ul a {
  font-family: var(--tcf-font-body);
  font-size: var(--tcf-text-ui);
  font-weight: 600;
  color: var(--tcf-ink) !important;
  -webkit-text-fill-color: var(--tcf-ink);
  text-decoration: underline !important;
  text-decoration-color: var(--tcf-photo-border) !important;
  text-underline-offset: 4px;
}
.tcf-mb-profile__inner > ul a:hover,
.entry-content .tcf-mb-profile__inner > ul a:hover {
  text-decoration-color: var(--tcf-accent) !important;
}

/* WP-Members' own success and error dialogs on the profile: "Your information
   was updated", a validation failure. §5.5 wants them announced and describing
   the fix; the wording is the plugin's, the appearance is ours, and it is the
   same paper-alt-and-brick-edge callout §2i already uses for an aside. */
.tcf-mb-profile .wpmem_msg,
.tcf-mb-profile .wpmem_msg_error {
  margin: 0 0 26px;
  padding: 16px 20px;
  max-width: 720px;
  border-left: 2px solid var(--tcf-accent);
  background-color: var(--tcf-surface);
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-sm);
  color: var(--tcf-ink);
}

@media (max-width: 1023px) {
  .tcf-mb-nav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcf-mb-lede__inner > p { max-width: var(--tcf-measure-lede); }
}
@media (max-width: 767px) {
  .tcf-mb-greeting { padding-block: var(--tcf-space-6) var(--tcf-space-5); }
  .tcf-mb-greeting:has(+ .tcf-mb-lede) { padding-bottom: 14px; }
  .tcf-mb-greeting__head { flex-direction: column; align-items: flex-start; gap: var(--tcf-space-3); }
  .tcf-mb-docs,
  .tcf-mb-nav,
  .tcf-mb-band,
  .tcf-mb-profile { padding-bottom: var(--tcf-space-6); }
  .tcf-mb-band--alt { padding-block: var(--tcf-space-6); }
  .tcf-mb-lede { padding-bottom: var(--tcf-space-6); }
  .tcf-mb-lede__inner > p { max-width: none; }
  .tcf-mb-nav__grid,
  .tcf-mb-panels { grid-template-columns: minmax(0, 1fr); }
  .tcf-mb-sec__head { flex-direction: column; align-items: flex-start; gap: var(--tcf-space-3); margin-bottom: 22px; }
  .tcf-mb-docs__row { flex-wrap: wrap; gap: 6px 18px; }
  .tcf-mb-docs__body { flex-basis: calc(100% - 62px); }
  .tcf-mb-docs__action { flex-basis: 100%; padding-left: 62px; }
  .tcf-mb-profile input[type="text"],
  .tcf-mb-profile input[type="email"],
  .tcf-mb-profile input[type="password"],
  .tcf-mb-profile input[type="url"],
  .tcf-mb-profile input[type="tel"],
  .tcf-mb-profile select,
  .tcf-mb-profile textarea { max-width: none !important; }
}


/* ===========================================================================
   10. Full-bleed for this file's own bands

   style.css breaks out `.entry-content > .is-style-band-alt`, `.is-style-band-ink`
   and `.tcf-band-plain` to the window edge and caps what is inside them at
   1280. The sections in this file are their own top-level blocks rather than
   core group variants, so they need the same treatment naming them.
   =========================================================================== */
.entry-content > .tcf-lt-intro,
.entry-content > .tcf-lt-cards,
.entry-content > .tcf-lt-prose,
.entry-content > .tcf-rs-intro,
.entry-content > .tcf-rs-cards,
.entry-content > .tcf-ct-top,
.entry-content > .tcf-ct-calendar,
.entry-content > .tcf-mb-signin,
.entry-content > .tcf-mb-greeting,
.entry-content > .tcf-mb-lede,
.entry-content > .tcf-mb-docs,
.entry-content > .tcf-mb-agenda,
.entry-content > .tcf-mb-nav,
.entry-content > .tcf-mb-band,
.entry-content > .tcf-mb-prose,
.entry-content > .tcf-mb-profile {
  width: 100vw;
  max-width: 100vw;
  /* !important beats the block editor's own top-level block margins, which are
     what put a 25px strip of paper between two bands that §1.3 says must butt
     together. Same rule, same reason, as style.css's band-to-band block. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-block: 0 !important;
}

.entry-content > .tcf-lt-intro > *,
.entry-content > .tcf-lt-cards > *,
.entry-content > .tcf-lt-prose > *,
.entry-content > .tcf-rs-intro > *,
.entry-content > .tcf-rs-cards > *,
.entry-content > .tcf-ct-top > *,
.entry-content > .tcf-ct-calendar > *,
.entry-content > .tcf-mb-signin > *,
.entry-content > .tcf-mb-greeting > *,
.entry-content > .tcf-mb-lede > *,
.entry-content > .tcf-mb-docs > *,
.entry-content > .tcf-mb-agenda > *,
.entry-content > .tcf-mb-nav > *,
.entry-content > .tcf-mb-band > *,
.entry-content > .tcf-mb-prose > *,
.entry-content > .tcf-mb-profile > * {
  width: min(var(--tcf-content-max), calc(100% - var(--tcf-gutter) * 2));
  margin-inline: auto;
}

/* The template's own bands are not block-editor output, so they are not direct
   children of a block layout - but they are direct children of .entry-content
   and the rules above already reach them. The greeting band is the one case
   where the wrapper is named rather than generated. */
.tcf-members-page .entry-content > .tcf-mb-greeting > .tcf-mb-greeting__inner {
  width: min(var(--tcf-content-max), calc(100% - var(--tcf-gutter) * 2));
  margin-inline: auto;
}

/* The Life Together landing keeps its draft prose at the prose measure rather
   than running it the width of the band. §1.3: prose column max width 720. */
.tcf-lt-prose { padding-block: var(--tcf-space-8); background-color: var(--tcf-page); }
.entry-content > .tcf-lt-prose > .tcf-lt-prose__inner {
  width: min(var(--tcf-content-max), calc(100% - var(--tcf-gutter) * 2));
}
.tcf-lt-prose__inner > h2 { margin-top: var(--tcf-space-7); }
.tcf-lt-prose__inner > h2:first-child { margin-top: 0; }
.tcf-lt-prose__inner > p { max-width: 720px; }

@media (max-width: 767px) {
  .tcf-lt-prose { padding-block: var(--tcf-space-6); }
}