/* ============================================================================
   Nutoast — 20th Anniversary page (tmpl-anniversary.php)
   Loaded only on that template. Uses the site's own tokens throughout; the one
   thing it adds is a milestone rail, because a 2006→2026 spine is not a
   component the site already had.
   ========================================================================= */

html:has(.nta) { scroll-behavior: smooth; }

.nta {
	--nta-gap: clamp(1rem, .6rem + 1.4vw, 1.6rem);
	--nta-rule: rgba(20, 22, 4, .10);
	overflow-x: clip;
}

/* Shared bits ------------------------------------------------------------- */
.nta-kicker {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--avocado);
}
.nta-num {
	display: block;
	margin-bottom: .7rem;
	font-family: var(--font-body);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--olive-soft);
}
.nta h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -.015em;
	color: var(--olive-ink);
}
.nta h2 em,
.nta-hero__h em { font-style: normal; color: var(--avocado); }
/* :where() so this base rule carries no specificity beyond .nta — as `.nta p`
   it scored (0,1,1) and silently outranked every (0,1,0) component rule that
   sets a paragraph colour, including the cream hero copy sitting on the dark
   scrim. The failure is invisible on light sections and severe on dark ones. */
.nta :where(p) { margin: 0 0 .85em; font-size: var(--fs-body); line-height: 1.62; color: var(--olive-soft); }
.nta :where(p):last-child { margin-bottom: 0; }
.nta-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--olive-deep); }

.nta-sec { padding: var(--section-y) 0; }
.nta-sec--people { background: var(--cream-2); }

/* Hero -------------------------------------------------------------------- */
.nta-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(30rem, 24rem + 26vw, 46rem);
	padding: clamp(3rem, 2rem + 6vw, 7rem) 0 clamp(2.4rem, 1.6rem + 4vw, 5rem);
	overflow: hidden;
	background: var(--olive-ink);
}
.nta-hero__media { position: absolute; inset: 0; z-index: 0; }
.nta-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Two scrims, not one: a top band dark enough for the masthead to sit on a
   bright sky, and a corner pool so the headline holds over the pale paving.
   Both have to sit ABOVE the photo and BELOW the type — as bare ::before /
   ::after they render as first and last child, which puts one under the image
   and the other over the words. Hence the explicit z-index ladder. */
.nta-hero::before,
.nta-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.nta-hero::before { background: linear-gradient(180deg, rgba(20,22,4,.62), rgba(20,22,4,.20) 38%, rgba(20,22,4,.86)); }
.nta-hero::after  { background: radial-gradient(72% 78% at 0% 76%, rgba(20,22,4,.90), rgba(20,22,4,.42) 55%, transparent 78%); }

.nta-hero__inner { position: relative; z-index: 2; }
.nta-hero .nta-kicker { color: var(--lime); }
.nta-hero__h {
	margin: .6rem 0 0;
	max-width: 15ch;
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 1.5rem + 5.4vw, 5.4rem);
	font-weight: 500;
	line-height: .98;
	letter-spacing: -.025em;
	color: var(--cream);
}
.nta-hero__h em { color: var(--lime); }
.nta-hero__p {
	max-width: 46ch;
	margin: clamp(1rem, .7rem + 1vw, 1.6rem) 0 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: rgba(254, 255, 247, .82);
}

/* Numbers ----------------------------------------------------------------- */
.nta-figs {
	padding: clamp(1.8rem, 1.2rem + 2.4vw, 3rem) 0;
	background: var(--avocado);
	color: var(--cream);
}
.nta-figs__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, .4rem + 2vw, 2.4rem);
}
.nta-fig { min-width: 0; }
.nta-figs .nt-stat__n {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--lime);
}
.nta-figs .nt-stat__n i { font-style: normal; font-size: .5em; }
.nta-fig__lbl {
	display: block;
	margin-top: .5rem;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--cream);
}
.nta-fig__sub {
	display: block;
	margin-top: .25rem;
	font-size: .76rem;
	line-height: 1.4;
	color: rgba(254, 255, 247, .66);
}

