:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
.site-header {
  padding-block: var(--space-m);
	padding-inline: var(--gutter);
	border-block-end: var(--border-dark);
}
.site-header__inner {
  flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s) var(--space-m);
}
.site-header__logo {
  --empty-element-size: 0;
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-inline-end: auto;
	color: var(--text-dark);
	text-decoration: none;
	@media (min-width: 64rem) {
		margin-inline-end: 0;
	}
}
.site-header__mark {
  inline-size: 0.875rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--primary);
}
.site-header__wordmark {
  font-family: var(--heading-font-family);
	font-size: var(--text-l);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
}
.site-nav {
  position: fixed;
	inset: 0;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: var(--space-m) var(--gutter) var(--space-xl);
	border: 0;
	background-color: var(--white);
	color: var(--text-dark);
	overflow-y: auto;
	&:not(:popover-open) {
		display: none;
		@media (min-width: 64rem) {
			display: block;
		}
	}
	&:popover-open {
		display: flex;
		flex-direction: column;
		gap: var(--space-xl);
	}
	@media (min-width: 64rem) {
		position: static;
		display: block;
		inline-size: auto;
		block-size: auto;
		padding: 0;
		background-color: transparent;
		overflow: visible;
	}
}
.site-nav__list {
  display: flex;
	flex-direction: column;
	gap: var(--space-s);
	@media (min-width: 64rem) {
		flex-direction: row;
		gap: var(--space-m);
	}
}
.site-nav__link {
  font-family: var(--heading-font-family);
	font-size: var(--h2);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--text-dark);
	text-decoration-color: transparent;
	&:hover,
	&[aria-current="page"] {
		text-decoration-color: var(--primary);
	}
	@media (min-width: 64rem) {
		font-family: inherit;
		font-size: var(--text-s);
		font-weight: 500;
		letter-spacing: normal;
		line-height: inherit;
		&[aria-current="page"] {
			font-weight: 700;
		}
	}
}
.site-main {
  counter-reset: section-number;
}
.site-footer {
  --eyebrow-color: var(--primary);
	--section-header-title-size: var(--h1);
	padding-block: var(--section-space-l) 0;
	padding-inline: var(--gutter);
	overflow: clip;
}
.texture-grain {
  position: relative;
	isolation: isolate;
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
		opacity: var(--grain-opacity, 0.18);
		pointer-events: none;
	}
}
.site-footer__inner {
  gap: var(--space-xl);
}
.eyebrow {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--eyebrow-color, var(--text-dark-muted));
}
.social-list {
  display: grid;
	border-block-start: var(--border-light);
	@media (min-width: 48rem) {
		grid-template-columns: var(--grid-3);
	}
}
.social-card {
  border-block-end: var(--border-light);
	@media (min-width: 48rem) {
		border-block-end: 0;
		border-inline-end: var(--border-light);
		&:last-child {
			border-inline-end: 0;
		}
	}
}
.social-card__link {
  display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding-block: var(--space-m);
	color: var(--text-light);
	text-decoration: none;
	@media (min-width: 48rem) {
		padding-inline: var(--space-m);
	}
	&:hover {
		color: var(--primary);
	}
}
.social-card__body {
  display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}
