/* Anton — SIL Open Font License 1.1, self-hosted. See assets/fonts/Anton-OFL.txt.
   Subsetted to latin and latin-ext; the browser only fetches the range it needs. */
@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-latin-ext-400.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Neon graffiti palette. Every accent is legible on the void background;
	   none of them is legible under white text, so accent fills always carry
	   --cika-color-accent-contrast instead. */
	--cika-color-void: #05060a;
	--cika-color-white: #ffffff;
	--cika-color-acid: #bfe704;
	--cika-color-acid-deep: #a3c703;
	--cika-color-magenta: #f1038f;
	/* Magenta brightens rather than deepens on hover: a darker magenta drops
	   below 4.5:1 against the dark text every accent fill carries. */
	--cika-color-magenta-lift: #ff45ad;
	--cika-color-cyan: #0dd8f2;
	--cika-color-cyan-deep: #0ab3c9;

	/* Neutral surfaces, lifted off the void in even steps. */
	--cika-color-night: #0e121c;
	--cika-color-slate: #161b28;
	--cika-color-smoke: #1e2432;
	--cika-color-graphite: #2a3040;
	--cika-color-steel: #3d4557;
	--cika-color-ash: #a2aabb;

	/* Historic palette names, remapped onto the neon system so the editor
	   palette and any existing preset class keep resolving. */
	--cika-color-ink: var(--cika-color-void);
	--cika-color-paper: var(--cika-color-white);
	--cika-color-red: var(--cika-color-acid);
	--cika-color-red-dark: var(--cika-color-acid-deep);
	--cika-color-mustard: var(--cika-color-magenta);
	--cika-color-charcoal: var(--cika-color-night);
	--cika-color-muted: var(--cika-color-ash);

	/* Semantic roles: everything in the theme paints through these. */
	--cika-color-bg: var(--cika-color-void);
	--cika-color-surface: var(--cika-color-night);
	--cika-color-surface-raised: var(--cika-color-slate);
	--cika-color-surface-subtle: #0a0c13;
	--cika-color-surface-strong: var(--cika-color-smoke);
	--cika-color-text: var(--cika-color-white);
	--cika-color-text-on-paper: var(--cika-color-white);
	--cika-color-text-muted: var(--cika-color-ash);
	--cika-color-border: var(--cika-color-graphite);
	--cika-color-border-on-paper: #262c3b;
	--cika-color-border-strong: var(--cika-color-steel);
	--cika-color-accent: var(--cika-color-acid);
	--cika-color-accent-hover: var(--cika-color-acid-deep);
	--cika-color-accent-contrast: var(--cika-color-void);
	--cika-color-accent-2: var(--cika-color-magenta);
	--cika-color-accent-2-hover: var(--cika-color-magenta-lift);
	--cika-color-link: var(--cika-color-cyan);
	--cika-color-link-hover: var(--cika-color-acid);
	--cika-color-focus: var(--cika-color-cyan);
	--cika-color-danger: #ff5470;
	--cika-color-success: #35d39a;
	--cika-color-warning: var(--cika-color-acid);
	/* Anton is a single weight (400) that draws ultra-bold, so headings must not
	   be synthetically emboldened on top of it. */
	--cika-font-display: "Anton", "Archivo Black", "Arial Black", "Helvetica Neue", Impact, sans-serif;
	--cika-font-body: Arial, Helvetica, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--cika-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--cika-text-xs: 0.75rem;
	--cika-text-sm: 0.875rem;
	--cika-text-md: 1rem;
	--cika-text-lg: clamp(1.125rem, 1.5vw, 1.25rem);
	--cika-text-xl: clamp(1.5rem, 2.5vw, 2.125rem);
	--cika-text-2xl: clamp(2rem, 4vw, 3.75rem);
	--cika-text-display: clamp(3.25rem, 9vw, 8.5rem);
	/* Shared legal/editorial table-of-contents scale. */
	--cika-toc-text-size: 0.875rem;
	--cika-leading-tight: 0.92;
	--cika-leading-heading: 1.02;
	--cika-leading-body: 1.65;
	--cika-tracking-tight: -0.025em;
	--cika-tracking-wide: 0.12em;
	--cika-space-1: 0.25rem;
	--cika-space-2: 0.5rem;
	--cika-space-3: 0.75rem;
	--cika-space-4: 1rem;
	--cika-space-5: 1.25rem;
	--cika-space-6: 1.5rem;
	--cika-space-8: 2rem;
	--cika-space-10: 2.5rem;
	--cika-space-12: 3rem;
	--cika-space-16: 4rem;
	--cika-container: 90rem;
	--cika-container-wide: 113.75rem;
	--cika-gutter: clamp(1rem, 3vw, 3rem);
	/* One slim row in both header states; the hero state only changes the skin. */
	--cika-header-height: 3.75rem;
	--cika-border-thin: 1px;
	--cika-border-medium: 2px;
	--cika-border-heavy: 4px;
	--cika-radius-sm: 0.125rem;
	--cika-radius-md: 0.25rem;
	--cika-radius-lg: 0.5rem;
	/* Hard offset shadows read as a neutral edge on the void; the accent
	   variant is reserved for surfaces that should feel lit. */
	--cika-shadow-sm: 3px 3px 0 var(--cika-color-border-strong);
	--cika-shadow-md: 7px 7px 0 var(--cika-color-border-strong);
	--cika-shadow-red: 7px 7px 0 var(--cika-color-accent);
	--cika-shadow-accent: 7px 7px 0 var(--cika-color-accent);
	--cika-shadow-accent-2: 7px 7px 0 var(--cika-color-accent-2);
	--cika-duration-fast: 140ms;
	--cika-duration-normal: 240ms;
	--cika-duration-slow: 420ms;
	--cika-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cika-color-bg);
	color: var(--cika-color-text);
	font-family: var(--cika-font-body);
	font-size: var(--cika-text-md);
	line-height: var(--cika-leading-body);
	text-rendering: optimizeLegibility;
	/* The display face has one weight and is already ultra-bold. Faking a
	   heavier one on top of it just smears the letterforms. Faces that do ship
	   a real bold are unaffected. */
	font-synthesis: style small-caps;
	font-synthesis-weight: none;
}