/* Section head ------------------------------------------------------------ */
.nta-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.4rem, .6rem + 3vw, 3.6rem);
	align-items: start;
	margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.6rem);
}
.nta-head .nta-num { grid-column: 1 / -1; margin-bottom: 0; }

/* Milestone rail ---------------------------------------------------------- */
.nta-mile {
	display: grid;
	/* Three across by default. Six only once a column can hold the copy at one
	   line of title and four of body — that needs ~185px, i.e. a ~1320px
	   viewport. At 1024 a six-up column is 144px and the whole row goes ragged. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--nta-gap) var(--nta-gap);
	row-gap: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1320px) {
	.nta-mile { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.nta-mile__i {
	position: relative;
	padding-top: 2.4rem;
	min-width: 0;
}
/* The spine: one rule across the row, with a node per milestone sitting on it. */
.nta-mile__i::before {
	content: "";
	position: absolute;
	left: 0;
	right: calc(var(--nta-gap) * -1);
	top: .72rem;
	height: 2px;
	background: var(--sand);
}
.nta-mile__i:last-child::before,
.nta-mile__i:nth-child(3n)::before { right: 0; }
@media (min-width: 1320px) {
	.nta-mile__i:nth-child(3n)::before { right: calc(var(--nta-gap) * -1); }
	.nta-mile__i:nth-child(6n)::before,
	.nta-mile__i:last-child::before { right: 0; }
}
.nta-mile__i::after {
	content: "";
	position: absolute;
	left: 0;
	top: .3rem;
	width: .86rem;
	height: .86rem;
	border-radius: 50%;
	background: var(--cream);
	box-shadow: inset 0 0 0 2px var(--nut-soft);
}
.nta-mile__i.is-now::after {
	background: var(--avocado);
	box-shadow: inset 0 0 0 2px var(--avocado), 0 0 0 5px rgba(231, 234, 107, .55);
}
.nta-mile__y {
	display: block;
	margin-bottom: .35rem;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--avocado);
}
.nta-mile__i.is-now .nta-mile__y { color: var(--olive-ink); }
.nta-mile__t {
	margin: 0 0 .35rem;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--olive-deep);
}
.nta-mile__p { font-size: .84rem; line-height: 1.5; }

/* People ------------------------------------------------------------------ */
.nta-people {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(1.6rem, .8rem + 3vw, 3.4rem);
	align-items: center;
}
.nta-pill {
	display: inline-block;
	margin-top: 1.2rem !important;
	padding: .6rem 1.1rem;
	border-radius: var(--r-pill);
	background: var(--cream);
	box-shadow: inset 0 0 0 1px var(--nta-rule);
	font-family: var(--font-display);
	font-size: .95rem;
	font-weight: 600;
	color: var(--olive-deep);
}
.nta-people__fig { margin: 0; }
.nta-people__fig img,
.nta-strip__i img,
.nta-mosaic__i img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-md);
}
.nta-people__fig img { box-shadow: var(--shadow-md); }

.nta-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--nta-gap);
	margin-top: clamp(1.4rem, .8rem + 2vw, 2.4rem);
}
.nta-strip__i { margin: 0; aspect-ratio: 4 / 3; }

/* Capability cards -------------------------------------------------------- */
.nta-caps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--nta-gap);
}
.nta-cap {
	display: flex;
	flex-direction: column;
	padding-bottom: 1.4rem;
	border-radius: var(--r-md);
	background: var(--cream);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.nta-cap__img { display: block; aspect-ratio: 16 / 10; background: var(--sand); }
.nta-cap__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nta-cap__k {
	display: block;
	margin: 1.1rem 1.3rem .5rem;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--avocado);
}
.nta-cap__t {
	margin: 0 1.3rem .45rem;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.2;
	color: var(--olive-ink);
}
.nta-cap__p { margin: 0 1.3rem !important; font-size: .9rem; }

