/* ============================================================================
 * FABULA — Characters · Himmel
 *
 * WRATH. Charcoal, ash and one bleeding red. Weight is the whole idea: heavy
 * borders and cracked stone, a hero built like a slab rather than drawn.
 * ========================================================================== */

.ch-himmel {
	--ch-ground: #e7e1d6;
	--ch-texture:
		radial-gradient(900px 460px at 50% -160px, rgb(142 47 60 / 8%), transparent 70%),
		repeating-linear-gradient(135deg, rgb(0 0 0 / 4%) 0 2px, transparent 2px 11px);
	--ch-panel: #f4efe5;
	--ch-panel-alt: #eae2d4;
	--ch-ink: #1c1916;
	--ch-ink-dim: #575049;
	--ch-ink-faint: #877f74;
	--ch-accent: #8e2f3c;
	--ch-accent-soft: #a63c4a;
	--ch-accent-2: #6e6047;
	--ch-rule: rgb(142 47 60 / 30%);
	--ch-rule-soft: rgb(142 47 60 / 14%);
	--ch-glow: rgb(142 47 60 / 26%);
	--ch-masthead: linear-gradient(180deg, #131110, #241d1d 62%, #3a1c21);
}

@media (prefers-color-scheme: dark) {
	.ch-himmel {
		--ch-ground: #141311;
		--ch-texture:
			radial-gradient(900px 460px at 50% -160px, rgb(208 113 127 / 9%), transparent 70%),
			repeating-linear-gradient(135deg, rgb(255 255 255 / 2.5%) 0 2px, transparent 2px 11px);
		--ch-panel: #1c1a17;
		--ch-panel-alt: #252220;
		--ch-ink: #ebe5d9;
		--ch-ink-dim: #aea69a;
		--ch-ink-faint: #7d766c;
		--ch-accent: #d0717f;
		--ch-accent-soft: #b85f6c;
		--ch-accent-2: #d8ceb8;
		--ch-rule: rgb(208 113 127 / 30%);
		--ch-rule-soft: rgb(208 113 127 / 14%);
		--ch-glow: rgb(208 113 127 / 30%);
		--ch-masthead: linear-gradient(180deg, #0d0c0b, #1e1a1a 62%, #2f161a);
	}
}

/* Everything is built rather than drawn: slabs, not rules. */
body.ch-himmel .ch-panel,
body.ch-himmel .ch-metaitem,
body.ch-himmel .ch-rel,
body.ch-himmel .ch-card__link {
	border-width: 2px;
	border-left-width: 4px;
}

/* The fault line — a single crack across the ground of the hero. */
body.ch-himmel .ch-hero::before {
	content: "";
	position: absolute;
	left: -4%;
	right: -4%;
	bottom: 0;
	height: 5px;
	background:
		linear-gradient(90deg, transparent, var(--ch-accent) 18%, var(--ch-accent) 82%, transparent);
	opacity: 0.55;
	clip-path: polygon(0 40%, 7% 40%, 9% 0, 12% 66%, 24% 66%, 27% 10%, 31% 60%, 52% 60%, 55% 20%, 59% 70%, 78% 70%, 81% 30%, 85% 62%, 100% 62%, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: no-preference) {
	body.ch-himmel .ch-hero__name,
	body.ch-himmel .ch-hero__quote {
		animation: ch-himmel-slam 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}

	body.ch-himmel .ch-hero__quote {
		animation-delay: 160ms;
	}
}

@keyframes ch-himmel-slam {
	from {
		opacity: 0;
		transform: translateY(-18px) scale(1.04);
	}

	to {
		opacity: 1;
		transform: none;
	}
}