:root {
	--bg: #05070d;
	--glass: rgba(18, 16, 34, 0.58);
	--glass-strong: rgba(27, 22, 49, 0.72);
	--ink: #f7f3ff;
	--muted: #b9aecb;
	--muted-strong: #d8cdeb;
	--line: rgba(255, 255, 255, 0.13);
	--line-strong: rgba(185, 100, 255, 0.34);
	--accent: #9b42ff;
	--accent-hot: #d348ff;
	--radius: 8px;
	--pill: 999px;
	--max: 1380px;
	--page-gutter: clamp(32px, 5vw, 86px);
}

* {
	box-sizing: border-box;
}

html {
	background:
		radial-gradient(circle at 50% -8%, rgba(176, 47, 255, 0.26), transparent 30rem),
		radial-gradient(circle at 72% 5%, rgba(129, 39, 255, 0.42), transparent 28rem),
		linear-gradient(180deg, #070912 0%, #03050a 52%, #05070d 100%);
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(circle at 50% -8%, rgba(176, 47, 255, 0.26), transparent 30rem),
		radial-gradient(circle at 72% 5%, rgba(129, 39, 255, 0.42), transparent 28rem),
		radial-gradient(circle at 18% 32%, rgba(69, 33, 146, 0.25), transparent 26rem),
		linear-gradient(180deg, #070912 0%, #03050a 52%, #05070d 100%);
	color: var(--ink);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.6;
}

body::before {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(180deg, black, transparent 72%);
}

body::after {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(180deg, rgba(38, 16, 80, 0.18), transparent 220px),
		rgba(2, 4, 10, 0.54);
}

a {
	color: inherit;
	text-decoration: none;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid rgba(235, 160, 255, 0.9);
	outline-offset: 4px;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.site-header,
.site-footer,
.site-main {
	width: min(var(--max), calc(100% - (var(--page-gutter) * 2)));
	margin-inline: auto;
}

.site-header {
	position: fixed;
	top: 22px;
	right: var(--page-gutter);
	left: var(--page-gutter);
	z-index: 20;
	display: grid;
	width: auto;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	align-items: center;
	gap: 22px;
	min-height: 74px;
	margin-top: 0;
	margin-inline: 0;
	padding: 0;
}

.brand-lockup,
.menu,
.footer-menu,
.hero-actions,
.entry-meta,
.tag-list,
.nav-links {
	display: flex;
	align-items: center;
}

.brand-lockup {
	position: relative;
	gap: 0;
	min-width: max-content;
}

.brand-lockup::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: 122px;
	height: 122px;
	pointer-events: none;
	content: "";
	border-radius: 50%;
	background: radial-gradient(circle, rgba(211, 72, 255, 0.24), rgba(155, 66, 255, 0.12) 40%, rgba(5, 7, 13, 0.12) 58%, transparent 74%);
	filter: blur(18px);
	opacity: 0.58;
	transform: translate(-50%, -50%);
	transition: opacity 180ms ease, transform 180ms ease;
}

.site-header.is-scrolled .brand-lockup::before {
	opacity: 0.68;
	transform: translate(-50%, -50%) scale(1.08);
}

.site-logo {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	filter:
		drop-shadow(0 0 10px rgba(255, 255, 255, 0.18))
		drop-shadow(0 0 18px rgba(155, 66, 255, 0.34));
	transition: transform 160ms ease, filter 160ms ease;
}

.site-logo img {
	width: 62px;
	height: 62px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.site-logo:hover {
	transform: translateY(-2px);
	filter:
		drop-shadow(0 0 12px rgba(255, 255, 255, 0.2))
		drop-shadow(0 0 22px rgba(211, 72, 255, 0.5));
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.nav-capsule {
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 8px 22px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background:
		radial-gradient(circle at 12% 26%, rgba(211, 72, 255, 0.24), transparent 13rem),
		linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
		rgba(26, 24, 42, 0.62);
	box-shadow: 0 18px 54px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -18px 44px rgba(155, 66, 255, 0.08);
	backdrop-filter: blur(28px) saturate(165%);
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-scrolled .nav-capsule {
	border-color: rgba(255, 255, 255, 0.2);
	background:
		radial-gradient(circle at 8% 20%, rgba(211, 72, 255, 0.24), transparent 12rem),
		linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055)),
		rgba(21, 19, 34, 0.76);
	box-shadow: 0 20px 58px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.23);
}

.header-nav-shell {
	min-width: 0;
}

.menu,
.footer-menu {
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.86rem;
	font-weight: 650;
}

.site-nav .menu {
	justify-content: center;
}

.menu a,
.footer-menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: var(--pill);
	color: var(--muted);
	transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.menu a:hover,
.menu a.is-active,
.menu .current-menu-item > a,
.footer-menu a:hover {
	border-color: transparent;
	background: transparent;
	color: var(--ink);
}

.menu a::after {
	position: absolute;
	right: 12px;
	bottom: 2px;
	left: 12px;
	height: 2px;
	content: "";
	border-radius: var(--pill);
	background: linear-gradient(90deg, transparent, rgba(235, 160, 255, 0.86), transparent);
	opacity: 0;
	transform: scaleX(0.45);
	transition: opacity 160ms ease, transform 160ms ease;
}

.menu a:hover::after,
.menu a.is-active::after,
.menu .current-menu-item > a::after {
	opacity: 1;
	transform: scaleX(1);
}

.contact-button,
.primary-button,
.secondary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	border-radius: var(--pill);
	font-weight: 750;
	white-space: nowrap;
}

.contact-button,
.primary-button {
	padding: 0 17px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: linear-gradient(135deg, #b748ff, #6c2cff);
	color: #fff;
	box-shadow: 0 0 28px rgba(155, 66, 255, 0.54);
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.contact-button:hover,
.primary-button:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.32);
	box-shadow: 0 0 36px rgba(155, 66, 255, 0.7), 0 18px 38px rgba(82, 25, 176, 0.28);
}

.site-header > .contact-button {
	min-height: 58px;
	padding: 0 28px;
	font-size: 1.02rem;
	box-shadow: 0 0 34px rgba(155, 66, 255, 0.68), 0 18px 42px rgba(82, 25, 176, 0.38);
}

.secondary-button {
	padding: 0 18px;
	border: 1px solid rgba(155, 66, 255, 0.62);
	background: rgba(155, 66, 255, 0.08);
	color: var(--ink);
	transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.secondary-button:hover {
	transform: translateY(-2px);
	border-color: rgba(211, 72, 255, 0.8);
	background: rgba(155, 66, 255, 0.16);
}

.site-main {
	display: grid;
	gap: 22px;
	padding: 22px 0 34px;
}

.home-main {
	padding-top: 132px;
}

.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1fr);
	gap: 52px;
	align-items: center;
	min-height: min(640px, calc(100svh - 168px));
	overflow: hidden;
	padding: 56px 56px 54px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 34px;
	background:
		radial-gradient(circle at 74% 16%, rgba(155, 66, 255, 0.35), transparent 28rem),
		radial-gradient(circle at 18% 84%, rgba(88, 33, 173, 0.24), transparent 24rem),
		linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
		rgba(3, 5, 10, 0.58);
	box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 42%;
	z-index: 0;
	height: 20%;
	pointer-events: none;
	content: "";
	background: linear-gradient(180deg, transparent, rgba(5, 7, 13, 0.68));
}

