/* ============================================================
   FLIBBR HOME
   Homepage-specific styling. Drives front-page.php and the 9
   template parts under template-parts/home/.
   Tokens (--serif, --sans, --ink*, --accent, --measure, etc.) and
   the 12 type-roles (.t-display-hero, .t-h1, .t-meta, ...) are
   defined in tokens.css and typography.css respectively.
   .container, .section come from base.css.

   v0.5.0 (skeleton): only .section-header (shared by 7 sections).
   Section CSS arrives in Phase C, partial-by-partial:
     C1 (v0.5.1) — .home-hook (Hero)               ✅ shipped v0.5.1
     C2 (v0.5.2) — .offerings-grid + .offering-card (What We Do)  ✅ shipped v0.5.2
     C3 (v0.5.3) — .lead-piece (Lead Piece)                      ✅ shipped v0.5.3
     C4 (v0.5.4) — .bootcamp-recap + .cohort-module (Bootcamp)   ✅ shipped v0.5.4
     C5 (v0.5.5) — .case-study-grid + .case-study-card (Recent Case Studies) ✅ shipped v0.5.5
     C6 (v0.5.6) — .recognition + .recognition-item (Recognition) ✅ shipped v0.5.6
     C7 (v0.5.7) — .flibbrati-grid + .flibbrati-card (Flibbrati)  ✅ shipped v0.5.7
     C8 (v0.5.8) — .dispatch-teaser + .teaser-* (Dispatch)
     C9 (v0.5.9) — .contact-grid + .contact-path (Contact)

   Source-of-truth hierarchy (architecture v2 §0):
   locked canonicals → architecture-v2 → theme code.
   If this file and the canonical disagree, the canonical wins.
   ============================================================ */

/* Shared section-header pattern used by 7 of 9 sections.
   Lifted from canonical lines 290-305 — promoted into home.css
   at v0.5.0 because every C-phase partial relies on it.
   If a non-homepage surface ever needs .section-header, it gets
   moved into base.css then; for now scope-by-name keeps it tight. */
body.home .section-header {
	display: flex; flex-direction: column; gap: var(--s-3);
	margin-bottom: var(--s-7);
	padding-bottom: var(--s-5);
	border-bottom: 1px solid var(--rule);
}
body.home .section-header .label {
	font-family: var(--sans); font-weight: 500;
	font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ink-quiet);
}
body.home .section-header .name {
	font-family: var(--serif); font-weight: 400;
	font-size: 22px; color: var(--ink);
}
body.home .section-header .name em { font-style: italic; }

/* ============================================================
   §0 — MOTION PRELUDE (cross-section interactions)
   Canonical: flibbr-design-mockup-final-homepage.html lines 130-186.
   Lifted at C7 (#131) — should have arrived earlier; previously-shipped
   sections (offerings, cohorts, case studies) gain hover lift retroactively.

   Includes:
   - Card lift: 6 selectors get base transform + box-shadow on hover
   - Link arrow transitions: shared transition for .hook-aside-link,
     .cohort-link, .offering-link (`gap, color`). Consolidated here
     in v0.5.10 (#132 closed) — per-section `transition: gap` lines
     in §1/§2/§4 removed; this is the single source of truth.
   - Contact-path arrow horizontal motion (used at §9)
   - Image overlay opacity transitions
   - .section opacity/transform base state for a build-phase
     progressive-reveal mechanism (transitions defined; no JS to
     trigger them yet — dormant, pending Phase D motion-on-scroll
     wiring, open #133)
   - nth-child stagger transition-delays for offering, work, flibbrati
   ============================================================ */

/* Enhanced card interactions with subtle lift */
.offering-card, .cohort-row, .case-study-card, .flibbrati-card,
.contact-path {
	transition: transform var(--motion-duration-content) var(--motion-ease-content),
	            box-shadow var(--motion-duration-content) var(--motion-ease-content),
	            background var(--motion-duration-content) var(--motion-ease-content);
	transform: translateY(0);
}

.offering-card:hover, .cohort-row:hover, .case-study-card:hover,
.flibbrati-card:hover, .contact-path:hover {
	transform: translateY(calc(-2px * var(--motion-ok)));
	box-shadow: 0 8px 24px rgba(20, 20, 19, 0.08);
}

/* Link arrow micro-interactions */
.hook-aside-link, .cohort-link, .offering-link {
	transition: gap var(--motion-duration-ui) var(--motion-ease-ui),
	            color var(--motion-duration-ui) var(--motion-ease-ui);
}

.contact-path .path-arrow {
	transition: transform var(--motion-duration-ui) var(--motion-ease-ui),
	            color var(--motion-duration-ui) var(--motion-ease-ui);
}

.contact-path:hover .path-arrow {
	transform: translateX(calc(4px * var(--motion-ok)));
	color: var(--ink);
}

/* Image overlay transitions */
.case-study-card-image::after {
	transition: opacity var(--motion-duration-content) var(--motion-ease-content);
}

/* Progressive enhancement: staggered reveals — base state.
   Trigger JS not yet wired (open #133); these rules are dormant
   but harmless. */
.section {
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--motion-duration-page) var(--motion-ease-page),
	            transform var(--motion-duration-page) var(--motion-ease-page);
}

/* Stagger timing for grouped elements */
.offering-card:nth-child(1) { transition-delay: 0ms; }
.offering-card:nth-child(2) { transition-delay: 80ms; }
.offering-card:nth-child(3) { transition-delay: 160ms; }
.offering-card:nth-child(4) { transition-delay: 240ms; }

.case-study-card:nth-child(1) { transition-delay: 0ms; }
.case-study-card:nth-child(2) { transition-delay: 120ms; }
.case-study-card:nth-child(3) { transition-delay: 240ms; }

.flibbrati-card:nth-child(1) { transition-delay: 0ms; }
.flibbrati-card:nth-child(2) { transition-delay: 100ms; }
.flibbrati-card:nth-child(3) { transition-delay: 200ms; }

/* ============================================================
   §1 — HERO (.home-hook)
   Canonical: flibbr-design-mockup-final-homepage.html lines 307-448.
   Verbatim lift, no deviations.
   ============================================================ */

