/* ==========================================================================
   Global AI Index — base
   Type, links, focus, measure, utilities. Tokens come from theme.json.
   ========================================================================== */

:root {
	--gai-ease: cubic-bezier(0.2, 0, 0, 1);
	--gai-fast: 180ms;
	--gai-base: 240ms;
	--gai-slow: 400ms;
	--gai-editorial: 720px;
	--gai-narrow: 560px;
	--gai-gutter: clamp(20px, 4vw, 48px);
	--gai-header-h: 76px;
	--gai-anchor-h: 56px;
}

@media (max-width: 1023px) {
	:root { --gai-header-h: 68px; --gai-anchor-h: 52px; }
}
@media (max-width: 767px) {
	:root { --gai-header-h: 60px; --gai-anchor-h: 48px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Anchored sections must clear the sticky header + anchor bar. */
:target,
[id^="section-"] { scroll-margin-top: calc(var(--gai-header-h) + var(--gai-anchor-h) + 24px); }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --- Numerals -------------------------------------------------------------
   Every numeral in a data context is tabular. Non-negotiable. */
table,
.gai-data,
.gai-ledger,
.gai-rank,
.gai-score,
.gai-delta,
.gai-stat__figure,
.gai-meta time { font-variant-numeric: tabular-nums lining-nums; }

/* --- Editorial measure ---------------------------------------------------- */
.gai-measure > * { max-width: var(--gai-editorial); }
.gai-measure > .alignwide,
.gai-measure > .alignfull { max-width: none; }

/* --- Links ---------------------------------------------------------------- */
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

.wp-block-post-content a:hover,
.gai-prose a:hover { text-decoration-thickness: 2px; }

/* --- Focus ---------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.gai-header :where(a, button):focus-visible,
.gai-footer :where(a, button):focus-visible,
:is(.gai-hero:not(.gai-hero--editorial), .gai-cta, .gai-section--ink, .gai-footer, .gai-on-ink) :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--ink-inv);
}

/* --- Skip link ------------------------------------------------------------ */
.gai-skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--wp--preset--color--ink-surface);
	color: var(--wp--preset--color--ink-inv);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	text-decoration: none;
	border-radius: 2px;
	transition: top var(--gai-fast) var(--gai-ease);
}
.gai-skip-link:focus { top: 12px; }

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

/* --- Typographic utilities ------------------------------------------------ */

/* The eyebrow: mono, uppercase, tracked. First tier of the editorial ladder. */
.gai-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	margin: 0 0 16px;
}
.gai-eyebrow--accent { color: var(--wp--preset--color--accent); }
:is(.gai-hero:not(.gai-hero--editorial), .gai-cta, .gai-section--ink, .gai-footer, .gai-on-ink) .gai-eyebrow { color: var(--wp--preset--color--ink-inv-2); }

/* The deck: one sentence, serif, between heading and body. Third tier. */
.gai-deck {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--deck);
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--ink-2);
	max-width: 30em;
	margin: 24px 0 0;
}
:is(.gai-hero:not(.gai-hero--editorial), .gai-cta, .gai-section--ink, .gai-footer, .gai-on-ink) .gai-deck { color: var(--wp--preset--color--ink-inv-2); }

/* Mixed-weight headings: one emphasised clause per heading, never two. */
.gai-heading strong,
h1 strong, h2 strong, h3 strong { font-weight: 700; }

.gai-caption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	line-height: 1.45;
	color: var(--wp--preset--color--ink-3);
}

.gai-prose > * + * { margin-top: 24px; }
.gai-prose h3 { margin-top: 56px; }
.gai-prose h4 { margin-top: 40px; }

/* --- Rules ---------------------------------------------------------------- */
.gai-rule { border: 0; border-top: 1px solid var(--wp--preset--color--rule); margin: 0; }
.gai-rule--strong { border-top-color: var(--wp--preset--color--rule-strong); }
:is(.gai-hero:not(.gai-hero--editorial), .gai-cta, .gai-section--ink, .gai-footer, .gai-on-ink) .gai-rule { border-top-color: var(--wp--preset--color--rule-inv); }

/* --- Motion --------------------------------------------------------------- */
.gai-js .gai-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--gai-slow) var(--gai-ease), transform var(--gai-slow) var(--gai-ease);
}
.gai-js .gai-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.gai-js .gai-reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}