.hero::before {
	position: absolute;
	inset: 7% 0 auto 42%;
	z-index: 0;
	height: 420px;
	content: "";
	background: radial-gradient(circle, rgba(155, 66, 255, 0.58), transparent 68%);
	filter: blur(28px);
}

.hero-copy {
	position: relative;
	z-index: 3;
	max-width: 640px;
}

.hero-portrait {
	position: absolute;
	right: -1px;
	bottom: 0;
	z-index: 1;
	width: min(50vw, 730px);
	margin: 0;
	pointer-events: none;
}

.hero-portrait::before {
	position: absolute;
	inset: 18% 8% 9%;
	z-index: -1;
	content: "";
	background: radial-gradient(circle, rgba(159, 62, 255, 0.54), transparent 62%);
	filter: blur(28px);
}

.hero-portrait img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.58));
}

.eyebrow,
.card-meta,
.entry-meta {
	margin: 0 0 14px;
	color: #cfa6ff;
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1 {
	max-width: 640px;
	margin-bottom: 20px;
	font-size: clamp(3.5rem, 5.45vw, 5.9rem);
	line-height: 0.96;
	letter-spacing: 0;
	text-wrap: balance;
}

.hero h1 {
	background: linear-gradient(180deg, #fff 0%, #ece6fb 50%, #b02fff 100%);
	background-clip: text;
	color: transparent;
}

h2 {
	margin-bottom: 0;
	font-size: clamp(2rem, 4vw, 4.1rem);
	line-height: 0.98;
	letter-spacing: 0;
	text-wrap: balance;
}

h3 {
	margin-bottom: 12px;
	font-size: clamp(1.25rem, 1.8vw, 1.72rem);
	line-height: 1.08;
	letter-spacing: 0;
	text-wrap: balance;
}

.hero p:not(.eyebrow),
.archive-header p,
.entry-header p {
	max-width: 620px;
	color: var(--muted);
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

.hero-actions {
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
}

.text-link,
.feature-link {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	color: #d986ff;
	font-weight: 800;
}

.feature-link {
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-left: auto;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	font-size: 1.5rem;
}

.button-link {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	margin-top: 8px;
	padding: 0 16px;
	border: 1px solid var(--ink);
	border-radius: var(--pill);
	background: var(--ink);
	color: var(--bg);
	font-weight: 800;
}

.search-form {
	display: flex;
	width: min(100%, 620px);
	gap: 10px;
	margin-top: 28px;
}

.search-form label {
	flex: 1;
}

.search-field {
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--pill);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
		rgba(8, 10, 18, 0.68);
	color: var(--ink);
	font: inherit;
	outline: none;
}

.search-field::placeholder {
	color: rgba(216, 205, 235, 0.58);
}

.search-submit {
	min-height: 48px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--pill);
	background: linear-gradient(135deg, #b748ff, #6c2cff);
	color: #fff;
	font: inherit;
	font-weight: 850;
	cursor: pointer;
}

.section-band,
.apps-band {
	position: relative;
	overflow: hidden;
	padding: 56px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 30px;
	background:
		radial-gradient(circle at 88% 12%, rgba(155, 66, 255, 0.14), transparent 20rem),
		linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
		rgba(8, 10, 18, 0.62);
	box-shadow: 0 22px 72px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.09);
	backdrop-filter: blur(16px) saturate(125%);
}

.archive-header,
.entry {
	margin: 36px 0 42px;
	padding: 44px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background:
		radial-gradient(circle at 82% 12%, rgba(155, 66, 255, 0.18), transparent 18rem),
		linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
		rgba(12, 13, 24, 0.64);
	box-shadow: 0 18px 58px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(18px) saturate(135%);
}

.archive-main,
.page-main,
.article-main {
	padding-top: 118px;
}

.archive-header,
.page-entry {
	position: relative;
	overflow: hidden;
	border-radius: 32px;
}

.archive-header::before,
.page-entry::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: linear-gradient(180deg, black, transparent 76%);
	opacity: 0.42;
}

