/* ============================================================
   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,
.dispatch-teaser-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, .dispatch-teaser-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, .teaser-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: image grid + testimony pull quote --- */

.bootcamp-recap {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--s-6);
	margin-top: var(--s-5);
	align-items: stretch;
}

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

.recap-images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1.2fr 1fr;
	gap: var(--s-3);
	min-height: 380px;
}

.recap-image-large {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
	background: var(--paper-warm);
	position: relative;
	overflow: hidden;
}

.recap-image-small {
	grid-row: 2 / 3;
	background: var(--paper-warm);
	position: relative;
	overflow: hidden;
}

.recap-image-small.alt {
	background: linear-gradient(135deg, #ede8db 0%, #ddd3bf 100%);
}

/* Image-credit placeholders — reserved for Phase D ACF wiring (#126). */
.recap-image-large::before,
.recap-image-small::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;
}

.recap-image-large::after,
.recap-image-small::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%);
}

/* --- Pull quote with display-register curly quotes --- */

.recap-quote {
	margin: 0;
	padding: var(--s-7) var(--s-6);
	background: var(--paper);
	border: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 380px;
}

@media (max-width: 880px) {
	.recap-quote { min-height: auto; }
}

/* Quote marks delivered via CSS pseudo-elements so opening and
   closing are paired automatically (no manual markup). Big-block
   display register: 80px serif italic, ink-quiet at 0.5 opacity,
   each on its own line above/below the text. */
.recap-quote .quote-text::before,
.recap-quote .quote-text::after {
	display: block;
	font-family: var(--serif); font-style: italic;
	font-size: 80px; line-height: 0.6;
	color: var(--ink-quiet); opacity: 0.5;
}

.recap-quote .quote-text::before {
	content: "\201C";  /* opening curly double-quote */
	margin: 0 0 var(--s-3) 0;
}

.recap-quote .quote-text::after {
	content: "\201D";  /* closing curly double-quote */
	margin: var(--s-3) 0 0 0;
}

.quote-text {
	font-family: var(--serif); font-weight: 400;
	font-size: 22px; line-height: 1.4;
	color: var(--ink); margin: 0;
	letter-spacing: -0.005em;
}
.quote-text em { font-style: italic; }

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

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

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

/* --- 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 — DISPATCH TEASER (.dispatch-teaser + .dispatch-teaser-card)
   Canonical: flibbr-design-mockup-final-homepage.html lines 1131-1252,
   plus shared .author-thumb base (lines 998-1014).

   Two card variants:
   - Image variant: .teaser-image (4:3 aspect, paper-warm placeholder
     with "image" ::before label and gradient ::after overlay — overlay
     animation already declared in §0 prelude alongside .case-study-card-image).
   - Extract variant: .teaser-extract (4:3, italic serif pull-extract,
     paper-warm bg, --rule border, decorative " quote mark, "extract"
     ::before label).

   Shared chassis:
   - .author-thumb (44px square initial-block) — shared by single-article
     bylines (planned, Phase D+), bootcamp recap attribution row (C4,
     with inline 36px override), and dispatch teaser bylines (overridden
     to 32px). Currently lives in home.css §8 by convention because §8
     was its first consumer; C8 retrofitted the base spec when it was
     discovered the canonical was under-specified.

     #136 resolution (v0.5.12): defer chassis-relocation until a
     non-home consumer surface ships. Today's two consumers (Bootcamp
     recap row §4, Dispatch teaser §8) are both home partials. The
     case for moving to header-footer.css or a new chassis.css only
     becomes compelling when single-article (Phase D+) becomes the
     third consumer — at which point the relocation should also pull
     the doc-block out of §8 and into the new home. Until then,
     keeping .author-thumb in §8 minimises file-count churn and
     preserves the existing import order.

   3-col desktop → 1-col at ≤880px (single breakpoint, larger than
   .flibbrati-grid's two-step).

   Hover: .dispatch-teaser-card lift comes from §0 prelude. The
   per-section .teaser-headline color shift on :hover stays here
   because it's headline-specific, not card-shell-shared.

   Plus: .dispatch-teaser-footer wrapper (#120 third instance —
   mirrors .case-studies-archive-link / .flibbrati-archive-link with
   the same flex right-align pattern, but adds margin-top + padding-top
   + border-top per the canonical).
   ============================================================ */

