/*
 * conspicuity.eu: the look of the Electronic Conspicuity Monitor.
 *
 * Reproduces what the pages had on www.saccani.net under the io-volo-libero
 * theme (files/io-volo-libero/: theme.json and assets/css/theme.css) without
 * WordPress. The page content and the ec-*.js scripts read WordPress custom
 * properties (--wp--preset--color--*, --wp--preset--font-family--*), some of
 * them through getComputedStyle to colour the charts, so those names are
 * kept and defined here, light and dark.
 *
 * Paths are relative to this file, so the same CSS works under /preview/.
 */

/* ---- Fonts: self-hosted, SIL OFL 1.1 (licences in fonts/OFL-*.txt) ---- */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
	src: url(fonts/archivo-latin-wdth-normal.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: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
	src: url(fonts/archivo-latin-ext-wdth-normal.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; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
	src: url(fonts/literata-latin-opsz-normal.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: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
	src: url(fonts/literata-latin-ext-opsz-normal.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; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap;
	src: url(fonts/literata-latin-opsz-italic.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: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap;
	src: url(fonts/literata-latin-ext-opsz-italic.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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
	src: url(fonts/ibm-plex-mono-latin-400-normal.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
	src: url(fonts/ibm-plex-mono-latin-ext-400-normal.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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
	src: url(fonts/ibm-plex-mono-latin-500-normal.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
	src: url(fonts/ibm-plex-mono-latin-ext-500-normal.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; }

/* ---- Tokens: the theme.json palette and presets under their WordPress names ---- */
:root {
	--wp--preset--color--base: #F3F5F2;
	--wp--preset--color--contrast: #14212B;
	--wp--preset--color--accent-1: #A3195B;
	--wp--preset--color--accent-2: #1F5F8B;
	--wp--preset--color--accent-3: #E7ECE8;
	--wp--preset--color--accent-4: #56666E;
	--wp--preset--color--accent-5: #EDF1EE;
	--wp--preset--color--accent-6: #C6D0CE;
	--wp--preset--font-family--archivo: "Archivo", "Arial Narrow", Arial, sans-serif;
	--wp--preset--font-family--literata: "Literata", Georgia, "Times New Roman", serif;
	--wp--preset--font-family--plex-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
	--wp--preset--font-size--x-small: 0.75rem;
	--wp--preset--font-size--small: 0.9375rem;
	--wp--preset--font-size--medium: 1.0625rem;
	--wp--preset--font-size--large: 1.25rem;
	--wp--preset--font-size--x-large: 1.4375rem;
	--wp--preset--font-size--xx-large: clamp(1.9rem, 4.4vw, 3.125rem);
	--wp--preset--font-size--xxx-large: clamp(2.125rem, 5.4vw, 3.625rem);
	--wp--preset--spacing--20: 8px;
	--wp--preset--spacing--30: 16px;
	--wp--preset--spacing--40: 24px;
	--wp--preset--spacing--50: clamp(28px, 4vw, 44px);
	--wp--preset--spacing--60: clamp(36px, 6vw, 64px);
	--wp--preset--spacing--70: clamp(48px, 8vw, 96px);
	--wp--style--global--content-size: 680px;
	--wp--style--global--wide-size: 1120px;
	--wp--style--block-gap: var(--wp--preset--spacing--30);
	--wp--style--root--padding-left: clamp(16px, 4vw, 40px);
	--wp--style--root--padding-right: clamp(16px, 4vw, 40px);
	--ivl-iso: url(img/isolines-light.svg);
	--ivl-mono: var(--wp--preset--font-family--plex-mono);
	--ivl-display: var(--wp--preset--font-family--archivo);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--base: #0E151B;
		--wp--preset--color--contrast: #E4EBE9;
		--wp--preset--color--accent-1: #F06BA8;
		--wp--preset--color--accent-2: #7DB7E0;
		--wp--preset--color--accent-3: #15202A;
		--wp--preset--color--accent-4: #8DA0A7;
		--wp--preset--color--accent-5: #121B23;
		--wp--preset--color--accent-6: #26343E;
		--ivl-iso: url(img/isolines-dark.svg);
		color-scheme: dark;
	}
}

/* ---- Base: the global styles WordPress printed for the theme ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: -0.1px;
	line-height: 1.6;
	overflow-wrap: break-word;
}
a { color: currentColor; text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: .1em; }
a:hover { color: var(--wp--preset--color--accent-2); }
a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.12;
}
h1 { font-size: var(--wp--preset--font-size--xxx-large); line-height: 1.02; }
h2 { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.04; }
h3 { font-size: var(--wp--preset--font-size--x-large); }
h4, h5 { font-size: var(--wp--preset--font-size--large); }
h6 { font-size: var(--wp--preset--font-size--medium); letter-spacing: 1.4px; text-transform: uppercase; }
blockquote, caption, figcaption, h1, h2, h3, h4, h5, h6, p { text-wrap: pretty; }
/* Not canvas or svg: Leaflet sizes its canvas renderer larger than the map. */
img, video { max-width: 100%; }
img { height: auto; }
:where(figure) { margin: 0 0 1em; }
:where(pre) { overflow-x: auto; }
code { font-family: var(--wp--preset--font-family--plex-mono); font-size: 0.875em; }

.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip-path: none; height: auto; width: auto; margin: 0; z-index: 100000;
	left: 6px; top: 6px; padding: 12px 20px;
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base);
	font-family: var(--ivl-display); font-weight: 600;
}

/* ---- Layout: WordPress "constrained" layout, 680px text, 1120px wide ---- */
.has-global-padding {
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
}
.is-layout-constrained { --ecs-measure: var(--wp--style--global--content-size); }
.ivl-page-wide, .ivl-page-wide .is-layout-constrained { --ecs-measure: var(--wp--style--global--wide-size); }
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--ecs-measure);
	margin-left: auto !important;
	margin-right: auto !important;
}
.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }
:where(.is-layout-constrained) > * { margin-block-start: var(--wp--style--block-gap); margin-block-end: 0; }
:where(.is-layout-constrained) > :first-child { margin-block-start: 0; }
:where(.is-layout-constrained) > :last-child { margin-block-end: 0; }
.wp-block-post-content { display: flow-root; }
.wp-block-post-title { word-break: break-word; }

/* ---- Header: chart title block with isolines ---- */
.ecs-header {
	background-image: var(--ivl-iso);
	background-size: 100% 100%;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	padding: 30px var(--wp--style--root--padding-right) 20px var(--wp--style--root--padding-left);
}
.ecs-header__bar {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 14px 24px;
}
/* Brand: the logo (a transmitting dot, the live dot of the nav with two radio
   arcs), the name, and the subtitle in mono under it (9 October 2026). */
.ecs-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}
.ecs-brand:hover { color: inherit; }
.ecs-brand:hover .ecs-brand__name { text-decoration: underline; }
.ecs-logo {
	flex: none;
	width: clamp(34px, 5vw, 48px);
	height: auto;
	overflow: visible;
}
.ecs-logo__dot { fill: var(--wp--preset--color--accent-1); }
.ecs-logo path {
	fill: none;
	stroke: var(--wp--preset--color--accent-1);
	stroke-width: 2.6;
	stroke-linecap: round;
}
.ecs-logo__arc1 { animation: ecs-wave 2.4s ease-in-out infinite; }
.ecs-logo__arc2 { animation: ecs-wave 2.4s ease-in-out 0.3s infinite; }
@keyframes ecs-wave { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.ecs-logo path { animation: none; opacity: 0.7; }
}
.ecs-brand__text { display: flex; flex-direction: column; gap: 6px; }
.ecs-brand__name {
	font-family: var(--ivl-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: clamp(1.45rem, 3.4vw, 2.25rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.ecs-brand__tag {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: clamp(0.7rem, 1.6vw, 0.8rem);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-4);
}
.ecs-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	font-family: var(--ivl-display);
	font-stretch: 85%;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
}
.ecs-nav a {
	display: inline-block;
	padding-block: 4px;
	border-bottom: 2px solid transparent;
}
.ecs-nav a:hover { border-color: var(--wp--preset--color--accent-1); color: inherit; }
.ecs-nav a[aria-current="page"] { border-color: var(--wp--preset--color--contrast); }
.ecs-nav .is-live > a::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	vertical-align: 1px;
	animation: ivl-blink 2s ease-in-out infinite;
}
@keyframes ivl-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
	.ecs-nav .is-live > a::before { animation: none; }
}

/* ---- Main and page title ---- */
.ivl-main { padding-block: 44px 56px; }
.ivl-page-title { font-stretch: 82%; }
.ivl-page .wp-block-post-featured-image.alignwide { max-width: var(--wp--style--global--content-size); }
.ivl-page .wp-block-post-featured-image img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: min(60vh, 560px);
}