.home-hook {
	padding-block: 0;
	/* v0.5.99 (12 May 2026): was var(--s-9). Removes the doubled 96px
	   between sticky nav and masthead top rail, since the surrounding
	   .section now provides padding-block via the homepage scope below. */
}

/* v0.5.99: homepage-scoped section padding tightening.
   Was: base.css .section { padding-block: var(--s-9) } (96px) site-wide.
   Now: homepage tightens to --s-8 (64px) to standardise the section-pair
   gap at 128px. Other pages unaffected (Validation Room, Consulting,
   Brand AI, Bootcamps, archives, singles, Press, About, Contact, Privacy,
   Terms, Cookies — all retain --s-9). Per RJ direction "issue is visible
   only on homepage" — Option 2 of v170 ship plan. */
body.home .section {
	padding-block: var(--s-8);
}

/* v0.5.101 (12 May 2026): the hero section (always the first .section on
   the homepage per front-page.php) needs zero outer padding-block. The
   .home-hook inside already provides its own internal spacing via the
   hook-top-rail / hook-grid / hook-bottom-rail rhythm. Without this rule,
   the .section's 64px top padding stacks below the sticky nav and reopens
   the gap that .home-hook { padding-block: 0 } was meant to close.
   v0.5.103 (12 May 2026): zero on both sides was over-correction — the
   issue rail sat fused to the sticky-nav with no air. Restored breathing
   room: 48px above hero (--s-7), 64px below (--s-8). Other pages have
   96px above their hero via .page-header; homepage stays slightly tighter
   than the rest of the site as the handoff intent specified. */
body.home .section:first-of-type {
	padding-top: var(--s-7);
	padding-bottom: var(--s-8);
}

/* --- Top rail: issue marker, locations row above hook --- */

.hook-top-rail {
	display: flex; justify-content: space-between; align-items: center;
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--rule);
	margin-bottom: var(--s-7);
	flex-wrap: wrap;
	gap: var(--s-3);
}

.hook-top-rail-left,
.hook-top-rail-right {
	display: flex; align-items: center; gap: var(--s-4);
	flex-wrap: wrap;
}

.hook-issue-marker {
	font-family: var(--sans); font-weight: 600;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ink);
}

.hook-issue-tag {
	font-family: var(--sans); font-weight: 500;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--accent);
	padding: 6px 10px;
	border: 1px solid var(--accent);
}

.hook-locations {
	font-family: var(--sans); font-weight: 500;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ink);
}

.hook-locations span + span::before {
	content: "·"; color: var(--ink-quiet);
	margin: 0 8px;
}

/* .hook-date kept available for editorial swaps; no body usage in
   v0.5.0 markup but present in the canonical for future use. */
.hook-date {
	font-family: var(--sans); font-weight: 400;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink-quiet);
}

/* --- Main grid: hook headline + aside --- */

.hook-grid {
	display: grid;
	grid-template-columns: 2.4fr 1fr;
	gap: var(--s-7);
	align-items: end;
}

@media (max-width: 880px) {
	.hook-grid { grid-template-columns: 1fr; gap: var(--s-7); }
}

.hook-main h1 { margin: 0; }

.hook-aside {
	border-left: 1px solid var(--rule);
	padding-left: var(--s-5);
	display: flex; flex-direction: column;
	gap: var(--s-5);
}

@media (max-width: 880px) {
	.hook-aside {
		border-left: 0;
		border-top: 1px solid var(--rule);
		padding-left: 0;
		padding-top: var(--s-5);
	}
}

.hook-aside-block {
	display: flex; flex-direction: column;
	gap: var(--s-2);
}

.hook-aside-label {
	font-family: var(--sans); font-weight: 600;
	font-size: 10px; line-height: 1;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ink-quiet);
}

.hook-aside-headline {
	font-family: var(--serif); font-weight: 400;
	font-size: 17px; line-height: 1.3;
	color: var(--ink);
}
.hook-aside-headline em { font-style: italic; }

.hook-aside-meta {
	font-family: var(--sans); font-weight: 400;
	font-size: 12px; color: var(--ink-quiet);
	margin-top: var(--s-1);
}

.hook-aside-link {
	font-family: var(--sans); font-weight: 500;
	font-size: 13px; color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: var(--s-2);
}
.hook-aside-link::after {
	content: ""; display: inline-block;
	width: 0.85em; height: 0.85em;
	background-color: currentColor;
	-webkit-mask: var(--arrow-svg-right) no-repeat center / contain;
	        mask: var(--arrow-svg-right) no-repeat center / contain;
	flex: none;
}
.hook-aside-link:hover { gap: 10px; }

/* --- Supporting paragraph below the hook line --- */

.hook-supporting {
	margin-top: var(--s-6);
	max-width: 60ch;
	font-family: var(--serif); font-weight: 400;
	font-size: 21px; line-height: 1.5;
	color: var(--ink-soft);
}
.hook-supporting em { font-style: italic; }

/* --- Bottom rail: clientele line --- */

.hook-bottom-rail {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: var(--s-5);
	margin-top: var(--s-7);
	border-top: 1px solid var(--rule);
	gap: var(--s-3);
	flex-wrap: wrap;
}

.hook-clientele {
	font-family: var(--serif); font-weight: 400;
	font-size: 13px; line-height: 1.5;
	color: var(--ink-quiet);
	font-style: italic;
}

.hook-clientele strong {
	font-style: normal;
	font-family: var(--sans); font-weight: 600;
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink);
	margin-right: var(--s-2);
}

/* ============================================================
   §2 — WHAT WE DO (.offerings-grid + .offering-card)
   Canonical: flibbr-design-mockup-final-homepage.html lines 523-657.
   Verbatim lift, no deviations.
   2-column grid; 4 cards form a 2x2 layout. The 720px media query
   is an intermediate breakpoint kept per tokens.css convention
   ("intermediate 720px queries kept where they do real work").
   ============================================================ */

.offerings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin-top: var(--s-5);
	border-top: 2px solid var(--ink);
	border-left: 1px solid var(--rule);
}

