/* ==========================================================================
   Third Attractor — component styles for the Resonance blocks
   Front end + editor. Everything colour-related reads the tokens.
   ========================================================================== */

/* ---------- shared atoms ---------- */
/* Neither Ollie nor the block library define this on the front end, so the
   alternative text of icon links was showing through as stray marks. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.ta-avatar {
	border-radius: 50%;
	/* Le rapport tient lieu de hauteur : quoi qu'il arrive à la largeur, la
	   vignette reste carrée — donc ronde une fois le rayon appliqué. */
	aspect-ratio: 1;
	object-fit: cover;
	flex: none;
	background: var(--ta-surface);
	box-shadow: 0 0 0 2px var(--ta-void), 0 0 0 4px var(--ta-ring, var(--ta-teal));
}
.ta-avatar--initials {
	display: grid;
	place-items: center;
	font-family: var(--ta-font-display);
	color: var(--ta-navy);
	background: var(--ta-ring, var(--ta-teal));
}
/* Only the badges the server (or the active filter) marked are on show. */
.ta-stag { display: none; }
.ta-stag.is-shown { display: inline; }
.ta-stag {
	font-family: var(--ta-font-body);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--ta-fs-tiny);
	/* La couleur de série sert ici de TEXTE, pas d'accent : « The Story Weavers »
	   (#E5197D) ne tenait que 3.8:1 sur le fond des cartes. On la ramène vers
	   l'encre — --ta-cream est clair en thème sombre et sombre en thème clair,
	   donc le même mélange corrige les deux sens. Mesuré après : 5.06:1. */
	color: color-mix(in srgb, var(--ta-c, var(--ta-teal)) 72%, var(--ta-cream));
	margin-right: 10px;
	text-decoration: none;
}
.ta-stag:hover { text-decoration: underline; }
.ta-i { width: 1em; height: 1em; }
.ta-empty {
	font-family: var(--ta-font-body);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: var(--ta-fs-label);
	color: var(--ta-muted);
	padding: 32px 0;
	text-align: center;
}
.ta-note { font-size: 13px; color: var(--ta-muted); margin-top: 8px; }
.ta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	border: 0;
	border-radius: var(--ta-pill);
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-base);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--ta-aqua);
	color: var(--ta-navy);
	cursor: pointer;
	transition: transform var(--ta-dur) var(--ta-ease);
}
.ta-btn:hover { transform: translateY(-1px); }
.ta-btn--gold { background: var(--ta-gold-sun); }
.ta-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* The hero's introduction, under the one-line promise: full text, but set
   smaller so the headline keeps the weight. */
.ta-hero__intro {
	margin: 0;
	max-width: 60ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ta-body-1);
}
.ta-hero__intro strong { color: var(--ta-cream); font-weight: 600; }
/* A chip summoned by a link rather than printed with the others. */
.ta-chip.is-summoned[hidden] { display: none; }

/* ---------- ta/conversations ---------- */
.ta-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin-bottom: 22px;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--ta-line);
}
.ta-chip {
	font-family: var(--ta-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--ta-fs-chip);
	color: var(--ta-muted);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	min-height: 44px;
	padding: 8px 6px;
	cursor: pointer;
	transition: color var(--ta-dur), border-color var(--ta-dur);
}
.ta-chip:hover,
.ta-chip[aria-pressed="true"] {
	color: var(--ta-c, var(--ta-aqua));
	border-color: currentColor;
}
/* A selected series can be clicked again to clear it. The cross is always in
   the layout and only fades in, so nothing under the pointer ever moves. */
.ta-chip:not([data-ta-series="all"])::after {
	content: "×";
	margin-left: 6px;
	font-weight: 400;
	opacity: 0;
	transition: opacity var(--ta-dur);
}
.ta-chip[aria-pressed="true"]::after { opacity: 1; }

/* The gallery's own heading row: "57 voices" left, the see-all link right. */
.ta-conversations__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.ta-conversations__title {
	margin: 0;
	font-family: var(--ta-font-display, var(--ta-font-body));
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.05;
	color: var(--ta-cream);
}
.ta-conversations .ta-more {
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-aqua);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.ta-conversations .ta-more:hover { text-decoration: underline; }
.ta-conversations .ta-more .ta-i { width: 16px; height: 16px; }

.ta-conversations__lead {
	max-width: 62ch;
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ta-muted);
}

.ta-conversations .ta-track { display: grid; }
.ta-conversations.is-layout-rail .ta-track {
	grid-auto-flow: column;
	grid-auto-columns: minmax(268px, 1fr);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 6px 0 22px;
	scrollbar-width: thin;
	scrollbar-color: var(--ta-edge) transparent;
	overscroll-behavior-x: contain;
}
.ta-conversations.is-layout-rail .ta-ep { scroll-snap-align: start; }
.ta-conversations.is-layout-grid .ta-track {
	grid-template-columns: repeat(var(--ta-cols, 4), minmax(0, 1fr));
	gap: 16px;
}
.ta-conversations.is-layout-faces .ta-track {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.ta-conversations.is-layout-faces .ta-face { margin-left: -14px; }
.ta-conversations.is-layout-faces .ta-face:first-child { margin-left: 0; }
/* The portrait is a replaced inline element, so it drags the parent's descender
   space along: a 36 px avatar measured 44.8 px tall. Blocking it removes the gap
   and makes the row exactly as tall as the faces. */
.ta-conversations.is-layout-faces .ta-avatar,
.ta-conversations.is-layout-faces .ta-face > img { display: block; }
.ta-conversations.is-layout-faces .ta-avatar { box-shadow: 0 0 0 3px var(--ta-void), 0 0 0 5px var(--ta-ring, var(--ta-teal)); }
.ta-face { display: inline-block; transition: transform var(--ta-dur) var(--ta-ease); }
.ta-face:hover { transform: translateY(-3px); position: relative; z-index: 2; }

.ta-ep {
	position: relative;
	border-radius: var(--ta-radius);
	padding: 18px;
	background: var(--ta-surface);
	border: 1px solid var(--ta-card-line);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color var(--ta-dur), transform var(--ta-dur) var(--ta-ease);
}
.ta-ep:hover { border-color: var(--ta-card-line-hover); transform: translateY(-3px); }
/* The episode's cover art runs to the card's edges above everything else: the
   padding is cancelled on its sides and top, and the corners follow the card. */
.ta-ep__cover {
	margin: -18px -18px 0;
	max-width: none;
	align-self: stretch;
	overflow: hidden;
	border-radius: var(--ta-radius) var(--ta-radius) 0 0;
}
.ta-ep__cover img {
	display: block;
	width: 100%;
	height: auto;
	/* The channel's artwork is drawn 3:2, and every stored cover has been trimmed
	   to exactly that, so nothing is cropped and no padding shows through. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
/* Over artwork the episode number needs its own ground to stay readable. */
.ta-ep.has-cover .ta-ep__num {
	top: 10px;
	right: 10px;
	color: var(--ta-cream);
	background: color-mix(in srgb, var(--ta-void) 68%, transparent);
	border-radius: var(--ta-pill);
	padding: 3px 9px;
}
.ta-ep.has-cover.has-num .ta-ep__top { padding-right: 0; }
/* The whole card is the link. The name's anchor is stretched over the card, and
   the controls that have their own destination are lifted back above it. */
.ta-ep__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ta-ep__series,
.ta-ep .ta-go { position: relative; z-index: 2; }
.ta-ep__num {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 2;
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	color: var(--ta-muted);
	pointer-events: none;
}
.ta-ep.has-num .ta-ep__top { padding-right: 44px; }
.ta-ep[hidden] { display: none; }
.ta-ep__top { display: flex; align-items: center; gap: 14px; }
.ta-ep__name { font-size: 19px; font-weight: 600; line-height: 1.2; margin: 0; font-family: var(--ta-font-body); }
.ta-ep__name a { color: inherit; text-decoration: none; }
.ta-ep__name a:hover { color: var(--ta-aqua); }
.ta-ep__tag {
	font-family: var(--ta-font-editorial);
	font-style: italic;
	font-size: 17px;
	line-height: 1.3;
	color: var(--ta-mist);
	margin: 0;
	min-height: 44px;
}
/* Short summary, clamped so a long one can't break the grid's rhythm. */
.ta-ep__sum {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ta-muted);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ta-ep__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-small);
	letter-spacing: 0.12em;
	color: var(--ta-muted);
}
.ta-go {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--ta-edge);
	color: var(--ta-cream);
	transition: background var(--ta-dur), color var(--ta-dur);
}
.ta-go .ta-i { width: 18px; height: 18px; }
.ta-ep:hover .ta-go { background: var(--ta-aqua); color: var(--ta-navy); border-color: var(--ta-aqua); }
/* The gallery steps down rather than collapsing straight to one. */
@media (max-width: 1360px) {
	.ta-conversations.is-layout-grid .ta-track { grid-template-columns: repeat(min(var(--ta-cols, 4), 4), minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
	.ta-conversations.is-layout-grid .ta-track { grid-template-columns: repeat(min(var(--ta-cols, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.ta-conversations.is-layout-grid .ta-track { grid-template-columns: repeat(min(var(--ta-cols, 4), 2), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.ta-conversations.is-layout-grid .ta-track { grid-template-columns: 1fr; }
	.ta-conversations__title { font-size: 30px; }
}

/* ---------- ta/episode-player ---------- */
.ta-player.is-featured {
	position: relative;
	border-radius: var(--ta-radius-l);
	padding: 22px;
	/* Dark, but see-through: the mandala turning behind the card is the point.
	   Legibility comes from the tint plus a softer blur rather than from opacity
	   alone — the shape still reads through, the text still sits on a ground. */
	background: var(--ta-player-ground);
	border: 1px solid var(--ta-edge);
	/* No saturate(): it lifts exactly the bright gold strokes turning behind the
	   panel, which is what made the sweep visible as a flash rather than as a
	   shape. The layer of its own keeps the blur off the main paint path. */
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
	transform: translateZ(0);
	box-shadow: var(--ta-glow-teal);
}
.ta-player__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ta-live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-small);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ta-teal-ice);
}
.ta-live::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ta-aqua);
	box-shadow: 0 0 12px var(--ta-aqua);
	animation: ta-pulse 1.8s ease-in-out infinite;
}
@keyframes ta-pulse { 50% { opacity: 0.35; } }
.ta-num { font-family: var(--ta-font-body); font-size: var(--ta-fs-small); letter-spacing: 0.2em; color: var(--ta-muted); }
.ta-player__stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ta-radius); overflow: hidden; background: var(--ta-plate-ground); margin-bottom: 16px; }
.ta-player__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ta-player__main { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.ta-player__name { font-family: var(--ta-font-display); font-size: 40px; line-height: 0.95; font-weight: 500; margin: 0; }
.ta-player__name a { color: inherit; text-decoration: none; }
.ta-player__name a:hover { color: var(--ta-gold-sun); }
.ta-player__tag { font-family: var(--ta-font-editorial); font-style: italic; font-size: 17px; color: var(--ta-body-2); margin: 6px 0 0; }
.ta-player__series { margin: 6px 0 0; }
.ta-player__controls { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
/* With a cover the card reads in two halves: the conversation on the left, its
   artwork on the right. Without one the wrapper is a single column and nothing
   about the card changes. */
.ta-player__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.ta-player.has-cover .ta-player__split { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
.ta-player__cover {
	margin: 0;
	border-radius: var(--ta-radius);
	overflow: hidden;
	border: 1px solid var(--ta-edge);
}
.ta-player__cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
@media (max-width: 900px) {
	.ta-player.has-cover .ta-player__split { grid-template-columns: minmax(0, 1fr); }
}
.ta-player__summary {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ta-cream);
	text-shadow: 0 1px 2px var(--ta-shadow);
}
/* Previous / next, on the edges of the card. */
.ta-player.is-featured { padding-inline: 62px; }
.ta-player__nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--ta-cream);
	background: var(--ta-glass);
	border: 1px solid var(--ta-edge);
	text-decoration: none;
	transition: background var(--ta-dur), color var(--ta-dur), border-color var(--ta-dur);
	z-index: 3;
}
.ta-player__nav.is-prev { left: 12px; }
.ta-player__nav.is-next { right: 12px; }
.ta-player__nav .ta-i { width: 18px; height: 18px; }
.ta-player__nav:hover:not(.is-disabled) { background: var(--ta-aqua); color: var(--ta-navy); border-color: var(--ta-aqua); }
/* End of the run: still drawn, visibly out of service. */
.ta-player__nav.is-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
.ta-player.is-loading { opacity: 0.55; transition: opacity 0.15s; }
@media (max-width: 640px) {
	.ta-player.is-featured { padding-inline: 48px; }
	.ta-player__nav { width: 30px; height: 30px; }
	.ta-player__nav.is-prev { left: 6px; }
	.ta-player__nav.is-next { right: 6px; }
}

.ta-scrub {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: var(--ta-track);
	margin: 20px 0 8px;
	cursor: pointer;
}
.ta-scrub i {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--ta-progress, 0%);
	border-radius: 3px;
	background: linear-gradient(90deg, var(--ta-teal-glow), var(--ta-aqua));
}
.ta-scrub b {
	position: absolute;
	left: var(--ta-progress, 0%);
	top: 50%;
	translate: -50% -50%;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ta-gold-sun);
	box-shadow: 0 0 0 4px var(--ta-gold-halo);
}
.ta-times {
	display: flex;
	justify-content: space-between;
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-small);
	letter-spacing: 0.1em;
	color: var(--ta-muted);
}
.ta-play {
	width: 56px;
	height: 56px;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: var(--ta-gold);
	color: var(--ta-navy);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--ta-glow-gold);
	transition: transform var(--ta-dur) var(--ta-ease);
}
.ta-play:hover { transform: scale(1.06); }
.ta-play .ta-i { width: 26px; height: 26px; }
/* Un triangle et deux barres sont deux dessins, pas deux états d'un même tracé.
   Le découper au clip-path laissait le bord gauche du triangle en guise de
   première barre et un éclat de pointe en guise de seconde : le « | ▸ » qu'on
   voyait à l'écran. Les deux icônes sont donc dessinées, et on échange. */
