/* ==========================================================================
   ZA APEX — BASE
   Reset, document, typography primitives.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: var(--za-void);
}

/* Locomotive/Lenis takes over scrolling; native smooth would fight it. */
html.lenis, html.za-smooth-active { scroll-behavior: auto; }

body {
	margin: 0;
	background: var(--za-void);
	color: var(--za-bone);
	font-family: var(--za-font-body);
	font-weight: var(--za-fw-body);
	font-size: var(--za-body-fluid);
	line-height: var(--za-lh-body);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

body.za-menu-open,
body.za-lb-open { overflow: hidden; }

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; }
p, ul, ol, figure, blockquote, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}
button { background: none; border: 0; cursor: pointer; padding: 0; }

table { border-collapse: collapse; width: 100%; }

hr {
	border: 0;
	height: 1px;
	background: var(--za-line);
	margin: 2.5rem 0;
}

::selection {
	background: var(--za-primary);
	color: var(--za-on-primary);
}

/* --------------------------------------------------------------------------
   FOCUS
   Visible, high contrast, and only for keyboard users — an agency site with
   an invisible focus ring is an inaccessible site, no matter how it looks.
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--za-primary);
	outline-offset: 3px;
	border-radius: 2px;
}

.za-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--za-z-cursor);
	background: var(--za-primary);
	color: var(--za-on-primary);
	padding: .9rem 1.4rem;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
}
.za-skip:focus { left: 1rem; top: 1rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   TYPE PRIMITIVES
   -------------------------------------------------------------------------- */
.za-display {
	font-family: var(--za-font-display);
	font-weight: var(--za-fw-display);
	line-height: var(--za-lh-display);
	letter-spacing: var(--za-ls-display);
	text-wrap: balance;
}

.za-accent { color: var(--za-primary); }

/* Each headline line is its own overflow-hidden box so the "split" reveal
   can slide the inner span up from below the baseline without leaking. */
.za-line {
	display: block;
	overflow: hidden;
}
.za-line__i {
	display: block;
	will-change: transform;
}

.za-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	font-size: var(--za-fs-small);
	letter-spacing: var(--za-ls-eyebrow);
	text-transform: uppercase;
	color: var(--za-muted);
	font-weight: 500;
	margin-bottom: 1.4rem;
}
.za-eyebrow__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--za-primary);
	flex: none;
	box-shadow: 0 0 0 4px rgba(var(--za-primary-rgb), .16);
}

.za-empty {
	color: var(--za-muted);
	font-size: .9rem;
	padding: 2rem 0;
	border: 1px dashed var(--za-line);
	text-align: center;
	border-radius: var(--za-radius);
}

/* --------------------------------------------------------------------------
   PROSE — editor content
   -------------------------------------------------------------------------- */
.za-prose { color: var(--za-bone); }
.za-prose > * + * { margin-top: 1.35em; }

.za-prose h1, .za-prose h2, .za-prose h3, .za-prose h4 {
	font-family: var(--za-font-display);
	line-height: 1.1;
	letter-spacing: -.02em;
	margin-top: 2.2em;
}
.za-prose h2 { font-size: var(--za-h2-fluid); }
.za-prose h3 { font-size: var(--za-h3-fluid); }
.za-prose h4 { font-size: 1.2rem; }

.za-prose p { color: rgba(var(--za-bone-rgb), .82); }

.za-prose a {
	color: var(--za-primary);
	text-decoration: underline;
	text-underline-offset: .22em;
	text-decoration-thickness: 1px;
	transition: opacity .25s var(--za-ease);
}
.za-prose a:hover { opacity: .7; }

.za-prose ul, .za-prose ol { padding-left: 1.3em; color: rgba(var(--za-bone-rgb), .82); }
.za-prose ul { list-style: none; }
.za-prose ul li { position: relative; }
.za-prose ul li::before {
	content: "";
	position: absolute;
	left: -1.1em; top: .62em;
	width: 5px; height: 5px;
	background: var(--za-primary);
	border-radius: 50%;
}
.za-prose ol { list-style: decimal; }
.za-prose li + li { margin-top: .5em; }

.za-prose blockquote {
	border-left: 2px solid var(--za-primary);
	padding-left: 1.6em;
	font-family: var(--za-font-display);
	font-size: 1.3em;
	line-height: 1.35;
	color: var(--za-bone);
}

.za-prose figure figcaption {
	font-size: .8rem;
	color: var(--za-muted);
	margin-top: .8em;
}

.za-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .88em;
	background: var(--za-surface-2);
	padding: .15em .45em;
	border-radius: 3px;
}
.za-prose pre {
	background: var(--za-surface-2);
	border: 1px solid var(--za-line);
	padding: 1.4rem;
	overflow-x: auto;
	border-radius: var(--za-radius);
}
.za-prose pre code { background: none; padding: 0; }

.za-prose img { border-radius: var(--za-radius); }

.za-prose table { font-size: .95em; }
.za-prose th, .za-prose td {
	text-align: left;
	padding: .8em 1em;
	border-bottom: 1px solid var(--za-line);
}
.za-prose th { color: var(--za-bone); font-weight: 600; }
.za-prose td { color: rgba(var(--za-bone-rgb), .78); }

/* --------------------------------------------------------------------------
   IMAGE WRAPPER — holds ratio, prevents CLS
   -------------------------------------------------------------------------- */
.za-img {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--za-surface-2);
	border-radius: var(--za-radius);
}
.za-img[style*="--ratio"] { aspect-ratio: var(--ratio, 16 / 9); }
.za-img__el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--za-ease), opacity .6s ease;
}
.za-img--empty {
	background:
		repeating-linear-gradient(
			45deg,
			var(--za-surface-2) 0 10px,
			var(--za-surface) 10px 20px
		);
	min-height: 120px;
}