/* ============================================================================
   KEYSTONE GROUPS — campaign brand reskin      css/brand.css
   ----------------------------------------------------------------------------
   2026-08-21.  A FORK of redesign-v1 for Jose to review at :8202. This file is
   loaded LAST, after css/redesign.css, and is the ONLY file that changed.
   redesign.css is byte-identical to redesign-v1's copy — do not edit it here.

   WHAT THIS IS
   A reskin, not a redesign. Layout, section order, copy, Church Center links,
   the picker mechanic and the video drop-in/fallback logic are untouched.
   Only colour, shape language, marks and typographic dress change.

   HOW TO MERGE
   Every move below is a numbered, self-contained block, opened by a header
   comment of the form:   Bn — Name: what it restyles

   Jose picks blocks ("merge B2, B5, B9") and only those blocks get lifted into
   redesign-v1. Two dependency notes:
     · B1 is the token base. Any other block that names a --ksb-* variable needs
       B1 merged with it. Every such use carries a hard-coded fallback, so a
       block lifted WITHOUT B1 still renders — it just loses the shared palette.
     · B5 and B10 each ship their own inline SVG in index.html, marked with
       <!-- brand-style: Bn --> … <!-- /brand-style: Bn -->. Lift the comment
       pair with the block.

   SOURCE OF TRUTH
   Every hex below was sampled pixel-by-pixel out of brand-guide.png in this
   folder. Nothing is eyeballed or invented.

   PHOTOS AND FILM ARE UNTREATED, BY INSTRUCTION (Jose, 2026-08-21).
   No tint, overlay, duotone, filter or mark sits on any <img>, on the hero
   film, or on the inline film. --ks-shot-overlay and --ks-film-scrim are the
   redesign's own legibility scrims and are DELIBERATELY left at their neutral
   slate values — do not brand-tint them. Rounded corners on photo frames (B7)
   are a frame shape, not a photo treatment.

   TYPOGRAPHY IS A STAND-IN.
   The guide's display face is not available as a licensed web font, so
   Work Sans 700–800 uppercase stands in for it and Work Sans 300 stands in for
   the guide's light weight. Both are already self-hosted. If the campaign face
   exists as a woff2, it drops into --ks-display and this whole file follows.
   ========================================================================== */


/* ============================================================================
   B1 — Brand tokens: the guide's LIGHT / CORE / DEEP palettes, the four colour
        pairings, and the three signature gradients, as CSS variables.
   ----------------------------------------------------------------------------
   Paints nothing on its own. It is the vocabulary every other block speaks.
   Sampled from brand-guide.png.
   ========================================================================== */