/* Voir view.js : sur iOS, seul le bouton de YouTube peut lancer la lecture. Le
   nôtre s'efface une fois la vidéo ouverte plutôt que de rester là sans effet. */
.ta-player.is-external-only .ta-play { display: none; }
.ta-play .ta-i--pause { display: none; }
.ta-player.is-playing .ta-play .ta-i--play { display: none; }
.ta-player.is-playing .ta-play .ta-i--pause { display: block; }
.ta-chapters { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-chapters button,
.ta-chapters a {
	font-size: var(--ta-fs-base);
	padding: 6px 12px;
	min-height: 32px;
	border-radius: var(--ta-pill);
	background: var(--ta-glass);
	border: 1px solid var(--ta-edge-soft);
	color: var(--ta-body-1);
	text-decoration: none;
	cursor: pointer;
}
.ta-chapters button:hover,
.ta-chapters a:hover { background: var(--ta-aqua-glow); border-color: var(--ta-aqua-edge); }

/* mini */
.ta-player.is-mini {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--ta-veil);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-top: 1px solid var(--ta-line);
	margin: 0;
}
.ta-mini__wrap {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-inline: auto;
	padding: 10px clamp(16px, 4vw, 48px);
	display: grid;
	grid-template-columns: minmax(0, auto) 1fr auto;
	gap: 18px;
	align-items: center;
	min-height: 76px;
}
.ta-mini__meta { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.ta-mini__meta b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
.ta-mini__meta small { font-size: var(--ta-fs-base); color: var(--ta-muted); }
.ta-mini__mid { display: flex; align-items: center; gap: 14px; }
.ta-mini__mid .ta-scrub { flex: 1; margin: 0; }
.ta-mini__mid .ta-play { width: 44px; height: 44px; box-shadow: none; }
.ta-mini__mid .ta-play .ta-i { width: 20px; height: 20px; }
.ta-mini__right { display: flex; gap: 10px; align-items: center; }
.ta-mini__right a { color: var(--ta-cream); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ta-edge); }
.ta-mini__right a:hover { color: var(--ta-navy); background: var(--ta-aqua); border-color: var(--ta-aqua); }
.ta-mini__right .ta-i { width: 18px; height: 18px; }
body.ta-has-sticky-player { padding-bottom: 92px; }
@media (max-width: 800px) {
	.ta-mini__right,
	.ta-mini__mid .ta-times { display: none; }
	.ta-mini__wrap { grid-template-columns: 1fr auto; }
	.ta-mini__mid .ta-scrub { display: none; }
}
@media (max-width: 640px) {
	.ta-player__main { grid-template-columns: 64px 1fr; }
	.ta-player__name { font-size: 30px; }
}

/* ---------- ta/series ---------- */
.ta-series.is-layout-cards {
	display: grid;
	grid-template-columns: repeat(var(--ta-cols, 3), minmax(0, 1fr));
	gap: 14px;
}
.ta-sr {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 14px;
	align-items: start;
	border-radius: var(--ta-radius);
	padding: 18px 18px 16px;
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ta-dur), transform var(--ta-dur) var(--ta-ease);
}
.ta-sr:hover { border-color: var(--ta-c); transform: translateY(-2px); }
/* The faces of a series, overlapped like the "start here" row. The ring picks up
   the series colour, so each theme reads as its own family at a glance. */
.ta-sr__faces {
	display: flex;
	flex-wrap: wrap;
	margin: 12px 0 10px;
}
.ta-sr__faces .ta-avatar {
	display: block;
	margin-left: -12px;
	box-shadow: 0 0 0 2px var(--ta-void), 0 0 0 4px var(--ta-c);
	transition: transform var(--ta-dur) var(--ta-ease);
}
.ta-sr__faces .ta-avatar:first-child { margin-left: 0; }
.ta-sr:hover .ta-sr__faces .ta-avatar { transform: translateY(-2px); }
.ta-sr__faces .ta-avatar > img { display: block; }
.ta-sr i {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--ta-c);
	display: grid;
	place-items: center;
	font-family: var(--ta-font-display);
	font-style: normal;
	font-size: 18px;
	/* Même correction que .ta-stag : le monogramme est du texte. Le cercle et sa
	   lueur gardent la couleur pure — ce sont des éléments d'interface (3:1). */
	color: color-mix(in srgb, var(--ta-c) 72%, var(--ta-cream));
	box-shadow: 0 0 18px -4px var(--ta-c);
}
.ta-sr h3 { font-family: var(--ta-font-body); font-size: 17px; font-weight: 600; margin: 0; }
.ta-sr p { font-size: 13px; color: var(--ta-body-2); margin: 4px 0 0; line-height: 1.45; }
.ta-sr small {
	display: block;
	margin-top: 8px;
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ta-muted);
}
@media (max-width: 900px) { .ta-series.is-layout-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ta-series.is-layout-cards { grid-template-columns: 1fr; } }

.ta-series.is-layout-orbit {
	position: absolute;
	right: -30px;
	top: -30px;
	width: 190px;
	height: 190px;
	pointer-events: none;
}
.ta-series.is-layout-orbit span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 14px;
	margin: -7px;
	border-radius: 50%;
	background: var(--ta-c);
	box-shadow: 0 0 14px var(--ta-c);
}
.ta-series.is-layout-orbit::before {
	content: "";
	position: absolute;
	inset: 14px;
	border-radius: 50%;
	border: 1px dashed var(--ta-orbit);
}
.ta-series.is-layout-orbit::after {
	content: "";
	position: absolute;
	inset: 48px;
	border-radius: 50%;
	border: 1px solid var(--ta-orbit-soft);
}
@media (max-width: 1000px) { .ta-series.is-layout-orbit { opacity: 0.45; } }

/* ---------- ta/stats ---------- */
.ta-stats { display: flex; flex-wrap: wrap; gap: 26px; }
.ta-stat b {
	display: block;
	font-family: var(--ta-font-display);
	font-size: 54px;
	line-height: 1;
	font-weight: 500;
	color: var(--ta-gold-sun);
}
.ta-stat span {
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ta-muted);
}

