@layer my.landing {
	.my-skip-link {
		inset-block-start: 0.75rem;
		inset-inline-start: 0.75rem;
		padding-block: 0.625rem;
		padding-inline: 0.875rem;
		position: fixed;
		z-index: 1;
		border: 0.125rem solid var(--my-focus-color);
		border-radius: 0.5rem;
		background: var(--my-surface-background);
		color: var(--my-color);
		font-weight: 700;
		translate: 0 calc(-100% - 1rem);
		transition: translate var(--my-motion-duration) ease-out;
	}

	.my-skip-link:focus-visible {
		outline: 0.1875rem solid var(--my-focus-color);
		outline-offset: 0.1875rem;
		translate: 0;
	}

	.my-landing-header,
	.my-landing-main,
	.my-landing-footer {
		box-sizing: border-box;
		inline-size: min(100%, 78rem);
		margin-inline: auto;
		padding-inline: clamp(1rem, 4vw, 3rem);
	}

	.my-landing-header {
		display: grid;
		gap: clamp(1rem, 3vw, 2rem);
		grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
		padding-block: clamp(2rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem);
	}

	.my-landing-header-content {
		align-content: center;
		display: grid;
		gap: 0.75rem;
		max-inline-size: 66ch;
	}

	.my-landing-header-content > * {
		margin: 0;
	}

	.my-landing-header-content h1 {
		font-size: clamp(2.25rem, 1.5rem + 4vw, 4.75rem);
		letter-spacing: -0.035em;
		line-height: 0.98;
		text-wrap: balance;
	}

	.my-landing-summary {
		color: var(--my-muted-color);
		font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
		text-wrap: pretty;
	}

	.my-developer-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
		margin-block-start: 0.5rem;
	}

	.my-developer-links a,
	.my-card-source,
	.my-landing-footer a {
		color: var(--my-primary-color);
		font-weight: 700;
		text-underline-offset: 0.2em;
	}

	.my-developer-links a:focus-visible,
	.my-card-source:focus-visible,
	.my-metadata a:focus-visible,
	.my-landing-footer a:focus-visible {
		outline: 0.1875rem solid var(--my-focus-color);
		outline-offset: 0.1875rem;
	}

	.my-landing-kicker,
	.my-card-tag {
		color: var(--my-primary-color);
		font-size: 0.8125rem;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.my-metadata {
		align-self: end;
		display: grid;
		gap: 0.75rem;
		min-inline-size: 0;
		padding: 1rem;
		border: 0.125rem solid var(--my-border-color);
		border-radius: var(--my-radius);
		background: var(--my-surface-background);
	}

	.my-metadata > :is(h2, p, dl),
	.my-metadata dd {
		margin: 0;
	}

	.my-metadata h2 {
		font-size: 1rem;
	}

	.my-metadata dl {
		display: grid;
		gap: 0.625rem;
	}

	.my-metadata dl > div {
		display: grid;
		gap: 0.25rem;
		grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
	}

	.my-metadata dt {
		color: var(--my-muted-color);
	}

	.my-metadata dd {
		justify-self: end;
		max-inline-size: 100%;
		min-inline-size: 0;
		text-align: end;
	}

	.my-metadata dd code {
		display: block;
		overflow-wrap: anywhere;
	}

	.my-metadata dd a {
		color: inherit;
	}

	.my-metadata [data-my-metadata-status] {
		color: var(--my-muted-color);
		font-size: 0.875rem;
	}

	.my-metadata[data-my-metadata-state="error"] {
		border-color: var(--my-warning-border-color);
		background: var(--my-warning-background);
		color: var(--my-warning-color);
	}

	.my-landing-main {
		padding-block: 1rem clamp(2rem, 6vw, 5rem);
	}

	.my-landing-main section,
	.my-landing-section-heading {
		display: grid;
		gap: 0.75rem;
	}

	.my-landing-section-heading {
		max-inline-size: 70ch;
	}

	.my-landing-section-heading > * {
		margin: 0;
	}

	.my-landing-section-heading h2 {
		font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
		line-height: 1.15;
	}

	.my-landing-section-heading p {
		color: var(--my-muted-color);
	}

	.my-card-list {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.my-card-list > li {
		min-inline-size: 0;
	}

	.my-card {
		box-sizing: border-box;
		display: grid;
		gap: 0.625rem;
		min-block-size: 100%;
		padding: clamp(1rem, 2vw, 1.375rem);
		/* stylelint-disable-next-line unit-disallowed-list -- Intentional one-CSS-pixel hairline. */
		border: 1px solid var(--my-border-color);
		border-radius: var(--my-radius);
		background: var(--my-surface-background);
		translate: 0;
		transition-duration: var(--my-motion-duration);
		transition-property: background-color, border-color, translate;
		transition-timing-function: ease-out;
	}

	.my-card > * {
		margin: 0;
	}

	.my-card h3 {
		font-size: 1.25rem;
		line-height: 1.2;
	}

	.my-card-run {
		align-items: safe center;
		display: flex;
		gap: 0.75rem;
		justify-content: space-between;
		color: var(--my-color);
		text-decoration: none;
	}

	.my-card-run > span:first-child {
		overflow-wrap: anywhere;
		text-decoration-color: var(--my-primary-color);
		text-decoration-line: underline;
		text-decoration-thickness: 0.125rem;
		text-underline-offset: 0.2em;
	}

	.my-card-run-label {
		flex: none;
		padding-block: 0.25rem;
		padding-inline: 0.5rem;
		border-radius: 999rem;
		background: var(--my-primary-color);
		color: var(--my-primary-contrast-color);
		font-size: 0.75rem;
		font-weight: 800;
		letter-spacing: 0.04em;
		line-height: 1;
		text-transform: uppercase;
	}

	.my-card-run:focus-visible {
		outline: 0.1875rem solid var(--my-focus-color);
		outline-offset: 0.1875rem;
	}

	.my-card > p:not(.my-card-tag) {
		color: var(--my-muted-color);
		text-wrap: pretty;
	}

	.my-card-source {
		justify-self: start;
		margin-block-start: auto;
	}

	.my-landing-footer {
		padding-block: 1.25rem 2rem;
		border-block-start: 0.125rem solid var(--my-border-color);
		color: var(--my-muted-color);
	}

	.my-landing-footer p {
		margin: 0;
	}

	@media (hover: hover) {
		.my-card:has(a:hover) {
			border-color: var(--my-primary-color);
			background: var(--my-subtle-background);
			translate: 0 -0.125rem;
		}
	}

	@media (width < 48rem) {
		.my-landing-header {
			grid-template-columns: minmax(0, 1fr);
		}

		.my-metadata {
			align-self: auto;
		}
	}

	@media (prefers-contrast: more) {
		.my-card {
			border-width: 0.125rem;
		}
	}

	@media (forced-colors: active) {
		.my-card:has(a:hover) {
			border-color: LinkText;
		}
	}
}