/*
 * Tarot Arabi — P06 educational page family
 *
 * Learn hub, Guide detail and the secondary educational hubs.
 *
 * This is a composition layer, not a second design system: tokens, buttons,
 * badges, breadcrumbs and the icon set come from the global layers, and every
 * rule here is scoped under the P06 page-role classes so nothing can reach
 * another template.
 *
 * The Learn hub is rebuilt to its approved reference: one integrated editorial
 * hero, a compact horizontal guide browser, compact horizontal discipline and
 * path cards, one shallow Deep Green band and a light Sage closing strip. Its
 * rhythm, geometry and card orientation are the reference's, not the family's —
 * the Guide and Secondary hub keep the family treatment untouched.
 */

/* ============================================================== Foundation */

.ta-learn {
	/* Family rhythm and shape. */
	--ta-ec-section: clamp(72px, 8vw, 112px); /* major section spacing */
	--ta-ec-module: clamp(28px, 3.2vw, 48px); /* inside a section */
	--ta-ec-radius: 22px;
	--ta-ec-radius-lg: 26px;
	--ta-ec-line: 1px solid var(--color-border);
	--ta-ec-shadow: 0 4px 18px rgba(23, 79, 58, 0.06);
	--ta-ec-shadow-hover: 0 12px 30px rgba(23, 79, 58, 0.1);

	background-color: var(--color-bg);
	color: var(--color-text);
}

/* One primary wrapper for the family. */
.ta-ec-wrap {
	inline-size: 100%;
	max-inline-size: 1180px;
	margin-inline: auto;
	padding-inline: clamp(20px, 2.2vw, 32px);
}

.ta-ec-wrap--article {
	max-inline-size: 1200px; /* article grid ~1136 */
}

/* -------------------------------------------------------------- Typography */

.ta-learn .ta-eyebrow {
	margin: 0;
	color: var(--color-action);
	font-size: clamp(14px, 1.05vw, 16px);
	font-weight: var(--weight-bold);
	line-height: 1.5;
}

.ta-learn .ta-h2 {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(30px, 2.9vw, 44px);
	font-weight: var(--weight-bold);
	line-height: 1.2;
	text-wrap: balance;
}

.ta-learn .ta-lead {
	margin: var(--space-4) 0 0;
	max-inline-size: 62ch;
	color: var(--color-text-muted);
	font-size: clamp(17px, 1.2vw, 19px);
	line-height: 1.85;
}

/* ---------------------------------------------------------- Section header */

.ta-ec-head {
	max-inline-size: 720px;
	margin-block-end: clamp(28px, 2.8vw, 36px);
}

/*
 * One eyebrow rhythm for every major section heading. The eyebrow belongs to the
 * heading cluster, so it tightens the cluster rather than adding a new band of
 * space between sections.
 */
.ta-ec-head .ta-eyebrow,
.ta-gb__head-main .ta-eyebrow,
.ta-ec-deep__head .ta-eyebrow,
.ta-ec-closing__body .ta-eyebrow {
	margin: 0 0 10px;
}

.ta-ec-head .ta-lead {
	margin-block-start: var(--space-4);
}

/* ------------------------------------------------------------- Media plate */

.ta-ec-plate {
	position: relative;
	display: block;
}

/* One soft Sage backing, offset behind the plate. Depth without decoration. */
.ta-ec-plate__backing {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: var(--ta-ec-radius-lg);
	background-color: var(--color-sage-100);
	transform: translate(14px, 14px);
}

html[dir="ltr"] .ta-ec-plate__backing {
	transform: translate(-14px, 14px);
}

.ta-ec-plate__frame {
	position: relative;
	z-index: 1;
	display: block;
	overflow: hidden;
	border-radius: var(--ta-ec-radius-lg);
	background-color: var(--color-surface);
	box-shadow: var(--ta-ec-shadow);
}

.ta-ec-plate__frame img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Development placeholder: a designed plate, never a floating label. */
.ta-ec-placeholder {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background-image: linear-gradient(150deg, var(--color-sage-100) 0%, var(--color-surface-warm) 100%);
}

/* Admin-only markers: restrained, contained, never competing with content. */
.ta-learn .ta-dev-marker {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-inline-size: calc(100% - 28px);
	padding: 4px 9px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--color-text-muted);
	font-size: 11px;
	font-weight: var(--weight-medium);
	line-height: 1.4;
}

.ta-learn .ta-dev-marker .ta-icon {
	inline-size: 13px;
	block-size: 13px;
}

.ta-learn .ta-dev-marker__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * The neutral media plate. It is not drawn artwork: a soft fill with a hairline
 * edge, sized and rounded exactly like the media it stands in for, so inserting
 * a real attachment changes nothing but the pixels.
 */
.ta-ec-plate-fill {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 100%;
	padding: var(--space-3);
	border: 1px solid rgba(23, 79, 58, 0.08);
	background-color: var(--color-sage-100);
	background-image: linear-gradient(150deg, var(--color-sage-100) 0%, var(--color-ivory) 58%, var(--color-surface-warm) 100%);
}

/* Author-facing only, and deliberately quiet: it names the slot without
   competing with the composition. */
.ta-ec-plate-fill__label {
	display: block;
	max-inline-size: 90%;
	color: rgba(23, 79, 58, 0.45);
	font-size: 11px;
	font-weight: var(--weight-medium);
	line-height: 1.5;
	text-align: center;
}

/* ------------------------------------------------------------- Card system */

/*
 * One editorial card language for the whole family. Built on the global card
 * component so the surface, radius and hover behaviour stay in one place, and
 * extended only where P06 needs a different internal composition.
 */
.ta-ec-card {
	block-size: 100%;
	border: var(--ta-ec-line);
	border-radius: 18px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-ec-shadow);
}

.ta-ec-card .ta-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	block-size: 100%;
}

.ta-ec-card__link {
	display: grid;
	block-size: 100%;
	color: inherit;
	text-decoration: none;
}

.ta-ec-card__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.ta-ec-card__eyebrow {
	margin: 0;
	color: var(--color-action);
	font-size: 13px;
	font-weight: var(--weight-bold);
	line-height: 1.5;
}

.ta-ec-card__cta {
	margin-block-start: auto;
	padding-block-start: var(--space-3);
	color: var(--color-green-900);
	font-size: 15px;
	font-weight: var(--weight-bold);
}

/* A card action is one short run of text with its arrow: it never wraps into a
   second line, which would silently add height to every card in a set. */
.ta-ec-card--feature .ta-ec-card__cta,
.ta-ec-card--row .ta-ec-card__cta,
.ta-ec-card--browser .ta-ec-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/*
 * One shared micro-interaction for every editorial card action: the arrow leads
 * and the label stays put. Reduced motion drops the movement entirely.
 */
.ta-ec-card__cta .ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-ec-card:hover .ta-ec-card__cta .ta-icon--directional,
.ta-ec-card:focus-within .ta-ec-card__cta .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-ec-card:hover .ta-ec-card__cta .ta-icon--directional,
[dir="ltr"] .ta-ec-card:focus-within .ta-ec-card__cta .ta-icon--directional {
	transform: translateX(4px);
}

.ta-ec-card__state {
	display: inline-flex;
	align-items: center;
	min-block-size: 22px;
	padding-inline: 8px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
	font-size: 11px;
	font-weight: var(--weight-bold);
	line-height: 1;
}

/* ------------------------------------------------------------- Empty state */

.ta-ec-empty {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border: var(--ta-ec-line);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: 1.7;
}

.ta-ec-empty .ta-icon {
	color: var(--color-green-900);
}

/* ==========================================================================
 * Learn hub — rebuilt to the approved reference
 *
 * Section rhythm, hero composition, card orientation and panel proportions all
 * come from that reference. Every rule is scoped under `.ta-learn--learn-hub`
 * so the Guide and Secondary hub are untouched.
 * ======================================================================== */

.ta-learn--learn-hub {
	--ta-ec-hero-top: clamp(28px, 3.4vw, 48px);   /* header → hero copy */
	--ta-ec-card-radius: 18px;
	--ta-hero-copy: 540px; /* the hero copy block; the field reserves exactly this */

	overflow-x: clip; /* decorative layers may bleed; the page never scrolls sideways */
}

/* The reference is wider and more editorial than the family wrapper. */
.ta-learn--learn-hub .ta-ec-wrap {
	max-inline-size: 1264px; /* ~1200px of content at 1440 */
}

/*
 * ONE canonical major-section gap, owned by the section below it: every section
 * carries no vertical padding of its own, so the rendered gap at a boundary is
 * the token and nothing else. No section-specific exceptions — the hero's
 * trailing beat, the path band's neighbour and the footer transition all use the
 * same rhythm as everything else on the site.
 */
.ta-learn--learn-hub > section {
	padding-block: 0;
}

.ta-learn--learn-hub > .ta-learn-hero {
	padding-block-start: var(--ta-ec-hero-top);
}

.ta-learn--learn-hub > .ta-learn-hero + section,
.ta-learn--learn-hub > section + section {
	padding-block-start: var(--ta-section-gap);
}

.ta-learn--learn-hub > .ta-learn-closing {
	padding-block-end: var(--ta-section-gap);
}

/* ---------------------------------------------------------------- Hero */

/*
 * The reference hero is ONE full-width banner: a photographic field running from
 * the physical left viewport edge, and a copy cluster that keeps the site's
 * normal content grid on the right. That asymmetry is the whole point — forcing
 * both halves through one centred wrapper is what made the earlier hero read as
 * a floating card sitting in the middle of the page.
 */
.ta-learn--learn-hub .ta-learn-hero {
	position: relative;
	min-block-size: clamp(400px, 30vw, 440px);
}

/* The copy half: the same wrapped block the rest of the page uses, so the hero's
   right edge IS the page's right edge — no hero-only inset. */
.ta-learn--learn-hub .ta-learn-hero__wrap {
	position: relative;
	z-index: 2;
}