.social-card__name {
  font-family: var(--heading-font-family);
	font-size: var(--h4);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.social-card__handle {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	color: var(--base-semi-light);
}
.social-card__icon {
  font-size: var(--text-xl);
}
.site-footer__bar {
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-m);
	font-size: var(--text-s);
	color: var(--base-semi-light);
}
.site-footer__copyright {
  display: flex;
	align-items: center;
	gap: 0.6em;
	&::before {
		content: "";
		inline-size: 0.625rem;
		aspect-ratio: 1;
		border-radius: 50%;
		background-color: var(--primary);
	}
}
.site-footer__top-link {
  color: inherit;
	text-decoration: none;
	&:hover {
		color: var(--text-light);
	}
}
.site-footer__wordmark {
  block-size: 0.57em;
	overflow: clip;
	font-family: var(--heading-font-family);
	font-size: clamp(6rem, 26vw, 23rem);
	font-weight: 900;
	letter-spacing: -0.065em;
	line-height: 0.8;
	text-align: center;
	white-space: nowrap;
	color: var(--primary);
	user-select: none;
}
.arrow-link {
  font-size: var(--text-s);
	font-weight: 600;
	text-underline-offset: 0.4em;
}
.ghost-numeral {
  --empty-element-size: 0;
	position: absolute;
	inset-block-start: var(--space-xl);
	inset-inline-end: var(--space-xl);
	z-index: -1;
	font-family: var(--heading-font-family);
	font-size: clamp(10rem, 30vw, 27.5rem);
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 0.8;
	color: currentColor;
	opacity: 0.045;
	pointer-events: none;
	user-select: none;
	&::before {
		content: var(--section-numeral, none);
	}
	&[data-position="bottom-start"] {
		inset-block-start: auto;
		inset-block-end: calc(var(--space-xl) * -1);
		inset-inline-start: var(--space-xl);
		inset-inline-end: auto;
	}
}
.texture-halftone {
  position: relative;
	isolation: isolate;
	&::after {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		z-index: -1;
		inline-size: min(32.5rem, 70%);
		block-size: 26.25rem;
		background-image: radial-gradient(circle, currentColor 0 3px, transparent 3.5px);
		background-size: 14px 14px;
		mask-image: radial-gradient(circle at 100% 0, black, transparent 100%);
		opacity: 0.22;
		pointer-events: none;
	}
}
.timeline-ruler {
  position: relative;
	block-size: 3.75rem;
	margin-block-start: var(--space-l);
	background-image:
		repeating-linear-gradient(to right, var(--text-dark) 0 1.5px, transparent 1.5px calc(100% / 24)),
		repeating-linear-gradient(to right, var(--base-light) 0 1px, transparent 1px calc(100% / 96));
	background-size: 100% 1.125rem, 100% 0.5rem;
	background-position: left bottom, left bottom;
	background-repeat: no-repeat;
}
.timeline-ruler__year {
  position: absolute;
	inset-block: 0;
	inset-inline-start: calc(var(--year) * 100% / 24);
	translate: -50% 0;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	line-height: 1;
	color: var(--text-dark-muted);
	&::after {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline-start: 50%;
		inline-size: 2px;
		block-size: 2.125rem;
		translate: -50% 0;
		background-color: var(--text-dark);
	}
	&[data-variant="start"] {
		translate: 0 0;
		&::after {
			inset-inline-start: 0;
			translate: 0 0;
		}
	}
	&[data-variant="end"] {
		translate: -100% 0;
		&::after {
			inset-inline-start: auto;
			inset-inline-end: 0;
			translate: 0 0;
		}
	}
	&[data-variant="minor"] {
		display: none;
		@media (min-width: 48rem) {
			display: block;
		}
	}
}
.milestone-list {
  position: relative;
	block-size: 5.25rem;
}
.milestone-list__item {
  position: absolute;
	inset-block-start: calc(var(--level) * 1.625rem);
	inset-inline-start: calc(var(--year) * 100% / 24);
	padding-inline-start: 0.6875rem;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--primary);
	&::before {
		content: "";
		position: absolute;
		inset-block-start: calc(var(--level) * -1.625rem);
		inset-inline-start: -1px;
		inline-size: 2px;
		block-size: calc(0.875rem + var(--level) * 1.625rem);
		background-color: var(--primary);
	}
	&[data-variant="start"] {
		padding-inline-start: 0;
		font-weight: 400;
		color: var(--base-semi-light);
		&::before {
			content: none;
		}
	}
	&[data-variant="end"] {
		translate: -100% 0;
		padding-inline: 0 0.6875rem;
		&::before {
			inset-inline-start: auto;
			inset-inline-end: -1px;
		}
	}
}
.section-header {
  display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--content-gap) var(--space-xl);
}
.section-header__content {
  display: flex;
	flex-direction: column;
	gap: var(--space-s);
}
.section-header__title {
  max-inline-size: 16ch;
	font-size: var(--section-header-title-size, var(--h2));
	line-height: 0.95;
}
.section-header__aside {
  display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-m);
	max-inline-size: 40ch;
}
.product-list {
  border-block-start: var(--border-light);
}
.product-row {
  display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "year link" "name link" "text link";
	align-items: center;
	gap: var(--space-xs) var(--space-m);
	padding-block: var(--space-l);
	border-block-end: var(--border-light);
	@media (min-width: 64rem) {
		grid-template-columns: 6rem minmax(0, 5fr) minmax(0, 4fr) auto;
		grid-template-areas: "year name text link";
		gap: var(--space-m);
	}
}
.product-row__year {
  grid-area: year;
	font-family: var(--accent-font);
	font-size: var(--text-s);
	letter-spacing: 0.08em;
	color: var(--base-semi-light);
}
.product-row__name {
  grid-area: name;
	font-size: var(--h2);
	font-weight: 800;
	line-height: 1;
}
.product-row__text {
  grid-area: text;
	color: var(--text-light-muted);
}
.product-row__link {
  grid-area: link;
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	aspect-ratio: 1;
	border: 1.5px solid var(--base-semi-dark);
	border-radius: 50%;
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--text-light);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
	&:hover,
	&[data-style="filled"] {
		border-color: var(--primary);
		background-color: var(--primary);
		color: var(--text-dark);
	}
}
.post-list {
  border-block-start: 2px solid var(--text-dark);
}
.post-row {
  position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "category arrow" "title arrow";
	&:has(.post-row__date) {
		grid-template-areas: "date arrow" "category arrow" "title arrow";
		@media (min-width: 48rem) {
			grid-template-columns: 4.5rem 8.75rem minmax(0, 1fr) auto;
			grid-template-areas: "date category title arrow";
		}
	}
	align-items: start;
	gap: var(--space-xs) var(--space-m);
	padding-block: var(--space-m);
	border-block-end: var(--border-dark);
	@media (min-width: 48rem) {
		grid-template-columns: 8.75rem minmax(0, 1fr) auto;
		grid-template-areas: "category title arrow";
	}
}
.post-row__category {
  grid-area: category;
	padding-block-start: 0.4em;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.post-row__title {
  grid-area: title;
	font-size: var(--text-xxl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.post-row__link {
  color: inherit;
	text-decoration-color: transparent;
	&::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	&:hover {
		text-decoration-color: var(--primary);
	}
}
.post-row__arrow {
  grid-area: arrow;
	font-size: var(--text-xl);
	color: var(--text-dark);
}
.appearance-list {
  display: grid;
	border-block-start: 2px solid var(--text-dark);
	@media (min-width: 64rem) {
		grid-template-columns: var(--grid-4);
	}
}
.appearance-card {
  display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-l);
	padding-block: var(--space-m);
	border-block-end: var(--border-dark);
	@media (min-width: 64rem) {
		min-block-size: 14.75rem;
		padding-block-end: 0;
		padding-inline: var(--space-m);
		border-block-end: 0;
		border-inline-end: var(--border-dark);
		&:first-child {
			padding-inline-start: 0;
		}
		&:last-child {
			padding-inline-end: 0;
			border-inline-end: 0;
		}
	}
}
.appearance-card__top {
  display: flex;
	flex-direction: column;
	gap: var(--space-s);
}
.appearance-card__type {
  display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-dark);
}
.appearance-card__icon {
  --empty-element-size: 0;
	flex-shrink: 0;
	inline-size: 0.75rem;
	block-size: 0.75rem;
}
.appearance-card__title {
  font-size: var(--h4);
	font-weight: 700;
	line-height: 1.25;
}
.appearance-card__meta {
  display: flex;
	flex-direction: column;
	gap: 0.25em;
}
.appearance-card__show {
  font-size: var(--text-s);
	font-weight: 600;
	color: var(--text-dark);
}
.appearance-card__date {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
}
.tool-list {
  display: grid;
	gap: var(--space-l) var(--space-m);
	@media (min-width: 48rem) {
		grid-template-columns: var(--grid-3);
	}
}
.tool-card {
  display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding-block-start: var(--space-m);
	border-block-start: 2px solid var(--text-dark);
}
.tool-card__category {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.tool-card__name {
  font-size: var(--h3);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.tool-card__text {
  font-size: var(--text-s);
}
.testimonial-stack {
  position: relative;
	isolation: isolate;
	margin-block-end: var(--space-m);
	&::before,
	&::after {
		content: "";
		position: absolute;
		z-index: -1;
		border: 2px solid var(--text-dark);
		transform-origin: 0 0;
	}
	&::before {
		inset: 1.375rem -0.375rem -1.625rem 1.125rem;
		background-color: var(--bg-light);
		rotate: 1.6deg;
	}
	&::after {
		inset: 0.625rem 0.375rem -0.75rem 0.25rem;
		background-color: var(--white);
		rotate: -1.1deg;
	}
}
.testimonial-card {
  display: flex;
	flex-direction: column;
	gap: var(--space-s);
	break-inside: avoid;
	&[data-variant="featured"] {
		padding: var(--space-xl);
		border: 2px solid var(--text-dark);
		background-color: var(--white);
		box-shadow: 0.5rem 0.5rem 0 var(--text-dark);
	}
	&[data-variant="highlight"] {
		padding: var(--space-l);
		border: 2px solid var(--text-dark);
		background-color: var(--primary);
		box-shadow: 0.375rem 0.375rem 0 var(--text-dark);
		rotate: -1.5deg;
	}
	&[data-variant="muted"] {
		padding: var(--space-l);
		background-color: var(--bg-light);
	}
	&[data-variant="pinned"] {
		--testimonial-text: var(--text-light);
		padding: var(--space-l);
		background-color: var(--text-dark);
	}
	.testimonial-wall & {
		margin-block-end: var(--space-l);
	}
	.testimonial-wall &:is([data-variant="plain"], [data-variant=""]) {
		padding-block-start: var(--space-m);
		border-block-start: 2px solid var(--text-dark);
	}
	.testimonial-list & {
		@media (min-width: 64rem) {
			padding-inline: var(--space-m);
			border-inline-start: var(--border-dark);
			&:first-child {
				padding-inline-start: 0;
				border-inline-start: 0;
			}
		}
	}
}
.testimonial-card__quote {
  font-family: var(--heading-font-family);
	font-size: var(--text-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--testimonial-text, var(--text-dark));
	.testimonial-card[data-variant="featured"] & {
		font-size: var(--h2);
		letter-spacing: -0.03em;
		line-height: 1.1;
		text-wrap: balance;
	}
}
.testimonial-card__caption {
  display: flex;
	align-items: center;
	gap: var(--space-s);
	.testimonial-card[data-variant="featured"] & {
		padding-block-start: var(--space-m);
		border-block-start: 2px solid var(--text-dark);
	}
}
.testimonial-card__initials {
  display: grid;
	place-items: center;
	flex-shrink: 0;
	inline-size: 3.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--text-dark);
	font-family: var(--heading-font-family);
	font-size: var(--text-l);
	font-weight: 800;
	color: var(--primary);
}
.testimonial-card__name {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	font-style: normal;
	color: var(--testimonial-text, var(--text-dark));
	.testimonial-card[data-variant="featured"] & {
		font-family: var(--text-font-family);
		font-size: var(--text-l);
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
	}
}
.numbered-section {
  --section-numeral: counter(section-number, decimal-leading-zero);
	--section-prefix: counter(section-number, decimal-leading-zero) " — ";
	counter-increment: section-number;
}
.section-header__eyebrow {
  &::before {
		content: var(--section-prefix, none);
	}
}
.testimonial-card__figure {
  display: flex;
	flex-direction: column;
	gap: var(--space-s);
	.testimonial-card[data-variant="featured"] & {
		gap: var(--space-xl);
	}
}
.testimonial-card__headshot {
  flex-shrink: 0;
	inline-size: 2.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	.testimonial-card[data-variant="featured"] & {
		inline-size: 3.5rem;
	}
}
.hero {
  padding-block-end: 0;
}
.hero__inner {
  gap: var(--space-l);
}
.hero__title {
  display: flex;
	align-items: flex-end;
	gap: 0.06em;
	line-height: 0.86;
}
.hero__dot {
  flex-shrink: 0;
	inline-size: 0.2em;
	aspect-ratio: 1;
	margin-block-end: 0.25em;
	border-radius: 50%;
	background-color: var(--primary);
}
.hero__intro {
  display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-l);
	padding-block-start: var(--space-l);
	border-block-start: 2px solid var(--text-dark);
}
.hero__lead {
  max-inline-size: 44ch;
	font-size: var(--text-xxl);
	letter-spacing: -0.01em;
	line-height: 1.36;
	color: var(--text-dark);
}
.hero__byline {
  display: flex;
	align-items: center;
	gap: var(--space-s);
}
.hero__avatar {
  inline-size: 4rem;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}
.hero__byline-text {
  display: flex;
	flex-direction: column;
	gap: 0.25em;
	font-size: var(--text-s);
}
.hero__role {
  font-weight: 600;
	color: var(--text-dark);
}
.products {
  --eyebrow-color: var(--primary);
	position: relative;
	gap: var(--container-gap);
	padding-block-start: 0;
	overflow: clip;
}
.products__milestones {
  display: none;
	@media (min-width: 64rem) {
		display: flex;
	}
}
.products__inner {
  gap: var(--space-xl);
}
.latest-posts {
  position: relative;
	isolation: isolate;
	overflow: clip;
}
.latest-posts__inner {
  display: grid;
	gap: var(--space-xl);
	@media (min-width: 64rem) {
		grid-template-columns: var(--grid-1-2);
	}
}
.appearances {
  position: relative;
	isolation: isolate;
	overflow: clip;
}
.appearances__inner {
  gap: var(--space-xl);
}
.toolbox {
  position: relative;
	isolation: isolate;
	overflow: clip;
}
.toolbox__inner {
  display: grid;
	gap: var(--space-xl);
	@media (min-width: 64rem) {
		grid-template-columns: var(--grid-1-2);
	}
}
.testimonial-feature {
  --eyebrow-color: var(--text-dark);
	background-color: var(--primary);
	color: var(--text-dark);
}
.testimonial-feature__inner {
  gap: var(--space-xl);
}
.section-header__meta {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	opacity: 0.7;
}
.post-row__date {
  grid-area: date;
	padding-block-start: 0.4em;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.testimonial-card__badge {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--primary);
}
.tool-row {
  position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name link" "text link" "badge link";
	align-items: center;
	gap: var(--space-xs) var(--space-m);
	padding-block: var(--space-m);
	border-block-end: var(--border-dark);
	@media (min-width: 64rem) {
		grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 7.5rem 2rem;
		grid-template-areas: "name text badge link";
	}
}
.tool-row__name {
  grid-area: name;
	font-size: var(--h3);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.tool-row__text {
  grid-area: text;
	max-inline-size: 56ch;
	font-size: var(--text-s);
}
.tool-row__badge {
  grid-area: badge;
	justify-self: start;
	padding: 0.35em 0.6em;
	background-color: var(--primary);
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-dark);
}
.tool-row__link {
  grid-area: link;
	justify-self: end;
	font-size: var(--text-l);
	color: var(--text-dark);
	text-decoration: none;
	&::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	&:hover {
		color: var(--base-semi-dark);
	}
}
.spotlight-card {
  position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	min-block-size: 15rem;
	padding: var(--space-l);
	box-shadow: 0.5rem 0.5rem 0 var(--spotlight-shadow, var(--text-dark));
	&[data-theme="dark"] {
		--heading-color: var(--text-light);
		--spotlight-shadow: var(--primary);
		--spotlight-label: var(--primary);
		background-color: var(--bg-dark);
		color: var(--text-light-muted);
	}
	&[data-theme="primary"] {
		background-color: var(--primary);
		color: var(--text-dark);
	}
}
.spotlight-card__label {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--spotlight-label, inherit);
}
.spotlight-card__name {
  font-size: var(--h3);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.spotlight-card__text {
  max-inline-size: 48ch;
	font-size: var(--text-s);
}
.spotlight-card__link {
  display: flex;
	justify-content: space-between;
	gap: var(--space-s);
	margin-block-start: auto;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	&::after {
		content: "";
		position: absolute;
		inset: 0;
	}
}
.featured-post {
  --heading-color: var(--text-light);
	display: grid;
	align-items: center;
	gap: var(--space-l);
	padding: var(--space-xl);
	background-color: var(--bg-dark);
	box-shadow: 0.75rem 0.75rem 0 var(--primary);
	color: var(--text-light-muted);
	@media (min-width: 64rem) {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}
.featured-post__main {
  display: flex;
	flex-direction: column;
	gap: var(--space-m);
}
.featured-post__meta {
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}
.featured-post__badge {
  padding: 0.35em 0.6em;
	background-color: var(--primary);
	font-weight: 700;
	color: var(--text-dark);
}
.featured-post__title {
  font-size: var(--h2);
	letter-spacing: -0.03em;
	line-height: 1;
}
.featured-post__aside {
  display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-m);
}
.featured-post__excerpt {
  max-inline-size: 40ch;
	line-height: 1.6;
}
.featured-post__button {
  align-self: flex-start;
}
.archive-group {
  display: grid;
	inline-size: 100%;
	gap: var(--space-m);
	&[data-layout="aside"] {
		@media (min-width: 64rem) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		}
	}
	&[data-layout="stacked"] {
		gap: 0;
	}
}
.archive-group__header {
  display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	.archive-group[data-layout="stacked"] & {
		flex-direction: row;
		align-items: baseline;
		gap: var(--space-s);
		padding-block-end: var(--space-xs);
		border-block-end: 1px solid var(--primary);
	}
}
.archive-group__year {
  font-size: var(--h2);
	letter-spacing: -0.03em;
	line-height: 1;
	.archive-group[data-layout="stacked"] & {
		font-size: var(--h3);
		color: var(--primary);
	}
}
.archive-group__count {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	opacity: 0.7;
}
.archive-group__body {
  min-inline-size: 0;
}
.appearance-row {
  position: relative;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto 2rem;
	grid-template-areas: "number title date link";
	align-items: center;
	gap: var(--space-xs) var(--space-m);
	min-block-size: 4rem;
	padding-block: var(--space-s);
	border-block-end: 1px solid color-mix(in oklch, currentColor 18%, transparent);
	@media (min-width: 48rem) {
		grid-template-columns: 2.5rem minmax(0, 1fr) 11.25rem 4.5rem 2rem;
		grid-template-areas: "number title show date link";
	}
}
.appearance-row__number {
  grid-area: number;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	color: var(--base-semi-light);
}
.appearance-row__title {
  grid-area: title;
	font-size: var(--text-l);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.appearance-row__show {
  grid-area: show;
	display: none;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	@media (min-width: 48rem) {
		display: block;
	}
}
.appearance-row__date {
  grid-area: date;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: end;
}
.appearance-row__link {
  grid-area: link;
	display: grid;
	place-items: center;
	inline-size: 2rem;
	aspect-ratio: 1;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-size: var(--text-s);
	color: var(--text-light);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
	&::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	&:hover {
		border-color: var(--primary);
		background-color: var(--primary);
		color: var(--text-dark);
	}
}
.appearance-feature {
  display: grid;
	align-items: center;
	gap: var(--space-xl);
	@media (min-width: 64rem) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.appearance-feature__media {
  position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border: 2px solid var(--text-light-muted);
	background-color: var(--base-ultra-dark);
	box-shadow: 0.625rem 0.625rem 0 var(--primary);
	overflow: clip;
}
.appearance-feature__image {
  position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.appearance-feature__placeholder {
  position: absolute;
	inset-block-start: var(--space-s);
	inset-inline-start: var(--space-s);
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--base-semi-light);
}
.appearance-feature__play {
  position: relative;
	display: grid;
	place-items: center;
	inline-size: 4.5rem;
	aspect-ratio: 1;
	padding-inline-start: 0.25rem;
	border-radius: 50%;
	background-color: var(--primary);
	color: var(--text-dark);
	& svg {
		inline-size: 1.375rem;
	}
}
.appearance-feature__content {
  display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-s);
}
.appearance-feature__meta {
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}
.appearance-feature__badge {
  padding: 0.35em 0.6em;
	background-color: var(--primary);
	font-weight: 700;
	color: var(--text-dark);
}
.appearance-feature__show {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--primary);
}
.appearance-feature__title {
  font-size: var(--h2);
	letter-spacing: -0.03em;
	line-height: 1;
}
.appearance-feature__button {
  margin-block-start: var(--space-s);
}
.cta-band {
  --eyebrow-color: var(--text-dark);
	padding-block: var(--space-xl);
	background-color: var(--primary);
	color: var(--text-dark);
}
.cta-band__inner {
  flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
}
.cta-band__content {
  display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}