@media (max-width: 720px) {
	.offerings-grid { grid-template-columns: 1fr; }
}

.offering-card {
	padding: var(--s-7) var(--s-7) var(--s-6);
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	display: grid;
	grid-template-columns: 88px 1fr;
	grid-template-rows: auto 1fr auto;
	gap: var(--s-4) var(--s-5);
	text-decoration: none; color: inherit;
	background: var(--paper);
	transition: background 200ms ease;
	min-height: 380px;
	position: relative;
}

@media (max-width: 720px) {
	.offering-card {
		padding: var(--s-6);
		grid-template-columns: 64px 1fr;
		min-height: auto;
	}
}

.offering-card:hover { background: var(--paper-warm); }

/* --- Numerical anchor — display-weight serif numeral --- */

.offering-numeral {
	grid-column: 1;
	grid-row: 1 / 3;
	font-family: var(--serif); font-weight: 300;
	font-size: clamp(56px, 6vw, 84px);
	line-height: 0.85; letter-spacing: -0.04em;
	color: var(--ink);
	align-self: start;
	padding-top: 4px;
}

/* --- Identity tag — sits under the numeral --- */

.offering-pair-tag {
	grid-column: 1;
	grid-row: 3;
	font-family: var(--sans); font-weight: 600;
	font-size: 10px; line-height: 1.2;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ink-quiet);
	align-self: end;
	border-top: 1px solid var(--rule);
	padding-top: var(--s-3);
	margin-right: var(--s-3);
}

/* --- Header column — name only --- */

.offering-header {
	grid-column: 2;
	grid-row: 1;
	display: flex; flex-direction: column;
	gap: var(--s-2);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--rule);
}

.offering-name {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(26px, 2.6vw, 32px);
	line-height: 1.12; letter-spacing: -0.012em;
	color: var(--ink);
}
.offering-name em { font-style: italic; }
.offering-name .registered {
	font-size: 0.55em;
	vertical-align: super;
	margin-left: 2px;
	color: var(--ink-quiet);
}

/* --- Body column — summary + audience --- */

.offering-body {
	grid-column: 2;
	grid-row: 2;
	display: flex; flex-direction: column;
	gap: var(--s-3);
	padding-top: var(--s-4);
}

.offering-summary {
	font-family: var(--serif); font-weight: 400;
	font-size: 17px; line-height: 1.55;
	color: var(--ink-soft);
}
.offering-summary em { font-style: italic; }

.offering-for {
	font-family: var(--serif); font-style: italic;
	font-size: 16px; line-height: 1.5;
	color: var(--ink-quiet);
	margin-top: auto;
	padding-top: var(--s-3);
	border-top: 1px dotted var(--rule);
}

/* --- Footer column — format chip + cta --- */

.offering-footer {
	grid-column: 2;
	grid-row: 3;
	display: flex; justify-content: space-between; align-items: baseline;
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule);
	gap: var(--s-3);
	flex-wrap: wrap;
}

.offering-meta-tag {
	font-family: var(--sans); font-weight: 400;
	font-size: 11px; line-height: 1.4;
	color: var(--ink-quiet);
	letter-spacing: 0.06em; text-transform: uppercase;
}

.offering-link {
	font-family: var(--sans); font-weight: 500;
	font-size: 13px; color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	display: inline-flex; align-items: center; gap: 6px;
	white-space: nowrap;
}
.offering-link::after {
	content: ""; display: inline-block;
	width: 0.85em; height: 0.85em;
	background-color: currentColor;
	-webkit-mask: var(--arrow-svg-right) no-repeat center / contain;
	        mask: var(--arrow-svg-right) no-repeat center / contain;
	flex: none;
}
.offering-card:hover .offering-link { gap: 10px; }

/* ============================================================
   §3 — LEAD PIECE (.lead-piece)
   Canonical: flibbr-design-mockup-final-homepage.html lines 459-521.
   Verbatim lift with one documented deviation:
   .lead-piece-image::before content suppressed. Canonical hardcoded
   "image · 2022 — Punjab shoot" as a debug placeholder; with no
   image and no editorial-credit field yet, it would render as a
   visibly stale label. Pseudo-element machinery preserved so a
   Phase D ACF `image_credit` field can populate it later.
   v62 register #124.
   ============================================================ */

.lead-piece {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 0;
	border: 1px solid var(--rule);
	margin-top: var(--s-5);
	background: var(--paper);
}

@media (max-width: 880px) {
	.lead-piece { grid-template-columns: 1fr; }
}

.lead-piece-image {
	background: var(--paper-warm);
	aspect-ratio: 16/10;
	position: relative;
	overflow: hidden;
}

/* Image-credit placeholder — reserved for Phase D ACF wiring. */
.lead-piece-image::before {
	content: "";
	position: absolute; bottom: var(--s-3); left: var(--s-3);
	font-family: var(--sans); font-size: 10px;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-quiet);
}

.lead-piece-image::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(20,20,19,.06) 0%, rgba(20,20,19,.02) 50%, rgba(20,20,19,.10) 100%);
}

.lead-piece-body {
	padding: var(--s-8) var(--s-7);
	display: flex; flex-direction: column;
	gap: var(--s-4);
	justify-content: space-between;
}

@media (max-width: 880px) {
	.lead-piece-body { padding: var(--s-6) var(--s-5); }
}

.lead-piece-top {
	display: flex; flex-direction: column; gap: var(--s-4);
}

.lead-piece-meta {
	display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4);
	align-items: center; padding-top: var(--s-4);
	border-top: 1px solid var(--rule-soft);
	margin-top: var(--s-5);
}

.lead-piece-meta > * + *::before {
	content: "·"; color: var(--ink-quiet); margin-right: var(--s-3);
}