.ta-learn--learn-hub .ta-learn-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	max-inline-size: var(--ta-hero-copy);
	margin-inline-end: auto; /* RTL: the block's own text stays right-aligned */
}

/* A compact editorial cluster: each pair's spacing is deliberate. */
.ta-learn-hero__pill {
	margin: clamp(20px, 1.6vw, 22px) 0 0;
	padding: 6px 16px;
	border: 1px solid rgba(141, 106, 49, 0.45);
	border-radius: var(--radius-pill);
	background-color: rgba(255, 255, 255, 0.6);
	color: var(--color-action);
	font-size: clamp(13px, 1vw, 15px);
	font-weight: var(--weight-bold);
	line-height: 1.5;
}

/* The headline keeps the metadata's compact rhythm: the cluster's lower centre of
   gravity comes from where the copy block starts, not from padding the gaps. */
.ta-learn--learn-hub .ta-learn-hero__title {
	margin: clamp(14px, 1.1vw, 16px) 0 0;
	max-inline-size: 520px;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(46px, 4.3vw, 62px);
	font-weight: var(--weight-bold);
	line-height: 1.14;
	text-wrap: balance;
}

.ta-learn--learn-hub .ta-learn-hero__lead {
	margin: clamp(16px, 1.3vw, 18px) 0 0;
	max-inline-size: 520px;
	color: var(--color-text-muted);
	font-size: clamp(17px, 1.25vw, 19px);
	line-height: 1.8;
}

.ta-learn--learn-hub .ta-learn-hero__action {
	margin: 22px 0 0;
}

/* With no intro the action closes the headline directly. */
.ta-learn--learn-hub .ta-learn-hero__title + .ta-learn-hero__action {
	margin-block-start: 28px;
}

.ta-learn--learn-hub .ta-learn-hero__action .ta-button {
	min-block-size: clamp(50px, 3.6vw, 52px);
	padding-inline: clamp(24px, 2vw, 28px);
	border-radius: 12px;
}

/*
 * The photographic field. Positioned out of flow so it can reach the physical
 * left viewport edge while the copy keeps the centred grid, and so it spans the
 * hero's full height instead of being sized by its own content.
 *
 * It takes the wider of two measures: a panoramic share of the viewport, and
 * whatever space is left beside the copy. The second term is what guarantees the
 * text can never be overrun at any width, so the field can grow without a
 * breakpoint jump.
 */
.ta-learn--learn-hub .ta-learn-hero__media {
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-end: 0; /* RTL: the physical left edge */
	inline-size: min(
		55.5vw,
		calc(100% - var(--ta-hero-copy) - clamp(20px, 2.2vw, 32px) - 16px)
	);
}

/* No card silhouette: no border, no shadow, no all-round radius. */
.ta-learn--learn-hub .ta-learn-hero__frame {
	position: relative;
	display: block;
	block-size: 100%;
	overflow: hidden;
	border-radius: 18px 0 0 18px; /* physical left corners only */
	background-color: var(--color-surface);
}

html[dir="ltr"] .ta-learn--learn-hub .ta-learn-hero__frame {
	border-radius: 0 18px 18px 0;
}

.ta-learn-hero__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The placeholder occupies the identical geometry; its author marker is a tiny
   corner pill, held inside the media's own bounds. */
.ta-learn--learn-hub .ta-learn-hero__frame .ta-ec-plate-fill {
	position: absolute;
	inset: 0;
	min-block-size: 0;
	padding: 0;
	border: 0;
	/* A slightly deeper Sage → Warm Ivory wash, so the empty field still reads as
	   a deliberate photographic region rather than a blank. */
	background-image: linear-gradient(158deg, var(--color-sage-100) 0%, var(--color-ivory) 48%, var(--color-surface-warm) 100%);
}

.ta-learn--learn-hub .ta-learn-hero__frame .ta-ec-plate-fill__label {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-end: 16px;
	max-inline-size: none;
	padding: 4px 9px;
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.9);
	color: rgba(23, 79, 58, 0.55);
	font-size: 11px;
	font-weight: var(--weight-medium);
	line-height: 1.3;
	text-align: start;
}

/*
 * The transition. An oversized Ivory disc whose centre sits well to the right of
 * the media's inner edge, so only a shallow arc brushes into the photograph — a
 * gentle join into the page rather than a hole punched through the image. Pure
 * layout geometry: no border, no shadow, no drawn shape.
 */
.ta-learn--learn-hub .ta-learn-hero__media::after {
	--ta-hero-arc: clamp(380px, 30vw, 440px);
	--ta-hero-arc-bite: 105px;

	content: "";
	position: absolute;
	z-index: 2;
	inset-block-start: 54%;
	inset-inline-start: calc(var(--ta-hero-arc-bite) - var(--ta-hero-arc));
	inline-size: var(--ta-hero-arc);
	block-size: var(--ta-hero-arc);
	border-radius: 50%;
	background-color: var(--color-bg);
	transform: translateY(-50%);
	pointer-events: none;
}

/*
 * The optional decorative graphic at the physical right. It renders only when
 * the owner assigns one; empty, it contributes nothing at all — no placeholder
 * rectangle is reserved in the layout.
 */
.ta-learn-hero__decor {
	position: absolute;
	z-index: 0;
	inset-block-start: clamp(40px, 4vw, 80px);
	inset-inline-start: 0;
	inline-size: clamp(180px, 18vw, 260px);
	block-size: clamp(240px, 22vw, 320px);
	pointer-events: none;
}

.ta-learn-hero__decor-image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* ------------------------------------------------------------ Start here */

.ta-learn--learn-hub .ta-learn-start__grid {
	display: grid;
}

.ta-learn--learn-hub .ta-learn-start__grid--feature {
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: stretch;
	gap: clamp(18px, 1.6vw, 24px);
}

.ta-learn--learn-hub .ta-learn-start__side {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 1.6vw, 24px);
}

/* The featured guide: a wide horizontal card, media at the inline-end edge. */
.ta-learn--learn-hub .ta-ec-card--feature .ta-ec-card__link {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
	align-items: stretch;
	min-block-size: clamp(220px, 17vw, 248px);
}

.ta-learn--learn-hub .ta-ec-card--feature .ta-card__media {
	order: 2;
	block-size: 100%;
	border-radius: 0;
}

.ta-learn--learn-hub .ta-ec-card--feature .ta-card__media img,
.ta-learn--learn-hub .ta-ec-card--feature .ta-card__media .ta-ec-plate-fill {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 0;
	object-fit: cover;
	aspect-ratio: auto;
}

.ta-learn--learn-hub .ta-ec-card--feature .ta-card__body {
	justify-content: center;
	gap: 8px;
	padding: clamp(20px, 2vw, 26px);
}

.ta-learn--learn-hub .ta-ec-card--feature .ta-card__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: clamp(24px, 2.1vw, 29px);
	line-height: 1.2;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ta-learn--learn-hub .ta-ec-card--feature .ta-card__text {
	display: -webkit-box;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* The action follows the message instead of being pushed to the far edge. */
.ta-learn--learn-hub .ta-ec-card--feature .ta-ec-card__cta {
	margin-block-start: 0;
	padding-block-start: 10px;
	font-size: 14px;
}

/* Supporting guides: short horizontal cards, thumbnail at the inline-start. */
.ta-learn--learn-hub .ta-learn-start__side .ta-ec-card__link {
	grid-template-columns: minmax(0, 0.61fr) minmax(0, 1fr);
	align-items: stretch;
	min-block-size: clamp(96px, 7.6vw, 108px);
}

.ta-learn--learn-hub .ta-learn-start__side .ta-card__media {
	block-size: 100%;
	border-radius: 0;
}

.ta-learn--learn-hub .ta-learn-start__side .ta-card__media img,
.ta-learn--learn-hub .ta-learn-start__side .ta-card__media .ta-ec-plate-fill {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 0;
	object-fit: cover;
	aspect-ratio: auto;
}

.ta-learn--learn-hub .ta-learn-start__side .ta-card__body {
	justify-content: center;
	gap: 5px;
	padding: clamp(10px, 1.1vw, 13px);
}

.ta-learn--learn-hub .ta-learn-start__side .ta-card__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: clamp(17px, 1.45vw, 20px);
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ta-learn--learn-hub .ta-learn-start__side .ta-ec-card__cta {
	margin-block-start: 0;
	padding-block-start: 6px;
	font-size: 13px;
}

/* -------------------------------------------------------- Guide browser */

.ta-gb__panel {
	position: relative;
	padding: clamp(20px, 2vw, 26px);
	border: var(--ta-ec-line);
	border-radius: 24px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-ec-shadow);
}

.ta-gb__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(20px, 2vw, 32px);
	margin-block-end: 12px;
}

.ta-gb__head-main {
	max-inline-size: 760px;
}

.ta-gb__title {
	font-size: clamp(28px, 2.8vw, 40px);
}

.ta-gb__lead {
	margin: 6px 0 0;
	max-inline-size: 62ch;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

.ta-gb__count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-block-start: 6px;
	color: var(--color-text-muted);
	font-size: 13px;
	font-weight: var(--weight-medium);
	line-height: 1.5;
	white-space: nowrap;
}

.ta-gb__count-icon {
	display: inline-flex;
	color: var(--color-green-900);
}

.ta-gb__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-block-end: 14px;
}

.ta-gb__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ta-gb__filter {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: 18px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-ivory);
	color: var(--color-green-900);
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--weight-bold);
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--duration-interaction) var(--ease-interaction),
		border-color var(--duration-interaction) var(--ease-interaction),
		color var(--duration-interaction) var(--ease-interaction);
}

.ta-gb__filter:hover {
	border-color: rgba(23, 79, 58, 0.35);
}

.ta-gb__filter:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 2px;
}

/* Active state is never colour alone: it also carries a pressed state and a
   filled surface, so the current filter is unambiguous without colour vision. */
