/* ==========================================================================
   oa-hero-art-v2.css — Batch 2 (31 May 2026)
   Flat-hero thematic illustrations (Journal + Tools), consistent flat-hero
   heights, and the adventure-map SEO/AEO support section. Loaded site-wide,
   after oa-elevation (priority 101).

   v1 -> v2 FIX: the `.blog-hero > *` / `.post-hero.tools-hero > *` rule (used
   to keep the text above the illustration) was ALSO matching the .hero-art SVG
   and, on Tools, its 2-class specificity overrode .hero-art{position:absolute},
   dropping the compass into normal flow at the top of the hero. Excluded
   .hero-art from that rule with :not().
   ========================================================================== */

/* ---- Flat heroes (Journal /blog/, Tools /tools/): give them the same
        presence as the photo heroes, vertically centre the text, and create a
        positioning context for the illustration. ---- */
.blog-hero,
.post-hero.tools-hero {
	position: relative;
	min-height: 52vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}
.blog-hero > *:not(.hero-art),
.post-hero.tools-hero > *:not(.hero-art) { position: relative; z-index: 1; }

/* ---- Thematic line illustration in the otherwise-empty hero space.
        Faint ink line-art (currentColor) with a single yellow accent that
        keeps full strength via inline stroke/fill on the accent path. ---- */
.hero-art {
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translateY(-50%);
	width: clamp(150px, 22vw, 300px);
	height: auto;
	color: rgba(19, 19, 19, 0.18);
	z-index: 0;
	pointer-events: none;
}
@media (max-width: 900px) {
	.hero-art { display: none; }
	.blog-hero,
	.post-hero.tools-hero { min-height: 0; }
}

/* ---- Adventure-map SEO/AEO support section (below the map) ---- */
.ukmap-seo {
	background: var(--cream);
	padding: 72px 0 88px;
	border-top: 1px solid var(--rule, rgba(19, 19, 19, 0.10));
}
.ukmap-seo h2 {
	font-family: var(--serif, 'Bricolage Grotesque'), serif;
	font-weight: 700;
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 14px 0 28px;
	color: var(--ink);
}
.ukmap-seo h2 em { font-style: italic; color: var(--yellow); }
.ukmap-seo-body { max-width: 70ch; }
.ukmap-seo-body p {
	font-size: 17px;
	line-height: 1.62;
	color: var(--ink-2, #3a3a3a);
	margin: 0 0 16px;
}
.ukmap-seo-links { font-size: 16px; }
.ukmap-seo-links a {
	color: var(--blue);
	border-bottom: 1px solid rgba(46, 123, 214, 0.4);
}

.ukmap-faq { margin-top: 48px; max-width: 820px; }
.ukmap-faq-heading {
	font-family: var(--mono, 'JetBrains Mono'), monospace;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 6px;
}
.ukmap-faq .faq-list { display: block; }
.ukmap-faq details.faq-row { border-top: 1px solid var(--rule, rgba(19, 19, 19, 0.12)); }
.ukmap-faq details.faq-row:last-child { border-bottom: 1px solid var(--rule, rgba(19, 19, 19, 0.12)); }
.ukmap-faq details.faq-row > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 20px 2px;
	font-family: var(--serif, 'Bricolage Grotesque'), serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	color: var(--ink);
}
.ukmap-faq details.faq-row > summary::-webkit-details-marker { display: none; }
.ukmap-faq details.faq-row > summary:hover { color: var(--muted); }
.ukmap-faq details.faq-row > summary::after {
	content: "+";
	flex: none;
	font-family: var(--sans, 'Manrope'), sans-serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 1;
	color: var(--ink);
}
.ukmap-faq details.faq-row[open] > summary::after { content: "\2212"; }
.ukmap-faq details.faq-row .faq-a { padding: 0 2px 22px; }
.ukmap-faq details.faq-row .faq-a p {
	margin: 0;
	font-family: var(--sans, 'Manrope'), sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-2, #3a3a3a);
	max-width: 72ch;
}