:root {
	--sm-accent-1: var(--wp--preset--color--accent-1);
	--sm-accent-2: var(--wp--preset--color--accent-2);
	--sm-accent-3: var(--wp--preset--color--accent-3);
	--sm-accent-4: var(--wp--preset--color--accent-4);
	--sm-accent-5: var(--wp--preset--color--accent-5);
	--sm-fg-1: var(--wp--preset--color--contrast);
	--sm-fg-2: var(--wp--preset--color--accent-4);
	--sm-fg-inverse: var(--wp--preset--color--base);
	--sm-bg-1: var(--wp--preset--color--base);
	--sm-border: color-mix(in srgb, currentColor 20%, transparent);
	--sm-dark-bg: #111;
	--sm-dark-fg: #eceae5;
	--sm-placeholder-bg: linear-gradient(135deg, var(--sm-accent-1) 0%, var(--sm-accent-4) 100%);
	--sm-font-sans: var(--wp--preset--font-family--manrope);
	--sm-font-mono: var(--wp--preset--font-family--fira-code);
	--sm-space-20: var(--wp--preset--spacing--20);
	--sm-space-30: var(--wp--preset--spacing--30);
	--sm-space-40: var(--wp--preset--spacing--40);
	--sm-space-50: var(--wp--preset--spacing--50);
	--sm-space-60: var(--wp--preset--spacing--60);
	--sm-space-70: var(--wp--preset--spacing--70);
	--sm-ls-tight: -0.5px;
	--sm-ls-caps: 1.4px;
	--sm-radius-xs: 0.25rem;
	--sm-radius-round: 3.125rem;
	--sm-transition-default: all 0.2s ease;

	--sm-text-prose: 17px;     /* long-form reading: project, teaching, about bio */
	--sm-text-article: 19px;   /* blog article body — densest surface, keeps its own voice */
	--sm-text-micro: 11px;     /* mono uppercase eyebrows/labels */

	--sm-ls-h-snug: -0.2px;    /* section h2 */
	--sm-ls-h-tight: -0.4px;   /* feature h2 (outro/related) */

	--sm-h2-section: clamp(24px, 2.6vw, 32px);
	--sm-h2-feature: clamp(28px, 3vw, 40px);
}

.home-wrap { max-width: 1340px; margin: 0 auto; padding: 0 var(--sm-space-50); }
.home-wrap.medium { max-width: 1100px; }
.home-wrap.narrow { max-width: 940px; }

.sm-site-header {
	padding: var(--sm-space-40) 0;
	display: flex; align-items: center; justify-content: space-between;
}
.sm-wordmark {
	font-size: 22px; font-weight: 700;
	letter-spacing: var(--sm-ls-tight);
	text-decoration: none; color: var(--sm-fg-1);
}
.sm-wordmark .dot { color: var(--sm-accent-1); }
.sm-site-nav { display: flex; gap: 28px; font-size: 15px; }
.sm-site-nav a {
	color: var(--sm-fg-1); text-decoration: none; font-weight: 300;
	padding-bottom: 4px;
}
.sm-site-nav a.active,
.sm-site-nav a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--sm-accent-1);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.sm-hero {
	padding: var(--sm-space-50) 0;
	border-bottom: 1px solid var(--sm-border);
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: var(--sm-space-60);
	align-items: stretch;
}
.sm-hero .editorial {
	display: flex; flex-direction: column; justify-content: center;
	padding: var(--sm-space-30) 0;
}
/* Mono label, used for the contact form's status panels (error / confirmation). */
.v-eyebrow {
	font-family: var(--sm-font-mono);
	font-size: var(--sm-text-micro);
	color: var(--sm-fg-2);
	text-transform: uppercase;
	letter-spacing: var(--sm-ls-caps);
	font-weight: 500;
	flex-shrink: 0;
}
.sm-hero h1 {
	font-size: clamp(40px, 5vw, 68px);
	line-height: 1.02;
	letter-spacing: -0.9px;
	font-weight: 400;
	margin: 0 0 var(--sm-space-40);
}
.sm-hero h1 em { font-style: normal; color: var(--sm-accent-1); }
.sm-hero .editorial p {
	font-size: clamp(17px, 1.3vw, 20px);
	line-height: 1.45; font-weight: 300;
	max-width: 48ch; margin: 0 0 var(--sm-space-40);
}
.sm-hero .cta { display: flex; gap: 10px; flex-wrap: wrap; }