.ta-gb__filter.is-active {
	border-color: var(--color-green-900);
	background-color: var(--color-green-900);
	color: var(--color-white);
}

.ta-gb__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.2vw, 15px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-gb__item {
	min-inline-size: 0;
}

/* The initial subset is collapsed by script only, so the no-JS page shows the
   whole library. */
.ta-gb--collapsed .ta-gb__item:nth-child(n + 10) {
	display: none;
}

.ta-gb--filtered .ta-gb__item[hidden] {
	display: none;
}

/* Filtering is a visual update, never a layout jump. */
.ta-gb__item {
	transition: opacity 180ms var(--ease-interaction), transform 180ms var(--ease-interaction);
}

.ta-gb--updating .ta-gb__item {
	opacity: 0.4;
	transform: translateY(4px);
}

/* A compact horizontal guide card: media at the inline-end edge, text at the
   reading edge. It is deliberately short — this is a browser, not a product
   grid. */
.ta-ec-card--browser .ta-ec-card__link {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
	align-items: stretch;
	min-block-size: clamp(150px, 11.2vw, 160px);
}

.ta-ec-card--browser .ta-card__media {
	order: 2;
	block-size: 100%;
	border-radius: 0;
}

.ta-ec-card--browser .ta-card__media img,
.ta-ec-card--browser .ta-card__media .ta-ec-plate-fill {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 0;
	object-fit: cover;
	aspect-ratio: auto;
}

.ta-ec-card--browser .ta-card__body {
	justify-content: flex-start;
	gap: 5px;
	padding: clamp(11px, 1.1vw, 13px);
}

/* The number marker is an index, not a status: a quiet Sage disc. */
.ta-ec-card--browser .ta-ec-card__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: var(--weight-bold);
	line-height: 1;
}

/* The one truthful context chip. Cards without a real category show none. */
.ta-ec-card--browser .ta-ec-card__eyebrow {
	padding: 4px 9px;
	border-radius: 6px;
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
	font-size: 11px;
	font-weight: var(--weight-bold);
}

.ta-ec-card--browser .ta-card__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: clamp(18px, 1.4vw, 20px);
	line-height: 1.22;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ta-ec-card--browser .ta-card__text {
	display: -webkit-box;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ta-ec-card--browser .ta-ec-card__cta {
	margin-block-start: auto;
	padding-block-start: 2px;
	font-size: 13px;
}

.ta-gb__more {
	display: flex;
	justify-content: center;
	margin-block-start: 14px;
}

.ta-gb__more-button {
	min-block-size: 44px;
}

.ta-gb__empty {
	margin: 0;
	padding: var(--space-8) var(--space-6);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-muted);
	font-size: var(--text-body);
	text-align: center;
}

/* ------------------------------------------------- Specializations */

/* The family default, shared with the Secondary hub. */
/*
 * One discipline card surface for the whole family, shared by the Learn hub's
 * media cards and the Secondary hub's text cards: white plate, hairline divider
 * border, soft lift. The media variant below only re-composes the inside.
 */
.ta-ec-disc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	block-size: 100%;
	min-block-size: 170px;
	padding: clamp(22px, 2vw, 28px);
	border: var(--ta-ec-line);
	border-radius: 20px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-ec-shadow);
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--duration-standard) var(--ease-interaction),
		box-shadow var(--duration-standard) var(--ease-interaction);
}

.ta-ec-disc:hover {
	transform: translateY(-3px);
	box-shadow: var(--ta-ec-shadow-hover);
}

.ta-ec-disc:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 3px;
}

.ta-ec-disc__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: clamp(16px, 1.5vw, 20px);
	min-inline-size: 0;
}

.ta-ec-disc__eyebrow {
	margin: 0;
	color: var(--color-action);
	font-size: 13px;
	font-weight: var(--weight-bold);
	line-height: 1.4;
}

.ta-ec-disc__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(21px, 1.7vw, 24px);
	font-weight: var(--weight-bold);
	line-height: 1.3;
}

.ta-ec-disc__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.7;
}

.ta-ec-disc__arrow {
	margin-block-start: auto;
	padding-block-start: var(--space-3);
	color: var(--color-green-900);
}

.ta-ec-disc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ta-ec-module);
}

.ta-learn--learn-hub .ta-ec-disc-grid--media {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.3vw, 18px);
}

/*
 * Physical order per the reference: the hub's own Featured Image at the
 * inline-start edge, the text in the middle, a circular affordance at the
 * inline-end edge. Explicit grid placement keeps that true in both directions.
 */
.ta-ec-disc--media {
	display: grid;
	grid-template-columns: minmax(100px, 118px) minmax(0, 1fr) auto;
	align-items: stretch;
	gap: 0;
	min-block-size: clamp(118px, 10vw, 138px);
	padding: 0;
	overflow: hidden;
	border-radius: var(--ta-ec-card-radius);
}

.ta-ec-disc--media .ta-ec-disc__media {
	position: relative;
	overflow: hidden;
	background-color: var(--color-sage-100);
}

.ta-ec-disc--media .ta-ec-disc__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ta-ec-disc--media .ta-ec-disc__media .ta-ec-plate-fill {
	position: absolute;
	inset: 0;
	min-block-size: 0;
	padding: 6px;
}

.ta-ec-disc--media .ta-ec-disc__body {
	justify-content: center;
	gap: 4px;
	padding: clamp(14px, 1.3vw, 18px);
}

.ta-ec-disc--media .ta-ec-disc__title {
	font-size: clamp(18px, 1.5vw, 20px);
	line-height: 1.35;
}

.ta-ec-disc--media .ta-ec-disc__text {
	display: -webkit-box;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ta-ec-disc--media .ta-ec-disc__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: 4px;
	padding-block-start: 0;
	font-size: 13px;
	white-space: nowrap;
}

/* The author's draft marker is a quiet footnote here, never a badge competing
   with the title. */
.ta-ec-disc--media .ta-ec-card__state {
	min-block-size: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-muted);
	font-size: 11px;
	font-weight: var(--weight-medium);
}

/* The affordance is decoration on an already-linked card, never a second
   control: no nested interactive element, no separate tab stop. */
.ta-ec-disc--media .ta-ec-disc__arrow {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline-end: clamp(12px, 1.2vw, 16px);
	inline-size: clamp(36px, 3vw, 42px);
	block-size: clamp(36px, 3vw, 42px);
	margin-block-start: 0;
	padding-block-start: 0;
	border: 1px solid rgba(198, 161, 91, 0.45);
	border-radius: 50%;
	background-color: var(--color-ivory);
	color: var(--color-green-900);
}

/* The card's one directional cue is the circular affordance; only the glyph
   inside it moves. */
.ta-ec-disc__arrow .ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-ec-disc:hover .ta-ec-disc__arrow .ta-icon--directional,
.ta-ec-disc:focus-within .ta-ec-disc__arrow .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-ec-disc:hover .ta-ec-disc__arrow .ta-icon--directional,
[dir="ltr"] .ta-ec-disc:focus-within .ta-ec-disc__arrow .ta-icon--directional {
	transform: translateX(4px);
}

/* ------------------------------------------------- Learning paths */

/*
 * The one deliberate Deep Green anchor, rebuilt to the reference's proportions:
 * a wide, shallow band rather than a tall panel.
 */
.ta-ec-deep {
	position: relative;
	overflow: hidden;
	padding: clamp(24px, 2.4vw, 32px);
	border-radius: clamp(22px, 2.2vw, 26px);
	background-color: var(--color-green-900);
	background-image: linear-gradient(150deg, var(--color-green-950) 0%, var(--color-green-900) 72%);
	color: var(--color-white);
}

.ta-ec-deep .ta-h2 {
	color: var(--color-white);
	font-size: clamp(30px, 3vw, 42px);
}

.ta-ec-deep .ta-lead {
	margin-block-start: 8px;
	max-inline-size: 70ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(15px, 1.1vw, 17px);
}

.ta-ec-deep .ta-eyebrow {
	color: var(--color-gold);
}

.ta-ec-deep__head {
	position: relative;
	z-index: 1;
	max-inline-size: 780px;
}

/* A decorative graphic slot at the band's far edge. Empty by default. */
.ta-ec-deep__decor {
	position: absolute;
	z-index: 0;
	inset-block-start: 50%;
	inset-inline-start: calc(-1 * clamp(20px, 2vw, 40px));
	inline-size: clamp(140px, 12vw, 190px);
	block-size: clamp(140px, 12vw, 190px);
	transform: translateY(-50%);
	pointer-events: none;
}

.ta-ec-deep__decor-image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.ta-ec-path-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.3vw, 20px);
	margin-block-start: clamp(16px, 1.6vw, 22px);
}

/* Horizontal journey cards: media at the inline-start, affordance at the
   inline-end. */
.ta-ec-path {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(10px, 1vw, 14px);
	min-block-size: clamp(110px, 9vw, 132px);
	padding: clamp(12px, 1.2vw, 16px);
	border-radius: var(--ta-ec-card-radius);
	background-color: var(--color-ivory);
	color: inherit;
	text-decoration: none;
	transition: transform var(--duration-standard) var(--ease-interaction);
}

.ta-ec-path:hover {
	transform: translateY(-3px);
}

.ta-ec-path:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-white);
	outline-offset: 3px;
}

.ta-ec-path__media {
	display: block;
	inline-size: clamp(72px, 6.5vw, 84px);
	block-size: clamp(72px, 6.5vw, 84px);
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--color-sage-100);
}

.ta-ec-path__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ta-ec-path__media .ta-ec-plate-fill {
	min-block-size: 0;
	padding: 6px;
}

.ta-ec-path__media .ta-ec-plate-fill__label {
	font-size: 9px;
	line-height: 1.35;
}

.ta-ec-path__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-inline-size: 0;
}

.ta-ec-path__title {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(18px, 1.5vw, 20px);
	font-weight: var(--weight-bold);
	line-height: 1.3;
}