.cta-band__title {
  font-size: var(--h2);
	letter-spacing: -0.03em;
	line-height: 1;
}
.cta-band__button {
  box-shadow: 0.375rem 0.375rem 0 var(--white);
}
.photo-frame {
  display: flex;
	flex-direction: column;
	gap: var(--space-s);
	max-inline-size: 26.25rem;
	padding: var(--space-s);
	border: 2px solid var(--text-dark);
	background-color: var(--white);
	box-shadow: 1rem 1rem 0 var(--primary);
}
.photo-frame__image {
  inline-size: 100%;
	aspect-ratio: 9 / 10;
	object-fit: cover;
}
.photo-frame__caption {
  display: flex;
	justify-content: space-between;
	gap: var(--space-s);
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--text-dark);
}
.pillar-row {
  display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--space-xs) var(--space-m);
	padding-block: var(--space-m);
	border-block-end: var(--border-dark);
	counter-increment: pillar;
	&::before {
		content: counter(pillar, decimal-leading-zero);
		grid-row: span 2;
		font-family: var(--accent-font);
		font-size: var(--text-xs);
		color: var(--text-dark-muted);
	}
	@media (min-width: 48rem) {
		grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.6fr);
		&::before {
			grid-row: auto;
		}
	}
}
.pillar-row__title {
  font-size: var(--h4);
	font-weight: 700;
}
.pillar-row__text {
  font-size: var(--text-s);
}
.history-row {
  display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "year age" "title title" "text text";
	align-items: baseline;
	gap: var(--space-xs) var(--space-m);
	padding-block: var(--space-m);
	border-block-end: var(--border-light);
	&[data-highlight="yes"] {
		--history-accent: var(--primary);
	}
	@media (min-width: 64rem) {
		grid-template-columns: 11.25rem 7.5rem minmax(0, 1fr) minmax(0, 1.3fr);
		grid-template-areas: "year age title text";
	}
}
.history-row__year {
  grid-area: year;
	font-family: var(--heading-font-family);
	font-size: var(--h3);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--history-accent, var(--text-light));
}
.history-row__age {
  grid-area: age;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--history-accent, var(--base-semi-light));
}
.history-row__title {
  grid-area: title;
	font-size: var(--text-xl);
	font-weight: 700;
}
.history-row__text {
  grid-area: text;
	font-size: var(--text-s);
}
.quote-feature {
  &[data-theme="primary"] {
		--eyebrow-color: var(--text-dark);
		background-color: var(--primary);
		color: var(--text-dark);
	}
	&[data-theme="dark"] {
		--eyebrow-color: var(--base-semi-light);
		--quote-color: var(--text-light);
		background-color: var(--bg-dark);
		color: var(--text-light-muted);
	}
}
.quote-feature__inner {
  gap: var(--space-l);
}
.quote-feature__quote {
  max-inline-size: 18ch;
	font-family: var(--heading-font-family);
	font-size: calc(var(--h1) * 0.6);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 0.95;
	text-wrap: balance;
	color: var(--quote-color, var(--text-dark));
}
.quote-feature__highlight {
  color: var(--primary);
}
.quote-feature__footer {
  display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-m);
	padding-block-start: var(--space-m);
	border-block-start: 1px solid color-mix(in oklch, currentColor 18%, transparent);
}
.quote-feature__text {
  max-inline-size: 52ch;
}
.quote-feature__cite {
  font-style: normal;
	&[data-style="signature"] {
		margin-inline-start: auto;
		font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
		letter-spacing: 0.14em;
	}
	&[data-style="name"] {
		display: flex;
		align-items: center;
		gap: 0.6em;
		font-size: var(--text-l);
		font-weight: 700;
		color: var(--quote-color, var(--text-dark));
		&::before {
			content: "";
			inline-size: 0.5em;
			aspect-ratio: 1;
			border-radius: 50%;
			background-color: var(--primary);
		}
	}
}
.quote-feature__meta {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	opacity: 0.7;
}
.page-hero__inner {
  gap: var(--space-l);
}
.page-hero__title {
  display: flex;
	align-items: flex-end;
	gap: 0.06em;
	font-size: min(var(--h1), 12.5vw);
	line-height: 0.86;
}
.page-hero__dot {
  flex-shrink: 0;
	inline-size: 0.2em;
	aspect-ratio: 1;
	margin-block-end: 0.12em;
	border-radius: 50%;
	background-color: var(--primary);
}
.page-hero__intro {
  display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-l);
	padding-block-start: var(--space-l);
	border-block-start: 2px solid var(--text-dark);
}
.page-hero__lead {
  max-inline-size: 48ch;
	font-size: var(--text-l);
	line-height: 1.5;
	color: var(--text-dark);
}
.page-hero__aside {
  display: flex;
	justify-content: flex-end;
}
.product-feature {
  --grain-opacity: 0;
	position: relative;
	isolation: isolate;
	&[data-theme="dark"] {
		--grain-opacity: 0.18;
		--heading-color: var(--text-light);
		--eyebrow-color: var(--primary);
		--frame-shadow: var(--primary);
		background-color: var(--bg-dark);
		color: var(--text-light-muted);
	}
	&[data-theme="alt"] {
		--frame-shadow: var(--base-light);
		background-color: var(--bg-light);
	}
	&[data-theme="primary"] {
		--eyebrow-color: var(--text-dark);
		background-color: var(--primary);
		color: var(--text-dark);
	}
}
.product-feature__inner {
  display: grid;
	align-items: center;
	gap: var(--space-xl);
	@media (min-width: 64rem) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.product-feature__content {
  display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-m);
}
.product-feature__text {
  max-inline-size: 52ch;
	line-height: 1.6;
}
.fact-list {
  inline-size: 100%;
	max-inline-size: 52ch;
	border-block-start: 1px solid color-mix(in oklch, currentColor 18%, transparent);
}
.fact-list__item {
  display: flex;
	justify-content: space-between;
	gap: var(--space-m);
	padding-block: var(--space-xs);
	border-block-end: 1px solid color-mix(in oklch, currentColor 18%, transparent);
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}
.fact-list__label {
  opacity: 0.7;
}
.fact-list__value {
  margin: 0;
	color: var(--heading-color);
}
.product-feature__button {
  .product-feature[data-theme="dark"] & {
		border-color: var(--primary);
		background-color: var(--primary);
		color: var(--text-dark);
	}
}
.browser-frame {
  display: flex;
	flex-direction: column;
	border: 2px solid var(--text-dark);
	background-color: var(--white);
	box-shadow: 0.625rem 0.625rem 0 var(--frame-shadow, var(--text-dark));
}
.product-feature__media {
  .product-feature[data-layout="media-start"] & {
		@media (min-width: 64rem) {
			order: -1;
		}
	}
}
.browser-frame__bar {
  display: flex;
	align-items: center;
	gap: var(--space-s);
	padding: var(--space-xs) var(--space-s);
	border-block-end: 2px solid var(--text-dark);
	background-color: var(--bg-light);
}
.browser-frame__dots {
  --empty-element-size: 0;
	inline-size: 2.75rem;
	block-size: 0.625rem;
	background: radial-gradient(circle, transparent 0 3px, var(--text-dark) 3.5px 5px, transparent 5.5px) 0 0 / 0.9375rem 100% repeat-x;
}
.browser-frame__address {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	color: var(--base-semi-dark);
}
.browser-frame__screen {
  display: grid;
	place-items: center;
	min-block-size: 22.5rem;
	background-color: color-mix(in oklch, var(--base) 10%, var(--white));
}
.browser-frame__image {
  display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
	object-position: top;
}
.browser-frame__placeholder {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--base-semi-dark);
}
.tool-category {
  position: relative;
	isolation: isolate;
	overflow: clip;
}
.tool-category__inner {
  gap: var(--space-l);
}
.tool-index {
  border-block-start: 2px solid var(--text-dark);
}
.meta-list {
  display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-m);
	counter-reset: meta-item;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--text-dark-muted);
}
.meta-list__item {
  counter-increment: meta-item;
	.meta-list--numbered &::before {
		content: counter(meta-item, decimal-leading-zero) " ";
	}
}
.post-feature {
  padding-block: 0;
}
.post-archive__inner {
  gap: var(--space-xxl);
}
.appearance-archive {
  --heading-color: var(--text-light);
	color: var(--text-light-muted);
}
.appearance-archive__inner {
  gap: var(--space-xxl);
}
.appearance-index {
  display: grid;
}
.spotlight-list {
  display: grid;
	gap: var(--space-l);
	@media (min-width: 48rem) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.mission__inner {
  display: grid;
	align-items: start;
	gap: var(--space-xl);
	@media (min-width: 64rem) {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}
}
.mission__content {
  display: flex;
	flex-direction: column;
	gap: var(--space-l);
}
.pillar-list {
  counter-reset: pillar;
	border-block-start: 2px solid var(--text-dark);
}
.history {
  --eyebrow-color: var(--base-semi-light);
	--heading-color: var(--text-light);
}
.history__inner {
  gap: var(--space-xl);
}
.history-list {
  border-block-start: var(--border-light);
}
.kind-words__inner {
  gap: var(--space-l);
}
.testimonial-list {
  display: grid;
	gap: var(--space-l);
	padding-block-start: var(--space-l);
	border-block-start: 2px solid var(--text-dark);
	@media (min-width: 64rem) {
		grid-template-columns: var(--grid-3);
		gap: 0;
	}
}
.reviews__inner {
  gap: var(--space-l);
}
.testimonial-wall {
  columns: 1;
	column-gap: var(--space-l);
	@media (min-width: 48rem) {
		columns: 2;
	}
	@media (min-width: 64rem) {
		columns: 3;
	}
}
.contact {
  padding-block-start: 0;
}
.form {
  container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	inline-size: 100%;
	max-inline-size: var(--width-70);
}
.form__fields {
  display: grid;
	grid-template-columns: [full-start] minmax(0, 1fr) [full-end];
	gap: var(--space-m);
	@container (min-width: 35rem) {
		grid-template-columns: [full-start] repeat(6, minmax(0, 1fr)) [full-end];
	}
}
.form__trap {
  --empty-element-size: 0;
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.form__footer {
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s) var(--space-m);
}
.form__submit {
  &:disabled {
		opacity: 0.6;
		cursor: progress;
	}
}
.form__status {
  font-size: var(--text-s);
	font-weight: 600;
	color: var(--text-dark);
	&:empty {
		display: none;
	}
	&[data-state="success"] {
		color: var(--success, var(--text-dark));
	}
	&[data-state="error"] {
		color: var(--danger, var(--text-dark));
	}
}
.form-section {
  grid-column: full;
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	min-inline-size: 0;
	margin: 0;
	padding: var(--space-m) 0 0;
	border: 0;
	border-block-start: 2px solid var(--text-dark);
}
.form-section__legend {
  float: inline-start;
	inline-size: 100%;
	padding: 0;
	font-family: var(--heading-font-family);
	font-size: var(--h4);
	font-weight: 800;
	line-height: 1.2;
	color: var(--text-dark);
}
.form-section__help {
  font-size: var(--text-s);
	color: var(--text-dark-muted);
}
.form-section__fields {
  display: grid;
	grid-template-columns: [full-start] minmax(0, 1fr) [full-end];
	gap: var(--space-m);
	@container (min-width: 35rem) {
		grid-template-columns: [full-start] repeat(6, minmax(0, 1fr)) [full-end];
	}
}
.form-field {
  display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	grid-column: full;
	@container (min-width: 35rem) {
		&[data-width="half"] {
			grid-column: span 3;
		}
		&[data-width="third"] {
			grid-column: span 2;
		}
		&[data-width="two-thirds"] {
			grid-column: span 4;
		}
	}
}
.form-field__label {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--text-dark-muted);
}
.form-field__control {
  inline-size: 100%;
	padding: var(--space-s);
	border: 2px solid var(--text-dark);
	border-radius: var(--radius);
	background-color: var(--white);
	color: var(--text-dark);
	font: inherit;
	font-size: var(--text-m);
	&:is(textarea) {
		min-block-size: 11.25rem;
		resize: vertical;
	}
	&:focus-visible {
		outline: 3px solid var(--primary);
		outline-offset: 2px;
	}
	&[aria-invalid="true"] {
		border-color: var(--danger, currentColor);
	}
}
.form-field__help {
  font-size: var(--text-s);
	color: var(--text-dark-muted);
}
.form-choice {
  display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	grid-column: full;
	@container (min-width: 35rem) {
		&[data-width="half"] {
			grid-column: span 3;
		}
		&[data-width="third"] {
			grid-column: span 2;
		}
		&[data-width="two-thirds"] {
			grid-column: span 4;
		}
	}
}
.form-choice__legend {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--text-dark-muted);
	padding: 0;
	margin-block-end: var(--space-xs);
}
.form-choice__options {
  display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-m);
}
.form-choice__option {
  display: flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--text-dark);
	cursor: pointer;
}
.form-choice__input {
  inline-size: 1.25em;
	block-size: 1.25em;
	accent-color: var(--primary);
	&[aria-invalid="true"] {
		outline: 2px solid var(--danger, currentColor);
	}
}
.form-choice__label {
  font-size: var(--text-m);
}
.form-choice__help {
  font-size: var(--text-s);
	color: var(--text-dark-muted);
}
.form-checkbox {
  display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	grid-column: full;
	@container (min-width: 35rem) {
		&[data-width="half"] {
			grid-column: span 3;
		}
		&[data-width="third"] {
			grid-column: span 2;
		}
		&[data-width="two-thirds"] {
			grid-column: span 4;
		}
	}
}
.form-checkbox__option {
  display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	color: var(--text-dark);
	cursor: pointer;
}
.form-checkbox__input {
  flex-shrink: 0;
	inline-size: 1.25em;
	block-size: 1.25em;
	margin-block-start: 0.15em;
	accent-color: var(--primary);
}
.form-checkbox__label {
  font-size: var(--text-m);
}
.form-checkbox__help {
  font-size: var(--text-s);
	color: var(--text-dark-muted);
}
.article__body {
  max-inline-size: 70ch;
	font-size: var(--text-m);
	line-height: 1.7;
	& h2 {
		font-size: var(--h3);
		line-height: 1.15;
	}
	& h3, & h4 {
		font-size: var(--h4);
		line-height: 1.2;
	}
	& :is(ul, ol) {
		padding-inline-start: 1.25em;
		list-style: revert;
	}
	& a:not([class]) {
		display: inline;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
	& blockquote {
		padding-inline-start: var(--space-m);
		border-inline-start: 0.25rem solid var(--primary);
		font-size: var(--text-l);
		font-style: italic;
	}
	& figure {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}
	& img {
		max-inline-size: 100%;
		block-size: auto;
	}
	& figcaption {
		font-size: var(--text-s);
		color: var(--text-dark-muted);
	}
	& .article-embed {
		position: relative;
		aspect-ratio: 16 / 9;
		inline-size: 100%;
		& iframe {
			position: absolute;
			inset: 0;
			inline-size: 100%;
			block-size: 100%;
			border: 0;
		}
	}
	& :not(pre) > code {
		padding: 0.15em 0.45em;
		border: 1px solid color-mix(in oklch, var(--text-dark) 14%, transparent);
		border-radius: 0.3125rem;
		background-color: color-mix(in oklch, var(--primary) 7%, var(--white));
		font-family: var(--accent-font);
		font-size: 0.85em;
		font-weight: 500;
		color: var(--text-dark);
		line-height: 1.4;
		overflow-wrap: anywhere;
		box-decoration-break: clone;
	}
	& a:not([class]) code {
		color: inherit;
	}
	& pre {
		overflow-x: auto;
		padding: var(--space-m);
		background-color: var(--bg-dark);
		color: var(--text-light);
		font-size: var(--text-s);
		line-height: 1.5;
		tab-size: 2;
	}
}
.site-nav__close {
  align-self: flex-end;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) 0;
	border: 0;
	background-color: transparent;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-dark);
	cursor: pointer;
	@media (min-width: 64rem) {
		display: none;
	}
}
.site-header__toggle {
  display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--text-dark);
	cursor: pointer;
	@media (min-width: 64rem) {
		display: none;
	}
}
.site-header__toggle-icon {
  --empty-element-size: 0;
	position: relative;
	inline-size: 1.375rem;
	block-size: 0.125rem;
	background-color: currentColor;
	&::before,
	&::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		block-size: 100%;
		background-color: currentColor;
	}
	&::before {
		inset-block-start: calc(0.4375rem * -1);
	}
	&::after {
		inset-block-start: 0.4375rem;
	}
}
.post-listing {
  position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "date arrow" "content content";
	gap: var(--space-xs) var(--space-m);
	padding-block: var(--space-m);
	border-block-end: var(--border-dark);
	@media (min-width: 48rem) {
		grid-template-columns: 6rem minmax(0, 1fr) auto;
		grid-template-areas: "date content arrow";
	}
}
.post-listing__date {
  grid-area: date;
	display: flex;
	gap: 0.5em;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	@media (min-width: 48rem) {
		flex-direction: column;
		gap: 0.25em;
		padding-block-start: 0.4em;
	}
}
.post-listing__day {
  font-weight: 700;
	color: var(--text-dark);
}
.post-listing__year {
  color: var(--text-dark-muted);
}
.post-listing__content {
  grid-area: content;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}
.post-listing__title {
  font-size: var(--text-xxl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.post-listing__link {
  color: inherit;
	text-decoration-color: transparent;
	&::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	&:hover {
		text-decoration-color: var(--primary);
	}
}
.post-listing__summary {
  max-inline-size: 60ch;
	line-height: 1.6;
	color: var(--text-dark-muted);
}
.post-listing__read-time {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--text-dark-muted);
}
.post-listing__arrow {
  grid-area: arrow;
	font-size: var(--text-xl);
	color: var(--text-dark);
}
.post-hero {
  padding-block-end: var(--space-xl);
}
.post-hero__inner {
  gap: var(--space-l);
}
.post-hero__meta {
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs) var(--space-s);
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--text-dark-muted);
}
.post-hero__back {
  font-weight: 700;
	color: var(--text-dark);
	text-decoration-color: transparent;
	&:hover {
		text-decoration-color: var(--primary);
	}
}
.post-hero__category {
  padding: 0.35em 0.6em;
	background-color: var(--primary);
	font-weight: 700;
	color: var(--text-dark);
	text-decoration: none;
}
.post-hero__title {
  max-inline-size: 20ch;
	font-size: calc((var(--h1) + var(--h2)) / 2);
	letter-spacing: -0.045em;
	line-height: 0.95;
	text-wrap: balance;
}
.post-hero__dot {
  --empty-element-size: 0;
	display: inline-block;
	inline-size: 0.18em;
	aspect-ratio: 1;
	margin-inline-start: 0.04em;
	border-radius: 50%;
	background-color: var(--primary);
}
.post-hero__intro {
  display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-l);
	padding-block-start: var(--space-l);
	border-block-start: 2px solid var(--text-dark);
}
.post-hero__dek {
  max-inline-size: 52ch;
	font-size: var(--text-l);
	line-height: 1.5;
	color: var(--text-dark);
}
.post-author {
  display: flex;
	align-items: center;
	gap: var(--space-s);
}
.post-author__image {
  inline-size: 3.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}
.post-author__text {
  display: flex;
	flex-direction: column;
	gap: 0.25em;
}
.post-author__name {
  font-weight: 700;
	line-height: 1.2;
	color: var(--text-dark);
}
.post-author__role {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--text-dark-muted);
}
.post-hero__media {
  background-color: var(--bg-dark);
	box-shadow: 0.75rem 0.75rem 0 var(--primary);
}
.post-hero__image {
  inline-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.post-body {
  padding-block-start: 0;
}
.post-body__inner {
  display: grid;
	align-items: start;
	gap: var(--space-xl);
	@media (min-width: 64rem) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}
}
.post-body__aside {
  display: none;
	@media (min-width: 64rem) {
		position: sticky;
		inset-block-start: var(--space-l);
		display: block;
		max-block-size: calc(100dvh - var(--space-xl));
		overflow-y: auto;
	}
}
.post-toc {
  display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding-block-start: var(--space-s);
	border-block-start: 2px solid var(--text-dark);
}
.post-toc__list {
  --toc-rail: 3px;
	--toc-ease: cubic-bezier(0.65, 0, 0.35, 1);
	position: relative;
	display: flex;
	flex-direction: column;
	&::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: var(--toc-rail);
		background: linear-gradient(
			to bottom,
			color-mix(in oklch, var(--primary) 35%, transparent) calc(var(--toc-progress, 0) * 100%),
			color-mix(in oklch, var(--text-dark) 12%, transparent) 0
		);
	}
	&::after {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		inline-size: var(--toc-rail);
		block-size: var(--toc-indicator-size, 0);
		translate: 0 var(--toc-indicator-offset, 0);
		background-color: var(--primary);
		box-shadow: 0 0 0.75rem color-mix(in oklch, var(--primary) 60%, transparent);
		opacity: 0;
		transition: translate 450ms var(--toc-ease), block-size 450ms var(--toc-ease), opacity 200ms ease;
	}
	&[data-active]::after {
		opacity: 1;
	}
	@media (prefers-reduced-motion: reduce) {
		&::after {
			transition: none;
		}
	}
}
.post-toc__link {
  position: relative;
	isolation: isolate;
	display: flex;
	gap: var(--space-xs);
	padding-block: 0.5em;
	padding-inline: calc(var(--space-xs) + 3px) var(--space-xs);
	font-size: var(--text-s);
	line-height: 1.35;
	color: var(--text-dark-muted);
	text-decoration: none;
	transition: color 250ms ease;
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(to right, color-mix(in oklch, var(--primary) 12%, transparent), transparent 85%);
		opacity: 0;
		transition: opacity 350ms ease;
	}
	&:hover {
		color: var(--text-dark);
	}
	&:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}
	&[data-read] {
		color: color-mix(in oklch, var(--text-dark) 70%, transparent);
	}
	&[aria-current] {
		font-weight: 600;
		color: var(--text-dark);
	}
	&[aria-current]::before {
		opacity: 1;
	}
	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}
}
.post-toc__number {
  flex-shrink: 0;
	min-inline-size: 2.5ch;
	padding-block-start: 0.15em;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	transition: color 250ms ease;
	.post-toc__link[aria-current] & {
		color: var(--primary);
	}
}
.post-body__content {
  display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	min-inline-size: 0;
	& h2 {
		scroll-margin-block-start: var(--space-l);
	}
}
.post-body__footer {
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s) var(--space-m);
	max-inline-size: 70ch;
	padding-block-start: var(--space-m);
	border-block-start: 2px solid var(--text-dark);
}
.topic-list {
  display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}
.topic-list__link {
  display: inline-flex;
	padding: 0.5em 1em;
	border: 1.5px solid var(--text-dark);
	border-radius: 999px;
	font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--text-dark);
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease;
	&:hover {
		border-color: var(--primary);
		background-color: var(--primary);
		text-decoration: none;
	}
	&:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}
	&[aria-current="page"] {
		border-color: var(--text-dark);
		background-color: var(--text-dark);
		color: var(--white);
	}
}
.post-share {
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
}
.post-share__label {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--text-dark-muted);
}
.post-share__link {
  font-size: var(--text-s);
	font-weight: 600;
	color: var(--text-dark);
	text-decoration-color: transparent;
	&:hover {
		text-decoration-color: var(--primary);
	}
}
.author-bio {
  display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-m);
	max-inline-size: 70ch;
	padding: var(--space-l);
	background-color: var(--bg-light);
}
.author-bio__image {
  flex-shrink: 0;
	inline-size: 4.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}
.author-bio__content {
  display: flex;
	flex: 1 1 15rem;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
}
.author-bio__name {
  font-family: var(--heading-font-family);
	font-size: var(--h4);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--text-dark);
}
.author-bio__text {
  line-height: 1.6;
}
.related-posts {
  background-color: var(--bg-light);
}
.category-archive {
  padding-block-start: 0;
}
.category-archive__inner {
  display: grid;
	align-items: start;
	gap: var(--space-xl);
	@media (min-width: 64rem) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}
}
.category-archive__sidebar {
  order: 2;
	@media (min-width: 64rem) {
		position: sticky;
		inset-block-start: var(--space-l);
		order: 0;
	}
}
.topic-index {
  display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding-block-start: var(--space-s);
	border-block-start: 2px solid var(--text-dark);
}
.topic-index__link {
  display: flex;
	justify-content: space-between;
	gap: var(--space-s);
	padding-block: 0.6em;
	border-block-end: 1px solid color-mix(in oklch, var(--text-dark) 14%, transparent);
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--text-dark);
	text-decoration-color: transparent;
	&:hover {
		text-decoration-color: var(--primary);
	}
}
.topic-index__count {
  font-family: var(--accent-font);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--text-dark-muted);
}
.category-archive__posts {
  display: flex;
	flex-direction: column;
	gap: var(--space-l);
}