.archive-header > *,
.page-entry > * {
	position: relative;
	z-index: 1;
}

.archive-header h1,
.page-hero h1 {
	max-width: 920px;
	font-size: clamp(2.9rem, 6vw, 5.7rem);
	line-height: 0.98;
}

.archive-header p:not(.eyebrow),
.page-hero p:not(.eyebrow) {
	max-width: 760px;
	color: var(--muted-strong);
	font-size: clamp(1.05rem, 1.8vw, 1.28rem);
}

.archive-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.archive-meta span,
.archive-meta a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: var(--pill);
	background: rgba(255, 255, 255, 0.055);
	color: var(--muted-strong);
	font-size: 0.86rem;
	font-weight: 780;
}

.archive-meta a {
	color: #eba0ff;
}

.category-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.category-cloud a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--pill);
	background: rgba(255, 255, 255, 0.045);
	color: var(--ink);
	font-weight: 760;
}

.category-cloud span {
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(155, 66, 255, 0.22);
	color: #eba0ff;
	font-size: 0.78rem;
}

.archive-results {
	display: grid;
	gap: 28px;
}

.archive-results .post-grid {
	margin: 0;
}

.page-main {
	max-width: 1040px;
}

.page-entry {
	margin-bottom: 0;
	padding: 56px 58px;
}

.page-hero {
	margin-bottom: 36px;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-entry .entry-content {
	max-width: 790px;
	margin-inline: 0;
	font-size: 1.08rem;
}

.page-entry .entry-content h2:first-child {
	margin-top: 0;
}

.page-entry .entry-content h2 {
	padding-top: 0.25em;
}

.project-entry {
	padding-top: clamp(40px, 6vw, 84px);
	overflow: hidden;
}

.project-entry .page-hero,
.project-entry .entry-content {
	margin-inline: 0;
}

.page-cover,
.project-cover {
	margin: 0 -58px 42px;
}

.page-cover img,
.project-cover img {
	aspect-ratio: 16 / 8;
}

.not-found-entry .search-form {
	margin-top: 24px;
}

.site-main > .post-grid {
	margin: 36px 22px 0;
}

.latest-note {
	position: relative;
	isolation: isolate;
	max-width: none;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(193, 107, 255, 0.42);
	border-radius: 30px;
	background:
		radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.16), transparent 16rem),
		radial-gradient(circle at 72% 86%, rgba(155, 66, 255, 0.36), transparent 18rem),
		linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
		rgba(27, 22, 49, 0.66);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(24px) saturate(145%);
}
.latest-note > a { position:relative; overflow:hidden; }
.latest-note-media { position:absolute; inset:0 0 0 auto; width:42%; margin:0; overflow:hidden; opacity:.72; mask-image:linear-gradient(90deg,transparent 0%,#000 35%); }
.latest-note-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.08); transform:scale(1.06); transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.latest-note:hover .latest-note-media img { transform:scale(1.12) rotate(1deg); }
.latest-note-orbit { display:none; }
.latest-note > a > :not(.latest-note-media) { position:relative; z-index:1; max-width:62%; }

.latest-note::after {
	position: absolute;
	inset: -80px auto auto -18%;
	z-index: 0;
	width: 56%;
	height: 140px;
	pointer-events: none;
	content: "";
	background: linear-gradient(180deg, rgba(5, 7, 13, 0.68), transparent);
	filter: blur(18px);
}

.latest-note::before {
	position: absolute;
	inset: 1px;
	z-index: 0;
	pointer-events: none;
	content: "";
	border-radius: 29px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%, rgba(211, 72, 255, 0.12));
}