.ta-ec-path__text {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ta-ec-path__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: 4px;
	color: var(--color-green-900);
	font-size: 13px;
	font-weight: var(--weight-bold);
}

.ta-ec-path__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: clamp(32px, 2.8vw, 38px);
	block-size: clamp(32px, 2.8vw, 38px);
	border: 1px solid rgba(23, 79, 58, 0.18);
	border-radius: 50%;
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
}

.ta-ec-path__arrow .ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-ec-path:hover .ta-ec-path__arrow .ta-icon--directional,
.ta-ec-path:focus-within .ta-ec-path__arrow .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-ec-path:hover .ta-ec-path__arrow .ta-icon--directional,
[dir="ltr"] .ta-ec-path:focus-within .ta-ec-path__arrow .ta-icon--directional {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------- Closing */

/* The family default, shared with the Secondary hub. */
.ta-ec-closing {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--ta-ec-module);
	padding: clamp(28px, 3vw, 44px);
	border-radius: 24px;
	background-color: var(--color-sage-100);
}

/* A closing that carries only an action stays a quiet single-column panel. */
.ta-ec-closing--action-only {
	grid-template-columns: minmax(0, 1fr);
	justify-items: start;
	padding: clamp(24px, 2.4vw, 34px);
}

.ta-ec-closing__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: var(--weight-bold);
	line-height: 1.25;
}

.ta-ec-closing__text {
	margin: var(--space-3) 0 0;
	max-inline-size: 56ch;
	color: var(--color-text-muted);
	font-size: var(--text-body);
	line-height: 1.8;
}

.ta-ec-closing__slot-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex: 0 0 auto;
}

.ta-ec-closing__action {
	flex: 0 0 auto;
}

/*
 * A shallow, light Sage finishing strip — not a second hero. The message sits on
 * the reading side, the action on the other; the owner's background image shows
 * through on the far side under a Sage veil, never under the text.
 */
.ta-ec-closing--feature {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(20px, 2.4vw, 36px);
	min-block-size: clamp(120px, 10vw, 148px);
	padding: clamp(22px, 2.2vw, 30px) clamp(24px, 2.4vw, 34px);
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--color-sage-100);
	color: var(--color-text);
}

.ta-ec-closing__bg {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: left center;
}

/*
 * The veil is Sage, not Deep Green: the art stays legible on the far side while
 * the text side stays solid enough to read.
 */
.ta-ec-closing__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to right, rgba(221, 233, 225, 0.2) 0%, rgba(221, 233, 225, 0.66) 40%, rgba(221, 233, 225, 0.92) 70%, rgba(221, 233, 225, 0.97) 100%);
}

html[dir="ltr"] .ta-ec-closing__scrim {
	background-image: linear-gradient(to left, rgba(221, 233, 225, 0.2) 0%, rgba(221, 233, 225, 0.66) 40%, rgba(221, 233, 225, 0.92) 70%, rgba(221, 233, 225, 0.97) 100%);
}

.ta-ec-closing--feature .ta-ec-closing__body {
	position: relative;
	z-index: 1;
	max-inline-size: 620px;
}

.ta-ec-closing--feature .ta-ec-closing__title {
	color: var(--color-green-900);
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.2;
}

.ta-ec-closing--feature .ta-ec-closing__text {
	margin-block-start: 8px;
	max-inline-size: 54ch;
	color: var(--color-text);
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.7;
}

.ta-ec-closing--feature .ta-ec-closing__slot-row {
	position: relative;
	z-index: 1;
	display: block;
	margin-block-start: 0;
}

.ta-ec-closing--feature .ta-ec-closing__action {
	min-block-size: clamp(46px, 3.6vw, 50px);
	padding-inline: clamp(22px, 2vw, 28px);
	border-color: var(--color-green-900);
	background-color: var(--color-green-900);
	color: var(--color-white);
}

.ta-ec-closing--feature .ta-ec-closing__action:hover {
	border-color: var(--color-green-950);
	background-color: var(--color-green-950);
	color: var(--color-white);
}

.ta-ec-closing--feature .ta-ec-closing__action:focus-visible {
	outline-color: var(--color-green-900);
}

/* Author-only hint that the background slot is still empty. No floating box. */
.ta-ec-closing__bg-note {
	position: absolute;
	z-index: 1;
	inset-block-end: 12px;
	inset-inline-end: 16px;
	color: rgba(23, 79, 58, 0.42);
	font-size: 11px;
	font-weight: var(--weight-medium);
	line-height: 1.5;
}

/* ------------------------------------------------------------ Side art */

/*
 * Optional page-side artwork. Desktop only, absolutely positioned so it can
 * never change a layout dimension, and it paints behind the panels that follow
 * it in the document.
 */
.ta-learn-side-art {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.ta-learn-side-art--right {
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: clamp(160px, 14vw, 240px);
	block-size: clamp(240px, 22vw, 340px);
}

.ta-learn-side-art--left {
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: clamp(180px, 16vw, 280px);
	block-size: clamp(240px, 22vw, 360px);
}

.ta-learn-side-art__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.ta-learn--learn-hub .ta-gb,
.ta-learn--learn-hub .ta-learn-disc {
	position: relative;
}

/* ============================================================== Guide */

/*
 * The Guide hero is the approved Learn-Hub hero system, mirrored here in
 * Guide-scoped classes: Page #181 is locked, so it is deliberately not
 * refactored to share one. The geometry family is identical — a full-bleed
 * photographic field reaching the physical left viewport edge, the copy holding
 * the page grid at the right, and one broad shallow Ivory arc between them.
 */
.ta-learn--guide {
	--ta-ec-hero-top: clamp(28px, 3.4vw, 48px); /* header -> hero copy */
	--ta-ec-hero-copy: 540px; /* the copy block; the field reserves exactly this */
	--ta-ec-hero-arc: clamp(380px, 30vw, 440px);
	--ta-ec-hero-arc-bite: 105px;

	overflow-x: clip; /* the arc may bleed; the page never scrolls sideways */
}

/* The hero and every section heading share the family's wide page grid. */
.ta-learn--guide .ta-ec-wrap {
	max-inline-size: 1264px;
}

/* The reading grid is one step narrower: an article column, not a landing page. */
.ta-learn--guide .ta-ec-wrap--article {
	max-inline-size: 1200px;
}

/*
 * The Guide eyebrow. One rule for the whole page, and the only difference from
 * the family default is the colour: brass keeps the eyebrow a distinct register
 * above the Deep Green H1 it introduces. No pill, no icon, no new idiom.
 */
.ta-learn--guide .ta-eyebrow {
	color: var(--color-gold-action);
}

.ta-ec-next--deep .ta-eyebrow {
	color: var(--color-gold);
}

/*
 * ONE canonical major-section gap, owned by the section below it: hero -> article
 * -> related -> next step -> footer. No section carries vertical padding of its
 * own, so the rendered gap at a boundary is the token and nothing else. Spacing
 * INSIDE the article is editorial and is not part of this rhythm.
 */
.ta-guide > * {
	padding-block: 0;
}

.ta-guide > .ta-guide-hero {
	padding-block-start: var(--ta-ec-hero-top);
}

.ta-guide > .ta-guide__body,
.ta-guide > .ta-related,
.ta-guide > .ta-ec-next {
	padding-block-start: var(--ta-section-gap);
}

/* Whichever module ends the page owns its run into the footer. */
.ta-guide > :last-child {
	padding-block-end: var(--ta-section-gap);
}

/* ------------------------------------------------------------------- Hero */

/*
 * One full-width banner: the copy cluster is the page's normal wrapped block, so
 * the hero's right edge IS the page's right edge, while the photographic field is
 * taken out of flow to reach the physical left viewport edge and to span the
 * hero's full height instead of being sized by its own content.
 */
.ta-guide-hero {
	position: relative;
	min-block-size: clamp(400px, 30vw, 440px);
}

.ta-guide-hero__wrap {
	position: relative;
	z-index: 2;
}

.ta-guide-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	max-inline-size: var(--ta-ec-hero-copy);
	margin-inline-end: auto; /* RTL: the block's own text stays right-aligned */
}

.ta-guide-hero__eyebrow {
	margin: clamp(20px, 1.6vw, 22px) 0 0;
}

/* The headline keeps the metadata's compact rhythm rather than padding it. */
.ta-guide-hero__title {
	margin: clamp(14px, 1.1vw, 16px) 0 0;
	max-inline-size: 520px;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(46px, 4.3vw, 62px);
	font-weight: var(--weight-bold);
	line-height: 1.14;
	text-wrap: balance;
}

.ta-guide-hero__lead {
	margin: clamp(16px, 1.3vw, 18px) 0 0;
	max-inline-size: 520px;
	color: var(--color-text-muted);
	font-size: clamp(17px, 1.25vw, 19px);
	line-height: 1.8;
}

/*
 * The photographic field. It takes the wider of two measures: a panoramic share
 * of the viewport, and whatever space is left beside the copy — the second term
 * is what guarantees the text can never be overrun at any width.
 */
.ta-guide-hero__media {
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-end: 0; /* RTL: the physical left edge */
	inline-size: min(
		55.5vw,
		calc(100% - var(--ta-ec-hero-copy) - clamp(20px, 2.2vw, 32px) - 16px)
	);
}

/* No card silhouette: no border, no shadow, no all-round radius. */
.ta-guide-hero__frame {
	position: relative;
	display: block;
	block-size: 100%;
	overflow: hidden;
	border-radius: 18px 0 0 18px; /* physical left corners only */
	background-color: var(--color-surface);
}

html[dir="ltr"] .ta-guide-hero__frame {
	border-radius: 0 18px 18px 0;
}

.ta-guide-hero__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The placeholder occupies the identical geometry; its author marker is a tiny
   corner note inside the media's own bounds, never a floating label. */