.sm-btn {
	font-family: var(--sm-font-sans);
	font-size: 15px; font-weight: 400;
	padding: 12px 26px;
	border-radius: var(--sm-radius-round);
	border: 1px solid var(--sm-fg-1);
	background: var(--sm-fg-1); color: var(--sm-fg-inverse);
	text-decoration: none;
	cursor: pointer;
	transition: var(--sm-transition-default);
	white-space: nowrap;
	display: inline-block;
}
.sm-btn:hover { background: var(--sm-accent-1); color: var(--sm-fg-1); border-color: var(--sm-accent-1); }
.sm-btn.ghost { background: none; color: var(--sm-fg-1); }
.sm-btn.ghost:hover { background: var(--sm-fg-1); color: var(--sm-fg-inverse); }
.sm-btn.sm { font-size: 14px; padding: 10px 22px; }
.sm-btn.arrow::after { content: "\2192"; margin-left: 10px; transition: transform 0.2s ease; display: inline-block; }
.sm-btn.arrow:hover::after { transform: translateX(4px); }
.sm-btn:disabled,
.sm-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

.sm-foot {
	position: absolute; width: 20px; height: 28px;
	opacity: 0.09; pointer-events: none;
	color: var(--sm-fg-1);
	fill: currentColor;
}
.sm-trail {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}
.sm-trail .sm-foot { position: absolute; }
.home-wrap,
.sm-site-header,
.sm-hero,
.sm-now,
.sm-blog-section,
.sm-site-footer,
.sm-section {
	position: relative;
	z-index: 1;
}

.sm-now {
	padding: 18px 0;
	border-bottom: 1px solid var(--sm-border);
	display: flex; align-items: center; gap: 16px;
	font-family: var(--sm-font-mono); font-size: 13px;
	color: var(--sm-fg-2);
}
.sm-now .live-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--sm-accent-1);
	animation: sm-pulse 2.4s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes sm-pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
.sm-now b { color: var(--sm-fg-1); font-weight: 500; }
.sm-now .sep { margin: 0 4px; color: var(--sm-border); }
.sm-now .date { margin-left: auto; flex-shrink: 0; }

/* Shared section header: eyebrow/label + h2, optional trailing meta.
   Layout-only base; pages opt into top spacing (.spaced) or a top rule
   (.bordered) and the larger h2 (.feature). Trailing meta (.right/.subhead/
   .all) is pushed right; an inner .rule spacer works too. */
.sm-section-head {
	display: flex; align-items: baseline; flex-wrap: wrap;
	gap: var(--sm-space-30);
	margin-bottom: var(--sm-space-40);
}
.sm-section-head > .right,
.sm-section-head > .subhead,
.sm-section-head > .all { margin-left: auto; }
.sm-section-head.spaced { padding-top: var(--sm-space-60); }
.sm-section-head.bordered {
	border-top: 1px solid var(--sm-border);
	padding-top: var(--sm-space-40);
}
.sm-section-head h2 {
	font-size: var(--sm-h2-section);
	font-weight: 400; letter-spacing: var(--sm-ls-h-snug);
	margin: 0;
}
.sm-section-head.feature h2 {
	font-size: var(--sm-h2-feature);
	letter-spacing: var(--sm-ls-h-tight);
}
.sm-section-head .right {
	font-family: var(--sm-font-mono); font-size: 13px;
	color: var(--sm-fg-2); text-decoration: none;
	white-space: nowrap;
}
.sm-section-head .right:hover { color: var(--sm-accent-1); }

.sm-projects {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--sm-space-50) 20px;
	padding-bottom: var(--sm-space-60);
}
.sm-proj {
	display: flex; flex-direction: column; gap: 14px;
	text-decoration: none; color: inherit;
	transition: opacity .8s;
}
.sm-proj:hover { opacity: 0.8; }
.sm-proj .cover {
	aspect-ratio: 3/2;
	position: relative; overflow: hidden;
	background: var(--sm-dark-bg);
}
.sm-proj .cover .fill {
	position: absolute; inset: 0;
	transition: transform .8s;
	background-size: cover; background-position: center;
}
.sm-proj:hover .cover .fill { transform: scale(1.08); }
.sm-proj .year {
	position: absolute; top: 7px; right: 0;
	background: var(--sm-accent-1); color: var(--sm-fg-1);
	padding: 7px 12px;
	font-family: var(--sm-font-mono); font-size: 12px; font-weight: 500;
	z-index: 1;
}
.sm-proj h3 {
	margin: 0; font-size: 22px; font-weight: 400;
	letter-spacing: -0.1px; line-height: 1.2;
}
.sm-proj .terms {
	font-size: 13px; color: var(--sm-fg-2); font-weight: 300;
}