/* --- Shared .author-thumb base (used by C4 recap row + this section) --- */

.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); }

/* --- Dispatch teaser grid --- */

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

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

.dispatch-teaser-card {
	display: flex; flex-direction: column;
	gap: var(--s-3);
	text-decoration: none; color: inherit;
	/* Horizontal + bottom padding gives the §0 hover box-shadow
	   breathing room. Lead media (image / extract) extends edge-
	   to-edge below via negative margin-inline. */
	padding: 0 var(--s-4) var(--s-4);
	border-radius: 4px;
}

/* --- Image variant: for posts with a real lead image --- */

.teaser-image {
	aspect-ratio: 4/3;
	background: var(--paper-warm);
	position: relative;
	overflow: hidden;
	margin-bottom: var(--s-3);
	margin-inline: calc(var(--s-4) * -1);
}

.teaser-image::before {
	content: "image";
	position: absolute; bottom: var(--s-2); 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;
}

.teaser-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%);
	/* opacity transition declared in §0 prelude alongside .case-study-card-image::after */
}

/* --- Extract variant: for text-heavy posts without a lead image --- */

.teaser-extract {
	aspect-ratio: 4/3;
	background: var(--paper-warm);
	position: relative;
	margin-bottom: var(--s-3);
	padding: var(--s-5) var(--s-5);
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--rule);
	margin-inline: calc(var(--s-4) * -1);
}

.teaser-extract-text {
	font-family: var(--serif); font-style: italic; font-weight: 400;
	font-size: 19px; line-height: 1.4;
	color: var(--ink-soft);
	letter-spacing: -0.005em;
	text-align: left;
	max-width: 100%;
}

.teaser-extract::before {
	content: "extract";
	position: absolute; bottom: var(--s-2); left: var(--s-3);
	font-family: var(--sans); font-size: 10px;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-quiet);
}

.teaser-extract-quote {
	font-family: var(--serif); font-style: italic;
	font-size: 36px; line-height: 0.8;
	color: var(--ink-quiet); opacity: 0.5;
	position: absolute; top: var(--s-3); left: var(--s-4);
}

/* --- Card body: kicker row, headline, byline --- */

.dispatch-teaser-card .teaser-kicker-row {
	display: flex; justify-content: space-between; align-items: baseline;
	padding-top: var(--s-2);
	border-top: 1px solid var(--rule);
}

.dispatch-teaser-card .teaser-headline {
	font-family: var(--serif); font-weight: 400;
	font-size: 22px; line-height: 1.25;
	color: var(--ink);
	transition: color 200ms ease;
}

.dispatch-teaser-card .teaser-headline em { font-style: italic; }

.dispatch-teaser-card:hover .teaser-headline { color: var(--accent); }

.dispatch-teaser-card .teaser-byline {
	display: flex; align-items: center; gap: var(--s-3);
	margin-top: var(--s-2);
	padding-top: var(--s-3);
	border-top: 1px solid var(--rule-soft);
}

.dispatch-teaser-card .teaser-byline .author-thumb {
	width: 32px; height: 32px; font-size: 11px;
}

.dispatch-teaser-card .teaser-byline-info {
	display: flex; flex-direction: column;
	gap: 2px;
}

.dispatch-teaser-card .teaser-byline-info .name {
	font-family: var(--sans); font-weight: 500;
	font-size: 13px; color: var(--ink);
}

.dispatch-teaser-card .teaser-byline-info .date {
	font-family: var(--sans); font-weight: 400;
	font-size: 12px; color: var(--ink-quiet);
}

/* --- Archive-link wrapper (#120 third instance) --- */

.dispatch-teaser-footer {
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--rule);
	display: flex;
	justify-content: flex-end;
}

/* ============================================================
   §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. */