.ta-guide-hero__frame .ta-ec-plate-fill {
	position: absolute;
	inset: 0;
	min-block-size: 0;
	padding: 0;
	border: 0;
	background-image: linear-gradient(158deg, var(--color-sage-100) 0%, var(--color-ivory) 48%, var(--color-surface-warm) 100%);
}

.ta-guide-hero__frame .ta-ec-plate-fill__label {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-end: 16px;
	max-inline-size: none;
	padding: 4px 9px;
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.9);
	color: rgba(23, 79, 58, 0.55);
	font-size: 11px;
	font-weight: var(--weight-medium);
	line-height: 1.3;
	text-align: start;
}

/*
 * The transition. An oversized Ivory disc whose centre sits well inside the
 * photograph, so only a shallow arc brushes into it — a gentle join into the page
 * rather than a hole punched through the image. Pure layout geometry: no border,
 * no shadow, no drawn shape.
 */
.ta-guide-hero__media::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset-block-start: 54%;
	inset-inline-start: calc(var(--ta-ec-hero-arc-bite) - var(--ta-ec-hero-arc));
	inline-size: var(--ta-ec-hero-arc);
	block-size: var(--ta-ec-hero-arc);
	border-radius: 50%;
	background-color: var(--color-bg);
	transform: translateY(-50%);
	pointer-events: none;
}

/* ---------------------------------------------------------- Article layout */

.ta-guide__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 270px;
	gap: clamp(56px, 4.6vw, 72px);
	align-items: start;
}

/*
 * Without a real structure there is no rail. The article keeps the full measure
 * rather than sacrificing reading width to a column that holds nothing.
 */
.ta-guide__layout--single {
	grid-template-columns: minmax(0, 1fr);
}

.ta-guide__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/*
	 * The empty state and the support card are two modules of ONE content region,
	 * so their gap is an internal module gap (~36px at 1440), never the major
	 * section rhythm. Same for the prose -> support gap when there is no rail.
	 */
	gap: clamp(32px, 2.5vw, 40px);
	min-inline-size: 0;
}

.ta-guide__rail {
	position: sticky;
	/* Below the sticky header, and below the admin bar when one is showing. */
	inset-block-start: calc(var(--header-height, 80px) + var(--wp-admin--admin-bar--height, 0px) + var(--space-5));
	display: grid;
	gap: var(--space-5);
}

/* ------------------------------------------------------- Within this path */

/*
 * The relationship this Guide actually belongs to. One surface, one destination,
 * with a clear purpose — placed beside the article, or closing it when there is
 * no rail.
 */
.ta-guide-support {
	padding: clamp(22px, 2vw, 26px);
	border: var(--ta-ec-line);
	border-radius: 18px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-ec-shadow);
}

.ta-guide-support__eyebrow {
	margin: 0 0 6px;
}

.ta-guide-support__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(18px, 1.4vw, 20px);
	font-weight: var(--weight-bold);
	line-height: 1.35;
}

.ta-guide-support__state {
	margin: 8px 0 0;
	color: var(--color-text-muted);
	font-size: 11px;
	line-height: 1.5;
}

/* A standalone action: bold, and never underlined. */
.ta-guide-support__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: var(--space-4);
	color: var(--color-green-900);
	font-size: 15px;
	font-weight: var(--weight-bold);
	text-decoration: none;
}

.ta-guide-support__action:hover {
	color: var(--color-action-hover);
}

.ta-guide-support__action:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 3px;
	border-radius: 6px;
}

.ta-guide-support__action .ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-guide-support__action:hover .ta-icon--directional,
.ta-guide-support__action:focus-visible .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-guide-support__action:hover .ta-icon--directional,
[dir="ltr"] .ta-guide-support__action:focus-visible .ta-icon--directional {
	transform: translateX(4px);
}

/* With no rail the same relationship closes the reading column as one compact
   strip on a soft Sage surface, instead of a panel floating on its own. */
.ta-guide-support--article {
	/*
	 * A bounded contextual navigation card, not a full-width bar: it takes the
	 * reading side of the Guide content wrapper and stops at a comfortable
	 * measure, so the two zones stay visually related instead of being separated
	 * by a wide empty field.
	 */
	inline-size: min(100%, 780px);
	justify-self: start; /* RTL: the physical right / reading edge */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 2.6vw, 40px);
	padding: clamp(20px, 1.9vw, 24px) clamp(22px, 2vw, 26px);
	border: var(--border-divider);
	border-radius: 20px;
	background-color: var(--color-sage-100);
	box-shadow: none;
}

.ta-guide-support--article .ta-guide-support__title {
	font-size: clamp(20px, 1.6vw, 24px);
}

.ta-guide-support--article .ta-guide-support__eyebrow {
	margin-block-end: 4px;
}

.ta-guide-support--article .ta-guide-support__action {
	margin-block-start: 0;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------- Empty state */

/*
 * The authenticated owner's compact state: ONE deliberate module instead of a
 * blank article canvas. A public request never receives this markup, and the
 * edit link is a real capability check.
 */
.ta-guide-empty {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(14px, 1.6vw, 20px);
	max-inline-size: 720px;
	min-block-size: 120px;
	padding: clamp(24px, 2.4vw, 30px);
	border: var(--ta-ec-line);
	border-radius: 20px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-ec-shadow);
}

.ta-guide-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
}

.ta-guide-empty__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(17px, 1.4vw, 19px);
	font-weight: var(--weight-bold);
	line-height: 1.4;
}

.ta-guide-empty__text {
	margin: 4px 0 0;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* Admin utility, not editorial content: a quiet standalone action. */
.ta-guide-empty__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background-color: var(--color-ivory);
	color: var(--color-green-900);
	font-size: 14px;
	font-weight: var(--weight-bold);
	text-decoration: none;
	white-space: nowrap;
}

.ta-guide-empty__action:hover {
	border-color: rgba(23, 79, 58, 0.35);
	background-color: var(--color-sage-100);
	color: var(--color-action-hover);
}

.ta-guide-empty__action:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 2px;
}

.ta-guide-empty__action .ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-guide-empty__action:hover .ta-icon--directional,
.ta-guide-empty__action:focus-visible .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-guide-empty__action:hover .ta-icon--directional,
[dir="ltr"] .ta-guide-empty__action:focus-visible .ta-icon--directional {
	transform: translateX(4px);
}

/* ------------------------------------------------------------- Table of contents */

.ta-toc {
	padding: clamp(22px, 1.8vw, 26px);
	border: var(--ta-ec-line);
	border-radius: 20px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-ec-shadow);
}

.ta-toc__title {
	margin: 0 0 var(--space-3);
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.5;
}

.ta-toc__list,
.ta-toc__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-toc__sublist {
	margin-block: 2px;
	padding-inline-start: var(--space-4);
}

.ta-toc__link {
	display: block;
	margin-inline: -10px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color var(--duration-interaction) var(--ease-interaction), color var(--duration-interaction) var(--ease-interaction);
}

.ta-toc__item--sub .ta-toc__link {
	font-size: 14px;
}

.ta-toc__link:hover {
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
}

.ta-toc__link:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 2px;
}

.ta-toc__link[aria-current="true"] {
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
}

/* ------------------------------------------------------------- Article prose */

.ta-prose {
	max-inline-size: 72ch;
	color: var(--color-text);
	font-size: 18px;
	line-height: 1.95;
}

.ta-prose > * + * {
	margin-block-start: 0;
}

.ta-prose p {
	margin: 0 0 1.45em;
}

.ta-prose h2,
.ta-prose h3,
.ta-prose h4 {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	line-height: 1.25;
	text-wrap: balance;
	scroll-margin-block-start: 120px;
}

.ta-prose h2 {
	margin-block-start: clamp(56px, 5vw, 72px);
	margin-block-end: 22px;
	font-size: clamp(32px, 2.8vw, 38px);
}

.ta-prose h3 {
	margin-block-start: clamp(40px, 3.6vw, 48px);
	margin-block-end: 16px;
	font-size: clamp(26px, 2.1vw, 29px);
}

.ta-prose h4 {
	margin-block-start: var(--space-7, 32px);
	margin-block-end: 12px;
	font-size: clamp(19px, 1.5vw, 22px);
}

.ta-prose h2:first-child,
.ta-prose h3:first-child {
	margin-block-start: 0;
}

.ta-prose ul,
.ta-prose ol {
	margin: 0 0 1.45em;
	padding-inline-start: 1.5em;
}

.ta-prose li {
	margin-block-end: 0.5em;
}

/* A nested list stays a list, not a second paragraph block. */
.ta-prose li > ul,
.ta-prose li > ol {
	margin-block: 0.5em 0;
}

.ta-prose li::marker {
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
}

.ta-prose a {
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ta-prose a:hover {
	color: var(--color-action-hover);
}

.ta-prose strong {
	color: var(--color-heading);
	font-weight: var(--weight-bold);
}

.ta-prose em {
	font-style: italic;
}

/* An editorial quote: a soft Sage surface lifted by one brass logical edge. */
.ta-prose blockquote {
	margin: 0 0 1.45em;
	padding: clamp(24px, 2.2vw, 28px);
	border: var(--ta-ec-line);
	border-inline-start: 3px solid var(--color-gold-action);
	border-radius: 16px;
	background-color: var(--color-sage-100);
	color: var(--color-text);
	font-size: clamp(18px, 1.3vw, 20px);
	line-height: 1.85;
}

.ta-prose blockquote p:last-child {
	margin-block-end: 0;
}

.ta-prose figure {
	margin: 40px 0 48px;
}

.ta-prose figure img {
	border-radius: 20px;
}

.ta-prose img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 20px;
}

.ta-prose figcaption {
	margin-block-start: 10px;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.6;
	text-align: start;
}

.ta-prose hr {
	margin-block: clamp(48px, 4vw, 64px);
	border: 0;
	border-block-start: var(--ta-ec-line);
}