/* Pull quote -------------------------------------------------------------- */
.nta-pull {
	padding: clamp(2.4rem, 1.6rem + 4vw, 5rem) 0;
	background: var(--olive-ink);
}
.nta-pull blockquote {
	position: relative;
	max-width: 22ch;
	margin: 0 auto;
	padding-top: 2.2rem;
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.02em;
	text-align: center;
	color: var(--cream);
}
/* A short lime rule instead of a quote glyph: this face draws U+201C close to
   a double prime, which read as a rendering fault at display size. */
.nta-pull blockquote::before {
	content: "";
	position: absolute;
	top: .4rem;
	left: 50%;
	transform: translateX(-50%);
	width: 3.2rem;
	height: 3px;
	border-radius: 3px;
	background: var(--lime);
	opacity: .85;
}

/* Celebration mosaic ------------------------------------------------------ */
.nta-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--nta-gap);
}
.nta-mosaic__i { margin: 0; aspect-ratio: 4 / 3; }

.nta-film {
	margin: clamp(1.4rem, .8rem + 2vw, 2.4rem) 0 0;
}
.nta-film video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-md);
	background: var(--olive-ink);
	box-shadow: var(--shadow-md);
}
.nta-film figcaption {
	margin-top: .7rem;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--olive-soft);
}

/* Next chapter ------------------------------------------------------------ */
.nta-sec--next { background: var(--cream-2); }
.nta-next {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(1.4rem, .6rem + 3vw, 3.6rem);
	align-items: start;
}
.nta-close {
	margin-top: 1.4rem !important;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.3;
	color: var(--olive-ink);
}
.nta-close span { color: var(--avocado); }

/* CTA --------------------------------------------------------------------- */
.nta-cta {
	padding: clamp(3rem, 2rem + 4vw, 5.4rem) 0;
	text-align: center;
	background:
		radial-gradient(80% 120% at 50% 0%, rgba(231, 234, 107, .16), transparent 62%),
		linear-gradient(160deg, #2c3a05, var(--olive-ink) 72%);
}
.nta-cta .nta-kicker { color: var(--lime); }
.nta-cta h2 { margin: .7rem 0 0; color: var(--cream); }
.nta-cta p {
	max-width: 60ch;
	margin: 1rem auto 0;
	color: rgba(254, 255, 247, .78);
}
.nta-cta__row {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	justify-content: center;
	margin-top: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
}
/* The ghost button is drawn for light grounds; on this panel it needs the
   cream edge or it disappears into the olive. */
.nta-cta .btn--ghost {
	color: var(--cream);
	box-shadow: inset 0 0 0 1.5px rgba(254, 255, 247, .42);
}
.nta-cta .btn--ghost:hover {
	background: rgba(254, 255, 247, .1);
	box-shadow: inset 0 0 0 1.5px var(--cream);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
	.nta-head,
	.nta-people,
	.nta-next { grid-template-columns: minmax(0, 1fr); }
	.nta-people__fig { order: -1; }
	.nta-caps { grid-template-columns: minmax(0, 1fr); }
	.nta-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* The rail turns vertical — the spine runs down the left instead of across. */
	.nta-mile { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.nta-mile__i { padding: 0 0 1.6rem 1.6rem; }
	.nta-mile__i:last-child { padding-bottom: 0; }
	.nta-mile__i::before {
		left: .39rem;
		right: auto;
		top: .5rem;
		bottom: 0;
		width: 2px;
		height: auto;
	}
	.nta-mile__i:last-child::before { bottom: auto; height: 0; }
	.nta-mile__i::after { top: .16rem; }
}

@media (max-width: 640px) {
	.nta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nta-strip__i:last-child { display: none; }
	.nta-hero { min-height: 32rem; }
	.nta-hero__media img { object-position: 50% 58%; }
}

@media (prefers-reduced-motion: reduce) {
	.nta [data-reveal] { opacity: 1; transform: none; }
}

/* Zoomable photos + lightbox -------------------------------------------------
   Every gallery photo is a real <button>, so it is reachable by keyboard and
   announces itself; the frame keeps the same radius as the plain <img> did. */
.nta-zoom {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--r-md);
	background: none;
	cursor: zoom-in;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}
.nta-zoom img { transition: transform .5s var(--ease-out); }
.nta-zoom:hover img { transform: scale(1.035); }
.nta-zoom:focus-visible { outline: 3px solid var(--avocado); outline-offset: 3px; }
.nta-people__fig .nta-zoom { box-shadow: var(--shadow-md); }
.nta-people__fig .nta-zoom img { box-shadow: none; }

.nta-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, .4rem + 2.4vw, 3.5rem);
	background: rgba(11, 13, 3, .93);
	animation: nta-lb-in .22s var(--ease-out);
}
.nta-lb[hidden] { display: none; }
@keyframes nta-lb-in { from { opacity: 0; } to { opacity: 1; } }

