/* ==========================================================================
   Base — reset, typography, accessibility helpers
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--sticky-h) + 16px);
	scroll-padding-bottom: 96px; /* Keyboard focus never lands under the sticky ad / cookie bar. */
}

/* A modal dialog (menu drawer, search) locks the page behind it. */
html:has(dialog:modal) {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: var(--lh-ui);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-synthesis: style; /* Mukta, Inter and Martel ship upright 400/500/700 only: never fake a weight; a browser slant keeps <em> visible in English (Devanagari opts out below). */
	hyphens: none;
	overflow-wrap: break-word;
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 700;
	line-height: var(--lh-tight);
	text-wrap: balance;
}

/* Author-set display:* must never beat the hidden attribute (native-share and load-more buttons did). */
[hidden] {
	display: none !important;
}

::placeholder {
	color: var(--muted);
	opacity: 1;
}

main:focus {
	outline: 0;
}

/* Devanagari has no italic: a browser-slanted matra is unreadable. */
:lang(ne) em,
:lang(ne) i,
:lang(ne) cite,
:lang(ne) dfn,
:lang(ne) address {
	font-style: normal;
}

time,
.num {
	font-variant-numeric: tabular-nums;
}

p, ul, ol, figure, blockquote {
	margin: 0;
}

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

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

img {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

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

::selection {
	background: var(--sky);
	color: var(--navy);
}

.icon {
	flex: none;
	width: var(--icon-size, 20px);
	height: var(--icon-size, 20px);
}

.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:focus {
	position: fixed !important; /* beats .screen-reader-text's absolute !important */
	top: 8px;
	left: 8px;
	z-index: var(--z-skip);
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 12px 16px;
	background: var(--bg);
	color: var(--ink);
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
}

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

/* Print, every page: content only, black on white, from either theme (dark tokens would print near-white text).
   The fixed sticky ad and the stuck nav would repeat on every sheet. The reset sits after the token blocks at the
   same specificity. Articles hide more in single.css. */
@media print {
	:root:not([data-theme="none"]),
	:root[data-theme] {
		color-scheme: light;
		--heading: CanvasText;
		--ink: CanvasText;
		--text: CanvasText;
		--muted: CanvasText;
		--blue: CanvasText;
		--brand: CanvasText;
		--line: GrayText;
		--line-strong: GrayText;
		--bg-soft: Canvas;
		--fill-selected: CanvasText;
		--white: Canvas;
	}

	body { background: Canvas; color: CanvasText; }

	.site-nav,
	.site-footer,
	.sticky-ad,
	.home-live,
	.ad-slot { display: none !important; }
}