/* Contained table: white surface, sage header, scrolls on narrow screens. */
.ta-prose table {
	inline-size: 100%;
	margin: 0 0 1.45em;
	border: var(--ta-ec-line);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background-color: var(--color-surface);
	font-size: 16px;
	line-height: 1.7;
}

.ta-prose th,
.ta-prose td {
	padding: 15px 18px;
	border-block-end: var(--ta-ec-line);
	text-align: start;
	vertical-align: top;
}

.ta-prose tr:last-child td {
	border-block-end: 0;
}

.ta-prose thead th {
	background-color: var(--color-sage-100);
	color: var(--color-heading);
	font-weight: var(--weight-bold);
}

/*
 * A narrow viewport scrolls the table rather than shrinking the type until it is
 * unreadable. `display: block` on the table element keeps the rows laying out as
 * a table while the element itself becomes the scroll container.
 */
.ta-prose > table {
	display: block;
	max-inline-size: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* A wrapper keeps the table full-width while the block table remains the
   narrow-screen scroll container; nesting the table directly would let its
   inner box shrink away from the bordered surface. */
.ta-prose > .ta-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block-end: 1.45em;
}

.ta-prose > .ta-table-wrap > table {
	display: table;
	inline-size: 100%;
	margin-block-end: 0;
}

/* ------------------------------------------------------------ Related guides */

.ta-related {
	margin-block-start: 0;
}

/* The related row is the family's guide-card language, so it steps the same way. */
.ta-related .ta-ec-grid {
	gap: clamp(14px, 1.3vw, 18px);
}

.ta-ec-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ta-ec-module);
}

.ta-ec-grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --------------------------------------------------------------- Next step */

.ta-ec-next {
	margin-block-start: 0;
}

/* The one contained closing module: a reading suggestion, not a banner. */
.ta-ec-next__panel {
	position: relative;
	/* One centred row: the panel owns the minimum height, the inner grid owns the
	   width, so the module keeps its proportion with or without artwork. */
	display: grid;
	align-content: center;
	overflow: hidden;
	min-block-size: clamp(160px, 12vw, 200px);
	padding: clamp(24px, 2.2vw, 32px) clamp(26px, 2.4vw, 38px);
	border-radius: 26px;
	background-color: var(--color-sage-100);
}

.ta-ec-next--deep .ta-ec-next__panel {
	background-color: var(--color-green-900);
	background-image: linear-gradient(150deg, var(--color-green-950) 0%, var(--color-green-900) 72%);
	color: var(--color-white);
}

.ta-ec-next__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(24px, 2.6vw, 40px);
}

/* The destination's own artwork belongs at the physical left of the panel. */
.ta-ec-next--media .ta-ec-next__inner {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.34fr);
}

.ta-ec-next__body {
	min-inline-size: 0;
}

.ta-ec-next__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: var(--weight-bold);
	line-height: 1.2;
	text-wrap: balance;
}

.ta-ec-next--deep .ta-ec-next__title {
	color: var(--color-white);
}

.ta-ec-next__text {
	margin: var(--space-3) 0 0;
	max-inline-size: 56ch;
	color: var(--color-text-muted);
	font-size: var(--text-body);
	line-height: 1.8;
}

.ta-ec-next--deep .ta-ec-next__text {
	color: rgba(255, 255, 255, 0.82);
}

.ta-ec-next__action {
	flex: 0 0 auto;
}

.ta-ec-next__media {
	align-self: stretch;
	overflow: hidden;
	border-radius: 18px;
	background-color: var(--color-surface);
}

.ta-ec-next__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 100%;
	object-fit: cover;
}

/* ============================================================== Secondary hub */

/*
 * The Secondary hub is assembled entirely from the two locked P06 systems: the
 * full-bleed hero family the Learn hub and the Guide share, the Learn hub's
 * specialization cards, and its compact guide cards. Nothing new is designed
 * here. The locked selectors of those two pages are not modified — the hero
 * geometry is mirrored in hub-scoped classes, exactly as the Guide's is, so the
 * three heroes cannot drift and cannot regress each other.
 */
.ta-learn--secondary-hub {
	--ta-ec-hero-top: clamp(28px, 3.4vw, 48px);
	--ta-ec-hero-copy: 540px;
	--ta-ec-hero-arc: clamp(380px, 30vw, 440px);
	--ta-ec-hero-arc-bite: 105px;
	/* Read by the shared specialization card primitive; declared on the Learn hub
	   because it was the only consumer until now. */
	--ta-ec-card-radius: 18px;

	overflow-x: clip;
}

/* The same wide page grid the Learn hub uses: ~1200px of content at 1440. */
.ta-learn--secondary-hub .ta-ec-wrap {
	max-inline-size: 1264px;
}

/* The same brass eyebrow register the Guide uses. */
.ta-learn--secondary-hub .ta-eyebrow {
	color: var(--color-gold-action);
}

/*
 * ONE canonical major-section gap, owned by the section below it:
 * hero -> guides -> other specializations -> closing -> footer. No section
 * carries vertical padding of its own, so a boundary is the token and nothing
 * else; spacing inside a section is internal and uses the module tokens.
 */
.ta-hub > * {
	padding-block: 0;
}

.ta-hub > .ta-hub-hero {
	padding-block-start: var(--ta-ec-hero-top);
}

.ta-hub > .ta-hub-guides,
.ta-hub > .ta-hub-siblings,
.ta-hub > .ta-hub-closing {
	padding-block-start: var(--ta-section-gap);
}

.ta-hub > :last-child {
	padding-block-end: var(--ta-section-gap);
}

/* ------------------------------------------------------------------- Hero */

/*
 * One full-width banner: the copy cluster holds the page's normal wrapped block,
 * so the hero's right edge IS the page's right edge, while the photographic
 * field is taken out of flow to reach the physical left viewport edge and to
 * span the hero's full height.
 */
.ta-hub-hero {
	position: relative;
	min-block-size: clamp(400px, 30vw, 440px);
}

.ta-hub-hero__wrap {
	position: relative;
	z-index: 2;
}

.ta-hub-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	max-inline-size: var(--ta-ec-hero-copy);
	margin-inline-end: auto; /* RTL: the block's own text stays right-aligned */
}

.ta-hub-hero__eyebrow {
	margin: clamp(20px, 1.6vw, 22px) 0 0;
}

.ta-hub-hero__title {
	margin: clamp(14px, 1.1vw, 16px) 0 0;
	max-inline-size: 520px;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(46px, 4.3vw, 62px);
	font-weight: var(--weight-bold);
	line-height: 1.14;
	text-wrap: balance;
}

.ta-hub-hero__lead {
	margin: clamp(16px, 1.3vw, 18px) 0 0;
	max-inline-size: 520px;
	color: var(--color-text-muted);
	font-size: clamp(17px, 1.25vw, 19px);
	line-height: 1.8;
}

.ta-hub-hero__media {
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-end: 0; /* RTL: the physical left edge */
	inline-size: min(
		55.5vw,
		calc(100% - var(--ta-ec-hero-copy) - clamp(20px, 2.2vw, 32px) - 16px)
	);
}

/* No card silhouette: no border, no shadow, no all-round radius. */
.ta-hub-hero__frame {
	position: relative;
	display: block;
	block-size: 100%;
	overflow: hidden;
	border-radius: 18px 0 0 18px; /* physical left corners only */
	background-color: var(--color-surface);
}

html[dir="ltr"] .ta-hub-hero__frame {
	border-radius: 0 18px 18px 0;
}

.ta-hub-hero__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The placeholder occupies the identical geometry; its author marker is a tiny
   corner note inside the media's own bounds, never a floating label. */
.ta-hub-hero__frame .ta-ec-plate-fill {
	position: absolute;
	inset: 0;
	min-block-size: 0;
	padding: 0;
	border: 0;
	background-image: linear-gradient(158deg, var(--color-sage-100) 0%, var(--color-ivory) 48%, var(--color-surface-warm) 100%);
}

.ta-hub-hero__frame .ta-ec-plate-fill__label {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-end: 16px;
	max-inline-size: none;
	padding: 4px 9px;
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.9);
	color: rgba(23, 79, 58, 0.55);
	font-size: 11px;
	font-weight: var(--weight-medium);
	line-height: 1.3;
	text-align: start;
}

/*
 * The transition: one oversized Ivory disc whose centre sits well inside the
 * photograph, so only a shallow arc brushes into it. Pure layout geometry.
 */
.ta-hub-hero__media::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset-block-start: 54%;
	inset-inline-start: calc(var(--ta-ec-hero-arc-bite) - var(--ta-ec-hero-arc));
	inline-size: var(--ta-ec-hero-arc);
	block-size: var(--ta-ec-hero-arc);
	border-radius: 50%;
	background-color: var(--color-bg);
	transform: translateY(-50%);
	pointer-events: none;
}

/* -------------------------------------------------------------- Guide cards */

/* The locked Learn hub guide-card language, with the reference's tighter row. */
.ta-hub-guides__grid {
	gap: clamp(18px, 1.6vw, 22px);
}

/* ------------------------------------------------- Other specializations */

/*
 * The locked Learn hub specialization card, mirrored: same surface, same
 * physical order (media, text, one circular affordance) and the same cadence as
 * the Learn hub's own grid.
 */
.ta-learn--secondary-hub .ta-ec-disc-grid--media {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.3vw, 18px);
}

/* ------------------------------------------------------------ Empty state */

/*
 * The authenticated owner's compact state: ONE deliberate module, never a thin
 * editor bar and never a blank archive region. It never reserves a height it
 * does not fill, and it is aligned to the reading side of the section grid.
 */
.ta-hub-empty {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(20px, 2.4vw, 32px);
	inline-size: min(100%, 780px);
	margin-inline-end: auto; /* RTL: the reading (physical right) edge */
	padding: clamp(28px, 2.6vw, 36px) clamp(26px, 2.4vw, 34px);
	border: var(--ta-ec-line);
	border-radius: 20px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-ec-shadow);
}