.sm-terminal {
	--term-bar: #1c1c1c;
	--term-chips: #161616;
	--term-rule: #2a2a2a;
	--term-rule-soft: #2e2e2e;
	--term-thumb: #333;
	--term-led-off: #3a3a3a;
	--term-fg-dim: #aaa;
	--term-fg-faded: #777;
	--term-fg-hint: #555;
	--term-accent-purple: #a78bfa;
	--term-accent-green: #8fd67a;

	background: var(--sm-dark-bg); color: var(--sm-dark-fg);
	font-family: var(--sm-font-mono); font-size: 14px;
	line-height: 1.65;
	border-radius: var(--sm-radius-xs);
	overflow: hidden;
	box-shadow: 0 10px 40px color-mix(in srgb, var(--sm-accent-3) 12%, transparent);
	display: flex; flex-direction: column;
	min-height: 440px;
	max-height: 560px;
}
.sm-terminal .bar {
	background: var(--term-bar);
	padding: 10px 16px;
	display: flex; align-items: center; gap: 8px;
	border-bottom: 1px solid var(--term-rule);
	flex-shrink: 0;
}
.sm-terminal .bar .led {
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--term-led-off);
}
.sm-terminal .bar .led.on { background: var(--sm-accent-1); }
.sm-terminal .bar .title { margin-left: 10px; font-size: 12px; color: var(--term-fg-faded); }
.sm-terminal .bar .hint { margin-left: auto; font-size: 11px; color: var(--term-fg-hint); }
.sm-terminal .bar .hint kbd {
	background: var(--term-rule); color: var(--term-fg-dim);
	padding: 2px 6px; border-radius: var(--sm-radius-xs);
	border: 1px solid var(--term-led-off);
	font-family: inherit; font-size: 10px;
}
.sm-terminal .body {
	padding: 18px 22px 16px;
	flex: 1;
	overflow-y: auto;
	scroll-behavior: smooth;
	position: relative; /* contains the game's absolutely-positioned capture input */
}
.sm-terminal .body::-webkit-scrollbar { width: 8px; }
.sm-terminal .body::-webkit-scrollbar-track { background: var(--term-bar); }
.sm-terminal .body::-webkit-scrollbar-thumb { background: var(--term-thumb); border-radius: var(--sm-radius-xs); }

.term-line { white-space: pre-wrap; word-break: break-word; }
.term-line .prompt { color: var(--sm-accent-1); }
.term-line .dim { color: var(--term-fg-faded); }
.term-line .cmd { color: var(--sm-dark-fg); }
.term-line .hl { color: var(--sm-accent-1); }
.term-line .pink { color: var(--sm-accent-2); }
.term-line .purple { color: var(--term-accent-purple); }
.term-line .green { color: var(--term-accent-green); }
.term-line a { color: var(--sm-accent-1); text-decoration: underline; text-underline-offset: 3px; }
.term-line pre.ascii {
	color: var(--sm-accent-1);
	line-height: 1.1;
	font-size: 11px;
	margin: 0;
	background: transparent;
	padding: 0;
}
/* neofetch keeps a neutral base so values read normally; the logo and keys
   are coloured by their own spans (.hl / .green). */
.term-line pre.neofetch { color: var(--sm-dark-fg); }

.term-input-line {
	display: flex; align-items: center; gap: 8px;
	margin-top: 4px;
}
.term-input {
	flex: 1;
	background: transparent; border: 0; outline: none;
	color: var(--sm-dark-fg);
	font-family: var(--sm-font-mono); font-size: 14px;
	caret-color: var(--sm-accent-1);
}

/* App mode (the konami snake game). The capture input must be focusable but
   invisible — and crucially NOT off-screen (left:-9999px), or focusing it makes
   the browser scroll the page down to reveal it. The clip pattern hides it in
   place, inside the now-relative terminal body, so focus never moves the page. */
.term-capture {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	opacity: 0;
}
.term-app { margin-top: 4px; }
.term-game {
	margin: 0;
	font-family: var(--sm-font-mono); font-size: 14px;
	line-height: 1.15;
	color: var(--sm-dark-fg);
	white-space: pre;
}

.term-chips {
	padding: 10px 16px 14px;
	background: var(--term-chips);
	border-top: 1px solid var(--term-rule);
	display: flex; flex-wrap: wrap; gap: 6px;
	flex-shrink: 0;
}
.term-chip {
	background: none;
	border: 1px solid var(--term-rule-soft);
	color: var(--term-fg-dim);
	font-family: var(--sm-font-mono); font-size: 11px;
	padding: 4px 10px;
	border-radius: 3.125rem;
	cursor: pointer;
	transition: var(--sm-transition-default);
}
.term-chip:hover { border-color: var(--sm-accent-1); color: var(--sm-accent-1); }

.sm-blog-section {
	background: var(--sm-accent-5);
	padding: var(--sm-space-60) 0;
	margin-top: var(--sm-space-60);
}
.sm-blog-row {
	display: grid;
	grid-template-columns: 140px 1fr auto auto;
	gap: var(--sm-space-40);
	padding: 22px 0;
	border-bottom: 1px solid var(--sm-border);
	align-items: baseline;
	text-decoration: none; color: inherit;
	transition: var(--sm-transition-default);
}
.sm-blog-row:last-child { border-bottom: 0; }
.sm-blog-row:hover { padding-left: 10px; }
.sm-blog-row:hover .title { color: var(--sm-accent-1); }
.sm-blog-row .date {
	font-family: var(--sm-font-mono); font-size: 13px; color: var(--sm-fg-2);
}
.sm-blog-row .title {
	font-size: 22px; font-weight: 400; letter-spacing: -0.1px;
	transition: var(--sm-transition-default);
}
.sm-blog-row .readtime {
	font-family: var(--sm-font-mono); font-size: 12px; color: var(--sm-fg-2);
}
.sm-blog-row .tag {
	font-family: var(--sm-font-mono); font-size: 12px; color: var(--sm-fg-2);
	min-width: 80px; text-align: right;
}

.sm-site-footer {
	padding: var(--sm-space-60) 0 var(--sm-space-40);
	border-top: 1px solid var(--sm-border);
	display: grid; grid-template-columns: 1fr auto auto; gap: var(--sm-space-70);
	align-items: start;
	position: relative;
}
.sm-site-footer .brand .mark {
	font-size: 56px; font-weight: 700; letter-spacing: var(--sm-ls-tight);
}
.sm-site-footer .brand .mark .dot { color: var(--sm-accent-1); }
.sm-site-footer .brand .tag {
	font-size: 15px; color: var(--sm-fg-2); margin-top: 6px;
}
.sm-site-footer .col h5 {
	font-size: 13px; font-weight: 700; letter-spacing: var(--sm-ls-caps);
	text-transform: uppercase;
	margin: 0 0 14px;
}
.sm-site-footer .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sm-site-footer .col a { color: var(--sm-fg-1); text-decoration: none; font-size: 15px; }
.sm-site-footer .col a:hover { text-decoration: underline; text-decoration-color: var(--sm-accent-1); text-underline-offset: 4px; }
.sm-site-footer .finep {
	grid-column: 1 / -1;
	display: flex; justify-content: space-between;
	margin-top: var(--sm-space-50);
	padding-top: 20px;
	border-top: 1px solid var(--sm-border);
	font-family: var(--sm-font-mono); font-size: 12px; color: var(--sm-fg-2);
}

.sm-page-intro {
	padding: var(--sm-space-50) 0 var(--sm-space-30);
	display: flex; align-items: baseline;
	gap: var(--sm-space-40);
	flex-wrap: wrap;
}
.sm-page-intro h1 {
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.05;
	letter-spacing: -0.4px;
	font-weight: 400;
	margin: 0;
}
.sm-page-intro h1 em { font-style: normal; color: var(--sm-accent-1); }
.sm-page-intro .lede {
	font-size: 15px;
	line-height: 1.5; font-weight: 300;
	max-width: 52ch;
	color: var(--sm-fg-2);
	margin: 0;
	flex: 1; min-width: 280px;
}