:root {
	/* ---- LIGHT PALETTE — soft supporting tones, overlays, secondary use ---- */
	--ksb-light-coral:  #ff9b9b;
	--ksb-light-pink:   #febcdb;
	--ksb-light-cream:  #fce59e;
	--ksb-light-green:  #c0eb8e;
	--ksb-light-teal:   #50b8b8;
	--ksb-light-peri:   #a7b8ff;
	--ksb-light-lilac:  #b699cb;

	/* ---- CORE PALETTE — the primaries, bright, designed to lead ----------- */
	--ksb-core-grey:    #a1a1a3;
	--ksb-core-red:     #e33c1d;
	--ksb-core-magenta: #ef2f9a;
	--ksb-core-yellow:  #f0d429;
	--ksb-core-green:   #299f3a;
	--ksb-core-teal:    #357684;
	--ksb-core-indigo:  #4c379e;
	--ksb-core-purple:  #913fda;

	/* ---- DEEP PALETTE — contrast, typography, depth ----------------------- */
	--ksb-deep-black:   #000000;
	--ksb-deep-red:     #7f2219;
	--ksb-deep-magenta: #b72493;
	--ksb-deep-ochre:   #a57523;
	--ksb-deep-green:   #204737;
	--ksb-deep-teal:    #1d3844;
	--ksb-deep-navy:    #2c1f63;
	--ksb-deep-purple:  #622a93;

	/* ---- THE FOUR COLOUR PAIRINGS (light + core + deep + gradient strip) --
	   The guide pairs within a family for a tonal look. This page uses one
	   family per section — see B4. ---------------------------------------- */

	/* 01 CONNECT */
	--ksb-connect-light: #febcdb;
	--ksb-connect-core:  #913fda;
	--ksb-connect-deep:  #2c1f63;
	--ksb-connect-grad:  linear-gradient(90deg, #f1addb 0%, #9b4bda 46%, #372270 100%);

	/* 02 GROW */
	--ksb-grow-light: #fce59e;
	--ksb-grow-core:  #299f3a;
	--ksb-grow-deep:  #204737;
	--ksb-grow-grad:  linear-gradient(90deg, #fce59e 0%, #28983a 52%, #204737 100%);

	/* 03 CELEBRATE */
	--ksb-celebrate-light: #f0d429;
	--ksb-celebrate-core:  #ef2f9a;
	--ksb-celebrate-deep:  #913fda;
	--ksb-celebrate-grad:  linear-gradient(90deg, #f0c434 0%, #ef4789 48%, #a23cce 100%);

	/* 04 BELONG */
	--ksb-belong-light: #c0eb8e;
	--ksb-belong-core:  #50b8b8;
	--ksb-belong-deep:  #4c379e;
	--ksb-belong-grad:  linear-gradient(90deg, #b1e494 0%, #50b8b8 46%, #4d55a4 100%);

	/* ---- WHITE-TEXT GROUNDS: WHAT IS AND IS NOT USABLE --------------------
	   2026-08-21, Jose: pills and card surfaces go teal/purple with WHITE type.
	   That makes contrast the gating constraint, so the palette splits in two.
	   Measured white-on-colour, sRGB:

	     USABLE as a text ground (>= 4.5:1, small text)
	       #4c379e CORE indigo   8.95     #622a93 DEEP purple   9.24
	       #2c1f63 DEEP navy    14.16     #1d3844 DEEP teal    12.34
	       #913fda CORE purple   5.35     #357684 CORE teal     5.15

	     NOT usable as a text ground — the guide's LIGHT values
	       #50b8b8 LIGHT teal    2.36     #b699cb LIGHT lilac   2.50
	       #a7b8ff LIGHT peri    1.92     #50b6b8 lockup teal   2.41
	       #6b85c6 hero mid blue 3.62  (large display only, fails small)

	   The LIGHT values stay in play for GRAPHICS on dark grounds — the "0"
	   glyphs, rules, bars — where nothing is being read through them.
	   ---------------------------------------------------------------------- */

	/* ---- SIGNATURE GRADIENTS ---------------------------------------------
	   The guide runs gradients on hero-scale surfaces, on pills, and on the
	   footer lockup bar — nowhere else, and never on body copy.

	   NOTE: --ksb-grad-hero and --ksb-grad-lockup are the guide's own recipes
	   and both START on a LIGHT teal, so neither can carry white text at 4.5:1.
	   They are fine where they are used (the hero rule bar is a graphic; the
	   lockup bar was left as-is by instruction) but do NOT reach for them as a
	   ground for type. Use --ksb-grad-pill / --ksb-grad-card instead, which are
	   the same teal->purple sweep pitched into the core-to-deep range.
	   ---------------------------------------------------------------------- */

	/* the guide's hero: teal -> blue -> purple, vertical. GRAPHIC USE ONLY. */
	--ksb-grad-hero:   linear-gradient(180deg, #50b8b8 0%, #6b85c6 56%, #825cd2 100%);
	/* the footer lockup bar: teal -> indigo -> purple, horizontal. See note above. */
	--ksb-grad-lockup: linear-gradient(90deg, #50b6b8 0%, #4d67a8 42%, #4c3e9f 56%, #622a93 100%);

	/* PILLS — CTAs and JOIN buttons. Teal -> indigo -> purple, deepened so the
	   whole sweep holds white type. Worst stop 5.15:1. */
	--ksb-grad-pill:   linear-gradient(90deg, #357684 0%, #4c379e 52%, #913fda 100%);
	/* CARD SURFACES — the same sweep run darker, for large panels of white type
	   like the S4 pull-quote. Worst stop 5.15:1. */
	--ksb-grad-card:   linear-gradient(135deg, #357684 0%, #4c379e 58%, #622a93 100%);

	/* --ksb-grad-pill-warm (green -> yellow) RETIRED 2026-08-21: outside the
	   teal/purple direction, and its yellow end is unusable under white type. */

	/* ---- SHAPE ------------------------------------------------------------
	   The guide's forms are rounded: fully-round pills for anything that acts
	   like a button or a badge, a generous but modest radius on frames. ---- */
	--ksb-pill: 999px;
	--ksb-radius: clamp(14px, 1.6vw, 22px);
}


/* ============================================================================
   B2 — Accent swap: retires the red #cc5861 for the brand's CORE purple.
   ----------------------------------------------------------------------------
   One variable, and the whole page re-accents at once: the hero dash and rule,
   the CTA fill, the video play disc's hover, the picker's focus rings, and the
   closing end-mark. Nothing else needed.

   Shows on: every section. Merge this alone and the page is already Keystone
   Groups rather than Keystone red.
   ========================================================================== */

:root {
	--ks-accent:      #913fda;   /* CORE purple  (was #cc5861) */
	--ks-accent-deep: #622a93;   /* DEEP purple, hover only (was #b8474f) */
}


/* ============================================================================
   B3 — CTA pills: both buttons become the guide's pill forms.
   ----------------------------------------------------------------------------
   *** HALF DORMANT 2026-08-24: the .ks-cta rules no longer match anything. The
   page's only .ks-cta was "Find your group" in S5, which Jose cut. The .ks-join
   rules below are still LIVE — six JOIN buttons in the picker. ***

   .ks-cta   -> the gradient-filled pill (the guide's "WE'RE" pill), finished
                with the guide's solid-circle-and-arrow.
   .ks-join  -> the outlined pill (the guide's "IN THIS" pill), which fills
                with the same gradient on hover/focus.
   Hover is designed, not defaulted: the gradient slides across the pill
   (background-position, so nothing reflows) and the arrow travels.

   2026-08-21: steered fully into teal/purple with white type. The fill is
   --ksb-grad-pill, now teal #357684 -> indigo #4c379e -> purple #913fda. The
   guide's own hero gradient was the obvious anchor but could NOT be used as
   drawn — it starts on LIGHT teal #50b8b8, which is 2.36:1 under white. This
   is that same sweep pitched into the core range; worst stop 5.15:1.

   The .ks-cta slide matters here: background-size is 230%, so hover reveals a
   different slice of the gradient. Every stop clears 5.15:1, so the label is
   safe at any slide position.

   Shows on: "FIND YOUR GROUP" in S5, and all six JOIN buttons in the picker
   (three on the stage, three on the phone cards).
   ========================================================================== */

#page-container .et-l--post .ks-cta {
	padding: 15px 15px 15px 32px;
	border-radius: var(--ksb-pill, 999px);
	background-color: transparent;
	background-image: var(--ksb-grad-pill, linear-gradient(90deg, #357684 0%, #4c379e 52%, #913fda 100%));
	background-size: 230% 100%;
	background-position: 0% 50%;
	font-weight: 700;
	letter-spacing: 1.6px;
	color: #ffffff;
	transition: background-position 0.45s ease, box-shadow 0.3s ease;
}

/* The guide's solid circle with an arrow in it, replacing the bare chevron. */
#page-container .et-l--post .ks-cta::after {
	width: 2.55em;
	height: 2.55em;
	border: 0;
	border-radius: 50%;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c1f63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M12.5 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 46%;
	transform: none;
	transition: transform 0.3s ease;
}

#page-container .et-l--post .ks-cta:hover,
#page-container .et-l--post .ks-cta:focus-visible {
	background-color: transparent;
	background-position: 100% 50%;
	color: #ffffff;
	box-shadow: 0 10px 26px -14px rgba(44, 31, 99, 0.75);
}

#page-container .et-l--post .ks-cta:hover::after,
#page-container .et-l--post .ks-cta:focus-visible::after {
	transform: translateX(3px);
}

#page-container .et-l--post .ks-cta:focus-visible {
	outline: 3px solid var(--ksb-deep-navy, #2c1f63);
	outline-offset: 3px;
}

/* --- the outlined pill ---------------------------------------------------- */
#page-container .et-l--post .ks-join {
	padding: 14px 26px;
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--ksb-pill, 999px);
	background-color: transparent;
	background-image: none;
	font-weight: 700;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

#page-container .et-l--post .ks-join:hover,
#page-container .et-l--post .ks-join:focus-visible {
	border-color: transparent;
	background-color: transparent;
	background-image: var(--ksb-grad-pill, linear-gradient(90deg, #357684 0%, #4c379e 52%, #913fda 100%));
	color: #ffffff;
}


/* ============================================================================
   B4 — Section eyebrows: the "0" mark replaces the numbers, and each label
        becomes a small chip in its section's colour pairing.
   ----------------------------------------------------------------------------
   THE 01–05 NUMBERS ARE REMOVED (Jose, 2026-08-21). The five
   <span class="ks-marker__no">NN</span> spans are deleted from index.html and
   the Keystone Groups "0" mark stands in their place as the marker glyph — see
   the <!-- brand-style: B4 --> note above the first eyebrow. The label text is
   wrapped in <span class="ks-marker__label"> so it can carry the chip. Lift
   both markup changes, in all five eyebrows, with this block. redesign.css
   still carries its .ks-marker__no rule; with the spans gone it matches nothing.

   *** THE FOUR-FAMILY CHIP MAPPING IS SUPERSEDED (Jose, 2026-08-21). ***
   Chips used to run one colour pairing per section — CONNECT pink, GROW cream,
   CELEBRATE yellow, BELONG light green — as LIGHT grounds under deep type. The
   page-wide direction is now TEAL/PURPLE grounds under WHITE type, so all four
   of those light grounds are out. The --fam-* variables below still exist and
   are still published per section, because B11 reads --fam-core for the
   schedule and B5 reads --fam-deep for the oversized mark; --fam-light and
   --fam-ink are now dormant. The chips read --chip-* instead.

   Variety now comes from moving along the teal->purple axis down the page,
   alternating flat and gradient so five chips do not read as five stickers:

        Why groups   flat  CORE teal    #357684                    5.15:1
        Watch        grad  #357684 -> #913fda  (teal -> purple)    5.15:1
        A week       flat  CORE indigo  #4c379e                    8.95:1
        The ask      grad  #4c379e -> #913fda  (indigo -> purple)  5.35:1
        Choose       flat  CORE purple  #913fda                    5.35:1

   Every one clears 4.5:1 under white at 11px. The guide's LIGHT teals and
   purples are deliberately absent — #50b8b8 is 2.36:1 and #b699cb is 2.50:1
   under white, so they cannot be text grounds. See the table in B1.

   THE GLYPH IS NOW JOSE'S REAL LOGO FILE (2026-08-21), not a recreation.
   --chip-logo picks the finish per band:

        light bands (S2, S4, S5)  groups-logo-purple.png
        dark bands  (S3, S6)      groups-logo-white.png

   *** 2026-08-24: S4 and S5 were cut, so THREE eyebrows remain — Why groups,
   Watch, Choose. The .ks-sec--week and .ks-sec--ask --chip-* declarations below
   are dormant; the S2/S3/S6 ones are live.

   ALSO 2026-08-24: S3 "Watch" was re-grounded LIGHT and the picker stayed dark,
   so the glyph files swapped over — S3 takes the purple file, the picker keeps
   the white one. The picker is now the only dark band on the page. ***

   That is NOT the mapping first suggested (gradient on light bands). The files
   were measured before choosing, and at the ~17px the glyph renders, two of the
   four finishes do not survive on a light ground:

     · the three FLAT files are drawn at alpha 191, not fully opaque, so they
       composite against whatever is behind them. On #f1f1f1 that gives
       purple 3.15:1, teal 1.74:1, white 1.09:1.
     · groups-logo-teal.png is the LIGHT teal #50b8b8, not a core teal — which
       is why it lands at 1.74:1 and is unusable on light bands.
     · groups-logo-gradient.png runs teal-to-purple VERTICALLY at full alpha.
       Its purple half reads on light (4.73:1) but its teal half does not
       (2.09:1), so at glyph size the mark visibly fades out across its top.
       On the dark bands the same thing happens in reverse (2.14:1 at the
       purple end).

   So: purple on light (3.15:1, clears the 3:1 graphic guidance), white on dark
   (7.25:1). The per-section glyph colour variety is retired with the
   recreation — the real mark ships in four fixed finishes, and only two of them
   hold up at this size. The chips still vary underneath it.

   The glyph is a CSS mask carrying the same "0" the logo uses, so it recolours
   per family and needs NO markup. WANT THE EYEBROWS BARE? Delete the single
   .ks-marker::before rule for no glyph, or the .ks-marker__label rule for no
   chip; the rest of the block still works either way.

   Each section also publishes --fam-light / --fam-core / --fam-deep / --fam-grad
   so other blocks (B5, B11) can pick up the same family without re-declaring it.

   Shows on: the small eyebrow line at the top of S2, S3, S4, S5 and the picker.
   ========================================================================== */

.et-l--post .ks-sec--why {
	--fam-light: var(--ksb-connect-light, #febcdb);
	--fam-core:  var(--ksb-connect-core,  #913fda);
	--fam-deep:  var(--ksb-connect-deep,  #2c1f63);
	--fam-grad:  var(--ksb-connect-grad,  linear-gradient(90deg, #f1addb, #9b4bda, #372270));
	--fam-ink:   #2c1f63;   /* chip type: the family's deep value, contrast-checked */

	/* chips: one shared gradient on every headline pill (Jose, 2026-08-21) */
	--chip-bg:    #357684;
	--chip-grad:  linear-gradient(90deg, #357684 0%, #913fda 100%);
	--chip-logo:  url(../assets/img/groups-logo-purple.png);
}

.et-l--post .ks-sec--video {
	--fam-light: var(--ksb-belong-light, #c0eb8e);
	--fam-core:  var(--ksb-belong-core,  #50b8b8);
	--fam-deep:  var(--ksb-belong-deep,  #4c379e);
	--fam-grad:  var(--ksb-belong-grad,  linear-gradient(90deg, #b1e494, #50b8b8, #4d55a4));
	--fam-ink:   #4c379e;   /* chip type: the family's deep value, contrast-checked */

	/* chips: teal/purple ground, white type (2026-08-21) */
	--chip-bg:    #357684;
	--chip-grad:  linear-gradient(90deg, #357684 0%, #913fda 100%);
	/* S3 is a LIGHT band since 2026-08-24 — white would vanish */
	--chip-logo:  url(../assets/img/groups-logo-purple.png);
}

.et-l--post .ks-sec--week {
	--fam-light: var(--ksb-grow-light, #fce59e);
	--fam-core:  var(--ksb-grow-core,  #299f3a);
	--fam-deep:  var(--ksb-grow-deep,  #204737);
	--fam-grad:  var(--ksb-grow-grad,  linear-gradient(90deg, #fce59e, #28983a, #204737));
	--fam-ink:   #204737;   /* chip type: the family's deep value, contrast-checked */

	/* chips: one shared gradient on every headline pill (Jose, 2026-08-21) */
	--chip-bg:    #357684;
	--chip-grad:  linear-gradient(90deg, #357684 0%, #913fda 100%);
	--chip-logo:  url(../assets/img/groups-logo-purple.png);
}

.et-l--post .ks-sec--ask {
	--fam-light: var(--ksb-celebrate-light, #f0d429);
	--fam-core:  var(--ksb-celebrate-core,  #ef2f9a);
	--fam-deep:  var(--ksb-celebrate-deep,  #913fda);
	--fam-grad:  var(--ksb-celebrate-grad,  linear-gradient(90deg, #f0c434, #ef4789, #a23cce));
	--fam-ink:   #622a93;   /* chip type: the family's deep value, contrast-checked */

	/* chips: one shared gradient on every headline pill (Jose, 2026-08-21) */
	--chip-bg:    #357684;
	--chip-grad:  linear-gradient(90deg, #357684 0%, #913fda 100%);
	--chip-logo:  url(../assets/img/groups-logo-purple.png);
}

#page-container .et-l--post .ks-picker {
	--fam-light: var(--ksb-connect-light, #febcdb);
	--fam-core:  var(--ksb-connect-core,  #913fda);
	--fam-deep:  var(--ksb-connect-deep,  #2c1f63);
	--fam-grad:  var(--ksb-connect-grad,  linear-gradient(90deg, #f1addb, #9b4bda, #372270));
	--fam-ink:   #2c1f63;   /* chip type: the family's deep value, contrast-checked */

	/* chips: one shared gradient on every headline pill (Jose, 2026-08-21) */
	--chip-bg:    #357684;
	--chip-grad:  linear-gradient(90deg, #357684 0%, #913fda 100%);
	--chip-logo:  url(../assets/img/groups-logo-white.png);
}

/* The eyebrow: mark glyph + label, both in the section's family. */
#page-container .et-l--post .ks-marker {
	align-items: center;   /* was baseline — the glyph has to centre, not sit on it */
	gap: 0.42em;           /* tight: the logo PNG carries its own canvas padding */
	color: var(--fam-deep, #2c1f63);
}

/* The REAL Groups mark (Jose's own PNGs, swapped in 2026-08-21 for the CSS-mask
   recreation that stood in before). Delivered as four finishes; --chip-logo picks
   one per section. Delete this one rule for bare eyebrows.

   SIZING: the PNGs are a 769x814 canvas with the mark inset inside it — the mark
   itself is 563x701 (aspect 0.803), occupying 73.2% of the canvas width and 86.0%
   of its height. So the box below is set to the CANVAS aspect (769:814) and sized
   up, which lands the visible mark at ~1.9em tall — the same optical size the
   recreation had — with no distortion. The marker's gap is tightened from 0.75em
   to 0.42em to absorb the canvas's built-in side padding, so the space between
   mark and chip still reads as it did.

   Using contain (not a cropped background-size) on purpose: if Jose re-exports
   with different padding it degrades to a slightly smaller mark rather than a
   clipped one. */
#page-container .et-l--post .ks-marker::before {
	content: "";
	flex: none;
	width: 2.08em;
	height: 2.2em;
	background-image: var(--chip-logo, url(../assets/img/groups-logo-purple.png));
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}

/* The dark bands need no override — --chip-logo already points them at the
   white file. */

/* The label chip: the shared gradient pill under white type (Jose's unify,
   2026-08-21). RESTORED same day — this rule was accidentally dropped during
   the logo swap, which left all five labels as bare text. */
#page-container .et-l--post .ks-marker__label {
	display: inline-block;
	padding: 0.62em 1.05em 0.55em;
	border-radius: var(--ksb-pill, 999px);
	background-color: var(--chip-bg, #357684);
	background-image: var(--chip-grad, none);
	color: #ffffff;
	font-weight: 600;
	font-size: 11px;
	line-height: 1;
}


/* B5 — oversized mark. REMOVED 2026-08-24: its S5 home was cut, it was briefly
   revived in the picker, and Jose reversed that whole direction the same day. */


/* ============================================================================
   B6 — Two-weight lockups: the guide's light-plus-bold heading pairing.
   ----------------------------------------------------------------------------
   The guide sets its headings as one light word against one bold word
   ("BRAND DIRECTION"). This page's headings are full sentences, so the pairing
   is applied at LOCKUP scale instead of inside the words: the bold 800 display
   line now sits against a supporting line in Work Sans 300 at display size,
   rather than against Roboto body copy. Same two-weight contrast, no markup
   change, and the long copy stays readable.

   The eyebrows are NOT touched here — B4 owns those end to end, so the two
   blocks can be merged in either order, or one without the other.

   Shows on: the intro line under the headings in S3, S4 and the picker.

   NOTE: Work Sans 300/800 is a STAND-IN for the guide's display face, which is
   not available as a licensed web font. See the file header.
   ========================================================================== */

#page-container .et-l--post .ks-week__intro,
#page-container .et-l--post .ks-video__line,
#page-container .et-l--post .ks-picker__intro {
	font-family: var(--ks-display);
	font-weight: 300;
	font-size: clamp(18px, 1.9vw, 23px);
	line-height: 1.45;
	letter-spacing: -0.005em;
	max-width: 46ch;
}

/* S3 went light 2026-08-24 — this line is on white now. */
#page-container .et-l--post .ks-video__line {
	color: var(--ks-ink-2);
}

#page-container .et-l--post .ks-picker__intro {
	color: rgba(255, 255, 255, 0.74);
}


/* ============================================================================
   B7 — Rounded forms: the guide's rounded shape language on frames.
   ----------------------------------------------------------------------------
   One radius token, applied consistently and modestly to the things that are
   frames — photo frames, the film frame, the picker stage, the phone cards and
   the pull-quote panel. Corner shape only.

   THIS IS NOT A PHOTO TREATMENT. No tint, overlay or filter is added; the
   pixels are identical, the frame they sit in is rounded.

   Shows on: both photos in S2/S4, the video frame in S3, the pull-quote panel
   in S4, the picker stage, and the three phone cards under 940px.
   ========================================================================== */

#page-container .et-l--post .ks-why__fig img,
#page-container .et-l--post .ks-week__fig img {
	border-radius: var(--ksb-radius, 18px);
}

.et-l--post .ks-video {
	border-radius: var(--ksb-radius, 18px);
}

.et-l--post .ks-quote {
	border-radius: var(--ksb-radius, 18px);
}

.et-l--post .ks-stage {
	border-radius: var(--ksb-radius, 18px);
}

@media only screen and (max-width: 940px) {
	.et-l--post .ks-card {
		border-radius: var(--ksb-radius, 18px);
	}
}


/* ============================================================================
   B8 — Picker family colours: each group gets its own colour pairing on the
        active state, instead of all three sharing one accent.
   ----------------------------------------------------------------------------
        01 Men's    -> BELONG     teal   #50b8b8
        02 Women's  -> CONNECT    pink   #febcdb
        03 Couples  -> CELEBRATE  yellow #f0d429

   All three are LIGHT/CORE values chosen to hold up on the picker's #353a42.
   The colour drives the active name, its chevron, the rule under the active
   row, and the focus ring — one variable per name.

   THE 01/02/03 LIST NUMBERS ARE REMOVED (Jose, 2026-08-21): the three
   <span class="ks-name__no">NN</span> spans are deleted from index.html, so the
   names now start hard on the left axis and the only thing distinguishing the
   selected group is its colour. Lift those three markup deletions with this
   block. redesign.css keeps its .ks-name__no rules; they match nothing.

   The photos are untouched: --ks-shot-overlay stays the redesign's neutral
   slate scrim, deliberately NOT brand-tinted.

   Shows on: the three names in the picker (S6), desktop and phone.
   ========================================================================== */

/* The picker is dark again (the light re-ground was reversed 2026-08-24), so
   these are back to the LIGHT-palette values that were chosen against #353a42. */
.et-l--post .ks-names__row:nth-child(1) { --grp: var(--ksb-belong-core,    #50b8b8); }
.et-l--post .ks-names__row:nth-child(2) { --grp: var(--ksb-connect-light,  #febcdb); }
.et-l--post .ks-names__row:nth-child(3) { --grp: var(--ksb-celebrate-light,#f0d429); }

/* Active name takes the group's colour rather than plain white. */
#page-container .et-l--post .ks-names__row.is-active .ks-name {
	color: var(--grp, #50b8b8);
}

.et-l--post .ks-names__row.is-active {
	border-bottom-color: var(--grp, #50b8b8);
}

#page-container .et-l--post .ks-name:focus-visible {
	outline: 3px solid var(--grp, #50b8b8);
}

/* Phone: no stage to reveal, so every name simply wears its own colour. */
@media only screen and (max-width: 940px) {
	#page-container .et-l--post .ks-name,
	#page-container .et-l--post .ks-names__row.is-active .ks-name {
		color: var(--grp, #50b8b8);
	}
}


/* ============================================================================
   B9 — Hero lockup: the guide's hero gradient enters as the rule bar.
   ----------------------------------------------------------------------------
   NOTHING IS ADDED OVER THE FILM. The hero scrim stays removed (Jose,
   2026-08-21) and the film runs clean. What changes is the type lockup that
   was already there: the 3px accent rule becomes a wide, pill-ended bar
   carrying the guide's teal->blue->purple hero gradient — the one place on the
   page where that gradient can appear at hero scale without covering picture.
   The em-dash in the slug picks up the same teal, and "FIND YOUR PEOPLE" moves
   to Work Sans 300 with the guide's wider tracking.

   Shows on: the bottom-left lockup of the full-viewport hero (S1).
   ========================================================================== */

.et-l--post .ks-hero__rule {
	width: clamp(120px, 15vw, 190px);
	height: 9px;
	border-radius: var(--ksb-pill, 999px);
	background-color: transparent;
	background-image: linear-gradient(90deg, #50b8b8 0%, #6b85c6 54%, #825cd2 100%);
}

.et-l--post .ks-hero__dash {
	color: var(--ksb-light-teal, #50b8b8);
}

#page-container .et-l--post .ks-hero__sub {
	font-weight: 300;
	letter-spacing: 0.13em;
	color: #ffffff;
}


/* ============================================================================
   B10 — Closing lockup bar: the guide's footer lockup finishes the page.
   ----------------------------------------------------------------------------
   The white closing band keeps its slug and its closing line exactly as they
   are — no copy moves. What is added underneath is the guide's footer lockup:
   a teal->indigo->purple gradient bar, pill-ended, carrying the solid "0" mark,
   KEYSTONE GROUPS in the light/bold pairing, a divider, and FIND YOUR PEOPLE.
   It is also the one thing that separates the white band from the dark Divi
   footer with a brand element instead of a hard edge.

   HTML HOOK: the lockup markup in index.html, wrapped in
   <!-- brand-style: B10 --> … <!-- /brand-style: B10 -->. Lift it with this
   block. It carries its own <img> pointing at groups-logo-white.png, so it does
   not depend on B5.

   Shows on: the bottom of the white closing band (S7), above the Divi footer.
   ========================================================================== */

.et-l--post .ks-lockup {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 26px);
	margin-top: clamp(46px, 5.4vw, 76px);
	padding: clamp(15px, 1.8vw, 24px) clamp(22px, 3vw, 44px);
	border-radius: var(--ksb-pill, 999px);
	background-image: var(--ksb-grad-lockup, linear-gradient(90deg, #50b6b8 0%, #4d67a8 42%, #4c3e9f 56%, #622a93 100%));
	color: #ffffff;
}

/* Jose's white logo file (swapped 2026-08-21 for an inline SVG recreation).
   Widened from clamp(24px, 2.6vw, 36px) because the PNG's mark fills only 73% of
   its canvas width — this keeps the VISIBLE mark the size it was. */
.et-l--post .ks-lockup__mark {
	flex: none;
	display: block;
	width: clamp(33px, 3.6vw, 49px);
}

#page-container .et-l--post .ks-sec .ks-lockup__mark img {
	display: block;
	width: 100%;
	height: auto;
}

.et-l--post .ks-lockup__name {
	font-family: var(--ks-display);
	font-weight: 300;
	font-size: clamp(16px, 2vw, 27px);
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffffff;
	white-space: nowrap;
}

.et-l--post .ks-lockup__name strong {
	font-weight: 800;
}

.et-l--post .ks-lockup__bar {
	flex: none;
	width: 2px;
	height: 1.9em;
	background-color: rgba(255, 255, 255, 0.5);
}

.et-l--post .ks-lockup__tag {
	font-family: var(--ks-display);
	font-weight: 400;
	font-size: clamp(11px, 1.15vw, 15px);
	line-height: 1;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
}

.et-l--post .ks-lockup__tag strong {
	font-weight: 800;
	color: #ffffff;
}

@media only screen and (max-width: 640px) {
	.et-l--post .ks-lockup {
		flex-wrap: wrap;
		row-gap: 12px;
		padding: 22px 28px;
		border-radius: var(--ksb-radius, 20px);
	}

	.et-l--post .ks-lockup__bar {
		display: none;
	}

	.et-l--post .ks-lockup__tag {
		flex-basis: 100%;
		letter-spacing: 0.24em;
	}
}


/* ============================================================================
   *** SECTION REMOVED 2026-08-24 — RULES BELOW ARE DORMANT ***
   B11 styled the S4 schedule and pull-quote. S4 was cut from index.html
   (Jose), so every selector in this block is dormant — including the
   teal/purple quote card added 2026-08-21.
   Kept rather than deleted, on purpose: it is a few KB, it keeps the diff
   against ../snapshots/2026-08-24_pre-section-cut/ legible, and putting the
   section back is then a markup-only change. Nothing here matches any element
   on the page as it currently stands.
   ========================================================================== */
/* ============================================================================
   B11 — Schedule and pull-quote accents in the GROW family.
   ----------------------------------------------------------------------------
   S4 is the GROW band (B4), and this block carries that family down into the
   section's furniture: the 6:30 / 7:00 / 8:00 / 8:30 times take GROW's core
   green, and the hairlines between rows take a tinted version of it instead of
   neutral grey. The pull-quote CARD and its bar have since moved OUT of the
   GROW family — as of 2026-08-21 the card is a teal->purple gradient under
   white type, with the rest of the page's pills and cards, and the bar is white.

   NOTE: the schedule times and hairlines are still GROW GREEN. They are not
   pills or card surfaces, so the teal/purple direction left them alone by
   instruction — but they are now the only green elements in a section whose
   chip and quote card are teal/purple. Flagged for Jose rather than changed
   unasked.

   Weights and sizes are untouched — this is colour and rule shape only.

   Shows on: the four-row schedule and the pull-quote in S4 "A week in a group".
   ========================================================================== */

.et-l--post .ks-sched__t {
	color: var(--fam-core, #299f3a);
}

.et-l--post .ks-sched__row {
	border-top-color: #d6e6d9;
	border-top-color: color-mix(in srgb, var(--fam-core, #299f3a) 24%, #ffffff);
}

.et-l--post .ks-sched__row:last-child {
	border-bottom-color: #d6e6d9;
	border-bottom-color: color-mix(in srgb, var(--fam-core, #299f3a) 24%, #ffffff);
}

/* --- The pull-quote CARD ----------------------------------------------------
   White originally, then GROW cream, and as of 2026-08-21 a TEAL->PURPLE
   GRADIENT under WHITE type, with the rest of the page's pills and cards. The
   cream is retired: it was a LIGHT value, and light values cannot carry white.

   Ground is --ksb-grad-card — #357684 teal -> #4c379e indigo -> #622a93 deep
   purple, on the 135deg diagonal so a large panel gets some movement without
   turning into a stripe. Worst stop under white is 5.15:1, and the quote sets
   at clamp(23px, 2.5vw, 36px), so even its small end clears the 4.5 threshold
   for normal text, never mind the 3:1 large-text one.

   This card carries three jobs at once — it knocks a panel out of the main
   portrait, the small photo tucks behind it, and it holds the quote — so it has
   to read as a deliberate object rather than a gap in the photography. A
   saturated ground does that better than the cream did.

   THE GREEN/CREAM ALTERNATES STAGED HERE EARLIER ARE RETIRED: they were
   GROW-family experiments from before the teal/purple direction.
   ------------------------------------------------------------------------ */
#page-container .et-l--post .ks-quote {
	background-color: var(--ksb-core-indigo, #4c379e);
	background-image: var(--ksb-grad-card, linear-gradient(135deg, #357684 0%, #4c379e 58%, #622a93 100%));
}

#page-container .et-l--post .ks-quote p {
	color: #ffffff;
}

/* Below 980 redesign.css zeroes the quote's padding, which was right when the
   card was white and invisible. A coloured card needs its inset back, or the
   ground shrink-wraps the text. */
@media only screen and (max-width: 980px) {
	#page-container .et-l--post .ks-quote {
		padding: clamp(24px, 4vw, 34px) clamp(22px, 4vw, 30px) clamp(20px, 3.4vw, 28px);
	}
}

/* The bar sits ON a dark card now, so it is re-tuned to read against it:
   solid white, 7.2:1 against the card's midpoint. It previously ran green->deep
   green, which was legible on cream but would sink into this ground. */
.et-l--post .ks-quote__rule {
	width: 78px;
	height: 8px;
	border-radius: var(--ksb-pill, 999px);
	background-color: #ffffff;
	background-image: none;
}


/* B12 — tiled mark pattern on the picker. ADDED AND REMOVED 2026-08-24. */

/* ============================================================================
   B13 — Mobile picker-card crop fix (2026-08-24, Jose: "make sure the mobile
   versions show images centered correctly").
   ----------------------------------------------------------------------------
   Below 940 each group gets a landscape-ish phone card cropped out of a 4:5
   portrait photo. Default cover-crop centres the window mid-image, which shoves
   the faces (upper-middle of the delivered frames, per the shoot spec) against
   the card's top edge — the Men's card clipped the hat. Biasing the crop window
   toward the upper-middle keeps faces comfortably inside.
   ========================================================================== */
@media only screen and (max-width: 940px) {
	#page-container .et-l--post .ks-card img {
		object-position: 50% 30%;
	}
}

/* ============================================================================
   B14 — S2 photo swap crop (2026-08-25). The "Why groups" portrait slot now
   holds a LANDSCAPE living-room photo (groups-why-livingroom.jpg, 2100x1400),
   client-delivered. Cover-cropping 3:2 into the ~2:3 slot keeps only the middle
   ~44% of the frame, and a centre crop would split the two subjects — bias the
   window onto the left subject, mid-laugh.
   ========================================================================== */
/* 2026-08-25, Jose: show the photo in its original horizontal aspect — the
   2/3 portrait enforcement is removed and the image renders at its natural
   3:2. (Previous rule kept for reference:
   aspect-ratio: 2/3; object-fit: cover; object-position: 30% 50%;) */
#page-container .et-l--post .ks-why__fig img {
	height: auto;
}

/* ============================================================================
   B15 — Hero meta legibility (2026-08-26, Jose: "make KEYSTONE CHURCH —
   KELLER, TEXAS more readable"). The line was rgba(255,255,255,.62), tuned for
   the old dark scrim; with the scrim gone it sits on raw footage and washes
   out on bright frames. Full white + a soft layered shadow that edges it on
   any frame without putting anything over the film itself.
   ========================================================================== */
#page-container .et-l--post .ks-hero__meta {
	color: #ffffff;
	font-size: 12px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* B15 addendum (2026-08-26): same legibility treatment for the hero subhead
   "FIND YOUR PEOPLE." — it's Work Sans 200 over raw footage, so it thins out
   on bright frames the same way the meta line did. Shadow scaled up slightly
   for the larger type. */
#page-container .et-l--post .ks-hero__sub {
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 18px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   B16 — Play affordance removed (2026-08-26, Jose: the delivered thumbnail
   already carries its own play button). The button element STAYS — it is the
   whole-frame click target (position:absolute inset:0) and now carries an
   aria-label — only its visuals go. Closing-band slug also removed from the
   markup the same day (hero keeps its copy of the line).
   ========================================================================== */
#page-container .et-l--post .ks-video__disc,
#page-container .et-l--post .ks-video__playtext {
	display: none;
}

/* B16 addendum — photo centering on stacked layouts (2026-08-26). Below 900
   the S2 figure caps at 460px inside a wider column and sat flush left with
   dead space to its right; centre it (caption travels with the figure). */
@media only screen and (max-width: 900px) {
	.et-l--post .ks-why__fig {
		margin-left: auto;
		margin-right: auto;
	}
}

/* B13 addendum (2026-08-26, from Jose's screenshot): the Couples photo frames
   its faces in the TOP quarter — the shared 50% 30% card bias still clips them
   on the stacked mobile card. Bias this one card's window to the top. */
@media only screen and (max-width: 940px) {
	#page-container .et-l--post .ks-names__row:nth-child(3) .ks-card img {
		object-position: 50% 12%;
	}
}

/* B13 addendum 2 (2026-08-26, Jose's second screenshot): at wider stacked
   widths the cards get shorter relative to their width, and the Men's photo —
   faces in the upper third — clips at the eyes under the shared 30% bias.
   Give the Men's card its own top bias like the Couples card. Women's face is
   mid-frame and holds at every stacked width, so it keeps the shared value.
   2026-09-01: NEW Men's photo (two guys at a table) — its faces sit in the
   35–58% band, not the upper third. 18% showed mostly sky on wide cards;
   40% centers both faces at every card shape (crop windows verified at the
   widest ~27%-band card, the mid 40% band and the phone 70% band). */
@media only screen and (max-width: 940px) {
	#page-container .et-l--post .ks-names__row:nth-child(1) .ks-card img {
		object-position: 50% 40%;
	}
}

/* ============================================================================
   B17 — Closing line: single line + more air (2026-08-26, Jose). The 22ch cap
   forced the two-line wrap; with the slug removed the line can run the full
   band. On phones the sentence physically can't fit one line at readable size,
   so it wraps there — text-wrap: balance keeps that wrap tidy.
   ========================================================================== */
.et-l--post .ks-sec--close {
	--pt: clamp(110px, 11vw, 170px);
	--pb: clamp(110px, 11vw, 170px);
}

#page-container .et-l--post .ks-close__line {
	grid-column: 1 / -1;
	max-width: none;
	white-space: nowrap;
	text-wrap: balance;
}

@media only screen and (max-width: 900px) {
	#page-container .et-l--post .ks-close__line {
		white-space: normal;
	}
}

/* B17 addendum (2026-08-26): centre the closing line. */
#page-container .et-l--post .ks-close__line {
	text-align: center;
}

/* ============================================================================
   B18 — Supporting copy under the picker names (2026-08-27, Jose's copy pass:
   "add them under the appropriate group title on the left"). One quiet body
   line per group beneath its big name in the left column. Muted white tested
   against the dark band (~4.8:1 at .65); brightens slightly on the active row.
   ========================================================================== */
#page-container .et-l--post .ks-name__sub {
	margin: 0.55em 0 0;
	padding: 0;
	font-family: var(--ks-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.65;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, 0.65);
	max-width: 46ch;
}

#page-container .et-l--post .ks-names__row.is-active .ks-name__sub {
	color: rgba(255, 255, 255, 0.8);
}

/* B18 fix (2026-08-27): the row is a horizontal flex line, so the new sub
   landed BESIDE the name and squeezed it onto two lines. Stack the row —
   name on top, supporting line under it, per Jose's placement. */
#page-container .et-l--post .ks-names__row {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}


/* ============================================================================
   B19 — Responsive review fixes (2026-08-27).
   ----------------------------------------------------------------------------
   Full four-width pass (1440 / 1024 / 800 / 390) plus a width sweep from 360 to
   1600. No horizontal overflow anywhere, no bleed, no text/photo collisions —
   the four things below are what the pass actually turned up. CSS only; no
   markup changed, so this reaches the live paste with the stylesheet.
   ========================================================================== */

/* --- B19.1 — the hero was one header-height too tall -----------------------
   .ks-hero is min-height:100svh, but the Divi Theme Builder header is IN FLOW
   above it, not overlaid. So the first screen was always header + 100svh, and
   the bottom of the hero — the gradient rule and "FIND YOUR PEOPLE." — sat
   exactly at or below the fold at EVERY width measured (subhead top landed at
   799-807px in an 800px viewport). Subtract the header so the lockup finishes
   on the first screen and the film still fills it edge to edge.

   Header heights measured off this page (they are Divi's, not ours):
       >= 981px   90px
       768-980px  98px   (Divi's tablet header)
       <= 767px   80px   (Divi's phone header)
   If Divi's header ever changes height, these three numbers are the only thing
   to re-check. 100vh is kept as the pre-svh fallback, same as redesign.css.
   ------------------------------------------------------------------------ */
#page-container .et-l--post .ks-hero {
	--ks-hdr: 90px;
	min-height: calc(100vh - var(--ks-hdr));
	min-height: calc(100svh - var(--ks-hdr));
}

@media only screen and (max-width: 980px) {
	#page-container .et-l--post .ks-hero {
		--ks-hdr: 98px;
	}
}

@media only screen and (max-width: 767px) {
	#page-container .et-l--post .ks-hero {
		--ks-hdr: 80px;
	}
}

/* --- B19.2 — picker: air under the new supporting line, below 940 ----------
   B18's supporting paragraph shipped 2026-08-27 with no bottom margin. On the
   stacked layout (<= 940) the next thing in the row is the photo card, so the
   paragraph's last line ended EXACTLY on the card's top edge — 0px, measured —
   and the copy read as if it were sitting on the photo.

   Fixing the gap alone would have made the within-a-group gaps (name->sub 24px,
   sub->card 20px) and the between-groups gap (24px) identical, which reads as
   one undifferentiated stack. So the row separation goes to 48px: inside a
   group is now clearly tighter than between groups. Last row drops its margin
   so the section's own bottom padding stays honest.
   ------------------------------------------------------------------------ */
@media only screen and (max-width: 940px) {
	#page-container .et-l--post .ks-name__sub {
		margin-bottom: 20px;
	}

	.et-l--post .ks-names__row,
	.et-l--post .ks-names__row:first-child {
		margin-bottom: 48px;
	}

	.et-l--post .ks-names__row:last-child {
		margin-bottom: 0;
	}
}

/* --- B19.3 — closing lockup: align the two stacked lines, <= 640 -----------
   B10 wraps the lockup below 640 by giving the tag flex-basis:100%. That drops
   "FIND YOUR PEOPLE." onto its own flex line starting at the bar's content
   edge — i.e. under the "0" mark, 47px left of "KEYSTONE GROUPS" above it.
   Two lines of a lockup on two different left edges. Grid instead: the mark
   spans both rows on the left, name and tag share one left edge beside it.
   ------------------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
	#page-container .et-l--post .ks-lockup {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 14px;
		row-gap: 9px;
	}

	#page-container .et-l--post .ks-lockup__mark {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	#page-container .et-l--post .ks-lockup__name {
		grid-column: 2;
		grid-row: 1;
	}

	#page-container .et-l--post .ks-lockup__tag {
		grid-column: 2;
		grid-row: 2;
	}
}

/* --- B19.4 — S3 standfirst orphan -----------------------------------------
   "Hear from one of our pastors about what groups are all / about." — the line
   broke one word before its cap at 800, 1024 and 1440, leaving "about." alone.
   Balance the two lines instead of hard-wrapping at the measure. Phone already
   broke evenly; balance leaves it alone.
   ------------------------------------------------------------------------ */
#page-container .et-l--post .ks-video__line {
	text-wrap: balance;
}

/* ============================================================================
   B20 — Desktop: names centred at rest; on activation the name rises and the
         description fades in beneath it.
   ----------------------------------------------------------------------------
   EVOLUTION. First pass (2026-08-27) simply toggled each .ks-name__sub's
   opacity/visibility on the sticky .is-active row. That worked, but because
   B18 had stacked the row (flex column) with the sub in NORMAL FLOW, an
   inactive row reserved the hidden sub's space — so every resting name sat high
   in its row with a dead gap underneath. Jose: names centred at rest, and on
   hover/activation the name moves up to make room for the description.

   HOW IT WORKS NOW
     · The sub is taken OUT OF FLOW on desktop (absolute within the row), so the
       row's justify-content:center has only the name to centre. Names sit true
       centre at rest, with no reserved space below them.
     · Activation moves the name up with a TRANSFORM only — never a layout
       property — so row heights never change and the equal-flex rows cannot
       shift. The chevron is a pseudo of .ks-name, so it rides along for free.
     · The sub is parked 12px under the name's resting baseline and travels the
       last 10px up as it fades in, landing exactly 12px under the risen name.
       Same duration and easing as the name, same direction: one motion, not two
       staggered events.

   WHY 43px, AND WHY ONE NUMBER WORKS AT EVERY WIDTH
   To centre the active pair, the name must rise by half the space the
   description adds: U = (gap + subHeight) / 2 = (12 + 74.3) / 2 ≈ 43px.
   That is independent of the name's own size, which is the useful part — the
   name scales clamp(30px, 4.1vw, 58px) across the range but U does not have to.
   And measured at 1440 / 1200 / 1024 / 941, all three descriptions render at
   exactly 3 lines / 74.3px, because .ks-name__sub's 46ch cap fixes the wrap at
   388px regardless of how wide the column gets. So one value is correct
   everywhere, and no per-width tightening of the sub is needed.

   WORST-CASE FIT
   Rows are flex:1 1 0 inside a reveal of clamp(520px, 62vh, 660px), so row
   height is driven by viewport HEIGHT, not width — the tightest case is the
   520px floor (short viewport), giving ~171px of row inside the borders. The
   worst block is the widest viewport, where the name is largest:
       name 58 + gap 12 + sub 74.3 = 144.3px in a 171px row
   which lands the risen name 13.5px below the top border and the description
   13.2px above the bottom one. Nothing touches a border at any desktop width or
   height. At 941 the name shrinks to 38.6px and clearance grows to ~23px.

   Below 941 this block does nothing: the stacked cards have no hover, so the
   descriptions stay always-visible in normal flow exactly as before.
   ========================================================================== */
@media only screen and (min-width: 941px) {
	.et-l--post .ks-names__row {
		position: relative;
	}

	/* Out of flow, so the row centres the name alone. Parked 12px under the
	   name's resting position: 50% + half the name + the gap. The clamp is
	   exactly half of .ks-name__text's clamp(30px, 4.1vw, 58px). */
	#page-container .et-l--post .ks-name__sub {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(50% + clamp(15px, 2.05vw, 29px) + 12px);
		margin: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-33px);
		transition: opacity 0.42s ease-out, transform 0.42s ease-out,
			visibility 0s linear 0.42s;
	}

	#page-container .et-l--post .ks-name {
		transition: color 0.35s ease, transform 0.42s ease-out;
	}

	#page-container .et-l--post .ks-names__row.is-active .ks-name {
		transform: translateY(-43px);
	}

	#page-container .et-l--post .ks-names__row.is-active .ks-name__sub {
		opacity: 1;
		visibility: visible;
		transform: translateY(-43px);
		transition: opacity 0.42s ease-out, transform 0.42s ease-out,
			visibility 0s;
	}

	/* Reduced motion: the same end states, arrived at instantly. Nothing
	   animates, but the name still sits where it belongs so the description
	   cannot overrun the row. */
	@media (prefers-reduced-motion: reduce) {
		#page-container .et-l--post .ks-name,
		#page-container .et-l--post .ks-name__sub {
			transition-duration: 0s;
			transition-delay: 0s;
		}
	}
}

/* ============================================================================
   B21 — Seamless hero poster (2026-08-28, Jose: "the photo loads before the
   video"). The fallback photo was a DIFFERENT scene from the films, making the
   photo→film handoff visible. The ground under the film is now each cut's own
   FIRST FRAME, so loading reads as "the video was already there and starts
   moving" — no visible swap. Breakpoint matches the script's source pick
   exactly. The old Who-We-Are photo remains on disk, now unreferenced by the
   hero.
   ========================================================================== */
.et-l--post .ks-hero {
	background-image: url(../assets/img/hero-poster-wide.jpg);
	background-position: 50% 50%;
}

@media only screen and (max-width: 767px), (orientation: portrait) and (max-width: 1024px) {
	.et-l--post .ks-hero {
		background-image: url(../assets/img/hero-poster-tall.jpg);
	}
}