/* ---- Reading pages (WordPress default template: .ivl-prose) ---- */
.ivl-prose { font-size: 1.1875rem; line-height: 1.7; }
.ivl-prose p { hyphens: auto; }
.ivl-prose h2, .ivl-prose h3, .ivl-prose h4, .ivl-prose h5 {
	font-stretch: 90%;
	font-size: 1.5rem;
	margin-top: 1.6em;
}
.ivl-prose a {
	color: var(--wp--preset--color--accent-2);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Details blocks: the technical asides, closed by default. */
.wp-block-details {
	margin-block: 1.6em;
	padding: 12px 18px;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-left: 3px solid var(--wp--preset--color--accent-2);
	border-radius: 6px;
	background: var(--wp--preset--color--accent-5);
	font-size: 0.95em;
}
.wp-block-details > summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}
.wp-block-details[open] > summary { margin-bottom: 0.8em; }
.wp-block-details > :last-child { margin-bottom: 0; }

/* ---- Footer ---- */
.ecs-footer {
	background: var(--wp--preset--color--accent-3);
	border-top: 1px solid var(--wp--preset--color--accent-6);
	padding: 28px var(--wp--style--root--padding-right) 26px var(--wp--style--root--padding-left);
	font-size: 0.9375rem;
}
.ecs-footer__inner { max-width: var(--wp--style--global--wide-size); margin: 0 auto; }
.ecs-footer p { margin: 0; }
.ecs-footer__who a { text-decoration: underline; text-underline-offset: 3px; }
.ecs-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 14px !important;
	font-family: var(--ivl-mono);
	font-size: 0.78rem;
	color: var(--wp--preset--color--accent-4);
}
.ecs-footer__nav a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
	.ecs-header { padding-block: 22px 14px; }
	.ivl-main { padding-block: 30px 44px; }
}

/* Read by screen readers, not shown: the main page's h1 repeats the site name
   in the header, so it stays for the document outline only. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }