/**
 * Single post template (TASK-2109) — hero, reading bar, chapter index, rail, phone dock and sheet, share, body.
 *
 * Everything hangs from `body.eo-single` (set only when the template is on) and from the `.eos` root, so nothing
 * here reaches a landing, a page or a post still on Ohio's template.
 *
 * Values from AXIS `efeonceGraphicLine` (copied: the runtime has no build):
 *   ground #001a33 · paper #f7f8f6 · navy ink #023c70 · ink-soft on paper #6d6777 · ink-soft on dark #cfe4fa
 *   ring on dark #72ded8 at 0.22 · ring on paper #023c70 at 0.16
 *   accent: the line of the topic, published per post as --eo-line-on-light / --eo-line-on-dark
 * Motion from `axisMotion`: medium 300ms · standard 200ms · short 150ms ·
 *   emphasized cubic-bezier(0.2,0,0,1) · emphasizedAccelerate cubic-bezier(0.3,0,0.8,0.15) · standard cubic-bezier(0.4,0,0.2,1)
 */

body.eo-single {
	--eos-acc: var( --eo-line-on-light, #0375db );
	--eos-accd: var( --eo-line-on-dark, #0375db );
	--eos-ground: #001a33;
	--eos-paper: #f7f8f6;
	--eos-ink: #023c70;
	--eos-soft: #6d6777;
	--eos-softd: #cfe4fa;
	--eos-top: 0px; /* bottom edge of the fixed site menu, set by the script */
	--eos-in: 300ms cubic-bezier( 0.2, 0, 0, 1 );
	--eos-out: 200ms cubic-bezier( 0.3, 0, 0.8, 0.15 );
	--eos-quick: 150ms cubic-bezier( 0.4, 0, 0.2, 1 );
	background: #f7f8f6;
}

/* Ohio leaves a spacer for its header above the content; the hero goes under the floating menu instead. */
body.eo-single .header-cap {
	display: none;
}

.eos {
	position: relative;
	background: var( --eos-paper );
	color: var( --eos-ink );
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.78;
	-webkit-font-smoothing: antialiased;
}

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

.eos-wrap {
	width: min( 1112px, calc( 100% - 32px ) );
	margin-inline: auto;
}

.eos a {
	color: inherit;
}

.eos-icon {
	flex: none;
	display: block;
}

/* The sphere: the period of a title, in the accent of the line. */
.eos-sph {
	display: inline-block;
	width: 0.2em;
	height: 0.2em;
	margin-left: 0.06em;
	border-radius: 9999px;
	background: var( --eos-acc );
}

.eos-last {
	white-space: nowrap;
}

/* ─────────────────────────── Hero ─────────────────────────── */

.eos-hero {
	position: relative;
	overflow: hidden;
	background: var( --eos-ground );
	color: #ffffff;
}

.eos-hero .eos-sph {
	background: var( --eos-accd );
}

.eos-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* The photo melts into the ground toward the text (left) and toward the body (bottom). The subject stays clear. */
.eos-hero__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient( 90deg, #001a33 0%, rgba( 0, 26, 51, 0.94 ) 28%, rgba( 0, 26, 51, 0.45 ) 50%, rgba( 0, 26, 51, 0 ) 68% ),
		linear-gradient( 0deg, #001a33 0%, rgba( 0, 26, 51, 0 ) 36% ),
		linear-gradient( 180deg, rgba( 0, 26, 51, 0.7 ) 0%, rgba( 0, 26, 51, 0 ) 22% );
}

.eos-hero__in {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	align-items: center;
	gap: 48px;
	padding: 176px 0 72px;
}

.eos-hero--orbit .eos-hero__in {
	grid-template-columns: minmax( 0, 1fr ) 400px;
}

.eos-hero--short .eos-hero__in {
	padding-bottom: 48px;
}

.eos-hero__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 600px;
	min-width: 0;
}

.eos-hero--short .eos-hero__text {
	max-width: 760px;
	gap: 18px;
}

.eos-hero__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.eos .eos-pill {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 14px;
	border: 1px solid rgba( 255, 255, 255, 0.45 );
	border-radius: 9999px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.eos-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var( --eos-softd );
}

.eos .eos-crumbs a {
	color: var( --eos-softd );
	text-decoration: none;
}

.eos .eos-crumbs a[aria-current] {
	color: #ffffff;
}

.eos .eos-h1 {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-size: clamp( 36px, 4.2vw, 60px ) !important;
	font-weight: 620 !important;
	font-style: normal;
	line-height: 1 !important;
	letter-spacing: -0.025em !important;
	text-transform: none;
	text-wrap: balance;
}

.eos-hero--short .eos-h1 {
	font-size: clamp( 32px, 3.4vw, 46px ) !important;
}

.eos .eos-dek {
	max-width: 520px;
	margin: 0;
	color: var( --eos-softd );
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
}

.eos-hero__by {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding-top: 8px;
}

.eos-hero__rule {
	width: 1px;
	height: 32px;
	background: rgba( 207, 228, 250, 0.3 );
}

.eos-who {
	display: flex;
	align-items: center;
	gap: 14px;
}

.eos .eos-who__photo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	object-fit: cover;
}

.eos-who__photo--initials {
	background: #023c70;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
}

.eos-who__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.eos .eos-who__name {
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.eos-who__role {
	color: var( --eos-softd );
	font-size: 13px;
	line-height: 1.35;
}

/* The facts of the article: date, update, reading time, level. One line; a grid of two when there are four. */
.eos-facts {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 18px;
	overflow: hidden;
	max-width: 560px;
	color: var( --eos-softd );
	font-size: 13px;
	line-height: 1.4;
	transition: max-width 420ms cubic-bezier( 0.22, 1, 0.36, 1 ), opacity 200ms ease;
}

.eos-facts--grid,
.eos-hero--orbit .eos-facts--many {
	display: grid;
	grid-template-columns: auto auto;
	gap: 4px 22px;
}

.eos-facts__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.eos-facts__item .eos-icon {
	width: 14px;
	height: 14px;
	opacity: 0.85;
}

.eos .eos-pill--plain {
	border-color: rgba( 255, 255, 255, 0.22 );
	color: var( --eos-softd );
	font-weight: 500;
}

/* While the share capsule is open the facts step aside: the row never grows past the hero. */
.eos-hero__by:has( .eos-share.is-open ) .eos-facts {
	max-width: 0;
	opacity: 0;
}

.eos-hero__by:has( .eos-share.is-open ) .eos-facts + .eos-hero__rule {
	display: none;
}

@media ( max-width: 1024px ) {
	/* Narrow: the facts go under the name, the share button stays at the right. */
	.eos .eos-hero__by {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr ) auto;
		align-items: center;
		gap: 4px 14px;
		width: auto;
	}

	.eos-hero__by .eos-who {
		display: contents;
	}

	.eos-hero__by .eos-who__photo {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.eos-hero__by .eos-who__text {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}

	.eos-hero__by .eos-facts,
	.eos-hero--orbit .eos-hero__by .eos-facts--many {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		display: flex;
		flex-wrap: wrap;
		gap: 2px 14px;
		max-width: none;
		transition: none;
	}

	.eos-hero__by .eos-share {
		grid-column: 3;
		grid-row: 1 / span 2;
	}

	.eos-hero__by .eos-hero__rule {
		display: none;
	}

	/* Open without the system sheet: the channels take the place of the author, on the same line. */
	.eos .eos-hero__by:has( .eos-share.is-open ) {
		display: flex;
		justify-content: flex-start;
	}

	.eos .eos-hero__by:has( .eos-share.is-open ) :is( .eos-who, .eos-facts ) {
		display: none;
	}
}

@media ( max-width: 781px ) {
	/* Phone, lighter: no role, one date (the latest), the time abridged, no level. */
	.eos-who__role,
	.eos-facts__long,
	.eos-facts__item--level,
	.eos-facts.has-revised .eos-facts__item--date {
		display: none;
	}
}

.eos .eos-revised {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	margin: 0;
	padding: 0 16px;
	border-radius: 9999px;
	background: rgba( 255, 255, 255, 0.1 );
	color: #ffffff;
	font-size: 13px;
	line-height: 1.2;
}

/* Without a photo: the orbit surrounds the word of the topic. */
.eos-hero__orbit {
	position: relative;
	width: 400px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
}

.eos-hero__halo {
	position: absolute;
	inset: -20%;
	border-radius: 9999px;
	background: radial-gradient( closest-side, color-mix( in srgb, var( --eos-accd ) 30%, transparent ), rgba( 0, 26, 51, 0 ) 72% );
}

.eos-hero__orbit svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.eos-hero__ring {
	fill: none;
	stroke: #72ded8;
	stroke-opacity: 0.22;
	stroke-width: 1.5;
}

.eos-hero__arc {
	fill: none;
	stroke: var( --eos-accd );
	stroke-width: 3;
	stroke-linecap: round;
}

.eos-hero__ball {
	fill: var( --eos-accd );
}

.eos-hero__word {
	position: absolute;
	inset: 12%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
}

.eos-hero__word span {
	color: var( --eos-softd );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eos-hero__word strong {
	color: #ffffff;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: clamp( 40px, 5vw, 76px );
	font-weight: 780;
	line-height: 0.92;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

/* ─────────────────────────── Share ─────────────────────────── */

/*
 * One capsule: the button and its channels are a single piece that stretches (0.23.0). The button turns into a
 * cross, the channels come out of it one after another, from blurred to sharp, and settle with a short spring.
 */
.eos-share {
	--eos-flow: cubic-bezier( 0.22, 1, 0.36, 1 );
	--eos-spring: cubic-bezier( 0.34, 1.45, 0.64, 1 );
	--eos-out: cubic-bezier( 0.4, 0, 0.6, 1 );
	position: relative;
	display: inline-flex;
	flex: none;
	flex-wrap: nowrap;
	align-items: center;
	box-sizing: border-box;
	height: 54px;
	padding: 4px;
	border: 1px solid transparent;
	border-radius: 9999px;
}

.eos .eos-share__toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 0;
	box-sizing: border-box;
	min-width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0 13px;
	overflow: hidden;
	border: 0;
	border-radius: 9999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: padding 420ms var( --eos-flow ), background-color 260ms ease, color 260ms ease, transform var( --eos-quick );
}

.eos .eos-share__toggle:active {
	transform: scale( 0.97 );
}

.eos-share__toggle .eos-icon {
	flex: none;
	transition: transform 420ms var( --eos-flow ), opacity 180ms ease, width 300ms var( --eos-flow );
}

.eos-share__toggle .eos-icon--close {
	width: 0;
	height: 16px;
	opacity: 0;
	stroke-width: 2.25;
	transform: rotate( -90deg ) scale( 0.4 );
}

.eos-share.is-open .eos-share__toggle {
	padding: 0 14px;
}

.eos-share.is-open .eos-share__toggle .eos-icon--share {
	width: 0;
	opacity: 0;
	transform: rotate( 90deg ) scale( 0.4 );
}

.eos-share.is-open .eos-share__toggle .eos-icon--close {
	width: 16px;
	opacity: 1;
	transform: none;
	transition: transform 460ms var( --eos-spring ) 80ms, opacity 180ms ease 80ms, width 300ms var( --eos-flow );
}

/* The word of the button: always at the close; in the hero, on hover and on keyboard focus. */
.eos-share__text {
	display: inline-block;
	overflow: hidden;
	max-width: 0;
	margin-left: 0;
	opacity: 0;
	transition: max-width 260ms var( --eos-out ), margin-left 260ms var( --eos-out ), opacity 140ms ease;
}

.eos .eos-share--close:not( .is-open ) .eos-share__toggle,
.eos .eos-share--hero:not( .is-open ) .eos-share__toggle:focus-visible {
	padding: 0 16px;
}

.eos-share--close:not( .is-open ) .eos-share__text,
.eos-share--hero:not( .is-open ) .eos-share__toggle:focus-visible .eos-share__text {
	max-width: 140px;
	margin-left: 8px;
	opacity: 1;
	transition: max-width 380ms var( --eos-flow ), margin-left 380ms var( --eos-flow ), opacity 240ms ease 80ms;
}

@media ( hover: hover ) {
	.eos .eos-share--hero:not( .is-open ) .eos-share__toggle:hover {
		padding: 0 16px;
	}

	.eos-share--hero:not( .is-open ) .eos-share__toggle:hover .eos-share__text {
		max-width: 140px;
		margin-left: 8px;
		opacity: 1;
		transition: max-width 380ms var( --eos-flow ), margin-left 380ms var( --eos-flow ), opacity 240ms ease 80ms;
	}
}

.eos-share__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	max-width: 0;
	margin-left: 0;
	white-space: nowrap;
	transition: max-width 300ms var( --eos-out ), margin-left 260ms var( --eos-out );
}

.eos-share__list[hidden] {
	display: none;
}

.eos-share.is-open .eos-share__list {
	max-width: 260px;
	margin-left: 6px;
	transition: max-width 620ms var( --eos-flow ), margin-left 460ms var( --eos-flow );
}

.eos-share--close.is-open .eos-share__list {
	max-width: 440px;
}

.eos .eos-share__ch {
	--eos-d: 0ms;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	outline-offset: -2px; /* the tray clips what leaves it */
	opacity: 0;
	transform: translateX( -14px ) scale( 0.55 );
	filter: blur( 6px );
	pointer-events: none;
	transition: opacity 140ms var( --eos-out ), transform 160ms var( --eos-out ), filter 140ms var( --eos-out ), background-color 180ms ease, color 180ms ease;
}

.eos .eos-share.is-open .eos-share__ch {
	opacity: 1;
	transform: none;
	filter: none;
	pointer-events: auto;
	transition: opacity 320ms var( --eos-flow ) var( --eos-d ), transform 520ms var( --eos-spring ) var( --eos-d ), filter 320ms var( --eos-flow ) var( --eos-d ), background-color 180ms ease, color 180ms ease;
}

.eos-share.is-open .eos-share__ch:nth-child( 1 ) { --eos-d: 90ms; }
.eos-share.is-open .eos-share__ch:nth-child( 2 ) { --eos-d: 135ms; }
.eos-share.is-open .eos-share__ch:nth-child( 3 ) { --eos-d: 180ms; }
.eos-share.is-open .eos-share__ch:nth-child( 4 ) { --eos-d: 225ms; }
.eos-share.is-open .eos-share__ch:nth-child( 5 ) { --eos-d: 270ms; }

.eos-share__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
}

/* The hero keeps its height: everything happens on the line of the button. */
.eos-hero__by {
	flex-wrap: nowrap;
	width: max-content;
	max-width: none;
}

/* Every channel is its isotype; the names stay for assistive tech. */
.eos-share__label,
.eos-share__done {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* At the close, «Copiar enlace» keeps its text: it is an action, and the confirmation shows there. */
.eos .eos-share--close .eos-share__ch[data-eos-share="copy"] {
	width: auto;
	padding: 0 16px 0 14px;
}

.eos-share--close [data-eos-share="copy"]:not( .is-copied ) .eos-share__label,
.eos-share--close [data-eos-share="copy"].is-copied .eos-share__done {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
}

/* Copy: the link gives way to a check while the confirmation shows. */
.eos-share__ch .eos-icon--check,
.eos-share__ch.is-copied .eos-icon--link {
	display: none;
}

.eos-share__ch.is-copied .eos-icon--check {
	display: block;
}

/* On the hero (dark): glass, like the menu and the reading bar. */
.eos-share--hero {
	border-color: rgba( 255, 255, 255, 0.34 );
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.12 ), rgba( 255, 255, 255, 0.04 ) );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.18 ), 0 10px 30px rgba( 0, 10, 25, 0.28 );
	-webkit-backdrop-filter: blur( 14px ) saturate( 160% );
	backdrop-filter: blur( 14px ) saturate( 160% );
}

.eos .eos-share--hero .eos-share__toggle {
	background: transparent;
	color: #ffffff;
}

.eos .eos-share--hero.is-open .eos-share__toggle {
	background: #ffffff;
	color: #001a33;
}

.eos .eos-share--hero .eos-share__ch {
	background: rgba( 255, 255, 255, 0.12 );
	color: #ffffff;
}

/* At the close (paper). */
.eos-share--close {
	border-color: rgba( 2, 60, 112, 0.22 );
	background: #ffffff;
	box-shadow: 0 10px 30px rgba( 2, 60, 112, 0.1 );
}

.eos .eos-share--close .eos-share__toggle {
	background: #023c70;
	color: #ffffff;
}

.eos .eos-share--close .eos-share__ch {
	background: rgba( 2, 60, 112, 0.06 );
	color: #023c70;
}

.eos .eos-share .eos-share__ch.is-copied {
	background: #36c8bf;
	color: #001a33;
	font-weight: 600;
}

/*
 * Ohio paints a growing gradient behind every link on hover (its underline effect) and recolours the text: on a chip
 * that reads as a filled navy pill with invisible text. The chips and the toggle state their own hover in full.
 */
.eos .eos-share .eos-share__ch,
.eos .eos-share .eos-share__ch:hover,
.eos .eos-share .eos-share__ch:focus,
.eos .eos-tag,
.eos .eos-tag:hover {
	background-image: none !important;
	background-size: auto !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.eos .eos-share--close .eos-share__ch:hover,
.eos .eos-share--close .eos-share__ch:focus-visible {
	border-color: #023c70 !important;
	background-color: #023c70 !important;
	color: #ffffff !important;
}

.eos .eos-share--hero .eos-share__ch:hover,
.eos .eos-share--hero .eos-share__ch:focus-visible {
	background-color: #ffffff !important;
	color: #001a33 !important;
}

.eos .eos-share .eos-share__ch.is-copied,
.eos .eos-share .eos-share__ch.is-copied:hover {
	border-color: #36c8bf !important;
	background-color: #36c8bf !important;
	color: #001a33 !important;
}

.eos .eos-share .eos-share__ch :is(svg, span) {
	color: inherit !important;
}

.eos .eos-tag:hover {
	border-color: #023c70 !important;
	background-color: rgba( 2, 60, 112, 0.06 ) !important;
	color: #023c70 !important;
}

/* ─────────────────────────── Reading orbit ─────────────────────────── */

.eos-orbit {
	flex: none;
	display: block;
	overflow: visible;
}

.eos-orbit__ring,
.eos-orbit__path,
.eos-orbit__trail {
	fill: none;
}

.eos-orbit__ring {
	stroke-width: 1.5;
}

.eos-orbit__path {
	stroke-width: 1.5;
	stroke-opacity: 0.6;
}

.eos-orbit__trail {
	stroke-width: 2;
	stroke-linecap: round;
}

.eos-orbit--light .eos-orbit__ring { stroke: #023c70; stroke-opacity: 0.16; }
.eos-orbit--light .eos-orbit__path,
.eos-orbit--light .eos-orbit__trail { stroke: var( --eos-acc ); }
.eos-orbit--light .eos-orbit__sphere { fill: var( --eos-acc ); }

.eos-orbit--dark .eos-orbit__ring { stroke: #72ded8; stroke-opacity: 0.22; }
.eos-orbit--dark .eos-orbit__path,
.eos-orbit--dark .eos-orbit__trail { stroke: var( --eos-accd ); }
.eos-orbit--dark .eos-orbit__sphere { fill: var( --eos-accd ); }

/* ─────────────────────────── Reading bar (desktop) ─────────────────────────── */

.eos-bar {
	position: fixed;
	top: var( --eos-top );
	right: 0;
	left: 0;
	z-index: 90;
	background: rgba( 247, 248, 246, 0.92 );
	border-bottom: 1px solid rgba( 2, 60, 112, 0.12 );
	-webkit-backdrop-filter: blur( 12px );
	backdrop-filter: blur( 12px );
	opacity: 0;
	transform: translateY( -100% );
	pointer-events: none;
	transition: opacity var( --eos-out ), transform var( --eos-out );
}

.eos-bar[hidden] {
	display: none;
}

.eos-bar.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition: opacity var( --eos-in ), transform var( --eos-in );
}

.eos-bar__in {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
}

.eos-bar__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.eos-bar__meta {
	color: var( --eos-soft );
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eos-bar__title {
	overflow: hidden;
	color: var( --eos-ink );
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.eos .eos-bar__nav {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	color: var( --eos-ink );
	text-decoration: none;
	transition: background-color var( --eos-quick );
}

.eos .eos-bar__nav:hover {
	background: rgba( 2, 60, 112, 0.06 );
}

.eos .eos-bar__nav[aria-disabled="true"] {
	opacity: 0.3;
	pointer-events: none;
}

.eos .eos-bar__index {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid #023c70;
	border-radius: 9999px;
	background: #023c70;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

/* Index panel under the bar. */
.eos-panel {
	position: absolute;
	top: calc( 100% + 8px );
	right: 0;
	width: min( 560px, 100% );
	max-height: calc( 100vh - var( --eos-top ) - 96px );
	overflow-y: auto;
	padding: 28px 28px 20px;
	border-radius: 16px;
	background: var( --eos-ground );
	color: #ffffff;
	opacity: 0;
	transform: translateY( -8px );
	transition: opacity var( --eos-quick ), transform var( --eos-quick );
}

.eos-panel[hidden],
.eos-sheet[hidden],
.eos-veil[hidden],
.eos-dock[hidden],
.eos-rail[hidden] {
	display: none;
}

.eos-panel.is-open {
	opacity: 1;
	transform: none;
	transition: opacity var( --eos-in ), transform var( --eos-in );
}

.eos-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba( 114, 222, 216, 0.16 );
}

.eos .eos-panel__name {
	margin: 0;
	color: #ffffff;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 24px;
	font-weight: 620;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.eos .eos-panel__meta {
	margin: 0;
	color: var( --eos-softd );
	font-size: 13px;
	line-height: 1.3;
}

.eos .eos-chapters {
	margin: 0;
	padding: 8px 0 0;
	list-style: none;
}

.eos .eos-chapters li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos .eos-ch {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 52px;
	margin: 0 -12px;
	padding: 4px 12px;
	border-radius: 12px;
	color: #ffffff;
	text-decoration: none;
	transition: background-color var( --eos-quick );
}

.eos .eos-ch:hover {
	background: rgba( 114, 222, 216, 0.08 );
}

.eos-ch__num {
	flex: none;
	width: 28px;
	color: var( --eos-softd );
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
}

.eos-ch__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	line-height: 1.35;
}

.eos-ch__min {
	flex: none;
	color: var( --eos-softd );
	font-size: 13px;
}

/* State by shape: thin ring = pending · full ring = read · sphere = you are here. */
.eos-ch__mark {
	flex: none;
	width: 16px;
	height: 16px;
	border: 1.5px solid rgba( 114, 222, 216, 0.3 );
	border-radius: 9999px;
}

.eos-ch.is-read .eos-ch__title {
	color: var( --eos-softd );
}

.eos-ch.is-read .eos-ch__mark {
	border-color: rgba( 207, 228, 250, 0.9 );
}

.eos-ch.is-current .eos-ch__title {
	font-weight: 600;
}

.eos-ch.is-current .eos-ch__mark {
	width: 12px;
	height: 12px;
	margin: 0 2px;
	border: 0;
	background: var( --eos-accd );
}

/* ─────────────────────────── Rail (from 1400px) ─────────────────────────── */

.eos-rail {
	position: fixed;
	top: 50%;
	left: 40px;
	z-index: 80;
	opacity: 0;
	transform: translateY( -50% );
	pointer-events: none;
	transition: opacity var( --eos-out );
}

.eos-rail.is-visible {
	opacity: 1;
	pointer-events: auto;
	transition: opacity var( --eos-in );
}

.eos .eos-rail ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos .eos-rail li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos .eos-rail__item {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 32px;
	color: var( --eos-ink );
	text-decoration: none;
}

.eos-rail__tick {
	display: block;
	width: 16px;
	height: 1.5px;
	border-radius: 2px;
	background: #023c70;
	opacity: 0.25;
	transition: width var( --eos-quick ), opacity var( --eos-quick );
}

.eos-rail__dot {
	display: none;
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background: var( --eos-acc );
}

.eos-rail__num {
	display: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.eos-rail__title {
	display: none;
	max-width: 96px;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.eos-rail__item.is-read .eos-rail__tick {
	opacity: 0.6;
}

.eos-rail__item.is-current .eos-rail__tick {
	width: 32px;
	opacity: 1;
}

.eos-rail__item.is-current .eos-rail__dot,
.eos-rail__item.is-current .eos-rail__num {
	display: block;
}

.eos-rail:hover .eos-rail__title,
.eos-rail:focus-within .eos-rail__title {
	display: block;
}

.eos-rail:hover .eos-rail__num,
.eos-rail:focus-within .eos-rail__num {
	display: none;
}

@media ( max-width: 1399px ) {
	.eos-rail {
		display: none !important;
	}
}

/* ─────────────────────────── Body ─────────────────────────── */

.eos-body {
	padding: 72px 0 0;
}

.eos .eos-body > p,
.eos .eos-body > ul,
.eos .eos-body > ol:not( [class*="is-style-"] ) {
	color: var( --eos-ink );
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.78;
}

.eos .eos-body > p {
	margin: 0 0 24px;
}

/* The opening paragraph. */
.eos .eos-body > p:first-child {
	margin-bottom: 32px;
	font-size: 24px;
	line-height: 1.45;
	letter-spacing: -0.005em;
}

/*
 * Links are marked with the colour of the line and a heavier weight, not with an underline (operator, 2026-11-13).
 * The accent is deepened with navy so the text keeps 4.5:1 on paper; the weight is the cue that does not depend on
 * colour, and the underline appears on hover and focus.
 */
body.eo-single {
	--eos-link: color-mix( in srgb, var( --eos-acc ) 78%, #001a33 );
}

.eos .eos-body p a,
.eos .eos-body li a,
.eos .eos-body figcaption a,
.eos .eos-body cite a {
	color: var( --eos-link ) !important;
	background-image: none !important;
	font-weight: 600;
	text-decoration: none !important;
}

.eos .eos-body p a:hover,
.eos .eos-body li a:hover,
.eos .eos-body figcaption a:hover,
.eos .eos-body cite a:hover,
.eos .eos-body p a:focus-visible,
.eos .eos-body li a:focus-visible {
	color: var( --eos-ink ) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1.5px !important;
	text-underline-offset: 4px;
}

/* On a dark panel a link is white and bold; buttons, mentions and invitation rows keep their own look. */
.eos .eos-body :is( .is-style-efeonce-importante, .is-style-efeonce-resumen, .is-style-efeonce-webinar, .is-style-efeonce-glitch-apertura, .is-style-efeonce-glitch-ficha, .is-style-efeonce-glitch-actualizado, .is-style-efeonce-destacado, .is-style-efeonce-cita, .is-style-efeonce-cita-retrato, .gh-glitch-drop, .eo-gcta ) a:not( .wp-block-button__link ) {
	color: #ffffff !important;
}

.eos .eos-body a.wp-block-button__link,
.eos .eos-body a.wp-block-button__link:hover {
	text-decoration: none !important;
}

.eos .eos-body .is-style-efeonce-invitaciones li a,
.eos .eos-body .is-style-efeonce-invitaciones li a:hover {
	color: #023c70 !important;
	font-weight: 620;
	text-decoration: none !important;
}

/* The Efeonce mention keeps its own pill. */
.eos .eos-body a.axis-mention {
	text-decoration: none;
}

.eos .eos-body > ul,
.eos .eos-body > ol:not( [class*="is-style-"] ) {
	margin: 0 0 24px;
	padding-left: 1.4em;
}

.eos .eos-body li {
	margin-bottom: 8px;
}

/* `.eos-body > p` sets its own margins: the kicker needs the same weight to keep its space above. */
.eos .eos-body > p.eos-kicker,
.eos .eos-kicker {
	margin: 96px 0 16px;
	color: var( --eos-soft );
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eos .eos-body h2 {
	max-width: 900px;
	margin: 0 0 32px;
	padding: 0;
	color: var( --eos-ink );
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-size: clamp( 30px, 4vw, 48px ) !important;
	font-weight: 620 !important;
	font-style: normal;
	line-height: 1.02 !important;
	letter-spacing: -0.025em !important;
	text-transform: none;
	text-wrap: balance;
	scroll-margin-top: calc( var( --eos-top ) + 120px );
}

/* A chapter title without its kicker (short article or nested): it brings its own space above. */
.eos .eos-body > h2:not( .eos-h2 ),
body.eo-single--short .eos .eos-body > h2 {
	margin-top: 72px;
}

.eos .eos-body h3 {
	margin: 48px 0 16px;
	padding: 0;
	color: var( --eos-ink );
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-size: clamp( 22px, 2.4vw, 28px ) !important;
	font-weight: 620 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	text-transform: none;
	scroll-margin-top: calc( var( --eos-top ) + 120px );
}

.eos .eos-body h4 {
	margin: 32px 0 12px;
	color: var( --eos-ink );
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none;
}

.eos .eos-body strong {
	font-weight: 600;
}

.eos .eos-body figure {
	margin: 40px 0;
}

.eos .eos-body figure img,
.eos .eos-body > p > img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

.eos .eos-body figcaption {
	margin-top: 12px;
	color: var( --eos-soft );
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
}

/* Older posts float images (alignleft / alignright): the index, a chapter and any panel start below them. */
.eos .eos-index,
.eos .eos-kicker,
.eos .eos-body > h2,
.eos .eos-body > .wp-block-group,
.eos .eos-body > .wp-block-pullquote,
.eos .eos-body > figure.wp-block-table,
.eos .eos-close {
	clear: both;
}

/* In-flow index (v2, approved 2026-11-13): a clean white panel, no gradient. */
.eos-index {
	box-sizing: border-box;
	margin: 72px 0 0;
	padding: 48px 56px 40px;
	border: 1px solid rgba( 2, 60, 112, 0.16 );
	border-radius: 24px;
	background: #ffffff;
}

.eos-index__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: 28px;
}

.eos .eos-index__name {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	color: var( --eos-ink );
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-variation-settings: "opsz" 76;
	font-size: clamp( 32px, 3.4vw, 44px ) !important;
	font-weight: 740;
	line-height: 0.98;
	letter-spacing: -0.03em;
}

.eos-index__orbit {
	flex: none;
	display: block;
	overflow: visible;
}

.eos-index__ring {
	fill: none;
	stroke: #023c70;
	stroke-opacity: 0.16;
	stroke-width: 1.5;
}

.eos-index__arc {
	fill: none;
	stroke: var( --eos-acc );
	stroke-width: 2.25;
	stroke-linecap: round;
}

.eos-index__ball {
	fill: var( --eos-acc );
}

.eos .eos-index__meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	color: var( --eos-soft );
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eos-index__meta b {
	color: var( --eos-ink );
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 28px;
	font-weight: 740;
	letter-spacing: -0.02em;
}

.eos .eos-index__list {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	column-gap: 56px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos .eos-index__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos .eos-body .eos-index__row {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax( 0, 1fr ) auto 24px;
	align-items: center;
	column-gap: 8px;
	min-height: 44px;
	padding: 22px 0 24px;
	color: var( --eos-ink ) !important;
	font-weight: 400;
	text-decoration: none !important;
}

.eos-index__num {
	color: var( --eos-acc );
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-variation-settings: "opsz" 76;
	font-size: 38px;
	font-weight: 740;
	line-height: 1;
	letter-spacing: -0.03em;
}

.eos-index__title {
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
	transition: transform var( --eos-in );
}

.eos-index__subs {
	display: block;
	margin-top: 6px;
	color: var( --eos-soft );
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
}

.eos-index__min {
	color: var( --eos-soft );
	font-size: 13px;
	white-space: nowrap;
}

.eos-index__arrow {
	display: block;
	color: var( --eos-ink );
	opacity: 0;
	transform: translateX( -8px );
	transition: opacity var( --eos-in ), transform var( --eos-in );
}

/* The line under a row is as long as its chapter weighs in minutes. */
.eos-index__track {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: rgba( 2, 60, 112, 0.1 );
	transition: height var( --eos-quick );
}

.eos-index__fill {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: var( --eos-acc );
}

.eos-index__row:hover .eos-index__title,
.eos-index__row:focus-visible .eos-index__title {
	transform: translateX( 6px );
}

.eos-index__row:hover .eos-index__arrow,
.eos-index__row:focus-visible .eos-index__arrow {
	opacity: 1;
	transform: none;
}

.eos-index__row:hover .eos-index__track,
.eos-index__row:focus-visible .eos-index__track {
	height: 4px;
}

/* Read: soft ink and a closed ring before the title. */
.eos-index__row.is-read .eos-index__num,
.eos-index__row.is-read .eos-index__title {
	color: var( --eos-soft );
}

.eos-index__row.is-read .eos-index__fill {
	background: var( --eos-soft );
}

.eos-index__row.is-read .eos-index__title::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	margin-right: 8px;
	border: 2px solid var( --eos-soft );
	border-radius: 9999px;
	vertical-align: -1px;
}

/* ─────────────────────────── Close ─────────────────────────── */

.eos-close {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 72px;
	padding: 40px 0 88px;
	border-top: 1px solid rgba( 2, 60, 112, 0.16 );
}

.eos-close__tags,
.eos-close__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.eos-close__share {
	gap: 12px;
}

.eos .eos-tag {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid rgba( 2, 60, 112, 0.3 );
	border-radius: 9999px;
	color: var( --eos-ink );
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.eos-close__ask {
	color: var( --eos-soft );
	font-size: 15px;
}

/* ─────────────────────────── Phone: dock and sheet ─────────────────────────── */

.eos-dock {
	position: fixed;
	right: 16px;
	bottom: calc( 20px + env( safe-area-inset-bottom, 0px ) );
	left: 16px;
	z-index: 90;
	display: none;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 0 8px 0 12px;
	border-radius: 9999px;
	background: var( --eos-ground );
	color: #ffffff;
	opacity: 0;
	transform: translateY( 120% );
	pointer-events: none;
	transition: opacity var( --eos-out ), transform var( --eos-out );
}

.eos-dock.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition: opacity var( --eos-in ), transform var( --eos-in );
}

.eos-dock__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.eos-dock__meta {
	color: var( --eos-softd );
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eos-dock__title {
	overflow: hidden;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.eos .eos-dock__open {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: #ffffff;
	color: #001a33;
	cursor: pointer;
}

.eos-veil {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba( 0, 26, 51, 0.56 );
	opacity: 0;
	transition: opacity var( --eos-out );
}

.eos-veil.is-open {
	opacity: 1;
	transition: opacity var( --eos-in );
}

.eos-sheet {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 96;
	max-height: 88vh;
	overflow-y: auto;
	padding: 12px 20px calc( 24px + env( safe-area-inset-bottom, 0px ) );
	border-radius: 24px 24px 0 0;
	background: var( --eos-ground );
	color: #ffffff;
	transform: translateY( 100% );
	transition: transform var( --eos-out );
}

.eos-sheet.is-open {
	transform: none;
	transition: transform var( --eos-in );
}

.eos-sheet__grab {
	width: 40px;
	height: 4px;
	margin: 0 auto 20px;
	border-radius: 9999px;
	background: rgba( 207, 228, 250, 0.4 );
}

.eos-sheet__head {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba( 114, 222, 216, 0.16 );
}

.eos-sheet__text {
	flex: 1 1 auto;
	min-width: 0;
}

.eos .eos-sheet__pct {
	margin: 0;
	color: #ffffff;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 34px;
	font-weight: 740;
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.eos .eos-sheet__left {
	margin: 8px 0 0;
	color: var( --eos-softd );
	font-size: 14px;
	line-height: 1.4;
}

.eos .eos-sheet__close {
	flex: none;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 9999px;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
}

.eos-sheet .eos-ch {
	min-height: 56px;
	margin: 0;
	padding: 4px 0;
	border-bottom: 1px solid rgba( 114, 222, 216, 0.12 );
	border-radius: 0;
}

.eos-sheet .eos-ch__title {
	font-size: 15px;
}

.eos-sheet__actions {
	display: flex;
	gap: 8px;
	padding-top: 16px;
}

.eos .eos-btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 16px;
	border-radius: 9999px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.eos .eos-btn--paper {
	border: 0;
	background: #ffffff;
	color: #001a33;
	font-weight: 600;
}

.eos .eos-btn--ghost {
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	background: transparent;
	color: #ffffff;
	font-weight: 500;
}

/* ─────────────────────────── Focus ─────────────────────────── */

.eos a:focus-visible,
.eos button:focus-visible {
	outline: 2px solid var( --eos-acc );
	outline-offset: 3px;
}

.eos-hero a:focus-visible,
.eos-hero button:focus-visible,
.eos-panel a:focus-visible,
.eos-sheet a:focus-visible,
.eos-sheet button:focus-visible,
.eos-dock button:focus-visible {
	outline-color: #ffffff;
}

/* ─────────────────────────── Tablet and phone ─────────────────────────── */

@media ( max-width: 980px ) {
	.eos-hero--orbit .eos-hero__in {
		grid-template-columns: minmax( 0, 1fr );
	}

	.eos-hero__orbit {
		display: none;
	}

	.eos-bar__title {
		display: none;
	}
}

@media ( max-width: 781px ) {
	.eos {
		font-size: 16.5px;
		line-height: 1.7;
	}

	/* The photo goes on top, showing its right side, and melts toward the text. */
	.eos-hero--photo .eos-hero__photo {
		inset: 0 0 auto 0;
		height: 300px;
		object-position: 78% 0% !important;
	}

	.eos-hero--photo .eos-hero__veil {
		inset: 0 0 auto 0;
		height: 300px;
		background:
			linear-gradient( 0deg, #001a33 0%, rgba( 0, 26, 51, 0.6 ) 28%, rgba( 0, 26, 51, 0 ) 60% ),
			linear-gradient( 180deg, rgba( 0, 26, 51, 0.75 ) 0%, rgba( 0, 26, 51, 0 ) 34% );
	}

	.eos-hero__in {
		padding: 120px 0 40px;
	}

	.eos-hero--photo .eos-hero__in {
		padding-top: 264px;
	}

	.eos-hero__text {
		gap: 18px;
	}

	.eos .eos-h1 {
		font-size: 36px !important;
		line-height: 1.02 !important;
	}

	.eos .eos-dek {
		font-size: 16px;
	}

	.eos-bar {
		display: none !important;
	}

	.eos-dock {
		display: flex;
	}

	.eos-body {
		padding-top: 48px;
	}

	.eos .eos-body > p,
	.eos .eos-body > ul,
	.eos .eos-body > ol:not( [class*="is-style-"] ) {
		font-size: 16.5px;
		line-height: 1.7;
	}

	.eos .eos-body > p:first-child {
		margin-bottom: 28px;
		font-size: 20px;
	}

	.eos .eos-body > p.eos-kicker,
	.eos .eos-kicker {
		margin-top: 72px;
		margin-bottom: 12px;
		font-size: 12px !important;
	}

	.eos .eos-body h2 {
		margin-bottom: 24px;
		font-size: 32px !important;
		line-height: 1.04 !important;
	}

	.eos-index {
		margin-top: 48px;
		padding: 28px 22px 20px;
		border-radius: 20px;
	}

	.eos-index__head {
		margin-bottom: 16px;
	}

	.eos .eos-index__name {
		gap: 12px;
		font-size: 30px !important;
	}

	.eos-index__orbit {
		width: 36px;
		height: 36px;
	}

	.eos-index__meta b {
		font-size: 22px;
	}

	.eos .eos-index__list {
		grid-template-columns: minmax( 0, 1fr );
	}

	.eos .eos-body .eos-index__row {
		grid-template-columns: 48px minmax( 0, 1fr ) auto;
		padding: 18px 0 20px;
	}

	.eos-index__num {
		font-size: 28px;
	}

	.eos-index__title {
		font-size: 16px;
	}

	.eos-index__arrow {
		display: none;
	}

	.eos-close {
		flex-direction: column;
		align-items: stretch;
		margin-top: 56px;
		padding: 32px 0 120px; /* room for the dock */
	}

	.eos-close__share {
		flex-direction: column;
		align-items: center;
	}

	/* Without the system sheet the capsule opens in place: on a phone every channel is its isotype, so it fits. */
	.eos .eos-share--close .eos-share__ch[data-eos-share="copy"] {
		width: 44px;
		padding: 0;
	}

	.eos .eos-share--close [data-eos-share="copy"] :is( .eos-share__label, .eos-share__done ) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
	}
}

@media ( max-width: 781px ) {
	/* On a phone a floated image takes the full column. */
	.eos .eos-body :is( .alignleft, .alignright ) {
		float: none !important;
		max-width: 100% !important;
		margin: 32px 0 !important;
	}

	.eos .eos-body :is( .alignleft, .alignright ) img {
		width: 100% !important;
		height: auto !important;
	}
}

@media ( min-width: 782px ) {
	.eos-dock,
	.eos-sheet,
	.eos-veil {
		display: none !important;
	}
}

/* ─────────────────────────── Glass: the reading bar, its panel and the phone dock ─────────────────────────── */

/*
 * 0.19.0 (operator, 2026-11-13). The site's menu and dock are glass pills; the reading bar joins them: a floating
 * navy glass pill the width of the column, with a soft glow of the line behind the orbit. Text on it is white, so
 * the orbit uses its values for dark surfaces.
 */
.eos-bar {
	top: calc( var( --eos-top ) + 12px );
	background: none;
	border-bottom: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	pointer-events: none;
}

.eos-bar.is-visible {
	pointer-events: none;
}

.eos-bar.is-visible .eos-bar__in {
	pointer-events: auto;
}

.eos-bar__in {
	min-height: 64px;
	padding: 0 10px 0 16px;
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	border-radius: 9999px;
	background:
		radial-gradient( 260px 130px at 36px 50%, color-mix( in srgb, var( --eos-accd ) 55%, transparent ) 0%, transparent 72% ),
		linear-gradient( 180deg, rgba( 255, 255, 255, 0.07 ) 0%, rgba( 255, 255, 255, 0 ) 40% ),
		rgba( 0, 26, 51, 0.82 );
	box-shadow:
		0 18px 48px rgba( 0, 26, 51, 0.28 ),
		0 2px 6px rgba( 0, 26, 51, 0.18 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.18 );
	-webkit-backdrop-filter: blur( 22px ) saturate( 170% );
	backdrop-filter: blur( 22px ) saturate( 170% );
	color: #ffffff;
}

@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
	.eos-bar__in {
		background: rgba( 0, 26, 51, 0.94 );
	}
}

.eos-bar .eos-orbit--light .eos-orbit__ring {
	stroke: #72ded8;
	stroke-opacity: 0.3;
}

.eos-bar .eos-orbit--light .eos-orbit__path,
.eos-bar .eos-orbit--light .eos-orbit__trail {
	stroke: var( --eos-accd );
}

.eos-bar .eos-orbit--light .eos-orbit__sphere {
	fill: var( --eos-accd );
	filter: drop-shadow( 0 0 6px color-mix( in srgb, var( --eos-accd ) 70%, transparent ) );
}

.eos-bar .eos-bar__meta {
	color: #cfe4fa;
}

.eos-bar .eos-bar__title {
	color: #ffffff;
}

.eos .eos-bar .eos-bar__nav {
	color: #ffffff;
}

/* The theme's link hover paints a gradient and recolours the text: the arrows state their own hover in full. */
.eos .eos-bar .eos-bar__nav,
.eos .eos-bar .eos-bar__nav:hover,
.eos .eos-bar .eos-bar__nav:focus,
.eos .eos-rail .eos-rail__item,
.eos .eos-rail .eos-rail__item:hover,
.eos .eos-panel .eos-ch,
.eos .eos-panel .eos-ch:hover,
.eos .eos-sheet .eos-ch,
.eos .eos-sheet .eos-ch:hover,
.eos .eos-index__row,
.eos .eos-index__row:hover,
.eos .eos-pill,
.eos .eos-pill:hover,
.eos .eos-crumbs a,
.eos .eos-crumbs a:hover,
.eos .eos-who__name,
.eos .eos-who__name:hover {
	background-image: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.eos .eos-bar .eos-bar__nav:hover,
.eos .eos-bar .eos-bar__nav:focus-visible {
	background-color: rgba( 255, 255, 255, 0.16 ) !important;
	color: #ffffff !important;
}

.eos .eos-panel .eos-ch:hover,
.eos .eos-sheet .eos-ch:hover {
	color: #ffffff !important;
}

.eos .eos-pill:hover,
.eos .eos-crumbs a:hover,
.eos .eos-who__name:hover {
	color: #ffffff !important;
}

.eos .eos-rail .eos-rail__item:hover,
.eos .eos-body .eos-index__row:hover {
	color: var( --eos-ink ) !important;
}

.eos .eos-bar .eos-bar__index {
	border-color: #ffffff;
	background: #ffffff;
	color: #001a33;
}

.eos .eos-bar a:focus-visible,
.eos .eos-bar button:focus-visible {
	outline-color: #ffffff;
}

/* The index panel hangs from the pill, in the same glass. */
.eos-bar .eos-panel {
	top: calc( 100% + 10px );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	border-radius: 24px;
	background:
		linear-gradient( 180deg, rgba( 255, 255, 255, 0.06 ) 0%, rgba( 255, 255, 255, 0 ) 30% ),
		rgba( 0, 26, 51, 0.95 );
	box-shadow: 0 24px 64px rgba( 0, 26, 51, 0.34 ), inset 0 1px 0 rgba( 255, 255, 255, 0.16 );
	-webkit-backdrop-filter: blur( 26px ) saturate( 170% );
	backdrop-filter: blur( 26px ) saturate( 170% );
}

/* Phone dock: the same glass pill, at the bottom. */
.eos-dock {
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	background:
		radial-gradient( 160px 90px at 32px 50%, color-mix( in srgb, var( --eos-accd ) 38%, transparent ) 0%, transparent 70% ),
		linear-gradient( 180deg, rgba( 255, 255, 255, 0.07 ) 0%, rgba( 255, 255, 255, 0 ) 40% ),
		rgba( 0, 26, 51, 0.84 );
	box-shadow: 0 16px 40px rgba( 0, 26, 51, 0.3 ), inset 0 1px 0 rgba( 255, 255, 255, 0.18 );
	-webkit-backdrop-filter: blur( 22px ) saturate( 170% );
	backdrop-filter: blur( 22px ) saturate( 170% );
}

.eos-dock .eos-orbit__sphere {
	filter: drop-shadow( 0 0 6px color-mix( in srgb, var( --eos-accd ) 70%, transparent ) );
}

/* Chapter anchors land below the floating pill. */
.eos .eos-body h2,
.eos .eos-body h3 {
	scroll-margin-top: calc( var( --eos-top ) + 132px );
}

/* ─────────────────────────── The reading bar lives at the bottom (0.21.0) ─────────────────────────── */

/*
 * Operator decision of 2026-11-13. The site menu is a glass pill fixed at the top that hides while scrolling down and
 * comes back while scrolling up: at the top the reading bar sat in the same strip and ended up behind it. Now the menu
 * owns the top and reading lives at the bottom, centred, as on phones and as the dock of the landings. The index
 * opens upward. Nothing here depends on measuring the menu.
 */
.eos-bar {
	top: auto;
	bottom: calc( 20px + env( safe-area-inset-bottom, 0px ) );
	transform: translateY( 140% );
}

.eos-bar.is-visible {
	transform: none;
}

/* The bar steps aside while the «Siguiente post» card is over it. */
.eos-bar.is-visible.is-yielding {
	opacity: 0;
	transform: translateY( 140% );
	transition: opacity var( --eos-out ), transform var( --eos-out );
}

.eos-bar.is-yielding .eos-bar__in {
	pointer-events: none;
}

.eos-bar .eos-bar__in {
	width: min( 760px, calc( 100% - 32px ) );
}

.eos-bar .eos-panel {
	top: auto;
	bottom: calc( 100% + 10px );
	max-height: calc( 100vh - 200px );
	transform: translateY( 8px );
}

.eos-bar .eos-panel.is-open {
	transform: none;
}

/* A chapter lands below the site menu when it is showing. */
.eos .eos-body h2,
.eos .eos-body h3 {
	scroll-margin-top: 104px;
}

.eos .eos-kicker + h2 {
	scroll-margin-top: 140px;
}

/* Room for the bar under the close of the article. */
.eos-close {
	padding-bottom: 112px;
}

@media ( max-width: 980px ) {
	.eos-bar .eos-bar__title {
		display: block;
	}
}

/* Glitch editions: the card states its own hover (the theme's link effect filled it and hid the title). */
.eos .eos-g-ed,
.eos .eos-g-ed:hover,
.eos .eos-g-ed:focus {
	background-color: #001a33 !important;
	background-image: none !important;
	color: #ffffff !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.eos .eos-g-ed .eos-g-ed__title {
	color: #ffffff !important;
	transition: transform var( --eos-in );
}

.eos .eos-g-ed .eos-g-ed__label {
	color: #9fb3c8 !important;
}

.eos .eos-g-ed .eos-g-ed__mark {
	color: #6ec207 !important;
}

.eos .eos-g-ed {
	border: 1px solid transparent;
	transition: border-color var( --eos-quick );
}

.eos .eos-g-ed:hover,
.eos .eos-g-ed:focus-visible {
	border-color: #6ec207;
}

.eos .eos-g-ed--prev:hover .eos-g-ed__title {
	transform: translateX( 6px );
}

.eos .eos-g-ed--next:hover .eos-g-ed__title {
	transform: translateX( -6px );
}

/* The rows of the index are links of the template, not links of the text: no underline, their own colours. */
.eos .eos-body .eos-index__row,
.eos .eos-body .eos-index__row:hover,
.eos .eos-body .eos-index__row:focus-visible {
	color: var( --eos-ink ) !important;
	font-weight: 400;
	text-decoration: none !important;
}

/* ─────────────────────────── Reduced motion ─────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.eos *,
	.eos *::before,
	.eos *::after {
		transition: none !important;
		animation: none !important;
	}

	html:has( body.eo-single ) {
		scroll-behavior: auto !important;
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	html:has( body.eo-single ) {
		scroll-behavior: smooth;
	}
}