.lead-piece-cta {
	display: inline-flex; align-items: center; gap: var(--s-2);
	margin-top: var(--s-3);
	color: var(--ink); text-decoration: none;
	font-family: var(--sans); font-weight: 500; font-size: 14px;
	letter-spacing: 0;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ink);
	align-self: flex-start;
	transition: gap 200ms ease;
}
.lead-piece-cta:hover { gap: var(--s-3); }
.lead-piece-cta::after {
	content: ""; display: inline-block;
	width: 0.85em; height: 0.85em;
	background-color: currentColor;
	-webkit-mask: var(--arrow-svg-right) no-repeat center / contain;
	        mask: var(--arrow-svg-right) no-repeat center / contain;
	flex: none;
}

/* ============================================================
   §4 — BOOTCAMP (.bootcamp-recap + .cohort-module)
   Canonical: flibbr-design-mockup-final-homepage.html lines 659-871.
   Verbatim lift with one documented deviation (#126):
   .recap-image-large::before and .recap-image-small::before content
   suppressed. Canonical hardcoded "image · Bengaluru · March 2026"
   (large) and "image" (small); both render as visibly stale labels
   without real images / image-credit ACF field. Pseudo-element
   machinery preserved for Phase D ACF wiring.

   Note on shared selectors: .cohort-link and .cohort-status (with
   .open / .invited / .soon modifiers) live in this Bootcamp block
   in the canonical but are reused across the Recent Case Studies,
   Flibbrati, and Dispatch archive links. C5/C7/C8 inherit these
   rules — no redefinition needed in those sections.
   ============================================================ */

/* --- Bootcamp recap: 6-col mosaic with 4 images + 1 quote tile --- */

/* v0.5.232 (19 May 2026) — Mosaic redesign (Option I′′).
   The hairline-band layout from v0.5.231 is retired entirely. The BTS
   section now renders as a 6-col × 2-row mosaic. Every tile (4 images
   + 1 quote tile) is locked to 3:2.

   Layout (desktop):
     Row 1: [anchor image — 3 cols] [quote tile — 3 cols]
     Row 2: [image — 2 cols] [image — 2 cols] [image — 2 cols]

   DOM order from PHP: anchor → quote tile → image2 → image3 → image4.
   CSS grid places them left-to-right top-to-bottom; col-spans do the
   asymmetric layout. */
.bootcamp-recap {
	display: block;
	margin-top: var(--s-5);
}

.recap-mosaic {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
}

.recap-mosaic-tile {
	grid-column: span 2;
	aspect-ratio: 3 / 2;
	background: var(--paper-warm);
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
}

.recap-mosaic-tile.is-anchor {
	grid-column: span 3;
}

/* Subtle tonal overlay across all image tiles — carried forward
   from v0.5.231 (then on .recap-image-large/-small ::after).
   Renders only when a background-image is present, to avoid
   tinting the empty paper-warm placeholders. */
.recap-mosaic-tile[style*="background-image"]::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(20,20,19,.05) 0%, rgba(20,20,19,.02) 50%, rgba(20,20,19,.10) 100%);
	pointer-events: none;
}

/* --- Quote tile: paper-warm cell with upright centered prose --- */

/* v0.5.232 — replaces the boxed/hairline-band quote treatments from
   earlier ships. The quote now occupies its own 3-col 3:2 tile inside
   the mosaic. Paper-warm fill, soft border. Prose is upright serif
   (no italic), centered both axes within the tile via flex. The inner
   block is intrinsically sized (max 52ch), so prose and attribution
   share the same left edge — both read left-aligned within a centered
   block. No author avatar, no curly-quote glyph. */
.recap-quote-tile {
	grid-column: span 3;
	aspect-ratio: 3 / 2;
	background: var(--paper-warm);
	border: 1px solid var(--rule-soft);
	padding: var(--s-6);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.recap-quote-inner {
	max-width: 52ch;
	text-align: left;
}

.recap-quote-tile .quote-text {
	font-family: var(--serif);
	font-weight: 400;
	font-style: normal;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ink);
	margin: 0;
	letter-spacing: -0.005em;
	text-align: left;
}
.recap-quote-tile .quote-text em { font-style: italic; }

.recap-quote-tile .quote-attribution {
	margin-top: var(--s-4);
	text-align: left;
	display: block;
}

.recap-quote-tile .quote-name {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 13px;
	color: var(--ink);
}

.recap-quote-tile .quote-role {
	font-family: var(--sans);
	font-weight: 400;
	font-size: 12px;
	color: var(--ink-quiet);
	margin-top: 2px;
}

/* v0.5.232 — mobile breakpoint for mosaic.
   At ≤880px the 6-col grid collapses to 2 cols. Anchor and quote tile
   each span both cols (full width). The three remaining smaller tiles
   sit in 1-col positions, naturally filling 2-up rows below. */
@media (max-width: 880px) {
	.recap-mosaic { grid-template-columns: repeat(2, 1fr); }
	.recap-mosaic-tile { grid-column: span 1; }
	.recap-mosaic-tile.is-anchor { grid-column: span 2; }
	.recap-quote-tile { grid-column: span 2; }
	.recap-quote-inner { max-width: 100%; }
}

/* --- Cohort module: upcoming cohort listings --- */

.cohort-module {
	margin-top: var(--s-7);
	padding-top: var(--s-7);
	border-top: 2px solid var(--ink);
}

.cohort-module-header {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}

.cohort-list {
	border-top: 1px solid var(--rule);
}

.cohort-row {
	display: grid;
	grid-template-columns: 80px 1fr auto auto;
	gap: var(--s-5);
	padding-block: var(--s-5);
	border-bottom: 1px solid var(--rule);
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: background 200ms ease;
}
.cohort-row:hover {
	background: var(--paper-warm);
}

@media (max-width: 720px) {
	.cohort-row {
		grid-template-columns: 1fr 1fr;
		gap: var(--s-3);
	}
}

.cohort-tier {
	font-family: var(--sans); font-weight: 600;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ink-quiet);
}

.cohort-detail {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.cohort-title {
	font-family: var(--serif); font-weight: 400;
	font-size: 19px; line-height: 1.3;
	color: var(--ink);
}

.cohort-when {
	font-family: var(--sans); font-weight: 400;
	font-size: 13px; color: var(--ink-quiet);
	letter-spacing: 0;
}

.cohort-meta {
	display: flex; flex-direction: column;
	gap: 2px;
	text-align: right;
	min-width: 90px;
}

@media (max-width: 720px) {
	.cohort-meta { text-align: left; }
}

.cohort-status {
	font-family: var(--sans); font-weight: 500;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.1em; text-transform: uppercase;
	padding: 8px 12px;
	border: 1px solid var(--ink);
	color: var(--ink);
	white-space: nowrap;
}
.cohort-status.open {
	background: var(--ink); color: var(--paper);
}
.cohort-status.invited {
	border-style: dashed;
	color: var(--ink-quiet);
	border-color: var(--ink-quiet);
}
.cohort-status.soon {
	background: transparent;
	color: var(--ink-quiet);
	border-color: var(--rule);
}

.cohort-footer {
	margin-top: var(--s-5);
	padding-top: var(--s-5);
	display: flex;
	justify-content: flex-end;
	gap: var(--s-5); /* v0.5.41 — separation between adjacent .cohort-link items (closes #225) */
}

/* Shared selector: also used by .case-studies-archive-link wrapper
   in C5, .flibbrati-archive-link wrapper in C7, and the Dispatch
   teaser archive footer in C8. Defined here per canonical ordering. */
.cohort-link {
	font-family: var(--sans); font-weight: 500;
	font-size: 14px; color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	display: inline-flex; align-items: center; gap: 6px;
}
.cohort-link::after {
	content: ""; display: inline-block;
	width: 0.85em; height: 0.85em;
	background-color: currentColor;
	-webkit-mask: var(--arrow-svg-right) no-repeat center / contain;
	        mask: var(--arrow-svg-right) no-repeat center / contain;
	flex: none;
}
.cohort-link:hover { gap: 10px; }

/* ============================================================
   §5 — RECENT CASE STUDIES (.case-study-grid + .case-study-card)
   Canonical: flibbr-design-mockup-final-homepage.html lines 873-957.
   Verbatim lift with one documented deviation (#128):
   .case-study-card-image::before content suppressed (canonical hardcoded
   "image" placeholder); pseudo-element machinery preserved for
   Phase D ACF wiring.

   Asymmetric scale: .is-lead (1.62fr column, 16:10 image,
   clamp(26-36px) headline) and .is-supporting (1fr column, 4:3
   image, clamp(22-26px) headline). BEM rename completed in v0.5.11
   (#24 closed): card class names were renamed .work-* → .case-study-*
   to align with the canonical v3 RELABEL note (lines 2031-2040)
   that earlier renamed the section "Selected Work" → "Recent case
   studies".

   Plus: .case-studies-archive-link wrapper (#120). The canonical
   wrapped its archive link in an inline-style flex-end div; the
   wrapper class was named in section-case-studies.php v0.5.0 to
   keep the markup clean. CSS equivalent shipped here. (Note: the
   archive-link wrapper retains the plural "case-studies-" prefix
   because it points to the archive index, not to a single card.)
   ============================================================ */

.case-study-grid {
	display: grid;
	grid-template-columns: 1.62fr 1fr;
	gap: var(--s-7);
	margin-top: var(--s-5);
	align-items: start;
}

@media (max-width: 880px) {
	.case-study-grid { grid-template-columns: 1fr; gap: var(--s-7); }
}

.case-study-card {
	display: flex; flex-direction: column;
	gap: var(--s-4);
	text-decoration: none; color: inherit;
	/* v10.1 (29 Apr 2026): horizontal + bottom padding so the hover
	   box-shadow has breathing room around the content.
	   Lead image extends edge-to-edge below. */
	padding: 0 var(--s-4) var(--s-4);
	border-radius: 4px;
}

.case-study-card-image {
	background: var(--paper-warm);
	position: relative;
	overflow: hidden;
	/* v10.1: extend to the card's outer edge so the lead image
	   stays full-width when the card gains horizontal padding. */
	margin-inline: calc(var(--s-4) * -1);
}

.case-study-card.is-lead .case-study-card-image {
	aspect-ratio: 16/10;
}
.case-study-card.is-supporting .case-study-card-image {
	aspect-ratio: 4/3;
}

.case-study-card-image::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(20,20,19,.05) 0%, rgba(20,20,19,.01) 50%, rgba(20,20,19,.09) 100%);
	transition: opacity 200ms ease;
}
.case-study-card:hover .case-study-card-image::after { opacity: 0.6; }

/* Image-credit placeholder — reserved for Phase D ACF wiring (#128). */
.case-study-card-image::before {
	content: "";
	position: absolute; bottom: var(--s-3); left: var(--s-3);
	font-family: var(--sans); font-size: 10px;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-quiet);
	z-index: 1;
}

.case-study-card-content {
	display: flex; flex-direction: column;
	gap: var(--s-3);
}

/* Kicker uses the standard .t-kicker class — same as everywhere else */

.case-study-card .case-study-headline {
	margin: 0;
	font-family: var(--serif); font-weight: 400;
	color: var(--ink);
	letter-spacing: -0.008em;
}
.case-study-card.is-lead .case-study-headline {
	font-size: clamp(26px, 2.8vw, 36px);
	line-height: 1.18;
}
.case-study-card.is-supporting .case-study-headline {
	font-size: clamp(22px, 2.2vw, 26px);
	line-height: 1.22;
}
.case-study-card .case-study-headline em { font-style: italic; }

.case-study-card .case-study-meta {
	display: flex; flex-wrap: wrap; gap: var(--s-3);
	padding-top: var(--s-3);
	border-top: 1px solid var(--rule-soft);
	margin-top: var(--s-2);
}
.case-study-card .case-study-meta > * + *::before {
	content: "·"; color: var(--ink-quiet); margin-right: var(--s-3);
}

/* Archive-link wrapper (#120). Equivalent of the canonical's
   inline-style "<div style='margin-top: var(--s-6); display: flex;
   justify-content: flex-end;'>" — promoted to a named class. */
.case-studies-archive-link {
	margin-top: var(--s-6);
	display: flex;
	justify-content: flex-end;
}

/* ============================================================
   §6 — RECOGNITION
   The .recognition + .recognition-item family was lifted to
   base.css at v0.5.48 (op-learning #16, fifth application) when
   archive-work.php became the second consumer.
   This surface continues to consume the same family unchanged.
   ============================================================ */

/* ============================================================
   §7 — FLIBBRATI (.flibbrati-grid + .flibbrati-card)
   Canonical: flibbr-design-mockup-final-homepage.html lines 1064-1112.
   Verbatim lift, no deviations.

   3-col desktop grid → 2-col at ≤880px → 1-col at ≤540px.
   Cards are typographic (no border, no fill at rest); hover lift
   from §0 prelude provides the box-shadow bloom.

   .flibbrati-portrait: 4:5 aspect-ratio. Markup is currently
   <div class="flibbrati-portrait"> with a stand-in placeholder
   "Flibbrati portrait" overlay rendered via the
   `div.flibbrati-portrait::after` selector. When real Stage 5
   portraits land at build time (open #23), markup becomes <img>
   and the div-only ::after selector stops matching — overlay
   drops out automatically. This is intentional canonical
   behaviour (NOT a deviation pattern like #124/#126/#128).

   Plus: .flibbrati-archive-link wrapper (#120 second instance).
   ============================================================ */

.flibbrati-grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--s-6); margin-top: var(--s-5);
}

@media (max-width: 880px) {
	.flibbrati-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
	.flibbrati-grid { grid-template-columns: 1fr; }
}

.flibbrati-card {
	display: flex; flex-direction: column; gap: var(--s-4);
	/* v10.1 (29 Apr 2026): horizontal padding so the hover box-shadow
	   blooms around a content area with breathing room.
	   Resting state still reads as "no box" — there is no border, no fill. */
	padding: 0 var(--s-4) var(--s-3);
	border-radius: 4px;
}

.flibbrati-portrait {
	aspect-ratio: 4/5; border-radius: 4px;
	height: auto; object-fit: cover;
	object-position: center top; display: block;
	/* v10.1: extend to the card's outer edge so the 4:5 portrait
	   doesn't shrink when the card gains horizontal padding. */
	margin-inline: calc(var(--s-4) * -1);
	width: calc(100% + var(--s-4) * 2);
	/* Stage 5: warm monochrome treatment applied to source images —
	   7% paper tint, 4% vignette, enhanced contrast, 4:5 aspect ratio. */
	/* v29-aligned (1 May 2026): Step 4 image strip. Inline base64 portraits
	   removed; replaced with <div> stand-ins. Background + border + ::after
	   label mirror About's .bench-portrait pattern so the stand-in reads
	   as deliberate. When real Stage 5 portraits land at build time
	   (open #23), <img> markup returns and the div-only ::after label
	   drops out automatically (selector scoped to div.flibbrati-portrait). */
	background: var(--paper-warm);
	border: 1px solid var(--rule);
	overflow: hidden;
	position: relative;
}

div.flibbrati-portrait::after {
	content: "Flibbrati portrait";
	position: absolute;
	inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--sans); font-size: 10px;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--ink-quiet);
	text-align: center;
	padding: var(--s-3);
}

.flibbrati-card .role {
	font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-quiet);
}

/* Archive-link wrapper (#120). Mirrors .case-studies-archive-link. */
.flibbrati-archive-link {
	margin-top: var(--s-6);
	display: flex;
	justify-content: flex-end;
}

/* ============================================================
   §8 — SHARED .author-thumb CHASSIS
   v0.5.165 (16 May 2026): the §8 Dispatch Teaser grid (.dispatch-teaser,
   .dispatch-teaser-card, .teaser-image, .teaser-extract, .teaser-headline,
   .teaser-byline, .dispatch-teaser-footer) was deleted as dead code.
   The standalone Dispatch teaser section was removed from the homepage
   during the v0.5.99 / v169 redesign — Dispatch presence moved into
   Happening Now Card 1 (front-page.php header comment lines 21-22).
   The render helper (flibbr_render_dispatch_card in inc/helpers.php)
   was retained but never called after v169; removed in v0.5.165.

   What remains here is the shared .author-thumb chassis. .author-thumb is
   the 44px initial-block consumed by §4 (bootcamp recap attribution row,
   with inline 36px override). Originally placed in §8 because §8 was
   the first consumer; remains here per the #136 minimal-churn principle
   until a non-home consumer (e.g. single-article in Phase D+) makes
   the chassis-relocation worthwhile.

   The .author-thumb.{rj|sk|hg|gv} tints are retained for future
   author-overlay use. Today only .author-thumb.sk is active (the
   bootcamp recap row uses it for the testimonial attribution).
   ============================================================ */

/* --- Shared .author-thumb base (used by §4 recap row) --- */

.author-thumb {
	width: 44px; height: 44px;
	background: var(--paper-warm);
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--sans); font-weight: 600; font-size: 13px;
	color: var(--ink-quiet);
	letter-spacing: 0.02em;
}

/* Author-specific tints. Provisional placeholders until Stage 5
   portrait images replace the initial-blocks (open #23).
   v0.5.99 (12 May 2026): gradient stops converted from warm beige
   to cool neutral to match the palette swap. Subtle differentiation
   preserved so the four cards remain visually distinct. */