/* ---------- ta/geometry ---------- */
.ta-geo { pointer-events: none; line-height: 0; }
.ta-geo svg { width: 100%; height: auto; max-width: var(--ta-geo-size, 100%); }
.ta-geo.is-backdrop {
	position: absolute;
	right: -6vw;
	top: 50%;
	translate: 0 -50%;
	z-index: -1;
	width: min(62vw, var(--ta-geo-size, 820px));
}
/* Promoted to its own layer. Unpromoted, the rotation repaints the area it
   covers on every frame — and the featured player sits inside that area with a
   backdrop-filter, so each frame it re-sampled and re-blurred a moving image.
   The mandala's thin bright strokes sweeping under the blur is what reads as
   flashes of light on the home hero. */
.ta-geo.is-spinning { animation: ta-spin 140s linear infinite; will-change: transform; }
@keyframes ta-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
	.ta-geo.is-spinning { animation: none; }
	.ta-live::before { animation: none; }
}
@media (max-width: 900px) {
	.ta-geo.is-backdrop { right: -30vw; width: 120vw; opacity: 0.3 !important; }
}

/* ---------- ta/listen-links + the top bar ---------- */
.ta-listen {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.ta-listen.is-right { justify-content: flex-end; }
.ta-listen.is-center { justify-content: center; }
.ta-listen.is-left { justify-content: flex-start; }
.ta-listen__label {
	font-family: var(--ta-font-body);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: var(--ta-fs-micro);
	line-height: 1;
	color: var(--ta-muted);
	margin-right: 4px;
	white-space: nowrap;
}
.ta-listen__link {
	display: inline-grid;
	place-items: center;
	width: calc(var(--ta-i, 20px) + 6px);
	height: calc(var(--ta-i, 20px) + 6px);
	border-radius: 50%;
	color: var(--ta-white);
	text-decoration: none;
	transition: color var(--ta-dur), background var(--ta-dur);
}
.ta-listen__link .ta-i { width: var(--ta-i, 20px); height: var(--ta-i, 20px); }
.ta-listen__link:hover { color: var(--ta-navy); background: var(--ta-aqua); }

/* The thin bar above the header: socials hard left, platforms hard right, 32px tall. */
.ta-topbar {
	border-bottom: 1px solid var(--ta-line);
	min-height: 32px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: center;
	gap: 0 !important;
}
.ta-topbar > .wp-block-column { align-self: center; }
.ta-topbar .wp-block-social-links { gap: 2px; margin: 0; }
.ta-topbar .wp-block-social-link { margin: 0; background: none !important; }
.ta-topbar .wp-block-social-link a { color: var(--ta-white); padding: 5px; text-decoration: none; }
/* Core's logos-only style colours each icon with its brand hue at a higher
   specificity than a plain descendant rule, hence the longer selectors. */
.ta-topbar .wp-block-social-links .wp-social-link,
.ta-topbar .wp-block-social-links.is-style-logos-only .wp-social-link { color: var(--ta-white); }
.ta-topbar .wp-block-social-links .wp-social-link svg,
.ta-topbar .wp-block-social-links.is-style-logos-only .wp-social-link svg {
	fill: var(--ta-white);
	color: var(--ta-white);
	width: 16px;
	height: 16px;
}
.ta-topbar .wp-block-social-links .wp-social-link:hover svg,
.ta-topbar .wp-block-social-links.is-style-logos-only .wp-social-link:hover svg {
	fill: var(--ta-aqua);
	color: var(--ta-aqua);
}
/* The right side of the bar carries two things now — the platforms and the
   light/dark switch — so the column becomes the row and the block stops
   claiming the full width for itself. */
.ta-topbar > .wp-block-column:last-child {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}
/* A WordPress column is a FLOW layout: it puts a block-gap margin above every
   sibling after the first. Turned into a row, that margin became a 24 px shove
   downwards — the switch sat 16 px below the icons and the bar grew to 61 px
   for a 32 px design. The row's own gap does the spacing. */
.ta-topbar > .wp-block-column > * { margin-block: 0 !important; }
/* One optical line for things of different heights: icons, small caps and a
   pill all centred on the same axis. */
.ta-topbar > .wp-block-column { display: flex; align-items: center; }
.ta-topbar > .wp-block-column:first-child { justify-content: flex-start; }
.ta-topbar .wp-block-social-links,
.ta-topbar .ta-listen,
.ta-topbar .ta-theme-toggle { align-self: center; }
.ta-topbar .ta-listen { gap: 6px; justify-content: flex-end; width: auto; }
/* In the bar the label sits beside white icons, so it takes the body face and
   the same white — Gruppo is the block's default elsewhere. */
.ta-topbar .ta-listen__label {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-micro);
	letter-spacing: 0.18em;
	color: var(--ta-white);
}
@media (max-width: 640px) {
	.ta-topbar .ta-listen__label { display: none; }
	.ta-topbar { padding-inline: 12px !important; }
}
/* Sous 782 px, WordPress empile les colonnes : la barre de 32 px devenait un
   double étage de 55 px — réseaux sociaux au-dessus, plateformes en dessous.
   Elle ne contient que des icônes et un interrupteur : ~330 px sur un écran de
   375, elle tient sur une ligne partout. On annule donc l'empilement du coeur
   pour cette barre-là seulement. */
@media (max-width: 781px) {
	.ta-topbar { flex-wrap: nowrap !important; }
	.ta-topbar > .wp-block-column {
		flex-basis: auto !important;
		flex-grow: 1;
		min-width: 0;
	}
}

/* The site logo in the header.
   An SVG in an inline-block anchor collapses to zero: the anchor sizes from the
   image while `max-width:100%` sizes the image from the anchor. Pinning the
   height breaks the loop and lets the width follow the aspect ratio. */
.ta-header .wp-block-site-logo { width: auto; }
.ta-header .wp-block-site-logo a { display: inline-block; }
.ta-header .wp-block-site-logo img {
	height: 48px;
	width: auto;
	max-width: none;
	max-height: none;
	display: block;
}
@media (max-width: 900px) { .ta-header .wp-block-site-logo img { height: 38px; } }

/* ---------- ta/newsletter ---------- */
.ta-newsletter__form { display: flex; gap: 8px; flex-wrap: wrap; }
/* The name takes the first line on its own; the email and its button share the
   second. Two rows rather than three boxes fighting over one. */
.ta-newsletter__name { flex: 1 0 100% !important; }
.ta-newsletter input {
	flex: 1;
	min-width: 12ch;
	min-height: 44px;
	border-radius: var(--ta-pill);
	border: 1px solid var(--ta-edge);
	background: var(--ta-glass);
	color: var(--ta-white);
	padding: 0 16px;
	font: inherit;
	font-size: 14px;
}
.ta-newsletter input::placeholder { color: var(--ta-muted); }
/* The child theme styles every field with `input:not([type="submit"])…` — same
   specificity as a two-class rule but loaded later, so it was winning: white
   background, 5 px corners and near-white text, which made anything typed into
   these boxes invisible. Naming the type puts the block's own skin back. */
.ta-newsletter .ta-newsletter__form input.ta-newsletter__field {
	border-radius: var(--ta-pill);
	border: 1px solid var(--ta-edge);
	background: var(--ta-glass);
	color: var(--ta-white);
	font-size: 14px;
}
/* In the footer the form is a footnote rather than a call to action: shorter
   controls, and a width that stops well before the columns above it. */
.ta-footer .ta-newsletter__form { max-width: 420px; }
.ta-footer .ta-newsletter input,
.ta-footer .ta-newsletter .ta-btn {
	min-height: 36px;
	height: 36px;
}
.ta-footer .ta-newsletter input.ta-newsletter__field { font-size: 13px; padding-inline: 14px; }
.ta-footer .ta-newsletter .ta-btn { padding: 0 16px; font-size: var(--ta-fs-label); }
/* Below the breakpoint the form is tapped rather than clicked, so the controls
   go back to a 44 px target. */
@media (max-width: 900px) {
	.ta-footer .ta-newsletter__form { max-width: none; }
	.ta-footer .ta-newsletter input,
	.ta-footer .ta-newsletter .ta-btn { min-height: 44px; height: 44px; }
	.ta-footer .ta-newsletter input.ta-newsletter__field { font-size: 14px; }
}

/* ==========================================================================
   Pattern helpers — small classes the home pattern puts on core blocks.
   Layout, colour and spacing stay block attributes; these only add the things
   block supports cannot express (hover lift, overlay plates, sticky rail).
   ========================================================================== */
.ta-hero { position: relative; overflow: hidden; }
/* The hero motif sits behind the hero copy but ABOVE the cover photo and its
   overlay. Core's cover inner container has no stacking context of its own, so
   a z-index:-1 child would fall behind the image; isolating the container is
   what the original design did on its `.hero`. */
.ta-hero .wp-block-cover__inner-container { isolation: isolate; }
/* The copy and the player card line up on their bottoms, so the last line of
   the standfirst sits level with the bottom edge of the card. Doing it by
   alignment rather than by an offset matters: the card's height changes with
   the length of each episode's summary, so any hard-coded nudge would only ever
   be right for one episode. */
@media (min-width: 783px) {
	.ta-hero .wp-block-columns.are-vertically-aligned-center { align-items: flex-end; }
	.ta-hero .wp-block-columns > .wp-block-column.is-vertically-aligned-center { align-self: flex-end; }
	/* The rule under the copy must not count towards the column's height, or it
	   would push the last line back up above the card. `!important` is not
	   decoration here: core's generated layout CSS carries
	   `:root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }`,
	   which ties this selector on specificity and is printed after it. */
	.ta-hero .wp-block-column > .wp-block-separator { margin-block-end: -35px !important; }
}
/* Gruppo ships a single weight, so `font-weight: bold` would only get a faux
   bold — smeared at this size. A hairline stroke in the same colour thickens the
   strokes evenly instead, which is what reading "bolder" actually asks for. */
.ta-eyebrow {
	font-family: var(--ta-font-label);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 13px;
	-webkit-text-stroke: 0.6px currentColor;
	paint-order: stroke fill;
}
.ta-kicker {
	font-family: var(--ta-font-label);
	text-transform: uppercase;
	letter-spacing: 0.42em;
	-webkit-text-stroke: 0.6px currentColor;
	paint-order: stroke fill;
}