.nta-lb__fig {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9rem;
	max-width: min(100%, 1500px);
	margin: 0;
}
.nta-lb__fig img {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	border-radius: var(--r-sm);
	background: rgba(254, 255, 247, .05);
}
.nta-lb__fig figcaption {
	max-width: 68ch;
	font-size: .86rem;
	line-height: 1.5;
	text-align: center;
	color: rgba(254, 255, 247, .74);
}

.nta-lb__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(254, 255, 247, .1);
	color: var(--cream);
	cursor: pointer;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.nta-lb__btn:hover { background: rgba(254, 255, 247, .22); }
.nta-lb__btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.nta-lb__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nta-lb__x { top: clamp(.8rem, .4rem + 1.4vw, 1.8rem); right: clamp(.8rem, .4rem + 1.4vw, 1.8rem); }
.nta-lb__nav { top: 50%; transform: translateY(-50%); }
.nta-lb__nav:hover { transform: translateY(-50%) scale(1.06); }
.nta-lb__nav--prev { left: clamp(.5rem, .2rem + 1.2vw, 1.8rem); }
.nta-lb__nav--next { right: clamp(.5rem, .2rem + 1.2vw, 1.8rem); }

.nta-lb__count {
	position: absolute;
	left: 50%;
	bottom: clamp(.8rem, .4rem + 1.2vw, 1.6rem);
	transform: translateX(-50%);
	font-family: var(--font-body);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: rgba(254, 255, 247, .5);
}

@media (max-width: 640px) {
	.nta-lb__nav { top: auto; bottom: clamp(.8rem, .4rem + 1.2vw, 1.6rem); transform: none; }
	.nta-lb__nav:hover { transform: none; }
	.nta-lb__nav--prev { left: 22%; }
	.nta-lb__nav--next { right: 22%; }
	.nta-lb__count { bottom: calc(clamp(.8rem, .4rem + 1.2vw, 1.6rem) + 58px); }
	.nta-lb__fig img { max-height: 66vh; }
}

@media (prefers-reduced-motion: reduce) {
	.nta-lb { animation: none; }
	.nta-zoom img { transition: none; }
	.nta-zoom:hover img { transform: none; }
}

/* Paced milestone rail -------------------------------------------------------
   Only applied once the script confirms it is running (.is-paced), so with JS
   off or on mobile every milestone is simply visible. */