.latest-note a {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 18px;
	padding: 48px 56px 52px;
	color: var(--ink);
}

.latest-note h2 {
	max-width: 820px;
	font-size: clamp(2.45rem, 4.2vw, 4.55rem);
	line-height: 0.98;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.latest-note p {
	max-width: 760px;
	margin: 0;
	color: var(--muted);
	font-size: clamp(1.08rem, 1.8vw, 1.38rem);
	line-height: 1.55;
}

.latest-note strong {
	margin-top: 10px;
	color: #eba0ff;
	font-size: 1.05rem;
}

.section-heading {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: end;
	margin-bottom: 26px;
}

.topic-grid,
.post-grid,
.project-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.project-strip {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.topic-card,
.content-card,
.all-apps-link {
	border: 1px solid var(--line);
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)),
		rgba(15, 15, 27, 0.62);
	box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(18px) saturate(135%);
}

.topic-card {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
	color: var(--ink);
	font-weight: 800;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.topic-card small {
	color: #d986ff;
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
}

.topic-card:hover {
	transform: translateY(-2px);
	border-color: var(--line-strong);
	background: rgba(155, 66, 255, 0.16);
}

.feature-banner {
	position: relative;
	min-height: 280px;
	margin: 0;
	padding: 48px 56px;
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: 30px;
	background:
		radial-gradient(circle at 72% 36%, rgba(155, 66, 255, 0.64), transparent 14rem),
		radial-gradient(circle at 54% 110%, rgba(78, 30, 168, 0.84), transparent 20rem),
		linear-gradient(135deg, rgba(33, 21, 62, 0.96), rgba(6, 8, 16, 0.94));
	box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.feature-banner::after {
	position: absolute;
	right: 8%;
	bottom: -42%;
	width: 390px;
	height: 390px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	content: "";
	background: radial-gradient(circle, rgba(155, 66, 255, 0.5), rgba(7, 9, 16, 0.15) 64%, transparent 65%);
}

.feature-banner > * {
	position: relative;
	z-index: 1;
}

.feature-banner p:not(.eyebrow) {
	max-width: 520px;
	color: var(--muted);
	font-size: 1.1rem;
}

.content-card {
	position: relative;
	overflow: hidden;
	min-height: 100%;
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.content-card:hover {
	transform: translateY(-4px);
	border-color: var(--line-strong);
	box-shadow: 0 26px 64px rgba(0, 0, 0, 0.38), 0 0 34px rgba(155, 66, 255, 0.12);
}

.content-card a {
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 100%;
}

.content-card figure {
	position: relative;
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
	background: #16111f;
}

.content-card figure::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	background: linear-gradient(180deg, transparent 35%, rgba(5, 7, 13, 0.9));
}

.content-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-placeholder {
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 70% 18%, rgba(211, 72, 255, 0.42), transparent 12rem),
		radial-gradient(circle at 18% 82%, rgba(108, 44, 255, 0.38), transparent 10rem),
		linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
		#090b14;
}

.card-placeholder span {
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 900;
	line-height: 1;
	text-shadow: 0 0 32px rgba(211, 72, 255, 0.5);
}

.content-card figure + div {
	margin-top: -118px;
	background: linear-gradient(180deg, transparent, rgba(5, 7, 13, 0.72) 20%, rgba(5, 7, 13, 0.94));
}

.content-card div {
	position: relative;
	display: flex;
	flex-direction: column;
	align-self: end;
	padding: 20px;
}

.content-card p {
	color: var(--muted);
}

.content-card h3 {
	color: #fff;
}

.post-grid .content-card {
	min-height: 482px;
}

.post-grid .content-card figure {
	aspect-ratio: 16 / 10;
}

.post-grid .content-card h3,
.post-grid .content-card p:not(.card-meta) {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.post-grid .content-card h3 {
	min-height: 3.24em;
	-webkit-line-clamp: 3;
}

.post-grid .content-card p:not(.card-meta) {
	margin-bottom: 0;
	-webkit-line-clamp: 4;
}

.card-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	color: #d986ff;
	font-size: 0.68rem;
}

.recent-list {
	display: grid;
	margin-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.recent-row {
	display: grid;
	grid-template-columns: minmax(90px, 0.6fr) minmax(0, 2fr) auto;
	gap: 18px;
	align-items: center;
	min-height: 72px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--ink);
}

.recent-row__label,
.recent-row__meta {
	color: #cfa6ff;
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.68rem;
	font-weight: 750;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.recent-row__title {
	overflow: hidden;
	font-size: 1.02rem;
	font-weight: 820;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recent-row__meta {
	color: rgba(216, 205, 235, 0.72);
	text-align: right;
}

.recent-row:hover .recent-row__title {
	color: #eba0ff;
}

.narrow {
	max-width: 900px;
}

.article-main {
	max-width: 1040px;
}

.single-entry {
	position: relative;
	overflow: hidden;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 34px;
	background:
		radial-gradient(circle at 88% 4%, rgba(155, 66, 255, 0.22), transparent 24rem),
		linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
		rgba(8, 10, 18, 0.68);
	box-shadow: 0 28px 86px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(16px) saturate(128%);
}

.single-hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
	padding: 34px 58px 14px;
}

.single-hero::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(rgba(255, 255, 255, 0.034) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(180deg, black, transparent 58%);
	opacity: 0.34;
}

.single-hero__copy,
.article-footer {
	position: relative;
	z-index: 1;
}

.single-hero h1 {
	max-width: 920px;
	margin-bottom: 18px;
	font-size: clamp(2.65rem, 4.5vw, 4.85rem);
	line-height: 1;
}

.single-hero__copy > p:not(.eyebrow) {
	max-width: 720px;
	margin: 26px 0 0;
	color: var(--muted-strong);
	font-size: clamp(1.08rem, 1.8vw, 1.34rem);
}

.article-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	color: rgba(216, 205, 235, 0.78);
}

.article-footer {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
		rgba(18, 16, 34, 0.64);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
	backdrop-filter: blur(18px) saturate(140%);
}

.article-facts span {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0;
	border-radius: var(--pill);
	color: inherit;
	font-size: 0.86rem;
	font-weight: 780;
}

.article-facts span + span::before {
	width: 4px;
	height: 4px;
	margin-right: 14px;
	border-radius: 50%;
	background: rgba(207, 166, 255, 0.66);
	content: "";
}

.author-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

.author-card img {
	width: 58px;
	height: 58px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
}

.author-card span,
.share-block > span,
.taxonomy-group > span {
	display: block;
	margin: 0 0 4px;
	color: #cfa6ff;
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.66rem;
	font-weight: 750;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.author-card strong {
	display: block;
	color: var(--ink);
	font-weight: 820;
}

.author-card time {
	display: block;
	color: rgba(216, 205, 235, 0.68);
	font-size: 0.86rem;
}

.entry-cover {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.entry-cover img {
	width: 100%;
	height: clamp(280px, 34svh, 420px);
	object-fit: cover;
}

.entry-cover::after {
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	pointer-events: none;
	content: "";
	background: linear-gradient(180deg, transparent, rgba(8, 10, 18, 0.9));
}

.article-indexes {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
	gap: 34px;
	margin: 8px 58px 0;
	padding: 30px 0 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.105);
}

.article-indexes::before {
	position: absolute;
	top: -1px;
	left: 0;
	width: min(240px, 42%);
	height: 1px;
	content: "";
	background: linear-gradient(90deg, rgba(211, 72, 255, 0.84), transparent);
}

.article-index h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	font-size: clamp(1.35rem, 2vw, 2rem);
	letter-spacing: 0;
}

.article-index h2::before {
	width: 12px;
	height: 12px;
	border-radius: 4px;
	content: "";
	background: linear-gradient(135deg, #fff, #d986ff 42%, #7c3cff);
	box-shadow: 0 0 18px rgba(211, 72, 255, 0.42);
	transform: rotate(45deg);
}

.article-index ol,
.category-index__posts {
	margin: 0;
	list-style: none;
}

.article-index--toc ol {
	display: grid;
	gap: 14px;
	padding: 2px 0 2px 22px;
	border-left: 2px solid rgba(211, 72, 255, 0.32);
	background: linear-gradient(180deg, rgba(211, 72, 255, 0.12), transparent 55%) left / 2px 100% no-repeat;
}

.article-index--toc li {
	font-size: clamp(1rem, 1.25vw, 1.16rem);
	font-weight: 720;
	line-height: 1.35;
}

.article-index--toc .is-level-3 {
	padding-left: 18px;
	color: rgba(216, 205, 235, 0.76);
	font-size: 0.96rem;
}

.article-index a {
	color: rgba(247, 242, 255, 0.9);
}

.article-index a:hover {
	color: #eba0ff;
}

.article-index--categories ol {
	display: grid;
	gap: 12px;
	padding: 0;
}

.category-index__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	min-height: 48px;
	color: var(--ink);
	font-size: clamp(1rem, 1.35vw, 1.2rem);
	font-weight: 820;
}

.category-index__number {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, #28b5ff, #7c3cff);
	color: #fff;
	font-size: 0.92rem;
	font-weight: 900;
	box-shadow: 0 10px 24px rgba(124, 60, 255, 0.24);
}

.article-index--categories li:nth-child(2n) .category-index__number {
	background: linear-gradient(135deg, #f000b8, #b943ff);
}

.article-index--categories li:nth-child(3n) .category-index__number {
	background: linear-gradient(135deg, #ff342e, #ff008a);
}

.article-index--categories li:nth-child(4n) .category-index__number {
	background: linear-gradient(135deg, #50dc8a, #18a957);
}

.article-index--categories li.is-current .category-index__link {
	color: #fff;
}

.category-index__posts {
	display: grid;
	gap: 9px;
	margin: 8px 0 10px 16px;
	padding: 4px 0 4px 32px;
	border-left: 2px solid rgba(211, 72, 255, 0.28);
}

.category-index__posts li {
	color: rgba(216, 205, 235, 0.78);
	font-size: 0.94rem;
	font-weight: 650;
	line-height: 1.35;
}

.article-layout {
	padding: 32px 58px 52px;
}

.share-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.share-links a,
.share-links button {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.065);
	color: var(--ink);
	font: inherit;
	font-weight: 850;
	cursor: pointer;
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.share-links a:hover,
.share-links button:hover,
.share-links button.is-copied {
	transform: translateY(-2px);
	border-color: var(--line-strong);
	background: rgba(155, 66, 255, 0.18);
}

.entry-header {
	margin-bottom: 34px;
}

.entry-header h1 {
	font-size: clamp(2.7rem, 6vw, 5.8rem);
	color: var(--ink);
}

.entry-meta {
	gap: 14px;
}

.entry-content {
	max-width: 760px;
	margin-inline: auto;
	color: #e8e1f5;
	font-size: 1.08rem;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > * {
	max-width: 760px;
}

.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure,
.entry-content > .wp-block-image {
	max-width: 100%;
}

.entry-content a {
	color: #d986ff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 2em;
	color: var(--ink);
	scroll-margin-top: 132px;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content table,
.entry-content figure,
.entry-footer {
	margin-bottom: 1.25em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.35em;
}

.entry-content li + li {
	margin-top: 0.42em;
}

.entry-content hr {
	max-width: 100%;
	height: 1px;
	margin: 2.2em 0;
	border: 0;
	background: linear-gradient(90deg, transparent, rgba(211, 72, 255, 0.42), transparent);
}

.entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	text-align: left;
}

.entry-content th {
	color: var(--ink);
	background: rgba(155, 66, 255, 0.12);
}

.entry-content .wp-block-button__link {
	border-radius: var(--pill);
	background: linear-gradient(135deg, #b748ff, #6c2cff);
	box-shadow: 0 0 24px rgba(155, 66, 255, 0.38);
	color: #fff;
	font-weight: 850;
}

.entry-content blockquote {
	margin: 2em 0;
	padding: 22px;
	border-left: 4px solid var(--accent);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.055);
	color: var(--ink);
	font-size: 1.2rem;
}

.entry-content code {
	padding: 0.12em 0.35em;
	border-radius: 4px;
	background: rgba(155, 66, 255, 0.16);
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
}

.entry-content pre {
	overflow: auto;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #02040a;
	color: var(--ink);
}

.tag-list {
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

.tag-list a {
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: rgba(255, 255, 255, 0.055);
	color: var(--muted);
	font-size: 0.86rem;
	font-weight: 700;
}

.article-taxonomy {
	display: grid;
	gap: 16px;
	align-self: start;
}

.taxonomy-group > span {
	margin-bottom: 9px;
}

.taxonomy-group--categories .tag-list a {
	border-color: rgba(211, 72, 255, 0.38);
	background:
		linear-gradient(135deg, rgba(211, 72, 255, 0.16), rgba(124, 60, 255, 0.08)),
		rgba(255, 255, 255, 0.06);
	color: #f3dcff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.taxonomy-group--tags .tag-list a {
	border-color: rgba(255, 255, 255, 0.105);
	background: rgba(255, 255, 255, 0.038);
	color: rgba(216, 205, 235, 0.72);
	font-size: 0.8rem;
}

.single-entry > .entry-footer {
	margin: 0 58px 52px;
}

.article-footer {
	display: grid;
	grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.2fr) auto;
	gap: 22px;
	align-items: center;
	padding: 24px 0 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

.article-taxonomy .tag-list {
	margin-top: 0;
}

.share-block {
	display: grid;
	gap: 8px;
	justify-items: end;
}

.related-posts {
	margin-top: 24px;
}

.reveal-in {
	animation: fb-reveal 620ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
	animation-delay: var(--delay, 0ms);
}

@keyframes fb-reveal {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.985);
		filter: blur(8px);
	}

	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveal-in {
		animation: none;
	}
}

.apps-band h2 {
	max-width: 700px;
}

.apps-band .section-heading {
	margin-bottom: 34px;
}

.apps-band .project-strip {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	align-items: stretch;
}

.apps-band .content-card {
	min-height: 360px;
}

.apps-band .content-card a {
	grid-template-rows: 190px 1fr;
}

.apps-band .content-card figure {
	aspect-ratio: auto;
	height: 190px;
	position:relative;
	 isolation:isolate;
}
.apps-band .content-card figure::before { content:""; position:absolute; inset:12% 18%; z-index:-1; background:radial-gradient(circle,rgba(170,90,255,.55),transparent 68%); filter:blur(28px); transform:scale(1.25); }
.apps-band .content-card figure img { transform:translateY(4px) rotate(1deg) scale(1.06); filter:drop-shadow(0 18px 22px rgba(0,0,0,.45)); transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease; }
.apps-band .content-card:hover figure img { transform:translateY(-8px) rotate(-2deg) scale(1.1); filter:drop-shadow(0 28px 28px rgba(0,0,0,.55)); }

.apps-band .content-card figure + div {
	margin-top: -62px;
	background: linear-gradient(180deg, transparent, rgba(5, 7, 13, 0.78) 22%, rgba(5, 7, 13, 0.96));
}

.apps-band .content-card h3 {
	max-width: 520px;
	font-size: clamp(1.7rem, 2.8vw, 2.6rem);
}

.apps-band .content-card p:not(.card-meta) {
	display: -webkit-box;
	overflow: hidden;
	margin-bottom: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.all-apps-link {
	display: grid;
	place-items: center;
	min-height: 100%;
	padding: 20px;
	color: var(--ink);
	font-weight: 800;
	text-align: center;
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.all-apps-link:hover {
	transform: translateY(-4px);
	border-color: var(--line-strong);
	box-shadow: 0 24px 54px rgba(0, 0, 0, 0.32), 0 0 28px rgba(155, 66, 255, 0.14);
}

.all-apps-link span {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: #d986ff;
	font-size: 1.35rem;
}

.navigation.pagination {
	margin: 34px 0;
}

.nav-links {
	flex-wrap: wrap;
	gap: 8px;
}

.page-numbers {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: rgba(255, 255, 255, 0.055);
	font-weight: 700;
}

.page-numbers.current {
	background: var(--ink);
	color: var(--bg);
}

.empty-state {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.055);
}

.home-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	margin: 0;
	padding: 34px 40px;
	border: 1px solid rgba(193, 107, 255, 0.32);
	border-radius: 30px;
	background:
		radial-gradient(circle at 8% 50%, rgba(211, 72, 255, 0.2), transparent 18rem),
		linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
		rgba(18, 16, 34, 0.68);
	box-shadow: 0 22px 64px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(24px) saturate(145%);
}

.home-cta h2 {
	margin-bottom: 10px;
	font-size: clamp(1.6rem, 3vw, 2.65rem);
}

.home-cta p:not(.eyebrow) {
	max-width: 620px;
	margin: 0;
	color: var(--muted-strong);
}

.site-footer {
	display: grid;
	grid-template-columns: auto minmax(180px, 1fr) auto;
	align-items: center;
	gap: 24px;
	padding: 38px 0 52px;
	color: var(--muted);
}

.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--ink);
	font-weight: 800;
}

.footer-brand img {
	width: 42px;
	height: 42px;
	filter: drop-shadow(0 0 16px rgba(211, 72, 255, 0.52));
}

.footer-copy {
	display: grid;
	gap: 5px;
}

.site-footer span {
	display: block;
}

.site-footer small {
	color: rgba(216, 205, 235, 0.64);
}

@media (max-width: 960px) {
	:root {
		--page-gutter: 24px;
	}

	.site-header {
		position: sticky;
		top: 12px;
		right: auto;
		left: auto;
		width: min(var(--max), calc(100% - (var(--page-gutter) * 2)));
		grid-template-columns: auto 1fr;
		align-items: start;
		margin-inline: auto;
	}

	.nav-capsule {
		justify-self: end;
		flex-wrap: wrap;
		justify-content: flex-start;
		border-radius: 24px;
	}

	.site-header > .contact-button {
		grid-column: 2;
		justify-self: end;
		min-height: 48px;
	}

	.hero,
	.apps-band {
		grid-template-columns: 1fr;
	}

	.archive-main,
	.page-main,
	.article-main,
	.home-main {
		padding-top: 24px;
	}

	.single-hero,
	.article-layout,
	.article-indexes {
		grid-template-columns: 1fr;
	}

	.single-hero {
		padding: 36px 34px 12px;
	}

	.article-indexes {
		margin-inline: 34px;
	}

	.article-layout {
		padding: 24px 34px 38px;
	}

	.page-cover,
	.project-cover {
		margin: 0 -34px 34px;
	}

	.entry-cover img {
		height: clamp(220px, 30svh, 320px);
	}

	.hero {
		min-height: 0;
		padding: 42px 34px 0;
	}

	.hero-portrait {
		position: relative;
		right: auto;
		grid-row: 2;
		width: min(100%, 560px);
		margin-inline: auto;
	}

	.latest-note {
		max-width: none;
		border-radius: 24px;
	}

	.site-main > .post-grid {
		margin-inline: 0;
	}

	.topic-grid,
	.post-grid,
	.project-strip,
	.apps-band .project-strip {
		grid-template-columns: 1fr;
	}

	.post-grid .content-card,
	.apps-band .content-card {
		min-height: 0;
	}

	.recent-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.recent-row__meta {
		text-align: left;
	}

	.section-heading,
	.home-cta,
	.site-footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.home-cta,
	.site-footer {
		display: flex;
	}
}

@media (max-width: 620px) {
	:root {
		--page-gutter: 11px;
	}

	.site-header {
		top: 8px;
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.nav-capsule,
	.site-header > .contact-button {
		justify-self: stretch;
	}

	.nav-capsule {
		padding: 14px;
	}

	.site-main {
		gap: 14px;
		padding-top: 24px;
	}

	h1 {
		font-size: clamp(3.1rem, 18vw, 4.6rem);
	}

	.hero,
	.section-band,
	.apps-band,
	.feature-banner {
		padding: 28px 22px;
		border-radius: 22px;
	}

	.single-hero,
	.article-layout,
	.article-indexes {
		border-radius: 22px;
	}

	.single-hero {
		padding: 30px 22px 10px;
	}

	.article-indexes {
		margin-inline: 22px;
		padding-top: 24px;
	}

	.article-layout {
		padding: 22px 22px 34px;
	}

	.page-cover,
	.project-cover {
		margin: 0 -22px 28px;
	}

	.search-form {
		flex-direction: column;
	}

	.single-hero h1 {
		font-size: clamp(2.25rem, 11vw, 3.65rem);
	}

	.article-facts span {
		min-height: 34px;
		font-size: 0.8rem;
	}

	.archive-header,
	.entry {
		margin: 24px 0 32px;
		padding: 28px 22px;
		border-radius: 18px;
	}

	.single-entry {
		padding: 0;
	}

	.single-entry > .entry-footer {
		margin: 0 22px 34px;
	}

	.article-footer {
		grid-template-columns: 1fr;
	}

	.share-block {
		justify-items: start;
	}

	.latest-note a {
		padding: 28px 24px 32px;
	}

	.latest-note h2 {
		font-size: clamp(2rem, 10vw, 3rem);
	}

	.home-cta {
		padding: 24px;
		border-radius: 20px;
	}

	.feature-banner {
		padding: 24px;
	}
}

/* Single article: full image, title, then reading column and right navigation. */
.article-main {
	max-width: 1280px;
}

.single-entry > .entry-cover img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
}

.single-entry > .entry-cover::after {
	display: none;
}

.single-entry > .single-hero {
	padding-top: 40px;
	padding-bottom: 24px;
}

.single-entry > .article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 48px;
	align-items: start;
}

.article-layout > .entry-content {
	width: 100%;
	min-width: 0;
}

.article-layout > .article-indexes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
	margin: 0;
	padding: 4px 0 0 24px;
	border-top: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.article-layout > .article-indexes::before {
	display: none;
}

.article-layout .article-index h2 {
	font-size: 1.08rem;
	line-height: 1.4;
}

@media (max-width: 1000px) {
	.single-entry > .article-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.article-layout > .article-indexes {
		padding: 28px 0 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
}