.ta-card {
	border: 1px solid var(--ta-line);
	transition: border-color var(--ta-dur), transform var(--ta-dur) var(--ta-ease);
	position: relative;
	overflow: hidden;
}
.ta-card:hover { border-color: var(--ta-aqua-line); transform: translateY(-2px); }
.ta-card--gold {
	background: linear-gradient(135deg, var(--ta-gold-tint), var(--ta-gold-tint-soft));
	border-color: var(--ta-gold-edge);
}
.ta-card--gold:hover { border-color: var(--ta-gold-edge-strong); }
/* Outline buttons read as ghost pills on the dark ground.
   theme.json fills every button with aqua, so the outline variation has to
   clear the background explicitly — core's own rule only does it for buttons
   without a background, which a themed button no longer is. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	background-image: none;
	color: var(--ta-cream);
	border: 1.5px solid var(--ta-edge-strong);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--ta-aqua);
	color: var(--ta-navy);
	border-color: var(--ta-aqua);
}

/* Insight plates — a core Query Loop styled as the overlay cards of the design. */
.ta-plates .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 46px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.ta-plates .wp-block-post {
	position: relative;
	/* A column, not a row: side by side the date and the title each shrank to
	   half the plate. Stacked and pushed to the bottom, both run full width. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
	aspect-ratio: 4 / 3;
	border-radius: var(--ta-radius);
	overflow: hidden;
	background: var(--ta-plate-ground);
	border: 1px solid var(--ta-line);
	margin: 0;
}
/* One continuous veil behind the caption instead of a gradient on the date and
   a flat panel on the title, which left a visible seam between the two. */
.ta-plates .wp-block-post::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 72%;
	background: linear-gradient(180deg, var(--ta-veil-0) 0%, var(--ta-veil-soft) 40%, var(--ta-veil-full) 100%);
	pointer-events: none;
}
.ta-plates .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.ta-plates .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 0.6s var(--ta-ease); }
.ta-plates .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.ta-plates .wp-block-post > :not(.wp-block-post-featured-image) { position: relative; z-index: 1; width: 100%; }
.ta-plates .wp-block-post-date,
.ta-plates .wp-block-post-title { padding-inline: 22px; margin: 0; }
.ta-plates .wp-block-post-date {
	padding-top: 60px;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ta-gold);
}
.ta-plates .wp-block-post-title {
	padding-bottom: 22px;
	margin-top: 6px;
	font-family: var(--ta-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
}
.ta-plates .wp-block-post-title a { color: var(--ta-cream); text-decoration: none; }
.ta-plates .wp-block-post-title a:hover { color: var(--ta-aqua); }
@media (max-width: 900px) { .ta-plates .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ta-plates .wp-block-post-template { grid-template-columns: 1fr; } }

/* A single-post Query Loop used as the "latest insight" bento plate. */
.ta-plate-single .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.ta-plate-single .wp-block-post { position: relative; min-height: 100%; display: flex; align-items: flex-end; margin: 0; }
.ta-plate-single .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.ta-plate-single .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.ta-plate-single .wp-block-post > :not(.wp-block-post-featured-image) { position: relative; z-index: 1; width: 100%; }
.ta-plate-single .wp-block-post-title {
	margin: 0;
	padding: 60px 20px 20px;
	background: linear-gradient(180deg, transparent, var(--ta-veil-strong) 60%);
	font-family: var(--ta-font-display);
	font-size: 26px;
	line-height: 1;
}
.ta-plate-single .wp-block-post-title a { color: var(--ta-cream); text-decoration: none; }

/* Section heads: the display title with its small eyebrow above. */
.ta-sec-head { align-items: flex-end; }

/* Editor comfort: the dark design needs a dark canvas to be readable. */
.editor-styles-wrapper { background-color: var(--ta-void); color: var(--ta-cream); }

/* ---------- the two bands under the hero ---------- */
/* The hero is `position: relative`, so it paints over anything pulled up into
   it by a negative margin. The strip needs its own stacking order to sit on
   top — this is what the -50 px overlap is for. */
.ta-bands {
	position: relative;
	z-index: 1;
}
/* One line for all of them. Everything inside is centred on that line rather
   than stacked, so the row reads as a single strip and not as separate cards —
   which means they have to share a height, whichever one is tallest. */
.ta-bands { align-items: stretch; }
.ta-bands .ta-band {
	min-height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px solid var(--ta-line);
}
.ta-bands .ta-band > * { margin-block: 0 !important; }
.ta-band .ta-eyebrow { margin-bottom: 6px !important; }
/* The label is inline, so its line box is set by the parent's strut, not by its
   own line-height — 30 px instead of 13. Making it a block frees it. */
.ta-band .ta-stat span { display: block; line-height: 1.3; }

/* The corpus — the figures shrink to fit the line. Three boxes share the row
   now, so the gap is tighter: at the old spacing the three figures needed 252 px
   in a 243 px box and wrapped onto a second line. */
.ta-band .ta-stats { gap: clamp(12px, 1.5vw, 20px); }
.ta-band .ta-stat b { font-size: 30px; }
/* Tighter tracking than elsewhere: the three labels plus their gaps measured
   252 px in a 241 px box and dropped "9 SERIES" onto a second line. */
.ta-band .ta-stat span { letter-spacing: 0.1em; }

/* Behind the project — the portrait sits on the line beside her name. */
.ta-band--host .ta-band__face { margin: 0 !important; }
.ta-band--host .ta-band__face img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--ta-card-line);
}
.ta-band--host .ta-band__title a { color: inherit; text-decoration: none; }
.ta-band--host .ta-band__title a:hover { color: var(--ta-aqua); }
/* The welcome runs the full width of its box, under the portrait and the name
   rather than squeezed beside them. */
.ta-band--host .ta-band__lead { margin-top: 12px !important; }
.ta-band--host .ta-band__row { margin-bottom: 0 !important; }

/* Start here — one row: title | lead | faces + link. */
.ta-band__row { align-items: center; }
/* Inside a zone the flow gap would add 26 px between eyebrow and title, which
   the 100 px line cannot absorb. The zones set their own rhythm. */
.ta-band__row .wp-block-column > * { margin-block-start: 0 !important; }
.ta-band__title {
	margin: 0;
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.12;
	color: var(--ta-cream);
}
.ta-band__lead {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ta-muted);
}
.ta-band__cta > * { margin-block: 0 !important; }
.ta-band__cta .ta-conversations + .ta-journey { margin-top: 6px !important; }
.ta-journey { margin: 0; }
.ta-journey a {
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-aqua);
	text-decoration: none;
	white-space: nowrap;
}
.ta-journey a:hover { text-decoration: underline; }

@media (max-width: 900px) {
	/* Stacked, so the 100 px line no longer applies. */
	.ta-bands .ta-band { min-height: 0; }
	.ta-band__row { row-gap: 14px; }
	.ta-band__cta .ta-conversations + .ta-journey { margin-top: 10px !important; }
}

/* ---------- the overlay menu on small screens ----------
   WordPress falls back to a WHITE overlay when the navigation block carries no
   overlay colours of its own, while the links keep the block's own near-white
   — measured: white on white, 1.02:1, an invisible menu. The colours are now
   set on the block itself (so they stay editable), and the panel below is
   given the size and rhythm core does not provide here: it opened as an 89 px
   band under the header instead of covering the screen. */
.wp-block-navigation__responsive-container.is-menu-open {
	inset: 0 !important;
	padding: 26px 24px 40px;
	/* !important because core prints its own `background-color` for this exact
	   selector in an inline <style> that lands after this file: same specificity,
	   later in the cascade, so it won without it. */
	background-color: var(--ta-void-2) !important;
	color: var(--ta-cream) !important;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	gap: 4px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}
/* Each entry is a full-width row: on a phone the target is the line, not the
   handful of pixels the word happens to occupy. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--ta-line);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 56px;
	font-size: 26px;
	color: var(--ta-cream) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content { color: var(--ta-gold-sun); }
/* The close control needs a finger-sized target, not a 24 px glyph. */
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	color: var(--ta-cream);
}
.wp-block-navigation__responsive-container-open { min-width: 44px; min-height: 44px; }

/* ---------- header navigation ---------- */
/* One glyph per entry, drawn as a mask so it takes the link's own colour and
   follows hover and the current-page state without a second rule. */
.ta-header .wp-block-navigation-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	--ta-ico: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='12'%20r='4'/></svg>");
}
.ta-header .wp-block-navigation-item > a::before {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--ta-ico) center / contain no-repeat;
	mask: var(--ta-ico) center / contain no-repeat;
}
.ta-header .wp-block-navigation-item:first-child > a { --ta-ico: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%2010.4%2012%203l9%207.4'/><path%20d='M5%209.5V21h14V9.5'/><path%20d='M10%2021v-6h4v6'/></svg>"); }
.ta-header .wp-block-navigation-item > a[href*="/conversations"] { --ta-ico: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%205h16v10H9l-5%204z'/><circle%20cx='9'%20cy='10'%20r='1'/><circle%20cx='13'%20cy='10'%20r='1'/><circle%20cx='17'%20cy='10'%20r='1'/></svg>"); }
.ta-header .wp-block-navigation-item > a[href*="/themes"]        { --ta-ico: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%204h7v7H4z'/><path%20d='M13%204h7v7h-7z'/><path%20d='M4%2013h7v7H4z'/><path%20d='M13%2013h7v7h-7z'/></svg>"); }
.ta-header .wp-block-navigation-item > a[href*="/analysis"]      { --ta-ico: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%2020h18'/><path%20d='M7%2020v-6'/><path%20d='M12%2020V7'/><path%20d='M17%2020v-9'/></svg>"); }
.ta-header .wp-block-navigation-item > a[href*="/insights"]      { --ta-ico: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M9.5%2021h5'/><path%20d='M10%2017.5h4'/><path%20d='M12%203a6%206%200%200%201%203.3%2011%202%202%200%200%200-.8%201.6v.9h-5v-.9a2%202%200%200%200-.8-1.6A6%206%200%200%201%2012%203z'/></svg>"); }
.ta-header .wp-block-navigation-item > a[href*="/live-events"]   { --ta-ico: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%206h16v15H4z'/><path%20d='M4%2011h16'/><path%20d='M9%203v5'/><path%20d='M15%203v5'/></svg>"); }
.ta-header .wp-block-navigation-item > a[href*="/about"]         { --ta-ico: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020z'/><path%20d='M12%2011v6'/><path%20d='M12%207.5v.5'/></svg>"); }

/* ---------- ta/inquiries — the recurring lines of questioning ---------- */
.ta-inquiries {
	display: grid;
	grid-template-columns: repeat(var(--ta-cols, 2), minmax(0, 1fr));
	gap: 26px;
}
.ta-iq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 26px 22px;
	border-radius: var(--ta-radius);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	transition: border-color var(--ta-dur);
}
.ta-iq:hover { border-color: var(--ta-aqua-line); }
/* The title on the left, who engaged on the right: the reader knows the weight
   of an inquiry before reading a word of the analysis. */
.ta-iq__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}
.ta-iq__id { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ta-iq__who {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.ta-iq__n {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-label);
	letter-spacing: 0.14em;
	color: var(--ta-gold);
	flex: none;
}
.ta-iq__label {
	margin: 0;
	font-family: var(--ta-font-display);
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.1;
	color: var(--ta-cream);
}
/* The host's own wording, kept in her voice. */
.ta-iq__q {
	margin: 0;
	font-family: var(--ta-font-editorial);
	font-style: italic;
	font-size: 17px;
	line-height: 1.4;
	color: var(--ta-mist);
}
.ta-iq__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ta-muted);
}
.ta-iq__faces { display: flex; }
.ta-iq__faces .ta-avatar {
	display: block;
	margin-left: -10px;
	box-shadow: 0 0 0 2px var(--ta-void), 0 0 0 3px var(--ta-teal-glow);
}
.ta-iq__faces .ta-avatar:first-child { margin-left: 0; }
.ta-iq__faces .ta-avatar > img { display: block; }
.ta-iq__count {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-muted);
	white-space: nowrap;
}
@media (max-width: 900px) {
	.ta-inquiries { grid-template-columns: 1fr; }
	/* Stacked, the faces would squeeze the title; they move under it. */
	.ta-iq__head { flex-direction: column; }
	.ta-iq__who { align-items: flex-start; }
}

/* The stance spectrum: how the corpus met one inquiry. */
.ta-iq__spectrum { display: flex; flex-direction: column; gap: 10px; }
.ta-iq__bar {
	display: flex;
	height: 8px;
	border-radius: var(--ta-pill);
	overflow: hidden;
	background: var(--ta-glass);
}
.ta-iq__bar > span { display: block; min-width: 3px; }
.ta-iq__bar .is-embraces,      .ta-iq__legend .is-embraces b      { background: var(--ta-stance-embraces); }
.ta-iq__bar .is-qualifies,     .ta-iq__legend .is-qualifies b     { background: var(--ta-stance-qualifies); }
.ta-iq__bar .is-reframes,      .ta-iq__legend .is-reframes b      { background: var(--ta-stance-reframes); }
.ta-iq__bar .is-contests,      .ta-iq__legend .is-contests b      { background: var(--ta-stance-contests); }
.ta-iq__bar .is-not-addressed, .ta-iq__legend .is-not-addressed b { background: var(--ta-stance-none); }
/* The count sits in a chip of the stance's own colour, so the legend is
   readable without relying on colour alone to carry the meaning. */
.ta-iq__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ta-muted);
}
.ta-iq__legend li { display: inline-flex; align-items: center; gap: 6px; }
.ta-iq__legend b {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 16px;
	padding: 0 5px;
	border-radius: var(--ta-pill);
	color: var(--ta-void);
	font-size: var(--ta-fs-tiny);
}
.ta-iq__legend .is-not-addressed b { color: var(--ta-cream); }

/* The two readings share a shape so they can be compared at a glance; the rule
   on the left carries which one it is, doubled by the label above. */
.ta-iq__read {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ta-body-1);
	border-left: 2px solid currentColor;
	padding-left: 14px;
}
.ta-iq__read.is-conv { border-left-color: var(--ta-stance-embraces); }
.ta-iq__read.is-div { border-left-color: var(--ta-stance-contests); }
.ta-iq__read.is-nota { border-left-color: var(--ta-gold); }
.ta-iq__read-label {
	display: block;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.ta-iq__read.is-conv .ta-iq__read-label { color: var(--ta-stance-embraces); }
.ta-iq__read.is-div .ta-iq__read-label { color: var(--ta-stance-contests); }
.ta-iq__read.is-nota .ta-iq__read-label { color: var(--ta-gold); }

/* ---------- ta/propositions — the second grid, where the corpus takes sides ---
   Same card, same spectrum, same reading blocks as the inquiries above: the two
   grids are read one after the other, so they must not look like two designs.
   Only the vocabulary changes — agrees / expands / disagrees instead of stances. */
.ta-props {
	display: grid;
	grid-template-columns: repeat(var(--ta-cols, 2), minmax(0, 1fr));
	gap: 26px;
}
.ta-pr {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 26px 22px;
	border-radius: var(--ta-radius);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	transition: border-color var(--ta-dur);
}
.ta-pr:hover { border-color: var(--ta-aqua-line); }
.ta-pr__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ta-pr__id { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ta-pr__who { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ta-pr__n {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-label);
	letter-spacing: 0.14em;
	color: var(--ta-gold);
	flex: none;
}
.ta-pr__label {
	margin: 0;
	font-family: var(--ta-font-display);
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.1;
	color: var(--ta-cream);
}
/* A claim that came out of the corpus rather than from the paradox set. */
.ta-pr__label em {
	display: inline-block;
	margin-left: 8px;
	font-family: var(--ta-font-body);
	font-style: normal;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-gold);
	vertical-align: middle;
}
/* The claim itself, set as the quotation it is. */
.ta-pr__claim {
	margin: 0;
	padding-left: 14px;
	border-left: 2px solid var(--ta-gold);
	font-family: var(--ta-font-editorial);
	font-style: italic;
	font-size: 17px;
	line-height: 1.45;
	color: var(--ta-mist);
}
.ta-pr__covers { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ta-muted); }
.ta-pr__covers-label {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-teal-ice);
	margin-right: 8px;
}
.ta-pr__faces { display: flex; }
.ta-pr__faces .ta-avatar {
	display: block;
	margin-left: -10px;
	box-shadow: 0 0 0 2px var(--ta-void), 0 0 0 3px var(--ta-teal-glow);
}
.ta-pr__faces .ta-avatar:first-child { margin-left: 0; }
.ta-pr__faces .ta-avatar > img { display: block; }
.ta-pr__count {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-muted);
	white-space: nowrap;
}
.ta-pr__spectrum { display: flex; flex-direction: column; gap: 10px; }
.ta-pr__bar {
	display: flex;
	height: 10px;
	border-radius: var(--ta-pill);
	overflow: hidden;
	background: var(--ta-stance-none);
}
.ta-pr__bar > span { display: block; min-width: 3px; }
.ta-pr__bar .is-a, .ta-pr__legend .is-a b { background: var(--ta-stance-embraces); }
.ta-pr__bar .is-e, .ta-pr__legend .is-e b { background: var(--ta-stance-reframes); }
.ta-pr__bar .is-d, .ta-pr__legend .is-d b { background: var(--ta-stance-contests); }
.ta-pr__legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ta-muted);
}
.ta-pr__legend li { display: inline-flex; align-items: center; gap: 6px; }
.ta-pr__legend b {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--ta-pill);
	color: var(--ta-void);
	font-size: var(--ta-fs-tiny);
}
/* How split the engaged voices are — a figure, not a band. */
.ta-pr__legend .ta-pr__contested b { background: none; color: var(--ta-gold); min-width: 0; padding: 0; }
.ta-pr__read,
.ta-pr__fault {
	margin: 0;
	padding-left: 14px;
	border-left: 2px solid var(--ta-line);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ta-body-1);
}
.ta-pr__read.is-conv { border-left-color: var(--ta-stance-embraces); }
.ta-pr__read.is-div { border-left-color: var(--ta-stance-contests); }
.ta-pr__read.is-exp { border-left-color: var(--ta-stance-reframes); }
.ta-pr__fault { border-left-color: var(--ta-gold); }
.ta-pr__read-label,
.ta-pr__fault-label {
	display: block;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.ta-pr__read.is-conv .ta-pr__read-label { color: var(--ta-stance-embraces); }
.ta-pr__read.is-div .ta-pr__read-label { color: var(--ta-stance-contests); }
.ta-pr__read.is-exp .ta-pr__read-label { color: var(--ta-stance-reframes); }
.ta-pr__fault-label { color: var(--ta-gold); }
@media (max-width: 900px) {
	.ta-props { grid-template-columns: 1fr; }
	.ta-pr__head { flex-direction: column; }
	.ta-pr__who { align-items: flex-start; }
}

/* The corpus in one bar, in the chart card the page already uses — same shell
   as ta/corpus-chart, only the three codes instead of the five stances. */
.ta-chart--props .is-a i, .ta-chart--props .ta-chart__bar .is-a { background: var(--ta-stance-embraces); }
.ta-chart--props .is-e i, .ta-chart--props .ta-chart__bar .is-e { background: var(--ta-stance-reframes); }
.ta-chart--props .is-d i, .ta-chart--props .ta-chart__bar .is-d { background: var(--ta-stance-contests); }

/* The index beside the claims. It follows the reading down the page rather
   than scrolling away with it: fifteen titles are the shape of the set, and
   the shape is what a long column of cards costs you. */
.ta-props-index {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 24px;
	border-radius: var(--ta-radius);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
}
.ta-props-index__title {
	margin: 0;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ta-teal-ice);
}
.ta-props-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.ta-props-index__list li + li { border-top: 1px solid var(--ta-line); }
.ta-props-index__list a {
	display: grid;
	grid-template-columns: 2.4em 1fr;
	gap: 10px;
	align-items: baseline;
	padding: 9px 0;
	color: var(--ta-body-1);
	text-decoration: none;
	transition: color var(--ta-dur);
}
.ta-props-index__list a:hover { color: var(--ta-aqua); }
.ta-props-index__n {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	color: var(--ta-gold);
}
.ta-props-index__label { font-size: 14px; line-height: 1.35; }
/* The anchor must not land under the sticky header. */
.ta-pr[id] { scroll-margin-top: 24px; }
/* Collé, l'index peut dépasser la hauteur de l'écran : 808 px de sommaire dans
   un iPad en paysage de 768, dont le bas ne se laissait jamais atteindre. On le
   borne à la fenêtre et il défile de lui-même. */
.ta-props-index {
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}
@media (max-width: 900px) {
	/* Stacked, a sticky index would sit on top of what it points at. It already
	   comes first in the markup, so nothing has to be reordered here. */
	.ta-props-index { position: static; max-height: none; overflow-y: visible; }
}

/* ---------- ta/propositions — § 02 / § 03, the voices ranked ----------
   One list read twice: by how often a voice refuses a claim, and by how often
   it takes the claim further. Same bar, so the two panels compare directly. */
/* The two rankings side by side, each under its own heading. */
.ta-lens__title { margin: 0 0 16px; color: var(--ta-cream); }
.ta-profiles { display: flex; flex-direction: column; gap: 14px; }
.ta-profiles__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ta-profile {
	display: grid;
	grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}
.ta-profile__who {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	font-size: 14px;
	color: var(--ta-body-1);
}
.ta-profile__who a { color: inherit; text-decoration: none; }
.ta-profile__who a:hover { color: var(--ta-aqua); }
.ta-profile__who .ta-avatar { flex: none; display: block; }
.ta-profile__who > a,
.ta-profile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-profile__track {
	display: block;
	height: 8px;
	border-radius: var(--ta-pill);
	background: var(--ta-track);
	overflow: hidden;
}
.ta-profile__track i { display: block; height: 100%; border-radius: var(--ta-pill); }
.ta-profiles.is-d .ta-profile__track i { background: var(--ta-stance-contests); }
.ta-profiles.is-e .ta-profile__track i { background: var(--ta-stance-reframes); }
.ta-profile__value {
	font-family: var(--ta-font-body);
	font-size: 13px;
	color: var(--ta-cream);
	min-width: 2ch;
	text-align: right;
}
.ta-profiles__foot {
	margin: 0;
	max-width: 72ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ta-muted);
}
@media (max-width: 640px) {
	/* The name would squeeze the bar to nothing; it takes its own line. */
	.ta-profile { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
	.ta-profile__who { grid-column: 1 / -1; }
}

/* ---------- ta/propositions — § 04, the hypothesis ----------
   Two bars per pair: how often the people who agree with one claim also agree
   with another, against everyone else. The gap between them is the finding. */
.ta-hypo { display: flex; flex-direction: column; gap: 20px; }
.ta-hypo__intro {
	margin: 0;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ta-body-1);
}
/* Wide enough for the bars to be comparable: at 260 px the track came out
   51 px long, which makes a 55 % and a 62 % look the same — and the gap between
   them is the entire point of the section. */
.ta-hypo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 18px;
}
.ta-pred {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 22px;
	border-radius: var(--ta-radius);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
}
/* A gap wide enough to mean something is worth seeing from across the page. */
.ta-pred.is-strong { border-color: var(--ta-gold); }
.ta-pred__head {
	margin: 0;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ta-cream);
	display: flex;
	align-items: center;
	gap: 8px;
}
.ta-pred__head span { color: var(--ta-gold); }
.ta-pred__bars { display: flex; flex-direction: column; gap: 12px; }
/* The label sits above its own bar rather than beside it: side by side it ate
   the width the bar needed to be read. */
.ta-pred__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 3px 10px;
}
.ta-pred__label { grid-column: 1 / -1; }
.ta-pred__label {
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ta-muted);
}
.ta-pred__track {
	display: block;
	height: 8px;
	border-radius: var(--ta-pill);
	background: var(--ta-track);
	overflow: hidden;
}
.ta-pred__track i { display: block; height: 100%; border-radius: var(--ta-pill); }
.ta-pred__row.is-agree .ta-pred__track i { background: var(--ta-stance-embraces); }
/* The comparison bar has to be visible against the track it sits in — the
   stance grey was within a hair of it. */
.ta-pred__row.is-others .ta-pred__track i { background: color-mix(in srgb, var(--ta-mist) 52%, transparent); }
.ta-pred__value { font-family: var(--ta-font-body); font-size: 13px; color: var(--ta-cream); }
.ta-pred__delta {
	margin: 0;
	font-family: var(--ta-font-body);
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-muted);
}
.ta-pred.is-strong .ta-pred__delta { color: var(--ta-gold); }
.ta-hypo__foot {
	margin: 0;
	max-width: 72ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ta-muted);
}

/* ---------- ta/corpus-chart ---------- */
.ta-chart {
	padding: 28px 30px 26px;
	border-radius: var(--ta-radius);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
}
.ta-chart__title {
	margin: 0 0 18px;
	font-family: var(--ta-font-display);
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.1;
	color: var(--ta-cream);
}
.ta-chart__caption {
	margin: 18px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ta-muted);
}

/* Spectrum: the whole corpus as one band. */
.ta-chart__bar {
	display: flex;
	height: 22px;
	border-radius: var(--ta-pill);
	overflow: hidden;
	background: var(--ta-glass);
}
.ta-chart__bar > span { display: block; min-width: 4px; }
.ta-chart__keys {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}
.ta-chart__keys li { display: inline-flex; align-items: baseline; gap: 8px; }
.ta-chart__keys i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	align-self: center;
	flex: none;
}
.ta-chart__keys b {
	font-family: var(--ta-font-display);
	font-size: 24px;
	line-height: 1;
	color: var(--ta-cream);
}
.ta-chart__keys span {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-muted);
}
.ta-chart__keys small { font-size: var(--ta-fs-tiny); color: var(--ta-muted); opacity: 0.7; }

/* Ranked rows: label · track · value · what the dominant stance was. */
.ta-chart__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ta-chart__rows li {
	display: grid;
	grid-template-columns: minmax(140px, 1.1fr) minmax(0, 2fr) auto minmax(84px, auto);
	align-items: center;
	gap: 14px;
}
.ta-chart__label { font-size: 14px; line-height: 1.3; color: var(--ta-body-1); }
.ta-chart__track {
	height: 10px;
	border-radius: var(--ta-pill);
	background: var(--ta-glass);
	overflow: hidden;
}
.ta-chart__fill { display: block; height: 100%; border-radius: var(--ta-pill); }
.ta-chart__value {
	font-family: var(--ta-font-display);
	font-size: 19px;
	line-height: 1;
	color: var(--ta-cream);
	text-align: right;
	min-width: 46px;
}
.ta-chart__note {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ta-muted);
}

/* One stance, one colour — but only on the marks that carry it: the band's
   segments, the legend's swatch, the row's fill. A blanket `.is-*` rule painted
   the whole legend item and made its label unreadable. */
.ta-chart__bar > .is-embraces,
.ta-chart__keys .is-embraces i,
.ta-chart__fill.is-embraces { background: var(--ta-stance-embraces); }
.ta-chart__bar > .is-qualifies,
.ta-chart__keys .is-qualifies i,
.ta-chart__fill.is-qualifies { background: var(--ta-stance-qualifies); }
.ta-chart__bar > .is-reframes,
.ta-chart__keys .is-reframes i,
.ta-chart__fill.is-reframes { background: var(--ta-stance-reframes); }
.ta-chart__bar > .is-contests,
.ta-chart__keys .is-contests i,
.ta-chart__fill.is-contests { background: var(--ta-stance-contests); }
.ta-chart__bar > .is-not-addressed,
.ta-chart__keys .is-not-addressed i { background: var(--ta-stance-none); }

.ta-chart__note.is-embraces  { color: var(--ta-stance-embraces); }
.ta-chart__note.is-qualifies { color: var(--ta-stance-qualifies); }
.ta-chart__note.is-reframes  { color: var(--ta-stance-reframes); }
.ta-chart__note.is-contests  { color: var(--ta-stance-contests); }

@media (max-width: 780px) {
	.ta-chart__rows li { grid-template-columns: 1fr auto; grid-template-areas: "label value" "track track" "note note"; }
	.ta-chart__label { grid-area: label; }
	.ta-chart__track { grid-area: track; }
	.ta-chart__value { grid-area: value; }
	.ta-chart__note { grid-area: note; }
}

/* ---------- About ---------- */
/* The mandala needs a stacking context of its own, or a backdrop child would
   fall behind the section's gradient instead of sitting over it. */
.ta-about-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--ta-line);
}
.ta-about-hero .ta-stats { justify-content: flex-end; }
.ta-about-hero h1 { margin: 0; }

/* The three steps, numbered, on a light panel each. */
/* Equal-height cards: the columns stretch, the link is pushed to the foot. */
.ta-steps { align-items: stretch; }
.ta-steps .ta-step {
	display: flex;
	flex-direction: column;
	padding: 26px 28px 24px;
	border-radius: var(--ta-radius);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	transition: border-color var(--ta-dur);
}
.ta-steps .ta-step:hover { border-color: var(--ta-aqua-line); }
/* Qualified on the paragraph: `.ta-step p` below is more specific than a lone
   class would be, and would take the size and colour back. */
.ta-step p.ta-step__n {
	margin: 0 0 10px;
	font-family: var(--ta-font-display);
	font-size: 36px;
	line-height: 1;
	color: var(--ta-gold);
}
.ta-step h3 { margin: 0 0 12px; }
.ta-step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ta-body-1); }
.ta-step p + p { margin-top: 14px; }
/* Only a call to action is pushed to the foot. Applied to any last child, a
   card that ends on prose grew a hole between its title and its text. */
/* Same gesture as the event cards: the closing link is pushed to the card's
   bottom-right rather than continuing the text column. */
.ta-step > p.has-aqua-color:last-child { margin-top: auto; padding-top: 16px; text-align: right; }

/* The three sources the conversations answer to. Same card as the steps, but
   the number is replaced by where the thing comes from and when. */
.ta-res__meta {
	margin: 0 !important;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-teal-ice);
}
.ta-resources .ta-step h3 { margin-top: 10px; }

/* The host panel. */
.ta-host__portrait { margin: 0; }
.ta-host__portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ta-radius-l);
	border: 1px solid var(--ta-line);
}
.ta-host .ta-eyebrow { margin-bottom: 8px; }
.ta-host h2 { margin: 0 0 16px; }
.ta-host p + p { margin-top: 14px; }
.ta-elsewhere { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 26px; margin-top: 20px !important; }
.ta-elsewhere a { text-decoration: none; white-space: nowrap; }
.ta-elsewhere a:hover { text-decoration: underline; }

