@layer reset, base, components, utilities, site, states;

@layer components {
	/* Estructura y comportamiento base del blog público. */
	.blog-public-main *,
	.blog-public-hero *,
	.blog-public-card,
	.blog-public-card * {
		box-sizing: border-box;
	}
	.blog-public-hero {
		overflow: hidden;
		color: var(--text-inverse);
	}
	.blog-public-hero::before,
	.blog-public-hero::after {
		position: absolute;
		content: '';
	}
	.blog-public-hero::before {
		right: -8rem;
		bottom: -13rem;
	}
	.blog-public-hero::after {
		top: -8rem;
		left: -5rem;
	}
	.blog-public-hero-content {
		position: relative;
		z-index: 1;
		margin: 0 auto;
		text-align: center;
	}
	.blog-public-eyebrow {
		color: var(--color1-2);
		font-size: 0.75rem;
		font-weight: bold;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.blog-public-intro {
		margin: 0 auto;
	}
	.blog-public-search {
		display: flex;
		overflow: hidden;
		background: var(--surface);
		margin: 2rem auto 0;
	}
	.blog-public-search input {
		flex: 1;
		min-width: 0;
		border: none;
		background: transparent;
		color: var(--color0-1);
		padding: 0 1rem;
	}
	.blog-public-search input:focus {
		box-shadow: none;
	}
	.blog-public-search button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		flex: 0 0 auto;
		color: var(--brand-primary-contrast);
		padding: 0.8rem 1.2rem;
	}
	.blog-public-search button:hover,
	.blog-public-search button:focus {
		color: var(--brand-primary-contrast);
	}
	.blog-public-search button :is(img, .icono-interfaz) {
		width: 1.15rem;
		height: 1.15rem;
		filter: brightness(0) saturate(100%);
	}
	.blog-public-search button:hover :is(img, .icono-interfaz),
	.blog-public-search button:focus :is(img, .icono-interfaz) {
		filter: brightness(0) saturate(100%);
	}
	.blog-public-quick-nav {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}
	.blog-public-quick-nav a {
		border-bottom: 1px solid transparent;
		color: rgb(255 255 255 / 90%);
		padding-bottom: 0.15rem;
	}
	.blog-public-quick-nav a:hover,
	.blog-public-quick-nav a:focus {
		border-bottom-color: var(--surface);
		color: var(--text-inverse);
	}
	.blog-public-hero-compact {
		padding-top: 2.4rem;
		padding-bottom: 2.4rem;
	}
	.blog-public-hero-compact .blog-public-hero-title {
		margin-bottom: 0.5rem;
	}
	.blog-public-hero-compact .blog-public-intro {
		display: none;
	}
	.blog-public-hero-compact .blog-public-quick-nav {
		display: none;
	}
	.blog-public-shell {
		align-items: start;
		margin: 0 auto;
	}
	.blog-public-sticky {
		top: 7rem;
	}
	.blog-public-panel-title {
		position: relative;
		border-bottom: 1px solid var(--border-soft);
	}
	.blog-public-panel-title::before {
		position: absolute;
		top: 0;
		bottom: 0.75rem;
		left: 0;
		width: 0.2rem;
		content: '';
		background: var(--color1-2);
		border-radius: 1rem;
	}
	.blog-public-all-link,
	.blog-public-categories a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.7rem;
		line-height: 1.35;
	}
	.blog-public-all-link {
		font-weight: bold;
	}
	.blog-public-categories,
	.blog-public-categories ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.blog-public-categories ul {
		border-left: 1px solid var(--border-soft);
		margin: 0.15rem 0 0.3rem 0.75rem;
		padding-left: 0.55rem;
	}
	.blog-public-category-name {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		min-width: 0;
	}
	.blog-public-category-name :is(img, .icono-interfaz) {
		flex: 0 0 1.45rem;
		width: 1.45rem;
		height: 1.45rem;
		padding: 0.1rem;
		border-radius: 0.4rem;
		background: var(--surface);
		object-fit: contain;
	}
	.blog-public-categories small {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.35rem;
		height: 1.35rem;
		border-radius: 1rem;
		font-size: 0.68rem;
		padding: 0 0.35rem;
	}
	.blog-public-muted {
		font-size: 0.88rem;
		line-height: 1.5;
	}
	.blog-public-content {
		min-width: 0;
	}
	.blog-public-category-hero {
		position: relative;
		margin-bottom: 1.2rem;
		overflow: hidden;
		color: var(--text-inverse);
	}
	.blog-public-category-hero-plain {
		min-height: 10rem;
	}
	.blog-public-category-banner {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.blog-public-category-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--brand-ink) 80%, transparent),
			color-mix(in srgb, var(--brand-ink) 16%, transparent)
		);
	}
	.blog-public-category-content {
		position: absolute;
		right: clamp(1.2rem, 4vw, 3rem);
		bottom: clamp(1.2rem, 4vw, 2.5rem);
		left: clamp(1.2rem, 4vw, 3rem);
		display: flex;
		align-items: center;
		gap: 0.9rem;
	}
	.blog-public-category-content p {
		font-size: 0.72rem;
		font-weight: bold;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.blog-public-category-content h1 {
		color: var(--text-inverse);
		font-size: clamp(1.8rem, 4vw, 3.4rem);
		line-height: 1.05;
	}
	.blog-public-category-icon {
		width: clamp(3.4rem, 7vw, 5rem);
		height: clamp(3.4rem, 7vw, 5rem);
		padding: 0.55rem;
		border-radius: 0.9rem;
		background: rgb(255 255 255 / 94%);
		object-fit: contain;
	}
	.blog-public-section-header {
		width: 100%;
		height: auto;
		box-shadow: none;
	}
	.blog-public-section-header::before {
		position: absolute;
		top: 1rem;
		bottom: 1rem;
		left: 1.15rem;
		width: 0.22rem;
		content: '';
		background: var(--color1-2);
		border-radius: 1rem;
	}
	.blog-public-section-header h2 {
		line-height: 1.2;
	}
	.blog-public-section-header > p:last-child {
		line-height: 1.55;
	}
	.blog-public-grid {
		display: grid;
	}
	.blog-public-card-featured .blog-public-card-body {
		justify-content: center;
		padding: clamp(1.5rem, 3vw, 2.5rem);
	}
	.blog-public-card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
	}
	.blog-public-card:hover .blog-public-card-image img {
		transform: scale(1.025);
	}
	.blog-public-card-image > span {
		color: rgb(255 255 255 / 82%);
		font-size: 4rem;
		font-weight: bold;
	}
	.blog-public-card-category :is(img, .icono-interfaz) {
		width: 1rem;
		height: 1rem;
		margin-right: 0.35rem;
		object-fit: contain;
	}
	.blog-public-card-body > p {
		line-height: 1.6;
		margin-bottom: 1rem;
	}
	.blog-public-card-meta time {
		white-space: nowrap;
	}
	.blog-public-read-more span {
		font-size: 1.15rem;
		transition: transform 0.15s ease;
	}
	.blog-public-read-more:hover span {
		transform: translateX(0.2rem);
	}
	.blog-public-latest-list {
		display: flex;
		flex-flow: column nowrap;
	}
	.blog-public-latest-item {
		display: grid;
		grid-template-columns: 4.5rem minmax(0, 1fr);
		align-items: center;
		gap: 0.8rem;
		padding: 0.75rem 0;
	}
	.blog-public-latest-item:not(:last-child) {
		border-bottom: 1px solid var(--border-soft);
	}
	.blog-public-latest-image {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4.5rem;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: 0.55rem;
	}
	.blog-public-latest-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.blog-public-latest-image span {
		color: var(--text-inverse);
		font-size: 1.5rem;
		font-weight: bold;
	}
	.blog-public-latest-item > div {
		min-width: 0;
	}
	.blog-public-latest-item > div > a {
		display: -webkit-box;
		overflow: hidden;
		font-size: 0.86rem;
		font-weight: bold;
		line-height: 1.35;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.blog-public-latest-item time {
		display: block;
		font-size: 0.7rem;
		margin-top: 0.3rem;
	}
	.blog-public-latest-item small {
		display: block;
		font-size: 0.68rem;
		margin-top: 0.15rem;
	}
	.blog-public-tags {
		display: flex;
		flex-flow: row wrap;
		gap: 0.5rem;
	}
	.blog-public-tags a {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		border: 1px solid var(--border-soft);
		border-radius: 2rem;
		font-size: 0.78rem;
		padding: 0.42rem 0.7rem;
	}
	.blog-public-tags small {
		opacity: 0.7;
	}
	.blog-public-breadcrumbs {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 0.35rem 0.55rem;
		font-size: 0.8rem;
	}
	.blog-public-breadcrumbs span[aria-current='page'] {
		overflow: hidden;
		max-width: 26rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.blog-public-article {
		background: var(--surface);
	}
	.blog-public-article > h1 {
		margin: 0.35rem 0 1rem;
	}
	.blog-public-article-lead {
		line-height: 1.65;
		margin-bottom: 1.2rem;
	}
	.blog-public-article-image {
		margin: 1.5rem 0 2rem;
	}
	.blog-public-article-image img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 34rem;
		border-radius: 0.9rem;
		object-fit: cover;
	}
	.blog-public-article-meta {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 0.35rem 0.6rem;
		border-bottom: 1px solid var(--border-soft);
		font-size: 0.78rem;
		padding-bottom: 1.2rem;
	}
	.blog-public-share {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		margin: 1.2rem 0 2rem;
	}
	.blog-public-share > span {
		color: var(--color0-2);
		font-size: 0.78rem;
		font-weight: bold;
		margin-right: 0.2rem;
		text-transform: uppercase;
	}
	.blog-public-share a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.1rem;
		height: 2.1rem;
		border-radius: 50%;
	}
	.blog-public-share img {
		width: 1rem;
		height: 1rem;
		object-fit: contain;
	}
	.blog-public-article-body h2,
	.blog-public-article-body h3,
	.blog-public-article-body h4 {
		line-height: 1.25;
		margin: 2.2rem 0 1rem;
	}
	.blog-public-article-body h3 {
		font-size: 1.4rem;
	}
	.blog-public-article-body p {
		margin-bottom: 1.35rem;
	}
	.blog-public-article-body ul,
	.blog-public-article-body ol {
		margin: 0 0 1.5rem 1.5rem;
	}
	.blog-public-article-body li:not(:last-child) {
		margin-bottom: 0.6rem;
	}
	.blog-public-article-body img {
		display: block;
		max-width: 100%;
		height: auto;
		border-radius: 0.8rem;
		margin: 1.8rem auto;
	}
	.blog-public-article-body iframe,
	.blog-public-article-body video {
		max-width: 100%;
	}
	.blog-public-article-body blockquote {
		border-left: 0.25rem solid var(--color1-1);
		font-style: italic;
		margin: 1.8rem 0;
		padding: 1rem 1.3rem;
	}
	.blog-public-article-body table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
	.blog-public-article-footer {
		border-top: 1px solid var(--border-soft);
		margin-top: 2.5rem;
		padding-top: 1.3rem;
	}
	.blog-public-article-footer > span {
		display: block;
		color: var(--color0-2);
		font-size: 0.75rem;
		font-weight: bold;
		margin-bottom: 0.7rem;
		text-transform: uppercase;
	}
	.blog-public-empty {
		border: 1px dashed var(--border-soft);
		border-radius: 1rem;
		padding: 3rem 2rem;
		text-align: center;
	}
	.blog-public-empty h2 {
		font-size: 1.4rem;
		margin-bottom: 0.5rem;
	}
	.blog-public-empty a {
		display: inline-block;
		font-weight: bold;
		margin-top: 1rem;
	}
	.blog-public-sr-only {
		position: absolute;
		overflow: hidden;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		white-space: nowrap;
		clip-path: inset(50%);
	}

	@media (width <= 1350px) {
		.blog-public-grid {
			grid-template-columns: 1fr;
		}
	}

	@media (width <= 1100px) {
		.blog-public-shell {
			grid-template-columns: minmax(13rem, 0.7fr) minmax(0, 2fr);
		}
		.blog-public-navigation {
			grid-column: 1;
		}
		.blog-public-content {
			grid-column: 2;
		}
		.blog-public-sidebar {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-column: 2;
			margin-top: 1rem;
		}
	}

	@media (width <= 760px) {
		.blog-public-hero {
			padding: 3.3rem 1.2rem 2.8rem;
		}
		.blog-public-hero-compact {
			padding-top: 2rem;
			padding-bottom: 2rem;
		}
		.blog-public-search button span {
			display: none;
		}
		.blog-public-search button {
			padding-right: 1rem;
			padding-left: 1rem;
		}
		.blog-public-shell {
			grid-template-columns: minmax(0, 1fr);
			gap: 1.5rem;
			padding: 2rem 1rem 3.5rem;
		}
		.blog-public-navigation,
		.blog-public-content,
		.blog-public-sidebar {
			grid-column: 1;
		}
		.blog-public-sticky {
			position: static;
		}
		.blog-public-sidebar {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			margin-top: 0;
		}
		.blog-public-grid {
			grid-template-columns: minmax(0, 1fr);
		}
		.blog-public-card-featured {
			display: flex;
		}
		.blog-public-card-featured .blog-public-card-image {
			min-height: 0;
			aspect-ratio: 16 / 9;
		}
		.blog-public-article {
			padding: 1.5rem;
		}
		.blog-public-article-meta > span[aria-hidden='true'] {
			display: none;
		}
		.blog-public-article-meta {
			align-items: flex-start;
			flex-flow: column nowrap;
		}
	}

	/* Tema editorial del sitio, compartido por páginas y tarjetas independientes. */
	:where(.blog-public-page) .blog-public-hero,
	:where(.blog-public-page) .blog-public-main,
	.blog-public-card {
		--blog-ink: var(--text-primary);
		--blog-ink-soft: var(--text-secondary);
		--blog-brand: var(--brand-text);
		--blog-brand-dark: var(--brand-secondary);
		--blog-accent: var(--brand-primary);
		--blog-background: var(--surface-soft);
		--blog-surface-soft: var(--surface-muted);
		--blog-line: var(--border-soft);
		--blog-shadow-sm: var(--shadow-sm);
		--blog-shadow-md: var(--shadow-md);
	}

	:where(.blog-public-page) .blog-public-main {
		display: block;
		height: auto;
		min-height: 60vh;
		overflow: visible;
		background: linear-gradient(rgb(255 255 255 / 55%), rgb(255 255 255 / 0%) 24rem), var(--blog-background);
	}

	body.blog-public-page {
		background: var(--surface-soft);
	}

	:where(.blog-public-page) .blog-public-hero {
		position: relative;
		padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5.5rem);
		background:
			radial-gradient(
				circle at 14% 0%,
				color-mix(in srgb, var(--blog-accent) 18%, transparent),
				transparent 27rem
			),
			linear-gradient(135deg, var(--brand-secondary-hover), var(--brand-secondary));
		isolation: isolate;
	}

	:where(.blog-public-page) .blog-public-hero::before {
		inset: 0;
		width: auto;
		height: auto;
		border: 0;
		border-radius: 0;
		background-image:
			linear-gradient(rgb(255 255 255 / 4.5%) 1px, transparent 1px),
			linear-gradient(90deg, rgb(255 255 255 / 4.5%) 1px, transparent 1px);
		background-size: 3rem 3rem;
		opacity: 0.65;
	}

	:where(.blog-public-page) .blog-public-hero::after {
		inset: -13rem -9rem auto auto;
		width: 34rem;
		height: 34rem;
		border: 1px solid rgb(255 255 255 / 14%);
		border-radius: 50%;
		background: rgb(255 255 255 / 2.5%);
	}

	:where(.blog-public-page) .blog-public-hero-content {
		max-width: 68rem;
	}

	:where(.blog-public-page) .blog-public-hero .blog-public-eyebrow {
		margin: 0 0 1rem;
		color: var(--brand-primary);
		font-size: 0.76rem;
		font-weight: 800;
		letter-spacing: 0.16em;
		opacity: 1;
	}

	:where(.blog-public-page) .blog-public-hero h1,
	:where(.blog-public-page) .blog-public-hero-title {
		max-width: 58rem;
		margin: 0 auto 1.15rem;
		color: var(--text-inverse);
		font-size: clamp(2.5rem, 6vw, 5rem);
		font-weight: 750;
		letter-spacing: -0.045em;
		line-height: 1.02;
	}

	:where(.blog-public-page) .blog-public-intro {
		max-width: 48rem;
		color: rgb(255 255 255 / 78%);
		font-size: clamp(1rem, 2vw, 1.22rem);
		line-height: 1.7;
	}

	:where(.blog-public-page) .blog-public-search {
		width: min(100%, 48rem);
		min-height: 4.15rem;
		margin-top: 2.3rem;
		padding: 0.42rem;
		border: 1px solid rgb(255 255 255 / 50%);
		border-radius: 1rem;
		box-shadow: var(--shadow-lg);
	}

	:where(.blog-public-page) .blog-public-search input {
		font-size: 1rem;
		padding-inline: 1.1rem;
	}

	:where(.blog-public-page) .blog-public-search button {
		min-width: 7.5rem;
		border-radius: 0.72rem;
		background: var(--brand-primary);
		font-weight: 750;
	}

	:where(.blog-public-page) .blog-public-search button:hover,
	:where(.blog-public-page) .blog-public-search button:focus {
		background: var(--brand-primary-hover);
	}

	:where(.blog-public-page) .blog-public-quick-nav {
		gap: 0.65rem;
		margin-top: 1.35rem;
	}

	:where(.blog-public-page) .blog-public-quick-nav a {
		padding: 0.45rem 0.8rem;
		border: 1px solid rgb(255 255 255 / 18%);
		border-radius: 2rem;
		background: rgb(255 255 255 / 7%);
		font-size: 0.78rem;
		font-weight: 650;
	}

	:where(.blog-public-page) .blog-public-quick-nav a:hover,
	:where(.blog-public-page) .blog-public-quick-nav a:focus {
		border-color: rgb(255 255 255 / 46%);
		background: rgb(255 255 255 / 14%);
	}

	:where(.blog-public-page) .blog-public-hero-compact {
		padding-block: 2.15rem;
	}

	:where(.blog-public-page) .blog-public-hero-compact .blog-public-hero-title {
		font-size: clamp(1.65rem, 4vw, 2.25rem);
		letter-spacing: -0.025em;
	}

	:where(.blog-public-page) .blog-public-hero-compact .blog-public-search {
		min-height: 3.65rem;
		margin-top: 1.15rem;
	}

	:where(.blog-public-page) .blog-public-shell {
		display: grid;
		grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr) minmax(15rem, 16.5rem);
		gap: clamp(1.25rem, 2.5vw, 2.5rem);
		width: min(100%, 96rem);
		padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1rem, 4vw, 2rem) clamp(4rem, 7vw, 6.5rem);
	}

	:where(.blog-public-page) .blog-public-navigation {
		position: sticky;
		top: 6.25rem;
		display: flex;
		flex-flow: column nowrap;
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		gap: 1rem;
		max-height: calc(100dvh - 7.25rem);
		overflow-y: auto;
		padding-right: 0.2rem;
	}

	:where(.blog-public-page) .blog-public-content {
		grid-column: 2;
		grid-row: 1;
	}

	:where(.blog-public-page) .blog-public-sidebar {
		position: sticky;
		top: 6.25rem;
		display: flex;
		flex-flow: column nowrap;
		grid-column: 3;
		grid-row: 1;
		align-self: start;
		gap: 1rem;
		margin-top: 0;
	}

	:where(.blog-public-page) .blog-public-panel {
		border: 1px solid var(--blog-line);
		border-radius: 1rem;
		background: rgb(255 255 255 / 96%);
		box-shadow: var(--blog-shadow-sm);
		padding: 1.2rem;
	}

	:where(.blog-public-page) .blog-public-sticky {
		position: static;
	}

	:where(.blog-public-page) .blog-public-panel-title {
		margin-bottom: 0.75rem;
		padding: 0 0 0.8rem;
		border-bottom-color: var(--blog-line);
		color: var(--blog-ink);
		font-size: 0.78rem;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	:where(.blog-public-page) .blog-public-panel-title::before {
		display: none;
	}

	:where(.blog-public-page) .blog-public-all-link,
	:where(.blog-public-page) .blog-public-categories a {
		min-height: 2.55rem;
		padding: 0.58rem 0.7rem;
		border: 1px solid transparent;
		border-radius: 0.68rem;
		color: var(--blog-ink);
		font-size: 0.86rem;
	}

	:where(.blog-public-page) .blog-public-all-link {
		margin-bottom: 0.65rem;
		background: var(--color1-4);
		color: var(--blog-brand-dark);
	}

	:where(.blog-public-page) .blog-public-all-link:hover,
	:where(.blog-public-page) .blog-public-all-link:focus,
	:where(.blog-public-page) .blog-public-categories a:hover,
	:where(.blog-public-page) .blog-public-categories a:focus,
	:where(.blog-public-page) .blog-public-all-link.blog-public-active,
	:where(.blog-public-page) .blog-public-categories a.blog-public-active {
		border-color: var(--border-soft);
		background: var(--color1-5);
		color: var(--blog-brand-dark);
	}

	:where(.blog-public-page) .blog-public-categories ul {
		border-left-color: var(--border-soft);
	}

	:where(.blog-public-page) .blog-public-categories small,
	:where(.blog-public-page) .blog-public-categories a.blog-public-active small,
	:where(.blog-public-page) .blog-public-categories a:hover small,
	:where(.blog-public-page) .blog-public-categories a:focus small {
		background: var(--surface);
		box-shadow: inset 0 0 0 1px var(--blog-line);
		color: var(--blog-ink-soft);
	}

	:where(.blog-public-page) .blog-public-category-index {
		padding-bottom: 0.85rem;
	}

	:where(.blog-public-page) .blog-public-category-index-group + .blog-public-category-index-group {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--blog-line);
	}

	:where(.blog-public-page) .blog-public-category-index-heading {
		display: block;
		margin-bottom: 0.4rem;
		color: var(--blog-ink);
		font-size: 0.8rem;
		font-weight: 800;
		line-height: 1.35;
	}

	:where(.blog-public-page) .blog-public-category-index-level-1 .blog-public-category-index-heading {
		padding-left: 0.55rem;
	}

	:where(.blog-public-page) .blog-public-category-index-level-2 .blog-public-category-index-heading {
		padding-left: 1.1rem;
	}

	:where(.blog-public-page) .blog-public-category-index ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	:where(.blog-public-page) .blog-public-category-index li + li {
		margin-top: 0.18rem;
	}

	:where(.blog-public-page) .blog-public-category-index li > a {
		display: grid;
		grid-template-columns: 1.8rem minmax(0, 1fr);
		gap: 0.5rem;
		align-items: start;
		padding: 0.5rem 0.55rem;
		border: 1px solid transparent;
		border-radius: 0.6rem;
		color: var(--blog-ink-soft);
		font-size: 0.78rem;
		line-height: 1.45;
	}

	:where(.blog-public-page) .blog-public-category-index li > a:hover,
	:where(.blog-public-page) .blog-public-category-index li > a:focus,
	:where(.blog-public-page) .blog-public-category-index li > a.blog-public-active {
		border-color: var(--border-soft);
		background: var(--color1-5);
		color: var(--blog-brand-dark);
	}

	:where(.blog-public-page) .blog-public-category-index-number {
		color: var(--blog-brand);
		font-size: 0.7rem;
		font-weight: 800;
		letter-spacing: 0.03em;
	}

	:where(.blog-public-page) .blog-public-section-header {
		position: relative;
		top: auto;
		z-index: 1;
		margin-bottom: 1.5rem;
		padding: 0 0 1.35rem;
		border: 0;
		border-bottom: 1px solid var(--blog-line);
		border-radius: 0;
		background: transparent;
	}

	:where(.blog-public-page) .blog-public-section-header::before {
		display: none;
	}

	:where(.blog-public-page) .blog-public-section-header .blog-public-eyebrow {
		margin-bottom: 0.45rem;
		color: var(--blog-brand);
		font-size: 0.73rem;
		font-weight: 800;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	:where(.blog-public-page) .blog-public-section-header h2 {
		margin: 0 0 0.55rem;
		color: var(--blog-ink);
		font-size: clamp(1.8rem, 3.5vw, 2.65rem);
		font-weight: 750;
		letter-spacing: -0.03em;
	}

	:where(.blog-public-page) .blog-public-section-header > p:last-child {
		max-width: 46rem;
		color: var(--blog-ink-soft);
	}

	:where(.blog-public-page) .blog-public-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.15rem;
	}

	.blog-public-card {
		display: flex;
		flex-flow: column nowrap;
		min-width: 0;
		overflow: hidden;
		background: var(--surface);
		border: 1px solid var(--blog-line);
		border-radius: 1rem;
		box-shadow: var(--blog-shadow-sm);
		transition:
			border-color 0.2s ease,
			box-shadow 0.2s ease,
			transform 0.2s ease;
	}

	.blog-public-card:hover {
		border-color: var(--border-soft);
		box-shadow: var(--blog-shadow-md);
		transform: translateY(-0.2rem);
	}

	.blog-public-card-featured {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: minmax(13rem, 0.75fr) minmax(0, 1.25fr);
	}

	.blog-public-card-featured .blog-public-card-image {
		height: 100%;
		aspect-ratio: auto;
		min-height: 19rem;
	}

	.blog-public-card-image {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		overflow: hidden;
		min-height: 10rem;
		aspect-ratio: 16 / 8.5;
		background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
	}

	.blog-public-card-image-empty::after {
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(rgb(255 255 255 / 5.5%) 1px, transparent 1px),
			linear-gradient(90deg, rgb(255 255 255 / 5.5%) 1px, transparent 1px);
		background-size: 1.5rem 1.5rem;
		content: '';
		pointer-events: none;
	}

	.blog-public-card-image,
	:where(.blog-public-page) .blog-public-latest-image {
		position: relative;
	}

	.blog-public-card-image-empty > span {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4.5rem;
		height: 4.5rem;
		border: 1px solid rgb(255 255 255 / 30%);
		border-radius: 1.2rem;
		background: rgb(255 255 255 / 12%);
		box-shadow: var(--shadow-md);
		color: var(--text-inverse);
		font-size: 2rem;
		font-weight: 800;
		transform: rotate(-3deg);
	}

	.blog-public-card-no-image .blog-public-card-image {
		height: 0.35rem;
		min-height: 0.35rem;
		aspect-ratio: auto;
		background: linear-gradient(90deg, var(--blog-accent), var(--blog-brand));
	}

	.blog-public-card-no-image .blog-public-card-image::after,
	.blog-public-card-no-image .blog-public-card-image > span {
		display: none;
	}

	.blog-public-card-featured.blog-public-card-no-image {
		display: flex;
	}

	.blog-public-card-featured.blog-public-card-no-image .blog-public-card-body {
		padding: clamp(1.5rem, 3vw, 2.25rem);
	}

	.blog-public-card-body {
		display: flex;
		flex: 1;
		flex-flow: column nowrap;
		align-items: flex-start;
		padding: 1.35rem 1.4rem 1.45rem;
	}

	.blog-public-card-category {
		display: inline-flex;
		border-radius: 2rem;
		font-weight: bold;
		padding: 0.35rem 0.65rem;
		text-transform: uppercase;
		margin-bottom: 0.8rem;
		border: 1px solid var(--border-soft);
		background: var(--color1-4);
		color: var(--blog-brand-dark);
		font-size: 0.68rem;
		letter-spacing: 0.06em;
	}

	.blog-public-card-category:hover,
	.blog-public-card-category:focus {
		border-color: var(--blog-brand);
		background: var(--blog-brand);
		color: var(--text-inverse);
	}

	.blog-public-card h2 {
		margin-bottom: 0.65rem;
		font-size: 1.23rem;
		letter-spacing: -0.015em;
		line-height: 1.38;
	}

	.blog-public-card-featured h2 {
		font-size: clamp(1.45rem, 2.3vw, 2rem);
	}

	.blog-public-card h2 a,
	:where(.blog-public-page) .blog-public-latest-item > div > a {
		color: var(--blog-ink);
	}

	.blog-public-card h2 a:hover,
	.blog-public-card h2 a:focus,
	:where(.blog-public-page) .blog-public-latest-item > div > a:hover,
	:where(.blog-public-page) .blog-public-latest-item > div > a:focus {
		color: var(--blog-brand-dark);
	}

	.blog-public-card-body > p,
	.blog-public-card-meta,
	:where(.blog-public-page) .blog-public-muted,
	:where(.blog-public-page) .blog-public-latest-item time,
	:where(.blog-public-page) .blog-public-latest-item small {
		color: var(--blog-ink-soft);
	}

	.blog-public-card-meta {
		display: flex;
		flex-flow: row wrap;
		margin-top: auto;
		gap: 0.35rem 0.7rem;
		font-size: 0.72rem;
	}

	.blog-public-read-more {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-weight: bold;
		margin-top: 1rem;
		color: var(--blog-brand);
		font-size: 0.82rem;
	}

	.blog-public-read-more:hover,
	.blog-public-read-more:focus {
		color: var(--blog-brand-dark);
	}

	:where(.blog-public-page) .blog-public-sidebar .blog-public-panel {
		height: auto;
	}

	:where(.blog-public-page) .blog-public-latest-image {
		background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
	}

	:where(.blog-public-page) .blog-public-latest-image-empty {
		border: 1px solid var(--border-soft);
		background: var(--color1-4);
	}

	:where(.blog-public-page) .blog-public-latest-image-empty span {
		color: var(--blog-brand-dark);
	}

	:where(.blog-public-page) .blog-public-tags a {
		border-color: var(--blog-line);
		background: var(--blog-surface-soft);
		color: var(--blog-ink);
	}

	:where(.blog-public-page) .blog-public-tags a:hover,
	:where(.blog-public-page) .blog-public-tags a:focus,
	:where(.blog-public-page) .blog-public-tags a.blog-public-active {
		border-color: var(--blog-brand);
		background: var(--blog-brand);
		color: var(--text-inverse);
	}

	:where(.blog-public-page) .blog-public-breadcrumbs {
		margin-bottom: 1.25rem;
		color: var(--blog-ink-soft);
	}

	:where(.blog-public-page) .blog-public-breadcrumbs a {
		color: var(--blog-brand-dark);
	}

	:where(.blog-public-page) .blog-public-breadcrumbs a:hover,
	:where(.blog-public-page) .blog-public-breadcrumbs a:focus {
		color: var(--blog-brand);
	}

	:where(.blog-public-page) .blog-public-category-hero {
		min-height: clamp(11rem, 23vw, 18rem);
		border: 1px solid rgb(255 255 255 / 8%);
		border-radius: 1.2rem;
		background: var(--blog-ink);
		box-shadow: var(--blog-shadow-md);
	}

	:where(.blog-public-page) .blog-public-category-hero-plain {
		background:
			radial-gradient(
				circle at 88% 10%,
				color-mix(in srgb, var(--blog-accent) 24%, transparent),
				transparent 17rem
			),
			linear-gradient(135deg, var(--brand-secondary-hover), var(--brand-secondary));
	}

	:where(.blog-public-page) .blog-public-category-content h1 {
		font-weight: 750;
		letter-spacing: -0.03em;
	}

	:where(.blog-public-page) .blog-public-article {
		border: 1px solid var(--blog-line);
		border-radius: 1.2rem;
		box-shadow: var(--blog-shadow-sm);
		padding: clamp(1.5rem, 5vw, 4rem);
	}

	:where(.blog-public-page) .blog-public-article > h1 {
		margin-top: 0.5rem;
		color: var(--blog-ink);
		font-size: clamp(2rem, 4.5vw, 3.45rem);
		font-weight: 760;
		letter-spacing: -0.04em;
		line-height: 1.08;
	}

	:where(.blog-public-page) .blog-public-article-lead {
		max-width: 48rem;
		color: var(--blog-ink-soft);
		font-size: clamp(1.05rem, 2vw, 1.23rem);
	}

	:where(.blog-public-page) .blog-public-article-meta {
		border-bottom-color: var(--blog-line);
		color: var(--blog-ink-soft);
	}

	:where(.blog-public-page) .blog-public-share a {
		border: 1px solid var(--blog-line);
		background: var(--blog-surface-soft);
	}

	:where(.blog-public-page) .blog-public-share a:hover,
	:where(.blog-public-page) .blog-public-share a:focus {
		border-color: var(--border-soft);
		background: var(--color1-5);
	}

	:where(.blog-public-page) .blog-public-article-body {
		color: var(--text-primary);
		font-size: 1.03rem;
		line-height: 1.82;
	}

	:where(.blog-public-page) .blog-public-article-body h2,
	:where(.blog-public-page) .blog-public-article-body h3,
	:where(.blog-public-page) .blog-public-article-body h4 {
		color: var(--blog-ink);
		font-weight: 740;
		letter-spacing: -0.02em;
	}

	:where(.blog-public-page) .blog-public-article-body h2 {
		margin-top: 2.7rem;
		padding-bottom: 0.65rem;
		border-bottom: 1px solid var(--blog-line);
		font-size: clamp(1.45rem, 3vw, 1.85rem);
	}

	:where(.blog-public-page) .blog-public-article-body li::marker {
		color: var(--blog-brand);
		font-weight: 800;
	}

	:where(.blog-public-page) .blog-public-article-body a {
		color: var(--blog-brand-dark);
		font-weight: 650;
		text-decoration: underline;
		text-decoration-color: rgb(11 93 181 / 30%);
		text-underline-offset: 0.2em;
	}

	:where(.blog-public-page) .blog-public-article-body a:hover,
	:where(.blog-public-page) .blog-public-article-body a:focus {
		color: var(--blog-brand);
		text-decoration-color: currentcolor;
	}

	:where(.blog-public-page) .blog-public-article-body blockquote {
		border-left-color: var(--blog-accent);
		border-radius: 0 0.8rem 0.8rem 0;
		background: var(--color1-4);
		color: var(--text-primary);
	}

	:where(.blog-public-page) .blog-public-article-body code {
		padding: 0.12rem 0.35rem;
		border: 1px solid var(--blog-line);
		border-radius: 0.3rem;
		background: var(--blog-surface-soft);
		font-size: 0.9em;
	}

	:where(.blog-public-page) .blog-public-article-body pre {
		max-width: 100%;
		overflow: auto;
		padding: 1rem;
		border-radius: 0.8rem;
		background: var(--blog-ink);
		color: var(--text-inverse);
	}

	:where(.blog-public-page) .blog-public-article-body pre code {
		display: block;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		font-size: inherit;
	}

	:where(.blog-public-page) .blog-public-article-body table {
		border-collapse: collapse;
	}

	:where(.blog-public-page) .blog-public-article-body th,
	:where(.blog-public-page) .blog-public-article-body td {
		padding: 0.7rem 0.8rem;
		border: 1px solid var(--blog-line);
		text-align: left;
	}

	:where(.blog-public-page) .blog-public-article-body th {
		background: var(--blog-surface-soft);
		color: var(--blog-ink);
	}

	:where(.blog-public-page) .blog-public-empty {
		border-color: var(--border-soft);
		background: rgb(255 255 255 / 84%);
		color: var(--blog-ink-soft);
	}

	:where(.blog-public-page) .blog-public-empty h2 {
		color: var(--blog-ink);
	}

	:where(.blog-public-page) .blog-public-empty a {
		color: var(--blog-brand-dark);
	}

	.blog-public-card a:focus-visible,
	:where(.blog-public-page) .blog-public-main a:focus-visible,
	:where(.blog-public-page) .blog-public-hero a:focus-visible,
	:where(.blog-public-page) .blog-public-hero button:focus-visible,
	:where(.blog-public-page) .blog-public-hero input:focus-visible {
		outline: 0.18rem solid var(--focus-ring);
		outline-offset: 0.15rem;
	}

	.blog-public-navigation:not(:has(.blog-public-categories, .blog-public-category-index)) {
		display: none;
	}

	@media (width > 56rem) {
		.blog-public-shell:not(:has(.blog-public-categories, .blog-public-category-index)) {
			grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
			max-width: var(--content-width);
		}

		.blog-public-shell:not(:has(.blog-public-categories, .blog-public-category-index)) > .blog-public-content {
			grid-column: 1;
		}

		.blog-public-shell:not(:has(.blog-public-categories, .blog-public-category-index)) > .blog-public-sidebar {
			grid-column: 2;
		}
	}

	@media (width <= 74rem) {
		:where(.blog-public-page) .blog-public-shell {
			grid-template-columns: minmax(11.5rem, 13rem) minmax(0, 1fr) minmax(12.5rem, 14rem);
			gap: 1rem;
			padding-right: 1rem;
			padding-left: 1rem;
		}

		:where(.blog-public-page) .blog-public-grid {
			grid-template-columns: minmax(0, 1fr);
		}

		.blog-public-card-featured {
			grid-template-columns: minmax(11rem, 0.7fr) minmax(0, 1.3fr);
		}

		.blog-public-card-featured .blog-public-card-image {
			min-height: 17rem;
		}
	}

	@media (width <= 56rem) {
		:where(.blog-public-page) .blog-public-shell {
			grid-template-columns: minmax(0, 1fr);
			gap: 1.5rem;
		}

		:where(.blog-public-page) .blog-public-navigation,
		:where(.blog-public-page) .blog-public-content,
		:where(.blog-public-page) .blog-public-sidebar {
			grid-column: 1;
			grid-row: auto;
		}

		:where(.blog-public-page) .blog-public-navigation,
		:where(.blog-public-page) .blog-public-sidebar {
			position: static;
		}

		:where(.blog-public-page) .blog-public-navigation {
			max-height: none;
			overflow: visible;
			padding-right: 0;
		}

		:where(.blog-public-page) .blog-public-sticky {
			position: static;
		}

		:where(.blog-public-page) .blog-public-categories {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 0.2rem 0.5rem;
		}

		:where(.blog-public-page) .blog-public-categories ul {
			display: block;
		}

		:where(.blog-public-page) .blog-public-sidebar {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			display: grid;
		}
	}

	@media (width <= 40rem) {
		:where(.blog-public-page) .blog-public-hero {
			padding: 3.6rem 1rem 3rem;
		}

		:where(.blog-public-page) .blog-public-hero h1,
		:where(.blog-public-page) .blog-public-hero-title {
			font-size: clamp(2.15rem, 11vw, 3.15rem);
		}

		:where(.blog-public-page) .blog-public-search {
			min-height: 3.7rem;
		}

		:where(.blog-public-page) .blog-public-search button {
			min-width: 3.25rem;
			padding-inline: 1rem;
		}

		:where(.blog-public-page) .blog-public-search button span {
			display: none;
		}

		:where(.blog-public-page) .blog-public-shell {
			padding: 1.5rem 0.85rem 3.5rem;
		}

		:where(.blog-public-page) .blog-public-categories,
		:where(.blog-public-page) .blog-public-grid,
		:where(.blog-public-page) .blog-public-sidebar {
			grid-template-columns: minmax(0, 1fr);
		}

		.blog-public-card-featured {
			display: flex;
		}

		.blog-public-card-featured .blog-public-card-image,
		.blog-public-card-image {
			min-height: 9rem;
			aspect-ratio: 16 / 8.5;
		}

		.blog-public-card-no-image .blog-public-card-image {
			height: 0.35rem;
			min-height: 0.35rem;
			aspect-ratio: auto;
		}

		:where(.blog-public-page) .blog-public-article {
			padding: 1.35rem;
		}

		:where(.blog-public-page) .blog-public-article-meta {
			align-items: flex-start;
			flex-flow: column nowrap;
		}

		:where(.blog-public-page) .blog-public-article-meta > span[aria-hidden='true'] {
			display: none;
		}
	}
}