/* ──────────────────────────────────────────────────────────────────────────
   Diamante Bridge theme — main stylesheet
   Brand tokens ported from the staging child theme (see designs changelog):
   Teal #00BAC6 · Amber #FCB200 · Orange #FF8300 · Cyan #00F0FF ·
   Lime #A3DA0C · Green #6DAA2C · Dark teal #00848C
   Fonts (v2): Baloo 2 (all headlines/headings/UI) · Nunito Sans (body) · Kalam (accents only)
   ────────────────────────────────────────────────────────────────────────── */

:root {
	/* Brand palette */
	--dbt-teal:        #00BAC6;
	--dbt-teal-dark:   #00848C;
	--dbt-amber:       #FCB200;
	--dbt-orange:      #FF8300;
	--dbt-cyan:        #00F0FF;
	--dbt-lime:        #A3DA0C;
	--dbt-green:       #6DAA2C;

	/* Roles */
	--dbt-accent:      var(--dbt-teal);
	--dbt-accent-hover: var(--dbt-amber);
	--dbt-ink:         #1e2528;
	--dbt-ink-soft:    #5a666b;
	--dbt-paper:       #fdfdfc;
	--dbt-surface:     #ffffff;
	--dbt-line:        #e6e6e2;
	--dbt-footer-bg:   #1a1a2e;

	/* Type + rhythm */
	--dbt-font-body:    "Nunito Sans", Arial, sans-serif;
	--dbt-font-heading: "Baloo 2", sans-serif;
	--dbt-font-accent:  "Kalam", cursive;
	--dbt-radius: 14px;
	--dbt-shadow: 0 2px 12px rgba(30, 37, 40, 0.08);
	--dbt-container: 1240px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--dbt-font-body);
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--dbt-ink);
	background: var(--dbt-paper);
}

img { max-width: 100%; height: auto; }
a { color: var(--dbt-teal-dark); }
a:hover { color: var(--dbt-teal); }

h1, h2, h3, h4 {
	line-height: 1.15;
	color: var(--dbt-ink);
}
/* v2: Baloo 2 carries H1 too, at 800 — no forced uppercase, it has lowercase. */
h1 {
	font-family: var(--dbt-font-heading);
	font-weight: 800;
	font-size: 3rem;
}
h2, h3, h4 {
	font-family: var(--dbt-font-heading);
	font-weight: 700;
}
h2 { font-size: 2.4rem; }
h3 { font-size: 1.75rem; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.dbt-container {
	max-width: var(--dbt-container);
	margin: 0 auto;
	padding: 0 1.25rem;
}
.dbt-container-narrow { max-width: 760px; }

/* ── Buttons (teal pill → amber hover, black text) ──────────────────────── */
.dbt-btn {
	display: inline-block;
	padding: 0.7rem 1.6rem;
	background: var(--dbt-accent);
	color: #fff;
	border: 1px solid var(--dbt-accent);
	border-radius: 999px;
	font-family: var(--dbt-font-heading);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.dbt-btn:hover {
	background: var(--dbt-accent-hover);
	border-color: var(--dbt-accent-hover);
	color: #000;
}
.dbt-btn-secondary { background: var(--dbt-ink-soft); border-color: var(--dbt-ink-soft); }
.dbt-btn-secondary:hover { background: var(--dbt-amber); border-color: var(--dbt-amber); color: #000; }

/* ── Kicker (section eyebrow) ────────────────────────────────────────────── */
.dbt-kicker {
	display: block;
	font-family: var(--dbt-font-heading);
	font-weight: 600;
	font-size: 1.125rem; /* 18px */
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dbt-ink);
	margin-bottom: 0.7rem;
}

/* ── Top bar (social links) ─────────────────────────────────────────────── */
.dbt-topbar { background: var(--dbt-footer-bg); }
.dbt-topbar-inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0.5rem 1.25rem;
}
.dbt-topbar-social { display: flex; align-items: center; gap: 0.9rem; }
.dbt-topbar-social a {
	color: #ffffff;
	opacity: 0.85;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease, opacity 0.15s ease;
}
.dbt-topbar-social a:hover { color: var(--dbt-teal); opacity: 1; }
.dbt-topbar-social svg { display: block; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.dbt-header {
	background: var(--dbt-surface);
	border-bottom: 1px solid var(--dbt-line);
	position: sticky;
	top: 0;
	z-index: 50;
}
.dbt-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 84px;
}
.dbt-branding img { max-height: 64px; width: auto; }
.dbt-site-title {
	font-family: var(--dbt-font-heading);
	font-size: 1.5rem;
	text-decoration: none;
	color: var(--dbt-ink);
}
.dbt-menu {
	display: flex;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}
.dbt-menu a {
	text-decoration: none;
	color: var(--dbt-ink);
	font-family: var(--dbt-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
}
.dbt-menu a:hover { color: var(--dbt-teal); }

.dbt-nav-toggle { display: none; }

@media (max-width: 760px) {
	.dbt-nav-toggle {
		display: inline-flex;
		flex-direction: column;
		gap: 4px;
		background: none;
		border: none;
		padding: 0.5rem;
		cursor: pointer;
	}
	.dbt-nav-toggle-bar {
		width: 22px; height: 2px;
		background: var(--dbt-ink);
	}
	.dbt-nav {
		display: none;
		position: absolute;
		top: 84px; left: 0; right: 0;
		background: var(--dbt-surface);
		border-bottom: 1px solid var(--dbt-line);
		padding: 1rem 1.25rem;
	}
	.dbt-nav.is-open { display: block; }
	.dbt-menu { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}

/* ── Hero (light wash, dark serif title, thin rule — staging style) ─────── */
.dbt-hero { position: relative; overflow: hidden; }

/* Heights ported from the staging (Ecoscape) hero, in px — Ecoscape sets
   html { font-size: 62.5% } (1rem = 10px), so its "68rem" etc. are really
   680px/600px/520px/400px. This theme never overrides the root font-size
   (1rem = 16px), so copying those numbers as rem made the hero ~40% too
   tall. Fixed 2026-09-18. */
.dbt-hero-slides { position: relative; height: 680px; max-height: 82vh; }

@media (max-width: 1024px) { .dbt-hero-slides { height: 600px; } }
@media (max-width: 767px)  { .dbt-hero-slides { height: 520px; } }
@media (max-width: 575px)  { .dbt-hero-slides { height: 400px; } }

.dbt-hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background: var(--dbt-teal-dark) center/cover no-repeat;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease;
}
.dbt-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* Dark overlay over the image, matching the staging hero (not a light wash). */
.dbt-hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }

.dbt-hero-content {
	position: relative;
	z-index: 2;
	max-width: var(--dbt-container);
	margin: 0 auto;
	padding: 3rem 1.25rem;
	width: 100%;
	color: #fff;
}
.dbt-hero-content h2 {
	font-family: var(--dbt-font-heading);
	font-weight: 800;
	font-size: 3.4rem;
	margin: 0 0 0.4rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	display: inline-block;
	max-width: 50%;
	color: #fff;
}
.dbt-hero-content p {
	max-width: 34rem;
	font-size: 1.05rem;
	margin: 0.8rem 0 1.6rem;
	color: #fff;
}
.dbt-hero-content .dbt-btn { box-shadow: var(--dbt-shadow); }

@media (max-width: 1200px) { .dbt-hero-content h2 { max-width: 65%; } }
@media (max-width: 991px)  { .dbt-hero-content h2 { max-width: 100%; } }
@media (max-width: 760px) {
	.dbt-hero-content h2 { font-size: 2.3rem; }
}

/* Dot pagination — ring + inner dot, matching the staging Swiper bullet style. */
.dbt-hero-dots {
	position: absolute;
	z-index: 3;
	bottom: 1.25rem;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.dbt-hero-dot {
	width: 17px; height: 17px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: transparent;
	box-shadow: inset 0 0 0 2px transparent;
	cursor: pointer;
	position: relative;
	transition: box-shadow 0.3s ease;
}
.dbt-hero-dot::after {
	content: "";
	position: absolute;
	top: 6px; left: 6px;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #fff;
}
.dbt-hero-dot.is-active { box-shadow: inset 0 0 0 2px #fff; }

/* ── Scroll-snap scroller (hero + carousels) ────────────────────────────── */
.dbt-scroller-wrap { position: relative; }
.dbt-scroller {
	display: flex;
	overflow-x: auto;
	/* overflow-y explicit: leaving it unset promotes it to "auto" (spec
	   quirk when only one axis is non-visible), which can trap the mouse
	   wheel if the row has even 1px of vertical overflow. */
	overflow-y: hidden;
	/* proximity, not mandatory: mandatory horizontal snap traps vertical
	   wheel scrolling in Chrome when the pointer is over the scroller */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.dbt-scroller::-webkit-scrollbar { display: none; }

.dbt-scroll-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px; height: 42px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.92);
	color: var(--dbt-ink);
	font-size: 1.1rem;
	cursor: pointer;
	box-shadow: var(--dbt-shadow);
	z-index: 5;
}
.dbt-scroll-btn:hover { background: var(--dbt-amber); }
.dbt-scroll-prev { left: 0.75rem; }
.dbt-scroll-next { right: 0.75rem; }


/* ── Sections ───────────────────────────────────────────────────────────── */
.dbt-section { padding: 4rem 0; }
.dbt-section-head { text-align: center; margin-bottom: 2.2rem; }
.dbt-section-title { margin: 0; font-size: 2.6rem; }

/* Cards — solid brand-color bodies cycling cyan → amber → teal (staging) */
.dbt-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.75rem;
}
.dbt-card {
	background: var(--dbt-surface);
	border-radius: var(--dbt-radius);
	box-shadow: var(--dbt-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.dbt-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.dbt-card-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}
.dbt-card:hover .dbt-card-media img { transform: scale(1.04); }
.dbt-card-body { padding: 1.2rem 1.3rem 1.4rem; flex: 1; }
.dbt-card-title { margin: 0 0 0.35rem; font-size: 1.75rem; }
.dbt-card-title a { text-decoration: none; color: inherit; }
.dbt-card-meta { margin: 0 0 0.5rem; font-size: 0.83rem; }
.dbt-card-excerpt { margin: 0; font-size: 1.03125rem; } /* 16.5px */

/* Brand color cycle on card bodies, black text like staging blocks */
.dbt-color-cycle .dbt-card:nth-child(3n+1) .dbt-card-body { background: var(--dbt-cyan); }
.dbt-color-cycle .dbt-card:nth-child(3n+2) .dbt-card-body { background: var(--dbt-amber); }
.dbt-color-cycle .dbt-card:nth-child(3n)   .dbt-card-body { background: var(--dbt-teal); }
.dbt-color-cycle .dbt-card .dbt-card-body,
.dbt-color-cycle .dbt-card .dbt-card-body .dbt-card-title,
.dbt-color-cycle .dbt-card .dbt-card-body .dbt-card-meta,
.dbt-color-cycle .dbt-card .dbt-card-body .dbt-card-excerpt { color: #000; }
.dbt-color-cycle .dbt-card .dbt-card-title a:hover { color: #fff; }

/* ── Static intro ("What Flows Here") ───────────────────────────────────── */
.dbt-section-intro { text-align: center; padding-bottom: 1rem; }
/* Immediately followed by the bridge cards in practice — kept tight on purpose. */
.dbt-section-intro + .dbt-section-bridge { padding-top: 1rem; }
.dbt-intro-lines {
	font-family: var(--dbt-font-accent);
	font-style: normal; /* Kalam is a handwriting font, no need for italic */
	font-size: 1.4rem;
	line-height: 1.7;
	color: var(--dbt-teal-dark);
	margin: 0 0 1.6rem;
}
.dbt-intro-body { font-size: 1.375rem; color: var(--dbt-ink-soft); } /* 22px */
.dbt-intro-body p { margin: 0 0 1em; }
.dbt-intro-body p:last-child { margin-bottom: 0; }

/* ── Static CTA cards ("Three Ways to Enter", "How to Participate") ────── */
.dbt-cta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}
.dbt-cta-card {
	display: block;
	padding: 1.8rem 1.5rem;
	border-radius: var(--dbt-radius);
	box-shadow: var(--dbt-shadow);
	background: var(--dbt-surface);
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease;
}
a.dbt-cta-card:hover { transform: translateY(-3px); }
.dbt-cta-title { margin: 0 0 0.5rem; font-size: 1.55rem; }
.dbt-section-cta { text-align: center; margin: 2rem 0 0; }
.dbt-section-cta-link {
	font-family: var(--dbt-font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--dbt-teal-dark);
	text-decoration: none;
}
.dbt-section-cta-link:hover { color: var(--dbt-teal); }
.dbt-section-cta-link span { display: inline-block; transition: transform 0.15s ease; }
.dbt-section-cta-link:hover span { transform: translateX(3px); }
.dbt-cta-text { margin: 0; font-size: 1.03125rem; } /* 16.5px */

/* ── Bridge layout: icon-circles connected by a line, captions below ────── */
.dbt-bridge {
	position: relative;
	max-width: 1000px;
	margin: 1rem auto 0;
}
.dbt-bridge-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 36px;
	height: 2px;
	background: var(--dbt-teal-dark);
	z-index: 0;
}
.dbt-bridge-row {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.dbt-bridge-item {
	flex: 1 1 220px;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
.dbt-bridge-node {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--dbt-paper);
	border: 2px solid;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.dbt-bridge-title { margin: 0; font-family: var(--dbt-font-heading); font-weight: 700; font-size: 1.25rem; }
.dbt-bridge-text { margin: 0; font-size: 1.03125rem; line-height: 1.5; color: var(--dbt-ink-soft); } /* 16.5px */
@media (max-width: 760px) {
	.dbt-bridge-line { display: none; }
	.dbt-bridge-row { flex-direction: column; align-items: center; gap: 2.2rem; }
}

.dbt-color-cycle .dbt-cta-card:nth-child(3n+1) { background: var(--dbt-cyan); }
.dbt-color-cycle .dbt-cta-card:nth-child(3n+2) { background: var(--dbt-amber); }
.dbt-color-cycle .dbt-cta-card:nth-child(3n)   { background: var(--dbt-teal); }
.dbt-color-cycle .dbt-cta-card,
.dbt-color-cycle .dbt-cta-card .dbt-cta-title,
.dbt-color-cycle .dbt-cta-card .dbt-cta-text { color: #000; }

/* Category / badge (amber, black text — staging entry-categories) */
.dbt-badge {
	display: inline-block;
	background: var(--dbt-amber);
	color: #000;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.15rem 0.5rem;
	margin-bottom: 0.4rem;
}

/* Grid tiles (photo + overlay title, like staging project slider) */
.dbt-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
}
.dbt-tile {
	position: relative;
	display: block;
	border-radius: var(--dbt-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.dbt-tile img { width: 100%; height: 100%; object-fit: cover; }
.dbt-tile-label {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.8rem 1.1rem 0.9rem;
	background: linear-gradient(transparent, rgba(20, 26, 32, 0.82));
	color: #fff;
	font-family: var(--dbt-font-heading);
	font-size: 1.4rem;
}

/* Carousel */
.dbt-carousel { gap: 1.25rem; padding-bottom: 0.5rem; }
.dbt-carousel-item {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

/* Single feature */
.dbt-single-feature {
	display: flex;
	align-items: flex-end;
	min-height: 420px;
	border-radius: var(--dbt-radius);
	overflow: hidden;
	background: var(--dbt-teal-dark) center/cover no-repeat;
	text-decoration: none;
}
.dbt-single-feature-label {
	display: block;
	width: 100%;
	padding: 2.6rem 1.6rem 1.4rem;
	background: linear-gradient(transparent, rgba(20, 26, 32, 0.85));
	color: #fff;
}
.dbt-single-feature-label strong {
	display: block;
	font-family: var(--dbt-font-heading);
	font-weight: 400;
	font-size: 1.9rem;
	margin-bottom: 0.3rem;
}

/* ── Page / archive chrome ──────────────────────────────────────────────── */
.dbt-archive, .dbt-single { padding: 3rem 1.25rem 4rem; }
.dbt-page-header { text-align: center; margin-bottom: 2.2rem; }
.dbt-page-header h1 { margin: 0 0 0.5rem; font-size: 3rem; }
.dbt-page-intro { color: var(--dbt-ink-soft); max-width: 46rem; margin: 0 auto; }

.dbt-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 2.2rem;
	padding: 1rem 1.25rem;
	background: var(--dbt-surface);
	border: 1px solid var(--dbt-line);
	border-radius: var(--dbt-radius);
}
.dbt-filters label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--dbt-ink-soft); }
.dbt-filters select {
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--dbt-line);
	border-radius: 6px;
	background: var(--dbt-surface);
	font-family: var(--dbt-font-body);
	font-size: 0.95rem;
}

.dbt-entry-content { max-width: 48rem; margin: 0 auto; }
.dbt-entry-content img { border-radius: var(--dbt-radius); }
.dbt-single-thumb { max-width: 48rem; margin: 0 auto 1.5rem; }
.dbt-single-thumb img { border-radius: var(--dbt-radius); }

.dbt-pagination { margin-top: 2rem; text-align: center; }
.dbt-empty { color: var(--dbt-ink-soft); text-align: center; }

/* ── Person profile (D2, pulled forward 2026-09-19) ─────────────────────── */
.dbt-person-header { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.5rem; }
.dbt-person-header img { border-radius: 50%; }
.dbt-person-header h1 { margin: 0 0 0.2rem; }
.dbt-person-stage { margin: 0; color: var(--dbt-ink-soft); font-size: 0.95rem; }
.dbt-person-bio { margin-bottom: 1.8rem; }
.dbt-person-section { margin-bottom: 1.6rem; }
.dbt-person-section h2 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.dbt-person-list { margin: 0; padding-left: 1.2rem; }
.dbt-person-note { color: var(--dbt-ink-soft); font-size: 0.85rem; }

/* ── Project hero ───────────────────────────────────────────────────────── */
.dbt-project-hero {
	background: var(--dbt-teal-dark) center/cover no-repeat;
}
.dbt-project-hero-overlay {
	background: linear-gradient(rgba(253,253,252,0.5), rgba(253,253,252,0.72));
	padding: 6rem 0 2.4rem;
}
.dbt-project-hero h1 {
	margin: 0 0 0.4rem;
	font-size: 3.2rem;
	display: inline-block;
	border-bottom: 1px solid var(--dbt-ink);
	padding-bottom: 0.4rem;
}
.dbt-project-hero-meta { margin: 0.6rem 0 0; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; color: var(--dbt-ink); }
.dbt-project-body { padding: 2.5rem 1.25rem; }

/* ── Badges: one shared shape, three colors — used on the project hero and
   the Projects listing cards. Each is its own concept, never mixed:
     .dbt-badge--affiliation (teal, filled)  = a real DBC governance recognition (Friend/Ally/DBC Project)
     .dbt-badge--inactive    (amber, outline) = the project's own Active/Inactive status
     .dbt-badge--label       (ink, outline)   = the free-text "Label" field
   2026-09-25 (places-and-hosting): --kind (teal outline) = Project/Place/Organization,
   --land-node (amber, filled) = the DBC Land Node recognition, --planned = status.
   Fixes a pre-existing bug: the old affiliation rule (`.dbt-project-tiers a`)
   styled an <a> that was never actually in the markup (a plain <span>), so
   the "DBC Ally" text has been rendering completely unstyled. */
.dbt-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: nowrap;
}
.dbt-badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0; }
.dbt-badge--affiliation { background: var(--dbt-teal); color: #fff; }
.dbt-badge--inactive {
	background: rgba(252, 178, 0, 0.16);
	border: 1px solid rgba(184, 121, 10, 0.55);
	color: #7a5205;
}
.dbt-badge--inactive-dot { width: 6px; height: 6px; border-radius: 999px; background: #d99a1e; display: inline-block; flex-shrink: 0; }
.dbt-badge--label { border: 1px solid var(--dbt-ink); color: var(--dbt-ink); background: transparent; }

.dbt-project-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--dbt-line);
}
.dbt-project-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 1.1rem 0.55rem 0.65rem;
	border-radius: 999px;
	background: var(--dbt-surface);
	color: var(--dbt-ink);
	text-decoration: none;
	font-size: 1.03125rem; /* 16.5px */
	font-weight: 600;
}
.dbt-project-link:hover { background: var(--dbt-line); }
.dbt-project-link-icon {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px var(--dbt-line);
	color: var(--dbt-accent);
}