.sm-filters {
	padding: var(--sm-space-30) 0;
	margin-top: var(--sm-space-30);
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	border-top: 1px solid var(--sm-border);
	border-bottom: 1px solid var(--sm-border);
	font-family: var(--sm-font-mono);
	font-size: 13px;
}
.sm-filters .label {
	color: var(--sm-fg-2);
	margin-right: 6px;
	text-transform: uppercase;
	letter-spacing: var(--sm-ls-caps);
	font-size: 12px;
	font-weight: 500;
}
.sm-filters .chip {
	background: none;
	border: 1px solid var(--sm-border);
	color: var(--sm-fg-1);
	font-family: var(--sm-font-mono);
	font-size: 13px;
	padding: 7px 14px;
	border-radius: var(--sm-radius-round);
	cursor: pointer;
	transition: var(--sm-transition-default);
}
.sm-filters .chip:hover { border-color: var(--sm-fg-1); }
.sm-filters .chip.active {
	background: var(--sm-fg-1); color: var(--sm-fg-inverse);
	border-color: var(--sm-fg-1);
}
.sm-filters .count {
	margin-left: auto; color: var(--sm-fg-2);
	font-size: 13px;
}

.sm-archive-projects {
	padding: var(--sm-space-50) 0 var(--sm-space-70);
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--sm-space-60) 24px;
}
.sm-proj .status {
	position: absolute; top: 7px; left: 7px;
	background: color-mix(in srgb, var(--sm-bg-1) 92%, transparent); color: var(--sm-fg-1);
	padding: 4px 10px;
	font-family: var(--sm-font-mono); font-size: 11px; font-weight: 500;
	z-index: 1;
	text-transform: uppercase; letter-spacing: var(--sm-ls-caps);
}
.sm-proj .status.live::before {
	content: "\25CF"; color: var(--sm-accent-1); margin-right: 6px;
}
.sm-archive-projects .sm-proj { gap: 14px; }
.sm-archive-projects .sm-proj .blurb {
	margin: 0; font-size: 14px; color: var(--sm-fg-2);
	line-height: 1.45; font-weight: 300;
	max-width: 100%;
}
.sm-archive-projects .sm-proj .meta {
	display: flex; gap: 8px; flex-wrap: wrap;
	font-family: var(--sm-font-mono); font-size: 12px;
	color: var(--sm-fg-2);
	margin-top: 2px;
}
.sm-archive-projects .sm-proj .meta .tag {
	border: 1px solid var(--sm-border);
	padding: 2px 8px;
	border-radius: var(--sm-radius-round);
}

.sm-empty {
	grid-column: 1 / -1;
	padding: var(--sm-space-70) 0;
	text-align: center;
	font-family: var(--sm-font-mono);
	color: var(--sm-fg-2);
}

.sm-outro {
	border-top: 1px solid var(--sm-border);
	padding: var(--sm-space-60) 0;
	display: grid; grid-template-columns: 1.4fr 1fr;
	gap: var(--sm-space-60); align-items: center;
}
.sm-outro h2 {
	font-size: var(--sm-h2-feature);
	line-height: 1.05;
	letter-spacing: var(--sm-ls-h-tight);
	font-weight: 400;
	margin: 0;
}
.sm-outro h2 em { font-style: normal; color: var(--sm-accent-1); }
.sm-outro .actions {
	display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}

@media (max-width: 1100px) {
	.sm-archive-projects { grid-template-columns: repeat(2, 1fr); }
	.sm-outro { grid-template-columns: 1fr; }
	.sm-outro .actions { justify-content: flex-start; }
}
@media (max-width: 900px) {
	.sm-hero { grid-template-columns: 1fr; gap: var(--sm-space-40); }
	.sm-terminal { min-height: 380px; }
	.sm-projects { grid-template-columns: repeat(2, 1fr); }
	.sm-blog-row { grid-template-columns: 1fr; gap: 4px; }
	.sm-blog-row .tag, .sm-blog-row .readtime { text-align: left; min-width: 0; }
	.sm-site-footer { grid-template-columns: 1fr 1fr; }
	.sm-site-footer .brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.sm-projects { grid-template-columns: 1fr; }
	.sm-archive-projects { grid-template-columns: 1fr; }
	.sm-site-nav { gap: 16px; font-size: 13px; }
	.sm-now { flex-wrap: wrap; }
	.sm-now .date { margin-left: 0; }
}

/* Global motion guard. Page-local animations that stay scoped (404 footprints)
   keep their own guard; this covers the shared pulses and hover transforms. */
@media (prefers-reduced-motion: reduce) {
	.sm-now .live-dot,
	.t-status.live::before { animation: none; }
	.sm-proj:hover .cover .fill,
	.sm-related .rel:hover .frame { transform: none; }
}