/* Aïcha War — base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 400 var(--fs-body) / var(--lh-body) var(--f-text);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img, video, svg, canvas { display: block; max-width: 100%; height: auto; }
img { font-style: italic; }
figure { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 200; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent); color: var(--paper); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: fixed; z-index: 1000;
	top: 12px; left: 12px;
	padding: 12px 18px;
	background: var(--ink); color: var(--paper);
	font: 500 var(--fs-small) / 1 var(--f-text);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }
.site-main:focus { outline: none; }

/* Layout primitives ---------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--margin);
}
.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gutter);
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--margin);
}

/* Type ------------------------------------------------------------------ */
.label {
	font: 400 var(--fs-label) / 1.4 var(--f-mono);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--fg-2);
}
.label a { color: inherit; }
.lead {
	font: 300 var(--fs-lead) / 1.4 var(--f-text);
	letter-spacing: -0.01em;
	max-width: 34ch;
}
.lead--xl {
	font: 300 var(--fs-lead) / 1.35 var(--f-display);
	letter-spacing: -0.03em;
	max-width: 26ch;
	text-wrap: balance;
}
em { font-style: italic; }
h1 em, h2 em, .lead--xl em, .hero__title em, .cta__title em { color: var(--link); font-style: italic; }
.surface-accent h2 em, .surface-accent .cta__title em { color: var(--paper); }

.page-title, .article__title, .project__title {
	font: 300 var(--fs-h1) / var(--lh-display) var(--f-display);
	letter-spacing: var(--track-display);
	text-wrap: balance;
	max-width: 14ch;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 400 var(--fs-h3) / var(--lh-h3) var(--f-display); letter-spacing: -0.015em; margin-top: 2.2em; }
.prose h3 { font: 500 var(--fs-h4) / 1.3 var(--f-display); margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote { margin: 2em 0; padding-left: 1.2em; border-left: 1px solid var(--line); font: 300 var(--fs-lead) / 1.4 var(--f-text); }
.prose img { margin-block: 2em; }
.prose code { font: 0.9em var(--f-mono); background: var(--accent-tint); color: #2b32a0; padding: 0.1em 0.3em; }
.prose a { color: var(--link); }

/* Buttons ---------------------------------------------------------------- */
.btn {
	--pad-y: 1.05rem;
	--pad-x: 1.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	padding: var(--pad-y) var(--pad-x);
	border-radius: 999px;
	font: 500 var(--fs-small) / 1 var(--f-text);
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
	will-change: transform;
}
.btn .icon-arrow { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon-arrow, .btn:focus-visible .icon-arrow { transform: rotate(-45deg); }
.btn--solid { background: var(--btn-bg); color: var(--btn-fg); }
.btn--solid:hover { background: var(--accent); color: var(--paper); }
.surface-accent .btn--solid:hover, .surface-ink .btn--solid:hover { background: var(--paper); color: var(--ink); }
.btn--ghost { border: 1px solid var(--line); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--inverse { background: var(--paper); color: var(--accent); }
.btn--inverse:hover { background: var(--ink); color: var(--paper); }
.btn--small { --pad-y: 0.75rem; --pad-x: 1.2rem; min-height: 44px; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.chip {
	display: inline-flex; align-items: center;
	min-height: 40px; padding: 0.5rem 1rem;
	border: 1px solid var(--line); border-radius: 999px;
	font: 400 var(--fs-label) / 1 var(--f-mono);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--fg); text-decoration: none;
	transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.chip:hover { border-color: var(--fg); }
.chip[aria-current="true"], .chip[aria-current="page"] { background: var(--accent-tint); border-color: var(--accent-tint); color: #2b32a0; }

/* Reveal (desktop only; text stays visible if JS or GSAP fails) ---------- */
.split-line { display: block; }
.split-mask { display: block; overflow: clip; overflow-clip-margin: 0.15em; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* View transitions -------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.28s var(--ease-in-out) both aw-fade-out; }
::view-transition-new(root) { animation: 0.45s var(--ease-out) both aw-fade-in; }
@keyframes aw-fade-out { to { opacity: 0; } }
@keyframes aw-fade-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	@view-transition { navigation: none; }
}