/* Base: reset, typography helpers, buttons, reveal, reduced-motion banner. Tokens come from tokens.css. */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	background: var(--bg);
	color: var(--fg);
	-webkit-text-size-adjust: 100%;
	scrollbar-color: var(--ln-s) var(--bg);
}

body {
	font-family: var(--font-text);
	font-size: var(--fs-b);
	line-height: 1.6;
	overflow-x: clip;
	background: var(--bg);
	color: var(--fg);
	-webkit-font-smoothing: antialiased;
}

:lang(ar) {
	font-family: var(--font-ar);
	letter-spacing: 0;
	text-transform: none;
	font-style: normal;
}

:lang(ar) body {
	font-size: var(--fs-b-ar);
	line-height: calc(1.6 + var(--lh-ar-extra));
}

img,
svg,
canvas {
	display: block;
	max-width: 100%;
}

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

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: var(--focus-width) solid var(--focus);
	outline-offset: var(--focus-offset);
	border-radius: 2px;
}

::selection {
	background: var(--gold-300);
	color: var(--ink-900);
}

.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip {
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 200;
	background: var(--gold-300);
	color: var(--ink-900);
	padding: 10px 16px;
	font-weight: 700;
	transform: translateY(-200%);
}

.skip:focus {
	transform: none;
}

.wrap {
	width: min(100% - 2 * var(--margin), var(--container));
	margin-inline: auto;
	position: relative;
}

.mono {
	font-family: var(--font-mono);
	font-size: var(--fs-m);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 500;
}

:lang(ar) .mono,
:lang(ar).mono {
	font-family: var(--font-ar);
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
}

:lang(ar) .d1,
:lang(ar) .d2,
:lang(ar) h3 {
	letter-spacing: 0 !important;
	line-height: 1.25;
}

/* masked word reveal (words wrapped by core.js) */
.m {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-block: 0.14em;
	margin-block: -0.14em;
}

.mi {
	display: inline-block;
	will-change: transform;
}

.js .sp .mi {
	transform: translateY(112%);
	transition: transform var(--d-slow) var(--ease);
	transition-delay: calc(var(--i, 0) * var(--stagger));
}

.js .sp.in .mi {
	transform: none;
}

.js [data-r] {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity var(--d-base) var(--ease),
		transform var(--d-base) var(--ease);
	transition-delay: calc(var(--rd, 0) * 1ms);
}

.js [data-r].in {
	opacity: 1;
	transform: none;
}

/* reduced motion: everything is shown at once (also the safe state if the script never loads) */
.rm .sp .mi,
.rm [data-r] {
	transform: none;
	transition: none;
}

.rm [data-r] {
	opacity: 1;
}

/* buttons: chamfer plate, sweep fill along the cut */
.btn {
	--c: var(--cut);
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 54px;
	padding-inline: 28px 22px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.01em;
	cursor: pointer;
	border: 0;
	clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
	transition: color var(--d-fast) var(--ease);
}

.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gold-300);
	transform: translateX(calc(var(--dir) * -101%)) skewX(calc(var(--dir) * -20deg));
	transform-origin: 0 100%;
	transition: transform 0.6s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before {
	transform: none;
}

.btn .arr {
	width: 20px;
	height: 20px;
	transition: transform 0.5s var(--ease);
}

html[dir="rtl"] .btn .arr {
	transform: scaleX(-1);
}

.btn:hover .arr {
	transform: translateX(calc(var(--dir) * 5px));
}

html[dir="rtl"] .btn:hover .arr {
	transform: scaleX(-1) translateX(5px);
}

.btn-p {
	background: var(--blue-500);
	color: var(--white);
}

.btn-p:hover,
.btn-p:focus-visible {
	color: var(--ink-900);
}

.btn-g {
	background: transparent;
	color: var(--fg);
	position: relative;
}

.btn-g::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--ln-s);
	clip-path: polygon(
		0 0,
		calc(100% - var(--c)) 0,
		100% var(--c),
		100% 100%,
		var(--c) 100%,
		0 calc(100% - var(--c)),
		0 0,
		1px 1px,
		1px calc(100% - var(--c) - 0.4px),
		calc(var(--c) + 0.4px) calc(100% - 1px),
		calc(100% - 1px) calc(100% - 1px),
		calc(100% - 1px) calc(var(--c) + 0.4px),
		calc(100% - var(--c) - 0.4px) 1px,
		1px 1px
	);
}

.btn-g:hover {
	color: var(--ink-900);
}

/* class-driven reduced motion (set by the inline script in the layout from the OS setting; "Play animations" removes it) */
.rm *,
.rm *::before,
.rm *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

/* Lenis (vendored, v1.3.26) */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
	overflow: clip;
}

.lenis [data-lenis-prevent] {
	overscroll-behavior: contain;
}

/* Language switcher: lists enabled locales only (component: language-switcher). */
.langs ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-16);
	list-style: none;
}

.langs a {
	color: var(--fg2);
	font-size: var(--fs-s);
	text-decoration: none;
	padding-block: var(--sp-4);
	border-block-end: 1px solid transparent;
}

.langs a:hover,
.langs a[aria-current] {
	color: var(--fg);
	border-block-end-color: var(--acc);
}

.langs a:focus-visible {
	outline: var(--focus-width) solid var(--focus);
	outline-offset: var(--focus-offset);
}