.author-thumb.rj { background: linear-gradient(135deg, #e8e8e6 0%, #d6d6d4 100%); color: var(--ink-soft); }
.author-thumb.sk { background: linear-gradient(135deg, #d1d1d1 0%, #bcbcbc 100%); color: var(--ink-soft); }
.author-thumb.hg { background: linear-gradient(135deg, #ededed 0%, #dadada 100%); color: var(--ink-soft); }
.author-thumb.gv { background: linear-gradient(135deg, #d6d6d4 0%, #c0c0be 100%); color: var(--ink-soft); }

/* ============================================================
   §9 — CONTACT (multi-path enquiry)
   Canonical: flibbr-design-mockup-final-homepage.html lines 1257-1326.
   Lifted at C9 (v0.5.9, #137).

   Markup is in template-parts/home/section-contact.php (v0.5.0
   scaffold), byte-identical to canonical lines 2261-2315 in
   structure. No PHP changes in this version.

   Pre-wired by §0 motion prelude (v0.5.7):
     - .contact-path is in the card-lift selector list (line 73)
     - .contact-path .path-arrow horizontal motion (lines 92-100)

   CANONICAL INCONSISTENCY (open #138, NOTE only):
   The canonical declares two transitions for .contact-path:
     - line 132 (§0 prelude): transition: transform, box-shadow, background
     - line 1285 (§9 block):  transition: padding 200ms ease
   Per CSS cascade, the later declaration wins for the `transition`
   property — so on the canonical, .contact-path animates only padding,
   and the prelude's transform/shadow lift is silently dropped for
   this selector (other 5 selectors in §0 are unaffected). We mirror
   this verbatim for canonical fidelity. The :hover padding-left shift
   is the visible interaction; the lift is dormant. Reconcile canonical-
   side in a future cleanup pass.
   ============================================================ */

.contact-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--s-7);
	margin-top: var(--s-5);
}
@media (max-width: 880px) {
	.contact-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

.contact-statement {
	font-family: var(--serif); font-weight: 300;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.18; letter-spacing: -0.01em;
	color: var(--ink);
	max-width: 22ch;
}
.contact-statement em { font-style: italic; }

.contact-paths {
	display: flex; flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--rule);
}

.contact-path {
	display: flex; flex-direction: column;
	gap: var(--s-2);
	padding-block: var(--s-4);
	border-bottom: 1px solid var(--rule);
	text-decoration: none; color: inherit;
	transition: padding 200ms ease;
}
.contact-path:hover {
	padding-left: var(--s-3);
}

.contact-path .path-label {
	font-family: var(--sans); font-weight: 500;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ink-quiet);
}

.contact-path .path-line {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: var(--s-3);
}

.contact-path .path-name {
	font-family: var(--serif); font-weight: 400;
	font-size: 19px; line-height: 1.3;
	color: var(--ink);
}
.contact-path .path-name em { font-style: italic; }

.contact-path .path-arrow {
	font-family: var(--sans); font-size: 16px;
	color: var(--ink-quiet);
	/* transform/color transition wired by §0 motion prelude (lines 92-100) */
}

.contact-locations {
	margin-top: var(--s-7);
	padding-top: var(--s-5);
	border-top: 2px solid var(--ink);
	display: flex;
	gap: var(--s-7);
	flex-wrap: wrap;
}
.contact-location {
	font-family: var(--sans); font-weight: 500;
	font-size: 12px; line-height: 1;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink);
}

/* G.3b — Home CTA tap-targets */
@media (max-width: 880px) {
  .cohort-link,
  .hook-aside-link,
  .lead-piece-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   §10 — v0.5.99 v4 COMPONENT PATTERNS
   v169 redesign (12 May 2026): Happening Now grid, Case Studies v2
   image-led cards, Work Gallery 6-tile asymmetric grid, Flibbrati
   v2 6-up cards, sticky CTA, v2 + offering eyebrows.

   Lifted verbatim from locked mockup
   flibbr-homepage-mockup-v170-v12.html (lines 1726-1749, 1796-1803,
   1862-1924, 1926-2008, 2010-2052, 2055-2145, 2148-2178).

   Token additions in tokens.css (v0.5.99):
     --rust: #b8431f (secondary editorial-eyebrow accent)

   Palette dependency: rules below assume the v0.5.99 cool-neutral
   palette (--paper=#ffffff, --paper-warm=#f5f5f5, --rule=#d1d1d1,
   --rule-soft=#ededed). The .happening-card and .case-card-v2 hover
   states use a literal #ededee (one notch darker than --paper-warm
   in the new palette) and a literal #b8b8b8 (one notch darker than
   --rule) for crisp state-change visibility — mockup-locked values.
   ============================================================ */

/* Eyebrow accents (v2-eyebrow used inside new section headers,
   offering-eyebrow used inside the existing 4-up offering cards) */
.v2-eyebrow {
	font: 600 11px/1 var(--sans);
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--rust);
	margin-bottom: var(--s-3);
}
.offering-eyebrow {
	font: 600 10px/1 var(--sans);
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--rust);
	margin-top: var(--s-5);
	margin-bottom: var(--s-2);
}

/* Shared v4-card border state (mockup-locked: pure-white bg needs --rule
   not --rule-soft for resting edge clarity; hover one notch darker). */
.happening-card { border-color: var(--rule); }
.case-card-v2   { border-color: var(--rule); }
.fl-card-v2     { border-color: var(--rule); }
.happening-card:hover { border-color: #b8b8b8; }
.case-card-v2:hover   { border-color: #b8b8b8; }
.fl-card-v2:hover     { border-color: #b8b8b8; }
.happening-card,
.case-card-v2,
.work-tile {
	text-decoration: none;
	color: inherit;
}

/* ── HAPPENING NOW — 4-card grid ────────────────────────────── */
.happening-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
	margin-top: var(--s-7);
}
@media (max-width: 1024px) { .happening-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .happening-grid { grid-template-columns: 1fr; } }
.happening-card {
	background: var(--paper-warm);
	border: 1px solid var(--rule-soft);
	padding: 28px 24px;
	display: flex; flex-direction: column;
	min-height: 420px;
	cursor: pointer;
	transition: background var(--motion-duration-content), border-color var(--motion-duration-content);
}
.happening-card:hover { background: #ededee; border-color: var(--rule); }
.happening-thumb {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #ededee;
	background-size: cover; background-position: center;
	margin-bottom: 20px;
	overflow: hidden;
}
.happening-tag {
	font: 600 10px/1 var(--sans);
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--rust);
	margin-bottom: 12px;
}
.happening-title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 12px;
	color: var(--ink);
}
.happening-title em { font-style: italic; }
.happening-body {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-quiet);
	margin: 0 0 auto;
	padding-bottom: 20px;
}
.happening-link {
	font: 500 10px/1 var(--sans);
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ink-quiet);
	border-top: 1px solid var(--rule-soft);
	padding-top: 14px;
	transition: color var(--motion-duration-ui) var(--motion-ease-ui);
}
.happening-link::after {
	content: ""; display: inline-block;
	width: 0.85em; height: 0.85em;
	margin-left: 0.25em;
	background-color: currentColor;
	-webkit-mask: var(--arrow-svg-right) no-repeat center / contain;
	        mask: var(--arrow-svg-right) no-repeat center / contain;
	flex: none;
}
.happening-card:hover .happening-link { color: var(--rust); }

/* ── CASE STUDIES v2 — 2-up image-led cards ─────────────────── */
.cases-grid-v2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: var(--s-7);
}
@media (max-width: 880px) { .cases-grid-v2 { grid-template-columns: 1fr; } }
.case-card-v2 {
	background: var(--paper);
	border: 1px solid var(--rule-soft);
	display: flex; flex-direction: column;
	cursor: pointer;
	transition: border-color var(--motion-duration-content) var(--motion-ease-content);
	overflow: hidden;
}
.case-card-v2:hover { border-color: var(--rule); }
.case-thumb-wrap {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ink);
}
.case-thumb {
	width: 100%; height: 100%;
	background-size: cover; background-position: center;
	filter: contrast(1.04) saturate(0.93);
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-card-v2:hover .case-thumb { transform: scale(1.03); }
.case-thumb-fallback {
	display: flex; align-items: center; justify-content: center;
	color: var(--paper);
}
.case-thumb-wordmark {
	font-family: var(--sans);
	font-size: 32px; font-weight: 600;
	letter-spacing: -0.02em;
}
.case-thumb-wordmark sup {
	font-size: 0.4em; vertical-align: super; margin-left: 2px;
}
.case-content {
	padding: 32px 28px;
	display: flex; flex-direction: column; flex: 1;
}
.case-tag {
	font: 600 10px/1 var(--sans);
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--rust);
	margin-bottom: 16px;
}
.case-title-v2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.12;
	letter-spacing: -0.018em;
	margin: 0 0 16px;
	color: var(--ink);
}
.case-meta-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--rule-soft);
}
.case-meta-col h5 {
	font: 600 10px/1 var(--sans);
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--ink-quiet);
	margin: 0 0 4px;
}
.case-meta-col p {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink);
	margin: 0;
}