body,
button,
input,
select,
textarea {
	font-family: var(--cika-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 0.6em;
	font-family: var(--cika-font-display);
	font-weight: 700;
	line-height: var(--cika-leading-heading);
	letter-spacing: var(--cika-tracking-tight);
	text-wrap: balance;
}

h1 { font-size: var(--cika-text-display); }
h2 { font-size: var(--cika-text-2xl); }
h3 { font-size: var(--cika-text-xl); }
h4 { font-size: var(--cika-text-lg); }

p,
ul,
ol,
blockquote {
	margin-block: 0 1.25em;
}

a {
	color: inherit;
	text-decoration-color: var(--cika-color-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color var(--cika-duration-fast) var(--cika-ease-standard), text-decoration-color var(--cika-duration-fast) var(--cika-ease-standard);
}

a:hover {
	color: var(--cika-color-link);
	text-decoration-thickness: 0.14em;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--cika-color-focus);
	outline-offset: 3px;
}

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

iframe,
embed,
object {
	max-width: 100%;
}

button,
input,
select,
textarea {
	max-width: 100%;
	border: var(--cika-border-medium) solid var(--cika-color-border-on-paper);
	border-radius: var(--cika-radius-sm);
	background: var(--cika-color-surface-raised);
	color: var(--cika-color-text);
	font: inherit;
	transition: border-color var(--cika-duration-fast) var(--cika-ease-standard), box-shadow var(--cika-duration-fast) var(--cika-ease-standard), transform var(--cika-duration-fast) var(--cika-ease-standard);
}

input,
select,
textarea {
	padding: 0.75rem 0.9rem;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

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

:where(input, select, textarea):focus {
	border-color: var(--cika-color-accent);
	box-shadow: 0 0 0 3px rgb(13 216 242 / 32%);
}

:where(input, select, textarea):disabled {
	cursor: not-allowed;
	opacity: 0.58;
}

input[type="checkbox"],
input[type="radio"] {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	padding: 0;
	accent-color: var(--cika-color-accent);
	vertical-align: -0.15em;
}

button,
input[type="button"],
input[type="submit"],
.wp-element-button {
	min-height: 2.75rem;
	padding: 0.7rem 1.15rem;
	border-color: var(--cika-color-accent);
	background: var(--cika-color-accent);
	color: var(--cika-color-accent-contrast);
	font-weight: 800;
	letter-spacing: 0.035em;
	cursor: pointer;
}

:where(button, input[type="button"], input[type="submit"], .wp-element-button):hover:not(:disabled) {
	border-color: var(--cika-color-accent-hover);
	background: var(--cika-color-accent-hover);
	color: var(--cika-color-accent-contrast);
}

table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

th,
td {
	padding: var(--cika-space-3);
	border: var(--cika-border-thin) solid var(--cika-color-border);
	text-align: start;
}

pre,
code,
kbd,
samp {
	font-family: var(--cika-font-mono);
}

pre {
	max-width: 100%;
	overflow-x: auto;
}

:where(p, li, dd, figcaption, td, th) {
	overflow-wrap: anywhere;
}

.alignwide { width: min(100%, var(--cika-container-wide)); }
.alignfull { width: 100%; }

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