.ta-about-faces .ta-conversations__title { font-size: clamp(26px, 3vw, 36px); }

@media (max-width: 780px) {
	.ta-host__portrait img { max-width: 220px; }
	.ta-about-hero .ta-stats { justify-content: flex-start; }
}

/* ---------- ta/schedule ---------- */
.ta-sched__when {
	margin: 0 0 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
}
.ta-sched__when b {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-gold);
}
.ta-sched__when span { font-size: 14px; color: var(--ta-muted); }
.ta-sched__done {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--ta-muted);
}
/* Dates read as a wall of tiles rather than a stack of rows: the run is taken
   in at a glance, and the tiles wrap to whatever width they are given. */
.ta-sched {
	--ta-sched-w: 120px;
	--ta-sched-h: 160px;
	--ta-sched-gap: 12px;
}
.ta-sched__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, var(--ta-sched-w));
	justify-content: start;
	gap: var(--ta-sched-gap);
}
/* An author who wants a fixed count sets it in the sidebar; 0 fits the width.
   A fixed count always holds: the tiles shrink to share the width rather than
   overflow, and stop growing once they reach their natural size. */
.ta-sched--cols-1 .ta-sched__list { grid-template-columns: repeat(1, minmax(0, 1fr)); --ta-sched-n: 1; }
.ta-sched--cols-2 .ta-sched__list { grid-template-columns: repeat(2, minmax(0, 1fr)); --ta-sched-n: 2; }
.ta-sched--cols-3 .ta-sched__list { grid-template-columns: repeat(3, minmax(0, 1fr)); --ta-sched-n: 3; }
.ta-sched--cols-4 .ta-sched__list { grid-template-columns: repeat(4, minmax(0, 1fr)); --ta-sched-n: 4; }
.ta-sched--cols-5 .ta-sched__list { grid-template-columns: repeat(5, minmax(0, 1fr)); --ta-sched-n: 5; }
.ta-sched--cols-6 .ta-sched__list { grid-template-columns: repeat(6, minmax(0, 1fr)); --ta-sched-n: 6; }
.ta-sched[class*="ta-sched--cols-"] .ta-sched__list {
	max-width: calc(var(--ta-sched-n, 1) * var(--ta-sched-w) + (var(--ta-sched-n, 1) - 1) * var(--ta-sched-gap));
}
.ta-sched__list li {
	display: flex;
	text-align: center;
	height: var(--ta-sched-h);
	/* Ollie strips the padding off a list's first and last item
	   (.entry-content :not(.wp-block-group) > li:first-child, and its last-child
	   twin) because it styles prose lists. These are tiles, not prose, and that
	   rule outranks a plain class selector — hence the override. */
	padding: 16px 10px 12px !important;
	border-radius: var(--ta-radius-s);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
}
/* Whether or not the date is a link, the tile's insides lay out the same way. */
.ta-sched__link {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}
a.ta-sched__link:hover .ta-sched__day { color: var(--ta-aqua); }
.ta-sched__list li:has(a.ta-sched__link):hover { border-color: var(--ta-aqua-line); }
.ta-sched__list time {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	flex: none;
}
.ta-sched__list time b {
	font-family: var(--ta-font-display);
	font-size: 34px;
	color: var(--ta-cream);
}
.ta-sched__list time span {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-muted);
	margin-top: 4px;
}
.ta-sched__day { font-size: 14px; color: var(--ta-body-1); }
.ta-sched__flag {
	margin-top: auto;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-void);
	background: var(--ta-gold);
	border-radius: var(--ta-pill);
	padding: 4px 8px;
	line-height: 1.35;
	max-width: 100%;
}
.ta-sched__flag.is-muted { background: none; color: var(--ta-muted); padding-inline: 0; }
/* What has happened steps back without disappearing — the run stays legible. */
.ta-sched__list li.is-past { opacity: 0.45; }
.ta-sched__list li.is-next { border-color: var(--ta-gold); background: var(--ta-gold-tint-soft); }
/* Narrow screens ignore a fixed count and simply fit what they can. La tuile
   garde ses 120×160 : les étirer remplissait bien la ligne, mais un agenda à
   une seule date devenait une bannière de 263 px. L'espace résiduel à droite
   est la conséquence assumée d'une tuile de taille fixe. */
@media (max-width: 640px) {
	.ta-sched[class*="ta-sched--cols-"] .ta-sched__list { grid-template-columns: repeat(auto-fill, var(--ta-sched-w)); }
}

/* ---------- Insights: the featured essay ---------- */
.ta-feature .wp-block-post-featured-image { margin: 0; }
.ta-feature .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--ta-radius-l);
	border: 1px solid var(--ta-line);
}
.ta-feature .wp-block-post-date {
	margin: 0 0 8px;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ta-gold);
}
.ta-feature .wp-block-post-title { margin: 0 0 16px; line-height: 1.05; }
.ta-feature .wp-block-post-title a { color: var(--ta-cream); text-decoration: none; }
.ta-feature .wp-block-post-title a:hover { color: var(--ta-aqua); }
.ta-feature .wp-block-post-excerpt { margin: 0; }
.ta-feature .wp-block-post-excerpt__excerpt {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ta-body-1);
}
/* The "read this one" link reads as a call to action, not as trailing text. */
.ta-feature .wp-block-post-excerpt__more-text { margin-top: 16px; }
.ta-feature .wp-block-post-excerpt__more-link {
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-aqua);
	text-decoration: none;
}
.ta-feature .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

/* ---------- consent gate ---------- */
.ta-consent {
	position: fixed;
	left: 50%;
	translate: -50% 0;
	bottom: 92px;
	z-index: 60;
	width: min(560px, calc(100vw - 32px));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	padding: 18px 22px;
	border-radius: var(--ta-radius);
	background: var(--ta-veil-strong);
	border: 1px solid var(--ta-line);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 18px 40px -18px var(--ta-shadow);
}
.ta-consent[hidden] { display: none; }
.ta-consent p {
	margin: 0;
	flex: 1 1 260px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ta-body-1);
}
.ta-consent__actions { display: flex; gap: 10px; flex: none; }
/* Both answers carry the same weight. A filled "allow" beside a quiet "no"
   nudges the choice, and a consent dialog is the one place that must not. */
.ta-consent .ta-btn,
.ta-consent-prefs .ta-btn {
	white-space: nowrap;
	background: none;
	color: var(--ta-cream);
	border: 1px solid var(--ta-edge);
}
.ta-consent .ta-btn:hover,
.ta-consent-prefs .ta-btn:hover { border-color: var(--ta-cream); background: var(--ta-glass); }
/* The answer already in force is outlined in its own colour, so the panel shows
   the current state twice over — in words and in the control itself. */
.ta-consent-prefs__item:has([data-ta-value="granted"]) [data-ta-allow] { border-color: var(--ta-stance-embraces); color: var(--ta-stance-embraces); }
.ta-consent-prefs__item:has([data-ta-value="denied"]) [data-ta-decline] { border-color: var(--ta-stance-contests); color: var(--ta-stance-contests); }

/* The form waits, visibly, rather than pretending to work. */
.ta-newsletter__gate {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ta-muted);
}
.ta-newsletter__gate[hidden] { display: none; }
/* Its own line under the sentence: at the end of the text it reads as part of
   the prose rather than as the thing to click. */
.ta-newsletter__allow {
	display: block;
	margin: 6px 0 0;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--ta-aqua);
	text-decoration: underline;
	cursor: pointer;
}
@media (max-width: 600px) {
	.ta-consent { bottom: 84px; }
	.ta-consent__actions { width: 100%; }
	.ta-consent .ta-btn { flex: 1; }
}

/* ---------- consent preferences ---------- */
.ta-consent-prefs {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	padding: 20px;
	background: var(--ta-veil);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.ta-consent-prefs[hidden] { display: none; }
/* Without JavaScript the footer link still opens it, so the page can at least
   say what it loads from elsewhere. */
.ta-consent-prefs[hidden]:target { display: grid; }
.ta-consent-prefs__inner {
	position: relative;
	width: min(620px, 100%);
	max-height: 84vh;
	overflow-y: auto;
	padding: 30px 32px 28px;
	border-radius: var(--ta-radius-l);
	background: var(--ta-veil-full);
	border: 1px solid var(--ta-line);
}
.ta-consent-prefs h2 {
	margin: 0 0 10px;
	font-family: var(--ta-font-display);
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.1;
	color: var(--ta-cream);
}
.ta-consent-prefs__lead {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ta-muted);
}
.ta-consent-prefs__item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px 20px;
	padding: 18px 0;
	border-top: 1px solid var(--ta-line);
}
.ta-consent-prefs__item > div:first-child { flex: 1 1 280px; }
.ta-consent-prefs h3 {
	margin: 0 0 6px;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--ta-cream);
}
.ta-consent-prefs__item p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ta-muted);
}
.ta-consent-prefs__state {
	margin-top: 8px !important;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.ta-consent-prefs__state[data-ta-value="granted"] { color: var(--ta-stance-embraces); }
.ta-consent-prefs__state[data-ta-value="denied"] { color: var(--ta-stance-contests); }
.ta-consent-prefs__state[data-ta-value="unset"] { color: var(--ta-muted); }
.ta-consent-prefs__close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--ta-muted);
	cursor: pointer;
}
.ta-consent-prefs__close:hover { color: var(--ta-cream); }

/* ---------- interior templates ---------- */
/* Long-form reading: the essay body and the interviewee bio. */
/* Positioned so that the hidden twin wp-embed.js parks absolutely beside each
   embed is measured against the prose column. Left to the page, that twin —
   out of flow but still counted — stretched the scrollable width and made the
   whole document scroll sideways on a phone. */
.ta-prose { position: relative; font-size: 17px; line-height: 1.75; color: var(--ta-body-1); }
.ta-prose > * + * { margin-top: 1.1em; }
.ta-prose h2 {
	margin-top: 1.8em;
	font-family: var(--ta-font-display);
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.1;
	color: var(--ta-cream);
}
.ta-prose h3 {
	margin-top: 1.6em;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: 19px;
	color: var(--ta-cream);
}
.ta-prose a { color: var(--ta-aqua); }
.ta-prose blockquote {
	margin: 1.6em 0;
	padding-left: 20px;
	border-left: 2px solid var(--ta-stance-reframes);
	font-family: var(--ta-font-editorial);
	font-style: italic;
	font-size: 20px;
	line-height: 1.45;
	color: var(--ta-mist);
}
.ta-prose img { border-radius: var(--ta-radius); }
/* WordPress writes its own post embeds at a fixed width="500". On a phone that
   is wider than the page and the whole document scrolls sideways, dragging the
   sticky player with it. Measured on the conversations that carry one. */
.ta-prose iframe,
.wp-block-embed iframe,
iframe.wp-embedded-content {
	/* `max-width` alone still resolves against a containing block wider than the
	   prose column, so the frame kept running past the right edge: it has to be
	   told the width outright. */
	width: 100%;
	max-width: 100%;
	border-radius: var(--ta-radius);
}

.ta-post-date {
	margin: 0 0 10px;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ta-gold);
}
.ta-post-cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ta-radius-l);
	border: 1px solid var(--ta-line);
}
.ta-term-desc { margin-top: 12px; }

/* A theme's voices: a portrait beside a name, in a plain readable list. */
.ta-term-list .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ta-term-list .wp-block-post {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--ta-radius);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	transition: border-color var(--ta-dur);
}
.ta-term-list .wp-block-post:hover { border-color: var(--ta-aqua-line); }
.ta-term-list .ta-term-face { margin: 0; flex: none; }
.ta-term-list .ta-term-face img { border-radius: 50%; object-fit: cover; }
.ta-term-list .wp-block-post-title { margin: 0; font-size: 16px; line-height: 1.3; }
.ta-term-list .wp-block-post-title a { color: var(--ta-cream); text-decoration: none; }
.ta-term-list .wp-block-post-title a:hover { color: var(--ta-aqua); }
@media (max-width: 900px) { .ta-term-list .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ta-term-list .wp-block-post-template { grid-template-columns: 1fr; } }

/* ---------- Live events: two events, told the same way ---------- */
/* The hero pair is deliberately compact: it sits beside the headline, so it
   reads as a summary, not as the page. One pair of variables drives both the
   padding and the image's counter-margin, so the bleed can never drift. */
.ta-events {
	align-items: stretch;
	--ta-event-pad-y: 16px;
	--ta-event-pad-x: 18px;
}
.ta-event {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--ta-event-pad-y) var(--ta-event-pad-x);
	border-radius: var(--ta-radius);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	transition: border-color var(--ta-dur);
}
.ta-event:hover { border-color: var(--ta-aqua-line); }
/* The image runs to the card's edges: the padding is cancelled on its sides and
   top, and the corners follow the card's own radius. Both photographs are
   cropped to one ratio so the two cards stay level whatever their sources. */
.ta-event__image {
	margin: calc(var(--ta-event-pad-y) * -1) calc(var(--ta-event-pad-x) * -1) 12px !important;
	max-width: none;
	align-self: stretch;
	overflow: hidden;
	border-radius: var(--ta-radius) var(--ta-radius) 0 0;
}
.ta-event__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}
.ta-event .ta-eyebrow { margin-bottom: 8px !important; }
.ta-event h2 { margin: 0 0 8px; line-height: 1.12; }
.ta-event p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ta-body-1); }
.ta-event__facts {
	list-style: none;
	margin: 10px 0 0 !important;
	padding: 0;
	display: grid;
	gap: 5px;
}
.ta-event__facts li {
	position: relative;
	padding-left: 16px;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-tiny);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ta-muted);
}
/* A gold tick rather than a bullet: these are what you get, not a list of items. */
.ta-event__facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ta-gold);
}
/* The link is pushed to the bottom-right corner: it closes the card rather
   than continuing the text column above it. */
.ta-event > p.has-aqua-color:last-child { margin-top: auto !important; padding-top: 12px; text-align: right; }
/* And it is the card's link: its anchor is stretched over the whole surface,
   image included, so anywhere on the card leads to the same place. */
.ta-event > p.has-aqua-color:last-child a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ta-radius);
	z-index: 1;
}
.ta-event a { text-decoration: none; }
.ta-event a:hover { text-decoration: underline; }

/* The two detail panels share one shape, so the page reads as two events. */
.ta-event-detail h2 { margin: 0 0 14px; }
.ta-event-detail .ta-eyebrow { margin-bottom: 8px !important; }
.ta-event-detail p + p { margin-top: 14px; }
.ta-event-detail .ta-elsewhere { margin-top: 20px !important; }
@media (max-width: 780px) { .ta-event > p.has-aqua-color:last-child { margin-top: 16px !important; } }

/* ===========================================================================
   RESPONSIVE — surfaces tactiles
   ===========================================================================
   Au doigt, la cible utile n'est pas ce qui est dessiné mais ce qui est
   touchable. Plutôt que d'épaissir les petits liens de chrome — ce qui
   décalerait la mise en page —, on leur agrafe une zone de contact
   transparente. Rien ne bouge d'un pixel, et la cible passe le seuil WCAG 2.2
   (2.5.8, 24×24). Les valeurs d'expansion sont calées sur l'écart réel entre
   voisins pour qu'aucune zone n'en recouvre une autre.

   La condition n'est pas seulement la largeur : un iPad en paysage fait 1024 px
   et se pilote au doigt. `pointer: coarse` attrape ces cas-là. Ce que la règle
   ajoute est invisible, donc l'élargir ne coûte rien à personne.
--------------------------------------------------------------------------- */
@media (max-width: 900px), (pointer: coarse) {
	.ta-more,
	.ta-listen__link,
	.ta-newsletter__allow,
	.ta-topbar .wp-block-social-link a,
	.ta-footer li > a,
	.ta-footer p > a { position: relative; }

	.ta-more::after,
	.ta-listen__link::after,
	.ta-newsletter__allow::after,
	.ta-topbar .wp-block-social-link a::after,
	.ta-footer li > a::after,
	.ta-footer p > a::after {
		content: "";
		position: absolute;
		z-index: 1;
	}

	/* Badges de série. Ils sont posés en flux inline : quand deux se suivent, le
	   second passe à la ligne et sa boîte englobe alors les DEUX lignes — une
	   zone de contact agrafée dessus recouvrirait son voisin. Le conteneur
	   devient donc une rangée qui s'enroule, chaque badge redevient une boîte
	   propre, et 24 px de hauteur suffisent sans rien superposer. */
	.ta-ep__series,
	.ta-player__series {
		display: flex;
		flex-wrap: wrap;
		gap: 2px 10px;
	}
	.ta-stag.is-shown {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
		margin-right: 0;
	}
	/* « All conversations » : seul sur sa ligne, on peut ouvrir en hauteur. */
	.ta-more::after { inset: -8px -6px; }
	/* Plateformes d'écoute : 22×22 espacées de 6 px → ±3 px, soit 28×34. */
	.ta-listen__link::after { inset: -6px -3px; }
	/* Réseaux sociaux : 26×26 espacés de 2 px, on n'ouvre qu'en hauteur. */
	.ta-topbar .wp-block-social-link a::after { inset: -5px 0; }
	/* Pied de page : lignes de 22 px avec 9 px d'écart → ±5 px, soit 28. */
	.ta-footer li > a::after { inset: -5px -6px; }
	.ta-footer p > a::after { inset: -4px -4px; }
	.ta-newsletter__allow::after { inset: -5px -6px; }

	/* Les liens de contenu qui ne sont pas des paragraphes courants : le titre
	   et l'appel à l'action de la bande sous le hero, le « All insights → » des
	   en-têtes de section, le titre d'une carte de la grille, et la mention de
	   pied de page — tous seuls sur leur ligne, donc on ouvre en hauteur. */
	.ta-band a,
	.ta-sec-head a,
	.ta-plates .wp-block-post-title a,
	.ta-step p > a,
	.ta-elsewhere > a,
	.ta-about-hero p > a,
	.wp-block-post-excerpt__more-link,
	footer p > a { position: relative; }
	.ta-band a::after,
	.ta-sec-head a::after,
	.ta-plates .wp-block-post-title a::after,
	.ta-step p > a::after,
	.ta-elsewhere > a::after,
	.ta-about-hero p > a::after,
	.wp-block-post-excerpt__more-link::after,
	footer p > a::after {
		content: "";
		position: absolute;
		z-index: 1;
	}
	.ta-band a::after { inset: -8px -6px; }
	.ta-sec-head a::after { inset: -8px -6px; }
	.ta-step p > a::after,
	.ta-elsewhere > a::after,
	.ta-about-hero p > a::after,
	.wp-block-post-excerpt__more-link::after { inset: -8px -6px; }
	.ta-plates .wp-block-post-title a::after { inset: -5px 0; }
	footer p > a::after { inset: -5px -4px; }
}

/* ===========================================================================
   RESPONSIVE — l'index des quinze propositions
   ===========================================================================
   Empilé, l'index passe devant le contenu qu'il annonce : 732 px de liste
   avant le premier paragraphe, soit deux écrans de sommaire sur un téléphone.
   Le laisser en tête reste juste — c'est un menu de saut —, mais il doit se
   replier : les quinze lignes deviennent des pastilles qui s'enroulent, et la
   hauteur tombe à environ 240 px sans rien perdre du libellé.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.ta-props-index { padding: 14px 0 14px 18px; gap: 10px; }
	.ta-props-index__title { padding-right: 18px; }
	/* Une bande de pastilles qui défile : les libellés sont trop longs pour
	   tenir à deux par ligne, donc les enrouler ne gagnait rien (694 px pour
	   732). Sur un rail horizontal, le sommaire tient en ~70 px et reste au
	   sommet, là où un menu de saut est utile. */
	.ta-props-index__list {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-left: 18px;
		padding: 2px 18px 6px 0;
		scrollbar-width: thin;
	}
	.ta-props-index__list li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
	.ta-props-index__list li + li { border-top: 0; }
	.ta-props-index__list a {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 34px;
		padding: 5px 13px;
		white-space: nowrap;
		border: 1px solid var(--ta-line);
		border-radius: var(--ta-pill);
	}
	.ta-props-index__label { font-size: 13px; }
	/* Un rail sans bord franc se lit comme une liste tronquée. Le dégradé de
	   sortie dit qu'il continue ; il s'efface dès qu'on est au bout. */
	.ta-props-index__list {
		mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
	}
}