/**
 * Celsyn 360 Liquid — base/reset layer.
 * Deliberately light-touch: Blocksy already supplies a sane reset and
 * responsive grid; this only sets the brand type/color defaults and a
 * few global behaviors the glass system depends on.
 */

body {
	font-family: var( --font-body );
	color: var( --env-text );
	background: var( --env-bg );
	font-size: var( --text-md );
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.celsyn-h1, .celsyn-h2, .celsyn-h3, .celsyn-h4 {
	font-family: var( --font-display );
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var( --env-text );
}

a { color: inherit; }

/* Section-level environment wrapper — every .celsyn-section sets its own
   background from --env-bg, so switching [data-celsyn-env] on it is the
   ONLY thing needed to flip a section between light and dark. */
.celsyn-section {
	position: relative;
	background: var( --env-bg );
	color: var( --env-text );
	padding-block: var( --space-8 );
}
.celsyn-section--tight { padding-block: var( --space-6 ); }
/* A section with genuinely no content yet (e.g. Lab Results before any
   batch search) — small enough to read as deliberate, not a layout gap. */
.celsyn-section--compact { padding-block: var( --space-5 ); }
.celsyn-section__inner {
	max-width: var( --container-lg );
	margin-inline: auto;
	padding-inline: var( --space-5 );
}
.celsyn-section__inner--md { max-width: var( --container-md ); }
.celsyn-section__inner--sm { max-width: var( --container-sm ); }
.celsyn-section__inner--wide { max-width: var( --container-xl ); }

.celsyn-eyebrow {
	display: inline-block;
	font-family: var( --font-body );
	font-size: var( --text-xs );
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --env-accent );
	margin: 0 0 var( --space-3 );
}

.celsyn-lede {
	color: var( --env-text-muted );
	font-size: var( --text-lg );
	max-width: 52ch;
}

/* Section heading rhythm — shared by every homepage band so the eyebrow/
   title/lede spacing stays consistent without repeating inline styles. */
.celsyn-section-title {
	font-size: var( --text-2xl );
	margin: 0 0 var( --space-6 );
}
.celsyn-section-head { margin-bottom: var( --space-6 ); }
.celsyn-section-head--center { text-align: center; }
.celsyn-section-head--center .celsyn-section-title { margin-inline: auto; }
.celsyn-section__cta { text-align: center; margin-top: var( --space-6 ); }

.celsyn-textlink {
	color: var( --env-accent );
	text-decoration: underline;
	text-decoration-color: var( --env-line-strong );
	text-underline-offset: 3px;
	transition: text-decoration-color var( --dur-fast ) var( --ease-glass );
}
.celsyn-textlink:hover,
.celsyn-textlink:focus-visible { text-decoration-color: currentColor; }

/* Wide content never forces the page to scroll sideways. */
.celsyn-scroll-x { overflow-x: auto; }

:focus-visible {
	outline: 2px solid var( --env-accent );
	outline-offset: 2px;
}

/* Scroll reveal — see assets/js/reveal.js. Only armed once JS confirms it
   can un-hide the element; .celsyn-reveal-js not being present (JS failed
   to load) leaves everything visible by default. */
.celsyn-reveal-js [data-celsyn-reveal] {
	opacity: 0;
	transform: translateY( 16px );
}
.celsyn-reveal-js [data-celsyn-reveal].is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity var( --dur-slow ) var( --ease-glass ), transform var( --dur-slow ) var( --ease-glass );
}