.ta-hub-empty__body {
	min-inline-size: 0;
}

.ta-hub-empty__eyebrow {
	margin: 0 0 10px;
}

.ta-hub-empty__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(18px, 1.45vw, 21px);
	font-weight: var(--weight-bold);
	line-height: 1.4;
}

.ta-hub-empty__text {
	margin: 6px 0 0;
	max-inline-size: 54ch;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.7;
}

/* Admin utility, not editorial content: a quiet standalone action. */
.ta-hub-empty__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background-color: var(--color-ivory);
	color: var(--color-green-900);
	font-size: 14px;
	font-weight: var(--weight-bold);
	text-decoration: none;
	white-space: nowrap;
}

.ta-hub-empty__action:hover {
	border-color: rgba(23, 79, 58, 0.35);
	background-color: var(--color-sage-100);
	color: var(--color-action-hover);
}

.ta-hub-empty__action:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 2px;
}

.ta-hub-empty__action .ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-hub-empty__action:hover .ta-icon--directional,
.ta-hub-empty__action:focus-visible .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-hub-empty__action:hover .ta-icon--directional,
[dir="ltr"] .ta-hub-empty__action:focus-visible .ta-icon--directional {
	transform: translateX(4px);
}

/*
 * The public state: one restrained editorial line. No editor instruction, no
 * promise, no date, and no surface pretending to be a module.
 */
.ta-hub-empty-note {
	margin: 0;
	max-inline-size: 62ch;
	color: var(--color-text-muted);
	font-size: clamp(16px, 1.15vw, 18px);
	line-height: 1.8;
}

/* ----------------------------------------------------------------- Closing */

/*
 * The shared Soft Sage closing panel, used without its photographic variant: a
 * shallow module that returns the reader to the broader learning hub. Only its
 * spacing is the hub's business.
 */
.ta-hub-closing .ta-ec-closing {
	min-block-size: clamp(140px, 10vw, 168px);
}

/* ============================================================== Motion */

/*
 * Same grammar as the homepage, scoped to this family. Dense groups reveal as a
 * panel; only small sets stagger.
 */
.ta-js .ta-learn [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--ta-reveal-delay, 0ms),
		transform 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--ta-reveal-delay, 0ms);
}

.ta-js .ta-learn [data-reveal="media"] {
	transform: translateY(14px) scale(0.985);
	transition:
		opacity 640ms cubic-bezier(0.22, 1, 0.36, 1) var(--ta-reveal-delay, 0ms),
		transform 640ms cubic-bezier(0.22, 1, 0.36, 1) var(--ta-reveal-delay, 0ms);
}

