/* ShehzadOnline — design tokens, reset, typography, layout primitives.
   Values are lifted from the approved references (oklch palette, 1400px container, clamp type scale). */

:root {
	/* colour */
	--ink: oklch(0.2 0.05 268);
	--blue: oklch(0.52 0.21 262);
	--blue-d: oklch(0.45 0.2 264);
	--blue-m: oklch(0.62 0.19 258);
	--navy: oklch(0.19 0.06 268);
	--navy-2: oklch(0.25 0.07 266);
	--deep: oklch(0.14 0.05 268);
	--cyan: oklch(0.8 0.13 220);
	--cyan-d: oklch(0.58 0.15 235);
	--sub: oklch(0.48 0.025 260);
	--body: oklch(0.38 0.035 262);
	--muted: oklch(0.6 0.02 260);
	--line: oklch(0.89 0.01 255);
	--line-soft: oklch(0.93 0.008 255);
	--page: oklch(0.985 0.004 95);
	--stone: oklch(0.965 0.008 255);
	--tint: oklch(0.955 0.03 255);
	--light-blue: oklch(0.955 0.028 252);
	--on-dark: oklch(0.84 0.02 262);
	--green: oklch(0.52 0.14 152);
	--green-dot: oklch(0.62 0.15 150);

	/* layout */
	--container: 1400px;
	--gutter: clamp(20px, 4vw, 48px);
	--header-h: 76px;

	/* type */
	--font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
	--fs-display: clamp(42px, 6.2vw, 100px);   /* hero h1 */
	--fs-cta: clamp(48px, 8.4vw, 136px);        /* closing CTA */
	--fs-geo: clamp(38px, 5.4vw, 84px);
	--fs-h2: clamp(34px, 4.6vw, 68px);          /* section headline */
	--fs-h2-lg: clamp(30px, 3.6vw, 52px);
	--fs-h2-ed: clamp(28px, 3.1vw, 46px);
	--fs-lead: clamp(18px, 1.4vw, 20px);
	--fs-body: 17px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--page);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.so-menu-open { overflow: hidden; }
main { overflow-x: clip; } /* decorative glows may extend past the viewport */

img, svg { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.so-dark :focus-visible, .so-footer :focus-visible { outline-color: var(--cyan); }

.screen-reader-text, .so-sr {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.so-skip {
	position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--navy); color: #fff;
	padding: 12px 18px; border-radius: 999px; font-weight: 600; transition: top .15s;
}
.so-skip:focus { top: 12px; color: #fff; }

/* layout primitives */
.so-container {
	max-width: var(--container); margin-inline: auto;
	padding-inline: var(--gutter);
}
.so-section { position: relative; }
.so-pad { padding-block: clamp(64px, 7vw, 104px); }
.so-pad-lg { padding-block: clamp(72px, 8vw, 128px); }
.so-pad-sm { padding-block: clamp(52px, 6vw, 88px); }
.so-mono { font-family: var(--mono); }

/* editorial two-column (sticky heading + list) — stacks below 960px */
.so-ed {
	display: grid; grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 6vw, 112px); align-items: start;
}
@media (min-width: 960px) {
	.so-ed { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
	.so-ed__sticky { position: sticky; top: 112px; }
}

/* section background rhythm */
.so-bg-fade {
	background: linear-gradient(180deg, var(--page) 0%, oklch(0.958 0.005 95) 14%, oklch(0.958 0.005 95) 86%, var(--page) 100%);
}
.so-bg-blue {
	background: linear-gradient(180deg, var(--page) 0%, var(--light-blue) 16%, var(--light-blue) 84%, var(--page) 100%);
}
.so-bg-warm {
	background: linear-gradient(180deg, var(--page) 0%, oklch(0.968 0.01 85) 18%, oklch(0.968 0.01 85) 82%, var(--page) 100%);
}
.so-dark {
	position: relative; overflow: hidden; color: #fff;
	background: radial-gradient(ellipse 60% 70% at 100% 0%, oklch(0.35 0.15 262 / .55), transparent 70%),
		linear-gradient(170deg, oklch(0.18 0.06 268), oklch(0.16 0.055 268));
}

/* decorative glows (aria-hidden spans) */
.so-glow {
	position: absolute; border-radius: 50%; pointer-events: none; filter: blur(30px);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}