/**
 * Redesign 2026 — design tokens and page shell.
 *
 * Loaded after the legacy stylesheets, so plain selectors win on equal
 * specificity. `!important` is used only where the legacy rules already use it.
 */

:root {
	/* Surfaces */
	--nw-deep: #15123f;
	--nw-deeper: #0d0b2c;
	--nw-footer-bg: #0f0d33;
	--nw-card: #fff;
	--nw-surface: #f0eef7;
	--nw-surface-2: #f6f5fb;

	/* Brand */
	--nw-accent: #7c0070;
	--nw-accent-hover: #a3159a;
	--nw-indigo: #6d6cf6;
	--nw-gold: #ffc83d;
	--nw-rose: #c689c0;

	/* Text */
	--nw-ink: #17153a;
	--nw-ink-soft: #2a2846;
	--nw-meta: #9a98af;
	--nw-on-dark: #e9e7f6;
	--nw-on-dark-dim: #cfcde6;
	--nw-on-dark-mute: #a4a1c4;
	--nw-on-dark-faint: #75729c;

	/* Lines */
	--nw-hairline: #ececf2;
	--nw-hairline-dark: #2a2560;
	--nw-outline-dark: #3a3670;
	--nw-chip-dark: #221d55;

	/* Signals */
	--nw-up: #22a45a;
	--nw-down: #e0435f;

	/* Metrics */
	--nw-shell: 1240px;
	--nw-gutter: 24px;
	--nw-radius: 16px;
	--nw-radius-sm: 14px;
	--nw-ticker-h: 44px;
	--nw-bar-h: 78px;

	--nw-shadow-card: 0 16px 32px rgba(15, 10, 50, 0.16);
	--nw-ease: 0.22s ease;
}

/* Fixed-header offset — global, because the header bar height is global.
   The legacy rules set this with !important, so match. */
body {
	padding-top: var(--nw-bar-h) !important;
}

body.nw-has-ticker {
	padding-top: calc(var(--nw-bar-h) + var(--nw-ticker-h)) !important;
}

/* Page-level colours stay scoped to the redesigned templates. Other pages
   (notably the home page template, which ships its own dark palette) must
   keep their own body background and text colour. */
body.category,
body.single {
	background-color: var(--nw-deep);
	font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif;
	color: var(--nw-ink);
	-webkit-font-smoothing: antialiased;
}

/* Full-bleed dark bars with a centred 1240px content shell. Header and
   footer are global; the main shell only on the redesigned templates. */
.header > .container,
footer.footer > .container {
	max-width: var(--nw-shell);
	padding-left: var(--nw-gutter);
	padding-right: var(--nw-gutter);
	background: transparent;
}

body.category .main > .container,
body.single .main > .container {
	max-width: var(--nw-shell);
	padding-left: var(--nw-gutter);
	padding-right: var(--nw-gutter);
	background: transparent;
}

/* 404 has little content, so pin the footer to the bottom of the viewport. */
body.error404 {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
}

/* The header banner adds a 90px body margin above 992px; subtract it so the
   page fills the viewport exactly instead of overflowing by that much. */
@media (min-width: 992px) {
	body.error404.banner-active {
		min-height: calc(100vh - 90px);
	}
}

body.error404 .main {
	flex: 1 0 auto;
}

body.error404 footer.footer {
	margin-top: auto;
	flex: none;
}

@media (max-width: 992px) {
	:root {
		--nw-gutter: 16px;
	}
}

@media screen and (max-width: 576px) {
	:root {
		--nw-ticker-h: 40px;
		--nw-bar-h: 72px;
	}
}

/* --- Animated self-hosted logo -------------------------------------------
 * Self-hosted "typing" logo used in the header and footer instead of the
 * static logo image. The font is a ~1 KB woff2 subset (only the glyphs the
 * logo needs: n o w r i e s !), embedded inline so it loads nothing external.
 */