.ta-js .ta-learn [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

.ta-js .ta-learn [data-reveal-group] > [data-reveal]:nth-child(2) {
	--ta-reveal-delay: 70ms;
}

.ta-js .ta-learn [data-reveal-group] > [data-reveal]:nth-child(3) {
	--ta-reveal-delay: 140ms;
}

.ta-js .ta-learn [data-reveal-group] > [data-reveal]:nth-child(n + 4) {
	--ta-reveal-delay: 210ms;
}

@media (prefers-reduced-motion: reduce) {
	.ta-js .ta-learn [data-reveal],
	.ta-js .ta-learn [data-reveal="media"],
	.ta-js .ta-learn [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ta-ec-disc,
	.ta-ec-path,
	.ta-ec-card,
	.ta-icon--directional,
	.ta-toc__link,
	.ta-guide-support__action,
	.ta-guide-empty__action,
	.ta-hub-empty__action {
		transition: none;
	}

	/* Nothing depends on the arrow's travel, so with reduced motion it simply
	   stays where it is. */
	.ta-ec-card__cta .ta-icon--directional,
	.ta-ec-disc__arrow .ta-icon--directional,
	.ta-ec-path__arrow .ta-icon--directional,
	.ta-guide-support__action .ta-icon--directional,
	.ta-guide-empty__action .ta-icon--directional,
	.ta-hub-empty__action .ta-icon--directional {
		transform: none !important;
	}
}

/* ============================================================== Responsive */

/* The copy narrows a step below the widest desktops, which lets the field keep
   growing toward its 1280 target without ever reaching the text. */
@media (max-width: 1399px) {
	.ta-learn--learn-hub {
		--ta-hero-copy: 520px;
	}
}

@media (max-width: 1199px) {
	/* Page-side artwork belongs to the wide desktop composition only. */
	.ta-learn-side-art {
		display: none;
	}

	.ta-learn--learn-hub .ta-ec-disc-grid--media,
	.ta-learn--secondary-hub .ta-ec-disc-grid--media {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ta-learn--learn-hub .ta-ec-path-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * The hero stacks before the family's tablet breakpoint: with the copy drawn in
 * toward the media, a split below this width would push the text over the
 * photograph. A clean stacked hero beats a squeezed split one.
 */
@media (max-width: 1119px) {
	/*
	 * Stacked: copy first, then the media as an ordinary landscape plate. The
	 * full-bleed field and its Ivory arc belong to the desktop composition only.
	 */
	.ta-learn--learn-hub .ta-learn-hero {
		min-block-size: 0;
	}

	.ta-learn--learn-hub .ta-learn-hero__body {
		max-inline-size: none;
		margin-inline-end: 0;
	}

	.ta-learn--learn-hub .ta-learn-hero__media {
		position: static;
		inline-size: auto;
		margin-inline: clamp(20px, 2.2vw, 32px);
		margin-block-start: 32px;
	}

	.ta-learn--learn-hub .ta-learn-hero__media::after {
		content: none;
	}

	/* A normal landscape plate, aligned with the copy's gutter. */
	.ta-learn--learn-hub .ta-learn-hero__frame {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 16 / 10;
		max-block-size: 420px;
		border-radius: 20px;
	}

	html[dir="ltr"] .ta-learn--learn-hub .ta-learn-hero__frame {
		border-radius: 20px;
	}

	.ta-learn-hero__decor {
		display: none;
	}
}

/*
 * The Guide hero stacks at the same breakpoint as the approved Learn-Hub hero:
 * with the copy drawn in toward the media, a split below this width would push
 * the text over the photograph. Copy first, then the media as an ordinary
 * landscape plate, and the desktop arc is dropped entirely.
 */
@media (max-width: 1119px) {
	.ta-guide-hero,
	.ta-hub-hero {
		min-block-size: 0;
	}

	.ta-guide-hero__body,
	.ta-hub-hero__body {
		max-inline-size: none;
		margin-inline-end: 0;
	}

	.ta-guide-hero__media,
	.ta-hub-hero__media {
		position: static;
		inline-size: auto;
		margin-inline: clamp(20px, 2.2vw, 32px);
		margin-block-start: 32px;
	}

	.ta-guide-hero__media::after,
	.ta-hub-hero__media::after {
		content: none;
	}

	.ta-guide-hero__frame,
	.ta-hub-hero__frame {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 16 / 10;
		max-block-size: 420px;
		border-radius: 20px;
	}

	html[dir="ltr"] .ta-guide-hero__frame,
	html[dir="ltr"] .ta-hub-hero__frame {
		border-radius: 20px;
	}
}

@media (max-width: 1023px) {
	.ta-learn {
		--ta-ec-section: clamp(64px, 7vw, 88px);
	}

	.ta-learn--learn-hub .ta-ec-wrap,
	.ta-learn--guide .ta-ec-wrap,
	.ta-learn--guide .ta-ec-wrap--article,
	.ta-learn--secondary-hub .ta-ec-wrap {
		max-inline-size: 1180px;
	}

	.ta-learn--learn-hub .ta-ec-card--feature .ta-ec-card__link {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-block-size: clamp(210px, 30vw, 240px);
	}

	.ta-learn--learn-hub .ta-learn-start__grid--feature {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-learn--learn-hub .ta-learn-start__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: minmax(0, 1fr);
	}

	/* The article becomes one column and the contents list moves ahead of it. */
	.ta-guide__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 4vw, 40px);
	}

	.ta-guide__rail {
		position: static;
		order: -1;
	}

	.ta-prose {
		max-inline-size: none;
	}
}

@media (max-width: 767px) {
	.ta-learn {
		--ta-ec-section: clamp(56px, 9vw, 72px);
		--ta-ec-module: clamp(20px, 5vw, 28px);
	}

	.ta-learn--learn-hub .ta-ec-wrap {
		padding-inline: clamp(18px, 4.4vw, 20px);
	}

	/* The stacked hero plate keeps the same gutter as the copy beside it. */
	.ta-learn--learn-hub .ta-learn-hero__media,
	.ta-guide-hero__media {
		margin-inline: clamp(18px, 4.4vw, 20px);
	}

	/* Phone H1s: the article title is the largest thing on the page, the hub
	   titles a step below, and both still wrap without crowding the measure. */
	.ta-guide-hero__title {
		font-size: clamp(40px, 10vw, 44px);
	}

	.ta-learn--learn-hub .ta-learn-hero__title {
		font-size: clamp(40px, 10.4vw, 44px);
	}

	.ta-hub-hero__title {
		font-size: clamp(40px, 10.4vw, 44px);
	}

	/*
	 * Phone section headings. This brief asks for 30-34px on this page, which is
	 * the family H2 clamp's own lower bound; the family's phone override narrows
	 * it further, so the hub restates it with enough specificity to win.
	 */
	.ta-learn.ta-learn--secondary-hub .ta-h2 {
		font-size: clamp(30px, 7.8vw, 34px);
	}

	/* The stacked hero plate keeps the same gutter as the copy beside it. */
	.ta-hub-hero__media {
		margin-inline: clamp(18px, 4.4vw, 20px);
	}

	.ta-hub-empty {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 26px 20px;
	}

	.ta-hub-empty__action {
		justify-self: start;
	}

	.ta-learn .ta-h2 {
		font-size: clamp(26px, 7vw, 32px);
	}

	.ta-learn--learn-hub .ta-ec-card--feature .ta-ec-card__link,
	.ta-learn--learn-hub .ta-learn-start__side .ta-ec-card__link,
	.ta-ec-card--browser .ta-ec-card__link {
		grid-template-columns: minmax(0, 1fr);
		min-block-size: 0;
	}

	/* The stacked slot owns the ratio; the image or placeholder only fills it. */
	.ta-learn--learn-hub .ta-ec-card--feature .ta-card__media,
	.ta-learn--learn-hub .ta-learn-start__side .ta-card__media,
	.ta-ec-card--browser .ta-card__media {
		order: 0;
		aspect-ratio: 16 / 9;
		block-size: auto;
	}

	.ta-learn--learn-hub .ta-ec-card--feature .ta-card__media img,
	.ta-learn--learn-hub .ta-learn-start__side .ta-card__media img,
	.ta-learn--learn-hub .ta-ec-card--feature .ta-card__media .ta-ec-plate-fill,
	.ta-learn--learn-hub .ta-learn-start__side .ta-card__media .ta-ec-plate-fill,
	.ta-ec-card--browser .ta-card__media img,
	.ta-ec-card--browser .ta-card__media .ta-ec-plate-fill {
		block-size: 100%;
		min-block-size: 0;
		aspect-ratio: auto;
	}

	.ta-learn--learn-hub .ta-learn-start__side {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-learn--learn-hub .ta-learn-start__side .ta-card__text {
		-webkit-line-clamp: 2;
	}

	.ta-gb__panel {
		padding: 20px;
	}

	.ta-learn--learn-hub .ta-gb__head {
		flex-direction: column;
		gap: 6px;
	}

	.ta-gb__count {
		padding-block-start: 0;
	}

	/* Filters scroll horizontally rather than clipping or wrapping into rows of
	   uneven height. */
	.ta-gb__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-block-end: 6px;
		scrollbar-width: thin;
	}

	.ta-gb__filter {
		flex: 0 0 auto;
	}

	.ta-learn--learn-hub .ta-ec-disc-grid--media,
	.ta-learn--learn-hub .ta-ec-path-grid,
	.ta-learn--secondary-hub .ta-ec-disc-grid--media {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-ec-disc--media {
		grid-template-columns: minmax(88px, 104px) minmax(0, 1fr) auto;
	}

	.ta-learn--learn-hub .ta-ec-path-grid {
		gap: 12px;
	}

	.ta-ec-path__media {
		inline-size: 72px;
		block-size: 72px;
	}

	/* The closing strip stacks and stays short. */
	.ta-ec-closing--feature {
		grid-template-columns: minmax(0, 1fr);
		min-block-size: 0;
		max-block-size: 180px;
		gap: 14px;
		padding: 22px 20px;
	}

	.ta-ec-closing--feature .ta-ec-closing__slot-row {
		display: block;
	}

	.ta-ec-closing--feature .ta-ec-closing__action {
		inline-size: 100%;
		justify-content: center;
	}

	.ta-ec-closing__scrim,
	html[dir="ltr"] .ta-ec-closing__scrim {
		background-image: linear-gradient(to top, rgba(221, 233, 225, 0.2) 0%, rgba(221, 233, 225, 0.72) 46%, rgba(221, 233, 225, 0.94) 100%);
	}

	.ta-ec-closing {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-ec-closing__action,
	.ta-ec-next__action {
		inline-size: 100%;
		justify-content: center;
	}

	.ta-ec-empty {
		padding: 18px 20px;
	}

	.ta-prose {
		font-size: 17px;
	}

	.ta-prose h2 {
		margin-block-start: 44px;
		font-size: clamp(30px, 7.8vw, 34px);
	}

	.ta-prose h3 {
		margin-block-start: 34px;
		font-size: clamp(24px, 6vw, 27px);
	}

	/* The article keeps the canonical major-section rhythm, so no padding of its
	   own is needed here; only the reading column's internal spacing changes. */
	.ta-guide-empty {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 22px 20px;
	}

	.ta-guide-empty__action {
		justify-self: start;
	}

	.ta-guide-support--article {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.ta-ec-next__inner,
	.ta-ec-next--media .ta-ec-next__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-ec-next--media .ta-ec-next__media {
		aspect-ratio: 16 / 10;
	}

	/*
	 * A cell narrower than this stops being readable long before it stops fitting,
	 * so the table's content outgrows the column and the table scrolls sideways
	 * instead of squeezing every cell.
	 */
	.ta-prose > table th,
	.ta-prose > table td {
		min-inline-size: 140px;
	}

}

/*
 * The guide browser steps down a column at a time. Three columns stop fitting
 * well before the family's tablet breakpoint, so it drops to two as soon as a
 * card would fall under the reference's minimum, and to one when two would.
 */
@media (max-width: 1099px) {
	.ta-learn--learn-hub .ta-gb__grid,
	.ta-related .ta-ec-grid,
	.ta-hub-guides__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ta-learn--learn-hub .ta-gb--collapsed .ta-gb__item:nth-child(n + 10) {
		display: block;
	}

	.ta-learn--learn-hub .ta-gb--collapsed .ta-gb__item:nth-child(n + 7) {
		display: none;
	}
}

@media (max-width: 699px) {
	.ta-learn--learn-hub .ta-gb__grid,
	.ta-related .ta-ec-grid,
	.ta-hub-guides__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-learn--learn-hub .ta-gb--collapsed .ta-gb__item:nth-child(n + 7) {
		display: block;
	}

	.ta-learn--learn-hub .ta-gb--collapsed .ta-gb__item:nth-child(n + 4) {
		display: none;
	}
}

/* ------------------------------------------------------ Hub editorial body */

/*
 * A secondary hub may carry its own editorial introduction above the guide
 * grid. It borrows the article prose exactly, so the hub and the Guide it
 * introduces read as one family; only the section rhythm is local.
 */
.ta-hub-body {
	padding-block: clamp(56px, 6vw, 88px) 0;
}

.ta-hub-body .ta-prose {
	margin-inline: auto;
}

@media (max-width: 743px) {
	.ta-hub-body {
		padding-block: 40px 0;
	}

	.ta-hub-body .ta-prose {
		font-size: 17px;
	}
}

/* ======================================================= Shared hero media ===
 * One controlled editorial media frame for the P06 hero family: the Learn hub,
 * the Guide and the secondary hub. It replaces the previous full-bleed field
 * (55.5vw wide, 100% of a 400-440px hero) and its oversized Ivory disc, which
 * together produced an uncontrolled panoramic crop and a decorative arc that
 * cut into the photograph.
 *
 * Desktop: a stable two-column grid. The copy keeps the reading column; the
 * media is a 4:3 editorial frame at roughly 44% of the hero content width,
 * capped at 720px, with a 24px radius and no arc.
 * ------------------------------------------------------------------------- */
@media (min-width: 1120px) {
	.ta-learn--learn-hub .ta-learn-hero,
	.ta-guide-hero,
	.ta-hub-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(380px, 0.95fr);
		align-items: center;
		gap: clamp(32px, 5vw, 72px);
		max-inline-size: 1180px;
		margin-inline: auto;
		padding-inline: clamp(20px, 2.2vw, 32px);
	}

	/* The wrap is the grid item now; its own container box would double the
	   page gutter and cap the copy column. */
	.ta-learn--learn-hub .ta-learn-hero__wrap,
	.ta-guide-hero__wrap,
	.ta-hub-hero__wrap {
		inline-size: 100%;
		max-inline-size: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	.ta-learn--learn-hub .ta-learn-hero__body,
	.ta-guide-hero__body,
	.ta-hub-hero__body {
		max-inline-size: none;
		margin-inline-end: 0;
	}

	.ta-learn--learn-hub .ta-learn-hero__media,
	.ta-guide-hero__media,
	.ta-hub-hero__media {
		position: static;
		inset: auto;
		inline-size: 100%;
		max-inline-size: 720px;
		margin: 0;
	}

	.ta-learn--learn-hub .ta-learn-hero__frame,
	.ta-guide-hero__frame,
	.ta-hub-hero__frame {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 4 / 3;
		max-block-size: none;
		overflow: hidden;
		border-radius: 24px;
		background-color: var(--color-surface);
	}
}

/* The image is always cropped by the frame, never stretched. The focal point is
   a page-level variable so a portrait-led page can art-direct its own crop. */
.ta-learn--learn-hub .ta-learn-hero__image,
.ta-guide-hero__image,
.ta-hub-hero__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: var(--hero-object-position, center center);
}

/* The Learn hub's approved hero is Sarah's portrait: keep her face, hair and
   shoulders inside the 4:3 crop. Page-level override, never the default. */
.ta-learn--learn-hub .ta-learn-hero {
	--hero-object-position: center 28%;
}

/* The oversized Ivory disc is retired for this family at every width. */
.ta-learn--learn-hub .ta-learn-hero__media::after,
.ta-guide-hero__media::after,
.ta-hub-hero__media::after {
	content: none;
}

/* Stacked tablets and phones keep the same controlled 4:3 plate; the old
   16:10 + 420px cap is dropped so the ratio stays honest. */
@media (max-width: 1119px) {
	/* Keep the stacked plate inside a 640px measure (480px tall at 4:3) so a
	   tablet does not get a 960x720 slab; phones keep their existing gutter. */
	.ta-learn--learn-hub .ta-learn-hero__media,
	.ta-guide-hero__media,
	.ta-hub-hero__media {
		inline-size: calc(100% - clamp(40px, 4.4vw, 64px));
		max-inline-size: 640px;
		margin-inline: auto;
	}

	.ta-learn--learn-hub .ta-learn-hero__frame,
	.ta-guide-hero__frame,
	.ta-hub-hero__frame {
		aspect-ratio: 4 / 3;
		max-block-size: none;
		border-radius: 24px;
	}
}