.nta-mile.is-paced .nta-mile__i {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.nta-mile.is-paced .nta-mile__i.is-in { opacity: 1; transform: none; }
/* The spine and node belong to the item, so they arrive with it — but the rule
   should not look broken while the later items are still waiting. */
.nta-mile.is-paced .nta-mile__i::before { opacity: .55; }
.nta-mile.is-paced .nta-mile__i.is-in::before { opacity: 1; transition: opacity .7s var(--ease-out); }

/* Levelled milestone text — the copy does the work; these only catch a stray
   short one so the row keeps a common baseline. Titles are all one line, so the
   guard is one line, not two: 2.5em was reserving a blank line under each. */
.nta-mile__t { min-height: 1.25em; }
.nta-mile__p { min-height: 6em; }

/* Figure icons — mobile only, where the 2-up cards have vertical room and the
   glyph helps you tell the four numbers apart at a glance. */
.nta-fig__ico { display: none; }
.nta-fig__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
	.nta-fig__ico {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		margin-bottom: .55rem;
		border-radius: 50%;
		background: rgba(231, 234, 107, .16);
		color: var(--lime);
	}
	.nta-fig__sub { min-height: 2.8em; }
	.nta-figs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.4rem; }
}



@media (max-width: 900px) {
	/* Mobile rail stays exactly as it was — vertical, no pacing, no min-heights. */
	.nta-mile__t,
	.nta-mile__p { min-height: 0; }
	.nta-mile .nta-mile__i { opacity: 1; transform: none; }
}

/* In-page section nav --------------------------------------------------------
   Same shape and offset as the site's existing .psel2-tabbar, so a returning
   visitor recognises it rather than meeting a new component. */
.nta-toc {
	position: fixed;
	left: 0; right: 0;
	top: calc(var(--tb-h, 0px) + 5.5rem);
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	justify-content: center;
	align-items: center;
	width: fit-content;
	max-width: calc(100% - 2rem);
	margin: 0 auto;
	padding: .4rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cream) 97%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 6px 18px rgba(20, 22, 4, .10), 0 20px 44px rgba(20, 22, 4, .08),
		inset 0 0 0 1px rgba(45, 50, 8, .09);
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.nta-toc.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nta-toc__t {
	padding: .5rem 1.05rem;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: .92rem;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	color: var(--olive);
	transition: background .25s var(--ease), color .25s var(--ease);
}
.nta-toc__t:hover { background: var(--cream-2); color: var(--olive-deep); }
.nta-toc__t.is-active { background: var(--avocado); color: var(--cream); }
.nta-toc__t:focus-visible { outline: 3px solid var(--avocado); outline-offset: 2px; }

/* Anchor jumps must clear the fixed masthead and the bar itself. */
.nta-sec[id] { scroll-margin-top: calc(var(--tb-h, 0px) + 9.5rem); }

@media (max-width: 900px) {
	.nta-toc {
		top: calc(var(--tb-h, 0px) + 4.4rem);
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		border-radius: 999px;
	}
	.nta-toc::-webkit-scrollbar { display: none; }
	.nta-toc__t { font-size: .86rem; padding: .45rem .85rem; }
	.nta-sec[id] { scroll-margin-top: calc(var(--tb-h, 0px) + 8rem); }
}

@media (prefers-reduced-motion: reduce) {
	.nta-toc { transition: none; }
	html { scroll-behavior: auto; }
}

/* Language switcher on the hero -----------------------------------------------
   .langbar is drawn for a cream ground; over the photo hero the inactive pill
   and the container's own background would both disappear. */
.nta-hero .langbar {
	/* flex, not inline-flex: the kicker is inline-block, so the switcher was
	   sharing its line instead of sitting under it. */
	display: flex;
	width: fit-content;
	margin: .9rem 0 0;
	background: rgba(20, 22, 4, .34);
	box-shadow: inset 0 0 0 1px rgba(254, 255, 247, .22);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.nta-hero .langbar__pill { color: rgba(254, 255, 247, .8); }
.nta-hero .langbar__pill:hover { color: var(--olive-ink); background: rgba(231, 234, 107, .85); }
.nta-hero .langbar__pill.is-active { background: var(--lime); color: var(--olive-ink); }
.nta-hero .langbar__pill:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }