/* ==========================================================================
   One-pager sections.

   Elementor supplies structure and classes only. Every colour, size and
   spacing value comes from the token system — which is what makes the dark
   theme work. Nothing here hard-codes a colour.
   ========================================================================== */

.section {
	padding-block: 0;
	margin-block-end: var(--s-7);
}

#hero,
.section--hero {
	min-height: min(82vh, 46rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-block-end: var(--s-9);
}

/* Section headings --------------------------------------------------------- */

.section__title {
	font-size: var(--display-2);
	margin-block-end: var(--s-5);
	padding-block-end: var(--s-3);
	border-bottom: 1px solid var(--rule);
}

.section__intro p { color: var(--muted); }

/* Hero --------------------------------------------------------------------- */

.eyebrow {
	font-family: var(--font-data);
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	margin-block-end: var(--s-5);
}

.hero__name {
	font-size: var(--display-1);
	margin-block-end: var(--s-5);
}

.hero__lead {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 3.5vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: var(--track-display);
	color: var(--ink);
	max-width: 20ch;
	text-wrap: balance;
	margin-block-end: var(--s-5);
}

.hero__body p { font-size: 1.125rem; }

.hero__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	margin-block-start: var(--s-6);
	padding-block-start: var(--s-5);
	border-top: 1px solid var(--rule);
	font-family: var(--font-data);
	font-size: var(--mono-data);
	max-width: none;
}

/* Blocks --------------------------------------------------------------------
   Column count follows available width rather than fixed breakpoints: one
   column on a phone, two on a tablet, three on a wide screen, without naming
   any of those devices. minmax() decides, auto-fit fills. */

.blocks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: var(--s-6) var(--s-7);
	margin-block-start: var(--s-6);
	max-width: none;
}

.block {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding-block-start: var(--s-4);
	border-top: 1px solid var(--rule);
	min-width: 0;
}

.block__label {
	margin: 0;
	font-size: var(--mono-label);
	font-family: var(--font-data);
	font-weight: 400;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--signal);
}

.block__claim {
	margin: 0;
	font-size: 1.0625rem;
	color: var(--ink);
	max-width: none;
}

.block__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.block__lines li {
	position: relative;
	padding-inline-start: var(--s-4);
	color: var(--muted);
	font-size: var(--body-sm);
	max-width: none;
}

.block__lines li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.7em;
	width: var(--s-2);
	height: 1px;
	background: var(--signal);
	opacity: 0.55;
}

/* Definition lists — inventory and principles ------------------------------ */

.inventory,
.principles {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	gap: var(--s-3) var(--s-6);
	margin: 0;
}

.inventory dt,
.principles dt {
	font-family: var(--font-data);
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	padding-block-start: 0.25em;
}

.inventory dd,
.principles dd {
	margin: 0;
	max-width: var(--measure);
}

.inventory dd { font-size: var(--body-sm); }

.inventory dt + dd,
.principles dt + dd {
	padding-block-end: var(--s-3);
	border-bottom: 1px solid var(--rule);
}

.principles dt { color: var(--signal); }

/* Prose -------------------------------------------------------------------- */

.prose p { text-wrap: pretty; }

/* Narrow ------------------------------------------------------------------- */

@media (max-width: 47.99em) {

	.inventory,
	.principles {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-2);
	}

	.inventory dt + dd,
	.principles dt + dd { margin-block-end: var(--s-3); }

	#hero,
	.section--hero { min-height: auto; }
}

/* ==========================================================================
   Animation guards.

   Not a performance measure — these stop third-party scroll-reveal effects
   from failing open. Content must never be permanently invisible.
   ========================================================================== */

/* Without JS, anything an animation library would have revealed stays visible.
   Reveal effects typically set opacity:0 in CSS and restore it in JS; if the
   script never runs, that content is lost. */
html:not(.js) [class*="wcf-"],
html:not(.js) [class*="marvy"],
html:not(.js) [data-settings*="animation"],
html:not(.js) .elementor-invisible {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	[class*="wcf-"],
	[class*="marvy"],
	.elementor-invisible {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/* Wie alles anfing ---------------------------------------------------------- */

.tag {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3ch;
	margin: 0 0 var(--s-5);
	padding: var(--s-1) var(--s-3);
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-family: var(--font-data);
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	text-transform: lowercase;
	color: var(--muted);
	max-width: none;
}

.tag__mark { color: var(--signal); }

/* Intro --------------------------------------------------------------------- */

.intro__hi {
	display: flex;
	align-items: baseline;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(2.5rem, 8vw, 6rem);
	line-height: 1;
	letter-spacing: var(--track-display);
	margin: 0 0 var(--s-5);
	max-width: none;
	color: var(--ink);
}

/* Fixed height so a taller script — 안녕하세요, नमस्ते — does not shunt the
   paragraph below it up and down on every rotation. */
.intro__hi > [data-intro-hi] {
	display: inline-block;
	min-height: 1em;
	transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

.intro__hi > [data-intro-hi].is-out {
	opacity: 0;
	transform: translateY(-8px);
}

.intro__comma { color: var(--signal); }

.intro__lead {
	font-size: 1.125rem;
	max-width: var(--measure);
}

.intro__age {
	color: var(--signal);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

/* The fraction is the evidence it is live; it should not compete with the
   number anyone actually reads. */
.intro__frac {
	color: var(--muted);
	font-size: 0.78em;
}

@media (prefers-reduced-motion: reduce) {
	.intro__frac { display: none; }
	.intro__hi > [data-intro-hi] { transition: none; }
}

/* Sub-heading inside a panel that already has its own opening block. */
.section__title--sub {
	margin-block-start: var(--s-8);
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
}

/* Ursprung ------------------------------------------------------------------ */

.ursprung { margin-block-start: var(--s-8); }
.ursprung > :first-child { margin-block-start: 0; }

/* The emoji is the one place on this site colour arrives uninvited. Sized to
   the text so it sits on the baseline instead of towering over it. */
.wink {
	font-size: 0.95em;
	line-height: 1;
	vertical-align: baseline;
}

/* ==========================================================================
   Welcome + Ursprung, side by side.
   ========================================================================== */

.welcome {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
	gap: var(--s-7) var(--s-8);
	align-items: start;
}

.welcome__main > :first-child { margin-block-start: 0; }

/* Ursprung as a box — the one panel-within-a-panel on the page, so it borrows
   the rail and dock treatment rather than inventing a third surface style. */
.ursprung--box {
	margin-block-start: 0;
	padding: var(--s-5) var(--s-6);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	position: sticky;
	top: var(--s-8);
}

.ursprung--box > :first-child { margin-block-start: 0; }
.ursprung--box p { max-width: none; }
.ursprung--box p:last-child { margin-block-end: 0; }

.ursprung--box .section__title--sub {
	font-size: 1.125rem;
	border-bottom: 0;
	padding-block-end: 0;
	margin-block-end: var(--s-3);
}

@media (max-width: 61.99em) {
	.welcome {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-6);
	}
	/* Not sticky once stacked: a box that follows the scroll in a single
	   column just covers the text under it. */
	.ursprung--box { position: static; }
}