/* Travel Industry Basics on the homepage: a dictionary headword that turns
   through five trade terms, on the page's own cream above Further afield.
   Scoped to outrank core's :root :where(.is-layout-constrained) > * block gap. */
:is(.olga-story-journal, body) .olga-basics-feature {
	--olga-basics-clay: var(--wp--preset--color--accent);
	--olga-basics-ink: var(--wp--preset--color--contrast);
	--olga-basics-muted: var(--wp--preset--color--muted);
	--olga-basics-ease: cubic-bezier(.32, .72, 0, 1);
	margin-block: 0;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	color: var(--olga-basics-ink);
	container: olga-basics / inline-size;
}

/* Further afield keeps its own hairline as the divider below. */
.olga-basics-feature + .olga-journal-pages .olga-pagination {
	margin-block-start: 0;
}

.olga-basics-feature__inner {
	display: grid;
	grid-template-columns: minmax(0, 17.5rem) minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 4cqi, 4rem);
	align-items: center;
}

.olga-basics-feature :where(h2, p) {
	margin: 0;
}

.olga-basics-feature a {
	color: inherit;
	text-decoration: none;
}

.olga-basics-feature a.olga-basics-feature__more {
	color: var(--olga-basics-clay);
}

.olga-basics-feature__art img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.olga-basics-feature__entry {
	display: grid;
	gap: 1.25rem;
	min-inline-size: 0;
}

.olga-basics-feature__label,
.olga-basics-feature__kicker,
.olga-basics-feature__more {
	color: var(--olga-basics-clay);
	font: 500 .8125rem/1.3 var(--wp--preset--font-family--ui);
	letter-spacing: .09em;
	text-transform: uppercase;
}

.olga-basics-feature__label {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.olga-basics-feature__label::before {
	content: "";
	flex: none;
	inline-size: 1.5rem;
	block-size: 1px;
	background: currentColor;
	opacity: .55;
}

/* Every term shares one cell: the tallest sets the height, one is shown. */
.olga-basics-feature__terms {
	display: grid;
}

.olga-basics-feature__term {
	grid-area: 1 / 1;
	display: grid;
	align-content: start;
	gap: 1rem;
	opacity: 0;
	visibility: hidden;
}

.olga-basics-feature__term.is-current {
	opacity: 1;
	visibility: visible;
}

.olga-basics-feature__word {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 2rem + 5cqi, 5rem);
	line-height: 1;
	letter-spacing: -.012em;
}

.olga-basics-feature__word small {
	color: var(--olga-basics-muted);
	font: 400 1.0625rem/1.3 var(--wp--preset--font-family--body);
	letter-spacing: 0;
}

.olga-basics-feature__definition {
	max-inline-size: 34ch;
	font: 400 1.1875rem/1.55 var(--wp--preset--font-family--body);
	text-wrap: pretty;
}

/* The Portraits underline: a hairline drawn from the left beneath the words,
   line by line. It needs an inline box, hence the inner span. */
.olga-basics-feature__ink {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
}

.olga-basics-feature a:is(:hover, :focus-visible) .olga-basics-feature__ink {
	background-size: 100% 1px;
}

.olga-basics-feature__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.75rem;
}

.olga-basics-feature__pips {
	display: flex;
	gap: .375rem;
}

/* A short rule per term; the current one fills as its five seconds pass. */
.olga-basics-feature__pip {
	position: relative;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.olga-basics-feature__pip::before,
.olga-basics-feature__pip::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	block-size: 1px;
	background: var(--olga-basics-ink);
}

.olga-basics-feature__pip::before {
	opacity: .22;
}

.olga-basics-feature__pip.is-current::before {
	opacity: .5;
}

.olga-basics-feature__pip::after {
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.olga-basics-feature__pip.is-current::after {
	transform: none;
}

.olga-basics-feature__more::after {
	content: " \2192";
}

.olga-basics-feature :is(a, button):focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 6px;
}

.olga-basics-feature__asides {
	display: grid;
	min-inline-size: 0;
}

.olga-basics-feature__aside {
	display: grid;
	gap: .625rem;
	padding-block: 1.5rem;
	border-block-start: 1px solid rgb(18 17 15 / .22);
}

.olga-basics-feature__aside:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.olga-basics-feature__aside:last-child {
	padding-block-end: 0;
}

.olga-basics-feature__line {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	line-height: 1.35;
	text-wrap: balance;
}

.olga-basics-feature__source {
	color: var(--olga-basics-muted);
	font: 400 .875rem/1.4 var(--wp--preset--font-family--ui);
}

/* The turn: the old term lifts away as the new one settles from below, the
   definition a breath after its headword. The pip's fill is the clock, so
   pausing it (pointer, focus, off screen) pauses the turning too. */
@media (prefers-reduced-motion: no-preference) {
	.olga-basics-feature__ink {
		transition: background-size .9s var(--olga-basics-ease);
	}

	.olga-basics-feature__term {
		transition: opacity .5s var(--olga-basics-ease), visibility 0s .5s;
	}

	.olga-basics-feature__term > span {
		transform: translateY(.6rem);
		transition: transform .5s var(--olga-basics-ease);
	}

	.olga-basics-feature__term.is-leaving > span {
		transform: translateY(-.6rem);
	}

	.olga-basics-feature__term.is-current {
		transition: opacity .8s var(--olga-basics-ease) .25s, visibility 0s;
	}

	.olga-basics-feature__term.is-current > span {
		transform: none;
		transition: transform .9s var(--olga-basics-ease) .25s;
	}

	.olga-basics-feature__term.is-current > .olga-basics-feature__definition {
		transition-delay: .36s;
	}

	.olga-basics-feature.is-turning .olga-basics-feature__pip.is-current::after {
		/* Longhands, so the pauses below keep their say over play state. */
		animation-name: olga-basics-pip;
		animation-duration: 5s;
		animation-timing-function: linear;
		animation-fill-mode: both;
	}

	.olga-basics-feature.is-off-screen .olga-basics-feature__pip::after,
	.olga-basics-feature__entry:focus-within .olga-basics-feature__pip::after {
		animation-play-state: paused;
	}

	@media (hover: hover) {
		.olga-basics-feature__entry:hover .olga-basics-feature__pip::after {
			animation-play-state: paused;
		}
	}
}

@keyframes olga-basics-pip {
	from {
		transform: scaleX(0);
	}

	to {
		transform: none;
	}
}

@container olga-basics (width <= 56rem) {
	.olga-basics-feature__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.olga-basics-feature__art {
		inline-size: 11rem;
	}

	.olga-basics-feature__asides {
		padding-block-start: 2rem;
		border-block-start: 1px solid rgb(18 17 15 / .22);
	}
}