/* ── WORK GALLERY — 6-tile asymmetric grid ──────────────────── */
.work-gallery {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--s-5);
	margin-top: var(--s-7);
}
.work-tile {
	grid-column: span 2;
	aspect-ratio: 16/10;
	background: var(--ink);
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
.work-tile.feature { grid-column: span 4; }
.work-tile-bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.work-tile:hover .work-tile-bg { transform: scale(1.04); }
.work-tile-meta {
	position: absolute; inset: auto 0 0 0;
	padding: var(--s-5);
	background: linear-gradient(to top, rgba(20,20,19,0.92), transparent 80%);
	color: var(--paper);
}
.work-tile-client {
	font: 600 10px/1 var(--sans);
	letter-spacing: 0.22em; text-transform: uppercase;
	opacity: 0.78;
	margin-bottom: var(--s-2);
}
.work-tile-title {
	font-family: var(--serif);
	font-style: italic;
	font-size: 16px; line-height: 1.3;
}
@media (max-width: 880px) {
	.work-gallery { grid-template-columns: 1fr 1fr; }
	.work-tile, .work-tile.feature { grid-column: span 1; }
}

/* ── FLIBBRATI v2 — 6-up reference-aligned cards ────────────── */
.flibbrati-grid-v2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: var(--s-7);
}
@media (max-width: 880px) { .flibbrati-grid-v2 { grid-template-columns: 1fr; gap: 20px; } }
.fl-card-v2 {
	background: var(--paper-warm);
	border: 1px solid var(--rule-soft);
	display: flex; flex-direction: column;
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--motion-duration-content);
	text-decoration: none;
	color: inherit;
}
.fl-card-v2:hover { border-color: var(--rule); }
.fl-portrait {
	width: 100%;
	aspect-ratio: 3 / 2;
	background-color: #ededee;
	background-size: cover;
	background-position: center center;
	filter: grayscale(0.12) contrast(1.03);
	transition: filter var(--motion-duration-ui) var(--motion-ease-ui);
}
.fl-card-v2:hover .fl-portrait { filter: grayscale(0) contrast(1.06); }
.fl-content {
	padding: 24px;
	display: flex; flex-direction: column; flex: 1;
}
.fl-name {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -0.015em;
	margin: 0 0 4px;
	color: var(--ink);
}
.fl-role {
	font: 600 10px/1 var(--sans);
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--rust);
	margin-bottom: 14px;
}
.fl-bio {
	font-family: var(--serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-quiet);
	margin: 0 0 18px;
}
.fl-tag-label {
	font: 600 9px/1 var(--sans);
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--ink-quiet);
	margin-bottom: 8px;
	margin-top: auto;
}
.fl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-tags span {
	font: 600 9px/1 var(--sans);
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink);
	border: 1px solid var(--rule);
	padding: 4px 8px;
	background: var(--paper);
}
.flibbrati-footer-v2 {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--rule);
	display: flex; justify-content: space-between; align-items: baseline;
	flex-wrap: wrap; gap: 16px;
}
.flibbrati-footer-v2 .count {
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	color: var(--ink-quiet);
}
.flibbrati-footer-v2 .full-roster {
	font: 500 11px/1 var(--sans);
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 3px;
	transition: color var(--motion-duration-ui), border-color var(--motion-duration-ui);
}
.flibbrati-footer-v2 .full-roster:hover { color: var(--rust); border-color: var(--rust); }

/* v0.5.103 (12 May 2026): .sticky-cta block removed. Pattern was wrong
   (floating bottom-right pill with arrow); the actual "Validation Room
   sticky CTA" referenced in handoff is an in-flow .validation-cta-pill
   at the bottom of that page, not a fixed-position element. Per RJ
   direction "if sticky CTA doesn't work on homepage, drop it." Homepage
   relies on the Contact section + 4-up offering cards for navigation. */