@font-face {
	font-family: 'JetBrains Mono Subset';
	src: url(data:font/woff2;base64,d09GMgABAAAAAAQQAA4AAAAAB9AAAAO8AAJN0wAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbIBwqBmAAXBEICoVIhEMBNgIkAywLGAAEIAWEEAcgG0IGIxFmg3IOxD8TeDK8xjOEl8ymhXbDUQVUNU41XmOcEWn/kYPnP12/+95kbSaCuFfqloBnK8Qrzm8axCo6PLuItRx6k/4H8Ec//Lr3DWwf0uC7P5jn96m0uUFtoc0hUaGzLhQGwPxfju82H7cmnljG2R40lk0aa4JMgQR6XxsWWO+ojXEYpakbY/I4ApJpb06VmEUAHwBQFEERPIoIAlia0QIZOXriTIp4AP8FABRhBzqhm4Ubl+3cTCMiCMDTuTqXHGjaZQETtsti+shQUChRFYW7HT8ceFhr9pg//zLMH+kGCIB20LdAK/KAAgaoh0GAeniMBUKKKHlas4p1bGEHe/6LELWZ7Z8wu6665IKzCfgHQf4rAsAB0ADwgWpIAITHSP6ndX33vI1Ktn4Y1uvc0gv9ZWlVJHnlypUK+MTPXflpU5dl83GSVG2aOXHGSqAOl3NIDfsd1JrkhU2foRLVEGezyy9FPqrUmsdEsZJYxMWPHdKfSjJ78FF1vOr6ySx77b616V3iUQMV4sy6xW7e1RuNr9c0XdAHL7Tzr1WbXMkazZ0z382dmd4H9CDrHvFdW4QjoLEiSxYZD1PzVHtxZD1eVDJVjQ/a0P9S2/G4M7sh0vtCCL6EFRU1CFJRC3qwU2wPE1ydYKBf74Qg3F5e2TvDjHhck8huQeERMgYsmVQsTM3S0RBtptlANTlZ8oSsIk8ltxMwo1/WBSIdldUDE3A635XjdZeslg8BXuaUc6DDqeHnWHNLtFW1meuc25rumjaid8I26OhJrnWJ3ww2y6eiaGWFtcnZ6YIDGPAO6UYKITqZwplsrYIzVRD1cDidaDEcHNUFEKotvY6Tkllnt1Pg+73/J/HkV75KC6RAuVwtkdZJgWVRs61Qbmsyg0rFNhLtgAEKWF0HrQCmgXY3IQLopJdnuhb6LYkGfs2MzGeAT1u9z49ee/Jn1X3611sK5FEABP5/p84lkBbMQahxp3OZn6FJ2DTbzBC0FpoANfymD/FvRQAnN9nMYfJyFgNfgfkvNV4JuAsuFnpwV6yEfBEbBvNj2KOJc8yUAafl6SYpI9jCVvaxGYA0E1IW5DVeZX8QIk2txRuqJcrPQE9QvsPr8Xq7AyXpIHEJb00YScYbIFuM0sCQL4jm5tIQdCaM5eBz3LkTQZ3D+qlnMS1slz7SDWu9LqKXBD3smgkUyBfmFdmXrbVPNt4mBw2qtueBpFGloEW5XT81cxB+L5MsoZIayc8pa6Ai+VJbMbE+zLQET0pV7j9ZABAAAAA=) format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: block;
}

.nw-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	/* !important: template-home-page-v2.css forces `body * { font-family:
	   ... !important }` on the front page, which would otherwise win over
	   this regardless of specificity. */
	font-family: 'JetBrains Mono Subset', monospace !important;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	user-select: none;

	/* number of characters in "noworries!", needed for steps() and the width */
	--nw-logo-char-count: 10;
	/* real JetBrains Mono character width; not `ch`, which is measured off the
	   digit "0" — a glyph this subset doesn't carry, so the browser would fall
	   back to the system monospace font just to measure it */
	--nw-logo-char-width: 0.6em;

	--nw-logo-typing-delay: 0.3s;
	--nw-logo-typing-duration: 1.1s;
	--nw-logo-selection-delay: 0.25s;
	--nw-logo-selection-duration: 0.35s;
}

.nw-logo-icon {
	display: inline-flex;
	flex: none;
	line-height: 1;
	font-size: 1em;
}

/* Width is reserved for the full final text up front, so the logo's overall
   width never changes as it types — the icon never shifts. */
.nw-logo-text-wrap {
	display: inline-flex;
	align-items: center;
	flex: none;
	width: calc(var(--nw-logo-char-count) * var(--nw-logo-char-width) + 0.3em);
	padding: 0.05em 0.15em;
	border-radius: 0.15em;
	background-color: transparent;
	animation: nw-logo-select-highlight var(--nw-logo-selection-duration) ease forwards;
	animation-delay: calc(var(--nw-logo-typing-delay) + var(--nw-logo-typing-duration) + var(--nw-logo-selection-delay));
}

.nw-logo-text {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	width: 0;
	/* `body *` in template-home-page-v2.css sets `font-family` with
	   !important on every element, including this one directly — inheriting
	   it from .nw-logo above isn't enough, it needs its own !important too. */
	font-family: 'JetBrains Mono Subset', monospace !important;
	color: #fff;
	animation: nw-logo-typing var(--nw-logo-typing-duration) steps(var(--nw-logo-char-count), end) forwards;
	animation-delay: var(--nw-logo-typing-delay);
}

@keyframes nw-logo-typing {
	from { width: 0; }
	to   { width: calc(var(--nw-logo-char-count) * var(--nw-logo-char-width)); }
}

@keyframes nw-logo-select-highlight {
	from { background-color: transparent; }
	to   { background-color: var(--nw-accent); }
}

@media (prefers-reduced-motion: reduce) {
	.nw-logo-text-wrap {
		animation: none;
		background-color: var(--nw-accent);
	}

	.nw-logo-text {
		animation: none;
		width: calc(var(--nw-logo-char-count) * var(--nw-logo-char-width));
	}
}