.dbt-project-inactive-note {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 1rem 1.1rem;
	margin: 0 0 1.75rem;
	background: #faf3e6;
	border-left: 3px solid #d99a1e;
	border-radius: 6px;
	color: #6b4a09;
}
.dbt-project-inactive-note svg { flex-shrink: 0; margin-top: 2px; color: #8a5c0a; }
.dbt-project-inactive-note p { margin: 0; font-size: 0.9rem; line-height: 1.6; }

/* ── Footer (dark, like staging bloom section) ──────────────────────────── */
.dbt-footer {
	margin-top: 3.5rem;
	background: var(--dbt-footer-bg);
	color: #d5d7e0;
}
.dbt-footer a { color: #fff; text-decoration: none; }
.dbt-footer a:hover { color: var(--dbt-cyan); text-decoration: none; }
.dbt-footer-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem;
	padding-top: 2.8rem;
	padding-bottom: 1.5rem;
}
.dbt-footer-brand strong { font-family: var(--dbt-font-heading); font-size: 1.3rem; font-weight: 700; }
.dbt-footer-brand p { font-family: var(--dbt-font-accent); font-size: 1.05rem; color: #9ba0b4; max-width: 26rem; }
.dbt-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dbt-footer-credit {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-top: 1rem;
	padding-bottom: 1.5rem;
	font-size: 0.85rem;
	color: #9ba0b4;
}

/* Person profile enrichment: edit-own link + private fields (2026-09-19) */
.dbt-person-edit-link { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; }
.dbt-person-private { font-size: 0.9rem; color: var(--dbt-ink-soft); display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.dbt-person-private-note { font-style: italic; opacity: 0.8; }

/* ── Actors: places and hosting (designs/places-and-hosting.md) ─────────── */
.dbt-badge--kind { border: 1px solid var(--dbt-teal-dark); color: var(--dbt-teal-dark); background: transparent; }
.dbt-badge--land-node { background: var(--dbt-amber); color: #1e2528; }
.dbt-badge--planned { background: rgba(0, 186, 198, 0.12); border: 1px solid rgba(0, 132, 140, 0.5); color: var(--dbt-teal-dark); }
.dbt-project-hero--plain .dbt-project-hero-overlay { padding-top: 3.5rem; }
.dbt-status-note--planned { background: #e8f7f8; border-left-color: var(--dbt-teal); color: #0b4b50; }
.dbt-status-note--planned svg { color: var(--dbt-teal-dark); }

.dbt-label { font-family: var(--dbt-font-heading); font-weight: 700; margin-right: 0.4rem; }
.dbt-actor-steward { margin: 0 0 1rem; }
.dbt-actor-home { margin: 0 0 1.75rem; display: grid; gap: 0.35rem; }
.dbt-actor-home div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dbt-actor-home dt { font-family: var(--dbt-font-heading); font-weight: 700; }
.dbt-actor-home dt::after { content: ":"; }
.dbt-actor-home dd { margin: 0; }

.dbt-mini-map { height: 280px; border-radius: var(--dbt-radius); margin: 2rem auto 0.4rem; max-width: 48rem; z-index: 0; }
.dbt-map-note { max-width: 48rem; margin: 0 auto; font-size: 0.8rem; color: var(--dbt-ink-soft); }

.dbt-actor-past .dbt-container { max-width: 56rem; }
.dbt-event-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dbt-line); }
.dbt-event-list li {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 0.1rem 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--dbt-line);
}
.dbt-event-list-date { color: var(--dbt-ink-soft); font-size: 0.9rem; grid-row: span 2; }
.dbt-event-list-title { font-weight: 700; text-decoration: none; }
.dbt-event-list-context { font-size: 0.9rem; color: var(--dbt-ink-soft); grid-column: 2; }
.dbt-event-list-more { margin-top: 1rem; }
@media (max-width: 575px) {
	.dbt-event-list li { grid-template-columns: 1fr; }
	.dbt-event-list-date, .dbt-event-list-context { grid-row: auto; grid-column: 1; }
}

.dbt-filter-check { flex-direction: row !important; align-items: center; }
.dbt-filter-check input { margin-right: 0.3rem; }
.dbt-filter-kinds { border: 0; margin: 0; padding: 0; display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; }
.dbt-filter-kinds legend { font-size: 0.85rem; color: var(--dbt-ink-soft); padding: 0; margin-bottom: 0.25rem; }

.dbt-explore-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; }
.dbt-explore-layout--no-map { grid-template-columns: 1fr; }
.dbt-explore-map { position: sticky; top: 1rem; height: 70vh; min-height: 380px; border-radius: var(--dbt-radius); z-index: 0; }
.dbt-explore-count { margin: 0 0 0.8rem; color: var(--dbt-ink-soft); font-size: 0.9rem; }
.dbt-card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.dbt-card-grid--compact .dbt-card-title { font-size: 1.35rem; }
@media (max-width: 900px) {
	.dbt-explore-layout { grid-template-columns: 1fr; }
	.dbt-explore-map { position: static; height: 55vh; min-height: 300px; }
}

/* Event page: "Organized by · Where" (content plugin, above TEC's content) */
.dbc-event-who-where { margin: 0 0 1.5rem; padding: 0.8rem 1rem; background: var(--dbt-surface); border: 1px solid var(--dbt-line); border-radius: var(--dbt-radius); }
.dbc-event-who-where p { margin: 0.15rem 0; }
.dbc-event-who-where .dbc-label { font-family: var(--dbt-font-heading); font-weight: 700; margin-right: 0.4rem; }

/* Map pins and legend (assets/js/map.js) */
.dbt-map-pin { background: none; border: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); transition: transform 0.15s ease; transform-origin: 50% 100%; }
.dbt-map-pin:hover { transform: scale(1.15); }
.dbt-map-legend { background: rgba(255, 255, 255, 0.92); border-radius: 8px; padding: 0.45rem 0.7rem; font-size: 0.8rem; line-height: 1.4; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 0.2rem; }
.dbt-map-legend span { display: flex; align-items: center; gap: 0.45rem; }
.dbt-map-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.dbt-map-legend .dbt-map-legend-node { color: #fff; font-style: normal; font-size: 9px; line-height: 12px; text-align: center; }
.dbt-map-links { display: flex; gap: 0.9rem; margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid var(--dbt-line); font-size: 0.82rem; }
.dbt-map-links a { font-weight: 700; text-decoration: none; }
.dbt-map-approx { display: block; font-size: 0.75rem; color: var(--dbt-ink-soft); margin-top: 0.2rem; }
.dbt-map-pin { position: relative; }
.dbt-map-pin-count { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--dbt-ink); color: #fff; font: 700 10px/16px var(--dbt-font-body); text-align: center; box-shadow: 0 0 0 2px #fff; }
.dbt-map-entry { padding-bottom: 0.35rem; }
.dbt-map-entry + .dbt-map-entry { padding-top: 0.35rem; border-top: 1px solid var(--dbt-line); }
.dbt-map-area { display: block; font-size: 0.8rem; color: var(--dbt-ink-soft); }

/* Stories (designs/stories-and-activities.md) */
.dbt-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: -1rem 0 2rem; }
.dbt-chip { padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--dbt-line); background: var(--dbt-surface); color: var(--dbt-ink); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.dbt-chip:hover { border-color: var(--dbt-teal); }
.dbt-chip.is-active { background: var(--dbt-teal); border-color: var(--dbt-teal); color: #fff; }
.dbt-badge--source { background: #3b1f63; color: #fff; }
.dbt-story-facts { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.6rem 0 0; font-size: 0.8rem; }
.dbt-riches-chip { padding: 0.1rem 0.55rem; border-radius: 999px; background: rgba(163, 218, 12, 0.22); color: #3d5406; font-weight: 700; }
.dbt-story-participants { color: var(--dbt-ink-soft); margin-left: 0.2rem; }
.dbt-story-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; color: var(--dbt-ink-soft); font-size: 0.95rem; }
.dbt-story-line .dbt-label { color: var(--dbt-ink); }
.dbt-single .dbt-story-facts { justify-content: center; }
.dbt-next-here { max-width: 48rem; margin: 3rem auto 0; }
.dbt-next-here h2 { font-size: 1.6rem; }
.dbt-event-list-story { grid-column: 2; font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.dbc-event-stories { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--dbt-line); }
.dbc-event-stories .dbc-ext { font-size: 0.75rem; font-weight: 700; color: #3b1f63; }
.dbt-tile-badge { position: absolute; top: 0.6rem; left: 0.6rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: #3b1f63; color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; z-index: 1; }

/* Tile titles stay readable over busy images, e.g. event posters (2026-09-30):
   a taller, darker shade behind the title, plus a soft text shadow. */
.dbt-tile-label {
	padding-top: 3.2rem;
	background: linear-gradient(rgba(12, 16, 20, 0), rgba(12, 16, 20, 0.72) 38%, rgba(12, 16, 20, 0.92));
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	line-height: 1.25;
}